smarthr-ui 97.0.0 → 98.0.0

package/lib/components/Combobox/SingleCombobox/SingleCombobox.js.map

@@ -1 +1 @@
-{"version":3,"file":"SingleCombobox.js","sources":["../../../../src/components/Combobox/SingleCombobox/SingleCombobox.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ChangeEvent,\n  type ComponentPropsWithoutRef,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactNode,\n  type Ref,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport innerText from 'react-innertext'\nimport { tv } from 'tailwind-variants'\n\nimport { useClick } from '../../../hooks/useClick'\nimport { useTheme } from '../../../hooks/useTheme'\nimport { useIntl } from '../../../intl'\nimport { genericsForwardRef } from '../../../libs/util'\nimport { UnstyledButton } from '../../Button'\nimport { FaCaretDownIcon, FaCircleXmarkIcon } from '../../Icon'\nimport { Input } from '../../Input'\nimport { useListbox } from '../useListbox'\nimport { useSingleOptions } from '../useOptions'\n\nimport type { ComboboxItem, AbstractProps as ComboboxProps } from '../types'\n\ntype AbstractProps<T> = ComboboxProps<T> & {\n  /**\n   * 選択されているアイテム\n   */\n  selectedItem: ComboboxItem<T> | null\n  /**\n   * デフォルトで選択されるアイテム\n   */\n  defaultItem?: ComboboxItem<T>\n  /**\n   * コンポーネント内の先頭に表示する内容\n   */\n  prefix?: ReactNode\n  /**\n   * 選択されているアイテムがクリアされた時に発火するコールバック関数\n   */\n  onClear?: () => void\n  /**\n   * 選択されているアイテムがクリアされた時に発火するコールバック関数\n   * 指定している場合、クリア時にonClickを実行せずにonClearClickのみ実行する\n   */\n  onClearClick?: (e: MouseEvent) => void\n  /**\n   * 選択されているアイテムのリストが変わった時に発火するコールバック関数\n   */\n  onChangeSelected?: (selectedItem: ComboboxItem<T> | null) => void\n  /**\n   * コンポーネントがフォーカスされたときに発火するコールバック関数\n   */\n  onFocus?: () => void\n  /**\n   * コンポーネントからフォーカスが外れた時に発火するコールバック関数\n   */\n  onBlur?: () => void\n  /**\n   * 検索結果が0件の時に表示するコンテンツ\n   */\n  noResultText?: ReactNode\n}\ntype Props<T> = AbstractProps<T> &\n  Omit<ComponentPropsWithoutRef<'input'>, keyof AbstractProps<unknown>>\n\nconst NOOP = () => undefined\n\nconst ESCAPE_KEY_REGEX = /^Esc(ape)?$/\nconst ARROW_UP_DOWN_REGEX = /^(Arrow)?(Up|Down)$/\n\nconst EMPTY_INPUT_CHANGE_EVENT = {\n  currentTarget: { value: '' },\n  target: { value: '' },\n} as ChangeEvent<HTMLInputElement>\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: 'smarthr-ui-SingleCombobox shr-inline-block',\n    input: 'smarthr-ui-SingleCombobox-input shr-w-full',\n    caretDownLayout: [\n      'shr-relative -shr-me-0.5 shr-p-0.5',\n      'before:shr-border-0',\n      'before:shr-absolute before:shr-inset-x-0 before:shr-inset-y-0.25 before:shr-w-0 before:shr-border-l before:shr-border-solid before:shr-border-default before:shr-content-[\"\"]',\n    ],\n    caretDownIcon: 'shr-block',\n    clearButton: [\n      'smarthr-ui-SingleCombobox-clearButton',\n      'shr-group/clearButton',\n      'shr-me-0.5',\n      'focus-visible:shr-shadow-none',\n    ],\n    clearButtonIcon: [\n      'shr-block',\n      'group-focus-visible/clearButton:shr-focus-indicator group-focus-visible/clearButton:shr-rounded-full',\n    ],\n  },\n  variants: {\n    disabled: {\n      true: {\n        wrapper: 'shr-cursor-not-allowed',\n      },\n    },\n    hidden: {\n      true: {\n        clearButton: 'shr-hidden',\n      },\n    },\n  },\n})\n\nconst ActualSingleCombobox = <T,>(\n  {\n    items,\n    selectedItem,\n    defaultItem,\n    name,\n    disabled,\n    readOnly,\n    required,\n    prefix,\n    error,\n    creatable,\n    placeholder,\n    autoComplete,\n    dropdownHelpMessage,\n    isLoading,\n    width,\n    dropdownWidth = 'auto',\n    className,\n    onChange,\n    onChangeInput,\n    onAdd,\n    onSelect,\n    onClear,\n    onClearClick,\n    onChangeSelected,\n    onFocus,\n    onBlur,\n    onKeyPress,\n    noResultText,\n    style,\n    ...rest\n  }: Props<T>,\n  ref: Ref<HTMLInputElement>,\n) => {\n  const theme = useTheme()\n  const { localize } = useIntl()\n  const outerRef = useRef<HTMLDivElement>(null)\n  const inputRef = useRef<HTMLInputElement>(null)\n  const clearButtonRef = useRef<HTMLButtonElement>(null)\n  const [isFocused, setIsFocused] = useState(false)\n  const [isExpanded, setIsExpanded] = useState(false)\n  const [inputValue, setInputValue] = useState('')\n  const [isComposing, setIsComposing] = useState(false)\n  const [isEditing, setIsEditing] = useState(false)\n\n  useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(ref, () => inputRef.current)\n\n  const { options } = useSingleOptions({\n    items,\n    selected: selectedItem,\n    creatable,\n    inputValue,\n    isFilteringDisabled: !isEditing,\n  })\n\n  const { renderListBox, activeOption, onKeyDownListBox, listBoxId, listBoxRef } = useListbox<T>({\n    options,\n    dropdownHelpMessage,\n    dropdownWidth,\n    onAdd,\n    onSelect: useCallback(\n      (selected: ComboboxItem<T>) => {\n        onSelect?.(selected)\n        onChangeSelected?.(selected)\n\n        // 制御コンポーネントの場合に親側でinputValueを更新できるように、選択時にonChangeInputを空文字で発火する\n        onChangeInput?.(EMPTY_INPUT_CHANGE_EVENT)\n\n        // HINT: Dropdown系コンポーネント内でComboboxを使うと、選択肢がportalで表現されている関係上Dropdownが閉じてしまう\n        // requestAnimationFrameを追加、処理を遅延させることで正常に閉じる/閉じないの判定を行えるようにする\n        requestAnimationFrame(() => {\n          setIsExpanded(false)\n        })\n\n        setIsEditing(false)\n      },\n      [onChangeSelected, onSelect, onChangeInput],\n    ),\n    isExpanded,\n    isLoading,\n    triggerRef: outerRef,\n    noResultText,\n  })\n\n  const selectDefaultItem = useMemo(\n    () => (onSelect && defaultItem ? () => onSelect(defaultItem) : NOOP),\n    [onSelect, defaultItem],\n  )\n\n  const focus = useCallback(() => {\n    onFocus?.()\n    inputRef.current?.focus()\n    setIsFocused(true)\n\n    if (!isFocused) {\n      setIsExpanded(true)\n    }\n  }, [onFocus, isFocused])\n  const unfocus = useCallback(() => {\n    if (!isFocused) return\n\n    onBlur?.()\n\n    setIsFocused(false)\n    setIsExpanded(false)\n    setIsEditing(false)\n\n    if (selectedItem) {\n      setInputValue(innerText(selectedItem.label))\n    } else {\n      selectDefaultItem()\n    }\n  }, [isFocused, onBlur, selectedItem, selectDefaultItem])\n  const onClickClear = useCallback(\n    (e: MouseEvent) => {\n      e.stopPropagation()\n\n      let isExecutedPreventDefault = false\n\n      onClearClick?.({\n        ...e,\n        preventDefault: () => {\n          e.preventDefault()\n          isExecutedPreventDefault = true\n        },\n      })\n\n      if (!isExecutedPreventDefault) {\n        onClear?.()\n        onChangeSelected?.(null)\n\n        inputRef.current?.focus()\n\n        setIsFocused(true)\n        setIsExpanded(true)\n      }\n    },\n    [onClearClick, onClear, onChangeSelected],\n  )\n  const onClickInput = useCallback(\n    (e: MouseEvent) => {\n      if (disabled || readOnly) {\n        e.stopPropagation()\n\n        return\n      }\n\n      inputRef.current?.focus()\n\n      if (!isExpanded) {\n        setIsExpanded(true)\n      }\n    },\n    [disabled, readOnly, inputRef, isExpanded],\n  )\n  const onDelegateClickIcon = onClickInput\n  const actualOnChangeInput = useCallback(\n    (e: ChangeEvent<HTMLInputElement>) => {\n      onChange?.(e)\n      onChangeInput?.(e)\n\n      if (!isEditing) setIsEditing(true)\n\n      const { value } = e.currentTarget\n\n      setInputValue(value)\n\n      if (value === '') {\n        onClear?.()\n        onChangeSelected?.(null)\n      }\n    },\n    [isEditing, onChange, onChangeInput, onClear, onChangeSelected],\n  )\n  const onCompositionStart = useCallback(() => setIsComposing(true), [])\n  const onCompositionEnd = useCallback(() => setIsComposing(false), [])\n  const onKeyDownInput = useCallback(\n    (e: KeyboardEvent<HTMLInputElement>) => {\n      if (isComposing) {\n        return\n      }\n\n      if (ESCAPE_KEY_REGEX.test(e.key)) {\n        if (isExpanded) {\n          e.stopPropagation()\n          setIsExpanded(false)\n        }\n      } else if (e.key === 'Tab') {\n        unfocus()\n      } else {\n        if (ARROW_UP_DOWN_REGEX.test(e.key)) {\n          e.preventDefault()\n        }\n\n        inputRef.current?.focus()\n\n        if (!isExpanded) {\n          setIsExpanded(true)\n        }\n      }\n      onKeyDownListBox(e)\n    },\n    [isComposing, isExpanded, unfocus, onKeyDownListBox],\n  )\n\n  // HINT: form内にcomboboxを設置 & 検索inputにfocusした状態で\n  // アイテムをキーボードで選択し、Enterを押すとinput上でEnterを押したことになるため、\n  // submitイベントが発生し、formが送信される場合がある\n  const handleKeyPress = useCallback(\n    (e: KeyboardEvent<HTMLInputElement>) => {\n      if (e.key === 'Enter') e.preventDefault()\n\n      onKeyPress?.(e)\n    },\n    [onKeyPress],\n  )\n\n  const caretIconColor = useMemo(() => {\n    if (isFocused) return theme.textColor.black\n    if (disabled || readOnly) return theme.textColor.disabled\n\n    return theme.textColor.grey\n  }, [disabled, readOnly, isFocused, theme.textColor])\n\n  useClick(\n    useMemo(() => [outerRef, listBoxRef, clearButtonRef], [outerRef, listBoxRef, clearButtonRef]),\n    isFocused || selectedItem ? NOOP : selectDefaultItem,\n    unfocus,\n  )\n\n  // selectedItem.label はプリミティブ値でないデータ型の可能性があり、そのまま useEffect の依存配列に入れると意図せぬエフェクトの実行を引き起こしてしまう可能性があるので、プリミティブ値である string 型に変換したものを依存配列に入れています。\n  const selectedItemLabelText = innerText(selectedItem?.label)\n  useEffect(() => {\n    setInputValue(selectedItemLabelText)\n  }, [selectedItemLabelText])\n\n  const wrapperStyle = useMemo(\n    () => ({\n      ...style,\n      width: typeof width === 'number' ? `${width}px` : width,\n    }),\n    [style, width],\n  )\n\n  const notSelected = selectedItem === null\n\n  const classNames = useMemo(() => {\n    const { wrapper, input, caretDownLayout, caretDownIcon, clearButton, clearButtonIcon } =\n      classNameGenerator()\n\n    return {\n      wrapper: wrapper({ disabled, className }),\n      input: input(),\n      caretDownLayout: caretDownLayout(),\n      caretDownIcon: caretDownIcon(),\n      clearButton: clearButton({ hidden: notSelected || disabled || readOnly }),\n      clearButtonIcon: clearButtonIcon(),\n    }\n  }, [notSelected, disabled, readOnly, className])\n\n  const destroyButtonIconAlt = useMemo(\n    () =>\n      localize({\n        id: 'smarthr-ui/SingleCombobox/destroyButtonIconAlt',\n        defaultText: 'クリア',\n      }),\n    [localize],\n  )\n\n  return (\n    <div role=\"group\" className={classNames.wrapper} style={wrapperStyle} ref={outerRef}>\n      <Input\n        {...rest}\n        ref={inputRef}\n        type=\"text\"\n        role=\"combobox\"\n        name={name}\n        value={inputValue}\n        disabled={disabled}\n        readOnly={readOnly}\n        required={required}\n        autoComplete={autoComplete ?? 'off'}\n        aria-haspopup=\"listbox\"\n        aria-controls={listBoxId}\n        aria-expanded={isFocused}\n        aria-activedescendant={activeOption?.id}\n        aria-autocomplete=\"list\"\n        /* eslint-disable-next-line smarthr/a11y-prohibit-input-placeholder */\n        placeholder={placeholder}\n        onClick={onClickInput}\n        onChange={actualOnChangeInput}\n        onFocus={isFocused ? undefined : focus}\n        onCompositionStart={onCompositionStart}\n        onCompositionEnd={onCompositionEnd}\n        onKeyDown={onKeyDownInput}\n        onKeyPress={handleKeyPress}\n        error={error}\n        prefix={prefix}\n        suffix={\n          <>\n            <UnstyledButton\n              onClick={onClickClear}\n              ref={clearButtonRef}\n              className={classNames.clearButton}\n            >\n              <FaCircleXmarkIcon\n                color=\"TEXT_BLACK\"\n                alt={destroyButtonIconAlt}\n                className={classNames.clearButtonIcon}\n              />\n            </UnstyledButton>\n            <span\n              role=\"presentation\"\n              onClick={onDelegateClickIcon}\n              className={classNames.caretDownLayout}\n            >\n              <FaCaretDownIcon color={caretIconColor} className={classNames.caretDownIcon} />\n            </span>\n          </>\n        }\n        className={classNames.input}\n        data-smarthr-ui-input=\"true\"\n      />\n      {!readOnly && renderListBox()}\n    </div>\n  )\n}\n\nexport const SingleCombobox = genericsForwardRef(ActualSingleCombobox)\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAyEA;AAEA;AACA;AAEA;AACE;AACA;;AAGF;AACE;AACE;AACA;AACA;;;;AAIC;AACD;AACA;;;;;AAKC;AACD;;;AAGC;AACF;AACD;AACE;AACE;AACE;AACD;AACF;AACD;AACE;AACE;AACD;AACF;AACF;AACF;AAED;AAmCE;AACA;AACA;AACA;AACA;;;;;;;AASA;;AAEE;;;;AAID;AAED;;;;;AAKE;AAEI;AACA;;AAGA;;;;;AAMA;;;;;AAQJ;;AAED;AAED;AAKA;;AAEE;;;;;AAMF;AACA;AACE;;;;;;;;;;AAWE;;;AAGJ;;;AAMI;AACE;;;;;AAKD;;;AAIC;AAEA;;;;;AAQN;AAEI;;;;AAMA;;;;;;AASJ;AAEI;AACA;AAEA;;AAEA;;AAIA;;AAEE;;AAEJ;AAGF;AACA;AACA;;;;;;;;;;AAWW;AACL;;;;;;AAMA;;;;;;;;;;AAcN;AAEI;;AAEA;AACF;AAIF;AACE;AAAe;;AACW;AAE1B;AACF;AAEA;;;;;AAUA;AAEA;AAEI;AACA;AACD;AAIH;AAEA;AACE;;;;;;AAQE;;;;;AAQE;AACA;AACD;AAIL;;AAmBM;AAsCR;;;"}
+{"version":3,"file":"SingleCombobox.js","sources":["../../../../src/components/Combobox/SingleCombobox/SingleCombobox.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ChangeEvent,\n  type ComponentPropsWithoutRef,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactNode,\n  type Ref,\n  type RefObject,\n  memo,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport innerText from 'react-innertext'\nimport { tv } from 'tailwind-variants'\n\nimport { useClick } from '../../../hooks/useClick'\nimport { useTheme } from '../../../hooks/useTheme'\nimport { useIntl } from '../../../intl'\nimport { genericsForwardRef } from '../../../libs/util'\nimport { UnstyledButton } from '../../Button'\nimport { FaCaretDownIcon, FaCircleXmarkIcon } from '../../Icon'\nimport { Input } from '../../Input'\nimport { useListbox } from '../useListbox'\nimport { useSingleOptions } from '../useOptions'\n\nimport type { ComboboxItem, AbstractProps as ComboboxProps } from '../types'\n\ntype AbstractProps<T> = ComboboxProps<T> & {\n  /**\n   * 選択されているアイテム\n   */\n  selectedItem: ComboboxItem<T> | null\n  /**\n   * デフォルトで選択されるアイテム\n   */\n  defaultItem?: ComboboxItem<T>\n  /**\n   * コンポーネント内の先頭に表示する内容\n   */\n  prefix?: ReactNode\n  /**\n   * 選択されているアイテムがクリアされた時に発火するコールバック関数\n   */\n  onClear?: () => void\n  /**\n   * 選択されているアイテムがクリアされた時に発火するコールバック関数\n   * 指定している場合、クリア時にonClickを実行せずにonClearClickのみ実行する\n   */\n  onClearClick?: (e: MouseEvent) => void\n  /**\n   * 選択されているアイテムのリストが変わった時に発火するコールバック関数\n   */\n  onChangeSelected?: (selectedItem: ComboboxItem<T> | null) => void\n  /**\n   * コンポーネントがフォーカスされたときに発火するコールバック関数\n   */\n  onFocus?: () => void\n  /**\n   * コンポーネントからフォーカスが外れた時に発火するコールバック関数\n   */\n  onBlur?: () => void\n  /**\n   * 検索結果が0件の時に表示するコンテンツ\n   */\n  noResultText?: ReactNode\n}\ntype Props<T> = AbstractProps<T> &\n  Omit<ComponentPropsWithoutRef<'input'>, keyof AbstractProps<unknown>>\n\nconst NOOP = () => undefined\n\nconst ESCAPE_KEY_REGEX = /^Esc(ape)?$/\nconst ARROW_UP_DOWN_REGEX = /^(Arrow)?(Up|Down)$/\n\nconst EMPTY_INPUT_CHANGE_EVENT = {\n  currentTarget: { value: '' },\n  target: { value: '' },\n} as ChangeEvent<HTMLInputElement>\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: 'smarthr-ui-SingleCombobox shr-inline-block',\n    input: 'smarthr-ui-SingleCombobox-input shr-w-full',\n    caretDownLayout: [\n      'shr-relative -shr-me-0.5 shr-p-0.5',\n      'before:shr-border-0',\n      'before:shr-absolute before:shr-inset-x-0 before:shr-inset-y-0.25 before:shr-w-0 before:shr-border-l before:shr-border-solid before:shr-border-default before:shr-content-[\"\"]',\n    ],\n    caretDownIcon: 'shr-block',\n    clearButton: [\n      'smarthr-ui-SingleCombobox-clearButton',\n      'shr-group/clearButton',\n      'shr-me-0.5',\n      'focus-visible:shr-shadow-none',\n    ],\n    clearButtonIcon: [\n      'shr-block',\n      'group-focus-visible/clearButton:shr-focus-indicator group-focus-visible/clearButton:shr-rounded-full',\n    ],\n  },\n  variants: {\n    disabled: {\n      true: {\n        wrapper: 'shr-cursor-not-allowed',\n      },\n    },\n    hidden: {\n      true: {\n        clearButton: 'shr-hidden',\n      },\n    },\n  },\n})\n\ntype SuffixButtonsProps = {\n  onClickClear: (e: MouseEvent) => void\n  clearButtonRef: RefObject<HTMLButtonElement>\n  onClickIcon: (e: MouseEvent) => void\n  caretIconColor: string\n  destroyButtonIconAlt: string\n  classNames: {\n    clearButton: string\n    clearButtonIcon: string\n    caretDownLayout: string\n    caretDownIcon: string\n  }\n}\n\nconst SuffixButtons = memo<SuffixButtonsProps>(\n  ({\n    onClickClear,\n    clearButtonRef,\n    onClickIcon: onDelegateClickIcon,\n    caretIconColor,\n    destroyButtonIconAlt,\n    classNames,\n  }) => (\n    <>\n      <UnstyledButton\n        onClick={onClickClear}\n        ref={clearButtonRef}\n        className={classNames.clearButton}\n      >\n        <FaCircleXmarkIcon\n          color=\"TEXT_BLACK\"\n          alt={destroyButtonIconAlt}\n          className={classNames.clearButtonIcon}\n        />\n      </UnstyledButton>\n      <span\n        role=\"presentation\"\n        onClick={onDelegateClickIcon}\n        className={classNames.caretDownLayout}\n      >\n        <FaCaretDownIcon color={caretIconColor} className={classNames.caretDownIcon} />\n      </span>\n    </>\n  ),\n)\n\nconst ActualSingleCombobox = <T,>(\n  {\n    items,\n    selectedItem,\n    defaultItem,\n    name,\n    disabled,\n    readOnly,\n    required,\n    prefix,\n    error,\n    creatable,\n    placeholder,\n    autoComplete,\n    dropdownHelpMessage,\n    isLoading,\n    width,\n    dropdownWidth = 'auto',\n    className,\n    onChange,\n    onChangeInput,\n    onAdd,\n    onSelect,\n    onClear,\n    onClearClick,\n    onChangeSelected,\n    onFocus,\n    onBlur,\n    onKeyPress,\n    noResultText,\n    style,\n    ...rest\n  }: Props<T>,\n  ref: Ref<HTMLInputElement>,\n) => {\n  const theme = useTheme()\n  const { localize } = useIntl()\n  const outerRef = useRef<HTMLDivElement>(null)\n  const inputRef = useRef<HTMLInputElement>(null)\n  const clearButtonRef = useRef<HTMLButtonElement>(null)\n  const [isFocused, setIsFocused] = useState(false)\n  const [isExpanded, setIsExpanded] = useState(false)\n  const [inputValue, setInputValue] = useState('')\n  const [isComposing, setIsComposing] = useState(false)\n  const [isEditing, setIsEditing] = useState(false)\n\n  const unstableRef = useRef({\n    onChange,\n    onChangeInput,\n    onAdd,\n    onSelect,\n    onClear,\n    onClearClick,\n    onChangeSelected,\n    onFocus,\n    onBlur,\n    onKeyPress,\n    defaultItem,\n    selectedItem,\n    isFocused,\n    isExpanded,\n    isComposing,\n    isEditing,\n  })\n  unstableRef.current = {\n    onChange,\n    onChangeInput,\n    onAdd,\n    onSelect,\n    onClear,\n    onClearClick,\n    onChangeSelected,\n    onFocus,\n    onBlur,\n    onKeyPress,\n    defaultItem,\n    selectedItem,\n    isFocused,\n    isExpanded,\n    isComposing,\n    isEditing,\n  }\n\n  useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(ref, () => inputRef.current)\n\n  const { options } = useSingleOptions({\n    items,\n    selected: selectedItem,\n    creatable,\n    inputValue,\n    isFilteringDisabled: !isEditing,\n  })\n\n  const { renderListBox, activeOption, onKeyDownListBox, listBoxId, listBoxRef } = useListbox<T>({\n    options,\n    dropdownHelpMessage,\n    dropdownWidth,\n    onAdd,\n    onSelect: useCallback((selected: ComboboxItem<T>) => {\n      unstableRef.current.onSelect?.(selected)\n      unstableRef.current.onChangeSelected?.(selected)\n\n      // HINT: Dropdown系コンポーネント内でComboboxを使うと、選択肢がportalで表現されている関係上Dropdownが閉じてしまう\n      // requestAnimationFrameを追加、処理を遅延させることで正常に閉じる/閉じないの判定を行えるようにする\n      requestAnimationFrame(() => {\n        setIsExpanded(false)\n        // HINT:\n        // - 制御コンポーネントの場合に親側でinputValueを更新できるように、選択時にonChangeInputを空文字で発火する\n        // - 対応するdropdownを閉じて以降にonChangeInputを発火する必要がある\n        //   - 先にclearしてしまうと意図せずこの要素のドロップダウンを閉じる前に他要素の再レンダリングを引き起こす可能性がある\n        //   - 例えばFilterDropdownなどで当comboboxを使っている場合、レイアウト上comboboxのdropdown以下の要素がクリックされた扱いになってしまい\n        //     FilterDropdownを意図せず閉じてしまうなどの挙動のバグを引き起こす可能性がある\n        unstableRef.current.onChangeInput?.(EMPTY_INPUT_CHANGE_EVENT)\n      })\n\n      setIsEditing(false)\n    }, []),\n    isExpanded,\n    isLoading,\n    triggerRef: outerRef,\n    noResultText,\n  })\n\n  const selectDefaultItem = useCallback(() => {\n    if (unstableRef.current.onSelect && unstableRef.current.defaultItem) {\n      unstableRef.current.onSelect(unstableRef.current.defaultItem)\n    }\n  }, [])\n\n  const focus = useCallback(() => {\n    unstableRef.current.onFocus?.()\n    inputRef.current?.focus()\n    setIsFocused(true)\n\n    if (!unstableRef.current.isFocused) {\n      setIsExpanded(true)\n    }\n  }, [])\n  const unfocus = useCallback(() => {\n    if (!unstableRef.current.isFocused) return\n\n    unstableRef.current.onBlur?.()\n\n    setIsFocused(false)\n    setIsExpanded(false)\n    setIsEditing(false)\n\n    if (unstableRef.current.selectedItem) {\n      setInputValue(innerText(unstableRef.current.selectedItem.label))\n    } else {\n      selectDefaultItem()\n    }\n  }, [selectDefaultItem])\n  const onClickClear = useCallback((e: MouseEvent) => {\n    e.stopPropagation()\n\n    let isExecutedPreventDefault = false\n\n    unstableRef.current.onClearClick?.({\n      ...e,\n      preventDefault: () => {\n        e.preventDefault()\n        isExecutedPreventDefault = true\n      },\n    })\n\n    if (!isExecutedPreventDefault) {\n      unstableRef.current.onClear?.()\n      unstableRef.current.onChangeSelected?.(null)\n\n      inputRef.current?.focus()\n\n      setIsFocused(true)\n      setIsExpanded(true)\n    }\n  }, [])\n  const onClickInput = useCallback(\n    (e: MouseEvent) => {\n      if (disabled || readOnly) {\n        e.stopPropagation()\n\n        return\n      }\n\n      inputRef.current?.focus()\n\n      if (!unstableRef.current.isExpanded) {\n        setIsExpanded(true)\n      }\n    },\n    [disabled, readOnly],\n  )\n  const actualOnChangeInput = useCallback((e: ChangeEvent<HTMLInputElement>) => {\n    unstableRef.current.onChange?.(e)\n    unstableRef.current.onChangeInput?.(e)\n\n    if (!unstableRef.current.isEditing) setIsEditing(true)\n\n    const { value } = e.currentTarget\n\n    setInputValue(value)\n\n    if (value === '') {\n      unstableRef.current.onClear?.()\n      unstableRef.current.onChangeSelected?.(null)\n    }\n  }, [])\n  const onCompositionStart = useCallback(() => setIsComposing(true), [])\n  const onCompositionEnd = useCallback(() => setIsComposing(false), [])\n  const onKeyDownInput = useCallback(\n    (e: KeyboardEvent<HTMLInputElement>) => {\n      if (unstableRef.current.isComposing) {\n        return\n      }\n\n      if (ESCAPE_KEY_REGEX.test(e.key)) {\n        if (unstableRef.current.isExpanded) {\n          e.stopPropagation()\n          setIsExpanded(false)\n        }\n      } else if (e.key === 'Tab') {\n        unfocus()\n      } else {\n        if (ARROW_UP_DOWN_REGEX.test(e.key)) {\n          e.preventDefault()\n        }\n\n        inputRef.current?.focus()\n\n        if (!unstableRef.current.isExpanded) {\n          setIsExpanded(true)\n        }\n      }\n      onKeyDownListBox(e)\n    },\n    [unfocus, onKeyDownListBox],\n  )\n\n  // HINT: form内にcomboboxを設置 & 検索inputにfocusした状態で\n  // アイテムをキーボードで選択し、Enterを押すとinput上でEnterを押したことになるため、\n  // submitイベントが発生し、formが送信される場合がある\n  const handleKeyPress = useCallback((e: KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === 'Enter') e.preventDefault()\n\n    unstableRef.current.onKeyPress?.(e)\n  }, [])\n\n  const caretIconColor = isFocused\n    ? theme.textColor.black\n    : disabled || readOnly\n      ? theme.textColor.disabled\n      : theme.textColor.grey\n\n  useClick(\n    useMemo(() => [outerRef, listBoxRef, clearButtonRef], [listBoxRef]),\n    isFocused || selectedItem ? NOOP : selectDefaultItem,\n    unfocus,\n  )\n\n  // selectedItem.label はプリミティブ値でないデータ型の可能性があり、そのまま useEffect の依存配列に入れると意図せぬエフェクトの実行を引き起こしてしまう可能性があるので、プリミティブ値である string 型に変換したものを依存配列に入れています。\n  const selectedItemLabelText = innerText(selectedItem?.label)\n  useEffect(() => {\n    setInputValue(selectedItemLabelText)\n  }, [selectedItemLabelText])\n\n  const wrapperStyle = useMemo(\n    () => ({\n      ...style,\n      width: typeof width === 'number' ? `${width}px` : width,\n    }),\n    [style, width],\n  )\n\n  const hasSelectedItem = selectedItem !== null\n\n  const classNames = useMemo(() => {\n    const { wrapper, input, caretDownLayout, caretDownIcon, clearButton, clearButtonIcon } =\n      classNameGenerator()\n\n    return {\n      wrapper: wrapper({ disabled, className }),\n      input: input(),\n      caretDownLayout: caretDownLayout(),\n      caretDownIcon: caretDownIcon(),\n      clearButton: clearButton({\n        hidden: !hasSelectedItem || disabled || readOnly,\n      }),\n      clearButtonIcon: clearButtonIcon(),\n    }\n  }, [hasSelectedItem, disabled, readOnly, className])\n\n  const destroyButtonIconAlt = useMemo(\n    () =>\n      localize({\n        id: 'smarthr-ui/SingleCombobox/destroyButtonIconAlt',\n        defaultText: 'クリア',\n      }),\n    [localize],\n  )\n\n  return (\n    <div role=\"group\" className={classNames.wrapper} style={wrapperStyle} ref={outerRef}>\n      <Input\n        {...rest}\n        ref={inputRef}\n        type=\"text\"\n        role=\"combobox\"\n        name={name}\n        value={inputValue}\n        disabled={disabled}\n        readOnly={readOnly}\n        required={required}\n        autoComplete={autoComplete ?? 'off'}\n        aria-haspopup=\"listbox\"\n        aria-controls={listBoxId}\n        aria-expanded={isFocused}\n        aria-activedescendant={activeOption?.id}\n        aria-autocomplete=\"list\"\n        /* eslint-disable-next-line smarthr/a11y-prohibit-input-placeholder */\n        placeholder={placeholder}\n        onClick={onClickInput}\n        onChange={actualOnChangeInput}\n        onFocus={isFocused ? undefined : focus}\n        onCompositionStart={onCompositionStart}\n        onCompositionEnd={onCompositionEnd}\n        onKeyDown={onKeyDownInput}\n        onKeyPress={handleKeyPress}\n        error={error}\n        prefix={prefix}\n        suffix={\n          <SuffixButtons\n            onClickClear={onClickClear}\n            clearButtonRef={clearButtonRef}\n            onClickIcon={onClickInput}\n            caretIconColor={caretIconColor}\n            destroyButtonIconAlt={destroyButtonIconAlt}\n            classNames={{\n              clearButton: classNames.clearButton,\n              clearButtonIcon: classNames.clearButtonIcon,\n              caretDownLayout: classNames.caretDownLayout,\n              caretDownIcon: classNames.caretDownIcon,\n            }}\n          />\n        }\n        className={classNames.input}\n        data-smarthr-ui-input=\"true\"\n      />\n      {!readOnly && renderListBox()}\n    </div>\n  )\n}\n\nexport const SingleCombobox = genericsForwardRef(ActualSingleCombobox)\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA2EA;AAEA;AACA;AAEA;AACE;AACA;;AAGF;AACE;AACE;AACA;AACA;;;;AAIC;AACD;AACA;;;;;AAKC;AACD;;;AAGC;AACF;AACD;AACE;AACE;AACE;AACD;AACF;AACD;AACE;AACE;AACD;AACF;AACF;AACF;AAgBD;AAgCA;AAmCE;AACA;AACA;AACA;AACA;;;;;;;;;;;;;;;;;;;;;;;AAwBC;;;;;;;;;;;;;;;;;;;;AAsBD;;AAEE;;;;AAID;AAED;;;;;AAKE;;;;;;;;;;;;;;AAeE;;;;;AAMF;;AAED;AAED;AACE;;;;AAKF;AACE;AACA;;AAGA;;;;AAIF;AACE;;AAEA;;;;AAMA;AACE;;;AAEA;;AAEJ;AACA;;;AAKE;AACE;;;;;AAKD;;AAGC;;AAGA;;;;;AAMJ;AAEI;;;;AAMA;AAEA;;;AAGF;AAGF;;;AAIE;;AAEA;;AAIA;AACE;;;;AAIJ;AACA;AACA;AAEI;;;;AAKE;;;;;AAIK;AACL;;;;;;AAMA;AAEA;;;;;AAKJ;;;;AAOF;AACE;;;;;AAMA;;AAEE;AACA;AAEJ;;;;;AAUA;AAEA;AAEI;AACA;AACD;AAIH;AAEA;AACE;;;;;;;AASI;;;;;;AASA;AACA;AACD;AAIL;;AAmBM;;;;;AAsBK;AASb;;;"}

package/lib/components/Combobox/useListbox.cjs

@@ -9,7 +9,7 @@ var hooks_usePortal = require('../../hooks/usePortal.cjs');
 var hooks_useTheme = require('../../hooks/useTheme.cjs');
 require('../../intl/IntlProvider.cjs');
 var intl_useIntl = require('../../intl/useIntl.cjs');
-require('react-intl');
+require('../../intl/Localizer.cjs');
 require('../../_virtual/dayjs.min.cjs');
 require('../../intl/TimeFormatter.cjs');
 var components_Icon_FaIcon = require('../Icon/FaIcon.cjs');

package/lib/components/Combobox/useListbox.js

@@ -7,7 +7,7 @@ import { usePortal } from '../../hooks/usePortal.js';
 import { useTheme } from '../../hooks/useTheme.js';
 import '../../intl/IntlProvider.js';
 import { useIntl } from '../../intl/useIntl.js';
-import 'react-intl';
+import '../../intl/Localizer.js';
 import '../../_virtual/dayjs.min.js';
 import '../../intl/TimeFormatter.js';
 import { FaCircleInfoIcon } from '../Icon/FaIcon.js';

package/lib/components/Combobox/useOptions.cjs

@@ -10,7 +10,9 @@ const useSingleOptions = ({ selected, ...rest }) => {
     return useOptions(rest, isSelected);
 };
 const useMultiOptions = ({ selected, isItemSelected = defaultIsItemSelected, ...rest }) => {
-    const isSelected = React.useCallback((item) => isItemSelected(item, selected), [selected, isItemSelected]);
+    const unstableRef = React.useRef({ isItemSelected });
+    unstableRef.current = { isItemSelected };
+    const isSelected = React.useCallback((item) => unstableRef.current.isItemSelected(item, selected), [selected]);
     return useOptions(rest, isSelected);
 };
 function useOptions({ items, creatable, inputValue = '', isFilteringDisabled = false }, isSelected) {

package/lib/components/Combobox/useOptions.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useOptions.cjs","sources":["../../../src/components/Combobox/useOptions.ts"],"sourcesContent":["import { useCallback, useId, useMemo } from 'react'\nimport innerText from 'react-innertext'\n\nimport { areItemsEqual, convertMatchableString } from './helper'\n\nimport type { ComboboxItem, ComboboxOption } from './types'\n\nconst defaultIsItemSelected = <T>(\n  targetItem: ComboboxItem<T>,\n  selectedItems: Array<ComboboxItem<T>>,\n) => selectedItems.some((item) => areItemsEqual(item, targetItem))\n\ntype BaseUseOptionsProps<T> = {\n  items: Array<ComboboxItem<T>>\n  creatable?: boolean\n  inputValue?: string\n  isFilteringDisabled?: boolean\n}\n\nexport const useSingleOptions = <T>({\n  selected,\n  ...rest\n}: BaseUseOptionsProps<T> & {\n  selected: ComboboxItem<T> | null\n}) => {\n  const isSelected = useCallback(\n    (item: ComboboxItem<T>) => selected !== null && areItemsEqual(selected, item),\n    [selected],\n  )\n\n  return useOptions<T>(rest, isSelected)\n}\n\nexport const useMultiOptions = <T>({\n  selected,\n  isItemSelected = defaultIsItemSelected,\n  ...rest\n}: BaseUseOptionsProps<T> & {\n  selected: Array<ComboboxItem<T>>\n  isItemSelected?: (targetItem: ComboboxItem<T>, selectedItems: Array<ComboboxItem<T>>) => boolean\n}) => {\n  const isSelected = useCallback(\n    (item: ComboboxItem<T>) => isItemSelected(item, selected),\n    [selected, isItemSelected],\n  )\n\n  return useOptions<T>(rest, isSelected)\n}\n\nfunction useOptions<T>(\n  { items, creatable, inputValue = '', isFilteringDisabled = false }: BaseUseOptionsProps<T>,\n  isSelected: (item: ComboboxItem<T>) => boolean,\n) {\n  const newItemId = useId()\n  const optionIdPrefix = useId()\n\n  const options = useMemo(() => {\n    const existedOptions: Array<ComboboxOption<T>> = items.map((item, i) => ({\n      id: `${optionIdPrefix}-${i}`,\n      selected: isSelected(item),\n      isNew: false,\n      item,\n    }))\n\n    const allOptions =\n      creatable && inputValue && items.every((item) => item.label !== inputValue)\n        ? [\n            {\n              id: newItemId,\n              isNew: true,\n              selected: false,\n              item: { label: inputValue, value: inputValue },\n            } as ComboboxOption<T>,\n            ...existedOptions,\n          ]\n        : existedOptions\n\n    if (isFilteringDisabled || !inputValue) {\n      return allOptions\n    }\n\n    const convertedInputtedValue = convertMatchableString(inputValue)\n\n    return allOptions.filter(({ item: { label } }) =>\n      convertMatchableString(innerText(label)).includes(convertedInputtedValue),\n    )\n    // TODO: itemsの安定化方法を検討中\n  }, [isSelected, items, optionIdPrefix, inputValue, creatable, newItemId, isFilteringDisabled])\n\n  return {\n    options,\n  }\n}\n"],"names":["areItemsEqual","useCallback","useId","useMemo","convertMatchableString","innerText"],"mappings":";;;;;;AAOA,MAAM,qBAAqB,GAAG,CAC5B,UAA2B,EAC3B,aAAqC,KAClC,aAAa,CAAC,IAAI,CAAC,CAAC,IAAI,KAAKA,wCAAa,CAAC,IAAI,EAAE,UAAU,CAAC,CAAC;AAS3D,MAAM,gBAAgB,GAAG,CAAI,EAClC,QAAQ,EACR,GAAG,IAAI,EAGR,KAAI;IACH,MAAM,UAAU,GAAGC,iBAAW,CAC5B,CAAC,IAAqB,KAAK,QAAQ,KAAK,IAAI,IAAID,wCAAa,CAAC,QAAQ,EAAE,IAAI,CAAC,EAC7E,CAAC,QAAQ,CAAC,CACX;AAED,IAAA,OAAO,UAAU,CAAI,IAAI,EAAE,UAAU,CAAC;AACxC;AAEO,MAAM,eAAe,GAAG,CAAI,EACjC,QAAQ,EACR,cAAc,GAAG,qBAAqB,EACtC,GAAG,IAAI,EAIR,KAAI;IACH,MAAM,UAAU,GAAGC,iBAAW,CAC5B,CAAC,IAAqB,KAAK,cAAc,CAAC,IAAI,EAAE,QAAQ,CAAC,EACzD,CAAC,QAAQ,EAAE,cAAc,CAAC,CAC3B;AAED,IAAA,OAAO,UAAU,CAAI,IAAI,EAAE,UAAU,CAAC;AACxC;AAEA,SAAS,UAAU,CACjB,EAAE,KAAK,EAAE,SAAS,EAAE,UAAU,GAAG,EAAE,EAAE,mBAAmB,GAAG,KAAK,EAA0B,EAC1F,UAA8C,EAAA;AAE9C,IAAA,MAAM,SAAS,GAAGC,WAAK,EAAE;AACzB,IAAA,MAAM,cAAc,GAAGA,WAAK,EAAE;AAE9B,IAAA,MAAM,OAAO,GAAGC,aAAO,CAAC,MAAK;AAC3B,QAAA,MAAM,cAAc,GAA6B,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,MAAM;AACvE,YAAA,EAAE,EAAE,CAAA,EAAG,cAAc,CAAA,CAAA,EAAI,CAAC,CAAA,CAAE;AAC5B,YAAA,QAAQ,EAAE,UAAU,CAAC,IAAI,CAAC;AAC1B,YAAA,KAAK,EAAE,KAAK;YACZ,IAAI;AACL,SAAA,CAAC,CAAC;QAEH,MAAM,UAAU,GACd,SAAS,IAAI,UAAU,IAAI,KAAK,CAAC,KAAK,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,KAAK,KAAK,UAAU;AACxE,cAAE;AACE,gBAAA;AACE,oBAAA,EAAE,EAAE,SAAS;AACb,oBAAA,KAAK,EAAE,IAAI;AACX,oBAAA,QAAQ,EAAE,KAAK;oBACf,IAAI,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE;AAC1B,iBAAA;AACtB,gBAAA,GAAG,cAAc;AAClB;cACD,cAAc;AAEpB,QAAA,IAAI,mBAAmB,IAAI,CAAC,UAAU,EAAE;AACtC,YAAA,OAAO,UAAU;QACnB;AAEA,QAAA,MAAM,sBAAsB,GAAGC,iDAAsB,CAAC,UAAU,CAAC;AAEjE,QAAA,OAAO,UAAU,CAAC,MAAM,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE,KAAK,EAAE,EAAE,KAC3CA,iDAAsB,CAACC,KAAS,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,sBAAsB,CAAC,CAC1E;;AAEH,IAAA,CAAC,EAAE,CAAC,UAAU,EAAE,KAAK,EAAE,cAAc,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,mBAAmB,CAAC,CAAC;IAE9F,OAAO;QACL,OAAO;KACR;AACH;;;;;"}
+{"version":3,"file":"useOptions.cjs","sources":["../../../src/components/Combobox/useOptions.ts"],"sourcesContent":["import { useCallback, useId, useMemo, useRef } from 'react'\nimport innerText from 'react-innertext'\n\nimport { areItemsEqual, convertMatchableString } from './helper'\n\nimport type { ComboboxItem, ComboboxOption } from './types'\n\nconst defaultIsItemSelected = <T>(\n  targetItem: ComboboxItem<T>,\n  selectedItems: Array<ComboboxItem<T>>,\n) => selectedItems.some((item) => areItemsEqual(item, targetItem))\n\ntype BaseUseOptionsProps<T> = {\n  items: Array<ComboboxItem<T>>\n  creatable?: boolean\n  inputValue?: string\n  isFilteringDisabled?: boolean\n}\n\nexport const useSingleOptions = <T>({\n  selected,\n  ...rest\n}: BaseUseOptionsProps<T> & {\n  selected: ComboboxItem<T> | null\n}) => {\n  const isSelected = useCallback(\n    (item: ComboboxItem<T>) => selected !== null && areItemsEqual(selected, item),\n    [selected],\n  )\n\n  return useOptions<T>(rest, isSelected)\n}\n\nexport const useMultiOptions = <T>({\n  selected,\n  isItemSelected = defaultIsItemSelected,\n  ...rest\n}: BaseUseOptionsProps<T> & {\n  selected: Array<ComboboxItem<T>>\n  isItemSelected?: (targetItem: ComboboxItem<T>, selectedItems: Array<ComboboxItem<T>>) => boolean\n}) => {\n  const unstableRef = useRef({ isItemSelected })\n  unstableRef.current = { isItemSelected }\n\n  const isSelected = useCallback(\n    (item: ComboboxItem<T>) => unstableRef.current.isItemSelected(item, selected),\n    [selected],\n  )\n\n  return useOptions<T>(rest, isSelected)\n}\n\nfunction useOptions<T>(\n  { items, creatable, inputValue = '', isFilteringDisabled = false }: BaseUseOptionsProps<T>,\n  isSelected: (item: ComboboxItem<T>) => boolean,\n) {\n  const newItemId = useId()\n  const optionIdPrefix = useId()\n\n  const options = useMemo(() => {\n    const existedOptions: Array<ComboboxOption<T>> = items.map((item, i) => ({\n      id: `${optionIdPrefix}-${i}`,\n      selected: isSelected(item),\n      isNew: false,\n      item,\n    }))\n\n    const allOptions =\n      creatable && inputValue && items.every((item) => item.label !== inputValue)\n        ? [\n            {\n              id: newItemId,\n              isNew: true,\n              selected: false,\n              item: { label: inputValue, value: inputValue },\n            } as ComboboxOption<T>,\n            ...existedOptions,\n          ]\n        : existedOptions\n\n    if (isFilteringDisabled || !inputValue) {\n      return allOptions\n    }\n\n    const convertedInputtedValue = convertMatchableString(inputValue)\n\n    return allOptions.filter(({ item: { label } }) =>\n      convertMatchableString(innerText(label)).includes(convertedInputtedValue),\n    )\n    // TODO: itemsの安定化方法を検討中\n  }, [isSelected, items, optionIdPrefix, inputValue, creatable, newItemId, isFilteringDisabled])\n\n  return {\n    options,\n  }\n}\n"],"names":["areItemsEqual","useCallback","useRef","useId","useMemo","convertMatchableString","innerText"],"mappings":";;;;;;AAOA,MAAM,qBAAqB,GAAG,CAC5B,UAA2B,EAC3B,aAAqC,KAClC,aAAa,CAAC,IAAI,CAAC,CAAC,IAAI,KAAKA,wCAAa,CAAC,IAAI,EAAE,UAAU,CAAC,CAAC;AAS3D,MAAM,gBAAgB,GAAG,CAAI,EAClC,QAAQ,EACR,GAAG,IAAI,EAGR,KAAI;IACH,MAAM,UAAU,GAAGC,iBAAW,CAC5B,CAAC,IAAqB,KAAK,QAAQ,KAAK,IAAI,IAAID,wCAAa,CAAC,QAAQ,EAAE,IAAI,CAAC,EAC7E,CAAC,QAAQ,CAAC,CACX;AAED,IAAA,OAAO,UAAU,CAAI,IAAI,EAAE,UAAU,CAAC;AACxC;AAEO,MAAM,eAAe,GAAG,CAAI,EACjC,QAAQ,EACR,cAAc,GAAG,qBAAqB,EACtC,GAAG,IAAI,EAIR,KAAI;IACH,MAAM,WAAW,GAAGE,YAAM,CAAC,EAAE,cAAc,EAAE,CAAC;AAC9C,IAAA,WAAW,CAAC,OAAO,GAAG,EAAE,cAAc,EAAE;IAExC,MAAM,UAAU,GAAGD,iBAAW,CAC5B,CAAC,IAAqB,KAAK,WAAW,CAAC,OAAO,CAAC,cAAc,CAAC,IAAI,EAAE,QAAQ,CAAC,EAC7E,CAAC,QAAQ,CAAC,CACX;AAED,IAAA,OAAO,UAAU,CAAI,IAAI,EAAE,UAAU,CAAC;AACxC;AAEA,SAAS,UAAU,CACjB,EAAE,KAAK,EAAE,SAAS,EAAE,UAAU,GAAG,EAAE,EAAE,mBAAmB,GAAG,KAAK,EAA0B,EAC1F,UAA8C,EAAA;AAE9C,IAAA,MAAM,SAAS,GAAGE,WAAK,EAAE;AACzB,IAAA,MAAM,cAAc,GAAGA,WAAK,EAAE;AAE9B,IAAA,MAAM,OAAO,GAAGC,aAAO,CAAC,MAAK;AAC3B,QAAA,MAAM,cAAc,GAA6B,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,MAAM;AACvE,YAAA,EAAE,EAAE,CAAA,EAAG,cAAc,CAAA,CAAA,EAAI,CAAC,CAAA,CAAE;AAC5B,YAAA,QAAQ,EAAE,UAAU,CAAC,IAAI,CAAC;AAC1B,YAAA,KAAK,EAAE,KAAK;YACZ,IAAI;AACL,SAAA,CAAC,CAAC;QAEH,MAAM,UAAU,GACd,SAAS,IAAI,UAAU,IAAI,KAAK,CAAC,KAAK,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,KAAK,KAAK,UAAU;AACxE,cAAE;AACE,gBAAA;AACE,oBAAA,EAAE,EAAE,SAAS;AACb,oBAAA,KAAK,EAAE,IAAI;AACX,oBAAA,QAAQ,EAAE,KAAK;oBACf,IAAI,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE;AAC1B,iBAAA;AACtB,gBAAA,GAAG,cAAc;AAClB;cACD,cAAc;AAEpB,QAAA,IAAI,mBAAmB,IAAI,CAAC,UAAU,EAAE;AACtC,YAAA,OAAO,UAAU;QACnB;AAEA,QAAA,MAAM,sBAAsB,GAAGC,iDAAsB,CAAC,UAAU,CAAC;AAEjE,QAAA,OAAO,UAAU,CAAC,MAAM,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE,KAAK,EAAE,EAAE,KAC3CA,iDAAsB,CAACC,KAAS,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,sBAAsB,CAAC,CAC1E;;AAEH,IAAA,CAAC,EAAE,CAAC,UAAU,EAAE,KAAK,EAAE,cAAc,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,mBAAmB,CAAC,CAAC;IAE9F,OAAO;QACL,OAAO;KACR;AACH;;;;;"}

package/lib/components/Combobox/useOptions.js

@@ -1,4 +1,4 @@
-import { useCallback, useId, useMemo } from 'react';
+import { useRef, useCallback, useId, useMemo } from 'react';
 import innerText from '../../_virtual/index3.js';
 import { areItemsEqual, convertMatchableString } from './helper.js';
 
@@ -8,7 +8,9 @@ const useSingleOptions = ({ selected, ...rest }) => {
     return useOptions(rest, isSelected);
 };
 const useMultiOptions = ({ selected, isItemSelected = defaultIsItemSelected, ...rest }) => {
-    const isSelected = useCallback((item) => isItemSelected(item, selected), [selected, isItemSelected]);
+    const unstableRef = useRef({ isItemSelected });
+    unstableRef.current = { isItemSelected };
+    const isSelected = useCallback((item) => unstableRef.current.isItemSelected(item, selected), [selected]);
     return useOptions(rest, isSelected);
 };
 function useOptions({ items, creatable, inputValue = '', isFilteringDisabled = false }, isSelected) {

package/lib/components/Combobox/useOptions.js.map

@@ -1 +1 @@
-{"version":3,"file":"useOptions.js","sources":["../../../src/components/Combobox/useOptions.ts"],"sourcesContent":["import { useCallback, useId, useMemo } from 'react'\nimport innerText from 'react-innertext'\n\nimport { areItemsEqual, convertMatchableString } from './helper'\n\nimport type { ComboboxItem, ComboboxOption } from './types'\n\nconst defaultIsItemSelected = <T>(\n  targetItem: ComboboxItem<T>,\n  selectedItems: Array<ComboboxItem<T>>,\n) => selectedItems.some((item) => areItemsEqual(item, targetItem))\n\ntype BaseUseOptionsProps<T> = {\n  items: Array<ComboboxItem<T>>\n  creatable?: boolean\n  inputValue?: string\n  isFilteringDisabled?: boolean\n}\n\nexport const useSingleOptions = <T>({\n  selected,\n  ...rest\n}: BaseUseOptionsProps<T> & {\n  selected: ComboboxItem<T> | null\n}) => {\n  const isSelected = useCallback(\n    (item: ComboboxItem<T>) => selected !== null && areItemsEqual(selected, item),\n    [selected],\n  )\n\n  return useOptions<T>(rest, isSelected)\n}\n\nexport const useMultiOptions = <T>({\n  selected,\n  isItemSelected = defaultIsItemSelected,\n  ...rest\n}: BaseUseOptionsProps<T> & {\n  selected: Array<ComboboxItem<T>>\n  isItemSelected?: (targetItem: ComboboxItem<T>, selectedItems: Array<ComboboxItem<T>>) => boolean\n}) => {\n  const isSelected = useCallback(\n    (item: ComboboxItem<T>) => isItemSelected(item, selected),\n    [selected, isItemSelected],\n  )\n\n  return useOptions<T>(rest, isSelected)\n}\n\nfunction useOptions<T>(\n  { items, creatable, inputValue = '', isFilteringDisabled = false }: BaseUseOptionsProps<T>,\n  isSelected: (item: ComboboxItem<T>) => boolean,\n) {\n  const newItemId = useId()\n  const optionIdPrefix = useId()\n\n  const options = useMemo(() => {\n    const existedOptions: Array<ComboboxOption<T>> = items.map((item, i) => ({\n      id: `${optionIdPrefix}-${i}`,\n      selected: isSelected(item),\n      isNew: false,\n      item,\n    }))\n\n    const allOptions =\n      creatable && inputValue && items.every((item) => item.label !== inputValue)\n        ? [\n            {\n              id: newItemId,\n              isNew: true,\n              selected: false,\n              item: { label: inputValue, value: inputValue },\n            } as ComboboxOption<T>,\n            ...existedOptions,\n          ]\n        : existedOptions\n\n    if (isFilteringDisabled || !inputValue) {\n      return allOptions\n    }\n\n    const convertedInputtedValue = convertMatchableString(inputValue)\n\n    return allOptions.filter(({ item: { label } }) =>\n      convertMatchableString(innerText(label)).includes(convertedInputtedValue),\n    )\n    // TODO: itemsの安定化方法を検討中\n  }, [isSelected, items, optionIdPrefix, inputValue, creatable, newItemId, isFilteringDisabled])\n\n  return {\n    options,\n  }\n}\n"],"names":[],"mappings":";;;;AAOA,MAAM,qBAAqB,GAAG,CAC5B,UAA2B,EAC3B,aAAqC,KAClC,aAAa,CAAC,IAAI,CAAC,CAAC,IAAI,KAAK,aAAa,CAAC,IAAI,EAAE,UAAU,CAAC,CAAC;AAS3D,MAAM,gBAAgB,GAAG,CAAI,EAClC,QAAQ,EACR,GAAG,IAAI,EAGR,KAAI;IACH,MAAM,UAAU,GAAG,WAAW,CAC5B,CAAC,IAAqB,KAAK,QAAQ,KAAK,IAAI,IAAI,aAAa,CAAC,QAAQ,EAAE,IAAI,CAAC,EAC7E,CAAC,QAAQ,CAAC,CACX;AAED,IAAA,OAAO,UAAU,CAAI,IAAI,EAAE,UAAU,CAAC;AACxC;AAEO,MAAM,eAAe,GAAG,CAAI,EACjC,QAAQ,EACR,cAAc,GAAG,qBAAqB,EACtC,GAAG,IAAI,EAIR,KAAI;IACH,MAAM,UAAU,GAAG,WAAW,CAC5B,CAAC,IAAqB,KAAK,cAAc,CAAC,IAAI,EAAE,QAAQ,CAAC,EACzD,CAAC,QAAQ,EAAE,cAAc,CAAC,CAC3B;AAED,IAAA,OAAO,UAAU,CAAI,IAAI,EAAE,UAAU,CAAC;AACxC;AAEA,SAAS,UAAU,CACjB,EAAE,KAAK,EAAE,SAAS,EAAE,UAAU,GAAG,EAAE,EAAE,mBAAmB,GAAG,KAAK,EAA0B,EAC1F,UAA8C,EAAA;AAE9C,IAAA,MAAM,SAAS,GAAG,KAAK,EAAE;AACzB,IAAA,MAAM,cAAc,GAAG,KAAK,EAAE;AAE9B,IAAA,MAAM,OAAO,GAAG,OAAO,CAAC,MAAK;AAC3B,QAAA,MAAM,cAAc,GAA6B,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,MAAM;AACvE,YAAA,EAAE,EAAE,CAAA,EAAG,cAAc,CAAA,CAAA,EAAI,CAAC,CAAA,CAAE;AAC5B,YAAA,QAAQ,EAAE,UAAU,CAAC,IAAI,CAAC;AAC1B,YAAA,KAAK,EAAE,KAAK;YACZ,IAAI;AACL,SAAA,CAAC,CAAC;QAEH,MAAM,UAAU,GACd,SAAS,IAAI,UAAU,IAAI,KAAK,CAAC,KAAK,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,KAAK,KAAK,UAAU;AACxE,cAAE;AACE,gBAAA;AACE,oBAAA,EAAE,EAAE,SAAS;AACb,oBAAA,KAAK,EAAE,IAAI;AACX,oBAAA,QAAQ,EAAE,KAAK;oBACf,IAAI,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE;AAC1B,iBAAA;AACtB,gBAAA,GAAG,cAAc;AAClB;cACD,cAAc;AAEpB,QAAA,IAAI,mBAAmB,IAAI,CAAC,UAAU,EAAE;AACtC,YAAA,OAAO,UAAU;QACnB;AAEA,QAAA,MAAM,sBAAsB,GAAG,sBAAsB,CAAC,UAAU,CAAC;AAEjE,QAAA,OAAO,UAAU,CAAC,MAAM,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE,KAAK,EAAE,EAAE,KAC3C,sBAAsB,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,sBAAsB,CAAC,CAC1E;;AAEH,IAAA,CAAC,EAAE,CAAC,UAAU,EAAE,KAAK,EAAE,cAAc,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,mBAAmB,CAAC,CAAC;IAE9F,OAAO;QACL,OAAO;KACR;AACH;;;;"}
+{"version":3,"file":"useOptions.js","sources":["../../../src/components/Combobox/useOptions.ts"],"sourcesContent":["import { useCallback, useId, useMemo, useRef } from 'react'\nimport innerText from 'react-innertext'\n\nimport { areItemsEqual, convertMatchableString } from './helper'\n\nimport type { ComboboxItem, ComboboxOption } from './types'\n\nconst defaultIsItemSelected = <T>(\n  targetItem: ComboboxItem<T>,\n  selectedItems: Array<ComboboxItem<T>>,\n) => selectedItems.some((item) => areItemsEqual(item, targetItem))\n\ntype BaseUseOptionsProps<T> = {\n  items: Array<ComboboxItem<T>>\n  creatable?: boolean\n  inputValue?: string\n  isFilteringDisabled?: boolean\n}\n\nexport const useSingleOptions = <T>({\n  selected,\n  ...rest\n}: BaseUseOptionsProps<T> & {\n  selected: ComboboxItem<T> | null\n}) => {\n  const isSelected = useCallback(\n    (item: ComboboxItem<T>) => selected !== null && areItemsEqual(selected, item),\n    [selected],\n  )\n\n  return useOptions<T>(rest, isSelected)\n}\n\nexport const useMultiOptions = <T>({\n  selected,\n  isItemSelected = defaultIsItemSelected,\n  ...rest\n}: BaseUseOptionsProps<T> & {\n  selected: Array<ComboboxItem<T>>\n  isItemSelected?: (targetItem: ComboboxItem<T>, selectedItems: Array<ComboboxItem<T>>) => boolean\n}) => {\n  const unstableRef = useRef({ isItemSelected })\n  unstableRef.current = { isItemSelected }\n\n  const isSelected = useCallback(\n    (item: ComboboxItem<T>) => unstableRef.current.isItemSelected(item, selected),\n    [selected],\n  )\n\n  return useOptions<T>(rest, isSelected)\n}\n\nfunction useOptions<T>(\n  { items, creatable, inputValue = '', isFilteringDisabled = false }: BaseUseOptionsProps<T>,\n  isSelected: (item: ComboboxItem<T>) => boolean,\n) {\n  const newItemId = useId()\n  const optionIdPrefix = useId()\n\n  const options = useMemo(() => {\n    const existedOptions: Array<ComboboxOption<T>> = items.map((item, i) => ({\n      id: `${optionIdPrefix}-${i}`,\n      selected: isSelected(item),\n      isNew: false,\n      item,\n    }))\n\n    const allOptions =\n      creatable && inputValue && items.every((item) => item.label !== inputValue)\n        ? [\n            {\n              id: newItemId,\n              isNew: true,\n              selected: false,\n              item: { label: inputValue, value: inputValue },\n            } as ComboboxOption<T>,\n            ...existedOptions,\n          ]\n        : existedOptions\n\n    if (isFilteringDisabled || !inputValue) {\n      return allOptions\n    }\n\n    const convertedInputtedValue = convertMatchableString(inputValue)\n\n    return allOptions.filter(({ item: { label } }) =>\n      convertMatchableString(innerText(label)).includes(convertedInputtedValue),\n    )\n    // TODO: itemsの安定化方法を検討中\n  }, [isSelected, items, optionIdPrefix, inputValue, creatable, newItemId, isFilteringDisabled])\n\n  return {\n    options,\n  }\n}\n"],"names":[],"mappings":";;;;AAOA,MAAM,qBAAqB,GAAG,CAC5B,UAA2B,EAC3B,aAAqC,KAClC,aAAa,CAAC,IAAI,CAAC,CAAC,IAAI,KAAK,aAAa,CAAC,IAAI,EAAE,UAAU,CAAC,CAAC;AAS3D,MAAM,gBAAgB,GAAG,CAAI,EAClC,QAAQ,EACR,GAAG,IAAI,EAGR,KAAI;IACH,MAAM,UAAU,GAAG,WAAW,CAC5B,CAAC,IAAqB,KAAK,QAAQ,KAAK,IAAI,IAAI,aAAa,CAAC,QAAQ,EAAE,IAAI,CAAC,EAC7E,CAAC,QAAQ,CAAC,CACX;AAED,IAAA,OAAO,UAAU,CAAI,IAAI,EAAE,UAAU,CAAC;AACxC;AAEO,MAAM,eAAe,GAAG,CAAI,EACjC,QAAQ,EACR,cAAc,GAAG,qBAAqB,EACtC,GAAG,IAAI,EAIR,KAAI;IACH,MAAM,WAAW,GAAG,MAAM,CAAC,EAAE,cAAc,EAAE,CAAC;AAC9C,IAAA,WAAW,CAAC,OAAO,GAAG,EAAE,cAAc,EAAE;IAExC,MAAM,UAAU,GAAG,WAAW,CAC5B,CAAC,IAAqB,KAAK,WAAW,CAAC,OAAO,CAAC,cAAc,CAAC,IAAI,EAAE,QAAQ,CAAC,EAC7E,CAAC,QAAQ,CAAC,CACX;AAED,IAAA,OAAO,UAAU,CAAI,IAAI,EAAE,UAAU,CAAC;AACxC;AAEA,SAAS,UAAU,CACjB,EAAE,KAAK,EAAE,SAAS,EAAE,UAAU,GAAG,EAAE,EAAE,mBAAmB,GAAG,KAAK,EAA0B,EAC1F,UAA8C,EAAA;AAE9C,IAAA,MAAM,SAAS,GAAG,KAAK,EAAE;AACzB,IAAA,MAAM,cAAc,GAAG,KAAK,EAAE;AAE9B,IAAA,MAAM,OAAO,GAAG,OAAO,CAAC,MAAK;AAC3B,QAAA,MAAM,cAAc,GAA6B,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,MAAM;AACvE,YAAA,EAAE,EAAE,CAAA,EAAG,cAAc,CAAA,CAAA,EAAI,CAAC,CAAA,CAAE;AAC5B,YAAA,QAAQ,EAAE,UAAU,CAAC,IAAI,CAAC;AAC1B,YAAA,KAAK,EAAE,KAAK;YACZ,IAAI;AACL,SAAA,CAAC,CAAC;QAEH,MAAM,UAAU,GACd,SAAS,IAAI,UAAU,IAAI,KAAK,CAAC,KAAK,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,KAAK,KAAK,UAAU;AACxE,cAAE;AACE,gBAAA;AACE,oBAAA,EAAE,EAAE,SAAS;AACb,oBAAA,KAAK,EAAE,IAAI;AACX,oBAAA,QAAQ,EAAE,KAAK;oBACf,IAAI,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE;AAC1B,iBAAA;AACtB,gBAAA,GAAG,cAAc;AAClB;cACD,cAAc;AAEpB,QAAA,IAAI,mBAAmB,IAAI,CAAC,UAAU,EAAE;AACtC,YAAA,OAAO,UAAU;QACnB;AAEA,QAAA,MAAM,sBAAsB,GAAG,sBAAsB,CAAC,UAAU,CAAC;AAEjE,QAAA,OAAO,UAAU,CAAC,MAAM,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE,KAAK,EAAE,EAAE,KAC3C,sBAAsB,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,sBAAsB,CAAC,CAC1E;;AAEH,IAAA,CAAC,EAAE,CAAC,UAAU,EAAE,KAAK,EAAE,cAAc,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,mBAAmB,CAAC,CAAC;IAE9F,OAAO;QACL,OAAO;KACR;AACH;;;;"}

package/lib/components/Dialog/ControlledActionDialog/ActionDialogContentInner.cjs

@@ -6,13 +6,13 @@ var React = require('react');
 var hooks_useResponseStatus = require('../../../hooks/useResponseStatus.cjs');
 require('../../../intl/IntlProvider.cjs');
 var intl_useIntl = require('../../../intl/useIntl.cjs');
-require('react-intl');
+require('../../../intl/Localizer.cjs');
 require('../../../_virtual/dayjs.min.cjs');
 require('../../../intl/TimeFormatter.cjs');
 var components_Button_Button = require('../../Button/Button.cjs');
 require('../../Button/AnchorButton.cjs');
 require('../../Button/UnstyledButton.cjs');
-var components_Layout_Stack_Stack = require('../../Layout/Stack/Stack.cjs');
+require('../../Layout/Stack/Stack.cjs');
 var components_Layout_Cluster_Cluster = require('../../Layout/Cluster/Cluster.cjs');
 require('../../Layout/Reel/Reel.cjs');
 require('../../Layout/Sidebar/Sidebar.cjs');
@@ -38,7 +38,7 @@ const ActionDialogContentInner = ({ children, heading, contentBgColor, contentPa
             message: message(),
         };
     }, []);
-    return (jsxRuntime.jsxs(components_SectioningContent_SectioningContent.Section, { className: styles.wrapper, children: [jsxRuntime.jsx(components_Dialog_DialogHeading.DialogHeading, { ...heading }), jsxRuntime.jsx(components_Dialog_DialogBody.DialogBody, { contentPadding: contentPadding, contentBgColor: contentBgColor, children: children }), jsxRuntime.jsxs(components_Layout_Stack_Stack.Stack, { gap: 0.5, className: styles.actionArea, children: [jsxRuntime.jsxs(components_Layout_Cluster_Cluster.Cluster, { justify: "space-between", children: [subActionArea, jsxRuntime.jsx(ActionAreaCluster, { onClickClose: onClickClose, onClickAction: onClickAction, closeButton: closeButton, actionButton: actionButton, loading: calcedResponseStatus.isProcessing, className: styles.buttonArea })] }), jsxRuntime.jsx(components_Dialog_DialogContentResponseStatusMessage.DialogContentResponseStatusMessage, { responseStatus: calcedResponseStatus, className: styles.message })] })] }));
+    return (jsxRuntime.jsxs(components_SectioningContent_SectioningContent.Section, { className: styles.wrapper, children: [jsxRuntime.jsx(components_Dialog_DialogHeading.DialogHeading, { ...heading }), jsxRuntime.jsx(components_Dialog_DialogBody.DialogBody, { contentPadding: contentPadding, contentBgColor: contentBgColor, children: children }), jsxRuntime.jsxs("div", { className: styles.actionArea, children: [jsxRuntime.jsxs(components_Layout_Cluster_Cluster.Cluster, { justify: "space-between", children: [subActionArea, jsxRuntime.jsx(ActionAreaCluster, { onClickClose: onClickClose, onClickAction: onClickAction, closeButton: closeButton, actionButton: actionButton, loading: calcedResponseStatus.isProcessing, className: styles.buttonArea })] }), jsxRuntime.jsx(components_Dialog_DialogContentResponseStatusMessage.DialogContentResponseStatusMessage, { responseStatus: calcedResponseStatus, className: styles.message })] })] }));
 };
 const ActionAreaCluster = React.memo(({ onClickClose, onClickAction, closeButton, actionButton, loading, className }) => {
     const handleClickAction = React.useCallback((e) => {

package/lib/components/Dialog/ControlledActionDialog/ActionDialogContentInner.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ActionDialogContentInner.cjs","sources":["../../../../src/components/Dialog/ControlledActionDialog/ActionDialogContentInner.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type FC,\n  type MouseEvent,\n  type PropsWithChildren,\n  type ReactNode,\n  memo,\n  useCallback,\n  useMemo,\n} from 'react'\n\nimport { type ResponseStatus, useResponseStatus } from '../../../hooks/useResponseStatus'\nimport { useIntl } from '../../../intl'\nimport { Button } from '../../Button'\nimport { Cluster, Stack } from '../../Layout'\nimport { Section } from '../../SectioningContent'\nimport { DialogBody, type Props as DialogBodyProps } from '../DialogBody'\nimport { DialogContentResponseStatusMessage } from '../DialogContentResponseStatusMessage'\nimport { DialogHeading, type Props as DialogHeadingProps } from '../DialogHeading'\nimport { dialogContentInner } from '../dialogInnerStyle'\n\nexport type ActionDialogHelpers = {\n  close: () => void\n}\n\ntype ObjectActionButtonType = {\n  /** アクションボタンのラベル */\n  text: ReactNode\n  /** アクションボタンのスタイル */\n  theme?: 'primary' | 'secondary' | 'danger'\n  /** アクションボタンを無効にするかどうか */\n  disabled?: boolean\n}\n\ntype ObjectCloseButtonType = {\n  /** 閉じるボタンのラベル */\n  text: ReactNode\n  /** 閉じるボタンを無効にするかどうか */\n  disabled?: boolean\n}\n\nexport type AbstractProps = PropsWithChildren<\n  DialogBodyProps & {\n    /** ダイアログタイトル */\n    heading: DialogHeadingProps\n    /** アクションボタン */\n    actionButton: ObjectActionButtonType\n    /**\n     * アクションボタンをクリックした時に発火するコールバック関数\n     * @param e マウスイベント\n     * @param helpers ダイアログ操作のためのヘルパー関数\n     */\n    onClickAction: (e: MouseEvent<Element>, helpers: ActionDialogHelpers) => void\n    /** 閉じるボタン */\n    closeButton: ObjectCloseButtonType\n    /** ダイアログフッターの左端操作領域 */\n    subActionArea?: ReactNode\n  }\n>\n\nexport type ActionDialogContentInnerProps = AbstractProps & {\n  onClickClose: () => void\n  responseStatus?: ResponseStatus\n}\n\nconst ACTION_AREA_CLUSTER_GAP = { row: 0.5, column: 1 } as const\n\nexport const ActionDialogContentInner: FC<ActionDialogContentInnerProps> = ({\n  children,\n  heading,\n  contentBgColor,\n  contentPadding,\n  actionButton,\n  onClickAction,\n  onClickClose,\n  responseStatus,\n  closeButton,\n  subActionArea,\n}) => {\n  const calcedResponseStatus = useResponseStatus(responseStatus)\n\n  const styles = useMemo(() => {\n    const { wrapper, actionArea, buttonArea, message } = dialogContentInner()\n\n    return {\n      wrapper: wrapper(),\n      actionArea: actionArea(),\n      buttonArea: buttonArea(),\n      message: message(),\n    }\n  }, [])\n\n  return (\n    <Section className={styles.wrapper}>\n      <DialogHeading {...heading} />\n      <DialogBody contentPadding={contentPadding} contentBgColor={contentBgColor}>\n        {children}\n      </DialogBody>\n      <Stack gap={0.5} className={styles.actionArea}>\n        <Cluster justify=\"space-between\">\n          {subActionArea}\n          <ActionAreaCluster\n            onClickClose={onClickClose}\n            onClickAction={onClickAction}\n            closeButton={closeButton}\n            actionButton={actionButton}\n            loading={calcedResponseStatus.isProcessing}\n            className={styles.buttonArea}\n          />\n        </Cluster>\n        <DialogContentResponseStatusMessage\n          responseStatus={calcedResponseStatus}\n          className={styles.message}\n        />\n      </Stack>\n    </Section>\n  )\n}\n\nconst ActionAreaCluster = memo<\n  Pick<ActionDialogContentInnerProps, 'onClickClose' | 'onClickAction'> & {\n    actionButton: ObjectActionButtonType\n    closeButton: ObjectCloseButtonType\n    loading: boolean\n    className: string\n  }\n>(({ onClickClose, onClickAction, closeButton, actionButton, loading, className }) => {\n  const handleClickAction = useCallback(\n    (e: MouseEvent<Element>) => {\n      onClickAction(e, { close: onClickClose })\n    },\n    [onClickAction, onClickClose],\n  )\n\n  return (\n    <Cluster gap={ACTION_AREA_CLUSTER_GAP} className={className}>\n      <CloseButton\n        onClick={onClickClose}\n        disabled={closeButton.disabled || loading}\n        text={closeButton.text}\n      />\n      <ActionButton\n        variant={actionButton.theme}\n        disabled={actionButton.disabled}\n        loading={loading}\n        onClick={handleClickAction}\n      >\n        {actionButton.text}\n      </ActionButton>\n    </Cluster>\n  )\n})\n\nconst ActionButton = memo<\n  PropsWithChildren<{\n    variant: ObjectActionButtonType['theme']\n    disabled: ObjectActionButtonType['disabled']\n    loading: boolean\n    onClick: (e: MouseEvent<HTMLButtonElement>) => void\n  }>\n>(({ variant = 'primary', disabled, loading, onClick, children }) => (\n  <Button\n    type=\"submit\"\n    variant={variant}\n    disabled={disabled}\n    loading={loading}\n    onClick={onClick}\n    className=\"smarthr-ui-Dialog-actionButton\"\n  >\n    {children}\n  </Button>\n))\n\nconst CloseButton = memo<{\n  onClick: ActionDialogContentInnerProps['onClickClose']\n  disabled: boolean\n  text: ReactNode\n}>(({ onClick, disabled, text }) => {\n  const { localize } = useIntl()\n\n  const defaultText = useMemo(\n    () =>\n      localize({\n        id: 'smarthr-ui/ActionDialog/closeButtonLabel',\n        defaultText: 'キャンセル',\n      }),\n    [localize],\n  )\n\n  return (\n    <Button onClick={onClick} disabled={disabled} className=\"smarthr-ui-Dialog-closeButton\">\n      {text ?? defaultText}\n    </Button>\n  )\n})\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkEA;AAEO;AAYL;AAEA;AACE;;;;;;;;;AAmCJ;AAEA;AAQE;;AAGE;AAIF;AAiBF;AAEA;AAoBA;AAKE;;AAKM;AACA;AACD;;AASP;;"}
+{"version":3,"file":"ActionDialogContentInner.cjs","sources":["../../../../src/components/Dialog/ControlledActionDialog/ActionDialogContentInner.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type FC,\n  type MouseEvent,\n  type PropsWithChildren,\n  type ReactNode,\n  memo,\n  useCallback,\n  useMemo,\n} from 'react'\n\nimport { type ResponseStatus, useResponseStatus } from '../../../hooks/useResponseStatus'\nimport { useIntl } from '../../../intl'\nimport { Button } from '../../Button'\nimport { Cluster } from '../../Layout'\nimport { Section } from '../../SectioningContent'\nimport { DialogBody, type Props as DialogBodyProps } from '../DialogBody'\nimport { DialogContentResponseStatusMessage } from '../DialogContentResponseStatusMessage'\nimport { DialogHeading, type Props as DialogHeadingProps } from '../DialogHeading'\nimport { dialogContentInner } from '../dialogInnerStyle'\n\nexport type ActionDialogHelpers = {\n  close: () => void\n}\n\ntype ObjectActionButtonType = {\n  /** アクションボタンのラベル */\n  text: ReactNode\n  /** アクションボタンのスタイル */\n  theme?: 'primary' | 'secondary' | 'danger'\n  /** アクションボタンを無効にするかどうか */\n  disabled?: boolean\n}\n\ntype ObjectCloseButtonType = {\n  /** 閉じるボタンのラベル */\n  text: ReactNode\n  /** 閉じるボタンを無効にするかどうか */\n  disabled?: boolean\n}\n\nexport type AbstractProps = PropsWithChildren<\n  DialogBodyProps & {\n    /** ダイアログタイトル */\n    heading: DialogHeadingProps\n    /** アクションボタン */\n    actionButton: ObjectActionButtonType\n    /**\n     * アクションボタンをクリックした時に発火するコールバック関数\n     * @param e マウスイベント\n     * @param helpers ダイアログ操作のためのヘルパー関数\n     */\n    onClickAction: (e: MouseEvent<Element>, helpers: ActionDialogHelpers) => void\n    /** 閉じるボタン */\n    closeButton: ObjectCloseButtonType\n    /** ダイアログフッターの左端操作領域 */\n    subActionArea?: ReactNode\n  }\n>\n\nexport type ActionDialogContentInnerProps = AbstractProps & {\n  onClickClose: () => void\n  responseStatus?: ResponseStatus\n}\n\nconst ACTION_AREA_CLUSTER_GAP = { row: 0.5, column: 1 } as const\n\nexport const ActionDialogContentInner: FC<ActionDialogContentInnerProps> = ({\n  children,\n  heading,\n  contentBgColor,\n  contentPadding,\n  actionButton,\n  onClickAction,\n  onClickClose,\n  responseStatus,\n  closeButton,\n  subActionArea,\n}) => {\n  const calcedResponseStatus = useResponseStatus(responseStatus)\n\n  const styles = useMemo(() => {\n    const { wrapper, actionArea, buttonArea, message } = dialogContentInner()\n\n    return {\n      wrapper: wrapper(),\n      actionArea: actionArea(),\n      buttonArea: buttonArea(),\n      message: message(),\n    }\n  }, [])\n\n  return (\n    <Section className={styles.wrapper}>\n      <DialogHeading {...heading} />\n      <DialogBody contentPadding={contentPadding} contentBgColor={contentBgColor}>\n        {children}\n      </DialogBody>\n      <div className={styles.actionArea}>\n        <Cluster justify=\"space-between\">\n          {subActionArea}\n          <ActionAreaCluster\n            onClickClose={onClickClose}\n            onClickAction={onClickAction}\n            closeButton={closeButton}\n            actionButton={actionButton}\n            loading={calcedResponseStatus.isProcessing}\n            className={styles.buttonArea}\n          />\n        </Cluster>\n        <DialogContentResponseStatusMessage\n          responseStatus={calcedResponseStatus}\n          className={styles.message}\n        />\n      </div>\n    </Section>\n  )\n}\n\nconst ActionAreaCluster = memo<\n  Pick<ActionDialogContentInnerProps, 'onClickClose' | 'onClickAction'> & {\n    actionButton: ObjectActionButtonType\n    closeButton: ObjectCloseButtonType\n    loading: boolean\n    className: string\n  }\n>(({ onClickClose, onClickAction, closeButton, actionButton, loading, className }) => {\n  const handleClickAction = useCallback(\n    (e: MouseEvent<Element>) => {\n      onClickAction(e, { close: onClickClose })\n    },\n    [onClickAction, onClickClose],\n  )\n\n  return (\n    <Cluster gap={ACTION_AREA_CLUSTER_GAP} className={className}>\n      <CloseButton\n        onClick={onClickClose}\n        disabled={closeButton.disabled || loading}\n        text={closeButton.text}\n      />\n      <ActionButton\n        variant={actionButton.theme}\n        disabled={actionButton.disabled}\n        loading={loading}\n        onClick={handleClickAction}\n      >\n        {actionButton.text}\n      </ActionButton>\n    </Cluster>\n  )\n})\n\nconst ActionButton = memo<\n  PropsWithChildren<{\n    variant: ObjectActionButtonType['theme']\n    disabled: ObjectActionButtonType['disabled']\n    loading: boolean\n    onClick: (e: MouseEvent<HTMLButtonElement>) => void\n  }>\n>(({ variant = 'primary', disabled, loading, onClick, children }) => (\n  <Button\n    type=\"submit\"\n    variant={variant}\n    disabled={disabled}\n    loading={loading}\n    onClick={onClick}\n    className=\"smarthr-ui-Dialog-actionButton\"\n  >\n    {children}\n  </Button>\n))\n\nconst CloseButton = memo<{\n  onClick: ActionDialogContentInnerProps['onClickClose']\n  disabled: boolean\n  text: ReactNode\n}>(({ onClick, disabled, text }) => {\n  const { localize } = useIntl()\n\n  const defaultText = useMemo(\n    () =>\n      localize({\n        id: 'smarthr-ui/ActionDialog/closeButtonLabel',\n        defaultText: 'キャンセル',\n      }),\n    [localize],\n  )\n\n  return (\n    <Button onClick={onClick} disabled={disabled} className=\"smarthr-ui-Dialog-closeButton\">\n      {text ?? defaultText}\n    </Button>\n  )\n})\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkEA;AAEO;AAYL;AAEA;AACE;;;;;;;;;AAmCJ;AAEA;AAQE;;AAGE;AAIF;AAiBF;AAEA;AAoBA;AAKE;;AAKM;AACA;AACD;;AASP;;"}

package/lib/components/Dialog/ControlledActionDialog/ActionDialogContentInner.js

@@ -4,13 +4,13 @@ import { memo, useCallback, useMemo } from 'react';
 import { useResponseStatus } from '../../../hooks/useResponseStatus.js';
 import '../../../intl/IntlProvider.js';
 import { useIntl } from '../../../intl/useIntl.js';
-import 'react-intl';
+import '../../../intl/Localizer.js';
 import '../../../_virtual/dayjs.min.js';
 import '../../../intl/TimeFormatter.js';
 import { Button } from '../../Button/Button.js';
 import '../../Button/AnchorButton.js';
 import '../../Button/UnstyledButton.js';
-import { Stack } from '../../Layout/Stack/Stack.js';
+import '../../Layout/Stack/Stack.js';
 import { Cluster } from '../../Layout/Cluster/Cluster.js';
 import '../../Layout/Reel/Reel.js';
 import '../../Layout/Sidebar/Sidebar.js';
@@ -36,7 +36,7 @@ const ActionDialogContentInner = ({ children, heading, contentBgColor, contentPa
             message: message(),
         };
     }, []);
-    return (jsxs(Section, { className: styles.wrapper, children: [jsx(DialogHeading, { ...heading }), jsx(DialogBody, { contentPadding: contentPadding, contentBgColor: contentBgColor, children: children }), jsxs(Stack, { gap: 0.5, className: styles.actionArea, children: [jsxs(Cluster, { justify: "space-between", children: [subActionArea, jsx(ActionAreaCluster, { onClickClose: onClickClose, onClickAction: onClickAction, closeButton: closeButton, actionButton: actionButton, loading: calcedResponseStatus.isProcessing, className: styles.buttonArea })] }), jsx(DialogContentResponseStatusMessage, { responseStatus: calcedResponseStatus, className: styles.message })] })] }));
+    return (jsxs(Section, { className: styles.wrapper, children: [jsx(DialogHeading, { ...heading }), jsx(DialogBody, { contentPadding: contentPadding, contentBgColor: contentBgColor, children: children }), jsxs("div", { className: styles.actionArea, children: [jsxs(Cluster, { justify: "space-between", children: [subActionArea, jsx(ActionAreaCluster, { onClickClose: onClickClose, onClickAction: onClickAction, closeButton: closeButton, actionButton: actionButton, loading: calcedResponseStatus.isProcessing, className: styles.buttonArea })] }), jsx(DialogContentResponseStatusMessage, { responseStatus: calcedResponseStatus, className: styles.message })] })] }));
 };
 const ActionAreaCluster = memo(({ onClickClose, onClickAction, closeButton, actionButton, loading, className }) => {
     const handleClickAction = useCallback((e) => {

package/lib/components/Dialog/ControlledActionDialog/ActionDialogContentInner.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionDialogContentInner.js","sources":["../../../../src/components/Dialog/ControlledActionDialog/ActionDialogContentInner.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type FC,\n  type MouseEvent,\n  type PropsWithChildren,\n  type ReactNode,\n  memo,\n  useCallback,\n  useMemo,\n} from 'react'\n\nimport { type ResponseStatus, useResponseStatus } from '../../../hooks/useResponseStatus'\nimport { useIntl } from '../../../intl'\nimport { Button } from '../../Button'\nimport { Cluster, Stack } from '../../Layout'\nimport { Section } from '../../SectioningContent'\nimport { DialogBody, type Props as DialogBodyProps } from '../DialogBody'\nimport { DialogContentResponseStatusMessage } from '../DialogContentResponseStatusMessage'\nimport { DialogHeading, type Props as DialogHeadingProps } from '../DialogHeading'\nimport { dialogContentInner } from '../dialogInnerStyle'\n\nexport type ActionDialogHelpers = {\n  close: () => void\n}\n\ntype ObjectActionButtonType = {\n  /** アクションボタンのラベル */\n  text: ReactNode\n  /** アクションボタンのスタイル */\n  theme?: 'primary' | 'secondary' | 'danger'\n  /** アクションボタンを無効にするかどうか */\n  disabled?: boolean\n}\n\ntype ObjectCloseButtonType = {\n  /** 閉じるボタンのラベル */\n  text: ReactNode\n  /** 閉じるボタンを無効にするかどうか */\n  disabled?: boolean\n}\n\nexport type AbstractProps = PropsWithChildren<\n  DialogBodyProps & {\n    /** ダイアログタイトル */\n    heading: DialogHeadingProps\n    /** アクションボタン */\n    actionButton: ObjectActionButtonType\n    /**\n     * アクションボタンをクリックした時に発火するコールバック関数\n     * @param e マウスイベント\n     * @param helpers ダイアログ操作のためのヘルパー関数\n     */\n    onClickAction: (e: MouseEvent<Element>, helpers: ActionDialogHelpers) => void\n    /** 閉じるボタン */\n    closeButton: ObjectCloseButtonType\n    /** ダイアログフッターの左端操作領域 */\n    subActionArea?: ReactNode\n  }\n>\n\nexport type ActionDialogContentInnerProps = AbstractProps & {\n  onClickClose: () => void\n  responseStatus?: ResponseStatus\n}\n\nconst ACTION_AREA_CLUSTER_GAP = { row: 0.5, column: 1 } as const\n\nexport const ActionDialogContentInner: FC<ActionDialogContentInnerProps> = ({\n  children,\n  heading,\n  contentBgColor,\n  contentPadding,\n  actionButton,\n  onClickAction,\n  onClickClose,\n  responseStatus,\n  closeButton,\n  subActionArea,\n}) => {\n  const calcedResponseStatus = useResponseStatus(responseStatus)\n\n  const styles = useMemo(() => {\n    const { wrapper, actionArea, buttonArea, message } = dialogContentInner()\n\n    return {\n      wrapper: wrapper(),\n      actionArea: actionArea(),\n      buttonArea: buttonArea(),\n      message: message(),\n    }\n  }, [])\n\n  return (\n    <Section className={styles.wrapper}>\n      <DialogHeading {...heading} />\n      <DialogBody contentPadding={contentPadding} contentBgColor={contentBgColor}>\n        {children}\n      </DialogBody>\n      <Stack gap={0.5} className={styles.actionArea}>\n        <Cluster justify=\"space-between\">\n          {subActionArea}\n          <ActionAreaCluster\n            onClickClose={onClickClose}\n            onClickAction={onClickAction}\n            closeButton={closeButton}\n            actionButton={actionButton}\n            loading={calcedResponseStatus.isProcessing}\n            className={styles.buttonArea}\n          />\n        </Cluster>\n        <DialogContentResponseStatusMessage\n          responseStatus={calcedResponseStatus}\n          className={styles.message}\n        />\n      </Stack>\n    </Section>\n  )\n}\n\nconst ActionAreaCluster = memo<\n  Pick<ActionDialogContentInnerProps, 'onClickClose' | 'onClickAction'> & {\n    actionButton: ObjectActionButtonType\n    closeButton: ObjectCloseButtonType\n    loading: boolean\n    className: string\n  }\n>(({ onClickClose, onClickAction, closeButton, actionButton, loading, className }) => {\n  const handleClickAction = useCallback(\n    (e: MouseEvent<Element>) => {\n      onClickAction(e, { close: onClickClose })\n    },\n    [onClickAction, onClickClose],\n  )\n\n  return (\n    <Cluster gap={ACTION_AREA_CLUSTER_GAP} className={className}>\n      <CloseButton\n        onClick={onClickClose}\n        disabled={closeButton.disabled || loading}\n        text={closeButton.text}\n      />\n      <ActionButton\n        variant={actionButton.theme}\n        disabled={actionButton.disabled}\n        loading={loading}\n        onClick={handleClickAction}\n      >\n        {actionButton.text}\n      </ActionButton>\n    </Cluster>\n  )\n})\n\nconst ActionButton = memo<\n  PropsWithChildren<{\n    variant: ObjectActionButtonType['theme']\n    disabled: ObjectActionButtonType['disabled']\n    loading: boolean\n    onClick: (e: MouseEvent<HTMLButtonElement>) => void\n  }>\n>(({ variant = 'primary', disabled, loading, onClick, children }) => (\n  <Button\n    type=\"submit\"\n    variant={variant}\n    disabled={disabled}\n    loading={loading}\n    onClick={onClick}\n    className=\"smarthr-ui-Dialog-actionButton\"\n  >\n    {children}\n  </Button>\n))\n\nconst CloseButton = memo<{\n  onClick: ActionDialogContentInnerProps['onClickClose']\n  disabled: boolean\n  text: ReactNode\n}>(({ onClick, disabled, text }) => {\n  const { localize } = useIntl()\n\n  const defaultText = useMemo(\n    () =>\n      localize({\n        id: 'smarthr-ui/ActionDialog/closeButtonLabel',\n        defaultText: 'キャンセル',\n      }),\n    [localize],\n  )\n\n  return (\n    <Button onClick={onClick} disabled={disabled} className=\"smarthr-ui-Dialog-closeButton\">\n      {text ?? defaultText}\n    </Button>\n  )\n})\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAkEA;AAEO;AAYL;AAEA;AACE;;;;;;;;;AAmCJ;AAEA;AAQE;;AAGE;AAIF;AAiBF;AAEA;AAoBA;AAKE;;AAKM;AACA;AACD;;AASP;;"}
+{"version":3,"file":"ActionDialogContentInner.js","sources":["../../../../src/components/Dialog/ControlledActionDialog/ActionDialogContentInner.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type FC,\n  type MouseEvent,\n  type PropsWithChildren,\n  type ReactNode,\n  memo,\n  useCallback,\n  useMemo,\n} from 'react'\n\nimport { type ResponseStatus, useResponseStatus } from '../../../hooks/useResponseStatus'\nimport { useIntl } from '../../../intl'\nimport { Button } from '../../Button'\nimport { Cluster } from '../../Layout'\nimport { Section } from '../../SectioningContent'\nimport { DialogBody, type Props as DialogBodyProps } from '../DialogBody'\nimport { DialogContentResponseStatusMessage } from '../DialogContentResponseStatusMessage'\nimport { DialogHeading, type Props as DialogHeadingProps } from '../DialogHeading'\nimport { dialogContentInner } from '../dialogInnerStyle'\n\nexport type ActionDialogHelpers = {\n  close: () => void\n}\n\ntype ObjectActionButtonType = {\n  /** アクションボタンのラベル */\n  text: ReactNode\n  /** アクションボタンのスタイル */\n  theme?: 'primary' | 'secondary' | 'danger'\n  /** アクションボタンを無効にするかどうか */\n  disabled?: boolean\n}\n\ntype ObjectCloseButtonType = {\n  /** 閉じるボタンのラベル */\n  text: ReactNode\n  /** 閉じるボタンを無効にするかどうか */\n  disabled?: boolean\n}\n\nexport type AbstractProps = PropsWithChildren<\n  DialogBodyProps & {\n    /** ダイアログタイトル */\n    heading: DialogHeadingProps\n    /** アクションボタン */\n    actionButton: ObjectActionButtonType\n    /**\n     * アクションボタンをクリックした時に発火するコールバック関数\n     * @param e マウスイベント\n     * @param helpers ダイアログ操作のためのヘルパー関数\n     */\n    onClickAction: (e: MouseEvent<Element>, helpers: ActionDialogHelpers) => void\n    /** 閉じるボタン */\n    closeButton: ObjectCloseButtonType\n    /** ダイアログフッターの左端操作領域 */\n    subActionArea?: ReactNode\n  }\n>\n\nexport type ActionDialogContentInnerProps = AbstractProps & {\n  onClickClose: () => void\n  responseStatus?: ResponseStatus\n}\n\nconst ACTION_AREA_CLUSTER_GAP = { row: 0.5, column: 1 } as const\n\nexport const ActionDialogContentInner: FC<ActionDialogContentInnerProps> = ({\n  children,\n  heading,\n  contentBgColor,\n  contentPadding,\n  actionButton,\n  onClickAction,\n  onClickClose,\n  responseStatus,\n  closeButton,\n  subActionArea,\n}) => {\n  const calcedResponseStatus = useResponseStatus(responseStatus)\n\n  const styles = useMemo(() => {\n    const { wrapper, actionArea, buttonArea, message } = dialogContentInner()\n\n    return {\n      wrapper: wrapper(),\n      actionArea: actionArea(),\n      buttonArea: buttonArea(),\n      message: message(),\n    }\n  }, [])\n\n  return (\n    <Section className={styles.wrapper}>\n      <DialogHeading {...heading} />\n      <DialogBody contentPadding={contentPadding} contentBgColor={contentBgColor}>\n        {children}\n      </DialogBody>\n      <div className={styles.actionArea}>\n        <Cluster justify=\"space-between\">\n          {subActionArea}\n          <ActionAreaCluster\n            onClickClose={onClickClose}\n            onClickAction={onClickAction}\n            closeButton={closeButton}\n            actionButton={actionButton}\n            loading={calcedResponseStatus.isProcessing}\n            className={styles.buttonArea}\n          />\n        </Cluster>\n        <DialogContentResponseStatusMessage\n          responseStatus={calcedResponseStatus}\n          className={styles.message}\n        />\n      </div>\n    </Section>\n  )\n}\n\nconst ActionAreaCluster = memo<\n  Pick<ActionDialogContentInnerProps, 'onClickClose' | 'onClickAction'> & {\n    actionButton: ObjectActionButtonType\n    closeButton: ObjectCloseButtonType\n    loading: boolean\n    className: string\n  }\n>(({ onClickClose, onClickAction, closeButton, actionButton, loading, className }) => {\n  const handleClickAction = useCallback(\n    (e: MouseEvent<Element>) => {\n      onClickAction(e, { close: onClickClose })\n    },\n    [onClickAction, onClickClose],\n  )\n\n  return (\n    <Cluster gap={ACTION_AREA_CLUSTER_GAP} className={className}>\n      <CloseButton\n        onClick={onClickClose}\n        disabled={closeButton.disabled || loading}\n        text={closeButton.text}\n      />\n      <ActionButton\n        variant={actionButton.theme}\n        disabled={actionButton.disabled}\n        loading={loading}\n        onClick={handleClickAction}\n      >\n        {actionButton.text}\n      </ActionButton>\n    </Cluster>\n  )\n})\n\nconst ActionButton = memo<\n  PropsWithChildren<{\n    variant: ObjectActionButtonType['theme']\n    disabled: ObjectActionButtonType['disabled']\n    loading: boolean\n    onClick: (e: MouseEvent<HTMLButtonElement>) => void\n  }>\n>(({ variant = 'primary', disabled, loading, onClick, children }) => (\n  <Button\n    type=\"submit\"\n    variant={variant}\n    disabled={disabled}\n    loading={loading}\n    onClick={onClick}\n    className=\"smarthr-ui-Dialog-actionButton\"\n  >\n    {children}\n  </Button>\n))\n\nconst CloseButton = memo<{\n  onClick: ActionDialogContentInnerProps['onClickClose']\n  disabled: boolean\n  text: ReactNode\n}>(({ onClick, disabled, text }) => {\n  const { localize } = useIntl()\n\n  const defaultText = useMemo(\n    () =>\n      localize({\n        id: 'smarthr-ui/ActionDialog/closeButtonLabel',\n        defaultText: 'キャンセル',\n      }),\n    [localize],\n  )\n\n  return (\n    <Button onClick={onClick} disabled={disabled} className=\"smarthr-ui-Dialog-closeButton\">\n      {text ?? defaultText}\n    </Button>\n  )\n})\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAkEA;AAEO;AAYL;AAEA;AACE;;;;;;;;;AAmCJ;AAEA;AAQE;;AAGE;AAIF;AAiBF;AAEA;AAoBA;AAKE;;AAKM;AACA;AACD;;AASP;;"}

package/lib/components/Dialog/ControlledFormDialog/FormDialogContentInner.cjs

@@ -6,13 +6,13 @@ var index = require('./../../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss
 var hooks_useResponseStatus = require('../../../hooks/useResponseStatus.cjs');
 require('../../../intl/IntlProvider.cjs');
 var intl_useIntl = require('../../../intl/useIntl.cjs');
-require('react-intl');
+require('../../../intl/Localizer.cjs');
 require('../../../_virtual/dayjs.min.cjs');
 require('../../../intl/TimeFormatter.cjs');
 var components_Button_Button = require('../../Button/Button.cjs');
 require('../../Button/AnchorButton.cjs');
 require('../../Button/UnstyledButton.cjs');
-var components_Layout_Stack_Stack = require('../../Layout/Stack/Stack.cjs');
+require('../../Layout/Stack/Stack.cjs');
 var components_Layout_Cluster_Cluster = require('../../Layout/Cluster/Cluster.cjs');
 require('../../Layout/Reel/Reel.cjs');
 require('../../Layout/Sidebar/Sidebar.cjs');
@@ -54,7 +54,7 @@ const FormDialogContentInner = ({ children, heading, contentBgColor, contentPadd
     }, []);
     return (
     // eslint-disable-next-line smarthr/a11y-prohibit-sectioning-content-in-form
-    jsxRuntime.jsxs(components_SectioningContent_SectioningContent.Section, { className: styles.wrapper, children: [jsxRuntime.jsx(components_Dialog_DialogHeading.DialogHeading, { ...heading }), jsxRuntime.jsxs("form", { onSubmit: handleSubmitAction, className: styles.form, children: [jsxRuntime.jsx(components_Dialog_DialogBody.DialogBody, { contentPadding: contentPadding, contentBgColor: contentBgColor, children: children }), jsxRuntime.jsxs(components_Layout_Stack_Stack.Stack, { gap: 0.5, className: styles.actionArea, children: [jsxRuntime.jsxs(components_Layout_Cluster_Cluster.Cluster, { justify: "space-between", children: [subActionArea, jsxRuntime.jsx(ActionAreaCluster, { onClickClose: onClickClose, closeButton: closeButton, actionButton: actionButton, loading: calculatedResponseStatus.isProcessing, className: styles.buttonArea })] }), jsxRuntime.jsx(components_Dialog_DialogContentResponseStatusMessage.DialogContentResponseStatusMessage, { responseStatus: calculatedResponseStatus, className: styles.message })] })] })] }));
+    jsxRuntime.jsxs(components_SectioningContent_SectioningContent.Section, { className: styles.wrapper, children: [jsxRuntime.jsx(components_Dialog_DialogHeading.DialogHeading, { ...heading }), jsxRuntime.jsxs("form", { onSubmit: handleSubmitAction, className: styles.form, children: [jsxRuntime.jsx(components_Dialog_DialogBody.DialogBody, { contentPadding: contentPadding, contentBgColor: contentBgColor, children: children }), jsxRuntime.jsxs("div", { className: styles.actionArea, children: [jsxRuntime.jsxs(components_Layout_Cluster_Cluster.Cluster, { justify: "space-between", children: [subActionArea, jsxRuntime.jsx(ActionAreaCluster, { onClickClose: onClickClose, closeButton: closeButton, actionButton: actionButton, loading: calculatedResponseStatus.isProcessing, className: styles.buttonArea })] }), jsxRuntime.jsx(components_Dialog_DialogContentResponseStatusMessage.DialogContentResponseStatusMessage, { responseStatus: calculatedResponseStatus, className: styles.message })] })] })] }));
 };
 const ActionAreaCluster = React.memo(({ onClickClose, closeButton, actionButton, loading, className }) => (jsxRuntime.jsxs(components_Layout_Cluster_Cluster.Cluster, { gap: ACTION_AREA_CLUSTER_GAP, className: className, children: [jsxRuntime.jsx(CloseButton, { onClick: onClickClose, disabled: closeButton.disabled || loading, text: closeButton.text }), jsxRuntime.jsx(ActionButton, { variant: actionButton.theme, disabled: actionButton.disabled, loading: loading, children: actionButton.text })] })));
 const ActionButton = React.memo(({ variant = 'primary', disabled, loading, children }) => (jsxRuntime.jsx(components_Button_Button.Button, { type: "submit", variant: variant, disabled: disabled, loading: loading, className: "smarthr-ui-Dialog-actionButton", children: children })));

package/lib/components/Dialog/ControlledFormDialog/FormDialogContentInner.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FormDialogContentInner.cjs","sources":["../../../../src/components/Dialog/ControlledFormDialog/FormDialogContentInner.tsx"],"sourcesContent":["import {\n  type FC,\n  type FormEvent,\n  type PropsWithChildren,\n  type ReactNode,\n  memo,\n  useCallback,\n  useMemo,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { type ResponseStatus, useResponseStatus } from '../../../hooks/useResponseStatus'\nimport { useIntl } from '../../../intl'\nimport { Button } from '../../Button'\nimport { Cluster, Stack } from '../../Layout'\nimport { Section } from '../../SectioningContent'\nimport { DialogBody, type Props as DialogBodyProps } from '../DialogBody'\nimport { DialogContentResponseStatusMessage } from '../DialogContentResponseStatusMessage'\nimport { DialogHeading, type Props as DialogHeadingProps } from '../DialogHeading'\nimport { dialogContentInner } from '../dialogInnerStyle'\n\nexport type FormDialogHelpers = {\n  close: () => void\n}\n\ntype ObjectActionButtonType = {\n  /** アクションボタンのラベル */\n  text: ReactNode\n  /** アクションボタンのスタイル */\n  theme?: 'primary' | 'secondary' | 'danger'\n  /** アクションボタンを無効にするかどうか */\n  disabled?: boolean\n}\n\ntype ObjectCloseButtonType = {\n  /** 閉じるボタンのラベル */\n  text: ReactNode\n  /** 閉じるボタンを無効にするかどうか */\n  disabled?: boolean\n}\n\nexport type AbstractProps = PropsWithChildren<\n  DialogBodyProps & {\n    /** ダイアログタイトル */\n    heading: DialogHeadingProps\n    /** アクションボタン */\n    actionButton: ObjectActionButtonType\n    /**\n     * アクションボタンをクリックした時に発火するコールバック関数\n     * @param e フォームイベント\n     * @param helpers ダイアログ操作のためのヘルパー関数\n     */\n    onSubmit: (e: FormEvent<HTMLFormElement>, helpers: FormDialogHelpers) => void\n    /** 閉じるボタン */\n    closeButton: ObjectCloseButtonType\n    /** ダイアログフッターの左端操作領域 */\n    subActionArea?: ReactNode\n  }\n>\n\nexport type FormDialogContentInnerProps = AbstractProps & {\n  onClickClose: () => void\n  responseStatus?: ResponseStatus\n}\n\nconst ACTION_AREA_CLUSTER_GAP = { row: 0.5, column: 1 } as const\n\nconst formDialogContentInner = tv({\n  extend: dialogContentInner,\n  slots: {\n    form: 'shr-contents',\n  },\n})\n\nexport const FormDialogContentInner: FC<FormDialogContentInnerProps> = ({\n  children,\n  heading,\n  contentBgColor,\n  contentPadding,\n  actionButton,\n  onSubmit,\n  onClickClose,\n  responseStatus,\n  closeButton,\n  subActionArea,\n}) => {\n  const handleSubmitAction = useCallback(\n    (e: FormEvent<HTMLFormElement>) => {\n      e.preventDefault()\n      // HINT: React Portals などで擬似的にformがネストしている場合など、stopPropagationを実行しないと\n      // 親formが意図せずsubmitされてしまう場合がある\n      e.stopPropagation()\n      onSubmit(e, { close: onClickClose })\n    },\n    [onSubmit, onClickClose],\n  )\n\n  const calculatedResponseStatus = useResponseStatus(responseStatus)\n\n  const styles = useMemo(() => {\n    const { form, wrapper, actionArea, buttonArea, message } = formDialogContentInner()\n\n    return {\n      form: form(),\n      wrapper: wrapper(),\n      actionArea: actionArea(),\n      buttonArea: buttonArea(),\n      message: message(),\n    }\n  }, [])\n\n  return (\n    // eslint-disable-next-line smarthr/a11y-prohibit-sectioning-content-in-form\n    <Section className={styles.wrapper}>\n      <DialogHeading {...heading} />\n      <form onSubmit={handleSubmitAction} className={styles.form}>\n        <DialogBody contentPadding={contentPadding} contentBgColor={contentBgColor}>\n          {children}\n        </DialogBody>\n        <Stack gap={0.5} className={styles.actionArea}>\n          <Cluster justify=\"space-between\">\n            {subActionArea}\n            <ActionAreaCluster\n              onClickClose={onClickClose}\n              closeButton={closeButton}\n              actionButton={actionButton}\n              loading={calculatedResponseStatus.isProcessing}\n              className={styles.buttonArea}\n            />\n          </Cluster>\n          <DialogContentResponseStatusMessage\n            responseStatus={calculatedResponseStatus}\n            className={styles.message}\n          />\n        </Stack>\n      </form>\n    </Section>\n  )\n}\n\nconst ActionAreaCluster = memo<\n  Pick<FormDialogContentInnerProps, 'onClickClose'> & {\n    actionButton: ObjectActionButtonType\n    closeButton: ObjectCloseButtonType\n    loading: boolean\n    className: string\n  }\n>(({ onClickClose, closeButton, actionButton, loading, className }) => (\n  <Cluster gap={ACTION_AREA_CLUSTER_GAP} className={className}>\n    <CloseButton\n      onClick={onClickClose}\n      disabled={closeButton.disabled || loading}\n      text={closeButton.text}\n    />\n    <ActionButton variant={actionButton.theme} disabled={actionButton.disabled} loading={loading}>\n      {actionButton.text}\n    </ActionButton>\n  </Cluster>\n))\n\nconst ActionButton = memo<\n  PropsWithChildren<{\n    variant: ObjectActionButtonType['theme']\n    disabled: ObjectActionButtonType['disabled']\n    loading: boolean\n  }>\n>(({ variant = 'primary', disabled, loading, children }) => (\n  <Button\n    type=\"submit\"\n    variant={variant}\n    disabled={disabled}\n    loading={loading}\n    className=\"smarthr-ui-Dialog-actionButton\"\n  >\n    {children}\n  </Button>\n))\n\nconst CloseButton = memo<{\n  onClick: FormDialogContentInnerProps['onClickClose']\n  disabled: boolean\n  text: ReactNode\n}>(({ onClick, disabled, text }) => {\n  const { localize } = useIntl()\n\n  const defaultText = useMemo(\n    () =>\n      localize({\n        id: 'smarthr-ui/FormDialog/closeButtonLabel',\n        defaultText: 'キャンセル',\n      }),\n    [localize],\n  )\n\n  return (\n    <Button onClick={onClick} disabled={disabled} className=\"smarthr-ui-Dialog-closeButton\">\n      {text ?? defaultText}\n    </Button>\n  )\n})\n"],"names":["tv","dialogContentInner","useCallback","useResponseStatus","useMemo","_jsxs","Section","_jsx","DialogHeading","DialogBody","Stack","Cluster","DialogContentResponseStatusMessage","memo","Button","useIntl"],"mappings":"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"}
+{"version":3,"file":"FormDialogContentInner.cjs","sources":["../../../../src/components/Dialog/ControlledFormDialog/FormDialogContentInner.tsx"],"sourcesContent":["import {\n  type FC,\n  type FormEvent,\n  type PropsWithChildren,\n  type ReactNode,\n  memo,\n  useCallback,\n  useMemo,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { type ResponseStatus, useResponseStatus } from '../../../hooks/useResponseStatus'\nimport { useIntl } from '../../../intl'\nimport { Button } from '../../Button'\nimport { Cluster } from '../../Layout'\nimport { Section } from '../../SectioningContent'\nimport { DialogBody, type Props as DialogBodyProps } from '../DialogBody'\nimport { DialogContentResponseStatusMessage } from '../DialogContentResponseStatusMessage'\nimport { DialogHeading, type Props as DialogHeadingProps } from '../DialogHeading'\nimport { dialogContentInner } from '../dialogInnerStyle'\n\nexport type FormDialogHelpers = {\n  close: () => void\n}\n\ntype ObjectActionButtonType = {\n  /** アクションボタンのラベル */\n  text: ReactNode\n  /** アクションボタンのスタイル */\n  theme?: 'primary' | 'secondary' | 'danger'\n  /** アクションボタンを無効にするかどうか */\n  disabled?: boolean\n}\n\ntype ObjectCloseButtonType = {\n  /** 閉じるボタンのラベル */\n  text: ReactNode\n  /** 閉じるボタンを無効にするかどうか */\n  disabled?: boolean\n}\n\nexport type AbstractProps = PropsWithChildren<\n  DialogBodyProps & {\n    /** ダイアログタイトル */\n    heading: DialogHeadingProps\n    /** アクションボタン */\n    actionButton: ObjectActionButtonType\n    /**\n     * アクションボタンをクリックした時に発火するコールバック関数\n     * @param e フォームイベント\n     * @param helpers ダイアログ操作のためのヘルパー関数\n     */\n    onSubmit: (e: FormEvent<HTMLFormElement>, helpers: FormDialogHelpers) => void\n    /** 閉じるボタン */\n    closeButton: ObjectCloseButtonType\n    /** ダイアログフッターの左端操作領域 */\n    subActionArea?: ReactNode\n  }\n>\n\nexport type FormDialogContentInnerProps = AbstractProps & {\n  onClickClose: () => void\n  responseStatus?: ResponseStatus\n}\n\nconst ACTION_AREA_CLUSTER_GAP = { row: 0.5, column: 1 } as const\n\nconst formDialogContentInner = tv({\n  extend: dialogContentInner,\n  slots: {\n    form: 'shr-contents',\n  },\n})\n\nexport const FormDialogContentInner: FC<FormDialogContentInnerProps> = ({\n  children,\n  heading,\n  contentBgColor,\n  contentPadding,\n  actionButton,\n  onSubmit,\n  onClickClose,\n  responseStatus,\n  closeButton,\n  subActionArea,\n}) => {\n  const handleSubmitAction = useCallback(\n    (e: FormEvent<HTMLFormElement>) => {\n      e.preventDefault()\n      // HINT: React Portals などで擬似的にformがネストしている場合など、stopPropagationを実行しないと\n      // 親formが意図せずsubmitされてしまう場合がある\n      e.stopPropagation()\n      onSubmit(e, { close: onClickClose })\n    },\n    [onSubmit, onClickClose],\n  )\n\n  const calculatedResponseStatus = useResponseStatus(responseStatus)\n\n  const styles = useMemo(() => {\n    const { form, wrapper, actionArea, buttonArea, message } = formDialogContentInner()\n\n    return {\n      form: form(),\n      wrapper: wrapper(),\n      actionArea: actionArea(),\n      buttonArea: buttonArea(),\n      message: message(),\n    }\n  }, [])\n\n  return (\n    // eslint-disable-next-line smarthr/a11y-prohibit-sectioning-content-in-form\n    <Section className={styles.wrapper}>\n      <DialogHeading {...heading} />\n      <form onSubmit={handleSubmitAction} className={styles.form}>\n        <DialogBody contentPadding={contentPadding} contentBgColor={contentBgColor}>\n          {children}\n        </DialogBody>\n        <div className={styles.actionArea}>\n          <Cluster justify=\"space-between\">\n            {subActionArea}\n            <ActionAreaCluster\n              onClickClose={onClickClose}\n              closeButton={closeButton}\n              actionButton={actionButton}\n              loading={calculatedResponseStatus.isProcessing}\n              className={styles.buttonArea}\n            />\n          </Cluster>\n          <DialogContentResponseStatusMessage\n            responseStatus={calculatedResponseStatus}\n            className={styles.message}\n          />\n        </div>\n      </form>\n    </Section>\n  )\n}\n\nconst ActionAreaCluster = memo<\n  Pick<FormDialogContentInnerProps, 'onClickClose'> & {\n    actionButton: ObjectActionButtonType\n    closeButton: ObjectCloseButtonType\n    loading: boolean\n    className: string\n  }\n>(({ onClickClose, closeButton, actionButton, loading, className }) => (\n  <Cluster gap={ACTION_AREA_CLUSTER_GAP} className={className}>\n    <CloseButton\n      onClick={onClickClose}\n      disabled={closeButton.disabled || loading}\n      text={closeButton.text}\n    />\n    <ActionButton variant={actionButton.theme} disabled={actionButton.disabled} loading={loading}>\n      {actionButton.text}\n    </ActionButton>\n  </Cluster>\n))\n\nconst ActionButton = memo<\n  PropsWithChildren<{\n    variant: ObjectActionButtonType['theme']\n    disabled: ObjectActionButtonType['disabled']\n    loading: boolean\n  }>\n>(({ variant = 'primary', disabled, loading, children }) => (\n  <Button\n    type=\"submit\"\n    variant={variant}\n    disabled={disabled}\n    loading={loading}\n    className=\"smarthr-ui-Dialog-actionButton\"\n  >\n    {children}\n  </Button>\n))\n\nconst CloseButton = memo<{\n  onClick: FormDialogContentInnerProps['onClickClose']\n  disabled: boolean\n  text: ReactNode\n}>(({ onClick, disabled, text }) => {\n  const { localize } = useIntl()\n\n  const defaultText = useMemo(\n    () =>\n      localize({\n        id: 'smarthr-ui/FormDialog/closeButtonLabel',\n        defaultText: 'キャンセル',\n      }),\n    [localize],\n  )\n\n  return (\n    <Button onClick={onClick} disabled={disabled} className=\"smarthr-ui-Dialog-closeButton\">\n      {text ?? defaultText}\n    </Button>\n  )\n})\n"],"names":["tv","dialogContentInner","useCallback","useResponseStatus","useMemo","_jsxs","Section","_jsx","DialogHeading","DialogBody","Cluster","DialogContentResponseStatusMessage","memo","Button","useIntl"],"mappings":"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"}

package/lib/components/Dialog/ControlledFormDialog/FormDialogContentInner.js

@@ -4,13 +4,13 @@ import { tv as ce } from './../../../vendor/.pnpm/tailwind-variants@0.3.1_tailwi
 import { useResponseStatus } from '../../../hooks/useResponseStatus.js';
 import '../../../intl/IntlProvider.js';
 import { useIntl } from '../../../intl/useIntl.js';
-import 'react-intl';
+import '../../../intl/Localizer.js';
 import '../../../_virtual/dayjs.min.js';
 import '../../../intl/TimeFormatter.js';
 import { Button } from '../../Button/Button.js';
 import '../../Button/AnchorButton.js';
 import '../../Button/UnstyledButton.js';
-import { Stack } from '../../Layout/Stack/Stack.js';
+import '../../Layout/Stack/Stack.js';
 import { Cluster } from '../../Layout/Cluster/Cluster.js';
 import '../../Layout/Reel/Reel.js';
 import '../../Layout/Sidebar/Sidebar.js';
@@ -52,7 +52,7 @@ const FormDialogContentInner = ({ children, heading, contentBgColor, contentPadd
     }, []);
     return (
     // eslint-disable-next-line smarthr/a11y-prohibit-sectioning-content-in-form
-    jsxs(Section, { className: styles.wrapper, children: [jsx(DialogHeading, { ...heading }), jsxs("form", { onSubmit: handleSubmitAction, className: styles.form, children: [jsx(DialogBody, { contentPadding: contentPadding, contentBgColor: contentBgColor, children: children }), jsxs(Stack, { gap: 0.5, className: styles.actionArea, children: [jsxs(Cluster, { justify: "space-between", children: [subActionArea, jsx(ActionAreaCluster, { onClickClose: onClickClose, closeButton: closeButton, actionButton: actionButton, loading: calculatedResponseStatus.isProcessing, className: styles.buttonArea })] }), jsx(DialogContentResponseStatusMessage, { responseStatus: calculatedResponseStatus, className: styles.message })] })] })] }));
+    jsxs(Section, { className: styles.wrapper, children: [jsx(DialogHeading, { ...heading }), jsxs("form", { onSubmit: handleSubmitAction, className: styles.form, children: [jsx(DialogBody, { contentPadding: contentPadding, contentBgColor: contentBgColor, children: children }), jsxs("div", { className: styles.actionArea, children: [jsxs(Cluster, { justify: "space-between", children: [subActionArea, jsx(ActionAreaCluster, { onClickClose: onClickClose, closeButton: closeButton, actionButton: actionButton, loading: calculatedResponseStatus.isProcessing, className: styles.buttonArea })] }), jsx(DialogContentResponseStatusMessage, { responseStatus: calculatedResponseStatus, className: styles.message })] })] })] }));
 };
 const ActionAreaCluster = memo(({ onClickClose, closeButton, actionButton, loading, className }) => (jsxs(Cluster, { gap: ACTION_AREA_CLUSTER_GAP, className: className, children: [jsx(CloseButton, { onClick: onClickClose, disabled: closeButton.disabled || loading, text: closeButton.text }), jsx(ActionButton, { variant: actionButton.theme, disabled: actionButton.disabled, loading: loading, children: actionButton.text })] })));
 const ActionButton = memo(({ variant = 'primary', disabled, loading, children }) => (jsx(Button, { type: "submit", variant: variant, disabled: disabled, loading: loading, className: "smarthr-ui-Dialog-actionButton", children: children })));

package/lib/components/Dialog/ControlledFormDialog/FormDialogContentInner.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormDialogContentInner.js","sources":["../../../../src/components/Dialog/ControlledFormDialog/FormDialogContentInner.tsx"],"sourcesContent":["import {\n  type FC,\n  type FormEvent,\n  type PropsWithChildren,\n  type ReactNode,\n  memo,\n  useCallback,\n  useMemo,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { type ResponseStatus, useResponseStatus } from '../../../hooks/useResponseStatus'\nimport { useIntl } from '../../../intl'\nimport { Button } from '../../Button'\nimport { Cluster, Stack } from '../../Layout'\nimport { Section } from '../../SectioningContent'\nimport { DialogBody, type Props as DialogBodyProps } from '../DialogBody'\nimport { DialogContentResponseStatusMessage } from '../DialogContentResponseStatusMessage'\nimport { DialogHeading, type Props as DialogHeadingProps } from '../DialogHeading'\nimport { dialogContentInner } from '../dialogInnerStyle'\n\nexport type FormDialogHelpers = {\n  close: () => void\n}\n\ntype ObjectActionButtonType = {\n  /** アクションボタンのラベル */\n  text: ReactNode\n  /** アクションボタンのスタイル */\n  theme?: 'primary' | 'secondary' | 'danger'\n  /** アクションボタンを無効にするかどうか */\n  disabled?: boolean\n}\n\ntype ObjectCloseButtonType = {\n  /** 閉じるボタンのラベル */\n  text: ReactNode\n  /** 閉じるボタンを無効にするかどうか */\n  disabled?: boolean\n}\n\nexport type AbstractProps = PropsWithChildren<\n  DialogBodyProps & {\n    /** ダイアログタイトル */\n    heading: DialogHeadingProps\n    /** アクションボタン */\n    actionButton: ObjectActionButtonType\n    /**\n     * アクションボタンをクリックした時に発火するコールバック関数\n     * @param e フォームイベント\n     * @param helpers ダイアログ操作のためのヘルパー関数\n     */\n    onSubmit: (e: FormEvent<HTMLFormElement>, helpers: FormDialogHelpers) => void\n    /** 閉じるボタン */\n    closeButton: ObjectCloseButtonType\n    /** ダイアログフッターの左端操作領域 */\n    subActionArea?: ReactNode\n  }\n>\n\nexport type FormDialogContentInnerProps = AbstractProps & {\n  onClickClose: () => void\n  responseStatus?: ResponseStatus\n}\n\nconst ACTION_AREA_CLUSTER_GAP = { row: 0.5, column: 1 } as const\n\nconst formDialogContentInner = tv({\n  extend: dialogContentInner,\n  slots: {\n    form: 'shr-contents',\n  },\n})\n\nexport const FormDialogContentInner: FC<FormDialogContentInnerProps> = ({\n  children,\n  heading,\n  contentBgColor,\n  contentPadding,\n  actionButton,\n  onSubmit,\n  onClickClose,\n  responseStatus,\n  closeButton,\n  subActionArea,\n}) => {\n  const handleSubmitAction = useCallback(\n    (e: FormEvent<HTMLFormElement>) => {\n      e.preventDefault()\n      // HINT: React Portals などで擬似的にformがネストしている場合など、stopPropagationを実行しないと\n      // 親formが意図せずsubmitされてしまう場合がある\n      e.stopPropagation()\n      onSubmit(e, { close: onClickClose })\n    },\n    [onSubmit, onClickClose],\n  )\n\n  const calculatedResponseStatus = useResponseStatus(responseStatus)\n\n  const styles = useMemo(() => {\n    const { form, wrapper, actionArea, buttonArea, message } = formDialogContentInner()\n\n    return {\n      form: form(),\n      wrapper: wrapper(),\n      actionArea: actionArea(),\n      buttonArea: buttonArea(),\n      message: message(),\n    }\n  }, [])\n\n  return (\n    // eslint-disable-next-line smarthr/a11y-prohibit-sectioning-content-in-form\n    <Section className={styles.wrapper}>\n      <DialogHeading {...heading} />\n      <form onSubmit={handleSubmitAction} className={styles.form}>\n        <DialogBody contentPadding={contentPadding} contentBgColor={contentBgColor}>\n          {children}\n        </DialogBody>\n        <Stack gap={0.5} className={styles.actionArea}>\n          <Cluster justify=\"space-between\">\n            {subActionArea}\n            <ActionAreaCluster\n              onClickClose={onClickClose}\n              closeButton={closeButton}\n              actionButton={actionButton}\n              loading={calculatedResponseStatus.isProcessing}\n              className={styles.buttonArea}\n            />\n          </Cluster>\n          <DialogContentResponseStatusMessage\n            responseStatus={calculatedResponseStatus}\n            className={styles.message}\n          />\n        </Stack>\n      </form>\n    </Section>\n  )\n}\n\nconst ActionAreaCluster = memo<\n  Pick<FormDialogContentInnerProps, 'onClickClose'> & {\n    actionButton: ObjectActionButtonType\n    closeButton: ObjectCloseButtonType\n    loading: boolean\n    className: string\n  }\n>(({ onClickClose, closeButton, actionButton, loading, className }) => (\n  <Cluster gap={ACTION_AREA_CLUSTER_GAP} className={className}>\n    <CloseButton\n      onClick={onClickClose}\n      disabled={closeButton.disabled || loading}\n      text={closeButton.text}\n    />\n    <ActionButton variant={actionButton.theme} disabled={actionButton.disabled} loading={loading}>\n      {actionButton.text}\n    </ActionButton>\n  </Cluster>\n))\n\nconst ActionButton = memo<\n  PropsWithChildren<{\n    variant: ObjectActionButtonType['theme']\n    disabled: ObjectActionButtonType['disabled']\n    loading: boolean\n  }>\n>(({ variant = 'primary', disabled, loading, children }) => (\n  <Button\n    type=\"submit\"\n    variant={variant}\n    disabled={disabled}\n    loading={loading}\n    className=\"smarthr-ui-Dialog-actionButton\"\n  >\n    {children}\n  </Button>\n))\n\nconst CloseButton = memo<{\n  onClick: FormDialogContentInnerProps['onClickClose']\n  disabled: boolean\n  text: ReactNode\n}>(({ onClick, disabled, text }) => {\n  const { localize } = useIntl()\n\n  const defaultText = useMemo(\n    () =>\n      localize({\n        id: 'smarthr-ui/FormDialog/closeButtonLabel',\n        defaultText: 'キャンセル',\n      }),\n    [localize],\n  )\n\n  return (\n    <Button onClick={onClick} disabled={disabled} className=\"smarthr-ui-Dialog-closeButton\">\n      {text ?? defaultText}\n    </Button>\n  )\n})\n"],"names":["tv","_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"FormDialogContentInner.js","sources":["../../../../src/components/Dialog/ControlledFormDialog/FormDialogContentInner.tsx"],"sourcesContent":["import {\n  type FC,\n  type FormEvent,\n  type PropsWithChildren,\n  type ReactNode,\n  memo,\n  useCallback,\n  useMemo,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { type ResponseStatus, useResponseStatus } from '../../../hooks/useResponseStatus'\nimport { useIntl } from '../../../intl'\nimport { Button } from '../../Button'\nimport { Cluster } from '../../Layout'\nimport { Section } from '../../SectioningContent'\nimport { DialogBody, type Props as DialogBodyProps } from '../DialogBody'\nimport { DialogContentResponseStatusMessage } from '../DialogContentResponseStatusMessage'\nimport { DialogHeading, type Props as DialogHeadingProps } from '../DialogHeading'\nimport { dialogContentInner } from '../dialogInnerStyle'\n\nexport type FormDialogHelpers = {\n  close: () => void\n}\n\ntype ObjectActionButtonType = {\n  /** アクションボタンのラベル */\n  text: ReactNode\n  /** アクションボタンのスタイル */\n  theme?: 'primary' | 'secondary' | 'danger'\n  /** アクションボタンを無効にするかどうか */\n  disabled?: boolean\n}\n\ntype ObjectCloseButtonType = {\n  /** 閉じるボタンのラベル */\n  text: ReactNode\n  /** 閉じるボタンを無効にするかどうか */\n  disabled?: boolean\n}\n\nexport type AbstractProps = PropsWithChildren<\n  DialogBodyProps & {\n    /** ダイアログタイトル */\n    heading: DialogHeadingProps\n    /** アクションボタン */\n    actionButton: ObjectActionButtonType\n    /**\n     * アクションボタンをクリックした時に発火するコールバック関数\n     * @param e フォームイベント\n     * @param helpers ダイアログ操作のためのヘルパー関数\n     */\n    onSubmit: (e: FormEvent<HTMLFormElement>, helpers: FormDialogHelpers) => void\n    /** 閉じるボタン */\n    closeButton: ObjectCloseButtonType\n    /** ダイアログフッターの左端操作領域 */\n    subActionArea?: ReactNode\n  }\n>\n\nexport type FormDialogContentInnerProps = AbstractProps & {\n  onClickClose: () => void\n  responseStatus?: ResponseStatus\n}\n\nconst ACTION_AREA_CLUSTER_GAP = { row: 0.5, column: 1 } as const\n\nconst formDialogContentInner = tv({\n  extend: dialogContentInner,\n  slots: {\n    form: 'shr-contents',\n  },\n})\n\nexport const FormDialogContentInner: FC<FormDialogContentInnerProps> = ({\n  children,\n  heading,\n  contentBgColor,\n  contentPadding,\n  actionButton,\n  onSubmit,\n  onClickClose,\n  responseStatus,\n  closeButton,\n  subActionArea,\n}) => {\n  const handleSubmitAction = useCallback(\n    (e: FormEvent<HTMLFormElement>) => {\n      e.preventDefault()\n      // HINT: React Portals などで擬似的にformがネストしている場合など、stopPropagationを実行しないと\n      // 親formが意図せずsubmitされてしまう場合がある\n      e.stopPropagation()\n      onSubmit(e, { close: onClickClose })\n    },\n    [onSubmit, onClickClose],\n  )\n\n  const calculatedResponseStatus = useResponseStatus(responseStatus)\n\n  const styles = useMemo(() => {\n    const { form, wrapper, actionArea, buttonArea, message } = formDialogContentInner()\n\n    return {\n      form: form(),\n      wrapper: wrapper(),\n      actionArea: actionArea(),\n      buttonArea: buttonArea(),\n      message: message(),\n    }\n  }, [])\n\n  return (\n    // eslint-disable-next-line smarthr/a11y-prohibit-sectioning-content-in-form\n    <Section className={styles.wrapper}>\n      <DialogHeading {...heading} />\n      <form onSubmit={handleSubmitAction} className={styles.form}>\n        <DialogBody contentPadding={contentPadding} contentBgColor={contentBgColor}>\n          {children}\n        </DialogBody>\n        <div className={styles.actionArea}>\n          <Cluster justify=\"space-between\">\n            {subActionArea}\n            <ActionAreaCluster\n              onClickClose={onClickClose}\n              closeButton={closeButton}\n              actionButton={actionButton}\n              loading={calculatedResponseStatus.isProcessing}\n              className={styles.buttonArea}\n            />\n          </Cluster>\n          <DialogContentResponseStatusMessage\n            responseStatus={calculatedResponseStatus}\n            className={styles.message}\n          />\n        </div>\n      </form>\n    </Section>\n  )\n}\n\nconst ActionAreaCluster = memo<\n  Pick<FormDialogContentInnerProps, 'onClickClose'> & {\n    actionButton: ObjectActionButtonType\n    closeButton: ObjectCloseButtonType\n    loading: boolean\n    className: string\n  }\n>(({ onClickClose, closeButton, actionButton, loading, className }) => (\n  <Cluster gap={ACTION_AREA_CLUSTER_GAP} className={className}>\n    <CloseButton\n      onClick={onClickClose}\n      disabled={closeButton.disabled || loading}\n      text={closeButton.text}\n    />\n    <ActionButton variant={actionButton.theme} disabled={actionButton.disabled} loading={loading}>\n      {actionButton.text}\n    </ActionButton>\n  </Cluster>\n))\n\nconst ActionButton = memo<\n  PropsWithChildren<{\n    variant: ObjectActionButtonType['theme']\n    disabled: ObjectActionButtonType['disabled']\n    loading: boolean\n  }>\n>(({ variant = 'primary', disabled, loading, children }) => (\n  <Button\n    type=\"submit\"\n    variant={variant}\n    disabled={disabled}\n    loading={loading}\n    className=\"smarthr-ui-Dialog-actionButton\"\n  >\n    {children}\n  </Button>\n))\n\nconst CloseButton = memo<{\n  onClick: FormDialogContentInnerProps['onClickClose']\n  disabled: boolean\n  text: ReactNode\n}>(({ onClick, disabled, text }) => {\n  const { localize } = useIntl()\n\n  const defaultText = useMemo(\n    () =>\n      localize({\n        id: 'smarthr-ui/FormDialog/closeButtonLabel',\n        defaultText: 'キャンセル',\n      }),\n    [localize],\n  )\n\n  return (\n    <Button onClick={onClick} disabled={disabled} className=\"smarthr-ui-Dialog-closeButton\">\n      {text ?? defaultText}\n    </Button>\n  )\n})\n"],"names":["tv","_jsxs","_jsx"],"mappings":"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"}

package/lib/components/Dialog/ControlledMessageDialog/MessageDialogContentInner.cjs

@@ -4,7 +4,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 require('../../../intl/IntlProvider.cjs');
 var intl_useIntl = require('../../../intl/useIntl.cjs');
-require('react-intl');
+require('../../../intl/Localizer.cjs');
 require('../../../_virtual/dayjs.min.cjs');
 require('../../../intl/TimeFormatter.cjs');
 var components_Button_Button = require('../../Button/Button.cjs');

package/lib/components/Dialog/ControlledMessageDialog/MessageDialogContentInner.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { memo, useMemo } from 'react';
 import '../../../intl/IntlProvider.js';
 import { useIntl } from '../../../intl/useIntl.js';
-import 'react-intl';
+import '../../../intl/Localizer.js';
 import '../../../_virtual/dayjs.min.js';
 import '../../../intl/TimeFormatter.js';
 import { Button } from '../../Button/Button.js';

package/lib/components/Dialog/ControlledStepFormDialog/ControlledStepFormDialog.cjs

@@ -5,7 +5,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 require('../../../intl/IntlProvider.cjs');
 var intl_useIntl = require('../../../intl/useIntl.cjs');
-require('react-intl');
+require('../../../intl/Localizer.cjs');
 require('../../../_virtual/dayjs.min.cjs');
 require('../../../intl/TimeFormatter.cjs');
 var components_Dialog_DialogContentInner = require('../DialogContentInner.cjs');

package/lib/components/Dialog/ControlledStepFormDialog/ControlledStepFormDialog.js

@@ -3,7 +3,7 @@ import { jsx } from 'react/jsx-runtime';
 import { useMemo, useContext, useRef, useCallback } from 'react';
 import '../../../intl/IntlProvider.js';
 import { useIntl } from '../../../intl/useIntl.js';
-import 'react-intl';
+import '../../../intl/Localizer.js';
 import '../../../_virtual/dayjs.min.js';
 import '../../../intl/TimeFormatter.js';
 import { DialogContentInner } from '../DialogContentInner.js';

package/lib/components/Dialog/ControlledStepFormDialog/StepFormDialogContentInner.cjs

@@ -7,7 +7,7 @@ var hooks_useResponseStatus = require('../../../hooks/useResponseStatus.cjs');
 var components_Button_Button = require('../../Button/Button.cjs');
 require('../../Button/AnchorButton.cjs');
 require('../../Button/UnstyledButton.cjs');
-var components_Layout_Stack_Stack = require('../../Layout/Stack/Stack.cjs');
+require('../../Layout/Stack/Stack.cjs');
 var components_Layout_Cluster_Cluster = require('../../Layout/Cluster/Cluster.cjs');
 require('../../Layout/Reel/Reel.cjs');
 require('../../Layout/Sidebar/Sidebar.cjs');
@@ -75,7 +75,7 @@ const StepFormDialogContentInner = ({ children, heading, activeStep, contentBgCo
     const calcedResponseStatus = hooks_useResponseStatus.useResponseStatus(responseStatus);
     return (
     // eslint-disable-next-line smarthr/a11y-prohibit-sectioning-content-in-form
-    jsxRuntime.jsx(components_SectioningContent_SectioningContent.Section, { children: jsxRuntime.jsx("form", { onSubmit: handleSubmitAction, children: jsxRuntime.jsxs("div", { className: classNames.wrapper, children: [jsxRuntime.jsx(components_Dialog_DialogHeading.DialogHeading, { id: heading.id, sub: heading.sub ? `${heading.sub}${stepText}` : undefined, text: heading.sub ? heading.text : `${heading.text}${stepText}` }), jsxRuntime.jsx(components_Dialog_DialogBody.DialogBody, { contentPadding: contentPadding, contentBgColor: contentBgColor, ref: scrollerRef, children: children }), jsxRuntime.jsxs(components_Layout_Stack_Stack.Stack, { gap: 0.5, className: classNames.actionArea, children: [jsxRuntime.jsxs(components_Layout_Cluster_Cluster.Cluster, { justify: "space-between", gap: { row: 0.5, column: 2 }, children: [!backButton.hidden && activeStep > 1 && (jsxRuntime.jsx(components_Button_Button.Button, { onClick: handleBackAction, variant: backButton.theme, disabled: backButton.disabled || calcedResponseStatus.isProcessing, className: "smarthr-ui-Dialog-backButton", children: backButton.text })), jsxRuntime.jsxs(components_Layout_Cluster_Cluster.Cluster, { gap: BUTTON_COLUMN_GAP, className: classNames.buttonArea, children: [!closeButton.hidden && (jsxRuntime.jsx(components_Button_Button.Button, { onClick: handleCloseAction, variant: closeButton.theme, disabled: closeButton.disabled || calcedResponseStatus.isProcessing, className: "smarthr-ui-Dialog-closeButton", children: closeButton.text })), !submitButton.hidden && (jsxRuntime.jsx(components_Button_Button.Button, { type: "submit", variant: submitButton.theme, disabled: submitButton.disabled, loading: calcedResponseStatus.isProcessing, className: "smarthr-ui-Dialog-actionButton", children: submitButton.text }))] })] }), jsxRuntime.jsx(components_Dialog_DialogContentResponseStatusMessage.DialogContentResponseStatusMessage, { responseStatus: calcedResponseStatus, className: classNames.message })] })] }) }) }));
+    jsxRuntime.jsx(components_SectioningContent_SectioningContent.Section, { children: jsxRuntime.jsx("form", { onSubmit: handleSubmitAction, children: jsxRuntime.jsxs("div", { className: classNames.wrapper, children: [jsxRuntime.jsx(components_Dialog_DialogHeading.DialogHeading, { id: heading.id, sub: heading.sub ? `${heading.sub}${stepText}` : undefined, text: heading.sub ? heading.text : `${heading.text}${stepText}` }), jsxRuntime.jsx(components_Dialog_DialogBody.DialogBody, { contentPadding: contentPadding, contentBgColor: contentBgColor, ref: scrollerRef, children: children }), jsxRuntime.jsxs("div", { className: classNames.actionArea, children: [jsxRuntime.jsxs(components_Layout_Cluster_Cluster.Cluster, { justify: "space-between", gap: { row: 0.5, column: 2 }, children: [!backButton.hidden && activeStep > 1 && (jsxRuntime.jsx(components_Button_Button.Button, { onClick: handleBackAction, variant: backButton.theme, disabled: backButton.disabled || calcedResponseStatus.isProcessing, className: "smarthr-ui-Dialog-backButton", children: backButton.text })), jsxRuntime.jsxs(components_Layout_Cluster_Cluster.Cluster, { gap: BUTTON_COLUMN_GAP, className: classNames.buttonArea, children: [!closeButton.hidden && (jsxRuntime.jsx(components_Button_Button.Button, { onClick: handleCloseAction, variant: closeButton.theme, disabled: closeButton.disabled || calcedResponseStatus.isProcessing, className: "smarthr-ui-Dialog-closeButton", children: closeButton.text })), !submitButton.hidden && (jsxRuntime.jsx(components_Button_Button.Button, { type: "submit", variant: submitButton.theme, disabled: submitButton.disabled, loading: calcedResponseStatus.isProcessing, className: "smarthr-ui-Dialog-actionButton", children: submitButton.text }))] })] }), jsxRuntime.jsx(components_Dialog_DialogContentResponseStatusMessage.DialogContentResponseStatusMessage, { responseStatus: calcedResponseStatus, className: classNames.message })] })] }) }) }));
 };
 
 exports.StepFormDialogContentInner = StepFormDialogContentInner;

package/lib/components/Dialog/ControlledStepFormDialog/StepFormDialogContentInner.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"StepFormDialogContentInner.cjs","sources":["../../../../src/components/Dialog/ControlledStepFormDialog/StepFormDialogContentInner.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type FC,\n  type FormEvent,\n  type PropsWithChildren,\n  useCallback,\n  useContext,\n  useMemo,\n} from 'react'\n\nimport { type ResponseStatus, useResponseStatus } from '../../../hooks/useResponseStatus'\nimport { Button } from '../../Button'\nimport { Cluster, Stack } from '../../Layout'\nimport { Section } from '../../SectioningContent'\nimport { DialogBody, type Props as DialogBodyProps } from '../DialogBody'\nimport { DialogContentResponseStatusMessage } from '../DialogContentResponseStatusMessage'\nimport { DialogHeading, type Props as DialogHeadingProps } from '../DialogHeading'\nimport { dialogContentInner } from '../dialogInnerStyle'\n\nimport { StepFormDialogContext, type StepItem } from './StepFormDialogProvider'\n\nimport type { useStepFormDialogButton } from './useStepFormDialogButton'\n\ntype StepFormHelpers = {\n  /** 指定したステップに移動する関数 */\n  goto: (nextStep: StepItem) => void\n  /** ダイアログを閉じる関数 */\n  close: () => void\n  /** 現在のステップ情報 */\n  currentStep: StepItem\n}\n\ntype CommonButtonType = ReturnType<typeof useStepFormDialogButton>\n\nexport type AbstractProps = PropsWithChildren<\n  DialogBodyProps & {\n    /** ダイアログタイトル */\n    heading: DialogHeadingProps\n    /** 現在のStepNo */\n    activeStep: number\n    /** submitボタン */\n    submitButton: CommonButtonType\n    /**\n     * アクションボタンをクリックした時に発火するコールバック関数\n     * @param e フォームイベント\n     * @param helpers ステップ操作用のヘルパー関数群\n     */\n    onSubmit: (e: FormEvent<HTMLFormElement>, helpers: StepFormHelpers) => void\n    /** キャンセルボタン */\n    closeButton: CommonButtonType\n    /** 戻るボタン */\n    backButton: CommonButtonType\n  }\n>\n\nexport type StepFormDialogContentInnerProps = AbstractProps & {\n  firstStep: StepItem\n  onClickClose: () => void\n  responseStatus?: ResponseStatus\n  /** ステップの総数 */\n  stepLength: number\n  onClickBack?: () => void\n}\n\nconst BUTTON_COLUMN_GAP = {\n  row: 0.5,\n  column: 1,\n} as const\n\nexport const StepFormDialogContentInner: FC<StepFormDialogContentInnerProps> = ({\n  children,\n  heading,\n  activeStep,\n  contentBgColor,\n  contentPadding,\n  submitButton,\n  closeButton,\n  backButton,\n  stepLength,\n  firstStep,\n  onSubmit,\n  onClickClose,\n  responseStatus,\n  onClickBack,\n}) => {\n  const { currentStep, stepQueue, setCurrentStep, scrollerRef } = useContext(StepFormDialogContext)\n\n  const handleCloseAction = useCallback(() => {\n    onClickClose()\n    setTimeout(() => {\n      // HINT: ダイアログが閉じるtransitionが完了してから初期化をしている\n      stepQueue.current = []\n      setCurrentStep(firstStep)\n    }, 300)\n  }, [firstStep, stepQueue, setCurrentStep, onClickClose])\n\n  const changeCurrentStep = useCallback(\n    (step: Parameters<typeof setCurrentStep>[0]) => {\n      setCurrentStep(step)\n\n      // HINT: stepが切り替わるごとにbodyのscroll位置を先頭に戻す処理\n      if (scrollerRef.current) {\n        scrollerRef.current.scroll(0, 0)\n      }\n    },\n    [setCurrentStep, scrollerRef],\n  )\n\n  const handleSubmitAction = useCallback(\n    (e: FormEvent<HTMLFormElement>) => {\n      e.preventDefault()\n      // HINT: React Potals などで擬似的にformがネストしている場合など、stopPropagationを実行しないと\n      // 親formが意図せずsubmitされてしまう場合がある\n      e.stopPropagation()\n\n      const helpers: StepFormHelpers = {\n        goto: (nextStep: StepItem) => {\n          stepQueue.current.push(currentStep)\n          changeCurrentStep(nextStep)\n        },\n        close: handleCloseAction,\n        currentStep,\n      }\n\n      onSubmit(e, helpers)\n    },\n    [currentStep, stepQueue, onSubmit, handleCloseAction, changeCurrentStep],\n  )\n  const handleBackAction = useCallback(() => {\n    onClickBack?.()\n\n    changeCurrentStep(stepQueue.current.pop() ?? firstStep)\n  }, [firstStep, stepQueue, onClickBack, changeCurrentStep])\n\n  const classNames = useMemo(() => {\n    const { wrapper, actionArea, buttonArea, message } = dialogContentInner()\n\n    return {\n      wrapper: wrapper(),\n      actionArea: actionArea(),\n      buttonArea: buttonArea(),\n      message: message(),\n    }\n  }, [])\n\n  const stepText = stepLength > 1 ? `（${activeStep}/${stepLength}）` : ''\n\n  const calcedResponseStatus = useResponseStatus(responseStatus)\n\n  return (\n    // eslint-disable-next-line smarthr/a11y-prohibit-sectioning-content-in-form\n    <Section>\n      <form onSubmit={handleSubmitAction}>\n        <div className={classNames.wrapper}>\n          <DialogHeading\n            id={heading.id}\n            sub={heading.sub ? `${heading.sub}${stepText}` : undefined}\n            text={heading.sub ? heading.text : `${heading.text}${stepText}`}\n          />\n          <DialogBody\n            contentPadding={contentPadding}\n            contentBgColor={contentBgColor}\n            ref={scrollerRef}\n          >\n            {children}\n          </DialogBody>\n          <Stack gap={0.5} className={classNames.actionArea}>\n            <Cluster justify=\"space-between\" gap={{ row: 0.5, column: 2 }}>\n              {!backButton.hidden && activeStep > 1 && (\n                <Button\n                  onClick={handleBackAction}\n                  variant={backButton.theme}\n                  disabled={backButton.disabled || calcedResponseStatus.isProcessing}\n                  className=\"smarthr-ui-Dialog-backButton\"\n                >\n                  {backButton.text}\n                </Button>\n              )}\n              <Cluster gap={BUTTON_COLUMN_GAP} className={classNames.buttonArea}>\n                {!closeButton.hidden && (\n                  <Button\n                    onClick={handleCloseAction}\n                    variant={closeButton.theme}\n                    disabled={closeButton.disabled || calcedResponseStatus.isProcessing}\n                    className=\"smarthr-ui-Dialog-closeButton\"\n                  >\n                    {closeButton.text}\n                  </Button>\n                )}\n                {!submitButton.hidden && (\n                  <Button\n                    type=\"submit\"\n                    variant={submitButton.theme}\n                    disabled={submitButton.disabled}\n                    loading={calcedResponseStatus.isProcessing}\n                    className=\"smarthr-ui-Dialog-actionButton\"\n                  >\n                    {submitButton.text}\n                  </Button>\n                )}\n              </Cluster>\n            </Cluster>\n            <DialogContentResponseStatusMessage\n              responseStatus={calcedResponseStatus}\n              className={classNames.message}\n            />\n          </Stack>\n        </div>\n      </form>\n    </Section>\n  )\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAiEA;AACE;AACA;;AAGK;AAgBL;AAEA;AACE;;;AAGE;;;;AAKJ;;;AAKI;;;AAGF;AAIF;;;;;AAOI;AACE;AACE;;;AAGF;;;AAIF;AACF;AAGF;;;;AAMA;AACE;;;;;;;;AAUF;AAEA;;;AAIE;AA4DJ;;"}
+{"version":3,"file":"StepFormDialogContentInner.cjs","sources":["../../../../src/components/Dialog/ControlledStepFormDialog/StepFormDialogContentInner.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type FC,\n  type FormEvent,\n  type PropsWithChildren,\n  useCallback,\n  useContext,\n  useMemo,\n} from 'react'\n\nimport { type ResponseStatus, useResponseStatus } from '../../../hooks/useResponseStatus'\nimport { Button } from '../../Button'\nimport { Cluster } from '../../Layout'\nimport { Section } from '../../SectioningContent'\nimport { DialogBody, type Props as DialogBodyProps } from '../DialogBody'\nimport { DialogContentResponseStatusMessage } from '../DialogContentResponseStatusMessage'\nimport { DialogHeading, type Props as DialogHeadingProps } from '../DialogHeading'\nimport { dialogContentInner } from '../dialogInnerStyle'\n\nimport { StepFormDialogContext, type StepItem } from './StepFormDialogProvider'\n\nimport type { useStepFormDialogButton } from './useStepFormDialogButton'\n\ntype StepFormHelpers = {\n  /** 指定したステップに移動する関数 */\n  goto: (nextStep: StepItem) => void\n  /** ダイアログを閉じる関数 */\n  close: () => void\n  /** 現在のステップ情報 */\n  currentStep: StepItem\n}\n\ntype CommonButtonType = ReturnType<typeof useStepFormDialogButton>\n\nexport type AbstractProps = PropsWithChildren<\n  DialogBodyProps & {\n    /** ダイアログタイトル */\n    heading: DialogHeadingProps\n    /** 現在のStepNo */\n    activeStep: number\n    /** submitボタン */\n    submitButton: CommonButtonType\n    /**\n     * アクションボタンをクリックした時に発火するコールバック関数\n     * @param e フォームイベント\n     * @param helpers ステップ操作用のヘルパー関数群\n     */\n    onSubmit: (e: FormEvent<HTMLFormElement>, helpers: StepFormHelpers) => void\n    /** キャンセルボタン */\n    closeButton: CommonButtonType\n    /** 戻るボタン */\n    backButton: CommonButtonType\n  }\n>\n\nexport type StepFormDialogContentInnerProps = AbstractProps & {\n  firstStep: StepItem\n  onClickClose: () => void\n  responseStatus?: ResponseStatus\n  /** ステップの総数 */\n  stepLength: number\n  onClickBack?: () => void\n}\n\nconst BUTTON_COLUMN_GAP = {\n  row: 0.5,\n  column: 1,\n} as const\n\nexport const StepFormDialogContentInner: FC<StepFormDialogContentInnerProps> = ({\n  children,\n  heading,\n  activeStep,\n  contentBgColor,\n  contentPadding,\n  submitButton,\n  closeButton,\n  backButton,\n  stepLength,\n  firstStep,\n  onSubmit,\n  onClickClose,\n  responseStatus,\n  onClickBack,\n}) => {\n  const { currentStep, stepQueue, setCurrentStep, scrollerRef } = useContext(StepFormDialogContext)\n\n  const handleCloseAction = useCallback(() => {\n    onClickClose()\n    setTimeout(() => {\n      // HINT: ダイアログが閉じるtransitionが完了してから初期化をしている\n      stepQueue.current = []\n      setCurrentStep(firstStep)\n    }, 300)\n  }, [firstStep, stepQueue, setCurrentStep, onClickClose])\n\n  const changeCurrentStep = useCallback(\n    (step: Parameters<typeof setCurrentStep>[0]) => {\n      setCurrentStep(step)\n\n      // HINT: stepが切り替わるごとにbodyのscroll位置を先頭に戻す処理\n      if (scrollerRef.current) {\n        scrollerRef.current.scroll(0, 0)\n      }\n    },\n    [setCurrentStep, scrollerRef],\n  )\n\n  const handleSubmitAction = useCallback(\n    (e: FormEvent<HTMLFormElement>) => {\n      e.preventDefault()\n      // HINT: React Potals などで擬似的にformがネストしている場合など、stopPropagationを実行しないと\n      // 親formが意図せずsubmitされてしまう場合がある\n      e.stopPropagation()\n\n      const helpers: StepFormHelpers = {\n        goto: (nextStep: StepItem) => {\n          stepQueue.current.push(currentStep)\n          changeCurrentStep(nextStep)\n        },\n        close: handleCloseAction,\n        currentStep,\n      }\n\n      onSubmit(e, helpers)\n    },\n    [currentStep, stepQueue, onSubmit, handleCloseAction, changeCurrentStep],\n  )\n  const handleBackAction = useCallback(() => {\n    onClickBack?.()\n\n    changeCurrentStep(stepQueue.current.pop() ?? firstStep)\n  }, [firstStep, stepQueue, onClickBack, changeCurrentStep])\n\n  const classNames = useMemo(() => {\n    const { wrapper, actionArea, buttonArea, message } = dialogContentInner()\n\n    return {\n      wrapper: wrapper(),\n      actionArea: actionArea(),\n      buttonArea: buttonArea(),\n      message: message(),\n    }\n  }, [])\n\n  const stepText = stepLength > 1 ? `（${activeStep}/${stepLength}）` : ''\n\n  const calcedResponseStatus = useResponseStatus(responseStatus)\n\n  return (\n    // eslint-disable-next-line smarthr/a11y-prohibit-sectioning-content-in-form\n    <Section>\n      <form onSubmit={handleSubmitAction}>\n        <div className={classNames.wrapper}>\n          <DialogHeading\n            id={heading.id}\n            sub={heading.sub ? `${heading.sub}${stepText}` : undefined}\n            text={heading.sub ? heading.text : `${heading.text}${stepText}`}\n          />\n          <DialogBody\n            contentPadding={contentPadding}\n            contentBgColor={contentBgColor}\n            ref={scrollerRef}\n          >\n            {children}\n          </DialogBody>\n          <div className={classNames.actionArea}>\n            <Cluster justify=\"space-between\" gap={{ row: 0.5, column: 2 }}>\n              {!backButton.hidden && activeStep > 1 && (\n                <Button\n                  onClick={handleBackAction}\n                  variant={backButton.theme}\n                  disabled={backButton.disabled || calcedResponseStatus.isProcessing}\n                  className=\"smarthr-ui-Dialog-backButton\"\n                >\n                  {backButton.text}\n                </Button>\n              )}\n              <Cluster gap={BUTTON_COLUMN_GAP} className={classNames.buttonArea}>\n                {!closeButton.hidden && (\n                  <Button\n                    onClick={handleCloseAction}\n                    variant={closeButton.theme}\n                    disabled={closeButton.disabled || calcedResponseStatus.isProcessing}\n                    className=\"smarthr-ui-Dialog-closeButton\"\n                  >\n                    {closeButton.text}\n                  </Button>\n                )}\n                {!submitButton.hidden && (\n                  <Button\n                    type=\"submit\"\n                    variant={submitButton.theme}\n                    disabled={submitButton.disabled}\n                    loading={calcedResponseStatus.isProcessing}\n                    className=\"smarthr-ui-Dialog-actionButton\"\n                  >\n                    {submitButton.text}\n                  </Button>\n                )}\n              </Cluster>\n            </Cluster>\n            <DialogContentResponseStatusMessage\n              responseStatus={calcedResponseStatus}\n              className={classNames.message}\n            />\n          </div>\n        </div>\n      </form>\n    </Section>\n  )\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAiEA;AACE;AACA;;AAGK;AAgBL;AAEA;AACE;;;AAGE;;;;AAKJ;;;AAKI;;;AAGF;AAIF;;;;;AAOI;AACE;AACE;;;AAGF;;;AAIF;AACF;AAGF;;;;AAMA;AACE;;;;;;;;AAUF;AAEA;;;AAIE;AA4DJ;;"}