@seed-design/react-field-button 1.0.0

package/lib/FieldButton-12s-CF9DP1xP.cjs

@@ -0,0 +1,221 @@
+'use client';
+var jsxRuntime = require('react/jsx-runtime');
+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');
+
+const getDescriptionId = (id)=>`field-button:${id}:description`;
+const getErrorMessageId = (id)=>`field-button:${id}:error-message`;
+
+function useFieldButtonState({ values = [], onValuesChange = ()=>{} }) {
+    const [isHovered, setIsHovered] = react.useState(false);
+    const [isActive, setIsActive] = react.useState(false);
+    const [isFocused, setIsFocused] = react.useState(false);
+    const [isFocusVisible, setIsFocusVisible] = react.useState(false);
+    const [isDescriptionRendered, setIsDescriptionRendered] = react.useState(false);
+    const descriptionRef = react.useCallback((node)=>{
+        setIsDescriptionRendered(!!node);
+    }, []);
+    const [isErrorMessageRendered, setIsErrorMessageRendered] = react.useState(false);
+    const errorMessageRef = react.useCallback((node)=>{
+        setIsErrorMessageRendered(!!node);
+    }, []);
+    return {
+        values,
+        isHovered,
+        isActive,
+        isFocused,
+        isFocusVisible,
+        refs: {
+            description: descriptionRef,
+            errorMessage: errorMessageRef
+        },
+        renderedElements: {
+            description: isDescriptionRendered,
+            errorMessage: isErrorMessageRendered
+        },
+        setValues: onValuesChange,
+        setIsHovered,
+        setIsActive,
+        setIsFocused,
+        setIsFocusVisible
+    };
+}
+function useFieldButton(props) {
+    const id = react.useId();
+    const { values: propValues, onValuesChange, disabled = false, invalid = false, name } = props;
+    const { values: stateValues, isHovered, isActive, isFocused, isFocusVisible, refs, renderedElements, setValues, setIsHovered, setIsActive, setIsFocused, setIsFocusVisible } = useFieldButtonState({
+        values: propValues,
+        onValuesChange
+    });
+    const ariaDescribedBy = [
+        renderedElements.description ? getDescriptionId(id) : false,
+        renderedElements.errorMessage ? getErrorMessageId(id) : false
+    ].filter(Boolean).join(" ") || undefined;
+    const stateProps = domUtils.elementProps({
+        "data-hover": domUtils.dataAttr(isHovered),
+        "data-active": domUtils.dataAttr(isActive),
+        "data-focus": domUtils.dataAttr(isFocused),
+        "data-focus-visible": domUtils.dataAttr(isFocusVisible),
+        "data-disabled": domUtils.dataAttr(disabled),
+        "data-invalid": domUtils.dataAttr(invalid)
+    });
+    return {
+        values: stateValues,
+        active: isActive,
+        focused: isFocused,
+        invalid,
+        setIsFocused,
+        setIsFocusVisible,
+        refs,
+        stateProps,
+        rootProps: domUtils.elementProps({
+            ...stateProps,
+            onPointerMove () {
+                setIsHovered(true);
+            },
+            onPointerLeave () {
+                setIsHovered(false);
+                setIsActive(false);
+            }
+        }),
+        buttonProps: domUtils.buttonProps({
+            ...stateProps,
+            type: "button",
+            disabled,
+            "aria-disabled": domUtils.ariaAttr(disabled),
+            "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
+            onPointerDown () {
+                setIsActive(true);
+            },
+            onPointerUp () {
+                setIsActive(false);
+            },
+            onBlur () {
+                setIsFocused(false);
+                setIsFocusVisible(false);
+            },
+            onFocus (event) {
+                setIsFocused(true);
+                setIsFocusVisible(event.target.matches(":focus-visible"));
+            }
+        }),
+        clearButtonProps: domUtils.buttonProps({
+            ...stateProps,
+            type: "button",
+            disabled,
+            onClick: react.useCallback(()=>setValues([]), [
+                setValues
+            ]),
+            hidden: disabled
+        }),
+        getHiddenInputProps: react.useCallback((index)=>{
+            const value = stateValues[index];
+            if (value === undefined) return null;
+            return domUtils.inputProps({
+                type: "hidden",
+                value,
+                name: name || id
+            });
+        }, [
+            stateValues,
+            name,
+            id
+        ]),
+        descriptionProps: domUtils.elementProps({
+            ...stateProps,
+            id: getDescriptionId(id)
+        }),
+        errorMessageProps: domUtils.elementProps({
+            ...stateProps,
+            id: getErrorMessageId(id),
+            "aria-live": "polite"
+        })
+    };
+}
+
+const FieldButtonContext = /*#__PURE__*/ react.createContext(null);
+const FieldButtonProvider = FieldButtonContext.Provider;
+function useFieldButtonContext({ strict = true } = {}) {
+    const context = react.useContext(FieldButtonContext);
+    if (!context && strict) {
+        throw new Error("useFieldButtonContext must be used within a FieldButton");
+    }
+    return context;
+}
+
+const FieldButtonRoot = /*#__PURE__*/ react.forwardRef(({ disabled, invalid, name, values, onValuesChange, ...otherProps }, ref)=>{
+    const api = useFieldButton({
+        disabled,
+        invalid,
+        name,
+        values,
+        onValuesChange
+    });
+    const mergedProps = domUtils.mergeProps(api.rootProps, otherProps);
+    return /*#__PURE__*/ jsxRuntime.jsx(FieldButtonProvider, {
+        value: api,
+        children: /*#__PURE__*/ jsxRuntime.jsx(reactPrimitive.Primitive.div, {
+            ref: ref,
+            ...mergedProps
+        })
+    });
+});
+FieldButtonRoot.displayName = "FieldButtonRoot";
+const FieldButtonButton = /*#__PURE__*/ react.forwardRef((props, ref)=>{
+    const { buttonProps } = useFieldButtonContext();
+    const mergedProps = domUtils.mergeProps(buttonProps, props);
+    return /*#__PURE__*/ jsxRuntime.jsx(reactPrimitive.Primitive.button, {
+        ref: ref,
+        ...mergedProps
+    });
+});
+FieldButtonButton.displayName = "FieldButtonButton";
+const FieldButtonDescription = /*#__PURE__*/ react.forwardRef((props, ref)=>{
+    const { refs, descriptionProps } = useFieldButtonContext();
+    const mergedProps = domUtils.mergeProps(descriptionProps, props);
+    return /*#__PURE__*/ jsxRuntime.jsx(reactPrimitive.Primitive.span, {
+        ref: reactComposeRefs.composeRefs(refs.description, ref),
+        ...mergedProps
+    });
+});
+FieldButtonDescription.displayName = "FieldButtonDescription";
+const FieldButtonErrorMessage = /*#__PURE__*/ react.forwardRef((props, ref)=>{
+    const { refs, errorMessageProps } = useFieldButtonContext();
+    const mergedProps = domUtils.mergeProps(errorMessageProps, props);
+    return /*#__PURE__*/ jsxRuntime.jsx(reactPrimitive.Primitive.div, {
+        ref: reactComposeRefs.composeRefs(refs.errorMessage, ref),
+        ...mergedProps
+    });
+});
+FieldButtonErrorMessage.displayName = "FieldButtonErrorMessage";
+const FieldButtonHiddenInput = /*#__PURE__*/ react.forwardRef(({ valueIndex, ...props }, ref)=>{
+    const { getHiddenInputProps } = useFieldButtonContext();
+    const hiddenInputProps = getHiddenInputProps(valueIndex);
+    if (!hiddenInputProps) return null;
+    return /*#__PURE__*/ jsxRuntime.jsx(reactPrimitive.Primitive.input, {
+        ref: ref,
+        ...domUtils.mergeProps(hiddenInputProps, props)
+    });
+});
+FieldButtonHiddenInput.displayName = "FieldButtonHiddenInput";
+const FieldButtonClearButton = /*#__PURE__*/ react.forwardRef((props, ref)=>{
+    const { clearButtonProps } = useFieldButtonContext();
+    const mergedProps = domUtils.mergeProps(clearButtonProps, props);
+    return /*#__PURE__*/ jsxRuntime.jsx(reactPrimitive.Primitive.button, {
+        ref: ref,
+        ...mergedProps
+    });
+});
+FieldButtonClearButton.displayName = "FieldButtonClearButton";
+
+exports.FieldButtonButton = FieldButtonButton;
+exports.FieldButtonClearButton = FieldButtonClearButton;
+exports.FieldButtonDescription = FieldButtonDescription;
+exports.FieldButtonErrorMessage = FieldButtonErrorMessage;
+exports.FieldButtonHiddenInput = FieldButtonHiddenInput;
+exports.FieldButtonRoot = FieldButtonRoot;
+exports.useFieldButtonContext = useFieldButtonContext;

