fixed re-exports of Meter in Progress

kobaltedev · Oct 20, 2024 · 5f51307 · 5f51307
1 parent e60d61c
commit 5f51307
Show file tree

Hide file tree

Showing 6 changed files with 79 additions and 61 deletions.
diff --git a/packages/core/src/meter/meter-root.tsx b/packages/core/src/meter/meter-root.tsx
@@ -62,19 +62,18 @@ export interface MeterRootOptions {
 
 export interface MeterRootCommonProps<T extends HTMLElement = HTMLElement> {
 	id: string;
-}
-
-export interface MeterRootRenderProps
-	extends MeterRootCommonProps,
-		MeterDataSet {
-	role: "meter";
+	role: string;
 	"aria-valuenow": number | undefined;
 	"aria-valuemin": number;
 	"aria-valuemax": number;
 	"aria-valuetext": string | undefined;
 	"aria-labelledby": string | undefined;
 }
 
+export interface MeterRootRenderProps
+	extends MeterRootCommonProps,
+		MeterDataSet {}
+
 export type MeterRootProps<
 	T extends ValidComponent | HTMLElement = HTMLElement,
 > = MeterRootOptions & Partial<MeterRootCommonProps<ElementOf<T>>>;
@@ -93,6 +92,8 @@ export function MeterRoot<T extends ValidComponent = "div">(
 			value: 0,
 			minValue: 0,
 			maxValue: 100,
+			role: "meter",
+			indeterminate: false,
 		},
 		props as MeterRootProps,
 	);
@@ -102,6 +103,13 @@ export function MeterRoot<T extends ValidComponent = "div">(
 		"minValue",
 		"maxValue",
 		"getValueLabel",
+		"role",
+		"aria-valuetext",
+		"aria-labelledby",
+		"aria-valuemax",
+		"aria-valuemin",
+		"aria-valuenow",
+		"indeterminate",
 	]);
 
 	const [labelId, setLabelId] = createSignal<string>();
