@boostdev/design-system-components 1.1.0 → 1.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/AGENTS.md +46 -5
- package/dist/client.cjs +206 -113
- package/dist/client.css +664 -624
- package/dist/client.d.cts +9 -3
- package/dist/client.d.ts +9 -3
- package/dist/client.js +241 -149
- package/dist/index.cjs +206 -113
- package/dist/index.css +664 -624
- package/dist/index.d.cts +9 -3
- package/dist/index.d.ts +9 -3
- package/dist/index.js +241 -149
- package/dist/web-components.d.ts +1 -0
- package/dist/web-components.js +10 -0
- package/package.json +1 -1
- package/src/components/interaction/Button/Button.module.css +1 -1
- package/src/components/interaction/Button/Button.native.mdx +72 -0
- package/src/components/interaction/Command/Command.module.css +7 -7
- package/src/components/interaction/Command/Command.spec.tsx +37 -0
- package/src/components/interaction/Command/Command.tsx +37 -2
- package/src/components/interaction/Dialog/Dialog.module.css +10 -13
- package/src/components/interaction/Dialog/Dialog.spec.tsx +53 -1
- package/src/components/interaction/Dialog/Dialog.stories.tsx +17 -0
- package/src/components/interaction/Dialog/Dialog.tsx +50 -16
- package/src/components/interaction/Drawer/Drawer.module.css +11 -11
- package/src/components/interaction/Drawer/Drawer.spec.tsx +48 -1
- package/src/components/interaction/Drawer/Drawer.tsx +38 -4
- package/src/components/interaction/DropdownMenu/DropdownMenu.module.css +6 -6
- package/src/components/interaction/Popover/Popover.module.css +74 -15
- package/src/components/interaction/Popover/Popover.spec.tsx +94 -59
- package/src/components/interaction/Popover/Popover.tsx +44 -60
- package/src/components/interaction/Toast/Toast.module.css +7 -7
- package/src/components/interaction/form/Checkbox/Checkbox.module.css +6 -6
- package/src/components/interaction/form/Checkbox/Checkbox.native.mdx +74 -0
- package/src/components/interaction/form/Combobox/Combobox.module.css +7 -8
- package/src/components/interaction/form/FileInput/FileInput.module.css +4 -4
- package/src/components/interaction/form/NumberInput/NumberInput.module.css +1 -1
- package/src/components/interaction/form/Radio/Radio.module.css +6 -6
- package/src/components/interaction/form/SegmentedControl/SegmentedControl.module.css +5 -6
- package/src/components/interaction/form/Select/Select.module.css +3 -3
- package/src/components/interaction/form/Slider/Slider.module.css +6 -6
- package/src/components/interaction/form/Switch/Switch.module.css +8 -8
- package/src/components/interaction/form/Textarea/Textarea.module.css +1 -1
- package/src/components/layout/IconWrapper/IconWrapper.module.css +2 -2
- package/src/components/ui/Accordion/Accordion.module.css +5 -5
- package/src/components/ui/Alert/Alert.native.mdx +62 -0
- package/src/components/ui/Avatar/Avatar.native.mdx +50 -0
- package/src/components/ui/Badge/Badge.native.mdx +54 -0
- package/src/components/ui/Calendar/Calendar.module.css +7 -7
- package/src/components/ui/Carousel/Carousel.module.css +5 -5
- package/src/components/ui/Collapsible/Collapsible.module.css +4 -4
- package/src/components/ui/Link/Link.module.css +2 -2
- package/src/components/ui/Loading/Loading.module.css +7 -7
- package/src/components/ui/NotificationBanner/NotificationBanner.module.css +3 -3
- package/src/components/ui/Pagination/Pagination.module.css +6 -6
- package/src/components/ui/Progress/Progress.module.css +5 -5
- package/src/components/ui/Separator/Separator.module.css +3 -3
- package/src/components/ui/Skeleton/Skeleton.module.css +1 -1
- package/src/components/ui/Table/Table.module.css +9 -9
- package/src/components/ui/Tabs/Tabs.module.css +3 -3
- package/src/components/ui/Tooltip/Tooltip.module.css +8 -8
- package/src/components/ui/Typography/Typography.native.mdx +56 -0
- package/src/polyfill-invoker-commands.ts +68 -0
- package/src/react-augment.d.ts +19 -0
- package/src/stories/ReactNative.mdx +121 -0
- package/src/web-components/interaction/BdsButton.mdx +106 -0
- package/src/web-components/interaction/BdsPopover.mdx +120 -0
- package/src/web-components/interaction/BdsToastProvider.mdx +94 -0
- package/src/web-components/interaction/bds-popover.spec.ts +49 -1
- package/src/web-components/interaction/bds-popover.ts +12 -0
- package/src/web-components/test/helpers.ts +8 -0
- package/src/web-components/ui/BdsAlert.mdx +90 -0
- package/src/web-components/ui/BdsBadge.mdx +74 -0
package/dist/client.cjs
CHANGED
|
@@ -87,7 +87,7 @@ module.exports = __toCommonJS(client_exports);
|
|
|
87
87
|
var import_react = require("react");
|
|
88
88
|
|
|
89
89
|
// src/components/ui/Accordion/Accordion.module.css
|
|
90
|
-
var Accordion_default = {"accordion":"
|
|
90
|
+
var Accordion_default = {"accordion":"bds111Accordion-accordion","item":"bds111Accordion-item","heading":"bds111Accordion-heading","trigger":"bds111Accordion-trigger","triggerLabel":"bds111Accordion-triggerLabel","chevron":"bds111Accordion-chevron","--open":"bds111Accordion---open","panel":"bds111Accordion-panel","panelContent":"bds111Accordion-panelContent"};
|
|
91
91
|
|
|
92
92
|
// src/components/ui/Accordion/Accordion.tsx
|
|
93
93
|
var import_design_system_foundation = require("@boostdev/design-system-foundation");
|
|
@@ -155,7 +155,7 @@ function Accordion({
|
|
|
155
155
|
}
|
|
156
156
|
|
|
157
157
|
// src/components/ui/Alert/Alert.module.css
|
|
158
|
-
var Alert_default = {"alert":"
|
|
158
|
+
var Alert_default = {"alert":"bds111Alert-alert","--variant_info":"bds111Alert---variant_info","--variant_success":"bds111Alert---variant_success","--variant_warning":"bds111Alert---variant_warning","--variant_error":"bds111Alert---variant_error","icon":"bds111Alert-icon","content":"bds111Alert-content","title":"bds111Alert-title","dismiss":"bds111Alert-dismiss"};
|
|
159
159
|
|
|
160
160
|
// src/components/ui/Alert/Alert.tsx
|
|
161
161
|
var import_design_system_foundation2 = require("@boostdev/design-system-foundation");
|
|
@@ -198,7 +198,7 @@ function Alert({
|
|
|
198
198
|
}
|
|
199
199
|
|
|
200
200
|
// src/components/ui/Avatar/Avatar.module.css
|
|
201
|
-
var Avatar_default = {"avatar":"
|
|
201
|
+
var Avatar_default = {"avatar":"bds111Avatar-avatar","--fallback":"bds111Avatar---fallback","--size_small":"bds111Avatar---size_small","--size_medium":"bds111Avatar---size_medium","--size_large":"bds111Avatar---size_large","image":"bds111Avatar-image","initials":"bds111Avatar-initials"};
|
|
202
202
|
|
|
203
203
|
// src/components/ui/Avatar/Avatar.tsx
|
|
204
204
|
var import_design_system_foundation3 = require("@boostdev/design-system-foundation");
|
|
@@ -224,7 +224,7 @@ function Avatar({ src, alt, name, size = "medium", className }) {
|
|
|
224
224
|
}
|
|
225
225
|
|
|
226
226
|
// src/components/ui/Badge/Badge.module.css
|
|
227
|
-
var Badge_default = {"badge":"
|
|
227
|
+
var Badge_default = {"badge":"bds111Badge-badge","--variant_primary":"bds111Badge---variant_primary","--variant_secondary":"bds111Badge---variant_secondary","--variant_success":"bds111Badge---variant_success","--variant_error":"bds111Badge---variant_error","--variant_warning":"bds111Badge---variant_warning"};
|
|
228
228
|
|
|
229
229
|
// src/components/ui/Badge/Badge.tsx
|
|
230
230
|
var import_design_system_foundation4 = require("@boostdev/design-system-foundation");
|
|
@@ -234,7 +234,7 @@ function Badge({ children, variant = "primary", className }) {
|
|
|
234
234
|
}
|
|
235
235
|
|
|
236
236
|
// src/components/ui/Breadcrumb/Breadcrumb.module.css
|
|
237
|
-
var Breadcrumb_default = {"breadcrumb":"
|
|
237
|
+
var Breadcrumb_default = {"breadcrumb":"bds111Breadcrumb-breadcrumb","list":"bds111Breadcrumb-list","item":"bds111Breadcrumb-item","link":"bds111Breadcrumb-link","separator":"bds111Breadcrumb-separator","current":"bds111Breadcrumb-current"};
|
|
238
238
|
|
|
239
239
|
// src/components/ui/Breadcrumb/Breadcrumb.tsx
|
|
240
240
|
var import_design_system_foundation5 = require("@boostdev/design-system-foundation");
|
|
@@ -250,7 +250,7 @@ function Breadcrumb({ items, className }) {
|
|
|
250
250
|
}
|
|
251
251
|
|
|
252
252
|
// src/components/ui/Collapsible/Collapsible.module.css
|
|
253
|
-
var Collapsible_default = {"collapsible":"
|
|
253
|
+
var Collapsible_default = {"collapsible":"bds111Collapsible-collapsible","summary":"bds111Collapsible-summary","summaryContent":"bds111Collapsible-summaryContent","icon":"bds111Collapsible-icon","content":"bds111Collapsible-content"};
|
|
254
254
|
|
|
255
255
|
// src/components/ui/Collapsible/Collapsible.tsx
|
|
256
256
|
var import_design_system_foundation6 = require("@boostdev/design-system-foundation");
|
|
@@ -291,7 +291,7 @@ function Collapsible({
|
|
|
291
291
|
var import_react2 = require("react");
|
|
292
292
|
|
|
293
293
|
// src/components/ui/Calendar/Calendar.module.css
|
|
294
|
-
var Calendar_default = {"calendar":"
|
|
294
|
+
var Calendar_default = {"calendar":"bds111Calendar-calendar","header":"bds111Calendar-header","monthYear":"bds111Calendar-monthYear","navBtn":"bds111Calendar-navBtn","grid":"bds111Calendar-grid","weekday":"bds111Calendar-weekday","empty":"bds111Calendar-empty","day":"bds111Calendar-day","disabled":"bds111Calendar-disabled","selected":"bds111Calendar-selected","today":"bds111Calendar-today"};
|
|
295
295
|
|
|
296
296
|
// src/components/ui/Calendar/Calendar.tsx
|
|
297
297
|
var import_design_system_foundation7 = require("@boostdev/design-system-foundation");
|
|
@@ -466,7 +466,7 @@ function Calendar({ value, defaultValue, min, max, onChange, className }) {
|
|
|
466
466
|
var import_react3 = require("react");
|
|
467
467
|
|
|
468
468
|
// src/components/ui/Carousel/Carousel.module.css
|
|
469
|
-
var Carousel_default = {"carousel":"
|
|
469
|
+
var Carousel_default = {"carousel":"bds111Carousel-carousel","track":"bds111Carousel-track","slide":"bds111Carousel-slide","navBtn":"bds111Carousel-navBtn"};
|
|
470
470
|
|
|
471
471
|
// src/components/ui/Carousel/Carousel.tsx
|
|
472
472
|
var import_design_system_foundation8 = require("@boostdev/design-system-foundation");
|
|
@@ -519,7 +519,7 @@ function Carousel({ items, label, className }) {
|
|
|
519
519
|
}
|
|
520
520
|
|
|
521
521
|
// src/components/ui/DescriptionList/DescriptionList.module.css
|
|
522
|
-
var DescriptionList_default = {"list":"
|
|
522
|
+
var DescriptionList_default = {"list":"bds111DescriptionList-list","group":"bds111DescriptionList-group","term":"bds111DescriptionList-term","details":"bds111DescriptionList-details","--layout_inline":"bds111DescriptionList---layout_inline"};
|
|
523
523
|
|
|
524
524
|
// src/components/ui/DescriptionList/DescriptionList.tsx
|
|
525
525
|
var import_design_system_foundation9 = require("@boostdev/design-system-foundation");
|
|
@@ -532,7 +532,7 @@ function DescriptionList({ items, layout = "stacked", className }) {
|
|
|
532
532
|
}
|
|
533
533
|
|
|
534
534
|
// src/components/ui/Link/Link.module.css
|
|
535
|
-
var Link_default = {"link":"
|
|
535
|
+
var Link_default = {"link":"bds111Link-link","--variant_default":"bds111Link---variant_default","--variant_subtle":"bds111Link---variant_subtle","--variant_standalone":"bds111Link---variant_standalone","externalLabel":"bds111Link-externalLabel"};
|
|
536
536
|
|
|
537
537
|
// src/components/ui/Link/Link.tsx
|
|
538
538
|
var import_design_system_foundation10 = require("@boostdev/design-system-foundation");
|
|
@@ -563,7 +563,7 @@ function Link({
|
|
|
563
563
|
}
|
|
564
564
|
|
|
565
565
|
// src/components/ui/Loading/Loading.module.css
|
|
566
|
-
var Loading_default = {"loading":"
|
|
566
|
+
var Loading_default = {"loading":"bds111Loading-loading","spinner":"bds111Loading-spinner","--size_small":"bds111Loading---size_small","--size_large":"bds111Loading---size_large"};
|
|
567
567
|
|
|
568
568
|
// src/components/ui/Loading/Loading.tsx
|
|
569
569
|
var import_design_system_foundation11 = require("@boostdev/design-system-foundation");
|
|
@@ -573,7 +573,7 @@ function Loading({ size = "medium", className }) {
|
|
|
573
573
|
}
|
|
574
574
|
|
|
575
575
|
// src/components/ui/NotificationBanner/NotificationBanner.module.css
|
|
576
|
-
var NotificationBanner_default = {"banner":"
|
|
576
|
+
var NotificationBanner_default = {"banner":"bds111NotificationBanner-banner","--variant_info":"bds111NotificationBanner---variant_info","--variant_success":"bds111NotificationBanner---variant_success","--variant_warning":"bds111NotificationBanner---variant_warning","--variant_error":"bds111NotificationBanner---variant_error","content":"bds111NotificationBanner-content","action":"bds111NotificationBanner-action","dismiss":"bds111NotificationBanner-dismiss"};
|
|
577
577
|
|
|
578
578
|
// src/components/ui/NotificationBanner/NotificationBanner.tsx
|
|
579
579
|
var import_design_system_foundation12 = require("@boostdev/design-system-foundation");
|
|
@@ -612,7 +612,7 @@ function NotificationBanner({
|
|
|
612
612
|
}
|
|
613
613
|
|
|
614
614
|
// src/components/ui/Pagination/Pagination.module.css
|
|
615
|
-
var Pagination_default = {"pagination":"
|
|
615
|
+
var Pagination_default = {"pagination":"bds111Pagination-pagination","list":"bds111Pagination-list","button":"bds111Pagination-button","--active":"bds111Pagination---active","--nav":"bds111Pagination---nav","ellipsis":"bds111Pagination-ellipsis"};
|
|
616
616
|
|
|
617
617
|
// src/components/ui/Pagination/Pagination.tsx
|
|
618
618
|
var import_design_system_foundation13 = require("@boostdev/design-system-foundation");
|
|
@@ -676,7 +676,7 @@ function Pagination({
|
|
|
676
676
|
}
|
|
677
677
|
|
|
678
678
|
// src/components/ui/Progress/Progress.module.css
|
|
679
|
-
var Progress_default = {"container":"
|
|
679
|
+
var Progress_default = {"container":"bds111Progress-container","labelRow":"bds111Progress-labelRow","value":"bds111Progress-value","track":"bds111Progress-track","--size_small":"bds111Progress---size_small","--size_medium":"bds111Progress---size_medium","--size_large":"bds111Progress---size_large","fill":"bds111Progress-fill"};
|
|
680
680
|
|
|
681
681
|
// src/components/ui/Progress/Progress.tsx
|
|
682
682
|
var import_design_system_foundation14 = require("@boostdev/design-system-foundation");
|
|
@@ -714,7 +714,7 @@ function Progress({
|
|
|
714
714
|
}
|
|
715
715
|
|
|
716
716
|
// src/components/ui/ProgressCircle/ProgressCircle.module.css
|
|
717
|
-
var ProgressCircle_default = {"wrapper":"
|
|
717
|
+
var ProgressCircle_default = {"wrapper":"bds111ProgressCircle-wrapper","svg":"bds111ProgressCircle-svg","track":"bds111ProgressCircle-track","fill":"bds111ProgressCircle-fill","value":"bds111ProgressCircle-value","--size_small":"bds111ProgressCircle---size_small","--size_medium":"bds111ProgressCircle---size_medium","--size_large":"bds111ProgressCircle---size_large"};
|
|
718
718
|
|
|
719
719
|
// src/components/ui/ProgressCircle/ProgressCircle.tsx
|
|
720
720
|
var import_design_system_foundation15 = require("@boostdev/design-system-foundation");
|
|
@@ -793,7 +793,7 @@ function ProgressCircle({
|
|
|
793
793
|
}
|
|
794
794
|
|
|
795
795
|
// src/components/ui/Separator/Separator.module.css
|
|
796
|
-
var Separator_default = {"separator":"
|
|
796
|
+
var Separator_default = {"separator":"bds111Separator-separator","--horizontal":"bds111Separator---horizontal","--vertical":"bds111Separator---vertical"};
|
|
797
797
|
|
|
798
798
|
// src/components/ui/Separator/Separator.tsx
|
|
799
799
|
var import_design_system_foundation16 = require("@boostdev/design-system-foundation");
|
|
@@ -816,7 +816,7 @@ function Separator({ orientation = "horizontal", className }) {
|
|
|
816
816
|
var import_design_system_foundation17 = require("@boostdev/design-system-foundation");
|
|
817
817
|
|
|
818
818
|
// src/components/ui/Skeleton/Skeleton.module.css
|
|
819
|
-
var Skeleton_default = {"skeleton":"
|
|
819
|
+
var Skeleton_default = {"skeleton":"bds111Skeleton-skeleton"};
|
|
820
820
|
|
|
821
821
|
// src/components/ui/Skeleton/Skeleton.tsx
|
|
822
822
|
var import_jsx_runtime17 = require("react/jsx-runtime");
|
|
@@ -825,7 +825,7 @@ function Skeleton({ className }) {
|
|
|
825
825
|
}
|
|
826
826
|
|
|
827
827
|
// src/components/ui/SkipLink/SkipLink.module.css
|
|
828
|
-
var SkipLink_default = {"skipLink":"
|
|
828
|
+
var SkipLink_default = {"skipLink":"bds111SkipLink-skipLink"};
|
|
829
829
|
|
|
830
830
|
// src/components/ui/SkipLink/SkipLink.tsx
|
|
831
831
|
var import_design_system_foundation18 = require("@boostdev/design-system-foundation");
|
|
@@ -835,7 +835,7 @@ function SkipLink({ href = "#main", children = "Skip to main content", className
|
|
|
835
835
|
}
|
|
836
836
|
|
|
837
837
|
// src/components/ui/Table/Table.module.css
|
|
838
|
-
var Table_default = {"wrapper":"
|
|
838
|
+
var Table_default = {"wrapper":"bds111Table-wrapper","table":"bds111Table-table","caption":"bds111Table-caption","thead":"bds111Table-thead","th":"bds111Table-th","--sortable":"bds111Table---sortable","sortButton":"bds111Table-sortButton","sortIcon":"bds111Table-sortIcon","--sort-active":"bds111Table---sort-active","--sort-desc":"bds111Table---sort-desc","tbody":"bds111Table-tbody","tr":"bds111Table-tr","td":"bds111Table-td"};
|
|
839
839
|
|
|
840
840
|
// src/components/ui/Table/Table.tsx
|
|
841
841
|
var import_design_system_foundation19 = require("@boostdev/design-system-foundation");
|
|
@@ -905,7 +905,7 @@ function Table({
|
|
|
905
905
|
var import_react4 = require("react");
|
|
906
906
|
|
|
907
907
|
// src/components/ui/Tabs/Tabs.module.css
|
|
908
|
-
var Tabs_default = {"tabs":"
|
|
908
|
+
var Tabs_default = {"tabs":"bds111Tabs-tabs","tabList":"bds111Tabs-tabList","tab":"bds111Tabs-tab","--active":"bds111Tabs---active","panel":"bds111Tabs-panel"};
|
|
909
909
|
|
|
910
910
|
// src/components/ui/Tabs/Tabs.tsx
|
|
911
911
|
var import_design_system_foundation20 = require("@boostdev/design-system-foundation");
|
|
@@ -985,7 +985,7 @@ function Tabs({ tabs, defaultTab, className }) {
|
|
|
985
985
|
var import_react5 = require("react");
|
|
986
986
|
|
|
987
987
|
// src/components/ui/Tooltip/Tooltip.module.css
|
|
988
|
-
var Tooltip_default = {"wrapper":"
|
|
988
|
+
var Tooltip_default = {"wrapper":"bds111Tooltip-wrapper","tooltip":"bds111Tooltip-tooltip","--placement_top":"bds111Tooltip---placement_top","--placement_bottom":"bds111Tooltip---placement_bottom","--placement_left":"bds111Tooltip---placement_left","--placement_right":"bds111Tooltip---placement_right"};
|
|
989
989
|
|
|
990
990
|
// src/components/ui/Tooltip/Tooltip.tsx
|
|
991
991
|
var import_design_system_foundation21 = require("@boostdev/design-system-foundation");
|
|
@@ -1027,7 +1027,7 @@ function Tooltip({
|
|
|
1027
1027
|
}
|
|
1028
1028
|
|
|
1029
1029
|
// src/components/ui/Typography/Typography.module.css
|
|
1030
|
-
var Typography_default = {"typography":"
|
|
1030
|
+
var Typography_default = {"typography":"bds111Typography-typography","--h1":"bds111Typography---h1","--h2":"bds111Typography---h2","--h3":"bds111Typography---h3","--body":"bds111Typography---body","--body_s":"bds111Typography---body_s"};
|
|
1031
1031
|
|
|
1032
1032
|
// src/components/ui/Typography/Typography.tsx
|
|
1033
1033
|
var import_design_system_foundation22 = require("@boostdev/design-system-foundation");
|
|
@@ -1045,7 +1045,7 @@ function Typography({ variant = "body", component, children, className }) {
|
|
|
1045
1045
|
}
|
|
1046
1046
|
|
|
1047
1047
|
// src/components/interaction/Button/Button.module.css
|
|
1048
|
-
var Button_default = {"button":"
|
|
1048
|
+
var Button_default = {"button":"bds111Button-button","--default":"bds111Button---default","--ghost":"bds111Button---ghost","--size_small":"bds111Button---size_small","--size_medium":"bds111Button---size_medium","--size_large":"bds111Button---size_large","--hasPulse":"bds111Button---hasPulse","iconStart":"bds111Button-iconStart","iconEnd":"bds111Button-iconEnd"};
|
|
1049
1049
|
|
|
1050
1050
|
// src/components/interaction/Button/Button.tsx
|
|
1051
1051
|
var import_design_system_foundation23 = require("@boostdev/design-system-foundation");
|
|
@@ -1120,14 +1120,56 @@ function Button({
|
|
|
1120
1120
|
// src/components/interaction/Command/Command.tsx
|
|
1121
1121
|
var import_react6 = require("react");
|
|
1122
1122
|
|
|
1123
|
+
// src/polyfill-invoker-commands.ts
|
|
1124
|
+
var installed = false;
|
|
1125
|
+
function installInvokerCommandsPolyfill() {
|
|
1126
|
+
if (installed) return;
|
|
1127
|
+
if (typeof window === "undefined") return;
|
|
1128
|
+
if ("command" in HTMLButtonElement.prototype) return;
|
|
1129
|
+
installed = true;
|
|
1130
|
+
document.addEventListener("click", (e) => {
|
|
1131
|
+
const button = e.target?.closest("button[commandfor]");
|
|
1132
|
+
if (!button) return;
|
|
1133
|
+
const targetId = button.getAttribute("commandfor");
|
|
1134
|
+
const command = button.getAttribute("command");
|
|
1135
|
+
if (!targetId || !command) return;
|
|
1136
|
+
const target = document.getElementById(targetId);
|
|
1137
|
+
if (!target) return;
|
|
1138
|
+
const commandEvent = new Event("command", { cancelable: true, bubbles: false });
|
|
1139
|
+
Object.defineProperty(commandEvent, "command", { value: command, configurable: true });
|
|
1140
|
+
Object.defineProperty(commandEvent, "source", { value: button, configurable: true });
|
|
1141
|
+
const notCancelled = target.dispatchEvent(commandEvent);
|
|
1142
|
+
if (!notCancelled) return;
|
|
1143
|
+
if (target instanceof HTMLDialogElement) {
|
|
1144
|
+
if (command === "show-modal" && !target.open) {
|
|
1145
|
+
target.showModal();
|
|
1146
|
+
} else if (command === "close" && target.open) {
|
|
1147
|
+
target.close();
|
|
1148
|
+
}
|
|
1149
|
+
} else if (target.hasAttribute("popover") && "showPopover" in target) {
|
|
1150
|
+
const popover = target;
|
|
1151
|
+
if (command === "toggle-popover") {
|
|
1152
|
+
popover.togglePopover();
|
|
1153
|
+
} else if (command === "show-popover") {
|
|
1154
|
+
popover.showPopover();
|
|
1155
|
+
} else if (command === "hide-popover") {
|
|
1156
|
+
popover.hidePopover();
|
|
1157
|
+
}
|
|
1158
|
+
}
|
|
1159
|
+
});
|
|
1160
|
+
}
|
|
1161
|
+
|
|
1123
1162
|
// src/components/interaction/Command/Command.module.css
|
|
1124
|
-
var Command_default = {"dialog":"
|
|
1163
|
+
var Command_default = {"dialog":"bds111Command-dialog","palette":"bds111Command-palette","searchRow":"bds111Command-searchRow","searchIcon":"bds111Command-searchIcon","search":"bds111Command-search","escHint":"bds111Command-escHint","list":"bds111Command-list","groupList":"bds111Command-groupList","group":"bds111Command-group","item":"bds111Command-item","itemActive":"bds111Command-itemActive","itemLabel":"bds111Command-itemLabel","itemDesc":"bds111Command-itemDesc","shortcut":"bds111Command-shortcut","empty":"bds111Command-empty"};
|
|
1125
1164
|
|
|
1126
1165
|
// src/components/interaction/Command/Command.tsx
|
|
1127
1166
|
var import_design_system_foundation24 = require("@boostdev/design-system-foundation");
|
|
1128
1167
|
var import_jsx_runtime24 = require("react/jsx-runtime");
|
|
1168
|
+
installInvokerCommandsPolyfill();
|
|
1129
1169
|
function Command({
|
|
1170
|
+
id: idProp,
|
|
1130
1171
|
isOpen,
|
|
1172
|
+
onOpen,
|
|
1131
1173
|
onClose,
|
|
1132
1174
|
items,
|
|
1133
1175
|
placeholder = "Search commands\u2026",
|
|
@@ -1135,6 +1177,8 @@ function Command({
|
|
|
1135
1177
|
}) {
|
|
1136
1178
|
const [query, setQuery] = (0, import_react6.useState)("");
|
|
1137
1179
|
const [activeIndex, setActiveIndex] = (0, import_react6.useState)(0);
|
|
1180
|
+
const generatedId = (0, import_react6.useId)();
|
|
1181
|
+
const dialogId = idProp ?? generatedId;
|
|
1138
1182
|
const dialogRef = (0, import_react6.useRef)(null);
|
|
1139
1183
|
const inputRef = (0, import_react6.useRef)(null);
|
|
1140
1184
|
const listboxId = (0, import_react6.useId)();
|
|
@@ -1158,14 +1202,14 @@ function Command({
|
|
|
1158
1202
|
(0, import_react6.useEffect)(() => {
|
|
1159
1203
|
const dialog = dialogRef.current;
|
|
1160
1204
|
if (!dialog) return;
|
|
1161
|
-
if (isOpen) {
|
|
1205
|
+
if (isOpen && !dialog.open) {
|
|
1162
1206
|
triggerRef.current = document.activeElement;
|
|
1163
1207
|
dialog.showModal();
|
|
1164
1208
|
document.body.style.overflow = "hidden";
|
|
1165
1209
|
setQuery("");
|
|
1166
1210
|
setActiveIndex(0);
|
|
1167
1211
|
setTimeout(() => inputRef.current?.focus(), 0);
|
|
1168
|
-
} else if (dialog.open) {
|
|
1212
|
+
} else if (!isOpen && dialog.open) {
|
|
1169
1213
|
dialog.close();
|
|
1170
1214
|
document.body.style.overflow = "";
|
|
1171
1215
|
triggerRef.current?.focus();
|
|
@@ -1177,6 +1221,27 @@ function Command({
|
|
|
1177
1221
|
(0, import_react6.useEffect)(() => {
|
|
1178
1222
|
setActiveIndex(0);
|
|
1179
1223
|
}, [query]);
|
|
1224
|
+
(0, import_react6.useEffect)(() => {
|
|
1225
|
+
const dialog = dialogRef.current;
|
|
1226
|
+
if (!dialog) return;
|
|
1227
|
+
const handleCommand = (e) => {
|
|
1228
|
+
if (e.command === "show-modal") {
|
|
1229
|
+
triggerRef.current = document.activeElement;
|
|
1230
|
+
document.body.style.overflow = "hidden";
|
|
1231
|
+
setQuery("");
|
|
1232
|
+
setActiveIndex(0);
|
|
1233
|
+
setTimeout(() => inputRef.current?.focus(), 0);
|
|
1234
|
+
onOpen?.();
|
|
1235
|
+
} else if (e.command === "close") {
|
|
1236
|
+
document.body.style.overflow = "";
|
|
1237
|
+
const trigger = triggerRef.current;
|
|
1238
|
+
setTimeout(() => trigger?.focus(), 0);
|
|
1239
|
+
onClose();
|
|
1240
|
+
}
|
|
1241
|
+
};
|
|
1242
|
+
dialog.addEventListener("command", handleCommand);
|
|
1243
|
+
return () => dialog.removeEventListener("command", handleCommand);
|
|
1244
|
+
}, [onOpen, onClose]);
|
|
1180
1245
|
const handleCancel = (e) => {
|
|
1181
1246
|
e.preventDefault();
|
|
1182
1247
|
onClose();
|
|
@@ -1204,6 +1269,7 @@ function Command({
|
|
|
1204
1269
|
"dialog",
|
|
1205
1270
|
{
|
|
1206
1271
|
ref: dialogRef,
|
|
1272
|
+
id: dialogId,
|
|
1207
1273
|
className: (0, import_design_system_foundation24.cn)(Command_default.dialog, className),
|
|
1208
1274
|
"aria-label": "Command palette",
|
|
1209
1275
|
"aria-modal": "true",
|
|
@@ -1269,23 +1335,26 @@ function Command({
|
|
|
1269
1335
|
var import_react7 = require("react");
|
|
1270
1336
|
|
|
1271
1337
|
// src/components/interaction/Dialog/Dialog.module.css
|
|
1272
|
-
var Dialog_default = {"dialog":"
|
|
1338
|
+
var Dialog_default = {"dialog":"bds111Dialog-dialog","dialogContent":"bds111Dialog-dialogContent","closeButton":"bds111Dialog-closeButton"};
|
|
1273
1339
|
|
|
1274
1340
|
// src/components/interaction/Dialog/Dialog.tsx
|
|
1275
1341
|
var import_design_system_foundation25 = require("@boostdev/design-system-foundation");
|
|
1276
1342
|
var import_jsx_runtime25 = require("react/jsx-runtime");
|
|
1343
|
+
installInvokerCommandsPolyfill();
|
|
1277
1344
|
var FOCUSABLE_SELECTOR = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
|
|
1278
|
-
function Dialog({ children, isOpen = false, className, onClose }) {
|
|
1345
|
+
function Dialog({ children, id: idProp, isOpen = false, className, onOpen, onClose }) {
|
|
1346
|
+
const generatedId = (0, import_react7.useId)();
|
|
1347
|
+
const id = idProp ?? generatedId;
|
|
1279
1348
|
const dialogRef = (0, import_react7.useRef)(null);
|
|
1280
1349
|
const triggerRef = (0, import_react7.useRef)(null);
|
|
1281
1350
|
(0, import_react7.useEffect)(() => {
|
|
1282
1351
|
const dialog = dialogRef.current;
|
|
1283
1352
|
if (!dialog) return;
|
|
1284
|
-
if (isOpen) {
|
|
1353
|
+
if (isOpen && !dialog.open) {
|
|
1285
1354
|
triggerRef.current = document.activeElement;
|
|
1286
1355
|
dialog.showModal();
|
|
1287
1356
|
document.body.style.overflow = "hidden";
|
|
1288
|
-
} else if (dialog.open) {
|
|
1357
|
+
} else if (!isOpen && dialog.open) {
|
|
1289
1358
|
dialog.close();
|
|
1290
1359
|
document.body.style.overflow = "";
|
|
1291
1360
|
triggerRef.current?.focus();
|
|
@@ -1294,6 +1363,24 @@ function Dialog({ children, isOpen = false, className, onClose }) {
|
|
|
1294
1363
|
document.body.style.overflow = "";
|
|
1295
1364
|
};
|
|
1296
1365
|
}, [isOpen]);
|
|
1366
|
+
(0, import_react7.useEffect)(() => {
|
|
1367
|
+
const dialog = dialogRef.current;
|
|
1368
|
+
if (!dialog) return;
|
|
1369
|
+
const handleCommand = (e) => {
|
|
1370
|
+
if (e.command === "show-modal") {
|
|
1371
|
+
triggerRef.current = document.activeElement;
|
|
1372
|
+
document.body.style.overflow = "hidden";
|
|
1373
|
+
onOpen?.();
|
|
1374
|
+
} else if (e.command === "close") {
|
|
1375
|
+
document.body.style.overflow = "";
|
|
1376
|
+
const trigger = triggerRef.current;
|
|
1377
|
+
setTimeout(() => trigger?.focus(), 0);
|
|
1378
|
+
onClose?.();
|
|
1379
|
+
}
|
|
1380
|
+
};
|
|
1381
|
+
dialog.addEventListener("command", handleCommand);
|
|
1382
|
+
return () => dialog.removeEventListener("command", handleCommand);
|
|
1383
|
+
}, [onOpen, onClose]);
|
|
1297
1384
|
const handleBackdropClick = (e) => {
|
|
1298
1385
|
if (e.target === dialogRef.current) onClose?.();
|
|
1299
1386
|
};
|
|
@@ -1325,22 +1412,24 @@ function Dialog({ children, isOpen = false, className, onClose }) {
|
|
|
1325
1412
|
"dialog",
|
|
1326
1413
|
{
|
|
1327
1414
|
ref: dialogRef,
|
|
1415
|
+
id,
|
|
1328
1416
|
className: (0, import_design_system_foundation25.cn)(className, Dialog_default.dialog),
|
|
1329
1417
|
"aria-modal": "true",
|
|
1330
1418
|
onClick: handleBackdropClick,
|
|
1331
1419
|
onCancel: handleCancel,
|
|
1332
1420
|
onKeyDown: handleKeyDown,
|
|
1333
1421
|
children: [
|
|
1334
|
-
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
1422
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
1335
1423
|
"button",
|
|
1336
1424
|
{
|
|
1337
|
-
type: "
|
|
1425
|
+
type: "button",
|
|
1338
1426
|
className: Dialog_default.closeButton,
|
|
1339
|
-
|
|
1427
|
+
commandfor: id,
|
|
1428
|
+
command: "close",
|
|
1340
1429
|
"aria-label": "Close dialog",
|
|
1341
1430
|
children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M18 6L6 18M6 6l12 12" }) })
|
|
1342
1431
|
}
|
|
1343
|
-
)
|
|
1432
|
+
),
|
|
1344
1433
|
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: Dialog_default.dialogContent, children })
|
|
1345
1434
|
]
|
|
1346
1435
|
}
|
|
@@ -1351,13 +1440,16 @@ function Dialog({ children, isOpen = false, className, onClose }) {
|
|
|
1351
1440
|
var import_react8 = require("react");
|
|
1352
1441
|
|
|
1353
1442
|
// src/components/interaction/Drawer/Drawer.module.css
|
|
1354
|
-
var Drawer_default = {"drawer":"
|
|
1443
|
+
var Drawer_default = {"drawer":"bds111Drawer-drawer","panel":"bds111Drawer-panel","--side_right":"bds111Drawer---side_right","--side_left":"bds111Drawer---side_left","header":"bds111Drawer-header","closeButton":"bds111Drawer-closeButton","body":"bds111Drawer-body"};
|
|
1355
1444
|
|
|
1356
1445
|
// src/components/interaction/Drawer/Drawer.tsx
|
|
1357
1446
|
var import_design_system_foundation26 = require("@boostdev/design-system-foundation");
|
|
1358
1447
|
var import_jsx_runtime26 = require("react/jsx-runtime");
|
|
1448
|
+
installInvokerCommandsPolyfill();
|
|
1359
1449
|
function Drawer({
|
|
1450
|
+
id: idProp,
|
|
1360
1451
|
isOpen,
|
|
1452
|
+
onOpen,
|
|
1361
1453
|
onClose,
|
|
1362
1454
|
title,
|
|
1363
1455
|
children,
|
|
@@ -1365,16 +1457,18 @@ function Drawer({
|
|
|
1365
1457
|
ariaLabel,
|
|
1366
1458
|
className
|
|
1367
1459
|
}) {
|
|
1460
|
+
const generatedId = (0, import_react8.useId)();
|
|
1461
|
+
const id = idProp ?? generatedId;
|
|
1368
1462
|
const dialogRef = (0, import_react8.useRef)(null);
|
|
1369
1463
|
const triggerRef = (0, import_react8.useRef)(null);
|
|
1370
1464
|
(0, import_react8.useEffect)(() => {
|
|
1371
1465
|
const dialog = dialogRef.current;
|
|
1372
1466
|
if (!dialog) return;
|
|
1373
|
-
if (isOpen) {
|
|
1467
|
+
if (isOpen && !dialog.open) {
|
|
1374
1468
|
triggerRef.current = document.activeElement;
|
|
1375
1469
|
dialog.showModal();
|
|
1376
1470
|
document.body.style.overflow = "hidden";
|
|
1377
|
-
} else if (dialog.open) {
|
|
1471
|
+
} else if (!isOpen && dialog.open) {
|
|
1378
1472
|
dialog.close();
|
|
1379
1473
|
document.body.style.overflow = "";
|
|
1380
1474
|
triggerRef.current?.focus();
|
|
@@ -1383,6 +1477,24 @@ function Drawer({
|
|
|
1383
1477
|
document.body.style.overflow = "";
|
|
1384
1478
|
};
|
|
1385
1479
|
}, [isOpen]);
|
|
1480
|
+
(0, import_react8.useEffect)(() => {
|
|
1481
|
+
const dialog = dialogRef.current;
|
|
1482
|
+
if (!dialog) return;
|
|
1483
|
+
const handleCommand = (e) => {
|
|
1484
|
+
if (e.command === "show-modal") {
|
|
1485
|
+
triggerRef.current = document.activeElement;
|
|
1486
|
+
document.body.style.overflow = "hidden";
|
|
1487
|
+
onOpen?.();
|
|
1488
|
+
} else if (e.command === "close") {
|
|
1489
|
+
document.body.style.overflow = "";
|
|
1490
|
+
const trigger = triggerRef.current;
|
|
1491
|
+
setTimeout(() => trigger?.focus(), 0);
|
|
1492
|
+
onClose();
|
|
1493
|
+
}
|
|
1494
|
+
};
|
|
1495
|
+
dialog.addEventListener("command", handleCommand);
|
|
1496
|
+
return () => dialog.removeEventListener("command", handleCommand);
|
|
1497
|
+
}, [onOpen, onClose]);
|
|
1386
1498
|
const handleClick = (e) => {
|
|
1387
1499
|
if (e.target === dialogRef.current) onClose();
|
|
1388
1500
|
};
|
|
@@ -1394,6 +1506,7 @@ function Drawer({
|
|
|
1394
1506
|
"dialog",
|
|
1395
1507
|
{
|
|
1396
1508
|
ref: dialogRef,
|
|
1509
|
+
id,
|
|
1397
1510
|
className: (0, import_design_system_foundation26.cn)(Drawer_default.drawer, Drawer_default[`--side_${side}`], className),
|
|
1398
1511
|
"aria-label": ariaLabel,
|
|
1399
1512
|
"aria-modal": "true",
|
|
@@ -1407,7 +1520,8 @@ function Drawer({
|
|
|
1407
1520
|
{
|
|
1408
1521
|
type: "button",
|
|
1409
1522
|
className: Drawer_default.closeButton,
|
|
1410
|
-
|
|
1523
|
+
commandfor: id,
|
|
1524
|
+
command: "close",
|
|
1411
1525
|
"aria-label": "Close drawer",
|
|
1412
1526
|
children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M18 6L6 18M6 6l12 12" }) })
|
|
1413
1527
|
}
|
|
@@ -1423,7 +1537,7 @@ function Drawer({
|
|
|
1423
1537
|
var import_react9 = require("react");
|
|
1424
1538
|
|
|
1425
1539
|
// src/components/interaction/DropdownMenu/DropdownMenu.module.css
|
|
1426
|
-
var DropdownMenu_default = {"wrapper":"
|
|
1540
|
+
var DropdownMenu_default = {"wrapper":"bds111DropdownMenu-wrapper","menu":"bds111DropdownMenu-menu","--placement_bottom-start":"bds111DropdownMenu---placement_bottom-start","--placement_bottom-end":"bds111DropdownMenu---placement_bottom-end","separator":"bds111DropdownMenu-separator","item":"bds111DropdownMenu-item","icon":"bds111DropdownMenu-icon"};
|
|
1427
1541
|
|
|
1428
1542
|
// src/components/interaction/DropdownMenu/DropdownMenu.tsx
|
|
1429
1543
|
var import_design_system_foundation27 = require("@boostdev/design-system-foundation");
|
|
@@ -1536,12 +1650,12 @@ function DropdownMenu({
|
|
|
1536
1650
|
var import_react10 = require("react");
|
|
1537
1651
|
|
|
1538
1652
|
// src/components/interaction/Popover/Popover.module.css
|
|
1539
|
-
var Popover_default = {"wrapper":"
|
|
1653
|
+
var Popover_default = {"wrapper":"bds111Popover-wrapper","panel":"bds111Popover-panel","g":"bds111Popover-g"};
|
|
1540
1654
|
|
|
1541
1655
|
// src/components/interaction/Popover/Popover.tsx
|
|
1542
1656
|
var import_design_system_foundation28 = require("@boostdev/design-system-foundation");
|
|
1543
1657
|
var import_jsx_runtime28 = require("react/jsx-runtime");
|
|
1544
|
-
|
|
1658
|
+
installInvokerCommandsPolyfill();
|
|
1545
1659
|
if (typeof window !== "undefined" && !(typeof CSS !== "undefined" && typeof CSS.supports === "function" && CSS.supports("anchor-name: --a"))) {
|
|
1546
1660
|
import("@oddbird/css-anchor-positioning").catch(() => {
|
|
1547
1661
|
});
|
|
@@ -1555,80 +1669,59 @@ function Popover({
|
|
|
1555
1669
|
}) {
|
|
1556
1670
|
const [isOpen, setIsOpen] = (0, import_react10.useState)(false);
|
|
1557
1671
|
const containerRef = (0, import_react10.useRef)(null);
|
|
1558
|
-
const
|
|
1672
|
+
const panelRef = (0, import_react10.useRef)(null);
|
|
1559
1673
|
const rawId = (0, import_react10.useId)();
|
|
1560
1674
|
const anchorName = `--popover-${rawId.replace(/\W/g, "") || "a"}`;
|
|
1561
1675
|
const panelId = rawId;
|
|
1676
|
+
(0, import_react10.useEffect)(() => {
|
|
1677
|
+
const panel = panelRef.current;
|
|
1678
|
+
if (!panel) return;
|
|
1679
|
+
const handleToggle = (e) => {
|
|
1680
|
+
setIsOpen(e.newState === "open");
|
|
1681
|
+
};
|
|
1682
|
+
panel.addEventListener("toggle", handleToggle);
|
|
1683
|
+
return () => panel.removeEventListener("toggle", handleToggle);
|
|
1684
|
+
}, []);
|
|
1562
1685
|
(0, import_react10.useEffect)(() => {
|
|
1563
1686
|
if (!isOpen) return;
|
|
1564
|
-
const
|
|
1565
|
-
|
|
1566
|
-
|
|
1687
|
+
const handleScroll = () => {
|
|
1688
|
+
const rect = containerRef.current?.getBoundingClientRect();
|
|
1689
|
+
if (!rect) return;
|
|
1690
|
+
const { innerWidth: vw, innerHeight: vh } = window;
|
|
1691
|
+
if (rect.bottom < 0 || rect.top > vh || rect.right < 0 || rect.left > vw) {
|
|
1692
|
+
panelRef.current?.hidePopover();
|
|
1567
1693
|
}
|
|
1568
1694
|
};
|
|
1569
|
-
|
|
1570
|
-
|
|
1571
|
-
};
|
|
1572
|
-
document.addEventListener("mousedown", handleMouseDown);
|
|
1573
|
-
document.addEventListener("keydown", handleKeyDown);
|
|
1695
|
+
window.addEventListener("scroll", handleScroll, { capture: true, passive: true });
|
|
1696
|
+
window.addEventListener("resize", handleScroll, { passive: true });
|
|
1574
1697
|
return () => {
|
|
1575
|
-
|
|
1576
|
-
|
|
1698
|
+
window.removeEventListener("scroll", handleScroll, { capture: true });
|
|
1699
|
+
window.removeEventListener("resize", handleScroll);
|
|
1577
1700
|
};
|
|
1578
1701
|
}, [isOpen]);
|
|
1579
|
-
const constrainPanel = (0, import_react10.useCallback)(() => {
|
|
1580
|
-
const dialog = dialogRef.current;
|
|
1581
|
-
const container = containerRef.current;
|
|
1582
|
-
if (!dialog || !container) return;
|
|
1583
|
-
const rect = container.getBoundingClientRect();
|
|
1584
|
-
const vw = window.innerWidth;
|
|
1585
|
-
const vh = window.innerHeight;
|
|
1586
|
-
dialog.style.maxHeight = "";
|
|
1587
|
-
dialog.style.maxWidth = "";
|
|
1588
|
-
if (placement === "bottom") {
|
|
1589
|
-
dialog.style.maxHeight = `${Math.max(0, vh - rect.bottom - GAP * 2)}px`;
|
|
1590
|
-
dialog.style.maxWidth = `${Math.max(0, vw - rect.left - GAP)}px`;
|
|
1591
|
-
} else if (placement === "top") {
|
|
1592
|
-
dialog.style.maxHeight = `${Math.max(0, rect.top - GAP * 2)}px`;
|
|
1593
|
-
dialog.style.maxWidth = `${Math.max(0, vw - rect.left - GAP)}px`;
|
|
1594
|
-
} else if (placement === "right") {
|
|
1595
|
-
dialog.style.maxHeight = `${Math.max(0, vh - rect.top - GAP)}px`;
|
|
1596
|
-
dialog.style.maxWidth = `${Math.max(0, vw - rect.right - GAP * 2)}px`;
|
|
1597
|
-
} else {
|
|
1598
|
-
dialog.style.maxHeight = `${Math.max(0, vh - rect.top - GAP)}px`;
|
|
1599
|
-
dialog.style.maxWidth = `${Math.max(0, rect.left - GAP * 2)}px`;
|
|
1600
|
-
}
|
|
1601
|
-
}, [placement]);
|
|
1602
|
-
const toggle = (0, import_react10.useCallback)(() => {
|
|
1603
|
-
if (isOpen) {
|
|
1604
|
-
setIsOpen(false);
|
|
1605
|
-
} else {
|
|
1606
|
-
constrainPanel();
|
|
1607
|
-
setIsOpen(true);
|
|
1608
|
-
}
|
|
1609
|
-
}, [isOpen, constrainPanel]);
|
|
1610
1702
|
const trigger = (0, import_react10.isValidElement)(children) ? (0, import_react10.cloneElement)(children, {
|
|
1611
1703
|
"aria-expanded": isOpen,
|
|
1612
1704
|
"aria-controls": panelId,
|
|
1613
1705
|
"aria-haspopup": true,
|
|
1706
|
+
commandfor: panelId,
|
|
1707
|
+
command: "toggle-popover",
|
|
1614
1708
|
style: {
|
|
1615
1709
|
...children.props.style,
|
|
1616
1710
|
anchorName
|
|
1617
1711
|
},
|
|
1618
|
-
onClick
|
|
1619
|
-
|
|
1620
|
-
|
|
1621
|
-
|
|
1622
|
-
}
|
|
1712
|
+
// Forward any existing onClick on the child (for custom side-effects).
|
|
1713
|
+
// Do NOT add our own toggle here — commandfor/command handles it to
|
|
1714
|
+
// avoid a double-toggle when both onClick and invoker fire.
|
|
1715
|
+
onClick: children.props.onClick
|
|
1623
1716
|
}) : children;
|
|
1624
1717
|
return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("span", { ref: containerRef, className: (0, import_design_system_foundation28.cn)(Popover_default.wrapper, className), children: [
|
|
1625
1718
|
trigger,
|
|
1626
1719
|
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
1627
|
-
"
|
|
1720
|
+
"div",
|
|
1628
1721
|
{
|
|
1629
|
-
ref:
|
|
1722
|
+
ref: panelRef,
|
|
1630
1723
|
id: panelId,
|
|
1631
|
-
|
|
1724
|
+
popover: "auto",
|
|
1632
1725
|
"data-placement": placement,
|
|
1633
1726
|
role: ariaLabel ? "region" : void 0,
|
|
1634
1727
|
"aria-label": ariaLabel,
|
|
@@ -1641,7 +1734,7 @@ function Popover({
|
|
|
1641
1734
|
}
|
|
1642
1735
|
|
|
1643
1736
|
// src/components/interaction/Rating/Rating.module.css
|
|
1644
|
-
var Rating_default = {"rating":"
|
|
1737
|
+
var Rating_default = {"rating":"bds111Rating-rating","star":"bds111Rating-star","--filled":"bds111Rating---filled"};
|
|
1645
1738
|
|
|
1646
1739
|
// src/components/interaction/Rating/Rating.tsx
|
|
1647
1740
|
var import_design_system_foundation29 = require("@boostdev/design-system-foundation");
|
|
@@ -1672,7 +1765,7 @@ function Rating({ value, max = 5, className }) {
|
|
|
1672
1765
|
var import_react11 = require("react");
|
|
1673
1766
|
|
|
1674
1767
|
// src/components/interaction/Toast/Toast.module.css
|
|
1675
|
-
var Toast_default = {"toastContainer":"
|
|
1768
|
+
var Toast_default = {"toastContainer":"bds111Toast-toastContainer","toast":"bds111Toast-toast","--variant_success":"bds111Toast---variant_success","--variant_warning":"bds111Toast---variant_warning","--variant_info":"bds111Toast---variant_info","--variant_error":"bds111Toast---variant_error","message":"bds111Toast-message","closeButton":"bds111Toast-closeButton"};
|
|
1676
1769
|
|
|
1677
1770
|
// src/components/interaction/Toast/Toast.tsx
|
|
1678
1771
|
var import_design_system_foundation30 = require("@boostdev/design-system-foundation");
|
|
@@ -1745,10 +1838,10 @@ function useToast() {
|
|
|
1745
1838
|
var import_react12 = require("react");
|
|
1746
1839
|
|
|
1747
1840
|
// src/components/interaction/form/Checkbox/Checkbox.module.css
|
|
1748
|
-
var Checkbox_default = {"checkboxGroup":"
|
|
1841
|
+
var Checkbox_default = {"checkboxGroup":"bds111Checkbox-checkboxGroup","inputWrapper":"bds111Checkbox-inputWrapper","checkbox":"bds111Checkbox-checkbox","checkboxError":"bds111Checkbox-checkboxError"};
|
|
1749
1842
|
|
|
1750
1843
|
// src/components/interaction/form/atoms/Message.module.css
|
|
1751
|
-
var Message_default = {"error":"
|
|
1844
|
+
var Message_default = {"error":"bds111Message-error","hint":"bds111Message-hint"};
|
|
1752
1845
|
|
|
1753
1846
|
// src/components/interaction/form/atoms/Message.tsx
|
|
1754
1847
|
var import_design_system_foundation31 = require("@boostdev/design-system-foundation");
|
|
@@ -1759,7 +1852,7 @@ var Message = ({ message, type, inputId, className }) => {
|
|
|
1759
1852
|
};
|
|
1760
1853
|
|
|
1761
1854
|
// src/components/interaction/form/atoms/Label.module.css
|
|
1762
|
-
var Label_default = {"label":"
|
|
1855
|
+
var Label_default = {"label":"bds111Label-label"};
|
|
1763
1856
|
|
|
1764
1857
|
// src/components/interaction/form/atoms/Label.tsx
|
|
1765
1858
|
var import_design_system_foundation32 = require("@boostdev/design-system-foundation");
|
|
@@ -1772,7 +1865,7 @@ var Label = ({ label, id, className }) => {
|
|
|
1772
1865
|
var import_design_system_foundation34 = require("@boostdev/design-system-foundation");
|
|
1773
1866
|
|
|
1774
1867
|
// src/components/interaction/form/atoms/InputContainer.module.css
|
|
1775
|
-
var InputContainer_default = {"container":"
|
|
1868
|
+
var InputContainer_default = {"container":"bds111InputContainer-container"};
|
|
1776
1869
|
|
|
1777
1870
|
// src/components/interaction/form/atoms/InputContainer.tsx
|
|
1778
1871
|
var import_design_system_foundation33 = require("@boostdev/design-system-foundation");
|
|
@@ -1813,7 +1906,7 @@ function Checkbox({ label, name, error, hint, className, ...props }) {
|
|
|
1813
1906
|
var import_react13 = require("react");
|
|
1814
1907
|
|
|
1815
1908
|
// src/components/interaction/form/CheckboxGroup/CheckboxGroup.module.css
|
|
1816
|
-
var CheckboxGroup_default = {"group":"
|
|
1909
|
+
var CheckboxGroup_default = {"group":"bds111CheckboxGroup-group","legend":"bds111CheckboxGroup-legend","required":"bds111CheckboxGroup-required","items":"bds111CheckboxGroup-items"};
|
|
1817
1910
|
|
|
1818
1911
|
// src/components/interaction/form/CheckboxGroup/CheckboxGroup.tsx
|
|
1819
1912
|
var import_design_system_foundation35 = require("@boostdev/design-system-foundation");
|
|
@@ -1855,7 +1948,7 @@ function CheckboxGroup({
|
|
|
1855
1948
|
var import_react14 = require("react");
|
|
1856
1949
|
|
|
1857
1950
|
// src/components/interaction/form/Combobox/Combobox.module.css
|
|
1858
|
-
var Combobox_default = {"formGroup":"
|
|
1951
|
+
var Combobox_default = {"formGroup":"bds111Combobox-formGroup","inputWrapper":"bds111Combobox-inputWrapper","input":"bds111Combobox-input","inputError":"bds111Combobox-inputError","chevron":"bds111Combobox-chevron","listbox":"bds111Combobox-listbox","option":"bds111Combobox-option","--highlighted":"bds111Combobox---highlighted","--selected":"bds111Combobox---selected","--disabled":"bds111Combobox---disabled"};
|
|
1859
1952
|
|
|
1860
1953
|
// src/components/interaction/form/Combobox/Combobox.tsx
|
|
1861
1954
|
var import_design_system_foundation36 = require("@boostdev/design-system-foundation");
|
|
@@ -2005,7 +2098,7 @@ function Combobox({
|
|
|
2005
2098
|
var import_react15 = require("react");
|
|
2006
2099
|
|
|
2007
2100
|
// src/components/interaction/form/FileInput/FileInput.module.css
|
|
2008
|
-
var FileInput_default = {"formGroup":"
|
|
2101
|
+
var FileInput_default = {"formGroup":"bds111FileInput-formGroup","fieldLabel":"bds111FileInput-fieldLabel","dropZone":"bds111FileInput-dropZone","isDragging":"bds111FileInput-isDragging","hasError":"bds111FileInput-hasError","isDisabled":"bds111FileInput-isDisabled","icon":"bds111FileInput-icon","prompt":"bds111FileInput-prompt","acceptHint":"bds111FileInput-acceptHint","hiddenInput":"bds111FileInput-hiddenInput"};
|
|
2009
2102
|
|
|
2010
2103
|
// src/components/interaction/form/FileInput/FileInput.tsx
|
|
2011
2104
|
var import_design_system_foundation37 = require("@boostdev/design-system-foundation");
|
|
@@ -2105,7 +2198,7 @@ function FileInput({
|
|
|
2105
2198
|
var import_react16 = require("react");
|
|
2106
2199
|
|
|
2107
2200
|
// src/components/interaction/form/FormInput/FormInput.module.css
|
|
2108
|
-
var FormInput_default = {"formGroup":"
|
|
2201
|
+
var FormInput_default = {"formGroup":"bds111FormInput-formGroup","input":"bds111FormInput-input","inputError":"bds111FormInput-inputError"};
|
|
2109
2202
|
|
|
2110
2203
|
// src/components/interaction/form/FormInput/FormInput.tsx
|
|
2111
2204
|
var import_design_system_foundation38 = require("@boostdev/design-system-foundation");
|
|
@@ -2149,7 +2242,7 @@ function FormInput({
|
|
|
2149
2242
|
var import_react17 = require("react");
|
|
2150
2243
|
|
|
2151
2244
|
// src/components/interaction/form/NumberInput/NumberInput.module.css
|
|
2152
|
-
var NumberInput_default = {"formGroup":"
|
|
2245
|
+
var NumberInput_default = {"formGroup":"bds111NumberInput-formGroup","inputRow":"bds111NumberInput-inputRow","input":"bds111NumberInput-input","inputError":"bds111NumberInput-inputError","stepper":"bds111NumberInput-stepper"};
|
|
2153
2246
|
|
|
2154
2247
|
// src/components/interaction/form/NumberInput/NumberInput.tsx
|
|
2155
2248
|
var import_design_system_foundation39 = require("@boostdev/design-system-foundation");
|
|
@@ -2253,7 +2346,7 @@ function NumberInput({
|
|
|
2253
2346
|
var import_react18 = require("react");
|
|
2254
2347
|
|
|
2255
2348
|
// src/components/interaction/form/Radio/Radio.module.css
|
|
2256
|
-
var Radio_default = {"radioGroup":"
|
|
2349
|
+
var Radio_default = {"radioGroup":"bds111Radio-radioGroup","inputWrapper":"bds111Radio-inputWrapper","textWrapper":"bds111Radio-textWrapper","description":"bds111Radio-description","radio":"bds111Radio-radio","radioError":"bds111Radio-radioError"};
|
|
2257
2350
|
|
|
2258
2351
|
// src/components/interaction/form/Radio/Radio.tsx
|
|
2259
2352
|
var import_design_system_foundation40 = require("@boostdev/design-system-foundation");
|
|
@@ -2291,7 +2384,7 @@ function Radio({ label, name, description, error, hint, className, ...props }) {
|
|
|
2291
2384
|
var import_react19 = require("react");
|
|
2292
2385
|
|
|
2293
2386
|
// src/components/interaction/form/RadioGroup/RadioGroup.module.css
|
|
2294
|
-
var RadioGroup_default = {"group":"
|
|
2387
|
+
var RadioGroup_default = {"group":"bds111RadioGroup-group","legend":"bds111RadioGroup-legend","required":"bds111RadioGroup-required","items":"bds111RadioGroup-items"};
|
|
2295
2388
|
|
|
2296
2389
|
// src/components/interaction/form/RadioGroup/RadioGroup.tsx
|
|
2297
2390
|
var import_design_system_foundation41 = require("@boostdev/design-system-foundation");
|
|
@@ -2333,7 +2426,7 @@ function RadioGroup({
|
|
|
2333
2426
|
var import_react20 = require("react");
|
|
2334
2427
|
|
|
2335
2428
|
// src/components/interaction/form/SegmentedControl/SegmentedControl.module.css
|
|
2336
|
-
var SegmentedControl_default = {"control":"
|
|
2429
|
+
var SegmentedControl_default = {"control":"bds111SegmentedControl-control","thumb":"bds111SegmentedControl-thumb","item":"bds111SegmentedControl-item","--disabled":"bds111SegmentedControl---disabled","radio":"bds111SegmentedControl-radio","label":"bds111SegmentedControl-label","--size_small":"bds111SegmentedControl---size_small","--size_large":"bds111SegmentedControl---size_large","--active":"bds111SegmentedControl---active"};
|
|
2337
2430
|
|
|
2338
2431
|
// src/components/interaction/form/SegmentedControl/SegmentedControl.tsx
|
|
2339
2432
|
var import_design_system_foundation42 = require("@boostdev/design-system-foundation");
|
|
@@ -2411,7 +2504,7 @@ function SegmentedControl({
|
|
|
2411
2504
|
var import_react21 = require("react");
|
|
2412
2505
|
|
|
2413
2506
|
// src/components/interaction/form/Select/Select.module.css
|
|
2414
|
-
var Select_default = {"formGroup":"
|
|
2507
|
+
var Select_default = {"formGroup":"bds111Select-formGroup","selectWrapper":"bds111Select-selectWrapper","select":"bds111Select-select","selectError":"bds111Select-selectError","chevron":"bds111Select-chevron"};
|
|
2415
2508
|
|
|
2416
2509
|
// src/components/interaction/form/Select/Select.tsx
|
|
2417
2510
|
var import_design_system_foundation43 = require("@boostdev/design-system-foundation");
|
|
@@ -2462,7 +2555,7 @@ function Select({
|
|
|
2462
2555
|
var import_react22 = require("react");
|
|
2463
2556
|
|
|
2464
2557
|
// src/components/interaction/form/Slider/Slider.module.css
|
|
2465
|
-
var Slider_default = {"formGroup":"
|
|
2558
|
+
var Slider_default = {"formGroup":"bds111Slider-formGroup","labelRow":"bds111Slider-labelRow","value":"bds111Slider-value","slider":"bds111Slider-slider","sliderError":"bds111Slider-sliderError"};
|
|
2466
2559
|
|
|
2467
2560
|
// src/components/interaction/form/Slider/Slider.tsx
|
|
2468
2561
|
var import_design_system_foundation44 = require("@boostdev/design-system-foundation");
|
|
@@ -2524,7 +2617,7 @@ function Slider({
|
|
|
2524
2617
|
var import_react23 = require("react");
|
|
2525
2618
|
|
|
2526
2619
|
// src/components/interaction/form/Switch/Switch.module.css
|
|
2527
|
-
var Switch_default = {"switchGroup":"
|
|
2620
|
+
var Switch_default = {"switchGroup":"bds111Switch-switchGroup","--size_small":"bds111Switch---size_small","--size_medium":"bds111Switch---size_medium","--size_large":"bds111Switch---size_large","inputWrapper":"bds111Switch-inputWrapper","trackWrapper":"bds111Switch-trackWrapper","switch":"bds111Switch-switch","track":"bds111Switch-track","thumb":"bds111Switch-thumb","switchError":"bds111Switch-switchError"};
|
|
2528
2621
|
|
|
2529
2622
|
// src/components/interaction/form/Switch/Switch.tsx
|
|
2530
2623
|
var import_design_system_foundation45 = require("@boostdev/design-system-foundation");
|
|
@@ -2572,7 +2665,7 @@ function Switch({
|
|
|
2572
2665
|
var import_react24 = require("react");
|
|
2573
2666
|
|
|
2574
2667
|
// src/components/interaction/form/Textarea/Textarea.module.css
|
|
2575
|
-
var Textarea_default = {"formGroup":"
|
|
2668
|
+
var Textarea_default = {"formGroup":"bds111Textarea-formGroup","textarea":"bds111Textarea-textarea","textareaError":"bds111Textarea-textareaError"};
|
|
2576
2669
|
|
|
2577
2670
|
// src/components/interaction/form/Textarea/Textarea.tsx
|
|
2578
2671
|
var import_design_system_foundation46 = require("@boostdev/design-system-foundation");
|
|
@@ -2611,7 +2704,7 @@ function Textarea({
|
|
|
2611
2704
|
}
|
|
2612
2705
|
|
|
2613
2706
|
// src/components/layout/ButtonGroup/ButtonGroup.module.css
|
|
2614
|
-
var ButtonGroup_default = {"buttonGroup":"
|
|
2707
|
+
var ButtonGroup_default = {"buttonGroup":"bds111ButtonGroup-buttonGroup","container":"bds111ButtonGroup-container","--variant_card":"bds111ButtonGroup---variant_card","--variant_flow":"bds111ButtonGroup---variant_flow","--variant_modal":"bds111ButtonGroup---variant_modal","--variant_content":"bds111ButtonGroup---variant_content","--variant_grid":"bds111ButtonGroup---variant_grid"};
|
|
2615
2708
|
|
|
2616
2709
|
// src/components/layout/ButtonGroup/ButtonGroup.tsx
|
|
2617
2710
|
var import_design_system_foundation47 = require("@boostdev/design-system-foundation");
|
|
@@ -2629,7 +2722,7 @@ function ButtonGroup({ children, className, variant, "aria-label": ariaLabel })
|
|
|
2629
2722
|
}
|
|
2630
2723
|
|
|
2631
2724
|
// src/components/layout/Card/Card.module.css
|
|
2632
|
-
var Card_default = {"card":"
|
|
2725
|
+
var Card_default = {"card":"bds111Card-card","--default":"bds111Card---default","--elevated":"bds111Card---elevated","--outlined":"bds111Card---outlined","--clickable":"bds111Card---clickable","--padding-none":"bds111Card---padding-none","--padding-small":"bds111Card---padding-small","--padding-medium":"bds111Card---padding-medium","--padding-large":"bds111Card---padding-large","--text-start":"bds111Card---text-start","--text-center":"bds111Card---text-center","--text-end":"bds111Card---text-end"};
|
|
2633
2726
|
|
|
2634
2727
|
// src/components/layout/Card/Card.tsx
|
|
2635
2728
|
var import_design_system_foundation48 = require("@boostdev/design-system-foundation");
|
|
@@ -2667,7 +2760,7 @@ function Card({
|
|
|
2667
2760
|
}
|
|
2668
2761
|
|
|
2669
2762
|
// src/components/layout/SectionHeader/SectionHeader.module.css
|
|
2670
|
-
var SectionHeader_default = {"sectionHeader":"
|
|
2763
|
+
var SectionHeader_default = {"sectionHeader":"bds111SectionHeader-sectionHeader","title":"bds111SectionHeader-title","subtitle":"bds111SectionHeader-subtitle","--start":"bds111SectionHeader---start","--center":"bds111SectionHeader---center","--end":"bds111SectionHeader---end","--small":"bds111SectionHeader---small","--medium":"bds111SectionHeader---medium","--large":"bds111SectionHeader---large"};
|
|
2671
2764
|
|
|
2672
2765
|
// src/components/layout/SectionHeader/SectionHeader.tsx
|
|
2673
2766
|
var import_design_system_foundation49 = require("@boostdev/design-system-foundation");
|
|
@@ -2688,7 +2781,7 @@ function SectionHeader({
|
|
|
2688
2781
|
}
|
|
2689
2782
|
|
|
2690
2783
|
// src/components/layout/IconWrapper/IconWrapper.module.css
|
|
2691
|
-
var IconWrapper_default = {"wrapper":"
|
|
2784
|
+
var IconWrapper_default = {"wrapper":"bds111IconWrapper-wrapper"};
|
|
2692
2785
|
|
|
2693
2786
|
// src/components/layout/IconWrapper/IconWrapper.tsx
|
|
2694
2787
|
var import_design_system_foundation50 = require("@boostdev/design-system-foundation");
|