@conveyorhq/arrow-ds 1.83.0 → 1.84.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@conveyorhq/arrow-ds",
   "author": "Conveyor",
   "license": "MIT",
-  "version": "1.83.0",
+  "version": "1.84.0",
   "description": "Arrow Design System",
   "repository": "https://github.com/conveyor/arrow-ds",
   "publishConfig": {

package/public/components/Checkbox/Checkbox.d.ts

@@ -1,11 +1,16 @@
 import { InputProps } from "../Input";
 import { StackProps } from "../Stack";
-export declare type CheckboxProps = InputProps & {
+export declare type CheckboxProps = Omit<InputProps, "checked"> & {
     label?: string;
     hideRequiredStyles?: boolean;
     isRequired?: boolean;
     checked?: boolean | "indeterminate";
 };
+export declare enum CheckboxState {
+    CHECKED = "checked",
+    UNCHECKED = "unchecked",
+    INDETERMINATE = "indeterminate"
+}
 export declare const Checkbox: {
     ({ checked, children, className, disabled, id: idProp, label, onBlur, onChange, onClick, onFocus, hideRequiredStyles, isRequired, tabIndex, theme: themeProp, ...rest }: CheckboxProps): JSX.Element;
     Group: (props: StackProps) => JSX.Element;

package/public/components/Checkbox/Checkbox.js

@@ -22,7 +22,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Checkbox = void 0;
+exports.Checkbox = exports.CheckboxState = void 0;
 const react_1 = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const auto_id_1 = require("@reach/auto-id");
@@ -41,6 +41,12 @@ const CheckboxGroup = (props) => {
     const { orientation = types_1.ORIENTATION.VERTICAL, ...rest } = props;
     return react_1.default.createElement(Stack_1.Stack, Object.assign({ orientation: orientation }, rest));
 };
+var CheckboxState;
+(function (CheckboxState) {
+    CheckboxState["CHECKED"] = "checked";
+    CheckboxState["UNCHECKED"] = "unchecked";
+    CheckboxState["INDETERMINATE"] = "indeterminate";
+})(CheckboxState = exports.CheckboxState || (exports.CheckboxState = {}));
 const Checkbox = ({ checked, children, className, disabled = false, id: idProp, label, onBlur, onChange = () => { }, onClick, onFocus, hideRequiredStyles = true, isRequired = undefined, tabIndex, theme: themeProp, ...rest }) => {
     const { isRequired: isRequiredContext, theme: themeContext } = react_1.useContext(FormGroupContext_1.FormGroupContext);
     const fallbackId = `checkbox:${auto_id_1.useId()}`;
@@ -59,14 +65,45 @@ const Checkbox = ({ checked, children, className, disabled = false, id: idProp,
     else if (isRequiredContext !== undefined) {
         calculatedRequired = isRequiredContext;
     }
-    const [isIndeterminate, setIndeterminate] = react_1.useState(false);
+    const [checkedState, setCheckedState] = react_1.useState(CheckboxState.UNCHECKED);
     react_1.useEffect(() => {
-        setIndeterminate(typeof checked === "string" && checked === "indeterminate");
+        if (checked) {
+            if (typeof checked === "string" && checked === "indeterminate") {
+                setCheckedState(CheckboxState.INDETERMINATE);
+            }
+            else {
+                setCheckedState(CheckboxState.CHECKED);
+            }
+        }
     }, [checked]);
+    const handleChange = (event) => {
+        let updatedChecked;
+        if (checkedState === CheckboxState.CHECKED) {
+            updatedChecked = CheckboxState.UNCHECKED;
+        }
+        else if (checkedState === CheckboxState.UNCHECKED) {
+            updatedChecked = CheckboxState.CHECKED;
+        }
+        setCheckedState(updatedChecked);
+        if (onChange) {
+            onChange(event);
+        }
+    };
+    const ariaChecked = () => {
+        if (checkedState === CheckboxState.INDETERMINATE) {
+            return "mixed";
+        }
+        if (checkedState === CheckboxState.CHECKED) {
+            return "true";
+        }
+        return "false";
+    };
     const bareCheckbox = (react_1.default.createElement(Box_1.Box, { className: bem_1.bem(cn, { e: "BoxWrapper" }) },
-        react_1.default.createElement(Input_1.Input, Object.assign({ "aria-checked": isIndeterminate ? "mixed" : checked, checked: checked, className: bem_1.bem(cn, { e: "Input" }), disabled: disabled, id: id, onChange: onChange, type: "checkbox", onFocus: onFocus, onBlur: onBlur, onClick: label ? handleClick : undefined, tabIndex: tabIndex }, rest)),
+        react_1.default.createElement(Input_1.Input, Object.assign({ "aria-checked": ariaChecked(), checked: checkedState === CheckboxState.CHECKED, className: bem_1.bem(cn, { e: "Input" }), disabled: disabled, id: id, onChange: handleChange, type: "checkbox", onFocus: onFocus, onBlur: onBlur, onClick: label ? handleClick : undefined, tabIndex: tabIndex }, rest)),
         react_1.default.createElement(Box_1.Box, { className: classnames_1.default(bem_1.bem(cn, { e: "Box" }), bem_1.bem(cn, { e: "Box", m: theme }), checked && bem_1.bem(cn, { e: "Box", m: "checked" })) }),
-        checked && (react_1.default.createElement(Icon_1.Icon, { className: classnames_1.default(bem_1.bem(cn, { e: "Check" }), bem_1.bem(cn, { e: "Check", m: theme })), icon: isIndeterminate ? Icon_1.ICON_TYPE.MINUS : Icon_1.ICON_TYPE.CHECK }))));
+        checked && (react_1.default.createElement(Icon_1.Icon, { className: classnames_1.default(bem_1.bem(cn, { e: "Check" }), bem_1.bem(cn, { e: "Check", m: theme })), icon: checkedState === CheckboxState.INDETERMINATE
+                ? Icon_1.ICON_TYPE.MINUS
+                : Icon_1.ICON_TYPE.CHECK }))));
     const checkboxWithLabel = label || children ? (react_1.default.createElement(Label_1.Label, { className: bem_1.bem(cn, { e: "Label" }), isRequired: calculatedRequired && !hideRequiredStyles },
         bareCheckbox,
         react_1.default.createElement(Text_1.Text, { as: "span", className: classnames_1.default(bem_1.bem(cn, { e: "LabelText" }), bem_1.bem(cn, { e: "LabelText", m: theme })) },

package/src/components/Checkbox/Checkbox.story.mdx

@@ -77,7 +77,7 @@ an indeterminate state.
       };
       const onChangeAll = () => {
         setIndeterminate(false);
-        if (total === choicesLength) {
+        if (total > 0 && total <= choicesLength) {
           setCheckedState(chooseNone);
           setTotal(0);
         } else {

package/src/components/Checkbox/Checkbox.tsx

@@ -1,4 +1,10 @@
-import React, { MouseEvent, useContext, useEffect, useState } from "react";
+import React, {
+  ChangeEvent,
+  MouseEvent,
+  useContext,
+  useEffect,
+  useState,
+} from "react";
 import classnames from "classnames";
 import { useId } from "@reach/auto-id";
 import { Box } from "../Box";
@@ -14,7 +20,7 @@ import { FormGroupContext } from "../FormGroup/FormGroupContext";
 
 const cn = "Checkbox";
 
-export type CheckboxProps = InputProps & {
+export type CheckboxProps = Omit<InputProps, "checked"> & {
   label?: string;
   /**
    * Hides required styling on Label if it is within a FormGroupContext with
@@ -38,6 +44,12 @@ const CheckboxGroup = (props: StackProps) => {
   return <Stack orientation={orientation} {...rest} />;
 };
 
+export enum CheckboxState {
+  CHECKED = "checked",
+  UNCHECKED = "unchecked",
+  INDETERMINATE = "indeterminate",
+}
+
 export const Checkbox = ({
   checked,
   children,
@@ -77,22 +89,57 @@ export const Checkbox = ({
     calculatedRequired = isRequiredContext;
   }
 
-  const [isIndeterminate, setIndeterminate] = useState(false);
+  const [checkedState, setCheckedState] = useState<CheckboxState>(
+    CheckboxState.UNCHECKED,
+  );
+
   useEffect(() => {
-    setIndeterminate(
-      typeof checked === "string" && checked === "indeterminate",
-    );
+    if (checked) {
+      if (typeof checked === "string" && checked === "indeterminate") {
+        setCheckedState(CheckboxState.INDETERMINATE);
+      } else {
+        setCheckedState(CheckboxState.CHECKED);
+      }
+    }
   }, [checked]);
 
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    let updatedChecked;
+
+    if (checkedState === CheckboxState.CHECKED) {
+      updatedChecked = CheckboxState.UNCHECKED;
+    } else if (checkedState === CheckboxState.UNCHECKED) {
+      updatedChecked = CheckboxState.CHECKED;
+    }
+
+    setCheckedState(updatedChecked as CheckboxState);
+
+    if (onChange) {
+      onChange(event);
+    }
+  };
+
+  const ariaChecked = () => {
+    if (checkedState === CheckboxState.INDETERMINATE) {
+      return "mixed";
+    }
+
+    if (checkedState === CheckboxState.CHECKED) {
+      return "true";
+    }
+
+    return "false";
+  };
+
   const bareCheckbox = (
     <Box className={bem(cn, { e: "BoxWrapper" })}>
       <Input
-        aria-checked={isIndeterminate ? "mixed" : checked}
-        checked={checked}
+        aria-checked={ariaChecked()}
+        checked={checkedState === CheckboxState.CHECKED}
         className={bem(cn, { e: "Input" })}
         disabled={disabled}
         id={id}
-        onChange={onChange}
+        onChange={handleChange}
         type="checkbox"
         onFocus={onFocus}
         onBlur={onBlur}
@@ -113,7 +160,11 @@ export const Checkbox = ({
             bem(cn, { e: "Check" }),
             bem(cn, { e: "Check", m: theme }),
           )}
-          icon={isIndeterminate ? ICON_TYPE.MINUS : ICON_TYPE.CHECK}
+          icon={
+            checkedState === CheckboxState.INDETERMINATE
+              ? ICON_TYPE.MINUS
+              : ICON_TYPE.CHECK
+          }
         />
       )}
     </Box>