@yamada-ui/react/dist/cjs/components/segmented-control/use-segmented-control.cjs.map

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion

{"version":3,"file":"use-segmented-control.cjs","names":["createContext","createDescendants","useControllableState","getRootProps: PropGetter","getLabelProps: PropGetter<\"label\">","visuallyHiddenAttributes","mergeRefs"],"sources":["../../../../src/components/segmented-control/use-segmented-control.ts"],"sourcesContent":["\"use client\"\n\nimport type { ChangeEvent } from \"react\"\nimport type { HTMLProps, Orientation, PropGetter } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useId } from \"react\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { createDescendants } from \"../../hooks/use-descendants\"\nimport {\n  ariaAttr,\n  createContext,\n  dataAttr,\n  handlerAll,\n  mergeRefs,\n  visuallyHiddenAttributes,\n} from \"../../utils\"\n\ninterface SegmentedControlContext\n  extends Omit<UseSegmentedControlReturn, \"descendants\" | \"getRootProps\"> {}\n\nconst [SegmentedControlContext, useSegmentedControlContext] =\n  createContext<SegmentedControlContext>({\n    name: \"SegmentedControlContext\",\n  })\n\nexport { SegmentedControlContext, useSegmentedControlContext }\n\nconst {\n  DescendantsContext: SegmentedControlDescendantsContext,\n  useDescendant: useSegmentedControlDescendant,\n  useDescendants: useSegmentedControlDescendants,\n} = createDescendants<HTMLInputElement>()\n\nexport {\n  SegmentedControlDescendantsContext,\n  useSegmentedControlDescendant,\n  useSegmentedControlDescendants,\n}\n\nexport interface UseSegmentedControlProps<Y extends string = string>\n  extends Omit<HTMLProps, \"onChange\"> {\n  /**\n   * The HTML `name` attribute used for forms.\n   */\n  name?: string\n  /**\n   * The initial value of the segmented control.\n   */\n  defaultValue?: Y\n  /**\n   * If `true`, the segmented control will be disabled.\n   *\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * The orientation of the segmented control.\n   *\n   * @default 'horizontal'\n   */\n  orientation?: Orientation\n  /**\n   * If `true`, the segmented control will be readonly.\n   *\n   * @default false\n   */\n  readOnly?: boolean\n  /**\n   * The value of the segmented control.\n   */\n  value?: Y\n  /**\n   * The callback fired when any children radio is checked or unchecked.\n   */\n  onChange?: (value: Y) => void\n}\n\nexport const useSegmentedControl = <Y extends string = string>({\n  id,\n  name,\n  defaultValue,\n  disabled,\n  orientation = \"horizontal\",\n  readOnly,\n  value: valueProp,\n  onChange: onChangeProp,\n  ...rest\n}: UseSegmentedControlProps<Y> = {}) => {\n  const uuid = useId()\n  const [value, setValue] = useControllableState({\n    defaultValue,\n    value: valueProp,\n    onChange: onChangeProp,\n  })\n  const descendants = useSegmentedControlDescendants()\n\n  id ??= uuid\n  name ??= uuid\n\n  const getRootProps: PropGetter = useCallback(\n    (props) => ({\n      id,\n      \"aria-disabled\": ariaAttr(disabled),\n      \"aria-orientation\": orientation,\n      \"data-disabled\": dataAttr(disabled),\n      \"data-orientation\": orientation,\n      \"data-readonly\": dataAttr(readOnly),\n      role: \"radiogroup\",\n      ...rest,\n      ...props,\n    }),\n    [disabled, id, orientation, readOnly, rest],\n  )\n\n  return {\n    id,\n    name,\n    descendants,\n    disabled,\n    orientation,\n    readOnly,\n    setValue,\n    value,\n    getRootProps,\n  }\n}\n\nexport type UseSegmentedControlReturn = ReturnType<typeof useSegmentedControl>\n\nexport interface UseSegmentedControlItemProps<Y extends string = string>\n  extends HTMLProps<\"label\">,\n    Pick<FieldProps, \"disabled\" | \"readOnly\"> {\n  /**\n   * The value of the segmented control item.\n   */\n  value: Y\n  /**\n   * Props for the input element.\n   */\n  inputProps?: HTMLProps<\"input\">\n}\n\nexport const useSegmentedControlItem = <Y extends string = string>({\n  disabled,\n  readOnly,\n  value,\n  inputProps,\n  ...rest\n}: UseSegmentedControlItemProps<Y>) => {\n  const {\n    name,\n    disabled: rootDisabled,\n    orientation,\n    readOnly: rootReadOnly,\n    setValue,\n    value: selectedValue,\n  } = useSegmentedControlContext()\n  const { register } = useSegmentedControlDescendant({\n    disabled: disabled || readOnly,\n  })\n  const checked = value === selectedValue\n  const trulyDisabled = disabled ?? rootDisabled\n  const trulyReadOnly = readOnly ?? rootReadOnly\n  const interactive = !(trulyReadOnly || trulyDisabled)\n\n  const onChange = useCallback(\n    (ev: ChangeEvent<HTMLInputElement>) => {\n      setValue(ev.target.value)\n    },\n    [setValue],\n  )\n\n  const getLabelProps: PropGetter<\"label\"> = useCallback(\n    (props) => ({\n      \"aria-disabled\": ariaAttr(trulyDisabled),\n      \"aria-readonly\": ariaAttr(trulyReadOnly),\n      \"data-checked\": dataAttr(checked),\n      \"data-disabled\": dataAttr(trulyDisabled),\n      \"data-orientation\": orientation,\n      \"data-readonly\": dataAttr(trulyReadOnly),\n      \"data-root-disabled\": dataAttr(rootDisabled),\n      \"data-root-readonly\": dataAttr(rootReadOnly),\n      ...props,\n      ...rest,\n    }),\n    [\n      orientation,\n      trulyDisabled,\n      trulyReadOnly,\n      checked,\n      rootDisabled,\n      rootReadOnly,\n      rest,\n    ],\n  )\n\n  const getInputProps: PropGetter<\"input\"> = useCallback(\n    ({ ref, ...props } = {}) => ({\n      type: \"radio\",\n      name,\n      style: visuallyHiddenAttributes.style,\n      \"aria-disabled\": ariaAttr(trulyDisabled),\n      \"aria-readonly\": ariaAttr(trulyReadOnly),\n      \"data-checked\": dataAttr(checked),\n      \"data-disabled\": dataAttr(trulyDisabled),\n      \"data-orientation\": orientation,\n      \"data-readonly\": dataAttr(trulyReadOnly),\n      checked,\n      disabled: trulyDisabled || trulyReadOnly,\n      readOnly: trulyReadOnly,\n      tabIndex: interactive ? undefined : -1,\n      value,\n      ...inputProps,\n      ...props,\n      ref: mergeRefs(register, ref),\n      onChange: handlerAll(props.onChange, inputProps?.onChange, onChange),\n    }),\n    [\n      orientation,\n      name,\n      trulyDisabled,\n      trulyReadOnly,\n      checked,\n      interactive,\n      value,\n      inputProps,\n      register,\n      onChange,\n    ],\n  )\n\n  return {\n    checked,\n    getInputProps,\n    getLabelProps,\n  }\n}\n\nexport type UseSegmentedControlItemReturn = ReturnType<\n  typeof useSegmentedControlItem\n>\n"],"mappings":";;;;;;;;;;;;;;AAoBA,MAAM,CAAC,yBAAyB,8BAC9BA,8BAAuC,EACrC,MAAM,2BACP,CAAC;AAIJ,MAAM,EACJ,oBAAoB,oCACpB,eAAe,+BACf,gBAAgB,mCACdC,uDAAqC;AA8CzC,MAAa,uBAAkD,EAC7D,IACA,MACA,cACA,UACA,cAAc,cACd,UACA,OAAO,WACP,UAAU,aACV,GAAG,SAC4B,EAAE,KAAK;CACtC,MAAM,yBAAc;CACpB,MAAM,CAAC,OAAO,YAAYC,gEAAqB;EAC7C;EACA,OAAO;EACP,UAAU;EACX,CAAC;CACF,MAAM,cAAc,gCAAgC;AAEpD,QAAO;AACP,UAAS;CAET,MAAMC,uCACH,WAAW;EACV;EACA,iEAA0B,SAAS;EACnC,oBAAoB;EACpB,iEAA0B,SAAS;EACnC,oBAAoB;EACpB,iEAA0B,SAAS;EACnC,MAAM;EACN,GAAG;EACH,GAAG;EACJ,GACD;EAAC;EAAU;EAAI;EAAa;EAAU;EAAK,CAC5C;AAED,QAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;;AAkBH,MAAa,2BAAsD,EACjE,UACA,UACA,OACA,WACA,GAAG,WACkC;CACrC,MAAM,EACJ,MACA,UAAU,cACV,aACA,UAAU,cACV,UACA,OAAO,kBACL,4BAA4B;CAChC,MAAM,EAAE,aAAa,8BAA8B,EACjD,UAAU,YAAY,UACvB,CAAC;CACF,MAAM,UAAU,UAAU;CAC1B,MAAM,gBAAgB,YAAY;CAClC,MAAM,gBAAgB,YAAY;CAClC,MAAM,cAAc,EAAE,iBAAiB;CAEvC,MAAM,mCACH,OAAsC;AACrC,WAAS,GAAG,OAAO,MAAM;IAE3B,CAAC,SAAS,CACX;CAED,MAAMC,wCACH,WAAW;EACV,iEAA0B,cAAc;EACxC,iEAA0B,cAAc;EACxC,gEAAyB,QAAQ;EACjC,iEAA0B,cAAc;EACxC,oBAAoB;EACpB,iEAA0B,cAAc;EACxC,sEAA+B,aAAa;EAC5C,sEAA+B,aAAa;EAC5C,GAAG;EACH,GAAG;EACJ,GACD;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CACF;AAqCD,QAAO;EACL;EACA,uCApCC,EAAE,IAAK,GAAG,UAAU,EAAE,MAAM;GAC3B,MAAM;GACN;GACA,OAAOC,qCAAyB;GAChC,iEAA0B,cAAc;GACxC,iEAA0B,cAAc;GACxC,gEAAyB,QAAQ;GACjC,iEAA0B,cAAc;GACxC,oBAAoB;GACpB,iEAA0B,cAAc;GACxC;GACA,UAAU,iBAAiB;GAC3B,UAAU;GACV,UAAU,cAAc,SAAY;GACpC;GACA,GAAG;GACH,GAAG;GACH,KAAKC,sBAAU,UAAU,IAAI;GAC7B,4DAAqB,MAAM,UAAU,YAAY,UAAU,SAAS;GACrE,GACD;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,CACF;EAKC;EACD"}