@yamada-ui/segmented-control 0.2.7 → 0.2.8

package/dist/segmented-control.js

@@ -37,204 +37,231 @@ var [SegmentedControlProvider, useSegmentedControl] = (0, import_utils.createCon
   strict: false,
   name: "SegmentedControlContext"
 });
-var SegmentedControl = (0, import_core.forwardRef)((props, ref) => {
-  const [styles, mergedProps] = (0, import_core.useMultiComponentStyle)("SegmentedControl", props);
-  let { className, id, name, isReadOnly, isDisabled, children, ...rest } = (0, import_core.omitThemeProps)(mergedProps);
-  id = id != null ? id : (0, import_react.useId)();
-  name = name != null ? name : `segmented-control-${(0, import_react.useId)()}`;
-  rest.onChange = (0, import_utils.useCallbackRef)(rest.onChange);
-  const descendants = useDescendants();
-  const [focusedIndex, setFocusedIndex] = (0, import_react.useState)(-1);
-  const [isFocusVisible, setIsFocusVisible] = (0, import_react.useState)(false);
-  const [observerRef, containerRect] = (0, import_use_resize_observer.useResizeObserver)();
-  const containerRef = (0, import_react.useRef)(null);
-  const labelRefs = (0, import_react.useRef)(/* @__PURE__ */ new Map());
-  const [activePosition, setActivePosition] = (0, import_react.useState)({
-    width: 0,
-    height: 0,
-    x: 0,
-    y: 0
-  });
-  const [value, setValue] = (0, import_use_controllable_state.useControllableState)({
-    value: rest.value,
-    defaultValue: rest.defaultValue,
-    onChange: rest.onChange
-  });
-  (0, import_react.useEffect)(() => {
-    return (0, import_use_focus_visible.trackFocusVisible)(setIsFocusVisible);
-  }, []);
-  (0, import_react.useEffect)(() => {
-    const el = labelRefs.current.get(value);
-    if (!el || !containerRef.current || !observerRef.current)
-      return;
-    const { paddingLeft, paddingTop } = getComputedStyle(containerRef.current);
-    const gutterX = parseFloat(paddingLeft) || 0;
-    const gutterY = parseFloat(paddingTop) || 0;
-    let { width, height } = el.getBoundingClientRect();
-    const x = el.offsetLeft - gutterX;
-    const y = el.offsetTop - gutterY;
-    width = width * (el.offsetWidth / width) || 0;
-    height = height * (el.offsetWidth / width) || 0;
-    setActivePosition({ width, height, x, y });
-  }, [focusedIndex, containerRect, labelRefs, observerRef, value]);
-  const onChange = (0, import_react.useCallback)(
-    (ev) => {
-      if (isDisabled || isReadOnly) {
-        ev.preventDefault();
-        return;
-      }
-      setValue(ev.target.value);
-    },
-    [isDisabled, isReadOnly, setValue]
-  );
-  const onFocus = (0, import_react.useCallback)(
-    (index, skip) => {
-      if (isDisabled)
+var SegmentedControl = (0, import_core.forwardRef)(
+  (props, ref) => {
+    const [styles, mergedProps] = (0, import_core.useMultiComponentStyle)(
+      "SegmentedControl",
+      props
+    );
+    let { className, id, name, isReadOnly, isDisabled, children, ...rest } = (0, import_core.omitThemeProps)(mergedProps);
+    id = id != null ? id : (0, import_react.useId)();
+    name = name != null ? name : `segmented-control-${(0, import_react.useId)()}`;
+    rest.onChange = (0, import_utils.useCallbackRef)(rest.onChange);
+    const descendants = useDescendants();
+    const [focusedIndex, setFocusedIndex] = (0, import_react.useState)(-1);
+    const [isFocusVisible, setIsFocusVisible] = (0, import_react.useState)(false);
+    const [observerRef, containerRect] = (0, import_use_resize_observer.useResizeObserver)();
+    const containerRef = (0, import_react.useRef)(null);
+    const labelRefs = (0, import_react.useRef)(/* @__PURE__ */ new Map());
+    const [activePosition, setActivePosition] = (0, import_react.useState)({
+      width: 0,
+      height: 0,
+      x: 0,
+      y: 0
+    });
+    const [value, setValue] = (0, import_use_controllable_state.useControllableState)({
+      value: rest.value,
+      defaultValue: rest.defaultValue,
+      onChange: rest.onChange
+    });
+    (0, import_react.useEffect)(() => {
+      return (0, import_use_focus_visible.trackFocusVisible)(setIsFocusVisible);
+    }, []);
+    (0, import_react.useEffect)(() => {
+      const el = labelRefs.current.get(value);
+      if (!el || !containerRef.current || !observerRef.current)
         return;
-      if (skip) {
-        const next = descendants.enabledNextValue(index);
-        if (next)
-          setFocusedIndex(next.index);
-      } else {
-        setFocusedIndex(index);
-      }
-    },
-    [descendants, isDisabled]
-  );
-  const onBlur = (0, import_react.useCallback)(() => setFocusedIndex(-1), []);
-  const getContainerProps = (0, import_react.useCallback)(
-    (props2 = {}, ref2 = null) => ({
-      ...(0, import_utils.omitObject)(rest, ["value", "defaultValue", "onChange"]),
-      ...props2,
-      ref: (0, import_utils.mergeRefs)(containerRef, observerRef, ref2),
-      id,
-      "aria-disabled": (0, import_utils.ariaAttr)(isDisabled),
-      "aria-readonly": (0, import_utils.ariaAttr)(isReadOnly),
-      onBlur: (0, import_utils.handlerAll)(props2.onBlur, onBlur)
-    }),
-    [id, isDisabled, isReadOnly, observerRef, onBlur, rest]
-  );
-  const getActiveProps = (0, import_react.useCallback)(
-    (props2 = {}, ref2 = null) => {
-      const { width, height, x, y } = activePosition;
-      return {
-        ...props2,
-        ref: ref2,
-        style: {
-          position: "absolute",
-          zIndex: 1,
-          width,
-          height,
-          transform: `translate(${x}px, ${y}px)`
+      const { paddingLeft, paddingTop } = getComputedStyle(containerRef.current);
+      const gutterX = parseFloat(paddingLeft) || 0;
+      const gutterY = parseFloat(paddingTop) || 0;
+      let { width, height } = el.getBoundingClientRect();
+      const x = el.offsetLeft - gutterX;
+      const y = el.offsetTop - gutterY;
+      width = width * (el.offsetWidth / width) || 0;
+      height = height * (el.offsetWidth / width) || 0;
+      setActivePosition({ width, height, x, y });
+    }, [focusedIndex, containerRect, labelRefs, observerRef, value]);
+    const onChange = (0, import_react.useCallback)(
+      (ev) => {
+        if (isDisabled || isReadOnly) {
+          ev.preventDefault();
+          return;
         }
-      };
-    },
-    [activePosition]
-  );
-  const getInputProps = (0, import_react.useCallback)(
-    ({ index, ...props2 } = {}, ref2 = null) => {
-      var _a, _b, _c, _d;
-      const disabled = (_b = (_a = props2.disabled) != null ? _a : props2.isDisabled) != null ? _b : isDisabled;
-      const readOnly = (_d = (_c = props2.readOnly) != null ? _c : props2.isReadOnly) != null ? _d : isReadOnly;
-      const checked = props2.value === value;
-      return {
-        ...(0, import_utils.omitObject)(props2, ["isDisabled", "isReadOnly"]),
-        ref: ref2,
-        id: `${id}-${index}`,
-        type: "radio",
-        name,
-        disabled: disabled || readOnly,
-        readOnly,
-        checked,
-        "aria-disabled": (0, import_utils.ariaAttr)(disabled),
-        "aria-readonly": (0, import_utils.ariaAttr)(readOnly),
-        "data-checked": (0, import_utils.dataAttr)(checked),
-        "data-focus": (0, import_utils.dataAttr)(index === focusedIndex),
-        style: {
-          border: "0px",
-          clip: "rect(0px, 0px, 0px, 0px)",
-          height: "1px",
-          width: "1px",
-          margin: "-1px",
-          padding: "0px",
-          overflow: "hidden",
-          whiteSpace: "nowrap",
-          position: "absolute"
-        },
-        onChange: (0, import_utils.handlerAll)(
-          props2.onChange,
-          (ev) => !disabled && !readOnly ? onChange(ev) : {}
-        )
-      };
-    },
-    [isDisabled, isReadOnly, value, id, name, focusedIndex, onChange]
-  );
-  const getLabelProps = (0, import_react.useCallback)(
-    ({ index, ...props2 } = {}, ref2 = null) => {
-      var _a, _b, _c, _d;
-      const disabled = (_b = (_a = props2.disabled) != null ? _a : props2.isDisabled) != null ? _b : isDisabled;
-      const readOnly = (_d = (_c = props2.readOnly) != null ? _c : props2.isReadOnly) != null ? _d : isReadOnly;
-      const checked = props2.value === value;
-      const focused = index === focusedIndex;
-      return {
-        props: props2,
-        ref: (0, import_utils.mergeRefs)((node) => labelRefs.current.set(props2.value, node), ref2),
-        "aria-disabled": (0, import_utils.ariaAttr)(disabled),
-        "aria-readonly": (0, import_utils.ariaAttr)(readOnly),
-        "data-checked": (0, import_utils.dataAttr)(checked),
-        "data-focus": (0, import_utils.dataAttr)(focused),
-        "data-focus-visible": (0, import_utils.dataAttr)(focused && isFocusVisible),
-        onFocus: (0, import_utils.handlerAll)(props2.onFocus, () => onFocus(index, disabled || readOnly)),
-        ...disabled || readOnly ? {
-          _hover: {},
-          _active: {},
-          _focus: {},
-          _invalid: {},
-          _focusVisible: {}
-        } : {},
-        style: { position: "relative", zIndex: 2 }
-      };
-    },
-    [focusedIndex, isDisabled, isFocusVisible, isReadOnly, onFocus, value]
-  );
-  const css = {
-    position: "relative",
-    display: "inline-flex",
-    alignItems: "center",
-    ...styles.container
-  };
-  const validChildren = (0, import_utils.getValidChildren)(children);
-  if (value == null && rest.defaultValue == null) {
-    for (const child of validChildren) {
-      if (child.type !== SegmentedControlButton)
-        continue;
-      const value2 = child.props.value;
-      setValue(value2);
-      break;
+        setValue(ev.target.value);
+      },
+      [isDisabled, isReadOnly, setValue]
+    );
+    const onFocus = (0, import_react.useCallback)(
+      (index, skip) => {
+        if (isDisabled)
+          return;
+        if (skip) {
+          const next = descendants.enabledNextValue(index);
+          if (next)
+            setFocusedIndex(next.index);
+        } else {
+          setFocusedIndex(index);
+        }
+      },
+      [descendants, isDisabled]
+    );
+    const onBlur = (0, import_react.useCallback)(() => setFocusedIndex(-1), []);
+    const getContainerProps = (0, import_react.useCallback)(
+      (props2 = {}, ref2 = null) => ({
+        ...(0, import_utils.omitObject)(rest, ["value", "defaultValue", "onChange"]),
+        ...props2,
+        ref: (0, import_utils.mergeRefs)(containerRef, observerRef, ref2),
+        id,
+        "aria-disabled": (0, import_utils.ariaAttr)(isDisabled),
+        "aria-readonly": (0, import_utils.ariaAttr)(isReadOnly),
+        onBlur: (0, import_utils.handlerAll)(props2.onBlur, onBlur)
+      }),
+      [id, isDisabled, isReadOnly, observerRef, onBlur, rest]
+    );
+    const getActiveProps = (0, import_react.useCallback)(
+      (props2 = {}, ref2 = null) => {
+        const { width, height, x, y } = activePosition;
+        return {
+          ...props2,
+          ref: ref2,
+          style: {
+            position: "absolute",
+            zIndex: 1,
+            width,
+            height,
+            transform: `translate(${x}px, ${y}px)`
+          }
+        };
+      },
+      [activePosition]
+    );
+    const getInputProps = (0, import_react.useCallback)(
+      ({ index, ...props2 } = {}, ref2 = null) => {
+        var _a, _b, _c, _d;
+        const disabled = (_b = (_a = props2.disabled) != null ? _a : props2.isDisabled) != null ? _b : isDisabled;
+        const readOnly = (_d = (_c = props2.readOnly) != null ? _c : props2.isReadOnly) != null ? _d : isReadOnly;
+        const checked = props2.value === value;
+        return {
+          ...(0, import_utils.omitObject)(props2, ["isDisabled", "isReadOnly"]),
+          ref: ref2,
+          id: `${id}-${index}`,
+          type: "radio",
+          name,
+          disabled: disabled || readOnly,
+          readOnly,
+          checked,
+          "aria-disabled": (0, import_utils.ariaAttr)(disabled),
+          "aria-readonly": (0, import_utils.ariaAttr)(readOnly),
+          "data-checked": (0, import_utils.dataAttr)(checked),
+          "data-focus": (0, import_utils.dataAttr)(index === focusedIndex),
+          style: {
+            border: "0px",
+            clip: "rect(0px, 0px, 0px, 0px)",
+            height: "1px",
+            width: "1px",
+            margin: "-1px",
+            padding: "0px",
+            overflow: "hidden",
+            whiteSpace: "nowrap",
+            position: "absolute"
+          },
+          onChange: (0, import_utils.handlerAll)(
+            props2.onChange,
+            (ev) => !disabled && !readOnly ? onChange(ev) : {}
+          )
+        };
+      },
+      [isDisabled, isReadOnly, value, id, name, focusedIndex, onChange]
+    );
+    const getLabelProps = (0, import_react.useCallback)(
+      ({ index, ...props2 } = {}, ref2 = null) => {
+        var _a, _b, _c, _d;
+        const disabled = (_b = (_a = props2.disabled) != null ? _a : props2.isDisabled) != null ? _b : isDisabled;
+        const readOnly = (_d = (_c = props2.readOnly) != null ? _c : props2.isReadOnly) != null ? _d : isReadOnly;
+        const checked = props2.value === value;
+        const focused = index === focusedIndex;
+        return {
+          props: props2,
+          ref: (0, import_utils.mergeRefs)(
+            (node) => labelRefs.current.set(props2.value, node),
+            ref2
+          ),
+          "aria-disabled": (0, import_utils.ariaAttr)(disabled),
+          "aria-readonly": (0, import_utils.ariaAttr)(readOnly),
+          "data-checked": (0, import_utils.dataAttr)(checked),
+          "data-focus": (0, import_utils.dataAttr)(focused),
+          "data-focus-visible": (0, import_utils.dataAttr)(focused && isFocusVisible),
+          onFocus: (0, import_utils.handlerAll)(
+            props2.onFocus,
+            () => onFocus(index, disabled || readOnly)
+          ),
+          ...disabled || readOnly ? {
+            _hover: {},
+            _active: {},
+            _focus: {},
+            _invalid: {},
+            _focusVisible: {}
+          } : {},
+          style: { position: "relative", zIndex: 2 }
+        };
+      },
+      [focusedIndex, isDisabled, isFocusVisible, isReadOnly, onFocus, value]
+    );
+    const css = {
+      position: "relative",
+      display: "inline-flex",
+      alignItems: "center",
+      ...styles.container
+    };
+    const validChildren = (0, import_utils.getValidChildren)(children);
+    if (value == null && rest.defaultValue == null) {
+      for (const child of validChildren) {
+        if (child.type !== SegmentedControlButton)
+          continue;
+        const value2 = child.props.value;
+        setValue(value2);
+        break;
+      }
     }
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DescendantsContextProvider, { value: descendants, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SegmentedControlProvider, { value: { getInputProps, getLabelProps, styles }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-    import_core.ui.div,
-    {
-      ...getContainerProps({}, ref),
-      className: (0, import_utils.cx)("ui-segmented-control", className),
-      __css: css,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_core.ui.span,
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DescendantsContextProvider, { value: descendants, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      SegmentedControlProvider,
+      {
+        value: { getInputProps, getLabelProps, styles },
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          import_core.ui.div,
           {
-            className: "ui-segmented-control-active",
-            ...getActiveProps(),
-            __css: styles.active
+            ...getContainerProps({}, ref),
+            className: (0, import_utils.cx)("ui-segmented-control", className),
+            __css: css,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_core.ui.span,
+                {
+                  className: "ui-segmented-control-active",
+                  ...getActiveProps(),
+                  __css: styles.active
+                }
+              ),
+              validChildren
+            ]
           }
-        ),
-        validChildren
-      ]
-    }
-  ) }) });
-});
+        )
+      }
+    ) });
+  }
+);
 var SegmentedControlButton = (0, import_core.forwardRef)(
-  ({ className, disabled, readOnly, isDisabled, isReadOnly, value, onChange, children, ...rest }, ref) => {
+  ({
+    className,
+    disabled,
+    readOnly,
+    isDisabled,
+    isReadOnly,
+    value,
+    onChange,
+    children,
+    ...rest
+  }, ref) => {
     const { getInputProps, getLabelProps, styles } = useSegmentedControl();
     const { index, register } = useDescendant({
       disabled: isDisabled || isReadOnly

package/dist/segmented-control.mjs

@@ -1,7 +1,7 @@
 import {
   SegmentedControl,
   SegmentedControlButton
-} from "./chunk-4HOIPB3J.mjs";
+} from "./chunk-4HYHR4JU.mjs";
 export {
   SegmentedControl,
   SegmentedControlButton

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yamada-ui/segmented-control",
-  "version": "0.2.7",
+  "version": "0.2.8",
   "description": "Yamada UI segmented control components",
   "keywords": [
     "yamada",
@@ -35,12 +35,12 @@
     "url": "https://github.com/hirotomoyamada/yamada-ui/issues"
   },
   "dependencies": {
-    "@yamada-ui/core": "0.5.1",
-    "@yamada-ui/utils": "0.1.3",
-    "@yamada-ui/use-focus-visible": "0.1.3",
-    "@yamada-ui/use-descendant": "0.1.4",
-    "@yamada-ui/use-resize-observer": "0.1.3",
-    "@yamada-ui/use-controllable-state": "0.1.4"
+    "@yamada-ui/core": "0.5.2",
+    "@yamada-ui/utils": "0.1.4",
+    "@yamada-ui/use-focus-visible": "0.1.4",
+    "@yamada-ui/use-descendant": "0.1.5",
+    "@yamada-ui/use-resize-observer": "0.1.4",
+    "@yamada-ui/use-controllable-state": "0.1.5"
   },
   "devDependencies": {
     "react": "^18.0.0",