smarthr-ui 99.3.0 → 99.3.2

package/lib/components/Dialog/ModelessDialog/ModelessDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModelessDialog.js","sources":["../../../../src/components/Dialog/ModelessDialog/ModelessDialog.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type FC,\n  type KeyboardEvent,\n  type MouseEvent,\n  type PropsWithChildren,\n  type ReactNode,\n  type RefObject,\n  memo,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport Draggable from 'react-draggable'\nimport { type VariantProps, tv } from 'tailwind-variants'\n\nimport { useHandleEscape } from '../../../hooks/useHandleEscape'\nimport { useLatest } from '../../../hooks/useLatest'\nimport { Localizer, useIntl } from '../../../intl'\nimport { debounce } from '../../../libs/debounce'\nimport { dialogSize } from '../../../tailwind'\nimport { Button } from '../../Button'\nimport { Heading } from '../../Heading'\nimport { FaGripIcon, FaXmarkIcon } from '../../Icon'\nimport { Panel, type PanelElementProps } from '../../Panel'\nimport { DialogBody, type Props as DialogBodyProps } from '../DialogBody'\nimport { DialogOverlap } from '../DialogOverlap'\nimport { useDialogPortal } from '../useDialogPortal'\n\nimport type { DialogSize } from '../types'\n\ntype BaseProps = PropsWithChildren<{\n  /**\n   * ダイアログのタイトルの内容\n   */\n  heading: ReactNode\n  /**\n   * ダイアログのフッタ部分の内容\n   */\n  footer?: ReactNode\n  /**\n   * ダイアログが開かれているかどうかの真偽値\n   */\n  isOpen: boolean\n  /**\n   * 閉じるボタンを押下したときのハンドラ\n   */\n  onClickClose?: (e: MouseEvent<HTMLButtonElement>) => void\n  /**\n   * ダイアログが開いている状態で Escape キーを押下したときのハンドラ\n   */\n  onPressEscape?: () => void\n  /**\n   * @deprecated ダイアログの幅を指定する場合は、`width` ではなく `size` を使用してください。\n   * ダイアログの幅\n   */\n  width?: string | number\n  /**\n   * ダイアログの大きさ\n   */\n  size?: DialogSize\n  /**\n   * ダイアログの高さ\n   */\n  height?: string | number\n  /**\n   * ダイアログを開いたときの初期 top 位置\n   */\n  top?: string | number\n  /**\n   * ダイアログを開いたときの初期 left 位置\n   */\n  left?: string | number\n  /**\n   * ダイアログを開いたときの初期 right 位置\n   */\n  right?: string | number\n  /**\n   * ダイアログを開いたときの初期 bottom 位置\n   */\n  bottom?: string | number\n  /**\n   * ポータルの container となる DOM 要素を追加する親要素\n   */\n  portalParent?: HTMLElement | RefObject<HTMLElement>\n}>\ntype Props = BaseProps &\n  Omit<DialogBodyProps, keyof BaseProps> &\n  Omit<PanelElementProps, keyof BaseProps> &\n  Omit<VariantProps<typeof classNameGenerator>, keyof BaseProps>\n\nconst classNameGenerator = tv({\n  slots: {\n    overlap: 'shr-inset-[unset]',\n    wrapper:\n      'smarthr-ui-ModelessDialog shr-fixed shr-flex shr-max-h-[calc(100svh-theme(spacing[0.5]))] shr-max-w-[calc(100vw-theme(spacing[0.5]))] shr-flex-col',\n    headerEl: [\n      'smarthr-ui-ModelessDialog-header shr-border-b-shorthand shr-relative shr-flex shr-cursor-move shr-items-center shr-rounded-tl-l shr-rounded-tr-l shr-pe-1 shr-ps-1.5',\n      'hover:shr-bg-white-darken',\n      /* DialogHandlerにフォーカスが当たっているときは、headerもフォーカス状態のスタイルにする。 */\n      'has-[.smarthr-ui-ModelessDialog-handle:focus-visible]:shr-focus-indicator has-[.smarthr-ui-ModelessDialog-handle:focus-visible]:shr-bg-white-darken has-[.smarthr-ui-ModelessDialog-handle:focus-visible]:shr-transition-colors has-[.smarthr-ui-ModelessDialog-handle:focus-visible]:shr-duration-100 has-[.smarthr-ui-ModelessDialog-handle:focus-visible]:shr-ease-in-out',\n    ],\n    dialogHandler: [\n      'smarthr-ui-ModelessDialog-handle shr-absolute shr-inset-x-0 shr-bottom-0 shr-top-[2px] shr-m-auto shr-flex shr-justify-center shr-rounded-tl-s shr-rounded-tr-s shr-border-none shr-text-grey shr-transition-colors shr-duration-100 shr-ease-in-out',\n      'focus-visible:shr-focus-indicator--none shr-cursor-[inherit] shr-bg-[unset]',\n    ],\n    headingEl: ['shr-my-1 shr-me-1'],\n    closeButtonLayout: [\n      'shr-relative' /* DialogHandlerの上に出すためにスタッキングコンテキストを生成 */,\n      'shr-ml-auto shr-shrink-0',\n    ],\n    footerEl: 'smarthr-ui-ModelessDialog-footer shr-border-t-shorthand',\n  },\n  variants: {\n    size: {\n      XS: { wrapper: dialogSize.XS },\n      S: { wrapper: dialogSize.S },\n      M: { wrapper: dialogSize.M },\n      L: { wrapper: dialogSize.L },\n      XL: { wrapper: dialogSize.XL },\n      XXL: { wrapper: dialogSize.XXL },\n      FULL: { wrapper: dialogSize.FULL },\n    },\n    resizable: {\n      true: {\n        wrapper: 'shr-resize shr-overflow-auto',\n      },\n      false: {},\n    },\n  },\n})\n\nexport const ModelessDialog: FC<Props> = ({\n  heading,\n  children,\n  contentBgColor,\n  contentPadding,\n  footer,\n  isOpen,\n  onPressEscape,\n  resizable = false,\n  width,\n  size,\n  height,\n  top,\n  left,\n  right,\n  bottom,\n  portalParent,\n  className,\n  id,\n  onClickClose,\n  ...rest\n}) => {\n  const labelId = useId()\n  const lastFocusElementRef = useRef<HTMLElement | null>(null)\n  const { createPortal } = useDialogPortal(portalParent, id)\n  const { localize } = useIntl()\n\n  const classNames = useMemo(() => {\n    const { overlap, wrapper, headerEl, headingEl, dialogHandler, closeButtonLayout, footerEl } =\n      classNameGenerator()\n\n    return {\n      overlap: overlap({ className }),\n      wrapper: wrapper({ size, resizable }),\n      header: headerEl(),\n      heading: headingEl(),\n      dialogHandler: dialogHandler(),\n      closeButtonLayout: closeButtonLayout(),\n      footer: footerEl(),\n    }\n  }, [className, size, resizable])\n\n  const wrapperRef = useRef<HTMLDivElement>(null)\n  const focusTargetRef = useRef<HTMLDivElement>(null)\n\n  const [wrapperPosition, setWrapperPosition] = useState<DOMRect | undefined>(undefined)\n  const [debouncedLiveRegionText, setDebouncedLiveRegionText] = useState<string>('')\n  const [centering, setCentering] = useState<{\n    top?: number\n    left?: number\n  }>({})\n  const [position, setPosition] = useState<{ x: number; y: number }>({\n    x: 0,\n    y: 0,\n  })\n  const [draggableBounds, setDraggableBounds] = useState(Draggable.defaultProps.bounds)\n\n  const positionStyle = useMemo(\n    () => ({\n      top: centering.top ?? top,\n      left: centering.left ?? left,\n      right,\n      bottom,\n      width: size ? undefined : width,\n      height,\n    }),\n    [centering, top, left, right, bottom, width, height, size],\n  )\n\n  const latest = useLatest({ isOpen, onClickClose, onPressEscape })\n\n  const functions = useMemo(\n    () => ({\n      debounceLiveRegionText: debounce(setDebouncedLiveRegionText, 600),\n      handleArrowKeyDown: (e: KeyboardEvent) => {\n        if (!latest.isOpen || document.activeElement !== e.currentTarget) {\n          return\n        }\n\n        const movingDistance = 20\n\n        switch (e.key) {\n          case 'ArrowUp':\n            setPosition((prev) => ({\n              x: prev.x,\n              y: prev.y - movingDistance,\n            }))\n            e.preventDefault()\n            break\n          case 'ArrowDown':\n            setPosition((prev) => ({\n              x: prev.x,\n              y: prev.y + movingDistance,\n            }))\n            e.preventDefault()\n            break\n          case 'ArrowLeft':\n            setPosition((prev) => ({\n              x: prev.x - movingDistance,\n              y: prev.y,\n            }))\n            e.preventDefault()\n            break\n          case 'ArrowRight':\n            setPosition((prev) => ({\n              x: prev.x + movingDistance,\n              y: prev.y,\n            }))\n            e.preventDefault()\n            break\n        }\n      },\n      handleClickClose: (e: MouseEvent<HTMLButtonElement>) => {\n        lastFocusElementRef.current?.focus()\n        latest.onClickClose?.(e)\n      },\n      handlePressEscape: () => {\n        lastFocusElementRef.current?.focus()\n        latest.onPressEscape?.()\n      },\n      handleDragStart: (_: any, data: { x: number; y: number }) => setPosition(data),\n      handleDrag: (_: any, data: { deltaX: number; deltaY: number }) => {\n        setPosition((prev) => ({\n          x: prev.x + data.deltaX,\n          y: prev.y + data.deltaY,\n        }))\n      },\n    }),\n    [latest],\n  )\n\n  useEffect(() => {\n    if (!wrapperPosition) {\n      setDebouncedLiveRegionText('')\n      return\n    }\n\n    const txt = localize(\n      {\n        id: 'smarthr-ui/ModelessDialog/dialogHandlerLiveRegionText',\n        defaultText: '上から{top}px、左から{left}px',\n      },\n      {\n        top: Math.trunc(wrapperPosition.top).toString(),\n        left: Math.trunc(wrapperPosition.left).toString(),\n      },\n    )\n\n    functions.debounceLiveRegionText(txt)\n  }, [localize, wrapperPosition, functions])\n\n  useEffect(() => {\n    if (wrapperRef.current instanceof Element) {\n      setWrapperPosition(wrapperRef.current.getBoundingClientRect())\n    }\n  }, [position])\n\n  useEffect(() => {\n    // 中央寄せの座標計算を行う\n    if (!wrapperRef.current || !isOpen) {\n      return\n    }\n\n    const isXCenter = left === undefined && right === undefined\n    const isYCenter = top === undefined && bottom === undefined\n\n    if (isXCenter || isYCenter) {\n      const rect = wrapperRef.current.getBoundingClientRect()\n\n      setCentering({\n        top: isYCenter ? Math.max(0, window.innerHeight / 2 - rect.height / 2) : undefined,\n        left: isXCenter ? Math.max(0, window.innerWidth / 2 - rect.width / 2) : undefined,\n      })\n    }\n  }, [bottom, isOpen, left, right, top])\n\n  useEffect(() => {\n    if (!isOpen) return\n\n    if (centering.top) {\n      setDraggableBounds({ top: centering.top * -1 })\n\n      return\n    }\n\n    if (wrapperRef.current) {\n      const rect = wrapperRef.current.getBoundingClientRect()\n\n      setDraggableBounds({ top: rect.top * -1 })\n    }\n  }, [isOpen, centering.top])\n\n  useEffect(() => {\n    if (isOpen) {\n      setPosition({ x: 0, y: 0 })\n      focusTargetRef.current?.focus()\n    }\n  }, [isOpen])\n\n  useHandleEscape(isOpen ? functions.handlePressEscape : undefined)\n\n  useEffect(() => {\n    const focusHandler = (e: FocusEvent) => {\n      // e.target(現在フォーカスがあたっている要素)がModeless dialog外の要素であれば、lastFocusElementRefに代入する\n      if (e.target instanceof HTMLElement && !wrapperRef?.current?.contains(e.target)) {\n        lastFocusElementRef.current = e.target\n      }\n    }\n\n    document.addEventListener('focus', focusHandler, true)\n\n    return () => document.removeEventListener('focus', focusHandler, true)\n  }, [])\n\n  return createPortal(\n    <DialogOverlap isOpen={isOpen} className={classNames.overlap} as=\"section\">\n      <Draggable\n        {...Draggable.defaultProps}\n        handle=\".smarthr-ui-ModelessDialog-handle\"\n        onStart={functions.handleDragStart}\n        onDrag={functions.handleDrag}\n        position={position}\n        bounds={draggableBounds ?? false}\n        nodeRef={wrapperRef}\n      >\n        <Panel\n          {...rest}\n          ref={wrapperRef}\n          role=\"dialog\"\n          aria-labelledby={labelId}\n          radius=\"m\"\n          layer={3}\n          overflow=\"auto\"\n          className={classNames.wrapper}\n          style={positionStyle}\n        >\n          {/* eslint-disable-next-line smarthr/a11y-scroller-has-tabindex -- dummy element for focus management. */}\n          <div tabIndex={-1} ref={focusTargetRef} />\n          <div className={classNames.header}>\n            <Handler\n              handleArrowKeyDown={functions.handleArrowKeyDown}\n              className={classNames.dialogHandler}\n            />\n            <div id={labelId} className={classNames.heading}>\n              {/* eslint-disable-next-line smarthr/a11y-heading-in-sectioning-content */}\n              <Heading>{heading}</Heading>\n            </div>\n            <CloseButton\n              handleClick={functions.handleClickClose}\n              className={classNames.closeButtonLayout}\n            />\n          </div>\n          <DialogBody\n            contentBgColor={contentBgColor}\n            contentPadding={contentPadding}\n            className=\"smarthr-ui-ModelessDialog-content shr-overscroll-contain\"\n          >\n            {children}\n          </DialogBody>\n          {footer && <div className={classNames.footer}>{footer}</div>}\n          <LiveRegion regionText={debouncedLiveRegionText} />\n        </Panel>\n      </Draggable>\n    </DialogOverlap>,\n  )\n}\n\nconst Handler = memo<{\n  className: string\n  handleArrowKeyDown: (e: KeyboardEvent) => void\n}>(({ handleArrowKeyDown, ...rest }) => {\n  const { localize } = useIntl()\n\n  return (\n    <>\n      <button\n        {...rest}\n        type=\"button\"\n        aria-label={localize({\n          id: 'smarthr-ui/ModelessDialog/dialogHandlerAriaLabel',\n          defaultText: 'ダイアログの位置',\n        })}\n        aria-roledescription={localize({\n          id: 'smarthr-ui/ModelessDialog/dialogHandlerAriaRoleDescription',\n          defaultText: 'ドラッグ可能',\n        })}\n        aria-describedby=\"handler-description\"\n        onKeyDown={handleArrowKeyDown}\n      >\n        <FaGripIcon />\n      </button>\n      <div className=\"shr-hidden\" id=\"handler-description\">\n        {localize({\n          id: 'smarthr-ui/ModelessDialog/dialogHandlerDescription',\n          defaultText: '矢印キーを押して上下左右に移動できます',\n        })}\n      </div>\n    </>\n  )\n})\n\nconst LiveRegion = ({ regionText }: { regionText: string | undefined }) => (\n  <div\n    role=\"status\"\n    className=\"shr-fixed -shr-m-px shr-h-px shr-w-px shr-overflow-hidden shr-whitespace-nowrap\"\n  >\n    {regionText}\n  </div>\n)\n\nconst CloseButton = memo<{\n  className: string\n  handleClick: (e: MouseEvent<HTMLButtonElement>) => void\n}>(({ handleClick, className }) => (\n  <div className={className}>\n    <Button\n      type=\"button\"\n      size=\"S\"\n      onClick={handleClick}\n      className=\"smarthr-ui-ModelessDialog-closeButton\"\n    >\n      <FaXmarkIcon\n        alt={<Localizer id=\"smarthr-ui/ModelessDialog/closeButtonIconAlt\" defaultText=\"閉じる\" />}\n      />\n    </Button>\n  </div>\n))\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8FA;AACE;AACE;AACA;AAEA;;;;;AAKC;AACD;;;AAGC;;AAED;AACE;;AAED;AACD;AACD;AACD;AACE;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACD;AACD;AACE;AACE;AACD;AACD;AACD;AACF;AACF;;AAwBC;AACA;;AAEA;AAEA;AACE;;AAIE;;;;;;;;;AAUJ;AACA;;;;AAQA;AACE;AACA;AACD;AACD;AAEA;AAEI;AACA;;;;;AAKD;AAIH;AAEA;AAEI;AACA;AACE;;;;AAMA;AACE;AACE;;AAEE;AACD;;;AAGH;AACE;;AAEE;AACD;;;AAGH;AACE;AACE;;AAED;;;AAGH;AACE;AACE;;AAED;;;;;AAKP;AACE;AACA;;;AAGA;AACA;;;AAGF;AACE;AACE;AACA;AACD;;AAEJ;;;;;;;AAYG;AACA;;;;AAKD;AAGH;;;AAIA;;;AAGF;;;;;;;;AAWE;;AAGE;;;AAGC;;AAEL;;AAGE;;AAEA;AACE;;;AAKF;;AAGE;;;;;;AAOA;;AAEJ;AAEA;;AAGE;;AAEE;AACE;;AAEJ;;AAIA;;;AAsDJ;AAEA;AAIE;;AAQQ;AACA;;AAGA;AACA;;AASA;AACA;;AAKV;AAEA;AASA;;"}
+{"version":3,"file":"ModelessDialog.js","sources":["../../../../src/components/Dialog/ModelessDialog/ModelessDialog.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type FC,\n  type KeyboardEvent,\n  type MouseEvent,\n  type PropsWithChildren,\n  type ReactNode,\n  type RefObject,\n  memo,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport Draggable from 'react-draggable'\nimport { type VariantProps, tv } from 'tailwind-variants'\n\nimport { useHandleEscape } from '../../../hooks/useHandleEscape'\nimport { useLatest } from '../../../hooks/useLatest'\nimport { Localizer, useIntl } from '../../../intl'\nimport { debounce } from '../../../libs/debounce'\nimport { dialogSize } from '../../../tailwind'\nimport { Button } from '../../Button'\nimport { Heading } from '../../Heading'\nimport { FaGripIcon, FaXmarkIcon } from '../../Icon'\nimport { Panel, type PanelElementProps } from '../../Panel'\nimport { DialogBody, type Props as DialogBodyProps } from '../DialogBody'\nimport { DialogOverlap } from '../DialogOverlap'\nimport { useDialogPortal } from '../useDialogPortal'\n\nimport type { DialogSize } from '../types'\n\ntype BaseProps = PropsWithChildren<{\n  /**\n   * ダイアログのタイトルの内容\n   */\n  heading: ReactNode\n  /**\n   * ダイアログのフッタ部分の内容\n   */\n  footer?: ReactNode\n  /**\n   * ダイアログが開かれているかどうかの真偽値\n   */\n  isOpen: boolean\n  /**\n   * 閉じるボタンを押下したときのハンドラ\n   */\n  onClickClose?: (e: MouseEvent<HTMLButtonElement>) => void\n  /**\n   * ダイアログが開いている状態で Escape キーを押下したときのハンドラ\n   */\n  onPressEscape?: () => void\n  /**\n   * @deprecated ダイアログの幅を指定する場合は、`width` ではなく `size` を使用してください。\n   * ダイアログの幅\n   */\n  width?: string | number\n  /**\n   * ダイアログの大きさ\n   */\n  size?: DialogSize\n  /**\n   * ダイアログの高さ\n   */\n  height?: string | number\n  /**\n   * ダイアログを開いたときの初期 top 位置\n   */\n  top?: string | number\n  /**\n   * ダイアログを開いたときの初期 left 位置\n   */\n  left?: string | number\n  /**\n   * ダイアログを開いたときの初期 right 位置\n   */\n  right?: string | number\n  /**\n   * ダイアログを開いたときの初期 bottom 位置\n   */\n  bottom?: string | number\n  /**\n   * ポータルの container となる DOM 要素を追加する親要素\n   */\n  portalParent?: HTMLElement | RefObject<HTMLElement>\n}>\ntype Props = BaseProps &\n  Omit<DialogBodyProps, keyof BaseProps> &\n  Omit<PanelElementProps, keyof BaseProps> &\n  Omit<VariantProps<typeof classNameGenerator>, keyof BaseProps>\n\nconst classNameGenerator = tv({\n  slots: {\n    overlap: 'shr-inset-[unset]',\n    wrapper:\n      'smarthr-ui-ModelessDialog shr-fixed shr-flex shr-max-h-[calc(100svh-theme(spacing[0.5]))] shr-max-w-[calc(100vw-theme(spacing[0.5]))] shr-flex-col',\n    headerEl: [\n      'smarthr-ui-ModelessDialog-header shr-border-b-shorthand shr-relative shr-flex shr-cursor-move shr-items-center shr-rounded-tl-l shr-rounded-tr-l shr-pe-1 shr-ps-1.5',\n      'hover:shr-bg-white-darken',\n      /* DialogHandlerにフォーカスが当たっているときは、headerもフォーカス状態のスタイルにする。 */\n      'has-[.smarthr-ui-ModelessDialog-handle:focus-visible]:shr-focus-indicator has-[.smarthr-ui-ModelessDialog-handle:focus-visible]:shr-bg-white-darken has-[.smarthr-ui-ModelessDialog-handle:focus-visible]:shr-transition-colors has-[.smarthr-ui-ModelessDialog-handle:focus-visible]:shr-duration-100 has-[.smarthr-ui-ModelessDialog-handle:focus-visible]:shr-ease-in-out',\n    ],\n    dialogHandler: [\n      'smarthr-ui-ModelessDialog-handle shr-absolute shr-inset-x-0 shr-bottom-0 shr-top-[2px] shr-m-auto shr-flex shr-justify-center shr-rounded-tl-s shr-rounded-tr-s shr-border-none shr-text-grey shr-transition-colors shr-duration-100 shr-ease-in-out',\n      'focus-visible:shr-focus-indicator--none shr-cursor-[inherit] shr-bg-[unset]',\n    ],\n    headingEl: ['shr-my-1 shr-me-1'],\n    closeButtonLayout: [\n      'shr-relative' /* DialogHandlerの上に出すためにスタッキングコンテキストを生成 */,\n      'shr-ml-auto shr-shrink-0',\n    ],\n    footerEl: 'smarthr-ui-ModelessDialog-footer shr-border-t-shorthand',\n  },\n  variants: {\n    size: {\n      XS: { wrapper: dialogSize.XS },\n      S: { wrapper: dialogSize.S },\n      M: { wrapper: dialogSize.M },\n      L: { wrapper: dialogSize.L },\n      XL: { wrapper: dialogSize.XL },\n      XXL: { wrapper: dialogSize.XXL },\n      FULL: { wrapper: dialogSize.FULL },\n    },\n    resizable: {\n      true: {\n        wrapper: 'shr-resize shr-overflow-auto',\n      },\n      false: {},\n    },\n  },\n})\n\nexport const ModelessDialog: FC<Props> = ({\n  heading,\n  children,\n  contentBgColor,\n  contentPadding,\n  footer,\n  isOpen,\n  onPressEscape,\n  resizable = false,\n  width,\n  size,\n  height,\n  top,\n  left,\n  right,\n  bottom,\n  portalParent,\n  className,\n  id,\n  onClickClose,\n  ...rest\n}) => {\n  const labelId = useId()\n  const lastFocusElementRef = useRef<HTMLElement | null>(null)\n  const { createPortal } = useDialogPortal(portalParent, id)\n  const { localize } = useIntl()\n\n  const classNames = useMemo(() => {\n    const { overlap, wrapper, headerEl, headingEl, dialogHandler, closeButtonLayout, footerEl } =\n      classNameGenerator()\n\n    return {\n      overlap: overlap({ className }),\n      wrapper: wrapper({ size, resizable }),\n      header: headerEl(),\n      heading: headingEl(),\n      dialogHandler: dialogHandler(),\n      closeButtonLayout: closeButtonLayout(),\n      footer: footerEl(),\n    }\n  }, [className, size, resizable])\n\n  const wrapperRef = useRef<HTMLDivElement>(null)\n  const focusTargetRef = useRef<HTMLDivElement>(null)\n\n  const [wrapperPosition, setWrapperPosition] = useState<DOMRect | undefined>(undefined)\n  const [debouncedLiveRegionText, setDebouncedLiveRegionText] = useState<string>('')\n  const [centering, setCentering] = useState<{\n    top?: number\n    left?: number\n  }>({})\n  const [position, setPosition] = useState<{ x: number; y: number }>({\n    x: 0,\n    y: 0,\n  })\n  const [draggableBounds, setDraggableBounds] = useState(Draggable.defaultProps.bounds)\n\n  const positionStyle = useMemo(\n    () => ({\n      top: centering.top ?? top,\n      left: centering.left ?? left,\n      right,\n      bottom,\n      width: size ? undefined : width,\n      height,\n    }),\n    [centering, top, left, right, bottom, width, height, size],\n  )\n\n  const latest = useLatest({ isOpen, onClickClose, onPressEscape })\n\n  const functions = useMemo(\n    () => ({\n      debounceLiveRegionText: debounce(setDebouncedLiveRegionText, 600),\n      handleArrowKeyDown: (e: KeyboardEvent) => {\n        if (!latest.isOpen || document.activeElement !== e.currentTarget) {\n          return\n        }\n\n        const movingDistance = 20\n\n        switch (e.key) {\n          case 'ArrowUp':\n            setPosition((prev) => ({\n              x: prev.x,\n              y: prev.y - movingDistance,\n            }))\n            e.preventDefault()\n            break\n          case 'ArrowDown':\n            setPosition((prev) => ({\n              x: prev.x,\n              y: prev.y + movingDistance,\n            }))\n            e.preventDefault()\n            break\n          case 'ArrowLeft':\n            setPosition((prev) => ({\n              x: prev.x - movingDistance,\n              y: prev.y,\n            }))\n            e.preventDefault()\n            break\n          case 'ArrowRight':\n            setPosition((prev) => ({\n              x: prev.x + movingDistance,\n              y: prev.y,\n            }))\n            e.preventDefault()\n            break\n        }\n      },\n      handleClickClose: (e: MouseEvent<HTMLButtonElement>) => {\n        lastFocusElementRef.current?.focus()\n        latest.onClickClose?.(e)\n      },\n      handlePressEscape: () => {\n        lastFocusElementRef.current?.focus()\n        latest.onPressEscape?.()\n      },\n      handleDragStart: (_: any, data: { x: number; y: number }) => setPosition(data),\n      handleDrag: (_: any, data: { deltaX: number; deltaY: number }) => {\n        setPosition((prev) => ({\n          x: prev.x + data.deltaX,\n          y: prev.y + data.deltaY,\n        }))\n      },\n    }),\n    [latest],\n  )\n\n  useEffect(() => {\n    if (!wrapperPosition) {\n      setDebouncedLiveRegionText('')\n      return functions.debounceLiveRegionText.cancel\n    }\n\n    const txt = localize(\n      {\n        id: 'smarthr-ui/ModelessDialog/dialogHandlerLiveRegionText',\n        defaultText: '上から{top}px、左から{left}px',\n      },\n      {\n        top: Math.trunc(wrapperPosition.top).toString(),\n        left: Math.trunc(wrapperPosition.left).toString(),\n      },\n    )\n\n    functions.debounceLiveRegionText(txt)\n\n    return functions.debounceLiveRegionText.cancel\n  }, [localize, wrapperPosition, functions])\n\n  useEffect(() => {\n    if (wrapperRef.current instanceof Element) {\n      setWrapperPosition(wrapperRef.current.getBoundingClientRect())\n    }\n  }, [position])\n\n  useEffect(() => {\n    // 中央寄せの座標計算を行う\n    if (!wrapperRef.current || !isOpen) {\n      return\n    }\n\n    const isXCenter = left === undefined && right === undefined\n    const isYCenter = top === undefined && bottom === undefined\n\n    if (isXCenter || isYCenter) {\n      const rect = wrapperRef.current.getBoundingClientRect()\n\n      setCentering({\n        top: isYCenter ? Math.max(0, window.innerHeight / 2 - rect.height / 2) : undefined,\n        left: isXCenter ? Math.max(0, window.innerWidth / 2 - rect.width / 2) : undefined,\n      })\n    }\n  }, [bottom, isOpen, left, right, top])\n\n  useEffect(() => {\n    if (!isOpen) return\n\n    if (centering.top) {\n      setDraggableBounds({ top: centering.top * -1 })\n\n      return\n    }\n\n    if (wrapperRef.current) {\n      const rect = wrapperRef.current.getBoundingClientRect()\n\n      setDraggableBounds({ top: rect.top * -1 })\n    }\n  }, [isOpen, centering.top])\n\n  useEffect(() => {\n    if (isOpen) {\n      setPosition({ x: 0, y: 0 })\n      focusTargetRef.current?.focus()\n    }\n  }, [isOpen])\n\n  useHandleEscape(isOpen ? functions.handlePressEscape : undefined)\n\n  useEffect(() => {\n    const focusHandler = (e: FocusEvent) => {\n      // e.target(現在フォーカスがあたっている要素)がModeless dialog外の要素であれば、lastFocusElementRefに代入する\n      if (e.target instanceof HTMLElement && !wrapperRef?.current?.contains(e.target)) {\n        lastFocusElementRef.current = e.target\n      }\n    }\n\n    document.addEventListener('focus', focusHandler, true)\n\n    return () => document.removeEventListener('focus', focusHandler, true)\n  }, [])\n\n  return createPortal(\n    <DialogOverlap isOpen={isOpen} className={classNames.overlap} as=\"section\">\n      <Draggable\n        {...Draggable.defaultProps}\n        handle=\".smarthr-ui-ModelessDialog-handle\"\n        onStart={functions.handleDragStart}\n        onDrag={functions.handleDrag}\n        position={position}\n        bounds={draggableBounds ?? false}\n        nodeRef={wrapperRef}\n      >\n        <Panel\n          {...rest}\n          ref={wrapperRef}\n          role=\"dialog\"\n          aria-labelledby={labelId}\n          radius=\"m\"\n          layer={3}\n          overflow=\"auto\"\n          className={classNames.wrapper}\n          style={positionStyle}\n        >\n          {/* eslint-disable-next-line smarthr/a11y-scroller-has-tabindex -- dummy element for focus management. */}\n          <div tabIndex={-1} ref={focusTargetRef} />\n          <div className={classNames.header}>\n            <Handler\n              handleArrowKeyDown={functions.handleArrowKeyDown}\n              className={classNames.dialogHandler}\n            />\n            <div id={labelId} className={classNames.heading}>\n              {/* eslint-disable-next-line smarthr/a11y-heading-in-sectioning-content */}\n              <Heading>{heading}</Heading>\n            </div>\n            <CloseButton\n              handleClick={functions.handleClickClose}\n              className={classNames.closeButtonLayout}\n            />\n          </div>\n          <DialogBody\n            contentBgColor={contentBgColor}\n            contentPadding={contentPadding}\n            className=\"smarthr-ui-ModelessDialog-content shr-overscroll-contain\"\n          >\n            {children}\n          </DialogBody>\n          {footer && <div className={classNames.footer}>{footer}</div>}\n          <LiveRegion regionText={debouncedLiveRegionText} />\n        </Panel>\n      </Draggable>\n    </DialogOverlap>,\n  )\n}\n\nconst Handler = memo<{\n  className: string\n  handleArrowKeyDown: (e: KeyboardEvent) => void\n}>(({ handleArrowKeyDown, ...rest }) => {\n  const { localize } = useIntl()\n\n  return (\n    <>\n      <button\n        {...rest}\n        type=\"button\"\n        aria-label={localize({\n          id: 'smarthr-ui/ModelessDialog/dialogHandlerAriaLabel',\n          defaultText: 'ダイアログの位置',\n        })}\n        aria-roledescription={localize({\n          id: 'smarthr-ui/ModelessDialog/dialogHandlerAriaRoleDescription',\n          defaultText: 'ドラッグ可能',\n        })}\n        aria-describedby=\"handler-description\"\n        onKeyDown={handleArrowKeyDown}\n      >\n        <FaGripIcon />\n      </button>\n      <div className=\"shr-hidden\" id=\"handler-description\">\n        {localize({\n          id: 'smarthr-ui/ModelessDialog/dialogHandlerDescription',\n          defaultText: '矢印キーを押して上下左右に移動できます',\n        })}\n      </div>\n    </>\n  )\n})\n\nconst LiveRegion = ({ regionText }: { regionText: string | undefined }) => (\n  <div\n    role=\"status\"\n    className=\"shr-fixed -shr-m-px shr-h-px shr-w-px shr-overflow-hidden shr-whitespace-nowrap\"\n  >\n    {regionText}\n  </div>\n)\n\nconst CloseButton = memo<{\n  className: string\n  handleClick: (e: MouseEvent<HTMLButtonElement>) => void\n}>(({ handleClick, className }) => (\n  <div className={className}>\n    <Button\n      type=\"button\"\n      size=\"S\"\n      onClick={handleClick}\n      className=\"smarthr-ui-ModelessDialog-closeButton\"\n    >\n      <FaXmarkIcon\n        alt={<Localizer id=\"smarthr-ui/ModelessDialog/closeButtonIconAlt\" defaultText=\"閉じる\" />}\n      />\n    </Button>\n  </div>\n))\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8FA;AACE;AACE;AACA;AAEA;;;;;AAKC;AACD;;;AAGC;;AAED;AACE;;AAED;AACD;AACD;AACD;AACE;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACD;AACD;AACE;AACE;AACD;AACD;AACD;AACF;AACF;;AAwBC;AACA;;AAEA;AAEA;AACE;;AAIE;;;;;;;;;AAUJ;AACA;;;;AAQA;AACE;AACA;AACD;AACD;AAEA;AAEI;AACA;;;;;AAKD;AAIH;AAEA;AAEI;AACA;AACE;;;;AAMA;AACE;AACE;;AAEE;AACD;;;AAGH;AACE;;AAEE;AACD;;;AAGH;AACE;AACE;;AAED;;;AAGH;AACE;AACE;;AAED;;;;;AAKP;AACE;AACA;;;AAGA;AACA;;;AAGF;AACE;AACE;AACA;AACD;;AAEJ;;;;AAOC;;;AAKE;AACA;;;;AAKD;AAGH;AAEA;;;AAIA;;;AAGF;;;;;;;;AAWE;;AAGE;;;AAGC;;AAEL;;AAGE;;AAEA;AACE;;;AAKF;;AAGE;;;;;;AAOA;;AAEJ;AAEA;;AAGE;;AAEE;AACE;;AAEJ;;AAIA;;;AAsDJ;AAEA;AAIE;;AAQQ;AACA;;AAGA;AACA;;AASA;AACA;;AAKV;AAEA;AASA;;"}

package/lib/components/DropZone/DropZone.cjs

@@ -71,7 +71,7 @@ const DropZone = React.forwardRef(({ children, onSelectFiles, multiple = true, d
             fileRef.current.click();
         },
     }), [latest]);
-    React.useImperativeHandle(ref, () => fileRef.current);
+    React.useImperativeHandle(ref, () => fileRef.current, []);
     return (
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
     jsxRuntime.jsxs("div", { onDrop: functions.handleDrop, onDragOver: functions.handleDragOver, onDragLeave: functions.handleDragLeave, className: classNames.wrapper, "data-files-dragged-over": filesDraggedOver || undefined, children: [children, jsxRuntime.jsx(SelectButton, { label: selectButtonLabel, disabled: disabled, error: error, handleClick: functions.handleClickButton, className: classNames.button }), jsxRuntime.jsx(components_VisuallyHiddenText_VisuallyHiddenText.VisuallyHiddenText, { children: jsxRuntime.jsx("input", { ...rest, ref: fileRef, type: "file", multiple: multiple, disabled: disabled, tabIndex: -1, "aria-invalid": error || undefined, onChange: functions.handleChange, "data-smarthr-ui-input": "true" }) })] }));

package/lib/components/DropZone/DropZone.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DropZone.cjs","sources":["../../../src/components/DropZone/DropZone.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ChangeEvent,\n  type ComponentPropsWithRef,\n  type DragEvent,\n  type PropsWithChildren,\n  forwardRef,\n  memo,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useLatest } from '../../hooks/useLatest'\nimport { Localizer } from '../../intl'\nimport { Button } from '../Button'\nimport { FaFolderOpenIcon } from '../Icon'\nimport { VisuallyHiddenText } from '../VisuallyHiddenText'\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: [\n      'smarthr-ui-DropZone',\n      'shr-relative',\n      'shr-border-shorthand shr-flex shr-flex-col shr-items-center shr-justify-center shr-bg-column shr-p-2.5',\n      'has-[.smarthr-ui-DropZone-Button[aria-disabled]]:shr-cursor-not-allowed',\n      '[&:not([data-files-dragged-over])]:shr-border-dashed',\n      'data-[files-dragged-over]:shr-border-main',\n    ],\n    button: ['smarthr-ui-DropZone-Button', 'data-[error]:shr-border-danger'],\n  },\n})\n\ntype BaseProps = PropsWithChildren<{\n  /**\n   * ボタンまたはドラッグ&ドロップでファイルが追加された時に発火するコールバック関数\n   */\n  onSelectFiles: (\n    e: DragEvent<HTMLElement> | ChangeEvent<HTMLInputElement>,\n    files: FileList | null,\n  ) => void\n  /**\n   * 許可するファイル型を表す1つ以上の固有ファイル型指定子\n   * <b>（ドラッグ&ドロップの挙動には影響しません）</b>\n   */\n  accept?: string\n  /** 複数ファイルを選択できるかどうか */\n  multiple?: boolean\n  name?: string\n  disabled?: boolean\n  /** フォームにエラーがあるかどうか */\n  error?: boolean\n  /** ファイル選択ボタンのラベル */\n  selectButtonLabel?: string\n}>\ntype Props = BaseProps & Omit<ComponentPropsWithRef<'div'>, keyof BaseProps>\n\nconst overrideEventDefault = (e: DragEvent<HTMLElement>) => {\n  e.preventDefault()\n  e.stopPropagation()\n}\n\nexport const DropZone = forwardRef<HTMLInputElement, Props>(\n  (\n    {\n      children,\n      onSelectFiles,\n      multiple = true,\n      disabled,\n      error,\n      selectButtonLabel,\n      className,\n      ...rest\n    },\n    ref,\n  ) => {\n    const fileRef = useRef<HTMLInputElement>(null)\n    const [filesDraggedOver, setFilesDraggedOver] = useState(false)\n\n    const classNames = useMemo(() => {\n      const { wrapper, button } = classNameGenerator()\n      return {\n        wrapper: wrapper({ className }),\n        button: button(),\n      }\n    }, [className])\n\n    const latest = useLatest({ onSelectFiles })\n\n    const functions = useMemo(\n      () => ({\n        handleDrop: (e: DragEvent<HTMLElement>) => {\n          overrideEventDefault(e)\n          setFilesDraggedOver(false)\n\n          if (e.dataTransfer.types.includes('Files')) {\n            if (fileRef.current) {\n              fileRef.current.files = e.dataTransfer.files\n            }\n            latest.onSelectFiles(e, e.dataTransfer.files)\n          }\n        },\n        handleDragOver: (e: DragEvent<HTMLElement>) => {\n          overrideEventDefault(e)\n          setFilesDraggedOver(true)\n        },\n        handleDragLeave: () => {\n          setFilesDraggedOver(false)\n        },\n        handleChange: (e: ChangeEvent<HTMLInputElement>) => {\n          latest.onSelectFiles(e, e.target.files)\n        },\n        handleClickButton: () => {\n          fileRef.current!.click()\n        },\n      }),\n      [latest],\n    )\n\n    useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(\n      ref,\n      () => fileRef.current,\n    )\n\n    return (\n      // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n      <div\n        onDrop={functions.handleDrop}\n        onDragOver={functions.handleDragOver}\n        onDragLeave={functions.handleDragLeave}\n        className={classNames.wrapper}\n        data-files-dragged-over={filesDraggedOver || undefined}\n      >\n        {children}\n        <SelectButton\n          label={selectButtonLabel}\n          disabled={disabled}\n          error={error}\n          handleClick={functions.handleClickButton}\n          className={classNames.button}\n        />\n        <VisuallyHiddenText>\n          {/* TODO: この input にアクセシブルネームが設定されていない。VisuallyHiddenText で視覚的に隠されているが aria-hidden ではないためアクセシビリティツリーに残る。aria-label 等で適切なラベルを付与する必要がある */}\n          {/* eslint-disable-next-line smarthr/a11y-input-in-form-control */}\n          <input\n            {...rest}\n            ref={fileRef}\n            type=\"file\"\n            multiple={multiple}\n            disabled={disabled}\n            tabIndex={-1}\n            aria-invalid={error || undefined}\n            onChange={functions.handleChange}\n            data-smarthr-ui-input=\"true\"\n          />\n        </VisuallyHiddenText>\n      </div>\n    )\n  },\n)\n\nconst SelectButton = memo<{\n  label?: string\n  disabled?: boolean\n  error?: boolean\n  handleClick: () => void\n  className: string\n}>(({ label, disabled, error, handleClick, className }) => (\n  <Button\n    prefix={<FaFolderOpenIcon />}\n    disabled={disabled}\n    data-error={error || undefined}\n    onClick={handleClick}\n    className={className}\n  >\n    {label || <Localizer id=\"smarthr-ui/DropZone/selectButtonLabel\" defaultText=\"ファイルを選択\" />}\n  </Button>\n))\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAsBA;AACE;AACE;;;;;;;AAOC;AACD;AACD;AACF;AA0BD;;;AAGA;AAEO;AAcH;;AAGA;;;AAGI;;;AAGJ;;AAIA;AAEI;;;;AAKI;;;;;;AAMJ;;;;;;;AAOA;;;;AAIE;;AAEH;;;;;AA2CL;AAGF;;"}
+{"version":3,"file":"DropZone.cjs","sources":["../../../src/components/DropZone/DropZone.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ChangeEvent,\n  type ComponentPropsWithRef,\n  type DragEvent,\n  type PropsWithChildren,\n  forwardRef,\n  memo,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useLatest } from '../../hooks/useLatest'\nimport { Localizer } from '../../intl'\nimport { Button } from '../Button'\nimport { FaFolderOpenIcon } from '../Icon'\nimport { VisuallyHiddenText } from '../VisuallyHiddenText'\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: [\n      'smarthr-ui-DropZone',\n      'shr-relative',\n      'shr-border-shorthand shr-flex shr-flex-col shr-items-center shr-justify-center shr-bg-column shr-p-2.5',\n      'has-[.smarthr-ui-DropZone-Button[aria-disabled]]:shr-cursor-not-allowed',\n      '[&:not([data-files-dragged-over])]:shr-border-dashed',\n      'data-[files-dragged-over]:shr-border-main',\n    ],\n    button: ['smarthr-ui-DropZone-Button', 'data-[error]:shr-border-danger'],\n  },\n})\n\ntype BaseProps = PropsWithChildren<{\n  /**\n   * ボタンまたはドラッグ&ドロップでファイルが追加された時に発火するコールバック関数\n   */\n  onSelectFiles: (\n    e: DragEvent<HTMLElement> | ChangeEvent<HTMLInputElement>,\n    files: FileList | null,\n  ) => void\n  /**\n   * 許可するファイル型を表す1つ以上の固有ファイル型指定子\n   * <b>（ドラッグ&ドロップの挙動には影響しません）</b>\n   */\n  accept?: string\n  /** 複数ファイルを選択できるかどうか */\n  multiple?: boolean\n  name?: string\n  disabled?: boolean\n  /** フォームにエラーがあるかどうか */\n  error?: boolean\n  /** ファイル選択ボタンのラベル */\n  selectButtonLabel?: string\n}>\ntype Props = BaseProps & Omit<ComponentPropsWithRef<'div'>, keyof BaseProps>\n\nconst overrideEventDefault = (e: DragEvent<HTMLElement>) => {\n  e.preventDefault()\n  e.stopPropagation()\n}\n\nexport const DropZone = forwardRef<HTMLInputElement, Props>(\n  (\n    {\n      children,\n      onSelectFiles,\n      multiple = true,\n      disabled,\n      error,\n      selectButtonLabel,\n      className,\n      ...rest\n    },\n    ref,\n  ) => {\n    const fileRef = useRef<HTMLInputElement>(null)\n    const [filesDraggedOver, setFilesDraggedOver] = useState(false)\n\n    const classNames = useMemo(() => {\n      const { wrapper, button } = classNameGenerator()\n      return {\n        wrapper: wrapper({ className }),\n        button: button(),\n      }\n    }, [className])\n\n    const latest = useLatest({ onSelectFiles })\n\n    const functions = useMemo(\n      () => ({\n        handleDrop: (e: DragEvent<HTMLElement>) => {\n          overrideEventDefault(e)\n          setFilesDraggedOver(false)\n\n          if (e.dataTransfer.types.includes('Files')) {\n            if (fileRef.current) {\n              fileRef.current.files = e.dataTransfer.files\n            }\n            latest.onSelectFiles(e, e.dataTransfer.files)\n          }\n        },\n        handleDragOver: (e: DragEvent<HTMLElement>) => {\n          overrideEventDefault(e)\n          setFilesDraggedOver(true)\n        },\n        handleDragLeave: () => {\n          setFilesDraggedOver(false)\n        },\n        handleChange: (e: ChangeEvent<HTMLInputElement>) => {\n          latest.onSelectFiles(e, e.target.files)\n        },\n        handleClickButton: () => {\n          fileRef.current!.click()\n        },\n      }),\n      [latest],\n    )\n\n    useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(\n      ref,\n      () => fileRef.current,\n      [],\n    )\n\n    return (\n      // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n      <div\n        onDrop={functions.handleDrop}\n        onDragOver={functions.handleDragOver}\n        onDragLeave={functions.handleDragLeave}\n        className={classNames.wrapper}\n        data-files-dragged-over={filesDraggedOver || undefined}\n      >\n        {children}\n        <SelectButton\n          label={selectButtonLabel}\n          disabled={disabled}\n          error={error}\n          handleClick={functions.handleClickButton}\n          className={classNames.button}\n        />\n        <VisuallyHiddenText>\n          {/* TODO: この input にアクセシブルネームが設定されていない。VisuallyHiddenText で視覚的に隠されているが aria-hidden ではないためアクセシビリティツリーに残る。aria-label 等で適切なラベルを付与する必要がある */}\n          {/* eslint-disable-next-line smarthr/a11y-input-in-form-control */}\n          <input\n            {...rest}\n            ref={fileRef}\n            type=\"file\"\n            multiple={multiple}\n            disabled={disabled}\n            tabIndex={-1}\n            aria-invalid={error || undefined}\n            onChange={functions.handleChange}\n            data-smarthr-ui-input=\"true\"\n          />\n        </VisuallyHiddenText>\n      </div>\n    )\n  },\n)\n\nconst SelectButton = memo<{\n  label?: string\n  disabled?: boolean\n  error?: boolean\n  handleClick: () => void\n  className: string\n}>(({ label, disabled, error, handleClick, className }) => (\n  <Button\n    prefix={<FaFolderOpenIcon />}\n    disabled={disabled}\n    data-error={error || undefined}\n    onClick={handleClick}\n    className={className}\n  >\n    {label || <Localizer id=\"smarthr-ui/DropZone/selectButtonLabel\" defaultText=\"ファイルを選択\" />}\n  </Button>\n))\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAsBA;AACE;AACE;;;;;;;AAOC;AACD;AACD;AACF;AA0BD;;;AAGA;AAEO;AAcH;;AAGA;;;AAGI;;;AAGJ;;AAIA;AAEI;;;;AAKI;;;;;;AAMJ;;;;;;;AAOA;;;;AAIE;;AAEH;AAIH;;;;AAwCF;AAGF;;"}

package/lib/components/DropZone/DropZone.js

@@ -69,7 +69,7 @@ const DropZone = forwardRef(({ children, onSelectFiles, multiple = true, disable
             fileRef.current.click();
         },
     }), [latest]);
-    useImperativeHandle(ref, () => fileRef.current);
+    useImperativeHandle(ref, () => fileRef.current, []);
     return (
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
     jsxs("div", { onDrop: functions.handleDrop, onDragOver: functions.handleDragOver, onDragLeave: functions.handleDragLeave, className: classNames.wrapper, "data-files-dragged-over": filesDraggedOver || undefined, children: [children, jsx(SelectButton, { label: selectButtonLabel, disabled: disabled, error: error, handleClick: functions.handleClickButton, className: classNames.button }), jsx(VisuallyHiddenText, { children: jsx("input", { ...rest, ref: fileRef, type: "file", multiple: multiple, disabled: disabled, tabIndex: -1, "aria-invalid": error || undefined, onChange: functions.handleChange, "data-smarthr-ui-input": "true" }) })] }));

package/lib/components/DropZone/DropZone.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropZone.js","sources":["../../../src/components/DropZone/DropZone.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ChangeEvent,\n  type ComponentPropsWithRef,\n  type DragEvent,\n  type PropsWithChildren,\n  forwardRef,\n  memo,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useLatest } from '../../hooks/useLatest'\nimport { Localizer } from '../../intl'\nimport { Button } from '../Button'\nimport { FaFolderOpenIcon } from '../Icon'\nimport { VisuallyHiddenText } from '../VisuallyHiddenText'\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: [\n      'smarthr-ui-DropZone',\n      'shr-relative',\n      'shr-border-shorthand shr-flex shr-flex-col shr-items-center shr-justify-center shr-bg-column shr-p-2.5',\n      'has-[.smarthr-ui-DropZone-Button[aria-disabled]]:shr-cursor-not-allowed',\n      '[&:not([data-files-dragged-over])]:shr-border-dashed',\n      'data-[files-dragged-over]:shr-border-main',\n    ],\n    button: ['smarthr-ui-DropZone-Button', 'data-[error]:shr-border-danger'],\n  },\n})\n\ntype BaseProps = PropsWithChildren<{\n  /**\n   * ボタンまたはドラッグ&ドロップでファイルが追加された時に発火するコールバック関数\n   */\n  onSelectFiles: (\n    e: DragEvent<HTMLElement> | ChangeEvent<HTMLInputElement>,\n    files: FileList | null,\n  ) => void\n  /**\n   * 許可するファイル型を表す1つ以上の固有ファイル型指定子\n   * <b>（ドラッグ&ドロップの挙動には影響しません）</b>\n   */\n  accept?: string\n  /** 複数ファイルを選択できるかどうか */\n  multiple?: boolean\n  name?: string\n  disabled?: boolean\n  /** フォームにエラーがあるかどうか */\n  error?: boolean\n  /** ファイル選択ボタンのラベル */\n  selectButtonLabel?: string\n}>\ntype Props = BaseProps & Omit<ComponentPropsWithRef<'div'>, keyof BaseProps>\n\nconst overrideEventDefault = (e: DragEvent<HTMLElement>) => {\n  e.preventDefault()\n  e.stopPropagation()\n}\n\nexport const DropZone = forwardRef<HTMLInputElement, Props>(\n  (\n    {\n      children,\n      onSelectFiles,\n      multiple = true,\n      disabled,\n      error,\n      selectButtonLabel,\n      className,\n      ...rest\n    },\n    ref,\n  ) => {\n    const fileRef = useRef<HTMLInputElement>(null)\n    const [filesDraggedOver, setFilesDraggedOver] = useState(false)\n\n    const classNames = useMemo(() => {\n      const { wrapper, button } = classNameGenerator()\n      return {\n        wrapper: wrapper({ className }),\n        button: button(),\n      }\n    }, [className])\n\n    const latest = useLatest({ onSelectFiles })\n\n    const functions = useMemo(\n      () => ({\n        handleDrop: (e: DragEvent<HTMLElement>) => {\n          overrideEventDefault(e)\n          setFilesDraggedOver(false)\n\n          if (e.dataTransfer.types.includes('Files')) {\n            if (fileRef.current) {\n              fileRef.current.files = e.dataTransfer.files\n            }\n            latest.onSelectFiles(e, e.dataTransfer.files)\n          }\n        },\n        handleDragOver: (e: DragEvent<HTMLElement>) => {\n          overrideEventDefault(e)\n          setFilesDraggedOver(true)\n        },\n        handleDragLeave: () => {\n          setFilesDraggedOver(false)\n        },\n        handleChange: (e: ChangeEvent<HTMLInputElement>) => {\n          latest.onSelectFiles(e, e.target.files)\n        },\n        handleClickButton: () => {\n          fileRef.current!.click()\n        },\n      }),\n      [latest],\n    )\n\n    useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(\n      ref,\n      () => fileRef.current,\n    )\n\n    return (\n      // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n      <div\n        onDrop={functions.handleDrop}\n        onDragOver={functions.handleDragOver}\n        onDragLeave={functions.handleDragLeave}\n        className={classNames.wrapper}\n        data-files-dragged-over={filesDraggedOver || undefined}\n      >\n        {children}\n        <SelectButton\n          label={selectButtonLabel}\n          disabled={disabled}\n          error={error}\n          handleClick={functions.handleClickButton}\n          className={classNames.button}\n        />\n        <VisuallyHiddenText>\n          {/* TODO: この input にアクセシブルネームが設定されていない。VisuallyHiddenText で視覚的に隠されているが aria-hidden ではないためアクセシビリティツリーに残る。aria-label 等で適切なラベルを付与する必要がある */}\n          {/* eslint-disable-next-line smarthr/a11y-input-in-form-control */}\n          <input\n            {...rest}\n            ref={fileRef}\n            type=\"file\"\n            multiple={multiple}\n            disabled={disabled}\n            tabIndex={-1}\n            aria-invalid={error || undefined}\n            onChange={functions.handleChange}\n            data-smarthr-ui-input=\"true\"\n          />\n        </VisuallyHiddenText>\n      </div>\n    )\n  },\n)\n\nconst SelectButton = memo<{\n  label?: string\n  disabled?: boolean\n  error?: boolean\n  handleClick: () => void\n  className: string\n}>(({ label, disabled, error, handleClick, className }) => (\n  <Button\n    prefix={<FaFolderOpenIcon />}\n    disabled={disabled}\n    data-error={error || undefined}\n    onClick={handleClick}\n    className={className}\n  >\n    {label || <Localizer id=\"smarthr-ui/DropZone/selectButtonLabel\" defaultText=\"ファイルを選択\" />}\n  </Button>\n))\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAsBA;AACE;AACE;;;;;;;AAOC;AACD;AACD;AACF;AA0BD;;;AAGA;AAEO;AAcH;;AAGA;;;AAGI;;;AAGJ;;AAIA;AAEI;;;;AAKI;;;;;;AAMJ;;;;;;;AAOA;;;;AAIE;;AAEH;;;;;AA2CL;AAGF;;"}
+{"version":3,"file":"DropZone.js","sources":["../../../src/components/DropZone/DropZone.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ChangeEvent,\n  type ComponentPropsWithRef,\n  type DragEvent,\n  type PropsWithChildren,\n  forwardRef,\n  memo,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useLatest } from '../../hooks/useLatest'\nimport { Localizer } from '../../intl'\nimport { Button } from '../Button'\nimport { FaFolderOpenIcon } from '../Icon'\nimport { VisuallyHiddenText } from '../VisuallyHiddenText'\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: [\n      'smarthr-ui-DropZone',\n      'shr-relative',\n      'shr-border-shorthand shr-flex shr-flex-col shr-items-center shr-justify-center shr-bg-column shr-p-2.5',\n      'has-[.smarthr-ui-DropZone-Button[aria-disabled]]:shr-cursor-not-allowed',\n      '[&:not([data-files-dragged-over])]:shr-border-dashed',\n      'data-[files-dragged-over]:shr-border-main',\n    ],\n    button: ['smarthr-ui-DropZone-Button', 'data-[error]:shr-border-danger'],\n  },\n})\n\ntype BaseProps = PropsWithChildren<{\n  /**\n   * ボタンまたはドラッグ&ドロップでファイルが追加された時に発火するコールバック関数\n   */\n  onSelectFiles: (\n    e: DragEvent<HTMLElement> | ChangeEvent<HTMLInputElement>,\n    files: FileList | null,\n  ) => void\n  /**\n   * 許可するファイル型を表す1つ以上の固有ファイル型指定子\n   * <b>（ドラッグ&ドロップの挙動には影響しません）</b>\n   */\n  accept?: string\n  /** 複数ファイルを選択できるかどうか */\n  multiple?: boolean\n  name?: string\n  disabled?: boolean\n  /** フォームにエラーがあるかどうか */\n  error?: boolean\n  /** ファイル選択ボタンのラベル */\n  selectButtonLabel?: string\n}>\ntype Props = BaseProps & Omit<ComponentPropsWithRef<'div'>, keyof BaseProps>\n\nconst overrideEventDefault = (e: DragEvent<HTMLElement>) => {\n  e.preventDefault()\n  e.stopPropagation()\n}\n\nexport const DropZone = forwardRef<HTMLInputElement, Props>(\n  (\n    {\n      children,\n      onSelectFiles,\n      multiple = true,\n      disabled,\n      error,\n      selectButtonLabel,\n      className,\n      ...rest\n    },\n    ref,\n  ) => {\n    const fileRef = useRef<HTMLInputElement>(null)\n    const [filesDraggedOver, setFilesDraggedOver] = useState(false)\n\n    const classNames = useMemo(() => {\n      const { wrapper, button } = classNameGenerator()\n      return {\n        wrapper: wrapper({ className }),\n        button: button(),\n      }\n    }, [className])\n\n    const latest = useLatest({ onSelectFiles })\n\n    const functions = useMemo(\n      () => ({\n        handleDrop: (e: DragEvent<HTMLElement>) => {\n          overrideEventDefault(e)\n          setFilesDraggedOver(false)\n\n          if (e.dataTransfer.types.includes('Files')) {\n            if (fileRef.current) {\n              fileRef.current.files = e.dataTransfer.files\n            }\n            latest.onSelectFiles(e, e.dataTransfer.files)\n          }\n        },\n        handleDragOver: (e: DragEvent<HTMLElement>) => {\n          overrideEventDefault(e)\n          setFilesDraggedOver(true)\n        },\n        handleDragLeave: () => {\n          setFilesDraggedOver(false)\n        },\n        handleChange: (e: ChangeEvent<HTMLInputElement>) => {\n          latest.onSelectFiles(e, e.target.files)\n        },\n        handleClickButton: () => {\n          fileRef.current!.click()\n        },\n      }),\n      [latest],\n    )\n\n    useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(\n      ref,\n      () => fileRef.current,\n      [],\n    )\n\n    return (\n      // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n      <div\n        onDrop={functions.handleDrop}\n        onDragOver={functions.handleDragOver}\n        onDragLeave={functions.handleDragLeave}\n        className={classNames.wrapper}\n        data-files-dragged-over={filesDraggedOver || undefined}\n      >\n        {children}\n        <SelectButton\n          label={selectButtonLabel}\n          disabled={disabled}\n          error={error}\n          handleClick={functions.handleClickButton}\n          className={classNames.button}\n        />\n        <VisuallyHiddenText>\n          {/* TODO: この input にアクセシブルネームが設定されていない。VisuallyHiddenText で視覚的に隠されているが aria-hidden ではないためアクセシビリティツリーに残る。aria-label 等で適切なラベルを付与する必要がある */}\n          {/* eslint-disable-next-line smarthr/a11y-input-in-form-control */}\n          <input\n            {...rest}\n            ref={fileRef}\n            type=\"file\"\n            multiple={multiple}\n            disabled={disabled}\n            tabIndex={-1}\n            aria-invalid={error || undefined}\n            onChange={functions.handleChange}\n            data-smarthr-ui-input=\"true\"\n          />\n        </VisuallyHiddenText>\n      </div>\n    )\n  },\n)\n\nconst SelectButton = memo<{\n  label?: string\n  disabled?: boolean\n  error?: boolean\n  handleClick: () => void\n  className: string\n}>(({ label, disabled, error, handleClick, className }) => (\n  <Button\n    prefix={<FaFolderOpenIcon />}\n    disabled={disabled}\n    data-error={error || undefined}\n    onClick={handleClick}\n    className={className}\n  >\n    {label || <Localizer id=\"smarthr-ui/DropZone/selectButtonLabel\" defaultText=\"ファイルを選択\" />}\n  </Button>\n))\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAsBA;AACE;AACE;;;;;;;AAOC;AACD;AACD;AACF;AA0BD;;;AAGA;AAEO;AAcH;;AAGA;;;AAGI;;;AAGJ;;AAIA;AAEI;;;;AAKI;;;;;;AAMJ;;;;;;;AAOA;;;;AAIE;;AAEH;AAIH;;;;AAwCF;AAGF;;"}

package/lib/components/Heading/PageHeading/PageHeading.cjs

@@ -24,7 +24,7 @@ const AutoPageTitleHeading = ({ pageTitleSuffix, pageTitle, outerRef, children,
     const pseudoTitleId = React.useId();
     // HINT: h1のテキストをMutationObserverで監視するために内部でrefを保持しつつ、利用者のrefにも要素を渡す
     const innerRef = React.useRef(null);
-    React.useImperativeHandle(outerRef, () => innerRef.current);
+    React.useImperativeHandle(outerRef, () => innerRef.current, []);
     React.useEffect(() => {
         const h1 = innerRef.current;
         if (!h1)

package/lib/components/Heading/PageHeading/PageHeading.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"PageHeading.cjs","sources":["../../../../src/components/Heading/PageHeading/PageHeading.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type FC,\n  type ForwardedRef,\n  type PropsWithChildren,\n  type ReactNode,\n  type Ref,\n  forwardRef,\n  memo,\n  useEffect,\n  useId,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { IS_NEXT_JS } from '../../../libs/nextjs'\nimport { STYLE_TYPE_MAP, Text, type TextProps } from '../../Text'\nimport { VisuallyHiddenText, visuallyHiddenTextClassName } from '../../VisuallyHiddenText'\n\nimport type { ElementProps } from '../Heading'\n\nexport type BaseProps = PropsWithChildren<{\n  /**\n   * テキストのサイズ\n   *\n   * @default 'XL'\n   */\n  size?: Extract<TextProps['size'], 'XXL' | 'XL' | 'L'>\n  /** 視覚的に非表示にするフラグ */\n  visuallyHidden?: boolean\n  /**\n   * title要素の自動生成フラグ\n   *\n   * Next.js 環境ではこの値にかかわらずtitleは自動生成されません。metadataなどの方法を利用してください。\n   */\n  autoPageTitle?: boolean\n  /** title要素のprefix */\n  pageTitle?: string\n  /** title要素のsuffix */\n  pageTitleSuffix?: string\n}>\ntype Props = BaseProps & Omit<ElementProps, keyof BaseProps>\n\nconst classNameGenerator = tv({\n  base: 'smarthr-ui-Heading smarthr-ui-PageHeading',\n  variants: {\n    visuallyHidden: {\n      false: 'shr-m-[unset]',\n    },\n  },\n  defaultVariants: {\n    visuallyHidden: false,\n  },\n})\n\nexport const PageHeading = memo(\n  forwardRef<HTMLHeadingElement, Props>(\n    (\n      {\n        autoPageTitle = true,\n        pageTitleSuffix = 'SmartHR（スマートHR）',\n        pageTitle,\n        size = 'XL',\n        children,\n        ...rest\n      },\n      ref,\n    ) =>\n      !IS_NEXT_JS && autoPageTitle ? (\n        <AutoPageTitleHeading\n          {...rest}\n          size={size}\n          pageTitleSuffix={pageTitleSuffix}\n          pageTitle={pageTitle}\n          outerRef={ref}\n        >\n          {children}\n        </AutoPageTitleHeading>\n      ) : (\n        <ActualHeading {...rest} size={size} headingRef={ref}>\n          {children}\n        </ActualHeading>\n      ),\n  ),\n)\n\nconst AutoPageTitleHeading: FC<\n  Omit<Props, 'size' | 'autoPageTitle' | 'pageTitleSuffix' | 'ref'> & {\n    size: TextProps['size']\n    pageTitleSuffix: string\n    outerRef?: ForwardedRef<HTMLHeadingElement>\n  }\n> = ({ pageTitleSuffix, pageTitle, outerRef, children, ...rest }) => {\n  const pseudoTitleId = useId()\n  // HINT: h1のテキストをMutationObserverで監視するために内部でrefを保持しつつ、利用者のrefにも要素を渡す\n  const innerRef = useRef<HTMLHeadingElement | null>(null)\n\n  useImperativeHandle<HTMLHeadingElement | null, HTMLHeadingElement | null>(\n    outerRef,\n    () => innerRef.current,\n  )\n\n  useEffect(() => {\n    const h1 = innerRef.current\n    if (!h1) return\n\n    const updateTitle = () => {\n      const title = pageTitle || h1.textContent || ''\n      document.title = pageTitleSuffix ? `${title}｜${pageTitleSuffix}` : title\n\n      // HINT: SPAで遷移する場合などの対策としてbody直下にaria-liveを仕込む\n      // head内はスクリーンリーダーの変更検知のチェック対象外のため、title要素にaria-liveは設定しない\n      const pseudoTitle: HTMLDivElement = (document.getElementById(pseudoTitleId) ||\n        document.createElement('div')) as HTMLDivElement\n\n      pseudoTitle.setAttribute('id', pseudoTitleId)\n      pseudoTitle.setAttribute('class', visuallyHiddenTextClassName)\n      pseudoTitle.setAttribute('aria-live', 'polite')\n      document.body.prepend(pseudoTitle)\n\n      requestAnimationFrame(() => {\n        pseudoTitle.textContent = document.title\n      })\n    }\n\n    updateTitle()\n\n    const observer = new MutationObserver(updateTitle)\n    observer.observe(h1, {\n      characterData: true,\n      childList: true,\n      subtree: true,\n    })\n\n    return () => {\n      observer.disconnect()\n      const pseudoTitle = document.getElementById(pseudoTitleId)\n      if (pseudoTitle) {\n        pseudoTitle.remove()\n      }\n    }\n  }, [pageTitle, pageTitleSuffix, pseudoTitleId])\n\n  return (\n    <ActualHeading {...rest} headingRef={innerRef}>\n      {children}\n    </ActualHeading>\n  )\n}\n\ntype ActualHeadingProps = {\n  visuallyHidden?: boolean\n  size: TextProps['size']\n  className?: string\n  children: ReactNode\n  headingRef?: Ref<HTMLHeadingElement>\n} & Omit<ElementProps, 'size' | 'className' | 'visuallyHidden' | 'children' | 'ref'>\n\nconst ActualHeading: FC<ActualHeadingProps> = ({\n  visuallyHidden,\n  size,\n  className,\n  children,\n  headingRef,\n  ...rest\n}) => {\n  const actualClassName = useMemo(\n    () => classNameGenerator({ visuallyHidden, className }),\n    [className, visuallyHidden],\n  )\n\n  const Component = visuallyHidden ? VisuallyHiddenText : Text\n  return (\n    <Component\n      {...rest}\n      {...STYLE_TYPE_MAP.screenTitle}\n      size={size || STYLE_TYPE_MAP.screenTitle.size}\n      as=\"h1\"\n      className={actualClassName}\n      ref={headingRef}\n    >\n      {children}\n    </Component>\n  )\n}\n"],"names":[],"mappings":";;;;;;;;;;AA8CA;AACE;AACA;AACE;AACE;AACD;AACF;AACD;AACE;AACD;AACF;AAEM;AA+BP;AAOE;;AAEA;;;AAQE;AACA;;;;AAIE;;;;AAKE;AAEF;AACA;AACA;AACA;;AAGE;AACF;AACF;AAEA;AAEA;AACA;AACE;AACA;AACA;AACD;AAED;;;;;;AAMA;;AAGF;AAKF;AAUA;;;AAcE;AAYF;;"}
+{"version":3,"file":"PageHeading.cjs","sources":["../../../../src/components/Heading/PageHeading/PageHeading.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type FC,\n  type ForwardedRef,\n  type PropsWithChildren,\n  type ReactNode,\n  type Ref,\n  forwardRef,\n  memo,\n  useEffect,\n  useId,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { IS_NEXT_JS } from '../../../libs/nextjs'\nimport { STYLE_TYPE_MAP, Text, type TextProps } from '../../Text'\nimport { VisuallyHiddenText, visuallyHiddenTextClassName } from '../../VisuallyHiddenText'\n\nimport type { ElementProps } from '../Heading'\n\nexport type BaseProps = PropsWithChildren<{\n  /**\n   * テキストのサイズ\n   *\n   * @default 'XL'\n   */\n  size?: Extract<TextProps['size'], 'XXL' | 'XL' | 'L'>\n  /** 視覚的に非表示にするフラグ */\n  visuallyHidden?: boolean\n  /**\n   * title要素の自動生成フラグ\n   *\n   * Next.js 環境ではこの値にかかわらずtitleは自動生成されません。metadataなどの方法を利用してください。\n   */\n  autoPageTitle?: boolean\n  /** title要素のprefix */\n  pageTitle?: string\n  /** title要素のsuffix */\n  pageTitleSuffix?: string\n}>\ntype Props = BaseProps & Omit<ElementProps, keyof BaseProps>\n\nconst classNameGenerator = tv({\n  base: 'smarthr-ui-Heading smarthr-ui-PageHeading',\n  variants: {\n    visuallyHidden: {\n      false: 'shr-m-[unset]',\n    },\n  },\n  defaultVariants: {\n    visuallyHidden: false,\n  },\n})\n\nexport const PageHeading = memo(\n  forwardRef<HTMLHeadingElement, Props>(\n    (\n      {\n        autoPageTitle = true,\n        pageTitleSuffix = 'SmartHR（スマートHR）',\n        pageTitle,\n        size = 'XL',\n        children,\n        ...rest\n      },\n      ref,\n    ) =>\n      !IS_NEXT_JS && autoPageTitle ? (\n        <AutoPageTitleHeading\n          {...rest}\n          size={size}\n          pageTitleSuffix={pageTitleSuffix}\n          pageTitle={pageTitle}\n          outerRef={ref}\n        >\n          {children}\n        </AutoPageTitleHeading>\n      ) : (\n        <ActualHeading {...rest} size={size} headingRef={ref}>\n          {children}\n        </ActualHeading>\n      ),\n  ),\n)\n\nconst AutoPageTitleHeading: FC<\n  Omit<Props, 'size' | 'autoPageTitle' | 'pageTitleSuffix' | 'ref'> & {\n    size: TextProps['size']\n    pageTitleSuffix: string\n    outerRef?: ForwardedRef<HTMLHeadingElement>\n  }\n> = ({ pageTitleSuffix, pageTitle, outerRef, children, ...rest }) => {\n  const pseudoTitleId = useId()\n  // HINT: h1のテキストをMutationObserverで監視するために内部でrefを保持しつつ、利用者のrefにも要素を渡す\n  const innerRef = useRef<HTMLHeadingElement | null>(null)\n\n  useImperativeHandle<HTMLHeadingElement | null, HTMLHeadingElement | null>(\n    outerRef,\n    () => innerRef.current,\n    [],\n  )\n\n  useEffect(() => {\n    const h1 = innerRef.current\n    if (!h1) return\n\n    const updateTitle = () => {\n      const title = pageTitle || h1.textContent || ''\n      document.title = pageTitleSuffix ? `${title}｜${pageTitleSuffix}` : title\n\n      // HINT: SPAで遷移する場合などの対策としてbody直下にaria-liveを仕込む\n      // head内はスクリーンリーダーの変更検知のチェック対象外のため、title要素にaria-liveは設定しない\n      const pseudoTitle: HTMLDivElement = (document.getElementById(pseudoTitleId) ||\n        document.createElement('div')) as HTMLDivElement\n\n      pseudoTitle.setAttribute('id', pseudoTitleId)\n      pseudoTitle.setAttribute('class', visuallyHiddenTextClassName)\n      pseudoTitle.setAttribute('aria-live', 'polite')\n      document.body.prepend(pseudoTitle)\n\n      requestAnimationFrame(() => {\n        pseudoTitle.textContent = document.title\n      })\n    }\n\n    updateTitle()\n\n    const observer = new MutationObserver(updateTitle)\n    observer.observe(h1, {\n      characterData: true,\n      childList: true,\n      subtree: true,\n    })\n\n    return () => {\n      observer.disconnect()\n      const pseudoTitle = document.getElementById(pseudoTitleId)\n      if (pseudoTitle) {\n        pseudoTitle.remove()\n      }\n    }\n  }, [pageTitle, pageTitleSuffix, pseudoTitleId])\n\n  return (\n    <ActualHeading {...rest} headingRef={innerRef}>\n      {children}\n    </ActualHeading>\n  )\n}\n\ntype ActualHeadingProps = {\n  visuallyHidden?: boolean\n  size: TextProps['size']\n  className?: string\n  children: ReactNode\n  headingRef?: Ref<HTMLHeadingElement>\n} & Omit<ElementProps, 'size' | 'className' | 'visuallyHidden' | 'children' | 'ref'>\n\nconst ActualHeading: FC<ActualHeadingProps> = ({\n  visuallyHidden,\n  size,\n  className,\n  children,\n  headingRef,\n  ...rest\n}) => {\n  const actualClassName = useMemo(\n    () => classNameGenerator({ visuallyHidden, className }),\n    [className, visuallyHidden],\n  )\n\n  const Component = visuallyHidden ? VisuallyHiddenText : Text\n  return (\n    <Component\n      {...rest}\n      {...STYLE_TYPE_MAP.screenTitle}\n      size={size || STYLE_TYPE_MAP.screenTitle.size}\n      as=\"h1\"\n      className={actualClassName}\n      ref={headingRef}\n    >\n      {children}\n    </Component>\n  )\n}\n"],"names":[],"mappings":";;;;;;;;;;AA8CA;AACE;AACA;AACE;AACE;AACD;AACF;AACD;AACE;AACD;AACF;AAEM;AA+BP;AAOE;;AAEA;AAEA;;AAOE;AACA;;;;AAIE;;;;AAKE;AAEF;AACA;AACA;AACA;;AAGE;AACF;AACF;AAEA;AAEA;AACA;AACE;AACA;AACA;AACD;AAED;;;;;;AAMA;;AAGF;AAKF;AAUA;;;AAcE;AAYF;;"}

package/lib/components/Heading/PageHeading/PageHeading.js

@@ -22,7 +22,7 @@ const AutoPageTitleHeading = ({ pageTitleSuffix, pageTitle, outerRef, children,
     const pseudoTitleId = useId();
     // HINT: h1のテキストをMutationObserverで監視するために内部でrefを保持しつつ、利用者のrefにも要素を渡す
     const innerRef = useRef(null);
-    useImperativeHandle(outerRef, () => innerRef.current);
+    useImperativeHandle(outerRef, () => innerRef.current, []);
     useEffect(() => {
         const h1 = innerRef.current;
         if (!h1)

package/lib/components/Heading/PageHeading/PageHeading.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageHeading.js","sources":["../../../../src/components/Heading/PageHeading/PageHeading.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type FC,\n  type ForwardedRef,\n  type PropsWithChildren,\n  type ReactNode,\n  type Ref,\n  forwardRef,\n  memo,\n  useEffect,\n  useId,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { IS_NEXT_JS } from '../../../libs/nextjs'\nimport { STYLE_TYPE_MAP, Text, type TextProps } from '../../Text'\nimport { VisuallyHiddenText, visuallyHiddenTextClassName } from '../../VisuallyHiddenText'\n\nimport type { ElementProps } from '../Heading'\n\nexport type BaseProps = PropsWithChildren<{\n  /**\n   * テキストのサイズ\n   *\n   * @default 'XL'\n   */\n  size?: Extract<TextProps['size'], 'XXL' | 'XL' | 'L'>\n  /** 視覚的に非表示にするフラグ */\n  visuallyHidden?: boolean\n  /**\n   * title要素の自動生成フラグ\n   *\n   * Next.js 環境ではこの値にかかわらずtitleは自動生成されません。metadataなどの方法を利用してください。\n   */\n  autoPageTitle?: boolean\n  /** title要素のprefix */\n  pageTitle?: string\n  /** title要素のsuffix */\n  pageTitleSuffix?: string\n}>\ntype Props = BaseProps & Omit<ElementProps, keyof BaseProps>\n\nconst classNameGenerator = tv({\n  base: 'smarthr-ui-Heading smarthr-ui-PageHeading',\n  variants: {\n    visuallyHidden: {\n      false: 'shr-m-[unset]',\n    },\n  },\n  defaultVariants: {\n    visuallyHidden: false,\n  },\n})\n\nexport const PageHeading = memo(\n  forwardRef<HTMLHeadingElement, Props>(\n    (\n      {\n        autoPageTitle = true,\n        pageTitleSuffix = 'SmartHR（スマートHR）',\n        pageTitle,\n        size = 'XL',\n        children,\n        ...rest\n      },\n      ref,\n    ) =>\n      !IS_NEXT_JS && autoPageTitle ? (\n        <AutoPageTitleHeading\n          {...rest}\n          size={size}\n          pageTitleSuffix={pageTitleSuffix}\n          pageTitle={pageTitle}\n          outerRef={ref}\n        >\n          {children}\n        </AutoPageTitleHeading>\n      ) : (\n        <ActualHeading {...rest} size={size} headingRef={ref}>\n          {children}\n        </ActualHeading>\n      ),\n  ),\n)\n\nconst AutoPageTitleHeading: FC<\n  Omit<Props, 'size' | 'autoPageTitle' | 'pageTitleSuffix' | 'ref'> & {\n    size: TextProps['size']\n    pageTitleSuffix: string\n    outerRef?: ForwardedRef<HTMLHeadingElement>\n  }\n> = ({ pageTitleSuffix, pageTitle, outerRef, children, ...rest }) => {\n  const pseudoTitleId = useId()\n  // HINT: h1のテキストをMutationObserverで監視するために内部でrefを保持しつつ、利用者のrefにも要素を渡す\n  const innerRef = useRef<HTMLHeadingElement | null>(null)\n\n  useImperativeHandle<HTMLHeadingElement | null, HTMLHeadingElement | null>(\n    outerRef,\n    () => innerRef.current,\n  )\n\n  useEffect(() => {\n    const h1 = innerRef.current\n    if (!h1) return\n\n    const updateTitle = () => {\n      const title = pageTitle || h1.textContent || ''\n      document.title = pageTitleSuffix ? `${title}｜${pageTitleSuffix}` : title\n\n      // HINT: SPAで遷移する場合などの対策としてbody直下にaria-liveを仕込む\n      // head内はスクリーンリーダーの変更検知のチェック対象外のため、title要素にaria-liveは設定しない\n      const pseudoTitle: HTMLDivElement = (document.getElementById(pseudoTitleId) ||\n        document.createElement('div')) as HTMLDivElement\n\n      pseudoTitle.setAttribute('id', pseudoTitleId)\n      pseudoTitle.setAttribute('class', visuallyHiddenTextClassName)\n      pseudoTitle.setAttribute('aria-live', 'polite')\n      document.body.prepend(pseudoTitle)\n\n      requestAnimationFrame(() => {\n        pseudoTitle.textContent = document.title\n      })\n    }\n\n    updateTitle()\n\n    const observer = new MutationObserver(updateTitle)\n    observer.observe(h1, {\n      characterData: true,\n      childList: true,\n      subtree: true,\n    })\n\n    return () => {\n      observer.disconnect()\n      const pseudoTitle = document.getElementById(pseudoTitleId)\n      if (pseudoTitle) {\n        pseudoTitle.remove()\n      }\n    }\n  }, [pageTitle, pageTitleSuffix, pseudoTitleId])\n\n  return (\n    <ActualHeading {...rest} headingRef={innerRef}>\n      {children}\n    </ActualHeading>\n  )\n}\n\ntype ActualHeadingProps = {\n  visuallyHidden?: boolean\n  size: TextProps['size']\n  className?: string\n  children: ReactNode\n  headingRef?: Ref<HTMLHeadingElement>\n} & Omit<ElementProps, 'size' | 'className' | 'visuallyHidden' | 'children' | 'ref'>\n\nconst ActualHeading: FC<ActualHeadingProps> = ({\n  visuallyHidden,\n  size,\n  className,\n  children,\n  headingRef,\n  ...rest\n}) => {\n  const actualClassName = useMemo(\n    () => classNameGenerator({ visuallyHidden, className }),\n    [className, visuallyHidden],\n  )\n\n  const Component = visuallyHidden ? VisuallyHiddenText : Text\n  return (\n    <Component\n      {...rest}\n      {...STYLE_TYPE_MAP.screenTitle}\n      size={size || STYLE_TYPE_MAP.screenTitle.size}\n      as=\"h1\"\n      className={actualClassName}\n      ref={headingRef}\n    >\n      {children}\n    </Component>\n  )\n}\n"],"names":[],"mappings":";;;;;;;;AA8CA;AACE;AACA;AACE;AACE;AACD;AACF;AACD;AACE;AACD;AACF;AAEM;AA+BP;AAOE;;AAEA;;;AAQE;AACA;;;;AAIE;;;;AAKE;AAEF;AACA;AACA;AACA;;AAGE;AACF;AACF;AAEA;AAEA;AACA;AACE;AACA;AACA;AACD;AAED;;;;;;AAMA;;AAGF;AAKF;AAUA;;;AAcE;AAYF;;"}
+{"version":3,"file":"PageHeading.js","sources":["../../../../src/components/Heading/PageHeading/PageHeading.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type FC,\n  type ForwardedRef,\n  type PropsWithChildren,\n  type ReactNode,\n  type Ref,\n  forwardRef,\n  memo,\n  useEffect,\n  useId,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { IS_NEXT_JS } from '../../../libs/nextjs'\nimport { STYLE_TYPE_MAP, Text, type TextProps } from '../../Text'\nimport { VisuallyHiddenText, visuallyHiddenTextClassName } from '../../VisuallyHiddenText'\n\nimport type { ElementProps } from '../Heading'\n\nexport type BaseProps = PropsWithChildren<{\n  /**\n   * テキストのサイズ\n   *\n   * @default 'XL'\n   */\n  size?: Extract<TextProps['size'], 'XXL' | 'XL' | 'L'>\n  /** 視覚的に非表示にするフラグ */\n  visuallyHidden?: boolean\n  /**\n   * title要素の自動生成フラグ\n   *\n   * Next.js 環境ではこの値にかかわらずtitleは自動生成されません。metadataなどの方法を利用してください。\n   */\n  autoPageTitle?: boolean\n  /** title要素のprefix */\n  pageTitle?: string\n  /** title要素のsuffix */\n  pageTitleSuffix?: string\n}>\ntype Props = BaseProps & Omit<ElementProps, keyof BaseProps>\n\nconst classNameGenerator = tv({\n  base: 'smarthr-ui-Heading smarthr-ui-PageHeading',\n  variants: {\n    visuallyHidden: {\n      false: 'shr-m-[unset]',\n    },\n  },\n  defaultVariants: {\n    visuallyHidden: false,\n  },\n})\n\nexport const PageHeading = memo(\n  forwardRef<HTMLHeadingElement, Props>(\n    (\n      {\n        autoPageTitle = true,\n        pageTitleSuffix = 'SmartHR（スマートHR）',\n        pageTitle,\n        size = 'XL',\n        children,\n        ...rest\n      },\n      ref,\n    ) =>\n      !IS_NEXT_JS && autoPageTitle ? (\n        <AutoPageTitleHeading\n          {...rest}\n          size={size}\n          pageTitleSuffix={pageTitleSuffix}\n          pageTitle={pageTitle}\n          outerRef={ref}\n        >\n          {children}\n        </AutoPageTitleHeading>\n      ) : (\n        <ActualHeading {...rest} size={size} headingRef={ref}>\n          {children}\n        </ActualHeading>\n      ),\n  ),\n)\n\nconst AutoPageTitleHeading: FC<\n  Omit<Props, 'size' | 'autoPageTitle' | 'pageTitleSuffix' | 'ref'> & {\n    size: TextProps['size']\n    pageTitleSuffix: string\n    outerRef?: ForwardedRef<HTMLHeadingElement>\n  }\n> = ({ pageTitleSuffix, pageTitle, outerRef, children, ...rest }) => {\n  const pseudoTitleId = useId()\n  // HINT: h1のテキストをMutationObserverで監視するために内部でrefを保持しつつ、利用者のrefにも要素を渡す\n  const innerRef = useRef<HTMLHeadingElement | null>(null)\n\n  useImperativeHandle<HTMLHeadingElement | null, HTMLHeadingElement | null>(\n    outerRef,\n    () => innerRef.current,\n    [],\n  )\n\n  useEffect(() => {\n    const h1 = innerRef.current\n    if (!h1) return\n\n    const updateTitle = () => {\n      const title = pageTitle || h1.textContent || ''\n      document.title = pageTitleSuffix ? `${title}｜${pageTitleSuffix}` : title\n\n      // HINT: SPAで遷移する場合などの対策としてbody直下にaria-liveを仕込む\n      // head内はスクリーンリーダーの変更検知のチェック対象外のため、title要素にaria-liveは設定しない\n      const pseudoTitle: HTMLDivElement = (document.getElementById(pseudoTitleId) ||\n        document.createElement('div')) as HTMLDivElement\n\n      pseudoTitle.setAttribute('id', pseudoTitleId)\n      pseudoTitle.setAttribute('class', visuallyHiddenTextClassName)\n      pseudoTitle.setAttribute('aria-live', 'polite')\n      document.body.prepend(pseudoTitle)\n\n      requestAnimationFrame(() => {\n        pseudoTitle.textContent = document.title\n      })\n    }\n\n    updateTitle()\n\n    const observer = new MutationObserver(updateTitle)\n    observer.observe(h1, {\n      characterData: true,\n      childList: true,\n      subtree: true,\n    })\n\n    return () => {\n      observer.disconnect()\n      const pseudoTitle = document.getElementById(pseudoTitleId)\n      if (pseudoTitle) {\n        pseudoTitle.remove()\n      }\n    }\n  }, [pageTitle, pageTitleSuffix, pseudoTitleId])\n\n  return (\n    <ActualHeading {...rest} headingRef={innerRef}>\n      {children}\n    </ActualHeading>\n  )\n}\n\ntype ActualHeadingProps = {\n  visuallyHidden?: boolean\n  size: TextProps['size']\n  className?: string\n  children: ReactNode\n  headingRef?: Ref<HTMLHeadingElement>\n} & Omit<ElementProps, 'size' | 'className' | 'visuallyHidden' | 'children' | 'ref'>\n\nconst ActualHeading: FC<ActualHeadingProps> = ({\n  visuallyHidden,\n  size,\n  className,\n  children,\n  headingRef,\n  ...rest\n}) => {\n  const actualClassName = useMemo(\n    () => classNameGenerator({ visuallyHidden, className }),\n    [className, visuallyHidden],\n  )\n\n  const Component = visuallyHidden ? VisuallyHiddenText : Text\n  return (\n    <Component\n      {...rest}\n      {...STYLE_TYPE_MAP.screenTitle}\n      size={size || STYLE_TYPE_MAP.screenTitle.size}\n      as=\"h1\"\n      className={actualClassName}\n      ref={headingRef}\n    >\n      {children}\n    </Component>\n  )\n}\n"],"names":[],"mappings":";;;;;;;;AA8CA;AACE;AACA;AACE;AACE;AACD;AACF;AACD;AACE;AACD;AACF;AAEM;AA+BP;AAOE;;AAEA;AAEA;;AAOE;AACA;;;;AAIE;;;;AAKE;AAEF;AACA;AACA;AACA;;AAGE;AACF;AACF;AAEA;AAEA;AACA;AACE;AACA;AACA;AACD;AAED;;;;;;AAMA;;AAGF;AAKF;AAUA;;;AAcE;AAYF;;"}

package/lib/components/Input/CurrencyInput/CurrencyInput.cjs

@@ -7,7 +7,7 @@ var hooks_useLatest = require('../../../hooks/useLatest.cjs');
 var components_Input_Input = require('../Input.cjs');
 var components_Input_CurrencyInput_currencyInputHelper = require('./currencyInputHelper.cjs');
 
-const CurrencyInput = React.forwardRef(({ onFormatValue, onFocus, onBlur, value, defaultValue, className = '', ...rest }, ref) => {
+const CurrencyInput = React.forwardRef(({ onFormatValue, onFocus, onBlur, value, defaultValue, className, ...rest }, ref) => {
     const innerRef = React.useRef(null);
     const [isFocused, setIsFocused] = React.useState(false);
     const latest = hooks_useLatest.useLatest({
@@ -40,7 +40,7 @@ const CurrencyInput = React.forwardRef(({ onFormatValue, onFocus, onBlur, value,
             },
         };
     }, [latest]);
-    React.useImperativeHandle(ref, () => innerRef.current);
+    React.useImperativeHandle(ref, () => innerRef.current, []);
     React.useEffect(() => {
         if (value === undefined && defaultValue !== undefined) {
             functions.formatCurrencyValue(defaultValue);
@@ -60,7 +60,7 @@ const CurrencyInput = React.forwardRef(({ onFormatValue, onFocus, onBlur, value,
             }
         }
     }, [isFocused, value, functions]);
-    return (jsxRuntime.jsx(components_Input_Input.Input, { ...rest, type: "text", value: value, defaultValue: defaultValue, onFocus: functions.handleFocus, onBlur: functions.handleBlur, ref: innerRef, className: `smarthr-ui-CurrencyInput${className ? ` ${className}` : ''}` }));
+    return (jsxRuntime.jsx(components_Input_Input.Input, { ...rest, ref: innerRef, type: "text", value: value, defaultValue: defaultValue, onFocus: functions.handleFocus, onBlur: functions.handleBlur, className: `smarthr-ui-CurrencyInput${className ? ` ${className}` : ''}` }));
 });
 
 exports.CurrencyInput = CurrencyInput;

package/lib/components/Input/CurrencyInput/CurrencyInput.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"CurrencyInput.cjs","sources":["../../../../src/components/Input/CurrencyInput/CurrencyInput.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentProps,\n  type FocusEvent,\n  forwardRef,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\n\nimport { useLatest } from '../../../hooks/useLatest'\nimport { Input } from '../Input'\n\nimport { formatCurrency } from './currencyInputHelper'\n\ntype Props = Omit<ComponentProps<typeof Input>, 'type' | 'value' | 'defaultValue'> & {\n  /** 通貨の値 */\n  value?: string\n  /** デフォルトで表示する通貨の値 */\n  defaultValue?: string\n  /** 入力値がフォーマットされたときに発火するコールバック関数 */\n  onFormatValue?: (value: string) => void\n}\n\nexport const CurrencyInput = forwardRef<HTMLInputElement, Props>(\n  ({ onFormatValue, onFocus, onBlur, value, defaultValue, className = '', ...rest }, ref) => {\n    const innerRef = useRef<HTMLInputElement>(null)\n    const [isFocused, setIsFocused] = useState(false)\n\n    const latest = useLatest({\n      onFocus,\n      onBlur,\n      onFormatValue,\n    })\n\n    const functions = useMemo(() => {\n      const formatValue = (formatted = '') => {\n        if (innerRef.current && formatted !== innerRef.current.value) {\n          innerRef.current.value = formatted\n          latest.onFormatValue?.(formatted)\n        }\n      }\n\n      return {\n        formatCurrencyValue: (raw = '') => {\n          formatValue(formatCurrency(raw))\n        },\n        handleFocus: (e: FocusEvent<HTMLInputElement>) => {\n          setIsFocused(true)\n\n          if (innerRef.current) {\n            const commaExcluded = innerRef.current.value.replace(/,/g, '')\n            formatValue(commaExcluded)\n          }\n\n          latest.onFocus?.(e)\n        },\n        handleBlur: (e: FocusEvent<HTMLInputElement>) => {\n          setIsFocused(false)\n\n          latest.onBlur?.(e)\n        },\n      }\n    }, [latest])\n\n    useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(\n      ref,\n      () => innerRef.current,\n    )\n\n    useEffect(() => {\n      if (value === undefined && defaultValue !== undefined) {\n        functions.formatCurrencyValue(defaultValue)\n      }\n      // when component did mount\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [])\n\n    useEffect(() => {\n      if (!isFocused) {\n        if (value !== undefined) {\n          // for controlled component\n          functions.formatCurrencyValue(value)\n        } else if (innerRef.current) {\n          // for uncontrolled component\n          functions.formatCurrencyValue(innerRef.current.value)\n        }\n      }\n    }, [isFocused, value, functions])\n\n    return (\n      <Input\n        {...rest}\n        type=\"text\"\n        value={value}\n        defaultValue={defaultValue}\n        onFocus={functions.handleFocus}\n        onBlur={functions.handleBlur}\n        ref={innerRef}\n        className={`smarthr-ui-CurrencyInput${className ? ` ${className}` : ''}`}\n      />\n    )\n  },\n)\n"],"names":[],"mappings":";;;;;;;;;AA2BO;AAEH;;;;;;AAOC;AAED;AACE;AACE;AACE;AACA;;AAEJ;;AAGE;AACE;;AAEF;;AAGE;AACE;;;AAIF;;AAEF;;AAGE;;;AAGN;;;;AASI;;;;;;;AAQA;;AAEE;;AACK;;;;;;;AAmBb;;"}
+{"version":3,"file":"CurrencyInput.cjs","sources":["../../../../src/components/Input/CurrencyInput/CurrencyInput.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentProps,\n  type FocusEvent,\n  forwardRef,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\n\nimport { useLatest } from '../../../hooks/useLatest'\nimport { Input } from '../Input'\n\nimport { formatCurrency } from './currencyInputHelper'\n\ntype Props = Omit<ComponentProps<typeof Input>, 'type' | 'value' | 'defaultValue'> & {\n  /** 通貨の値 */\n  value?: string\n  /** デフォルトで表示する通貨の値 */\n  defaultValue?: string\n  /** 入力値がフォーマットされたときに発火するコールバック関数 */\n  onFormatValue?: (value: string) => void\n}\n\nexport const CurrencyInput = forwardRef<HTMLInputElement, Props>(\n  ({ onFormatValue, onFocus, onBlur, value, defaultValue, className, ...rest }, ref) => {\n    const innerRef = useRef<HTMLInputElement>(null)\n    const [isFocused, setIsFocused] = useState(false)\n\n    const latest = useLatest({\n      onFocus,\n      onBlur,\n      onFormatValue,\n    })\n\n    const functions = useMemo(() => {\n      const formatValue = (formatted = '') => {\n        if (innerRef.current && formatted !== innerRef.current.value) {\n          innerRef.current.value = formatted\n          latest.onFormatValue?.(formatted)\n        }\n      }\n\n      return {\n        formatCurrencyValue: (raw = '') => {\n          formatValue(formatCurrency(raw))\n        },\n        handleFocus: (e: FocusEvent<HTMLInputElement>) => {\n          setIsFocused(true)\n\n          if (innerRef.current) {\n            const commaExcluded = innerRef.current.value.replace(/,/g, '')\n            formatValue(commaExcluded)\n          }\n\n          latest.onFocus?.(e)\n        },\n        handleBlur: (e: FocusEvent<HTMLInputElement>) => {\n          setIsFocused(false)\n\n          latest.onBlur?.(e)\n        },\n      }\n    }, [latest])\n\n    useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(\n      ref,\n      () => innerRef.current,\n      [],\n    )\n\n    useEffect(() => {\n      if (value === undefined && defaultValue !== undefined) {\n        functions.formatCurrencyValue(defaultValue)\n      }\n      // when component did mount\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [])\n\n    useEffect(() => {\n      if (!isFocused) {\n        if (value !== undefined) {\n          // for controlled component\n          functions.formatCurrencyValue(value)\n        } else if (innerRef.current) {\n          // for uncontrolled component\n          functions.formatCurrencyValue(innerRef.current.value)\n        }\n      }\n    }, [isFocused, value, functions])\n\n    return (\n      <Input\n        {...rest}\n        ref={innerRef}\n        type=\"text\"\n        value={value}\n        defaultValue={defaultValue}\n        onFocus={functions.handleFocus}\n        onBlur={functions.handleBlur}\n        className={`smarthr-ui-CurrencyInput${className ? ` ${className}` : ''}`}\n      />\n    )\n  },\n)\n"],"names":[],"mappings":";;;;;;;;;AA2BO;AAEH;;;;;;AAOC;AAED;AACE;AACE;AACE;AACA;;AAEJ;;AAGE;AACE;;AAEF;;AAGE;AACE;;;AAIF;;AAEF;;AAGE;;;AAGN;AAEA;;;AAQI;;;;;;;AAQA;;AAEE;;AACK;;;;;;;AAmBb;;"}

package/lib/components/Input/CurrencyInput/CurrencyInput.js

@@ -5,7 +5,7 @@ import { useLatest } from '../../../hooks/useLatest.js';
 import { Input } from '../Input.js';
 import { formatCurrency } from './currencyInputHelper.js';
 
-const CurrencyInput = forwardRef(({ onFormatValue, onFocus, onBlur, value, defaultValue, className = '', ...rest }, ref) => {
+const CurrencyInput = forwardRef(({ onFormatValue, onFocus, onBlur, value, defaultValue, className, ...rest }, ref) => {
     const innerRef = useRef(null);
     const [isFocused, setIsFocused] = useState(false);
     const latest = useLatest({
@@ -38,7 +38,7 @@ const CurrencyInput = forwardRef(({ onFormatValue, onFocus, onBlur, value, defau
             },
         };
     }, [latest]);
-    useImperativeHandle(ref, () => innerRef.current);
+    useImperativeHandle(ref, () => innerRef.current, []);
     useEffect(() => {
         if (value === undefined && defaultValue !== undefined) {
             functions.formatCurrencyValue(defaultValue);
@@ -58,7 +58,7 @@ const CurrencyInput = forwardRef(({ onFormatValue, onFocus, onBlur, value, defau
             }
         }
     }, [isFocused, value, functions]);
-    return (jsx(Input, { ...rest, type: "text", value: value, defaultValue: defaultValue, onFocus: functions.handleFocus, onBlur: functions.handleBlur, ref: innerRef, className: `smarthr-ui-CurrencyInput${className ? ` ${className}` : ''}` }));
+    return (jsx(Input, { ...rest, ref: innerRef, type: "text", value: value, defaultValue: defaultValue, onFocus: functions.handleFocus, onBlur: functions.handleBlur, className: `smarthr-ui-CurrencyInput${className ? ` ${className}` : ''}` }));
 });
 
 export { CurrencyInput };

package/lib/components/Input/CurrencyInput/CurrencyInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"CurrencyInput.js","sources":["../../../../src/components/Input/CurrencyInput/CurrencyInput.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentProps,\n  type FocusEvent,\n  forwardRef,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\n\nimport { useLatest } from '../../../hooks/useLatest'\nimport { Input } from '../Input'\n\nimport { formatCurrency } from './currencyInputHelper'\n\ntype Props = Omit<ComponentProps<typeof Input>, 'type' | 'value' | 'defaultValue'> & {\n  /** 通貨の値 */\n  value?: string\n  /** デフォルトで表示する通貨の値 */\n  defaultValue?: string\n  /** 入力値がフォーマットされたときに発火するコールバック関数 */\n  onFormatValue?: (value: string) => void\n}\n\nexport const CurrencyInput = forwardRef<HTMLInputElement, Props>(\n  ({ onFormatValue, onFocus, onBlur, value, defaultValue, className = '', ...rest }, ref) => {\n    const innerRef = useRef<HTMLInputElement>(null)\n    const [isFocused, setIsFocused] = useState(false)\n\n    const latest = useLatest({\n      onFocus,\n      onBlur,\n      onFormatValue,\n    })\n\n    const functions = useMemo(() => {\n      const formatValue = (formatted = '') => {\n        if (innerRef.current && formatted !== innerRef.current.value) {\n          innerRef.current.value = formatted\n          latest.onFormatValue?.(formatted)\n        }\n      }\n\n      return {\n        formatCurrencyValue: (raw = '') => {\n          formatValue(formatCurrency(raw))\n        },\n        handleFocus: (e: FocusEvent<HTMLInputElement>) => {\n          setIsFocused(true)\n\n          if (innerRef.current) {\n            const commaExcluded = innerRef.current.value.replace(/,/g, '')\n            formatValue(commaExcluded)\n          }\n\n          latest.onFocus?.(e)\n        },\n        handleBlur: (e: FocusEvent<HTMLInputElement>) => {\n          setIsFocused(false)\n\n          latest.onBlur?.(e)\n        },\n      }\n    }, [latest])\n\n    useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(\n      ref,\n      () => innerRef.current,\n    )\n\n    useEffect(() => {\n      if (value === undefined && defaultValue !== undefined) {\n        functions.formatCurrencyValue(defaultValue)\n      }\n      // when component did mount\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [])\n\n    useEffect(() => {\n      if (!isFocused) {\n        if (value !== undefined) {\n          // for controlled component\n          functions.formatCurrencyValue(value)\n        } else if (innerRef.current) {\n          // for uncontrolled component\n          functions.formatCurrencyValue(innerRef.current.value)\n        }\n      }\n    }, [isFocused, value, functions])\n\n    return (\n      <Input\n        {...rest}\n        type=\"text\"\n        value={value}\n        defaultValue={defaultValue}\n        onFocus={functions.handleFocus}\n        onBlur={functions.handleBlur}\n        ref={innerRef}\n        className={`smarthr-ui-CurrencyInput${className ? ` ${className}` : ''}`}\n      />\n    )\n  },\n)\n"],"names":[],"mappings":";;;;;;;AA2BO;AAEH;;;;;;AAOC;AAED;AACE;AACE;AACE;AACA;;AAEJ;;AAGE;AACE;;AAEF;;AAGE;AACE;;;AAIF;;AAEF;;AAGE;;;AAGN;;;;AASI;;;;;;;AAQA;;AAEE;;AACK;;;;;;;AAmBb;;"}
+{"version":3,"file":"CurrencyInput.js","sources":["../../../../src/components/Input/CurrencyInput/CurrencyInput.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentProps,\n  type FocusEvent,\n  forwardRef,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\n\nimport { useLatest } from '../../../hooks/useLatest'\nimport { Input } from '../Input'\n\nimport { formatCurrency } from './currencyInputHelper'\n\ntype Props = Omit<ComponentProps<typeof Input>, 'type' | 'value' | 'defaultValue'> & {\n  /** 通貨の値 */\n  value?: string\n  /** デフォルトで表示する通貨の値 */\n  defaultValue?: string\n  /** 入力値がフォーマットされたときに発火するコールバック関数 */\n  onFormatValue?: (value: string) => void\n}\n\nexport const CurrencyInput = forwardRef<HTMLInputElement, Props>(\n  ({ onFormatValue, onFocus, onBlur, value, defaultValue, className, ...rest }, ref) => {\n    const innerRef = useRef<HTMLInputElement>(null)\n    const [isFocused, setIsFocused] = useState(false)\n\n    const latest = useLatest({\n      onFocus,\n      onBlur,\n      onFormatValue,\n    })\n\n    const functions = useMemo(() => {\n      const formatValue = (formatted = '') => {\n        if (innerRef.current && formatted !== innerRef.current.value) {\n          innerRef.current.value = formatted\n          latest.onFormatValue?.(formatted)\n        }\n      }\n\n      return {\n        formatCurrencyValue: (raw = '') => {\n          formatValue(formatCurrency(raw))\n        },\n        handleFocus: (e: FocusEvent<HTMLInputElement>) => {\n          setIsFocused(true)\n\n          if (innerRef.current) {\n            const commaExcluded = innerRef.current.value.replace(/,/g, '')\n            formatValue(commaExcluded)\n          }\n\n          latest.onFocus?.(e)\n        },\n        handleBlur: (e: FocusEvent<HTMLInputElement>) => {\n          setIsFocused(false)\n\n          latest.onBlur?.(e)\n        },\n      }\n    }, [latest])\n\n    useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(\n      ref,\n      () => innerRef.current,\n      [],\n    )\n\n    useEffect(() => {\n      if (value === undefined && defaultValue !== undefined) {\n        functions.formatCurrencyValue(defaultValue)\n      }\n      // when component did mount\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [])\n\n    useEffect(() => {\n      if (!isFocused) {\n        if (value !== undefined) {\n          // for controlled component\n          functions.formatCurrencyValue(value)\n        } else if (innerRef.current) {\n          // for uncontrolled component\n          functions.formatCurrencyValue(innerRef.current.value)\n        }\n      }\n    }, [isFocused, value, functions])\n\n    return (\n      <Input\n        {...rest}\n        ref={innerRef}\n        type=\"text\"\n        value={value}\n        defaultValue={defaultValue}\n        onFocus={functions.handleFocus}\n        onBlur={functions.handleBlur}\n        className={`smarthr-ui-CurrencyInput${className ? ` ${className}` : ''}`}\n      />\n    )\n  },\n)\n"],"names":[],"mappings":";;;;;;;AA2BO;AAEH;;;;;;AAOC;AAED;AACE;AACE;AACE;AACA;;AAEJ;;AAGE;AACE;;AAEF;;AAGE;AACE;;;AAIF;;AAEF;;AAGE;;;AAGN;AAEA;;;AAQI;;;;;;;AAQA;;AAEE;;AACK;;;;;;;AAmBb;;"}

package/lib/components/Input/Input.cjs

@@ -16,20 +16,18 @@ const backgroundColor = {
     BORDER: 'border',
     ACTION_BACKGROUND: 'action-background',
 };
-const wrapperClassNameGenerator = index.tv({
-    base: [
-        'smarthr-ui-Input',
-        'shr-border-shorthand shr-box-border shr-inline-flex shr-cursor-text shr-items-center shr-gap-0.5 shr-rounded-m shr-bg-white shr-px-0.5',
-        'contrast-more:shr-border-high-contrast',
-        'focus-within:shr-focus-indicator',
-        'has-[[aria-invalid]]:shr-border-danger',
-        'has-[:disabled]:[&&&]:shr-border-default/50',
-        'has-[:disabled]:shr-pointer-events-none has-[:disabled]:shr-bg-white-darken',
-        'has-[[readonly]:not(:disabled)]:[&&&]:shr-border-[theme(backgroundColor.column)] has-[[readonly]:not(:disabled)]:[&&&]:shr-bg-column',
-    ],
-});
-const innerClassNameGenerator = index.tv({
+const classNameGenerator = index.tv({
     slots: {
+        wrapper: [
+            'smarthr-ui-Input',
+            'shr-border-shorthand shr-box-border shr-inline-flex shr-cursor-text shr-items-center shr-gap-0.5 shr-rounded-m shr-bg-white shr-px-0.5',
+            'contrast-more:shr-border-high-contrast',
+            'focus-within:shr-focus-indicator',
+            'has-[[aria-invalid]]:shr-border-danger',
+            'has-[:disabled]:[&&&]:shr-border-default/50',
+            'has-[:disabled]:shr-pointer-events-none has-[:disabled]:shr-bg-white-darken',
+            'has-[[readonly]:not(:disabled)]:[&&&]:shr-border-[theme(backgroundColor.column)] has-[[readonly]:not(:disabled)]:[&&&]:shr-bg-column',
+        ],
         input: [
             'smarthr-ui-Input-input',
             'shr-inline-block shr-w-full shr-grow shr-border-none shr-bg-transparent shr-py-0.75 shr-text-base shr-leading-none shr-text-black shr-outline-none shr-outline-0',
@@ -56,7 +54,7 @@ const DEFAULT_MAX_ATTR = {
 const Input = React.forwardRef(({ onFocus, onBlur, autoFocus, prefix, suffix, className, width, disabled, error, readOnly, bgColor, type, max, ...rest }, ref) => {
     const theme = hooks_useTheme.useTheme();
     const innerRef = React.useRef(null);
-    React.useImperativeHandle(ref, () => innerRef.current);
+    React.useImperativeHandle(ref, () => innerRef.current, []);
     const latest = hooks_useLatest.useLatest({ autoFocus });
     const functions = React.useMemo(() => ({
         handleInnerRef: (node) => {
@@ -68,9 +66,9 @@ const Input = React.forwardRef(({ onFocus, onBlur, autoFocus, prefix, suffix, cl
         handleDelegateClick: () => innerRef.current?.focus(),
     }), [latest]);
     const classNames = React.useMemo(() => {
-        const { input, affix } = innerClassNameGenerator();
+        const { wrapper, input, affix } = classNameGenerator();
         return {
-            wrapper: wrapperClassNameGenerator({ className }),
+            wrapper: wrapper({ className }),
             input: input(),
             prefix: affix({ className: 'smarthr-ui-Input-prefix' }),
             suffix: affix({ className: 'smarthr-ui-Input-suffix' }),
@@ -83,7 +81,7 @@ const Input = React.forwardRef(({ onFocus, onBlur, autoFocus, prefix, suffix, cl
             backgroundColor: styleColor,
             maxWidth: styleMaxWidth,
             width: styleMaxWidth ? '100%' : undefined,
-        }, children: [prefix && jsxRuntime.jsx("span", { className: classNames.prefix, children: prefix }), jsxRuntime.jsx("input", { ...rest, type: type, "data-smarthr-ui-input": "true", max: max || (type && DEFAULT_MAX_ATTR[type]) || undefined, onWheel: type === 'number' ? disableWheel : undefined, onFocus: onFocus, onBlur: onBlur, disabled: disabled, readOnly: readOnly, ref: functions.handleInnerRef, "aria-invalid": error || undefined, className: classNames.input }), suffix && jsxRuntime.jsx("span", { className: classNames.suffix, children: suffix })] }));
+        }, children: [prefix && jsxRuntime.jsx("span", { className: classNames.prefix, children: prefix }), jsxRuntime.jsx("input", { ...rest, ref: functions.handleInnerRef, type: type, disabled: disabled, readOnly: readOnly, max: max || (type && DEFAULT_MAX_ATTR[type]) || undefined, "aria-invalid": error || undefined, "data-smarthr-ui-input": "true", onWheel: type === 'number' ? disableWheel : undefined, onFocus: onFocus, onBlur: onBlur, className: classNames.input }), suffix && jsxRuntime.jsx("span", { className: classNames.suffix, children: suffix })] }));
 });
 const disableWheel = (e) => {
     // wheel イベントに preventDefault はないため

package/lib/components/Input/Input.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Input.cjs","sources":["../../../src/components/Input/Input.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentPropsWithRef,\n  type MutableRefObject,\n  type ReactNode,\n  type WheelEvent,\n  forwardRef,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useLatest } from '../../hooks/useLatest'\nimport { useTheme } from '../../hooks/useTheme'\n\ntype BaseProps = {\n  /** input 要素の `type` 値 */\n  type?: HTMLInputElement['type']\n  /** フォームにエラーがあるかどうか */\n  error?: boolean\n  /** コンポーネントの幅 */\n  width?: number | string\n  /** オートフォーカスを行うかどうか */\n  autoFocus?: boolean\n  /** コンポーネント内の先頭に表示する内容 */\n  prefix?: ReactNode\n  /** コンポーネント内の末尾に表示する内容 */\n  suffix?: ReactNode\n  /** 背景色。readOnly を下地の上に載せる場合に使う */\n  bgColor?: keyof typeof backgroundColor\n  /**\n   * @deprecated placeholder属性は非推奨です。別途ヒント用要素を設置するか、それらの領域を確保出来ない場合はTooltipコンポーネントの利用を検討してください。\n   */\n  placeholder?: string\n}\ntype Props = BaseProps & Omit<ComponentPropsWithRef<'input'>, keyof BaseProps | 'onWheel'>\n\nexport const backgroundColor = {\n  BACKGROUND: 'background',\n  COLUMN: 'column',\n  BASE_GREY: 'base-grey',\n  OVER_BACKGROUND: 'over-background',\n  HEAD: 'head',\n  BORDER: 'border',\n  ACTION_BACKGROUND: 'action-background',\n} as const\n\nconst wrapperClassNameGenerator = tv({\n  base: [\n    'smarthr-ui-Input',\n    'shr-border-shorthand shr-box-border shr-inline-flex shr-cursor-text shr-items-center shr-gap-0.5 shr-rounded-m shr-bg-white shr-px-0.5',\n    'contrast-more:shr-border-high-contrast',\n    'focus-within:shr-focus-indicator',\n    'has-[[aria-invalid]]:shr-border-danger',\n    'has-[:disabled]:[&&&]:shr-border-default/50',\n    'has-[:disabled]:shr-pointer-events-none has-[:disabled]:shr-bg-white-darken',\n    'has-[[readonly]:not(:disabled)]:[&&&]:shr-border-[theme(backgroundColor.column)] has-[[readonly]:not(:disabled)]:[&&&]:shr-bg-column',\n  ],\n})\nconst innerClassNameGenerator = tv({\n  slots: {\n    input: [\n      'smarthr-ui-Input-input',\n      'shr-inline-block shr-w-full shr-grow shr-border-none shr-bg-transparent shr-py-0.75 shr-text-base shr-leading-none shr-text-black shr-outline-none shr-outline-0',\n      'placeholder:shr-text-grey',\n      'disabled:shr-text-disabled disabled:shr-opacity-100',\n      'shr-h-[theme(fontSize.base)]',\n      // HINT: 日付系inputがsafariなどで対応されていないため、input要素内が空白になりフォームが潰れる場合がある\n      // マジックナンバーになるが、ほかに適切なプロパティがないため、min-widthで最低幅を指定することで防ぐ\n      '[&[type=\"datetime-local\"]]:shr-min-w-[11em] [&[type=\"month\"]]:shr-min-w-[8em] [&[type=\"time\"]]:shr-min-w-[5em]',\n    ],\n    affix: [\n      'shr-flex shr-shrink-0 shr-items-center shr-text-grey',\n      '[.smarthr-ui-Input:has(:disabled)_&]:shr-text-disabled [.smarthr-ui-Input:has(:disabled)_&]:shr-opacity-100',\n    ],\n  },\n})\n\n// HINT: PC版ブラウザで年が6桁入力できる場合、コピー&ペーストが正常に動作しないなど、UI上の問題が発生する場合がある\n// 回避のためmaxで年四桁を指定する\nconst DEFAULT_MAX_ATTR = {\n  date: '9999-12-31',\n  'datetime-local': '9999-12-31T23:59',\n  month: '9999-12',\n}\n\nexport const Input = forwardRef<HTMLInputElement, Props>(\n  (\n    {\n      onFocus,\n      onBlur,\n      autoFocus,\n      prefix,\n      suffix,\n      className,\n      width,\n      disabled,\n      error,\n      readOnly,\n      bgColor,\n      type,\n      max,\n      ...rest\n    },\n    ref,\n  ) => {\n    const theme = useTheme()\n    const innerRef: MutableRefObject<HTMLInputElement | null> = useRef(null)\n\n    useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(\n      ref,\n      () => innerRef.current,\n    )\n\n    const latest = useLatest({ autoFocus })\n\n    const functions = useMemo(\n      () => ({\n        handleInnerRef: (node: HTMLInputElement | null) => {\n          innerRef.current = node\n\n          if (latest.autoFocus && node) {\n            node.focus()\n          }\n        },\n        handleDelegateClick: () => innerRef.current?.focus(),\n      }),\n      [latest],\n    )\n\n    const classNames = useMemo(() => {\n      const { input, affix } = innerClassNameGenerator()\n\n      return {\n        wrapper: wrapperClassNameGenerator({ className }),\n        input: input(),\n        prefix: affix({ className: 'smarthr-ui-Input-prefix' }),\n        suffix: affix({ className: 'smarthr-ui-Input-suffix' }),\n      }\n    }, [className])\n\n    const styleColor = bgColor ? theme.backgroundColor[backgroundColor[bgColor]] : undefined\n    const styleMaxWidth = typeof width === 'number' ? `${width}px` : width\n\n    return (\n      <span\n        role=\"presentation\"\n        onClick={functions.handleDelegateClick}\n        className={classNames.wrapper}\n        style={{\n          borderColor: styleColor,\n          backgroundColor: styleColor,\n          maxWidth: styleMaxWidth,\n          width: styleMaxWidth ? '100%' : undefined,\n        }}\n      >\n        {prefix && <span className={classNames.prefix}>{prefix}</span>}\n        <input\n          {...rest}\n          type={type}\n          data-smarthr-ui-input=\"true\"\n          max={\n            max || (type && DEFAULT_MAX_ATTR[type as keyof typeof DEFAULT_MAX_ATTR]) || undefined\n          }\n          onWheel={type === 'number' ? disableWheel : undefined}\n          onFocus={onFocus}\n          onBlur={onBlur}\n          disabled={disabled}\n          readOnly={readOnly}\n          ref={functions.handleInnerRef}\n          aria-invalid={error || undefined}\n          className={classNames.input}\n        />\n        {suffix && <span className={classNames.suffix}>{suffix}</span>}\n      </span>\n    )\n  },\n)\n\nconst disableWheel = (e: WheelEvent) => {\n  // wheel イベントに preventDefault はないため\n  if (e.target) {\n    ;(e.target as HTMLInputElement).blur()\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;AAuCO;AACL;AACA;AACA;AACA;AACA;AACA;AACA;;AAGF;AACE;;;;;;;;;AASC;AACF;AACD;AACE;AACE;;;;;;;;;AASC;AACD;;;AAGC;AACF;AACF;AAED;AACA;AACA;AACE;AACA;AACA;;AAGK;AAoBH;AACA;;;AASA;AAEI;AACE;AAEA;;;;;AAKH;AAIH;;;AAII;;;;;AAKJ;AAEA;AACA;AAEA;AAMM;AACA;AACA;;;AAwBR;AAGF;;AAEE;AACI;;AAEN;;;"}
+{"version":3,"file":"Input.cjs","sources":["../../../src/components/Input/Input.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentPropsWithRef,\n  type MutableRefObject,\n  type ReactNode,\n  type WheelEvent,\n  forwardRef,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useLatest } from '../../hooks/useLatest'\nimport { useTheme } from '../../hooks/useTheme'\n\ntype BaseProps = {\n  /** input 要素の `type` 値 */\n  type?: HTMLInputElement['type']\n  /** フォームにエラーがあるかどうか */\n  error?: boolean\n  /** コンポーネントの幅 */\n  width?: number | string\n  /** オートフォーカスを行うかどうか */\n  autoFocus?: boolean\n  /** コンポーネント内の先頭に表示する内容 */\n  prefix?: ReactNode\n  /** コンポーネント内の末尾に表示する内容 */\n  suffix?: ReactNode\n  /** 背景色。readOnly を下地の上に載せる場合に使う */\n  bgColor?: keyof typeof backgroundColor\n  /**\n   * @deprecated placeholder属性は非推奨です。別途ヒント用要素を設置するか、それらの領域を確保出来ない場合はTooltipコンポーネントの利用を検討してください。\n   */\n  placeholder?: string\n}\ntype Props = BaseProps & Omit<ComponentPropsWithRef<'input'>, keyof BaseProps | 'onWheel'>\n\nexport const backgroundColor = {\n  BACKGROUND: 'background',\n  COLUMN: 'column',\n  BASE_GREY: 'base-grey',\n  OVER_BACKGROUND: 'over-background',\n  HEAD: 'head',\n  BORDER: 'border',\n  ACTION_BACKGROUND: 'action-background',\n} as const\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: [\n      'smarthr-ui-Input',\n      'shr-border-shorthand shr-box-border shr-inline-flex shr-cursor-text shr-items-center shr-gap-0.5 shr-rounded-m shr-bg-white shr-px-0.5',\n      'contrast-more:shr-border-high-contrast',\n      'focus-within:shr-focus-indicator',\n      'has-[[aria-invalid]]:shr-border-danger',\n      'has-[:disabled]:[&&&]:shr-border-default/50',\n      'has-[:disabled]:shr-pointer-events-none has-[:disabled]:shr-bg-white-darken',\n      'has-[[readonly]:not(:disabled)]:[&&&]:shr-border-[theme(backgroundColor.column)] has-[[readonly]:not(:disabled)]:[&&&]:shr-bg-column',\n    ],\n    input: [\n      'smarthr-ui-Input-input',\n      'shr-inline-block shr-w-full shr-grow shr-border-none shr-bg-transparent shr-py-0.75 shr-text-base shr-leading-none shr-text-black shr-outline-none shr-outline-0',\n      'placeholder:shr-text-grey',\n      'disabled:shr-text-disabled disabled:shr-opacity-100',\n      'shr-h-[theme(fontSize.base)]',\n      // HINT: 日付系inputがsafariなどで対応されていないため、input要素内が空白になりフォームが潰れる場合がある\n      // マジックナンバーになるが、ほかに適切なプロパティがないため、min-widthで最低幅を指定することで防ぐ\n      '[&[type=\"datetime-local\"]]:shr-min-w-[11em] [&[type=\"month\"]]:shr-min-w-[8em] [&[type=\"time\"]]:shr-min-w-[5em]',\n    ],\n    affix: [\n      'shr-flex shr-shrink-0 shr-items-center shr-text-grey',\n      '[.smarthr-ui-Input:has(:disabled)_&]:shr-text-disabled [.smarthr-ui-Input:has(:disabled)_&]:shr-opacity-100',\n    ],\n  },\n})\n\n// HINT: PC版ブラウザで年が6桁入力できる場合、コピー&ペーストが正常に動作しないなど、UI上の問題が発生する場合がある\n// 回避のためmaxで年四桁を指定する\nconst DEFAULT_MAX_ATTR = {\n  date: '9999-12-31',\n  'datetime-local': '9999-12-31T23:59',\n  month: '9999-12',\n}\n\nexport const Input = forwardRef<HTMLInputElement, Props>(\n  (\n    {\n      onFocus,\n      onBlur,\n      autoFocus,\n      prefix,\n      suffix,\n      className,\n      width,\n      disabled,\n      error,\n      readOnly,\n      bgColor,\n      type,\n      max,\n      ...rest\n    },\n    ref,\n  ) => {\n    const theme = useTheme()\n    const innerRef: MutableRefObject<HTMLInputElement | null> = useRef(null)\n\n    useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(\n      ref,\n      () => innerRef.current,\n      [],\n    )\n\n    const latest = useLatest({ autoFocus })\n\n    const functions = useMemo(\n      () => ({\n        handleInnerRef: (node: HTMLInputElement | null) => {\n          innerRef.current = node\n\n          if (latest.autoFocus && node) {\n            node.focus()\n          }\n        },\n        handleDelegateClick: () => innerRef.current?.focus(),\n      }),\n      [latest],\n    )\n\n    const classNames = useMemo(() => {\n      const { wrapper, input, affix } = classNameGenerator()\n\n      return {\n        wrapper: wrapper({ className }),\n        input: input(),\n        prefix: affix({ className: 'smarthr-ui-Input-prefix' }),\n        suffix: affix({ className: 'smarthr-ui-Input-suffix' }),\n      }\n    }, [className])\n\n    const styleColor = bgColor ? theme.backgroundColor[backgroundColor[bgColor]] : undefined\n    const styleMaxWidth = typeof width === 'number' ? `${width}px` : width\n\n    return (\n      <span\n        role=\"presentation\"\n        onClick={functions.handleDelegateClick}\n        className={classNames.wrapper}\n        style={{\n          borderColor: styleColor,\n          backgroundColor: styleColor,\n          maxWidth: styleMaxWidth,\n          width: styleMaxWidth ? '100%' : undefined,\n        }}\n      >\n        {prefix && <span className={classNames.prefix}>{prefix}</span>}\n        <input\n          {...rest}\n          ref={functions.handleInnerRef}\n          type={type}\n          disabled={disabled}\n          readOnly={readOnly}\n          max={\n            max || (type && DEFAULT_MAX_ATTR[type as keyof typeof DEFAULT_MAX_ATTR]) || undefined\n          }\n          aria-invalid={error || undefined}\n          data-smarthr-ui-input=\"true\"\n          onWheel={type === 'number' ? disableWheel : undefined}\n          onFocus={onFocus}\n          onBlur={onBlur}\n          className={classNames.input}\n        />\n        {suffix && <span className={classNames.suffix}>{suffix}</span>}\n      </span>\n    )\n  },\n)\n\nconst disableWheel = (e: WheelEvent) => {\n  // wheel イベントに preventDefault はないため\n  if (e.target) {\n    ;(e.target as HTMLInputElement).blur()\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;AAuCO;AACL;AACA;AACA;AACA;AACA;AACA;AACA;;AAGF;AACE;AACE;;;;;;;;;AASC;AACD;;;;;;;;;AASC;AACD;;;AAGC;AACF;AACF;AAED;AACA;AACA;AACE;AACA;AACA;;AAGK;AAoBH;AACA;AAEA;;AAQA;AAEI;AACE;AAEA;;;;;AAKH;AAIH;;;AAII;;;;;AAKJ;AAEA;AACA;AAEA;AAMM;AACA;AACA;;;AAwBR;AAGF;;AAEE;AACI;;AAEN;;;"}

package/lib/components/Input/Input.js

@@ -14,20 +14,18 @@ const backgroundColor = {
     BORDER: 'border',
     ACTION_BACKGROUND: 'action-background',
 };
-const wrapperClassNameGenerator = ce({
-    base: [
-        'smarthr-ui-Input',
-        'shr-border-shorthand shr-box-border shr-inline-flex shr-cursor-text shr-items-center shr-gap-0.5 shr-rounded-m shr-bg-white shr-px-0.5',
-        'contrast-more:shr-border-high-contrast',
-        'focus-within:shr-focus-indicator',
-        'has-[[aria-invalid]]:shr-border-danger',
-        'has-[:disabled]:[&&&]:shr-border-default/50',
-        'has-[:disabled]:shr-pointer-events-none has-[:disabled]:shr-bg-white-darken',
-        'has-[[readonly]:not(:disabled)]:[&&&]:shr-border-[theme(backgroundColor.column)] has-[[readonly]:not(:disabled)]:[&&&]:shr-bg-column',
-    ],
-});
-const innerClassNameGenerator = ce({
+const classNameGenerator = ce({
     slots: {
+        wrapper: [
+            'smarthr-ui-Input',
+            'shr-border-shorthand shr-box-border shr-inline-flex shr-cursor-text shr-items-center shr-gap-0.5 shr-rounded-m shr-bg-white shr-px-0.5',
+            'contrast-more:shr-border-high-contrast',
+            'focus-within:shr-focus-indicator',
+            'has-[[aria-invalid]]:shr-border-danger',
+            'has-[:disabled]:[&&&]:shr-border-default/50',
+            'has-[:disabled]:shr-pointer-events-none has-[:disabled]:shr-bg-white-darken',
+            'has-[[readonly]:not(:disabled)]:[&&&]:shr-border-[theme(backgroundColor.column)] has-[[readonly]:not(:disabled)]:[&&&]:shr-bg-column',
+        ],
         input: [
             'smarthr-ui-Input-input',
             'shr-inline-block shr-w-full shr-grow shr-border-none shr-bg-transparent shr-py-0.75 shr-text-base shr-leading-none shr-text-black shr-outline-none shr-outline-0',
@@ -54,7 +52,7 @@ const DEFAULT_MAX_ATTR = {
 const Input = forwardRef(({ onFocus, onBlur, autoFocus, prefix, suffix, className, width, disabled, error, readOnly, bgColor, type, max, ...rest }, ref) => {
     const theme = useTheme();
     const innerRef = useRef(null);
-    useImperativeHandle(ref, () => innerRef.current);
+    useImperativeHandle(ref, () => innerRef.current, []);
     const latest = useLatest({ autoFocus });
     const functions = useMemo(() => ({
         handleInnerRef: (node) => {
@@ -66,9 +64,9 @@ const Input = forwardRef(({ onFocus, onBlur, autoFocus, prefix, suffix, classNam
         handleDelegateClick: () => innerRef.current?.focus(),
     }), [latest]);
     const classNames = useMemo(() => {
-        const { input, affix } = innerClassNameGenerator();
+        const { wrapper, input, affix } = classNameGenerator();
         return {
-            wrapper: wrapperClassNameGenerator({ className }),
+            wrapper: wrapper({ className }),
             input: input(),
             prefix: affix({ className: 'smarthr-ui-Input-prefix' }),
             suffix: affix({ className: 'smarthr-ui-Input-suffix' }),
@@ -81,7 +79,7 @@ const Input = forwardRef(({ onFocus, onBlur, autoFocus, prefix, suffix, classNam
             backgroundColor: styleColor,
             maxWidth: styleMaxWidth,
             width: styleMaxWidth ? '100%' : undefined,
-        }, children: [prefix && jsx("span", { className: classNames.prefix, children: prefix }), jsx("input", { ...rest, type: type, "data-smarthr-ui-input": "true", max: max || (type && DEFAULT_MAX_ATTR[type]) || undefined, onWheel: type === 'number' ? disableWheel : undefined, onFocus: onFocus, onBlur: onBlur, disabled: disabled, readOnly: readOnly, ref: functions.handleInnerRef, "aria-invalid": error || undefined, className: classNames.input }), suffix && jsx("span", { className: classNames.suffix, children: suffix })] }));
+        }, children: [prefix && jsx("span", { className: classNames.prefix, children: prefix }), jsx("input", { ...rest, ref: functions.handleInnerRef, type: type, disabled: disabled, readOnly: readOnly, max: max || (type && DEFAULT_MAX_ATTR[type]) || undefined, "aria-invalid": error || undefined, "data-smarthr-ui-input": "true", onWheel: type === 'number' ? disableWheel : undefined, onFocus: onFocus, onBlur: onBlur, className: classNames.input }), suffix && jsx("span", { className: classNames.suffix, children: suffix })] }));
 });
 const disableWheel = (e) => {
     // wheel イベントに preventDefault はないため

package/lib/components/Input/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sources":["../../../src/components/Input/Input.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentPropsWithRef,\n  type MutableRefObject,\n  type ReactNode,\n  type WheelEvent,\n  forwardRef,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useLatest } from '../../hooks/useLatest'\nimport { useTheme } from '../../hooks/useTheme'\n\ntype BaseProps = {\n  /** input 要素の `type` 値 */\n  type?: HTMLInputElement['type']\n  /** フォームにエラーがあるかどうか */\n  error?: boolean\n  /** コンポーネントの幅 */\n  width?: number | string\n  /** オートフォーカスを行うかどうか */\n  autoFocus?: boolean\n  /** コンポーネント内の先頭に表示する内容 */\n  prefix?: ReactNode\n  /** コンポーネント内の末尾に表示する内容 */\n  suffix?: ReactNode\n  /** 背景色。readOnly を下地の上に載せる場合に使う */\n  bgColor?: keyof typeof backgroundColor\n  /**\n   * @deprecated placeholder属性は非推奨です。別途ヒント用要素を設置するか、それらの領域を確保出来ない場合はTooltipコンポーネントの利用を検討してください。\n   */\n  placeholder?: string\n}\ntype Props = BaseProps & Omit<ComponentPropsWithRef<'input'>, keyof BaseProps | 'onWheel'>\n\nexport const backgroundColor = {\n  BACKGROUND: 'background',\n  COLUMN: 'column',\n  BASE_GREY: 'base-grey',\n  OVER_BACKGROUND: 'over-background',\n  HEAD: 'head',\n  BORDER: 'border',\n  ACTION_BACKGROUND: 'action-background',\n} as const\n\nconst wrapperClassNameGenerator = tv({\n  base: [\n    'smarthr-ui-Input',\n    'shr-border-shorthand shr-box-border shr-inline-flex shr-cursor-text shr-items-center shr-gap-0.5 shr-rounded-m shr-bg-white shr-px-0.5',\n    'contrast-more:shr-border-high-contrast',\n    'focus-within:shr-focus-indicator',\n    'has-[[aria-invalid]]:shr-border-danger',\n    'has-[:disabled]:[&&&]:shr-border-default/50',\n    'has-[:disabled]:shr-pointer-events-none has-[:disabled]:shr-bg-white-darken',\n    'has-[[readonly]:not(:disabled)]:[&&&]:shr-border-[theme(backgroundColor.column)] has-[[readonly]:not(:disabled)]:[&&&]:shr-bg-column',\n  ],\n})\nconst innerClassNameGenerator = tv({\n  slots: {\n    input: [\n      'smarthr-ui-Input-input',\n      'shr-inline-block shr-w-full shr-grow shr-border-none shr-bg-transparent shr-py-0.75 shr-text-base shr-leading-none shr-text-black shr-outline-none shr-outline-0',\n      'placeholder:shr-text-grey',\n      'disabled:shr-text-disabled disabled:shr-opacity-100',\n      'shr-h-[theme(fontSize.base)]',\n      // HINT: 日付系inputがsafariなどで対応されていないため、input要素内が空白になりフォームが潰れる場合がある\n      // マジックナンバーになるが、ほかに適切なプロパティがないため、min-widthで最低幅を指定することで防ぐ\n      '[&[type=\"datetime-local\"]]:shr-min-w-[11em] [&[type=\"month\"]]:shr-min-w-[8em] [&[type=\"time\"]]:shr-min-w-[5em]',\n    ],\n    affix: [\n      'shr-flex shr-shrink-0 shr-items-center shr-text-grey',\n      '[.smarthr-ui-Input:has(:disabled)_&]:shr-text-disabled [.smarthr-ui-Input:has(:disabled)_&]:shr-opacity-100',\n    ],\n  },\n})\n\n// HINT: PC版ブラウザで年が6桁入力できる場合、コピー&ペーストが正常に動作しないなど、UI上の問題が発生する場合がある\n// 回避のためmaxで年四桁を指定する\nconst DEFAULT_MAX_ATTR = {\n  date: '9999-12-31',\n  'datetime-local': '9999-12-31T23:59',\n  month: '9999-12',\n}\n\nexport const Input = forwardRef<HTMLInputElement, Props>(\n  (\n    {\n      onFocus,\n      onBlur,\n      autoFocus,\n      prefix,\n      suffix,\n      className,\n      width,\n      disabled,\n      error,\n      readOnly,\n      bgColor,\n      type,\n      max,\n      ...rest\n    },\n    ref,\n  ) => {\n    const theme = useTheme()\n    const innerRef: MutableRefObject<HTMLInputElement | null> = useRef(null)\n\n    useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(\n      ref,\n      () => innerRef.current,\n    )\n\n    const latest = useLatest({ autoFocus })\n\n    const functions = useMemo(\n      () => ({\n        handleInnerRef: (node: HTMLInputElement | null) => {\n          innerRef.current = node\n\n          if (latest.autoFocus && node) {\n            node.focus()\n          }\n        },\n        handleDelegateClick: () => innerRef.current?.focus(),\n      }),\n      [latest],\n    )\n\n    const classNames = useMemo(() => {\n      const { input, affix } = innerClassNameGenerator()\n\n      return {\n        wrapper: wrapperClassNameGenerator({ className }),\n        input: input(),\n        prefix: affix({ className: 'smarthr-ui-Input-prefix' }),\n        suffix: affix({ className: 'smarthr-ui-Input-suffix' }),\n      }\n    }, [className])\n\n    const styleColor = bgColor ? theme.backgroundColor[backgroundColor[bgColor]] : undefined\n    const styleMaxWidth = typeof width === 'number' ? `${width}px` : width\n\n    return (\n      <span\n        role=\"presentation\"\n        onClick={functions.handleDelegateClick}\n        className={classNames.wrapper}\n        style={{\n          borderColor: styleColor,\n          backgroundColor: styleColor,\n          maxWidth: styleMaxWidth,\n          width: styleMaxWidth ? '100%' : undefined,\n        }}\n      >\n        {prefix && <span className={classNames.prefix}>{prefix}</span>}\n        <input\n          {...rest}\n          type={type}\n          data-smarthr-ui-input=\"true\"\n          max={\n            max || (type && DEFAULT_MAX_ATTR[type as keyof typeof DEFAULT_MAX_ATTR]) || undefined\n          }\n          onWheel={type === 'number' ? disableWheel : undefined}\n          onFocus={onFocus}\n          onBlur={onBlur}\n          disabled={disabled}\n          readOnly={readOnly}\n          ref={functions.handleInnerRef}\n          aria-invalid={error || undefined}\n          className={classNames.input}\n        />\n        {suffix && <span className={classNames.suffix}>{suffix}</span>}\n      </span>\n    )\n  },\n)\n\nconst disableWheel = (e: WheelEvent) => {\n  // wheel イベントに preventDefault はないため\n  if (e.target) {\n    ;(e.target as HTMLInputElement).blur()\n  }\n}\n"],"names":[],"mappings":";;;;;;;AAuCO;AACL;AACA;AACA;AACA;AACA;AACA;AACA;;AAGF;AACE;;;;;;;;;AASC;AACF;AACD;AACE;AACE;;;;;;;;;AASC;AACD;;;AAGC;AACF;AACF;AAED;AACA;AACA;AACE;AACA;AACA;;AAGK;AAoBH;AACA;;;AASA;AAEI;AACE;AAEA;;;;;AAKH;AAIH;;;AAII;;;;;AAKJ;AAEA;AACA;AAEA;AAMM;AACA;AACA;;;AAwBR;AAGF;;AAEE;AACI;;AAEN;;"}
+{"version":3,"file":"Input.js","sources":["../../../src/components/Input/Input.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentPropsWithRef,\n  type MutableRefObject,\n  type ReactNode,\n  type WheelEvent,\n  forwardRef,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useLatest } from '../../hooks/useLatest'\nimport { useTheme } from '../../hooks/useTheme'\n\ntype BaseProps = {\n  /** input 要素の `type` 値 */\n  type?: HTMLInputElement['type']\n  /** フォームにエラーがあるかどうか */\n  error?: boolean\n  /** コンポーネントの幅 */\n  width?: number | string\n  /** オートフォーカスを行うかどうか */\n  autoFocus?: boolean\n  /** コンポーネント内の先頭に表示する内容 */\n  prefix?: ReactNode\n  /** コンポーネント内の末尾に表示する内容 */\n  suffix?: ReactNode\n  /** 背景色。readOnly を下地の上に載せる場合に使う */\n  bgColor?: keyof typeof backgroundColor\n  /**\n   * @deprecated placeholder属性は非推奨です。別途ヒント用要素を設置するか、それらの領域を確保出来ない場合はTooltipコンポーネントの利用を検討してください。\n   */\n  placeholder?: string\n}\ntype Props = BaseProps & Omit<ComponentPropsWithRef<'input'>, keyof BaseProps | 'onWheel'>\n\nexport const backgroundColor = {\n  BACKGROUND: 'background',\n  COLUMN: 'column',\n  BASE_GREY: 'base-grey',\n  OVER_BACKGROUND: 'over-background',\n  HEAD: 'head',\n  BORDER: 'border',\n  ACTION_BACKGROUND: 'action-background',\n} as const\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: [\n      'smarthr-ui-Input',\n      'shr-border-shorthand shr-box-border shr-inline-flex shr-cursor-text shr-items-center shr-gap-0.5 shr-rounded-m shr-bg-white shr-px-0.5',\n      'contrast-more:shr-border-high-contrast',\n      'focus-within:shr-focus-indicator',\n      'has-[[aria-invalid]]:shr-border-danger',\n      'has-[:disabled]:[&&&]:shr-border-default/50',\n      'has-[:disabled]:shr-pointer-events-none has-[:disabled]:shr-bg-white-darken',\n      'has-[[readonly]:not(:disabled)]:[&&&]:shr-border-[theme(backgroundColor.column)] has-[[readonly]:not(:disabled)]:[&&&]:shr-bg-column',\n    ],\n    input: [\n      'smarthr-ui-Input-input',\n      'shr-inline-block shr-w-full shr-grow shr-border-none shr-bg-transparent shr-py-0.75 shr-text-base shr-leading-none shr-text-black shr-outline-none shr-outline-0',\n      'placeholder:shr-text-grey',\n      'disabled:shr-text-disabled disabled:shr-opacity-100',\n      'shr-h-[theme(fontSize.base)]',\n      // HINT: 日付系inputがsafariなどで対応されていないため、input要素内が空白になりフォームが潰れる場合がある\n      // マジックナンバーになるが、ほかに適切なプロパティがないため、min-widthで最低幅を指定することで防ぐ\n      '[&[type=\"datetime-local\"]]:shr-min-w-[11em] [&[type=\"month\"]]:shr-min-w-[8em] [&[type=\"time\"]]:shr-min-w-[5em]',\n    ],\n    affix: [\n      'shr-flex shr-shrink-0 shr-items-center shr-text-grey',\n      '[.smarthr-ui-Input:has(:disabled)_&]:shr-text-disabled [.smarthr-ui-Input:has(:disabled)_&]:shr-opacity-100',\n    ],\n  },\n})\n\n// HINT: PC版ブラウザで年が6桁入力できる場合、コピー&ペーストが正常に動作しないなど、UI上の問題が発生する場合がある\n// 回避のためmaxで年四桁を指定する\nconst DEFAULT_MAX_ATTR = {\n  date: '9999-12-31',\n  'datetime-local': '9999-12-31T23:59',\n  month: '9999-12',\n}\n\nexport const Input = forwardRef<HTMLInputElement, Props>(\n  (\n    {\n      onFocus,\n      onBlur,\n      autoFocus,\n      prefix,\n      suffix,\n      className,\n      width,\n      disabled,\n      error,\n      readOnly,\n      bgColor,\n      type,\n      max,\n      ...rest\n    },\n    ref,\n  ) => {\n    const theme = useTheme()\n    const innerRef: MutableRefObject<HTMLInputElement | null> = useRef(null)\n\n    useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(\n      ref,\n      () => innerRef.current,\n      [],\n    )\n\n    const latest = useLatest({ autoFocus })\n\n    const functions = useMemo(\n      () => ({\n        handleInnerRef: (node: HTMLInputElement | null) => {\n          innerRef.current = node\n\n          if (latest.autoFocus && node) {\n            node.focus()\n          }\n        },\n        handleDelegateClick: () => innerRef.current?.focus(),\n      }),\n      [latest],\n    )\n\n    const classNames = useMemo(() => {\n      const { wrapper, input, affix } = classNameGenerator()\n\n      return {\n        wrapper: wrapper({ className }),\n        input: input(),\n        prefix: affix({ className: 'smarthr-ui-Input-prefix' }),\n        suffix: affix({ className: 'smarthr-ui-Input-suffix' }),\n      }\n    }, [className])\n\n    const styleColor = bgColor ? theme.backgroundColor[backgroundColor[bgColor]] : undefined\n    const styleMaxWidth = typeof width === 'number' ? `${width}px` : width\n\n    return (\n      <span\n        role=\"presentation\"\n        onClick={functions.handleDelegateClick}\n        className={classNames.wrapper}\n        style={{\n          borderColor: styleColor,\n          backgroundColor: styleColor,\n          maxWidth: styleMaxWidth,\n          width: styleMaxWidth ? '100%' : undefined,\n        }}\n      >\n        {prefix && <span className={classNames.prefix}>{prefix}</span>}\n        <input\n          {...rest}\n          ref={functions.handleInnerRef}\n          type={type}\n          disabled={disabled}\n          readOnly={readOnly}\n          max={\n            max || (type && DEFAULT_MAX_ATTR[type as keyof typeof DEFAULT_MAX_ATTR]) || undefined\n          }\n          aria-invalid={error || undefined}\n          data-smarthr-ui-input=\"true\"\n          onWheel={type === 'number' ? disableWheel : undefined}\n          onFocus={onFocus}\n          onBlur={onBlur}\n          className={classNames.input}\n        />\n        {suffix && <span className={classNames.suffix}>{suffix}</span>}\n      </span>\n    )\n  },\n)\n\nconst disableWheel = (e: WheelEvent) => {\n  // wheel イベントに preventDefault はないため\n  if (e.target) {\n    ;(e.target as HTMLInputElement).blur()\n  }\n}\n"],"names":[],"mappings":";;;;;;;AAuCO;AACL;AACA;AACA;AACA;AACA;AACA;AACA;;AAGF;AACE;AACE;;;;;;;;;AASC;AACD;;;;;;;;;AASC;AACD;;;AAGC;AACF;AACF;AAED;AACA;AACA;AACE;AACA;AACA;;AAGK;AAoBH;AACA;AAEA;;AAQA;AAEI;AACE;AAEA;;;;;AAKH;AAIH;;;AAII;;;;;AAKJ;AAEA;AACA;AAEA;AAMM;AACA;AACA;;;AAwBR;AAGF;;AAEE;AACI;;AAEN;;"}