@yamada-ui/segmented-control 0.2.7 → 0.2.9

package/dist/chunk-4HYHR4JU.mjs

@@ -0,0 +1,301 @@
+// src/segmented-control.tsx
+import {
+  ui,
+  forwardRef,
+  useMultiComponentStyle,
+  omitThemeProps
+} from "@yamada-ui/core";
+import { useControllableState } from "@yamada-ui/use-controllable-state";
+import { createDescendant } from "@yamada-ui/use-descendant";
+import { trackFocusVisible } from "@yamada-ui/use-focus-visible";
+import { useResizeObserver } from "@yamada-ui/use-resize-observer";
+import {
+  ariaAttr,
+  createContext,
+  cx,
+  dataAttr,
+  getValidChildren,
+  handlerAll,
+  mergeRefs,
+  omitObject,
+  useCallbackRef
+} from "@yamada-ui/utils";
+import {
+  useCallback,
+  useEffect,
+  useId,
+  useRef,
+  useState
+} from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var { DescendantsContextProvider, useDescendants, useDescendant } = createDescendant();
+var [SegmentedControlProvider, useSegmentedControl] = createContext({
+  strict: false,
+  name: "SegmentedControlContext"
+});
+var SegmentedControl = forwardRef(
+  (props, ref) => {
+    const [styles, mergedProps] = useMultiComponentStyle(
+      "SegmentedControl",
+      props
+    );
+    let { className, id, name, isReadOnly, isDisabled, children, ...rest } = omitThemeProps(mergedProps);
+    id = id != null ? id : useId();
+    name = name != null ? name : `segmented-control-${useId()}`;
+    rest.onChange = useCallbackRef(rest.onChange);
+    const descendants = useDescendants();
+    const [focusedIndex, setFocusedIndex] = useState(-1);
+    const [isFocusVisible, setIsFocusVisible] = useState(false);
+    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 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 = useCallback(
+      (ev) => {
+        if (isDisabled || isReadOnly) {
+          ev.preventDefault();
+          return;
+        }
+        setValue(ev.target.value);
+      },
+      [isDisabled, isReadOnly, setValue]
+    );
+    const onFocus = 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 = useCallback(() => setFocusedIndex(-1), []);
+    const getContainerProps = useCallback(
+      (props2 = {}, ref2 = null) => ({
+        ...omitObject(rest, ["value", "defaultValue", "onChange"]),
+        ...props2,
+        ref: mergeRefs(containerRef, observerRef, ref2),
+        id,
+        "aria-disabled": ariaAttr(isDisabled),
+        "aria-readonly": ariaAttr(isReadOnly),
+        onBlur: handlerAll(props2.onBlur, onBlur)
+      }),
+      [id, isDisabled, isReadOnly, observerRef, onBlur, rest]
+    );
+    const getActiveProps = 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 = 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 {
+          ...omitObject(props2, ["isDisabled", "isReadOnly"]),
+          ref: ref2,
+          id: `${id}-${index}`,
+          type: "radio",
+          name,
+          disabled: disabled || readOnly,
+          readOnly,
+          checked,
+          "aria-disabled": ariaAttr(disabled),
+          "aria-readonly": ariaAttr(readOnly),
+          "data-checked": dataAttr(checked),
+          "data-focus": 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: handlerAll(
+            props2.onChange,
+            (ev) => !disabled && !readOnly ? onChange(ev) : {}
+          )
+        };
+      },
+      [isDisabled, isReadOnly, value, id, name, focusedIndex, onChange]
+    );
+    const getLabelProps = 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: mergeRefs(
+            (node) => labelRefs.current.set(props2.value, node),
+            ref2
+          ),
+          "aria-disabled": ariaAttr(disabled),
+          "aria-readonly": ariaAttr(readOnly),
+          "data-checked": dataAttr(checked),
+          "data-focus": dataAttr(focused),
+          "data-focus-visible": dataAttr(focused && isFocusVisible),
+          onFocus: 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 = 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__ */ jsx(DescendantsContextProvider, { value: descendants, children: /* @__PURE__ */ jsx(
+      SegmentedControlProvider,
+      {
+        value: { getInputProps, getLabelProps, styles },
+        children: /* @__PURE__ */ jsxs(
+          ui.div,
+          {
+            ...getContainerProps({}, ref),
+            className: cx("ui-segmented-control", className),
+            __css: css,
+            children: [
+              /* @__PURE__ */ jsx(
+                ui.span,
+                {
+                  className: "ui-segmented-control-active",
+                  ...getActiveProps(),
+                  __css: styles.active
+                }
+              ),
+              validChildren
+            ]
+          }
+        )
+      }
+    ) });
+  }
+);
+var SegmentedControlButton = forwardRef(
+  ({
+    className,
+    disabled,
+    readOnly,
+    isDisabled,
+    isReadOnly,
+    value,
+    onChange,
+    children,
+    ...rest
+  }, ref) => {
+    const { getInputProps, getLabelProps, styles } = useSegmentedControl();
+    const { index, register } = useDescendant({
+      disabled: isDisabled || isReadOnly
+    });
+    const props = {
+      index,
+      value,
+      onChange,
+      disabled,
+      readOnly,
+      isDisabled,
+      isReadOnly
+    };
+    const css = {
+      cursor: "pointer",
+      flex: "1 1 0%",
+      display: "inline-flex",
+      justifyContent: "center",
+      alignItems: "center",
+      ...styles.button
+    };
+    return /* @__PURE__ */ jsxs(
+      ui.label,
+      {
+        ...getLabelProps(omitObject(props, ["onChange"])),
+        className: cx("ui-segmented-control-button", className),
+        __css: css,
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx(ui.input, { ...getInputProps(props, mergeRefs(register, ref)) }),
+          /* @__PURE__ */ jsx(ui.span, { children })
+        ]
+      }
+    );
+  }
+);
+
+export {
+  SegmentedControl,
+  SegmentedControlButton
+};