npm - smarthr-ui - Versions diffs - 94.0.0 → 95.0.1 - Mend

smarthr-ui 94.0.0 → 95.0.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.

Files changed (170) hide show

package/lib/components/AppHeader/components/mobile/MenuDialog.cjs CHANGED Viewed

@@ -14,8 +14,6 @@ require('../../../Button/UnstyledButton.cjs');
 require('../../../Dialog/DialogContentInner.cjs');
 require('react-dom');
 require('../../../Dialog/ControlledMessageDialog/MessageDialogContentInner.cjs');
-require('../../../Dialog/ControlledActionDialog/ActionDialogContentInner.cjs');
-require('../../../Dialog/ControlledFormDialog/FormDialogContentInner.cjs');
 require('../../../Layout/Stack/Stack.cjs');
 var components_Layout_Cluster_Cluster = require('../../../Layout/Cluster/Cluster.cjs');
 require('../../../Layout/Reel/Reel.cjs');
@@ -30,6 +28,8 @@ require('../../../Dialog/DialogContentResponseStatusMessage.cjs');
 require('../../../Dialog/DialogHeading.cjs');
 require('../../../Dialog/dialogInnerStyle.cjs');
 require('../../../Dialog/ControlledStepFormDialog/StepFormDialogProvider.cjs');
+require('../../../Dialog/ControlledFormDialog/FormDialogContentInner.cjs');
+require('../../../Dialog/ControlledActionDialog/ActionDialogContentInner.cjs');
 require('../../../Dialog/DialogWrapper.cjs');
 require('../../../Dialog/DialogContent.cjs');
 require('../../../Dialog/ModelessDialog/ModelessDialog.cjs');

package/lib/components/AppHeader/components/mobile/MenuDialog.js CHANGED Viewed

@@ -12,8 +12,6 @@ import '../../../Button/UnstyledButton.js';
 import '../../../Dialog/DialogContentInner.js';
 import 'react-dom';
 import '../../../Dialog/ControlledMessageDialog/MessageDialogContentInner.js';
-import '../../../Dialog/ControlledActionDialog/ActionDialogContentInner.js';
-import '../../../Dialog/ControlledFormDialog/FormDialogContentInner.js';
 import '../../../Layout/Stack/Stack.js';
 import { Cluster } from '../../../Layout/Cluster/Cluster.js';
 import '../../../Layout/Reel/Reel.js';
@@ -28,6 +26,8 @@ import '../../../Dialog/DialogContentResponseStatusMessage.js';
 import '../../../Dialog/DialogHeading.js';
 import '../../../Dialog/dialogInnerStyle.js';
 import '../../../Dialog/ControlledStepFormDialog/StepFormDialogProvider.js';
+import '../../../Dialog/ControlledFormDialog/FormDialogContentInner.js';
+import '../../../Dialog/ControlledActionDialog/ActionDialogContentInner.js';
 import '../../../Dialog/DialogWrapper.js';
 import '../../../Dialog/DialogContent.js';
 import '../../../Dialog/ModelessDialog/ModelessDialog.js';

package/lib/components/AppHeader/components/mobile/UserInfo.cjs CHANGED Viewed

@@ -15,8 +15,6 @@ var components_Dialog_Dialog = require('../../../Dialog/Dialog.cjs');
 require('../../../Dialog/DialogContentInner.cjs');
 require('react-dom');
 require('../../../Dialog/ControlledMessageDialog/MessageDialogContentInner.cjs');
-require('../../../Dialog/ControlledActionDialog/ActionDialogContentInner.cjs');
-require('../../../Dialog/ControlledFormDialog/FormDialogContentInner.cjs');
 require('../../../Layout/Stack/Stack.cjs');
 require('../../../Layout/Cluster/Cluster.cjs');
 require('../../../Layout/Reel/Reel.cjs');
@@ -31,6 +29,8 @@ require('../../../Dialog/DialogContentResponseStatusMessage.cjs');
 require('../../../Dialog/DialogHeading.cjs');
 require('../../../Dialog/dialogInnerStyle.cjs');
 require('../../../Dialog/ControlledStepFormDialog/StepFormDialogProvider.cjs');
+require('../../../Dialog/ControlledFormDialog/FormDialogContentInner.cjs');
+require('../../../Dialog/ControlledActionDialog/ActionDialogContentInner.cjs');
 require('../../../Dialog/DialogWrapper.cjs');
 require('../../../Dialog/DialogContent.cjs');
 require('../../../Dialog/ModelessDialog/ModelessDialog.cjs');

package/lib/components/AppHeader/components/mobile/UserInfo.js CHANGED Viewed

@@ -13,8 +13,6 @@ import { Dialog } from '../../../Dialog/Dialog.js';
 import '../../../Dialog/DialogContentInner.js';
 import 'react-dom';
 import '../../../Dialog/ControlledMessageDialog/MessageDialogContentInner.js';
-import '../../../Dialog/ControlledActionDialog/ActionDialogContentInner.js';
-import '../../../Dialog/ControlledFormDialog/FormDialogContentInner.js';
 import '../../../Layout/Stack/Stack.js';
 import '../../../Layout/Cluster/Cluster.js';
 import '../../../Layout/Reel/Reel.js';
@@ -29,6 +27,8 @@ import '../../../Dialog/DialogContentResponseStatusMessage.js';
 import '../../../Dialog/DialogHeading.js';
 import '../../../Dialog/dialogInnerStyle.js';
 import '../../../Dialog/ControlledStepFormDialog/StepFormDialogProvider.js';
+import '../../../Dialog/ControlledFormDialog/FormDialogContentInner.js';
+import '../../../Dialog/ControlledActionDialog/ActionDialogContentInner.js';
 import '../../../Dialog/DialogWrapper.js';
 import '../../../Dialog/DialogContent.js';
 import '../../../Dialog/ModelessDialog/ModelessDialog.js';

package/lib/components/Button/DisabledReason.cjs CHANGED Viewed

