@sanity/ui 4.0.6 → 4.1.0
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/dist/{arrow-BBpqkhzC.js → arrow-C6TlkggA.js} +6 -5
- package/dist/arrow-C6TlkggA.js.map +1 -0
- package/dist/autocomplete.d.ts.map +1 -1
- package/dist/autocomplete.js +38 -42
- package/dist/autocomplete.js.map +1 -1
- package/dist/breadcrumbs.d.ts.map +1 -1
- package/dist/breadcrumbs.js +32 -34
- package/dist/breadcrumbs.js.map +1 -1
- package/dist/{button-DPIMguMh.js → button-D3iEd7Je.js} +11 -11
- package/dist/button-D3iEd7Je.js.map +1 -0
- package/dist/button-dnqMFkWg.d.ts.map +1 -1
- package/dist/code.js +2 -2
- package/dist/code.js.map +1 -1
- package/dist/{codeFontStyle-DHrcV3wD.js → codeFontStyle-84SMhFtI.js} +2 -2
- package/dist/{codeFontStyle-DHrcV3wD.js.map → codeFontStyle-84SMhFtI.js.map} +1 -1
- package/dist/{flex-CDMKJ54v.js → flex-CySCBzQm.js} +3 -3
- package/dist/{flex-CDMKJ54v.js.map → flex-CySCBzQm.js.map} +1 -1
- package/dist/{grid-CFhbAO8d.js → grid-I2TNptX-.js} +3 -3
- package/dist/{grid-CFhbAO8d.js.map → grid-I2TNptX-.js.map} +1 -1
- package/dist/{helpers-CmuDTEVl.js → helpers-C8xxXAQC.js} +6 -3
- package/dist/helpers-C8xxXAQC.js.map +1 -0
- package/dist/{hotkeys-B8-FMlBd.js → hotkeys-Bi6Q5963.js} +29 -29
- package/dist/hotkeys-Bi6Q5963.js.map +1 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +318 -352
- package/dist/index.js.map +1 -1
- package/dist/layer-BK7xWHcE.js +61 -0
- package/dist/layer-BK7xWHcE.js.map +1 -0
- package/dist/layer-ChlP9Ik6.d.ts.map +1 -1
- package/dist/menu.d.ts.map +1 -1
- package/dist/menu.js +51 -39
- package/dist/menu.js.map +1 -1
- package/dist/{popover-dCgSQgsm.js → popover-CdBTZDvj.js} +22 -32
- package/dist/popover-CdBTZDvj.js.map +1 -0
- package/dist/popover.js +1 -1
- package/dist/{responsiveFont-CYyTL7C5.js → responsiveFont-CilwaORG.js} +2 -2
- package/dist/{responsiveFont-CYyTL7C5.js.map → responsiveFont-CilwaORG.js.map} +1 -1
- package/dist/{stack-BKKeh5M0.js → stack-BGFEokua.js} +4 -4
- package/dist/{stack-BKKeh5M0.js.map → stack-BGFEokua.js.map} +1 -1
- package/dist/styles.css +408 -0
- package/dist/{textInput-Cp2Jvgw1.js → textInput-Bu3QuADZ.js} +39 -51
- package/dist/textInput-Bu3QuADZ.js.map +1 -0
- package/dist/toast.d.ts.map +1 -1
- package/dist/toast.js +80 -76
- package/dist/toast.js.map +1 -1
- package/dist/tooltip.d.ts.map +1 -1
- package/dist/tooltip.js +88 -101
- package/dist/tooltip.js.map +1 -1
- package/dist/{useClickOutsideEvent-CQ40LrHo.js → useClickOutsideEvent-wGLGWBZN.js} +2 -2
- package/dist/{useClickOutsideEvent-CQ40LrHo.js.map → useClickOutsideEvent-wGLGWBZN.js.map} +1 -1
- package/dist/{useLayer-DzgZ2cTe.js → useLayer-jUJIz8mh.js} +2 -2
- package/dist/{useLayer-DzgZ2cTe.js.map → useLayer-jUJIz8mh.js.map} +1 -1
- package/package.json +12 -11
- package/dist/arrow-BBpqkhzC.js.map +0 -1
- package/dist/button-DPIMguMh.js.map +0 -1
- package/dist/helpers-CmuDTEVl.js.map +0 -1
- package/dist/hotkeys-B8-FMlBd.js.map +0 -1
- package/dist/layer-BQuAIq9M.js +0 -61
- package/dist/layer-BQuAIq9M.js.map +0 -1
- package/dist/popover-dCgSQgsm.js.map +0 -1
- package/dist/textInput-Cp2Jvgw1.js.map +0 -1
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
import { s as EMPTY_RECORD } from "./helpers-C8xxXAQC.js";
|
|
2
|
+
import { a as isHTMLElement, n as containsOrEqualsElement } from "./element-BYgCE_iK.js";
|
|
3
|
+
import { n as LayerProvider, t as useLayer } from "./useLayer-jUJIz8mh.js";
|
|
4
|
+
import { c } from "react/compiler-runtime";
|
|
5
|
+
import { clsx } from "clsx/lite";
|
|
6
|
+
import { useEffect, useImperativeHandle, useRef } from "react";
|
|
7
|
+
import { jsx } from "react/jsx-runtime";
|
|
8
|
+
var layer = "_1xz6t3i0";
|
|
9
|
+
function LayerChildren(props) {
|
|
10
|
+
let $ = c(29), children, className, forwardedRef, onActivate, onFocus, restProps, t0, t1;
|
|
11
|
+
$[0] === props ? (children = $[1], className = $[2], forwardedRef = $[3], onActivate = $[4], onFocus = $[5], restProps = $[6], t0 = $[7], t1 = $[8]) : ({as: t0, children, className, onActivate, onFocus, ref: forwardedRef, style: t1, ...restProps} = props, $[0] = props, $[1] = children, $[2] = className, $[3] = forwardedRef, $[4] = onActivate, $[5] = onFocus, $[6] = restProps, $[7] = t0, $[8] = t1);
|
|
12
|
+
let as = t0 === void 0 ? "div" : t0, style = t1 === void 0 ? EMPTY_RECORD : t1, { zIndex, isTopLayer } = useLayer(), lastFocusedRef = useRef(null), ref = useRef(null), isTopLayerRef = useRef(isTopLayer), t2;
|
|
13
|
+
$[9] === Symbol.for("react.memo_cache_sentinel") ? (t2 = () => ref.current, $[9] = t2) : t2 = $[9], useImperativeHandle(forwardedRef, t2);
|
|
14
|
+
let t3, t4;
|
|
15
|
+
$[10] !== isTopLayer || $[11] !== onActivate ? (t3 = () => {
|
|
16
|
+
isTopLayerRef.current !== isTopLayer && isTopLayer && onActivate?.({ activeElement: lastFocusedRef.current }), isTopLayerRef.current = isTopLayer;
|
|
17
|
+
}, t4 = [isTopLayer, onActivate], $[10] = isTopLayer, $[11] = onActivate, $[12] = t3, $[13] = t4) : (t3 = $[12], t4 = $[13]), useEffect(t3, t4);
|
|
18
|
+
let t5;
|
|
19
|
+
$[14] !== isTopLayer || $[15] !== onFocus ? (t5 = (event) => {
|
|
20
|
+
onFocus?.(event);
|
|
21
|
+
let rootElement = ref.current, target = document.activeElement;
|
|
22
|
+
!isTopLayer || !rootElement || !target || isHTMLElement(target) && containsOrEqualsElement(rootElement, target) && (lastFocusedRef.current = target);
|
|
23
|
+
}, $[14] = isTopLayer, $[15] = onFocus, $[16] = t5) : t5 = $[16];
|
|
24
|
+
let handleFocus = t5, Component = as, t6;
|
|
25
|
+
$[17] === className ? t6 = $[18] : (t6 = clsx(layer, className), $[17] = className, $[18] = t6);
|
|
26
|
+
let t7;
|
|
27
|
+
$[19] !== style || $[20] !== zIndex ? (t7 = {
|
|
28
|
+
...style,
|
|
29
|
+
zIndex
|
|
30
|
+
}, $[19] = style, $[20] = zIndex, $[21] = t7) : t7 = $[21];
|
|
31
|
+
let t8;
|
|
32
|
+
return $[22] !== Component || $[23] !== children || $[24] !== handleFocus || $[25] !== restProps || $[26] !== t6 || $[27] !== t7 ? (t8 = /* @__PURE__ */ jsx(Component, {
|
|
33
|
+
...restProps,
|
|
34
|
+
className: t6,
|
|
35
|
+
"data-ui": "Layer",
|
|
36
|
+
onFocus: handleFocus,
|
|
37
|
+
ref,
|
|
38
|
+
style: t7,
|
|
39
|
+
children
|
|
40
|
+
}), $[22] = Component, $[23] = children, $[24] = handleFocus, $[25] = restProps, $[26] = t6, $[27] = t7, $[28] = t8) : t8 = $[28], t8;
|
|
41
|
+
}
|
|
42
|
+
/**
|
|
43
|
+
* @public
|
|
44
|
+
*/
|
|
45
|
+
function Layer(props) {
|
|
46
|
+
let $ = c(10), children, restProps, t0;
|
|
47
|
+
$[0] === props ? (children = $[1], restProps = $[2], t0 = $[3]) : ({children, zOffset: t0, ...restProps} = props, $[0] = props, $[1] = children, $[2] = restProps, $[3] = t0);
|
|
48
|
+
let zOffset = t0 === void 0 ? 1 : t0, t1;
|
|
49
|
+
$[4] !== children || $[5] !== restProps ? (t1 = /* @__PURE__ */ jsx(LayerChildren, {
|
|
50
|
+
...restProps,
|
|
51
|
+
children
|
|
52
|
+
}), $[4] = children, $[5] = restProps, $[6] = t1) : t1 = $[6];
|
|
53
|
+
let t2;
|
|
54
|
+
return $[7] !== t1 || $[8] !== zOffset ? (t2 = /* @__PURE__ */ jsx(LayerProvider, {
|
|
55
|
+
zOffset,
|
|
56
|
+
children: t1
|
|
57
|
+
}), $[7] = t1, $[8] = zOffset, $[9] = t2) : t2 = $[9], t2;
|
|
58
|
+
}
|
|
59
|
+
export { Layer as t };
|
|
60
|
+
|
|
61
|
+
//# sourceMappingURL=layer-BK7xWHcE.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"layer-BK7xWHcE.js","names":["as = 'div'","style = EMPTY_RECORD","() => ref.current","() => {\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]","(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 }","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 )","clsx(layer, className)","{...style, zIndex}","<Component\n {...restProps}\n className={clsx(layer, className)}\n data-ui=\"Layer\"\n onFocus={handleFocus}\n ref={ref}\n style={{...style, zIndex}}\n >\n {children}\n </Component>","zOffset = 1","<LayerChildren {...restProps}>{children}</LayerChildren>","<LayerProvider zOffset={zOffset}>\n <LayerChildren {...restProps}>{children}</LayerChildren>\n </LayerProvider>"],"sources":["../src/core/utils/layer/layer.css.ts","../src/core/utils/layer/layer.tsx"],"sourcesContent":["import {style} from '@vanilla-extract/css'\n\nexport const layer = style({\n position: 'relative',\n})\n","import {clsx} from 'clsx/lite'\nimport {FocusEvent, useCallback, useEffect, useImperativeHandle, useRef} from 'react'\n\nimport {EMPTY_RECORD} from '../../constants'\nimport {containsOrEqualsElement, isHTMLElement} from '../../helpers/element'\nimport {LayerProvider} from './layerProvider'\nimport {useLayer} from './useLayer'\n\nimport {layer} from './layer.css'\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\nfunction LayerChildren(props: LayerChildrenProps & Omit<React.HTMLProps<HTMLDivElement>, 'as'>) {\n const {\n as = 'div',\n children,\n className,\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 // Rendering the polymorphic `as` needs one concrete element type for JSX to\n // type-check the div-flavored props (the same widening styled-components'\n // `as` prop performed here before).\n // oxlint-disable-next-line no-unsafe-type-assertion\n const Component = as as 'div'\n\n return (\n <Component\n {...restProps}\n className={clsx(layer, className)}\n data-ui=\"Layer\"\n onFocus={handleFocus}\n ref={ref}\n style={{...style, zIndex}}\n >\n {children}\n </Component>\n )\n}\n\n/**\n * @public\n */\nexport function Layer(props: LayerProps & Omit<React.HTMLProps<HTMLDivElement>, 'as'>) {\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":";;;;;;;;ACyBA,SAAS,cAAc,OAAyE;gBAG5F,UACA,WAGK,cAFL,YACA,SAGG,WAPHA,IAMAC;CAEE,AAAA,EAAA,OAAA,+IATE,CACJ,IAAA,IACA,UACA,WACA,YACA,SACA,KAAK,cACL,OAAA,IACA,GAAA,aACE;CARF,IAAA,KAAA,OAAA,KAAA,IAAK,QAALD,IAMA,QAAA,OAAA,KAAA,IAAQ,eAARC,IAGI,EAAC,QAAQ,eAAc,SAAS,GAChC,iBAAiB,OAA2B,IAAI,GAChD,MAAM,OAA8B,IAAI,GACxC,gBAAgB,OAAgB,UAAU,GAEgCC;CAAhF,oDAAsF,WAAA,IAAI,iCAA1F,oBAAkE,cAAcA,EAAiB;CAKvFC,IAAAA,IAQPC;CARH,AACmD,EAAA,QAAA,cAAA,EAAA,QAG/C,cAJM,WAAM;EAOd,AANuB,cAAc,YAAY,cAAc,cAG7D,aAAa,EAAC,eAAe,eAAe,QAAO,CAAC,GAGtD,cAAc,UAAU;CAC1B,GAAG,KAAA,CAAC,YAAY,UAAU,GAPyB,EAAA,MAAA,YAG/C,EAAA,MAAA,gEAJJ,UAAUD,IAQPC,EAAwB;CAIzBC,IAAAA;CAOO,AAAA,EAAA,QAAA,cAAA,EAAA,QALL,WAFF,MAAC,UAA+C;EAE9C,UAAU,KAAK;EAEf,IAAM,cAAc,IAAI,SAClB,SAAS,SAAS;EAEpB,CAAC,cAAc,CAAC,eAAe,CAAC,UAEhC,cAAc,MAAM,KAAK,wBAAwB,aAAa,MAAM,MACtE,eAAe,UAAU;CAE7B,GALO,EAAA,MAAA,YALL,EAAA,MAAA;CAJJ,IAAM,cAAcC,IAsBd,YAAY,IAKHC;CAAY,AAAA,EAAA,QAAA,0BAAZ,KAAA,KAAK,OAAO,SAAS,GAAT,EAAA,MAAA;CAIhBC,IAAAA;CAAI,AAAA,EAAA,QAAA,SAAA,EAAA,QAAO,UAAX,KAAA;EAAC,GAAG;EAAO;CAAM,GAAb,EAAA,MAAA,OAAO,EAAA,MAAA;CANpBC,IAAAA;CADF,OACG,EAAA,QAAA,aAAA,EAAA,QAQE,YAAA,EAAA,QAJQ,eAAA,EAAA,QAHL,aAAA,EAAA,QACOF,MAAAA,EAAAA,QAIJC,MANT,KAAA,oBAAC,WAAD;EACE,GAAI;EACJ,WAAWD;EACX,WAAQ;EACR,SAAS;EACJ;EACL,OAAOC;EAEN;CACQ,CAAA,GATV,EAAA,MAAA,WAQE,EAAA,MAAA,UAJQ,EAAA,MAAA,aAHL,EAAA,MAAA,WACOD,EAAAA,MAAAA,IAIJC,EAAAA,MAAAA,8BANTC;AAWJ;;;;AAKA,SAAgB,MAAM,OAAiE;gBAC9E,UAA0B,WAAhBC;CAA6B,AAAA,EAAA,OAAA,0DAAxC,CAAC,UAAU,SAAA,IAAa,GAAA,aAAgB;CAA7B,IAAA,UAAA,OAAA,KAAA,IAAU,IAAVA,IAIbC;CAA+B,AAAA,EAAA,OAAA,YAAA,EAAA,OAAZ,aAAnB,KAAA,oBAAC,eAAD;EAAe,GAAI;EAAY;CAAwB,CAAA,GAAxB,EAAA,KAAA,UAAZ,EAAA,KAAA;CADrBC,IAAAA;CADF,OAEID,EAAAA,OAAAA,MAAAA,EAAAA,OADsB,WAAxB,KAAA,oBAAC,eAAD;EAAwB;EACtBA,UAAAA;CACa,CAAA,GADbA,EAAAA,KAAAA,IADsB,EAAA,KAAA,iCAAxBC;AAIJ"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"layer-ChlP9Ik6.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;;;;
|
|
1
|
+
{"version":3,"file":"layer-ChlP9Ik6.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;;;;UCQK;EACf,KAAK,MAAM,oBAAoB,MAAM,IAAI;;EAEzC,cAAc;IAAQ,eAAe;;EACrC;;;;;iBAgFc,MAAM,OAAO,aAAa,KAAK,MAAM,UAAU,yCAAsB,IAAA"}
|
package/dist/menu.d.ts.map
CHANGED
|
@@ -1 +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.
|
|
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.tsx","../src/core/components/menu/menuGroup.tsx","../src/core/components/menu/menuItem.tsx"],"mappings":";;;;;;;UAiBiB,kBAAkB;;;;EAIjC;;;;EAIA;EACA,oBAAoB,OAAO;EAC3B;EACA;EACA,kBAAkB;EAClB,kBAAkB;EAClB,qBAAqB,IAAI;EACzB;EACA;;;;EAIA;EACA;EACA,mBAAmB,OAAO;;;;;;;iBAQZ,KACd,OAAO,YAAY,KAAK,MAAM,UAAU,0EAAuD,IAAA;;;;UChChF;;;;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;;;;;;;iBAQF,WAAW,OAAO,kCAAe,IAAA;;;;KCnDrC,iBAAiB,UAAU,sBAAsB,MAAM,YAAY;;;;cA0BlE,cAAkD,UAAU,oBACvE,OAAO,iBAAiB,OACrB,MAAM,IAAI;;;;UCjBE;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"}
|
package/dist/menu.js
CHANGED
|
@@ -1,14 +1,15 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { n as _getArrayProp } from "./helpers-
|
|
2
|
+
import { n as _getArrayProp } from "./helpers-C8xxXAQC.js";
|
|
3
3
|
import { i as isHTMLButtonElement, r as isHTMLAnchorElement } from "./element-BYgCE_iK.js";
|
|
4
4
|
import { t as getTheme_v2 } from "./getTheme_v2-y09KqtEb.js";
|
|
5
|
-
import { d as createGlobalScopedContext, h as _cardColorStyle, l as useRootTheme, r as isRecord, t as useLayer, v as responsiveRadiusStyle, y as Box } from "./useLayer-
|
|
6
|
-
import { t as Flex } from "./flex-
|
|
7
|
-
import { n as Text, t as Stack } from "./stack-
|
|
8
|
-
import { t as Popover } from "./popover-
|
|
9
|
-
import { t as useClickOutsideEvent } from "./useClickOutsideEvent-
|
|
10
|
-
import { i as useGlobalKeyDown, t as Hotkeys } from "./hotkeys-
|
|
5
|
+
import { d as createGlobalScopedContext, h as _cardColorStyle, l as useRootTheme, r as isRecord, t as useLayer, v as responsiveRadiusStyle, y as Box } from "./useLayer-jUJIz8mh.js";
|
|
6
|
+
import { t as Flex } from "./flex-CySCBzQm.js";
|
|
7
|
+
import { n as Text, t as Stack } from "./stack-BGFEokua.js";
|
|
8
|
+
import { t as Popover } from "./popover-CdBTZDvj.js";
|
|
9
|
+
import { t as useClickOutsideEvent } from "./useClickOutsideEvent-wGLGWBZN.js";
|
|
10
|
+
import { i as useGlobalKeyDown, t as Hotkeys } from "./hotkeys-Bi6Q5963.js";
|
|
11
11
|
import { c } from "react/compiler-runtime";
|
|
12
|
+
import { clsx } from "clsx/lite";
|
|
12
13
|
import { cloneElement, isValidElement, useContext, useEffect, useImperativeHandle, useRef, useState } from "react";
|
|
13
14
|
import { css, styled } from "styled-components";
|
|
14
15
|
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
|
|
@@ -176,43 +177,40 @@ function useMenuController(props) {
|
|
|
176
177
|
}, $[17] = activeElement, $[18] = activeIndex, $[19] = handleItemMouseLeave, $[20] = handleKeyDown, $[21] = mount, $[22] = t10) : t10 = $[22], t10;
|
|
177
178
|
}
|
|
178
179
|
function _temp$2() {}
|
|
179
|
-
|
|
180
|
-
displayName: "StyledMenu",
|
|
181
|
-
componentId: "sc-co76mp-0"
|
|
182
|
-
})`outline:none;overflow:auto;`;
|
|
180
|
+
var menu = "_196sf460";
|
|
183
181
|
/**
|
|
184
182
|
* The `Menu` component is a building block for application menus.
|
|
185
183
|
*
|
|
186
184
|
* @public
|
|
187
185
|
*/
|
|
188
186
|
function Menu(props) {
|
|
189
|
-
let $ = c(
|
|
190
|
-
$[0] === props ? (children = $[1],
|
|
187
|
+
let $ = c(54), children, className, forwardedRef, onClickOutside, onEscape, onItemClick, onItemSelect, onKeyDown, originElement, registerElement, restProps, t0, t1, t2;
|
|
188
|
+
$[0] === props ? (children = $[1], className = $[2], forwardedRef = $[3], onClickOutside = $[4], onEscape = $[5], onItemClick = $[6], onItemSelect = $[7], onKeyDown = $[8], originElement = $[9], registerElement = $[10], restProps = $[11], t0 = $[12], t1 = $[13], t2 = $[14]) : ({children, className, onClickOutside, onEscape, onItemClick, onItemSelect, onKeyDown, originElement, padding: t0, ref: forwardedRef, registerElement, shouldFocus: t1, gap: t2, ...restProps} = props, $[0] = props, $[1] = children, $[2] = className, $[3] = forwardedRef, $[4] = onClickOutside, $[5] = onEscape, $[6] = onItemClick, $[7] = onItemSelect, $[8] = onKeyDown, $[9] = originElement, $[10] = registerElement, $[11] = restProps, $[12] = t0, $[13] = t1, $[14] = t2);
|
|
191
189
|
let padding = t0 === void 0 ? 1 : t0, shouldFocus = t1 === void 0 ? null : t1, gap = t2 === void 0 ? 1 : t2, ref = useRef(null), t3;
|
|
192
|
-
$[
|
|
190
|
+
$[15] === Symbol.for("react.memo_cache_sentinel") ? (t3 = () => ref.current, $[15] = t3) : t3 = $[15], useImperativeHandle(forwardedRef, t3);
|
|
193
191
|
let { isTopLayer } = useLayer(), t4;
|
|
194
|
-
$[
|
|
192
|
+
$[16] !== onKeyDown || $[17] !== originElement || $[18] !== shouldFocus ? (t4 = {
|
|
195
193
|
onKeyDown,
|
|
196
194
|
originElement,
|
|
197
195
|
shouldFocus,
|
|
198
196
|
rootElementRef: ref
|
|
199
|
-
}, $[
|
|
197
|
+
}, $[16] = onKeyDown, $[17] = originElement, $[18] = shouldFocus, $[19] = t4) : t4 = $[19];
|
|
200
198
|
let { activeElement, activeIndex, handleItemMouseEnter, handleItemMouseLeave, handleKeyDown, mount } = useMenuController(t4), unregisterElementRef = useRef(null), t5;
|
|
201
|
-
$[
|
|
199
|
+
$[20] === registerElement ? t5 = $[21] : (t5 = (el) => {
|
|
202
200
|
unregisterElementRef.current &&= (unregisterElementRef.current(), null), ref.current = el, ref.current && registerElement && (unregisterElementRef.current = registerElement(ref.current));
|
|
203
|
-
}, $[
|
|
201
|
+
}, $[20] = registerElement, $[21] = t5);
|
|
204
202
|
let handleRefChange = t5, t6, t7;
|
|
205
|
-
$[
|
|
203
|
+
$[22] !== activeIndex || $[23] !== onItemSelect ? (t6 = () => {
|
|
206
204
|
onItemSelect && onItemSelect(activeIndex);
|
|
207
|
-
}, t7 = [activeIndex, onItemSelect], $[
|
|
205
|
+
}, t7 = [activeIndex, onItemSelect], $[22] = activeIndex, $[23] = onItemSelect, $[24] = t6, $[25] = t7) : (t6 = $[24], t7 = $[25]), useEffect(t6, t7);
|
|
208
206
|
let t8;
|
|
209
|
-
$[
|
|
207
|
+
$[26] === Symbol.for("react.memo_cache_sentinel") ? (t8 = () => [ref.current], $[26] = t8) : t8 = $[26], useClickOutsideEvent(isTopLayer && onClickOutside, t8);
|
|
210
208
|
let t9;
|
|
211
|
-
$[
|
|
209
|
+
$[27] !== isTopLayer || $[28] !== onEscape ? (t9 = (event) => {
|
|
212
210
|
isTopLayer && event.key === "Escape" && (event.stopPropagation(), onEscape && onEscape());
|
|
213
|
-
}, $[
|
|
211
|
+
}, $[27] = isTopLayer, $[28] = onEscape, $[29] = t9) : t9 = $[29], useGlobalKeyDown(t9);
|
|
214
212
|
let t10;
|
|
215
|
-
$[
|
|
213
|
+
$[30] !== activeElement || $[31] !== handleItemMouseEnter || $[32] !== handleItemMouseLeave || $[33] !== mount || $[34] !== onClickOutside || $[35] !== onEscape || $[36] !== onItemClick || $[37] !== registerElement ? (t10 = {
|
|
216
214
|
version: 2,
|
|
217
215
|
activeElement,
|
|
218
216
|
mount,
|
|
@@ -222,14 +220,17 @@ function Menu(props) {
|
|
|
222
220
|
onItemMouseEnter: handleItemMouseEnter,
|
|
223
221
|
onItemMouseLeave: handleItemMouseLeave,
|
|
224
222
|
registerElement
|
|
225
|
-
}, $[
|
|
223
|
+
}, $[30] = activeElement, $[31] = handleItemMouseEnter, $[32] = handleItemMouseLeave, $[33] = mount, $[34] = onClickOutside, $[35] = onEscape, $[36] = onItemClick, $[37] = registerElement, $[38] = t10) : t10 = $[38];
|
|
226
224
|
let value = t10, t11;
|
|
227
|
-
$[
|
|
225
|
+
$[39] === className ? t11 = $[40] : (t11 = clsx(menu, className), $[39] = className, $[40] = t11);
|
|
226
|
+
let t12;
|
|
227
|
+
$[41] !== children || $[42] !== gap ? (t12 = /* @__PURE__ */ jsx(Stack, {
|
|
228
228
|
gap,
|
|
229
229
|
children
|
|
230
|
-
}), $[
|
|
231
|
-
let
|
|
232
|
-
$[
|
|
230
|
+
}), $[41] = children, $[42] = gap, $[43] = t12) : t12 = $[43];
|
|
231
|
+
let t13;
|
|
232
|
+
$[44] !== handleKeyDown || $[45] !== handleRefChange || $[46] !== padding || $[47] !== restProps || $[48] !== t11 || $[49] !== t12 ? (t13 = /* @__PURE__ */ jsx(Box, {
|
|
233
|
+
className: t11,
|
|
233
234
|
"data-ui": "Menu",
|
|
234
235
|
...restProps,
|
|
235
236
|
onKeyDown: handleKeyDown,
|
|
@@ -237,13 +238,13 @@ function Menu(props) {
|
|
|
237
238
|
ref: handleRefChange,
|
|
238
239
|
role: "menu",
|
|
239
240
|
tabIndex: -1,
|
|
240
|
-
children: t11
|
|
241
|
-
}), $[41] = handleKeyDown, $[42] = handleRefChange, $[43] = padding, $[44] = restProps, $[45] = t11, $[46] = t12) : t12 = $[46];
|
|
242
|
-
let t13;
|
|
243
|
-
return $[47] !== t12 || $[48] !== value ? (t13 = /* @__PURE__ */ jsx(MenuContext.Provider, {
|
|
244
|
-
value,
|
|
245
241
|
children: t12
|
|
246
|
-
}), $[47] =
|
|
242
|
+
}), $[44] = handleKeyDown, $[45] = handleRefChange, $[46] = padding, $[47] = restProps, $[48] = t11, $[49] = t12, $[50] = t13) : t13 = $[50];
|
|
243
|
+
let t14;
|
|
244
|
+
return $[51] !== t13 || $[52] !== value ? (t14 = /* @__PURE__ */ jsx(MenuContext.Provider, {
|
|
245
|
+
value,
|
|
246
|
+
children: t13
|
|
247
|
+
}), $[51] = t13, $[52] = value, $[53] = t14) : t14 = $[53], t14;
|
|
247
248
|
}
|
|
248
249
|
/**
|
|
249
250
|
* The `MenuButton` component follows the WAI-ARIA specification for menu buttons.
|
|
@@ -357,13 +358,24 @@ function MenuButton(props) {
|
|
|
357
358
|
function _temp$1(v) {
|
|
358
359
|
return !v;
|
|
359
360
|
}
|
|
361
|
+
var menuDivider = "_17s3sc10";
|
|
362
|
+
function MenuDividerComponent(props) {
|
|
363
|
+
let $ = c(12), className, ref, restProps, t0;
|
|
364
|
+
$[0] === props ? (className = $[1], ref = $[2], restProps = $[3], t0 = $[4]) : ({as: t0, className, ref, ...restProps} = props, $[0] = props, $[1] = className, $[2] = ref, $[3] = restProps, $[4] = t0);
|
|
365
|
+
let Component = t0 === void 0 ? "hr" : t0, t1;
|
|
366
|
+
$[5] === className ? t1 = $[6] : (t1 = clsx(menuDivider, className), $[5] = className, $[6] = t1);
|
|
367
|
+
let t2;
|
|
368
|
+
return $[7] !== Component || $[8] !== ref || $[9] !== restProps || $[10] !== t1 ? (t2 = /* @__PURE__ */ jsx(Component, {
|
|
369
|
+
"data-ui": "MenuDivider",
|
|
370
|
+
className: t1,
|
|
371
|
+
ref,
|
|
372
|
+
...restProps
|
|
373
|
+
}), $[7] = Component, $[8] = ref, $[9] = restProps, $[10] = t1, $[11] = t2) : t2 = $[11], t2;
|
|
374
|
+
}
|
|
360
375
|
/**
|
|
361
376
|
* @public
|
|
362
377
|
*/
|
|
363
|
-
const MenuDivider =
|
|
364
|
-
displayName: "MenuDivider",
|
|
365
|
-
componentId: "sc-qxs7nk-0"
|
|
366
|
-
})`height:1px;border:0;background:var(--card-hairline-soft-color);margin:0;`;
|
|
378
|
+
const MenuDivider = MenuDividerComponent;
|
|
367
379
|
function selectableBaseStyle() {
|
|
368
380
|
return css`background-color:inherit;color:inherit;&[data-as='button']{-webkit-font-smoothing:inherit;appearance:none;outline:none;font:inherit;text-align:inherit;border:0;width:-moz-available;width:-webkit-fill-available;width:stretch;}&[data-as='a']{text-decoration:none;}`;
|
|
369
381
|
}
|