@salt-ds/lab 1.0.0-alpha.41 → 1.0.0-alpha.43

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (70) hide show
  1. package/css/salt-lab.css +1 -100
  2. package/dist-cjs/index.js +0 -10
  3. package/dist-cjs/index.js.map +1 -1
  4. package/dist-es/index.js +0 -5
  5. package/dist-es/index.js.map +1 -1
  6. package/dist-types/index.d.ts +0 -1
  7. package/package.json +3 -3
  8. package/dist-cjs/menu/Menu.js +0 -24
  9. package/dist-cjs/menu/Menu.js.map +0 -1
  10. package/dist-cjs/menu/MenuBase.js +0 -116
  11. package/dist-cjs/menu/MenuBase.js.map +0 -1
  12. package/dist-cjs/menu/MenuContext.js +0 -26
  13. package/dist-cjs/menu/MenuContext.js.map +0 -1
  14. package/dist-cjs/menu/MenuGroup.css.js +0 -6
  15. package/dist-cjs/menu/MenuGroup.css.js.map +0 -1
  16. package/dist-cjs/menu/MenuGroup.js +0 -44
  17. package/dist-cjs/menu/MenuGroup.js.map +0 -1
  18. package/dist-cjs/menu/MenuItem.css.js +0 -6
  19. package/dist-cjs/menu/MenuItem.css.js.map +0 -1
  20. package/dist-cjs/menu/MenuItem.js +0 -92
  21. package/dist-cjs/menu/MenuItem.js.map +0 -1
  22. package/dist-cjs/menu/MenuPanel.css.js +0 -6
  23. package/dist-cjs/menu/MenuPanel.css.js.map +0 -1
  24. package/dist-cjs/menu/MenuPanel.js +0 -61
  25. package/dist-cjs/menu/MenuPanel.js.map +0 -1
  26. package/dist-cjs/menu/MenuPanelBase.js +0 -29
  27. package/dist-cjs/menu/MenuPanelBase.js.map +0 -1
  28. package/dist-cjs/menu/MenuPanelContext.js +0 -22
  29. package/dist-cjs/menu/MenuPanelContext.js.map +0 -1
  30. package/dist-cjs/menu/MenuTrigger.js +0 -43
  31. package/dist-cjs/menu/MenuTrigger.js.map +0 -1
  32. package/dist-cjs/menu/MenuTriggerContext.js +0 -18
  33. package/dist-cjs/menu/MenuTriggerContext.js.map +0 -1
  34. package/dist-es/menu/Menu.js +0 -20
  35. package/dist-es/menu/Menu.js.map +0 -1
  36. package/dist-es/menu/MenuBase.js +0 -112
  37. package/dist-es/menu/MenuBase.js.map +0 -1
  38. package/dist-es/menu/MenuContext.js +0 -21
  39. package/dist-es/menu/MenuContext.js.map +0 -1
  40. package/dist-es/menu/MenuGroup.css.js +0 -4
  41. package/dist-es/menu/MenuGroup.css.js.map +0 -1
  42. package/dist-es/menu/MenuGroup.js +0 -40
  43. package/dist-es/menu/MenuGroup.js.map +0 -1
  44. package/dist-es/menu/MenuItem.css.js +0 -4
  45. package/dist-es/menu/MenuItem.css.js.map +0 -1
  46. package/dist-es/menu/MenuItem.js +0 -88
  47. package/dist-es/menu/MenuItem.js.map +0 -1
  48. package/dist-es/menu/MenuPanel.css.js +0 -4
  49. package/dist-es/menu/MenuPanel.css.js.map +0 -1
  50. package/dist-es/menu/MenuPanel.js +0 -57
  51. package/dist-es/menu/MenuPanel.js.map +0 -1
  52. package/dist-es/menu/MenuPanelBase.js +0 -25
  53. package/dist-es/menu/MenuPanelBase.js.map +0 -1
  54. package/dist-es/menu/MenuPanelContext.js +0 -17
  55. package/dist-es/menu/MenuPanelContext.js.map +0 -1
  56. package/dist-es/menu/MenuTrigger.js +0 -39
  57. package/dist-es/menu/MenuTrigger.js.map +0 -1
  58. package/dist-es/menu/MenuTriggerContext.js +0 -13
  59. package/dist-es/menu/MenuTriggerContext.js.map +0 -1
  60. package/dist-types/menu/Menu.d.ts +0 -4
  61. package/dist-types/menu/MenuBase.d.ts +0 -22
  62. package/dist-types/menu/MenuContext.d.ts +0 -16
  63. package/dist-types/menu/MenuGroup.d.ts +0 -12
  64. package/dist-types/menu/MenuItem.d.ts +0 -8
  65. package/dist-types/menu/MenuPanel.d.ts +0 -8
  66. package/dist-types/menu/MenuPanelBase.d.ts +0 -4
  67. package/dist-types/menu/MenuPanelContext.d.ts +0 -5
  68. package/dist-types/menu/MenuTrigger.d.ts +0 -8
  69. package/dist-types/menu/MenuTriggerContext.d.ts +0 -6
  70. package/dist-types/menu/index.d.ts +0 -5
package/css/salt-lab.css CHANGED
@@ -2084,105 +2084,6 @@
2084
2084
  border-right: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-separable-primary-borderColor);
2085
2085
  }
2086
2086
 