@@ -6,6 +6,7 @@ var index = require('./../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.
 var components_Icon_FaIcon = require('../Icon/FaIcon.cjs');
 require('../Icon/generateIcon.cjs');
 require('../Icon/OpenInNewTabIcon.cjs');
+require('../Tooltip/ControlledTooltip.cjs');
 var components_Tooltip_Tooltip = require('../Tooltip/Tooltip.cjs');
 const classNameGenerator = index.tv({

package/lib/components/Button/DisabledReason.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DisabledReason.cjs","sources":["../../../src/components/Button/DisabledReason.tsx"],"sourcesContent":["import { type FC, type FunctionComponent, type JSX, type ReactNode, memo, useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { FaCircleInfoIcon } from '../Icon'\nimport { Tooltip } from '../Tooltip'\n\ntype Props = {\n button: JSX.Element\n disabledReason: {\n icon?: FunctionComponent\n message: ReactNode\n }\n}\n\nconst classNameGenerator = tv({\n slots: {\n wrapper: ['smarthr-ui-Button-disabledWrapper', 'shr-inline-flex shr-items-center shr-gap-0.25'],\n tooltip: [\n 'shr-overflow-y-visible',\n /* Tooltip との距離を変えずに反応範囲を広げるために negative space を使う */\n '[&_.smarthr-ui-Icon]:-shr-m-0.25',\n '[&_.smarthr-ui-Icon]:shr-box-content',\n '[&_.smarthr-ui-Icon]:shr-p-0.25',\n '[&_.smarthr-ui-Icon]:shr-text-grey',\n ],\n },\n})\n\nexport const DisabledReason: FC<Props> = ({ button, disabledReason }) => {\n const classNames = useMemo(() => {\n const { wrapper, tooltip } = classNameGenerator()\n\n return {\n wrapper: wrapper(),\n tooltip: tooltip(),\n }\n }, [])\n\n return (\n <div className={classNames.wrapper}>\n {button}\n <TooltipIcon\n icon={disabledReason.icon}\n message={disabledReason.message}\n className={classNames.tooltip}\n />\n </div>\n )\n}\n\nconst TooltipIcon = memo<{\n icon?: FunctionComponent\n message: ReactNode\n className: string\n}>(({ icon, message, className }) => {\n const DisabledReasonIcon = icon ?? FaCircleInfoIcon\n\n return (\n <Tooltip message={message} triggerType=\"icon\" className={className}>\n <DisabledReasonIcon />\n </Tooltip>\n )\n})\n"],"names":["tv","useMemo","_jsxs","_jsx","memo","FaCircleInfoIcon","Tooltip"],"mappings":"~~;;;;;;;;;;~~AAcA,MAAM,kBAAkB,GAAGA,QAAE,CAAC;AAC5B,IAAA,KAAK,EAAE;AACL,QAAA,OAAO,EAAE,CAAC,mCAAmC,EAAE,+CAA+C,CAAC;AAC/F,QAAA,OAAO,EAAE;YACP,wBAAwB;;YAExB,kCAAkC;YAClC,sCAAsC;YACtC,iCAAiC;YACjC,oCAAoC;AACrC,SAAA;AACF,KAAA;AACF,CAAA,CAAC;AAEK,MAAM,cAAc,GAAc,CAAC,EAAE,MAAM,EAAE,cAAc,EAAE,KAAI;AACtE,IAAA,MAAM,UAAU,GAAGC,aAAO,CAAC,MAAK;QAC9B,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,kBAAkB,EAAE;QAEjD,OAAO;YACL,OAAO,EAAE,OAAO,EAAE;YAClB,OAAO,EAAE,OAAO,EAAE;SACnB;IACH,CAAC,EAAE,EAAE,CAAC;AAEN,IAAA,QACEC,eAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,UAAU,CAAC,OAAO,EAAA,QAAA,EAAA,CAC/B,MAAM,EACPC,cAAA,CAAC,WAAW,EAAA,EACV,IAAI,EAAE,cAAc,CAAC,IAAI,EACzB,OAAO,EAAE,cAAc,CAAC,OAAO,EAC/B,SAAS,EAAE,UAAU,CAAC,OAAO,EAAA,CAC7B,CAAA,EAAA,CACE;AAEV;AAEA,MAAM,WAAW,GAAGC,UAAI,CAIrB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,KAAI;AAClC,IAAA,MAAM,kBAAkB,GAAG,IAAI,IAAIC,uCAAgB;IAEnD,QACEF,eAACG,kCAAO,EAAA,EAAC,OAAO,EAAE,OAAO,EAAE,WAAW,EAAC,MAAM,EAAC,SAAS,EAAE,SAAS,EAAA,QAAA,EAChEH,eAAC,kBAAkB,EAAA,EAAA,CAAG,EAAA,CACd;AAEd,CAAC,CAAC;;;;"}
1	+ {"version":3,"file":"DisabledReason.cjs","sources":["../../../src/components/Button/DisabledReason.tsx"],"sourcesContent":["import { type FC, type FunctionComponent, type JSX, type ReactNode, memo, useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { FaCircleInfoIcon } from '../Icon'\nimport { Tooltip } from '../Tooltip'\n\ntype Props = {\n button: JSX.Element\n disabledReason: {\n icon?: FunctionComponent\n message: ReactNode\n }\n}\n\nconst classNameGenerator = tv({\n slots: {\n wrapper: ['smarthr-ui-Button-disabledWrapper', 'shr-inline-flex shr-items-center shr-gap-0.25'],\n tooltip: [\n 'shr-overflow-y-visible',\n /* Tooltip との距離を変えずに反応範囲を広げるために negative space を使う */\n '[&_.smarthr-ui-Icon]:-shr-m-0.25',\n '[&_.smarthr-ui-Icon]:shr-box-content',\n '[&_.smarthr-ui-Icon]:shr-p-0.25',\n '[&_.smarthr-ui-Icon]:shr-text-grey',\n ],\n },\n})\n\nexport const DisabledReason: FC<Props> = ({ button, disabledReason }) => {\n const classNames = useMemo(() => {\n const { wrapper, tooltip } = classNameGenerator()\n\n return {\n wrapper: wrapper(),\n tooltip: tooltip(),\n }\n }, [])\n\n return (\n <div className={classNames.wrapper}>\n {button}\n <TooltipIcon\n icon={disabledReason.icon}\n message={disabledReason.message}\n className={classNames.tooltip}\n />\n </div>\n )\n}\n\nconst TooltipIcon = memo<{\n icon?: FunctionComponent\n message: ReactNode\n className: string\n}>(({ icon, message, className }) => {\n const DisabledReasonIcon = icon ?? FaCircleInfoIcon\n\n return (\n <Tooltip message={message} triggerType=\"icon\" className={className}>\n <DisabledReasonIcon />\n </Tooltip>\n )\n})\n"],"names":["tv","useMemo","_jsxs","_jsx","memo","FaCircleInfoIcon","Tooltip"],"mappings":";;;;;;;;;;;AAcA,MAAM,kBAAkB,GAAGA,QAAE,CAAC;AAC5B,IAAA,KAAK,EAAE;AACL,QAAA,OAAO,EAAE,CAAC,mCAAmC,EAAE,+CAA+C,CAAC;AAC/F,QAAA,OAAO,EAAE;YACP,wBAAwB;;YAExB,kCAAkC;YAClC,sCAAsC;YACtC,iCAAiC;YACjC,oCAAoC;AACrC,SAAA;AACF,KAAA;AACF,CAAA,CAAC;AAEK,MAAM,cAAc,GAAc,CAAC,EAAE,MAAM,EAAE,cAAc,EAAE,KAAI;AACtE,IAAA,MAAM,UAAU,GAAGC,aAAO,CAAC,MAAK;QAC9B,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,kBAAkB,EAAE;QAEjD,OAAO;YACL,OAAO,EAAE,OAAO,EAAE;YAClB,OAAO,EAAE,OAAO,EAAE;SACnB;IACH,CAAC,EAAE,EAAE,CAAC;AAEN,IAAA,QACEC,eAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,UAAU,CAAC,OAAO,EAAA,QAAA,EAAA,CAC/B,MAAM,EACPC,cAAA,CAAC,WAAW,EAAA,EACV,IAAI,EAAE,cAAc,CAAC,IAAI,EACzB,OAAO,EAAE,cAAc,CAAC,OAAO,EAC/B,SAAS,EAAE,UAAU,CAAC,OAAO,EAAA,CAC7B,CAAA,EAAA,CACE;AAEV;AAEA,MAAM,WAAW,GAAGC,UAAI,CAIrB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,KAAI;AAClC,IAAA,MAAM,kBAAkB,GAAG,IAAI,IAAIC,uCAAgB;IAEnD,QACEF,eAACG,kCAAO,EAAA,EAAC,OAAO,EAAE,OAAO,EAAE,WAAW,EAAC,MAAM,EAAC,SAAS,EAAE,SAAS,EAAA,QAAA,EAChEH,eAAC,kBAAkB,EAAA,EAAA,CAAG,EAAA,CACd;AAEd,CAAC,CAAC;;;;"}

package/lib/components/Button/DisabledReason.js CHANGED Viewed

@@ -4,6 +4,7 @@ import { tv as ce } from './../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindc
 import { FaCircleInfoIcon } from '../Icon/FaIcon.js';
 import '../Icon/generateIcon.js';
 import '../Icon/OpenInNewTabIcon.js';
+import '../Tooltip/ControlledTooltip.js';
 import { Tooltip } from '../Tooltip/Tooltip.js';
 const classNameGenerator = ce({

package/lib/components/Button/DisabledReason.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DisabledReason.js","sources":["../../../src/components/Button/DisabledReason.tsx"],"sourcesContent":["import { type FC, type FunctionComponent, type JSX, type ReactNode, memo, useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { FaCircleInfoIcon } from '../Icon'\nimport { Tooltip } from '../Tooltip'\n\ntype Props = {\n button: JSX.Element\n disabledReason: {\n icon?: FunctionComponent\n message: ReactNode\n }\n}\n\nconst classNameGenerator = tv({\n slots: {\n wrapper: ['smarthr-ui-Button-disabledWrapper', 'shr-inline-flex shr-items-center shr-gap-0.25'],\n tooltip: [\n 'shr-overflow-y-visible',\n /* Tooltip との距離を変えずに反応範囲を広げるために negative space を使う */\n '[&_.smarthr-ui-Icon]:-shr-m-0.25',\n '[&_.smarthr-ui-Icon]:shr-box-content',\n '[&_.smarthr-ui-Icon]:shr-p-0.25',\n '[&_.smarthr-ui-Icon]:shr-text-grey',\n ],\n },\n})\n\nexport const DisabledReason: FC<Props> = ({ button, disabledReason }) => {\n const classNames = useMemo(() => {\n const { wrapper, tooltip } = classNameGenerator()\n\n return {\n wrapper: wrapper(),\n tooltip: tooltip(),\n }\n }, [])\n\n return (\n <div className={classNames.wrapper}>\n {button}\n <TooltipIcon\n icon={disabledReason.icon}\n message={disabledReason.message}\n className={classNames.tooltip}\n />\n </div>\n )\n}\n\nconst TooltipIcon = memo<{\n icon?: FunctionComponent\n message: ReactNode\n className: string\n}>(({ icon, message, className }) => {\n const DisabledReasonIcon = icon ?? FaCircleInfoIcon\n\n return (\n <Tooltip message={message} triggerType=\"icon\" className={className}>\n <DisabledReasonIcon />\n </Tooltip>\n )\n})\n"],"names":["tv","_jsxs","_jsx"],"mappings":"~~;;;;;;;;~~AAcA,MAAM,kBAAkB,GAAGA,EAAE,CAAC;AAC5B,IAAA,KAAK,EAAE;AACL,QAAA,OAAO,EAAE,CAAC,mCAAmC,EAAE,+CAA+C,CAAC;AAC/F,QAAA,OAAO,EAAE;YACP,wBAAwB;;YAExB,kCAAkC;YAClC,sCAAsC;YACtC,iCAAiC;YACjC,oCAAoC;AACrC,SAAA;AACF,KAAA;AACF,CAAA,CAAC;AAEK,MAAM,cAAc,GAAc,CAAC,EAAE,MAAM,EAAE,cAAc,EAAE,KAAI;AACtE,IAAA,MAAM,UAAU,GAAG,OAAO,CAAC,MAAK;QAC9B,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,kBAAkB,EAAE;QAEjD,OAAO;YACL,OAAO,EAAE,OAAO,EAAE;YAClB,OAAO,EAAE,OAAO,EAAE;SACnB;IACH,CAAC,EAAE,EAAE,CAAC;AAEN,IAAA,QACEC,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,UAAU,CAAC,OAAO,EAAA,QAAA,EAAA,CAC/B,MAAM,EACPC,GAAA,CAAC,WAAW,EAAA,EACV,IAAI,EAAE,cAAc,CAAC,IAAI,EACzB,OAAO,EAAE,cAAc,CAAC,OAAO,EAC/B,SAAS,EAAE,UAAU,CAAC,OAAO,EAAA,CAC7B,CAAA,EAAA,CACE;AAEV;AAEA,MAAM,WAAW,GAAG,IAAI,CAIrB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,KAAI;AAClC,IAAA,MAAM,kBAAkB,GAAG,IAAI,IAAI,gBAAgB;IAEnD,QACEA,IAAC,OAAO,EAAA,EAAC,OAAO,EAAE,OAAO,EAAE,WAAW,EAAC,MAAM,EAAC,SAAS,EAAE,SAAS,EAAA,QAAA,EAChEA,IAAC,kBAAkB,EAAA,EAAA,CAAG,EAAA,CACd;AAEd,CAAC,CAAC;;;;"}
1	+ {"version":3,"file":"DisabledReason.js","sources":["../../../src/components/Button/DisabledReason.tsx"],"sourcesContent":["import { type FC, type FunctionComponent, type JSX, type ReactNode, memo, useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { FaCircleInfoIcon } from '../Icon'\nimport { Tooltip } from '../Tooltip'\n\ntype Props = {\n button: JSX.Element\n disabledReason: {\n icon?: FunctionComponent\n message: ReactNode\n }\n}\n\nconst classNameGenerator = tv({\n slots: {\n wrapper: ['smarthr-ui-Button-disabledWrapper', 'shr-inline-flex shr-items-center shr-gap-0.25'],\n tooltip: [\n 'shr-overflow-y-visible',\n /* Tooltip との距離を変えずに反応範囲を広げるために negative space を使う */\n '[&_.smarthr-ui-Icon]:-shr-m-0.25',\n '[&_.smarthr-ui-Icon]:shr-box-content',\n '[&_.smarthr-ui-Icon]:shr-p-0.25',\n '[&_.smarthr-ui-Icon]:shr-text-grey',\n ],\n },\n})\n\nexport const DisabledReason: FC<Props> = ({ button, disabledReason }) => {\n const classNames = useMemo(() => {\n const { wrapper, tooltip } = classNameGenerator()\n\n return {\n wrapper: wrapper(),\n tooltip: tooltip(),\n }\n }, [])\n\n return (\n <div className={classNames.wrapper}>\n {button}\n <TooltipIcon\n icon={disabledReason.icon}\n message={disabledReason.message}\n className={classNames.tooltip}\n />\n </div>\n )\n}\n\nconst TooltipIcon = memo<{\n icon?: FunctionComponent\n message: ReactNode\n className: string\n}>(({ icon, message, className }) => {\n const DisabledReasonIcon = icon ?? FaCircleInfoIcon\n\n return (\n <Tooltip message={message} triggerType=\"icon\" className={className}>\n <DisabledReasonIcon />\n </Tooltip>\n )\n})\n"],"names":["tv","_jsxs","_jsx"],"mappings":";;;;;;;;;AAcA,MAAM,kBAAkB,GAAGA,EAAE,CAAC;AAC5B,IAAA,KAAK,EAAE;AACL,QAAA,OAAO,EAAE,CAAC,mCAAmC,EAAE,+CAA+C,CAAC;AAC/F,QAAA,OAAO,EAAE;YACP,wBAAwB;;YAExB,kCAAkC;YAClC,sCAAsC;YACtC,iCAAiC;YACjC,oCAAoC;AACrC,SAAA;AACF,KAAA;AACF,CAAA,CAAC;AAEK,MAAM,cAAc,GAAc,CAAC,EAAE,MAAM,EAAE,cAAc,EAAE,KAAI;AACtE,IAAA,MAAM,UAAU,GAAG,OAAO,CAAC,MAAK;QAC9B,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,kBAAkB,EAAE;QAEjD,OAAO;YACL,OAAO,EAAE,OAAO,EAAE;YAClB,OAAO,EAAE,OAAO,EAAE;SACnB;IACH,CAAC,EAAE,EAAE,CAAC;AAEN,IAAA,QACEC,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,UAAU,CAAC,OAAO,EAAA,QAAA,EAAA,CAC/B,MAAM,EACPC,GAAA,CAAC,WAAW,EAAA,EACV,IAAI,EAAE,cAAc,CAAC,IAAI,EACzB,OAAO,EAAE,cAAc,CAAC,OAAO,EAC/B,SAAS,EAAE,UAAU,CAAC,OAAO,EAAA,CAC7B,CAAA,EAAA,CACE;AAEV;AAEA,MAAM,WAAW,GAAG,IAAI,CAIrB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,KAAI;AAClC,IAAA,MAAM,kBAAkB,GAAG,IAAI,IAAI,gBAAgB;IAEnD,QACEA,IAAC,OAAO,EAAA,EAAC,OAAO,EAAE,OAAO,EAAE,WAAW,EAAC,MAAM,EAAC,SAAS,EAAE,SAAS,EAAA,QAAA,EAChEA,IAAC,kBAAkB,EAAA,EAAA,CAAG,EAAA,CACd;AAEd,CAAC,CAAC;;;;"}

package/lib/components/Combobox/MultiCombobox/MultiSelectedItem.cjs CHANGED Viewed

@@ -15,6 +15,7 @@ var components_Chip_Chip = require('../../Chip/Chip.cjs');
 var components_Icon_FaIcon = require('../../Icon/FaIcon.cjs');
 require('../../Icon/generateIcon.cjs');
 require('../../Icon/OpenInNewTabIcon.cjs');
+require('../../Tooltip/ControlledTooltip.cjs');
 var components_Tooltip_Tooltip = require('../../Tooltip/Tooltip.cjs');
 var components_VisuallyHiddenText_VisuallyHiddenText = require('../../VisuallyHiddenText/VisuallyHiddenText.cjs');

package/lib/components/Combobox/MultiCombobox/MultiSelectedItem.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MultiSelectedItem.cjs","sources":["../../../../src/components/Combobox/MultiCombobox/MultiSelectedItem.tsx"],"sourcesContent":["import {\n type KeyboardEvent,\n type PropsWithChildren,\n type RefObject,\n memo,\n useCallback,\n useEffect,\n useId,\n useMemo,\n useRef,\n useState,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useIntl } from '../../../intl'\nimport { UnstyledButton } from '../../Button'\nimport { Chip } from '../../Chip'\nimport { FaCircleXmarkIcon } from '../../Icon'\nimport { Tooltip } from '../../Tooltip'\nimport { VisuallyHiddenText } from '../../VisuallyHiddenText'\n\nimport type { ComboboxItem } from '../types'\n\nexport type Props<T> = {\n item: ComboboxItem<T> & { deletable?: boolean }\n disabled: boolean\n onDelete: (item: ComboboxItem<T>) => void\n enableEllipsis?: boolean\n buttonRef: RefObject<HTMLButtonElement>\n}\n\nconst classNameGenerator = tv({\n slots: {\n wrapper:\n 'smarthr-ui-MultiCombobox-selectedItem shr-flex shr-items-center shr-gap-0.75 shr-leading-normal [&]:shr-rounded-em',\n itemLabel: 'smarthr-ui-MultiCombobox-selectedItemLabel',\n deleteButton: [\n 'smarthr-ui-MultiCombobox-deleteButton',\n 'shr-relative',\n 'shr-group/deleteButton',\n 'shr-shrink shr-rounded-full shr-leading-[0] shr-text-black',\n 'focus-visible:shr-outline-none',\n ],\n deleteButtonIcon:\n 'group-focus-visible/deleteButton:shr-focus-indicator--outer group-focus-visible/deleteButton:shr-rounded-full',\n },\n variants: {\n enableEllipsis: {\n true: {\n itemLabel: 'shr-overflow-hidden shr-overflow-ellipsis shr-whitespace-nowrap',\n },\n },\n disabled: {\n true: {\n deleteButton: 'shr-cursor-not-allowed',\n },\n false: {},\n },\n },\n})\n\nexport function MultiSelectedItem<T>({\n item,\n disabled,\n onDelete,\n enableEllipsis,\n buttonRef,\n}: Props<T>) {\n const [needsTooltip, setNeedsTooltip] = useState(false)\n const { deletable = true } = item\n const idPrefix = useId()\n const labelId = `${idPrefix}-item-label`\n const destroySuffixTextId = `${idPrefix}-item-destroy-button-suffix`\n\n const classNames = useMemo(() => {\n const { wrapper, itemLabel, deleteButton, deleteButtonIcon } = classNameGenerator()\n\n return {\n wrapper: wrapper(),\n itemLabel: itemLabel({ enableEllipsis }),\n deleteButton: deleteButton({ disabled }),\n deleteButtonIcon: deleteButtonIcon(),\n }\n }, [disabled, enableEllipsis])\n\n const body = (\n <Chip disabled={disabled} className={classNames.wrapper}>\n <ItemLabel id={labelId} className={classNames.itemLabel} setNeedsTooltip={setNeedsTooltip}>\n {item.label}\n </ItemLabel>\n\n {deletable && (\n <DestroyButton\n labelId={labelId}\n suffixTextId={destroySuffixTextId}\n item={item}\n onDelete={onDelete}\n disabled={disabled}\n buttonRef={buttonRef}\n className={classNames.deleteButton}\n iconStyle={classNames.deleteButtonIcon}\n />\n )}\n </Chip>\n )\n\n if (needsTooltip) {\n return <Tooltip message={item.label}>{body}</Tooltip>\n }\n\n return body\n}\n\nconst ItemLabel = memo<\n PropsWithChildren<{\n id: string\n enableEllipsis?: boolean\n setNeedsTooltip: (flg: boolean) => void\n className: string\n }>\n>(({ children, id, enableEllipsis, setNeedsTooltip, className }) => {\n const labelRef = useRef<HTMLDivElement>(null)\n\n useEffect(() => {\n if (enableEllipsis && labelRef.current) {\n const elem = labelRef.current\n\n setNeedsTooltip(elem.offsetWidth < elem.scrollWidth)\n }\n }, [enableEllipsis, setNeedsTooltip])\n\n return (\n <span ref={labelRef} id={id} className={className}>\n {children}\n </span>\n )\n})\n\nconst typedMemo: <T>(c: T) => T = memo\nconst EXEC_DESTROY_KEY = /^(Enter\|Backspace\| )$/\n\nconst BaseDestroyButton = <T,>({\n labelId,\n suffixTextId,\n item,\n onDelete,\n disabled,\n buttonRef,\n className,\n iconStyle,\n}: Pick<Props<T>, 'item' \| 'onDelete' \| 'disabled' \| 'buttonRef'> & {\n labelId: string\n suffixTextId: string\n className: string\n iconStyle: string\n}) => {\n const { localize } = useIntl()\n const onClick = useCallback(() => {\n onDelete(item)\n }, [item, onDelete])\n const onKeyDown = useCallback(\n (e: KeyboardEvent<HTMLButtonElement>) => {\n if (EXEC_DESTROY_KEY.test(e.key)) {\n e.stopPropagation()\n\n // HINT: イベントの伝播が止まる関係でonClickに設定したonDeleteは実行されない\n // このタイミングで明示的に削除処理を実行する\n onClick()\n }\n },\n [onClick],\n )\n\n const destroyButtonIconAltSuffix = useMemo(\n () =>\n localize({\n id: 'smarthr-ui/MultiCombobox/destroyButtonIconAltSuffix',\n defaultText: 'を削除',\n }),\n [localize],\n )\n\n return (\n <UnstyledButton\n ref={buttonRef}\n disabled={disabled}\n tabIndex={-1}\n aria-labelledby={`${labelId} ${suffixTextId}`}\n onClick={onClick}\n onKeyDown={onKeyDown}\n className={className}\n >\n <VisuallyHiddenText id={suffixTextId}>{destroyButtonIconAltSuffix}</VisuallyHiddenText>\n <FaCircleXmarkIcon color={disabled ? 'TEXT_DISABLED' : 'inherit'} className={iconStyle} />\n </UnstyledButton>\n )\n}\nconst DestroyButton = typedMemo(BaseDestroyButton)\n"],"names":["tv","useState","useId","useMemo","_jsxs","Chip","_jsx","Tooltip","memo","useRef","useEffect","useIntl","useCallback","UnstyledButton","VisuallyHiddenText","FaCircleXmarkIcon"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;~~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"}
1	+ {"version":3,"file":"MultiSelectedItem.cjs","sources":["../../../../src/components/Combobox/MultiCombobox/MultiSelectedItem.tsx"],"sourcesContent":["import {\n type KeyboardEvent,\n type PropsWithChildren,\n type RefObject,\n memo,\n useCallback,\n useEffect,\n useId,\n useMemo,\n useRef,\n useState,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useIntl } from '../../../intl'\nimport { UnstyledButton } from '../../Button'\nimport { Chip } from '../../Chip'\nimport { FaCircleXmarkIcon } from '../../Icon'\nimport { Tooltip } from '../../Tooltip'\nimport { VisuallyHiddenText } from '../../VisuallyHiddenText'\n\nimport type { ComboboxItem } from '../types'\n\nexport type Props<T> = {\n item: ComboboxItem<T> & { deletable?: boolean }\n disabled: boolean\n onDelete: (item: ComboboxItem<T>) => void\n enableEllipsis?: boolean\n buttonRef: RefObject<HTMLButtonElement>\n}\n\nconst classNameGenerator = tv({\n slots: {\n wrapper:\n 'smarthr-ui-MultiCombobox-selectedItem shr-flex shr-items-center shr-gap-0.75 shr-leading-normal [&]:shr-rounded-em',\n itemLabel: 'smarthr-ui-MultiCombobox-selectedItemLabel',\n deleteButton: [\n 'smarthr-ui-MultiCombobox-deleteButton',\n 'shr-relative',\n 'shr-group/deleteButton',\n 'shr-shrink shr-rounded-full shr-leading-[0] shr-text-black',\n 'focus-visible:shr-outline-none',\n ],\n deleteButtonIcon:\n 'group-focus-visible/deleteButton:shr-focus-indicator--outer group-focus-visible/deleteButton:shr-rounded-full',\n },\n variants: {\n enableEllipsis: {\n true: {\n itemLabel: 'shr-overflow-hidden shr-overflow-ellipsis shr-whitespace-nowrap',\n },\n },\n disabled: {\n true: {\n deleteButton: 'shr-cursor-not-allowed',\n },\n false: {},\n },\n },\n})\n\nexport function MultiSelectedItem<T>({\n item,\n disabled,\n onDelete,\n enableEllipsis,\n buttonRef,\n}: Props<T>) {\n const [needsTooltip, setNeedsTooltip] = useState(false)\n const { deletable = true } = item\n const idPrefix = useId()\n const labelId = `${idPrefix}-item-label`\n const destroySuffixTextId = `${idPrefix}-item-destroy-button-suffix`\n\n const classNames = useMemo(() => {\n const { wrapper, itemLabel, deleteButton, deleteButtonIcon } = classNameGenerator()\n\n return {\n wrapper: wrapper(),\n itemLabel: itemLabel({ enableEllipsis }),\n deleteButton: deleteButton({ disabled }),\n deleteButtonIcon: deleteButtonIcon(),\n }\n }, [disabled, enableEllipsis])\n\n const body = (\n <Chip disabled={disabled} className={classNames.wrapper}>\n <ItemLabel id={labelId} className={classNames.itemLabel} setNeedsTooltip={setNeedsTooltip}>\n {item.label}\n </ItemLabel>\n\n {deletable && (\n <DestroyButton\n labelId={labelId}\n suffixTextId={destroySuffixTextId}\n item={item}\n onDelete={onDelete}\n disabled={disabled}\n buttonRef={buttonRef}\n className={classNames.deleteButton}\n iconStyle={classNames.deleteButtonIcon}\n />\n )}\n </Chip>\n )\n\n if (needsTooltip) {\n return <Tooltip message={item.label}>{body}</Tooltip>\n }\n\n return body\n}\n\nconst ItemLabel = memo<\n PropsWithChildren<{\n id: string\n enableEllipsis?: boolean\n setNeedsTooltip: (flg: boolean) => void\n className: string\n }>\n>(({ children, id, enableEllipsis, setNeedsTooltip, className }) => {\n const labelRef = useRef<HTMLDivElement>(null)\n\n useEffect(() => {\n if (enableEllipsis && labelRef.current) {\n const elem = labelRef.current\n\n setNeedsTooltip(elem.offsetWidth < elem.scrollWidth)\n }\n }, [enableEllipsis, setNeedsTooltip])\n\n return (\n <span ref={labelRef} id={id} className={className}>\n {children}\n </span>\n )\n})\n\nconst typedMemo: <T>(c: T) => T = memo\nconst EXEC_DESTROY_KEY = /^(Enter\|Backspace\| )$/\n\nconst BaseDestroyButton = <T,>({\n labelId,\n suffixTextId,\n item,\n onDelete,\n disabled,\n buttonRef,\n className,\n iconStyle,\n}: Pick<Props<T>, 'item' \| 'onDelete' \| 'disabled' \| 'buttonRef'> & {\n labelId: string\n suffixTextId: string\n className: string\n iconStyle: string\n}) => {\n const { localize } = useIntl()\n const onClick = useCallback(() => {\n onDelete(item)\n }, [item, onDelete])\n const onKeyDown = useCallback(\n (e: KeyboardEvent<HTMLButtonElement>) => {\n if (EXEC_DESTROY_KEY.test(e.key)) {\n e.stopPropagation()\n\n // HINT: イベントの伝播が止まる関係でonClickに設定したonDeleteは実行されない\n // このタイミングで明示的に削除処理を実行する\n onClick()\n }\n },\n [onClick],\n )\n\n const destroyButtonIconAltSuffix = useMemo(\n () =>\n localize({\n id: 'smarthr-ui/MultiCombobox/destroyButtonIconAltSuffix',\n defaultText: 'を削除',\n }),\n [localize],\n )\n\n return (\n <UnstyledButton\n ref={buttonRef}\n disabled={disabled}\n tabIndex={-1}\n aria-labelledby={`${labelId} ${suffixTextId}`}\n onClick={onClick}\n onKeyDown={onKeyDown}\n className={className}\n >\n <VisuallyHiddenText id={suffixTextId}>{destroyButtonIconAltSuffix}</VisuallyHiddenText>\n <FaCircleXmarkIcon color={disabled ? 'TEXT_DISABLED' : 'inherit'} className={iconStyle} />\n </UnstyledButton>\n )\n}\nconst DestroyButton = typedMemo(BaseDestroyButton)\n"],"names":["tv","useState","useId","useMemo","_jsxs","Chip","_jsx","Tooltip","memo","useRef","useEffect","useIntl","useCallback","UnstyledButton","VisuallyHiddenText","FaCircleXmarkIcon"],"mappings":"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"}

package/lib/components/Combobox/MultiCombobox/MultiSelectedItem.js CHANGED Viewed

@@ -13,6 +13,7 @@ import { Chip } from '../../Chip/Chip.js';
 import { FaCircleXmarkIcon } from '../../Icon/FaIcon.js';
 import '../../Icon/generateIcon.js';
 import '../../Icon/OpenInNewTabIcon.js';
+import '../../Tooltip/ControlledTooltip.js';
 import { Tooltip } from '../../Tooltip/Tooltip.js';
 import { VisuallyHiddenText } from '../../VisuallyHiddenText/VisuallyHiddenText.js';

package/lib/components/Combobox/MultiCombobox/MultiSelectedItem.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MultiSelectedItem.js","sources":["../../../../src/components/Combobox/MultiCombobox/MultiSelectedItem.tsx"],"sourcesContent":["import {\n type KeyboardEvent,\n type PropsWithChildren,\n type RefObject,\n memo,\n useCallback,\n useEffect,\n useId,\n useMemo,\n useRef,\n useState,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useIntl } from '../../../intl'\nimport { UnstyledButton } from '../../Button'\nimport { Chip } from '../../Chip'\nimport { FaCircleXmarkIcon } from '../../Icon'\nimport { Tooltip } from '../../Tooltip'\nimport { VisuallyHiddenText } from '../../VisuallyHiddenText'\n\nimport type { ComboboxItem } from '../types'\n\nexport type Props<T> = {\n item: ComboboxItem<T> & { deletable?: boolean }\n disabled: boolean\n onDelete: (item: ComboboxItem<T>) => void\n enableEllipsis?: boolean\n buttonRef: RefObject<HTMLButtonElement>\n}\n\nconst classNameGenerator = tv({\n slots: {\n wrapper:\n 'smarthr-ui-MultiCombobox-selectedItem shr-flex shr-items-center shr-gap-0.75 shr-leading-normal [&]:shr-rounded-em',\n itemLabel: 'smarthr-ui-MultiCombobox-selectedItemLabel',\n deleteButton: [\n 'smarthr-ui-MultiCombobox-deleteButton',\n 'shr-relative',\n 'shr-group/deleteButton',\n 'shr-shrink shr-rounded-full shr-leading-[0] shr-text-black',\n 'focus-visible:shr-outline-none',\n ],\n deleteButtonIcon:\n 'group-focus-visible/deleteButton:shr-focus-indicator--outer group-focus-visible/deleteButton:shr-rounded-full',\n },\n variants: {\n enableEllipsis: {\n true: {\n itemLabel: 'shr-overflow-hidden shr-overflow-ellipsis shr-whitespace-nowrap',\n },\n },\n disabled: {\n true: {\n deleteButton: 'shr-cursor-not-allowed',\n },\n false: {},\n },\n },\n})\n\nexport function MultiSelectedItem<T>({\n item,\n disabled,\n onDelete,\n enableEllipsis,\n buttonRef,\n}: Props<T>) {\n const [needsTooltip, setNeedsTooltip] = useState(false)\n const { deletable = true } = item\n const idPrefix = useId()\n const labelId = `${idPrefix}-item-label`\n const destroySuffixTextId = `${idPrefix}-item-destroy-button-suffix`\n\n const classNames = useMemo(() => {\n const { wrapper, itemLabel, deleteButton, deleteButtonIcon } = classNameGenerator()\n\n return {\n wrapper: wrapper(),\n itemLabel: itemLabel({ enableEllipsis }),\n deleteButton: deleteButton({ disabled }),\n deleteButtonIcon: deleteButtonIcon(),\n }\n }, [disabled, enableEllipsis])\n\n const body = (\n <Chip disabled={disabled} className={classNames.wrapper}>\n <ItemLabel id={labelId} className={classNames.itemLabel} setNeedsTooltip={setNeedsTooltip}>\n {item.label}\n </ItemLabel>\n\n {deletable && (\n <DestroyButton\n labelId={labelId}\n suffixTextId={destroySuffixTextId}\n item={item}\n onDelete={onDelete}\n disabled={disabled}\n buttonRef={buttonRef}\n className={classNames.deleteButton}\n iconStyle={classNames.deleteButtonIcon}\n />\n )}\n </Chip>\n )\n\n if (needsTooltip) {\n return <Tooltip message={item.label}>{body}</Tooltip>\n }\n\n return body\n}\n\nconst ItemLabel = memo<\n PropsWithChildren<{\n id: string\n enableEllipsis?: boolean\n setNeedsTooltip: (flg: boolean) => void\n className: string\n }>\n>(({ children, id, enableEllipsis, setNeedsTooltip, className }) => {\n const labelRef = useRef<HTMLDivElement>(null)\n\n useEffect(() => {\n if (enableEllipsis && labelRef.current) {\n const elem = labelRef.current\n\n setNeedsTooltip(elem.offsetWidth < elem.scrollWidth)\n }\n }, [enableEllipsis, setNeedsTooltip])\n\n return (\n <span ref={labelRef} id={id} className={className}>\n {children}\n </span>\n )\n})\n\nconst typedMemo: <T>(c: T) => T = memo\nconst EXEC_DESTROY_KEY = /^(Enter\|Backspace\| )$/\n\nconst BaseDestroyButton = <T,>({\n labelId,\n suffixTextId,\n item,\n onDelete,\n disabled,\n buttonRef,\n className,\n iconStyle,\n}: Pick<Props<T>, 'item' \| 'onDelete' \| 'disabled' \| 'buttonRef'> & {\n labelId: string\n suffixTextId: string\n className: string\n iconStyle: string\n}) => {\n const { localize } = useIntl()\n const onClick = useCallback(() => {\n onDelete(item)\n }, [item, onDelete])\n const onKeyDown = useCallback(\n (e: KeyboardEvent<HTMLButtonElement>) => {\n if (EXEC_DESTROY_KEY.test(e.key)) {\n e.stopPropagation()\n\n // HINT: イベントの伝播が止まる関係でonClickに設定したonDeleteは実行されない\n // このタイミングで明示的に削除処理を実行する\n onClick()\n }\n },\n [onClick],\n )\n\n const destroyButtonIconAltSuffix = useMemo(\n () =>\n localize({\n id: 'smarthr-ui/MultiCombobox/destroyButtonIconAltSuffix',\n defaultText: 'を削除',\n }),\n [localize],\n )\n\n return (\n <UnstyledButton\n ref={buttonRef}\n disabled={disabled}\n tabIndex={-1}\n aria-labelledby={`${labelId} ${suffixTextId}`}\n onClick={onClick}\n onKeyDown={onKeyDown}\n className={className}\n >\n <VisuallyHiddenText id={suffixTextId}>{destroyButtonIconAltSuffix}</VisuallyHiddenText>\n <FaCircleXmarkIcon color={disabled ? 'TEXT_DISABLED' : 'inherit'} className={iconStyle} />\n </UnstyledButton>\n )\n}\nconst DestroyButton = typedMemo(BaseDestroyButton)\n"],"names":["tv","_jsxs","_jsx"],"mappings":"~~;;;;;;;;;;;;;;;;;;~~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"}
1	+ {"version":3,"file":"MultiSelectedItem.js","sources":["../../../../src/components/Combobox/MultiCombobox/MultiSelectedItem.tsx"],"sourcesContent":["import {\n type KeyboardEvent,\n type PropsWithChildren,\n type RefObject,\n memo,\n useCallback,\n useEffect,\n useId,\n useMemo,\n useRef,\n useState,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useIntl } from '../../../intl'\nimport { UnstyledButton } from '../../Button'\nimport { Chip } from '../../Chip'\nimport { FaCircleXmarkIcon } from '../../Icon'\nimport { Tooltip } from '../../Tooltip'\nimport { VisuallyHiddenText } from '../../VisuallyHiddenText'\n\nimport type { ComboboxItem } from '../types'\n\nexport type Props<T> = {\n item: ComboboxItem<T> & { deletable?: boolean }\n disabled: boolean\n onDelete: (item: ComboboxItem<T>) => void\n enableEllipsis?: boolean\n buttonRef: RefObject<HTMLButtonElement>\n}\n\nconst classNameGenerator = tv({\n slots: {\n wrapper:\n 'smarthr-ui-MultiCombobox-selectedItem shr-flex shr-items-center shr-gap-0.75 shr-leading-normal [&]:shr-rounded-em',\n itemLabel: 'smarthr-ui-MultiCombobox-selectedItemLabel',\n deleteButton: [\n 'smarthr-ui-MultiCombobox-deleteButton',\n 'shr-relative',\n 'shr-group/deleteButton',\n 'shr-shrink shr-rounded-full shr-leading-[0] shr-text-black',\n 'focus-visible:shr-outline-none',\n ],\n deleteButtonIcon:\n 'group-focus-visible/deleteButton:shr-focus-indicator--outer group-focus-visible/deleteButton:shr-rounded-full',\n },\n variants: {\n enableEllipsis: {\n true: {\n itemLabel: 'shr-overflow-hidden shr-overflow-ellipsis shr-whitespace-nowrap',\n },\n },\n disabled: {\n true: {\n deleteButton: 'shr-cursor-not-allowed',\n },\n false: {},\n },\n },\n})\n\nexport function MultiSelectedItem<T>({\n item,\n disabled,\n onDelete,\n enableEllipsis,\n buttonRef,\n}: Props<T>) {\n const [needsTooltip, setNeedsTooltip] = useState(false)\n const { deletable = true } = item\n const idPrefix = useId()\n const labelId = `${idPrefix}-item-label`\n const destroySuffixTextId = `${idPrefix}-item-destroy-button-suffix`\n\n const classNames = useMemo(() => {\n const { wrapper, itemLabel, deleteButton, deleteButtonIcon } = classNameGenerator()\n\n return {\n wrapper: wrapper(),\n itemLabel: itemLabel({ enableEllipsis }),\n deleteButton: deleteButton({ disabled }),\n deleteButtonIcon: deleteButtonIcon(),\n }\n }, [disabled, enableEllipsis])\n\n const body = (\n <Chip disabled={disabled} className={classNames.wrapper}>\n <ItemLabel id={labelId} className={classNames.itemLabel} setNeedsTooltip={setNeedsTooltip}>\n {item.label}\n </ItemLabel>\n\n {deletable && (\n <DestroyButton\n labelId={labelId}\n suffixTextId={destroySuffixTextId}\n item={item}\n onDelete={onDelete}\n disabled={disabled}\n buttonRef={buttonRef}\n className={classNames.deleteButton}\n iconStyle={classNames.deleteButtonIcon}\n />\n )}\n </Chip>\n )\n\n if (needsTooltip) {\n return <Tooltip message={item.label}>{body}</Tooltip>\n }\n\n return body\n}\n\nconst ItemLabel = memo<\n PropsWithChildren<{\n id: string\n enableEllipsis?: boolean\n setNeedsTooltip: (flg: boolean) => void\n className: string\n }>\n>(({ children, id, enableEllipsis, setNeedsTooltip, className }) => {\n const labelRef = useRef<HTMLDivElement>(null)\n\n useEffect(() => {\n if (enableEllipsis && labelRef.current) {\n const elem = labelRef.current\n\n setNeedsTooltip(elem.offsetWidth < elem.scrollWidth)\n }\n }, [enableEllipsis, setNeedsTooltip])\n\n return (\n <span ref={labelRef} id={id} className={className}>\n {children}\n </span>\n )\n})\n\nconst typedMemo: <T>(c: T) => T = memo\nconst EXEC_DESTROY_KEY = /^(Enter\|Backspace\| )$/\n\nconst BaseDestroyButton = <T,>({\n labelId,\n suffixTextId,\n item,\n onDelete,\n disabled,\n buttonRef,\n className,\n iconStyle,\n}: Pick<Props<T>, 'item' \| 'onDelete' \| 'disabled' \| 'buttonRef'> & {\n labelId: string\n suffixTextId: string\n className: string\n iconStyle: string\n}) => {\n const { localize } = useIntl()\n const onClick = useCallback(() => {\n onDelete(item)\n }, [item, onDelete])\n const onKeyDown = useCallback(\n (e: KeyboardEvent<HTMLButtonElement>) => {\n if (EXEC_DESTROY_KEY.test(e.key)) {\n e.stopPropagation()\n\n // HINT: イベントの伝播が止まる関係でonClickに設定したonDeleteは実行されない\n // このタイミングで明示的に削除処理を実行する\n onClick()\n }\n },\n [onClick],\n )\n\n const destroyButtonIconAltSuffix = useMemo(\n () =>\n localize({\n id: 'smarthr-ui/MultiCombobox/destroyButtonIconAltSuffix',\n defaultText: 'を削除',\n }),\n [localize],\n )\n\n return (\n <UnstyledButton\n ref={buttonRef}\n disabled={disabled}\n tabIndex={-1}\n aria-labelledby={`${labelId} ${suffixTextId}`}\n onClick={onClick}\n onKeyDown={onKeyDown}\n className={className}\n >\n <VisuallyHiddenText id={suffixTextId}>{destroyButtonIconAltSuffix}</VisuallyHiddenText>\n <FaCircleXmarkIcon color={disabled ? 'TEXT_DISABLED' : 'inherit'} className={iconStyle} />\n </UnstyledButton>\n )\n}\nconst DestroyButton = typedMemo(BaseDestroyButton)\n"],"names":["tv","_jsxs","_jsx"],"mappings":"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"}

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

@@ -3,7 +3,6 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var hooks_useDecorators = require('../../../hooks/useDecorators.cjs');
 var hooks_useResponseStatus = require('../../../hooks/useResponseStatus.cjs');
 require('../../../intl/IntlProvider.cjs');
 var intl_useIntl = require('../../../intl/useIntl.cjs');
@@ -28,7 +27,7 @@ var components_Dialog_DialogHeading = require('../DialogHeading.cjs');
 var components_Dialog_dialogInnerStyle = require('../dialogInnerStyle.cjs');
 const ACTION_AREA_CLUSTER_GAP = { row: 0.5, column: 1 };
-const ActionDialogContentInner = ({ children, heading, contentBgColor, contentPadding, actionText, actionTheme, onClickAction, onClickClose, responseStatus, actionDisabled, closeDisabled, subActionArea, decorators, }) => {
+const ActionDialogContentInner = ({ children, heading, contentBgColor, contentPadding, actionButton, onClickAction, onClickClose, responseStatus, closeButton, subActionArea, }) => {
     const calcedResponseStatus = hooks_useResponseStatus.useResponseStatus(responseStatus);
     const styles = React.useMemo(() => {
         const { wrapper, actionArea, buttonArea, message } = components_Dialog_dialogInnerStyle.dialogContentInner();
@@ -39,25 +38,22 @@ 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, closeDisabled: closeDisabled, actionDisabled: actionDisabled, loading: calcedResponseStatus.isProcessing, actionTheme: actionTheme, decorators: decorators, actionText: actionText, 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(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 })] })] }));
 };
-const ActionAreaCluster = React.memo(({ onClickClose, onClickAction, closeDisabled, actionDisabled, loading, actionTheme, decorators, actionText, className, }) => {
+const ActionAreaCluster = React.memo(({ onClickClose, onClickAction, closeButton, actionButton, loading, className }) => {
     const handleClickAction = React.useCallback((e) => {
         onClickAction(e, { close: onClickClose });
     }, [onClickAction, onClickClose]);
-    return (jsxRuntime.jsxs(components_Layout_Cluster_Cluster.Cluster, { gap: ACTION_AREA_CLUSTER_GAP, className: className, children: [jsxRuntime.jsx(CloseButton, { onClick: onClickClose, disabled: closeDisabled || loading, decorators: decorators }), jsxRuntime.jsx(ActionButton, { variant: actionTheme, disabled: actionDisabled, loading: loading, onClick: handleClickAction, children: actionText })] }));
+    return (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, onClick: handleClickAction, children: actionButton.text })] }));
 });
 const ActionButton = React.memo(({ variant = 'primary', disabled, loading, onClick, children }) => (jsxRuntime.jsx(components_Button_Button.Button, { type: "submit", variant: variant, disabled: disabled, loading: loading, onClick: onClick, className: "smarthr-ui-Dialog-actionButton", children: children })));
-const CloseButton = React.memo(({ onClick, disabled, decorators }) => {
+const CloseButton = React.memo(({ onClick, disabled, text }) => {
     const { localize } = intl_useIntl.useIntl();
-    const decoratorDefaultTexts = React.useMemo(() => ({
-        closeButtonLabel: localize({
-            id: 'smarthr-ui/ActionDialog/closeButtonLabel',
-            defaultText: 'キャンセル',
-        }),
+    const defaultText = React.useMemo(() => localize({
+        id: 'smarthr-ui/ActionDialog/closeButtonLabel',
+        defaultText: 'キャンセル',
     }), [localize]);
-    const decorated = hooks_useDecorators.useDecorators(decoratorDefaultTexts, decorators);
-    return (jsxRuntime.jsx(components_Button_Button.Button, { onClick: onClick, disabled: disabled, className: "smarthr-ui-Dialog-closeButton", children: decorated.closeButtonLabel }));
+    return (jsxRuntime.jsx(components_Button_Button.Button, { onClick: onClick, disabled: disabled, className: "smarthr-ui-Dialog-closeButton", children: text ?? defaultText }));
 });
 exports.ActionDialogContentInner = ActionDialogContentInner;

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

	@@ -1 +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 ~~DecoratorsType, useDecorators } from '../../../hooks/useDecorators'\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\nexport type AbstractProps = PropsWithChildren<\n DialogBodyProps & {\n /** ダイアログタイトル /\n heading: DialogHeadingProps\n /* ~~アクションボタンのラベル~~ /\n ~~actionText~~: ~~ReactNode~~\n ~~/* アクションボタンのスタイル /\n actionTheme?: 'primary' \| 'secondary' \| 'danger'\n~~ /\n アクションボタンをクリックした時に発火するコールバック関数\n * @param e マウスイベント\n * @param helpers ダイアログ操作のためのヘルパー関数\n /\n onClickAction: (e: MouseEvent<Element>, helpers: ActionDialogHelpers) => void\n /* ~~アクションボタンを無効にするかどうか~~ /\n ~~actionDisabled?:~~ ~~boolean~~\n /* 閉じるボタンを無効にするかどうか /\n closeDisabled?: boolean\n /* ダイアログフッターの左端操作領域 /\n subActionArea?: ReactNode\n ~~/* コンポーネント内の文言を変更するための関数を設定 */\n decorators?: DecoratorsType<'closeButtonLabel'>\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 ~~actionText~~,\n ~~actionTheme,\n~~ onClickAction,\n onClickClose,\n responseStatus,\n ~~actionDisabled~~,\n ~~closeDisabled,\n~~ subActionArea,\n ~~decorators,\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 ~~closeDisabled~~={~~closeDisabled~~}\n ~~actionDisabled~~={~~actionDisabled~~}\n loading={calcedResponseStatus.isProcessing}\n ~~actionTheme={actionTheme}\n decorators={decorators}\n actionText={actionText}\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~~<\n~~ ActionDialogContentInnerProps~~,\n \|~~ 'onClickClose'\n \| 'onClickAction'~~\n \|~~ ~~'closeDisabled'\n \|~~ ~~'actionDisabled'~~\n \| ~~'actionTheme'~~\n \| ~~'decorators'~~\n ~~\| 'actionText'\n > & {~~ loading: boolean; className: string }\n>(\n ({\n onClickClose~~,\n~~ onClickAction~~,\n closeDisabled,\n actionDisabled,\n~~ loading~~,\n actionTheme,\n decorators,\n actionText,\n~~ className~~,\n~~ }) => {\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={~~closeDisabled~~ \|\| loading}\n ~~decorators~~={~~decorators~~}\n />\n <ActionButton\n variant={~~actionTheme~~}\n disabled={~~actionDisabled~~}\n loading={loading}\n onClick={handleClickAction}\n >\n {~~actionText~~}\n </ActionButton>\n </Cluster>\n )\n }~~,\n~~)\n\nconst ActionButton = memo<\n PropsWithChildren<{\n variant: ~~ActionDialogContentInnerProps~~['~~actionTheme~~']\n disabled: ~~ActionDialogContentInnerProps~~['~~actionDisabled~~']\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 Pick~~<~~ActionDialogContentInnerProps, 'decorators'> &~~ {\n onClick: ActionDialogContentInnerProps['onClickClose']\n disabled: boolean\n }\n>(({ onClick, disabled, ~~decorators~~ }) => {\n const { localize } = useIntl()\n\n const ~~decoratorDefaultTexts~~ = useMemo(\n () ~~=> ({\~~n ~~closeButtonLabel:~~ localize({\n id: 'smarthr-ui/ActionDialog/closeButtonLabel',\n defaultText: 'キャンセル',\n }),\n ~~}),\n~~ [localize],\n )\n\n ~~const decorated = useDecorators(decoratorDefaultTexts, decorators)\n\n~~ return (\n <Button onClick={onClick} disabled={disabled} className=\"smarthr-ui-Dialog-closeButton\">\n {~~decorated.closeButtonLabel~~}\n </Button>\n )\n})\n"],"names":[],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyDA~~;AAEO;~~AAeL~~;AAEA;AACE;;;;;;;;;~~AAsCJ~~;AAEA;~~AAuBI~~;;AAGE~~;;AAqBJ~~;~~AAGF~~;AAoBA;~~AAME;AAEA~~;;~~AAGM~~;AACA;;~~AAEH;;;AAWL~~;;"}
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;;"}

package/lib/components/Dialog/ControlledActionDialog/ActionDialogContentInner.d.ts CHANGED Viewed

@@ -1,35 +1,43 @@
 import { type FC, type MouseEvent, type PropsWithChildren, type ReactNode } from 'react';
-import { type DecoratorsType } from '../../../hooks/useDecorators';
 import { type ResponseStatus } from '../../../hooks/useResponseStatus';
 import { type Props as DialogBodyProps } from '../DialogBody';
 import { type Props as DialogHeadingProps } from '../DialogHeading';
 export type ActionDialogHelpers = {
     close: () => void;
 };
+type ObjectActionButtonType = {
+    /** アクションボタンのラベル */
+    text: ReactNode;
+    /** アクションボタンのスタイル */
+    theme?: 'primary' | 'secondary' | 'danger';
+    /** アクションボタンを無効にするかどうか */
+    disabled?: boolean;
+};
+type ObjectCloseButtonType = {
+    /** 閉じるボタンのラベル */
+    text: ReactNode;
+    /** 閉じるボタンを無効にするかどうか */
+    disabled?: boolean;
+};
 export type AbstractProps = PropsWithChildren<DialogBodyProps & {
     /** ダイアログタイトル */
     heading: DialogHeadingProps;
-    /** アクションボタンのラベル */
-    actionText: ReactNode;
-    /** アクションボタンのスタイル */
-    actionTheme?: 'primary' | 'secondary' | 'danger';
+    /** アクションボタン */
+    actionButton: ObjectActionButtonType;
     /**
      * アクションボタンをクリックした時に発火するコールバック関数
      * @param e マウスイベント
      * @param helpers ダイアログ操作のためのヘルパー関数
      */
     onClickAction: (e: MouseEvent<Element>, helpers: ActionDialogHelpers) => void;
-    /** アクションボタンを無効にするかどうか */
-    actionDisabled?: boolean;
-    /** 閉じるボタンを無効にするかどうか */
-    closeDisabled?: boolean;
+    /** 閉じるボタン */
+    closeButton: ObjectCloseButtonType;
     /** ダイアログフッターの左端操作領域 */
     subActionArea?: ReactNode;
-    /** コンポーネント内の文言を変更するための関数を設定 */
-    decorators?: DecoratorsType<'closeButtonLabel'>;
 }>;
 export type ActionDialogContentInnerProps = AbstractProps & {
     onClickClose: () => void;
     responseStatus?: ResponseStatus;
 };
 export declare const ActionDialogContentInner: FC<ActionDialogContentInnerProps>;
+export {};

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

@@ -1,7 +1,6 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { memo, useCallback, useMemo } from 'react';
-import { useDecorators } from '../../../hooks/useDecorators.js';
 import { useResponseStatus } from '../../../hooks/useResponseStatus.js';
 import '../../../intl/IntlProvider.js';
 import { useIntl } from '../../../intl/useIntl.js';
@@ -26,7 +25,7 @@ import { DialogHeading } from '../DialogHeading.js';
 import { dialogContentInner } from '../dialogInnerStyle.js';
 const ACTION_AREA_CLUSTER_GAP = { row: 0.5, column: 1 };
-const ActionDialogContentInner = ({ children, heading, contentBgColor, contentPadding, actionText, actionTheme, onClickAction, onClickClose, responseStatus, actionDisabled, closeDisabled, subActionArea, decorators, }) => {
+const ActionDialogContentInner = ({ children, heading, contentBgColor, contentPadding, actionButton, onClickAction, onClickClose, responseStatus, closeButton, subActionArea, }) => {
     const calcedResponseStatus = useResponseStatus(responseStatus);
     const styles = useMemo(() => {
         const { wrapper, actionArea, buttonArea, message } = dialogContentInner();
@@ -37,25 +36,22 @@ 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, closeDisabled: closeDisabled, actionDisabled: actionDisabled, loading: calcedResponseStatus.isProcessing, actionTheme: actionTheme, decorators: decorators, actionText: actionText, 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(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 })] })] }));
 };
-const ActionAreaCluster = memo(({ onClickClose, onClickAction, closeDisabled, actionDisabled, loading, actionTheme, decorators, actionText, className, }) => {
+const ActionAreaCluster = memo(({ onClickClose, onClickAction, closeButton, actionButton, loading, className }) => {
     const handleClickAction = useCallback((e) => {
         onClickAction(e, { close: onClickClose });
     }, [onClickAction, onClickClose]);
-    return (jsxs(Cluster, { gap: ACTION_AREA_CLUSTER_GAP, className: className, children: [jsx(CloseButton, { onClick: onClickClose, disabled: closeDisabled || loading, decorators: decorators }), jsx(ActionButton, { variant: actionTheme, disabled: actionDisabled, loading: loading, onClick: handleClickAction, children: actionText })] }));
+    return (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, onClick: handleClickAction, children: actionButton.text })] }));
 });
 const ActionButton = memo(({ variant = 'primary', disabled, loading, onClick, children }) => (jsx(Button, { type: "submit", variant: variant, disabled: disabled, loading: loading, onClick: onClick, className: "smarthr-ui-Dialog-actionButton", children: children })));
-const CloseButton = memo(({ onClick, disabled, decorators }) => {
+const CloseButton = memo(({ onClick, disabled, text }) => {
     const { localize } = useIntl();
-    const decoratorDefaultTexts = useMemo(() => ({
-        closeButtonLabel: localize({
-            id: 'smarthr-ui/ActionDialog/closeButtonLabel',
-            defaultText: 'キャンセル',
-        }),
+    const defaultText = useMemo(() => localize({
+        id: 'smarthr-ui/ActionDialog/closeButtonLabel',
+        defaultText: 'キャンセル',
     }), [localize]);
-    const decorated = useDecorators(decoratorDefaultTexts, decorators);
-    return (jsx(Button, { onClick: onClick, disabled: disabled, className: "smarthr-ui-Dialog-closeButton", children: decorated.closeButtonLabel }));
+    return (jsx(Button, { onClick: onClick, disabled: disabled, className: "smarthr-ui-Dialog-closeButton", children: text ?? defaultText }));
 });
 export { ActionDialogContentInner };

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

	@@ -1 +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 ~~DecoratorsType, useDecorators } from '../../../hooks/useDecorators'\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\nexport type AbstractProps = PropsWithChildren<\n DialogBodyProps & {\n /** ダイアログタイトル /\n heading: DialogHeadingProps\n /* ~~アクションボタンのラベル~~ /\n ~~actionText~~: ~~ReactNode~~\n ~~/* アクションボタンのスタイル /\n actionTheme?: 'primary' \| 'secondary' \| 'danger'\n~~ /\n アクションボタンをクリックした時に発火するコールバック関数\n * @param e マウスイベント\n * @param helpers ダイアログ操作のためのヘルパー関数\n /\n onClickAction: (e: MouseEvent<Element>, helpers: ActionDialogHelpers) => void\n /* ~~アクションボタンを無効にするかどうか~~ /\n ~~actionDisabled?:~~ ~~boolean~~\n /* 閉じるボタンを無効にするかどうか /\n closeDisabled?: boolean\n /* ダイアログフッターの左端操作領域 /\n subActionArea?: ReactNode\n ~~/* コンポーネント内の文言を変更するための関数を設定 */\n decorators?: DecoratorsType<'closeButtonLabel'>\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 ~~actionText~~,\n ~~actionTheme,\n~~ onClickAction,\n onClickClose,\n responseStatus,\n ~~actionDisabled~~,\n ~~closeDisabled,\n~~ subActionArea,\n ~~decorators,\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 ~~closeDisabled~~={~~closeDisabled~~}\n ~~actionDisabled~~={~~actionDisabled~~}\n loading={calcedResponseStatus.isProcessing}\n ~~actionTheme={actionTheme}\n decorators={decorators}\n actionText={actionText}\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~~<\n~~ ActionDialogContentInnerProps~~,\n \|~~ 'onClickClose'\n \| 'onClickAction'~~\n \|~~ ~~'closeDisabled'\n \|~~ ~~'actionDisabled'~~\n \| ~~'actionTheme'~~\n \| ~~'decorators'~~\n ~~\| 'actionText'\n > & {~~ loading: boolean; className: string }\n>(\n ({\n onClickClose~~,\n~~ onClickAction~~,\n closeDisabled,\n actionDisabled,\n~~ loading~~,\n actionTheme,\n decorators,\n actionText,\n~~ className~~,\n~~ }) => {\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={~~closeDisabled~~ \|\| loading}\n ~~decorators~~={~~decorators~~}\n />\n <ActionButton\n variant={~~actionTheme~~}\n disabled={~~actionDisabled~~}\n loading={loading}\n onClick={handleClickAction}\n >\n {~~actionText~~}\n </ActionButton>\n </Cluster>\n )\n }~~,\n~~)\n\nconst ActionButton = memo<\n PropsWithChildren<{\n variant: ~~ActionDialogContentInnerProps~~['~~actionTheme~~']\n disabled: ~~ActionDialogContentInnerProps~~['~~actionDisabled~~']\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 Pick~~<~~ActionDialogContentInnerProps, 'decorators'> &~~ {\n onClick: ActionDialogContentInnerProps['onClickClose']\n disabled: boolean\n }\n>(({ onClick, disabled, ~~decorators~~ }) => {\n const { localize } = useIntl()\n\n const ~~decoratorDefaultTexts~~ = useMemo(\n () ~~=> ({\~~n ~~closeButtonLabel:~~ localize({\n id: 'smarthr-ui/ActionDialog/closeButtonLabel',\n defaultText: 'キャンセル',\n }),\n ~~}),\n~~ [localize],\n )\n\n ~~const decorated = useDecorators(decoratorDefaultTexts, decorators)\n\n~~ return (\n <Button onClick={onClick} disabled={disabled} className=\"smarthr-ui-Dialog-closeButton\">\n {~~decorated.closeButtonLabel~~}\n </Button>\n )\n})\n"],"names":[],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyDA~~;AAEO;~~AAeL~~;AAEA;AACE;;;;;;;;;~~AAsCJ~~;AAEA;~~AAuBI~~;;AAGE~~;;AAqBJ~~;~~AAGF~~;AAoBA;~~AAME;AAEA~~;;~~AAGM~~;AACA;;~~AAEH;;;AAWL~~;;"}
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;;"}

package/lib/components/Dialog/ControlledActionDialog/ControlledActionDialog.cjs CHANGED Viewed

@@ -3,6 +3,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
+var hooks_useObjectAttributes = require('../../../hooks/useObjectAttributes.cjs');
 var components_Dialog_DialogContentInner = require('../DialogContentInner.cjs');
 var components_Dialog_useDialogPortal = require('../useDialogPortal.cjs');
 var components_Dialog_useObjectHeading = require('../useObjectHeading.cjs');
@@ -11,9 +12,12 @@ var components_Dialog_ControlledActionDialog_ActionDialogContentInner = require(
 const headingObjectConverter = (text) => ({
     text,
 });
-const ControlledActionDialog = ({ children, heading: orgHeading, contentBgColor, contentPadding, actionText, actionTheme, onClickAction, onClickClose, onPressEscape = onClickClose, responseStatus, actionDisabled, closeDisabled, subActionArea, className, portalParent, decorators, id, isOpen, ...rest }) => {
+const buttonObjectConverter = (text) => ({ text });
+const ControlledActionDialog = ({ children, heading: orgHeading, contentBgColor, contentPadding, actionButton: orgActionButton, onClickAction, onClickClose, onPressEscape = onClickClose, responseStatus, closeButton: orgCloseButton, subActionArea, className, portalParent, id, isOpen, ...rest }) => {
     const { createPortal } = components_Dialog_useDialogPortal.useDialogPortal(portalParent, id);
     const heading = components_Dialog_useObjectHeading.useObjectHeading(orgHeading, headingObjectConverter);
+    const actionButton = hooks_useObjectAttributes.useObjectAttributes(orgActionButton, buttonObjectConverter);
+    const closeButton = hooks_useObjectAttributes.useObjectAttributes(orgCloseButton, buttonObjectConverter);
     const actualOnClickClose = React.useCallback(() => {
         if (isOpen) {
             onClickClose();
@@ -24,7 +28,7 @@ const ControlledActionDialog = ({ children, heading: orgHeading, contentBgColor,
             onClickAction(e, helpers);
         }
     }, [isOpen, onClickAction]);
-    return createPortal(jsxRuntime.jsx(components_Dialog_DialogContentInner.DialogContentInner, { ...rest, isOpen: isOpen, ariaLabelledby: heading.id, className: className, onPressEscape: closeDisabled ? undefined : onPressEscape, children: jsxRuntime.jsx(components_Dialog_ControlledActionDialog_ActionDialogContentInner.ActionDialogContentInner, { heading: heading, contentBgColor: contentBgColor, contentPadding: contentPadding, actionText: actionText, actionTheme: actionTheme, actionDisabled: actionDisabled, closeDisabled: closeDisabled, onClickClose: actualOnClickClose, onClickAction: actualOnClickAction, subActionArea: subActionArea, responseStatus: responseStatus, decorators: decorators, children: children }) }));
+    return createPortal(jsxRuntime.jsx(components_Dialog_DialogContentInner.DialogContentInner, { ...rest, isOpen: isOpen, ariaLabelledby: heading.id, className: className, onPressEscape: closeButton.disabled ? undefined : onPressEscape, children: jsxRuntime.jsx(components_Dialog_ControlledActionDialog_ActionDialogContentInner.ActionDialogContentInner, { heading: heading, contentBgColor: contentBgColor, contentPadding: contentPadding, actionButton: actionButton, closeButton: closeButton, onClickClose: actualOnClickClose, onClickAction: actualOnClickAction, subActionArea: subActionArea, responseStatus: responseStatus, children: children }) }));
 };
 exports.ControlledActionDialog = ControlledActionDialog;

package/lib/components/Dialog/ControlledActionDialog/ControlledActionDialog.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ControlledActionDialog.cjs","sources":["../../../../src/components/Dialog/ControlledActionDialog/ControlledActionDialog.tsx"],"sourcesContent":["'use client'\n\nimport { type ComponentProps, type FC, type ReactNode, useCallback } from 'react'\n\nimport { DialogContentInner } from '../DialogContentInner'\nimport { useDialogPortal } from '../useDialogPortal'\nimport { useObjectHeading } from '../useObjectHeading'\n\nimport {\n ActionDialogContentInner,\n type ActionDialogContentInnerProps,\n type ActionDialogHelpers,\n} from './ActionDialogContentInner'\n\nimport type { DialogProps } from '../types'\n\ntype ObjectHeadingType = Omit<ActionDialogContentInnerProps['heading'], 'id'>\ntype HeadingType = ReactNode \| ObjectHeadingType\n\ntype AbstractProps = Omit<ActionDialogContentInnerProps, 'heading'> &\n DialogProps & {\n heading: HeadingType\n }\ntype Props = AbstractProps & Omit<ComponentProps<'div'>, keyof AbstractProps>\n\nconst headingObjectConverter = (text: ReactNode) => ({\n text,\n})\n\nexport const ControlledActionDialog: FC<Props> = ({\n children,\n heading: orgHeading,\n contentBgColor,\n contentPadding,\n ~~actionText~~,\n ~~actionTheme,\n~~ onClickAction,\n onClickClose,\n onPressEscape = onClickClose,\n responseStatus,\n ~~actionDisabled~~,\n ~~closeDisabled,\n~~ subActionArea,\n className,\n portalParent,\n ~~decorators,\n~~ id,\n isOpen,\n ...rest\n}) => {\n const { createPortal } = useDialogPortal(portalParent, id)\n const heading = useObjectHeading<HeadingType, ObjectHeadingType>(\n orgHeading,\n headingObjectConverter,\n )\n\n const actualOnClickClose = useCallback(() => {\n if (isOpen) {\n onClickClose()\n }\n }, [isOpen, onClickClose])\n\n const actualOnClickAction = useCallback(\n (e: React.MouseEvent<Element>, helpers: ActionDialogHelpers) => {\n if (isOpen) {\n onClickAction(e, helpers)\n }\n },\n [isOpen, onClickAction],\n )\n\n return createPortal(\n <DialogContentInner\n {...rest}\n isOpen={isOpen}\n ariaLabelledby={heading.id}\n className={className}\n onPressEscape={~~closeDisabled~~ ? undefined : onPressEscape}\n >\n <ActionDialogContentInner\n heading={heading}\n contentBgColor={contentBgColor}\n contentPadding={contentPadding}\n ~~actionText~~={~~actionText~~}\n ~~actionTheme~~={~~actionTheme~~}\n ~~actionDisabled={actionDisabled}\n closeDisabled={closeDisabled}\n~~ onClickClose={actualOnClickClose}\n onClickAction={actualOnClickAction}\n subActionArea={subActionArea}\n responseStatus={responseStatus}\n ~~decorators={decorators}\n~~ >\n {children}\n </ActionDialogContentInner>\n </DialogContentInner>,\n )\n}\n"],"names":[],"mappings":"~~;;;;;;;;;;AAyBA~~;;AAEC~~;;;;AA6BC~~;;AAEI;;AAEJ;;;AAKM;;AAEJ;AAIF;~~AA0BF~~;;"}
1	+ {"version":3,"file":"ControlledActionDialog.cjs","sources":["../../../../src/components/Dialog/ControlledActionDialog/ControlledActionDialog.tsx"],"sourcesContent":["'use client'\n\nimport { type ComponentProps, type FC, type ReactNode, useCallback } from 'react'\n\nimport { useObjectAttributes } from '../../../hooks/useObjectAttributes'\nimport { DialogContentInner } from '../DialogContentInner'\nimport { useDialogPortal } from '../useDialogPortal'\nimport { useObjectHeading } from '../useObjectHeading'\n\nimport {\n ActionDialogContentInner,\n type ActionDialogContentInnerProps,\n type ActionDialogHelpers,\n} from './ActionDialogContentInner'\n\nimport type { DialogProps } from '../types'\n\ntype ObjectHeadingType = Omit<ActionDialogContentInnerProps['heading'], 'id'>\ntype HeadingType = ReactNode \| ObjectHeadingType\ntype ObjectActionButtonType = ActionDialogContentInnerProps['actionButton']\ntype ObjectCloseButtonType = ActionDialogContentInnerProps['closeButton']\n\ntype AbstractProps = Omit<\n ActionDialogContentInnerProps,\n 'heading' \| 'actionButton' \| 'closeButton'\n> &\n DialogProps & {\n heading: HeadingType\n actionButton: ReactNode \| ObjectActionButtonType\n closeButton?: ReactNode \| ObjectCloseButtonType\n }\ntype Props = AbstractProps & Omit<ComponentProps<'div'>, keyof AbstractProps>\n\nconst headingObjectConverter = (text: ReactNode) => ({\n text,\n})\nconst buttonObjectConverter = (text: ReactNode) => ({ text })\n\nexport const ControlledActionDialog: FC<Props> = ({\n children,\n heading: orgHeading,\n contentBgColor,\n contentPadding,\n actionButton: orgActionButton,\n onClickAction,\n onClickClose,\n onPressEscape = onClickClose,\n responseStatus,\n closeButton: orgCloseButton,\n subActionArea,\n className,\n portalParent,\n id,\n isOpen,\n ...rest\n}) => {\n const { createPortal } = useDialogPortal(portalParent, id)\n const heading = useObjectHeading<HeadingType, ObjectHeadingType>(\n orgHeading,\n headingObjectConverter,\n )\n const actionButton = useObjectAttributes<\n ReactNode \| ObjectActionButtonType,\n ObjectActionButtonType\n >(orgActionButton, buttonObjectConverter)\n const closeButton = useObjectAttributes<ReactNode \| ObjectCloseButtonType, ObjectCloseButtonType>(\n orgCloseButton,\n buttonObjectConverter,\n )\n\n const actualOnClickClose = useCallback(() => {\n if (isOpen) {\n onClickClose()\n }\n }, [isOpen, onClickClose])\n\n const actualOnClickAction = useCallback(\n (e: React.MouseEvent<Element>, helpers: ActionDialogHelpers) => {\n if (isOpen) {\n onClickAction(e, helpers)\n }\n },\n [isOpen, onClickAction],\n )\n\n return createPortal(\n <DialogContentInner\n {...rest}\n isOpen={isOpen}\n ariaLabelledby={heading.id}\n className={className}\n onPressEscape={closeButton.disabled ? undefined : onPressEscape}\n >\n <ActionDialogContentInner\n heading={heading}\n contentBgColor={contentBgColor}\n contentPadding={contentPadding}\n actionButton={actionButton}\n closeButton={closeButton}\n onClickClose={actualOnClickClose}\n onClickAction={actualOnClickAction}\n subActionArea={subActionArea}\n responseStatus={responseStatus}\n >\n {children}\n </ActionDialogContentInner>\n </DialogContentInner>,\n )\n}\n"],"names":[],"mappings":";;;;;;;;;;;AAiCA;;AAEC;AACD;;;;;;AAkCE;;AAEI;;AAEJ;;;AAKM;;AAEJ;AAIF;AAuBF;;"}

package/lib/components/Dialog/ControlledActionDialog/ControlledActionDialog.d.ts CHANGED Viewed

@@ -3,8 +3,12 @@ import { type ActionDialogContentInnerProps } from './ActionDialogContentInner';
 import type { DialogProps } from '../types';
 type ObjectHeadingType = Omit<ActionDialogContentInnerProps['heading'], 'id'>;
 type HeadingType = ReactNode | ObjectHeadingType;
-type AbstractProps = Omit<ActionDialogContentInnerProps, 'heading'> & DialogProps & {
+type ObjectActionButtonType = ActionDialogContentInnerProps['actionButton'];
+type ObjectCloseButtonType = ActionDialogContentInnerProps['closeButton'];
+type AbstractProps = Omit<ActionDialogContentInnerProps, 'heading' | 'actionButton' | 'closeButton'> & DialogProps & {
     heading: HeadingType;
+    actionButton: ReactNode | ObjectActionButtonType;
+    closeButton?: ReactNode | ObjectCloseButtonType;
 };
 type Props = AbstractProps & Omit<ComponentProps<'div'>, keyof AbstractProps>;
 export declare const ControlledActionDialog: FC<Props>;