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

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

{"version":3,"file":"use-password-input.cjs","names":["useFieldProps","useControllableState","useI18n","getInputProps: PropGetter<\"input\">","props","mergeRefs"],"sources":["../../../../src/components/password-input/use-password-input.tsx"],"sourcesContent":["\"use client\"\n\nimport type { MouseEvent } from \"react\"\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback } from \"react\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport { handlerAll, mergeRefs } from \"../../utils\"\nimport { useFieldProps } from \"../field\"\n\nexport interface UsePasswordInputProps extends HTMLProps<\"input\">, FieldProps {\n  /**\n   * Determines whether the password input is visible by default.\n   *\n   * @default false\n   */\n  defaultVisible?: boolean\n  /**\n   * Determines the visibility of the password input.\n   *\n   * @default false\n   */\n  visible?: boolean\n  /**\n   * Callback function that is triggered when the visibility of the password input changes.\n   */\n  onVisibleChange?: (visible: boolean) => void\n}\n\nexport const usePasswordInput = (props: UsePasswordInputProps = {}) => {\n  const {\n    props: {\n      defaultVisible,\n      disabled,\n      visible: visibleProp,\n      onVisibleChange,\n      ...rest\n    },\n    ariaProps,\n    dataProps,\n    eventProps,\n  } = useFieldProps(props)\n  const [visible, setVisible] = useControllableState({\n    defaultValue: defaultVisible,\n    value: visibleProp,\n    onChange: onVisibleChange,\n  })\n  const { t } = useI18n(\"passwordInput\")\n\n  const onChangeVisibility = useCallback(\n    (ev: MouseEvent<HTMLButtonElement>) => {\n      if (disabled || ev.button !== 0) return\n\n      ev.preventDefault()\n\n      setVisible((prev) => !prev)\n    },\n    [disabled, setVisible],\n  )\n\n  const getInputProps: PropGetter<\"input\"> = useCallback(\n    ({ ref, ...props } = {}) => ({\n      type: visible ? \"text\" : \"password\",\n      disabled,\n      ...ariaProps,\n      ...dataProps,\n      ...rest,\n      ...props,\n      ref: mergeRefs(ref, rest.ref),\n      onBlur: handlerAll(eventProps.onBlur, props.onBlur),\n      onFocus: handlerAll(eventProps.onFocus, props.onFocus),\n    }),\n    [visible, rest, disabled, dataProps, eventProps, ariaProps],\n  )\n\n  const getButtonProps: PropGetter<\"button\"> = useCallback(\n    (props = {}) => ({\n      type: \"button\",\n      \"aria-label\": t(\"Toggle password visibility\"),\n      disabled,\n      ...dataProps,\n      ...props,\n      onClick: handlerAll(props.onClick, onChangeVisibility),\n    }),\n    [onChangeVisibility, dataProps, disabled, t],\n  )\n\n  return {\n    setVisible,\n    visible,\n    getButtonProps,\n    getInputProps,\n  }\n}\n\nexport type UsePasswordInputReturn = ReturnType<typeof usePasswordInput>\n"],"mappings":";;;;;;;;;;;;;AA8BA,MAAa,oBAAoB,QAA+B,EAAE,KAAK;CACrE,MAAM,EACJ,OAAO,EACL,gBACA,UACA,SAAS,aACT,gBACA,GAAG,QAEL,WACA,WACA,eACEA,sCAAc,MAAM;CACxB,MAAM,CAAC,SAAS,cAAcC,gEAAqB;EACjD,cAAc;EACd,OAAO;EACP,UAAU;EACX,CAAC;CACF,MAAM,EAAE,MAAMC,8BAAQ,gBAAgB;CAEtC,MAAM,6CACH,OAAsC;AACrC,MAAI,YAAY,GAAG,WAAW,EAAG;AAEjC,KAAG,gBAAgB;AAEnB,cAAY,SAAS,CAAC,KAAK;IAE7B,CAAC,UAAU,WAAW,CACvB;CAED,MAAMC,wCACH,EAAE,IAAK,GAAGC,YAAU,EAAE,MAAM;EAC3B,MAAM,UAAU,SAAS;EACzB;EACA,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAGA;EACH,KAAKC,sBAAU,KAAK,KAAK,IAAI;EAC7B,0DAAmB,WAAW,QAAQD,QAAM,OAAO;EACnD,2DAAoB,WAAW,SAASA,QAAM,QAAQ;EACvD,GACD;EAAC;EAAS;EAAM;EAAU;EAAW;EAAY;EAAU,CAC5D;AAcD,QAAO;EACL;EACA;EACA,wCAdC,UAAQ,EAAE,MAAM;GACf,MAAM;GACN,cAAc,EAAE,6BAA6B;GAC7C;GACA,GAAG;GACH,GAAGA;GACH,2DAAoBA,QAAM,SAAS,mBAAmB;GACvD,GACD;GAAC;GAAoB;GAAW;GAAU;GAAE,CAC7C;EAMC;EACD"}