@wix/site-ui 1.29.0 → 1.31.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/1268.js +99 -0
- package/dist/1279.js +7 -0
- package/dist/1457.js +10 -0
- package/dist/1477.js +106 -0
- package/dist/1500.js +111 -0
- package/dist/167.js +6 -0
- package/dist/2274.js +34 -0
- package/dist/2287.js +17 -0
- package/dist/2418.js +31 -0
- package/dist/2801.js +20 -0
- package/dist/285.js +86 -0
- package/dist/2861.js +6 -0
- package/dist/3020.js +7 -0
- package/dist/3021.js +72 -0
- package/dist/3056.js +229 -0
- package/dist/3140.js +4 -0
- package/dist/3248.js +307 -0
- package/dist/3296.js +4 -0
- package/dist/3319.js +400 -0
- package/dist/3395.js +4 -0
- package/dist/3485.js +854 -0
- package/dist/353.js +14 -0
- package/dist/3670.js +418 -0
- package/dist/3829.js +113 -0
- package/dist/4026.js +12 -0
- package/dist/4143.js +46 -0
- package/dist/42.js +32 -0
- package/dist/4281.js +30 -0
- package/dist/4346.js +2 -0
- package/dist/4388.js +418 -0
- package/dist/4490.js +32 -0
- package/dist/4495.js +9 -0
- package/dist/4549.js +24 -0
- package/dist/4586.js +41 -0
- package/dist/4586.js.LICENSE.txt +19 -0
- package/dist/4707.js +19 -0
- package/dist/4723.js +7 -0
- package/dist/4745.js +7 -0
- package/dist/4768.js +35 -0
- package/dist/4922.js +15 -0
- package/dist/5036.js +17 -0
- package/dist/5085.js +20 -0
- package/dist/5299.js +597 -0
- package/dist/5659.js +4 -0
- package/dist/5778.js +10 -0
- package/dist/5864.js +86 -0
- package/dist/5992.js +913 -0
- package/dist/5992.js.LICENSE.txt +19 -0
- package/dist/6003.js +10 -0
- package/dist/6046.js +29 -0
- package/dist/6089.js +2355 -0
- package/dist/6107.js +10 -0
- package/dist/6247.js +20 -0
- package/dist/6270.js +487 -0
- package/dist/6329.js +32 -0
- package/dist/6330.js +30 -0
- package/dist/6499.js +7 -0
- package/dist/6535.js +71 -0
- package/dist/6588.js +382 -0
- package/dist/6706.js +16 -0
- package/dist/6825.js +7 -0
- package/dist/6882.js +1562 -0
- package/dist/6914.js +30 -0
- package/dist/7021.js +13 -0
- package/dist/7366.js +83 -0
- package/dist/7373.js +25 -0
- package/dist/7541.js +25 -0
- package/dist/7564.js +10 -0
- package/dist/7642.js +20 -0
- package/dist/7725.js +10 -0
- package/dist/7871.js +38 -0
- package/dist/8052.js +352 -0
- package/dist/8106.js +238 -0
- package/dist/8171.js +346 -0
- package/dist/8225.js +21 -0
- package/dist/8272.js +333 -0
- package/dist/8527.js +58 -0
- package/dist/8724.js +10 -0
- package/dist/8750.js +1920 -0
- package/dist/8758.js +43 -0
- package/dist/880.js +149 -0
- package/dist/8935.js +8 -0
- package/dist/8960.js +22 -0
- package/dist/8971.js +40 -0
- package/dist/8979.js +10 -0
- package/dist/8996.js +71 -0
- package/dist/904.js +121 -0
- package/dist/9048.js +52 -0
- package/dist/9087.js +256 -0
- package/dist/9189.js +158 -0
- package/dist/9255.js +136 -0
- package/dist/9352.js +148 -0
- package/dist/951.js +22 -0
- package/dist/9635.js +22 -0
- package/dist/9829.js +4 -0
- package/dist/9863.js +8 -0
- package/dist/Accordion/index.d.ts +569 -12
- package/dist/Accordion/index.js +423 -8
- package/dist/AlertDialog/index.d.ts +1417 -18
- package/dist/AlertDialog/index.js +34 -14
- package/dist/Autocomplete/index.d.ts +1861 -38
- package/dist/Autocomplete/index.js +98 -24
- package/dist/Avatar/index.d.ts +129 -7
- package/dist/Avatar/index.js +149 -6
- package/dist/Badge/index.css +44 -0
- package/dist/Badge/index.d.ts +22 -0
- package/dist/Badge/index.js +23 -0
- package/dist/Breadcrumbs/index.d.ts +960 -7
- package/dist/Breadcrumbs/index.js +5 -5
- package/dist/Button/index.d.ts +88 -6
- package/dist/Button/index.js +27 -3
- package/dist/Checkbox/index.d.ts +425 -5
- package/dist/Checkbox/index.js +45 -5
- package/dist/CheckboxGroup/index.d.ts +318 -3
- package/dist/CheckboxGroup/index.js +166 -3
- package/dist/Collapsible/index.d.ts +377 -7
- package/dist/Collapsible/index.js +160 -6
- package/dist/Combobox/index.d.ts +1984 -48
- package/dist/Combobox/index.js +352 -29
- package/dist/ContextMenu/index.d.ts +2340 -36
- package/dist/ContextMenu/index.js +197 -22
- package/dist/Dialog/index.d.ts +1355 -18
- package/dist/Dialog/index.js +16 -14
- package/dist/Drawer/index.d.ts +1653 -18
- package/dist/Drawer/index.js +2797 -20
- package/dist/Field/index.d.ts +655 -15
- package/dist/Field/index.js +677 -10
- package/dist/Fieldset/index.d.ts +94 -5
- package/dist/Fieldset/index.js +68 -5
- package/dist/Form/index.d.ts +331 -2
- package/dist/Form/index.js +106 -3
- package/dist/Input/index.d.ts +692 -3
- package/dist/Input/index.js +10 -3
- package/dist/Menu/index.d.ts +2301 -36
- package/dist/Menu/index.js +365 -26
- package/dist/Menubar/index.d.ts +2301 -3
- package/dist/Menubar/index.js +105 -3
- package/dist/Meter/index.d.ts +175 -11
- package/dist/Meter/index.js +129 -9
- package/dist/NavigationMenu/index.d.ts +978 -28
- package/dist/NavigationMenu/index.js +1034 -17
- package/dist/NumberField/index.d.ts +612 -15
- package/dist/NumberField/index.js +1409 -11
- package/dist/Popover/index.d.ts +1655 -20
- package/dist/Popover/index.js +792 -17
- package/dist/PreviewCard/index.d.ts +1523 -14
- package/dist/PreviewCard/index.js +679 -14
- package/dist/Progress/index.d.ts +183 -11
- package/dist/Progress/index.js +181 -9
- package/dist/Radio/index.d.ts +185 -6
- package/dist/Radio/index.js +253 -6
- package/dist/RadioGroup/index.d.ts +341 -2
- package/dist/RadioGroup/index.js +154 -3
- package/dist/ScrollArea/index.d.ts +265 -13
- package/dist/ScrollArea/index.js +892 -10
- package/dist/Select/index.d.ts +1493 -38
- package/dist/Select/index.js +1824 -23
- package/dist/Separator/index.d.ts +80 -6
- package/dist/Separator/index.js +3 -3
- package/dist/Slider/index.d.ts +678 -16
- package/dist/Slider/index.js +1199 -11
- package/dist/Switch/index.d.ts +393 -5
- package/dist/Switch/index.js +208 -6
- package/dist/Tabs/index.d.ts +523 -12
- package/dist/Tabs/index.js +685 -9
- package/dist/Toggle/index.d.ts +305 -2
- package/dist/Toggle/index.js +76 -3
- package/dist/ToggleGroup/index.d.ts +316 -2
- package/dist/ToggleGroup/index.js +102 -3
- package/dist/Toolbar/index.d.ts +282 -13
- package/dist/Toolbar/index.js +230 -9
- package/dist/Tooltip/index.d.ts +1572 -14
- package/dist/Tooltip/index.js +965 -14
- package/dist/index.d.ts +12758 -646
- package/dist/index.js +1 -0
- package/dist/rslib-runtime.js +18 -0
- package/package.json +3 -3
package/dist/6914.js
ADDED
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
const cache = new Map();
|
|
2
|
+
function getFormatter(locale, options) {
|
|
3
|
+
const optionsString = JSON.stringify({
|
|
4
|
+
locale,
|
|
5
|
+
options
|
|
6
|
+
});
|
|
7
|
+
const cachedFormatter = cache.get(optionsString);
|
|
8
|
+
if (cachedFormatter) return cachedFormatter;
|
|
9
|
+
const formatter = new Intl.NumberFormat(locale, options);
|
|
10
|
+
cache.set(optionsString, formatter);
|
|
11
|
+
return formatter;
|
|
12
|
+
}
|
|
13
|
+
function formatNumber(value, locale, options) {
|
|
14
|
+
if (null == value) return '';
|
|
15
|
+
return getFormatter(locale, options).format(value);
|
|
16
|
+
}
|
|
17
|
+
function formatNumberMaxPrecision(value, locale, options) {
|
|
18
|
+
return formatNumber(value, locale, {
|
|
19
|
+
...options,
|
|
20
|
+
maximumFractionDigits: 20
|
|
21
|
+
});
|
|
22
|
+
}
|
|
23
|
+
function formatNumberValue(value, locale, format) {
|
|
24
|
+
if (null == value) return '';
|
|
25
|
+
if (!format) return formatNumber(value / 100, locale, {
|
|
26
|
+
style: 'percent'
|
|
27
|
+
});
|
|
28
|
+
return formatNumber(value, locale, format);
|
|
29
|
+
}
|
|
30
|
+
export { formatNumber, formatNumberMaxPrecision, formatNumberValue, getFormatter };
|
package/dist/7021.js
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import * as __rspack_external_react from "react";
|
|
2
|
+
function usePreviousValue(value) {
|
|
3
|
+
const [state, setState] = __rspack_external_react.useState({
|
|
4
|
+
current: value,
|
|
5
|
+
previous: null
|
|
6
|
+
});
|
|
7
|
+
if (value !== state.current) setState({
|
|
8
|
+
current: value,
|
|
9
|
+
previous: state.current
|
|
10
|
+
});
|
|
11
|
+
return state.previous;
|
|
12
|
+
}
|
|
13
|
+
export { usePreviousValue };
|
package/dist/7366.js
ADDED
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { serializeValue } from "./5778.js";
|
|
3
|
+
import * as __rspack_external_react from "react";
|
|
4
|
+
const defaultItemEquality = (itemValue, selectedValue)=>Object.is(itemValue, selectedValue);
|
|
5
|
+
function compareItemEquality(itemValue, selectedValue, comparer) {
|
|
6
|
+
if (null == itemValue || null == selectedValue) return Object.is(itemValue, selectedValue);
|
|
7
|
+
return comparer(itemValue, selectedValue);
|
|
8
|
+
}
|
|
9
|
+
function selectedValueIncludes(selectedValues, itemValue, comparer) {
|
|
10
|
+
if (!selectedValues || 0 === selectedValues.length) return false;
|
|
11
|
+
return selectedValues.some((selectedValue)=>{
|
|
12
|
+
if (void 0 === selectedValue) return false;
|
|
13
|
+
return compareItemEquality(itemValue, selectedValue, comparer);
|
|
14
|
+
});
|
|
15
|
+
}
|
|
16
|
+
function findItemIndex(itemValues, selectedValue, comparer) {
|
|
17
|
+
if (!itemValues || 0 === itemValues.length) return -1;
|
|
18
|
+
return itemValues.findIndex((itemValue)=>{
|
|
19
|
+
if (void 0 === itemValue) return false;
|
|
20
|
+
return compareItemEquality(itemValue, selectedValue, comparer);
|
|
21
|
+
});
|
|
22
|
+
}
|
|
23
|
+
function removeItem(selectedValues, itemValue, comparer) {
|
|
24
|
+
return selectedValues.filter((selectedValue)=>!compareItemEquality(itemValue, selectedValue, comparer));
|
|
25
|
+
}
|
|
26
|
+
function isGroupedItems(items) {
|
|
27
|
+
return null != items && items.length > 0 && 'object' == typeof items[0] && null != items[0] && 'items' in items[0];
|
|
28
|
+
}
|
|
29
|
+
function hasNullItemLabel(items) {
|
|
30
|
+
if (!Array.isArray(items)) return null != items && 'null' in items;
|
|
31
|
+
const arrayItems = items;
|
|
32
|
+
if (isGroupedItems(arrayItems)) {
|
|
33
|
+
for (const group of arrayItems)for (const item of group.items)if (item && null == item.value && null != item.label) return true;
|
|
34
|
+
return false;
|
|
35
|
+
}
|
|
36
|
+
for (const item of arrayItems)if (item && null == item.value && null != item.label) return true;
|
|
37
|
+
return false;
|
|
38
|
+
}
|
|
39
|
+
function stringifyAsLabel(item, itemToStringLabel) {
|
|
40
|
+
if (itemToStringLabel && null != item) return itemToStringLabel(item) ?? '';
|
|
41
|
+
if (item && 'object' == typeof item) {
|
|
42
|
+
if ('label' in item && null != item.label) return String(item.label);
|
|
43
|
+
if ('value' in item) return String(item.value);
|
|
44
|
+
}
|
|
45
|
+
return serializeValue(item);
|
|
46
|
+
}
|
|
47
|
+
function stringifyAsValue(item, itemToStringValue) {
|
|
48
|
+
if (itemToStringValue && null != item) return itemToStringValue(item) ?? '';
|
|
49
|
+
if (item && 'object' == typeof item && 'value' in item && 'label' in item) return serializeValue(item.value);
|
|
50
|
+
return serializeValue(item);
|
|
51
|
+
}
|
|
52
|
+
function resolveSelectedLabel(value, items, itemToStringLabel) {
|
|
53
|
+
function fallback() {
|
|
54
|
+
return stringifyAsLabel(value, itemToStringLabel);
|
|
55
|
+
}
|
|
56
|
+
if (itemToStringLabel && null != value) return itemToStringLabel(value);
|
|
57
|
+
if (value && 'object' == typeof value && 'label' in value && null != value.label) return value.label;
|
|
58
|
+
if (items && !Array.isArray(items)) return items[value] ?? fallback();
|
|
59
|
+
if (Array.isArray(items)) {
|
|
60
|
+
const arrayItems = items;
|
|
61
|
+
const flatItems = isGroupedItems(arrayItems) ? arrayItems.flatMap((group)=>group.items) : arrayItems;
|
|
62
|
+
if (null == value || 'object' != typeof value) {
|
|
63
|
+
const match = flatItems.find((item)=>item.value === value);
|
|
64
|
+
if (match && null != match.label) return match.label;
|
|
65
|
+
return fallback();
|
|
66
|
+
}
|
|
67
|
+
if ('value' in value) {
|
|
68
|
+
const match = flatItems.find((item)=>item && item.value === value.value);
|
|
69
|
+
if (match && null != match.label) return match.label;
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
return fallback();
|
|
73
|
+
}
|
|
74
|
+
function resolveMultipleLabels(values, items, itemToStringLabel) {
|
|
75
|
+
return values.reduce((acc, value, index)=>{
|
|
76
|
+
if (index > 0) acc.push(', ');
|
|
77
|
+
acc.push(/*#__PURE__*/ jsx(__rspack_external_react.Fragment, {
|
|
78
|
+
children: resolveSelectedLabel(value, items, itemToStringLabel)
|
|
79
|
+
}, index));
|
|
80
|
+
return acc;
|
|
81
|
+
}, []);
|
|
82
|
+
}
|
|
83
|
+
export { compareItemEquality, defaultItemEquality, findItemIndex, hasNullItemLabel, isGroupedItems, removeItem, resolveMultipleLabels, resolveSelectedLabel, selectedValueIncludes, stringifyAsLabel, stringifyAsValue };
|
package/dist/7373.js
ADDED
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { getWindow } from "./3829.js";
|
|
2
|
+
function getPseudoElementBounds(element) {
|
|
3
|
+
const elementRect = element.getBoundingClientRect();
|
|
4
|
+
if ('production' !== process.env.NODE_ENV) return elementRect;
|
|
5
|
+
const win = getWindow(element);
|
|
6
|
+
const beforeStyles = win.getComputedStyle(element, '::before');
|
|
7
|
+
const afterStyles = win.getComputedStyle(element, '::after');
|
|
8
|
+
const hasPseudoElements = 'none' !== beforeStyles.content || 'none' !== afterStyles.content;
|
|
9
|
+
if (!hasPseudoElements) return elementRect;
|
|
10
|
+
const beforeWidth = parseFloat(beforeStyles.width) || 0;
|
|
11
|
+
const beforeHeight = parseFloat(beforeStyles.height) || 0;
|
|
12
|
+
const afterWidth = parseFloat(afterStyles.width) || 0;
|
|
13
|
+
const afterHeight = parseFloat(afterStyles.height) || 0;
|
|
14
|
+
const totalWidth = Math.max(elementRect.width, beforeWidth, afterWidth);
|
|
15
|
+
const totalHeight = Math.max(elementRect.height, beforeHeight, afterHeight);
|
|
16
|
+
const widthDiff = totalWidth - elementRect.width;
|
|
17
|
+
const heightDiff = totalHeight - elementRect.height;
|
|
18
|
+
return {
|
|
19
|
+
left: elementRect.left - widthDiff / 2,
|
|
20
|
+
right: elementRect.right + widthDiff / 2,
|
|
21
|
+
top: elementRect.top - heightDiff / 2,
|
|
22
|
+
bottom: elementRect.bottom + heightDiff / 2
|
|
23
|
+
};
|
|
24
|
+
}
|
|
25
|
+
export { getPseudoElementBounds };
|
package/dist/7541.js
ADDED
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { SafeReact } from "./6499.js";
|
|
2
|
+
import { useRefWithInit } from "./8272.js";
|
|
3
|
+
const useInsertionEffect = SafeReact.useInsertionEffect;
|
|
4
|
+
const useSafeInsertionEffect = useInsertionEffect && useInsertionEffect !== SafeReact.useLayoutEffect ? useInsertionEffect : (fn)=>fn();
|
|
5
|
+
function useStableCallback(callback) {
|
|
6
|
+
const stable = useRefWithInit(createStableCallback).current;
|
|
7
|
+
stable.next = callback;
|
|
8
|
+
useSafeInsertionEffect(stable.effect);
|
|
9
|
+
return stable.trampoline;
|
|
10
|
+
}
|
|
11
|
+
function createStableCallback() {
|
|
12
|
+
const stable = {
|
|
13
|
+
next: void 0,
|
|
14
|
+
callback: assertNotCalled,
|
|
15
|
+
trampoline: (...args)=>stable.callback?.(...args),
|
|
16
|
+
effect: ()=>{
|
|
17
|
+
stable.callback = stable.next;
|
|
18
|
+
}
|
|
19
|
+
};
|
|
20
|
+
return stable;
|
|
21
|
+
}
|
|
22
|
+
function assertNotCalled() {
|
|
23
|
+
if ('production' !== process.env.NODE_ENV) throw new Error('Base UI: Cannot call an event handler while rendering.');
|
|
24
|
+
}
|
|
25
|
+
export { useStableCallback };
|
package/dist/7564.js
ADDED
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { esm_formatErrorMessage } from "./8272.js";
|
|
2
|
+
import * as __rspack_external_react from "react";
|
|
3
|
+
const MenubarContext = /*#__PURE__*/ __rspack_external_react.createContext(null);
|
|
4
|
+
if ("production" !== process.env.NODE_ENV) MenubarContext.displayName = "MenubarContext";
|
|
5
|
+
function useMenubarContext(optional) {
|
|
6
|
+
const context = __rspack_external_react.useContext(MenubarContext);
|
|
7
|
+
if (null === context && !optional) throw new Error("production" !== process.env.NODE_ENV ? 'Base UI: MenubarContext is missing. Menubar parts must be placed within <Menubar>.' : esm_formatErrorMessage(5));
|
|
8
|
+
return context;
|
|
9
|
+
}
|
|
10
|
+
export { MenubarContext, useMenubarContext };
|
package/dist/7642.js
ADDED
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { getComputedStyle, isHTMLElement } from "./3829.js";
|
|
2
|
+
import { round } from "./3319.js";
|
|
3
|
+
function getCssDimensions(element) {
|
|
4
|
+
const css = getComputedStyle(element);
|
|
5
|
+
let width = parseFloat(css.width) || 0;
|
|
6
|
+
let height = parseFloat(css.height) || 0;
|
|
7
|
+
const hasOffset = isHTMLElement(element);
|
|
8
|
+
const offsetWidth = hasOffset ? element.offsetWidth : width;
|
|
9
|
+
const offsetHeight = hasOffset ? element.offsetHeight : height;
|
|
10
|
+
const shouldFallback = round(width) !== offsetWidth || round(height) !== offsetHeight;
|
|
11
|
+
if (shouldFallback) {
|
|
12
|
+
width = offsetWidth;
|
|
13
|
+
height = offsetHeight;
|
|
14
|
+
}
|
|
15
|
+
return {
|
|
16
|
+
width,
|
|
17
|
+
height
|
|
18
|
+
};
|
|
19
|
+
}
|
|
20
|
+
export { getCssDimensions };
|
package/dist/7725.js
ADDED
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { esm_formatErrorMessage } from "./8272.js";
|
|
2
|
+
import * as __rspack_external_react from "react";
|
|
3
|
+
const ToggleGroupContext = /*#__PURE__*/ __rspack_external_react.createContext(void 0);
|
|
4
|
+
if ("production" !== process.env.NODE_ENV) ToggleGroupContext.displayName = "ToggleGroupContext";
|
|
5
|
+
function useToggleGroupContext(optional = true) {
|
|
6
|
+
const context = __rspack_external_react.useContext(ToggleGroupContext);
|
|
7
|
+
if (void 0 === context && !optional) throw new Error("production" !== process.env.NODE_ENV ? 'Base UI: ToggleGroupContext is missing. ToggleGroup parts must be placed within <ToggleGroup>.' : esm_formatErrorMessage(7));
|
|
8
|
+
return context;
|
|
9
|
+
}
|
|
10
|
+
export { ToggleGroupContext, useToggleGroupContext };
|
package/dist/7871.js
ADDED
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import { createChangeEventDetails } from "./4768.js";
|
|
2
|
+
import { focusOut } from "./2418.js";
|
|
3
|
+
import { getTabbableBeforeElement, isOutsideEvent, getNextTabbable, getTabbableAfterElement } from "./4388.js";
|
|
4
|
+
import { contains } from "./4549.js";
|
|
5
|
+
import * as __rspack_external_react from "react";
|
|
6
|
+
import * as __rspack_external_react_dom_7136dc57 from "react-dom";
|
|
7
|
+
function useTriggerFocusGuards(store, triggerElementRef) {
|
|
8
|
+
const preFocusGuardRef = __rspack_external_react.useRef(null);
|
|
9
|
+
function handlePreFocusGuardFocus(event) {
|
|
10
|
+
__rspack_external_react_dom_7136dc57.flushSync(()=>{
|
|
11
|
+
store.setOpen(false, createChangeEventDetails(focusOut, event.nativeEvent, event.currentTarget));
|
|
12
|
+
});
|
|
13
|
+
const previousTabbable = getTabbableBeforeElement(preFocusGuardRef.current);
|
|
14
|
+
previousTabbable?.focus();
|
|
15
|
+
}
|
|
16
|
+
function handleFocusTargetFocus(event) {
|
|
17
|
+
const positionerElement = store.select('positionerElement');
|
|
18
|
+
if (positionerElement && isOutsideEvent(event, positionerElement)) store.context.beforeContentFocusGuardRef.current?.focus();
|
|
19
|
+
else {
|
|
20
|
+
__rspack_external_react_dom_7136dc57.flushSync(()=>{
|
|
21
|
+
store.setOpen(false, createChangeEventDetails(focusOut, event.nativeEvent, event.currentTarget));
|
|
22
|
+
});
|
|
23
|
+
let nextTabbable = getTabbableAfterElement(store.context.triggerFocusTargetRef.current || triggerElementRef.current);
|
|
24
|
+
while(null !== nextTabbable && contains(positionerElement, nextTabbable)){
|
|
25
|
+
const prevTabbable = nextTabbable;
|
|
26
|
+
nextTabbable = getNextTabbable(nextTabbable);
|
|
27
|
+
if (nextTabbable === prevTabbable) break;
|
|
28
|
+
}
|
|
29
|
+
nextTabbable?.focus();
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
return {
|
|
33
|
+
preFocusGuardRef,
|
|
34
|
+
handlePreFocusGuardFocus,
|
|
35
|
+
handleFocusTargetFocus
|
|
36
|
+
};
|
|
37
|
+
}
|
|
38
|
+
export { useTriggerFocusGuards };
|
package/dist/8052.js
ADDED
|
@@ -0,0 +1,352 @@
|
|
|
1
|
+
import { useControlled } from "./8527.js";
|
|
2
|
+
import { useAnimationsFinished, stateAttributesMapping_TransitionStatusDataAttributes, useTransitionStatus, useOpenChangeComplete } from "./880.js";
|
|
3
|
+
import { useBaseUiId } from "./6046.js";
|
|
4
|
+
import { useStableCallback } from "./7541.js";
|
|
5
|
+
import { createChangeEventDetails } from "./4768.js";
|
|
6
|
+
import { triggerPress } from "./2418.js";
|
|
7
|
+
import { useMergedRefs, warn, esm_formatErrorMessage } from "./8272.js";
|
|
8
|
+
import { useValueAsRef } from "./4707.js";
|
|
9
|
+
import { useIsoLayoutEffect } from "./6499.js";
|
|
10
|
+
import { AnimationFrame } from "./8996.js";
|
|
11
|
+
import { addEventListener } from "./4723.js";
|
|
12
|
+
import { getWindow } from "./3829.js";
|
|
13
|
+
import * as __rspack_external_react from "react";
|
|
14
|
+
function useCollapsibleRoot(parameters) {
|
|
15
|
+
const { open: openParam, defaultOpen, onOpenChange, disabled } = parameters;
|
|
16
|
+
const [open, setOpen] = useControlled({
|
|
17
|
+
controlled: openParam,
|
|
18
|
+
default: defaultOpen,
|
|
19
|
+
name: 'Collapsible',
|
|
20
|
+
state: 'open'
|
|
21
|
+
});
|
|
22
|
+
const { mounted, setMounted, transitionStatus } = useTransitionStatus(open, true, true);
|
|
23
|
+
const defaultPanelId = useBaseUiId();
|
|
24
|
+
const [panelIdState, setPanelIdState] = __rspack_external_react.useState();
|
|
25
|
+
const panelId = panelIdState ?? defaultPanelId;
|
|
26
|
+
const handleTrigger = useStableCallback((event)=>{
|
|
27
|
+
const nextOpen = !open;
|
|
28
|
+
const eventDetails = createChangeEventDetails(triggerPress, event.nativeEvent);
|
|
29
|
+
onOpenChange(nextOpen, eventDetails);
|
|
30
|
+
if (eventDetails.isCanceled) return;
|
|
31
|
+
setOpen(nextOpen);
|
|
32
|
+
});
|
|
33
|
+
return __rspack_external_react.useMemo(()=>({
|
|
34
|
+
disabled,
|
|
35
|
+
handleTrigger,
|
|
36
|
+
mounted,
|
|
37
|
+
open,
|
|
38
|
+
panelId,
|
|
39
|
+
setMounted,
|
|
40
|
+
setOpen,
|
|
41
|
+
setPanelIdState,
|
|
42
|
+
transitionStatus
|
|
43
|
+
}), [
|
|
44
|
+
disabled,
|
|
45
|
+
handleTrigger,
|
|
46
|
+
mounted,
|
|
47
|
+
open,
|
|
48
|
+
panelId,
|
|
49
|
+
setMounted,
|
|
50
|
+
setOpen,
|
|
51
|
+
setPanelIdState,
|
|
52
|
+
transitionStatus
|
|
53
|
+
]);
|
|
54
|
+
}
|
|
55
|
+
const CollapsibleRootContext = /*#__PURE__*/ __rspack_external_react.createContext(void 0);
|
|
56
|
+
if ("production" !== process.env.NODE_ENV) CollapsibleRootContext.displayName = "CollapsibleRootContext";
|
|
57
|
+
function useCollapsibleRootContext() {
|
|
58
|
+
const context = __rspack_external_react.useContext(CollapsibleRootContext);
|
|
59
|
+
if (void 0 === context) throw new Error("production" !== process.env.NODE_ENV ? 'Base UI: CollapsibleRootContext is missing. Collapsible parts must be placed within <Collapsible.Root>.' : esm_formatErrorMessage(15));
|
|
60
|
+
return context;
|
|
61
|
+
}
|
|
62
|
+
let CollapsiblePanelDataAttributes_CollapsiblePanelDataAttributes = function(CollapsiblePanelDataAttributes) {
|
|
63
|
+
CollapsiblePanelDataAttributes["open"] = "data-open";
|
|
64
|
+
CollapsiblePanelDataAttributes["closed"] = "data-closed";
|
|
65
|
+
CollapsiblePanelDataAttributes[CollapsiblePanelDataAttributes["startingStyle"] = stateAttributesMapping_TransitionStatusDataAttributes.startingStyle] = "startingStyle";
|
|
66
|
+
CollapsiblePanelDataAttributes[CollapsiblePanelDataAttributes["endingStyle"] = stateAttributesMapping_TransitionStatusDataAttributes.endingStyle] = "endingStyle";
|
|
67
|
+
return CollapsiblePanelDataAttributes;
|
|
68
|
+
}({});
|
|
69
|
+
let CollapsibleTriggerDataAttributes_CollapsibleTriggerDataAttributes = /*#__PURE__*/ function(CollapsibleTriggerDataAttributes) {
|
|
70
|
+
CollapsibleTriggerDataAttributes["panelOpen"] = "data-panel-open";
|
|
71
|
+
return CollapsibleTriggerDataAttributes;
|
|
72
|
+
}({});
|
|
73
|
+
const PANEL_OPEN_HOOK = {
|
|
74
|
+
[CollapsiblePanelDataAttributes_CollapsiblePanelDataAttributes.open]: ''
|
|
75
|
+
};
|
|
76
|
+
const PANEL_CLOSED_HOOK = {
|
|
77
|
+
[CollapsiblePanelDataAttributes_CollapsiblePanelDataAttributes.closed]: ''
|
|
78
|
+
};
|
|
79
|
+
const triggerOpenStateMapping = {
|
|
80
|
+
open (value) {
|
|
81
|
+
if (value) return {
|
|
82
|
+
[CollapsibleTriggerDataAttributes_CollapsibleTriggerDataAttributes.panelOpen]: ''
|
|
83
|
+
};
|
|
84
|
+
return null;
|
|
85
|
+
}
|
|
86
|
+
};
|
|
87
|
+
const collapsibleOpenStateMapping = {
|
|
88
|
+
open (value) {
|
|
89
|
+
if (value) return PANEL_OPEN_HOOK;
|
|
90
|
+
return PANEL_CLOSED_HOOK;
|
|
91
|
+
}
|
|
92
|
+
};
|
|
93
|
+
const EMPTY_DIMENSIONS = {
|
|
94
|
+
height: void 0,
|
|
95
|
+
width: void 0
|
|
96
|
+
};
|
|
97
|
+
function useCollapsiblePanel(parameters) {
|
|
98
|
+
const { externalRef, hiddenUntilFound, id: idParam, keepMounted, mounted, onOpenChange, open, setMounted, setOpen, transitionStatus } = parameters;
|
|
99
|
+
const panelRef = __rspack_external_react.useRef(null);
|
|
100
|
+
const animationTypeRef = __rspack_external_react.useRef(null);
|
|
101
|
+
const [dimensions, setDimensionsUnwrapped] = __rspack_external_react.useState(EMPTY_DIMENSIONS);
|
|
102
|
+
const lastMeasuredDimensionsRef = __rspack_external_react.useRef(EMPTY_DIMENSIONS);
|
|
103
|
+
const shouldSkipNextOpenRef = __rspack_external_react.useRef(false);
|
|
104
|
+
const shouldPreventMountAnimationRef = __rspack_external_react.useRef(open);
|
|
105
|
+
const shouldPreventActivityResumeAnimationRef = __rspack_external_react.useRef(false);
|
|
106
|
+
const [forcePanelIdle, setForcePanelIdle] = __rspack_external_react.useState(false);
|
|
107
|
+
const pendingTemporaryStyleRestoreRef = __rspack_external_react.useRef(null);
|
|
108
|
+
const mergedPanelRef = useMergedRefs(externalRef, panelRef);
|
|
109
|
+
const latestStateRef = useValueAsRef({
|
|
110
|
+
mounted,
|
|
111
|
+
open
|
|
112
|
+
});
|
|
113
|
+
const runOnceCloseAnimationsFinish = useAnimationsFinished(panelRef, false, false);
|
|
114
|
+
const hidden = !open && !mounted;
|
|
115
|
+
const panelTransitionStatus = forcePanelIdle ? 'idle' : transitionStatus;
|
|
116
|
+
const shouldPreventOpenAnimation = open && (shouldPreventMountAnimationRef.current || shouldPreventActivityResumeAnimationRef.current);
|
|
117
|
+
const renderedDimensions = !open && mounted && 'css-animation' === animationTypeRef.current && void 0 === dimensions.height && void 0 === dimensions.width ? lastMeasuredDimensionsRef.current : dimensions;
|
|
118
|
+
const shouldPersistHiddenTransitionStyles = hiddenUntilFound && hidden && 'css-animation' !== animationTypeRef.current;
|
|
119
|
+
const setDimensions = useStableCallback((nextDimensions, shouldCacheMeasurement = true)=>{
|
|
120
|
+
if (shouldCacheMeasurement) lastMeasuredDimensionsRef.current = nextDimensions;
|
|
121
|
+
setDimensionsUnwrapped(nextDimensions);
|
|
122
|
+
});
|
|
123
|
+
const restorePendingTemporaryStyle = useStableCallback(()=>{
|
|
124
|
+
pendingTemporaryStyleRestoreRef.current?.();
|
|
125
|
+
pendingTemporaryStyleRestoreRef.current = null;
|
|
126
|
+
});
|
|
127
|
+
const setPendingTemporaryStyleRestore = useStableCallback((restore)=>{
|
|
128
|
+
restorePendingTemporaryStyle();
|
|
129
|
+
pendingTemporaryStyleRestoreRef.current = ()=>{
|
|
130
|
+
pendingTemporaryStyleRestoreRef.current = null;
|
|
131
|
+
restore();
|
|
132
|
+
};
|
|
133
|
+
});
|
|
134
|
+
const markActivityResumeAnimationSuppressed = useStableCallback(()=>{
|
|
135
|
+
if (open && mounted && 'css-animation' === animationTypeRef.current) shouldPreventActivityResumeAnimationRef.current = true;
|
|
136
|
+
});
|
|
137
|
+
useIsoLayoutEffect(()=>{
|
|
138
|
+
if (!forcePanelIdle || 'starting' === transitionStatus) return;
|
|
139
|
+
setForcePanelIdle(false);
|
|
140
|
+
}, [
|
|
141
|
+
forcePanelIdle,
|
|
142
|
+
transitionStatus
|
|
143
|
+
]);
|
|
144
|
+
__rspack_external_react.useEffect(()=>()=>{
|
|
145
|
+
markActivityResumeAnimationSuppressed();
|
|
146
|
+
restorePendingTemporaryStyle();
|
|
147
|
+
}, [
|
|
148
|
+
markActivityResumeAnimationSuppressed,
|
|
149
|
+
restorePendingTemporaryStyle
|
|
150
|
+
]);
|
|
151
|
+
useIsoLayoutEffect(()=>{
|
|
152
|
+
const panel = panelRef.current;
|
|
153
|
+
if (!panel) return;
|
|
154
|
+
if (!open && pendingTemporaryStyleRestoreRef.current) restorePendingTemporaryStyle();
|
|
155
|
+
const animationType = getAnimationType(panel, shouldPreventOpenAnimation);
|
|
156
|
+
animationTypeRef.current = animationType;
|
|
157
|
+
if (open && 'idle' === transitionStatus && shouldPreventMountAnimationRef.current && 'css-animation' === animationType) {
|
|
158
|
+
lastMeasuredDimensionsRef.current = getDimensions(panel);
|
|
159
|
+
return;
|
|
160
|
+
}
|
|
161
|
+
if (open && 'starting' === transitionStatus) {
|
|
162
|
+
const skipNextOpen = shouldSkipNextOpenRef.current;
|
|
163
|
+
shouldSkipNextOpenRef.current = false;
|
|
164
|
+
if ('none' === animationType) {
|
|
165
|
+
setDimensions(getDimensions(panel));
|
|
166
|
+
setForcePanelIdle(true);
|
|
167
|
+
return;
|
|
168
|
+
}
|
|
169
|
+
if ('css-transition' === animationType) {
|
|
170
|
+
const restoreLayoutStyles = resetLayoutStyles(panel);
|
|
171
|
+
setDimensions(getDimensions(panel));
|
|
172
|
+
if (!skipNextOpen) return restoreLayoutStyles;
|
|
173
|
+
const restoreTransitionDuration = setTemporaryStyle(panel, 'transition-duration', '0s');
|
|
174
|
+
setPendingTemporaryStyleRestore(restoreTransitionDuration);
|
|
175
|
+
setForcePanelIdle(true);
|
|
176
|
+
return restoreLayoutStyles;
|
|
177
|
+
}
|
|
178
|
+
if ('css-animation' === animationType) {
|
|
179
|
+
setDimensions(getDimensions(panel));
|
|
180
|
+
if (!skipNextOpen) {
|
|
181
|
+
const restoreAnimationName = setTemporaryStyle(panel, 'animation-name', 'none');
|
|
182
|
+
restoreAnimationName();
|
|
183
|
+
return;
|
|
184
|
+
}
|
|
185
|
+
const restoreAnimationName = setTemporaryStyle(panel, 'animation-name', 'none');
|
|
186
|
+
const restoreAnimationDuration = setTemporaryStyle(panel, 'animation-duration', '0s');
|
|
187
|
+
restoreAnimationName();
|
|
188
|
+
setPendingTemporaryStyleRestore(restoreAnimationDuration);
|
|
189
|
+
setForcePanelIdle(true);
|
|
190
|
+
return;
|
|
191
|
+
}
|
|
192
|
+
}
|
|
193
|
+
if (!open && mounted && ('idle' === transitionStatus || 'starting' === transitionStatus)) {
|
|
194
|
+
if ('none' === animationType) {
|
|
195
|
+
setDimensions(EMPTY_DIMENSIONS, false);
|
|
196
|
+
setMounted(false);
|
|
197
|
+
return;
|
|
198
|
+
}
|
|
199
|
+
if ('css-animation' === animationType) {
|
|
200
|
+
shouldPreventMountAnimationRef.current = false;
|
|
201
|
+
shouldPreventActivityResumeAnimationRef.current = false;
|
|
202
|
+
}
|
|
203
|
+
setDimensions(getDimensions(panel));
|
|
204
|
+
return;
|
|
205
|
+
}
|
|
206
|
+
if ('ending' !== transitionStatus) return;
|
|
207
|
+
if ('none' === animationType) return void setMounted(false);
|
|
208
|
+
const nextDimensions = getDimensions(panel);
|
|
209
|
+
const hasMeasuredSize = (nextDimensions.height ?? 0) > 0 || (nextDimensions.width ?? 0) > 0;
|
|
210
|
+
if (!hasMeasuredSize) return void setMounted(false);
|
|
211
|
+
setDimensions(nextDimensions);
|
|
212
|
+
if ('css-animation' === animationType) {
|
|
213
|
+
const restoreAnimationName = setTemporaryStyle(panel, 'animation-name', 'none');
|
|
214
|
+
restoreAnimationName();
|
|
215
|
+
}
|
|
216
|
+
}, [
|
|
217
|
+
mounted,
|
|
218
|
+
open,
|
|
219
|
+
restorePendingTemporaryStyle,
|
|
220
|
+
setDimensions,
|
|
221
|
+
setMounted,
|
|
222
|
+
setPendingTemporaryStyleRestore,
|
|
223
|
+
shouldPreventOpenAnimation,
|
|
224
|
+
transitionStatus
|
|
225
|
+
]);
|
|
226
|
+
useOpenChangeComplete({
|
|
227
|
+
enabled: open && mounted && 'idle' === panelTransitionStatus,
|
|
228
|
+
open: true,
|
|
229
|
+
ref: panelRef,
|
|
230
|
+
onComplete () {
|
|
231
|
+
if (!open) return;
|
|
232
|
+
setDimensions(EMPTY_DIMENSIONS, false);
|
|
233
|
+
}
|
|
234
|
+
});
|
|
235
|
+
__rspack_external_react.useEffect(()=>{
|
|
236
|
+
if (open || !mounted || 'ending' !== panelTransitionStatus) return;
|
|
237
|
+
const panel = panelRef.current;
|
|
238
|
+
if (!panel) return;
|
|
239
|
+
const abortController = new AbortController();
|
|
240
|
+
let endingStyleFrame = -1;
|
|
241
|
+
function handleComplete() {
|
|
242
|
+
if (latestStateRef.current.open) return;
|
|
243
|
+
setMounted(false);
|
|
244
|
+
setDimensions(EMPTY_DIMENSIONS, false);
|
|
245
|
+
}
|
|
246
|
+
endingStyleFrame = AnimationFrame.request(()=>{
|
|
247
|
+
if (!abortController.signal.aborted) runOnceCloseAnimationsFinish(handleComplete, abortController.signal);
|
|
248
|
+
});
|
|
249
|
+
return ()=>{
|
|
250
|
+
AnimationFrame.cancel(endingStyleFrame);
|
|
251
|
+
abortController.abort();
|
|
252
|
+
};
|
|
253
|
+
}, [
|
|
254
|
+
latestStateRef,
|
|
255
|
+
mounted,
|
|
256
|
+
open,
|
|
257
|
+
panelTransitionStatus,
|
|
258
|
+
runOnceCloseAnimationsFinish,
|
|
259
|
+
setDimensions,
|
|
260
|
+
setMounted
|
|
261
|
+
]);
|
|
262
|
+
useIsoLayoutEffect(()=>{
|
|
263
|
+
const panel = panelRef.current;
|
|
264
|
+
if (!panel || !hiddenUntilFound || !hidden) return;
|
|
265
|
+
panel.setAttribute('hidden', 'until-found');
|
|
266
|
+
}, [
|
|
267
|
+
hidden,
|
|
268
|
+
hiddenUntilFound
|
|
269
|
+
]);
|
|
270
|
+
__rspack_external_react.useEffect(function() {
|
|
271
|
+
const panel = panelRef.current;
|
|
272
|
+
if (!panel) return;
|
|
273
|
+
function handleBeforeMatch(event) {
|
|
274
|
+
shouldSkipNextOpenRef.current = true;
|
|
275
|
+
setOpen(true);
|
|
276
|
+
onOpenChange(true, createChangeEventDetails("none", event));
|
|
277
|
+
}
|
|
278
|
+
return addEventListener(panel, 'beforematch', handleBeforeMatch);
|
|
279
|
+
}, [
|
|
280
|
+
onOpenChange,
|
|
281
|
+
setOpen
|
|
282
|
+
]);
|
|
283
|
+
const shouldRender = keepMounted || hiddenUntilFound || mounted || open;
|
|
284
|
+
return {
|
|
285
|
+
height: renderedDimensions.height,
|
|
286
|
+
props: {
|
|
287
|
+
...shouldPersistHiddenTransitionStyles ? {
|
|
288
|
+
[CollapsiblePanelDataAttributes_CollapsiblePanelDataAttributes.startingStyle]: ''
|
|
289
|
+
} : void 0,
|
|
290
|
+
hidden,
|
|
291
|
+
id: idParam
|
|
292
|
+
},
|
|
293
|
+
ref: mergedPanelRef,
|
|
294
|
+
shouldPreventOpenAnimation,
|
|
295
|
+
shouldRender,
|
|
296
|
+
transitionStatus: panelTransitionStatus,
|
|
297
|
+
width: renderedDimensions.width
|
|
298
|
+
};
|
|
299
|
+
}
|
|
300
|
+
function getDimensions(element) {
|
|
301
|
+
return {
|
|
302
|
+
height: element.scrollHeight,
|
|
303
|
+
width: element.scrollWidth
|
|
304
|
+
};
|
|
305
|
+
}
|
|
306
|
+
function getAnimationType(element, hasSuppressedMountAnimation = false) {
|
|
307
|
+
const panelStyles = getWindow(element).getComputedStyle(element);
|
|
308
|
+
const hasAnimation = (panelStyles.animationName.split(',').map((name)=>name.trim()).some((name)=>'' !== name && 'none' !== name) || hasSuppressedMountAnimation) && hasNonZeroDuration(panelStyles.animationDuration);
|
|
309
|
+
const hasTransition = hasNonZeroDuration(panelStyles.transitionDuration);
|
|
310
|
+
if (hasAnimation && hasTransition) {
|
|
311
|
+
if ('production' !== process.env.NODE_ENV) warn('CSS transitions and CSS animations both detected on Collapsible or Accordion panel.', 'Only one of either animation type should be used.');
|
|
312
|
+
return 'css-transition';
|
|
313
|
+
}
|
|
314
|
+
if (hasTransition) return 'css-transition';
|
|
315
|
+
if (hasAnimation) return 'css-animation';
|
|
316
|
+
return 'none';
|
|
317
|
+
}
|
|
318
|
+
function hasNonZeroDuration(value) {
|
|
319
|
+
return value.split(',').map((part)=>part.trim()).some((part)=>'' !== part && Number.parseFloat(part) > 0);
|
|
320
|
+
}
|
|
321
|
+
function setTemporaryStyle(element, property, value) {
|
|
322
|
+
const previousValue = element.style.getPropertyValue(property);
|
|
323
|
+
const previousPriority = element.style.getPropertyPriority(property);
|
|
324
|
+
element.style.setProperty(property, value);
|
|
325
|
+
return ()=>{
|
|
326
|
+
if ('' === previousValue) return void element.style.removeProperty(property);
|
|
327
|
+
element.style.setProperty(property, previousValue, previousPriority);
|
|
328
|
+
};
|
|
329
|
+
}
|
|
330
|
+
function resetLayoutStyles(element) {
|
|
331
|
+
const originalLayoutStyles = {
|
|
332
|
+
'justify-content': element.style.justifyContent,
|
|
333
|
+
'align-items': element.style.alignItems,
|
|
334
|
+
'align-content': element.style.alignContent,
|
|
335
|
+
'justify-items': element.style.justifyItems
|
|
336
|
+
};
|
|
337
|
+
Object.keys(originalLayoutStyles).forEach((key)=>{
|
|
338
|
+
element.style.setProperty(key, 'initial', 'important');
|
|
339
|
+
});
|
|
340
|
+
function restoreLayoutStyles() {
|
|
341
|
+
Object.entries(originalLayoutStyles).forEach(([key, value])=>{
|
|
342
|
+
if ('' === value) return void element.style.removeProperty(key);
|
|
343
|
+
element.style.setProperty(key, value);
|
|
344
|
+
});
|
|
345
|
+
}
|
|
346
|
+
const frame = AnimationFrame.request(restoreLayoutStyles);
|
|
347
|
+
return ()=>{
|
|
348
|
+
AnimationFrame.cancel(frame);
|
|
349
|
+
restoreLayoutStyles();
|
|
350
|
+
};
|
|
351
|
+
}
|
|
352
|
+
export { CollapsibleRootContext, collapsibleOpenStateMapping, triggerOpenStateMapping, useCollapsiblePanel, useCollapsibleRoot, useCollapsibleRootContext };
|