@yamada-ui/segmented-control 0.3.16 → 0.4.0

package/dist/{chunk-2LRRZGHE.mjs → chunk-KEAS3GXU.mjs}

@@ -20,7 +20,8 @@ import {
   handlerAll,
   mergeRefs,
   omitObject,
-  useCallbackRef
+  useCallbackRef,
+  useIsMounted
 } from "@yamada-ui/utils";
 import {
   useCallback,
@@ -41,7 +42,17 @@ var SegmentedControl = forwardRef(
       "SegmentedControl",
       props
     );
-    let { className, id, name, isReadOnly, isDisabled, children, ...rest } = omitThemeProps(mergedProps);
+    let {
+      className,
+      id,
+      name,
+      isReadOnly,
+      isDisabled,
+      children,
+      items = [],
+      ...rest
+    } = omitThemeProps(mergedProps);
+    const isMoutedRef = useIsMounted();
     id = id != null ? id : useId();
     name = name != null ? name : `segmented-control-${useId()}`;
     rest.onChange = useCallbackRef(rest.onChange);
@@ -51,34 +62,27 @@ var SegmentedControl = forwardRef(
     const [observerRef, containerRect] = useResizeObserver();
     const containerRef = useRef(null);
     const labelRefs = useRef(/* @__PURE__ */ new Map());
-    const [activePosition, setActivePosition] = useState({
-      width: 0,
-      height: 0,
-      x: 0,
-      y: 0
-    });
     const [value, setValue] = useControllableState({
       value: rest.value,
       defaultValue: rest.defaultValue,
       onChange: rest.onChange
     });
-    useEffect(() => {
-      return trackFocusVisible(setIsFocusVisible);
-    }, []);
-    useEffect(() => {
+    const getActivePosition = useCallback(() => {
+      const rect = { width: 0, height: 0, x: 0, y: 0 };
       const el = labelRefs.current.get(value);
       if (!el || !containerRef.current || !observerRef.current)
-        return;
+        return rect;
       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]);
+      rect.x = el.offsetLeft - gutterX;
+      rect.y = el.offsetTop - gutterY;
+      rect.width = width * (el.offsetWidth / width) || 0;
+      rect.height = height * (el.offsetWidth / width) || 0;
+      return rect;
+    }, [observerRef, value]);
+    const [activePosition, setActivePosition] = useState(getActivePosition);
     const onChange = useCallback(
       (ev) => {
         if (isDisabled || isReadOnly) {
@@ -205,6 +209,12 @@ var SegmentedControl = forwardRef(
       },
       [focusedIndex, isDisabled, isFocusVisible, isReadOnly, onFocus, value]
     );
+    useEffect(() => {
+      return trackFocusVisible(setIsFocusVisible);
+    }, []);
+    useEffect(() => {
+      setActivePosition(getActivePosition());
+    }, [focusedIndex, containerRect, value, getActivePosition]);
     const css = {
       position: "relative",
       display: "inline-flex",
@@ -212,8 +222,14 @@ var SegmentedControl = forwardRef(
       ...styles.container
     };
     const validChildren = getValidChildren(children);
+    let computedChildren = [];
+    if (!validChildren.length && items.length) {
+      computedChildren = items.map(({ label, value: value2, ...props2 }, i) => /* @__PURE__ */ jsx(SegmentedControlButton, { value: value2, ...props2, children: label }, i));
+    } else {
+      computedChildren = validChildren;
+    }
     if (value == null && rest.defaultValue == null) {
-      for (const child of validChildren) {
+      for (const child of computedChildren) {
         if (child.type !== SegmentedControlButton)
           continue;
         const value2 = child.props.value;
@@ -232,15 +248,15 @@ var SegmentedControl = forwardRef(
             className: cx("ui-segmented-control", className),
             __css: css,
             children: [
-              /* @__PURE__ */ jsx(
+              isMoutedRef.current ? /* @__PURE__ */ jsx(
                 ui.span,
                 {
-                  className: "ui-segmented-control-active",
+                  className: "ui-segmented-control__active",
                   ...getActiveProps(),
                   __css: styles.active
                 }
-              ),
-              validChildren
+              ) : null,
+              computedChildren
             ]
           }
         )
@@ -285,7 +301,7 @@ var SegmentedControlButton = forwardRef(
       ui.label,
       {
         ...getLabelProps(omitObject(props, ["onChange"])),
-        className: cx("ui-segmented-control-button", className),
+        className: cx("ui-segmented-control__button", className),
         __css: css,
         ...rest,
         children: [

package/dist/index.d.mts

@@ -1,3 +1,3 @@
-export { SegmentedControl, SegmentedControlButton, SegmentedControlButtonProps, SegmentedControlProps } from './segmented-control.mjs';
+export { SegmentedControl, SegmentedControlButton, SegmentedControlButtonProps, SegmentedControlItem, SegmentedControlProps } from './segmented-control.mjs';
 import '@yamada-ui/core';
 import 'react';

package/dist/index.d.ts

@@ -1,3 +1,3 @@
-export { SegmentedControl, SegmentedControlButton, SegmentedControlButtonProps, SegmentedControlProps } from './segmented-control.js';
+export { SegmentedControl, SegmentedControlButton, SegmentedControlButtonProps, SegmentedControlItem, SegmentedControlProps } from './segmented-control.js';
 import '@yamada-ui/core';
 import 'react';

package/dist/index.js

@@ -46,7 +46,17 @@ var SegmentedControl = (0, import_core.forwardRef)(
       "SegmentedControl",
       props
     );
-    let { className, id, name, isReadOnly, isDisabled, children, ...rest } = (0, import_core.omitThemeProps)(mergedProps);
+    let {
+      className,
+      id,
+      name,
+      isReadOnly,
+      isDisabled,
+      children,
+      items = [],
+      ...rest
+    } = (0, import_core.omitThemeProps)(mergedProps);
+    const isMoutedRef = (0, import_utils.useIsMounted)();
     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);
@@ -56,34 +66,27 @@ var SegmentedControl = (0, import_core.forwardRef)(
     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 getActivePosition = (0, import_react.useCallback)(() => {
+      const rect = { width: 0, height: 0, x: 0, y: 0 };
       const el = labelRefs.current.get(value);
       if (!el || !containerRef.current || !observerRef.current)
-        return;
+        return rect;
       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]);
+      rect.x = el.offsetLeft - gutterX;
+      rect.y = el.offsetTop - gutterY;
+      rect.width = width * (el.offsetWidth / width) || 0;
+      rect.height = height * (el.offsetWidth / width) || 0;
+      return rect;
+    }, [observerRef, value]);
+    const [activePosition, setActivePosition] = (0, import_react.useState)(getActivePosition);
     const onChange = (0, import_react.useCallback)(
       (ev) => {
         if (isDisabled || isReadOnly) {
@@ -210,6 +213,12 @@ var SegmentedControl = (0, import_core.forwardRef)(
       },
       [focusedIndex, isDisabled, isFocusVisible, isReadOnly, onFocus, value]
     );
+    (0, import_react.useEffect)(() => {
+      return (0, import_use_focus_visible.trackFocusVisible)(setIsFocusVisible);
+    }, []);
+    (0, import_react.useEffect)(() => {
+      setActivePosition(getActivePosition());
+    }, [focusedIndex, containerRect, value, getActivePosition]);
     const css = {
       position: "relative",
       display: "inline-flex",
@@ -217,8 +226,14 @@ var SegmentedControl = (0, import_core.forwardRef)(
       ...styles.container
     };
     const validChildren = (0, import_utils.getValidChildren)(children);
+    let computedChildren = [];
+    if (!validChildren.length && items.length) {
+      computedChildren = items.map(({ label, value: value2, ...props2 }, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SegmentedControlButton, { value: value2, ...props2, children: label }, i));
+    } else {
+      computedChildren = validChildren;
+    }
     if (value == null && rest.defaultValue == null) {
-      for (const child of validChildren) {
+      for (const child of computedChildren) {
         if (child.type !== SegmentedControlButton)
           continue;
         const value2 = child.props.value;
@@ -237,15 +252,15 @@ var SegmentedControl = (0, import_core.forwardRef)(
             className: (0, import_utils.cx)("ui-segmented-control", className),
             __css: css,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              isMoutedRef.current ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                 import_core.ui.span,
                 {
-                  className: "ui-segmented-control-active",
+                  className: "ui-segmented-control__active",
                   ...getActiveProps(),
                   __css: styles.active
                 }
-              ),
-              validChildren
+              ) : null,
+              computedChildren
             ]
           }
         )
@@ -290,7 +305,7 @@ var SegmentedControlButton = (0, import_core.forwardRef)(
       import_core.ui.label,
       {
         ...getLabelProps((0, import_utils.omitObject)(props, ["onChange"])),
-        className: (0, import_utils.cx)("ui-segmented-control-button", className),
+        className: (0, import_utils.cx)("ui-segmented-control__button", className),
         __css: css,
         ...rest,
         children: [

package/dist/index.mjs

@@ -2,7 +2,7 @@
 import {
   SegmentedControl,
   SegmentedControlButton
-} from "./chunk-2LRRZGHE.mjs";
+} from "./chunk-KEAS3GXU.mjs";
 export {
   SegmentedControl,
   SegmentedControlButton

package/dist/segmented-control.d.mts

@@ -2,6 +2,9 @@ import * as _yamada_ui_core from '@yamada-ui/core';
 import { HTMLUIProps, ThemeProps } from '@yamada-ui/core';
 import { ChangeEventHandler } from 'react';
 
+type SegmentedControlItem = SegmentedControlButtonProps & {
+    label?: string;
+};
 type SegmentedControlOptions = {
     /**
      * The HTML `name` attribute used for forms.
@@ -31,8 +34,14 @@ type SegmentedControlOptions = {
      * @default false
      */
     isDisabled?: boolean;
+    /**
+     * If provided, generate segmented control buttons but based on items.
+     *
+     * @default '[]'
+     */
+    items?: SegmentedControlItem[];
 };
-type SegmentedControlProps = Omit<HTMLUIProps<'div'>, 'onChange'> & ThemeProps<'SegmentedControl'> & SegmentedControlOptions;
+type SegmentedControlProps = Omit<HTMLUIProps<"div">, "onChange"> & ThemeProps<"SegmentedControl"> & SegmentedControlOptions;
 declare const SegmentedControl: _yamada_ui_core.Component<"div", SegmentedControlProps>;
 type SegmentedControlButtonOptions = {
     /**
@@ -44,7 +53,7 @@ type SegmentedControlButtonOptions = {
      */
     onChange?: ChangeEventHandler<HTMLInputElement>;
 };
-type SegmentedControlButtonProps = Omit<HTMLUIProps<'label'>, 'onChange'> & Pick<SegmentedControlProps, 'isDisabled' | 'isReadOnly'> & SegmentedControlButtonOptions;
+type SegmentedControlButtonProps = Omit<HTMLUIProps<"label">, "onChange"> & Pick<SegmentedControlProps, "isDisabled" | "isReadOnly"> & SegmentedControlButtonOptions;
 declare const SegmentedControlButton: _yamada_ui_core.Component<"input", SegmentedControlButtonProps>;
 
-export { SegmentedControl, SegmentedControlButton, SegmentedControlButtonProps, SegmentedControlProps };
+export { SegmentedControl, SegmentedControlButton, SegmentedControlButtonProps, SegmentedControlItem, SegmentedControlProps };

package/dist/segmented-control.d.ts

@@ -2,6 +2,9 @@ import * as _yamada_ui_core from '@yamada-ui/core';
 import { HTMLUIProps, ThemeProps } from '@yamada-ui/core';
 import { ChangeEventHandler } from 'react';
 
+type SegmentedControlItem = SegmentedControlButtonProps & {
+    label?: string;
+};
 type SegmentedControlOptions = {
     /**
      * The HTML `name` attribute used for forms.
@@ -31,8 +34,14 @@ type SegmentedControlOptions = {
      * @default false
      */
     isDisabled?: boolean;
+    /**
+     * If provided, generate segmented control buttons but based on items.
+     *
+     * @default '[]'
+     */
+    items?: SegmentedControlItem[];
 };
-type SegmentedControlProps = Omit<HTMLUIProps<'div'>, 'onChange'> & ThemeProps<'SegmentedControl'> & SegmentedControlOptions;
+type SegmentedControlProps = Omit<HTMLUIProps<"div">, "onChange"> & ThemeProps<"SegmentedControl"> & SegmentedControlOptions;
 declare const SegmentedControl: _yamada_ui_core.Component<"div", SegmentedControlProps>;
 type SegmentedControlButtonOptions = {
     /**
@@ -44,7 +53,7 @@ type SegmentedControlButtonOptions = {
      */
     onChange?: ChangeEventHandler<HTMLInputElement>;
 };
-type SegmentedControlButtonProps = Omit<HTMLUIProps<'label'>, 'onChange'> & Pick<SegmentedControlProps, 'isDisabled' | 'isReadOnly'> & SegmentedControlButtonOptions;
+type SegmentedControlButtonProps = Omit<HTMLUIProps<"label">, "onChange"> & Pick<SegmentedControlProps, "isDisabled" | "isReadOnly"> & SegmentedControlButtonOptions;
 declare const SegmentedControlButton: _yamada_ui_core.Component<"input", SegmentedControlButtonProps>;
 
-export { SegmentedControl, SegmentedControlButton, SegmentedControlButtonProps, SegmentedControlProps };
+export { SegmentedControl, SegmentedControlButton, SegmentedControlButtonProps, SegmentedControlItem, SegmentedControlProps };

package/dist/segmented-control.js

@@ -44,7 +44,17 @@ var SegmentedControl = (0, import_core.forwardRef)(
       "SegmentedControl",
       props
     );
-    let { className, id, name, isReadOnly, isDisabled, children, ...rest } = (0, import_core.omitThemeProps)(mergedProps);
+    let {
+      className,
+      id,
+      name,
+      isReadOnly,
+      isDisabled,
+      children,
+      items = [],
+      ...rest
+    } = (0, import_core.omitThemeProps)(mergedProps);
+    const isMoutedRef = (0, import_utils.useIsMounted)();
     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);
@@ -54,34 +64,27 @@ var SegmentedControl = (0, import_core.forwardRef)(
     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 getActivePosition = (0, import_react.useCallback)(() => {
+      const rect = { width: 0, height: 0, x: 0, y: 0 };
       const el = labelRefs.current.get(value);
       if (!el || !containerRef.current || !observerRef.current)
-        return;
+        return rect;
       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]);
+      rect.x = el.offsetLeft - gutterX;
+      rect.y = el.offsetTop - gutterY;
+      rect.width = width * (el.offsetWidth / width) || 0;
+      rect.height = height * (el.offsetWidth / width) || 0;
+      return rect;
+    }, [observerRef, value]);
+    const [activePosition, setActivePosition] = (0, import_react.useState)(getActivePosition);
     const onChange = (0, import_react.useCallback)(
       (ev) => {
         if (isDisabled || isReadOnly) {
@@ -208,6 +211,12 @@ var SegmentedControl = (0, import_core.forwardRef)(
       },
       [focusedIndex, isDisabled, isFocusVisible, isReadOnly, onFocus, value]
     );
+    (0, import_react.useEffect)(() => {
+      return (0, import_use_focus_visible.trackFocusVisible)(setIsFocusVisible);
+    }, []);
+    (0, import_react.useEffect)(() => {
+      setActivePosition(getActivePosition());
+    }, [focusedIndex, containerRect, value, getActivePosition]);
     const css = {
       position: "relative",
       display: "inline-flex",
@@ -215,8 +224,14 @@ var SegmentedControl = (0, import_core.forwardRef)(
       ...styles.container
     };
     const validChildren = (0, import_utils.getValidChildren)(children);
+    let computedChildren = [];
+    if (!validChildren.length && items.length) {
+      computedChildren = items.map(({ label, value: value2, ...props2 }, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SegmentedControlButton, { value: value2, ...props2, children: label }, i));
+    } else {
+      computedChildren = validChildren;
+    }
     if (value == null && rest.defaultValue == null) {
-      for (const child of validChildren) {
+      for (const child of computedChildren) {
         if (child.type !== SegmentedControlButton)
           continue;
         const value2 = child.props.value;
@@ -235,15 +250,15 @@ var SegmentedControl = (0, import_core.forwardRef)(
             className: (0, import_utils.cx)("ui-segmented-control", className),
             __css: css,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              isMoutedRef.current ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                 import_core.ui.span,
                 {
-                  className: "ui-segmented-control-active",
+                  className: "ui-segmented-control__active",
                   ...getActiveProps(),
                   __css: styles.active
                 }
-              ),
-              validChildren
+              ) : null,
+              computedChildren
             ]
           }
         )
@@ -288,7 +303,7 @@ var SegmentedControlButton = (0, import_core.forwardRef)(
       import_core.ui.label,
       {
         ...getLabelProps((0, import_utils.omitObject)(props, ["onChange"])),
-        className: (0, import_utils.cx)("ui-segmented-control-button", className),
+        className: (0, import_utils.cx)("ui-segmented-control__button", className),
         __css: css,
         ...rest,
         children: [

package/dist/segmented-control.mjs

@@ -2,7 +2,7 @@
 import {
   SegmentedControl,
   SegmentedControlButton
-} from "./chunk-2LRRZGHE.mjs";
+} from "./chunk-KEAS3GXU.mjs";
 export {
   SegmentedControl,
   SegmentedControlButton

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yamada-ui/segmented-control",
-  "version": "0.3.16",
+  "version": "0.4.0",
   "description": "Yamada UI segmented control components",
   "keywords": [
     "yamada",