2087
- /* src/menu/MenuGroup.css */
2088
- .saltMenuGroup-label {
2089
- background: var(--salt-container-primary-background);
2090
- color: var(--salt-text-secondary-foreground);
2091
- font-size: var(--salt-text-label-fontSize);
2092
- font-weight: var(--salt-text-label-fontWeight-strong);
2093
- height: calc(var(--salt-size-base) + var(--salt-spacing-100));
2094
- padding-left: var(--salt-spacing-100);
2095
- padding-right: var(--salt-spacing-100);
2096
- display: flex;
2097
- align-items: center;
2098
- position: sticky;
2099
- top: 0;
2100
- z-index: var(--salt-zIndex-default);
2101
- }
2102
- .saltMenuGroup {
2103
- border-top: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-separable-tertiary-borderColor);
2104
- }
2105
- .saltMenuGroup:first-of-type {
2106
- border-top: 0;
2107
- }
2108
-
2109
- /* src/menu/MenuItem.css */
2110
- .saltMenuItem {
2111
- color: var(--salt-content-primary-foreground);
2112
- background: var(--salt-selectable-background);
2113
- font-size: var(--salt-text-fontSize);
2114
- font-weight: var(--salt-text-fontWeight);
2115
- min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));
2116
- padding-left: var(--salt-spacing-100);
2117
- padding-right: var(--salt-spacing-100);
2118
- display: flex;
2119
- gap: var(--salt-spacing-100);
2120
- position: relative;
2121
- align-items: center;
2122
- cursor: var(--salt-selectable-cursor-hover);
2123
- box-sizing: border-box;
2124
- }
2125
- .saltMenuItem:focus-visible {
2126
- outline: var(--salt-focused-outline);
2127
- outline-offset: calc(var(--salt-size-border) * -2);
2128
- }
2129
- .saltMenuItem:hover {
2130
- outline: none;
2131
- }
2132
- .saltMenuItem:hover,
2133
- .saltMenuItem:focus-visible {
2134
- background: var(--salt-selectable-background-hover);
2135
- }
2136
- .saltMenuItem:active {
2137
- z-index: var(--salt-zIndex-default);
2138
- background: var(--salt-selectable-background-selected);
2139
- box-shadow:
2140
- calc(var(--salt-size-border) * -2) 0 0 0 var(--salt-selectable-background-hover),
2141
- calc(var(--salt-size-border) * -1) 0 0 var(--salt-size-border) var(--salt-selectable-borderColor-selected),
2142
- 0 calc(var(--salt-size-border) * -1) 0 var(--salt-selectable-borderColor-selected);
2143
- }
2144
- .saltMenuItem[aria-disabled=true],
2145
- .saltMenuItem[aria-disabled=true]:active {
2146
- background: var(--salt-selectable-background-disabled);
2147
- color: var(--salt-text-primary-foreground-disabled);
2148
- cursor: var(--salt-selectable-cursor-disabled);
2149
- box-shadow: none;
2150
- }
2151
- .saltMenuItem-blurActive {
2152
- z-index: var(--salt-zIndex-default);
2153
- background: var(--salt-selectable-background-selected);
2154
- box-shadow:
2155
- calc(var(--salt-size-border) * -2) 0 0 0 var(--salt-selectable-background-hover),
2156
- calc(var(--salt-size-border) * -1) 0 0 var(--salt-size-border) var(--salt-selectable-borderColor-selected),
2157
- 0 calc(var(--salt-size-border) * -1) 0 var(--salt-selectable-borderColor-selected);
2158
- }
2159
- .saltMenuItem-expandIcon.saltIcon {
2160
- margin-left: auto;
2161
- }
2162
-
2163
- /* src/menu/MenuPanel.css */
2164
- .saltMenuPanel {
2165
- background: var(--salt-container-primary-background);
2166
- border: var(--salt-size-border) var(--salt-selectable-borderStyle-selected) var(--salt-selectable-borderColor-selected);
2167
- overflow: hidden;
2168
- overflow-y: auto;
2169
- min-width: 10em;
2170
- position: relative;
2171
- z-index: var(--salt-zIndex-popout);
2172
- box-shadow: var(--salt-overlayable-shadow-popout);
2173
- box-sizing: border-box;
2174
- }
2175
- .saltMenuPanel-container {
2176
- display: flex;
2177
- flex-direction: column;
2178
- gap: var(--salt-size-border);
2179
- max-height: inherit;
2180
- min-height: inherit;
2181
- }
2182
- .saltMenuPanel:focus-visible {
2183
- outline: none;
2184
- }
2185
-
2186
2087
  /* src/menu-button/MenuButton.css */
2187
2088
 
2188
2089
  /* src/menu-button/MenuButtonTrigger.css */
@@ -4196,4 +4097,4 @@
4196
4097
  margin: calc(var(--salt-size-unit) / 2) 0;
4197
4098
  }
4198
4099
 
4199
- /* src/2fe49ec6-e2f9-4c04-81c8-2df59285f1f2.css */
4100
+ /* src/3af41153-25f5-4e0a-88cc-0e3ab2f7d3d4.css */
package/dist-cjs/index.js CHANGED
@@ -87,11 +87,6 @@ var ListItemNext = require('./list-next/ListItemNext.js');
87
87
  var Logo = require('./logo/Logo.js');
88
88
  var LogoImage = require('./logo/LogoImage.js');
89
89
  var LogoSeparator = require('./logo/LogoSeparator.js');
90
- var Menu = require('./menu/Menu.js');
91
- var MenuItem = require('./menu/MenuItem.js');
92
- var MenuPanel = require('./menu/MenuPanel.js');
93
- var MenuTrigger = require('./menu/MenuTrigger.js');
94
- var MenuGroup = require('./menu/MenuGroup.js');
95
90
  var MenuButton = require('./menu-button/MenuButton.js');
96
91
  var Metric = require('./metric/Metric.js');
97
92
  var MetricHeader = require('./metric/MetricHeader.js');
@@ -230,11 +225,6 @@ exports.ListItemNext = ListItemNext.ListItemNext;
230
225
  exports.Logo = Logo.Logo;
231
226
  exports.LogoImage = LogoImage.LogoImage;
232
227
  exports.LogoSeparator = LogoSeparator.LogoSeparator;
