[♻️]: Refactor to rename indeterminated to indeterminate (#99)

* Refactor to rename `indeterminated` to `indeterminate`

* Update version

lib/Checkbox/Checkbox.test.tsx

@@ -41,14 +41,14 @@ describe("Checkbox", () => {
           disabled,
           readOnly,
           focusedVisible,
-          indeterminated,
+          indeterminate,
         }) =>
           classNames("root", {
             "root--disabled": disabled,
             "root--readonly": readOnly,
             "root--checked": checked,
             "root--focus-visible": focusedVisible,
-            "root--indeterminated": indeterminated,
+            "root--indeterminate": indeterminate,
           })
         }
       />,
@@ -73,14 +73,14 @@ describe("Checkbox", () => {
           disabled,
           readOnly,
           focusedVisible,
-          indeterminated,
+          indeterminate,
         }) =>
           classNames("root", {
             "root--disabled": disabled,
             "root--readonly": readOnly,
             "root--checked": checked,
             "root--focus-visible": focusedVisible,
-            "root--indeterminated": indeterminated,
+            "root--indeterminate": indeterminate,
           })
         }
       />,
@@ -96,29 +96,29 @@ describe("Checkbox", () => {
     rerender(
       <Checkbox
         {...mockRequiredProps}
-        checked="indeterminated"
+        checked="indeterminate"
         aria-controls="id1"
         className={({
           checked,
           disabled,
           readOnly,
           focusedVisible,
-          indeterminated,
+          indeterminate,
         }) =>
           classNames("root", {
             "root--disabled": disabled,
             "root--readonly": readOnly,
             "root--checked": checked,
             "root--focus-visible": focusedVisible,
-            "root--indeterminated": indeterminated,
+            "root--indeterminate": indeterminate,
           })
         }
       />,
     );
 
     expect(screen.getByRole("checkbox")).toHaveClass(
       "root",
-      "root--indeterminated",
+      "root--indeterminate",
     );
   });
 
