@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/index.cjs
CHANGED
|
@@ -86,7 +86,7 @@ module.exports = __toCommonJS(index_exports);
|
|
|
86
86
|
var import_react = require("react");
|
|
87
87
|
|
|
88
88
|
// src/components/ui/Accordion/Accordion.module.css
|
|
89
|
-
var Accordion_default = {"accordion":"
|
|
89
|
+
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"};
|
|
90
90
|
|
|
91
91
|
// src/components/ui/Accordion/Accordion.tsx
|
|
92
92
|
var import_design_system_foundation = require("@boostdev/design-system-foundation");
|
|
@@ -154,7 +154,7 @@ function Accordion({
|
|
|
154
154
|
}
|
|
155
155
|
|
|
156
156
|
// src/components/ui/Alert/Alert.module.css
|
|
157
|
-
var Alert_default = {"alert":"
|
|
157
|
+
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"};
|
|
158
158
|
|
|
159
159
|
// src/components/ui/Alert/Alert.tsx
|
|
160
160
|
var import_design_system_foundation2 = require("@boostdev/design-system-foundation");
|
|
@@ -197,7 +197,7 @@ function Alert({
|
|
|
197
197
|
}
|
|
198
198
|
|
|
199
199
|
// src/components/ui/Avatar/Avatar.module.css
|
|
200
|
-
var Avatar_default = {"avatar":"
|
|
200
|
+
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"};
|
|
201
201
|
|
|
202
202
|
// src/components/ui/Avatar/Avatar.tsx
|
|
203
203
|
var import_design_system_foundation3 = require("@boostdev/design-system-foundation");
|
|
@@ -223,7 +223,7 @@ function Avatar({ src, alt, name, size = "medium", className }) {
|
|
|
223
223
|
}
|
|
224
224
|
|
|
225
225
|
// src/components/ui/Badge/Badge.module.css
|
|
226
|
-
var Badge_default = {"badge":"
|
|
226
|
+
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"};
|
|
227
227
|
|
|
228
228
|
// src/components/ui/Badge/Badge.tsx
|
|
229
229
|
var import_design_system_foundation4 = require("@boostdev/design-system-foundation");
|
|
@@ -233,7 +233,7 @@ function Badge({ children, variant = "primary", className }) {
|
|
|
233
233
|
}
|
|
234
234
|
|
|
235
235
|
// src/components/ui/Breadcrumb/Breadcrumb.module.css
|
|
236
|
-
var Breadcrumb_default = {"breadcrumb":"
|
|
236
|
+
var Breadcrumb_default = {"breadcrumb":"bds111Breadcrumb-breadcrumb","list":"bds111Breadcrumb-list","item":"bds111Breadcrumb-item","link":"bds111Breadcrumb-link","separator":"bds111Breadcrumb-separator","current":"bds111Breadcrumb-current"};
|
|
237
237
|
|
|
238
238
|
// src/components/ui/Breadcrumb/Breadcrumb.tsx
|
|
239
239
|
var import_design_system_foundation5 = require("@boostdev/design-system-foundation");
|
|
@@ -249,7 +249,7 @@ function Breadcrumb({ items, className }) {
|
|
|
249
249
|
}
|
|
250
250
|
|
|
251
251
|
// src/components/ui/Collapsible/Collapsible.module.css
|
|
252
|
-
var Collapsible_default = {"collapsible":"
|
|
252
|
+
var Collapsible_default = {"collapsible":"bds111Collapsible-collapsible","summary":"bds111Collapsible-summary","summaryContent":"bds111Collapsible-summaryContent","icon":"bds111Collapsible-icon","content":"bds111Collapsible-content"};
|
|
253
253
|
|
|
254
254
|
// src/components/ui/Collapsible/Collapsible.tsx
|
|
255
255
|
var import_design_system_foundation6 = require("@boostdev/design-system-foundation");
|
|
@@ -290,7 +290,7 @@ function Collapsible({
|
|
|
290
290
|
var import_react2 = require("react");
|
|
291
291
|
|
|
292
292
|
// src/components/ui/Calendar/Calendar.module.css
|
|
293
|
-
var Calendar_default = {"calendar":"
|
|
293
|
+
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"};
|
|
294
294
|
|
|
295
295
|
// src/components/ui/Calendar/Calendar.tsx
|
|
296
296
|
var import_design_system_foundation7 = require("@boostdev/design-system-foundation");
|
|
@@ -465,7 +465,7 @@ function Calendar({ value, defaultValue, min, max, onChange, className }) {
|
|
|
465
465
|
var import_react3 = require("react");
|
|
466
466
|
|
|
467
467
|
// src/components/ui/Carousel/Carousel.module.css
|
|
468
|
-
var Carousel_default = {"carousel":"
|
|
468
|
+
var Carousel_default = {"carousel":"bds111Carousel-carousel","track":"bds111Carousel-track","slide":"bds111Carousel-slide","navBtn":"bds111Carousel-navBtn"};
|
|
469
469
|
|
|
470
470
|
// src/components/ui/Carousel/Carousel.tsx
|
|
471
471
|
var import_design_system_foundation8 = require("@boostdev/design-system-foundation");
|
|
@@ -518,7 +518,7 @@ function Carousel({ items, label, className }) {
|
|
|
518
518
|
}
|
|
519
519
|
|
|
520
520
|
// src/components/ui/DescriptionList/DescriptionList.module.css
|
|
521
|
-
var DescriptionList_default = {"list":"
|
|
521
|
+
var DescriptionList_default = {"list":"bds111DescriptionList-list","group":"bds111DescriptionList-group","term":"bds111DescriptionList-term","details":"bds111DescriptionList-details","--layout_inline":"bds111DescriptionList---layout_inline"};
|
|
522
522
|
|
|
523
523
|
// src/components/ui/DescriptionList/DescriptionList.tsx
|
|
524
524
|
var import_design_system_foundation9 = require("@boostdev/design-system-foundation");
|
|
@@ -531,7 +531,7 @@ function DescriptionList({ items, layout = "stacked", className }) {
|
|
|
531
531
|
}
|
|
532
532
|
|
|
533
533
|
// src/components/ui/Link/Link.module.css
|
|
534
|
-
var Link_default = {"link":"
|
|
534
|
+
var Link_default = {"link":"bds111Link-link","--variant_default":"bds111Link---variant_default","--variant_subtle":"bds111Link---variant_subtle","--variant_standalone":"bds111Link---variant_standalone","externalLabel":"bds111Link-externalLabel"};
|
|
535
535
|
|
|
536
536
|
// src/components/ui/Link/Link.tsx
|
|
537
537
|
var import_design_system_foundation10 = require("@boostdev/design-system-foundation");
|
|
@@ -562,7 +562,7 @@ function Link({
|
|
|
562
562
|
}
|
|
563
563
|
|
|
564
564
|
// src/components/ui/Loading/Loading.module.css
|
|
565
|
-
var Loading_default = {"loading":"
|
|
565
|
+
var Loading_default = {"loading":"bds111Loading-loading","spinner":"bds111Loading-spinner","--size_small":"bds111Loading---size_small","--size_large":"bds111Loading---size_large"};
|
|
566
566
|
|
|
567
567
|
// src/components/ui/Loading/Loading.tsx
|
|
568
568
|
var import_design_system_foundation11 = require("@boostdev/design-system-foundation");
|
|
@@ -572,7 +572,7 @@ function Loading({ size = "medium", className }) {
|
|
|
572
572
|
}
|
|
573
573
|
|
|
574
574
|
// src/components/ui/NotificationBanner/NotificationBanner.module.css
|
|
575
|
-
var NotificationBanner_default = {"banner":"
|
|
575
|
+
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"};
|
|
576
576
|
|
|
577
577
|
// src/components/ui/NotificationBanner/NotificationBanner.tsx
|
|
578
578
|
var import_design_system_foundation12 = require("@boostdev/design-system-foundation");
|
|
@@ -611,7 +611,7 @@ function NotificationBanner({
|
|
|
611
611
|
}
|
|
612
612
|
|
|
613
613
|
// src/components/ui/Pagination/Pagination.module.css
|
|
614
|
-
var Pagination_default = {"pagination":"
|
|
614
|
+
var Pagination_default = {"pagination":"bds111Pagination-pagination","list":"bds111Pagination-list","button":"bds111Pagination-button","--active":"bds111Pagination---active","--nav":"bds111Pagination---nav","ellipsis":"bds111Pagination-ellipsis"};
|
|
615
615
|
|
|
616
616
|
// src/components/ui/Pagination/Pagination.tsx
|
|
617
617
|
var import_design_system_foundation13 = require("@boostdev/design-system-foundation");
|
|
@@ -675,7 +675,7 @@ function Pagination({
|
|
|
675
675
|
}
|
|
676
676
|
|
|
677
677
|
// src/components/ui/Progress/Progress.module.css
|
|
678
|
-
var Progress_default = {"container":"
|
|
678
|
+
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"};
|
|
679
679
|
|
|
680
680
|
// src/components/ui/Progress/Progress.tsx
|
|
681
681
|
var import_design_system_foundation14 = require("@boostdev/design-system-foundation");
|
|
@@ -713,7 +713,7 @@ function Progress({
|
|
|
713
713
|
}
|
|
714
714
|
|
|
715
715
|
// src/components/ui/ProgressCircle/ProgressCircle.module.css
|
|
716
|
-
var ProgressCircle_default = {"wrapper":"
|
|
716
|
+
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"};
|
|
717
717
|
|
|
718
718
|
// src/components/ui/ProgressCircle/ProgressCircle.tsx
|
|
719
719
|
var import_design_system_foundation15 = require("@boostdev/design-system-foundation");
|
|
@@ -792,7 +792,7 @@ function ProgressCircle({
|
|
|
792
792
|
}
|
|
793
793
|
|
|
794
794
|
// src/components/ui/Separator/Separator.module.css
|
|
795
|
-
var Separator_default = {"separator":"
|
|
795
|
+
var Separator_default = {"separator":"bds111Separator-separator","--horizontal":"bds111Separator---horizontal","--vertical":"bds111Separator---vertical"};
|
|
796
796
|
|
|
797
797
|
// src/components/ui/Separator/Separator.tsx
|
|
798
798
|
var import_design_system_foundation16 = require("@boostdev/design-system-foundation");
|
|
@@ -815,7 +815,7 @@ function Separator({ orientation = "horizontal", className }) {
|
|
|
815
815
|
var import_design_system_foundation17 = require("@boostdev/design-system-foundation");
|
|
816
816
|
|
|
817
817
|
// src/components/ui/Skeleton/Skeleton.module.css
|
|
818
|
-
var Skeleton_default = {"skeleton":"
|
|
818
|
+
var Skeleton_default = {"skeleton":"bds111Skeleton-skeleton"};
|
|
819
819
|
|
|
820
820
|
// src/components/ui/Skeleton/Skeleton.tsx
|
|
821
821
|
var import_jsx_runtime17 = require("react/jsx-runtime");
|
|
@@ -824,7 +824,7 @@ function Skeleton({ className }) {
|
|
|
824
824
|
}
|
|
825
825
|
|
|
826
826
|
// src/components/ui/SkipLink/SkipLink.module.css
|
|
827
|
-
var SkipLink_default = {"skipLink":"
|
|
827
|
+
var SkipLink_default = {"skipLink":"bds111SkipLink-skipLink"};
|
|
828
828
|
|
|
829
829
|
// src/components/ui/SkipLink/SkipLink.tsx
|
|
830
830
|
var import_design_system_foundation18 = require("@boostdev/design-system-foundation");
|
|
@@ -834,7 +834,7 @@ function SkipLink({ href = "#main", children = "Skip to main content", className
|
|
|
834
834
|
}
|
|
835
835
|
|
|
836
836
|
// src/components/ui/Table/Table.module.css
|
|
837
|
-
var Table_default = {"wrapper":"
|
|
837
|
+
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"};
|
|
838
838
|
|
|
839
839
|
// src/components/ui/Table/Table.tsx
|
|
840
840
|
var import_design_system_foundation19 = require("@boostdev/design-system-foundation");
|
|
@@ -904,7 +904,7 @@ function Table({
|
|
|
904
904
|
var import_react4 = require("react");
|
|
905
905
|
|
|
906
906
|
// src/components/ui/Tabs/Tabs.module.css
|
|
907
|
-
var Tabs_default = {"tabs":"
|
|
907
|
+
var Tabs_default = {"tabs":"bds111Tabs-tabs","tabList":"bds111Tabs-tabList","tab":"bds111Tabs-tab","--active":"bds111Tabs---active","panel":"bds111Tabs-panel"};
|
|
908
908
|
|
|
909
909
|
// src/components/ui/Tabs/Tabs.tsx
|
|
910
910
|
var import_design_system_foundation20 = require("@boostdev/design-system-foundation");
|
|
@@ -984,7 +984,7 @@ function Tabs({ tabs, defaultTab, className }) {
|
|
|
984
984
|
var import_react5 = require("react");
|
|
985
985
|
|
|
986
986
|
// src/components/ui/Tooltip/Tooltip.module.css
|
|
987
|
-
var Tooltip_default = {"wrapper":"
|
|
987
|
+
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"};
|
|
988
988
|
|
|
989
989
|
// src/components/ui/Tooltip/Tooltip.tsx
|
|
990
990
|
var import_design_system_foundation21 = require("@boostdev/design-system-foundation");
|
|
@@ -1026,7 +1026,7 @@ function Tooltip({
|
|
|
1026
1026
|
}
|
|
1027
1027
|
|
|
1028
1028
|
// src/components/ui/Typography/Typography.module.css
|
|
1029
|
-
var Typography_default = {"typography":"
|
|
1029
|
+
var Typography_default = {"typography":"bds111Typography-typography","--h1":"bds111Typography---h1","--h2":"bds111Typography---h2","--h3":"bds111Typography---h3","--body":"bds111Typography---body","--body_s":"bds111Typography---body_s"};
|
|
1030
1030
|
|
|
1031
1031
|
// src/components/ui/Typography/Typography.tsx
|
|
1032
1032
|
var import_design_system_foundation22 = require("@boostdev/design-system-foundation");
|
|
@@ -1044,7 +1044,7 @@ function Typography({ variant = "body", component, children, className }) {
|
|
|
1044
1044
|
}
|
|
1045
1045
|
|
|
1046
1046
|
// src/components/interaction/Button/Button.module.css
|
|
1047
|
-
var Button_default = {"button":"
|
|
1047
|
+
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"};
|
|
1048
1048
|
|
|
1049
1049
|
// src/components/interaction/Button/Button.tsx
|
|
1050
1050
|
var import_design_system_foundation23 = require("@boostdev/design-system-foundation");
|
|
@@ -1119,14 +1119,56 @@ function Button({
|
|
|
1119
1119
|
// src/components/interaction/Command/Command.tsx
|
|
1120
1120
|
var import_react6 = require("react");
|
|
1121
1121
|
|
|
1122
|
+
// src/polyfill-invoker-commands.ts
|
|
1123
|
+
var installed = false;
|
|
1124
|
+
function installInvokerCommandsPolyfill() {
|
|
1125
|
+
if (installed) return;
|
|
1126
|
+
if (typeof window === "undefined") return;
|
|
1127
|
+
if ("command" in HTMLButtonElement.prototype) return;
|
|
1128
|
+
installed = true;
|
|
1129
|
+
document.addEventListener("click", (e) => {
|
|
1130
|
+
const button = e.target?.closest("button[commandfor]");
|
|
1131
|
+
if (!button) return;
|
|
1132
|
+
const targetId = button.getAttribute("commandfor");
|
|
1133
|
+
const command = button.getAttribute("command");
|
|
1134
|
+
if (!targetId || !command) return;
|
|
1135
|
+
const target = document.getElementById(targetId);
|
|
1136
|
+
if (!target) return;
|
|
1137
|
+
const commandEvent = new Event("command", { cancelable: true, bubbles: false });
|
|
1138
|
+
Object.defineProperty(commandEvent, "command", { value: command, configurable: true });
|
|
1139
|
+
Object.defineProperty(commandEvent, "source", { value: button, configurable: true });
|
|
1140
|
+
const notCancelled = target.dispatchEvent(commandEvent);
|
|
1141
|
+
if (!notCancelled) return;
|
|
1142
|
+
if (target instanceof HTMLDialogElement) {
|
|
1143
|
+
if (command === "show-modal" && !target.open) {
|
|
1144
|
+
target.showModal();
|
|
1145
|
+
} else if (command === "close" && target.open) {
|
|
1146
|
+
target.close();
|
|
1147
|
+
}
|
|
1148
|
+
} else if (target.hasAttribute("popover") && "showPopover" in target) {
|
|
1149
|
+
const popover = target;
|
|
1150
|
+
if (command === "toggle-popover") {
|
|
1151
|
+
popover.togglePopover();
|
|
1152
|
+
} else if (command === "show-popover") {
|
|
1153
|
+
popover.showPopover();
|
|
1154
|
+
} else if (command === "hide-popover") {
|
|
1155
|
+
popover.hidePopover();
|
|
1156
|
+
}
|
|
1157
|
+
}
|
|
1158
|
+
});
|
|
1159
|
+
}
|
|
1160
|
+
|
|
1122
1161
|
// src/components/interaction/Command/Command.module.css
|
|
1123
|
-
var Command_default = {"dialog":"
|
|
1162
|
+
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"};
|
|
1124
1163
|
|
|
1125
1164
|
// src/components/interaction/Command/Command.tsx
|
|
1126
1165
|
var import_design_system_foundation24 = require("@boostdev/design-system-foundation");
|
|
1127
1166
|
var import_jsx_runtime24 = require("react/jsx-runtime");
|
|
1167
|
+
installInvokerCommandsPolyfill();
|
|
1128
1168
|
function Command({
|
|
1169
|
+
id: idProp,
|
|
1129
1170
|
isOpen,
|
|
1171
|
+
onOpen,
|
|
1130
1172
|
onClose,
|
|
1131
1173
|
items,
|
|
1132
1174
|
placeholder = "Search commands\u2026",
|
|
@@ -1134,6 +1176,8 @@ function Command({
|
|
|
1134
1176
|
}) {
|
|
1135
1177
|
const [query, setQuery] = (0, import_react6.useState)("");
|
|
1136
1178
|
const [activeIndex, setActiveIndex] = (0, import_react6.useState)(0);
|
|
1179
|
+
const generatedId = (0, import_react6.useId)();
|
|
1180
|
+
const dialogId = idProp ?? generatedId;
|
|
1137
1181
|
const dialogRef = (0, import_react6.useRef)(null);
|
|
1138
1182
|
const inputRef = (0, import_react6.useRef)(null);
|
|
1139
1183
|
const listboxId = (0, import_react6.useId)();
|
|
@@ -1157,14 +1201,14 @@ function Command({
|
|
|
1157
1201
|
(0, import_react6.useEffect)(() => {
|
|
1158
1202
|
const dialog = dialogRef.current;
|
|
1159
1203
|
if (!dialog) return;
|
|
1160
|
-
if (isOpen) {
|
|
1204
|
+
if (isOpen && !dialog.open) {
|
|
1161
1205
|
triggerRef.current = document.activeElement;
|
|
1162
1206
|
dialog.showModal();
|
|
1163
1207
|
document.body.style.overflow = "hidden";
|
|
1164
1208
|
setQuery("");
|
|
1165
1209
|
setActiveIndex(0);
|
|
1166
1210
|
setTimeout(() => inputRef.current?.focus(), 0);
|
|
1167
|
-
} else if (dialog.open) {
|
|
1211
|
+
} else if (!isOpen && dialog.open) {
|
|
1168
1212
|
dialog.close();
|
|
1169
1213
|
document.body.style.overflow = "";
|
|
1170
1214
|
triggerRef.current?.focus();
|
|
@@ -1176,6 +1220,27 @@ function Command({
|
|
|
1176
1220
|
(0, import_react6.useEffect)(() => {
|
|
1177
1221
|
setActiveIndex(0);
|
|
1178
1222
|
}, [query]);
|
|
1223
|
+
(0, import_react6.useEffect)(() => {
|
|
1224
|
+
const dialog = dialogRef.current;
|
|
1225
|
+
if (!dialog) return;
|
|
1226
|
+
const handleCommand = (e) => {
|
|
1227
|
+
if (e.command === "show-modal") {
|
|
1228
|
+
triggerRef.current = document.activeElement;
|
|
1229
|
+
document.body.style.overflow = "hidden";
|
|
1230
|
+
setQuery("");
|
|
1231
|
+
setActiveIndex(0);
|
|
1232
|
+
setTimeout(() => inputRef.current?.focus(), 0);
|
|
1233
|
+
onOpen?.();
|
|
1234
|
+
} else if (e.command === "close") {
|
|
1235
|
+
document.body.style.overflow = "";
|
|
1236
|
+
const trigger = triggerRef.current;
|
|
1237
|
+
setTimeout(() => trigger?.focus(), 0);
|
|
1238
|
+
onClose();
|
|
1239
|
+
}
|
|
1240
|
+
};
|
|
1241
|
+
dialog.addEventListener("command", handleCommand);
|
|
1242
|
+
return () => dialog.removeEventListener("command", handleCommand);
|
|
1243
|
+
}, [onOpen, onClose]);
|
|
1179
1244
|
const handleCancel = (e) => {
|
|
1180
1245
|
e.preventDefault();
|
|
1181
1246
|
onClose();
|
|
@@ -1203,6 +1268,7 @@ function Command({
|
|
|
1203
1268
|
"dialog",
|
|
1204
1269
|
{
|
|
1205
1270
|
ref: dialogRef,
|
|
1271
|
+
id: dialogId,
|
|
1206
1272
|
className: (0, import_design_system_foundation24.cn)(Command_default.dialog, className),
|
|
1207
1273
|
"aria-label": "Command palette",
|
|
1208
1274
|
"aria-modal": "true",
|
|
@@ -1268,23 +1334,26 @@ function Command({
|
|
|
1268
1334
|
var import_react7 = require("react");
|
|
1269
1335
|
|
|
1270
1336
|
// src/components/interaction/Dialog/Dialog.module.css
|
|
1271
|
-
var Dialog_default = {"dialog":"
|
|
1337
|
+
var Dialog_default = {"dialog":"bds111Dialog-dialog","dialogContent":"bds111Dialog-dialogContent","closeButton":"bds111Dialog-closeButton"};
|
|
1272
1338
|
|
|
1273
1339
|
// src/components/interaction/Dialog/Dialog.tsx
|
|
1274
1340
|
var import_design_system_foundation25 = require("@boostdev/design-system-foundation");
|
|
1275
1341
|
var import_jsx_runtime25 = require("react/jsx-runtime");
|
|
1342
|
+
installInvokerCommandsPolyfill();
|
|
1276
1343
|
var FOCUSABLE_SELECTOR = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
|
|
1277
|
-
function Dialog({ children, isOpen = false, className, onClose }) {
|
|
1344
|
+
function Dialog({ children, id: idProp, isOpen = false, className, onOpen, onClose }) {
|
|
1345
|
+
const generatedId = (0, import_react7.useId)();
|
|
1346
|
+
const id = idProp ?? generatedId;
|
|
1278
1347
|
const dialogRef = (0, import_react7.useRef)(null);
|
|
1279
1348
|
const triggerRef = (0, import_react7.useRef)(null);
|
|
1280
1349
|
(0, import_react7.useEffect)(() => {
|
|
1281
1350
|
const dialog = dialogRef.current;
|
|
1282
1351
|
if (!dialog) return;
|
|
1283
|
-
if (isOpen) {
|
|
1352
|
+
if (isOpen && !dialog.open) {
|
|
1284
1353
|
triggerRef.current = document.activeElement;
|
|
1285
1354
|
dialog.showModal();
|
|
1286
1355
|
document.body.style.overflow = "hidden";
|
|
1287
|
-
} else if (dialog.open) {
|
|
1356
|
+
} else if (!isOpen && dialog.open) {
|
|
1288
1357
|
dialog.close();
|
|
1289
1358
|
document.body.style.overflow = "";
|
|
1290
1359
|
triggerRef.current?.focus();
|
|
@@ -1293,6 +1362,24 @@ function Dialog({ children, isOpen = false, className, onClose }) {
|
|
|
1293
1362
|
document.body.style.overflow = "";
|
|
1294
1363
|
};
|
|
1295
1364
|
}, [isOpen]);
|
|
1365
|
+
(0, import_react7.useEffect)(() => {
|
|
1366
|
+
const dialog = dialogRef.current;
|
|
1367
|
+
if (!dialog) return;
|
|
1368
|
+
const handleCommand = (e) => {
|
|
1369
|
+
if (e.command === "show-modal") {
|
|
1370
|
+
triggerRef.current = document.activeElement;
|
|
1371
|
+
document.body.style.overflow = "hidden";
|
|
1372
|
+
onOpen?.();
|
|
1373
|
+
} else if (e.command === "close") {
|
|
1374
|
+
document.body.style.overflow = "";
|
|
1375
|
+
const trigger = triggerRef.current;
|
|
1376
|
+
setTimeout(() => trigger?.focus(), 0);
|
|
1377
|
+
onClose?.();
|
|
1378
|
+
}
|
|
1379
|
+
};
|
|
1380
|
+
dialog.addEventListener("command", handleCommand);
|
|
1381
|
+
return () => dialog.removeEventListener("command", handleCommand);
|
|
1382
|
+
}, [onOpen, onClose]);
|
|
1296
1383
|
const handleBackdropClick = (e) => {
|
|
1297
1384
|
if (e.target === dialogRef.current) onClose?.();
|
|
1298
1385
|
};
|
|
@@ -1324,22 +1411,24 @@ function Dialog({ children, isOpen = false, className, onClose }) {
|
|
|
1324
1411
|
"dialog",
|
|
1325
1412
|
{
|
|
1326
1413
|
ref: dialogRef,
|
|
1414
|
+
id,
|
|
1327
1415
|
className: (0, import_design_system_foundation25.cn)(className, Dialog_default.dialog),
|
|
1328
1416
|
"aria-modal": "true",
|
|
1329
1417
|
onClick: handleBackdropClick,
|
|
1330
1418
|
onCancel: handleCancel,
|
|
1331
1419
|
onKeyDown: handleKeyDown,
|
|
1332
1420
|
children: [
|
|
1333
|
-
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
1421
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
1334
1422
|
"button",
|
|
1335
1423
|
{
|
|
1336
|
-
type: "
|
|
1424
|
+
type: "button",
|
|
1337
1425
|
className: Dialog_default.closeButton,
|
|
1338
|
-
|
|
1426
|
+
commandfor: id,
|
|
1427
|
+
command: "close",
|
|
1339
1428
|
"aria-label": "Close dialog",
|
|
1340
1429
|
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" }) })
|
|
1341
1430
|
}
|
|
1342
|
-
)
|
|
1431
|
+
),
|
|
1343
1432
|
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: Dialog_default.dialogContent, children })
|
|
1344
1433
|
]
|
|
1345
1434
|
}
|
|
@@ -1350,13 +1439,16 @@ function Dialog({ children, isOpen = false, className, onClose }) {
|
|
|
1350
1439
|
var import_react8 = require("react");
|
|
1351
1440
|
|
|
1352
1441
|
// src/components/interaction/Drawer/Drawer.module.css
|
|
1353
|
-
var Drawer_default = {"drawer":"
|
|
1442
|
+
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"};
|
|
1354
1443
|
|
|
1355
1444
|
// src/components/interaction/Drawer/Drawer.tsx
|
|
1356
1445
|
var import_design_system_foundation26 = require("@boostdev/design-system-foundation");
|
|
1357
1446
|
var import_jsx_runtime26 = require("react/jsx-runtime");
|
|
1447
|
+
installInvokerCommandsPolyfill();
|
|
1358
1448
|
function Drawer({
|
|
1449
|
+
id: idProp,
|
|
1359
1450
|
isOpen,
|
|
1451
|
+
onOpen,
|
|
1360
1452
|
onClose,
|
|
1361
1453
|
title,
|
|
1362
1454
|
children,
|
|
@@ -1364,16 +1456,18 @@ function Drawer({
|
|
|
1364
1456
|
ariaLabel,
|
|
1365
1457
|
className
|
|
1366
1458
|
}) {
|
|
1459
|
+
const generatedId = (0, import_react8.useId)();
|
|
1460
|
+
const id = idProp ?? generatedId;
|
|
1367
1461
|
const dialogRef = (0, import_react8.useRef)(null);
|
|
1368
1462
|
const triggerRef = (0, import_react8.useRef)(null);
|
|
1369
1463
|
(0, import_react8.useEffect)(() => {
|
|
1370
1464
|
const dialog = dialogRef.current;
|
|
1371
1465
|
if (!dialog) return;
|
|
1372
|
-
if (isOpen) {
|
|
1466
|
+
if (isOpen && !dialog.open) {
|
|
1373
1467
|
triggerRef.current = document.activeElement;
|
|
1374
1468
|
dialog.showModal();
|
|
1375
1469
|
document.body.style.overflow = "hidden";
|
|
1376
|
-
} else if (dialog.open) {
|
|
1470
|
+
} else if (!isOpen && dialog.open) {
|
|
1377
1471
|
dialog.close();
|
|
1378
1472
|
document.body.style.overflow = "";
|
|
1379
1473
|
triggerRef.current?.focus();
|
|
@@ -1382,6 +1476,24 @@ function Drawer({
|
|
|
1382
1476
|
document.body.style.overflow = "";
|
|
1383
1477
|
};
|
|
1384
1478
|
}, [isOpen]);
|
|
1479
|
+
(0, import_react8.useEffect)(() => {
|
|
1480
|
+
const dialog = dialogRef.current;
|
|
1481
|
+
if (!dialog) return;
|
|
1482
|
+
const handleCommand = (e) => {
|
|
1483
|
+
if (e.command === "show-modal") {
|
|
1484
|
+
triggerRef.current = document.activeElement;
|
|
1485
|
+
document.body.style.overflow = "hidden";
|
|
1486
|
+
onOpen?.();
|
|
1487
|
+
} else if (e.command === "close") {
|
|
1488
|
+
document.body.style.overflow = "";
|
|
1489
|
+
const trigger = triggerRef.current;
|
|
1490
|
+
setTimeout(() => trigger?.focus(), 0);
|
|
1491
|
+
onClose();
|
|
1492
|
+
}
|
|
1493
|
+
};
|
|
1494
|
+
dialog.addEventListener("command", handleCommand);
|
|
1495
|
+
return () => dialog.removeEventListener("command", handleCommand);
|
|
1496
|
+
}, [onOpen, onClose]);
|
|
1385
1497
|
const handleClick = (e) => {
|
|
1386
1498
|
if (e.target === dialogRef.current) onClose();
|
|
1387
1499
|
};
|
|
@@ -1393,6 +1505,7 @@ function Drawer({
|
|
|
1393
1505
|
"dialog",
|
|
1394
1506
|
{
|
|
1395
1507
|
ref: dialogRef,
|
|
1508
|
+
id,
|
|
1396
1509
|
className: (0, import_design_system_foundation26.cn)(Drawer_default.drawer, Drawer_default[`--side_${side}`], className),
|
|
1397
1510
|
"aria-label": ariaLabel,
|
|
1398
1511
|
"aria-modal": "true",
|
|
@@ -1406,7 +1519,8 @@ function Drawer({
|
|
|
1406
1519
|
{
|
|
1407
1520
|
type: "button",
|
|
1408
1521
|
className: Drawer_default.closeButton,
|
|
1409
|
-
|
|
1522
|
+
commandfor: id,
|
|
1523
|
+
command: "close",
|
|
1410
1524
|
"aria-label": "Close drawer",
|
|
1411
1525
|
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" }) })
|
|
1412
1526
|
}
|
|
@@ -1422,7 +1536,7 @@ function Drawer({
|
|
|
1422
1536
|
var import_react9 = require("react");
|
|
1423
1537
|
|
|
1424
1538
|
// src/components/interaction/DropdownMenu/DropdownMenu.module.css
|
|
1425
|
-
var DropdownMenu_default = {"wrapper":"
|
|
1539
|
+
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"};
|
|
1426
1540
|
|
|
1427
1541
|
// src/components/interaction/DropdownMenu/DropdownMenu.tsx
|
|
1428
1542
|
var import_design_system_foundation27 = require("@boostdev/design-system-foundation");
|
|
@@ -1535,12 +1649,12 @@ function DropdownMenu({
|
|
|
1535
1649
|
var import_react10 = require("react");
|
|
1536
1650
|
|
|
1537
1651
|
// src/components/interaction/Popover/Popover.module.css
|
|
1538
|
-
var Popover_default = {"wrapper":"
|
|
1652
|
+
var Popover_default = {"wrapper":"bds111Popover-wrapper","panel":"bds111Popover-panel","g":"bds111Popover-g"};
|
|
1539
1653
|
|
|
1540
1654
|
// src/components/interaction/Popover/Popover.tsx
|
|
1541
1655
|
var import_design_system_foundation28 = require("@boostdev/design-system-foundation");
|
|
1542
1656
|
var import_jsx_runtime28 = require("react/jsx-runtime");
|
|
1543
|
-
|
|
1657
|
+
installInvokerCommandsPolyfill();
|
|
1544
1658
|
if (typeof window !== "undefined" && !(typeof CSS !== "undefined" && typeof CSS.supports === "function" && CSS.supports("anchor-name: --a"))) {
|
|
1545
1659
|
import("@oddbird/css-anchor-positioning").catch(() => {
|
|
1546
1660
|
});
|
|
@@ -1554,80 +1668,59 @@ function Popover({
|
|
|
1554
1668
|
}) {
|
|
1555
1669
|
const [isOpen, setIsOpen] = (0, import_react10.useState)(false);
|
|
1556
1670
|
const containerRef = (0, import_react10.useRef)(null);
|
|
1557
|
-
const
|
|
1671
|
+
const panelRef = (0, import_react10.useRef)(null);
|
|
1558
1672
|
const rawId = (0, import_react10.useId)();
|
|
1559
1673
|
const anchorName = `--popover-${rawId.replace(/\W/g, "") || "a"}`;
|
|
1560
1674
|
const panelId = rawId;
|
|
1675
|
+
(0, import_react10.useEffect)(() => {
|
|
1676
|
+
const panel = panelRef.current;
|
|
1677
|
+
if (!panel) return;
|
|
1678
|
+
const handleToggle = (e) => {
|
|
1679
|
+
setIsOpen(e.newState === "open");
|
|
1680
|
+
};
|
|
1681
|
+
panel.addEventListener("toggle", handleToggle);
|
|
1682
|
+
return () => panel.removeEventListener("toggle", handleToggle);
|
|
1683
|
+
}, []);
|
|
1561
1684
|
(0, import_react10.useEffect)(() => {
|
|
1562
1685
|
if (!isOpen) return;
|
|
1563
|
-
const
|
|
1564
|
-
|
|
1565
|
-
|
|
1686
|
+
const handleScroll = () => {
|
|
1687
|
+
const rect = containerRef.current?.getBoundingClientRect();
|
|
1688
|
+
if (!rect) return;
|
|
1689
|
+
const { innerWidth: vw, innerHeight: vh } = window;
|
|
1690
|
+
if (rect.bottom < 0 || rect.top > vh || rect.right < 0 || rect.left > vw) {
|
|
1691
|
+
panelRef.current?.hidePopover();
|
|
1566
1692
|
}
|
|
1567
1693
|
};
|
|
1568
|
-
|
|
1569
|
-
|
|
1570
|
-
};
|
|
1571
|
-
document.addEventListener("mousedown", handleMouseDown);
|
|
1572
|
-
document.addEventListener("keydown", handleKeyDown);
|
|
1694
|
+
window.addEventListener("scroll", handleScroll, { capture: true, passive: true });
|
|
1695
|
+
window.addEventListener("resize", handleScroll, { passive: true });
|
|
1573
1696
|
return () => {
|
|
1574
|
-
|
|
1575
|
-
|
|
1697
|
+
window.removeEventListener("scroll", handleScroll, { capture: true });
|
|
1698
|
+
window.removeEventListener("resize", handleScroll);
|
|
1576
1699
|
};
|
|
1577
1700
|
}, [isOpen]);
|
|
1578
|
-
const constrainPanel = (0, import_react10.useCallback)(() => {
|
|
1579
|
-
const dialog = dialogRef.current;
|
|
1580
|
-
const container = containerRef.current;
|
|
1581
|
-
if (!dialog || !container) return;
|
|
1582
|
-
const rect = container.getBoundingClientRect();
|
|
1583
|
-
const vw = window.innerWidth;
|
|
1584
|
-
const vh = window.innerHeight;
|
|
1585
|
-
dialog.style.maxHeight = "";
|
|
1586
|
-
dialog.style.maxWidth = "";
|
|
1587
|
-
if (placement === "bottom") {
|
|
1588
|
-
dialog.style.maxHeight = `${Math.max(0, vh - rect.bottom - GAP * 2)}px`;
|
|
1589
|
-
dialog.style.maxWidth = `${Math.max(0, vw - rect.left - GAP)}px`;
|
|
1590
|
-
} else if (placement === "top") {
|
|
1591
|
-
dialog.style.maxHeight = `${Math.max(0, rect.top - GAP * 2)}px`;
|
|
1592
|
-
dialog.style.maxWidth = `${Math.max(0, vw - rect.left - GAP)}px`;
|
|
1593
|
-
} else if (placement === "right") {
|
|
1594
|
-
dialog.style.maxHeight = `${Math.max(0, vh - rect.top - GAP)}px`;
|
|
1595
|
-
dialog.style.maxWidth = `${Math.max(0, vw - rect.right - GAP * 2)}px`;
|
|
1596
|
-
} else {
|
|
1597
|
-
dialog.style.maxHeight = `${Math.max(0, vh - rect.top - GAP)}px`;
|
|
1598
|
-
dialog.style.maxWidth = `${Math.max(0, rect.left - GAP * 2)}px`;
|
|
1599
|
-
}
|
|
1600
|
-
}, [placement]);
|
|
1601
|
-
const toggle = (0, import_react10.useCallback)(() => {
|
|
1602
|
-
if (isOpen) {
|
|
1603
|
-
setIsOpen(false);
|
|
1604
|
-
} else {
|
|
1605
|
-
constrainPanel();
|
|
1606
|
-
setIsOpen(true);
|
|
1607
|
-
}
|
|
1608
|
-
}, [isOpen, constrainPanel]);
|
|
1609
1701
|
const trigger = (0, import_react10.isValidElement)(children) ? (0, import_react10.cloneElement)(children, {
|
|
1610
1702
|
"aria-expanded": isOpen,
|
|
1611
1703
|
"aria-controls": panelId,
|
|
1612
1704
|
"aria-haspopup": true,
|
|
1705
|
+
commandfor: panelId,
|
|
1706
|
+
command: "toggle-popover",
|
|
1613
1707
|
style: {
|
|
1614
1708
|
...children.props.style,
|
|
1615
1709
|
anchorName
|
|
1616
1710
|
},
|
|
1617
|
-
onClick
|
|
1618
|
-
|
|
1619
|
-
|
|
1620
|
-
|
|
1621
|
-
}
|
|
1711
|
+
// Forward any existing onClick on the child (for custom side-effects).
|
|
1712
|
+
// Do NOT add our own toggle here — commandfor/command handles it to
|
|
1713
|
+
// avoid a double-toggle when both onClick and invoker fire.
|
|
1714
|
+
onClick: children.props.onClick
|
|
1622
1715
|
}) : children;
|
|
1623
1716
|
return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("span", { ref: containerRef, className: (0, import_design_system_foundation28.cn)(Popover_default.wrapper, className), children: [
|
|
1624
1717
|
trigger,
|
|
1625
1718
|
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
1626
|
-
"
|
|
1719
|
+
"div",
|
|
1627
1720
|
{
|
|
1628
|
-
ref:
|
|
1721
|
+
ref: panelRef,
|
|
1629
1722
|
id: panelId,
|
|
1630
|
-
|
|
1723
|
+
popover: "auto",
|
|
1631
1724
|
"data-placement": placement,
|
|
1632
1725
|
role: ariaLabel ? "region" : void 0,
|
|
1633
1726
|
"aria-label": ariaLabel,
|
|
@@ -1640,7 +1733,7 @@ function Popover({
|
|
|
1640
1733
|
}
|
|
1641
1734
|
|
|
1642
1735
|
// src/components/interaction/Rating/Rating.module.css
|
|
1643
|
-
var Rating_default = {"rating":"
|
|
1736
|
+
var Rating_default = {"rating":"bds111Rating-rating","star":"bds111Rating-star","--filled":"bds111Rating---filled"};
|
|
1644
1737
|
|
|
1645
1738
|
// src/components/interaction/Rating/Rating.tsx
|
|
1646
1739
|
var import_design_system_foundation29 = require("@boostdev/design-system-foundation");
|
|
@@ -1671,7 +1764,7 @@ function Rating({ value, max = 5, className }) {
|
|
|
1671
1764
|
var import_react11 = require("react");
|
|
1672
1765
|
|
|
1673
1766
|
// src/components/interaction/Toast/Toast.module.css
|
|
1674
|
-
var Toast_default = {"toastContainer":"
|
|
1767
|
+
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"};
|
|
1675
1768
|
|
|
1676
1769
|
// src/components/interaction/Toast/Toast.tsx
|
|
1677
1770
|
var import_design_system_foundation30 = require("@boostdev/design-system-foundation");
|
|
@@ -1744,10 +1837,10 @@ function useToast() {
|
|
|
1744
1837
|
var import_react12 = require("react");
|
|
1745
1838
|
|
|
1746
1839
|
// src/components/interaction/form/Checkbox/Checkbox.module.css
|
|
1747
|
-
var Checkbox_default = {"checkboxGroup":"
|
|
1840
|
+
var Checkbox_default = {"checkboxGroup":"bds111Checkbox-checkboxGroup","inputWrapper":"bds111Checkbox-inputWrapper","checkbox":"bds111Checkbox-checkbox","checkboxError":"bds111Checkbox-checkboxError"};
|
|
1748
1841
|
|
|
1749
1842
|
// src/components/interaction/form/atoms/Message.module.css
|
|
1750
|
-
var Message_default = {"error":"
|
|
1843
|
+
var Message_default = {"error":"bds111Message-error","hint":"bds111Message-hint"};
|
|
1751
1844
|
|
|
1752
1845
|
// src/components/interaction/form/atoms/Message.tsx
|
|
1753
1846
|
var import_design_system_foundation31 = require("@boostdev/design-system-foundation");
|
|
@@ -1758,7 +1851,7 @@ var Message = ({ message, type, inputId, className }) => {
|
|
|
1758
1851
|
};
|
|
1759
1852
|
|
|
1760
1853
|
// src/components/interaction/form/atoms/Label.module.css
|
|
1761
|
-
var Label_default = {"label":"
|
|
1854
|
+
var Label_default = {"label":"bds111Label-label"};
|
|
1762
1855
|
|
|
1763
1856
|
// src/components/interaction/form/atoms/Label.tsx
|
|
1764
1857
|
var import_design_system_foundation32 = require("@boostdev/design-system-foundation");
|
|
@@ -1771,7 +1864,7 @@ var Label = ({ label, id, className }) => {
|
|
|
1771
1864
|
var import_design_system_foundation34 = require("@boostdev/design-system-foundation");
|
|
1772
1865
|
|
|
1773
1866
|
// src/components/interaction/form/atoms/InputContainer.module.css
|
|
1774
|
-
var InputContainer_default = {"container":"
|
|
1867
|
+
var InputContainer_default = {"container":"bds111InputContainer-container"};
|
|
1775
1868
|
|
|
1776
1869
|
// src/components/interaction/form/atoms/InputContainer.tsx
|
|
1777
1870
|
var import_design_system_foundation33 = require("@boostdev/design-system-foundation");
|
|
@@ -1812,7 +1905,7 @@ function Checkbox({ label, name, error, hint, className, ...props }) {
|
|
|
1812
1905
|
var import_react13 = require("react");
|
|
1813
1906
|
|
|
1814
1907
|
// src/components/interaction/form/CheckboxGroup/CheckboxGroup.module.css
|
|
1815
|
-
var CheckboxGroup_default = {"group":"
|
|
1908
|
+
var CheckboxGroup_default = {"group":"bds111CheckboxGroup-group","legend":"bds111CheckboxGroup-legend","required":"bds111CheckboxGroup-required","items":"bds111CheckboxGroup-items"};
|
|
1816
1909
|
|
|
1817
1910
|
// src/components/interaction/form/CheckboxGroup/CheckboxGroup.tsx
|
|
1818
1911
|
var import_design_system_foundation35 = require("@boostdev/design-system-foundation");
|
|
@@ -1854,7 +1947,7 @@ function CheckboxGroup({
|
|
|
1854
1947
|
var import_react14 = require("react");
|
|
1855
1948
|
|
|
1856
1949
|
// src/components/interaction/form/Combobox/Combobox.module.css
|
|
1857
|
-
var Combobox_default = {"formGroup":"
|
|
1950
|
+
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"};
|
|
1858
1951
|
|
|
1859
1952
|
// src/components/interaction/form/Combobox/Combobox.tsx
|
|
1860
1953
|
var import_design_system_foundation36 = require("@boostdev/design-system-foundation");
|
|
@@ -2004,7 +2097,7 @@ function Combobox({
|
|
|
2004
2097
|
var import_react15 = require("react");
|
|
2005
2098
|
|
|
2006
2099
|
// src/components/interaction/form/FileInput/FileInput.module.css
|
|
2007
|
-
var FileInput_default = {"formGroup":"
|
|
2100
|
+
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"};
|
|
2008
2101
|
|
|
2009
2102
|
// src/components/interaction/form/FileInput/FileInput.tsx
|
|
2010
2103
|
var import_design_system_foundation37 = require("@boostdev/design-system-foundation");
|
|
@@ -2104,7 +2197,7 @@ function FileInput({
|
|
|
2104
2197
|
var import_react16 = require("react");
|
|
2105
2198
|
|
|
2106
2199
|
// src/components/interaction/form/FormInput/FormInput.module.css
|
|
2107
|
-
var FormInput_default = {"formGroup":"
|
|
2200
|
+
var FormInput_default = {"formGroup":"bds111FormInput-formGroup","input":"bds111FormInput-input","inputError":"bds111FormInput-inputError"};
|
|
2108
2201
|
|
|
2109
2202
|
// src/components/interaction/form/FormInput/FormInput.tsx
|
|
2110
2203
|
var import_design_system_foundation38 = require("@boostdev/design-system-foundation");
|
|
@@ -2148,7 +2241,7 @@ function FormInput({
|
|
|
2148
2241
|
var import_react17 = require("react");
|
|
2149
2242
|
|
|
2150
2243
|
// src/components/interaction/form/NumberInput/NumberInput.module.css
|
|
2151
|
-
var NumberInput_default = {"formGroup":"
|
|
2244
|
+
var NumberInput_default = {"formGroup":"bds111NumberInput-formGroup","inputRow":"bds111NumberInput-inputRow","input":"bds111NumberInput-input","inputError":"bds111NumberInput-inputError","stepper":"bds111NumberInput-stepper"};
|
|
2152
2245
|
|
|
2153
2246
|
// src/components/interaction/form/NumberInput/NumberInput.tsx
|
|
2154
2247
|
var import_design_system_foundation39 = require("@boostdev/design-system-foundation");
|
|
@@ -2252,7 +2345,7 @@ function NumberInput({
|
|
|
2252
2345
|
var import_react18 = require("react");
|
|
2253
2346
|
|
|
2254
2347
|
// src/components/interaction/form/Radio/Radio.module.css
|
|
2255
|
-
var Radio_default = {"radioGroup":"
|
|
2348
|
+
var Radio_default = {"radioGroup":"bds111Radio-radioGroup","inputWrapper":"bds111Radio-inputWrapper","textWrapper":"bds111Radio-textWrapper","description":"bds111Radio-description","radio":"bds111Radio-radio","radioError":"bds111Radio-radioError"};
|
|
2256
2349
|
|
|
2257
2350
|
// src/components/interaction/form/Radio/Radio.tsx
|
|
2258
2351
|
var import_design_system_foundation40 = require("@boostdev/design-system-foundation");
|
|
@@ -2290,7 +2383,7 @@ function Radio({ label, name, description, error, hint, className, ...props }) {
|
|
|
2290
2383
|
var import_react19 = require("react");
|
|
2291
2384
|
|
|
2292
2385
|
// src/components/interaction/form/RadioGroup/RadioGroup.module.css
|
|
2293
|
-
var RadioGroup_default = {"group":"
|
|
2386
|
+
var RadioGroup_default = {"group":"bds111RadioGroup-group","legend":"bds111RadioGroup-legend","required":"bds111RadioGroup-required","items":"bds111RadioGroup-items"};
|
|
2294
2387
|
|
|
2295
2388
|
// src/components/interaction/form/RadioGroup/RadioGroup.tsx
|
|
2296
2389
|
var import_design_system_foundation41 = require("@boostdev/design-system-foundation");
|
|
@@ -2332,7 +2425,7 @@ function RadioGroup({
|
|
|
2332
2425
|
var import_react20 = require("react");
|
|
2333
2426
|
|
|
2334
2427
|
// src/components/interaction/form/SegmentedControl/SegmentedControl.module.css
|
|
2335
|
-
var SegmentedControl_default = {"control":"
|
|
2428
|
+
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"};
|
|
2336
2429
|
|
|
2337
2430
|
// src/components/interaction/form/SegmentedControl/SegmentedControl.tsx
|
|
2338
2431
|
var import_design_system_foundation42 = require("@boostdev/design-system-foundation");
|
|
@@ -2410,7 +2503,7 @@ function SegmentedControl({
|
|
|
2410
2503
|
var import_react21 = require("react");
|
|
2411
2504
|
|
|
2412
2505
|
// src/components/interaction/form/Select/Select.module.css
|
|
2413
|
-
var Select_default = {"formGroup":"
|
|
2506
|
+
var Select_default = {"formGroup":"bds111Select-formGroup","selectWrapper":"bds111Select-selectWrapper","select":"bds111Select-select","selectError":"bds111Select-selectError","chevron":"bds111Select-chevron"};
|
|
2414
2507
|
|
|
2415
2508
|
// src/components/interaction/form/Select/Select.tsx
|
|
2416
2509
|
var import_design_system_foundation43 = require("@boostdev/design-system-foundation");
|
|
@@ -2461,7 +2554,7 @@ function Select({
|
|
|
2461
2554
|
var import_react22 = require("react");
|
|
2462
2555
|
|
|
2463
2556
|
// src/components/interaction/form/Slider/Slider.module.css
|
|
2464
|
-
var Slider_default = {"formGroup":"
|
|
2557
|
+
var Slider_default = {"formGroup":"bds111Slider-formGroup","labelRow":"bds111Slider-labelRow","value":"bds111Slider-value","slider":"bds111Slider-slider","sliderError":"bds111Slider-sliderError"};
|
|
2465
2558
|
|
|
2466
2559
|
// src/components/interaction/form/Slider/Slider.tsx
|
|
2467
2560
|
var import_design_system_foundation44 = require("@boostdev/design-system-foundation");
|
|
@@ -2523,7 +2616,7 @@ function Slider({
|
|
|
2523
2616
|
var import_react23 = require("react");
|
|
2524
2617
|
|
|
2525
2618
|
// src/components/interaction/form/Switch/Switch.module.css
|
|
2526
|
-
var Switch_default = {"switchGroup":"
|
|
2619
|
+
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"};
|
|
2527
2620
|
|
|
2528
2621
|
// src/components/interaction/form/Switch/Switch.tsx
|
|
2529
2622
|
var import_design_system_foundation45 = require("@boostdev/design-system-foundation");
|
|
@@ -2571,7 +2664,7 @@ function Switch({
|
|
|
2571
2664
|
var import_react24 = require("react");
|
|
2572
2665
|
|
|
2573
2666
|
// src/components/interaction/form/Textarea/Textarea.module.css
|
|
2574
|
-
var Textarea_default = {"formGroup":"
|
|
2667
|
+
var Textarea_default = {"formGroup":"bds111Textarea-formGroup","textarea":"bds111Textarea-textarea","textareaError":"bds111Textarea-textareaError"};
|
|
2575
2668
|
|
|
2576
2669
|
// src/components/interaction/form/Textarea/Textarea.tsx
|
|
2577
2670
|
var import_design_system_foundation46 = require("@boostdev/design-system-foundation");
|
|
@@ -2610,7 +2703,7 @@ function Textarea({
|
|
|
2610
2703
|
}
|
|
2611
2704
|
|
|
2612
2705
|
// src/components/layout/ButtonGroup/ButtonGroup.module.css
|
|
2613
|
-
var ButtonGroup_default = {"buttonGroup":"
|
|
2706
|
+
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"};
|
|
2614
2707
|
|
|
2615
2708
|
// src/components/layout/ButtonGroup/ButtonGroup.tsx
|
|
2616
2709
|
var import_design_system_foundation47 = require("@boostdev/design-system-foundation");
|
|
@@ -2628,7 +2721,7 @@ function ButtonGroup({ children, className, variant, "aria-label": ariaLabel })
|
|
|
2628
2721
|
}
|
|
2629
2722
|
|
|
2630
2723
|
// src/components/layout/Card/Card.module.css
|
|
2631
|
-
var Card_default = {"card":"
|
|
2724
|
+
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"};
|
|
2632
2725
|
|
|
2633
2726
|
// src/components/layout/Card/Card.tsx
|
|
2634
2727
|
var import_design_system_foundation48 = require("@boostdev/design-system-foundation");
|
|
@@ -2666,7 +2759,7 @@ function Card({
|
|
|
2666
2759
|
}
|
|
2667
2760
|
|
|
2668
2761
|
// src/components/layout/SectionHeader/SectionHeader.module.css
|
|
2669
|
-
var SectionHeader_default = {"sectionHeader":"
|
|
2762
|
+
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"};
|
|
2670
2763
|
|
|
2671
2764
|
// src/components/layout/SectionHeader/SectionHeader.tsx
|
|
2672
2765
|
var import_design_system_foundation49 = require("@boostdev/design-system-foundation");
|
|
@@ -2687,7 +2780,7 @@ function SectionHeader({
|
|
|
2687
2780
|
}
|
|
2688
2781
|
|
|
2689
2782
|
// src/components/layout/IconWrapper/IconWrapper.module.css
|
|
2690
|
-
var IconWrapper_default = {"wrapper":"
|
|
2783
|
+
var IconWrapper_default = {"wrapper":"bds111IconWrapper-wrapper"};
|
|
2691
2784
|
|
|
2692
2785
|
// src/components/layout/IconWrapper/IconWrapper.tsx
|
|
2693
2786
|
var import_design_system_foundation50 = require("@boostdev/design-system-foundation");
|