@yamada-ui/segmented-control 1.0.3 → 1.0.4-dev-20231230014952

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/dist/{chunk-6LEHUYFW.mjs → chunk-JYWIVKVK.mjs} +4 -4
  2. package/dist/chunk-JYWIVKVK.mjs.map +1 -0
  3. package/dist/index.js +3 -3
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +1 -1
  6. package/dist/segmented-control.d.mts +1 -1
  7. package/dist/segmented-control.d.ts +1 -1
  8. package/dist/segmented-control.js +3 -3
  9. package/dist/segmented-control.js.map +1 -1
  10. package/dist/segmented-control.mjs +1 -1
  11. package/package.json +7 -7
  12. package/dist/chunk-6LEHUYFW.mjs.map +0 -1
package/dist/{chunk-6LEHUYFW.mjs → chunk-JYWIVKVK.mjs} RENAMED
@@ -99,7 +99,7 @@ var SegmentedControl = forwardRef(
99
99
  [id, isDisabled, isReadOnly, onBlur, rest]
100
100
  );
101
101
  const getInputProps = useCallback(
102
- ({ index, ...props2 } = {}, ref2 = null) => {
102
+ ({ index, ...props2 }, ref2 = null) => {
103
103
  var _a, _b, _c, _d;
104
104
  const disabled = (_b = (_a = props2.disabled) != null ? _a : props2.isDisabled) != null ? _b : isDisabled;
105
105
  const readOnly = (_d = (_c = props2.readOnly) != null ? _c : props2.isReadOnly) != null ? _d : isReadOnly;
@@ -137,7 +137,7 @@ var SegmentedControl = forwardRef(
137
137
  [isDisabled, isReadOnly, selectedValue, id, name, focusedIndex, onChange]
138
138
  );
139
139
  const getLabelProps = useCallback(
140
- ({ index, ...props2 } = {}, ref2 = null) => {
140
+ ({ index, ...props2 }, ref2 = null) => {
141
141
  var _a, _b, _c, _d;
142
142
  const disabled = (_b = (_a = props2.disabled) != null ? _a : props2.isDisabled) != null ? _b : isDisabled;
143
143
  const readOnly = (_d = (_c = props2.readOnly) != null ? _c : props2.isReadOnly) != null ? _d : isReadOnly;
@@ -156,7 +156,7 @@ var SegmentedControl = forwardRef(
156
156
  "data-focus-visible": dataAttr(focused && isFocusVisible),
157
157
  onFocus: handlerAll(
158
158
  props2.onFocus,
159
- () => onFocus(index, disabled || readOnly)
159
+ () => onFocus(index, disabled || readOnly || false)
160
160
  ),
161
161
  ...disabled || readOnly ? {
162
162
  _hover: {},
@@ -307,4 +307,4 @@ export {
307
307
  SegmentedControl,
308
308
  SegmentedControlButton
309
309
  };
310
- //# sourceMappingURL=chunk-6LEHUYFW.mjs.map
310
+ //# sourceMappingURL=chunk-JYWIVKVK.mjs.map
package/dist/chunk-JYWIVKVK.mjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/segmented-control.tsx"],"sourcesContent":["import type {\n CSSUIObject,\n HTMLUIProps,\n ThemeProps,\n UIPropGetter,\n RequiredUIPropGetter,\n} from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n useMultiComponentStyle,\n omitThemeProps,\n} from \"@yamada-ui/core\"\nimport type { MotionProps } from \"@yamada-ui/motion\"\nimport { LayoutGroup, Motion } from \"@yamada-ui/motion\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport { createDescendant } from \"@yamada-ui/use-descendant\"\nimport { trackFocusVisible } from \"@yamada-ui/use-focus-visible\"\nimport {\n ariaAttr,\n createContext,\n cx,\n dataAttr,\n getValidChildren,\n handlerAll,\n mergeRefs,\n omitObject,\n useCallbackRef,\n useIsMounted,\n} from \"@yamada-ui/utils\"\nimport type {\n ChangeEvent,\n ChangeEventHandler,\n FC,\n FocusEventHandler,\n ReactElement,\n} from \"react\"\nimport { useCallback, useEffect, useId, useRef, useState } from \"react\"\n\nexport type SegmentedControlItem = SegmentedControlButtonProps & {\n label?: string\n}\n\nconst { DescendantsContextProvider, useDescendants, useDescendant } =\n createDescendant<HTMLButtonElement>()\n\ntype SegmentedControlContext = {\n selectedValue: string\n getInputProps: RequiredUIPropGetter<\n \"input\",\n { index: number; isDisabled?: boolean; isReadOnly?: boolean }\n >\n getLabelProps: RequiredUIPropGetter<\n \"label\",\n {\n value: string\n index: number\n isDisabled?: boolean\n isReadOnly?: boolean\n disabled?: boolean\n readOnly?: boolean\n }\n >\n styles: Record<string, CSSUIObject>\n}\n\nconst [SegmentedControlProvider, useSegmentedControl] =\n createContext<SegmentedControlContext>({\n strict: false,\n name: \"SegmentedControlContext\",\n })\n\ntype SegmentedControlOptions = {\n /**\n * The HTML `name` attribute used for forms.\n */\n name?: string\n /**\n * The value of the segmented control.\n */\n value?: string\n /**\n * The initial value of the segmented control.\n */\n defaultValue?: string\n /**\n * The callback fired when any children radio is checked or unchecked.\n */\n onChange?: (value: string) => void\n /**\n * If `true`, the segmented control will be readonly.\n *\n * @default false\n */\n isReadOnly?: boolean\n /**\n * If `true`, the segmented control will be disabled.\n *\n * @default false\n */\n isDisabled?: boolean\n /**\n * If provided, generate segmented control buttons but based on items.\n *\n * @default '[]'\n */\n items?: SegmentedControlItem[]\n}\n\nexport type SegmentedControlProps = Omit<\n HTMLUIProps<\"div\">,\n \"value\" | \"defaultValue\" | \"onChange\"\n> &\n ThemeProps<\"SegmentedControl\"> &\n SegmentedControlOptions\n\n/**\n * `SegmentedControl` is a component used for allowing users to select one option from multiple choices.\n *\n * @see Docs https://yamada-ui.com/components/forms/segmented-control\n */\nexport const SegmentedControl = forwardRef<SegmentedControlProps, \"div\">(\n (props, ref) => {\n const [styles, mergedProps] = useMultiComponentStyle(\n \"SegmentedControl\",\n props,\n )\n let {\n className,\n id,\n name,\n isReadOnly,\n isDisabled,\n children,\n items = [],\n value,\n defaultValue,\n ...rest\n } = omitThemeProps(mergedProps)\n\n id ??= useId()\n name ??= `segmented-control-${useId()}`\n\n rest.onChange = useCallbackRef(rest.onChange)\n\n const descendants = useDescendants()\n\n const [focusedIndex, setFocusedIndex] = useState<number>(-1)\n const [isFocusVisible, setIsFocusVisible] = useState<boolean>(false)\n const containerRef = useRef<HTMLDivElement>(null)\n const labelRefs = useRef<Map<string | number, HTMLLabelElement>>(new Map())\n\n const [selectedValue, setSelectedValue] = useControllableState({\n value,\n defaultValue,\n onChange: rest.onChange,\n })\n\n const onChange = useCallback(\n (ev: ChangeEvent<HTMLInputElement>) => {\n if (isDisabled || isReadOnly) {\n ev.preventDefault()\n\n return\n }\n\n setSelectedValue(ev.target.value)\n },\n [isDisabled, isReadOnly, setSelectedValue],\n )\n\n const onFocus = useCallback(\n (index: number, skip: boolean) => {\n if (isDisabled) return\n\n if (skip) {\n const next = descendants.enabledNextValue(index)\n\n if (next) setFocusedIndex(next.index)\n } else {\n setFocusedIndex(index)\n }\n },\n [descendants, isDisabled],\n )\n\n const onBlur = useCallback(() => setFocusedIndex(-1), [])\n\n const getContainerProps: UIPropGetter = useCallback(\n (props = {}, ref = null) => ({\n ...omitObject(rest, [\"onChange\"]),\n ...props,\n ref: mergeRefs(containerRef, ref),\n id,\n \"aria-disabled\": ariaAttr(isDisabled),\n \"aria-readonly\": ariaAttr(isReadOnly),\n onBlur: handlerAll(props.onBlur, onBlur),\n }),\n [id, isDisabled, isReadOnly, onBlur, rest],\n )\n\n const getInputProps: RequiredUIPropGetter<\n \"input\",\n { isDisabled?: boolean; isReadOnly?: boolean; index: number }\n > = useCallback(\n ({ index, ...props }, ref = null) => {\n const disabled = props.disabled ?? props.isDisabled ?? isDisabled\n const readOnly = props.readOnly ?? props.isReadOnly ?? isReadOnly\n const checked = props.value === selectedValue\n\n return {\n ...omitObject(props, [\"isDisabled\", \"isReadOnly\"]),\n ref,\n id: `${id}-${index}`,\n type: \"radio\",\n name,\n disabled: disabled || readOnly,\n readOnly,\n checked,\n \"aria-disabled\": ariaAttr(disabled),\n \"aria-readonly\": ariaAttr(readOnly),\n \"data-checked\": dataAttr(checked),\n \"data-focus\": dataAttr(index === focusedIndex),\n style: {\n border: \"0px\",\n clip: \"rect(0px, 0px, 0px, 0px)\",\n height: \"1px\",\n width: \"1px\",\n margin: \"-1px\",\n padding: \"0px\",\n overflow: \"hidden\",\n whiteSpace: \"nowrap\",\n position: \"absolute\",\n },\n onChange: handlerAll(props.onChange, (ev) =>\n !disabled && !readOnly\n ? onChange(ev as ChangeEvent<HTMLInputElement>)\n : {},\n ),\n }\n },\n [isDisabled, isReadOnly, selectedValue, id, name, focusedIndex, onChange],\n )\n\n const getLabelProps: RequiredUIPropGetter<\n \"label\",\n {\n value: string\n index: number\n isDisabled?: boolean\n isReadOnly?: boolean\n disabled?: boolean\n readOnly?: boolean\n }\n > = useCallback(\n ({ index, ...props }, ref = null) => {\n const disabled = props.disabled ?? props.isDisabled ?? isDisabled\n const readOnly = props.readOnly ?? props.isReadOnly ?? isReadOnly\n const checked = props.value === selectedValue\n const focused = index === focusedIndex\n\n return {\n props,\n ref: mergeRefs(\n (node) => labelRefs.current.set(props.value, node),\n ref,\n ),\n \"aria-disabled\": ariaAttr(disabled),\n \"aria-readonly\": ariaAttr(readOnly),\n \"data-checked\": dataAttr(checked),\n \"data-focus\": dataAttr(focused),\n \"data-focus-visible\": dataAttr(focused && isFocusVisible),\n onFocus: handlerAll(\n props.onFocus as unknown as FocusEventHandler<HTMLLabelElement>,\n () => onFocus(index, disabled || readOnly || false),\n ),\n ...(disabled || readOnly\n ? {\n _hover: {},\n _active: {},\n _focus: {},\n _invalid: {},\n _focusVisible: {},\n }\n : {}),\n }\n },\n [\n focusedIndex,\n isDisabled,\n isFocusVisible,\n isReadOnly,\n onFocus,\n selectedValue,\n ],\n )\n\n useEffect(() => {\n return trackFocusVisible(setIsFocusVisible)\n }, [])\n\n const css: CSSUIObject = {\n display: \"inline-flex\",\n alignItems: \"center\",\n ...styles.container,\n }\n\n const validChildren = getValidChildren(children)\n let computedChildren: ReactElement[] = []\n\n if (!validChildren.length && items.length) {\n computedChildren = items.map(({ label, value, ...props }, i) => (\n <SegmentedControlButton key={i} value={value} {...props}>\n {label}\n </SegmentedControlButton>\n ))\n } else {\n computedChildren = validChildren\n }\n\n if (selectedValue == null && defaultValue == null) {\n for (const child of computedChildren) {\n if (child.type !== SegmentedControlButton)\n if (\n (child.type as any).displayName !==\n SegmentedControlButton.displayName\n )\n continue\n\n const value = child.props.value\n\n setSelectedValue(value)\n\n break\n }\n }\n\n return (\n <DescendantsContextProvider value={descendants}>\n <SegmentedControlProvider\n value={{ getInputProps, getLabelProps, styles, selectedValue }}\n >\n <LayoutGroup id={id}>\n <ui.div\n {...getContainerProps({}, ref)}\n className={cx(\"ui-segmented-control\", className)}\n __css={css}\n >\n {computedChildren}\n </ui.div>\n </LayoutGroup>\n </SegmentedControlProvider>\n </DescendantsContextProvider>\n )\n },\n)\n\ntype SegmentedControlButtonOptions = {\n /**\n * The value of the segmented control button.\n */\n value: string\n /**\n * The callback fired when any children radio is checked or unchecked.\n */\n onChange?: ChangeEventHandler<HTMLInputElement>\n /**\n * Props for motion component.\n */\n motionProps?: MotionProps\n}\n\nexport type SegmentedControlButtonProps = Omit<\n HTMLUIProps<\"label\">,\n \"onChange\"\n> &\n Pick<SegmentedControlProps, \"isDisabled\" | \"isReadOnly\"> &\n SegmentedControlButtonOptions\n\nexport const SegmentedControlButton = forwardRef<\n SegmentedControlButtonProps,\n \"input\"\n>(\n (\n {\n className,\n disabled,\n readOnly,\n isDisabled,\n isReadOnly,\n value,\n onChange,\n children,\n motionProps,\n ...rest\n },\n ref,\n ) => {\n const [, isMounted] = useIsMounted({ rerender: true })\n const { selectedValue, getInputProps, getLabelProps, styles } =\n useSegmentedControl()\n\n const { index, register } = useDescendant({\n disabled: isDisabled || isReadOnly,\n })\n\n const props = {\n index,\n value,\n onChange,\n disabled,\n readOnly,\n isDisabled,\n isReadOnly,\n }\n\n const css: CSSUIObject = {\n position: \"relative\",\n cursor: \"pointer\",\n flex: \"1 1 0%\",\n display: \"inline-flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n ...styles.button,\n }\n\n const isSelected = selectedValue === value\n\n return (\n <ui.label\n {...getLabelProps(omitObject(props, [\"onChange\"]))}\n className={cx(\"ui-segmented-control__button\", className)}\n __css={css}\n {...rest}\n >\n <ui.input {...getInputProps(props, mergeRefs(register, ref))} />\n {isSelected && isMounted ? (\n <SegmentedControlCursor {...motionProps} />\n ) : null}\n <ui.span zIndex=\"1\">{children}</ui.span>\n </ui.label>\n )\n },\n)\n\nSegmentedControlButton.displayName = \"SegmentedControlButton\"\n\ntype SegmentedControlCursorProps = MotionProps & { className?: string }\n\nconst SegmentedControlCursor: FC<SegmentedControlCursorProps> = ({\n className,\n transition,\n ...rest\n}) => {\n const { styles } = useSegmentedControl()\n\n const css: CSSUIObject = {\n position: \"absolute\",\n w: \"full\",\n h: \"full\",\n ...styles.cursor,\n }\n\n return (\n <Motion\n className={cx(\"ui-segmented-control__cursor\", className)}\n layoutDependency={false}\n layoutId=\"cursor\"\n transition={{\n type: \"spring\",\n bounce: 0.15,\n duration: 0.4,\n ...transition,\n }}\n __css={css}\n {...rest}\n />\n )\n}\n"],"mappings":"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","names":["props","ref","value"]}
package/dist/index.js CHANGED
@@ -109,7 +109,7 @@ var SegmentedControl = (0, import_core.forwardRef)(
109
109
  [id, isDisabled, isReadOnly, onBlur, rest]
110
110
  );
111
111
  const getInputProps = (0, import_react.useCallback)(
112
- ({ index, ...props2 } = {}, ref2 = null) => {
112
+ ({ index, ...props2 }, ref2 = null) => {
113
113
  var _a, _b, _c, _d;
114
114
  const disabled = (_b = (_a = props2.disabled) != null ? _a : props2.isDisabled) != null ? _b : isDisabled;
115
115
  const readOnly = (_d = (_c = props2.readOnly) != null ? _c : props2.isReadOnly) != null ? _d : isReadOnly;
@@ -147,7 +147,7 @@ var SegmentedControl = (0, import_core.forwardRef)(
147
147
  [isDisabled, isReadOnly, selectedValue, id, name, focusedIndex, onChange]
148
148
  );
149
149
  const getLabelProps = (0, import_react.useCallback)(
150
- ({ index, ...props2 } = {}, ref2 = null) => {
150
+ ({ index, ...props2 }, ref2 = null) => {
151
151
  var _a, _b, _c, _d;
152
152
  const disabled = (_b = (_a = props2.disabled) != null ? _a : props2.isDisabled) != null ? _b : isDisabled;
153
153
  const readOnly = (_d = (_c = props2.readOnly) != null ? _c : props2.isReadOnly) != null ? _d : isReadOnly;
@@ -166,7 +166,7 @@ var SegmentedControl = (0, import_core.forwardRef)(
166
166
  "data-focus-visible": (0, import_utils.dataAttr)(focused && isFocusVisible),
167
167
  onFocus: (0, import_utils.handlerAll)(
168
168
  props2.onFocus,
169
- () => onFocus(index, disabled || readOnly)
169
+ () => onFocus(index, disabled || readOnly || false)
170
170
  ),
171
171
  ...disabled || readOnly ? {
172
172
  _hover: {},
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/index.ts","../src/segmented-control.tsx"],"sourcesContent":["export { SegmentedControl, SegmentedControlButton } from \"./segmented-control\"\nexport type {\n SegmentedControlItem,\n SegmentedControlProps,\n SegmentedControlButtonProps,\n} from \"./segmented-control\"\n","import type { CSSUIObject, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n useMultiComponentStyle,\n omitThemeProps,\n} from \"@yamada-ui/core\"\nimport type { MotionProps } from \"@yamada-ui/motion\"\nimport { LayoutGroup, Motion } from \"@yamada-ui/motion\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport { createDescendant } from \"@yamada-ui/use-descendant\"\nimport { trackFocusVisible } from \"@yamada-ui/use-focus-visible\"\nimport type { PropGetter, RequiredPropGetter } from \"@yamada-ui/utils\"\nimport {\n ariaAttr,\n createContext,\n cx,\n dataAttr,\n getValidChildren,\n handlerAll,\n mergeRefs,\n omitObject,\n useCallbackRef,\n useIsMounted,\n} from \"@yamada-ui/utils\"\nimport type { ChangeEvent, ChangeEventHandler, FC, ReactElement } from \"react\"\nimport { useCallback, useEffect, useId, useRef, useState } from \"react\"\n\nexport type SegmentedControlItem = SegmentedControlButtonProps & {\n label?: string\n}\n\nconst { DescendantsContextProvider, useDescendants, useDescendant } =\n createDescendant<HTMLButtonElement>()\n\ntype SegmentedControlContext = {\n selectedValue: string\n getInputProps: RequiredPropGetter<{ index: number }>\n getLabelProps: RequiredPropGetter<{ index: number }>\n styles: Record<string, CSSUIObject>\n}\n\nconst [SegmentedControlProvider, useSegmentedControl] =\n createContext<SegmentedControlContext>({\n strict: false,\n name: \"SegmentedControlContext\",\n })\n\ntype SegmentedControlOptions = {\n /**\n * The HTML `name` attribute used for forms.\n */\n name?: string\n /**\n * The value of the segmented control.\n */\n value?: string\n /**\n * The initial value of the segmented control.\n */\n defaultValue?: string\n /**\n * The callback fired when any children radio is checked or unchecked.\n */\n onChange?: (value: string) => void\n /**\n * If `true`, the segmented control will be readonly.\n *\n * @default false\n */\n isReadOnly?: boolean\n /**\n * If `true`, the segmented control will be disabled.\n *\n * @default false\n */\n isDisabled?: boolean\n /**\n * If provided, generate segmented control buttons but based on items.\n *\n * @default '[]'\n */\n items?: SegmentedControlItem[]\n}\n\nexport type SegmentedControlProps = Omit<\n HTMLUIProps<\"div\">,\n \"value\" | \"defaultValue\" | \"onChange\"\n> &\n ThemeProps<\"SegmentedControl\"> &\n SegmentedControlOptions\n\n/**\n * `SegmentedControl` is a component used for allowing users to select one option from multiple choices.\n *\n * @see Docs https://yamada-ui.com/components/forms/segmented-control\n */\nexport const SegmentedControl = forwardRef<SegmentedControlProps, \"div\">(\n (props, ref) => {\n const [styles, mergedProps] = useMultiComponentStyle(\n \"SegmentedControl\",\n props,\n )\n let {\n className,\n id,\n name,\n isReadOnly,\n isDisabled,\n children,\n items = [],\n value,\n defaultValue,\n ...rest\n } = omitThemeProps(mergedProps)\n\n id ??= useId()\n name ??= `segmented-control-${useId()}`\n\n rest.onChange = useCallbackRef(rest.onChange)\n\n const descendants = useDescendants()\n\n const [focusedIndex, setFocusedIndex] = useState<number>(-1)\n const [isFocusVisible, setIsFocusVisible] = useState<boolean>(false)\n const containerRef = useRef<HTMLDivElement>(null)\n const labelRefs = useRef<Map<string | number, HTMLLabelElement>>(new Map())\n\n const [selectedValue, setSelectedValue] = useControllableState({\n value,\n defaultValue,\n onChange: rest.onChange,\n })\n\n const onChange = useCallback(\n (ev: ChangeEvent<HTMLInputElement>) => {\n if (isDisabled || isReadOnly) {\n ev.preventDefault()\n\n return\n }\n\n setSelectedValue(ev.target.value)\n },\n [isDisabled, isReadOnly, setSelectedValue],\n )\n\n const onFocus = useCallback(\n (index: number, skip: boolean) => {\n if (isDisabled) return\n\n if (skip) {\n const next = descendants.enabledNextValue(index)\n\n if (next) setFocusedIndex(next.index)\n } else {\n setFocusedIndex(index)\n }\n },\n [descendants, isDisabled],\n )\n\n const onBlur = useCallback(() => setFocusedIndex(-1), [])\n\n const getContainerProps: PropGetter = useCallback(\n (props = {}, ref = null) => ({\n ...omitObject(rest, [\"onChange\"]),\n ...props,\n ref: mergeRefs(containerRef, ref),\n id,\n \"aria-disabled\": ariaAttr(isDisabled),\n \"aria-readonly\": ariaAttr(isReadOnly),\n onBlur: handlerAll(props.onBlur, onBlur),\n }),\n [id, isDisabled, isReadOnly, onBlur, rest],\n )\n\n const getInputProps: RequiredPropGetter<{ index: number }> = useCallback(\n ({ index, ...props } = {}, ref = null) => {\n const disabled = props.disabled ?? props.isDisabled ?? isDisabled\n const readOnly = props.readOnly ?? props.isReadOnly ?? isReadOnly\n const checked = props.value === selectedValue\n\n return {\n ...omitObject(props, [\"isDisabled\", \"isReadOnly\"]),\n ref,\n id: `${id}-${index}`,\n type: \"radio\",\n name,\n disabled: disabled || readOnly,\n readOnly,\n checked,\n \"aria-disabled\": ariaAttr(disabled),\n \"aria-readonly\": ariaAttr(readOnly),\n \"data-checked\": dataAttr(checked),\n \"data-focus\": dataAttr(index === focusedIndex),\n style: {\n border: \"0px\",\n clip: \"rect(0px, 0px, 0px, 0px)\",\n height: \"1px\",\n width: \"1px\",\n margin: \"-1px\",\n padding: \"0px\",\n overflow: \"hidden\",\n whiteSpace: \"nowrap\",\n position: \"absolute\",\n },\n onChange: handlerAll(props.onChange, (ev) =>\n !disabled && !readOnly\n ? onChange(ev as ChangeEvent<HTMLInputElement>)\n : {},\n ),\n }\n },\n [isDisabled, isReadOnly, selectedValue, id, name, focusedIndex, onChange],\n )\n\n const getLabelProps: RequiredPropGetter<{ index: number }> = useCallback(\n ({ index, ...props } = {}, ref = null) => {\n const disabled = props.disabled ?? props.isDisabled ?? isDisabled\n const readOnly = props.readOnly ?? props.isReadOnly ?? isReadOnly\n const checked = props.value === selectedValue\n const focused = index === focusedIndex\n\n return {\n props,\n ref: mergeRefs(\n (node) => labelRefs.current.set(props.value, node),\n ref,\n ),\n \"aria-disabled\": ariaAttr(disabled),\n \"aria-readonly\": ariaAttr(readOnly),\n \"data-checked\": dataAttr(checked),\n \"data-focus\": dataAttr(focused),\n \"data-focus-visible\": dataAttr(focused && isFocusVisible),\n onFocus: handlerAll(props.onFocus, () =>\n onFocus(index, disabled || readOnly),\n ),\n ...(disabled || readOnly\n ? {\n _hover: {},\n _active: {},\n _focus: {},\n _invalid: {},\n _focusVisible: {},\n }\n : {}),\n }\n },\n [\n focusedIndex,\n isDisabled,\n isFocusVisible,\n isReadOnly,\n onFocus,\n selectedValue,\n ],\n )\n\n useEffect(() => {\n return trackFocusVisible(setIsFocusVisible)\n }, [])\n\n const css: CSSUIObject = {\n display: \"inline-flex\",\n alignItems: \"center\",\n ...styles.container,\n }\n\n const validChildren = getValidChildren(children)\n let computedChildren: ReactElement[] = []\n\n if (!validChildren.length && items.length) {\n computedChildren = items.map(({ label, value, ...props }, i) => (\n <SegmentedControlButton key={i} value={value} {...props}>\n {label}\n </SegmentedControlButton>\n ))\n } else {\n computedChildren = validChildren\n }\n\n if (selectedValue == null && defaultValue == null) {\n for (const child of computedChildren) {\n if (child.type !== SegmentedControlButton)\n if (\n (child.type as any).displayName !==\n SegmentedControlButton.displayName\n )\n continue\n\n const value = child.props.value\n\n setSelectedValue(value)\n\n break\n }\n }\n\n return (\n <DescendantsContextProvider value={descendants}>\n <SegmentedControlProvider\n value={{ getInputProps, getLabelProps, styles, selectedValue }}\n >\n <LayoutGroup id={id}>\n <ui.div\n {...getContainerProps({}, ref)}\n className={cx(\"ui-segmented-control\", className)}\n __css={css}\n >\n {computedChildren}\n </ui.div>\n </LayoutGroup>\n </SegmentedControlProvider>\n </DescendantsContextProvider>\n )\n },\n)\n\ntype SegmentedControlButtonOptions = {\n /**\n * The value of the segmented control button.\n */\n value: string | number\n /**\n * The callback fired when any children radio is checked or unchecked.\n */\n onChange?: ChangeEventHandler<HTMLInputElement>\n /**\n * Props for motion component.\n */\n motionProps?: MotionProps\n}\n\nexport type SegmentedControlButtonProps = Omit<\n HTMLUIProps<\"label\">,\n \"onChange\"\n> &\n Pick<SegmentedControlProps, \"isDisabled\" | \"isReadOnly\"> &\n SegmentedControlButtonOptions\n\nexport const SegmentedControlButton = forwardRef<\n SegmentedControlButtonProps,\n \"input\"\n>(\n (\n {\n className,\n disabled,\n readOnly,\n isDisabled,\n isReadOnly,\n value,\n onChange,\n children,\n motionProps,\n ...rest\n },\n ref,\n ) => {\n const [, isMounted] = useIsMounted({ rerender: true })\n const { selectedValue, getInputProps, getLabelProps, styles } =\n useSegmentedControl()\n\n const { index, register } = useDescendant({\n disabled: isDisabled || isReadOnly,\n })\n\n const props = {\n index,\n value,\n onChange,\n disabled,\n readOnly,\n isDisabled,\n isReadOnly,\n }\n\n const css: CSSUIObject = {\n position: \"relative\",\n cursor: \"pointer\",\n flex: \"1 1 0%\",\n display: \"inline-flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n ...styles.button,\n }\n\n const isSelected = selectedValue === value\n\n return (\n <ui.label\n {...getLabelProps(omitObject(props, [\"onChange\"]))}\n className={cx(\"ui-segmented-control__button\", className)}\n __css={css}\n {...rest}\n >\n <ui.input {...getInputProps(props, mergeRefs(register, ref))} />\n {isSelected && isMounted ? (\n <SegmentedControlCursor {...motionProps} />\n ) : null}\n <ui.span zIndex=\"1\">{children}</ui.span>\n </ui.label>\n )\n },\n)\n\nSegmentedControlButton.displayName = \"SegmentedControlButton\"\n\ntype SegmentedControlCursorProps = MotionProps & { className?: string }\n\nconst SegmentedControlCursor: FC<SegmentedControlCursorProps> = ({\n className,\n transition,\n ...rest\n}) => {\n const { styles } = useSegmentedControl()\n\n const css: CSSUIObject = {\n position: \"absolute\",\n w: \"full\",\n h: \"full\",\n ...styles.cursor,\n }\n\n return (\n <Motion\n className={cx(\"ui-segmented-control__cursor\", className)}\n layoutDependency={false}\n layoutId=\"cursor\"\n transition={{\n type: \"spring\",\n bounce: 0.15,\n duration: 0.4,\n ...transition,\n }}\n __css={css}\n {...rest}\n />\n )\n}\n"],"mappings":"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","names":["props","ref","value"]}
1
+ {"version":3,"sources":["../src/index.ts","../src/segmented-control.tsx"],"sourcesContent":["export { SegmentedControl, SegmentedControlButton } from \"./segmented-control\"\nexport type {\n SegmentedControlItem,\n SegmentedControlProps,\n SegmentedControlButtonProps,\n} from \"./segmented-control\"\n","import type {\n CSSUIObject,\n HTMLUIProps,\n ThemeProps,\n UIPropGetter,\n RequiredUIPropGetter,\n} from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n useMultiComponentStyle,\n omitThemeProps,\n} from \"@yamada-ui/core\"\nimport type { MotionProps } from \"@yamada-ui/motion\"\nimport { LayoutGroup, Motion } from \"@yamada-ui/motion\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport { createDescendant } from \"@yamada-ui/use-descendant\"\nimport { trackFocusVisible } from \"@yamada-ui/use-focus-visible\"\nimport {\n ariaAttr,\n createContext,\n cx,\n dataAttr,\n getValidChildren,\n handlerAll,\n mergeRefs,\n omitObject,\n useCallbackRef,\n useIsMounted,\n} from \"@yamada-ui/utils\"\nimport type {\n ChangeEvent,\n ChangeEventHandler,\n FC,\n FocusEventHandler,\n ReactElement,\n} from \"react\"\nimport { useCallback, useEffect, useId, useRef, useState } from \"react\"\n\nexport type SegmentedControlItem = SegmentedControlButtonProps & {\n label?: string\n}\n\nconst { DescendantsContextProvider, useDescendants, useDescendant } =\n createDescendant<HTMLButtonElement>()\n\ntype SegmentedControlContext = {\n selectedValue: string\n getInputProps: RequiredUIPropGetter<\n \"input\",\n { index: number; isDisabled?: boolean; isReadOnly?: boolean }\n >\n getLabelProps: RequiredUIPropGetter<\n \"label\",\n {\n value: string\n index: number\n isDisabled?: boolean\n isReadOnly?: boolean\n disabled?: boolean\n readOnly?: boolean\n }\n >\n styles: Record<string, CSSUIObject>\n}\n\nconst [SegmentedControlProvider, useSegmentedControl] =\n createContext<SegmentedControlContext>({\n strict: false,\n name: \"SegmentedControlContext\",\n })\n\ntype SegmentedControlOptions = {\n /**\n * The HTML `name` attribute used for forms.\n */\n name?: string\n /**\n * The value of the segmented control.\n */\n value?: string\n /**\n * The initial value of the segmented control.\n */\n defaultValue?: string\n /**\n * The callback fired when any children radio is checked or unchecked.\n */\n onChange?: (value: string) => void\n /**\n * If `true`, the segmented control will be readonly.\n *\n * @default false\n */\n isReadOnly?: boolean\n /**\n * If `true`, the segmented control will be disabled.\n *\n * @default false\n */\n isDisabled?: boolean\n /**\n * If provided, generate segmented control buttons but based on items.\n *\n * @default '[]'\n */\n items?: SegmentedControlItem[]\n}\n\nexport type SegmentedControlProps = Omit<\n HTMLUIProps<\"div\">,\n \"value\" | \"defaultValue\" | \"onChange\"\n> &\n ThemeProps<\"SegmentedControl\"> &\n SegmentedControlOptions\n\n/**\n * `SegmentedControl` is a component used for allowing users to select one option from multiple choices.\n *\n * @see Docs https://yamada-ui.com/components/forms/segmented-control\n */\nexport const SegmentedControl = forwardRef<SegmentedControlProps, \"div\">(\n (props, ref) => {\n const [styles, mergedProps] = useMultiComponentStyle(\n \"SegmentedControl\",\n props,\n )\n let {\n className,\n id,\n name,\n isReadOnly,\n isDisabled,\n children,\n items = [],\n value,\n defaultValue,\n ...rest\n } = omitThemeProps(mergedProps)\n\n id ??= useId()\n name ??= `segmented-control-${useId()}`\n\n rest.onChange = useCallbackRef(rest.onChange)\n\n const descendants = useDescendants()\n\n const [focusedIndex, setFocusedIndex] = useState<number>(-1)\n const [isFocusVisible, setIsFocusVisible] = useState<boolean>(false)\n const containerRef = useRef<HTMLDivElement>(null)\n const labelRefs = useRef<Map<string | number, HTMLLabelElement>>(new Map())\n\n const [selectedValue, setSelectedValue] = useControllableState({\n value,\n defaultValue,\n onChange: rest.onChange,\n })\n\n const onChange = useCallback(\n (ev: ChangeEvent<HTMLInputElement>) => {\n if (isDisabled || isReadOnly) {\n ev.preventDefault()\n\n return\n }\n\n setSelectedValue(ev.target.value)\n },\n [isDisabled, isReadOnly, setSelectedValue],\n )\n\n const onFocus = useCallback(\n (index: number, skip: boolean) => {\n if (isDisabled) return\n\n if (skip) {\n const next = descendants.enabledNextValue(index)\n\n if (next) setFocusedIndex(next.index)\n } else {\n setFocusedIndex(index)\n }\n },\n [descendants, isDisabled],\n )\n\n const onBlur = useCallback(() => setFocusedIndex(-1), [])\n\n const getContainerProps: UIPropGetter = useCallback(\n (props = {}, ref = null) => ({\n ...omitObject(rest, [\"onChange\"]),\n ...props,\n ref: mergeRefs(containerRef, ref),\n id,\n \"aria-disabled\": ariaAttr(isDisabled),\n \"aria-readonly\": ariaAttr(isReadOnly),\n onBlur: handlerAll(props.onBlur, onBlur),\n }),\n [id, isDisabled, isReadOnly, onBlur, rest],\n )\n\n const getInputProps: RequiredUIPropGetter<\n \"input\",\n { isDisabled?: boolean; isReadOnly?: boolean; index: number }\n > = useCallback(\n ({ index, ...props }, ref = null) => {\n const disabled = props.disabled ?? props.isDisabled ?? isDisabled\n const readOnly = props.readOnly ?? props.isReadOnly ?? isReadOnly\n const checked = props.value === selectedValue\n\n return {\n ...omitObject(props, [\"isDisabled\", \"isReadOnly\"]),\n ref,\n id: `${id}-${index}`,\n type: \"radio\",\n name,\n disabled: disabled || readOnly,\n readOnly,\n checked,\n \"aria-disabled\": ariaAttr(disabled),\n \"aria-readonly\": ariaAttr(readOnly),\n \"data-checked\": dataAttr(checked),\n \"data-focus\": dataAttr(index === focusedIndex),\n style: {\n border: \"0px\",\n clip: \"rect(0px, 0px, 0px, 0px)\",\n height: \"1px\",\n width: \"1px\",\n margin: \"-1px\",\n padding: \"0px\",\n overflow: \"hidden\",\n whiteSpace: \"nowrap\",\n position: \"absolute\",\n },\n onChange: handlerAll(props.onChange, (ev) =>\n !disabled && !readOnly\n ? onChange(ev as ChangeEvent<HTMLInputElement>)\n : {},\n ),\n }\n },\n [isDisabled, isReadOnly, selectedValue, id, name, focusedIndex, onChange],\n )\n\n const getLabelProps: RequiredUIPropGetter<\n \"label\",\n {\n value: string\n index: number\n isDisabled?: boolean\n isReadOnly?: boolean\n disabled?: boolean\n readOnly?: boolean\n }\n > = useCallback(\n ({ index, ...props }, ref = null) => {\n const disabled = props.disabled ?? props.isDisabled ?? isDisabled\n const readOnly = props.readOnly ?? props.isReadOnly ?? isReadOnly\n const checked = props.value === selectedValue\n const focused = index === focusedIndex\n\n return {\n props,\n ref: mergeRefs(\n (node) => labelRefs.current.set(props.value, node),\n ref,\n ),\n \"aria-disabled\": ariaAttr(disabled),\n \"aria-readonly\": ariaAttr(readOnly),\n \"data-checked\": dataAttr(checked),\n \"data-focus\": dataAttr(focused),\n \"data-focus-visible\": dataAttr(focused && isFocusVisible),\n onFocus: handlerAll(\n props.onFocus as unknown as FocusEventHandler<HTMLLabelElement>,\n () => onFocus(index, disabled || readOnly || false),\n ),\n ...(disabled || readOnly\n ? {\n _hover: {},\n _active: {},\n _focus: {},\n _invalid: {},\n _focusVisible: {},\n }\n : {}),\n }\n },\n [\n focusedIndex,\n isDisabled,\n isFocusVisible,\n isReadOnly,\n onFocus,\n selectedValue,\n ],\n )\n\n useEffect(() => {\n return trackFocusVisible(setIsFocusVisible)\n }, [])\n\n const css: CSSUIObject = {\n display: \"inline-flex\",\n alignItems: \"center\",\n ...styles.container,\n }\n\n const validChildren = getValidChildren(children)\n let computedChildren: ReactElement[] = []\n\n if (!validChildren.length && items.length) {\n computedChildren = items.map(({ label, value, ...props }, i) => (\n <SegmentedControlButton key={i} value={value} {...props}>\n {label}\n </SegmentedControlButton>\n ))\n } else {\n computedChildren = validChildren\n }\n\n if (selectedValue == null && defaultValue == null) {\n for (const child of computedChildren) {\n if (child.type !== SegmentedControlButton)\n if (\n (child.type as any).displayName !==\n SegmentedControlButton.displayName\n )\n continue\n\n const value = child.props.value\n\n setSelectedValue(value)\n\n break\n }\n }\n\n return (\n <DescendantsContextProvider value={descendants}>\n <SegmentedControlProvider\n value={{ getInputProps, getLabelProps, styles, selectedValue }}\n >\n <LayoutGroup id={id}>\n <ui.div\n {...getContainerProps({}, ref)}\n className={cx(\"ui-segmented-control\", className)}\n __css={css}\n >\n {computedChildren}\n </ui.div>\n </LayoutGroup>\n </SegmentedControlProvider>\n </DescendantsContextProvider>\n )\n },\n)\n\ntype SegmentedControlButtonOptions = {\n /**\n * The value of the segmented control button.\n */\n value: string\n /**\n * The callback fired when any children radio is checked or unchecked.\n */\n onChange?: ChangeEventHandler<HTMLInputElement>\n /**\n * Props for motion component.\n */\n motionProps?: MotionProps\n}\n\nexport type SegmentedControlButtonProps = Omit<\n HTMLUIProps<\"label\">,\n \"onChange\"\n> &\n Pick<SegmentedControlProps, \"isDisabled\" | \"isReadOnly\"> &\n SegmentedControlButtonOptions\n\nexport const SegmentedControlButton = forwardRef<\n SegmentedControlButtonProps,\n \"input\"\n>(\n (\n {\n className,\n disabled,\n readOnly,\n isDisabled,\n isReadOnly,\n value,\n onChange,\n children,\n motionProps,\n ...rest\n },\n ref,\n ) => {\n const [, isMounted] = useIsMounted({ rerender: true })\n const { selectedValue, getInputProps, getLabelProps, styles } =\n useSegmentedControl()\n\n const { index, register } = useDescendant({\n disabled: isDisabled || isReadOnly,\n })\n\n const props = {\n index,\n value,\n onChange,\n disabled,\n readOnly,\n isDisabled,\n isReadOnly,\n }\n\n const css: CSSUIObject = {\n position: \"relative\",\n cursor: \"pointer\",\n flex: \"1 1 0%\",\n display: \"inline-flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n ...styles.button,\n }\n\n const isSelected = selectedValue === value\n\n return (\n <ui.label\n {...getLabelProps(omitObject(props, [\"onChange\"]))}\n className={cx(\"ui-segmented-control__button\", className)}\n __css={css}\n {...rest}\n >\n <ui.input {...getInputProps(props, mergeRefs(register, ref))} />\n {isSelected && isMounted ? (\n <SegmentedControlCursor {...motionProps} />\n ) : null}\n <ui.span zIndex=\"1\">{children}</ui.span>\n </ui.label>\n )\n },\n)\n\nSegmentedControlButton.displayName = \"SegmentedControlButton\"\n\ntype SegmentedControlCursorProps = MotionProps & { className?: string }\n\nconst SegmentedControlCursor: FC<SegmentedControlCursorProps> = ({\n className,\n transition,\n ...rest\n}) => {\n const { styles } = useSegmentedControl()\n\n const css: CSSUIObject = {\n position: \"absolute\",\n w: \"full\",\n h: \"full\",\n ...styles.cursor,\n }\n\n return (\n <Motion\n className={cx(\"ui-segmented-control__cursor\", className)}\n layoutDependency={false}\n layoutId=\"cursor\"\n transition={{\n type: \"spring\",\n bounce: 0.15,\n duration: 0.4,\n ...transition,\n }}\n __css={css}\n {...rest}\n />\n )\n}\n"],"mappings":"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","names":["props","ref","value"]}
package/dist/index.mjs CHANGED
@@ -2,7 +2,7 @@
2
2
  import {
3
3
  SegmentedControl,
4
4
  SegmentedControlButton
5
- } from "./chunk-6LEHUYFW.mjs";
5
+ } from "./chunk-JYWIVKVK.mjs";
6
6
  export {
7
7
  SegmentedControl,
8
8
  SegmentedControlButton
package/dist/segmented-control.d.mts CHANGED
@@ -53,7 +53,7 @@ type SegmentedControlButtonOptions = {
53
53
  /**
54
54
  * The value of the segmented control button.
55
55
  */
56
- value: string | number;
56
+ value: string;
57
57
  /**
58
58
  * The callback fired when any children radio is checked or unchecked.
59
59
  */
package/dist/segmented-control.d.ts CHANGED
@@ -53,7 +53,7 @@ type SegmentedControlButtonOptions = {
53
53
  /**
54
54
  * The value of the segmented control button.
55
55
  */
56
- value: string | number;
56
+ value: string;
57
57
  /**
58
58
  * The callback fired when any children radio is checked or unchecked.
59
59
  */
package/dist/segmented-control.js CHANGED
@@ -107,7 +107,7 @@ var SegmentedControl = (0, import_core.forwardRef)(
107
107
  [id, isDisabled, isReadOnly, onBlur, rest]
108
108
  );
109
109
  const getInputProps = (0, import_react.useCallback)(
110
- ({ index, ...props2 } = {}, ref2 = null) => {
110
+ ({ index, ...props2 }, ref2 = null) => {
111
111
  var _a, _b, _c, _d;
112
112
  const disabled = (_b = (_a = props2.disabled) != null ? _a : props2.isDisabled) != null ? _b : isDisabled;
113
113
  const readOnly = (_d = (_c = props2.readOnly) != null ? _c : props2.isReadOnly) != null ? _d : isReadOnly;
@@ -145,7 +145,7 @@ var SegmentedControl = (0, import_core.forwardRef)(
145
145
  [isDisabled, isReadOnly, selectedValue, id, name, focusedIndex, onChange]
146
146
  );
147
147
  const getLabelProps = (0, import_react.useCallback)(
148
- ({ index, ...props2 } = {}, ref2 = null) => {
148
+ ({ index, ...props2 }, ref2 = null) => {
149
149
  var _a, _b, _c, _d;
150
150
  const disabled = (_b = (_a = props2.disabled) != null ? _a : props2.isDisabled) != null ? _b : isDisabled;
151
151
  const readOnly = (_d = (_c = props2.readOnly) != null ? _c : props2.isReadOnly) != null ? _d : isReadOnly;
@@ -164,7 +164,7 @@ var SegmentedControl = (0, import_core.forwardRef)(
164
164
  "data-focus-visible": (0, import_utils.dataAttr)(focused && isFocusVisible),
165
165
  onFocus: (0, import_utils.handlerAll)(
166
166
  props2.onFocus,
167
- () => onFocus(index, disabled || readOnly)
167
+ () => onFocus(index, disabled || readOnly || false)
168
168
  ),
169
169
  ...disabled || readOnly ? {
170
170
  _hover: {},
package/dist/segmented-control.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/segmented-control.tsx"],"sourcesContent":["import type { CSSUIObject, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n useMultiComponentStyle,\n omitThemeProps,\n} from \"@yamada-ui/core\"\nimport type { MotionProps } from \"@yamada-ui/motion\"\nimport { LayoutGroup, Motion } from \"@yamada-ui/motion\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport { createDescendant } from \"@yamada-ui/use-descendant\"\nimport { trackFocusVisible } from \"@yamada-ui/use-focus-visible\"\nimport type { PropGetter, RequiredPropGetter } from \"@yamada-ui/utils\"\nimport {\n ariaAttr,\n createContext,\n cx,\n dataAttr,\n getValidChildren,\n handlerAll,\n mergeRefs,\n omitObject,\n useCallbackRef,\n useIsMounted,\n} from \"@yamada-ui/utils\"\nimport type { ChangeEvent, ChangeEventHandler, FC, ReactElement } from \"react\"\nimport { useCallback, useEffect, useId, useRef, useState } from \"react\"\n\nexport type SegmentedControlItem = SegmentedControlButtonProps & {\n label?: string\n}\n\nconst { DescendantsContextProvider, useDescendants, useDescendant } =\n createDescendant<HTMLButtonElement>()\n\ntype SegmentedControlContext = {\n selectedValue: string\n getInputProps: RequiredPropGetter<{ index: number }>\n getLabelProps: RequiredPropGetter<{ index: number }>\n styles: Record<string, CSSUIObject>\n}\n\nconst [SegmentedControlProvider, useSegmentedControl] =\n createContext<SegmentedControlContext>({\n strict: false,\n name: \"SegmentedControlContext\",\n })\n\ntype SegmentedControlOptions = {\n /**\n * The HTML `name` attribute used for forms.\n */\n name?: string\n /**\n * The value of the segmented control.\n */\n value?: string\n /**\n * The initial value of the segmented control.\n */\n defaultValue?: string\n /**\n * The callback fired when any children radio is checked or unchecked.\n */\n onChange?: (value: string) => void\n /**\n * If `true`, the segmented control will be readonly.\n *\n * @default false\n */\n isReadOnly?: boolean\n /**\n * If `true`, the segmented control will be disabled.\n *\n * @default false\n */\n isDisabled?: boolean\n /**\n * If provided, generate segmented control buttons but based on items.\n *\n * @default '[]'\n */\n items?: SegmentedControlItem[]\n}\n\nexport type SegmentedControlProps = Omit<\n HTMLUIProps<\"div\">,\n \"value\" | \"defaultValue\" | \"onChange\"\n> &\n ThemeProps<\"SegmentedControl\"> &\n SegmentedControlOptions\n\n/**\n * `SegmentedControl` is a component used for allowing users to select one option from multiple choices.\n *\n * @see Docs https://yamada-ui.com/components/forms/segmented-control\n */\nexport const SegmentedControl = forwardRef<SegmentedControlProps, \"div\">(\n (props, ref) => {\n const [styles, mergedProps] = useMultiComponentStyle(\n \"SegmentedControl\",\n props,\n )\n let {\n className,\n id,\n name,\n isReadOnly,\n isDisabled,\n children,\n items = [],\n value,\n defaultValue,\n ...rest\n } = omitThemeProps(mergedProps)\n\n id ??= useId()\n name ??= `segmented-control-${useId()}`\n\n rest.onChange = useCallbackRef(rest.onChange)\n\n const descendants = useDescendants()\n\n const [focusedIndex, setFocusedIndex] = useState<number>(-1)\n const [isFocusVisible, setIsFocusVisible] = useState<boolean>(false)\n const containerRef = useRef<HTMLDivElement>(null)\n const labelRefs = useRef<Map<string | number, HTMLLabelElement>>(new Map())\n\n const [selectedValue, setSelectedValue] = useControllableState({\n value,\n defaultValue,\n onChange: rest.onChange,\n })\n\n const onChange = useCallback(\n (ev: ChangeEvent<HTMLInputElement>) => {\n if (isDisabled || isReadOnly) {\n ev.preventDefault()\n\n return\n }\n\n setSelectedValue(ev.target.value)\n },\n [isDisabled, isReadOnly, setSelectedValue],\n )\n\n const onFocus = useCallback(\n (index: number, skip: boolean) => {\n if (isDisabled) return\n\n if (skip) {\n const next = descendants.enabledNextValue(index)\n\n if (next) setFocusedIndex(next.index)\n } else {\n setFocusedIndex(index)\n }\n },\n [descendants, isDisabled],\n )\n\n const onBlur = useCallback(() => setFocusedIndex(-1), [])\n\n const getContainerProps: PropGetter = useCallback(\n (props = {}, ref = null) => ({\n ...omitObject(rest, [\"onChange\"]),\n ...props,\n ref: mergeRefs(containerRef, ref),\n id,\n \"aria-disabled\": ariaAttr(isDisabled),\n \"aria-readonly\": ariaAttr(isReadOnly),\n onBlur: handlerAll(props.onBlur, onBlur),\n }),\n [id, isDisabled, isReadOnly, onBlur, rest],\n )\n\n const getInputProps: RequiredPropGetter<{ index: number }> = useCallback(\n ({ index, ...props } = {}, ref = null) => {\n const disabled = props.disabled ?? props.isDisabled ?? isDisabled\n const readOnly = props.readOnly ?? props.isReadOnly ?? isReadOnly\n const checked = props.value === selectedValue\n\n return {\n ...omitObject(props, [\"isDisabled\", \"isReadOnly\"]),\n ref,\n id: `${id}-${index}`,\n type: \"radio\",\n name,\n disabled: disabled || readOnly,\n readOnly,\n checked,\n \"aria-disabled\": ariaAttr(disabled),\n \"aria-readonly\": ariaAttr(readOnly),\n \"data-checked\": dataAttr(checked),\n \"data-focus\": dataAttr(index === focusedIndex),\n style: {\n border: \"0px\",\n clip: \"rect(0px, 0px, 0px, 0px)\",\n height: \"1px\",\n width: \"1px\",\n margin: \"-1px\",\n padding: \"0px\",\n overflow: \"hidden\",\n whiteSpace: \"nowrap\",\n position: \"absolute\",\n },\n onChange: handlerAll(props.onChange, (ev) =>\n !disabled && !readOnly\n ? onChange(ev as ChangeEvent<HTMLInputElement>)\n : {},\n ),\n }\n },\n [isDisabled, isReadOnly, selectedValue, id, name, focusedIndex, onChange],\n )\n\n const getLabelProps: RequiredPropGetter<{ index: number }> = useCallback(\n ({ index, ...props } = {}, ref = null) => {\n const disabled = props.disabled ?? props.isDisabled ?? isDisabled\n const readOnly = props.readOnly ?? props.isReadOnly ?? isReadOnly\n const checked = props.value === selectedValue\n const focused = index === focusedIndex\n\n return {\n props,\n ref: mergeRefs(\n (node) => labelRefs.current.set(props.value, node),\n ref,\n ),\n \"aria-disabled\": ariaAttr(disabled),\n \"aria-readonly\": ariaAttr(readOnly),\n \"data-checked\": dataAttr(checked),\n \"data-focus\": dataAttr(focused),\n \"data-focus-visible\": dataAttr(focused && isFocusVisible),\n onFocus: handlerAll(props.onFocus, () =>\n onFocus(index, disabled || readOnly),\n ),\n ...(disabled || readOnly\n ? {\n _hover: {},\n _active: {},\n _focus: {},\n _invalid: {},\n _focusVisible: {},\n }\n : {}),\n }\n },\n [\n focusedIndex,\n isDisabled,\n isFocusVisible,\n isReadOnly,\n onFocus,\n selectedValue,\n ],\n )\n\n useEffect(() => {\n return trackFocusVisible(setIsFocusVisible)\n }, [])\n\n const css: CSSUIObject = {\n display: \"inline-flex\",\n alignItems: \"center\",\n ...styles.container,\n }\n\n const validChildren = getValidChildren(children)\n let computedChildren: ReactElement[] = []\n\n if (!validChildren.length && items.length) {\n computedChildren = items.map(({ label, value, ...props }, i) => (\n <SegmentedControlButton key={i} value={value} {...props}>\n {label}\n </SegmentedControlButton>\n ))\n } else {\n computedChildren = validChildren\n }\n\n if (selectedValue == null && defaultValue == null) {\n for (const child of computedChildren) {\n if (child.type !== SegmentedControlButton)\n if (\n (child.type as any).displayName !==\n SegmentedControlButton.displayName\n )\n continue\n\n const value = child.props.value\n\n setSelectedValue(value)\n\n break\n }\n }\n\n return (\n <DescendantsContextProvider value={descendants}>\n <SegmentedControlProvider\n value={{ getInputProps, getLabelProps, styles, selectedValue }}\n >\n <LayoutGroup id={id}>\n <ui.div\n {...getContainerProps({}, ref)}\n className={cx(\"ui-segmented-control\", className)}\n __css={css}\n >\n {computedChildren}\n </ui.div>\n </LayoutGroup>\n </SegmentedControlProvider>\n </DescendantsContextProvider>\n )\n },\n)\n\ntype SegmentedControlButtonOptions = {\n /**\n * The value of the segmented control button.\n */\n value: string | number\n /**\n * The callback fired when any children radio is checked or unchecked.\n */\n onChange?: ChangeEventHandler<HTMLInputElement>\n /**\n * Props for motion component.\n */\n motionProps?: MotionProps\n}\n\nexport type SegmentedControlButtonProps = Omit<\n HTMLUIProps<\"label\">,\n \"onChange\"\n> &\n Pick<SegmentedControlProps, \"isDisabled\" | \"isReadOnly\"> &\n SegmentedControlButtonOptions\n\nexport const SegmentedControlButton = forwardRef<\n SegmentedControlButtonProps,\n \"input\"\n>(\n (\n {\n className,\n disabled,\n readOnly,\n isDisabled,\n isReadOnly,\n value,\n onChange,\n children,\n motionProps,\n ...rest\n },\n ref,\n ) => {\n const [, isMounted] = useIsMounted({ rerender: true })\n const { selectedValue, getInputProps, getLabelProps, styles } =\n useSegmentedControl()\n\n const { index, register } = useDescendant({\n disabled: isDisabled || isReadOnly,\n })\n\n const props = {\n index,\n value,\n onChange,\n disabled,\n readOnly,\n isDisabled,\n isReadOnly,\n }\n\n const css: CSSUIObject = {\n position: \"relative\",\n cursor: \"pointer\",\n flex: \"1 1 0%\",\n display: \"inline-flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n ...styles.button,\n }\n\n const isSelected = selectedValue === value\n\n return (\n <ui.label\n {...getLabelProps(omitObject(props, [\"onChange\"]))}\n className={cx(\"ui-segmented-control__button\", className)}\n __css={css}\n {...rest}\n >\n <ui.input {...getInputProps(props, mergeRefs(register, ref))} />\n {isSelected && isMounted ? (\n <SegmentedControlCursor {...motionProps} />\n ) : null}\n <ui.span zIndex=\"1\">{children}</ui.span>\n </ui.label>\n )\n },\n)\n\nSegmentedControlButton.displayName = \"SegmentedControlButton\"\n\ntype SegmentedControlCursorProps = MotionProps & { className?: string }\n\nconst SegmentedControlCursor: FC<SegmentedControlCursorProps> = ({\n className,\n transition,\n ...rest\n}) => {\n const { styles } = useSegmentedControl()\n\n const css: CSSUIObject = {\n position: \"absolute\",\n w: \"full\",\n h: \"full\",\n ...styles.cursor,\n }\n\n return (\n <Motion\n className={cx(\"ui-segmented-control__cursor\", className)}\n layoutDependency={false}\n layoutId=\"cursor\"\n transition={{\n type: \"spring\",\n bounce: 0.15,\n duration: 0.4,\n ...transition,\n }}\n __css={css}\n {...rest}\n />\n )\n}\n"],"mappings":"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","names":["props","ref","value"]}
1
+ {"version":3,"sources":["../src/segmented-control.tsx"],"sourcesContent":["import type {\n CSSUIObject,\n HTMLUIProps,\n ThemeProps,\n UIPropGetter,\n RequiredUIPropGetter,\n} from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n useMultiComponentStyle,\n omitThemeProps,\n} from \"@yamada-ui/core\"\nimport type { MotionProps } from \"@yamada-ui/motion\"\nimport { LayoutGroup, Motion } from \"@yamada-ui/motion\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport { createDescendant } from \"@yamada-ui/use-descendant\"\nimport { trackFocusVisible } from \"@yamada-ui/use-focus-visible\"\nimport {\n ariaAttr,\n createContext,\n cx,\n dataAttr,\n getValidChildren,\n handlerAll,\n mergeRefs,\n omitObject,\n useCallbackRef,\n useIsMounted,\n} from \"@yamada-ui/utils\"\nimport type {\n ChangeEvent,\n ChangeEventHandler,\n FC,\n FocusEventHandler,\n ReactElement,\n} from \"react\"\nimport { useCallback, useEffect, useId, useRef, useState } from \"react\"\n\nexport type SegmentedControlItem = SegmentedControlButtonProps & {\n label?: string\n}\n\nconst { DescendantsContextProvider, useDescendants, useDescendant } =\n createDescendant<HTMLButtonElement>()\n\ntype SegmentedControlContext = {\n selectedValue: string\n getInputProps: RequiredUIPropGetter<\n \"input\",\n { index: number; isDisabled?: boolean; isReadOnly?: boolean }\n >\n getLabelProps: RequiredUIPropGetter<\n \"label\",\n {\n value: string\n index: number\n isDisabled?: boolean\n isReadOnly?: boolean\n disabled?: boolean\n readOnly?: boolean\n }\n >\n styles: Record<string, CSSUIObject>\n}\n\nconst [SegmentedControlProvider, useSegmentedControl] =\n createContext<SegmentedControlContext>({\n strict: false,\n name: \"SegmentedControlContext\",\n })\n\ntype SegmentedControlOptions = {\n /**\n * The HTML `name` attribute used for forms.\n */\n name?: string\n /**\n * The value of the segmented control.\n */\n value?: string\n /**\n * The initial value of the segmented control.\n */\n defaultValue?: string\n /**\n * The callback fired when any children radio is checked or unchecked.\n */\n onChange?: (value: string) => void\n /**\n * If `true`, the segmented control will be readonly.\n *\n * @default false\n */\n isReadOnly?: boolean\n /**\n * If `true`, the segmented control will be disabled.\n *\n * @default false\n */\n isDisabled?: boolean\n /**\n * If provided, generate segmented control buttons but based on items.\n *\n * @default '[]'\n */\n items?: SegmentedControlItem[]\n}\n\nexport type SegmentedControlProps = Omit<\n HTMLUIProps<\"div\">,\n \"value\" | \"defaultValue\" | \"onChange\"\n> &\n ThemeProps<\"SegmentedControl\"> &\n SegmentedControlOptions\n\n/**\n * `SegmentedControl` is a component used for allowing users to select one option from multiple choices.\n *\n * @see Docs https://yamada-ui.com/components/forms/segmented-control\n */\nexport const SegmentedControl = forwardRef<SegmentedControlProps, \"div\">(\n (props, ref) => {\n const [styles, mergedProps] = useMultiComponentStyle(\n \"SegmentedControl\",\n props,\n )\n let {\n className,\n id,\n name,\n isReadOnly,\n isDisabled,\n children,\n items = [],\n value,\n defaultValue,\n ...rest\n } = omitThemeProps(mergedProps)\n\n id ??= useId()\n name ??= `segmented-control-${useId()}`\n\n rest.onChange = useCallbackRef(rest.onChange)\n\n const descendants = useDescendants()\n\n const [focusedIndex, setFocusedIndex] = useState<number>(-1)\n const [isFocusVisible, setIsFocusVisible] = useState<boolean>(false)\n const containerRef = useRef<HTMLDivElement>(null)\n const labelRefs = useRef<Map<string | number, HTMLLabelElement>>(new Map())\n\n const [selectedValue, setSelectedValue] = useControllableState({\n value,\n defaultValue,\n onChange: rest.onChange,\n })\n\n const onChange = useCallback(\n (ev: ChangeEvent<HTMLInputElement>) => {\n if (isDisabled || isReadOnly) {\n ev.preventDefault()\n\n return\n }\n\n setSelectedValue(ev.target.value)\n },\n [isDisabled, isReadOnly, setSelectedValue],\n )\n\n const onFocus = useCallback(\n (index: number, skip: boolean) => {\n if (isDisabled) return\n\n if (skip) {\n const next = descendants.enabledNextValue(index)\n\n if (next) setFocusedIndex(next.index)\n } else {\n setFocusedIndex(index)\n }\n },\n [descendants, isDisabled],\n )\n\n const onBlur = useCallback(() => setFocusedIndex(-1), [])\n\n const getContainerProps: UIPropGetter = useCallback(\n (props = {}, ref = null) => ({\n ...omitObject(rest, [\"onChange\"]),\n ...props,\n ref: mergeRefs(containerRef, ref),\n id,\n \"aria-disabled\": ariaAttr(isDisabled),\n \"aria-readonly\": ariaAttr(isReadOnly),\n onBlur: handlerAll(props.onBlur, onBlur),\n }),\n [id, isDisabled, isReadOnly, onBlur, rest],\n )\n\n const getInputProps: RequiredUIPropGetter<\n \"input\",\n { isDisabled?: boolean; isReadOnly?: boolean; index: number }\n > = useCallback(\n ({ index, ...props }, ref = null) => {\n const disabled = props.disabled ?? props.isDisabled ?? isDisabled\n const readOnly = props.readOnly ?? props.isReadOnly ?? isReadOnly\n const checked = props.value === selectedValue\n\n return {\n ...omitObject(props, [\"isDisabled\", \"isReadOnly\"]),\n ref,\n id: `${id}-${index}`,\n type: \"radio\",\n name,\n disabled: disabled || readOnly,\n readOnly,\n checked,\n \"aria-disabled\": ariaAttr(disabled),\n \"aria-readonly\": ariaAttr(readOnly),\n \"data-checked\": dataAttr(checked),\n \"data-focus\": dataAttr(index === focusedIndex),\n style: {\n border: \"0px\",\n clip: \"rect(0px, 0px, 0px, 0px)\",\n height: \"1px\",\n width: \"1px\",\n margin: \"-1px\",\n padding: \"0px\",\n overflow: \"hidden\",\n whiteSpace: \"nowrap\",\n position: \"absolute\",\n },\n onChange: handlerAll(props.onChange, (ev) =>\n !disabled && !readOnly\n ? onChange(ev as ChangeEvent<HTMLInputElement>)\n : {},\n ),\n }\n },\n [isDisabled, isReadOnly, selectedValue, id, name, focusedIndex, onChange],\n )\n\n const getLabelProps: RequiredUIPropGetter<\n \"label\",\n {\n value: string\n index: number\n isDisabled?: boolean\n isReadOnly?: boolean\n disabled?: boolean\n readOnly?: boolean\n }\n > = useCallback(\n ({ index, ...props }, ref = null) => {\n const disabled = props.disabled ?? props.isDisabled ?? isDisabled\n const readOnly = props.readOnly ?? props.isReadOnly ?? isReadOnly\n const checked = props.value === selectedValue\n const focused = index === focusedIndex\n\n return {\n props,\n ref: mergeRefs(\n (node) => labelRefs.current.set(props.value, node),\n ref,\n ),\n \"aria-disabled\": ariaAttr(disabled),\n \"aria-readonly\": ariaAttr(readOnly),\n \"data-checked\": dataAttr(checked),\n \"data-focus\": dataAttr(focused),\n \"data-focus-visible\": dataAttr(focused && isFocusVisible),\n onFocus: handlerAll(\n props.onFocus as unknown as FocusEventHandler<HTMLLabelElement>,\n () => onFocus(index, disabled || readOnly || false),\n ),\n ...(disabled || readOnly\n ? {\n _hover: {},\n _active: {},\n _focus: {},\n _invalid: {},\n _focusVisible: {},\n }\n : {}),\n }\n },\n [\n focusedIndex,\n isDisabled,\n isFocusVisible,\n isReadOnly,\n onFocus,\n selectedValue,\n ],\n )\n\n useEffect(() => {\n return trackFocusVisible(setIsFocusVisible)\n }, [])\n\n const css: CSSUIObject = {\n display: \"inline-flex\",\n alignItems: \"center\",\n ...styles.container,\n }\n\n const validChildren = getValidChildren(children)\n let computedChildren: ReactElement[] = []\n\n if (!validChildren.length && items.length) {\n computedChildren = items.map(({ label, value, ...props }, i) => (\n <SegmentedControlButton key={i} value={value} {...props}>\n {label}\n </SegmentedControlButton>\n ))\n } else {\n computedChildren = validChildren\n }\n\n if (selectedValue == null && defaultValue == null) {\n for (const child of computedChildren) {\n if (child.type !== SegmentedControlButton)\n if (\n (child.type as any).displayName !==\n SegmentedControlButton.displayName\n )\n continue\n\n const value = child.props.value\n\n setSelectedValue(value)\n\n break\n }\n }\n\n return (\n <DescendantsContextProvider value={descendants}>\n <SegmentedControlProvider\n value={{ getInputProps, getLabelProps, styles, selectedValue }}\n >\n <LayoutGroup id={id}>\n <ui.div\n {...getContainerProps({}, ref)}\n className={cx(\"ui-segmented-control\", className)}\n __css={css}\n >\n {computedChildren}\n </ui.div>\n </LayoutGroup>\n </SegmentedControlProvider>\n </DescendantsContextProvider>\n )\n },\n)\n\ntype SegmentedControlButtonOptions = {\n /**\n * The value of the segmented control button.\n */\n value: string\n /**\n * The callback fired when any children radio is checked or unchecked.\n */\n onChange?: ChangeEventHandler<HTMLInputElement>\n /**\n * Props for motion component.\n */\n motionProps?: MotionProps\n}\n\nexport type SegmentedControlButtonProps = Omit<\n HTMLUIProps<\"label\">,\n \"onChange\"\n> &\n Pick<SegmentedControlProps, \"isDisabled\" | \"isReadOnly\"> &\n SegmentedControlButtonOptions\n\nexport const SegmentedControlButton = forwardRef<\n SegmentedControlButtonProps,\n \"input\"\n>(\n (\n {\n className,\n disabled,\n readOnly,\n isDisabled,\n isReadOnly,\n value,\n onChange,\n children,\n motionProps,\n ...rest\n },\n ref,\n ) => {\n const [, isMounted] = useIsMounted({ rerender: true })\n const { selectedValue, getInputProps, getLabelProps, styles } =\n useSegmentedControl()\n\n const { index, register } = useDescendant({\n disabled: isDisabled || isReadOnly,\n })\n\n const props = {\n index,\n value,\n onChange,\n disabled,\n readOnly,\n isDisabled,\n isReadOnly,\n }\n\n const css: CSSUIObject = {\n position: \"relative\",\n cursor: \"pointer\",\n flex: \"1 1 0%\",\n display: \"inline-flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n ...styles.button,\n }\n\n const isSelected = selectedValue === value\n\n return (\n <ui.label\n {...getLabelProps(omitObject(props, [\"onChange\"]))}\n className={cx(\"ui-segmented-control__button\", className)}\n __css={css}\n {...rest}\n >\n <ui.input {...getInputProps(props, mergeRefs(register, ref))} />\n {isSelected && isMounted ? (\n <SegmentedControlCursor {...motionProps} />\n ) : null}\n <ui.span zIndex=\"1\">{children}</ui.span>\n </ui.label>\n )\n },\n)\n\nSegmentedControlButton.displayName = \"SegmentedControlButton\"\n\ntype SegmentedControlCursorProps = MotionProps & { className?: string }\n\nconst SegmentedControlCursor: FC<SegmentedControlCursorProps> = ({\n className,\n transition,\n ...rest\n}) => {\n const { styles } = useSegmentedControl()\n\n const css: CSSUIObject = {\n position: \"absolute\",\n w: \"full\",\n h: \"full\",\n ...styles.cursor,\n }\n\n return (\n <Motion\n className={cx(\"ui-segmented-control__cursor\", className)}\n layoutDependency={false}\n layoutId=\"cursor\"\n transition={{\n type: \"spring\",\n bounce: 0.15,\n duration: 0.4,\n ...transition,\n }}\n __css={css}\n {...rest}\n />\n )\n}\n"],"mappings":"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","names":["props","ref","value"]}
package/dist/segmented-control.mjs CHANGED
@@ -2,7 +2,7 @@
2
2
  import {
3
3
  SegmentedControl,
4
4
  SegmentedControlButton
5
- } from "./chunk-6LEHUYFW.mjs";
5
+ } from "./chunk-JYWIVKVK.mjs";
6
6
  export {
7
7
  SegmentedControl,
8
8
  SegmentedControlButton
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@yamada-ui/segmented-control",
3
- "version": "1.0.3",
3
+ "version": "1.0.4-dev-20231230014952",
4
4
  "description": "Yamada UI segmented control components",
5
5
  "keywords": [
6
6
  "yamada",
@@ -36,12 +36,12 @@
36
36
  "url": "https://github.com/hirotomoyamada/yamada-ui/issues"
37
37
  },
38
38
  "dependencies": {
39
- "@yamada-ui/core": "1.1.1",
40
- "@yamada-ui/utils": "1.0.0",
41
- "@yamada-ui/motion": "1.0.2",
42
- "@yamada-ui/use-focus-visible": "1.0.0",
43
- "@yamada-ui/use-descendant": "1.0.0",
44
- "@yamada-ui/use-controllable-state": "1.0.0"
39
+ "@yamada-ui/core": "1.1.2-dev-20231230014952",
40
+ "@yamada-ui/utils": "1.0.1-dev-20231230014952",
41
+ "@yamada-ui/motion": "1.0.3-dev-20231230014952",
42
+ "@yamada-ui/use-focus-visible": "1.0.1-dev-20231230014952",
43
+ "@yamada-ui/use-descendant": "1.0.1-dev-20231230014952",
44
+ "@yamada-ui/use-controllable-state": "1.0.1-dev-20231230014952"
45
45
  },
46
46
  "devDependencies": {
47
47
  "react": "^18.0.0",
package/dist/chunk-6LEHUYFW.mjs.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/segmented-control.tsx"],"sourcesContent":["import type { CSSUIObject, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n useMultiComponentStyle,\n omitThemeProps,\n} from \"@yamada-ui/core\"\nimport type { MotionProps } from \"@yamada-ui/motion\"\nimport { LayoutGroup, Motion } from \"@yamada-ui/motion\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport { createDescendant } from \"@yamada-ui/use-descendant\"\nimport { trackFocusVisible } from \"@yamada-ui/use-focus-visible\"\nimport type { PropGetter, RequiredPropGetter } from \"@yamada-ui/utils\"\nimport {\n ariaAttr,\n createContext,\n cx,\n dataAttr,\n getValidChildren,\n handlerAll,\n mergeRefs,\n omitObject,\n useCallbackRef,\n useIsMounted,\n} from \"@yamada-ui/utils\"\nimport type { ChangeEvent, ChangeEventHandler, FC, ReactElement } from \"react\"\nimport { useCallback, useEffect, useId, useRef, useState } from \"react\"\n\nexport type SegmentedControlItem = SegmentedControlButtonProps & {\n label?: string\n}\n\nconst { DescendantsContextProvider, useDescendants, useDescendant } =\n createDescendant<HTMLButtonElement>()\n\ntype SegmentedControlContext = {\n selectedValue: string\n getInputProps: RequiredPropGetter<{ index: number }>\n getLabelProps: RequiredPropGetter<{ index: number }>\n styles: Record<string, CSSUIObject>\n}\n\nconst [SegmentedControlProvider, useSegmentedControl] =\n createContext<SegmentedControlContext>({\n strict: false,\n name: \"SegmentedControlContext\",\n })\n\ntype SegmentedControlOptions = {\n /**\n * The HTML `name` attribute used for forms.\n */\n name?: string\n /**\n * The value of the segmented control.\n */\n value?: string\n /**\n * The initial value of the segmented control.\n */\n defaultValue?: string\n /**\n * The callback fired when any children radio is checked or unchecked.\n */\n onChange?: (value: string) => void\n /**\n * If `true`, the segmented control will be readonly.\n *\n * @default false\n */\n isReadOnly?: boolean\n /**\n * If `true`, the segmented control will be disabled.\n *\n * @default false\n */\n isDisabled?: boolean\n /**\n * If provided, generate segmented control buttons but based on items.\n *\n * @default '[]'\n */\n items?: SegmentedControlItem[]\n}\n\nexport type SegmentedControlProps = Omit<\n HTMLUIProps<\"div\">,\n \"value\" | \"defaultValue\" | \"onChange\"\n> &\n ThemeProps<\"SegmentedControl\"> &\n SegmentedControlOptions\n\n/**\n * `SegmentedControl` is a component used for allowing users to select one option from multiple choices.\n *\n * @see Docs https://yamada-ui.com/components/forms/segmented-control\n */\nexport const SegmentedControl = forwardRef<SegmentedControlProps, \"div\">(\n (props, ref) => {\n const [styles, mergedProps] = useMultiComponentStyle(\n \"SegmentedControl\",\n props,\n )\n let {\n className,\n id,\n name,\n isReadOnly,\n isDisabled,\n children,\n items = [],\n value,\n defaultValue,\n ...rest\n } = omitThemeProps(mergedProps)\n\n id ??= useId()\n name ??= `segmented-control-${useId()}`\n\n rest.onChange = useCallbackRef(rest.onChange)\n\n const descendants = useDescendants()\n\n const [focusedIndex, setFocusedIndex] = useState<number>(-1)\n const [isFocusVisible, setIsFocusVisible] = useState<boolean>(false)\n const containerRef = useRef<HTMLDivElement>(null)\n const labelRefs = useRef<Map<string | number, HTMLLabelElement>>(new Map())\n\n const [selectedValue, setSelectedValue] = useControllableState({\n value,\n defaultValue,\n onChange: rest.onChange,\n })\n\n const onChange = useCallback(\n (ev: ChangeEvent<HTMLInputElement>) => {\n if (isDisabled || isReadOnly) {\n ev.preventDefault()\n\n return\n }\n\n setSelectedValue(ev.target.value)\n },\n [isDisabled, isReadOnly, setSelectedValue],\n )\n\n const onFocus = useCallback(\n (index: number, skip: boolean) => {\n if (isDisabled) return\n\n if (skip) {\n const next = descendants.enabledNextValue(index)\n\n if (next) setFocusedIndex(next.index)\n } else {\n setFocusedIndex(index)\n }\n },\n [descendants, isDisabled],\n )\n\n const onBlur = useCallback(() => setFocusedIndex(-1), [])\n\n const getContainerProps: PropGetter = useCallback(\n (props = {}, ref = null) => ({\n ...omitObject(rest, [\"onChange\"]),\n ...props,\n ref: mergeRefs(containerRef, ref),\n id,\n \"aria-disabled\": ariaAttr(isDisabled),\n \"aria-readonly\": ariaAttr(isReadOnly),\n onBlur: handlerAll(props.onBlur, onBlur),\n }),\n [id, isDisabled, isReadOnly, onBlur, rest],\n )\n\n const getInputProps: RequiredPropGetter<{ index: number }> = useCallback(\n ({ index, ...props } = {}, ref = null) => {\n const disabled = props.disabled ?? props.isDisabled ?? isDisabled\n const readOnly = props.readOnly ?? props.isReadOnly ?? isReadOnly\n const checked = props.value === selectedValue\n\n return {\n ...omitObject(props, [\"isDisabled\", \"isReadOnly\"]),\n ref,\n id: `${id}-${index}`,\n type: \"radio\",\n name,\n disabled: disabled || readOnly,\n readOnly,\n checked,\n \"aria-disabled\": ariaAttr(disabled),\n \"aria-readonly\": ariaAttr(readOnly),\n \"data-checked\": dataAttr(checked),\n \"data-focus\": dataAttr(index === focusedIndex),\n style: {\n border: \"0px\",\n clip: \"rect(0px, 0px, 0px, 0px)\",\n height: \"1px\",\n width: \"1px\",\n margin: \"-1px\",\n padding: \"0px\",\n overflow: \"hidden\",\n whiteSpace: \"nowrap\",\n position: \"absolute\",\n },\n onChange: handlerAll(props.onChange, (ev) =>\n !disabled && !readOnly\n ? onChange(ev as ChangeEvent<HTMLInputElement>)\n : {},\n ),\n }\n },\n [isDisabled, isReadOnly, selectedValue, id, name, focusedIndex, onChange],\n )\n\n const getLabelProps: RequiredPropGetter<{ index: number }> = useCallback(\n ({ index, ...props } = {}, ref = null) => {\n const disabled = props.disabled ?? props.isDisabled ?? isDisabled\n const readOnly = props.readOnly ?? props.isReadOnly ?? isReadOnly\n const checked = props.value === selectedValue\n const focused = index === focusedIndex\n\n return {\n props,\n ref: mergeRefs(\n (node) => labelRefs.current.set(props.value, node),\n ref,\n ),\n \"aria-disabled\": ariaAttr(disabled),\n \"aria-readonly\": ariaAttr(readOnly),\n \"data-checked\": dataAttr(checked),\n \"data-focus\": dataAttr(focused),\n \"data-focus-visible\": dataAttr(focused && isFocusVisible),\n onFocus: handlerAll(props.onFocus, () =>\n onFocus(index, disabled || readOnly),\n ),\n ...(disabled || readOnly\n ? {\n _hover: {},\n _active: {},\n _focus: {},\n _invalid: {},\n _focusVisible: {},\n }\n : {}),\n }\n },\n [\n focusedIndex,\n isDisabled,\n isFocusVisible,\n isReadOnly,\n onFocus,\n selectedValue,\n ],\n )\n\n useEffect(() => {\n return trackFocusVisible(setIsFocusVisible)\n }, [])\n\n const css: CSSUIObject = {\n display: \"inline-flex\",\n alignItems: \"center\",\n ...styles.container,\n }\n\n const validChildren = getValidChildren(children)\n let computedChildren: ReactElement[] = []\n\n if (!validChildren.length && items.length) {\n computedChildren = items.map(({ label, value, ...props }, i) => (\n <SegmentedControlButton key={i} value={value} {...props}>\n {label}\n </SegmentedControlButton>\n ))\n } else {\n computedChildren = validChildren\n }\n\n if (selectedValue == null && defaultValue == null) {\n for (const child of computedChildren) {\n if (child.type !== SegmentedControlButton)\n if (\n (child.type as any).displayName !==\n SegmentedControlButton.displayName\n )\n continue\n\n const value = child.props.value\n\n setSelectedValue(value)\n\n break\n }\n }\n\n return (\n <DescendantsContextProvider value={descendants}>\n <SegmentedControlProvider\n value={{ getInputProps, getLabelProps, styles, selectedValue }}\n >\n <LayoutGroup id={id}>\n <ui.div\n {...getContainerProps({}, ref)}\n className={cx(\"ui-segmented-control\", className)}\n __css={css}\n >\n {computedChildren}\n </ui.div>\n </LayoutGroup>\n </SegmentedControlProvider>\n </DescendantsContextProvider>\n )\n },\n)\n\ntype SegmentedControlButtonOptions = {\n /**\n * The value of the segmented control button.\n */\n value: string | number\n /**\n * The callback fired when any children radio is checked or unchecked.\n */\n onChange?: ChangeEventHandler<HTMLInputElement>\n /**\n * Props for motion component.\n */\n motionProps?: MotionProps\n}\n\nexport type SegmentedControlButtonProps = Omit<\n HTMLUIProps<\"label\">,\n \"onChange\"\n> &\n Pick<SegmentedControlProps, \"isDisabled\" | \"isReadOnly\"> &\n SegmentedControlButtonOptions\n\nexport const SegmentedControlButton = forwardRef<\n SegmentedControlButtonProps,\n \"input\"\n>(\n (\n {\n className,\n disabled,\n readOnly,\n isDisabled,\n isReadOnly,\n value,\n onChange,\n children,\n motionProps,\n ...rest\n },\n ref,\n ) => {\n const [, isMounted] = useIsMounted({ rerender: true })\n const { selectedValue, getInputProps, getLabelProps, styles } =\n useSegmentedControl()\n\n const { index, register } = useDescendant({\n disabled: isDisabled || isReadOnly,\n })\n\n const props = {\n index,\n value,\n onChange,\n disabled,\n readOnly,\n isDisabled,\n isReadOnly,\n }\n\n const css: CSSUIObject = {\n position: \"relative\",\n cursor: \"pointer\",\n flex: \"1 1 0%\",\n display: \"inline-flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n ...styles.button,\n }\n\n const isSelected = selectedValue === value\n\n return (\n <ui.label\n {...getLabelProps(omitObject(props, [\"onChange\"]))}\n className={cx(\"ui-segmented-control__button\", className)}\n __css={css}\n {...rest}\n >\n <ui.input {...getInputProps(props, mergeRefs(register, ref))} />\n {isSelected && isMounted ? (\n <SegmentedControlCursor {...motionProps} />\n ) : null}\n <ui.span zIndex=\"1\">{children}</ui.span>\n </ui.label>\n )\n },\n)\n\nSegmentedControlButton.displayName = \"SegmentedControlButton\"\n\ntype SegmentedControlCursorProps = MotionProps & { className?: string }\n\nconst SegmentedControlCursor: FC<SegmentedControlCursorProps> = ({\n className,\n transition,\n ...rest\n}) => {\n const { styles } = useSegmentedControl()\n\n const css: CSSUIObject = {\n position: \"absolute\",\n w: \"full\",\n h: \"full\",\n ...styles.cursor,\n }\n\n return (\n <Motion\n className={cx(\"ui-segmented-control__cursor\", className)}\n layoutDependency={false}\n layoutId=\"cursor\"\n transition={{\n type: \"spring\",\n bounce: 0.15,\n duration: 0.4,\n ...transition,\n }}\n __css={css}\n {...rest}\n />\n )\n}\n"],"mappings":"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","names":["props","ref","value"]}