@@ -150,7 +150,7 @@ describe("Checkbox", () => {
     render(
       <Checkbox
         {...mockRequiredProps}
-        defaultChecked="indeterminated"
+        defaultChecked="indeterminate"
         aria-controls="id1 id2"
       />,
     );

lib/Checkbox/Checkbox.tsx

@@ -29,9 +29,9 @@ export type RenderProps = {
    */
   disabled: boolean;
   /**
-   * The `indeterminated` state of the checkbox.
+   * The `indeterminate` state of the checkbox.
    */
-  indeterminated: boolean;
+  indeterminate: boolean;
   /**
    * The `:focus-visible` of the checkbox.
    */
@@ -85,18 +85,18 @@ type OwnProps = {
   /**
    * If `true`, the checkbox will be checked.
    *
-   * If `indeterminated`, the checkbox will appear indeterminate.
+   * If `indeterminate`, the checkbox will appear indeterminate.
    * This does not set the native input element to indeterminate due to inconsistent behavior across browsers.
    *
    * @default false
    */
-  checked?: boolean | "indeterminated";
+  checked?: boolean | "indeterminate";
   /**
    * The default state of `checked`. Use when the component is not controlled.
    *
    * @default false
    */
-  defaultChecked?: boolean | "indeterminated";
+  defaultChecked?: boolean | "indeterminate";
   /**
    * If `true`, the checkbox will be disabled.
    *
@@ -231,13 +231,13 @@ const CheckboxBase = (props: Props, ref: React.Ref<HTMLButtonElement>) => {
     ].join("\n"),
   });
 
-  const isIndeterminated = checkBase.checked === "indeterminated";
+  const isIndeterminated = checkBase.checked === "indeterminate";
   const isChecked = isIndeterminated ? false : (checkBase.checked as boolean);
 
   const renderProps: RenderProps = {
     disabled: isDisabled,
     readOnly: isReadOnly,
-    indeterminated: isIndeterminated,
+    indeterminate: isIndeterminated,
     checked: isChecked,
     focusedVisible: checkBase.isFocusedVisible,
   };
@@ -268,7 +268,7 @@ const CheckboxBase = (props: Props, ref: React.Ref<HTMLButtonElement>) => {
     "data-slot": Slots.Root,
     "data-disabled": isDisabled ? "" : undefined,
     "data-readonly": isReadOnly ? "" : undefined,
-    "data-indeterminated": isIndeterminated ? "" : undefined,
+    "data-indeterminate": isIndeterminated ? "" : undefined,
     "data-focus-visible": checkBase.isFocusedVisible ? "" : undefined,
     "data-checked": isChecked ? "" : undefined,
   };

lib/ProgressBar/ProgressBar.tsx

@@ -18,9 +18,9 @@ export type RenderProps = {
    */
   valueText: string;
   /**
-   * Determines whether the progress bar is indeterminated or not.
+   * Determines whether the progress bar is indeterminate or not.
    */
-  indeterminated: boolean;
+  indeterminate: boolean;
 };
 
 export type ClassNameProps = RenderProps;
@@ -37,7 +37,7 @@ type OwnProps = {
   /**
    * The current value of the progress bar.
    */
-  value: number;
+  value: number | "indeterminate";
   /**
    * The minimum allowed value of the progress bar.
    * Should not be greater than or equal to `max`.
@@ -52,14 +52,11 @@ type OwnProps = {
    * A string value that provides a user-friendly name
    * for the current value of the progress bar.
    * This is important for screen reader users.
-   */
-  valueText: string;
-  /**
-   * If `true`, the progress bar value will be indeterminate.
    *
-   * @default false;
+   * If component is indeterminate, it ignores valuetext
+   * since we don't have any deterministic value.
    */
-  indeterminated?: boolean;
+  valueText: string;
   /**
    * The label of the component.
    */
@@ -89,7 +86,6 @@ const ProgressBarBase = (props: Props, ref: React.Ref<HTMLDivElement>) => {
   const {
     className: classNameProp,
     children: childrenProp,
-    indeterminated = false,
     value,
     min,
     max,
@@ -106,13 +102,19 @@ const ProgressBarBase = (props: Props, ref: React.Ref<HTMLDivElement>) => {
     ].join("\n"),
   });
 
-  const percentageValue = remap(value, min, max, 0, 100);
+  const isIndeterminate = value === "indeterminate";
+
+  const numericValue = isIndeterminate ? min : value;
+
+  const percentageValue = isIndeterminate
+    ? min
+    : remap(numericValue, min, max, 0, 100);
 
   const renderProps: RenderProps = {
     percentageValue,
-    value,
+    value: numericValue,
     valueText,
-    indeterminated,
+    indeterminate: isIndeterminate,
   };
 
   const classNameProps: ClassNameProps = renderProps;
@@ -126,14 +128,14 @@ const ProgressBarBase = (props: Props, ref: React.Ref<HTMLDivElement>) => {
       role="progressbar"
       ref={ref}
       className={className}
-      aria-valuenow={indeterminated ? undefined : value}
+      aria-valuenow={isIndeterminate ? undefined : value}
       aria-valuemin={min}
       aria-valuemax={max}
-      aria-valuetext={indeterminated ? undefined : valueText}
+      aria-valuetext={isIndeterminate ? undefined : valueText}
       aria-label={labelInfo.srOnlyLabel}
       aria-labelledby={labelInfo.labelledBy}
       data-slot={RootSlot}
-      data-indeterminated={indeterminated ? "" : undefined}
+      data-indeterminate={isIndeterminate ? "" : undefined}
     >
       {children}
     </div>

lib/utils/use-check-base.ts

@@ -21,8 +21,8 @@ type CheckBaseProps = {
   keyboardActivationBehavior?: "manual" | "automatic";
   value?: string;
   groupCtx: GenericGroupContextValue | null;
-  checked?: boolean | "indeterminated";
-  defaultChecked?: boolean | "indeterminated";
+  checked?: boolean | "indeterminate";
+  defaultChecked?: boolean | "indeterminate";
   togglable?: boolean;
   disabled?: boolean;
   readOnly?: boolean;
@@ -122,7 +122,7 @@ const useCheckBase = (props: CheckBaseProps) => {
       event.preventDefault();
 
       const newChecked =
-        checkedState === "indeterminated" ? true : !checkedState;
+        checkedState === "indeterminate" ? true : !checkedState;
 
       emitChange(newChecked);
     },
@@ -293,7 +293,7 @@ const useCheckBase = (props: CheckBaseProps) => {
       }
 
       const newChecked =
-        checkedState === "indeterminated" ? true : !checkedState;
+        checkedState === "indeterminate" ? true : !checkedState;
 
       if (event.key === SystemKeys.SPACE) {
         emitChange(newChecked);

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@styleless-ui/react",
-  "version": "1.0.0-rc.6",
+  "version": "1.0.0-rc.7",
   "description": "Completely unstyled, headless and accessible React UI components.",
   "author": "mimshins <[email protected]>",
   "license": "MIT",