233
- exports.Menu = Menu.Menu;
234
- exports.MenuItem = MenuItem.MenuItem;
235
- exports.MenuPanel = MenuPanel.MenuPanel;
236
- exports.MenuTrigger = MenuTrigger.MenuTrigger;
237
- exports.MenuGroup = MenuGroup.MenuGroup;
238
228
  exports.MenuButton = MenuButton.MenuButton;
239
229
  exports.Metric = Metric.Metric;
240
230
  exports.MetricHeader = MetricHeader.MetricHeader;
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/dist-es/index.js CHANGED
@@ -83,11 +83,6 @@ export { ListItemNext } from './list-next/ListItemNext.js';
83
83
  export { Logo } from './logo/Logo.js';
84
84
  export { LogoImage } from './logo/LogoImage.js';
85
85
  export { LogoSeparator } from './logo/LogoSeparator.js';
86
- export { Menu } from './menu/Menu.js';
87
- export { MenuItem } from './menu/MenuItem.js';
88
- export { MenuPanel } from './menu/MenuPanel.js';
89
- export { MenuTrigger } from './menu/MenuTrigger.js';
90
- export { MenuGroup } from './menu/MenuGroup.js';
91
86
  export { MenuButton } from './menu-button/MenuButton.js';
92
87
  export { Metric } from './metric/Metric.js';
93
88
  export { MetricHeader } from './metric/MetricHeader.js';
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -26,7 +26,6 @@ export * from "./layer-layout";
26
26
  export * from "./list";
27
27
  export * from "./list-next";
28
28
  export * from "./logo";
29
- export * from "./menu";
30
29
  export * from "./menu-button";
31
30
  export * from "./metric";
32
31
  export * from "./portal";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salt-ds/lab",
3
- "version": "1.0.0-alpha.41",
3
+ "version": "1.0.0-alpha.43",
4
4
  "license": "Apache-2.0",
5
5
  "repository": {
6
6
  "type": "git",
@@ -26,10 +26,10 @@
26
26
  "react-window": "^1.8.6",
27
27
  "rifm": "^0.12.0",
28
28
  "tinycolor2": "^1.4.2",
29
- "@salt-ds/core": "^1.25.0",
29
+ "@salt-ds/core": "^1.27.0",
30
30
  "@salt-ds/window": "^0.1.1",
31
31
  "@salt-ds/styles": "^0.2.1",
32
- "@salt-ds/icons": "^1.11.0"
32
+ "@salt-ds/icons": "^1.11.2"
33
33
  },
