@yamada-ui/segmented-control 0.2.7 → 0.2.8

package/dist/chunk-4HOIPB3J.mjs

@@ -1,274 +0,0 @@
-// 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
-};