package/lib/FieldButton-12s-nUvzy79W.js

@@ -0,0 +1,215 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+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';
+
+const getDescriptionId = (id)=>`field-button:${id}:description`;
+const getErrorMessageId = (id)=>`field-button:${id}:error-message`;
+
+function useFieldButtonState({ values = [], onValuesChange = ()=>{} }) {
+    const [isHovered, setIsHovered] = useState(false);
+    const [isActive, setIsActive] = useState(false);
+    const [isFocused, setIsFocused] = useState(false);
+    const [isFocusVisible, setIsFocusVisible] = useState(false);
+    const [isDescriptionRendered, setIsDescriptionRendered] = useState(false);
+    const descriptionRef = useCallback((node)=>{
+        setIsDescriptionRendered(!!node);
+    }, []);
+    const [isErrorMessageRendered, setIsErrorMessageRendered] = useState(false);
+    const errorMessageRef = useCallback((node)=>{
+        setIsErrorMessageRendered(!!node);
+    }, []);
+    return {
+        values,
+        isHovered,
+        isActive,
+        isFocused,
+        isFocusVisible,
+        refs: {
+            description: descriptionRef,
+            errorMessage: errorMessageRef
+        },
+        renderedElements: {
+            description: isDescriptionRendered,
+            errorMessage: isErrorMessageRendered
+        },
+        setValues: onValuesChange,
+        setIsHovered,
+        setIsActive,
+        setIsFocused,
+        setIsFocusVisible
+    };
+}
+function useFieldButton(props) {
+    const id = useId();
+    const { values: propValues, onValuesChange, disabled = false, invalid = false, name } = props;
+    const { values: stateValues, isHovered, isActive, isFocused, isFocusVisible, refs, renderedElements, setValues, setIsHovered, setIsActive, setIsFocused, setIsFocusVisible } = useFieldButtonState({
+        values: propValues,
+        onValuesChange
+    });
+    const ariaDescribedBy = [
+        renderedElements.description ? getDescriptionId(id) : false,
+        renderedElements.errorMessage ? getErrorMessageId(id) : false
+    ].filter(Boolean).join(" ") || undefined;
+    const stateProps = elementProps({
+        "data-hover": dataAttr(isHovered),
+        "data-active": dataAttr(isActive),
+        "data-focus": dataAttr(isFocused),
+        "data-focus-visible": dataAttr(isFocusVisible),
+        "data-disabled": dataAttr(disabled),
+        "data-invalid": dataAttr(invalid)
+    });
+    return {
+        values: stateValues,
+        active: isActive,
+        focused: isFocused,
+        invalid,
+        setIsFocused,
+        setIsFocusVisible,
+        refs,
+        stateProps,
+        rootProps: elementProps({
+            ...stateProps,
+            onPointerMove () {
+                setIsHovered(true);
+            },
+            onPointerLeave () {
+                setIsHovered(false);
+                setIsActive(false);
+            }
+        }),
+        buttonProps: buttonProps({
+            ...stateProps,
+            type: "button",
+            disabled,
+            "aria-disabled": ariaAttr(disabled),
+            "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
+            onPointerDown () {
+                setIsActive(true);
+            },
+            onPointerUp () {
+                setIsActive(false);
+            },
+            onBlur () {
+                setIsFocused(false);
+                setIsFocusVisible(false);
+            },
+            onFocus (event) {
+                setIsFocused(true);
+                setIsFocusVisible(event.target.matches(":focus-visible"));
+            }
+        }),
+        clearButtonProps: buttonProps({
+            ...stateProps,
+            type: "button",
+            disabled,
+            onClick: useCallback(()=>setValues([]), [
+                setValues
+            ]),
+            hidden: disabled
+        }),
+        getHiddenInputProps: useCallback((index)=>{
+            const value = stateValues[index];
+            if (value === undefined) return null;
+            return inputProps({
+                type: "hidden",
+                value,
+                name: name || id
+            });
+        }, [
+            stateValues,
+            name,
+            id
+        ]),
+        descriptionProps: elementProps({
+            ...stateProps,
+            id: getDescriptionId(id)
+        }),
+        errorMessageProps: elementProps({
+            ...stateProps,
+            id: getErrorMessageId(id),
+            "aria-live": "polite"
+        })
+    };
+}
+
+const FieldButtonContext = /*#__PURE__*/ createContext(null);
+const FieldButtonProvider = FieldButtonContext.Provider;
+function useFieldButtonContext({ strict = true } = {}) {
+    const context = useContext(FieldButtonContext);
+    if (!context && strict) {
+        throw new Error("useFieldButtonContext must be used within a FieldButton");
+    }
+    return context;
+}
+
+const FieldButtonRoot = /*#__PURE__*/ forwardRef(({ disabled, invalid, name, values, onValuesChange, ...otherProps }, ref)=>{
+    const api = useFieldButton({
+        disabled,
+        invalid,
+        name,
+        values,
+        onValuesChange
+    });
+    const mergedProps = mergeProps(api.rootProps, otherProps);
+    return /*#__PURE__*/ jsx(FieldButtonProvider, {
+        value: api,
+        children: /*#__PURE__*/ jsx(Primitive.div, {
+            ref: ref,
+            ...mergedProps
+        })
+    });
+});
+FieldButtonRoot.displayName = "FieldButtonRoot";
+const FieldButtonButton = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { buttonProps } = useFieldButtonContext();
+    const mergedProps = mergeProps(buttonProps, props);
+    return /*#__PURE__*/ jsx(Primitive.button, {
+        ref: ref,
+        ...mergedProps
+    });
+});
+FieldButtonButton.displayName = "FieldButtonButton";
+const FieldButtonDescription = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { refs, descriptionProps } = useFieldButtonContext();
+    const mergedProps = mergeProps(descriptionProps, props);
+    return /*#__PURE__*/ jsx(Primitive.span, {
+        ref: composeRefs(refs.description, ref),
+        ...mergedProps
+    });
+});
+FieldButtonDescription.displayName = "FieldButtonDescription";
+const FieldButtonErrorMessage = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { refs, errorMessageProps } = useFieldButtonContext();
+    const mergedProps = mergeProps(errorMessageProps, props);
+    return /*#__PURE__*/ jsx(Primitive.div, {
+        ref: composeRefs(refs.errorMessage, ref),
+        ...mergedProps
+    });
+});
+FieldButtonErrorMessage.displayName = "FieldButtonErrorMessage";
+const FieldButtonHiddenInput = /*#__PURE__*/ forwardRef(({ valueIndex, ...props }, ref)=>{
+    const { getHiddenInputProps } = useFieldButtonContext();
+    const hiddenInputProps = getHiddenInputProps(valueIndex);
+    if (!hiddenInputProps) return null;
+    return /*#__PURE__*/ jsx(Primitive.input, {
+        ref: ref,
+        ...mergeProps(hiddenInputProps, props)
+    });
+});
+FieldButtonHiddenInput.displayName = "FieldButtonHiddenInput";
+const FieldButtonClearButton = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { clearButtonProps } = useFieldButtonContext();
+    const mergedProps = mergeProps(clearButtonProps, props);
+    return /*#__PURE__*/ jsx(Primitive.button, {
+        ref: ref,
+        ...mergedProps
+    });
+});
+FieldButtonClearButton.displayName = "FieldButtonClearButton";
+
+export { FieldButtonButton as F, FieldButtonClearButton as a, FieldButtonDescription as b, FieldButtonErrorMessage as c, FieldButtonHiddenInput as d, FieldButtonRoot as e, useFieldButtonContext as u };

