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

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

{"version":3,"file":"use-switch.cjs","names":["useFieldProps","useControllableState","getRootProps: PropGetter<\"label\">","props","getTrackProps: PropGetter","getThumbProps: PropGetter","visuallyHiddenAttributes","mergeRefs"],"sources":["../../../../src/components/switch/use-switch.ts"],"sourcesContent":["\"use client\"\n\nimport type {\n  ChangeEvent,\n  ChangeEventHandler,\n  FocusEventHandler,\n  KeyboardEvent,\n} from \"react\"\nimport type { HTMLProps, HTMLRefAttributes, PropGetter } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useId, useRef } from \"react\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport {\n  dataAttr,\n  handlerAll,\n  mergeRefs,\n  visuallyHiddenAttributes,\n} from \"../../utils\"\nimport { useFieldProps } from \"../field\"\n\nexport interface UseSwitchProps<Y extends number | string = string>\n  extends Omit<HTMLProps<\"label\">, \"onBlur\" | \"onChange\" | \"onFocus\" | \"ref\">,\n    HTMLRefAttributes<\"input\">,\n    FieldProps {\n  /**\n   * id assigned to input.\n   */\n  id?: string\n  /**\n   * The HTML `name` attribute used for forms.\n   */\n  name?: string\n  /**\n   * If `true`, the switch will be checked.\n   *\n   * @default false\n   */\n  checked?: boolean\n  /**\n   * If `true`, the switch will be checked when the Enter key is pressed.\n   *\n   * @default true\n   */\n  checkOnEnter?: boolean\n  /**\n   * If `true`, the switch will be initially checked.\n   *\n   * @default false\n   */\n  defaultChecked?: boolean\n  /**\n   * The tab-index property of the underlying input element.\n   */\n  tabIndex?: number\n  /**\n   * The value to be used in the switch input.\n   */\n  value?: Y\n  /**\n   * The callback invoked when the switch is blurred.\n   */\n  onBlur?: FocusEventHandler<HTMLInputElement>\n  /**\n   * The callback invoked when the checked state changes.\n   */\n  onChange?: ChangeEventHandler<HTMLInputElement>\n  /**\n   * The callback invoked when the switch is focused.\n   */\n  onFocus?: FocusEventHandler<HTMLInputElement>\n}\n\nexport const useSwitch = <Y extends number | string = string>(\n  props: UseSwitchProps<Y> = {},\n) => {\n  const uuid = useId()\n  const {\n    props: {\n      id = uuid,\n      ref,\n      name,\n      checked: checkedProp,\n      checkOnEnter = true,\n      defaultChecked = false,\n      disabled,\n      readOnly,\n      required,\n      value,\n      onChange: onChangeProp,\n      ...rest\n    },\n    ariaProps,\n    dataProps,\n    eventProps,\n  } = useFieldProps(props)\n  const interactive = !(readOnly || disabled)\n  const inputRef = useRef<HTMLInputElement>(null)\n  const [checked, setChecked] = useControllableState({\n    defaultValue: defaultChecked,\n    value: checkedProp,\n  })\n\n  const onChange = useCallback(\n    (ev: ChangeEvent<HTMLInputElement>) => {\n      if (!interactive) return ev.preventDefault()\n\n      setChecked(ev.target.checked)\n      onChangeProp?.(ev)\n    },\n    [onChangeProp, setChecked, interactive],\n  )\n\n  const onKeyDown = useCallback(\n    (ev: KeyboardEvent<HTMLInputElement>) => {\n      if (interactive && checkOnEnter && ev.key === \"Enter\")\n        inputRef.current?.click()\n    },\n    [interactive, checkOnEnter],\n  )\n\n  const getRootProps: PropGetter<\"label\"> = useCallback(\n    (props = {}) => ({\n      ...dataProps,\n      htmlFor: id,\n      \"data-checked\": dataAttr(checked),\n      ...rest,\n      ...props,\n    }),\n    [checked, rest, id, dataProps],\n  )\n\n  const getTrackProps: PropGetter = useCallback(\n    (props = {}) => ({\n      \"data-checked\": dataAttr(checked),\n      ...dataProps,\n      ...props,\n    }),\n    [checked, dataProps],\n  )\n\n  const getThumbProps: PropGetter = useCallback(\n    (props = {}) => ({\n      \"data-checked\": dataAttr(checked),\n      ...dataProps,\n      ...props,\n    }),\n    [checked, dataProps],\n  )\n\n  const getInputProps: PropGetter<\"input\"> = useCallback(\n    (props = {}) => ({\n      ...ariaProps,\n      ...dataProps,\n      id,\n      type: \"checkbox\",\n      name,\n      style: visuallyHiddenAttributes.style,\n      checked,\n      disabled,\n      readOnly,\n      required,\n      role: \"switch\",\n      tabIndex: interactive ? 0 : -1,\n      value,\n      ...props,\n      ref: mergeRefs(inputRef, props.ref, ref),\n      onBlur: handlerAll(eventProps.onBlur, props.onBlur),\n      onChange: handlerAll(props.onChange, onChange),\n      onFocus: handlerAll(eventProps.onFocus, props.onFocus),\n      onKeyDown: handlerAll(props.onKeyDown, onKeyDown),\n    }),\n    [\n      ariaProps,\n      dataProps,\n      id,\n      name,\n      checked,\n      disabled,\n      readOnly,\n      required,\n      interactive,\n      value,\n      ref,\n      eventProps,\n      onChange,\n      onKeyDown,\n    ],\n  )\n\n  const getLabelProps: PropGetter<\"span\"> = useCallback(\n    (props = {}) => ({\n      ...dataProps,\n      \"data-checked\": dataAttr(checked),\n      ...props,\n    }),\n    [dataProps, checked],\n  )\n\n  return {\n    checked,\n    getInputProps,\n    getLabelProps,\n    getRootProps,\n    getThumbProps,\n    getTrackProps,\n  }\n}\n\nexport type UseSwitchReturn = ReturnType<typeof useSwitch>\n"],"mappings":";;;;;;;;;;;;;AAwEA,MAAa,aACX,QAA2B,EAAE,KAC1B;CACH,MAAM,yBAAc;CACpB,MAAM,EACJ,OAAO,EACL,KAAK,MACL,KACA,MACA,SAAS,aACT,eAAe,MACf,iBAAiB,OACjB,UACA,UACA,UACA,OACA,UAAU,aACV,GAAG,QAEL,WACA,WACA,eACEA,sCAAc,MAAM;CACxB,MAAM,cAAc,EAAE,YAAY;CAClC,MAAM,6BAAoC,KAAK;CAC/C,MAAM,CAAC,SAAS,cAAcC,gEAAqB;EACjD,cAAc;EACd,OAAO;EACR,CAAC;CAEF,MAAM,mCACH,OAAsC;AACrC,MAAI,CAAC,YAAa,QAAO,GAAG,gBAAgB;AAE5C,aAAW,GAAG,OAAO,QAAQ;AAC7B,iBAAe,GAAG;IAEpB;EAAC;EAAc;EAAY;EAAY,CACxC;CAED,MAAM,oCACH,OAAwC;AACvC,MAAI,eAAe,gBAAgB,GAAG,QAAQ,QAC5C,UAAS,SAAS,OAAO;IAE7B,CAAC,aAAa,aAAa,CAC5B;CAED,MAAMC,uCACH,UAAQ,EAAE,MAAM;EACf,GAAG;EACH,SAAS;EACT,gEAAyB,QAAQ;EACjC,GAAG;EACH,GAAGC;EACJ,GACD;EAAC;EAAS;EAAM;EAAI;EAAU,CAC/B;CAED,MAAMC,wCACH,UAAQ,EAAE,MAAM;EACf,gEAAyB,QAAQ;EACjC,GAAG;EACH,GAAGD;EACJ,GACD,CAAC,SAAS,UAAU,CACrB;CAED,MAAME,wCACH,UAAQ,EAAE,MAAM;EACf,gEAAyB,QAAQ;EACjC,GAAG;EACH,GAAGF;EACJ,GACD,CAAC,SAAS,UAAU,CACrB;AAmDD,QAAO;EACL;EACA,uCAlDC,UAAQ,EAAE,MAAM;GACf,GAAG;GACH,GAAG;GACH;GACA,MAAM;GACN;GACA,OAAOG,qCAAyB;GAChC;GACA;GACA;GACA;GACA,MAAM;GACN,UAAU,cAAc,IAAI;GAC5B;GACA,GAAGH;GACH,KAAKI,sBAAU,UAAUJ,QAAM,KAAK,IAAI;GACxC,0DAAmB,WAAW,QAAQA,QAAM,OAAO;GACnD,4DAAqBA,QAAM,UAAU,SAAS;GAC9C,2DAAoB,WAAW,SAASA,QAAM,QAAQ;GACtD,6DAAsBA,QAAM,WAAW,UAAU;GAClD,GACD;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,CACF;EAcC,uCAXC,UAAQ,EAAE,MAAM;GACf,GAAG;GACH,gEAAyB,QAAQ;GACjC,GAAGA;GACJ,GACD,CAAC,WAAW,QAAQ,CACrB;EAMC;EACA;EACA;EACD"}