@sanity/ui 4.0.0-next.4 → 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.
- package/README.md +4 -0
- package/dist/_system-CTe2lb5l.d.ts +40 -0
- package/dist/_system-CTe2lb5l.d.ts.map +1 -0
- package/dist/arrow-BG0EMNiC.js +159 -0
- package/dist/arrow-BG0EMNiC.js.map +1 -0
- package/dist/autocomplete.d.ts +140 -0
- package/dist/autocomplete.d.ts.map +1 -0
- package/dist/autocomplete.js +468 -0
- package/dist/autocomplete.js.map +1 -0
- package/dist/breadcrumbs.d.ts +18 -0
- package/dist/breadcrumbs.d.ts.map +1 -0
- package/dist/breadcrumbs.js +112 -0
- package/dist/breadcrumbs.js.map +1 -0
- package/dist/button-BzoZs3Sl.d.ts +76 -0
- package/dist/button-BzoZs3Sl.d.ts.map +1 -0
- package/dist/button-DZkAQOL2.js +174 -0
- package/dist/button-DZkAQOL2.js.map +1 -0
- package/dist/card-C0a0wQTc.d.ts +7 -0
- package/dist/card-C0a0wQTc.d.ts.map +1 -0
- package/dist/code.d.ts +20 -0
- package/dist/code.d.ts.map +1 -0
- package/dist/code.js +85 -0
- package/dist/code.js.map +1 -0
- package/dist/codeFontStyle-DYUujk7K.js +11 -0
- package/dist/codeFontStyle-DYUujk7K.js.map +1 -0
- package/dist/component-DVlwaWB-.d.ts +25 -0
- package/dist/component-DVlwaWB-.d.ts.map +1 -0
- package/dist/element-BYgCE_iK.js +51 -0
- package/dist/element-BYgCE_iK.js.map +1 -0
- package/dist/{getScopedTheme-CqaSCfTH.js → factory-CvRcEQ36.js} +6 -753
- package/dist/factory-CvRcEQ36.js.map +1 -0
- package/dist/flex-BYRpBTOc.js +69 -0
- package/dist/flex-BYRpBTOc.js.map +1 -0
- package/dist/font-EtfxKPUz.d.ts +49 -0
- package/dist/font-EtfxKPUz.d.ts.map +1 -0
- package/dist/getElementRef-5HZQ-Owu.js +91 -0
- package/dist/getElementRef-5HZQ-Owu.js.map +1 -0
- package/dist/getScopedTheme-C-sZsyAz.js +267 -0
- package/dist/getScopedTheme-C-sZsyAz.js.map +1 -0
- package/dist/getTheme_v2-y09KqtEb.js +487 -0
- package/dist/getTheme_v2-y09KqtEb.js.map +1 -0
- package/dist/grid-D88j-N7f.js +108 -0
- package/dist/grid-D88j-N7f.js.map +1 -0
- package/dist/helpers-bwfx1e-Y.js +67 -0
- package/dist/helpers-bwfx1e-Y.js.map +1 -0
- package/dist/hotkeys-B08HIKNu.js +145 -0
- package/dist/hotkeys-B08HIKNu.js.map +1 -0
- package/dist/index.d.ts +112 -896
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +93 -4409
- package/dist/index.js.map +1 -1
- package/dist/layer-BQfdK7rt.d.ts +242 -0
- package/dist/layer-BQfdK7rt.d.ts.map +1 -0
- package/dist/layer-BdkSGATt.js +56 -0
- package/dist/layer-BdkSGATt.js.map +1 -0
- package/dist/menu.d.ts +146 -0
- package/dist/menu.d.ts.map +1 -0
- package/dist/menu.js +602 -0
- package/dist/menu.js.map +1 -0
- package/dist/popover-DmmmSNzL.d.ts +96 -0
- package/dist/popover-DmmmSNzL.d.ts.map +1 -0
- package/dist/popover-Iy6EZEmv.js +406 -0
- package/dist/popover-Iy6EZEmv.js.map +1 -0
- package/dist/popover.d.ts +2 -0
- package/dist/popover.js +3 -0
- package/dist/responsiveFont-hN1mZFjm.js +55 -0
- package/dist/responsiveFont-hN1mZFjm.js.map +1 -0
- package/dist/{rgba-LmTDhX0u.d.ts → rgba-BSYaEUW6.d.ts} +4 -87
- package/dist/rgba-BSYaEUW6.d.ts.map +1 -0
- package/dist/selectable-B0GUIL74.d.ts +7 -0
- package/dist/selectable-B0GUIL74.d.ts.map +1 -0
- package/dist/stack-C5WV-BRh.js +98 -0
- package/dist/stack-C5WV-BRh.js.map +1 -0
- package/dist/styles.css +1 -0
- package/dist/textInput-IbiDH7Jc.js +315 -0
- package/dist/textInput-IbiDH7Jc.js.map +1 -0
- package/dist/theme.d.ts +3 -1
- package/dist/theme.d.ts.map +1 -1
- package/dist/theme.js +3 -1
- package/dist/theme.js.map +1 -1
- package/dist/toast.d.ts +73 -0
- package/dist/toast.d.ts.map +1 -0
- package/dist/toast.js +297 -0
- package/dist/toast.js.map +1 -0
- package/dist/tooltip.d.ts +88 -0
- package/dist/tooltip.d.ts.map +1 -0
- package/dist/tooltip.js +432 -0
- package/dist/tooltip.js.map +1 -0
- package/dist/useClickOutsideEvent-lEVhDFCQ.js +36 -0
- package/dist/useClickOutsideEvent-lEVhDFCQ.js.map +1 -0
- package/dist/useElementSize-BJvbGHq8.js +51 -0
- package/dist/useElementSize-BJvbGHq8.js.map +1 -0
- package/dist/useLayer-9Pz-GG0r.js +704 -0
- package/dist/useLayer-9Pz-GG0r.js.map +1 -0
- package/package.json +15 -3
- package/dist/getScopedTheme-CqaSCfTH.js.map +0 -1
- 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"}
|