@chellaa/react 0.2.2 → 0.2.3

package/dist/index.mjs

@@ -3621,7 +3621,44 @@ var Checkbox = React56.forwardRef(
       formField?.error && formField?.hasErrorMessage ? formField.errorMessageId : null,
       formField?.hasHelperText ? formField.helperTextId : null
     ].filter(Boolean).join(" ") || void 0;
+    const nativeInputNode = /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "checkbox",
+        id,
+        name,
+        value: valueProp,
+        disabled,
+        readOnly,
+        required,
+        checked: isControlled ? effectiveChecked : void 0,
+        defaultChecked: !isControlled ? defaultChecked : void 0,
+        onChange: handleChange,
+        ref: mergedInputRef,
+        "aria-checked": indeterminate ? "mixed" : effectiveChecked,
+        "aria-invalid": error ? true : void 0,
+        "aria-describedby": ariaDescribedBy,
+        className: "cl-checkbox__input",
+        ...inputProps
+      }
+    );
     if (asChild) {
+      const childElement = React56.isValidElement(children) ? children : null;
+      if (!childElement) {
+        return /* @__PURE__ */ jsx(
+          StyledCheckboxRoot,
+          {
+            as: Slot,
+            ref,
+            className: checkboxClassName,
+            style,
+            sx,
+            ...rest,
+            children
+          }
+        );
+      }
+      const childLabel = childElement.props.children;
       return /* @__PURE__ */ jsx(
         StyledCheckboxRoot,
         {
@@ -3631,7 +3668,15 @@ var Checkbox = React56.forwardRef(
           style,
           sx,
           ...rest,
-          children
+          children: React56.cloneElement(
+            childElement,
+            void 0,
+            /* @__PURE__ */ jsxs(Fragment, { children: [
+              nativeInputNode,
+              controlBox,
+              childLabel && /* @__PURE__ */ jsx("span", { className: "cl-checkbox__label ChellaaCheckbox-Label", children: childLabel })
+            ] })
+          )
         }
       );
     }
@@ -3645,27 +3690,7 @@ var Checkbox = React56.forwardRef(
         sx,
         ...rest,
         children: [
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              type: "checkbox",
-              id,
-              name,
-              value: valueProp,
-              disabled,
-              readOnly,
-              required,
-              checked: isControlled ? effectiveChecked : void 0,
-              defaultChecked: !isControlled ? defaultChecked : void 0,
-              onChange: handleChange,
-              ref: mergedInputRef,
-              "aria-checked": indeterminate ? "mixed" : effectiveChecked,
-              "aria-invalid": error ? true : void 0,
-              "aria-describedby": ariaDescribedBy,
-              className: "cl-checkbox__input",
-              ...inputProps
-            }
-          ),
+          nativeInputNode,
           controlBox,
           children && /* @__PURE__ */ jsx("span", { className: "cl-checkbox__label ChellaaCheckbox-Label", children })
         ]
@@ -3892,7 +3917,43 @@ var Radio = React56.forwardRef(
       formField?.error && formField?.hasErrorMessage ? formField.errorMessageId : null,
       formField?.hasHelperText ? formField.helperTextId : null
     ].filter(Boolean).join(" ") || void 0;
