smarthr-ui 76.0.0 → 76.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm/_virtual/dayjs.min.js +1 -1
- package/esm/_virtual/index3.js +1 -1
- package/esm/_virtual/isBetween.js +1 -1
- package/esm/components/Combobox/SingleCombobox/SingleCombobox.js +10 -11
- package/esm/components/Combobox/SingleCombobox/SingleCombobox.js.map +1 -1
- package/esm/components/Dropdown/SortDropdown/SortDropdown.js +6 -3
- package/esm/components/Dropdown/SortDropdown/SortDropdown.js.map +1 -1
- package/esm/components/Dropdown/SortDropdown/useSortDropdown.d.ts +2 -2
- package/esm/components/Dropdown/SortDropdown/useSortDropdown.js.map +1 -1
- package/esm/components/FileViewer/PDFViewer.js +3 -3
- package/esm/components/Table/useTableHeadCellCount.js +15 -3
- package/esm/components/Table/useTableHeadCellCount.js.map +1 -1
- package/esm/components/TextLink/TextLink.d.ts +21 -0
- package/esm/components/TextLink/TextLink.js +3 -0
- package/esm/components/TextLink/TextLink.js.map +1 -1
- package/esm/intl/IntlProvider.d.ts +5 -3
- package/esm/intl/IntlProvider.js +5 -3
- package/esm/intl/IntlProvider.js.map +1 -1
- package/esm/intl/localeMap.d.ts +1 -0
- package/esm/intl/localeMap.js +49 -4
- package/esm/intl/localeMap.js.map +1 -1
- package/esm/intl/locales/index.d.ts +3 -3
- package/esm/intl/locales/index.js +3 -3
- package/esm/themes/createShadow/createShadow.js +2 -0
- package/esm/themes/createShadow/createShadow.js.map +1 -1
- package/esm/vendor/.pnpm/{@babel_runtime@7.28.2 → @babel_runtime@7.28.3}/vendor/@babel/runtime/helpers/esm/assertThisInitialized.js.map +1 -1
- package/esm/vendor/.pnpm/{@babel_runtime@7.28.2 → @babel_runtime@7.28.3}/vendor/@babel/runtime/helpers/esm/construct.js.map +1 -1
- package/esm/vendor/.pnpm/{@babel_runtime@7.28.2 → @babel_runtime@7.28.3}/vendor/@babel/runtime/helpers/esm/extends.js.map +1 -1
- package/esm/vendor/.pnpm/{@babel_runtime@7.28.2 → @babel_runtime@7.28.3}/vendor/@babel/runtime/helpers/esm/getPrototypeOf.js.map +1 -1
- package/esm/vendor/.pnpm/{@babel_runtime@7.28.2 → @babel_runtime@7.28.3}/vendor/@babel/runtime/helpers/esm/inheritsLoose.js.map +1 -1
- package/esm/vendor/.pnpm/{@babel_runtime@7.28.2 → @babel_runtime@7.28.3}/vendor/@babel/runtime/helpers/esm/isNativeFunction.js.map +1 -1
- package/esm/vendor/.pnpm/{@babel_runtime@7.28.2 → @babel_runtime@7.28.3}/vendor/@babel/runtime/helpers/esm/isNativeReflectConstruct.js.map +1 -1
- package/esm/vendor/.pnpm/{@babel_runtime@7.28.2 → @babel_runtime@7.28.3}/vendor/@babel/runtime/helpers/esm/objectWithoutPropertiesLoose.js.map +1 -1
- package/esm/vendor/.pnpm/{@babel_runtime@7.28.2 → @babel_runtime@7.28.3}/vendor/@babel/runtime/helpers/esm/setPrototypeOf.js.map +1 -1
- package/esm/vendor/.pnpm/{@babel_runtime@7.28.2 → @babel_runtime@7.28.3}/vendor/@babel/runtime/helpers/esm/wrapNativeSuper.js.map +1 -1
- package/esm/vendor/.pnpm/{dayjs@1.11.13 → dayjs@1.11.18}/vendor/dayjs/dayjs.min.js.map +1 -1
- package/esm/vendor/.pnpm/{dayjs@1.11.13 → dayjs@1.11.18}/vendor/dayjs/plugin/isBetween.js.map +1 -1
- package/esm/vendor/.pnpm/{merge-refs@1.3.0_@types_react@18.3.23 → merge-refs@1.3.0_@types_react@18.3.24}/vendor/merge-refs/dist/esm/index.js.map +1 -1
- package/esm/vendor/.pnpm/polished@4.3.1/vendor/polished/dist/polished.esm.js +4 -4
- package/esm/vendor/.pnpm/{react-innertext@1.1.5_@types_react@18.3.23_react@19.1.1 → react-innertext@1.1.5_@types_react@18.3.24_react@19.1.1}/vendor/react-innertext/index.js.map +1 -1
- package/esm/vendor/.pnpm/{react-pdf@9.2.1_@types_react@18.3.23_react-dom@19.1.1_react@19.1.1__react@19.1.1 → react-pdf@9.2.1_@types_react@18.3.24_react-dom@19.1.1_react@19.1.1__react@19.1.1}/vendor/react-pdf/dist/esm/Document.js.map +1 -1
- package/esm/vendor/.pnpm/{react-pdf@9.2.1_@types_react@18.3.23_react-dom@19.1.1_react@19.1.1__react@19.1.1 → react-pdf@9.2.1_@types_react@18.3.24_react-dom@19.1.1_react@19.1.1__react@19.1.1}/vendor/react-pdf/dist/esm/DocumentContext.js.map +1 -1
- package/esm/vendor/.pnpm/{react-pdf@9.2.1_@types_react@18.3.23_react-dom@19.1.1_react@19.1.1__react@19.1.1 → react-pdf@9.2.1_@types_react@18.3.24_react-dom@19.1.1_react@19.1.1__react@19.1.1}/vendor/react-pdf/dist/esm/LinkService.js.map +1 -1
- package/esm/vendor/.pnpm/{react-pdf@9.2.1_@types_react@18.3.23_react-dom@19.1.1_react@19.1.1__react@19.1.1 → react-pdf@9.2.1_@types_react@18.3.24_react-dom@19.1.1_react@19.1.1__react@19.1.1}/vendor/react-pdf/dist/esm/Message.js.map +1 -1
- package/esm/vendor/.pnpm/{react-pdf@9.2.1_@types_react@18.3.23_react-dom@19.1.1_react@19.1.1__react@19.1.1 → react-pdf@9.2.1_@types_react@18.3.24_react-dom@19.1.1_react@19.1.1__react@19.1.1}/vendor/react-pdf/dist/esm/Page/AnnotationLayer.js.map +1 -1
- package/esm/vendor/.pnpm/{react-pdf@9.2.1_@types_react@18.3.23_react-dom@19.1.1_react@19.1.1__react@19.1.1 → react-pdf@9.2.1_@types_react@18.3.24_react-dom@19.1.1_react@19.1.1__react@19.1.1}/vendor/react-pdf/dist/esm/Page/Canvas.js +1 -1
- package/esm/vendor/.pnpm/{react-pdf@9.2.1_@types_react@18.3.23_react-dom@19.1.1_react@19.1.1__react@19.1.1 → react-pdf@9.2.1_@types_react@18.3.24_react-dom@19.1.1_react@19.1.1__react@19.1.1}/vendor/react-pdf/dist/esm/Page/Canvas.js.map +1 -1
- package/esm/vendor/.pnpm/{react-pdf@9.2.1_@types_react@18.3.23_react-dom@19.1.1_react@19.1.1__react@19.1.1 → react-pdf@9.2.1_@types_react@18.3.24_react-dom@19.1.1_react@19.1.1__react@19.1.1}/vendor/react-pdf/dist/esm/Page/TextLayer.js.map +1 -1
- package/esm/vendor/.pnpm/{react-pdf@9.2.1_@types_react@18.3.23_react-dom@19.1.1_react@19.1.1__react@19.1.1 → react-pdf@9.2.1_@types_react@18.3.24_react-dom@19.1.1_react@19.1.1__react@19.1.1}/vendor/react-pdf/dist/esm/Page.js +1 -1
- package/esm/vendor/.pnpm/{react-pdf@9.2.1_@types_react@18.3.23_react-dom@19.1.1_react@19.1.1__react@19.1.1 → react-pdf@9.2.1_@types_react@18.3.24_react-dom@19.1.1_react@19.1.1__react@19.1.1}/vendor/react-pdf/dist/esm/Page.js.map +1 -1
- package/esm/vendor/.pnpm/{react-pdf@9.2.1_@types_react@18.3.23_react-dom@19.1.1_react@19.1.1__react@19.1.1 → react-pdf@9.2.1_@types_react@18.3.24_react-dom@19.1.1_react@19.1.1__react@19.1.1}/vendor/react-pdf/dist/esm/PageContext.js.map +1 -1
- package/esm/vendor/.pnpm/{react-pdf@9.2.1_@types_react@18.3.23_react-dom@19.1.1_react@19.1.1__react@19.1.1 → react-pdf@9.2.1_@types_react@18.3.24_react-dom@19.1.1_react@19.1.1__react@19.1.1}/vendor/react-pdf/dist/esm/PasswordResponses.js.map +1 -1
- package/esm/vendor/.pnpm/{react-pdf@9.2.1_@types_react@18.3.23_react-dom@19.1.1_react@19.1.1__react@19.1.1 → react-pdf@9.2.1_@types_react@18.3.24_react-dom@19.1.1_react@19.1.1__react@19.1.1}/vendor/react-pdf/dist/esm/StructTree.js.map +1 -1
- package/esm/vendor/.pnpm/{react-pdf@9.2.1_@types_react@18.3.23_react-dom@19.1.1_react@19.1.1__react@19.1.1 → react-pdf@9.2.1_@types_react@18.3.24_react-dom@19.1.1_react@19.1.1__react@19.1.1}/vendor/react-pdf/dist/esm/StructTreeItem.js.map +1 -1
- package/esm/vendor/.pnpm/{react-pdf@9.2.1_@types_react@18.3.23_react-dom@19.1.1_react@19.1.1__react@19.1.1 → react-pdf@9.2.1_@types_react@18.3.24_react-dom@19.1.1_react@19.1.1__react@19.1.1}/vendor/react-pdf/dist/esm/index.js.map +1 -1
- package/esm/vendor/.pnpm/{react-pdf@9.2.1_@types_react@18.3.23_react-dom@19.1.1_react@19.1.1__react@19.1.1 → react-pdf@9.2.1_@types_react@18.3.24_react-dom@19.1.1_react@19.1.1__react@19.1.1}/vendor/react-pdf/dist/esm/shared/constants.js.map +1 -1
- package/esm/vendor/.pnpm/{react-pdf@9.2.1_@types_react@18.3.23_react-dom@19.1.1_react@19.1.1__react@19.1.1 → react-pdf@9.2.1_@types_react@18.3.24_react-dom@19.1.1_react@19.1.1__react@19.1.1}/vendor/react-pdf/dist/esm/shared/hooks/useDocumentContext.js.map +1 -1
- package/esm/vendor/.pnpm/{react-pdf@9.2.1_@types_react@18.3.23_react-dom@19.1.1_react@19.1.1__react@19.1.1 → react-pdf@9.2.1_@types_react@18.3.24_react-dom@19.1.1_react@19.1.1__react@19.1.1}/vendor/react-pdf/dist/esm/shared/hooks/usePageContext.js.map +1 -1
- package/esm/vendor/.pnpm/{react-pdf@9.2.1_@types_react@18.3.23_react-dom@19.1.1_react@19.1.1__react@19.1.1 → react-pdf@9.2.1_@types_react@18.3.24_react-dom@19.1.1_react@19.1.1__react@19.1.1}/vendor/react-pdf/dist/esm/shared/hooks/useResolver.js.map +1 -1
- package/esm/vendor/.pnpm/{react-pdf@9.2.1_@types_react@18.3.23_react-dom@19.1.1_react@19.1.1__react@19.1.1 → react-pdf@9.2.1_@types_react@18.3.24_react-dom@19.1.1_react@19.1.1__react@19.1.1}/vendor/react-pdf/dist/esm/shared/structTreeUtils.js.map +1 -1
- package/esm/vendor/.pnpm/{react-pdf@9.2.1_@types_react@18.3.23_react-dom@19.1.1_react@19.1.1__react@19.1.1 → react-pdf@9.2.1_@types_react@18.3.24_react-dom@19.1.1_react@19.1.1__react@19.1.1}/vendor/react-pdf/dist/esm/shared/utils.js.map +1 -1
- package/esm/vendor/.pnpm/react-transition-group@4.4.5_react-dom@19.1.1_react@19.1.1__react@19.1.1/vendor/react-transition-group/esm/CSSTransition.js +3 -3
- package/esm/vendor/.pnpm/react-transition-group@4.4.5_react-dom@19.1.1_react@19.1.1__react@19.1.1/vendor/react-transition-group/esm/Transition.js +2 -2
- package/lib/components/Combobox/SingleCombobox/SingleCombobox.js +10 -11
- package/lib/components/Combobox/SingleCombobox/SingleCombobox.js.map +1 -1
- package/lib/components/Dropdown/SortDropdown/SortDropdown.js +6 -3
- package/lib/components/Dropdown/SortDropdown/SortDropdown.js.map +1 -1
- package/lib/components/Dropdown/SortDropdown/useSortDropdown.d.ts +2 -2
- package/lib/components/Dropdown/SortDropdown/useSortDropdown.js.map +1 -1
- package/lib/components/Table/useTableHeadCellCount.js +15 -3
- package/lib/components/Table/useTableHeadCellCount.js.map +1 -1
- package/lib/components/TextLink/TextLink.d.ts +21 -0
- package/lib/components/TextLink/TextLink.js +3 -0
- package/lib/components/TextLink/TextLink.js.map +1 -1
- package/lib/intl/IntlProvider.d.ts +5 -3
- package/lib/intl/IntlProvider.js +4 -2
- package/lib/intl/IntlProvider.js.map +1 -1
- package/lib/intl/localeMap.d.ts +1 -0
- package/lib/intl/localeMap.js +50 -4
- package/lib/intl/localeMap.js.map +1 -1
- package/lib/intl/locales/index.d.ts +3 -3
- package/lib/intl/locales/index.js +7 -7
- package/lib/intl/locales/index.js.map +1 -1
- package/lib/themes/createShadow/createShadow.js +2 -0
- package/lib/themes/createShadow/createShadow.js.map +1 -1
- package/package.json +2 -2
- /package/esm/vendor/.pnpm/{@babel_runtime@7.28.2 → @babel_runtime@7.28.3}/vendor/@babel/runtime/helpers/esm/assertThisInitialized.js +0 -0
- /package/esm/vendor/.pnpm/{@babel_runtime@7.28.2 → @babel_runtime@7.28.3}/vendor/@babel/runtime/helpers/esm/construct.js +0 -0
- /package/esm/vendor/.pnpm/{@babel_runtime@7.28.2 → @babel_runtime@7.28.3}/vendor/@babel/runtime/helpers/esm/extends.js +0 -0
- /package/esm/vendor/.pnpm/{@babel_runtime@7.28.2 → @babel_runtime@7.28.3}/vendor/@babel/runtime/helpers/esm/getPrototypeOf.js +0 -0
- /package/esm/vendor/.pnpm/{@babel_runtime@7.28.2 → @babel_runtime@7.28.3}/vendor/@babel/runtime/helpers/esm/inheritsLoose.js +0 -0
- /package/esm/vendor/.pnpm/{@babel_runtime@7.28.2 → @babel_runtime@7.28.3}/vendor/@babel/runtime/helpers/esm/isNativeFunction.js +0 -0
- /package/esm/vendor/.pnpm/{@babel_runtime@7.28.2 → @babel_runtime@7.28.3}/vendor/@babel/runtime/helpers/esm/isNativeReflectConstruct.js +0 -0
- /package/esm/vendor/.pnpm/{@babel_runtime@7.28.2 → @babel_runtime@7.28.3}/vendor/@babel/runtime/helpers/esm/objectWithoutPropertiesLoose.js +0 -0
- /package/esm/vendor/.pnpm/{@babel_runtime@7.28.2 → @babel_runtime@7.28.3}/vendor/@babel/runtime/helpers/esm/setPrototypeOf.js +0 -0
- /package/esm/vendor/.pnpm/{@babel_runtime@7.28.2 → @babel_runtime@7.28.3}/vendor/@babel/runtime/helpers/esm/wrapNativeSuper.js +0 -0
- /package/esm/vendor/.pnpm/{dayjs@1.11.13 → dayjs@1.11.18}/vendor/dayjs/dayjs.min.js +0 -0
- /package/esm/vendor/.pnpm/{dayjs@1.11.13 → dayjs@1.11.18}/vendor/dayjs/plugin/isBetween.js +0 -0
- /package/esm/vendor/.pnpm/{merge-refs@1.3.0_@types_react@18.3.23 → merge-refs@1.3.0_@types_react@18.3.24}/vendor/merge-refs/dist/esm/index.js +0 -0
- /package/esm/vendor/.pnpm/{react-innertext@1.1.5_@types_react@18.3.23_react@19.1.1 → react-innertext@1.1.5_@types_react@18.3.24_react@19.1.1}/vendor/react-innertext/index.js +0 -0
- /package/esm/vendor/.pnpm/{react-pdf@9.2.1_@types_react@18.3.23_react-dom@19.1.1_react@19.1.1__react@19.1.1 → react-pdf@9.2.1_@types_react@18.3.24_react-dom@19.1.1_react@19.1.1__react@19.1.1}/vendor/react-pdf/dist/esm/Document.js +0 -0
- /package/esm/vendor/.pnpm/{react-pdf@9.2.1_@types_react@18.3.23_react-dom@19.1.1_react@19.1.1__react@19.1.1 → react-pdf@9.2.1_@types_react@18.3.24_react-dom@19.1.1_react@19.1.1__react@19.1.1}/vendor/react-pdf/dist/esm/DocumentContext.js +0 -0
- /package/esm/vendor/.pnpm/{react-pdf@9.2.1_@types_react@18.3.23_react-dom@19.1.1_react@19.1.1__react@19.1.1 → react-pdf@9.2.1_@types_react@18.3.24_react-dom@19.1.1_react@19.1.1__react@19.1.1}/vendor/react-pdf/dist/esm/LinkService.js +0 -0
- /package/esm/vendor/.pnpm/{react-pdf@9.2.1_@types_react@18.3.23_react-dom@19.1.1_react@19.1.1__react@19.1.1 → react-pdf@9.2.1_@types_react@18.3.24_react-dom@19.1.1_react@19.1.1__react@19.1.1}/vendor/react-pdf/dist/esm/Message.js +0 -0
- /package/esm/vendor/.pnpm/{react-pdf@9.2.1_@types_react@18.3.23_react-dom@19.1.1_react@19.1.1__react@19.1.1 → react-pdf@9.2.1_@types_react@18.3.24_react-dom@19.1.1_react@19.1.1__react@19.1.1}/vendor/react-pdf/dist/esm/Page/AnnotationLayer.js +0 -0
- /package/esm/vendor/.pnpm/{react-pdf@9.2.1_@types_react@18.3.23_react-dom@19.1.1_react@19.1.1__react@19.1.1 → react-pdf@9.2.1_@types_react@18.3.24_react-dom@19.1.1_react@19.1.1__react@19.1.1}/vendor/react-pdf/dist/esm/Page/TextLayer.js +0 -0
- /package/esm/vendor/.pnpm/{react-pdf@9.2.1_@types_react@18.3.23_react-dom@19.1.1_react@19.1.1__react@19.1.1 → react-pdf@9.2.1_@types_react@18.3.24_react-dom@19.1.1_react@19.1.1__react@19.1.1}/vendor/react-pdf/dist/esm/PageContext.js +0 -0
- /package/esm/vendor/.pnpm/{react-pdf@9.2.1_@types_react@18.3.23_react-dom@19.1.1_react@19.1.1__react@19.1.1 → react-pdf@9.2.1_@types_react@18.3.24_react-dom@19.1.1_react@19.1.1__react@19.1.1}/vendor/react-pdf/dist/esm/PasswordResponses.js +0 -0
- /package/esm/vendor/.pnpm/{react-pdf@9.2.1_@types_react@18.3.23_react-dom@19.1.1_react@19.1.1__react@19.1.1 → react-pdf@9.2.1_@types_react@18.3.24_react-dom@19.1.1_react@19.1.1__react@19.1.1}/vendor/react-pdf/dist/esm/StructTree.js +0 -0
- /package/esm/vendor/.pnpm/{react-pdf@9.2.1_@types_react@18.3.23_react-dom@19.1.1_react@19.1.1__react@19.1.1 → react-pdf@9.2.1_@types_react@18.3.24_react-dom@19.1.1_react@19.1.1__react@19.1.1}/vendor/react-pdf/dist/esm/StructTreeItem.js +0 -0
- /package/esm/vendor/.pnpm/{react-pdf@9.2.1_@types_react@18.3.23_react-dom@19.1.1_react@19.1.1__react@19.1.1 → react-pdf@9.2.1_@types_react@18.3.24_react-dom@19.1.1_react@19.1.1__react@19.1.1}/vendor/react-pdf/dist/esm/index.js +0 -0
- /package/esm/vendor/.pnpm/{react-pdf@9.2.1_@types_react@18.3.23_react-dom@19.1.1_react@19.1.1__react@19.1.1 → react-pdf@9.2.1_@types_react@18.3.24_react-dom@19.1.1_react@19.1.1__react@19.1.1}/vendor/react-pdf/dist/esm/shared/constants.js +0 -0
- /package/esm/vendor/.pnpm/{react-pdf@9.2.1_@types_react@18.3.23_react-dom@19.1.1_react@19.1.1__react@19.1.1 → react-pdf@9.2.1_@types_react@18.3.24_react-dom@19.1.1_react@19.1.1__react@19.1.1}/vendor/react-pdf/dist/esm/shared/hooks/useDocumentContext.js +0 -0
- /package/esm/vendor/.pnpm/{react-pdf@9.2.1_@types_react@18.3.23_react-dom@19.1.1_react@19.1.1__react@19.1.1 → react-pdf@9.2.1_@types_react@18.3.24_react-dom@19.1.1_react@19.1.1__react@19.1.1}/vendor/react-pdf/dist/esm/shared/hooks/usePageContext.js +0 -0
- /package/esm/vendor/.pnpm/{react-pdf@9.2.1_@types_react@18.3.23_react-dom@19.1.1_react@19.1.1__react@19.1.1 → react-pdf@9.2.1_@types_react@18.3.24_react-dom@19.1.1_react@19.1.1__react@19.1.1}/vendor/react-pdf/dist/esm/shared/hooks/useResolver.js +0 -0
- /package/esm/vendor/.pnpm/{react-pdf@9.2.1_@types_react@18.3.23_react-dom@19.1.1_react@19.1.1__react@19.1.1 → react-pdf@9.2.1_@types_react@18.3.24_react-dom@19.1.1_react@19.1.1__react@19.1.1}/vendor/react-pdf/dist/esm/shared/structTreeUtils.js +0 -0
- /package/esm/vendor/.pnpm/{react-pdf@9.2.1_@types_react@18.3.23_react-dom@19.1.1_react@19.1.1__react@19.1.1 → react-pdf@9.2.1_@types_react@18.3.24_react-dom@19.1.1_react@19.1.1__react@19.1.1}/vendor/react-pdf/dist/esm/shared/utils.js +0 -0
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { getDefaultExportFromCjs } from './_commonjsHelpers.js';
|
|
2
|
-
import { __require as requireDayjs_min } from './../vendor/.pnpm/dayjs@1.11.
|
|
2
|
+
import { __require as requireDayjs_min } from './../vendor/.pnpm/dayjs@1.11.18/vendor/dayjs/dayjs.min.js';
|
|
3
3
|
|
|
4
4
|
var dayjs_minExports = requireDayjs_min();
|
|
5
5
|
var dayjs = /*@__PURE__*/getDefaultExportFromCjs(dayjs_minExports);
|
package/esm/_virtual/index3.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { getDefaultExportFromCjs } from './_commonjsHelpers.js';
|
|
2
|
-
import { __require as requireReactInnertext } from './../vendor/.pnpm/react-innertext@1.1.5_@types_react@18.3.
|
|
2
|
+
import { __require as requireReactInnertext } from './../vendor/.pnpm/react-innertext@1.1.5_@types_react@18.3.24_react@19.1.1/vendor/react-innertext/index.js';
|
|
3
3
|
|
|
4
4
|
var reactInnertextExports = requireReactInnertext();
|
|
5
5
|
var innerText = /*@__PURE__*/getDefaultExportFromCjs(reactInnertextExports);
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { getDefaultExportFromCjs } from './_commonjsHelpers.js';
|
|
2
|
-
import { __require as requireIsBetween } from './../vendor/.pnpm/dayjs@1.11.
|
|
2
|
+
import { __require as requireIsBetween } from './../vendor/.pnpm/dayjs@1.11.18/vendor/dayjs/plugin/isBetween.js';
|
|
3
3
|
|
|
4
4
|
var isBetweenExports = requireIsBetween();
|
|
5
5
|
var dayjsIsBetween = /*@__PURE__*/getDefaultExportFromCjs(isBetweenExports);
|
|
@@ -99,6 +99,7 @@ const ActualSingleCombobox = ({ items, selectedItem, defaultItem, name, disabled
|
|
|
99
99
|
const selectDefaultItem = useMemo(() => (onSelect && defaultItem ? () => onSelect(defaultItem) : NOOP), [onSelect, defaultItem]);
|
|
100
100
|
const focus = useCallback(() => {
|
|
101
101
|
onFocus?.();
|
|
102
|
+
inputRef.current?.focus();
|
|
102
103
|
setIsFocused(true);
|
|
103
104
|
if (!isFocused) {
|
|
104
105
|
setIsExpanded(true);
|
|
@@ -111,11 +112,13 @@ const ActualSingleCombobox = ({ items, selectedItem, defaultItem, name, disabled
|
|
|
111
112
|
setIsFocused(false);
|
|
112
113
|
setIsExpanded(false);
|
|
113
114
|
setIsEditing(false);
|
|
114
|
-
if (
|
|
115
|
-
setInputValue(innerText(
|
|
115
|
+
if (selectedItem) {
|
|
116
|
+
setInputValue(innerText(selectedItem.label));
|
|
117
|
+
}
|
|
118
|
+
else {
|
|
116
119
|
selectDefaultItem();
|
|
117
120
|
}
|
|
118
|
-
}, [isFocused, onBlur, selectedItem,
|
|
121
|
+
}, [isFocused, onBlur, selectedItem, selectDefaultItem]);
|
|
119
122
|
const onClickClear = useCallback((e) => {
|
|
120
123
|
e.stopPropagation();
|
|
121
124
|
let isExecutedPreventDefault = false;
|
|
@@ -198,15 +201,11 @@ const ActualSingleCombobox = ({ items, selectedItem, defaultItem, name, disabled
|
|
|
198
201
|
return textColor.grey;
|
|
199
202
|
}, [disabled, readOnly, isFocused]);
|
|
200
203
|
useClick(useMemo(() => [outerRef, listBoxRef, clearButtonRef], [outerRef, listBoxRef, clearButtonRef]), isFocused || selectedItem ? NOOP : selectDefaultItem, unfocus);
|
|
204
|
+
// selectedItem.label はプリミティブ値でないデータ型の可能性があり、そのまま useEffect の依存配列に入れると意図せぬエフェクトの実行を引き起こしてしまう可能性があるので、プリミティブ値である string 型に変換したものを依存配列に入れています。
|
|
205
|
+
const selectedItemLabelText = innerText(selectedItem?.label);
|
|
201
206
|
useEffect(() => {
|
|
202
|
-
setInputValue(
|
|
203
|
-
|
|
204
|
-
inputRef.current.focus();
|
|
205
|
-
}
|
|
206
|
-
else if (!selectedItem) {
|
|
207
|
-
selectDefaultItem();
|
|
208
|
-
}
|
|
209
|
-
}, [isFocused, selectedItem, selectDefaultItem]);
|
|
207
|
+
setInputValue(selectedItemLabelText);
|
|
208
|
+
}, [selectedItemLabelText]);
|
|
210
209
|
const wrapperStyle = useMemo(() => ({
|
|
211
210
|
...style,
|
|
212
211
|
width: typeof width === 'number' ? `${width}px` : width,
|
|
@@ -1 +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 { type DecoratorsType, useDecorators } from '../../../hooks/useDecorators'\nimport { useIntl } from '../../../intl'\nimport { genericsForwardRef } from '../../../libs/util'\nimport { textColor } from '../../../themes'\nimport { UnstyledButton } from '../../Button'\nimport { FaCaretDownIcon, FaCircleXmarkIcon } from '../../Icon'\nimport { Input } from '../../Input'\nimport { useListbox } from '../useListbox'\nimport { useSingleOptions } from '../useOptions'\n\nimport type { BaseProps, ComboboxItem } from '../types'\n\ntype Props<T> = BaseProps<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 // HINT: useListbox内でnoResultText, loadingTextは実行される\n /**\n * コンポーネント内のテキストを変更する関数/\n */\n decorators?: DecoratorsType<DecoratorKeyTypes | 'noResultText' | 'loadingText'>\n}\n\ntype ElementProps = Omit<ComponentPropsWithoutRef<'input'>, keyof Props<unknown>>\n\ntype DecoratorKeyTypes = 'destroyButtonIconAlt'\n\nconst NOOP = () => undefined\n\nconst ESCAPE_KEY_REGEX = /^Esc(ape)?$/\nconst ARROW_UP_DOWN_REGEX = /^(Arrow)?(Up|Down)$/\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 decorators,\n style,\n ...rest\n }: Props<T> & ElementProps,\n ref: Ref<HTMLInputElement>,\n) => {\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 // HINT: Dropdown系コンポーネント内でComboboxを使うと、選択肢がportalで表現されている関係上Dropdownが閉じてしまう\n // requestAnimationFrameを追加、処理を遅延させることで正常に閉じる/閉じないの判定を行えるようにする\n requestAnimationFrame(() => {\n setIsExpanded(false)\n })\n\n setIsEditing(false)\n },\n [onChangeSelected, onSelect],\n ),\n isExpanded,\n isLoading,\n triggerRef: outerRef,\n decorators,\n })\n\n const selectDefaultItem = useMemo(\n () => (onSelect && defaultItem ? () => onSelect(defaultItem) : NOOP),\n [onSelect, defaultItem],\n )\n\n const focus = useCallback(() => {\n onFocus?.()\n\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 && defaultItem) {\n setInputValue(innerText(defaultItem.label))\n\n selectDefaultItem()\n }\n }, [isFocused, onBlur, selectedItem, defaultItem, 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 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 textColor.black\n if (disabled || readOnly) return textColor.disabled\n\n return textColor.grey\n }, [disabled, readOnly, isFocused])\n\n useClick(\n useMemo(() => [outerRef, listBoxRef, clearButtonRef], [outerRef, listBoxRef, clearButtonRef]),\n isFocused || selectedItem ? NOOP : selectDefaultItem,\n unfocus,\n )\n\n useEffect(() => {\n setInputValue(selectedItem ? innerText(selectedItem.label) : '')\n\n if (isFocused && inputRef.current) {\n inputRef.current.focus()\n } else if (!selectedItem) {\n selectDefaultItem()\n }\n }, [isFocused, selectedItem, selectDefaultItem])\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 decoratorDefaultTexts = useMemo(\n () => ({\n destroyButtonIconAlt: localize({\n id: 'smarthr-ui/SingleCombobox/destroyButtonIconAlt',\n defaultText: '削除',\n }),\n }),\n [localize],\n )\n\n const decorated = useDecorators<DecoratorKeyTypes>(decoratorDefaultTexts, decorators)\n\n return (\n <div 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={decorated.destroyButtonIconAlt}\n className={classNames.clearButtonIcon}\n />\n </UnstyledButton>\n {/* eslint-disable-next-line smarthr/a11y-delegate-element-has-role-presentation */}\n <span onClick={onClickInput} role=\"presentation\" className={classNames.caretDownLayout}>\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":";;;;;;;;;;;;;;;;;;;;;;;AA6EA;AAEA;AACA;AAEA;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;;;;;;;AASA;;AAEE;;;;AAID;AAED;;;;;AAKE;AAEI;AACA;;;;;AAMA;;AAGF;;;AAKF;;AAED;AAED;AAKA;;;;;;AAQA;AACA;AACE;;;;;;AAQA;;AAGE;;AAEJ;AACA;;;AAMI;AACE;;;;;AAKD;;;AAIC;AAEA;;;;;AAQN;AAEI;;;;AAMA;;;;;AAQJ;AAEI;AACA;AAEA;;AAEA;;AAIA;;AAEE;;AAEJ;AAGF;AACA;AACA;;;;;;;;;;AAWW;AACL;;;;;;AAMA;;;;;;;;;;AAcN;AAEI;;AAEA;AACF;AAIF;AACE;;;;;;AAMF;;AAOE;AAEA;AACE;;;AAEA;;;AAIJ;AAEI;AACA;AACD;AAIH;AAEA;AACE;;;;;;AAQE;;;;AAKJ;;AAGM;AACA;;AAEH;;AAMH;;AAmBM;AAmCR;;;"}
|
|
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 { type DecoratorsType, useDecorators } from '../../../hooks/useDecorators'\nimport { useIntl } from '../../../intl'\nimport { genericsForwardRef } from '../../../libs/util'\nimport { textColor } from '../../../themes'\nimport { UnstyledButton } from '../../Button'\nimport { FaCaretDownIcon, FaCircleXmarkIcon } from '../../Icon'\nimport { Input } from '../../Input'\nimport { useListbox } from '../useListbox'\nimport { useSingleOptions } from '../useOptions'\n\nimport type { BaseProps, ComboboxItem } from '../types'\n\ntype Props<T> = BaseProps<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 // HINT: useListbox内でnoResultText, loadingTextは実行される\n /**\n * コンポーネント内のテキストを変更する関数/\n */\n decorators?: DecoratorsType<DecoratorKeyTypes | 'noResultText' | 'loadingText'>\n}\n\ntype ElementProps = Omit<ComponentPropsWithoutRef<'input'>, keyof Props<unknown>>\n\ntype DecoratorKeyTypes = 'destroyButtonIconAlt'\n\nconst NOOP = () => undefined\n\nconst ESCAPE_KEY_REGEX = /^Esc(ape)?$/\nconst ARROW_UP_DOWN_REGEX = /^(Arrow)?(Up|Down)$/\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 decorators,\n style,\n ...rest\n }: Props<T> & ElementProps,\n ref: Ref<HTMLInputElement>,\n) => {\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 // HINT: Dropdown系コンポーネント内でComboboxを使うと、選択肢がportalで表現されている関係上Dropdownが閉じてしまう\n // requestAnimationFrameを追加、処理を遅延させることで正常に閉じる/閉じないの判定を行えるようにする\n requestAnimationFrame(() => {\n setIsExpanded(false)\n })\n\n setIsEditing(false)\n },\n [onChangeSelected, onSelect],\n ),\n isExpanded,\n isLoading,\n triggerRef: outerRef,\n decorators,\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 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 textColor.black\n if (disabled || readOnly) return textColor.disabled\n\n return textColor.grey\n }, [disabled, readOnly, isFocused])\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 decoratorDefaultTexts = useMemo(\n () => ({\n destroyButtonIconAlt: localize({\n id: 'smarthr-ui/SingleCombobox/destroyButtonIconAlt',\n defaultText: '削除',\n }),\n }),\n [localize],\n )\n\n const decorated = useDecorators<DecoratorKeyTypes>(decoratorDefaultTexts, decorators)\n\n return (\n <div 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={decorated.destroyButtonIconAlt}\n className={classNames.clearButtonIcon}\n />\n </UnstyledButton>\n {/* eslint-disable-next-line smarthr/a11y-delegate-element-has-role-presentation */}\n <span onClick={onClickInput} role=\"presentation\" className={classNames.caretDownLayout}>\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":";;;;;;;;;;;;;;;;;;;;;;;AA6EA;AAEA;AACA;AAEA;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;;;;;;;AASA;;AAEE;;;;AAID;AAED;;;;;AAKE;AAEI;AACA;;;;;AAMA;;AAGF;;;AAKF;;AAED;AAED;AAKA;;AAEE;;;;;AAMF;AACA;AACE;;;;;;;;;;AAWE;;;AAGJ;;;AAMI;AACE;;;;;AAKD;;;AAIC;AAEA;;;;;AAQN;AAEI;;;;AAMA;;;;;AAQJ;AAEI;AACA;AAEA;;AAEA;;AAIA;;AAEE;;AAEJ;AAGF;AACA;AACA;;;;;;;;;;AAWW;AACL;;;;;;AAMA;;;;;;;;;;AAcN;AAEI;;AAEA;AACF;AAIF;AACE;;;;;;AAMF;;;;;AAUA;AAEA;AAEI;AACA;AACD;AAIH;AAEA;AACE;;;;;;AAQE;;;;AAKJ;;AAGM;AACA;;AAEH;;AAMH;;AAmBM;AAmCR;;;"}
|
|
@@ -20,6 +20,9 @@ import { DropdownContent } from '../DropdownContent.js';
|
|
|
20
20
|
import { DropdownTrigger } from '../DropdownTrigger.js';
|
|
21
21
|
import { useSortDropdown } from './useSortDropdown.js';
|
|
22
22
|
|
|
23
|
+
const ON_SUBMIT = (e) => {
|
|
24
|
+
e.preventDefault();
|
|
25
|
+
};
|
|
23
26
|
const SortDropdown = ({ sortFields, defaultOrder, onApply, onCancel, decorators, ...props }) => {
|
|
24
27
|
const { labels, SortIcon, onChangeSortOrderRadio, innerValues: { innerFields, innerCheckedOrder }, handler: { handleApply, handleChange }, classNames, } = useSortDropdown({
|
|
25
28
|
sortFields,
|
|
@@ -27,11 +30,11 @@ const SortDropdown = ({ sortFields, defaultOrder, onApply, onCancel, decorators,
|
|
|
27
30
|
onApply,
|
|
28
31
|
decorators,
|
|
29
32
|
});
|
|
30
|
-
return (jsxs(Dropdown, { children: [jsx(DropdownTrigger, { children: jsx(Button, { ...props, suffix: jsx(SortIcon, {}), children: labels.triggerLabel }) }), jsx(DropdownContent, { controllable: true, children: jsxs("form", { onSubmit:
|
|
33
|
+
return (jsxs(Dropdown, { children: [jsx(DropdownTrigger, { children: jsx(Button, { ...props, suffix: jsx(SortIcon, {}), children: labels.triggerLabel }) }), jsx(DropdownContent, { controllable: true, children: jsxs("form", { onSubmit: ON_SUBMIT, children: [jsxs(Stack, { className: classNames.body, children: [jsx(FormControl, { title: labels.sortFieldLabel, children: jsx(Select, { name: "sortFields", options: innerFields, onChange: handleChange, className: classNames.select }) }), jsx(Fieldset, { title: labels.sortOrderLabel, innerMargin: 0.5, children: jsxs(Cluster, { gap: 1.25, children: [jsx(RadioButton, { name: "sortOrder", value: "asc", checked: innerCheckedOrder === 'asc', onChange: onChangeSortOrderRadio, children: labels.ascLabel }), jsx(RadioButton, { name: "sortOrder", value: "desc", checked: innerCheckedOrder === 'desc', onChange: onChangeSortOrderRadio, children: labels.descLabel })] }) })] }), jsx(Footer, { onApply: handleApply, onCancel: onCancel, cancelButtonLabel: labels.cancelButtonLabel, applyButtonLabel: labels.applyButtonLabel, className: classNames.footer })] }) })] }));
|
|
31
34
|
};
|
|
32
|
-
const Footer = memo(({ className, onCancel, cancelButtonLabel, applyButtonLabel }) => (jsxs(Cluster, { gap: 1, align: "center", justify: "flex-end", as: "footer", className: className, children: [jsx(CancelButton, { onClick: onCancel, children: cancelButtonLabel }), jsx(ApplyButton, { children: applyButtonLabel })] })));
|
|
35
|
+
const Footer = memo(({ className, onApply, onCancel, cancelButtonLabel, applyButtonLabel }) => (jsxs(Cluster, { gap: 1, align: "center", justify: "flex-end", as: "footer", className: className, children: [jsx(CancelButton, { onClick: onCancel, children: cancelButtonLabel }), jsx(ApplyButton, { onClick: onApply, children: applyButtonLabel })] })));
|
|
33
36
|
const CancelButton = memo(({ onClick, children }) => (jsx(DropdownCloser, { children: jsx(Button, { onClick: onClick, children: children }) })));
|
|
34
|
-
const ApplyButton = memo(({ children }) => (jsx(DropdownCloser, { children: jsx(Button, {
|
|
37
|
+
const ApplyButton = memo(({ onClick, children }) => (jsx(DropdownCloser, { children: jsx(Button, { variant: "primary", onClick: onClick, children: children }) })));
|
|
35
38
|
|
|
36
39
|
export { SortDropdown };
|
|
37
40
|
//# sourceMappingURL=SortDropdown.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SortDropdown.js","sources":["../../../../src/components/Dropdown/SortDropdown/SortDropdown.tsx"],"sourcesContent":["'use client'\n\nimport {\n type ComponentPropsWithRef,\n type FC,\n type MouseEventHandler,\n type OptionHTMLAttributes,\n type PropsWithChildren,\n type ReactNode,\n memo,\n} from 'react'\n\nimport { Button } from '../../Button'\nimport { Fieldset } from '../../Fieldset'\nimport { FormControl } from '../../FormControl'\nimport { Cluster, Stack } from '../../Layout'\nimport { RadioButton } from '../../RadioButton'\nimport { Select } from '../../Select'\nimport { Dropdown } from '../Dropdown'\nimport { DropdownCloser } from '../DropdownCloser'\nimport { DropdownContent } from '../DropdownContent'\nimport { DropdownTrigger } from '../DropdownTrigger'\n\nimport { type DecoratorKeyTypes, useSortDropdown } from './useSortDropdown'\n\nimport type { DecoratorsType } from '../../../hooks/useDecorators'\n\ntype SortFieldType = {\n value: string\n} & Omit<OptionHTMLAttributes<HTMLOptionElement>, 'value'>\n\ntype ArgsOnApply = {\n field: string\n order: 'asc' | 'desc'\n newfields: SortFieldType[]\n}\n\ntype Props = {\n /** 並び替え項目 */\n sortFields: SortFieldType[]\n /** 並び順の初期値 */\n defaultOrder: 'asc' | 'desc'\n /** 適用時に発火するイベント */\n onApply: (args: ArgsOnApply) => void\n /** キャンセル時に発火するイベント */\n onCancel?: MouseEventHandler<HTMLButtonElement>\n decorators?: DecoratorsType<DecoratorKeyTypes>\n}\ntype ElementProps = Omit<ComponentPropsWithRef<'button'>, keyof Props>\n\nexport const SortDropdown: FC<Props & ElementProps> = ({\n sortFields,\n defaultOrder,\n onApply,\n onCancel,\n decorators,\n ...props\n}) => {\n const {\n labels,\n SortIcon,\n onChangeSortOrderRadio,\n innerValues: { innerFields, innerCheckedOrder },\n handler: { handleApply, handleChange },\n classNames,\n } = useSortDropdown({\n sortFields,\n defaultOrder,\n onApply,\n decorators,\n })\n\n return (\n <Dropdown>\n <DropdownTrigger>\n <Button {...props} suffix={<SortIcon />}>\n {labels.triggerLabel}\n </Button>\n </DropdownTrigger>\n <DropdownContent controllable>\n <form onSubmit={
|
|
1
|
+
{"version":3,"file":"SortDropdown.js","sources":["../../../../src/components/Dropdown/SortDropdown/SortDropdown.tsx"],"sourcesContent":["'use client'\n\nimport {\n type ComponentPropsWithRef,\n type FC,\n type FormEvent,\n type MouseEventHandler,\n type OptionHTMLAttributes,\n type PropsWithChildren,\n type ReactNode,\n memo,\n} from 'react'\n\nimport { Button } from '../../Button'\nimport { Fieldset } from '../../Fieldset'\nimport { FormControl } from '../../FormControl'\nimport { Cluster, Stack } from '../../Layout'\nimport { RadioButton } from '../../RadioButton'\nimport { Select } from '../../Select'\nimport { Dropdown } from '../Dropdown'\nimport { DropdownCloser } from '../DropdownCloser'\nimport { DropdownContent } from '../DropdownContent'\nimport { DropdownTrigger } from '../DropdownTrigger'\n\nimport { type DecoratorKeyTypes, useSortDropdown } from './useSortDropdown'\n\nimport type { DecoratorsType } from '../../../hooks/useDecorators'\n\ntype SortFieldType = {\n value: string\n} & Omit<OptionHTMLAttributes<HTMLOptionElement>, 'value'>\n\ntype ArgsOnApply = {\n field: string\n order: 'asc' | 'desc'\n newfields: SortFieldType[]\n}\n\ntype Props = {\n /** 並び替え項目 */\n sortFields: SortFieldType[]\n /** 並び順の初期値 */\n defaultOrder: 'asc' | 'desc'\n /** 適用時に発火するイベント */\n onApply: (args: ArgsOnApply) => void\n /** キャンセル時に発火するイベント */\n onCancel?: MouseEventHandler<HTMLButtonElement>\n decorators?: DecoratorsType<DecoratorKeyTypes>\n}\ntype ElementProps = Omit<ComponentPropsWithRef<'button'>, keyof Props>\n\nconst ON_SUBMIT = (e: FormEvent) => {\n e.preventDefault()\n}\n\nexport const SortDropdown: FC<Props & ElementProps> = ({\n sortFields,\n defaultOrder,\n onApply,\n onCancel,\n decorators,\n ...props\n}) => {\n const {\n labels,\n SortIcon,\n onChangeSortOrderRadio,\n innerValues: { innerFields, innerCheckedOrder },\n handler: { handleApply, handleChange },\n classNames,\n } = useSortDropdown({\n sortFields,\n defaultOrder,\n onApply,\n decorators,\n })\n\n return (\n <Dropdown>\n <DropdownTrigger>\n <Button {...props} suffix={<SortIcon />}>\n {labels.triggerLabel}\n </Button>\n </DropdownTrigger>\n <DropdownContent controllable>\n <form onSubmit={ON_SUBMIT}>\n <Stack className={classNames.body}>\n <FormControl title={labels.sortFieldLabel}>\n <Select\n name=\"sortFields\"\n options={innerFields}\n onChange={handleChange}\n className={classNames.select}\n />\n </FormControl>\n <Fieldset title={labels.sortOrderLabel} innerMargin={0.5}>\n <Cluster gap={1.25}>\n <RadioButton\n name=\"sortOrder\"\n value=\"asc\"\n checked={innerCheckedOrder === 'asc'}\n onChange={onChangeSortOrderRadio}\n >\n {labels.ascLabel}\n </RadioButton>\n <RadioButton\n name=\"sortOrder\"\n value=\"desc\"\n checked={innerCheckedOrder === 'desc'}\n onChange={onChangeSortOrderRadio}\n >\n {labels.descLabel}\n </RadioButton>\n </Cluster>\n </Fieldset>\n </Stack>\n <Footer\n onApply={handleApply}\n onCancel={onCancel}\n cancelButtonLabel={labels.cancelButtonLabel}\n applyButtonLabel={labels.applyButtonLabel}\n className={classNames.footer}\n />\n </form>\n </DropdownContent>\n </Dropdown>\n )\n}\n\nconst Footer = memo<\n Pick<Props, 'onCancel'> & {\n onApply: MouseEventHandler<HTMLButtonElement>\n className: string\n cancelButtonLabel: ReactNode\n applyButtonLabel: ReactNode\n }\n>(({ className, onApply, onCancel, cancelButtonLabel, applyButtonLabel }) => (\n <Cluster gap={1} align=\"center\" justify=\"flex-end\" as=\"footer\" className={className}>\n <CancelButton onClick={onCancel}>{cancelButtonLabel}</CancelButton>\n <ApplyButton onClick={onApply}>{applyButtonLabel}</ApplyButton>\n </Cluster>\n))\n\nconst CancelButton = memo<PropsWithChildren<{ onClick: Props['onCancel'] }>>(\n ({ onClick, children }) => (\n <DropdownCloser>\n <Button onClick={onClick}>{children}</Button>\n </DropdownCloser>\n ),\n)\n\nconst ApplyButton = memo<PropsWithChildren<{ onClick: MouseEventHandler<HTMLButtonElement> }>>(\n ({ onClick, children }) => (\n <DropdownCloser>\n <Button variant=\"primary\" onClick={onClick}>\n {children}\n </Button>\n </DropdownCloser>\n ),\n)\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAmDA;;AAEA;;;;;;;AAsBG;AAED;AAkDF;AAEA;AAcA;AAQA;;"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { type ChangeEventHandler, type ComponentProps, type
|
|
1
|
+
import { type ChangeEventHandler, type ComponentProps, type MouseEventHandler } from 'react';
|
|
2
2
|
import type { SortDropdown } from './SortDropdown';
|
|
3
3
|
type Props = Omit<ComponentProps<typeof SortDropdown>, 'onCancel'>;
|
|
4
4
|
export type DecoratorKeyTypes = 'sortFieldLabel' | 'sortOrderLabel' | 'ascLabel' | 'descLabel' | 'applyButtonLabel' | 'cancelButtonLabel';
|
|
@@ -14,7 +14,7 @@ export declare const useSortDropdown: ({ sortFields, defaultOrder, onApply, deco
|
|
|
14
14
|
triggerLabel: string;
|
|
15
15
|
};
|
|
16
16
|
handler: {
|
|
17
|
-
handleApply:
|
|
17
|
+
handleApply: MouseEventHandler<HTMLButtonElement>;
|
|
18
18
|
handleChange: ChangeEventHandler<HTMLSelectElement>;
|
|
19
19
|
};
|
|
20
20
|
innerValues: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useSortDropdown.js","sources":["../../../../src/components/Dropdown/SortDropdown/useSortDropdown.ts"],"sourcesContent":["import {\n type ChangeEventHandler,\n type ComponentProps,\n type
|
|
1
|
+
{"version":3,"file":"useSortDropdown.js","sources":["../../../../src/components/Dropdown/SortDropdown/useSortDropdown.ts"],"sourcesContent":["import {\n type ChangeEventHandler,\n type ComponentProps,\n type MouseEventHandler,\n useCallback,\n useEffect,\n useMemo,\n useState,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useDecorators } from '../../../hooks/useDecorators'\nimport { useIntl } from '../../../intl'\nimport { FaArrowDownWideShortIcon, FaArrowUpWideShortIcon } from '../../Icon'\n\nimport type { SortDropdown } from './SortDropdown'\n\nconst classNameGenerator = tv({\n slots: {\n body: 'shr-p-1.5',\n select: 'shr-min-w-[16em]',\n footer: 'shr-border-t-shorthand shr-px-1.5 shr-py-1',\n },\n})\n\ntype Props = Omit<ComponentProps<typeof SortDropdown>, 'onCancel'>\n\nexport type DecoratorKeyTypes =\n | 'sortFieldLabel'\n | 'sortOrderLabel'\n | 'ascLabel'\n | 'descLabel'\n | 'applyButtonLabel'\n | 'cancelButtonLabel'\n\nexport const useSortDropdown = ({ sortFields, defaultOrder, onApply, decorators }: Props) => {\n const { localize } = useIntl()\n\n const decoratorDefaultTexts = useMemo(\n () => ({\n sortFieldLabel: localize({\n id: 'smarthr-ui/SortDropdown/sortFieldLabel',\n defaultText: '並べ替え項目',\n }),\n sortOrderLabel: localize({\n id: 'smarthr-ui/SortDropdown/sortOrderLabel',\n defaultText: '並び順',\n }),\n ascLabel: localize({\n id: 'smarthr-ui/SortDropdown/ascLabel',\n defaultText: '昇順',\n }),\n descLabel: localize({\n id: 'smarthr-ui/SortDropdown/descLabel',\n defaultText: '降順',\n }),\n applyButtonLabel: localize({\n id: 'smarthr-ui/SortDropdown/applyButtonLabel',\n defaultText: '適用',\n }),\n cancelButtonLabel: localize({\n id: 'smarthr-ui/SortDropdown/cancelButtonLabel',\n defaultText: 'キャンセル',\n }),\n }),\n [localize],\n )\n\n const decorated = useDecorators<DecoratorKeyTypes>(decoratorDefaultTexts, decorators)\n\n // 外向きの値\n const [selectedLabel, setSelectedLabel] = useState<string>()\n const [checkedOrder, setCheckedOrder] = useState<Props['defaultOrder']>(defaultOrder)\n\n // 内部的な値\n const [innerFields, setInnerFields] = useState<Props['sortFields']>(sortFields)\n const [innerSelectedField, setInnerSelectedField] = useState<string>()\n const [innerCheckedOrder, setCheckedInnerOrder] = useState<Props['defaultOrder']>(defaultOrder)\n\n useEffect(() => {\n if (selectedLabel) return\n\n // 初期値は option に紛れているので、選択されている項目を取得\n const defaultField =\n sortFields.find((field) => 'selected' in field && field.selected) || sortFields[0]\n\n setSelectedLabel(defaultField.label)\n setInnerSelectedField(defaultField.label)\n }, [selectedLabel, sortFields])\n\n // 外向きな値で構成\n const triggerLabel = useMemo(() => {\n const sortLabel = checkedOrder === 'asc' ? decorated.ascLabel : decorated.descLabel\n\n return `${selectedLabel}(${sortLabel})`\n }, [decorated.ascLabel, decorated.descLabel, selectedLabel, checkedOrder])\n\n const SortIcon = useMemo(\n () => (checkedOrder === 'asc' ? FaArrowUpWideShortIcon : FaArrowDownWideShortIcon),\n [checkedOrder],\n )\n\n const handleChange = useCallback<ChangeEventHandler<HTMLSelectElement>>(\n (e) => {\n const select = e.currentTarget\n const newLabel = select.options[select.selectedIndex].label\n const newFields = innerFields.map((field) => {\n if (field.label !== newLabel && field.selected) {\n return {\n ...field,\n selected: false,\n }\n }\n if (field.label === newLabel && !field.selected) {\n return {\n ...field,\n selected: true,\n }\n }\n\n return field\n })\n\n setInnerFields(newFields)\n setInnerSelectedField(newLabel)\n },\n [innerFields],\n )\n const handleApply = useCallback<MouseEventHandler<HTMLButtonElement>>(() => {\n setSelectedLabel(innerSelectedField)\n setCheckedOrder(innerCheckedOrder)\n onApply({ field: innerSelectedField || '', order: innerCheckedOrder, newfields: innerFields })\n }, [innerCheckedOrder, innerFields, innerSelectedField, onApply])\n\n const onChangeSortOrderRadio = useCallback<ChangeEventHandler<HTMLInputElement>>((e) => {\n setCheckedInnerOrder(e.currentTarget.value as Props['defaultOrder'])\n }, [])\n\n const classNames = useMemo(() => {\n const { body, select, footer } = classNameGenerator()\n\n return {\n body: body(),\n select: select(),\n footer: footer(),\n }\n }, [])\n\n return {\n onChangeSortOrderRadio,\n labels: {\n triggerLabel,\n ...decorated,\n },\n handler: { handleApply, handleChange },\n innerValues: { innerFields, innerSelectedField, innerCheckedOrder },\n SortIcon,\n classNames,\n }\n}\n"],"names":["tv"],"mappings":"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"}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
|
|
3
3
|
import { memo, useState, useCallback, useMemo } from 'react';
|
|
4
|
-
import './../../vendor/.pnpm/react-pdf@9.2.1_@types_react@18.3.
|
|
4
|
+
import './../../vendor/.pnpm/react-pdf@9.2.1_@types_react@18.3.24_react-dom@19.1.1_react@19.1.1__react@19.1.1/vendor/react-pdf/dist/esm/index.js';
|
|
5
5
|
import { ReactPDFStyle } from './generatedReactPDFStyle.js';
|
|
6
|
-
import Document from './../../vendor/.pnpm/react-pdf@9.2.1_@types_react@18.3.
|
|
7
|
-
import Page from './../../vendor/.pnpm/react-pdf@9.2.1_@types_react@18.3.
|
|
6
|
+
import Document from './../../vendor/.pnpm/react-pdf@9.2.1_@types_react@18.3.24_react-dom@19.1.1_react@19.1.1__react@19.1.1/vendor/react-pdf/dist/esm/Document.js';
|
|
7
|
+
import Page from './../../vendor/.pnpm/react-pdf@9.2.1_@types_react@18.3.24_react-dom@19.1.1_react@19.1.1__react@19.1.1/vendor/react-pdf/dist/esm/Page.js';
|
|
8
8
|
import { version as __webpack_exports__version, GlobalWorkerOptions as __webpack_exports__GlobalWorkerOptions } from './../../vendor/.pnpm/pdfjs-dist@4.8.69/vendor/pdfjs-dist/build/pdf.js';
|
|
9
9
|
|
|
10
10
|
if (typeof window !== 'undefined') {
|
|
@@ -1,12 +1,24 @@
|
|
|
1
1
|
import { useState, useCallback } from 'react';
|
|
2
2
|
|
|
3
3
|
const useTableHeadCellCount = () => {
|
|
4
|
-
const [count, setCount] = useState(
|
|
4
|
+
const [count, setCount] = useState(0);
|
|
5
5
|
const countHeadCellRef = useCallback((node) => {
|
|
6
6
|
if (node !== null) {
|
|
7
7
|
const parentTable = node.closest('table');
|
|
8
|
-
const
|
|
9
|
-
|
|
8
|
+
const rows = parentTable?.querySelectorAll('thead > tr');
|
|
9
|
+
if (!rows?.length) {
|
|
10
|
+
setCount(0);
|
|
11
|
+
return;
|
|
12
|
+
}
|
|
13
|
+
// BulkActionRowのようにthを含まない行が存在する可能性があるため、thを含む最初の行を探す
|
|
14
|
+
for (let i = 0; i < rows.length; i++) {
|
|
15
|
+
const thList = Array.from(rows[i].querySelectorAll(':scope > th'));
|
|
16
|
+
if (thList.length > 0) {
|
|
17
|
+
const totalColSpan = thList.reduce((sum, th) => sum + (th.colSpan || 1), 0);
|
|
18
|
+
setCount(totalColSpan);
|
|
19
|
+
return;
|
|
20
|
+
}
|
|
21
|
+
}
|
|
10
22
|
}
|
|
11
23
|
}, []);
|
|
12
24
|
return { count, countHeadCellRef };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTableHeadCellCount.js","sources":["../../../src/components/Table/useTableHeadCellCount.ts"],"sourcesContent":["import { useCallback, useState } from 'react'\n\nexport const useTableHeadCellCount = <T extends HTMLElement>() => {\n const [count, setCount] = useState(
|
|
1
|
+
{"version":3,"file":"useTableHeadCellCount.js","sources":["../../../src/components/Table/useTableHeadCellCount.ts"],"sourcesContent":["import { useCallback, useState } from 'react'\n\nexport const useTableHeadCellCount = <T extends HTMLElement>() => {\n const [count, setCount] = useState(0)\n\n const countHeadCellRef = useCallback((node: T) => {\n if (node !== null) {\n const parentTable = node.closest('table')\n const rows = parentTable?.querySelectorAll('thead > tr')\n\n if (!rows?.length) {\n setCount(0)\n return\n }\n\n // BulkActionRowのようにthを含まない行が存在する可能性があるため、thを含む最初の行を探す\n for (let i = 0; i < rows.length; i++) {\n const thList = Array.from(rows[i].querySelectorAll<HTMLTableCellElement>(':scope > th'))\n if (thList.length > 0) {\n const totalColSpan = thList.reduce((sum, th) => sum + (th.colSpan || 1), 0)\n setCount(totalColSpan)\n return\n }\n }\n }\n }, [])\n\n return { count, countHeadCellRef }\n}\n"],"names":[],"mappings":";;AAEO,MAAM,qBAAqB,GAAG,MAA4B;IAC/D,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC;AAErC,IAAA,MAAM,gBAAgB,GAAG,WAAW,CAAC,CAAC,IAAO,KAAI;AAC/C,QAAA,IAAI,IAAI,KAAK,IAAI,EAAE;YACjB,MAAM,WAAW,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC;YACzC,MAAM,IAAI,GAAG,WAAW,EAAE,gBAAgB,CAAC,YAAY,CAAC;AAExD,YAAA,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE;gBACjB,QAAQ,CAAC,CAAC,CAAC;gBACX;YACF;;AAGA,YAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;AACpC,gBAAA,MAAM,MAAM,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,gBAAgB,CAAuB,aAAa,CAAC,CAAC;AACxF,gBAAA,IAAI,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE;oBACrB,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,EAAE,KAAK,GAAG,IAAI,EAAE,CAAC,OAAO,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC;oBAC3E,QAAQ,CAAC,YAAY,CAAC;oBACtB;gBACF;YACF;QACF;IACF,CAAC,EAAE,EAAE,CAAC;AAEN,IAAA,OAAO,EAAE,KAAK,EAAE,gBAAgB,EAAE;AACpC;;;;"}
|
|
@@ -15,6 +15,9 @@ type Props<T extends ElementType> = VariantProps<typeof classNameGenerator> & {
|
|
|
15
15
|
type TextLinkComponent = <T extends ElementType = 'a'>(props: Props<T> & ElementProps<T> & ElementRefProps<T>) => ReturnType<FC>;
|
|
16
16
|
declare const classNameGenerator: import("tailwind-variants").TVReturnType<{
|
|
17
17
|
size: {
|
|
18
|
+
XS: {
|
|
19
|
+
anchor: string;
|
|
20
|
+
};
|
|
18
21
|
S: {
|
|
19
22
|
anchor: string;
|
|
20
23
|
};
|
|
@@ -28,6 +31,9 @@ declare const classNameGenerator: import("tailwind-variants").TVReturnType<{
|
|
|
28
31
|
suffixWrapper: string;
|
|
29
32
|
}, undefined, import("tailwind-variants/dist/config.js").TVConfig<{
|
|
30
33
|
size: {
|
|
34
|
+
XS: {
|
|
35
|
+
anchor: string;
|
|
36
|
+
};
|
|
31
37
|
S: {
|
|
32
38
|
anchor: string;
|
|
33
39
|
};
|
|
@@ -37,6 +43,9 @@ declare const classNameGenerator: import("tailwind-variants").TVReturnType<{
|
|
|
37
43
|
};
|
|
38
44
|
}, {
|
|
39
45
|
size: {
|
|
46
|
+
XS: {
|
|
47
|
+
anchor: string;
|
|
48
|
+
};
|
|
40
49
|
S: {
|
|
41
50
|
anchor: string;
|
|
42
51
|
};
|
|
@@ -46,6 +55,9 @@ declare const classNameGenerator: import("tailwind-variants").TVReturnType<{
|
|
|
46
55
|
};
|
|
47
56
|
}>, {
|
|
48
57
|
size: {
|
|
58
|
+
XS: {
|
|
59
|
+
anchor: string;
|
|
60
|
+
};
|
|
49
61
|
S: {
|
|
50
62
|
anchor: string;
|
|
51
63
|
};
|
|
@@ -59,6 +71,9 @@ declare const classNameGenerator: import("tailwind-variants").TVReturnType<{
|
|
|
59
71
|
suffixWrapper: string;
|
|
60
72
|
}, import("tailwind-variants").TVReturnType<{
|
|
61
73
|
size: {
|
|
74
|
+
XS: {
|
|
75
|
+
anchor: string;
|
|
76
|
+
};
|
|
62
77
|
S: {
|
|
63
78
|
anchor: string;
|
|
64
79
|
};
|
|
@@ -72,6 +87,9 @@ declare const classNameGenerator: import("tailwind-variants").TVReturnType<{
|
|
|
72
87
|
suffixWrapper: string;
|
|
73
88
|
}, undefined, import("tailwind-variants/dist/config.js").TVConfig<{
|
|
74
89
|
size: {
|
|
90
|
+
XS: {
|
|
91
|
+
anchor: string;
|
|
92
|
+
};
|
|
75
93
|
S: {
|
|
76
94
|
anchor: string;
|
|
77
95
|
};
|
|
@@ -81,6 +99,9 @@ declare const classNameGenerator: import("tailwind-variants").TVReturnType<{
|
|
|
81
99
|
};
|
|
82
100
|
}, {
|
|
83
101
|
size: {
|
|
102
|
+
XS: {
|
|
103
|
+
anchor: string;
|
|
104
|
+
};
|
|
84
105
|
S: {
|
|
85
106
|
anchor: string;
|
|
86
107
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextLink.js","sources":["../../../src/components/TextLink/TextLink.tsx"],"sourcesContent":["import {\n type ComponentPropsWithoutRef,\n type ElementType,\n type FC,\n type MouseEvent,\n type PropsWithoutRef,\n type ReactNode,\n type Ref,\n forwardRef,\n memo,\n useMemo,\n} from 'react'\nimport { type VariantProps, tv } from 'tailwind-variants'\n\nimport { OpenInNewTabIcon } from './OpenInNewTabIcon'\n\nimport type { ElementRef, ElementRefProps } from '../../types'\n\ntype ElementProps<T extends ElementType> = Omit<\n ComponentPropsWithoutRef<T>,\n (keyof Props<T> & ElementRefProps<T>) | 'color'\n>\n\ntype Props<T extends ElementType> = VariantProps<typeof classNameGenerator> & {\n /** リンクをクリックした時に発火するコールバック関数 */\n onClick?: (e: MouseEvent) => void\n /** テキストの前に表示するアイコン */\n prefix?: ReactNode\n /** テキストの後ろに表示するアイコン */\n suffix?: ReactNode\n /** TextLinkを利用しつつnext/linkなどと併用する場合に指定する */\n elementAs?: T\n}\n\ntype TextLinkComponent = <T extends ElementType = 'a'>(\n props: Props<T> & ElementProps<T> & ElementRefProps<T>,\n) => ReturnType<FC>\n\nconst classNameGenerator = tv({\n slots: {\n anchor: [\n 'shr-text-link shr-no-underline shr-shadow-underline',\n 'forced-colors:shr-underline',\n '[&:not([href])]:shr-shadow-none [&:not([href])]:forced-colors:shr-no-underline',\n '[.smarthr-ui-Th_&]:shr-text-link-darken',\n ],\n prefixWrapper: 'shr-me-0.25 shr-align-middle',\n suffixWrapper: 'shr-ms-0.25 shr-align-middle',\n },\n variants: {\n size: {\n S: {\n anchor: 'shr-text-sm',\n },\n M: {\n anchor: 'shr-text-base',\n },\n },\n },\n})\nconst { anchor, prefixWrapper, suffixWrapper } = classNameGenerator()\nconst prefixWrapperClassName = prefixWrapper()\nconst suffixWrapperClassName = suffixWrapper()\n\nconst ActualTextLink: TextLinkComponent = forwardRef(\n <T extends ElementType = 'a'>(\n {\n elementAs,\n href,\n target,\n rel,\n onClick,\n children,\n prefix,\n suffix,\n className,\n size,\n ...others\n }: PropsWithoutRef<Props<T>> & ElementProps<T>,\n ref: Ref<ElementRef<T>>,\n ) => {\n const Anchor = elementAs || 'a'\n const actualSuffix = useMemo(() => {\n if (target === '_blank' && suffix === undefined) {\n return <OpenInNewTabIcon />\n }\n\n return suffix\n }, [suffix, target])\n const actualHref = useMemo(() => {\n if (href) {\n return href\n }\n\n if (onClick) {\n return ''\n }\n\n return undefined\n }, [href, onClick])\n const actualRel = useMemo(\n () => (rel === undefined && target === '_blank' ? 'noopener noreferrer' : rel),\n [rel, target],\n )\n const anchorClassName = useMemo(() => anchor({ size, className }), [size, className])\n\n const actualOnClick = useMemo(() => {\n if (!onClick) {\n return undefined\n }\n\n if (href) {\n return onClick\n }\n\n return (e: MouseEvent) => {\n e.preventDefault()\n onClick(e)\n }\n }, [onClick, href])\n\n return (\n <Anchor\n {...others}\n ref={ref}\n href={actualHref}\n target={target}\n rel={actualRel}\n onClick={actualOnClick}\n className={anchorClassName}\n >\n {prefix && <span className={prefixWrapperClassName}>{prefix}</span>}\n {children}\n {actualSuffix && <span className={suffixWrapperClassName}>{actualSuffix}</span>}\n </Anchor>\n )\n },\n)\n\nexport const TextLink = memo(ActualTextLink) as typeof ActualTextLink\n"],"names":["tv","_jsx","_jsxs"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"TextLink.js","sources":["../../../src/components/TextLink/TextLink.tsx"],"sourcesContent":["import {\n type ComponentPropsWithoutRef,\n type ElementType,\n type FC,\n type MouseEvent,\n type PropsWithoutRef,\n type ReactNode,\n type Ref,\n forwardRef,\n memo,\n useMemo,\n} from 'react'\nimport { type VariantProps, tv } from 'tailwind-variants'\n\nimport { OpenInNewTabIcon } from './OpenInNewTabIcon'\n\nimport type { ElementRef, ElementRefProps } from '../../types'\n\ntype ElementProps<T extends ElementType> = Omit<\n ComponentPropsWithoutRef<T>,\n (keyof Props<T> & ElementRefProps<T>) | 'color'\n>\n\ntype Props<T extends ElementType> = VariantProps<typeof classNameGenerator> & {\n /** リンクをクリックした時に発火するコールバック関数 */\n onClick?: (e: MouseEvent) => void\n /** テキストの前に表示するアイコン */\n prefix?: ReactNode\n /** テキストの後ろに表示するアイコン */\n suffix?: ReactNode\n /** TextLinkを利用しつつnext/linkなどと併用する場合に指定する */\n elementAs?: T\n}\n\ntype TextLinkComponent = <T extends ElementType = 'a'>(\n props: Props<T> & ElementProps<T> & ElementRefProps<T>,\n) => ReturnType<FC>\n\nconst classNameGenerator = tv({\n slots: {\n anchor: [\n 'shr-text-link shr-no-underline shr-shadow-underline',\n 'forced-colors:shr-underline',\n '[&:not([href])]:shr-shadow-none [&:not([href])]:forced-colors:shr-no-underline',\n '[.smarthr-ui-Th_&]:shr-text-link-darken',\n ],\n prefixWrapper: 'shr-me-0.25 shr-align-middle',\n suffixWrapper: 'shr-ms-0.25 shr-align-middle',\n },\n variants: {\n size: {\n XS: {\n anchor: 'shr-text-xs',\n },\n S: {\n anchor: 'shr-text-sm',\n },\n M: {\n anchor: 'shr-text-base',\n },\n },\n },\n})\nconst { anchor, prefixWrapper, suffixWrapper } = classNameGenerator()\nconst prefixWrapperClassName = prefixWrapper()\nconst suffixWrapperClassName = suffixWrapper()\n\nconst ActualTextLink: TextLinkComponent = forwardRef(\n <T extends ElementType = 'a'>(\n {\n elementAs,\n href,\n target,\n rel,\n onClick,\n children,\n prefix,\n suffix,\n className,\n size,\n ...others\n }: PropsWithoutRef<Props<T>> & ElementProps<T>,\n ref: Ref<ElementRef<T>>,\n ) => {\n const Anchor = elementAs || 'a'\n const actualSuffix = useMemo(() => {\n if (target === '_blank' && suffix === undefined) {\n return <OpenInNewTabIcon />\n }\n\n return suffix\n }, [suffix, target])\n const actualHref = useMemo(() => {\n if (href) {\n return href\n }\n\n if (onClick) {\n return ''\n }\n\n return undefined\n }, [href, onClick])\n const actualRel = useMemo(\n () => (rel === undefined && target === '_blank' ? 'noopener noreferrer' : rel),\n [rel, target],\n )\n const anchorClassName = useMemo(() => anchor({ size, className }), [size, className])\n\n const actualOnClick = useMemo(() => {\n if (!onClick) {\n return undefined\n }\n\n if (href) {\n return onClick\n }\n\n return (e: MouseEvent) => {\n e.preventDefault()\n onClick(e)\n }\n }, [onClick, href])\n\n return (\n <Anchor\n {...others}\n ref={ref}\n href={actualHref}\n target={target}\n rel={actualRel}\n onClick={actualOnClick}\n className={anchorClassName}\n >\n {prefix && <span className={prefixWrapperClassName}>{prefix}</span>}\n {children}\n {actualSuffix && <span className={suffixWrapperClassName}>{actualSuffix}</span>}\n </Anchor>\n )\n },\n)\n\nexport const TextLink = memo(ActualTextLink) as typeof ActualTextLink\n"],"names":["tv","_jsx","_jsxs"],"mappings":"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"}
|
|
@@ -2,9 +2,11 @@ import { type FC, type PropsWithChildren } from 'react';
|
|
|
2
2
|
import { type Locale } from './localeMap';
|
|
3
3
|
declare const allLocaleKeys: Locale[];
|
|
4
4
|
type Props<AvailableLocales extends Locale[] = typeof allLocaleKeys> = PropsWithChildren<{
|
|
5
|
-
locale:
|
|
6
|
-
availableLocales?:
|
|
5
|
+
locale: string;
|
|
6
|
+
availableLocales?: string[];
|
|
7
|
+
_not_used_locale?: AvailableLocales[number];
|
|
8
|
+
_not_used_availableLocales?: AvailableLocales;
|
|
7
9
|
}>;
|
|
8
|
-
export declare const useAvailableLocales: () => ("pt" | "ja" | "
|
|
10
|
+
export declare const useAvailableLocales: () => ("pt" | "ja" | "en-us" | "id-id" | "vi" | "ko" | "zh-cn" | "zh-tw" | "ja-easy")[];
|
|
9
11
|
export declare const IntlProvider: <AvailableLocales extends Locale[] = typeof allLocaleKeys>({ availableLocales, locale, children, }: Props<AvailableLocales>) => ReturnType<FC>;
|
|
10
12
|
export {};
|
package/esm/intl/IntlProvider.js
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import { jsx } from 'react/jsx-runtime';
|
|
3
3
|
import { createContext, useContext, useMemo } from 'react';
|
|
4
4
|
import { IntlContext, IntlProvider as IntlProvider$1 } from 'react-intl';
|
|
5
|
-
import { localeMap } from './localeMap.js';
|
|
5
|
+
import { localeMap, convertLang } from './localeMap.js';
|
|
6
6
|
import * as intl_locales_index from './locales/index.js';
|
|
7
7
|
|
|
8
8
|
// Object.keys は常に string[] を返却するが、locales は実行時に変更されないため、as 型キャストを使用することは自明に安全なので使用している
|
|
@@ -10,10 +10,12 @@ const allLocaleKeys = Object.keys(localeMap);
|
|
|
10
10
|
const AvailableLocalesContext = createContext(allLocaleKeys);
|
|
11
11
|
const useAvailableLocales = () => useContext(AvailableLocalesContext);
|
|
12
12
|
const IntlProvider = ({ availableLocales, locale, children, }) => {
|
|
13
|
+
const convertedLocale = convertLang(locale);
|
|
14
|
+
const convertedAvailableLocales = availableLocales?.map(convertLang);
|
|
13
15
|
// プロダクト側でIntlProviderを使っている場合、プロダクト側のmessagesとマージして提供するためにContextから取得している
|
|
14
16
|
const intl = useContext(IntlContext);
|
|
15
|
-
const actualMessages = useMemo(() => ({ ...intl?.messages, ...intl_locales_index[
|
|
16
|
-
return (jsx(AvailableLocalesContext.Provider, { value:
|
|
17
|
+
const actualMessages = useMemo(() => ({ ...intl?.messages, ...intl_locales_index[convertedLocale] }), [intl, convertedLocale]);
|
|
18
|
+
return (jsx(AvailableLocalesContext.Provider, { value: convertedAvailableLocales ?? allLocaleKeys, children: jsx(IntlProvider$1, { locale: convertedLocale, messages: actualMessages, children: children }) }));
|
|
17
19
|
};
|
|
18
20
|
|
|
19
21
|
export { IntlProvider, useAvailableLocales };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IntlProvider.js","sources":["../../src/intl/IntlProvider.tsx"],"sourcesContent":["'use client'\n\nimport { type FC, type PropsWithChildren, createContext, useContext, useMemo } from 'react'\nimport { IntlContext, IntlProvider as ReactIntlProvider } from 'react-intl'\n\nimport { type Locale, localeMap } from './localeMap'\nimport * as locales from './locales'\n\n// Object.keys は常に string[] を返却するが、locales は実行時に変更されないため、as 型キャストを使用することは自明に安全なので使用している\nconst allLocaleKeys = Object.keys(localeMap) as Locale[]\n\ntype Props<AvailableLocales extends Locale[] = typeof allLocaleKeys> = PropsWithChildren<{\n locale: AvailableLocales[number]\n
|
|
1
|
+
{"version":3,"file":"IntlProvider.js","sources":["../../src/intl/IntlProvider.tsx"],"sourcesContent":["'use client'\n\nimport { type FC, type PropsWithChildren, createContext, useContext, useMemo } from 'react'\nimport { IntlContext, IntlProvider as ReactIntlProvider } from 'react-intl'\n\nimport { type Locale, convertLang, localeMap } from './localeMap'\nimport * as locales from './locales'\n\n// Object.keys は常に string[] を返却するが、locales は実行時に変更されないため、as 型キャストを使用することは自明に安全なので使用している\nconst allLocaleKeys = Object.keys(localeMap) as Locale[]\n\ntype Props<AvailableLocales extends Locale[] = typeof allLocaleKeys> = PropsWithChildren<{\n locale: string\n availableLocales?: string[]\n // ↑ プロダクト側と smarthr-ui の言語コードの揺れに対応するため、一旦 string, string[] で受け取れるようにする\n // ↓ 本来は AvailableLocales[number], AvailableLocales で受け取りたいが、プロダクトと smarthr-ui での言語コード統一が終わるまで使えない\n _not_used_locale?: AvailableLocales[number]\n _not_used_availableLocales?: AvailableLocales\n}>\n\nconst AvailableLocalesContext = createContext<Locale[]>(allLocaleKeys)\n\nexport const useAvailableLocales = () => useContext(AvailableLocalesContext)\n\nexport const IntlProvider = <AvailableLocales extends Locale[] = typeof allLocaleKeys>({\n availableLocales,\n locale,\n children,\n}: Props<AvailableLocales>): ReturnType<FC> => {\n const convertedLocale = convertLang(locale)\n const convertedAvailableLocales = availableLocales?.map(convertLang)\n\n // プロダクト側でIntlProviderを使っている場合、プロダクト側のmessagesとマージして提供するためにContextから取得している\n const intl = useContext(IntlContext)\n const actualMessages = useMemo(\n () => ({ ...intl?.messages, ...locales[convertedLocale] }),\n [intl, convertedLocale],\n )\n\n return (\n <AvailableLocalesContext.Provider value={convertedAvailableLocales ?? allLocaleKeys}>\n <ReactIntlProvider locale={convertedLocale} messages={actualMessages}>\n {children}\n </ReactIntlProvider>\n </AvailableLocalesContext.Provider>\n )\n}\n"],"names":[],"mappings":";;;;;;;AAQA;AACA;AAWA;AAEO;AAEA;AAKL;;;AAIA;AACA;;AAYF;;"}
|
package/esm/intl/localeMap.d.ts
CHANGED
package/esm/intl/localeMap.js
CHANGED
|
@@ -1,14 +1,59 @@
|
|
|
1
|
+
/*
|
|
2
|
+
localeMap は LanguageSwitcher で言語切替をするためにも使用されます。そのため、このオブジェクトの並び順が言語切替 UI の並び順にも反映されます。
|
|
3
|
+
配置ロジック(新しい言語追加時の判断軸)
|
|
4
|
+
・認知負荷を減らす:利用頻度を考慮し、ユーザーが直感的に探せるようにする。
|
|
5
|
+
・見栄えを考慮:アルファベット系・漢字系といった系統を意識して並べ、視覚的にも整理する。
|
|
6
|
+
|
|
7
|
+
下記の設計を基準にすれば、新しい言語を追加する際も既存の分類に沿って挿入するだけで済み、秩序を維持できる。
|
|
8
|
+
1. 日本語:デフォルト言語のため、常に最上位。
|
|
9
|
+
2. 英語:i18n文脈における事実上のデフォルト言語として、常に第二位。
|
|
10
|
+
3. 他のアルファベット系言語(インドネシア語、ポルトガル語、ベトナム語):常に中央に配置し、アルファベット順で整列。
|
|
11
|
+
4. 韓国語:アルファベット系と漢字系の橋渡し(トランジション)として配置。
|
|
12
|
+
5. 中国語(簡体字・繁体字):ユーザー数が多く安定している漢字系言語であるため、常に後半にまとめて配置。
|
|
13
|
+
6. やさしい日本語:日本語の派生であり、補助的な言語という位置づけを示すため、常に最後に配置。
|
|
14
|
+
*/
|
|
1
15
|
const localeMap = {
|
|
2
16
|
ja: '日本語',
|
|
3
|
-
'ja-easy': 'やさしい日本語',
|
|
4
17
|
'en-us': 'English',
|
|
5
|
-
|
|
18
|
+
'id-id': 'Bahasa Indonesia',
|
|
6
19
|
pt: 'Português',
|
|
7
20
|
vi: 'Tiếng Việt',
|
|
21
|
+
ko: '한국어',
|
|
8
22
|
'zh-cn': '简体中文',
|
|
9
23
|
'zh-tw': '繁體中文',
|
|
10
|
-
'
|
|
24
|
+
'ja-easy': 'やさしい日本語',
|
|
25
|
+
};
|
|
26
|
+
// 渡される言語の揺れを許容して smarthr-ui で使っている言語コードに変換する
|
|
27
|
+
const convertLang = (rawLang) => {
|
|
28
|
+
const lang = rawLang.toLowerCase().replace(/_/g, '-');
|
|
29
|
+
// 日本語とやさしい日本語の対応
|
|
30
|
+
if (lang.startsWith('ja')) {
|
|
31
|
+
if (lang.includes('-easy')) {
|
|
32
|
+
return 'ja-easy';
|
|
33
|
+
}
|
|
34
|
+
return 'ja';
|
|
35
|
+
}
|
|
36
|
+
// 简体中文と繁體中文
|
|
37
|
+
if (lang.startsWith('zh')) {
|
|
38
|
+
const regionOrScript = lang.split('-')[1] ?? '';
|
|
39
|
+
if (['tw', 'hant'].includes(regionOrScript)) {
|
|
40
|
+
return 'zh-tw';
|
|
41
|
+
}
|
|
42
|
+
return 'zh-cn';
|
|
43
|
+
}
|
|
44
|
+
if (lang.startsWith('en'))
|
|
45
|
+
return 'en-us'; // 英語
|
|
46
|
+
if (lang.startsWith('pt'))
|
|
47
|
+
return 'pt'; // ポルトガル語
|
|
48
|
+
if (lang.startsWith('vi'))
|
|
49
|
+
return 'vi'; // ベトナム語
|
|
50
|
+
if (lang.startsWith('ko'))
|
|
51
|
+
return 'ko'; // 韓国語
|
|
52
|
+
if (lang.startsWith('id'))
|
|
53
|
+
return 'id-id'; // インドネシア語
|
|
54
|
+
// 何にも一致しない場合はフォールバックとして 'ja' を返す
|
|
55
|
+
return 'ja';
|
|
11
56
|
};
|
|
12
57
|
|
|
13
|
-
export { localeMap };
|
|
58
|
+
export { convertLang, localeMap };
|
|
14
59
|
//# sourceMappingURL=localeMap.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"localeMap.js","sources":["../../src/intl/localeMap.ts"],"sourcesContent":["import type * as locales from './locales'\n\nexport type Locale = keyof typeof locales\n\nexport const localeMap: Record<Locale, string> = {\n ja: '日本語',\n '
|
|
1
|
+
{"version":3,"file":"localeMap.js","sources":["../../src/intl/localeMap.ts"],"sourcesContent":["import type * as locales from './locales'\n\nexport type Locale = keyof typeof locales\n\n/*\n localeMap は LanguageSwitcher で言語切替をするためにも使用されます。そのため、このオブジェクトの並び順が言語切替 UI の並び順にも反映されます。\n 配置ロジック(新しい言語追加時の判断軸)\n ・認知負荷を減らす:利用頻度を考慮し、ユーザーが直感的に探せるようにする。\n ・見栄えを考慮:アルファベット系・漢字系といった系統を意識して並べ、視覚的にも整理する。\n\n 下記の設計を基準にすれば、新しい言語を追加する際も既存の分類に沿って挿入するだけで済み、秩序を維持できる。\n 1. 日本語:デフォルト言語のため、常に最上位。\n 2. 英語:i18n文脈における事実上のデフォルト言語として、常に第二位。\n 3. 他のアルファベット系言語(インドネシア語、ポルトガル語、ベトナム語):常に中央に配置し、アルファベット順で整列。\n 4. 韓国語:アルファベット系と漢字系の橋渡し(トランジション)として配置。\n 5. 中国語(簡体字・繁体字):ユーザー数が多く安定している漢字系言語であるため、常に後半にまとめて配置。\n 6. やさしい日本語:日本語の派生であり、補助的な言語という位置づけを示すため、常に最後に配置。\n*/\nexport const localeMap: Record<Locale, string> = {\n ja: '日本語',\n 'en-us': 'English',\n 'id-id': 'Bahasa Indonesia',\n pt: 'Português',\n vi: 'Tiếng Việt',\n ko: '한국어',\n 'zh-cn': '简体中文',\n 'zh-tw': '繁體中文',\n 'ja-easy': 'やさしい日本語',\n}\n\n// 渡される言語の揺れを許容して smarthr-ui で使っている言語コードに変換する\nexport const convertLang = (rawLang: string): keyof typeof locales => {\n const lang = rawLang.toLowerCase().replace(/_/g, '-')\n\n // 日本語とやさしい日本語の対応\n if (lang.startsWith('ja')) {\n if (lang.includes('-easy')) {\n return 'ja-easy'\n }\n\n return 'ja'\n }\n\n // 简体中文と繁體中文\n if (lang.startsWith('zh')) {\n const regionOrScript = lang.split('-')[1] ?? ''\n\n if (['tw', 'hant'].includes(regionOrScript)) {\n return 'zh-tw'\n }\n\n return 'zh-cn'\n }\n\n if (lang.startsWith('en')) return 'en-us' // 英語\n if (lang.startsWith('pt')) return 'pt' // ポルトガル語\n if (lang.startsWith('vi')) return 'vi' // ベトナム語\n if (lang.startsWith('ko')) return 'ko' // 韓国語\n if (lang.startsWith('id')) return 'id-id' // インドネシア語\n\n // 何にも一致しない場合はフォールバックとして 'ja' を返す\n return 'ja'\n}\n"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;AAaE;AACK,MAAM,SAAS,GAA2B;AAC/C,IAAA,EAAE,EAAE,KAAK;AACT,IAAA,OAAO,EAAE,SAAS;AAClB,IAAA,OAAO,EAAE,kBAAkB;AAC3B,IAAA,EAAE,EAAE,WAAW;AACf,IAAA,EAAE,EAAE,YAAY;AAChB,IAAA,EAAE,EAAE,KAAK;AACT,IAAA,OAAO,EAAE,MAAM;AACf,IAAA,OAAO,EAAE,MAAM;AACf,IAAA,SAAS,EAAE,SAAS;;AAGtB;AACO,MAAM,WAAW,GAAG,CAAC,OAAe,KAA0B;AACnE,IAAA,MAAM,IAAI,GAAG,OAAO,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,GAAG,CAAC;;AAGrD,IAAA,IAAI,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE;AACzB,QAAA,IAAI,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE;AAC1B,YAAA,OAAO,SAAS;QAClB;AAEA,QAAA,OAAO,IAAI;IACb;;AAGA,IAAA,IAAI,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE;AACzB,QAAA,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE;QAE/C,IAAI,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC,QAAQ,CAAC,cAAc,CAAC,EAAE;AAC3C,YAAA,OAAO,OAAO;QAChB;AAEA,QAAA,OAAO,OAAO;IAChB;AAEA,IAAA,IAAI,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;QAAE,OAAO,OAAO,CAAA;AACzC,IAAA,IAAI,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;QAAE,OAAO,IAAI,CAAA;AACtC,IAAA,IAAI,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;QAAE,OAAO,IAAI,CAAA;AACtC,IAAA,IAAI,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;QAAE,OAAO,IAAI,CAAA;AACtC,IAAA,IAAI,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;QAAE,OAAO,OAAO,CAAA;;AAGzC,IAAA,OAAO,IAAI;AACb;;;;"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
export { locale as ja } from './ja';
|
|
2
|
-
export { locale as 'ja-easy' } from './ja_easy';
|
|
3
2
|
export { locale as 'en-us' } from './en_us';
|
|
4
|
-
export { locale as
|
|
3
|
+
export { locale as 'id-id' } from './id_id';
|
|
5
4
|
export { locale as pt } from './pt_br';
|
|
6
5
|
export { locale as vi } from './vi_vn';
|
|
6
|
+
export { locale as ko } from './ko_kr';
|
|
7
7
|
export { locale as 'zh-cn' } from './zh_hans_cn';
|
|
8
8
|
export { locale as 'zh-tw' } from './zh_hant_tw';
|
|
9
|
-
export { locale as '
|
|
9
|
+
export { locale as 'ja-easy' } from './ja_easy';
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
export { locale as ja } from './ja.js';
|
|
2
|
-
export { locale as "ja-easy" } from './ja_easy.js';
|
|
3
2
|
export { locale as "en-us" } from './en_us.js';
|
|
4
|
-
export { locale as
|
|
3
|
+
export { locale as "id-id" } from './id_id.js';
|
|
5
4
|
export { locale as pt } from './pt_br.js';
|
|
6
5
|
export { locale as vi } from './vi_vn.js';
|
|
6
|
+
export { locale as ko } from './ko_kr.js';
|
|
7
7
|
export { locale as "zh-cn" } from './zh_hans_cn.js';
|
|
8
8
|
export { locale as "zh-tw" } from './zh_hant_tw.js';
|
|
9
|
-
export { locale as "
|
|
9
|
+
export { locale as "ja-easy" } from './ja_easy.js';
|
|
10
10
|
//# sourceMappingURL=index.js.map
|