@sanity/ui 4.0.0-next.3 → 4.0.0-next.5

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 (97) hide show
  1. package/README.md +4 -0
  2. package/dist/_system-CTe2lb5l.d.ts +40 -0
  3. package/dist/_system-CTe2lb5l.d.ts.map +1 -0
  4. package/dist/arrow-BG0EMNiC.js +159 -0
  5. package/dist/arrow-BG0EMNiC.js.map +1 -0
  6. package/dist/autocomplete.d.ts +140 -0
  7. package/dist/autocomplete.d.ts.map +1 -0
  8. package/dist/autocomplete.js +468 -0
  9. package/dist/autocomplete.js.map +1 -0
  10. package/dist/breadcrumbs.d.ts +18 -0
  11. package/dist/breadcrumbs.d.ts.map +1 -0
  12. package/dist/breadcrumbs.js +112 -0
  13. package/dist/breadcrumbs.js.map +1 -0
  14. package/dist/button-BzoZs3Sl.d.ts +76 -0
  15. package/dist/button-BzoZs3Sl.d.ts.map +1 -0
  16. package/dist/button-DZkAQOL2.js +174 -0
  17. package/dist/button-DZkAQOL2.js.map +1 -0
  18. package/dist/card-C0a0wQTc.d.ts +7 -0
  19. package/dist/card-C0a0wQTc.d.ts.map +1 -0
  20. package/dist/code.d.ts +20 -0
  21. package/dist/code.d.ts.map +1 -0
  22. package/dist/code.js +85 -0
  23. package/dist/code.js.map +1 -0
  24. package/dist/codeFontStyle-DYUujk7K.js +11 -0
  25. package/dist/codeFontStyle-DYUujk7K.js.map +1 -0
  26. package/dist/component-DVlwaWB-.d.ts +25 -0
  27. package/dist/component-DVlwaWB-.d.ts.map +1 -0
  28. package/dist/element-BYgCE_iK.js +51 -0
  29. package/dist/element-BYgCE_iK.js.map +1 -0
  30. package/dist/{getScopedTheme-CqaSCfTH.js → factory-CvRcEQ36.js} +6 -753
  31. package/dist/factory-CvRcEQ36.js.map +1 -0
  32. package/dist/flex-BYRpBTOc.js +69 -0
  33. package/dist/flex-BYRpBTOc.js.map +1 -0
  34. package/dist/font-EtfxKPUz.d.ts +49 -0
  35. package/dist/font-EtfxKPUz.d.ts.map +1 -0
  36. package/dist/getElementRef-5HZQ-Owu.js +91 -0
  37. package/dist/getElementRef-5HZQ-Owu.js.map +1 -0
  38. package/dist/getScopedTheme-C-sZsyAz.js +267 -0
  39. package/dist/getScopedTheme-C-sZsyAz.js.map +1 -0
  40. package/dist/getTheme_v2-y09KqtEb.js +487 -0
  41. package/dist/getTheme_v2-y09KqtEb.js.map +1 -0
  42. package/dist/grid-D88j-N7f.js +108 -0
  43. package/dist/grid-D88j-N7f.js.map +1 -0
  44. package/dist/helpers-bwfx1e-Y.js +67 -0
  45. package/dist/helpers-bwfx1e-Y.js.map +1 -0
  46. package/dist/hotkeys-B08HIKNu.js +145 -0
  47. package/dist/hotkeys-B08HIKNu.js.map +1 -0
  48. package/dist/index.d.ts +139 -926
  49. package/dist/index.d.ts.map +1 -1
  50. package/dist/index.js +421 -4686
  51. package/dist/index.js.map +1 -1
  52. package/dist/layer-BQfdK7rt.d.ts +242 -0
  53. package/dist/layer-BQfdK7rt.d.ts.map +1 -0
  54. package/dist/layer-BdkSGATt.js +56 -0
  55. package/dist/layer-BdkSGATt.js.map +1 -0
  56. package/dist/menu.d.ts +146 -0
  57. package/dist/menu.d.ts.map +1 -0
  58. package/dist/menu.js +602 -0
  59. package/dist/menu.js.map +1 -0
  60. package/dist/popover-DmmmSNzL.d.ts +96 -0
  61. package/dist/popover-DmmmSNzL.d.ts.map +1 -0
  62. package/dist/popover-Iy6EZEmv.js +406 -0
  63. package/dist/popover-Iy6EZEmv.js.map +1 -0
  64. package/dist/popover.d.ts +2 -0
  65. package/dist/popover.js +3 -0
  66. package/dist/responsiveFont-hN1mZFjm.js +55 -0
  67. package/dist/responsiveFont-hN1mZFjm.js.map +1 -0
  68. package/dist/{rgba-LmTDhX0u.d.ts → rgba-BSYaEUW6.d.ts} +4 -87
  69. package/dist/rgba-BSYaEUW6.d.ts.map +1 -0
  70. package/dist/selectable-B0GUIL74.d.ts +7 -0
  71. package/dist/selectable-B0GUIL74.d.ts.map +1 -0
  72. package/dist/stack-C5WV-BRh.js +98 -0
  73. package/dist/stack-C5WV-BRh.js.map +1 -0
  74. package/dist/styles.css +1 -0
  75. package/dist/textInput-IbiDH7Jc.js +315 -0
  76. package/dist/textInput-IbiDH7Jc.js.map +1 -0
  77. package/dist/theme.d.ts +3 -1
  78. package/dist/theme.d.ts.map +1 -1
  79. package/dist/theme.js +3 -1
  80. package/dist/theme.js.map +1 -1
  81. package/dist/toast.d.ts +73 -0
  82. package/dist/toast.d.ts.map +1 -0
  83. package/dist/toast.js +297 -0
  84. package/dist/toast.js.map +1 -0
  85. package/dist/tooltip.d.ts +88 -0
  86. package/dist/tooltip.d.ts.map +1 -0
  87. package/dist/tooltip.js +432 -0
  88. package/dist/tooltip.js.map +1 -0
  89. package/dist/useClickOutsideEvent-lEVhDFCQ.js +36 -0
  90. package/dist/useClickOutsideEvent-lEVhDFCQ.js.map +1 -0
  91. package/dist/useElementSize-BJvbGHq8.js +51 -0
  92. package/dist/useElementSize-BJvbGHq8.js.map +1 -0
  93. package/dist/useLayer-9Pz-GG0r.js +704 -0
  94. package/dist/useLayer-9Pz-GG0r.js.map +1 -0
  95. package/package.json +15 -4
  96. package/dist/getScopedTheme-CqaSCfTH.js.map +0 -1
  97. package/dist/rgba-LmTDhX0u.d.ts.map +0 -1
