@salt-ds/lab 1.0.0-alpha.93 → 1.0.0-alpha.95
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/CHANGELOG.md +214 -0
- package/css/salt-lab.css +190 -143
- package/dist-cjs/index.js +12 -58
- package/dist-cjs/index.js.map +1 -1
- package/dist-cjs/mega-menu/MegaMenuGroup.js +2 -5
- package/dist-cjs/mega-menu/MegaMenuGroup.js.map +1 -1
- package/dist-cjs/mega-menu/MegaMenuGroups.css.js +6 -0
- package/dist-cjs/mega-menu/MegaMenuGroups.css.js.map +1 -0
- package/dist-cjs/mega-menu/{MegaMenuSection.js → MegaMenuGroups.js} +8 -8
- package/dist-cjs/mega-menu/MegaMenuGroups.js.map +1 -0
- package/dist-cjs/mega-menu/MegaMenuHeader.js +0 -1
- package/dist-cjs/mega-menu/MegaMenuHeader.js.map +1 -1
- package/dist-cjs/mega-menu/MegaMenuItem.css.js +1 -1
- package/dist-cjs/mega-menu/MegaMenuItem.js +6 -5
- package/dist-cjs/mega-menu/MegaMenuItem.js.map +1 -1
- package/dist-cjs/mega-menu/MegaMenuSupportingActions.css.js +6 -0
- package/dist-cjs/mega-menu/MegaMenuSupportingActions.css.js.map +1 -0
- package/dist-cjs/mega-menu/MegaMenuSupportingActions.js +31 -0
- package/dist-cjs/mega-menu/MegaMenuSupportingActions.js.map +1 -0
- package/dist-cjs/mega-menu/MegaMenuSupportingContent.css.js +6 -0
- package/dist-cjs/mega-menu/MegaMenuSupportingContent.css.js.map +1 -0
- package/dist-cjs/mega-menu/MegaMenuSupportingContent.js +31 -0
- package/dist-cjs/mega-menu/MegaMenuSupportingContent.js.map +1 -0
- package/dist-cjs/mega-menu/useMegaMenuKeyboard.js +2 -2
- package/dist-cjs/mega-menu/useMegaMenuKeyboard.js.map +1 -1
- package/dist-cjs/toolbar-next/ToolbarContentNext.css.js +6 -0
- package/dist-cjs/toolbar-next/ToolbarContentNext.css.js.map +1 -0
- package/dist-cjs/toolbar-next/ToolbarContentNext.js +32 -0
- package/dist-cjs/toolbar-next/ToolbarContentNext.js.map +1 -0
- package/dist-cjs/toolbar-next/ToolbarNext.css.js +6 -0
- package/dist-cjs/toolbar-next/ToolbarNext.css.js.map +1 -0
- package/dist-cjs/toolbar-next/ToolbarNext.js +394 -0
- package/dist-cjs/toolbar-next/ToolbarNext.js.map +1 -0
- package/dist-cjs/toolbar-next/ToolbarNextOverflow.css.js +6 -0
- package/dist-cjs/toolbar-next/ToolbarNextOverflow.css.js.map +1 -0
- package/dist-cjs/toolbar-next/ToolbarNextOverflow.js +706 -0
- package/dist-cjs/toolbar-next/ToolbarNextOverflow.js.map +1 -0
- package/dist-cjs/toolbar-next/ToolbarNextOverflowFloatingBoundary.js +165 -0
- package/dist-cjs/toolbar-next/ToolbarNextOverflowFloatingBoundary.js.map +1 -0
- package/dist-cjs/toolbar-next/TooltrayNext.css.js +6 -0
- package/dist-cjs/toolbar-next/TooltrayNext.css.js.map +1 -0
- package/dist-cjs/toolbar-next/TooltrayNext.js +55 -0
- package/dist-cjs/toolbar-next/TooltrayNext.js.map +1 -0
- package/dist-cjs/toolbar-next/toolbarNextKeyboardUtils.js +409 -0
- package/dist-cjs/toolbar-next/toolbarNextKeyboardUtils.js.map +1 -0
- package/dist-cjs/toolbar-next/toolbarNextUtils.js +215 -0
- package/dist-cjs/toolbar-next/toolbarNextUtils.js.map +1 -0
- package/dist-cjs/toolbar-next/useToolbarNextKeyboardNavigation.js +312 -0
- package/dist-cjs/toolbar-next/useToolbarNextKeyboardNavigation.js.map +1 -0
- package/dist-cjs/toolbar-next/useToolbarNextOverflow.js +743 -0
- package/dist-cjs/toolbar-next/useToolbarNextOverflow.js.map +1 -0
- package/dist-es/index.js +6 -12
- package/dist-es/index.js.map +1 -1
- package/dist-es/mega-menu/MegaMenuGroup.js +2 -5
- package/dist-es/mega-menu/MegaMenuGroup.js.map +1 -1
- package/dist-es/mega-menu/MegaMenuGroups.css.js +4 -0
- package/dist-es/mega-menu/MegaMenuGroups.css.js.map +1 -0
- package/dist-es/mega-menu/{MegaMenuSection.js → MegaMenuGroups.js} +7 -7
- package/dist-es/mega-menu/MegaMenuGroups.js.map +1 -0
- package/dist-es/mega-menu/MegaMenuHeader.js +0 -1
- package/dist-es/mega-menu/MegaMenuHeader.js.map +1 -1
- package/dist-es/mega-menu/MegaMenuItem.css.js +1 -1
- package/dist-es/mega-menu/MegaMenuItem.js +7 -6
- package/dist-es/mega-menu/MegaMenuItem.js.map +1 -1
- package/dist-es/mega-menu/MegaMenuSupportingActions.css.js +4 -0
- package/dist-es/mega-menu/MegaMenuSupportingActions.css.js.map +1 -0
- package/dist-es/mega-menu/MegaMenuSupportingActions.js +29 -0
- package/dist-es/mega-menu/MegaMenuSupportingActions.js.map +1 -0
- package/dist-es/mega-menu/MegaMenuSupportingContent.css.js +4 -0
- package/dist-es/mega-menu/MegaMenuSupportingContent.css.js.map +1 -0
- package/dist-es/mega-menu/MegaMenuSupportingContent.js +29 -0
- package/dist-es/mega-menu/MegaMenuSupportingContent.js.map +1 -0
- package/dist-es/mega-menu/useMegaMenuKeyboard.js +2 -2
- package/dist-es/mega-menu/useMegaMenuKeyboard.js.map +1 -1
- package/dist-es/toolbar-next/ToolbarContentNext.css.js +4 -0
- package/dist-es/toolbar-next/ToolbarContentNext.css.js.map +1 -0
- package/dist-es/toolbar-next/ToolbarContentNext.js +30 -0
- package/dist-es/toolbar-next/ToolbarContentNext.js.map +1 -0
- package/dist-es/toolbar-next/ToolbarNext.css.js +4 -0
- package/dist-es/toolbar-next/ToolbarNext.css.js.map +1 -0
- package/dist-es/toolbar-next/ToolbarNext.js +392 -0
- package/dist-es/toolbar-next/ToolbarNext.js.map +1 -0
- package/dist-es/toolbar-next/ToolbarNextOverflow.css.js +4 -0
- package/dist-es/toolbar-next/ToolbarNextOverflow.css.js.map +1 -0
- package/dist-es/toolbar-next/ToolbarNextOverflow.js +701 -0
- package/dist-es/toolbar-next/ToolbarNextOverflow.js.map +1 -0
- package/dist-es/toolbar-next/ToolbarNextOverflowFloatingBoundary.js +159 -0
- package/dist-es/toolbar-next/ToolbarNextOverflowFloatingBoundary.js.map +1 -0
- package/dist-es/toolbar-next/TooltrayNext.css.js +4 -0
- package/dist-es/toolbar-next/TooltrayNext.css.js.map +1 -0
- package/dist-es/toolbar-next/TooltrayNext.js +53 -0
- package/dist-es/toolbar-next/TooltrayNext.js.map +1 -0
- package/dist-es/toolbar-next/toolbarNextKeyboardUtils.js +390 -0
- package/dist-es/toolbar-next/toolbarNextKeyboardUtils.js.map +1 -0
- package/dist-es/toolbar-next/toolbarNextUtils.js +211 -0
- package/dist-es/toolbar-next/toolbarNextUtils.js.map +1 -0
- package/dist-es/toolbar-next/useToolbarNextKeyboardNavigation.js +310 -0
- package/dist-es/toolbar-next/useToolbarNextKeyboardNavigation.js.map +1 -0
- package/dist-es/toolbar-next/useToolbarNextOverflow.js +741 -0
- package/dist-es/toolbar-next/useToolbarNextOverflow.js.map +1 -0
- package/dist-types/index.d.ts +1 -5
- package/dist-types/mega-menu/MegaMenuGroups.d.ts +8 -0
- package/dist-types/mega-menu/MegaMenuItem.d.ts +3 -2
- package/dist-types/mega-menu/MegaMenuSupportingActions.d.ts +8 -0
- package/dist-types/mega-menu/MegaMenuSupportingContent.d.ts +8 -0
- package/dist-types/mega-menu/index.d.ts +3 -3
- package/dist-types/toolbar-next/ToolbarContentNext.d.ts +11 -0
- package/dist-types/toolbar-next/ToolbarNext.d.ts +12 -0
- package/dist-types/toolbar-next/ToolbarNextOverflow.d.ts +34 -0
- package/dist-types/toolbar-next/ToolbarNextOverflowFloatingBoundary.d.ts +16 -0
- package/dist-types/toolbar-next/TooltrayNext.d.ts +37 -0
- package/dist-types/toolbar-next/index.d.ts +3 -0
- package/dist-types/toolbar-next/toolbarNextKeyboardUtils.d.ts +39 -0
- package/dist-types/toolbar-next/toolbarNextUtils.d.ts +42 -0
- package/dist-types/toolbar-next/useToolbarNextKeyboardNavigation.d.ts +42 -0
- package/dist-types/toolbar-next/useToolbarNextOverflow.d.ts +37 -0
- package/package.json +2 -4
- package/dist-cjs/calendar/index.js +0 -61
- package/dist-cjs/calendar/index.js.map +0 -1
- package/dist-cjs/date-input/index.js +0 -23
- package/dist-cjs/date-input/index.js.map +0 -1
- package/dist-cjs/date-picker/index.js +0 -106
- package/dist-cjs/date-picker/index.js.map +0 -1
- package/dist-cjs/localization-provider/index.js +0 -26
- package/dist-cjs/localization-provider/index.js.map +0 -1
- package/dist-cjs/mega-menu/MegaMenuContent.css.js +0 -6
- package/dist-cjs/mega-menu/MegaMenuContent.css.js.map +0 -1
- package/dist-cjs/mega-menu/MegaMenuContent.js +0 -33
- package/dist-cjs/mega-menu/MegaMenuContent.js.map +0 -1
- package/dist-cjs/mega-menu/MegaMenuItemContent.css.js +0 -6
- package/dist-cjs/mega-menu/MegaMenuItemContent.css.js.map +0 -1
- package/dist-cjs/mega-menu/MegaMenuItemContent.js +0 -23
- package/dist-cjs/mega-menu/MegaMenuItemContent.js.map +0 -1
- package/dist-cjs/mega-menu/MegaMenuSection.css.js +0 -6
- package/dist-cjs/mega-menu/MegaMenuSection.css.js.map +0 -1
- package/dist-cjs/mega-menu/MegaMenuSection.js.map +0 -1
- package/dist-cjs/tree/Tree.css.js +0 -6
- package/dist-cjs/tree/Tree.css.js.map +0 -1
- package/dist-cjs/tree/Tree.js +0 -303
- package/dist-cjs/tree/Tree.js.map +0 -1
- package/dist-cjs/tree/TreeContext.js +0 -31
- package/dist-cjs/tree/TreeContext.js.map +0 -1
- package/dist-cjs/tree/TreeNode.css.js +0 -6
- package/dist-cjs/tree/TreeNode.css.js.map +0 -1
- package/dist-cjs/tree/TreeNode.js +0 -103
- package/dist-cjs/tree/TreeNode.js.map +0 -1
- package/dist-cjs/tree/TreeNodeExpansionIcon.css.js +0 -6
- package/dist-cjs/tree/TreeNodeExpansionIcon.css.js.map +0 -1
- package/dist-cjs/tree/TreeNodeExpansionIcon.js +0 -62
- package/dist-cjs/tree/TreeNodeExpansionIcon.js.map +0 -1
- package/dist-cjs/tree/TreeNodeLabel.css.js +0 -6
- package/dist-cjs/tree/TreeNodeLabel.css.js.map +0 -1
- package/dist-cjs/tree/TreeNodeLabel.js +0 -26
- package/dist-cjs/tree/TreeNodeLabel.js.map +0 -1
- package/dist-cjs/tree/TreeNodeTrigger.css.js +0 -6
- package/dist-cjs/tree/TreeNodeTrigger.css.js.map +0 -1
- package/dist-cjs/tree/TreeNodeTrigger.js +0 -153
- package/dist-cjs/tree/TreeNodeTrigger.js.map +0 -1
- package/dist-cjs/tree/treeModel.js +0 -61
- package/dist-cjs/tree/treeModel.js.map +0 -1
- package/dist-cjs/tree/useTree.js +0 -337
- package/dist-cjs/tree/useTree.js.map +0 -1
- package/dist-cjs/utils/deprecatedExport.js +0 -30
- package/dist-cjs/utils/deprecatedExport.js.map +0 -1
- package/dist-es/calendar/index.js +0 -50
- package/dist-es/calendar/index.js.map +0 -1
- package/dist-es/date-input/index.js +0 -20
- package/dist-es/date-input/index.js.map +0 -1
- package/dist-es/date-picker/index.js +0 -85
- package/dist-es/date-picker/index.js.map +0 -1
- package/dist-es/localization-provider/index.js +0 -20
- package/dist-es/localization-provider/index.js.map +0 -1
- package/dist-es/mega-menu/MegaMenuContent.css.js +0 -4
- package/dist-es/mega-menu/MegaMenuContent.css.js.map +0 -1
- package/dist-es/mega-menu/MegaMenuContent.js +0 -31
- package/dist-es/mega-menu/MegaMenuContent.js.map +0 -1
- package/dist-es/mega-menu/MegaMenuItemContent.css.js +0 -4
- package/dist-es/mega-menu/MegaMenuItemContent.css.js.map +0 -1
- package/dist-es/mega-menu/MegaMenuItemContent.js +0 -21
- package/dist-es/mega-menu/MegaMenuItemContent.js.map +0 -1
- package/dist-es/mega-menu/MegaMenuSection.css.js +0 -4
- package/dist-es/mega-menu/MegaMenuSection.css.js.map +0 -1
- package/dist-es/mega-menu/MegaMenuSection.js.map +0 -1
- package/dist-es/tree/Tree.css.js +0 -4
- package/dist-es/tree/Tree.css.js.map +0 -1
- package/dist-es/tree/Tree.js +0 -301
- package/dist-es/tree/Tree.js.map +0 -1
- package/dist-es/tree/TreeContext.js +0 -26
- package/dist-es/tree/TreeContext.js.map +0 -1
- package/dist-es/tree/TreeNode.css.js +0 -4
- package/dist-es/tree/TreeNode.css.js.map +0 -1
- package/dist-es/tree/TreeNode.js +0 -101
- package/dist-es/tree/TreeNode.js.map +0 -1
- package/dist-es/tree/TreeNodeExpansionIcon.css.js +0 -4
- package/dist-es/tree/TreeNodeExpansionIcon.css.js.map +0 -1
- package/dist-es/tree/TreeNodeExpansionIcon.js +0 -60
- package/dist-es/tree/TreeNodeExpansionIcon.js.map +0 -1
- package/dist-es/tree/TreeNodeLabel.css.js +0 -4
- package/dist-es/tree/TreeNodeLabel.css.js.map +0 -1
- package/dist-es/tree/TreeNodeLabel.js +0 -24
- package/dist-es/tree/TreeNodeLabel.js.map +0 -1
- package/dist-es/tree/TreeNodeTrigger.css.js +0 -4
- package/dist-es/tree/TreeNodeTrigger.css.js.map +0 -1
- package/dist-es/tree/TreeNodeTrigger.js +0 -151
- package/dist-es/tree/TreeNodeTrigger.js.map +0 -1
- package/dist-es/tree/treeModel.js +0 -57
- package/dist-es/tree/treeModel.js.map +0 -1
- package/dist-es/tree/useTree.js +0 -335
- package/dist-es/tree/useTree.js.map +0 -1
- package/dist-es/utils/deprecatedExport.js +0 -27
- package/dist-es/utils/deprecatedExport.js.map +0 -1
- package/dist-types/calendar/index.d.ts +0 -13
- package/dist-types/date-input/index.d.ts +0 -3
- package/dist-types/localization-provider/index.d.ts +0 -9
- package/dist-types/mega-menu/MegaMenuContent.d.ts +0 -8
- package/dist-types/mega-menu/MegaMenuItemContent.d.ts +0 -8
- package/dist-types/mega-menu/MegaMenuSection.d.ts +0 -8
- package/dist-types/tree/Tree.d.ts +0 -36
- package/dist-types/tree/TreeContext.d.ts +0 -77
- package/dist-types/tree/TreeNode.d.ts +0 -25
- package/dist-types/tree/TreeNodeExpansionIcon.d.ts +0 -4
- package/dist-types/tree/TreeNodeLabel.d.ts +0 -4
- package/dist-types/tree/TreeNodeTrigger.d.ts +0 -8
- package/dist-types/tree/index.d.ts +0 -4
- package/dist-types/tree/treeModel.d.ts +0 -24
- package/dist-types/tree/useTree.d.ts +0 -68
package/dist-cjs/index.js
CHANGED
|
@@ -5,7 +5,6 @@ var Breadcrumb = require('./breadcrumbs/Breadcrumb.js');
|
|
|
5
5
|
var Breadcrumbs = require('./breadcrumbs/Breadcrumbs.js');
|
|
6
6
|
var ButtonBar = require('./button-bar/ButtonBar.js');
|
|
7
7
|
var OrderedButton = require('./button-bar/OrderedButton.js');
|
|
8
|
-
var index = require('./calendar/index.js');
|
|
9
8
|
var CascadingMenu = require('./cascading-menu/CascadingMenu.js');
|
|
10
9
|
var Color = require('./color-chooser/Color.js');
|
|
11
10
|
var ColorChooser = require('./color-chooser/ColorChooser.js');
|
|
@@ -30,8 +29,6 @@ var ContactSecondaryInfo = require('./contact-details/ContactSecondaryInfo.js');
|
|
|
30
29
|
var ContactTertiaryInfo = require('./contact-details/ContactTertiaryInfo.js');
|
|
31
30
|
var MailLinkComponent = require('./contact-details/MailLinkComponent.js');
|
|
32
31
|
var ContentStatus = require('./content-status/ContentStatus.js');
|
|
33
|
-
var index$1 = require('./date-input/index.js');
|
|
34
|
-
var index$2 = require('./date-picker/index.js');
|
|
35
32
|
var DeckItem = require('./deck-item/DeckItem.js');
|
|
36
33
|
var DeckLayout = require('./deck-layout/DeckLayout.js');
|
|
37
34
|
var Dropdown = require('./dropdown/Dropdown.js');
|
|
@@ -78,18 +75,17 @@ var useOverflowDetection = require('./utils/useOverflowDetection.js');
|
|
|
78
75
|
var useSlideSelection = require('./utils/useSlideSelection.js');
|
|
79
76
|
var ListItemNext = require('./list-next/ListItemNext.js');
|
|
80
77
|
var ListNext = require('./list-next/ListNext.js');
|
|
81
|
-
var index$3 = require('./localization-provider/index.js');
|
|
82
78
|
var Logo = require('./logo/Logo.js');
|
|
83
79
|
var LogoImage = require('./logo/LogoImage.js');
|
|
84
80
|
var LogoSeparator = require('./logo/LogoSeparator.js');
|
|
85
81
|
var MegaMenu = require('./mega-menu/MegaMenu.js');
|
|
86
|
-
var MegaMenuContent = require('./mega-menu/MegaMenuContent.js');
|
|
87
82
|
var MegaMenuGroup = require('./mega-menu/MegaMenuGroup.js');
|
|
83
|
+
var MegaMenuGroups = require('./mega-menu/MegaMenuGroups.js');
|
|
88
84
|
var MegaMenuHeader = require('./mega-menu/MegaMenuHeader.js');
|
|
89
85
|
var MegaMenuItem = require('./mega-menu/MegaMenuItem.js');
|
|
90
|
-
var MegaMenuItemContent = require('./mega-menu/MegaMenuItemContent.js');
|
|
91
86
|
var MegaMenuPanel = require('./mega-menu/MegaMenuPanel.js');
|
|
92
|
-
var
|
|
87
|
+
var MegaMenuSupportingActions = require('./mega-menu/MegaMenuSupportingActions.js');
|
|
88
|
+
var MegaMenuSupportingContent = require('./mega-menu/MegaMenuSupportingContent.js');
|
|
93
89
|
var MegaMenuTrigger = require('./mega-menu/MegaMenuTrigger.js');
|
|
94
90
|
var MenuButton = require('./menu-button/MenuButton.js');
|
|
95
91
|
var Metric = require('./metric/Metric.js');
|
|
@@ -130,13 +126,11 @@ var Toolbar = require('./toolbar/Toolbar.js');
|
|
|
130
126
|
var ToolbarButton = require('./toolbar/ToolbarButton.js');
|
|
131
127
|
var Tooltray = require('./toolbar/Tooltray.js');
|
|
132
128
|
var ToolbarField = require('./toolbar/toolbar-field/ToolbarField.js');
|
|
133
|
-
var
|
|
134
|
-
var
|
|
135
|
-
var
|
|
136
|
-
var TreeNodeTrigger = require('./tree/TreeNodeTrigger.js');
|
|
129
|
+
var ToolbarContentNext = require('./toolbar-next/ToolbarContentNext.js');
|
|
130
|
+
var ToolbarNext = require('./toolbar-next/ToolbarNext.js');
|
|
131
|
+
var TooltrayNext = require('./toolbar-next/TooltrayNext.js');
|
|
137
132
|
var ElectronWindow = require('./window/ElectronWindow.js');
|
|
138
133
|
var WindowContext = require('./window/WindowContext.js');
|
|
139
|
-
var dateComponents = require('@salt-ds/date-components');
|
|
140
134
|
|
|
141
135
|
|
|
142
136
|
|
|
@@ -146,16 +140,6 @@ exports.Breadcrumbs = Breadcrumbs.Breadcrumbs;
|
|
|
146
140
|
exports.ButtonBar = ButtonBar.ButtonBar;
|
|
147
141
|
exports.DefaultButtonsOrderByVariant = ButtonBar.DefaultButtonsOrderByVariant;
|
|
148
142
|
exports.OrderedButton = OrderedButton.OrderedButton;
|
|
149
|
-
exports.Calendar = index.Calendar;
|
|
150
|
-
exports.CalendarGrid = index.CalendarGrid;
|
|
151
|
-
exports.CalendarNavigation = index.CalendarNavigation;
|
|
152
|
-
exports.CalendarWeekHeader = index.CalendarWeekHeader;
|
|
153
|
-
exports.isDateRangeSelection = index.isDateRangeSelection;
|
|
154
|
-
exports.useCalendar = index.useCalendar;
|
|
155
|
-
exports.useCalendarDay = index.useCalendarDay;
|
|
156
|
-
exports.useCalendarSelection = index.useCalendarSelection;
|
|
157
|
-
exports.useCalendarSelectionDay = index.useCalendarSelectionDay;
|
|
158
|
-
exports.useDateSelectionAnnouncer = index.useDateSelectionAnnouncer;
|
|
159
143
|
exports.CascadingMenu = CascadingMenu.CascadingMenu;
|
|
160
144
|
exports.Color = Color.Color;
|
|
161
145
|
exports.ColorChooser = ColorChooser.ColorChooser;
|
|
@@ -187,21 +171,6 @@ exports.ContactSecondaryInfo = ContactSecondaryInfo.ContactSecondaryInfo;
|
|
|
187
171
|
exports.ContactTertiaryInfo = ContactTertiaryInfo.ContactTertiaryInfo;
|
|
188
172
|
exports.MailLinkComponent = MailLinkComponent.MailLinkComponent;
|
|
189
173
|
exports.ContentStatus = ContentStatus.ContentStatus;
|
|
190
|
-
exports.DateInputRange = index$1.DateInputRange;
|
|
191
|
-
exports.DateInputSingle = index$1.DateInputSingle;
|
|
192
|
-
exports.DatePicker = index$2.DatePicker;
|
|
193
|
-
exports.DatePickerActions = index$2.DatePickerActions;
|
|
194
|
-
exports.DatePickerHelperText = index$2.DatePickerHelperText;
|
|
195
|
-
exports.DatePickerOverlay = index$2.DatePickerOverlay;
|
|
196
|
-
exports.DatePickerOverlayProvider = index$2.DatePickerOverlayProvider;
|
|
197
|
-
exports.DatePickerRangeGridPanel = index$2.DatePickerRangeGridPanel;
|
|
198
|
-
exports.DatePickerRangeInput = index$2.DatePickerRangeInput;
|
|
199
|
-
exports.DatePickerRangePanel = index$2.DatePickerRangePanel;
|
|
200
|
-
exports.DatePickerSingleGridPanel = index$2.DatePickerSingleGridPanel;
|
|
201
|
-
exports.DatePickerSingleInput = index$2.DatePickerSingleInput;
|
|
202
|
-
exports.DatePickerTrigger = index$2.DatePickerTrigger;
|
|
203
|
-
exports.useDatePickerContext = index$2.useDatePickerContext;
|
|
204
|
-
exports.useDatePickerOverlay = index$2.useDatePickerOverlay;
|
|
205
174
|
exports.DeckItem = DeckItem.DeckItem;
|
|
206
175
|
exports.DeckLayout = DeckLayout.DeckLayout;
|
|
207
176
|
exports.Dropdown = Dropdown.Dropdown;
|
|
@@ -243,19 +212,17 @@ exports.useOverflowDetection = useOverflowDetection.useOverflowDetection;
|
|
|
243
212
|
exports.useSlideSelection = useSlideSelection.useSlideSelection;
|
|
244
213
|
exports.ListItemNext = ListItemNext.ListItemNext;
|
|
245
214
|
exports.ListNext = ListNext.ListNext;
|
|
246
|
-
exports.LocalizationProvider = index$3.LocalizationProvider;
|
|
247
|
-
exports.useLocalization = index$3.useLocalization;
|
|
248
215
|
exports.Logo = Logo.Logo;
|
|
249
216
|
exports.LogoImage = LogoImage.LogoImage;
|
|
250
217
|
exports.LogoSeparator = LogoSeparator.LogoSeparator;
|
|
251
218
|
exports.MegaMenu = MegaMenu.MegaMenu;
|
|
252
|
-
exports.MegaMenuContent = MegaMenuContent.MegaMenuContent;
|
|
253
219
|
exports.MegaMenuGroup = MegaMenuGroup.MegaMenuGroup;
|
|
220
|
+
exports.MegaMenuGroups = MegaMenuGroups.MegaMenuGroups;
|
|
254
221
|
exports.MegaMenuHeader = MegaMenuHeader.MegaMenuHeader;
|
|
255
222
|
exports.MegaMenuItem = MegaMenuItem.MegaMenuItem;
|
|
256
|
-
exports.MegaMenuItemContent = MegaMenuItemContent.MegaMenuItemContent;
|
|
257
223
|
exports.MegaMenuPanel = MegaMenuPanel.MegaMenuPanel;
|
|
258
|
-
exports.
|
|
224
|
+
exports.MegaMenuSupportingActions = MegaMenuSupportingActions.MegaMenuSupportingActions;
|
|
225
|
+
exports.MegaMenuSupportingContent = MegaMenuSupportingContent.MegaMenuSupportingContent;
|
|
259
226
|
exports.MegaMenuTrigger = MegaMenuTrigger.MegaMenuTrigger;
|
|
260
227
|
exports.MenuButton = MenuButton.MenuButton;
|
|
261
228
|
exports.Metric = Metric.Metric;
|
|
@@ -321,25 +288,12 @@ exports.Toolbar = Toolbar.Toolbar;
|
|
|
321
288
|
exports.ToolbarButton = ToolbarButton.ToolbarButton;
|
|
322
289
|
exports.Tooltray = Tooltray.Tooltray;
|
|
323
290
|
exports.ToolbarField = ToolbarField.ToolbarField;
|
|
324
|
-
exports.
|
|
325
|
-
exports.
|
|
326
|
-
exports.
|
|
327
|
-
exports.TreeNodeTrigger = TreeNodeTrigger.TreeNodeTrigger;
|
|
291
|
+
exports.ToolbarContentNext = ToolbarContentNext.ToolbarContentNext;
|
|
292
|
+
exports.ToolbarNext = ToolbarNext.ToolbarNext;
|
|
293
|
+
exports.TooltrayNext = TooltrayNext.TooltrayNext;
|
|
328
294
|
exports.ElectronWindow = ElectronWindow.ElectronWindow;
|
|
329
295
|
exports.Window = WindowContext.Window;
|
|
330
296
|
exports.WindowContext = WindowContext.WindowContext;
|
|
331
297
|
exports.isDesktop = WindowContext.isDesktop;
|
|
332
298
|
exports.useWindow = WindowContext.useWindow;
|
|
333
|
-
Object.defineProperty(exports, "DateRangeSelectionContext", {
|
|
334
|
-
enumerable: true,
|
|
335
|
-
get: function () { return dateComponents.DateRangeSelectionContext; }
|
|
336
|
-
});
|
|
337
|
-
Object.defineProperty(exports, "LocalizationProviderContext", {
|
|
338
|
-
enumerable: true,
|
|
339
|
-
get: function () { return dateComponents.LocalizationProviderContext; }
|
|
340
|
-
});
|
|
341
|
-
Object.defineProperty(exports, "SingleDateSelectionContext", {
|
|
342
|
-
enumerable: true,
|
|
343
|
-
get: function () { return dateComponents.SingleDateSelectionContext; }
|
|
344
|
-
});
|
|
345
299
|
//# sourceMappingURL=index.js.map
|
package/dist-cjs/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -7,12 +7,9 @@ var window = require('@salt-ds/window');
|
|
|
7
7
|
var clsx = require('clsx');
|
|
8
8
|
var react = require('react');
|
|
9
9
|
var MegaMenuGroup$1 = require('./MegaMenuGroup.css.js');
|
|
10
|
+
var MegaMenuHeader = require('./MegaMenuHeader.js');
|
|
10
11
|
|
|
11
12
|
const withBaseName = core.makePrefixer("saltMegaMenuGroup");
|
|
12
|
-
function isMegaMenuHeader(child) {
|
|
13
|
-
var _a;
|
|
14
|
-
return !!((_a = child.type) == null ? void 0 : _a.__isMegaMenuHeader);
|
|
15
|
-
}
|
|
16
13
|
const MegaMenuGroup = react.forwardRef(
|
|
17
14
|
function MegaMenuGroup2({ children, className, ...rest }, ref) {
|
|
18
15
|
const targetWindow = window.useWindow();
|
|
@@ -25,7 +22,7 @@ const MegaMenuGroup = react.forwardRef(
|
|
|
25
22
|
let header = null;
|
|
26
23
|
const items = [];
|
|
27
24
|
react.Children.forEach(children, (child) => {
|
|
28
|
-
if (react.isValidElement(child) &&
|
|
25
|
+
if (react.isValidElement(child) && child.type === MegaMenuHeader.MegaMenuHeader && !header) {
|
|
29
26
|
header = react.cloneElement(child, { id: headerId });
|
|
30
27
|
} else {
|
|
31
28
|
items.push(child);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MegaMenuGroup.js","sources":["../src/mega-menu/MegaMenuGroup.tsx"],"sourcesContent":["import { makePrefixer, useId } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n Children,\n cloneElement,\n forwardRef,\n type HTMLAttributes,\n isValidElement,\n type
|
|
1
|
+
{"version":3,"file":"MegaMenuGroup.js","sources":["../src/mega-menu/MegaMenuGroup.tsx"],"sourcesContent":["import { makePrefixer, useId } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n Children,\n cloneElement,\n forwardRef,\n type HTMLAttributes,\n isValidElement,\n type ReactNode,\n} from \"react\";\nimport megaMenuGroupCss from \"./MegaMenuGroup.css\";\nimport { MegaMenuHeader } from \"./MegaMenuHeader\";\n\nconst withBaseName = makePrefixer(\"saltMegaMenuGroup\");\n\nexport interface MegaMenuGroupProps extends HTMLAttributes<HTMLDivElement> {\n /**\n * The content of the mega menu group, typically MegaMenuHeader and MegaMenuItem components.\n */\n children?: ReactNode;\n}\n\nexport const MegaMenuGroup = forwardRef<HTMLDivElement, MegaMenuGroupProps>(\n function MegaMenuGroup({ children, className, ...rest }, ref) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-mega-menu-group\",\n css: megaMenuGroupCss,\n window: targetWindow,\n });\n\n const headerId = useId();\n let header: ReactNode = null;\n const items: ReactNode[] = [];\n\n Children.forEach(children, (child) => {\n if (isValidElement(child) && child.type === MegaMenuHeader && !header) {\n header = cloneElement(child, { id: headerId });\n } else {\n items.push(child);\n }\n });\n\n return (\n <div\n className={clsx(withBaseName(), className)}\n data-mega-menu-column=\"\"\n ref={ref}\n {...rest}\n >\n {header}\n <ol\n className={withBaseName(\"list\")}\n aria-labelledby={header ? headerId : undefined}\n >\n {items}\n </ol>\n </div>\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","MegaMenuGroup","useWindow","useComponentCssInjection","megaMenuGroupCss","useId","Children","isValidElement","MegaMenuHeader","cloneElement","jsxs","clsx","jsx"],"mappings":";;;;;;;;;;;AAeA,MAAM,YAAA,GAAeA,kBAAa,mBAAmB,CAAA;AAS9C,MAAM,aAAA,GAAgBC,gBAAA;AAAA,EAC3B,SAASC,eAAc,EAAE,QAAA,EAAU,WAAW,GAAG,IAAA,IAAQ,GAAA,EAAK;AAC5D,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,sBAAA;AAAA,MACR,GAAA,EAAKC,eAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,WAAWC,UAAA,EAAM;AACvB,IAAA,IAAI,MAAA,GAAoB,IAAA;AACxB,IAAA,MAAM,QAAqB,EAAC;AAE5B,IAAAC,cAAA,CAAS,OAAA,CAAQ,QAAA,EAAU,CAAC,KAAA,KAAU;AACpC,MAAA,IAAIC,qBAAe,KAAK,CAAA,IAAK,MAAM,IAAA,KAASC,6BAAA,IAAkB,CAAC,MAAA,EAAQ;AACrE,QAAA,MAAA,GAASC,kBAAA,CAAa,KAAA,EAAO,EAAE,EAAA,EAAI,UAAU,CAAA;AAAA,MAC/C,CAAA,MAAO;AACL,QAAA,KAAA,CAAM,KAAK,KAAK,CAAA;AAAA,MAClB;AAAA,IACF,CAAC,CAAA;AAED,IAAA,uBACEC,eAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAWC,SAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA;AAAA,QACzC,uBAAA,EAAsB,EAAA;AAAA,QACtB,GAAA;AAAA,QACC,GAAG,IAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAA,MAAA;AAAA,0BACDC,cAAA;AAAA,YAAC,IAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,cAC9B,iBAAA,EAAiB,SAAS,QAAA,GAAW,MAAA;AAAA,cAEpC,QAAA,EAAA;AAAA;AAAA;AACH;AAAA;AAAA,KACF;AAAA,EAEJ;AACF;;;;"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var css_248z = ".saltMegaMenuGroups {\n display: grid;\n grid-template-columns: repeat(auto-fit, var(--saltMegaMenuGroups-columnWidth, 12rem));\n gap: var(--salt-spacing-300);\n padding: var(--salt-spacing-300);\n max-inline-size: var(--saltMegaMenuPanel-availableWidth, calc(100vw - var(--salt-spacing-600)));\n}\n";
|
|
4
|
+
|
|
5
|
+
module.exports = css_248z;
|
|
6
|
+
//# sourceMappingURL=MegaMenuGroups.css.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MegaMenuGroups.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
|
@@ -6,20 +6,20 @@ var styles = require('@salt-ds/styles');
|
|
|
6
6
|
var window = require('@salt-ds/window');
|
|
7
7
|
var clsx = require('clsx');
|
|
8
8
|
var react = require('react');
|
|
9
|
-
var
|
|
9
|
+
var MegaMenuGroups$1 = require('./MegaMenuGroups.css.js');
|
|
10
10
|
|
|
11
|
-
const withBaseName = core.makePrefixer("
|
|
12
|
-
const
|
|
13
|
-
function
|
|
11
|
+
const withBaseName = core.makePrefixer("saltMegaMenuGroups");
|
|
12
|
+
const MegaMenuGroups = react.forwardRef(
|
|
13
|
+
function MegaMenuGroups2({ children, className, ...rest }, ref) {
|
|
14
14
|
const targetWindow = window.useWindow();
|
|
15
15
|
styles.useComponentCssInjection({
|
|
16
|
-
testId: "salt-mega-menu-
|
|
17
|
-
css:
|
|
16
|
+
testId: "salt-mega-menu-groups",
|
|
17
|
+
css: MegaMenuGroups$1,
|
|
18
18
|
window: targetWindow
|
|
19
19
|
});
|
|
20
20
|
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx.clsx(withBaseName(), className), ref, ...rest, children });
|
|
21
21
|
}
|
|
22
22
|
);
|
|
23
23
|
|
|
24
|
-
exports.
|
|
25
|
-
//# sourceMappingURL=
|
|
24
|
+
exports.MegaMenuGroups = MegaMenuGroups;
|
|
25
|
+
//# sourceMappingURL=MegaMenuGroups.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MegaMenuGroups.js","sources":["../src/mega-menu/MegaMenuGroups.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, type HTMLAttributes, type ReactNode } from \"react\";\nimport megaMenuGroupsCss from \"./MegaMenuGroups.css\";\n\nconst withBaseName = makePrefixer(\"saltMegaMenuGroups\");\n\nexport interface MegaMenuGroupsProps extends HTMLAttributes<HTMLDivElement> {\n /**\n * The content of the mega menu section.\n */\n children?: ReactNode;\n}\n\nexport const MegaMenuGroups = forwardRef<HTMLDivElement, MegaMenuGroupsProps>(\n function MegaMenuGroups({ children, className, ...rest }, ref) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-mega-menu-groups\",\n css: megaMenuGroupsCss,\n window: targetWindow,\n });\n\n return (\n <div className={clsx(withBaseName(), className)} ref={ref} {...rest}>\n {children}\n </div>\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","MegaMenuGroups","useWindow","useComponentCssInjection","megaMenuGroupsCss","jsx","clsx"],"mappings":";;;;;;;;;;AAOA,MAAM,YAAA,GAAeA,kBAAa,oBAAoB,CAAA;AAS/C,MAAM,cAAA,GAAiBC,gBAAA;AAAA,EAC5B,SAASC,gBAAe,EAAE,QAAA,EAAU,WAAW,GAAG,IAAA,IAAQ,GAAA,EAAK;AAC7D,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,uBAAA;AAAA,MACR,GAAA,EAAKC,gBAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,uBACEC,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAWC,SAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA,EAAG,GAAA,EAAW,GAAG,IAAA,EAC5D,QAAA,EACH,CAAA;AAAA,EAEJ;AACF;;;;"}
|
|
@@ -20,7 +20,6 @@ const MegaMenuHeader = react.forwardRef(
|
|
|
20
20
|
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx.clsx(withBaseName(), className), ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx.clsx(withBaseName("content")), children }) });
|
|
21
21
|
}
|
|
22
22
|
);
|
|
23
|
-
MegaMenuHeader.__isMegaMenuHeader = true;
|
|
24
23
|
|
|
25
24
|
exports.MegaMenuHeader = MegaMenuHeader;
|
|
26
25
|
//# sourceMappingURL=MegaMenuHeader.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MegaMenuHeader.js","sources":["../src/mega-menu/MegaMenuHeader.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n forwardRef,\n type ReactNode,\n} from \"react\";\nimport megaMenuHeaderCss from \"./MegaMenuHeader.css\";\n\nconst withBaseName = makePrefixer(\"saltMegaMenuHeader\");\n\nexport interface MegaMenuHeaderProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * The content of the mega menu header.\n */\n children?: ReactNode;\n}\n\nexport const MegaMenuHeader = forwardRef<HTMLDivElement, MegaMenuHeaderProps>(\n function MegaMenuHeader({ children, className, ...rest }, ref) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-mega-menu-header\",\n css: megaMenuHeaderCss,\n window: targetWindow,\n });\n\n return (\n <div className={clsx(withBaseName(), className)} ref={ref} {...rest}>\n <div className={clsx(withBaseName(\"content\"))}>{children}</div>\n </div>\n );\n },\n);\n
|
|
1
|
+
{"version":3,"file":"MegaMenuHeader.js","sources":["../src/mega-menu/MegaMenuHeader.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n forwardRef,\n type ReactNode,\n} from \"react\";\nimport megaMenuHeaderCss from \"./MegaMenuHeader.css\";\n\nconst withBaseName = makePrefixer(\"saltMegaMenuHeader\");\n\nexport interface MegaMenuHeaderProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * The content of the mega menu header.\n */\n children?: ReactNode;\n}\n\nexport const MegaMenuHeader = forwardRef<HTMLDivElement, MegaMenuHeaderProps>(\n function MegaMenuHeader({ children, className, ...rest }, ref) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-mega-menu-header\",\n css: megaMenuHeaderCss,\n window: targetWindow,\n });\n\n return (\n <div className={clsx(withBaseName(), className)} ref={ref} {...rest}>\n <div className={clsx(withBaseName(\"content\"))}>{children}</div>\n </div>\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","MegaMenuHeader","useWindow","useComponentCssInjection","megaMenuHeaderCss","jsx","clsx"],"mappings":";;;;;;;;;;AAWA,MAAM,YAAA,GAAeA,kBAAa,oBAAoB,CAAA;AAS/C,MAAM,cAAA,GAAiBC,gBAAA;AAAA,EAC5B,SAASC,gBAAe,EAAE,QAAA,EAAU,WAAW,GAAG,IAAA,IAAQ,GAAA,EAAK;AAC7D,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,uBAAA;AAAA,MACR,GAAA,EAAKC,gBAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,uBACEC,cAAA,CAAC,SAAI,SAAA,EAAWC,SAAA,CAAK,cAAa,EAAG,SAAS,GAAG,GAAA,EAAW,GAAG,MAC7D,QAAA,kBAAAD,cAAA,CAAC,KAAA,EAAA,EAAI,WAAWC,SAAA,CAAK,YAAA,CAAa,SAAS,CAAC,CAAA,EAAI,UAAS,CAAA,EAC3D,CAAA;AAAA,EAEJ;AACF;;;;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var css_248z = ".saltMegaMenuItem {\n list-style: none;\n}\n\n.saltMegaMenuItem > a {\n display: flex;\n padding: var(--salt-spacing-50) var(--salt-spacing-100);\n align-items: flex-start;\n color: var(--salt-content-primary-foreground);\n background: var(--salt-selectable-background);\n cursor: var(--salt-cursor-hover);\n min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n box-sizing: border-box;\n gap: var(--salt-spacing-100);\n position: relative;\n border-radius: var(--salt-palette-corner-weak);\n text-decoration: none;\n}\n\n.saltMegaMenuItem > a > .saltIcon {\n display: flex;\n height: var(--salt-size-base);\n align-items: center;\n}\n\n.saltMegaMenuItem > a:focus-visible {\n outline: var(--salt-focused-outline);\n outline-offset: calc(var(--salt-size-fixed-100) * -2);\n}\n\n.saltMegaMenuItem > a:hover {\n outline: none;\n background: var(--salt-navigable-background-hover);\n}\n\n.saltMegaMenuItem > a:active {\n background: var(--salt-navigable-accent-background-active);\n}\n\n.saltMegaMenuItem > a:active::before {\n content: \"\";\n position: absolute;\n inset: 0;\n box-sizing: border-box;\n border-radius: inherit;\n border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-navigable-accent-borderColor-active);\n pointer-events: none;\n}\n";
|
|
3
|
+
var css_248z = ".saltMegaMenuItem {\n list-style: none;\n}\n\n.saltMegaMenuItem > a {\n display: flex;\n padding: var(--salt-spacing-50) var(--salt-spacing-100);\n align-items: flex-start;\n color: var(--salt-content-primary-foreground);\n background: var(--salt-selectable-background);\n cursor: var(--salt-cursor-hover);\n min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n box-sizing: border-box;\n gap: var(--salt-spacing-100);\n position: relative;\n border-radius: var(--salt-palette-corner-weak);\n text-decoration: none;\n}\n\n.saltMegaMenuItem > a > .saltIcon {\n display: flex;\n height: var(--salt-size-base);\n align-items: center;\n}\n\n.saltMegaMenuItem-content {\n flex: 1 0;\n margin: var(--salt-spacing-75) 0;\n font-family: var(--salt-text-fontFamily);\n font-size: var(--salt-text-fontSize);\n font-weight: var(--salt-text-fontWeight);\n line-height: var(--salt-text-lineHeight);\n}\n\n.saltMegaMenuItem > a:focus-visible {\n outline: var(--salt-focused-outline);\n outline-offset: calc(var(--salt-size-fixed-100) * -2);\n}\n\n.saltMegaMenuItem > a:hover {\n outline: none;\n background: var(--salt-navigable-background-hover);\n}\n\n.saltMegaMenuItem > a:active {\n background: var(--salt-navigable-accent-background-active);\n}\n\n.saltMegaMenuItem > a:active::before {\n content: \"\";\n position: absolute;\n inset: 0;\n box-sizing: border-box;\n border-radius: inherit;\n border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-navigable-accent-borderColor-active);\n pointer-events: none;\n}\n";
|
|
4
4
|
|
|
5
5
|
module.exports = css_248z;
|
|
6
6
|
//# sourceMappingURL=MegaMenuItem.css.js.map
|
|
@@ -14,7 +14,7 @@ function ItemAction(props) {
|
|
|
14
14
|
return core.renderProps("a", props);
|
|
15
15
|
}
|
|
16
16
|
const MegaMenuItem = react.forwardRef(
|
|
17
|
-
function MegaMenuItem2({ children, className,
|
|
17
|
+
function MegaMenuItem2({ children, className, onClick, onKeyDown, ...rest }, ref) {
|
|
18
18
|
const targetWindow = window.useWindow();
|
|
19
19
|
const megaMenu = useMegaMenu.useMegaMenu();
|
|
20
20
|
styles.useComponentCssInjection({
|
|
@@ -33,16 +33,17 @@ const MegaMenuItem = react.forwardRef(
|
|
|
33
33
|
event.currentTarget.click();
|
|
34
34
|
}
|
|
35
35
|
};
|
|
36
|
-
return /* @__PURE__ */ jsxRuntime.jsx("li", { className: withBaseName(), ref, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
36
|
+
return /* @__PURE__ */ jsxRuntime.jsx("li", { className: clsx.clsx(withBaseName(), className), ref, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
37
37
|
ItemAction,
|
|
38
38
|
{
|
|
39
|
-
className: clsx.clsx(withBaseName(), className),
|
|
40
39
|
"data-mega-menu-item": "",
|
|
41
|
-
href,
|
|
42
40
|
onClick: handleClick,
|
|
43
41
|
onKeyDown: handleKeyDown,
|
|
44
42
|
...rest,
|
|
45
|
-
children
|
|
43
|
+
children: react.Children.map(
|
|
44
|
+
children,
|
|
45
|
+
(child) => typeof child === "string" || typeof child === "number" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: withBaseName("content"), children: child }) : child
|
|
46
|
+
)
|
|
46
47
|
}
|
|
47
48
|
) });
|
|
48
49
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MegaMenuItem.js","sources":["../src/mega-menu/MegaMenuItem.tsx"],"sourcesContent":["import { makePrefixer, renderProps } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type AnchorHTMLAttributes,\n type ComponentPropsWithoutRef,\n forwardRef,\n type KeyboardEvent,\n type MouseEvent,\n type ReactNode,\n} from \"react\";\nimport megaMenuItemCss from \"./MegaMenuItem.css\";\nimport { useMegaMenu } from \"./useMegaMenu\";\n\nconst withBaseName = makePrefixer(\"saltMegaMenuItem\");\n\n// biome-ignore lint/suspicious/noExplicitAny: We don't know the exact type here\nfunction ItemAction(props: ComponentPropsWithoutRef<any>) {\n return renderProps(\"a\", props);\n}\n\nexport interface MegaMenuItemProps\n extends AnchorHTMLAttributes<HTMLAnchorElement> {\n /**\n * The content of the mega menu item.\n */\n children?: ReactNode;\n /**\n *
|
|
1
|
+
{"version":3,"file":"MegaMenuItem.js","sources":["../src/mega-menu/MegaMenuItem.tsx"],"sourcesContent":["import { makePrefixer, type RenderPropsType, renderProps } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type AnchorHTMLAttributes,\n Children,\n type ComponentPropsWithoutRef,\n forwardRef,\n type KeyboardEvent,\n type MouseEvent,\n type ReactNode,\n} from \"react\";\nimport megaMenuItemCss from \"./MegaMenuItem.css\";\nimport { useMegaMenu } from \"./useMegaMenu\";\n\nconst withBaseName = makePrefixer(\"saltMegaMenuItem\");\n\n// biome-ignore lint/suspicious/noExplicitAny: We don't know the exact type here\nfunction ItemAction(props: ComponentPropsWithoutRef<any>) {\n return renderProps(\"a\", props);\n}\n\nexport interface MegaMenuItemProps\n extends AnchorHTMLAttributes<HTMLAnchorElement> {\n /**\n * The content of the mega menu item.\n */\n children?: ReactNode;\n /**\n * Render prop to enable customization of the underlying action element (e.g. a router `Link`).\n */\n render?: RenderPropsType[\"render\"];\n}\n\nexport const MegaMenuItem = forwardRef<HTMLLIElement, MegaMenuItemProps>(\n function MegaMenuItem(\n { children, className, onClick, onKeyDown, ...rest },\n ref,\n ) {\n const targetWindow = useWindow();\n const megaMenu = useMegaMenu();\n\n useComponentCssInjection({\n testId: \"salt-mega-menu-item\",\n css: megaMenuItemCss,\n window: targetWindow,\n });\n\n const handleClick = (event: MouseEvent<HTMLAnchorElement>) => {\n onClick?.(event);\n megaMenu.setOpen(false);\n };\n\n // Native `<a>` activates on Enter but not Space — handle Space here for parity.\n const handleKeyDown = (event: KeyboardEvent<HTMLAnchorElement>) => {\n onKeyDown?.(event);\n if (!event.defaultPrevented && event.key === \" \") {\n event.preventDefault();\n event.currentTarget.click();\n }\n };\n\n return (\n <li className={clsx(withBaseName(), className)} ref={ref}>\n <ItemAction\n data-mega-menu-item=\"\"\n onClick={handleClick}\n onKeyDown={handleKeyDown}\n {...rest}\n >\n {Children.map(children, (child) =>\n typeof child === \"string\" || typeof child === \"number\" ? (\n <span className={withBaseName(\"content\")}>{child}</span>\n ) : (\n child\n ),\n )}\n </ItemAction>\n </li>\n );\n },\n);\n"],"names":["makePrefixer","renderProps","forwardRef","MegaMenuItem","useWindow","useMegaMenu","useComponentCssInjection","megaMenuItemCss","jsx","clsx","Children"],"mappings":";;;;;;;;;;;AAgBA,MAAM,YAAA,GAAeA,kBAAa,kBAAkB,CAAA;AAGpD,SAAS,WAAW,KAAA,EAAsC;AACxD,EAAA,OAAOC,gBAAA,CAAY,KAAK,KAAK,CAAA;AAC/B;AAcO,MAAM,YAAA,GAAeC,gBAAA;AAAA,EAC1B,SAASC,aAAAA,CACP,EAAE,QAAA,EAAU,SAAA,EAAW,SAAS,SAAA,EAAW,GAAG,IAAA,EAAK,EACnD,GAAA,EACA;AACA,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAA,MAAM,WAAWC,uBAAA,EAAY;AAE7B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,qBAAA;AAAA,MACR,GAAA,EAAKC,cAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,WAAA,GAAc,CAAC,KAAA,KAAyC;AAC5D,MAAA,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAU,KAAA,CAAA;AACV,MAAA,QAAA,CAAS,QAAQ,KAAK,CAAA;AAAA,IACxB,CAAA;AAGA,IAAA,MAAM,aAAA,GAAgB,CAAC,KAAA,KAA4C;AACjE,MAAA,SAAA,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,CAAY,KAAA,CAAA;AACZ,MAAA,IAAI,CAAC,KAAA,CAAM,gBAAA,IAAoB,KAAA,CAAM,QAAQ,GAAA,EAAK;AAChD,QAAA,KAAA,CAAM,cAAA,EAAe;AACrB,QAAA,KAAA,CAAM,cAAc,KAAA,EAAM;AAAA,MAC5B;AAAA,IACF,CAAA;AAEA,IAAA,uBACEC,cAAA,CAAC,QAAG,SAAA,EAAWC,SAAA,CAAK,cAAa,EAAG,SAAS,GAAG,GAAA,EAC9C,QAAA,kBAAAD,cAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,qBAAA,EAAoB,EAAA;AAAA,QACpB,OAAA,EAAS,WAAA;AAAA,QACT,SAAA,EAAW,aAAA;AAAA,QACV,GAAG,IAAA;AAAA,QAEH,QAAA,EAAAE,cAAA,CAAS,GAAA;AAAA,UAAI,QAAA;AAAA,UAAU,CAAC,KAAA,KACvB,OAAO,KAAA,KAAU,YAAY,OAAO,KAAA,KAAU,QAAA,mBAC5CF,cAAA,CAAC,UAAK,SAAA,EAAW,YAAA,CAAa,SAAS,CAAA,EAAI,iBAAM,CAAA,GAEjD;AAAA;AAEJ;AAAA,KACF,EACF,CAAA;AAAA,EAEJ;AACF;;;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MegaMenuSupportingActions.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
var core = require('@salt-ds/core');
|
|
5
|
+
var styles = require('@salt-ds/styles');
|
|
6
|
+
var window = require('@salt-ds/window');
|
|
7
|
+
var clsx = require('clsx');
|
|
8
|
+
var react = require('react');
|
|
9
|
+
var MegaMenuSupportingActions$1 = require('./MegaMenuSupportingActions.css.js');
|
|
10
|
+
|
|
11
|
+
const withBaseName = core.makePrefixer("saltMegaMenuSupportingActions");
|
|
12
|
+
const MegaMenuSupportingActions = react.forwardRef(function MegaMenuSupportingActions2({ className, ...rest }, ref) {
|
|
13
|
+
const targetWindow = window.useWindow();
|
|
14
|
+
styles.useComponentCssInjection({
|
|
15
|
+
testId: "salt-mega-menu-supporting-actions",
|
|
16
|
+
css: MegaMenuSupportingActions$1,
|
|
17
|
+
window: targetWindow
|
|
18
|
+
});
|
|
19
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
20
|
+
"div",
|
|
21
|
+
{
|
|
22
|
+
className: clsx.clsx(withBaseName(), className),
|
|
23
|
+
"data-mega-menu-column": "",
|
|
24
|
+
ref,
|
|
25
|
+
...rest
|
|
26
|
+
}
|
|
27
|
+
);
|
|
28
|
+
});
|
|
29
|
+
|
|
30
|
+
exports.MegaMenuSupportingActions = MegaMenuSupportingActions;
|
|
31
|
+
//# sourceMappingURL=MegaMenuSupportingActions.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MegaMenuSupportingActions.js","sources":["../src/mega-menu/MegaMenuSupportingActions.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n forwardRef,\n type ReactNode,\n} from \"react\";\nimport megaMenuSupportingActionsCss from \"./MegaMenuSupportingActions.css\";\n\nconst withBaseName = makePrefixer(\"saltMegaMenuSupportingActions\");\n\nexport interface MegaMenuSupportingActionsProps\n extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * Supporting action links displayed below the menu sections.\n */\n children?: ReactNode;\n}\n\nexport const MegaMenuSupportingActions = forwardRef<\n HTMLDivElement,\n MegaMenuSupportingActionsProps\n>(function MegaMenuSupportingActions({ className, ...rest }, ref) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-mega-menu-supporting-actions\",\n css: megaMenuSupportingActionsCss,\n window: targetWindow,\n });\n\n return (\n <div\n className={clsx(withBaseName(), className)}\n data-mega-menu-column=\"\"\n ref={ref}\n {...rest}\n />\n );\n});\n"],"names":["makePrefixer","forwardRef","MegaMenuSupportingActions","useWindow","useComponentCssInjection","megaMenuSupportingActionsCss","jsx","clsx"],"mappings":";;;;;;;;;;AAWA,MAAM,YAAA,GAAeA,kBAAa,+BAA+B,CAAA;AAU1D,MAAM,yBAAA,GAA4BC,iBAGvC,SAASC,0BAAAA,CAA0B,EAAE,SAAA,EAAW,GAAG,IAAA,EAAK,EAAG,GAAA,EAAK;AAChE,EAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,EAAAC,+BAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,mCAAA;AAAA,IACR,GAAA,EAAKC,2BAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,uBACEC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAWC,SAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA;AAAA,MACzC,uBAAA,EAAsB,EAAA;AAAA,MACtB,GAAA;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ,CAAC;;;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MegaMenuSupportingContent.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
var core = require('@salt-ds/core');
|
|
5
|
+
var styles = require('@salt-ds/styles');
|
|
6
|
+
var window = require('@salt-ds/window');
|
|
7
|
+
var clsx = require('clsx');
|
|
8
|
+
var react = require('react');
|
|
9
|
+
var MegaMenuSupportingContent$1 = require('./MegaMenuSupportingContent.css.js');
|
|
10
|
+
|
|
11
|
+
const withBaseName = core.makePrefixer("saltMegaMenuSupportingContent");
|
|
12
|
+
const MegaMenuSupportingContent = react.forwardRef(function MegaMenuSupportingContent2({ className, ...rest }, ref) {
|
|
13
|
+
const targetWindow = window.useWindow();
|
|
14
|
+
styles.useComponentCssInjection({
|
|
15
|
+
testId: "salt-mega-menu-supporting-content",
|
|
16
|
+
css: MegaMenuSupportingContent$1,
|
|
17
|
+
window: targetWindow
|
|
18
|
+
});
|
|
19
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
20
|
+
"div",
|
|
21
|
+
{
|
|
22
|
+
className: clsx.clsx(withBaseName(), className),
|
|
23
|
+
"data-mega-menu-column": "",
|
|
24
|
+
ref,
|
|
25
|
+
...rest
|
|
26
|
+
}
|
|
27
|
+
);
|
|
28
|
+
});
|
|
29
|
+
|
|
30
|
+
exports.MegaMenuSupportingContent = MegaMenuSupportingContent;
|
|
31
|
+
//# sourceMappingURL=MegaMenuSupportingContent.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MegaMenuSupportingContent.js","sources":["../src/mega-menu/MegaMenuSupportingContent.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n forwardRef,\n type ReactNode,\n} from \"react\";\nimport megaMenuSupportingContentCss from \"./MegaMenuSupportingContent.css\";\n\nconst withBaseName = makePrefixer(\"saltMegaMenuSupportingContent\");\n\nexport interface MegaMenuSupportingContentProps\n extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * The content of the region.\n */\n children?: ReactNode;\n}\n\nexport const MegaMenuSupportingContent = forwardRef<\n HTMLDivElement,\n MegaMenuSupportingContentProps\n>(function MegaMenuSupportingContent({ className, ...rest }, ref) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-mega-menu-supporting-content\",\n css: megaMenuSupportingContentCss,\n window: targetWindow,\n });\n\n return (\n <div\n className={clsx(withBaseName(), className)}\n data-mega-menu-column=\"\"\n ref={ref}\n {...rest}\n />\n );\n});\n"],"names":["makePrefixer","forwardRef","MegaMenuSupportingContent","useWindow","useComponentCssInjection","megaMenuSupportingContentCss","jsx","clsx"],"mappings":";;;;;;;;;;AAWA,MAAM,YAAA,GAAeA,kBAAa,+BAA+B,CAAA;AAU1D,MAAM,yBAAA,GAA4BC,iBAGvC,SAASC,0BAAAA,CAA0B,EAAE,SAAA,EAAW,GAAG,IAAA,EAAK,EAAG,GAAA,EAAK;AAChE,EAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,EAAAC,+BAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,mCAAA;AAAA,IACR,GAAA,EAAKC,2BAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,uBACEC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAWC,SAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA;AAAA,MACzC,uBAAA,EAAsB,EAAA;AAAA,MACtB,GAAA;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ,CAAC;;;;"}
|
|
@@ -8,7 +8,7 @@ const FOCUSABLE_SELECTOR = 'a[href], button:not([disabled]), [tabindex]:not([tab
|
|
|
8
8
|
function getColumnItems(column) {
|
|
9
9
|
const marked = Array.from(
|
|
10
10
|
column.querySelectorAll(ITEM_SELECTOR)
|
|
11
|
-
);
|
|
11
|
+
).filter((el) => el.matches(FOCUSABLE_SELECTOR));
|
|
12
12
|
if (marked.length > 0) return marked;
|
|
13
13
|
return Array.from(column.querySelectorAll(FOCUSABLE_SELECTOR));
|
|
14
14
|
}
|
|
@@ -26,7 +26,7 @@ function buildGrid(panel) {
|
|
|
26
26
|
if (items.length > 0) grid.push(items);
|
|
27
27
|
} else if (el.matches(ITEM_SELECTOR)) {
|
|
28
28
|
const parentCol = el.closest(COLUMN_SELECTOR);
|
|
29
|
-
if (!parentCol || !columns.has(parentCol)) {
|
|
29
|
+
if ((!parentCol || !columns.has(parentCol)) && el.matches(FOCUSABLE_SELECTOR)) {
|
|
30
30
|
grid.push([el]);
|
|
31
31
|
}
|
|
32
32
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useMegaMenuKeyboard.js","sources":["../src/mega-menu/useMegaMenuKeyboard.ts"],"sourcesContent":["import type { ElementProps, FloatingRootContext } from \"@floating-ui/react\";\nimport { useMemo } from \"react\";\n\nconst COLUMN_SELECTOR = \"[data-mega-menu-column]\";\nconst ITEM_SELECTOR = \"[data-mega-menu-item]\";\nexport const FOCUSABLE_SELECTOR =\n 'a[href], button:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n\n/**\n * Get navigable items within a column.\n * Prefers explicitly marked items (`data-mega-menu-item`), falling back\n * to all focusable elements when no marked items are found.\n */\nfunction getColumnItems(column: HTMLElement): HTMLElement[] {\n const marked = Array.from(\n column.querySelectorAll<HTMLElement>(ITEM_SELECTOR),\n );\n if (marked.length > 0) return marked;\n return Array.from(column.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR));\n}\n\n/**\n * Build a 2D grid of navigable items from the panel DOM.\n * Each column is a `[data-mega-menu-column]` wrapper; items within each\n * column are discovered via `getColumnItems`.\n * Items not inside any column (orphans) are inserted at their DOM position\n * as single-item columns so keyboard navigation follows visual order.\n */\nfunction buildGrid(panel: HTMLElement): HTMLElement[][] {\n const columns = new Set(panel.querySelectorAll<HTMLElement>(COLUMN_SELECTOR));\n const grid: HTMLElement[][] = [];\n const processedColumns = new Set<HTMLElement>();\n\n // Walk columns and items in DOM order so orphans are interleaved correctly.\n const all = panel.querySelectorAll<HTMLElement>(\n `${COLUMN_SELECTOR}, ${ITEM_SELECTOR}`,\n );\n\n for (const el of all) {\n if (columns.has(el) && !processedColumns.has(el)) {\n processedColumns.add(el);\n const items = getColumnItems(el);\n if (items.length > 0) grid.push(items);\n } else if (el.matches(ITEM_SELECTOR)) {\n const parentCol = el.closest(COLUMN_SELECTOR);\n if (!parentCol || !columns.has(parentCol as HTMLElement)) {\n grid.push([el]);\n }\n }\n }\n\n return grid;\n}\n\nfunction findPosition(\n grid: HTMLElement[][],\n el: HTMLElement,\n): { col: number; row: number } | null {\n for (let col = 0; col < grid.length; col++) {\n const row = grid[col].indexOf(el);\n if (row !== -1) return { col, row };\n }\n return null;\n}\n\nfunction focusTrigger(context: FloatingRootContext) {\n const reference = context.elements.reference as HTMLElement | null;\n const focusable =\n reference?.querySelector<HTMLElement>(FOCUSABLE_SELECTOR) ?? reference;\n focusable?.focus();\n}\n\nfunction focusNextAfterPanel(context: FloatingRootContext, panel: HTMLElement) {\n const reference = context.elements.reference as HTMLElement | null;\n const refFocusable =\n reference?.querySelector<HTMLElement>(FOCUSABLE_SELECTOR) ?? reference;\n\n const nextSibling = refFocusable\n ?.closest(\"li\")\n ?.nextElementSibling?.querySelector<HTMLElement>(FOCUSABLE_SELECTOR);\n\n const nextOutside =\n nextSibling ||\n (() => {\n const allFocusable = Array.from(\n panel.ownerDocument.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR),\n ).filter((el) => !panel.contains(el));\n const idx = refFocusable ? allFocusable.indexOf(refFocusable) : -1;\n return idx >= 0 ? allFocusable[idx + 1] : undefined;\n })();\n\n if (nextOutside) {\n const view = panel.ownerDocument.defaultView;\n view?.requestAnimationFrame(() => {\n view?.requestAnimationFrame(() => {\n nextOutside.focus();\n });\n });\n }\n}\n\nexport interface UseMegaMenuKeyboardProps {\n /**\n * Whether the interaction is enabled.\n * @default true\n */\n enabled?: boolean;\n}\n\n/**\n * Floating-ui custom interaction hook for mega menu grid keyboard navigation.\n *\n * Returns `ElementProps` that get merged via `useInteractions`, handling\n * keyboard events on both the reference (trigger) and floating (panel) elements.\n *\n * - **↑ / ↓** move within the current column.\n * - **← / →** jump to the top of the previous / next column.\n * - **Tab / Shift+Tab** move linearly through every item.\n * - **Home / End** jump to the first / last item in the column.\n * - **↑ from the first item** or **← from the first column** returns\n * focus to the trigger.\n * - **→ from the last column** closes the panel and moves focus to the\n * next sibling trigger.\n */\nexport function useMegaMenuKeyboard(\n context: FloatingRootContext,\n props: UseMegaMenuKeyboardProps = {},\n): ElementProps {\n const { enabled = true } = props;\n const { open, onOpenChange } = context;\n\n return useMemo(() => {\n if (!enabled) {\n return {};\n }\n\n return {\n reference: {\n onKeyDown(event: React.KeyboardEvent) {\n if (event.key === \"ArrowDown\" && open) {\n event.preventDefault();\n const floating = context.elements.floating;\n if (floating instanceof HTMLElement) {\n focusFirstItem(floating);\n }\n }\n },\n },\n floating: {\n onKeyDown(event: React.KeyboardEvent) {\n if (!open) return;\n\n const panel = event.currentTarget as HTMLElement;\n const target = event.target as HTMLElement;\n\n const focusedItem =\n target.closest<HTMLElement>(ITEM_SELECTOR) ??\n target.closest<HTMLElement>(FOCUSABLE_SELECTOR);\n if (!focusedItem) return;\n\n const grid = buildGrid(panel);\n const pos = findPosition(grid, focusedItem);\n if (!pos) return;\n\n const allItems = grid.flat();\n const linearIndex = allItems.indexOf(focusedItem);\n\n switch (event.key) {\n case \"ArrowDown\": {\n event.preventDefault();\n const next = pos.row + 1;\n if (next < grid[pos.col].length) {\n grid[pos.col][next].focus();\n } else {\n const nextCol = pos.col + 1;\n if (nextCol < grid.length) {\n grid[nextCol][0].focus();\n }\n }\n break;\n }\n\n case \"ArrowUp\": {\n event.preventDefault();\n if (pos.row > 0) {\n grid[pos.col][pos.row - 1].focus();\n } else {\n const prevCol = pos.col - 1;\n if (prevCol >= 0) {\n grid[prevCol][grid[prevCol].length - 1].focus();\n } else {\n focusTrigger(context);\n }\n }\n break;\n }\n\n case \"ArrowRight\": {\n event.preventDefault();\n const nextCol = pos.col + 1;\n if (nextCol < grid.length) {\n grid[nextCol][0].focus();\n } else {\n // On the last column — close panel and move to next trigger\n const reference = context.elements\n .reference as HTMLElement | null;\n const trigger =\n reference?.querySelector<HTMLElement>(FOCUSABLE_SELECTOR) ??\n reference;\n const li = trigger?.closest(\"li\");\n const nextSibling =\n li?.nextElementSibling instanceof HTMLElement\n ? li.nextElementSibling.querySelector<HTMLElement>(\n FOCUSABLE_SELECTOR,\n )\n : null;\n if (nextSibling) {\n onOpenChange(false);\n nextSibling.focus();\n }\n }\n break;\n }\n\n case \"ArrowLeft\": {\n event.preventDefault();\n const prevCol = pos.col - 1;\n if (prevCol >= 0) {\n grid[prevCol][0].focus();\n } else {\n focusTrigger(context);\n }\n break;\n }\n\n case \"Tab\": {\n event.preventDefault();\n if (event.shiftKey) {\n if (linearIndex === 0) {\n focusTrigger(context);\n } else {\n allItems[linearIndex - 1]?.focus();\n }\n } else {\n if (linearIndex === allItems.length - 1) {\n onOpenChange(false);\n focusNextAfterPanel(context, panel);\n } else {\n allItems[linearIndex + 1]?.focus();\n }\n }\n break;\n }\n\n case \"Home\": {\n event.preventDefault();\n grid[pos.col][0]?.focus();\n break;\n }\n\n case \"End\": {\n event.preventDefault();\n grid[pos.col][grid[pos.col].length - 1]?.focus();\n break;\n }\n\n default:\n break;\n }\n },\n },\n };\n }, [enabled, open, context, onOpenChange]);\n}\n\n/**\n * Focus the first navigable item inside a mega menu panel.\n * Retries with `requestAnimationFrame` if content has not yet rendered.\n */\nexport function focusFirstItem(panel: HTMLElement, attempt = 0): void {\n const grid = buildGrid(panel);\n const firstItem = grid[0]?.[0];\n\n if (firstItem) {\n firstItem.focus();\n return;\n }\n\n const view = panel.ownerDocument.defaultView;\n if (attempt < 3 && view) {\n view.requestAnimationFrame(() => focusFirstItem(panel, attempt + 1));\n }\n}\n"],"names":["useMemo"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"useMegaMenuKeyboard.js","sources":["../src/mega-menu/useMegaMenuKeyboard.ts"],"sourcesContent":["import type { ElementProps, FloatingRootContext } from \"@floating-ui/react\";\nimport { useMemo } from \"react\";\n\nconst COLUMN_SELECTOR = \"[data-mega-menu-column]\";\nconst ITEM_SELECTOR = \"[data-mega-menu-item]\";\nexport const FOCUSABLE_SELECTOR =\n 'a[href], button:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n\n/**\n * Get navigable items within a column.\n * Prefers explicitly marked items (`data-mega-menu-item`) that are focusable,\n * falling back to all focusable elements when no usable marked items are found.\n */\nfunction getColumnItems(column: HTMLElement): HTMLElement[] {\n const marked = Array.from(\n column.querySelectorAll<HTMLElement>(ITEM_SELECTOR),\n ).filter((el) => el.matches(FOCUSABLE_SELECTOR));\n if (marked.length > 0) return marked;\n return Array.from(column.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR));\n}\n\n/**\n * Build a 2D grid of navigable items from the panel DOM.\n * Each column is a `[data-mega-menu-column]` wrapper; items within each\n * column are discovered via `getColumnItems`.\n * Items not inside any column (orphans) are inserted at their DOM position\n * as single-item columns so keyboard navigation follows visual order.\n */\nfunction buildGrid(panel: HTMLElement): HTMLElement[][] {\n const columns = new Set(panel.querySelectorAll<HTMLElement>(COLUMN_SELECTOR));\n const grid: HTMLElement[][] = [];\n const processedColumns = new Set<HTMLElement>();\n\n // Walk columns and items in DOM order so orphans are interleaved correctly.\n const all = panel.querySelectorAll<HTMLElement>(\n `${COLUMN_SELECTOR}, ${ITEM_SELECTOR}`,\n );\n\n for (const el of all) {\n if (columns.has(el) && !processedColumns.has(el)) {\n processedColumns.add(el);\n const items = getColumnItems(el);\n if (items.length > 0) grid.push(items);\n } else if (el.matches(ITEM_SELECTOR)) {\n const parentCol = el.closest(COLUMN_SELECTOR);\n if (\n (!parentCol || !columns.has(parentCol as HTMLElement)) &&\n el.matches(FOCUSABLE_SELECTOR)\n ) {\n grid.push([el]);\n }\n }\n }\n\n return grid;\n}\n\nfunction findPosition(\n grid: HTMLElement[][],\n el: HTMLElement,\n): { col: number; row: number } | null {\n for (let col = 0; col < grid.length; col++) {\n const row = grid[col].indexOf(el);\n if (row !== -1) return { col, row };\n }\n return null;\n}\n\nfunction focusTrigger(context: FloatingRootContext) {\n const reference = context.elements.reference as HTMLElement | null;\n const focusable =\n reference?.querySelector<HTMLElement>(FOCUSABLE_SELECTOR) ?? reference;\n focusable?.focus();\n}\n\nfunction focusNextAfterPanel(context: FloatingRootContext, panel: HTMLElement) {\n const reference = context.elements.reference as HTMLElement | null;\n const refFocusable =\n reference?.querySelector<HTMLElement>(FOCUSABLE_SELECTOR) ?? reference;\n\n const nextSibling = refFocusable\n ?.closest(\"li\")\n ?.nextElementSibling?.querySelector<HTMLElement>(FOCUSABLE_SELECTOR);\n\n const nextOutside =\n nextSibling ||\n (() => {\n const allFocusable = Array.from(\n panel.ownerDocument.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR),\n ).filter((el) => !panel.contains(el));\n const idx = refFocusable ? allFocusable.indexOf(refFocusable) : -1;\n return idx >= 0 ? allFocusable[idx + 1] : undefined;\n })();\n\n if (nextOutside) {\n const view = panel.ownerDocument.defaultView;\n view?.requestAnimationFrame(() => {\n view?.requestAnimationFrame(() => {\n nextOutside.focus();\n });\n });\n }\n}\n\nexport interface UseMegaMenuKeyboardProps {\n /**\n * Whether the interaction is enabled.\n * @default true\n */\n enabled?: boolean;\n}\n\n/**\n * Floating-ui custom interaction hook for mega menu grid keyboard navigation.\n *\n * Returns `ElementProps` that get merged via `useInteractions`, handling\n * keyboard events on both the reference (trigger) and floating (panel) elements.\n *\n * - **↑ / ↓** move within the current column.\n * - **← / →** jump to the top of the previous / next column.\n * - **Tab / Shift+Tab** move linearly through every item.\n * - **Home / End** jump to the first / last item in the column.\n * - **↑ from the first item** or **← from the first column** returns\n * focus to the trigger.\n * - **→ from the last column** closes the panel and moves focus to the\n * next sibling trigger.\n */\nexport function useMegaMenuKeyboard(\n context: FloatingRootContext,\n props: UseMegaMenuKeyboardProps = {},\n): ElementProps {\n const { enabled = true } = props;\n const { open, onOpenChange } = context;\n\n return useMemo(() => {\n if (!enabled) {\n return {};\n }\n\n return {\n reference: {\n onKeyDown(event: React.KeyboardEvent) {\n if (event.key === \"ArrowDown\" && open) {\n event.preventDefault();\n const floating = context.elements.floating;\n if (floating instanceof HTMLElement) {\n focusFirstItem(floating);\n }\n }\n },\n },\n floating: {\n onKeyDown(event: React.KeyboardEvent) {\n if (!open) return;\n\n const panel = event.currentTarget as HTMLElement;\n const target = event.target as HTMLElement;\n\n const focusedItem =\n target.closest<HTMLElement>(ITEM_SELECTOR) ??\n target.closest<HTMLElement>(FOCUSABLE_SELECTOR);\n if (!focusedItem) return;\n\n const grid = buildGrid(panel);\n const pos = findPosition(grid, focusedItem);\n if (!pos) return;\n\n const allItems = grid.flat();\n const linearIndex = allItems.indexOf(focusedItem);\n\n switch (event.key) {\n case \"ArrowDown\": {\n event.preventDefault();\n const next = pos.row + 1;\n if (next < grid[pos.col].length) {\n grid[pos.col][next].focus();\n } else {\n const nextCol = pos.col + 1;\n if (nextCol < grid.length) {\n grid[nextCol][0].focus();\n }\n }\n break;\n }\n\n case \"ArrowUp\": {\n event.preventDefault();\n if (pos.row > 0) {\n grid[pos.col][pos.row - 1].focus();\n } else {\n const prevCol = pos.col - 1;\n if (prevCol >= 0) {\n grid[prevCol][grid[prevCol].length - 1].focus();\n } else {\n focusTrigger(context);\n }\n }\n break;\n }\n\n case \"ArrowRight\": {\n event.preventDefault();\n const nextCol = pos.col + 1;\n if (nextCol < grid.length) {\n grid[nextCol][0].focus();\n } else {\n // On the last column — close panel and move to next trigger\n const reference = context.elements\n .reference as HTMLElement | null;\n const trigger =\n reference?.querySelector<HTMLElement>(FOCUSABLE_SELECTOR) ??\n reference;\n const li = trigger?.closest(\"li\");\n const nextSibling =\n li?.nextElementSibling instanceof HTMLElement\n ? li.nextElementSibling.querySelector<HTMLElement>(\n FOCUSABLE_SELECTOR,\n )\n : null;\n if (nextSibling) {\n onOpenChange(false);\n nextSibling.focus();\n }\n }\n break;\n }\n\n case \"ArrowLeft\": {\n event.preventDefault();\n const prevCol = pos.col - 1;\n if (prevCol >= 0) {\n grid[prevCol][0].focus();\n } else {\n focusTrigger(context);\n }\n break;\n }\n\n case \"Tab\": {\n event.preventDefault();\n if (event.shiftKey) {\n if (linearIndex === 0) {\n focusTrigger(context);\n } else {\n allItems[linearIndex - 1]?.focus();\n }\n } else {\n if (linearIndex === allItems.length - 1) {\n onOpenChange(false);\n focusNextAfterPanel(context, panel);\n } else {\n allItems[linearIndex + 1]?.focus();\n }\n }\n break;\n }\n\n case \"Home\": {\n event.preventDefault();\n grid[pos.col][0]?.focus();\n break;\n }\n\n case \"End\": {\n event.preventDefault();\n grid[pos.col][grid[pos.col].length - 1]?.focus();\n break;\n }\n\n default:\n break;\n }\n },\n },\n };\n }, [enabled, open, context, onOpenChange]);\n}\n\n/**\n * Focus the first navigable item inside a mega menu panel.\n * Retries with `requestAnimationFrame` if content has not yet rendered.\n */\nexport function focusFirstItem(panel: HTMLElement, attempt = 0): void {\n const grid = buildGrid(panel);\n const firstItem = grid[0]?.[0];\n\n if (firstItem) {\n firstItem.focus();\n return;\n }\n\n const view = panel.ownerDocument.defaultView;\n if (attempt < 3 && view) {\n view.requestAnimationFrame(() => focusFirstItem(panel, attempt + 1));\n }\n}\n"],"names":["useMemo"],"mappings":"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"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var css_248z = ".saltToolbarContentNext {\n display: flex;\n align-items: center;\n gap: var(--salt-spacing-100);\n min-width: 0;\n flex-shrink: 0;\n}\n\n.saltToolbarContentNext[data-position=\"start\"] {\n justify-content: flex-start;\n}\n\n.saltToolbarContentNext[data-position=\"center\"] {\n justify-content: center;\n}\n\n.saltToolbarContentNext[data-position=\"end\"] {\n justify-content: flex-end;\n}\n\n.saltToolbarContentNext[data-implicit] > .saltTooltrayNext[data-align=\"center\"],\n.saltToolbarContentNext[data-implicit] > .saltTooltrayNext[data-align=\"end\"] {\n margin-inline-start: 0;\n margin-inline-end: 0;\n}\n";
|
|
4
|
+
|
|
5
|
+
module.exports = css_248z;
|
|
6
|
+
//# sourceMappingURL=ToolbarContentNext.css.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ToolbarContentNext.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
var core = require('@salt-ds/core');
|
|
5
|
+
var styles = require('@salt-ds/styles');
|
|
6
|
+
var window = require('@salt-ds/window');
|
|
7
|
+
var clsx = require('clsx');
|
|
8
|
+
var react = require('react');
|
|
9
|
+
var ToolbarContentNext$1 = require('./ToolbarContentNext.css.js');
|
|
10
|
+
|
|
11
|
+
const withBaseName = core.makePrefixer("saltToolbarContentNext");
|
|
12
|
+
const ToolbarContentNext = react.forwardRef(function ToolbarContentNext2({ children, className, position, ...rest }, ref) {
|
|
13
|
+
const targetWindow = window.useWindow();
|
|
14
|
+
styles.useComponentCssInjection({
|
|
15
|
+
testId: "salt-toolbar-content-next",
|
|
16
|
+
css: ToolbarContentNext$1,
|
|
17
|
+
window: targetWindow
|
|
18
|
+
});
|
|
19
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
20
|
+
"div",
|
|
21
|
+
{
|
|
22
|
+
className: clsx.clsx(withBaseName(), className),
|
|
23
|
+
...rest,
|
|
24
|
+
"data-position": position,
|
|
25
|
+
ref,
|
|
26
|
+
children
|
|
27
|
+
}
|
|
28
|
+
);
|
|
29
|
+
});
|
|
30
|
+
|
|
31
|
+
exports.ToolbarContentNext = ToolbarContentNext;
|
|
32
|
+
//# sourceMappingURL=ToolbarContentNext.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ToolbarContentNext.js","sources":["../src/toolbar-next/ToolbarContentNext.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithoutRef, forwardRef } from \"react\";\n\nimport toolbarContentNextCss from \"./ToolbarContentNext.css\";\n\nexport type ToolbarContentNextPosition = \"start\" | \"center\" | \"end\";\n\nexport interface ToolbarContentNextProps\n extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * Controls where the content is placed across the full toolbar.\n * If any content uses `\"center\"`, `ToolbarNext` reserves symmetric side space\n * so the center band stays on the toolbar midpoint.\n */\n position: ToolbarContentNextPosition;\n}\n\nconst withBaseName = makePrefixer(\"saltToolbarContentNext\");\n\nexport const ToolbarContentNext = forwardRef<\n HTMLDivElement,\n ToolbarContentNextProps\n>(function ToolbarContentNext({ children, className, position, ...rest }, ref) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-toolbar-content-next\",\n css: toolbarContentNextCss,\n window: targetWindow,\n });\n\n return (\n <div\n className={clsx(withBaseName(), className)}\n {...rest}\n data-position={position}\n ref={ref}\n >\n {children}\n </div>\n );\n});\n"],"names":["makePrefixer","forwardRef","ToolbarContentNext","useWindow","useComponentCssInjection","toolbarContentNextCss","jsx","clsx"],"mappings":";;;;;;;;;;AAoBA,MAAM,YAAA,GAAeA,kBAAa,wBAAwB,CAAA;AAEnD,MAAM,kBAAA,GAAqBC,gBAAA,CAGhC,SAASC,mBAAAA,CAAmB,EAAE,QAAA,EAAU,SAAA,EAAW,QAAA,EAAU,GAAG,IAAA,EAAK,EAAG,GAAA,EAAK;AAC7E,EAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,EAAAC,+BAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,2BAAA;AAAA,IACR,GAAA,EAAKC,oBAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,uBACEC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAWC,SAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA;AAAA,MACxC,GAAG,IAAA;AAAA,MACJ,eAAA,EAAe,QAAA;AAAA,MACf,GAAA;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ,CAAC;;;;"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var css_248z = ".saltToolbarNext {\n box-sizing: border-box;\n inline-size: 100%;\n min-width: 0;\n position: relative;\n}\n\n.saltToolbarNext-layout {\n align-items: center;\n --saltToolbarNext-band-gap: var(--salt-spacing-100);\n}\n\n.saltToolbarNext-layout:not([data-centered]) {\n display: flex;\n column-gap: var(--saltToolbarNext-band-gap);\n}\n\n.saltToolbarNext-layout[data-centered] {\n display: grid;\n grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);\n}\n\n.saltToolbarNext-band {\n display: flex;\n align-items: center;\n gap: var(--saltToolbarNext-band-gap);\n min-width: 0;\n}\n\n.saltToolbarNext-layout:not([data-centered]) > .saltToolbarNext-band[data-band-position=\"end\"] {\n justify-content: flex-end;\n margin-inline-start: auto;\n}\n\n.saltToolbarNext-layout[data-centered] > .saltToolbarNext-band[data-band-position=\"start\"] {\n grid-column: 1;\n}\n\n.saltToolbarNext-layout[data-centered] > .saltToolbarNext-band[data-band-position=\"center\"] {\n grid-column: 2;\n justify-content: center;\n}\n\n.saltToolbarNext-layout[data-centered] > .saltToolbarNext-band[data-band-position=\"end\"] {\n grid-column: 3;\n justify-content: flex-end;\n}\n\n.saltToolbarNext-fallback {\n display: flex;\n align-items: center;\n gap: var(--salt-spacing-100);\n}\n\n.saltToolbarNext-layout > * {\n min-width: 0;\n}\n\n.saltToolbarNext-primary {\n --toolbarNext-background: var(--salt-container-primary-background);\n --toolbarNext-borderColor: var(--salt-container-primary-borderColor);\n}\n\n.saltToolbarNext-secondary {\n --toolbarNext-background: var(--salt-container-secondary-background);\n --toolbarNext-borderColor: var(--salt-container-secondary-borderColor);\n}\n\n.saltToolbarNext-tertiary {\n --toolbarNext-background: var(--salt-container-tertiary-background);\n --toolbarNext-borderColor: var(--salt-container-tertiary-borderColor);\n}\n\n.saltToolbarNext-bordered {\n background: var(--saltToolbarNext-background, var(--toolbarNext-background));\n border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--saltToolbarNext-borderColor, var(--toolbarNext-borderColor));\n border-radius: var(--salt-palette-corner, 0);\n padding: var(--salt-spacing-100);\n}\n\n.saltToolbarNext-transparent {\n background: transparent;\n border: none;\n padding: 0;\n}\n\n.saltToolbarNext-measurements {\n display: flex;\n gap: var(--salt-spacing-100);\n position: absolute;\n visibility: hidden;\n pointer-events: none;\n inset: 0 auto auto 0;\n block-size: 0;\n overflow: hidden;\n}\n\n.saltToolbarNext-measureTrigger {\n white-space: nowrap;\n}\n";
|
|
4
|
+
|
|
5
|
+
module.exports = css_248z;
|
|
6
|
+
//# sourceMappingURL=ToolbarNext.css.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ToolbarNext.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|