@@ -117,6 +125,9 @@ export function MeterRoot<T extends ValidComponent = "div">(
 	};
 
 	const valueLabel = () => {
+		if (local.indeterminate) {
+			return undefined;
+		}
 		if (local.getValueLabel) {
 			return local.getValueLabel({
 				value: value(),
@@ -150,12 +161,13 @@ export function MeterRoot<T extends ValidComponent = "div">(
 		<MeterContext.Provider value={context}>
 			<Polymorphic<MeterRootRenderProps>
 				as="div"
-				role="meter"
-				aria-valuenow={value()}
+				role={local.role || "meter"}
+				aria-valuenow={local.indeterminate ? undefined : value()}
 				aria-valuemin={local.minValue}
 				aria-valuemax={local.maxValue}
 				aria-valuetext={valueLabel()}
 				aria-labelledby={labelId()}
+				{...dataset()}
 				{...others}
 			/>
 		</MeterContext.Provider>

diff --git a/packages/core/src/progress/progress-fill.tsx b/packages/core/src/progress/progress-fill.tsx
@@ -1,14 +1,18 @@
-import { type JSX, type ValidComponent, splitProps } from "solid-js";
+import {
+	type Component,
+	type ValidComponent,
+	splitProps,
+} from "solid-js";
 
 import { combineStyle } from "@solid-primitives/props";
-import type {
-	MeterFillCommonProps,
-	MeterFillOptions,
-	MeterFillRenderProps,
+import {
+	Meter,
+	type MeterFillCommonProps,
+	type MeterFillOptions,
+	type MeterFillRenderProps,
 } from "../meter";
 import {
 	type ElementOf,
-	Polymorphic,
 	type PolymorphicProps,
 } from "../polymorphic";
 import { type ProgressDataSet, useProgressContext } from "./progress-context";
@@ -39,8 +43,9 @@ export function ProgressFill<T extends ValidComponent = "div">(
 	const [local, others] = splitProps(props as ProgressFillProps, ["style"]);
 
 	return (
-		<Polymorphic<ProgressFillRenderProps>
-			as="div"
+		<Meter.Fill<
+			Component<Omit<ProgressFillRenderProps, keyof MeterFillRenderProps>>
+		>
 			style={combineStyle(
 				{
 					"--kb-progress-fill-width": context.progressFillWidth(),

diff --git a/packages/core/src/progress/progress-label.tsx b/packages/core/src/progress/progress-label.tsx
@@ -1,19 +1,20 @@
 import { mergeDefaultProps } from "@kobalte/utils";
 import {
+	type Component,
 	type ValidComponent,
 	createEffect,
 	onCleanup,
 	splitProps,
 } from "solid-js";
 
-import type {
-	MeterLabelCommonProps,
-	MeterLabelOptions,
-	MeterLabelRenderProps,
+import {
+	Meter,
+	type MeterLabelCommonProps,
+	type MeterLabelOptions,
+	type MeterLabelRenderProps,
 } from "../meter";
 import {
 	type ElementOf,
-	Polymorphic,
 	type PolymorphicProps,
 } from "../polymorphic";
 import { type ProgressDataSet, useProgressContext } from "./progress-context";
@@ -46,14 +47,14 @@ export function ProgressLabel<T extends ValidComponent = "span">(
 		},
 		props as ProgressLabelProps,
 	);
-
 	const [local, others] = splitProps(mergedProps, ["id"]);
 
 	createEffect(() => onCleanup(context.registerLabelId(local.id)));
 
 	return (
-		<Polymorphic<ProgressLabelRenderProps>
-			as="span"
+		<Meter.Label<
+			Component<Omit<ProgressLabelRenderProps, keyof MeterLabelRenderProps>>
+		>
 			id={local.id}
 			{...context.dataset()}
 			{...others}

diff --git a/packages/core/src/progress/progress-root.tsx b/packages/core/src/progress/progress-root.tsx
@@ -9,6 +9,7 @@
 import { clamp, createGenerateId, mergeDefaultProps } from "@kobalte/utils";
 import {
 	type Accessor,
+	type Component,
 	type ValidComponent,
 	createMemo,
 	createSignal,
@@ -17,14 +18,14 @@ import {
 } from "solid-js";
 
 import { createNumberFormatter } from "../i18n";
-import type {
-	MeterRootCommonProps,
-	MeterRootOptions,
-	MeterRootRenderProps,
+import {
+	Meter,
+	type MeterRootCommonProps,
+	type MeterRootOptions,
+	type MeterRootRenderProps,
 } from "../meter";
 import {
 	type ElementOf,
-	Polymorphic,
 	type PolymorphicProps,
 } from "../polymorphic";
 import { createRegisterId } from "../primitives";
@@ -34,7 +35,8 @@ import {
 	type ProgressDataSet,
 } from "./progress-context";
 
-export interface ProgressRootOptions extends MeterRootOptions {
+export interface ProgressRootOptions
+	extends Omit<MeterRootOptions, "indeterminate"> {
 	/** Whether the progress is in an indeterminate state. */
 	indeterminate?: boolean;
 }
@@ -43,12 +45,11 @@ export interface ProgressRootCommonProps<T extends HTMLElement = HTMLElement>
 	extends MeterRootCommonProps {}
 
 export interface ProgressRootRenderProps
-	extends ProgressRootCommonProps,
-		ProgressDataSet,
-		Omit<MeterRootRenderProps, "role"> {
+	extends Omit<MeterRootRenderProps, "role">,
+		ProgressRootCommonProps,
+		ProgressDataSet {
 	role: "progressbar";
 }
-
 export type ProgressRootProps<
 	T extends ValidComponent | HTMLElement = HTMLElement,
 > = ProgressRootOptions & Partial<ProgressRootCommonProps<ElementOf<T>>>;
@@ -139,16 +140,13 @@ export function ProgressRoot<T extends ValidComponent = "div">(
 
 	return (
 		<ProgressContext.Provider value={context}>
-			<Polymorphic<ProgressRootRenderProps>
-				as="div"
+			<Meter<
+				Component<Omit<ProgressRootRenderProps, keyof MeterRootRenderProps>>
+			>
 				role="progressbar"
-				aria-valuenow={local.indeterminate ? undefined : value()}
-				aria-valuemin={local.minValue}
-				aria-valuemax={local.maxValue}
-				aria-valuetext={valueLabel()}
-				aria-labelledby={labelId()}
+				indeterminate={local.indeterminate || false}
 				{...dataset()}
-				{...others}
+				{...mergedProps}
 			/>
 		</ProgressContext.Provider>
 	);

diff --git a/packages/core/src/progress/progress-track.tsx b/packages/core/src/progress/progress-track.tsx
@@ -1,12 +1,12 @@
-import type { ValidComponent } from "solid-js";
-import type {
-	MeterTrackCommonProps,
-	MeterTrackOptions,
-	MeterTrackRenderProps,
+import type { Component, ValidComponent } from "solid-js";
+import {
+	Meter,
+	type MeterTrackCommonProps,
+	type MeterTrackOptions,
+	type MeterTrackRenderProps,
 } from "../meter";
 import {
 	type ElementOf,
-	Polymorphic,
 	type PolymorphicProps,
 } from "../polymorphic";
 import { type ProgressDataSet, useProgressContext } from "./progress-context";
@@ -35,8 +35,9 @@ export function ProgressTrack<T extends ValidComponent = "div">(
 	const context = useProgressContext();
 
 	return (
-		<Polymorphic<ProgressTrackRenderProps>
-			as="div"
+		<Meter.Track<
+			Component<Omit<ProgressTrackRenderProps, keyof MeterTrackRenderProps>>
+		>
 			{...context.dataset()}
 			{...(props as ProgressTrackProps)}
 		/>

diff --git a/packages/core/src/progress/progress-value-label.tsx b/packages/core/src/progress/progress-value-label.tsx
@@ -1,13 +1,13 @@
-import type { JSX, ValidComponent } from "solid-js";
+import type { Component, ValidComponent } from "solid-js";
 
-import type {
-	MeterValueLabelCommonProps,
-	MeterValueLabelOptions,
-	MeterValueLabelRenderProps,
+import {
+	Meter,
+	type MeterValueLabelCommonProps,
+	type MeterValueLabelOptions,
+	type MeterValueLabelRenderProps,
 } from "../meter";
 import {
 	type ElementOf,
-	Polymorphic,
 	type PolymorphicProps,
 } from "../polymorphic";
 import { type ProgressDataSet, useProgressContext } from "./progress-context";
@@ -37,12 +37,13 @@ export function ProgressValueLabel<T extends ValidComponent = "div">(
 	const context = useProgressContext();
 
 	return (
-		<Polymorphic<ProgressValueLabelRenderProps>
-			as="div"
+		<Meter.ValueLabel<
+			Component<
+				Omit<ProgressValueLabelRenderProps, keyof MeterValueLabelRenderProps>
+			>
+		>
 			{...context.dataset()}
 			{...(props as ProgressValueLabelProps)}
-		>
-			{context.valueLabel()}
-		</Polymorphic>
+		/>
 	);
 }