+    const nativeInputNode = /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "radio",
+        id,
+        name,
+        value: valueProp,
+        disabled,
+        readOnly,
+        required,
+        checked: isControlled ? effectiveChecked : void 0,
+        defaultChecked: !isControlled ? defaultChecked : void 0,
+        onChange: handleChange,
+        ref: mergedInputRef,
+        "aria-invalid": error ? true : void 0,
+        "aria-describedby": ariaDescribedBy,
+        className: "cl-radio__input",
+        ...inputProps
+      }
+    );
     if (asChild) {
+      const childElement = React56.isValidElement(children) ? children : null;
+      if (!childElement) {
+        return /* @__PURE__ */ jsx(
+          StyledRadioRoot,
+          {
+            as: Slot,
+            ref,
+            className: radioClassName,
+            style,
+            sx,
+            ...rest,
+            children
+          }
+        );
+      }
+      const childLabel = childElement.props.children;
       return /* @__PURE__ */ jsx(
         StyledRadioRoot,
         {
@@ -3902,7 +3963,15 @@ var Radio = React56.forwardRef(
           style,
           sx,
           ...rest,
-          children
+          children: React56.cloneElement(
+            childElement,
+            void 0,
+            /* @__PURE__ */ jsxs(Fragment, { children: [
+              nativeInputNode,
+              controlBox,
+              childLabel && /* @__PURE__ */ jsx("span", { className: "cl-radio__label ChellaaRadio-Label", children: childLabel })
+            ] })
+          )
         }
       );
     }
@@ -3916,26 +3985,7 @@ var Radio = React56.forwardRef(
         sx,
         ...rest,
         children: [
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              type: "radio",
-              id,
-              name,
-              value: valueProp,
-              disabled,
-              readOnly,
-              required,
-              checked: isControlled ? effectiveChecked : void 0,
-              defaultChecked: !isControlled ? defaultChecked : void 0,
-              onChange: handleChange,
-              ref: mergedInputRef,
-              "aria-invalid": error ? true : void 0,
-              "aria-describedby": ariaDescribedBy,
-              className: "cl-radio__input",
-              ...inputProps
-            }
-          ),
+          nativeInputNode,
           controlBox,
           children && /* @__PURE__ */ jsx("span", { className: "cl-radio__label ChellaaRadio-Label", children })
         ]
@@ -4156,7 +4206,46 @@ var Switch = React56.forwardRef(
       formField?.error && formField?.hasErrorMessage ? formField.errorMessageId : null,
       formField?.hasHelperText ? formField.helperTextId : null
     ].filter(Boolean).join(" ") || void 0;
+    const nativeInputNode = /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "checkbox",
+        role: "switch",
+        id,
+        name,
+        value,
+        disabled,
+        readOnly,
+        required,
+        checked: isControlled ? effectiveChecked : void 0,
+        defaultChecked: !isControlled ? defaultChecked : void 0,
+        onChange: handleChange,
+        onKeyDown: handleKeyDown,
+        ref: mergedInputRef,
+        "aria-checked": effectiveChecked,
+        "aria-invalid": error ? true : void 0,
+        "aria-describedby": ariaDescribedBy,
+        className: "cl-switch__input",
+        ...inputProps
+      }
+    );
     if (asChild) {
+      const childElement = React56.isValidElement(children) ? children : null;
+      if (!childElement) {
+        return /* @__PURE__ */ jsx(
+          StyledSwitchRoot,
+          {
+            as: Slot,
+            ref,
+            className: switchClassName,
+            style,
+            sx,
+            ...rest,
+            children
+          }
+        );
+      }
+      const childLabel = childElement.props.children;
       return /* @__PURE__ */ jsx(
         StyledSwitchRoot,
         {
@@ -4166,7 +4255,15 @@ var Switch = React56.forwardRef(
           style,
           sx,
           ...rest,
-          children
+          children: React56.cloneElement(
+            childElement,
+            void 0,
+            /* @__PURE__ */ jsxs(Fragment, { children: [
+              nativeInputNode,
+              trackControl,
+              childLabel && /* @__PURE__ */ jsx("span", { className: "cl-switch__label ChellaaSwitch-Label", children: childLabel })
+            ] })
+          )
         }
       );
     }
@@ -4180,29 +4277,7 @@ var Switch = React56.forwardRef(
         sx,
         ...rest,
         children: [
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              type: "checkbox",
-              role: "switch",
-              id,
-              name,
-              value,
-              disabled,
-              readOnly,
-              required,
-              checked: isControlled ? effectiveChecked : void 0,
-              defaultChecked: !isControlled ? defaultChecked : void 0,
-              onChange: handleChange,
-              onKeyDown: handleKeyDown,
-              ref: mergedInputRef,
-              "aria-checked": effectiveChecked,
-              "aria-invalid": error ? true : void 0,
-              "aria-describedby": ariaDescribedBy,
-              className: "cl-switch__input",
-              ...inputProps
-            }
-          ),
+          nativeInputNode,
           trackControl,
           children && /* @__PURE__ */ jsx("span", { className: "cl-switch__label ChellaaSwitch-Label", children })
         ]
