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

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

{"version":3,"file":"use-toggle.cjs","names":["useI18n","useToggleGroupContext","useFieldProps","useControllableState","getInputProps: PropGetter<\"input\">","visuallyHiddenAttributes","props","mergeRefs"],"sources":["../../../../src/components/toggle/use-toggle.ts"],"sourcesContent":["\"use client\"\n\nimport type { ChangeEvent } from \"react\"\nimport type { HTMLProps, HTMLRefAttributes, PropGetter } from \"../../core\"\nimport type { Merge } from \"../../utils\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useMemo, useRef } from \"react\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport {\n  ariaAttr,\n  dataAttr,\n  handlerAll,\n  isArray,\n  isUndefined,\n  mergeRefs,\n  visuallyHiddenAttributes,\n} from \"../../utils\"\nimport { useFieldProps } from \"../field\"\nimport { useToggleGroupContext } from \"./use-toggle-group\"\n\nexport interface UseToggleProps<Y extends string = string>\n  extends FieldProps,\n    HTMLRefAttributes<\"input\">,\n    Omit<HTMLProps<\"button\">, \"onChange\" | \"ref\" | \"value\"> {\n  /**\n   * If `true`, the toggle button is represented as active.\n   *\n   * @default false\n   */\n  active?: boolean\n  /**\n   * If `true`, the toggle button will be checked.\n   */\n  checked?: boolean\n  /**\n   * If `true`, the toggle button will be initially checked.\n   *\n   * @default false\n   */\n  defaultChecked?: boolean\n  /**\n   * The value of the toggle button.\n   */\n  value?: Y\n  /**\n   * The callback invoked when checked state changes.\n   */\n  onChange?: (checked: boolean) => void\n}\n\nexport const useToggle = <Y extends string = string>(\n  props: UseToggleProps<Y> = {},\n) => {\n  const { t } = useI18n(\"toggle\")\n  const {\n    disabled: groupDisabled,\n    readOnly: groupReadOnly,\n    value: groupValue,\n    onChange: onChangeGroup,\n    onChangeMapRef,\n  } = useToggleGroupContext() ?? {}\n  const {\n    props: {\n      id,\n      ref,\n      form,\n      name,\n      active,\n      checked: checkedProp,\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<HTMLElement, UseToggleProps<Y>>({\n    disabled: groupDisabled,\n    readOnly: groupReadOnly,\n    ...props,\n  })\n  const inputRef = useRef<HTMLInputElement>(null)\n  const [checked, setChecked] = useControllableState({\n    defaultValue: defaultChecked,\n    value: checkedProp,\n    onChange: onChangeProp,\n  })\n  const interactive = !(readOnly || disabled)\n  const controlled = !isUndefined(groupValue)\n  const trulyChecked = useMemo(() => {\n    if (!controlled) {\n      return checked\n    } else {\n      return isArray(groupValue)\n        ? groupValue.includes(value ?? \"\")\n        : value === groupValue\n    }\n  }, [controlled, groupValue, checked, value])\n\n  if (controlled && isUndefined(value))\n    console.warn(`Toggle: value is required. Please set the value.`)\n\n  if (value) onChangeMapRef?.current.set(value, setChecked)\n\n  const onClick = useCallback(() => {\n    if (!interactive) return\n\n    setChecked((prev) => !prev)\n    onChangeGroup?.(value)\n  }, [onChangeGroup, setChecked, value, interactive])\n\n  const onChange = useCallback(\n    (ev: ChangeEvent<HTMLInputElement>) => {\n      setChecked(ev.target.checked)\n      onChangeGroup?.(value)\n    },\n    [onChangeGroup, setChecked, value],\n  )\n\n  const getInputProps: PropGetter<\"input\"> = useCallback(\n    (props = {}) => ({\n      ...visuallyHiddenAttributes,\n      ...ariaProps,\n      ...dataProps,\n      ...eventProps,\n      id,\n      form,\n      type: \"checkbox\",\n      name,\n      checked,\n      disabled,\n      readOnly,\n      required,\n      value,\n      ...props,\n      ref: mergeRefs(inputRef, ref, props.ref),\n      onChange: handlerAll(props.onChange, onChange),\n    }),\n    [\n      ariaProps,\n      checked,\n      dataProps,\n      disabled,\n      eventProps,\n      form,\n      id,\n      name,\n      onChange,\n      readOnly,\n      ref,\n      required,\n      value,\n    ],\n  )\n\n  const getButtonProps: PropGetter<\n    \"button\",\n    undefined,\n    Merge<HTMLProps<\"button\">, { \"aria-label\": string }>\n  > = useCallback(\n    (props = {}) => ({\n      ...dataProps,\n      type: \"button\",\n      \"aria-disabled\": ariaAttr(!interactive),\n      \"aria-label\": value?.toString() ?? t(\"Toggle button\"),\n      \"aria-pressed\": trulyChecked,\n      \"data-active\": dataAttr(active),\n      \"data-checked\": dataAttr(trulyChecked),\n      disabled,\n      tabIndex: interactive ? undefined : -1,\n      ...rest,\n      ...props,\n      onClick: handlerAll(rest.onClick, props.onClick, onClick),\n    }),\n    [\n      dataProps,\n      value,\n      trulyChecked,\n      active,\n      disabled,\n      rest,\n      onClick,\n      interactive,\n      t,\n    ],\n  )\n\n  return {\n    checked: trulyChecked,\n    setChecked,\n    getButtonProps,\n    getInputProps,\n  }\n}\n\nexport type UseToggleReturn = ReturnType<typeof useToggle>\n"],"mappings":";;;;;;;;;;;;;;;AAmDA,MAAa,aACX,QAA2B,EAAE,KAC1B;CACH,MAAM,EAAE,MAAMA,8BAAQ,SAAS;CAC/B,MAAM,EACJ,UAAU,eACV,UAAU,eACV,OAAO,YACP,UAAU,eACV,mBACEC,gDAAuB,IAAI,EAAE;CACjC,MAAM,EACJ,OAAO,EACL,IACA,KACA,MACA,MACA,QACA,SAAS,aACT,iBAAiB,OACjB,UACA,UACA,UACA,OACA,UAAU,aACV,GAAG,QAEL,WACA,WACA,eACEC,sCAA8C;EAChD,UAAU;EACV,UAAU;EACV,GAAG;EACJ,CAAC;CACF,MAAM,6BAAoC,KAAK;CAC/C,MAAM,CAAC,SAAS,cAAcC,gEAAqB;EACjD,cAAc;EACd,OAAO;EACP,UAAU;EACX,CAAC;CACF,MAAM,cAAc,EAAE,YAAY;CAClC,MAAM,aAAa,oDAAa,WAAW;CAC3C,MAAM,wCAA6B;AACjC,MAAI,CAAC,WACH,QAAO;MAEP,uDAAe,WAAW,GACtB,WAAW,SAAS,SAAS,GAAG,GAChC,UAAU;IAEf;EAAC;EAAY;EAAY;EAAS;EAAM,CAAC;AAE5C,KAAI,iEAA0B,MAAM,CAClC,SAAQ,KAAK,mDAAmD;AAElE,KAAI,MAAO,iBAAgB,QAAQ,IAAI,OAAO,WAAW;CAEzD,MAAM,uCAA4B;AAChC,MAAI,CAAC,YAAa;AAElB,cAAY,SAAS,CAAC,KAAK;AAC3B,kBAAgB,MAAM;IACrB;EAAC;EAAe;EAAY;EAAO;EAAY,CAAC;CAEnD,MAAM,mCACH,OAAsC;AACrC,aAAW,GAAG,OAAO,QAAQ;AAC7B,kBAAgB,MAAM;IAExB;EAAC;EAAe;EAAY;EAAM,CACnC;CAED,MAAMC,wCACH,UAAQ,EAAE,MAAM;EACf,GAAGC;EACH,GAAG;EACH,GAAG;EACH,GAAG;EACH;EACA;EACA,MAAM;EACN;EACA;EACA;EACA;EACA;EACA;EACA,GAAGC;EACH,KAAKC,sBAAU,UAAU,KAAKD,QAAM,IAAI;EACxC,4DAAqBA,QAAM,UAAU,SAAS;EAC/C,GACD;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CACF;AAkCD,QAAO;EACL,SAAS;EACT;EACA,wCA9BC,UAAQ,EAAE,MAAM;GACf,GAAG;GACH,MAAM;GACN,iEAA0B,CAAC,YAAY;GACvC,cAAc,OAAO,UAAU,IAAI,EAAE,gBAAgB;GACrD,gBAAgB;GAChB,+DAAwB,OAAO;GAC/B,gEAAyB,aAAa;GACtC;GACA,UAAU,cAAc,SAAY;GACpC,GAAG;GACH,GAAGA;GACH,2DAAoB,KAAK,SAASA,QAAM,SAAS,QAAQ;GAC1D,GACD;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,CACF;EAMC;EACD"}