@seed-design/react-field-button 1.0.0 → 1.0.1

package/lib/{FieldButton-12s-nUvzy79W.js → FieldButton-12s-CcR1XhHB.js}

@@ -4,6 +4,7 @@ import { composeRefs } from '@radix-ui/react-compose-refs';
 import { elementProps, dataAttr, buttonProps, inputProps, ariaAttr, mergeProps } from '@seed-design/dom-utils';
 import { Primitive } from '@seed-design/react-primitive';
 import { useId, useCallback, useState, createContext, useContext, forwardRef } from 'react';
+import { useSupports } from '@seed-design/react-supports';
 
 const getDescriptionId = (id)=>`field-button:${id}:description`;
 const getErrorMessageId = (id)=>`field-button:${id}:error-message`;
@@ -42,9 +43,9 @@ function useFieldButtonState({ values = [], onValuesChange = ()=>{} }) {
         setIsFocusVisible
     };
 }
-function useFieldButton(props) {
+function useFieldButton({ values: propValues, onValuesChange, disabled = false, invalid = false, readOnly = false, name }) {
     const id = useId();
-    const { values: propValues, onValuesChange, disabled = false, invalid = false, name } = props;
+    const isFocusVisibleSupported = useSupports("selector(:focus-visible)");
     const { values: stateValues, isHovered, isActive, isFocused, isFocusVisible, refs, renderedElements, setValues, setIsHovered, setIsActive, setIsFocused, setIsFocusVisible } = useFieldButtonState({
         values: propValues,
         onValuesChange
@@ -59,13 +60,16 @@ function useFieldButton(props) {
         "data-focus": dataAttr(isFocused),
         "data-focus-visible": dataAttr(isFocusVisible),
         "data-disabled": dataAttr(disabled),
-        "data-invalid": dataAttr(invalid)
+        "data-invalid": dataAttr(invalid),
+        "data-readonly": dataAttr(readOnly)
     });
     return {
         values: stateValues,
         active: isActive,
         focused: isFocused,
         invalid,
+        disabled,
+        readOnly,
         setIsFocused,
         setIsFocusVisible,
         refs,
@@ -83,8 +87,8 @@ function useFieldButton(props) {
         buttonProps: buttonProps({
             ...stateProps,
             type: "button",
-            disabled,
-            "aria-disabled": ariaAttr(disabled),
+            disabled: disabled || readOnly,
+            "aria-disabled": ariaAttr(disabled || readOnly),
             "aria-describedby": ariaDescribedBy,
             // note that pointerdown and pointerup are attached to the button, not the root
             // this is for preventing setting isActive to true when the clear button is pressed
@@ -96,21 +100,25 @@ function useFieldButton(props) {
             },
             onBlur () {
                 setIsFocused(false);
-                setIsFocusVisible(false);
+                if (isFocusVisibleSupported) {
+                    setIsFocusVisible(false);
+                }
             },
             onFocus (event) {
                 setIsFocused(true);
-                setIsFocusVisible(event.target.matches(":focus-visible"));
+                if (isFocusVisibleSupported) {
+                    setIsFocusVisible(event.target.matches(":focus-visible"));
+                }
             }
         }),
         clearButtonProps: buttonProps({
             ...stateProps,
             type: "button",
-            disabled,
+            disabled: disabled || readOnly,
             onClick: useCallback(()=>setValues([]), [
                 setValues
             ]),
-            hidden: disabled
+            hidden: disabled || readOnly
         }),
         getHiddenInputProps: useCallback((index)=>{
             const value = stateValues[index];
@@ -118,12 +126,14 @@ function useFieldButton(props) {
             return inputProps({
                 type: "hidden",
                 value,
+                disabled,
                 name: name || id
             });
         }, [
             stateValues,
             name,
-            id
+            id,
+            disabled
         ]),
         descriptionProps: elementProps({
             ...stateProps,
@@ -147,9 +157,10 @@ function useFieldButtonContext({ strict = true } = {}) {
     return context;
 }
 
-const FieldButtonRoot = /*#__PURE__*/ forwardRef(({ disabled, invalid, name, values, onValuesChange, ...otherProps }, ref)=>{
+const FieldButtonRoot = /*#__PURE__*/ forwardRef(({ disabled, readOnly, invalid, name, values, onValuesChange, ...otherProps }, ref)=>{
     const api = useFieldButton({
         disabled,
+        readOnly,
         invalid,
         name,
         values,

package/lib/{FieldButton-12s-CF9DP1xP.cjs → FieldButton-12s-Ctrm9BuF.cjs}

@@ -4,6 +4,7 @@ var reactComposeRefs = require('@radix-ui/react-compose-refs');
 var domUtils = require('@seed-design/dom-utils');
 var reactPrimitive = require('@seed-design/react-primitive');
 var react = require('react');
+var reactSupports = require('@seed-design/react-supports');
 
 const getDescriptionId = (id)=>`field-button:${id}:description`;
 const getErrorMessageId = (id)=>`field-button:${id}:error-message`;
@@ -42,9 +43,9 @@ function useFieldButtonState({ values = [], onValuesChange = ()=>{} }) {
         setIsFocusVisible
     };
 }
-function useFieldButton(props) {
+function useFieldButton({ values: propValues, onValuesChange, disabled = false, invalid = false, readOnly = false, name }) {
     const id = react.useId();
-    const { values: propValues, onValuesChange, disabled = false, invalid = false, name } = props;
+    const isFocusVisibleSupported = reactSupports.useSupports("selector(:focus-visible)");
     const { values: stateValues, isHovered, isActive, isFocused, isFocusVisible, refs, renderedElements, setValues, setIsHovered, setIsActive, setIsFocused, setIsFocusVisible } = useFieldButtonState({
         values: propValues,
         onValuesChange
@@ -59,13 +60,16 @@ function useFieldButton(props) {
         "data-focus": domUtils.dataAttr(isFocused),
         "data-focus-visible": domUtils.dataAttr(isFocusVisible),
         "data-disabled": domUtils.dataAttr(disabled),
-        "data-invalid": domUtils.dataAttr(invalid)
+        "data-invalid": domUtils.dataAttr(invalid),
+        "data-readonly": domUtils.dataAttr(readOnly)
     });
     return {
         values: stateValues,
         active: isActive,
         focused: isFocused,
         invalid,
+        disabled,
+        readOnly,
         setIsFocused,
         setIsFocusVisible,
         refs,
@@ -83,8 +87,8 @@ function useFieldButton(props) {
         buttonProps: domUtils.buttonProps({
             ...stateProps,
             type: "button",
-            disabled,
-            "aria-disabled": domUtils.ariaAttr(disabled),
+            disabled: disabled || readOnly,
+            "aria-disabled": domUtils.ariaAttr(disabled || readOnly),
             "aria-describedby": ariaDescribedBy,
             // note that pointerdown and pointerup are attached to the button, not the root
             // this is for preventing setting isActive to true when the clear button is pressed
@@ -96,21 +100,25 @@ function useFieldButton(props) {
             },
             onBlur () {
                 setIsFocused(false);
-                setIsFocusVisible(false);
+                if (isFocusVisibleSupported) {
+                    setIsFocusVisible(false);
+                }
             },
             onFocus (event) {
                 setIsFocused(true);
-                setIsFocusVisible(event.target.matches(":focus-visible"));
+                if (isFocusVisibleSupported) {
+                    setIsFocusVisible(event.target.matches(":focus-visible"));
+                }
             }
         }),
         clearButtonProps: domUtils.buttonProps({
             ...stateProps,
             type: "button",
-            disabled,
+            disabled: disabled || readOnly,
             onClick: react.useCallback(()=>setValues([]), [
                 setValues
             ]),
-            hidden: disabled
+            hidden: disabled || readOnly
         }),
         getHiddenInputProps: react.useCallback((index)=>{
             const value = stateValues[index];
@@ -118,12 +126,14 @@ function useFieldButton(props) {
             return domUtils.inputProps({
                 type: "hidden",
                 value,
+                disabled,
                 name: name || id
             });
         }, [
             stateValues,
             name,
-            id
+            id,
+            disabled
         ]),
         descriptionProps: domUtils.elementProps({
             ...stateProps,
@@ -147,9 +157,10 @@ function useFieldButtonContext({ strict = true } = {}) {
     return context;
 }
 
-const FieldButtonRoot = /*#__PURE__*/ react.forwardRef(({ disabled, invalid, name, values, onValuesChange, ...otherProps }, ref)=>{
+const FieldButtonRoot = /*#__PURE__*/ react.forwardRef(({ disabled, readOnly, invalid, name, values, onValuesChange, ...otherProps }, ref)=>{
     const api = useFieldButton({
         disabled,
+        readOnly,
         invalid,
         name,
         values,

package/lib/index.cjs

@@ -1,4 +1,4 @@
-var FieldButton12s = require('./FieldButton-12s-CF9DP1xP.cjs');
+var FieldButton12s = require('./FieldButton-12s-Ctrm9BuF.cjs');
 
 var FieldButton_namespace = {
   __proto__: null,

package/lib/index.d.ts

@@ -15,14 +15,20 @@ interface UseFieldButtonProps extends UseFieldButtonStateProps {
      * @default false
      */
     invalid?: boolean;
+    /**
+     * @default false
+     */
+    readOnly?: boolean;
     name?: string;
 }
 type UseFieldButtonReturn = ReturnType<typeof useFieldButton>;
-declare function useFieldButton(props: UseFieldButtonProps): {
+declare function useFieldButton({ values: propValues, onValuesChange, disabled, invalid, readOnly, name, }: UseFieldButtonProps): {
     values: string[];
     active: boolean;
     focused: boolean;
     invalid: boolean;
+    disabled: boolean;
+    readOnly: boolean;
     setIsFocused: react.Dispatch<react.SetStateAction<boolean>>;
     setIsFocusVisible: react.Dispatch<react.SetStateAction<boolean>>;
     refs: {
@@ -1179,6 +1185,7 @@ declare function useFieldButton(props: UseFieldButtonProps): {
     };
     getHiddenInputProps: (index: number) => {
         disabled?: boolean | undefined | undefined;
+        readOnly?: boolean | undefined | undefined;
         name?: string | undefined | undefined;
         defaultChecked?: boolean | undefined | undefined;
         defaultValue?: string | number | readonly string[] | undefined;
@@ -1482,7 +1489,6 @@ declare function useFieldButton(props: UseFieldButtonProps): {
         multiple?: boolean | undefined | undefined;
         pattern?: string | undefined | undefined;
         placeholder?: string | undefined | undefined;
-        readOnly?: boolean | undefined | undefined;
         required?: boolean | undefined | undefined;
         size?: number | undefined | undefined;
         src?: string | undefined | undefined;

package/lib/index.js

@@ -1,5 +1,5 @@
-import { F as FieldButtonButton, a as FieldButtonClearButton, b as FieldButtonDescription, c as FieldButtonErrorMessage, d as FieldButtonHiddenInput, e as FieldButtonRoot } from './FieldButton-12s-nUvzy79W.js';
-export { u as useFieldButtonContext } from './FieldButton-12s-nUvzy79W.js';
+import { F as FieldButtonButton, a as FieldButtonClearButton, b as FieldButtonDescription, c as FieldButtonErrorMessage, d as FieldButtonHiddenInput, e as FieldButtonRoot } from './FieldButton-12s-CcR1XhHB.js';
+export { u as useFieldButtonContext } from './FieldButton-12s-CcR1XhHB.js';
 
 var FieldButton_namespace = {
   __proto__: null,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/react-field-button",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",
@@ -30,7 +30,8 @@
     "@radix-ui/react-compose-refs": "^1.1.2",
     "@radix-ui/react-use-controllable-state": "^1.2.2",
     "@seed-design/dom-utils": "1.0.0",
-    "@seed-design/react-primitive": "1.0.0"
+    "@seed-design/react-primitive": "1.0.0",
+    "@seed-design/react-supports": "0.0.1"
   },
   "devDependencies": {
     "@types/react": "^19.1.6",

package/src/FieldButton.tsx

@@ -13,8 +13,8 @@ export interface FieldButtonRootProps
     HTMLAttributes<HTMLDivElement> {}
 
 export const FieldButtonRoot = forwardRef<HTMLDivElement, FieldButtonRootProps>(
-  ({ disabled, invalid, name, values, onValuesChange, ...otherProps }, ref) => {
-    const api = useFieldButton({ disabled, invalid, name, values, onValuesChange });
+  ({ disabled, readOnly, invalid, name, values, onValuesChange, ...otherProps }, ref) => {
+    const api = useFieldButton({ disabled, readOnly, invalid, name, values, onValuesChange });
     const mergedProps = mergeProps(api.rootProps, otherProps);
 
     return (

package/src/useFieldButton.test.tsx

@@ -39,6 +39,11 @@ function FieldButton(props: FieldButtonRootProps) {
 }
 
 describe("useFieldButton", () => {
+  global.CSS = {
+    // @ts-expect-error
+    supports: (_k, _v) => true,
+  };
+
   it("should render the field button correctly", () => {
     const { getByRole } = setUp(<FieldButton />);
     const button = getByRole("button", { name: "Click me" });
@@ -103,6 +108,15 @@ describe("useFieldButton", () => {
     expect(button).toHaveAttribute("aria-disabled", "true");
   });
 
+  it("should have readOnly state when readOnly prop is true", () => {
+    const { getByRole } = setUp(<FieldButton readOnly />);
+    const button = getByRole("button", { name: "Click me" });
+
+    expect(button).toBeDisabled();
+    expect(button).toHaveAttribute("data-readonly");
+    expect(button).toHaveAttribute("aria-disabled", "true");
+  });
+
   it("should have invalid state when invalid prop is true", () => {
     const { getByRole } = setUp(<FieldButton invalid />);
     const button = getByRole("button", { name: "Click me" });
@@ -158,6 +172,26 @@ describe("useFieldButton", () => {
     expect(button).not.toHaveAttribute("data-active");
   });
 
+  it("should not disable hidden inputs when readOnly (unlike disabled)", () => {
+    const { container } = setUp(<FieldButton readOnly values={["value1", "value2"]} />);
+    const hiddenInputs = container.querySelectorAll('input[type="hidden"]');
+
+    expect(hiddenInputs).toHaveLength(2);
+    expect(hiddenInputs[0]).not.toBeDisabled();
+    expect(hiddenInputs[1]).not.toBeDisabled();
+    expect(hiddenInputs[0]).toHaveValue("value1");
+    expect(hiddenInputs[1]).toHaveValue("value2");
+  });
+
+  it("should disable hidden inputs when disabled", () => {
+    const { container } = setUp(<FieldButton disabled values={["value1", "value2"]} />);
+    const hiddenInputs = container.querySelectorAll('input[type="hidden"]');
+
+    expect(hiddenInputs).toHaveLength(2);
+    expect(hiddenInputs[0]).toBeDisabled();
+    expect(hiddenInputs[1]).toBeDisabled();
+  });
+
   it("should render without description and errorMessage", () => {
     function MinimalFieldButton(props: FieldButtonRootProps) {
       return (
@@ -222,6 +256,19 @@ describe("useFieldButton", () => {
       expect(handleValuesChange).not.toHaveBeenCalled();
     });
 
+    it("should hide clear button when readOnly", async () => {
+      const handleValuesChange = vi.fn();
+      const { getByText, user } = setUp(
+        <FieldButton readOnly values={["value1"]} onValuesChange={handleValuesChange} />,
+      );
+      const clearButton = getByText("Clear");
+
+      expect(clearButton).toHaveAttribute("hidden");
+
+      await user.click(clearButton);
+      expect(handleValuesChange).not.toHaveBeenCalled();
+    });
+
     it("should not have active state when clear button is pressed", () => {
       const { getByRole } = setUp(<FieldButton />);
       const button = getByRole("button", { name: "Click me" });

package/src/useFieldButton.ts

@@ -1,6 +1,7 @@
 import { ariaAttr, buttonProps, dataAttr, elementProps, inputProps } from "@seed-design/dom-utils";
 import { useCallback, useId, useState } from "react";
 import { getDescriptionId, getErrorMessageId } from "./dom";
+import { useSupports } from "@seed-design/react-supports";
 
 interface UseFieldButtonStateProps {
   values?: string[];
@@ -57,14 +58,26 @@ export interface UseFieldButtonProps extends UseFieldButtonStateProps {
    */
   invalid?: boolean;
 
+  /**
+   * @default false
+   */
+  readOnly?: boolean;
+
   name?: string;
 }
 
 export type UseFieldButtonReturn = ReturnType<typeof useFieldButton>;
 
-export function useFieldButton(props: UseFieldButtonProps) {
+export function useFieldButton({
+  values: propValues,
+  onValuesChange,
+  disabled = false,
+  invalid = false,
+  readOnly = false,
+  name,
+}: UseFieldButtonProps) {
   const id = useId();
-  const { values: propValues, onValuesChange, disabled = false, invalid = false, name } = props;
+  const isFocusVisibleSupported = useSupports("selector(:focus-visible)");
 
   const {
     values: stateValues,
@@ -96,6 +109,7 @@ export function useFieldButton(props: UseFieldButtonProps) {
     "data-focus-visible": dataAttr(isFocusVisible),
     "data-disabled": dataAttr(disabled),
     "data-invalid": dataAttr(invalid),
+    "data-readonly": dataAttr(readOnly),
   });
 
   return {
@@ -103,6 +117,8 @@ export function useFieldButton(props: UseFieldButtonProps) {
     active: isActive,
     focused: isFocused,
     invalid,
+    disabled,
+    readOnly,
 
     setIsFocused,
     setIsFocusVisible,
@@ -127,9 +143,9 @@ export function useFieldButton(props: UseFieldButtonProps) {
       ...stateProps,
 
       type: "button",
-      disabled,
+      disabled: disabled || readOnly,
 
-      "aria-disabled": ariaAttr(disabled),
+      "aria-disabled": ariaAttr(disabled || readOnly),
       "aria-describedby": ariaDescribedBy,
 
       // note that pointerdown and pointerup are attached to the button, not the root
@@ -143,11 +159,15 @@ export function useFieldButton(props: UseFieldButtonProps) {
 
       onBlur() {
         setIsFocused(false);
-        setIsFocusVisible(false);
+        if (isFocusVisibleSupported) {
+          setIsFocusVisible(false);
+        }
       },
       onFocus(event) {
         setIsFocused(true);
-        setIsFocusVisible(event.target.matches(":focus-visible"));
+        if (isFocusVisibleSupported) {
+          setIsFocusVisible(event.target.matches(":focus-visible"));
+        }
       },
     }),
 
@@ -155,11 +175,11 @@ export function useFieldButton(props: UseFieldButtonProps) {
       ...stateProps,
 
       type: "button",
-      disabled,
+      disabled: disabled || readOnly,
 
       onClick: useCallback(() => setValues([]), [setValues]),
 
-      hidden: disabled,
+      hidden: disabled || readOnly,
     }),
 
     getHiddenInputProps: useCallback(
@@ -171,10 +191,11 @@ export function useFieldButton(props: UseFieldButtonProps) {
         return inputProps({
           type: "hidden",
           value,
+          disabled, // disabled field button should not submit values, while readonly field button should submit values
           name: name || id,
         });
       },
-      [stateValues, name, id],
+      [stateValues, name, id, disabled],
     ),
 
     descriptionProps: elementProps({