package/lib/index.cjs

@@ -0,0 +1,20 @@
+var FieldButton12s = require('./FieldButton-12s-CF9DP1xP.cjs');
+
+var FieldButton_namespace = {
+  __proto__: null,
+  Button: FieldButton12s.FieldButtonButton,
+  ClearButton: FieldButton12s.FieldButtonClearButton,
+  Description: FieldButton12s.FieldButtonDescription,
+  ErrorMessage: FieldButton12s.FieldButtonErrorMessage,
+  HiddenInput: FieldButton12s.FieldButtonHiddenInput,
+  Root: FieldButton12s.FieldButtonRoot
+};
+
+exports.FieldButtonButton = FieldButton12s.FieldButtonButton;
+exports.FieldButtonClearButton = FieldButton12s.FieldButtonClearButton;
+exports.FieldButtonDescription = FieldButton12s.FieldButtonDescription;
+exports.FieldButtonErrorMessage = FieldButton12s.FieldButtonErrorMessage;
+exports.FieldButtonHiddenInput = FieldButton12s.FieldButtonHiddenInput;
+exports.FieldButtonRoot = FieldButton12s.FieldButtonRoot;
+exports.useFieldButtonContext = FieldButton12s.useFieldButtonContext;
+exports.FieldButton = FieldButton_namespace;