@@ -7099,7 +7174,7 @@ var SelectRoot = React56.forwardRef(
       if (children) {
         return children;
       }
-      if (options && options.length > 0) {
+      if (options !== void 0) {
         return /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsxs(SelectTrigger, { children: [
             /* @__PURE__ */ jsx(SelectValue, { placeholder: placeholder ?? void 0 }),
@@ -9037,6 +9112,13 @@ var ComboboxTag = React56.forwardRef(
       } else {
         ctx.removeItem(tagVal);
       }
+      ctx.inputRef.current?.focus();
+    };
+    const handleKeyDown = (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        handleRemove(e);
+      }
     };
     return /* @__PURE__ */ jsxs(
       "span",
@@ -9050,11 +9132,13 @@ var ComboboxTag = React56.forwardRef(
             "button",
             {
               type: "button",
-              tabIndex: -1,
+              tabIndex: isDisabled ? -1 : 0,
               "aria-label": `Remove ${typeof children === "string" ? children : tagVal}`,
               className: "cl-combobox__tag-remove",
               disabled: isDisabled,
               onClick: handleRemove,
+              onKeyDown: handleKeyDown,
+              onMouseDown: (e) => e.preventDefault(),
               children: "\xD7"
             }
           )
@@ -9066,7 +9150,15 @@ var ComboboxTag = React56.forwardRef(
 var ComboboxClear = React56.forwardRef(
   function ComboboxClear2(props, ref) {
     const ctx = useComboboxContext();
-    const { className, onClick, children, disabled: disabledProp, ...rest } = props;
+    const {
+      className,
+      onClick,
+      onKeyDown,
+      children,
+      disabled: disabledProp,
+      tabIndex = 0,
+      ...rest
+    } = props;
     const isDisabled = disabledProp ?? ctx.isDisabled;
     const hasValue = ctx.isMulti ? Array.isArray(ctx.value) && ctx.value.length > 0 : Boolean(ctx.value || ctx.searchValue);
     if (!hasValue) {
@@ -9076,18 +9168,28 @@ var ComboboxClear = React56.forwardRef(
       e.stopPropagation();
       if (isDisabled) return;
       ctx.clearSelection();
+      ctx.inputRef.current?.focus();
       onClick?.(e);
     };
+    const handleKeyDown = (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        handleClick(e);
+      }
+      onKeyDown?.(e);
+    };
     return /* @__PURE__ */ jsx(
       "button",
       {
         ref,
         type: "button",
-        tabIndex: -1,
+        tabIndex: isDisabled ? -1 : tabIndex,
         "aria-label": "Clear selection",
         className: classNames("cl-combobox__clear", className),
         disabled: isDisabled,
         onClick: handleClick,
+        onKeyDown: handleKeyDown,
+        onMouseDown: (e) => e.preventDefault(),
         ...rest,
         children: children ?? /* @__PURE__ */ jsxs(
           "svg",
@@ -9689,6 +9791,9 @@ var TableTh = React56.forwardRef(
     scope = "col",
     className,
     children,
+    tabIndex,
+    onClick,
+    onKeyDown,
     ...props
   }, ref) => {
     const computedAriaSort = isSortable ? sortDirection === "asc" ? "ascending" : sortDirection === "desc" ? "descending" : "none" : props["aria-sort"];
@@ -9700,13 +9805,23 @@ var TableTh = React56.forwardRef(
       sortDirection && sortDirection !== "none" && `cl-table__th--sorted-${sortDirection}`,
       className
     ].filter(Boolean).join(" ");
+    const handleKeyDown = (e) => {
+      if (isSortable && (e.key === "Enter" || e.key === " ")) {
+        e.preventDefault();
+        onClick?.(e);
+      }
+      onKeyDown?.(e);
+    };
     return /* @__PURE__ */ jsx(
       "th",
       {
         ref,
         scope,
+        tabIndex: tabIndex ?? (isSortable ? 0 : void 0),
         "aria-sort": computedAriaSort,
         className: classNames2,
+        onClick,
+        onKeyDown: handleKeyDown,
         ...props,
         children
       }