34
34
  "peerDependencies": {
35
35
  "@types/react": ">=16.14.0",
@@ -1,24 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var jsxRuntime = require('react/jsx-runtime');
6
- var MenuBase = require('./MenuBase.js');
7
- var react = require('@floating-ui/react');
8
-
9
- function Menu(props) {
10
- const parentId = react.useFloatingParentNodeId();
11
- if (parentId === null) {
12
- return /* @__PURE__ */ jsxRuntime.jsx(react.FloatingTree, {
13
- children: /* @__PURE__ */ jsxRuntime.jsx(MenuBase.MenuBase, {
14
- ...props
15
- })
16
- });
17
- }
18
- return /* @__PURE__ */ jsxRuntime.jsx(MenuBase.MenuBase, {
19
- ...props
20
- });
21
- }
22
-
23
- exports.Menu = Menu;
24
- //# sourceMappingURL=Menu.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Menu.js","sources":["../src/menu/Menu.tsx"],"sourcesContent":["import { MenuBase, MenuBaseProps } from \"./MenuBase\";\nimport { FloatingTree, useFloatingParentNodeId } from \"@floating-ui/react\";\n\nexport interface MenuProps extends MenuBaseProps {}\n\nexport function Menu(props: MenuProps) {\n const parentId = useFloatingParentNodeId();\n\n if (parentId === null) {\n return (\n <FloatingTree>\n <MenuBase {...props} />\n </FloatingTree>\n );\n }\n\n return <MenuBase {...props} />;\n}\n"],"names":["useFloatingParentNodeId","jsx","FloatingTree","MenuBase"],"mappings":";;;;;;;;AAKO,SAAS,KAAK,KAAkB,EAAA;AACrC,EAAA,MAAM,WAAWA,6BAAwB,EAAA,CAAA;AAEzC,EAAA,IAAI,aAAa,IAAM,EAAA;AACrB,IAAA,uBACGC,cAAA,CAAAC,kBAAA,EAAA;AAAA,MACC,QAAC,kBAAAD,cAAA,CAAAE,iBAAA,EAAA;AAAA,QAAU,GAAG,KAAA;AAAA,OAAO,CAAA;AAAA,KACvB,CAAA,CAAA;AAAA,GAEJ;AAEA,EAAA,uBAAQF,cAAA,CAAAE,iBAAA,EAAA;AAAA,IAAU,GAAG,KAAA;AAAA,GAAO,CAAA,CAAA;AAC9B;;;;"}
@@ -1,116 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var jsxRuntime = require('react/jsx-runtime');
6
- var React = require('react');
7
- var MenuContext = require('./MenuContext.js');
8
- var core = require('@salt-ds/core');
9
- var react = require('@floating-ui/react');
10
-
11
- function MenuBase(props) {
12
- const { children, defaultOpen, open, onOpenChange, placement } = props;
13
- const parentId = react.useFloatingParentNodeId();
14
- const nodeId = react.useFloatingNodeId();
15
- const tree = react.useFloatingTree();
16
- const elementsRef = React.useRef([]);
17
- const [openState, setOpenState] = core.useControlled({
18
- controlled: open,
19
- default: Boolean(defaultOpen),
20
- name: "ListControl",
21
- state: "open"
22
- });
23
- const setOpen = React.useCallback(
24
- (newOpen) => {
25
- setOpenState(newOpen);
26
- onOpenChange == null ? void 0 : onOpenChange(newOpen);
27
- },
28
- [setOpenState, onOpenChange]
29
- );
30
- const [activeIndex, setActiveIndex] = React.useState(null);
31
- const [focusInside, setFocusInside] = React.useState(false);
32
- const isNested = parentId != null;
33
- const { x, y, strategy, elements, refs, context } = core.useFloatingUI({
34
- nodeId,
35
- open: openState,
36
- onOpenChange: setOpen,
37
- placement: placement != null ? placement : isNested ? "right-start" : "bottom-start",
38
- middleware: [
39
- react.offset(isNested ? { crossAxis: -1 } : {}),
40
- react.flip({}),
41
- react.shift({ limiter: react.limitShift() }),
42
- react.size({
43
- apply({ elements: elements2, availableHeight }) {
44
- Object.assign(elements2.floating.style, {
45
- maxHeight: `${availableHeight}px`
46
- });
47
- }
48
- })
49
- ]
50
- });
51
- const { getReferenceProps, getFloatingProps, getItemProps } = react.useInteractions(
52
- [
53
- react.useHover(context, {
54
- enabled: isNested,
55
- handleClose: react.safePolygon({ blockPointerEvents: true })
56
- }),
57
- react.useClick(context, {
58
- event: "mousedown",
59
- toggle: !isNested,
60
- ignoreMouse: isNested
61
- }),
62
- react.useRole(context, { role: "menu" }),
63
- react.useDismiss(context, { bubbles: true }),
64
- react.useListNavigation(context, {
65
- listRef: elementsRef,
66
- activeIndex,
67
- nested: isNested,
68
- onNavigate: setActiveIndex
69
- })
70
- ]
71
- );
72
- const getPanelPosition = () => {
73
- var _a, _b;
74
- return {
75
- top: y != null ? y : 0,
76
- left: x != null ? x : 0,
77
- position: strategy,
78
- width: (_a = elements.floating) == null ? void 0 : _a.offsetWidth,
79
- height: (_b = elements.floating) == null ? void 0 : _b.offsetHeight
80
- };
81
- };
82
- React.useEffect(() => {
83
- if (!tree)
84
- return;
85
- function handleItemClick() {
86
- setOpen(false);
87
- }
88
- tree.events.on("click", handleItemClick);
89
- return () => {
90
- tree.events.off("click", handleItemClick);
91
- };
92
- }, [tree, setOpen]);
93
- return /* @__PURE__ */ jsxRuntime.jsx(react.FloatingNode, {
94
- id: nodeId,
95
- children: /* @__PURE__ */ jsxRuntime.jsx(MenuContext.MenuContext.Provider, {
96
- value: {
97
- openState,
98
- getReferenceProps,
99
- getFloatingProps,
100
- refs,
101
- getPanelPosition,
102
- getItemProps,
103
- activeIndex,
104
- context,
105
- elementsRef,
106
- focusInside,
107
- setFocusInside,
108
- isNested
109
- },
110
- children
111
- })
112
- });
113
- }
114
-
115
- exports.MenuBase = MenuBase;
116
- //# sourceMappingURL=MenuBase.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"MenuBase.js","sources":["../src/menu/MenuBase.tsx"],"sourcesContent":["import { ReactNode, useCallback, useEffect, useRef, useState } from \"react\";\nimport { MenuContext } from \"./MenuContext\";\nimport {\n useControlled,\n useFloatingUI,\n UseFloatingUIProps,\n} from \"@salt-ds/core\";\nimport {\n flip,\n offset,\n shift,\n limitShift,\n useInteractions,\n useRole,\n useClick,\n useDismiss,\n useHover,\n safePolygon,\n FloatingNode,\n useFloatingParentNodeId,\n useFloatingNodeId,\n useListNavigation,\n useFloatingTree,\n size,\n} from \"@floating-ui/react\";\n\nexport interface MenuBaseProps {\n children?: ReactNode;\n /**\n * Display or hide the component.\n */\n open?: boolean;\n /**\n * If true, the menu will be open by default.\n */\n defaultOpen?: boolean;\n /**\n * Callback function triggered when open state changes.\n */\n onOpenChange?: (newOpen: boolean) => void;\n /**\n * Set the placement of the Menu component relative to the trigger element. Defaults to `bottom-start` if it's the root menu or `right-start` if it's nested.\n */\n placement?: UseFloatingUIProps[\"placement\"];\n}\n\nexport function MenuBase(props: MenuBaseProps) {\n const { children, defaultOpen, open, onOpenChange, placement } = props;\n const parentId = useFloatingParentNodeId();\n const nodeId = useFloatingNodeId();\n const tree = useFloatingTree();\n const elementsRef = useRef<(HTMLDivElement | null)[]>([]);\n\n const [openState, setOpenState] = useControlled({\n controlled: open,\n default: Boolean(defaultOpen),\n name: \"ListControl\",\n state: \"open\",\n });\n\n const setOpen = useCallback(\n (newOpen: boolean) => {\n setOpenState(newOpen);\n onOpenChange?.(newOpen);\n },\n [setOpenState, onOpenChange]\n );\n\n const [activeIndex, setActiveIndex] = useState<number | null>(null);\n const [focusInside, setFocusInside] = useState(false);\n\n const isNested = parentId != null;\n\n const { x, y, strategy, elements, refs, context } = useFloatingUI({\n nodeId,\n open: openState,\n onOpenChange: setOpen,\n placement: placement ?? (isNested ? \"right-start\" : \"bottom-start\"),\n middleware: [\n // Align the nested menu by shifting it by var(--salt-size-border)\n offset(isNested ? { crossAxis: -1 } : {}),\n flip({}),\n shift({ limiter: limitShift() }),\n size({\n apply({ elements, availableHeight }) {\n Object.assign(elements.floating.style, {\n maxHeight: `${availableHeight}px`,\n });\n },\n }),\n ],\n });\n\n const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions(\n [\n useHover(context, {\n enabled: isNested,\n handleClose: safePolygon({ blockPointerEvents: true }),\n }),\n useClick(context, {\n event: \"mousedown\",\n toggle: !isNested,\n ignoreMouse: isNested,\n }),\n useRole(context, { role: \"menu\" }),\n useDismiss(context, { bubbles: true }),\n useListNavigation(context, {\n listRef: elementsRef,\n activeIndex,\n nested: isNested,\n onNavigate: setActiveIndex,\n }),\n ]\n );\n\n const getPanelPosition = () => ({\n top: y ?? 0,\n left: x ?? 0,\n position: strategy,\n width: elements.floating?.offsetWidth,\n height: elements.floating?.offsetHeight,\n });\n\n useEffect(() => {\n if (!tree) return;\n\n function handleItemClick() {\n setOpen(false);\n }\n\n tree.events.on(\"click\", handleItemClick);\n\n return () => {\n tree.events.off(\"click\", handleItemClick);\n };\n }, [tree, setOpen]);\n\n return (\n <FloatingNode id={nodeId}>\n <MenuContext.Provider\n value={{\n openState,\n getReferenceProps,\n getFloatingProps,\n refs,\n getPanelPosition,\n getItemProps,\n activeIndex,\n context,\n elementsRef,\n focusInside,\n setFocusInside,\n isNested,\n }}\n >\n {children}\n </MenuContext.Provider>\n </FloatingNode>\n );\n}\n"],"names":["useFloatingParentNodeId","useFloatingNodeId","useFloatingTree","useRef","useControlled","useCallback","useState","useFloatingUI","offset","flip","shift","limitShift","size","elements","useInteractions","useHover","safePolygon","useClick","useRole","useDismiss","useListNavigation","useEffect","jsx","FloatingNode","MenuContext"],"mappings":"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"}
@@ -1,26 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var core = require('@salt-ds/core');
6
- var React = require('react');
7
-
8
- const MenuContext = core.createContext("MenuContext", {
9
- openState: false,
10
- getReferenceProps: () => ({}),
11
- getFloatingProps: () => ({}),
12
- getPanelPosition: () => ({}),
13
- getItemProps: () => ({}),
14
- activeIndex: null,
15
- elementsRef: { current: [] },
16
- focusInside: false,
17
- setFocusInside: () => void 0,
18
- isNested: false
19
- });
20
- function useMenuContext() {
21
- return React.useContext(MenuContext);
22
- }
23
-
24
- exports.MenuContext = MenuContext;
25
- exports.useMenuContext = useMenuContext;
26
- //# sourceMappingURL=MenuContext.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"MenuContext.js","sources":["../src/menu/MenuContext.ts"],"sourcesContent":["import { createContext, UseFloatingUIReturn } from \"@salt-ds/core\";\nimport { Dispatch, MutableRefObject, SetStateAction, useContext } from \"react\";\nimport { useInteractions } from \"@floating-ui/react\";\n\ntype UseInteractionsReturn = ReturnType<typeof useInteractions>;\n\nexport interface MenuContextValue\n extends Pick<\n UseInteractionsReturn,\n \"getItemProps\" | \"getReferenceProps\" | \"getFloatingProps\"\n >,\n Partial<Pick<UseFloatingUIReturn, \"context\" | \"refs\">> {\n openState: boolean;\n activeIndex: number | null;\n getPanelPosition: () => Record<string, unknown>;\n elementsRef: MutableRefObject<(HTMLDivElement | null)[]>;\n focusInside: boolean;\n setFocusInside: Dispatch<SetStateAction<boolean>>;\n isNested: boolean;\n}\n\nexport const MenuContext = createContext<MenuContextValue>(\"MenuContext\", {\n openState: false,\n getReferenceProps: () => ({}),\n getFloatingProps: () => ({}),\n getPanelPosition: () => ({}),\n getItemProps: () => ({}),\n activeIndex: null,\n elementsRef: { current: [] },\n focusInside: false,\n setFocusInside: () => undefined,\n isNested: false,\n});\n\nexport function useMenuContext() {\n return useContext(MenuContext);\n}\n"],"names":["createContext","useContext"],"mappings":";;;;;;;AAqBa,MAAA,WAAA,GAAcA,mBAAgC,aAAe,EAAA;AAAA,EACxE,SAAW,EAAA,KAAA;AAAA,EACX,iBAAA,EAAmB,OAAO,EAAC,CAAA;AAAA,EAC3B,gBAAA,EAAkB,OAAO,EAAC,CAAA;AAAA,EAC1B,gBAAA,EAAkB,OAAO,EAAC,CAAA;AAAA,EAC1B,YAAA,EAAc,OAAO,EAAC,CAAA;AAAA,EACtB,WAAa,EAAA,IAAA;AAAA,EACb,WAAa,EAAA,EAAE,OAAS,EAAA,EAAG,EAAA;AAAA,EAC3B,WAAa,EAAA,KAAA;AAAA,EACb,gBAAgB,MAAM,KAAA,CAAA;AAAA,EACtB,QAAU,EAAA,KAAA;AACZ,CAAC,EAAA;AAEM,SAAS,cAAiB,GAAA;AAC/B,EAAA,OAAOC,iBAAW,WAAW,CAAA,CAAA;AAC/B;;;;;"}
@@ -1,6 +0,0 @@
1
- 'use strict';
2
-
3
- var css_248z = ".saltMenuGroup-label {\n background: var(--salt-container-primary-background);\n color: var(--salt-text-secondary-foreground);\n font-size: var(--salt-text-label-fontSize);\n font-weight: var(--salt-text-label-fontWeight-strong);\n height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n padding-left: var(--salt-spacing-100);\n padding-right: var(--salt-spacing-100);\n display: flex;\n align-items: center;\n position: sticky;\n top: 0;\n z-index: var(--salt-zIndex-default);\n}\n\n.saltMenuGroup {\n border-top: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-separable-tertiary-borderColor);\n}\n\n.saltMenuGroup:first-of-type {\n border-top: 0;\n}\n";
4
-
5
- module.exports = css_248z;
6
- //# sourceMappingURL=MenuGroup.css.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"MenuGroup.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
@@ -1,44 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var jsxRuntime = require('react/jsx-runtime');
6
- var React = require('react');
7
- var clsx = require('clsx');
8
- var window = require('@salt-ds/window');
9
- var styles = require('@salt-ds/styles');
10
- var core = require('@salt-ds/core');
11
- var MenuGroup$1 = require('./MenuGroup.css.js');
12
-
13
- const withBaseName = core.makePrefixer("saltMenuGroup");
14
- const MenuGroup = React.forwardRef(
15
- function MenuGroup2(props, ref) {
16
- const { className, children, label, ...rest } = props;
17
- const targetWindow = window.useWindow();
18
- styles.useComponentCssInjection({
19
- testId: "salt-menu-group",
20
- css: MenuGroup$1,
21
- window: targetWindow
22
- });
23
- const labelId = core.useId();
24
- return /* @__PURE__ */ jsxRuntime.jsxs("div", {
25
- "aria-labelledby": label ? labelId : void 0,
26
- className: clsx.clsx(withBaseName(), className),
27
- role: "group",
28
- ref,
29
- ...rest,
30
- children: [
31
- label && /* @__PURE__ */ jsxRuntime.jsx("div", {
32
- "aria-hidden": true,
33
- className: withBaseName("label"),
34
- id: labelId,
35
- children: label
36
- }),
37
- children
38
- ]
39
- });
40
- }
41
- );
42
-
43
- exports.MenuGroup = MenuGroup;
44
- //# sourceMappingURL=MenuGroup.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"MenuGroup.js","sources":["../src/menu/MenuGroup.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, forwardRef, ReactNode } from \"react\";\nimport { clsx } from \"clsx\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { makePrefixer, useId } from \"@salt-ds/core\";\nimport menuGroupCss from \"./MenuGroup.css\";\n\nexport interface MenuGroupProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * The label of the menu group.\n */\n label?: string;\n /**\n * Menus to be rendered inside the menu group.\n */\n children?: ReactNode;\n}\n\nconst withBaseName = makePrefixer(\"saltMenuGroup\");\n\nexport const MenuGroup = forwardRef<HTMLDivElement, MenuGroupProps>(\n function MenuGroup(props, ref) {\n const { className, children, label, ...rest } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-menu-group\",\n css: menuGroupCss,\n window: targetWindow,\n });\n\n const labelId = useId();\n\n return (\n <div\n aria-labelledby={label ? labelId : undefined}\n className={clsx(withBaseName(), className)}\n role=\"group\"\n ref={ref}\n {...rest}\n >\n {label && (\n <div aria-hidden className={withBaseName(\"label\")} id={labelId}>\n {label}\n </div>\n )}\n {children}\n </div>\n );\n }\n);\n"],"names":["makePrefixer","forwardRef","MenuGroup","useWindow","useComponentCssInjection","menuGroupCss","useId","jsxs","clsx","jsx"],"mappings":";;;;;;;;;;;;AAkBA,MAAM,YAAA,GAAeA,kBAAa,eAAe,CAAA,CAAA;AAE1C,MAAM,SAAY,GAAAC,gBAAA;AAAA,EACvB,SAASC,UAAU,CAAA,KAAA,EAAO,GAAK,EAAA;AAC7B,IAAA,MAAM,EAAE,SAAA,EAAW,QAAU,EAAA,KAAA,EAAA,GAAU,MAAS,GAAA,KAAA,CAAA;AAEhD,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,iBAAA;AAAA,MACR,GAAK,EAAAC,WAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,UAAUC,UAAM,EAAA,CAAA;AAEtB,IAAA,uBACGC,eAAA,CAAA,KAAA,EAAA;AAAA,MACC,iBAAA,EAAiB,QAAQ,OAAU,GAAA,KAAA,CAAA;AAAA,MACnC,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,IAAK,EAAA,OAAA;AAAA,MACL,GAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,KAAA,oBACEC,cAAA,CAAA,KAAA,EAAA;AAAA,UAAI,aAAW,EAAA,IAAA;AAAA,UAAC,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,UAAG,EAAI,EAAA,OAAA;AAAA,UACpD,QAAA,EAAA,KAAA;AAAA,SACH,CAAA;AAAA,QAED,QAAA;AAAA,OAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
@@ -1,6 +0,0 @@
1
- 'use strict';
2
-
3
- var css_248z = ".saltMenuItem {\n color: var(--salt-content-primary-foreground);\n background: var(--salt-selectable-background);\n font-size: var(--salt-text-fontSize);\n font-weight: var(--salt-text-fontWeight);\n min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n padding-left: var(--salt-spacing-100);\n padding-right: var(--salt-spacing-100);\n display: flex;\n gap: var(--salt-spacing-100);\n position: relative;\n align-items: center;\n cursor: var(--salt-selectable-cursor-hover);\n box-sizing: border-box;\n}\n\n.saltMenuItem:focus-visible {\n outline: var(--salt-focused-outline);\n outline-offset: calc(var(--salt-size-border) * -2);\n}\n\n.saltMenuItem:hover {\n outline: none;\n}\n\n.saltMenuItem:hover,\n.saltMenuItem:focus-visible {\n background: var(--salt-selectable-background-hover);\n}\n\n.saltMenuItem:active {\n z-index: var(--salt-zIndex-default);\n background: var(--salt-selectable-background-selected);\n box-shadow: calc(var(--salt-size-border) * -2) 0 0 0 var(--salt-selectable-background-hover),\n calc(var(--salt-size-border) * -1) 0 0 var(--salt-size-border) var(--salt-selectable-borderColor-selected), 0 calc(var(--salt-size-border) * -1) 0 var(--salt-selectable-borderColor-selected);\n}\n\n.saltMenuItem[aria-disabled=\"true\"],\n.saltMenuItem[aria-disabled=\"true\"]:active {\n background: var(--salt-selectable-background-disabled);\n color: var(--salt-text-primary-foreground-disabled);\n cursor: var(--salt-selectable-cursor-disabled);\n box-shadow: none;\n}\n\n.saltMenuItem-blurActive {\n z-index: var(--salt-zIndex-default);\n background: var(--salt-selectable-background-selected);\n box-shadow: calc(var(--salt-size-border) * -2) 0 0 0 var(--salt-selectable-background-hover),\n calc(var(--salt-size-border) * -1) 0 0 var(--salt-size-border) var(--salt-selectable-borderColor-selected), 0 calc(var(--salt-size-border) * -1) 0 var(--salt-selectable-borderColor-selected);\n}\n\n.saltMenuItem-expandIcon.saltIcon {\n margin-left: auto;\n}\n";
4
-
5
- module.exports = css_248z;
6
- //# sourceMappingURL=MenuItem.css.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"MenuItem.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
@@ -1,92 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var jsxRuntime = require('react/jsx-runtime');
6
- var React = require('react');
7
- var clsx = require('clsx');
8
- var core = require('@salt-ds/core');
9
- var window$1 = require('@salt-ds/window');
10
- var styles = require('@salt-ds/styles');
11
- var icons = require('@salt-ds/icons');
12
- var react = require('@floating-ui/react');
13
- var MenuItem$1 = require('./MenuItem.css.js');
14
- var MenuTriggerContext = require('./MenuTriggerContext.js');
15
- var MenuPanelContext = require('./MenuPanelContext.js');
16
-
17
- const withBaseName = core.makePrefixer("saltMenuItem");
18
- const MenuItem = React.forwardRef(
19
- function MenuItem2(props, ref) {
20
- const {
21
- children,
22
- className,
23
- disabled,
24
- onClick,
25
- onFocus,
26
- onKeyDown,
27
- ...rest
28
- } = props;
29
- const { triggersSubmenu, blurActive } = MenuTriggerContext.useIsMenuTrigger();
30
- const { activeIndex, getItemProps, setFocusInside } = MenuPanelContext.useMenuPanelContext();
31
- const item = react.useListItem();
32
- const tree = react.useFloatingTree();
33
- const active = item.index === activeIndex;
34
- const targetWindow = window$1.useWindow();
35
- styles.useComponentCssInjection({
36
- testId: "salt-menu-item",
37
- css: MenuItem$1,
38
- window: targetWindow
39
- });
40
- const handleRef = core.useForkRef(ref, item.ref);
41
- return /* @__PURE__ */ jsxRuntime.jsxs("div", {
42
- className: clsx.clsx(
43
- withBaseName(),
44
- {
45
- [withBaseName("blurActive")]: blurActive
46
- },
47
- className
48
- ),
49
- role: "menuitem",
50
- "aria-disabled": disabled || void 0,
51
- ...getItemProps({
52
- tabIndex: disabled ? void 0 : active ? 0 : -1,
53
- onKeyDown(event) {
54
- const element = event.currentTarget;
55
- onKeyDown == null ? void 0 : onKeyDown(event);
56
- if ((event.key == " " || event.key == "Enter") && !triggersSubmenu && !disabled) {
57
- event.preventDefault();
58
- const { view, ...eventInit } = event;
59
- queueMicrotask(() => {
60
- element.dispatchEvent(
61
- new window.MouseEvent("click", eventInit)
62
- );
63
- });
64
- tree == null ? void 0 : tree.events.emit("click");
65
- }
66
- },
67
- onClick(event) {
68
- onClick == null ? void 0 : onClick(event);
69
- if (!triggersSubmenu && !disabled) {
70
- tree == null ? void 0 : tree.events.emit("click");
71
- }
72
- },
73
- onFocus(event) {
74
- onFocus == null ? void 0 : onFocus(event);
75
- setFocusInside(true);
76
- },
77
- ...rest
78
- }),
79
- ref: handleRef,
80
- children: [
81
- children,
82
- triggersSubmenu && /* @__PURE__ */ jsxRuntime.jsx(icons.ChevronRightIcon, {
83
- className: withBaseName("expandIcon"),
84
- "aria-hidden": true
85
- })
86
- ]
87
- });
88
- }
89
- );
90
-
91
- exports.MenuItem = MenuItem;
92
- //# sourceMappingURL=MenuItem.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"MenuItem.js","sources":["../src/menu/MenuItem.tsx"],"sourcesContent":["import {\n ComponentPropsWithoutRef,\n FocusEvent,\n forwardRef,\n KeyboardEvent,\n MouseEvent,\n} from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer, useForkRef } from \"@salt-ds/core\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { ChevronRightIcon } from \"@salt-ds/icons\";\nimport { useFloatingTree, useListItem } from \"@floating-ui/react\";\n\nimport menuItemCss from \"./MenuItem.css\";\nimport { useIsMenuTrigger } from \"./MenuTriggerContext\";\nimport { useMenuPanelContext } from \"./MenuPanelContext\";\n\nexport interface MenuItemProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * If `true`, the item will be disabled.\n */\n disabled?: boolean;\n}\n\nconst withBaseName = makePrefixer(\"saltMenuItem\");\n\nexport const MenuItem = forwardRef<HTMLDivElement, MenuItemProps>(\n function MenuItem(props, ref) {\n const {\n children,\n className,\n disabled,\n onClick,\n onFocus,\n onKeyDown,\n ...rest\n } = props;\n\n const { triggersSubmenu, blurActive } = useIsMenuTrigger();\n const { activeIndex, getItemProps, setFocusInside } = useMenuPanelContext();\n const item = useListItem();\n const tree = useFloatingTree();\n const active = item.index === activeIndex;\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-menu-item\",\n css: menuItemCss,\n window: targetWindow,\n });\n const handleRef = useForkRef<HTMLDivElement>(ref, item.ref);\n return (\n <div\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"blurActive\")]: blurActive,\n },\n className\n )}\n role=\"menuitem\"\n aria-disabled={disabled || undefined}\n {...getItemProps({\n tabIndex: disabled ? undefined : active ? 0 : -1,\n onKeyDown(event: KeyboardEvent<HTMLDivElement>) {\n const element = event.currentTarget;\n onKeyDown?.(event);\n if (\n (event.key == \" \" || event.key == \"Enter\") &&\n !triggersSubmenu &&\n !disabled\n ) {\n event.preventDefault();\n // eslint-disable-next-line @typescript-eslint/no-unused-vars -- view is unused.\n const { view, ...eventInit } = event;\n queueMicrotask(() => {\n element.dispatchEvent(\n new window.MouseEvent(\"click\", eventInit)\n );\n });\n tree?.events.emit(\"click\");\n }\n },\n onClick(event: MouseEvent<HTMLDivElement>) {\n onClick?.(event);\n if (!triggersSubmenu && !disabled) {\n tree?.events.emit(\"click\");\n }\n },\n onFocus(event: FocusEvent<HTMLDivElement>) {\n onFocus?.(event);\n setFocusInside(true);\n },\n ...rest,\n })}\n ref={handleRef}\n >\n {children}\n {triggersSubmenu && (\n <ChevronRightIcon\n className={withBaseName(\"expandIcon\")}\n aria-hidden\n />\n )}\n </div>\n );\n }\n);\n"],"names":["makePrefixer","forwardRef","MenuItem","useIsMenuTrigger","useMenuPanelContext","useListItem","useFloatingTree","useWindow","useComponentCssInjection","menuItemCss","useForkRef","jsxs","clsx","jsx","ChevronRightIcon"],"mappings":"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"}
@@ -1,6 +0,0 @@
1
- 'use strict';
2
-
3
- var css_248z = ".saltMenuPanel {\n background: var(--salt-container-primary-background);\n border: var(--salt-size-border) var(--salt-selectable-borderStyle-selected) var(--salt-selectable-borderColor-selected);\n overflow: hidden;\n overflow-y: auto;\n min-width: 10em;\n position: relative;\n z-index: var(--salt-zIndex-popout);\n box-shadow: var(--salt-overlayable-shadow-popout);\n box-sizing: border-box;\n}\n\n.saltMenuPanel-container {\n display: flex;\n flex-direction: column;\n gap: var(--salt-size-border);\n max-height: inherit;\n min-height: inherit;\n}\n\n.saltMenuPanel:focus-visible {\n outline: none;\n}\n";
4
-
5
- module.exports = css_248z;
6
- //# sourceMappingURL=MenuPanel.css.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"MenuPanel.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
@@ -1,61 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var jsxRuntime = require('react/jsx-runtime');
6
- var React = require('react');
7
- var core = require('@salt-ds/core');
8
- var clsx = require('clsx');
9
- var MenuContext = require('./MenuContext.js');
10
- var MenuPanelBase = require('./MenuPanelBase.js');
11
- var react = require('@floating-ui/react');
12
- var MenuPanelContext = require('./MenuPanelContext.js');
13
-
14
- const withBaseName = core.makePrefixer("saltMenuPanel");
15
- const MenuPanel = React.forwardRef(
16
- function MenuPanel2(props, ref) {
17
- const { children, className, ...rest } = props;
18
- const { Component: FloatingComponent } = core.useFloatingComponent();
19
- const {
20
- getItemProps,
21
- openState,
22
- getFloatingProps,
23
- refs,
24
- getPanelPosition,
25
- context,
26
- elementsRef,
27
- activeIndex,
28
- setFocusInside,
29
- isNested
30
- } = MenuContext.useMenuContext();
31
- const handleRef = core.useForkRef(ref, refs == null ? void 0 : refs.setFloating);
32
- return /* @__PURE__ */ jsxRuntime.jsx(MenuPanelContext.MenuPanelContext.Provider, {
33
- value: { activeIndex, getItemProps, setFocusInside },
34
- children: /* @__PURE__ */ jsxRuntime.jsx(react.FloatingList, {
35
- elementsRef,
36
- children: /* @__PURE__ */ jsxRuntime.jsx(FloatingComponent, {
37
- open: openState,
38
- role: "menu",
39
- ...getFloatingProps(),
40
- ...getPanelPosition(),
41
- className: clsx.clsx(withBaseName(), className),
42
- focusManagerProps: context ? {
43
- context,
44
- initialFocus: isNested ? -1 : 0,
45
- returnFocus: !isNested,
46
- modal: false
47
- } : void 0,
48
- tabIndex: -1,
49
- ref: handleRef,
50
- ...rest,
51
- children: /* @__PURE__ */ jsxRuntime.jsx(MenuPanelBase.MenuPanelBase, {
52
- children
53
- })
54
- })
55
- })
56
- });
57
- }
58
- );
59
-
60
- exports.MenuPanel = MenuPanel;
61
- //# sourceMappingURL=MenuPanel.js.map