@@ -0,0 +1,242 @@
1
+ /**
2
+ * @public
3
+ */
4
+ type BoxSizing = 'content' | 'border';
5
+ /**
6
+ * @public
7
+ */
8
+ type BoxDisplay = 'none' | 'block' | 'grid' | 'flex' | 'inline-block';
9
+ /**
10
+ * @public
11
+ */
12
+ type BoxHeight = 'stretch' | 'fill';
13
+ /**
14
+ * @public
15
+ */
16
+ type BoxOverflow = 'visible' | 'hidden' | 'auto';
17
+ /**
18
+ * @public
19
+ */
20
+ type FlexAlign = 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch';
21
+ /**
22
+ * @public
23
+ */
24
+ type FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
25
+ /**
26
+ * @public
27
+ */
28
+ type FlexJustify = 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
29
+ /**
30
+ * @public
31
+ */
32
+ type FlexValue = number | 'none' | 'auto' | 'initial';
33
+ /**
34
+ * @public
35
+ */
36
+ type FlexWrap = 'wrap' | 'wrap-reverse' | 'nowrap';
37
+ /**
38
+ * @public
39
+ */
40
+ type GridAutoRows = 'auto' | 'min' | 'max' | 'fr';
41
+ /**
42
+ * @public
43
+ */
44
+ type GridAutoCols = 'auto' | 'min' | 'max' | 'fr';
45
+ /**
46
+ * @public
47
+ */
48
+ type GridAutoFlow = 'row' | 'column' | 'row dense' | 'column dense';
49
+ /**
50
+ * @public
51
+ */
52
+ type GridItemColumn = 'auto' | 'full' | number;
53
+ /**
54
+ * @public
55
+ */
56
+ type GridItemColumnStart = 'auto' | number;
57
+ /**
58
+ * @public
59
+ */
60
+ type GridItemColumnEnd = 'auto' | number;
61
+ /**
62
+ * @public
63
+ */
64
+ type GridItemRow = 'auto' | 'full' | number;
65
+ /**
66
+ * @public
67
+ */
68
+ type GridItemRowStart = 'auto' | number;
69
+ /**
70
+ * @public
71
+ */
72
+ type GridItemRowEnd = 'auto' | number;
73
+ /**
74
+ * @public
75
+ */
76
+ type Radius = number | 'full';
77
+ /**
78
+ * @public
79
+ */
80
+ interface ResponsiveBorderProps {
81
+ border?: boolean | boolean[];
82
+ borderTop?: boolean | boolean[];
83
+ borderRight?: boolean | boolean[];
84
+ borderBottom?: boolean | boolean[];
85
+ borderLeft?: boolean | boolean[];
86
+ }
87
+ /**
88
+ * @public
89
+ */
90
+ interface ResponsiveBoxProps {
91
+ display?: BoxDisplay | BoxDisplay[];
92
+ height?: BoxHeight | BoxHeight[];
93
+ overflow?: BoxOverflow | BoxOverflow[];
94
+ sizing?: BoxSizing | BoxSizing[];
95
+ }
96
+ /**
97
+ * @public
98
+ */
99
+ interface ResponsiveFlexProps {
100
+ align?: FlexAlign | FlexAlign[];
101
+ direction?: FlexDirection | FlexDirection[];
102
+ justify?: FlexJustify | FlexJustify[];
103
+ wrap?: FlexWrap | FlexWrap[];
104
+ }
105
+ /**
106
+ * @public
107
+ */
108
+ interface ResponsiveFlexItemProps {
109
+ /** Sets the flex CSS attribute. The property is responsive. */
110
+ flex?: FlexValue | FlexValue[];
111
+ }
112
+ /**
113
+ * @public
114
+ */
115
+ interface ResponsiveGridProps {
116
+ autoRows?: GridAutoRows | GridAutoRows[];
117
+ autoCols?: GridAutoCols | GridAutoCols[];
118
+ autoFlow?: GridAutoFlow | GridAutoFlow[];
119
+ /**
120
+ * @deprecated Use `gridTemplateColumns` instead.
121
+ */
122
+ columns?: never;
123
+ gridTemplateColumns?: number | number[];
124
+ gap?: number | number[];
125
+ gapX?: number | number[];
126
+ gapY?: number | number[];
127
+ /**
128
+ * @deprecated Use `gridTemplateRows` instead.
129
+ */
130
+ rows?: never;
131
+ gridTemplateRows?: number | number[];
132
+ }
133
+ /**
134
+ * @public
135
+ */
136
+ interface ResponsiveGridItemProps {
137
+ gridColumn?: GridItemColumn | GridItemColumn[];
138
+ /**
139
+ * @deprecated Use `gridColumn` instead.
140
+ */
141
+ column?: never;
142
+ gridColumnStart?: GridItemColumnStart | GridItemColumnStart[];
143
+ /**
144
+ * @deprecated Use `gridColumnStart` instead.
145
+ */
146
+ columnStart?: never;
147
+ gridColumnEnd?: GridItemColumnEnd | GridItemColumnEnd[];
148
+ /**
149
+ * @deprecated Use `gridColumnEnd` instead.
150
+ */
151
+ columnEnd?: never;
152
+ gridRow?: GridItemRow | GridItemRow[];
153
+ /**
154
+ * @deprecated Use `gridRow` instead.
155
+ */
156
+ row?: never;
157
+ gridRowStart?: GridItemRowStart | GridItemRowStart[];
158
+ /**
159
+ * @deprecated Use `gridRowStart` instead.
160
+ */
161
+ rowStart?: never;
162
+ gridRowEnd?: GridItemRowEnd | GridItemRowEnd[];
163
+ /**
164
+ * @deprecated Use `gridRowEnd` instead.
165
+ */
166
+ rowEnd?: never;
167
+ }
168
+ /**
169
+ * @public
170
+ */
171
+ interface ResponsiveMarginProps {
172
+ /** Applies margins to all sides. The property is responsive. */
173
+ margin?: number | number[];
174
+ /** Applies margins to the left and right sides. The property is responsive. */
175
+ marginX?: number | number[];
176
+ /** Applies margins to the top and bottom sides. The property is responsive. */
177
+ marginY?: number | number[];
178
+ marginTop?: number | number[];
179
+ marginRight?: number | number[];
180
+ marginBottom?: number | number[];
181
+ marginLeft?: number | number[];
182
+ }
183
+ /**
184
+ * @public
185
+ */
186
+ interface ResponsivePaddingProps {
187
+ padding?: number | number[];
188
+ paddingX?: number | number[];
189
+ paddingY?: number | number[];
190
+ paddingTop?: number | number[];
191
+ paddingRight?: number | number[];
192
+ paddingBottom?: number | number[];
193
+ paddingLeft?: number | number[];
194
+ }
195
+ /**
196
+ * @public
197
+ */
198
+ interface ResponsiveRadiusProps {
199
+ radius?: Radius | Radius[];
200
+ }
201
+ /**
202
+ * @public
203
+ */
204
+ interface ResponsiveShadowProps {
205
+ shadow?: number | number[];
206
+ }
207
+ /**
208
+ * @public
209
+ */
210
+ interface ResponsiveWidthProps {
211
+ width?: number | 'auto' | (number | 'auto')[];
212
+ }
213
+ /**
214
+ * @public
215
+ */
216
+ type Delay = number | Partial<{
217
+ open: number;
218
+ close: number;
219
+ }>;
220
+ /**
221
+ * Placement of floating UI elements.
222
+ *
223
+ * @public
224
+ */
225
+ type Placement = 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end';
226
+ /**
227
+ * @public
228
+ */
229
+ interface LayerProps {
230
+ as?: React.ElementType | keyof React.JSX.IntrinsicElements;
231
+ /** A callback that fires when the layer becomes the top layer when it was not the top layer before. */
232
+ onActivate?: (props: {
233
+ activeElement: HTMLElement | null;
234
+ }) => void;
235
+ zOffset?: number | number[];
236
+ }
237
+ /**
238
+ * @public
239
+ */
240
+ declare const Layer: (props: LayerProps & Omit<React.HTMLProps<HTMLDivElement>, 'as'>) => import("react").JSX.Element;
241
+ export { FlexWrap as A, GridAutoCols as C, FlexDirection as D, FlexAlign as E, BoxHeight as M, BoxOverflow as N, FlexJustify as O, BoxSizing as P, GridItemRowStart as S, GridAutoRows as T, GridItemColumn as _, ResponsiveBorderProps as a, GridItemRow as b, ResponsiveFlexProps as c, ResponsiveMarginProps as d, ResponsivePaddingProps as f, Radius as g, ResponsiveWidthProps as h, Delay as i, BoxDisplay as j, FlexValue as k, ResponsiveGridItemProps as l, ResponsiveShadowProps as m, LayerProps as n, ResponsiveBoxProps as o, ResponsiveRadiusProps as p, Placement as r, ResponsiveFlexItemProps as s, Layer as t, ResponsiveGridProps as u, GridItemColumnEnd as v, GridAutoFlow as w, GridItemRowEnd as x, GridItemColumnStart as y };
242
+ //# sourceMappingURL=layer-BQfdK7rt.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"layer-BQfdK7rt.d.ts","names":[],"sources":["../src/core/types/box.ts","../src/core/types/flex.ts","../src/core/types/grid.ts","../src/core/types/gridItem.ts","../src/core/types/radius.ts","../src/core/primitives/types.ts","../src/core/types/placement.ts","../src/core/utils/layer/layer.tsx"],"mappings":"AAGA;;;KAAY;;;;KAKA;;;;KAKA;;;;KAKA;;;;KCfA;;;;KAKA;;;;KAKA;;;;KAWA;;;;KAKA;;;;KC1BA;;;;KAKA;;;;KAKA;;;;KCVA;;;;KAKA;;;;KAKA;;;;KAKA;;;;KAKA;;;;KAKA;;;;KCzBA;;;;UCaK;EACf;EACA;EACA;EACA;EACA;;;;;UAMe;EACf,UAAU,aAAa;EACvB,SAAS,YAAY;EACrB,WAAW,cAAc;EACzB,SAAS,YAAY;;;;;UAMN;EACf,QAAQ,YAAY;EACpB,YAAY,gBAAgB;EAC5B,UAAU,cAAc;EACxB,OAAO,WAAW;;;;;UAMH;;EAEf,OAAO,YAAY;;;;;UAMJ;EACf,WAAW,eAAe;EAC1B,WAAW,eAAe;EAC1B,WAAW,eAAe;;;;EAK1B;EACA;EACA;EACA;EACA;;;;EAIA;EACA;;;;;UAMe;EACf,aAAa,iBAAiB;;;;EAI9B;EACA,kBAAkB,sBAAsB;;;;EAIxC;EACA,gBAAgB,oBAAoB;;;;EAIpC;EACA,UAAU,cAAc;;;;EAIxB;EACA,eAAe,mBAAmB;;;;EAIlC;EACA,aAAa,iBAAiB;;;;EAI9B;;;;;UAMe;;EAEf;;EAEA;;EAEA;EACA;EACA;EACA;EACA;;;;;UAMe;EACf;EACA;EACA;EACA;EACA;EACA;EACA;;;;;UAMe;EACf,SAAS,SAAS;;;;;UAMH;EACf;;;;;UAMe;EACf;;;;;KAMU,iBAER;EACE;EACA;;;;;;;KCnKM;;;;UCMK;EACf,KAAK,MAAM,oBAAoB,MAAM,IAAI;;EAEzC,cAAc;IAAQ,eAAe;;EACrC;;;;;cA2EW,QAAK,OACT,aAAa,KAAK,MAAM,UAAU,2CAAsB,IAAA"}
@@ -0,0 +1,56 @@
1
+ import { s as EMPTY_RECORD } from "./helpers-bwfx1e-Y.js";
2
+ import { a as isHTMLElement, n as containsOrEqualsElement } from "./element-BYgCE_iK.js";
3
+ import { n as LayerProvider, t as useLayer } from "./useLayer-9Pz-GG0r.js";
4
+ import { c } from "react/compiler-runtime";
5
+ import { useEffect, useImperativeHandle, useRef } from "react";
6
+ import { styled } from "styled-components";
7
+ import { jsx } from "react/jsx-runtime";
8
+ const StyledLayer = /* @__PURE__ */ styled.div.withConfig({
9
+ displayName: "StyledLayer",
10
+ componentId: "sc-omj35q-0"
11
+ })({ position: "relative" }), LayerChildren = function LayerChildren(props) {
12
+ let $ = c(23), children, forwardedRef, onActivate, onFocus, restProps, t0;
13
+ $[0] === props ? (children = $[1], forwardedRef = $[2], onActivate = $[3], onFocus = $[4], restProps = $[5], t0 = $[6]) : ({children, onActivate, onFocus, ref: forwardedRef, style: t0, ...restProps} = props, $[0] = props, $[1] = children, $[2] = forwardedRef, $[3] = onActivate, $[4] = onFocus, $[5] = restProps, $[6] = t0);
14
+ let style = t0 === void 0 ? EMPTY_RECORD : t0, { zIndex, isTopLayer } = useLayer(), lastFocusedRef = useRef(null), ref = useRef(null), isTopLayerRef = useRef(isTopLayer), t1;
15
+ $[7] === Symbol.for("react.memo_cache_sentinel") ? (t1 = () => ref.current, $[7] = t1) : t1 = $[7], useImperativeHandle(forwardedRef, t1);
16
+ let t2, t3;
17
+ $[8] !== isTopLayer || $[9] !== onActivate ? (t2 = () => {
18
+ isTopLayerRef.current !== isTopLayer && isTopLayer && onActivate?.({ activeElement: lastFocusedRef.current }), isTopLayerRef.current = isTopLayer;
19
+ }, t3 = [isTopLayer, onActivate], $[8] = isTopLayer, $[9] = onActivate, $[10] = t2, $[11] = t3) : (t2 = $[10], t3 = $[11]), useEffect(t2, t3);
20
+ let t4;
21
+ $[12] !== isTopLayer || $[13] !== onFocus ? (t4 = (event) => {
22
+ onFocus?.(event);
23
+ let rootElement = ref.current, target = document.activeElement;
24
+ !isTopLayer || !rootElement || !target || isHTMLElement(target) && containsOrEqualsElement(rootElement, target) && (lastFocusedRef.current = target);
25
+ }, $[12] = isTopLayer, $[13] = onFocus, $[14] = t4) : t4 = $[14];
26
+ let handleFocus = t4, t5;
27
+ $[15] !== style || $[16] !== zIndex ? (t5 = {
28
+ ...style,
29
+ zIndex
30
+ }, $[15] = style, $[16] = zIndex, $[17] = t5) : t5 = $[17];
31
+ let t6;
32
+ return $[18] !== children || $[19] !== handleFocus || $[20] !== restProps || $[21] !== t5 ? (t6 = /* @__PURE__ */ jsx(StyledLayer, {
33
+ ...restProps,
34
+ "data-ui": "Layer",
35
+ onFocus: handleFocus,
36
+ ref,
37
+ style: t5,
38
+ children
39
+ }), $[18] = children, $[19] = handleFocus, $[20] = restProps, $[21] = t5, $[22] = t6) : t6 = $[22], t6;
40
+ }, Layer = function Layer(props) {
41
+ let $ = c(10), children, restProps, t0;
42
+ $[0] === props ? (children = $[1], restProps = $[2], t0 = $[3]) : ({children, zOffset: t0, ...restProps} = props, $[0] = props, $[1] = children, $[2] = restProps, $[3] = t0);
43
+ let zOffset = t0 === void 0 ? 1 : t0, t1;
44
+ $[4] !== children || $[5] !== restProps ? (t1 = /* @__PURE__ */ jsx(LayerChildren, {
45
+ ...restProps,
46
+ children
47
+ }), $[4] = children, $[5] = restProps, $[6] = t1) : t1 = $[6];
48
+ let t2;
49
+ return $[7] !== t1 || $[8] !== zOffset ? (t2 = /* @__PURE__ */ jsx(LayerProvider, {
50
+ zOffset,
51
+ children: t1
52
+ }), $[7] = t1, $[8] = zOffset, $[9] = t2) : t2 = $[9], t2;
53
+ };
54
+ export { Layer as t };
55
+
56
+ //# sourceMappingURL=layer-BdkSGATt.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"layer-BdkSGATt.js","names":["FocusEvent","useCallback","useEffect","useImperativeHandle","useRef","styled","EMPTY_RECORD","containsOrEqualsElement","isHTMLElement","LayerProvider","useLayer","LayerProps","as","React","ElementType","JSX","IntrinsicElements","onActivate","props","activeElement","HTMLElement","zOffset","LayerChildrenProps","StyledLayer","div","position","LayerChildren","$","_c","children","forwardedRef","onFocus","restProps","t0","ref","style","undefined","zIndex","isTopLayer","lastFocusedRef","isTopLayerRef","t1","Symbol","for","current","t2","t3","becameTopLayer","t4","event","rootElement","target","document","handleFocus","t5","t6","Layer"],"sources":["../src/core/utils/layer/layer.tsx"],"sourcesContent":["import {FocusEvent, useCallback, useEffect, useImperativeHandle, useRef} from 'react'\nimport {styled} from 'styled-components'\n\nimport {EMPTY_RECORD} from '../../constants'\nimport {containsOrEqualsElement, isHTMLElement} from '../../helpers/element'\nimport {LayerProvider} from './layerProvider'\nimport {useLayer} from './useLayer'\n\n/**\n * @public\n */\nexport interface LayerProps {\n as?: React.ElementType | keyof React.JSX.IntrinsicElements\n /** A callback that fires when the layer becomes the top layer when it was not the top layer before. */\n onActivate?: (props: {activeElement: HTMLElement | null}) => void\n zOffset?: number | number[]\n}\n\ninterface LayerChildrenProps {\n as?: React.ElementType | keyof React.JSX.IntrinsicElements\n onActivate?: LayerProps['onActivate']\n}\n\nconst StyledLayer = styled.div({position: 'relative'})\n\nconst LayerChildren = function LayerChildren(\n props: LayerChildrenProps & Omit<React.HTMLProps<HTMLDivElement>, 'as'>,\n) {\n const {\n children,\n onActivate,\n onFocus,\n ref: forwardedRef,\n style = EMPTY_RECORD,\n ...restProps\n } = props\n const {zIndex, isTopLayer} = useLayer()\n const lastFocusedRef = useRef<HTMLElement | null>(null)\n const ref = useRef<HTMLDivElement | null>(null)\n const isTopLayerRef = useRef<boolean>(isTopLayer)\n\n useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(forwardedRef, () => ref.current)\n\n // When the layer very first mounts, it will be the top layer, but we don't want to fire\n // the callback in that case. We use a ref to track the previous value of isTopLayer to\n // determine if the layer has become the top layer since the last render.\n useEffect(() => {\n const becameTopLayer = isTopLayerRef.current !== isTopLayer && isTopLayer\n\n if (becameTopLayer) {\n onActivate?.({activeElement: lastFocusedRef.current})\n }\n\n isTopLayerRef.current = isTopLayer\n }, [isTopLayer, onActivate])\n\n const handleFocus = useCallback(\n // oxlint-disable-next-line no-unnecessary-type-arguments\n (event: FocusEvent<HTMLDivElement, Element>) => {\n // Call the user-provided onFocus handler if any\n onFocus?.(event)\n\n const rootElement = ref.current\n const target = document.activeElement\n\n if (!isTopLayer || !rootElement || !target) return\n\n if (isHTMLElement(target) && containsOrEqualsElement(rootElement, target)) {\n lastFocusedRef.current = target\n }\n },\n [isTopLayer, onFocus],\n )\n\n return (\n <StyledLayer\n {...restProps}\n data-ui=\"Layer\"\n onFocus={handleFocus}\n ref={ref}\n style={{...style, zIndex}}\n >\n {children}\n </StyledLayer>\n )\n}\n\n/**\n * @public\n */\nexport const Layer = function Layer(\n props: LayerProps & Omit<React.HTMLProps<HTMLDivElement>, 'as'>,\n) {\n const {children, zOffset = 1, ...restProps} = props\n\n return (\n <LayerProvider zOffset={zOffset}>\n <LayerChildren {...restProps}>{children}</LayerChildren>\n </LayerProvider>\n )\n}\n"],"mappings":"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"}
package/dist/menu.d.ts ADDED
@@ -0,0 +1,146 @@
1
+ import { a as Props, i as EmptyProps, r as ElementType } from "./component-DVlwaWB-.js";
2
+ import { f as ResponsivePaddingProps, g as Radius, p as ResponsiveRadiusProps } from "./layer-BQfdK7rt.js";
3
+ import { n as PopoverProps } from "./popover-DmmmSNzL.js";
4
+ import { t as SelectableTone } from "./selectable-B0GUIL74.js";
5
+ /**
6
+ * @public
7
+ */
8
+ interface MenuProps extends ResponsivePaddingProps {
9
+ /**
10
+ * @deprecated Use `shouldFocus="first"` instead.
11
+ */
12
+ 'focusFirst'?: never;
13
+ /**
14
+ * @deprecated Use `shouldFocus="last"` instead.
15
+ */
16
+ 'focusLast'?: never;
17
+ 'onClickOutside'?: (event: MouseEvent) => void;
18
+ 'onEscape'?: () => void;
19
+ 'onItemClick'?: () => void;
20
+ 'onItemSelect'?: (index: number) => void;
21
+ 'originElement'?: HTMLElement | null;
22
+ 'registerElement'?: (el: HTMLElement) => () => void;
23
+ 'shouldFocus'?: 'first' | 'last' | null;
24
+ 'gap'?: number | number[];
25
+ /**
26
+ * @deprecated Use `gap` instead.
27
+ */
28
+ 'space'?: never;
29
+ 'aria-labelledby'?: string;
30
+ 'onBlurCapture'?: (event: FocusEvent) => void;
31
+ }
32
+ /**
33
+ * The `Menu` component is a building block for application menus.
34
+ *
35
+ * @public
36
+ */
37
+ declare const Menu: (props: MenuProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'role' | 'tabIndex'>) => import("react").JSX.Element;
38
+ /**
39
+ * @public
40
+ */
41
+ interface MenuButtonProps {
42
+ /**
43
+ * @beta Do not use in production.
44
+ */
45
+ __unstable_disableRestoreFocusOnClose?: boolean;
46
+ /**
47
+ * @deprecated Use `popover={{boundaryElement: element}}` instead.
48
+ */
49
+ boundaryElement?: never;
50
+ button: React.JSX.Element;
51
+ id: string;
52
+ menu?: React.JSX.Element;
53
+ onClose?: () => void;
54
+ onOpen?: () => void;
55
+ /**
56
+ * @deprecated Use `popover={{placement: 'top'}}` instead.
57
+ */
58
+ placement?: never;
59
+ popover?: Omit<PopoverProps, 'content' | 'open'>;
60
+ /**
61
+ * @deprecated Use `popover={{scheme: 'dark'}}` instead.
62
+ */
63
+ popoverScheme?: never;
64
+ /**
65
+ * @deprecated Use `popover={{radius: 2}}` instead.
66
+ */
67
+ popoverRadius?: never;
68
+ /**
69
+ * @beta Do not use in production.
70
+ * @deprecated Use `popover={{portal: true}}` instead.
71
+ */
72
+ portal?: never;
73
+ /**
74
+ * @deprecated Use `popover={{preventOverflow: true}}` instead.
75
+ */
76
+ preventOverflow?: never;
77
+ ref?: React.Ref<HTMLButtonElement | null>;
78
+ }
79
+ /**
80
+ * The `MenuButton` component follows the WAI-ARIA specification for menu buttons.
81
+ *
82
+ * @public
83
+ */
84
+ declare const MenuButton: (props: MenuButtonProps) => import("react").JSX.Element;
85
+ /**
86
+ * @public
87
+ */
88
+ type MenuDividerProps<E extends ElementType = 'hr'> = Props<EmptyProps, E>;
89
+ /**
90
+ * @public
91
+ */
92
+ declare const MenuDivider: <E extends ElementType = 'hr'>(props: MenuDividerProps<E>) => React.JSX.Element;
93
+ /**
94
+ * @public
95
+ */
96
+ interface MenuGroupOwnProps {
97
+ fontSize?: number | number[];
98
+ icon?: React.ElementType | React.ReactNode;
99
+ menu?: Omit<MenuProps, 'onClickOutside' | 'onEscape' | 'onItemClick' | 'onKeyDown' | 'onMouseEnter' | 'registerElement' | 'shouldFocus' | 'onBlurCapture'>;
100
+ padding?: number | number[];
101
+ popover?: Omit<PopoverProps, 'content' | 'open'>;
102
+ radius?: Radius | Radius[];
103
+ gap?: number | number[];
104
+ /**
105
+ * @deprecated Use `gap` instead.
106
+ */
107
+ space?: never;
108
+ text: React.ReactNode;
109
+ tone?: SelectableTone;
110
+ }
111
+ /**
112
+ * @public
113
+ */
114
+ type MenuGroupProps<E extends ElementType = 'button'> = Props<MenuGroupOwnProps, E>;
115
+ /**
116
+ * @public
117
+ */
118
+ declare const MenuGroup: <E extends ElementType = 'button'>(props: MenuGroupProps<E>) => React.JSX.Element;
119
+ /**
120
+ * @public
121
+ */
122
+ interface MenuItemOwnProps extends ResponsivePaddingProps, ResponsiveRadiusProps {
123
+ fontSize?: number | number[];
124
+ hotkeys?: string[];
125
+ icon?: React.ElementType | React.ReactNode;
126
+ iconRight?: React.ElementType | React.ReactNode;
127
+ pressed?: boolean;
128
+ selected?: boolean;
129
+ gap?: number | number[];
130
+ /**
131
+ * @deprecated Use `gap` instead.
132
+ */
133
+ space?: never;
134
+ text?: React.ReactNode;
135
+ tone?: SelectableTone;
136
+ }
137
+ /**
138
+ * @public
139
+ */
140
+ type MenuItemProps<E extends ElementType = 'button'> = Props<MenuItemOwnProps, E>;
141
+ /**
142
+ * @public
143
+ */
144
+ declare const MenuItem: <E extends ElementType = 'button'>(props: MenuItemProps<E>) => React.JSX.Element;
145
+ export { Menu, MenuButton, type MenuButtonProps, MenuDivider, type MenuDividerProps, MenuGroup, type MenuGroupOwnProps, type MenuGroupProps, MenuItem, type MenuItemOwnProps, type MenuItemProps, type MenuProps };
146
+ //# sourceMappingURL=menu.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"menu.d.ts","names":[],"sources":["../src/core/components/menu/menu.tsx","../src/core/components/menu/menuButton.tsx","../src/core/components/menu/menuDivider.ts","../src/core/components/menu/menuGroup.tsx","../src/core/components/menu/menuItem.tsx"],"mappings":";;;;;;;UAeiB,kBAAkB;;;;EAIjC;;;;EAIA;EACA,oBAAoB,OAAO;EAC3B;EACA;EACA,kBAAkB;EAClB,kBAAkB;EAClB,qBAAqB,IAAI;EACzB;EACA;;;;EAIA;EACA;EACA,mBAAmB,OAAO;;;;;;;cAaf,OAAI,OACR,YAAY,KAAK,MAAM,UAAU,4EAAuD,IAAA;;;;UCnChF;;;;EAIf;;;;EAIA;EACA,QAAQ,MAAM,IAAI;EAClB;EACA,OAAO,MAAM,IAAI;EACjB;EACA;;;;EAIA;EACA,UAAU,KAAK;;;;EAIf;;;;EAIA;;;;;EAKA;;;;EAIA;EACA,MAAM,MAAM,IAAI;;;;;;;cAQL,aAAU,OAA8B,oCAAe,IAAA;;;;KCrDxD,iBAAiB,UAAU,sBAAsB,MAAM,YAAY;;;;cAMlE,cAKI,UAAU,oBAAoB,OAAO,iBAAiB,OAAO,MAAM,IAAI;;;;UCEvE;EACf;EAEA,OAAO,MAAM,cAAc,MAAM;EACjC,OAAO,KACL;EAUF;EACA,UAAU,KAAK;EACf,SAAS,SAAS;EAClB;;;;EAIA;EACA,MAAM,MAAM;EACZ,OAAO;;;;;KAMG,eAAe,UAAU,0BAA0B,MAAM,mBAAmB;;;;cAwL3E,YAA8C,UAAU,wBACnE,OAAO,eAAe,OACnB,MAAM,IAAI;;;;UClNE,yBAAyB,wBAAwB;EAChE;EACA;EAEA,OAAO,MAAM,cAAc,MAAM;EAEjC,YAAY,MAAM,cAAc,MAAM;EACtC;EACA;EACA;;;;EAIA;EACA,OAAO,MAAM;EACb,OAAO;;;;;KAMG,cAAc,UAAU,0BAA0B,MAAM,kBAAkB;;;;cAoJzE,WAA4C,UAAU,wBACjE,OAAO,cAAc,OAClB,MAAM,IAAI"}