@pega/cosmos-react-core 3.0.0-dev.3.0 → 3.0.0-dev.4.2
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/lib/components/AppShell/AppShell.d.ts.map +1 -1
- package/lib/components/AppShell/AppShell.js +58 -40
- package/lib/components/AppShell/AppShell.js.map +1 -1
- package/lib/components/AppShell/AppShell.styles.d.ts +1 -3
- package/lib/components/AppShell/AppShell.styles.d.ts.map +1 -1
- package/lib/components/AppShell/AppShell.styles.js +11 -4
- package/lib/components/AppShell/AppShell.styles.js.map +1 -1
- package/lib/components/AppShell/AppShell.types.d.ts +5 -1
- package/lib/components/AppShell/AppShell.types.d.ts.map +1 -1
- package/lib/components/AppShell/AppShell.types.js.map +1 -1
- package/lib/components/Badges/Selection.d.ts.map +1 -1
- package/lib/components/Badges/Selection.js +3 -2
- package/lib/components/Badges/Selection.js.map +1 -1
- package/lib/components/ComboBox/ComboBox.d.ts.map +1 -1
- package/lib/components/ComboBox/ComboBox.js +10 -3
- package/lib/components/ComboBox/ComboBox.js.map +1 -1
- package/lib/components/ComboBox/MultiSelectInput/MultiSelectInput.d.ts.map +1 -1
- package/lib/components/ComboBox/MultiSelectInput/MultiSelectInput.js +8 -6
- package/lib/components/ComboBox/MultiSelectInput/MultiSelectInput.js.map +1 -1
- package/lib/components/Configuration/Configuration.d.ts.map +1 -1
- package/lib/components/Configuration/Configuration.js +2 -1
- package/lib/components/Configuration/Configuration.js.map +1 -1
- package/lib/components/Drawer/Drawer.d.ts.map +1 -1
- package/lib/components/Drawer/Drawer.js +1 -1
- package/lib/components/Drawer/Drawer.js.map +1 -1
- package/lib/components/FieldGroup/FieldGroup.d.ts +2 -0
- package/lib/components/FieldGroup/FieldGroup.d.ts.map +1 -1
- package/lib/components/FieldGroup/FieldGroup.js +18 -7
- package/lib/components/FieldGroup/FieldGroup.js.map +1 -1
- package/lib/components/FieldGroup/FieldGroupList.d.ts.map +1 -1
- package/lib/components/FieldGroup/FieldGroupList.js +16 -13
- package/lib/components/FieldGroup/FieldGroupList.js.map +1 -1
- package/lib/components/File/FileUploadItem.js +1 -1
- package/lib/components/File/FileUploadItem.js.map +1 -1
- package/lib/components/Form/Form.d.ts.map +1 -1
- package/lib/components/Form/Form.js +2 -1
- package/lib/components/Form/Form.js.map +1 -1
- package/lib/components/HTML/HTML.d.ts +13 -0
- package/lib/components/HTML/HTML.d.ts.map +1 -0
- package/lib/components/HTML/HTML.js +148 -0
- package/lib/components/HTML/HTML.js.map +1 -0
- package/lib/components/HTML/index.d.ts +2 -0
- package/lib/components/HTML/index.d.ts.map +1 -0
- package/lib/components/HTML/index.js +2 -0
- package/lib/components/HTML/index.js.map +1 -0
- package/lib/components/Icon/iconNames.d.ts +1 -1
- package/lib/components/Icon/iconNames.d.ts.map +1 -1
- package/lib/components/Icon/iconNames.js +1 -0
- package/lib/components/Icon/iconNames.js.map +1 -1
- package/lib/components/Icon/icons/ai-assist.icon.d.ts +4 -0
- package/lib/components/Icon/icons/ai-assist.icon.d.ts.map +1 -0
- package/lib/components/Icon/icons/ai-assist.icon.js +6 -0
- package/lib/components/Icon/icons/ai-assist.icon.js.map +1 -0
- package/lib/components/Icon/icons/help-solid.icon.js +1 -1
- package/lib/components/Icon/icons/help-solid.icon.js.map +1 -1
- package/lib/components/Icon/icons/help.icon.js +1 -1
- package/lib/components/Icon/icons/help.icon.js.map +1 -1
- package/lib/components/Icon/icons/information-solid.icon.d.ts.map +1 -1
- package/lib/components/Icon/icons/information-solid.icon.js +1 -1
- package/lib/components/Icon/icons/information-solid.icon.js.map +1 -1
- package/lib/components/Icon/icons/information.icon.js +1 -1
- package/lib/components/Icon/icons/information.icon.js.map +1 -1
- package/lib/components/Icon/icons/open.icon.js +1 -1
- package/lib/components/Icon/icons/open.icon.js.map +1 -1
- package/lib/components/ListToolbar/ListToolbar.d.ts +6 -0
- package/lib/components/ListToolbar/ListToolbar.d.ts.map +1 -0
- package/lib/components/ListToolbar/ListToolbar.js +110 -0
- package/lib/components/ListToolbar/ListToolbar.js.map +1 -0
- package/lib/components/ListToolbar/ListToolbar.styles.d.ts +4 -0
- package/lib/components/ListToolbar/ListToolbar.styles.d.ts.map +1 -0
- package/lib/components/ListToolbar/ListToolbar.styles.js +29 -0
- package/lib/components/ListToolbar/ListToolbar.styles.js.map +1 -0
- package/lib/components/ListToolbar/ListToolbar.types.d.ts +73 -0
- package/lib/components/ListToolbar/ListToolbar.types.d.ts.map +1 -0
- package/lib/components/ListToolbar/ListToolbar.types.js +2 -0
- package/lib/components/ListToolbar/ListToolbar.types.js.map +1 -0
- package/lib/components/ListToolbar/QueryOptionPopover.d.ts +12 -0
- package/lib/components/ListToolbar/QueryOptionPopover.d.ts.map +1 -0
- package/lib/components/ListToolbar/QueryOptionPopover.js +66 -0
- package/lib/components/ListToolbar/QueryOptionPopover.js.map +1 -0
- package/lib/components/ListToolbar/index.d.ts +3 -0
- package/lib/components/ListToolbar/index.d.ts.map +1 -0
- package/lib/components/ListToolbar/index.js +2 -0
- package/lib/components/ListToolbar/index.js.map +1 -0
- package/lib/components/Menu/Menu.d.ts.map +1 -1
- package/lib/components/Menu/Menu.js +10 -39
- package/lib/components/Menu/Menu.js.map +1 -1
- package/lib/components/MenuButton/MenuButton.d.ts.map +1 -1
- package/lib/components/MenuButton/MenuButton.js +1 -0
- package/lib/components/MenuButton/MenuButton.js.map +1 -1
- package/lib/components/Popover/Popover.styles.d.ts.map +1 -1
- package/lib/components/Popover/Popover.styles.js +45 -20
- package/lib/components/Popover/Popover.styles.js.map +1 -1
- package/lib/hooks/index.d.ts +1 -1
- package/lib/hooks/index.d.ts.map +1 -1
- package/lib/hooks/index.js +1 -1
- package/lib/hooks/index.js.map +1 -1
- package/lib/hooks/useActiveDescendant.d.ts +9 -0
- package/lib/hooks/useActiveDescendant.d.ts.map +1 -1
- package/lib/hooks/useActiveDescendant.js +29 -0
- package/lib/hooks/useActiveDescendant.js.map +1 -1
- package/lib/hooks/useArrows.d.ts +2 -1
- package/lib/hooks/useArrows.d.ts.map +1 -1
- package/lib/hooks/useArrows.js +3 -2
- package/lib/hooks/useArrows.js.map +1 -1
- package/lib/hooks/useI18n.d.ts +62 -0
- package/lib/hooks/useI18n.d.ts.map +1 -1
- package/lib/hooks/useItemIntersection.d.ts.map +1 -1
- package/lib/hooks/useItemIntersection.js +18 -20
- package/lib/hooks/useItemIntersection.js.map +1 -1
- package/lib/i18n/default.d.ts +62 -0
- package/lib/i18n/default.d.ts.map +1 -1
- package/lib/i18n/default.js +70 -5
- package/lib/i18n/default.js.map +1 -1
- package/lib/i18n/i18n.d.ts +124 -0
- package/lib/i18n/i18n.d.ts.map +1 -1
- package/lib/index.d.ts +4 -0
- package/lib/index.d.ts.map +1 -1
- package/lib/index.js +4 -0
- package/lib/index.js.map +1 -1
- package/lib/styles/gradients.d.ts +102 -0
- package/lib/styles/gradients.d.ts.map +1 -0
- package/lib/styles/gradients.js +232 -0
- package/lib/styles/gradients.js.map +1 -0
- package/lib/styles/index.d.ts +1 -0
- package/lib/styles/index.d.ts.map +1 -1
- package/lib/styles/index.js +1 -0
- package/lib/styles/index.js.map +1 -1
- package/lib/theme/themes/buildTheme.json +1 -2
- package/package.json +10 -9
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
// This file is autogenerated. Any changes will be overwritten.
|
|
3
3
|
export const name = 'information-solid';
|
|
4
|
-
export const Component = () => (_jsx("path", { d: '
|
|
4
|
+
export const Component = () => (_jsx("path", { d: 'm3.6622276 21.3377724c-2.44121957-2.4412196-3.6622276-5.3706831-3.6622276-8.8377724 0-3.46708933 1.22100803-6.39655282 3.6622276-8.8377724 2.44121958-2.44121957 5.37068307-3.6622276 8.8377724-3.6622276 3.4670893 0 6.3965528 1.22100803 8.8377724 3.6622276 2.4412196 2.44121958 3.6622276 5.37068307 3.6622276 8.8377724 0 3.4670893-1.221008 6.3965528-3.6622276 8.8377724s-5.3706831 3.6622276-8.8377724 3.6622276c-3.46708933 0-6.39655282-1.221008-8.8377724-3.6622276zm10.0877724-16.8377724c.916782 0 1.75.75004827 1.75 1.75s-.7500483 1.75-1.75 1.75c-.916782 0-1.75-.75004827-1.75-1.75 0-1.00017697.7500483-1.75 1.75-1.75zm-1.6840618 15.5c-1.3733775 0-2.36512098-1.1294309-1.9835384-2.4721512l1.6311339-4.7396064c.1526382-.5529194.3896555-1.5606002-.1443951-1.5606002-.3560337 0-.7911265.1779192-1.3052783.5337575.3813969-1.1848882 1.4494672-1.7613997 2.6702015-1.7613997 1.3733775 0 2.365121 1.1294309 1.9835384 2.4721512l-1.6311339 4.7396064c-.1526382.5529194-.1834504 1.4538487.3506002 1.4538487.3560338 0 .7223915-.1423354 1.0990732-.427006-.3813969 1.1848882-1.4494672 1.7613997-2.6702015 1.7613997z', fillRule: 'evenodd' }, void 0));
|
|
5
5
|
export const viewBox = '0 0 25 25';
|
|
6
6
|
//# sourceMappingURL=information-solid.icon.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"information-solid.icon.js","sourceRoot":"","sources":["../../../../src/components/Icon/icons/information-solid.icon.tsx"],"names":[],"mappings":";AAAA,+DAA+D;AAC/D,MAAM,CAAC,MAAM,IAAI,GAAG,mBAAmB,CAAC;AAExC,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CAC7B,
|
|
1
|
+
{"version":3,"file":"information-solid.icon.js","sourceRoot":"","sources":["../../../../src/components/Icon/icons/information-solid.icon.tsx"],"names":[],"mappings":";AAAA,+DAA+D;AAC/D,MAAM,CAAC,MAAM,IAAI,GAAG,mBAAmB,CAAC;AAExC,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CAC7B,eACE,CAAC,EAAC,6kCAA6kC,EAC/kC,QAAQ,EAAC,SAAS,WAClB,CACH,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,WAAW,CAAC","sourcesContent":["// This file is autogenerated. Any changes will be overwritten.\nexport const name = 'information-solid';\n\nexport const Component = () => (\n <path\n d='m3.6622276 21.3377724c-2.44121957-2.4412196-3.6622276-5.3706831-3.6622276-8.8377724 0-3.46708933 1.22100803-6.39655282 3.6622276-8.8377724 2.44121958-2.44121957 5.37068307-3.6622276 8.8377724-3.6622276 3.4670893 0 6.3965528 1.22100803 8.8377724 3.6622276 2.4412196 2.44121958 3.6622276 5.37068307 3.6622276 8.8377724 0 3.4670893-1.221008 6.3965528-3.6622276 8.8377724s-5.3706831 3.6622276-8.8377724 3.6622276c-3.46708933 0-6.39655282-1.221008-8.8377724-3.6622276zm10.0877724-16.8377724c.916782 0 1.75.75004827 1.75 1.75s-.7500483 1.75-1.75 1.75c-.916782 0-1.75-.75004827-1.75-1.75 0-1.00017697.7500483-1.75 1.75-1.75zm-1.6840618 15.5c-1.3733775 0-2.36512098-1.1294309-1.9835384-2.4721512l1.6311339-4.7396064c.1526382-.5529194.3896555-1.5606002-.1443951-1.5606002-.3560337 0-.7911265.1779192-1.3052783.5337575.3813969-1.1848882 1.4494672-1.7613997 2.6702015-1.7613997 1.3733775 0 2.365121 1.1294309 1.9835384 2.4721512l-1.6311339 4.7396064c-.1526382.5529194-.1834504 1.4538487.3506002 1.4538487.3560338 0 .7223915-.1423354 1.0990732-.427006-.3813969 1.1848882-1.4494672 1.7613997-2.6702015 1.7613997z'\n fillRule='evenodd'\n />\n);\n\nexport const viewBox = '0 0 25 25';\n"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
// This file is autogenerated. Any changes will be overwritten.
|
|
3
3
|
export const name = 'information';
|
|
4
|
-
export const Component = () => (_jsx("path", { d: '
|
|
4
|
+
export const Component = () => (_jsx("path", { d: 'm3.6622276 21.3377724c-2.44121957-2.4412196-3.6622276-5.3706831-3.6622276-8.8377724 0-3.46708933 1.22100803-6.39655282 3.6622276-8.8377724 2.44121958-2.44121957 5.37068307-3.6622276 8.8377724-3.6622276 3.4670893 0 6.3965528 1.22100803 8.8377724 3.6622276 2.4412196 2.44121958 3.6622276 5.37068307 3.6622276 8.8377724 0 3.4670893-1.221008 6.3965528-3.6622276 8.8377724s-5.3706831 3.6622276-8.8377724 3.6622276c-3.46708933 0-6.39655282-1.221008-8.8377724-3.6622276zm-2.7044151-8.8949616c0 2.3363736.63272318 4.4774541 1.94659629 6.3756088 1.26544637 1.9465811 2.96832118 3.3580905 5.1102122 4.2829547 2.14189101.9248642 4.37984161 1.1193635 6.66701291.6811446s4.2337675-1.5083622 5.8890095-3.1635912c1.6060213-1.6060088 2.6769668-3.6010162 3.1636159-5.8889635.4382223-2.2871534.2429276-4.477454-.6811499-6.61853446-.8756508-2.14108042-2.2871713-3.84473581-4.1853408-5.15859865-1.9465963-1.31386285-4.0876934-1.94658109-6.4240853-1.94658109-3.16361594 0-5.8397889 1.11936351-8.07853341 3.30966417-2.23874451 2.23872703-3.35811677 4.96409932-3.40654351 8.12769053zm12.7921875-7.9428108c.916782 0 1.75.75004827 1.75 1.75s-.7500483 1.75-1.75 1.75c-.916782 0-1.75-.75004827-1.75-1.75 0-1.00017697.7500483-1.75 1.75-1.75zm-1.6840618 15.5c-1.3733775 0-2.36512098-1.1294309-1.9835384-2.4721512l1.6311339-4.7396064c.1526382-.5529194.3896555-1.5606002-.1443951-1.5606002-.3560337 0-.7911265.1779192-1.3052783.5337575.3813969-1.1848882 1.4494672-1.7613997 2.6702015-1.7613997 1.3733775 0 2.365121 1.1294309 1.9835384 2.4721512l-1.6311339 4.7396064c-.1526382.5529194-.1834504 1.4538487.3506002 1.4538487.3560338 0 .7223915-.1423354 1.0990732-.427006-.3813969 1.1848882-1.4494672 1.7613997-2.6702015 1.7613997z' }, void 0));
|
|
5
5
|
export const viewBox = '0 0 25 25';
|
|
6
6
|
//# sourceMappingURL=information.icon.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"information.icon.js","sourceRoot":"","sources":["../../../../src/components/Icon/icons/information.icon.tsx"],"names":[],"mappings":";AAAA,+DAA+D;AAC/D,MAAM,CAAC,MAAM,IAAI,GAAG,aAAa,CAAC;AAElC,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CAC7B,eAAM,CAAC,EAAC,
|
|
1
|
+
{"version":3,"file":"information.icon.js","sourceRoot":"","sources":["../../../../src/components/Icon/icons/information.icon.tsx"],"names":[],"mappings":";AAAA,+DAA+D;AAC/D,MAAM,CAAC,MAAM,IAAI,GAAG,aAAa,CAAC;AAElC,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CAC7B,eAAM,CAAC,EAAC,iqDAAiqD,WAAG,CAC7qD,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,WAAW,CAAC","sourcesContent":["// This file is autogenerated. Any changes will be overwritten.\nexport const name = 'information';\n\nexport const Component = () => (\n <path d='m3.6622276 21.3377724c-2.44121957-2.4412196-3.6622276-5.3706831-3.6622276-8.8377724 0-3.46708933 1.22100803-6.39655282 3.6622276-8.8377724 2.44121958-2.44121957 5.37068307-3.6622276 8.8377724-3.6622276 3.4670893 0 6.3965528 1.22100803 8.8377724 3.6622276 2.4412196 2.44121958 3.6622276 5.37068307 3.6622276 8.8377724 0 3.4670893-1.221008 6.3965528-3.6622276 8.8377724s-5.3706831 3.6622276-8.8377724 3.6622276c-3.46708933 0-6.39655282-1.221008-8.8377724-3.6622276zm-2.7044151-8.8949616c0 2.3363736.63272318 4.4774541 1.94659629 6.3756088 1.26544637 1.9465811 2.96832118 3.3580905 5.1102122 4.2829547 2.14189101.9248642 4.37984161 1.1193635 6.66701291.6811446s4.2337675-1.5083622 5.8890095-3.1635912c1.6060213-1.6060088 2.6769668-3.6010162 3.1636159-5.8889635.4382223-2.2871534.2429276-4.477454-.6811499-6.61853446-.8756508-2.14108042-2.2871713-3.84473581-4.1853408-5.15859865-1.9465963-1.31386285-4.0876934-1.94658109-6.4240853-1.94658109-3.16361594 0-5.8397889 1.11936351-8.07853341 3.30966417-2.23874451 2.23872703-3.35811677 4.96409932-3.40654351 8.12769053zm12.7921875-7.9428108c.916782 0 1.75.75004827 1.75 1.75s-.7500483 1.75-1.75 1.75c-.916782 0-1.75-.75004827-1.75-1.75 0-1.00017697.7500483-1.75 1.75-1.75zm-1.6840618 15.5c-1.3733775 0-2.36512098-1.1294309-1.9835384-2.4721512l1.6311339-4.7396064c.1526382-.5529194.3896555-1.5606002-.1443951-1.5606002-.3560337 0-.7911265.1779192-1.3052783.5337575.3813969-1.1848882 1.4494672-1.7613997 2.6702015-1.7613997 1.3733775 0 2.365121 1.1294309 1.9835384 2.4721512l-1.6311339 4.7396064c-.1526382.5529194-.1834504 1.4538487.3506002 1.4538487.3560338 0 .7223915-.1423354 1.0990732-.427006-.3813969 1.1848882-1.4494672 1.7613997-2.6702015 1.7613997z' />\n);\n\nexport const viewBox = '0 0 25 25';\n"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
// This file is autogenerated. Any changes will be overwritten.
|
|
3
3
|
export const name = 'open';
|
|
4
|
-
export const Component = () => (_jsx("path", { d: '
|
|
4
|
+
export const Component = () => (_jsx("path", { d: 'm20.9992187 12h-.9578125c0-4.21614583 0-6.32421875 0-6.32421875s-2.975 2.975-8.925 8.92499995l-.7179687-.7179687c5.95-5.95 8.925-8.925 8.925-8.925s-2.1078125 0-6.3234375 0v-.9578125h8zm-1.9992187 2h-1v5.5c0 .3351562-.1648438.5-.5.5h-12.01484375c-.33515625 0-.5265625-.1648438-.5265625-.5v-12.015625c0-.33515625.19140625-.5265625.5265625-.5265625h5.51484375v-.9578125h-5.51484375c-.43125 0-.76640625.14375-1.05390625.43125s-.43125.62265625-.43125 1.05390625v12.01484375c0 .43125.14375.7125.43125 1s.62265625.5 1.05390625.5h12.01484375c.43125 0 .7125-.2125 1-.5s.5-.56875.5-1c0 0 0-1.8333333 0-5.5z' }, void 0));
|
|
5
5
|
export const viewBox = '0 0 25 25';
|
|
6
6
|
//# sourceMappingURL=open.icon.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"open.icon.js","sourceRoot":"","sources":["../../../../src/components/Icon/icons/open.icon.tsx"],"names":[],"mappings":";AAAA,+DAA+D;AAC/D,MAAM,CAAC,MAAM,IAAI,GAAG,MAAM,CAAC;AAE3B,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CAC7B,eAAM,CAAC,EAAC,
|
|
1
|
+
{"version":3,"file":"open.icon.js","sourceRoot":"","sources":["../../../../src/components/Icon/icons/open.icon.tsx"],"names":[],"mappings":";AAAA,+DAA+D;AAC/D,MAAM,CAAC,MAAM,IAAI,GAAG,MAAM,CAAC;AAE3B,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CAC7B,eAAM,CAAC,EAAC,slBAAslB,WAAG,CAClmB,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,WAAW,CAAC","sourcesContent":["// This file is autogenerated. Any changes will be overwritten.\nexport const name = 'open';\n\nexport const Component = () => (\n <path d='m20.9992187 12h-.9578125c0-4.21614583 0-6.32421875 0-6.32421875s-2.975 2.975-8.925 8.92499995l-.7179687-.7179687c5.95-5.95 8.925-8.925 8.925-8.925s-2.1078125 0-6.3234375 0v-.9578125h8zm-1.9992187 2h-1v5.5c0 .3351562-.1648438.5-.5.5h-12.01484375c-.33515625 0-.5265625-.1648438-.5265625-.5v-12.015625c0-.33515625.19140625-.5265625.5265625-.5265625h5.51484375v-.9578125h-5.51484375c-.43125 0-.76640625.14375-1.05390625.43125s-.43125.62265625-.43125 1.05390625v12.01484375c0 .43125.14375.7125.43125 1s.62265625.5 1.05390625.5h12.01484375c.43125 0 .7125-.2125 1-.5s.5-.56875.5-1c0 0 0-1.8333333 0-5.5z' />\n);\n\nexport const viewBox = '0 0 25 25';\n"]}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { FunctionComponent } from 'react';
|
|
2
|
+
import { ForwardProps } from '../../types';
|
|
3
|
+
import { ListToolbarProps } from './ListToolbar.types';
|
|
4
|
+
declare const ListToolbar: FunctionComponent<ListToolbarProps & ForwardProps>;
|
|
5
|
+
export default ListToolbar;
|
|
6
|
+
//# sourceMappingURL=ListToolbar.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ListToolbar.d.ts","sourceRoot":"","sources":["../../../src/components/ListToolbar/ListToolbar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EASlB,MAAM,OAAO,CAAC;AAKf,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAe3C,OAAO,EACL,gBAAgB,EAKjB,MAAM,qBAAqB,CAAC;AA2G7B,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CAqJnE,CAAC;AAEF,eAAe,WAAW,CAAC"}
|
|
@@ -0,0 +1,110 @@
|
|
|
1
|
+
import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
|
3
|
+
import Actions from '../Actions';
|
|
4
|
+
import Text from '../Text';
|
|
5
|
+
import Button from '../Button';
|
|
6
|
+
import { useBreakpoint, useI18n } from '../../hooks';
|
|
7
|
+
import Flex from '../Flex';
|
|
8
|
+
import SearchInput from '../SearchInput';
|
|
9
|
+
import Icon, { registerIcon } from '../Icon';
|
|
10
|
+
import * as filterIcon from '../Icon/icons/filter.icon';
|
|
11
|
+
import * as arrowUpDownIcon from '../Icon/icons/arrow-up-down.icon';
|
|
12
|
+
import * as rowIcon from '../Icon/icons/row.icon';
|
|
13
|
+
import * as plusIcon from '../Icon/icons/plus.icon';
|
|
14
|
+
import * as moreIcon from '../Icon/icons/more.icon';
|
|
15
|
+
import { hasProp } from '../../utils';
|
|
16
|
+
import MenuButton from '../MenuButton';
|
|
17
|
+
import { Count } from '../Badges';
|
|
18
|
+
import { StyledViewSelector, StyledSearchForm, StyledListToolbar } from './ListToolbar.styles';
|
|
19
|
+
import QueryOptionPopover from './QueryOptionPopover';
|
|
20
|
+
registerIcon(filterIcon, arrowUpDownIcon, rowIcon, plusIcon, moreIcon);
|
|
21
|
+
const CountMeta = ({ count }) => {
|
|
22
|
+
const t = useI18n();
|
|
23
|
+
return (_jsxs(Text, { variant: 'secondary', children: [count.total !== undefined && t('results_count', [count.total], { count: count.total }), count.total && count.selected && ' ', count.selected !== undefined &&
|
|
24
|
+
`(${t('selected_count', [count.selected], { count: count.selected })})`] }, void 0));
|
|
25
|
+
};
|
|
26
|
+
const QueryOptionButton = ({ id, queryOptionProps, iconOnly, setCurrentQueryOption }) => {
|
|
27
|
+
const t = useI18n();
|
|
28
|
+
let i18nKey;
|
|
29
|
+
let icon;
|
|
30
|
+
if (id === 'filter') {
|
|
31
|
+
i18nKey = 'filter';
|
|
32
|
+
icon = 'filter';
|
|
33
|
+
}
|
|
34
|
+
else if (id === 'sort') {
|
|
35
|
+
i18nKey = 'sort';
|
|
36
|
+
icon = 'arrow-up-down';
|
|
37
|
+
}
|
|
38
|
+
else if (id === 'group') {
|
|
39
|
+
i18nKey = 'group';
|
|
40
|
+
icon = 'row';
|
|
41
|
+
}
|
|
42
|
+
const text = t(i18nKey);
|
|
43
|
+
const variant = iconOnly ? 'simple' : 'text';
|
|
44
|
+
useEffect(() => {
|
|
45
|
+
if (!queryOptionProps || !hasProp(queryOptionProps, 'renderer')) {
|
|
46
|
+
return;
|
|
47
|
+
}
|
|
48
|
+
setCurrentQueryOption(cur => {
|
|
49
|
+
if (!cur)
|
|
50
|
+
return null;
|
|
51
|
+
return {
|
|
52
|
+
...cur,
|
|
53
|
+
props: queryOptionProps
|
|
54
|
+
};
|
|
55
|
+
});
|
|
56
|
+
}, [queryOptionProps, setCurrentQueryOption]);
|
|
57
|
+
if (hasProp(queryOptionProps, 'renderer')) {
|
|
58
|
+
return (_jsx("div", { children: _jsx(Button, { variant: variant, icon: iconOnly, label: iconOnly ? text : undefined, onClick: (e) => {
|
|
59
|
+
setCurrentQueryOption({
|
|
60
|
+
id,
|
|
61
|
+
props: queryOptionProps,
|
|
62
|
+
popoverTarget: e.currentTarget
|
|
63
|
+
});
|
|
64
|
+
}, children: _jsxs(Flex, { container: { inline: true, alignItems: 'center', gap: 1 }, as: 'span', children: [_jsx(Icon, { name: icon }, void 0), !iconOnly && text, !iconOnly && queryOptionProps.count && _jsx(Count, { children: queryOptionProps.count }, void 0)] }, void 0) }, void 0) }, void 0));
|
|
65
|
+
}
|
|
66
|
+
if (hasProp(queryOptionProps, 'items')) {
|
|
67
|
+
return (_jsx("div", { children: _jsx(MenuButton, { variant: variant, text: text, icon: icon, iconOnly: iconOnly, count: queryOptionProps.count, menu: {
|
|
68
|
+
mode: queryOptionProps.mode,
|
|
69
|
+
items: queryOptionProps.items.map(item => ({ ...item, primary: item.text })),
|
|
70
|
+
onItemClick: queryOptionProps.onItemClick
|
|
71
|
+
} }, void 0) }, void 0));
|
|
72
|
+
}
|
|
73
|
+
return null;
|
|
74
|
+
};
|
|
75
|
+
const ListToolbar = forwardRef(({ heading, onCreateNew, search, count, filter, sort, group, actions }, ref) => {
|
|
76
|
+
const t = useI18n();
|
|
77
|
+
const isSmallOrAbove = useBreakpoint('sm');
|
|
78
|
+
const isMediumOrAbove = useBreakpoint('md');
|
|
79
|
+
const actionsButtonRef = useRef(null);
|
|
80
|
+
const [queryOptionDialogState, setQueryOptionDialogState] = useState(null);
|
|
81
|
+
const createNewButton = useMemo(() => {
|
|
82
|
+
if (!onCreateNew)
|
|
83
|
+
return null;
|
|
84
|
+
const text = t('create_new');
|
|
85
|
+
return (_jsx(Button, { variant: isSmallOrAbove ? 'secondary' : 'simple', icon: !isSmallOrAbove, label: isSmallOrAbove ? undefined : text, onClick: onCreateNew, children: _jsxs(Flex, { as: 'span', container: { inline: true, alignItems: 'center', gap: 1 }, children: [_jsx(Icon, { name: 'plus' }, void 0), isSmallOrAbove && _jsx("span", { children: text }, void 0)] }, void 0) }, void 0));
|
|
86
|
+
}, [t, onCreateNew, isSmallOrAbove]);
|
|
87
|
+
const filterButton = filter && (_jsx(QueryOptionButton, { id: 'filter', queryOptionProps: filter, iconOnly: !isMediumOrAbove, setCurrentQueryOption: setQueryOptionDialogState }, void 0));
|
|
88
|
+
const sortButton = sort && (_jsx(QueryOptionButton, { id: 'sort', queryOptionProps: sort, iconOnly: !isMediumOrAbove, setCurrentQueryOption: setQueryOptionDialogState }, void 0));
|
|
89
|
+
const groupButton = group && (_jsx(QueryOptionButton, { id: 'group', queryOptionProps: group, iconOnly: !isMediumOrAbove, setCurrentQueryOption: setQueryOptionDialogState }, void 0));
|
|
90
|
+
const onQueryOptionCancel = useCallback(() => {
|
|
91
|
+
if (queryOptionDialogState?.props.onCancel() === false)
|
|
92
|
+
return;
|
|
93
|
+
setQueryOptionDialogState(null);
|
|
94
|
+
}, [queryOptionDialogState]);
|
|
95
|
+
const onQueryOptionSubmit = useCallback(() => {
|
|
96
|
+
if (queryOptionDialogState?.props.onSubmit() === false)
|
|
97
|
+
return;
|
|
98
|
+
setQueryOptionDialogState(null);
|
|
99
|
+
}, [queryOptionDialogState]);
|
|
100
|
+
return (_jsxs(Flex, { as: StyledListToolbar, container: { direction: 'column', gap: 2 }, item: { grow: 1 }, ref: ref, children: [_jsxs(Flex, { container: { alignItems: 'center', justify: 'between' }, children: [typeof heading === 'string' ? (_jsx(Text, { variant: 'h3', children: heading }, void 0)) : (_jsx(StyledViewSelector, { variant: 'text', text: heading.views.find(view => view.selected)?.text ?? heading.views[0].text, menu: {
|
|
101
|
+
mode: 'single-select',
|
|
102
|
+
items: heading.views.map(view => ({ ...view, primary: view.text })),
|
|
103
|
+
onItemClick: heading.onViewSelect
|
|
104
|
+
} }, void 0)), createNewButton] }, void 0), _jsxs(Flex, { container: { alignItems: 'start', justify: 'between', gap: 2 }, children: [_jsxs(Flex, { as: StyledSearchForm, container: { alignItems: 'center', wrap: 'wrap', gap: 2 }, item: { grow: 1 }, children: [search && _jsx(SearchInput, { ...search }, void 0), isSmallOrAbove && count && _jsx(CountMeta, { count: count }, void 0)] }, void 0), (filterButton || sortButton || groupButton || actions) && (_jsxs(Flex, { container: { alignItems: 'center', gap: 1 }, md: { container: { gap: 3 } }, children: [_jsxs(_Fragment, { children: [filterButton, sortButton, groupButton] }, void 0), actions && (_jsx(Actions, { items: actions.map(({ icon, ...restProps }) => ({
|
|
105
|
+
visual: icon ? _jsx(Icon, { name: icon }, void 0) : undefined,
|
|
106
|
+
...restProps
|
|
107
|
+
})), menuAt: 1, ref: actionsButtonRef }, void 0))] }, void 0))] }, void 0), !isSmallOrAbove && count && (_jsx(Flex, { container: { alignItems: 'center', wrap: 'wrap', gap: 2 }, children: _jsx(CountMeta, { count: count }, void 0) }, void 0)), queryOptionDialogState && (_jsx(QueryOptionPopover, { target: queryOptionDialogState.popoverTarget, heading: t(`${queryOptionDialogState.id}_by`), onCancel: onQueryOptionCancel, onSubmit: onQueryOptionSubmit, children: _jsx(queryOptionDialogState.props.renderer, {}, void 0) }, void 0))] }, void 0));
|
|
108
|
+
});
|
|
109
|
+
export default ListToolbar;
|
|
110
|
+
//# sourceMappingURL=ListToolbar.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ListToolbar.js","sourceRoot":"","sources":["../../../src/components/ListToolbar/ListToolbar.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Dispatch,\n forwardRef,\n FunctionComponent,\n MouseEvent,\n PropsWithoutRef,\n SetStateAction,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState\n} from 'react';\n\nimport Actions from '../Actions';\nimport Text from '../Text';\nimport Button from '../Button';\nimport { ForwardProps } from '../../types';\nimport { useBreakpoint, useI18n } from '../../hooks';\nimport Flex from '../Flex';\nimport SearchInput from '../SearchInput';\nimport Icon, { registerIcon } from '../Icon';\nimport * as filterIcon from '../Icon/icons/filter.icon';\nimport * as arrowUpDownIcon from '../Icon/icons/arrow-up-down.icon';\nimport * as rowIcon from '../Icon/icons/row.icon';\nimport * as plusIcon from '../Icon/icons/plus.icon';\nimport * as moreIcon from '../Icon/icons/more.icon';\nimport { hasProp } from '../../utils';\nimport MenuButton from '../MenuButton';\nimport { Count } from '../Badges';\n\nimport { StyledViewSelector, StyledSearchForm, StyledListToolbar } from './ListToolbar.styles';\nimport {\n ListToolbarProps,\n PresetMenuProps,\n QueryOptionDialogProps,\n QueryOptionDialogState,\n QueryOptionId\n} from './ListToolbar.types';\nimport QueryOptionPopover from './QueryOptionPopover';\n\nregisterIcon(filterIcon, arrowUpDownIcon, rowIcon, plusIcon, moreIcon);\n\nconst CountMeta = ({ count }: { count: NonNullable<ListToolbarProps['count']> }) => {\n const t = useI18n();\n return (\n <Text variant='secondary'>\n {count.total !== undefined && t('results_count', [count.total], { count: count.total })}\n {count.total && count.selected && ' '}\n {count.selected !== undefined &&\n `(${t('selected_count', [count.selected], { count: count.selected })})`}\n </Text>\n );\n};\n\nconst QueryOptionButton = ({\n id,\n queryOptionProps,\n iconOnly,\n setCurrentQueryOption\n}: {\n id: QueryOptionId;\n queryOptionProps: QueryOptionDialogProps | PresetMenuProps;\n iconOnly: boolean;\n setCurrentQueryOption: Dispatch<SetStateAction<QueryOptionDialogState>>;\n}) => {\n const t = useI18n();\n let i18nKey!: 'filter' | 'sort' | 'group';\n let icon!: 'filter' | 'arrow-up-down' | 'row';\n\n if (id === 'filter') {\n i18nKey = 'filter';\n icon = 'filter';\n } else if (id === 'sort') {\n i18nKey = 'sort';\n icon = 'arrow-up-down';\n } else if (id === 'group') {\n i18nKey = 'group';\n icon = 'row';\n }\n\n const text = t(i18nKey);\n const variant = iconOnly ? 'simple' : 'text';\n\n useEffect(() => {\n if (!queryOptionProps || !hasProp(queryOptionProps, 'renderer')) {\n return;\n }\n\n setCurrentQueryOption(cur => {\n if (!cur) return null;\n return {\n ...cur,\n props: queryOptionProps\n };\n });\n }, [queryOptionProps, setCurrentQueryOption]);\n\n if (hasProp(queryOptionProps, 'renderer')) {\n return (\n <div>\n <Button\n variant={variant}\n icon={iconOnly}\n label={iconOnly ? text : undefined}\n onClick={(e: MouseEvent<HTMLButtonElement>) => {\n setCurrentQueryOption({\n id,\n props: queryOptionProps,\n popoverTarget: e.currentTarget\n });\n }}\n >\n <Flex container={{ inline: true, alignItems: 'center', gap: 1 }} as='span'>\n <Icon name={icon} />\n {!iconOnly && text}\n {!iconOnly && queryOptionProps.count && <Count>{queryOptionProps.count}</Count>}\n </Flex>\n </Button>\n </div>\n );\n }\n\n if (hasProp(queryOptionProps, 'items')) {\n return (\n <div>\n <MenuButton\n variant={variant}\n text={text}\n icon={icon}\n iconOnly={iconOnly}\n count={queryOptionProps.count}\n menu={{\n mode: queryOptionProps.mode,\n items: queryOptionProps.items.map(item => ({ ...item, primary: item.text })),\n onItemClick: queryOptionProps.onItemClick\n }}\n />\n </div>\n );\n }\n\n return null;\n};\n\nconst ListToolbar: FunctionComponent<ListToolbarProps & ForwardProps> = forwardRef(\n (\n {\n heading,\n onCreateNew,\n search,\n count,\n filter,\n sort,\n group,\n actions\n }: PropsWithoutRef<ListToolbarProps>,\n ref: ListToolbarProps['ref']\n ) => {\n const t = useI18n();\n const isSmallOrAbove = useBreakpoint('sm');\n const isMediumOrAbove = useBreakpoint('md');\n const actionsButtonRef = useRef<HTMLButtonElement>(null);\n\n const [queryOptionDialogState, setQueryOptionDialogState] =\n useState<QueryOptionDialogState>(null);\n\n const createNewButton = useMemo(() => {\n if (!onCreateNew) return null;\n const text = t('create_new');\n\n return (\n <Button\n variant={isSmallOrAbove ? 'secondary' : 'simple'}\n icon={!isSmallOrAbove}\n label={isSmallOrAbove ? undefined : text}\n onClick={onCreateNew}\n >\n <Flex as='span' container={{ inline: true, alignItems: 'center', gap: 1 }}>\n <Icon name='plus' />\n {isSmallOrAbove && <span>{text}</span>}\n </Flex>\n </Button>\n );\n }, [t, onCreateNew, isSmallOrAbove]);\n\n const filterButton = filter && (\n <QueryOptionButton\n id='filter'\n queryOptionProps={filter}\n iconOnly={!isMediumOrAbove}\n setCurrentQueryOption={setQueryOptionDialogState}\n />\n );\n\n const sortButton = sort && (\n <QueryOptionButton\n id='sort'\n queryOptionProps={sort}\n iconOnly={!isMediumOrAbove}\n setCurrentQueryOption={setQueryOptionDialogState}\n />\n );\n\n const groupButton = group && (\n <QueryOptionButton\n id='group'\n queryOptionProps={group}\n iconOnly={!isMediumOrAbove}\n setCurrentQueryOption={setQueryOptionDialogState}\n />\n );\n\n const onQueryOptionCancel = useCallback(() => {\n if (queryOptionDialogState?.props.onCancel() === false) return;\n setQueryOptionDialogState(null);\n }, [queryOptionDialogState]);\n\n const onQueryOptionSubmit = useCallback(() => {\n if (queryOptionDialogState?.props.onSubmit() === false) return;\n setQueryOptionDialogState(null);\n }, [queryOptionDialogState]);\n\n return (\n <Flex\n as={StyledListToolbar}\n container={{ direction: 'column', gap: 2 }}\n item={{ grow: 1 }}\n ref={ref}\n >\n <Flex container={{ alignItems: 'center', justify: 'between' }}>\n {typeof heading === 'string' ? (\n <Text variant='h3'>{heading}</Text>\n ) : (\n <StyledViewSelector\n variant='text'\n text={heading.views.find(view => view.selected)?.text ?? heading.views[0].text}\n menu={{\n mode: 'single-select',\n items: heading.views.map(view => ({ ...view, primary: view.text })),\n onItemClick: heading.onViewSelect\n }}\n />\n )}\n {createNewButton}\n </Flex>\n <Flex container={{ alignItems: 'start', justify: 'between', gap: 2 }}>\n <Flex\n as={StyledSearchForm}\n container={{ alignItems: 'center', wrap: 'wrap', gap: 2 }}\n item={{ grow: 1 }}\n >\n {search && <SearchInput {...search} />}\n {isSmallOrAbove && count && <CountMeta count={count} />}\n </Flex>\n {(filterButton || sortButton || groupButton || actions) && (\n <Flex container={{ alignItems: 'center', gap: 1 }} md={{ container: { gap: 3 } }}>\n <>\n {filterButton}\n {sortButton}\n {groupButton}\n </>\n {actions && (\n <Actions\n items={actions.map(({ icon, ...restProps }) => ({\n visual: icon ? <Icon name={icon} /> : undefined,\n ...restProps\n }))}\n menuAt={1}\n ref={actionsButtonRef}\n />\n )}\n </Flex>\n )}\n </Flex>\n {!isSmallOrAbove && count && (\n <Flex container={{ alignItems: 'center', wrap: 'wrap', gap: 2 }}>\n <CountMeta count={count} />\n </Flex>\n )}\n\n {queryOptionDialogState && (\n <QueryOptionPopover\n target={queryOptionDialogState.popoverTarget}\n heading={t(`${queryOptionDialogState.id}_by`)}\n onCancel={onQueryOptionCancel}\n onSubmit={onQueryOptionSubmit}\n >\n <queryOptionDialogState.props.renderer />\n </QueryOptionPopover>\n )}\n </Flex>\n );\n }\n);\n\nexport default ListToolbar;\n"]}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
export declare const StyledSearchForm: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
2
|
+
export declare const StyledViewSelector: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../..").ForwardProps & import("../MenuButton").MenuButtonProps>, import("styled-components").DefaultTheme, {}, never>;
|
|
3
|
+
export declare const StyledListToolbar: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
4
|
+
//# sourceMappingURL=ListToolbar.styles.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ListToolbar.styles.d.ts","sourceRoot":"","sources":["../../../src/components/ListToolbar/ListToolbar.styles.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,gBAAgB,yGAK5B,CAAC;AAEF,eAAO,MAAM,kBAAkB,6MAS7B,CAAC;AAIH,eAAO,MAAM,iBAAiB,yGAI7B,CAAC"}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import styled, { css } from 'styled-components';
|
|
2
|
+
import { StyledSearchInput } from '../SearchInput';
|
|
3
|
+
import MenuButton from '../MenuButton';
|
|
4
|
+
import { StyledText } from '../Text';
|
|
5
|
+
import { defaultThemeProp } from '../../theme';
|
|
6
|
+
import { calculateFontSize } from '../../styles';
|
|
7
|
+
import { StyledButton } from '../Button';
|
|
8
|
+
export const StyledSearchForm = styled.div `
|
|
9
|
+
${StyledSearchInput} {
|
|
10
|
+
flex-grow: 1;
|
|
11
|
+
max-width: min(100%, 40ch);
|
|
12
|
+
}
|
|
13
|
+
`;
|
|
14
|
+
export const StyledViewSelector = styled(MenuButton)(({ theme }) => {
|
|
15
|
+
const fontSizes = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
|
|
16
|
+
return css `
|
|
17
|
+
${StyledText} {
|
|
18
|
+
font-size: ${fontSizes[theme.components.text.h3['font-size']]};
|
|
19
|
+
font-weight: ${theme.components.text.h3['font-weight']};
|
|
20
|
+
}
|
|
21
|
+
`;
|
|
22
|
+
});
|
|
23
|
+
StyledViewSelector.defaultProps = defaultThemeProp;
|
|
24
|
+
export const StyledListToolbar = styled.div `
|
|
25
|
+
${StyledButton} + ${StyledButton} {
|
|
26
|
+
margin-inline-start: 0;
|
|
27
|
+
}
|
|
28
|
+
`;
|
|
29
|
+
//# sourceMappingURL=ListToolbar.styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ListToolbar.styles.js","sourceRoot":"","sources":["../../../src/components/ListToolbar/ListToolbar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,UAAU,MAAM,eAAe,CAAC;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AACrC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,iBAAiB,EAAY,MAAM,cAAc,CAAC;AAC3D,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAEzC,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAA;IACtC,iBAAiB;;;;CAIpB,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACjE,MAAM,SAAS,GAAG,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IAEvF,OAAO,GAAG,CAAA;MACN,UAAU;mBACG,SAAS,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,WAAW,CAAa,CAAC;qBAC1D,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC;;GAEzD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAA;IACvC,YAAY,MAAM,YAAY;;;CAGjC,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { StyledSearchInput } from '../SearchInput';\nimport MenuButton from '../MenuButton';\nimport { StyledText } from '../Text';\nimport { defaultThemeProp } from '../../theme';\nimport { calculateFontSize, FontSize } from '../../styles';\nimport { StyledButton } from '../Button';\n\nexport const StyledSearchForm = styled.div`\n ${StyledSearchInput} {\n flex-grow: 1;\n max-width: min(100%, 40ch);\n }\n`;\n\nexport const StyledViewSelector = styled(MenuButton)(({ theme }) => {\n const fontSizes = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n return css`\n ${StyledText} {\n font-size: ${fontSizes[theme.components.text.h3['font-size'] as FontSize]};\n font-weight: ${theme.components.text.h3['font-weight']};\n }\n `;\n});\n\nStyledViewSelector.defaultProps = defaultThemeProp;\n\nexport const StyledListToolbar = styled.div`\n ${StyledButton} + ${StyledButton} {\n margin-inline-start: 0;\n }\n`;\n"]}
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
import { MouseEvent, Ref, ComponentType } from 'react';
|
|
2
|
+
import { SearchInputProps } from '../SearchInput';
|
|
3
|
+
import { MenuProps } from '../Menu';
|
|
4
|
+
import { Action, BaseProps } from '../../types';
|
|
5
|
+
export interface ViewSelectorProps {
|
|
6
|
+
/** A list of pre-defined data views. */
|
|
7
|
+
views: {
|
|
8
|
+
id: string;
|
|
9
|
+
text: string;
|
|
10
|
+
selected: boolean;
|
|
11
|
+
}[];
|
|
12
|
+
/** Called when a view is selected. */
|
|
13
|
+
onViewSelect: MenuProps['onItemClick'];
|
|
14
|
+
}
|
|
15
|
+
export interface QueryOption {
|
|
16
|
+
/** A count representing the number of applied conditions within the query option. */
|
|
17
|
+
count?: number;
|
|
18
|
+
}
|
|
19
|
+
export interface QueryOptionDialogProps extends QueryOption {
|
|
20
|
+
/** A component to render the content portion of the query option dialog. */
|
|
21
|
+
renderer: ComponentType;
|
|
22
|
+
/**
|
|
23
|
+
* Called when the user explicitly or implicitly cancels(closes) the query dialog.
|
|
24
|
+
* Returning false will block the dialog from closing.
|
|
25
|
+
*/
|
|
26
|
+
onCancel: () => boolean | void;
|
|
27
|
+
/**
|
|
28
|
+
* Called when the user explicitly applies the query option conditions.
|
|
29
|
+
* Returning false will block the dialog from closing.
|
|
30
|
+
*/
|
|
31
|
+
onSubmit: () => boolean | void;
|
|
32
|
+
}
|
|
33
|
+
/** Optionally provide query option presets. */
|
|
34
|
+
export interface PresetMenuProps extends QueryOption {
|
|
35
|
+
mode?: Exclude<MenuProps['mode'], 'action'>;
|
|
36
|
+
items: {
|
|
37
|
+
id: string;
|
|
38
|
+
text: string;
|
|
39
|
+
selected: boolean;
|
|
40
|
+
icon?: string;
|
|
41
|
+
}[];
|
|
42
|
+
onItemClick: MenuProps['onItemClick'];
|
|
43
|
+
}
|
|
44
|
+
export declare type QueryOptionId = 'filter' | 'sort' | 'group';
|
|
45
|
+
export declare type QueryOptionDialogState = {
|
|
46
|
+
id: 'filter' | 'sort' | 'group';
|
|
47
|
+
props: QueryOptionDialogProps;
|
|
48
|
+
popoverTarget: HTMLButtonElement | null;
|
|
49
|
+
} | null;
|
|
50
|
+
export interface ListToolbarProps extends BaseProps {
|
|
51
|
+
/** Rendering a simple heading or view selection menu.. */
|
|
52
|
+
heading: string | ViewSelectorProps;
|
|
53
|
+
/** Callback that will render a Create new button and is fired when that button is clicked. */
|
|
54
|
+
onCreateNew?: (e: MouseEvent) => void;
|
|
55
|
+
/** Props related to the Search Input. */
|
|
56
|
+
search?: SearchInputProps;
|
|
57
|
+
/** Total returned results related for a given search. Optional indication of a selected item count. */
|
|
58
|
+
count?: {
|
|
59
|
+
total?: number;
|
|
60
|
+
selected?: number;
|
|
61
|
+
};
|
|
62
|
+
/** Custom Rendering or available presets for filtering. */
|
|
63
|
+
filter?: QueryOptionDialogProps | PresetMenuProps;
|
|
64
|
+
/** Custom Rendering or available presets for sorting. */
|
|
65
|
+
sort?: QueryOptionDialogProps | PresetMenuProps;
|
|
66
|
+
/** Custom Rendering or available presets for grouping. */
|
|
67
|
+
group?: QueryOptionDialogProps | PresetMenuProps;
|
|
68
|
+
/** Top level dataset actions. */
|
|
69
|
+
actions?: Action[];
|
|
70
|
+
/** Ref for the wrapping element. */
|
|
71
|
+
ref?: Ref<HTMLDivElement>;
|
|
72
|
+
}
|
|
73
|
+
//# sourceMappingURL=ListToolbar.types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ListToolbar.types.d.ts","sourceRoot":"","sources":["../../../src/components/ListToolbar/ListToolbar.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAEhD,MAAM,WAAW,iBAAiB;IAChC,wCAAwC;IACxC,KAAK,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,OAAO,CAAA;KAAE,EAAE,CAAC;IACzD,sCAAsC;IACtC,YAAY,EAAE,SAAS,CAAC,aAAa,CAAC,CAAC;CACxC;AACD,MAAM,WAAW,WAAW;IAC1B,qFAAqF;IACrF,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,sBAAuB,SAAQ,WAAW;IACzD,4EAA4E;IAC5E,QAAQ,EAAE,aAAa,CAAC;IACxB;;;OAGG;IACH,QAAQ,EAAE,MAAM,OAAO,GAAG,IAAI,CAAC;IAC/B;;;OAGG;IACH,QAAQ,EAAE,MAAM,OAAO,GAAG,IAAI,CAAC;CAChC;AAED,+CAA+C;AAC/C,MAAM,WAAW,eAAgB,SAAQ,WAAW;IAClD,IAAI,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,EAAE,QAAQ,CAAC,CAAC;IAC5C,KAAK,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,OAAO,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IACxE,WAAW,EAAE,SAAS,CAAC,aAAa,CAAC,CAAC;CACvC;AACD,oBAAY,aAAa,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAExD,oBAAY,sBAAsB,GAAG;IACnC,EAAE,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IAChC,KAAK,EAAE,sBAAsB,CAAC;IAC9B,aAAa,EAAE,iBAAiB,GAAG,IAAI,CAAC;CACzC,GAAG,IAAI,CAAC;AAET,MAAM,WAAW,gBAAiB,SAAQ,SAAS;IACjD,0DAA0D;IAC1D,OAAO,EAAE,MAAM,GAAG,iBAAiB,CAAC;IACpC,8FAA8F;IAC9F,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,yCAAyC;IACzC,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B,uGAAuG;IACvG,KAAK,CAAC,EAAE;QACN,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,QAAQ,CAAC,EAAE,MAAM,CAAC;KACnB,CAAC;IACF,2DAA2D;IAC3D,MAAM,CAAC,EAAE,sBAAsB,GAAG,eAAe,CAAC;IAClD,yDAAyD;IACzD,IAAI,CAAC,EAAE,sBAAsB,GAAG,eAAe,CAAC;IAChD,0DAA0D;IAC1D,KAAK,CAAC,EAAE,sBAAsB,GAAG,eAAe,CAAC;IACjD,iCAAiC;IACjC,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ListToolbar.types.js","sourceRoot":"","sources":["../../../src/components/ListToolbar/ListToolbar.types.ts"],"names":[],"mappings":"","sourcesContent":["import { MouseEvent, Ref, ComponentType } from 'react';\n\nimport { SearchInputProps } from '../SearchInput';\nimport { MenuProps } from '../Menu';\nimport { Action, BaseProps } from '../../types';\n\nexport interface ViewSelectorProps {\n /** A list of pre-defined data views. */\n views: { id: string; text: string; selected: boolean }[];\n /** Called when a view is selected. */\n onViewSelect: MenuProps['onItemClick'];\n}\nexport interface QueryOption {\n /** A count representing the number of applied conditions within the query option. */\n count?: number;\n}\n\nexport interface QueryOptionDialogProps extends QueryOption {\n /** A component to render the content portion of the query option dialog. */\n renderer: ComponentType;\n /**\n * Called when the user explicitly or implicitly cancels(closes) the query dialog.\n * Returning false will block the dialog from closing.\n */\n onCancel: () => boolean | void;\n /**\n * Called when the user explicitly applies the query option conditions.\n * Returning false will block the dialog from closing.\n */\n onSubmit: () => boolean | void;\n}\n\n/** Optionally provide query option presets. */\nexport interface PresetMenuProps extends QueryOption {\n mode?: Exclude<MenuProps['mode'], 'action'>;\n items: { id: string; text: string; selected: boolean; icon?: string }[];\n onItemClick: MenuProps['onItemClick'];\n}\nexport type QueryOptionId = 'filter' | 'sort' | 'group';\n\nexport type QueryOptionDialogState = {\n id: 'filter' | 'sort' | 'group';\n props: QueryOptionDialogProps;\n popoverTarget: HTMLButtonElement | null;\n} | null;\n\nexport interface ListToolbarProps extends BaseProps {\n /** Rendering a simple heading or view selection menu.. */\n heading: string | ViewSelectorProps;\n /** Callback that will render a Create new button and is fired when that button is clicked. */\n onCreateNew?: (e: MouseEvent) => void;\n /** Props related to the Search Input. */\n search?: SearchInputProps;\n /** Total returned results related for a given search. Optional indication of a selected item count. */\n count?: {\n total?: number;\n selected?: number;\n };\n /** Custom Rendering or available presets for filtering. */\n filter?: QueryOptionDialogProps | PresetMenuProps;\n /** Custom Rendering or available presets for sorting. */\n sort?: QueryOptionDialogProps | PresetMenuProps;\n /** Custom Rendering or available presets for grouping. */\n group?: QueryOptionDialogProps | PresetMenuProps;\n /** Top level dataset actions. */\n actions?: Action[];\n /** Ref for the wrapping element. */\n ref?: Ref<HTMLDivElement>;\n}\n"]}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { FunctionComponent, ReactNode } from 'react';
|
|
2
|
+
import { ForwardProps, OmitStrict } from '../../types';
|
|
3
|
+
import { PopoverProps } from '../Popover';
|
|
4
|
+
import { QueryOptionDialogProps } from './ListToolbar.types';
|
|
5
|
+
interface ListToolbarPopoverProps extends OmitStrict<PopoverProps, 'target'>, Pick<QueryOptionDialogProps, 'onCancel' | 'onSubmit'> {
|
|
6
|
+
heading: string;
|
|
7
|
+
children: ReactNode;
|
|
8
|
+
target?: HTMLButtonElement | null;
|
|
9
|
+
}
|
|
10
|
+
declare const QueryOptionPopover: FunctionComponent<ListToolbarPopoverProps & ForwardProps>;
|
|
11
|
+
export default QueryOptionPopover;
|
|
12
|
+
//# sourceMappingURL=QueryOptionPopover.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"QueryOptionPopover.d.ts","sourceRoot":"","sources":["../../../src/components/ListToolbar/QueryOptionPopover.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAGjB,SAAS,EAGV,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAIvD,OAAgB,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAGnD,OAAO,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAE7D,UAAU,uBACR,SAAQ,UAAU,CAAC,YAAY,EAAE,QAAQ,CAAC,EACxC,IAAI,CAAC,sBAAsB,EAAE,UAAU,GAAG,UAAU,CAAC;IACvD,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,iBAAiB,GAAG,IAAI,CAAC;CACnC;AAMD,QAAA,MAAM,kBAAkB,EAAE,iBAAiB,CAAC,uBAAuB,GAAG,YAAY,CAiGjF,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef, useEffect, useCallback } from 'react';
|
|
3
|
+
import styled from 'styled-components';
|
|
4
|
+
import { useConsolidatedRef, useI18n, useOuterEvent, useUID } from '../../hooks';
|
|
5
|
+
import { getFocusables } from '../../utils';
|
|
6
|
+
import Button from '../Button';
|
|
7
|
+
import Flex from '../Flex';
|
|
8
|
+
import Popover from '../Popover';
|
|
9
|
+
import Text from '../Text';
|
|
10
|
+
const StyledQueryListPopover = styled(Popover) `
|
|
11
|
+
min-width: 40ch;
|
|
12
|
+
`;
|
|
13
|
+
const QueryOptionPopover = forwardRef(({ target, heading, children, onCancel, onSubmit }, ref) => {
|
|
14
|
+
const t = useI18n();
|
|
15
|
+
const headingId = useUID();
|
|
16
|
+
const popoverRef = useConsolidatedRef(ref);
|
|
17
|
+
const onKeydown = useCallback((e) => {
|
|
18
|
+
if (e.repeat)
|
|
19
|
+
return;
|
|
20
|
+
if (e.key === 'Escape') {
|
|
21
|
+
onCancel();
|
|
22
|
+
target?.focus();
|
|
23
|
+
return;
|
|
24
|
+
}
|
|
25
|
+
if (e.key === 'Tab') {
|
|
26
|
+
const focusables = getFocusables(popoverRef);
|
|
27
|
+
if (!focusables || focusables.length < 2)
|
|
28
|
+
return;
|
|
29
|
+
const firstFocusable = focusables[0];
|
|
30
|
+
const lastFocusable = focusables[focusables.length - 1];
|
|
31
|
+
if (!e.shiftKey &&
|
|
32
|
+
(document.activeElement === popoverRef.current ||
|
|
33
|
+
document.activeElement === lastFocusable)) {
|
|
34
|
+
firstFocusable?.focus();
|
|
35
|
+
e.preventDefault();
|
|
36
|
+
}
|
|
37
|
+
else if (e.shiftKey &&
|
|
38
|
+
(document.activeElement === popoverRef.current ||
|
|
39
|
+
document.activeElement === firstFocusable)) {
|
|
40
|
+
lastFocusable?.focus();
|
|
41
|
+
e.preventDefault();
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
}, [onCancel, popoverRef, target]);
|
|
45
|
+
useOuterEvent('mousedown', [popoverRef], () => {
|
|
46
|
+
onCancel();
|
|
47
|
+
});
|
|
48
|
+
useEffect(() => {
|
|
49
|
+
document.addEventListener('keydown', onKeydown);
|
|
50
|
+
return () => {
|
|
51
|
+
document.removeEventListener('keydown', onKeydown);
|
|
52
|
+
};
|
|
53
|
+
}, [onKeydown]);
|
|
54
|
+
useEffect(() => {
|
|
55
|
+
getFocusables(popoverRef)[0]?.focus();
|
|
56
|
+
}, [popoverRef]);
|
|
57
|
+
return (_jsx(StyledQueryListPopover, { target: target, ref: popoverRef, role: 'dialog', "aria-labelledby": headingId, arrow: true, onKeyDown: onKeydown, children: _jsxs(Flex, { container: { direction: 'column', gap: 2, pad: 2 }, children: [_jsx(Text, { variant: 'h3', id: headingId, children: heading }, void 0), children, _jsxs(Flex, { container: { justify: 'between' }, children: [_jsx(Button, { onClick: () => {
|
|
58
|
+
onCancel();
|
|
59
|
+
target?.focus();
|
|
60
|
+
}, children: t('cancel') }, void 0), _jsx(Button, { variant: 'primary', onClick: () => {
|
|
61
|
+
onSubmit();
|
|
62
|
+
target?.focus();
|
|
63
|
+
}, children: t('submit') }, void 0)] }, void 0)] }, void 0) }, void 0));
|
|
64
|
+
});
|
|
65
|
+
export default QueryOptionPopover;
|
|
66
|
+
//# sourceMappingURL=QueryOptionPopover.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"QueryOptionPopover.js","sourceRoot":"","sources":["../../../src/components/ListToolbar/QueryOptionPopover.tsx"],"names":[],"mappings":";AAAA,OAAO,EAGL,UAAU,EAEV,SAAS,EACT,WAAW,EACZ,MAAM,OAAO,CAAC;AACf,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EAAE,kBAAkB,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAEjF,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAC5C,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,OAAyB,MAAM,YAAY,CAAC;AACnD,OAAO,IAAI,MAAM,SAAS,CAAC;AAY3B,MAAM,sBAAsB,GAAG,MAAM,CAAC,OAAO,CAAC,CAAA;;CAE7C,CAAC;AAEF,MAAM,kBAAkB,GAA8D,UAAU,CAC9F,CACE,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAA4C,EAC3F,GAAmC,EACnC,EAAE;IACF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,SAAS,GAAG,MAAM,EAAE,CAAC;IAC3B,MAAM,UAAU,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAE3C,MAAM,SAAS,GAAG,WAAW,CAC3B,CAAC,CAAgB,EAAE,EAAE;QACnB,IAAI,CAAC,CAAC,MAAM;YAAE,OAAO;QAErB,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,EAAE;YACtB,QAAQ,EAAE,CAAC;YACX,MAAM,EAAE,KAAK,EAAE,CAAC;YAChB,OAAO;SACR;QAED,IAAI,CAAC,CAAC,GAAG,KAAK,KAAK,EAAE;YACnB,MAAM,UAAU,GAAG,aAAa,CAAC,UAAU,CAAC,CAAC;YAC7C,IAAI,CAAC,UAAU,IAAI,UAAU,CAAC,MAAM,GAAG,CAAC;gBAAE,OAAO;YACjD,MAAM,cAAc,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC;YACrC,MAAM,aAAa,GAAG,UAAU,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;YAExD,IACE,CAAC,CAAC,CAAC,QAAQ;gBACX,CAAC,QAAQ,CAAC,aAAa,KAAK,UAAU,CAAC,OAAO;oBAC5C,QAAQ,CAAC,aAAa,KAAK,aAAa,CAAC,EAC3C;gBACA,cAAc,EAAE,KAAK,EAAE,CAAC;gBACxB,CAAC,CAAC,cAAc,EAAE,CAAC;aACpB;iBAAM,IACL,CAAC,CAAC,QAAQ;gBACV,CAAC,QAAQ,CAAC,aAAa,KAAK,UAAU,CAAC,OAAO;oBAC5C,QAAQ,CAAC,aAAa,KAAK,cAAc,CAAC,EAC5C;gBACA,aAAa,EAAE,KAAK,EAAE,CAAC;gBACvB,CAAC,CAAC,cAAc,EAAE,CAAC;aACpB;SACF;IACH,CAAC,EACD,CAAC,QAAQ,EAAE,UAAU,EAAE,MAAM,CAAC,CAC/B,CAAC;IAEF,aAAa,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,EAAE,GAAG,EAAE;QAC5C,QAAQ,EAAE,CAAC;IACb,CAAC,CAAC,CAAC;IAEH,SAAS,CAAC,GAAG,EAAE;QACb,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;QAChD,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;QACrD,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,SAAS,CAAC,GAAG,EAAE;QACb,aAAa,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC;IACxC,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,OAAO,CACL,KAAC,sBAAsB,IACrB,MAAM,EAAE,MAAM,EACd,GAAG,EAAE,UAAU,EACf,IAAI,EAAC,QAAQ,qBACI,SAAS,EAC1B,KAAK,QACL,SAAS,EAAE,SAAS,YAEpB,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,aACtD,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,EAAC,EAAE,EAAE,SAAS,YAC7B,OAAO,WACH,EACN,QAAQ,EACT,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,aACrC,KAAC,MAAM,IACL,OAAO,EAAE,GAAG,EAAE;gCACZ,QAAQ,EAAE,CAAC;gCACX,MAAM,EAAE,KAAK,EAAE,CAAC;4BAClB,CAAC,YAEA,CAAC,CAAC,QAAQ,CAAC,WACL,EACT,KAAC,MAAM,IACL,OAAO,EAAC,SAAS,EACjB,OAAO,EAAE,GAAG,EAAE;gCACZ,QAAQ,EAAE,CAAC;gCACX,MAAM,EAAE,KAAK,EAAE,CAAC;4BAClB,CAAC,YAEA,CAAC,CAAC,QAAQ,CAAC,WACL,YACJ,YACF,WACgB,CAC1B,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,kBAAkB,CAAC","sourcesContent":["import {\n FunctionComponent,\n PropsWithoutRef,\n forwardRef,\n ReactNode,\n useEffect,\n useCallback\n} from 'react';\nimport styled from 'styled-components';\n\nimport { useConsolidatedRef, useI18n, useOuterEvent, useUID } from '../../hooks';\nimport { ForwardProps, OmitStrict } from '../../types';\nimport { getFocusables } from '../../utils';\nimport Button from '../Button';\nimport Flex from '../Flex';\nimport Popover, { PopoverProps } from '../Popover';\nimport Text from '../Text';\n\nimport { QueryOptionDialogProps } from './ListToolbar.types';\n\ninterface ListToolbarPopoverProps\n extends OmitStrict<PopoverProps, 'target'>,\n Pick<QueryOptionDialogProps, 'onCancel' | 'onSubmit'> {\n heading: string;\n children: ReactNode;\n target?: HTMLButtonElement | null;\n}\n\nconst StyledQueryListPopover = styled(Popover)`\n min-width: 40ch;\n`;\n\nconst QueryOptionPopover: FunctionComponent<ListToolbarPopoverProps & ForwardProps> = forwardRef(\n (\n { target, heading, children, onCancel, onSubmit }: PropsWithoutRef<ListToolbarPopoverProps>,\n ref: ListToolbarPopoverProps['ref']\n ) => {\n const t = useI18n();\n const headingId = useUID();\n const popoverRef = useConsolidatedRef(ref);\n\n const onKeydown = useCallback(\n (e: KeyboardEvent) => {\n if (e.repeat) return;\n\n if (e.key === 'Escape') {\n onCancel();\n target?.focus();\n return;\n }\n\n if (e.key === 'Tab') {\n const focusables = getFocusables(popoverRef);\n if (!focusables || focusables.length < 2) return;\n const firstFocusable = focusables[0];\n const lastFocusable = focusables[focusables.length - 1];\n\n if (\n !e.shiftKey &&\n (document.activeElement === popoverRef.current ||\n document.activeElement === lastFocusable)\n ) {\n firstFocusable?.focus();\n e.preventDefault();\n } else if (\n e.shiftKey &&\n (document.activeElement === popoverRef.current ||\n document.activeElement === firstFocusable)\n ) {\n lastFocusable?.focus();\n e.preventDefault();\n }\n }\n },\n [onCancel, popoverRef, target]\n );\n\n useOuterEvent('mousedown', [popoverRef], () => {\n onCancel();\n });\n\n useEffect(() => {\n document.addEventListener('keydown', onKeydown);\n return () => {\n document.removeEventListener('keydown', onKeydown);\n };\n }, [onKeydown]);\n\n useEffect(() => {\n getFocusables(popoverRef)[0]?.focus();\n }, [popoverRef]);\n\n return (\n <StyledQueryListPopover\n target={target}\n ref={popoverRef}\n role='dialog'\n aria-labelledby={headingId}\n arrow\n onKeyDown={onKeydown}\n >\n <Flex container={{ direction: 'column', gap: 2, pad: 2 }}>\n <Text variant='h3' id={headingId}>\n {heading}\n </Text>\n {children}\n <Flex container={{ justify: 'between' }}>\n <Button\n onClick={() => {\n onCancel();\n target?.focus();\n }}\n >\n {t('cancel')}\n </Button>\n <Button\n variant='primary'\n onClick={() => {\n onSubmit();\n target?.focus();\n }}\n >\n {t('submit')}\n </Button>\n </Flex>\n </Flex>\n </StyledQueryListPopover>\n );\n }\n);\n\nexport default QueryOptionPopover;\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ListToolbar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ListToolbar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC","sourcesContent":["export { default } from './ListToolbar';\nexport { ListToolbarProps } from './ListToolbar.types';\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/Menu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAOlB,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/Menu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAOlB,MAAM,OAAO,CAAC;AAWf,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAO3C,OAAO,EAAoB,SAAS,EAAE,MAAM,cAAc,CAAC;AAG3D,QAAA,MAAM,IAAI,EAAE,iBAAiB,CAAC,SAAS,GAAG,YAAY,CA4SrD,CAAC;AAEF,eAAe,IAAI,CAAC"}
|