@eightshift/ui-components 1.6.1 → 1.7.1
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/Button-VbCAu4hd.js +185 -0
- package/dist/{intlStrings-BxJIrC6b.js → Color-BpLubxWI.js} +2394 -2394
- package/dist/{ColorSwatch-BNX2quma.js → ColorSwatch-CinC14s3.js} +4 -4
- package/dist/{Dialog-BdtBguys.js → Dialog-BN5EE7UH.js} +9 -9
- package/dist/{FieldError-ClB3-XvF.js → FieldError-BttM1Nxd.js} +2 -2
- package/dist/{FocusScope-B5L3qI3N.js → FocusScope-CtCX0OGo.js} +2 -2
- package/dist/{Group-ubPTwji_.js → Group-XzWUooix.js} +3 -3
- package/dist/{Heading-DGnF6JDc.js → Heading-DZelepHV.js} +1 -1
- package/dist/{Hidden-CupIZhlF.js → Hidden-CcFqOzrp.js} +1 -1
- package/dist/{Input-BoNEjaXM.js → Input-CV1qVS6t.js} +8 -8
- package/dist/{Label-BqW0M3HN.js → Label-BwqMVkuV.js} +2 -2
- package/dist/{ListBox-civ86c_v.js → ListBox-DuZPdnkk.js} +16 -12
- package/dist/{SelectionManager-Ctbzoj1E.js → SelectionManager-x27KqnAT.js} +67 -34
- package/dist/{Separator-CDhAddZc.js → Separator-BM58t3PP.js} +24 -26
- package/dist/{Slider-Dkj8Slw3.js → Slider-D9Cs6yKr.js} +162 -162
- package/dist/{Text-CdwRBXol.js → Text-BVIXT8qq.js} +1 -1
- package/dist/{VisuallyHidden-DsMLX-RC.js → VisuallyHidden-WhC7vZaL.js} +2 -2
- package/dist/assets/style.css +1 -1
- package/dist/components/animated-visibility/animated-visibility.js +92 -129
- package/dist/components/base-control/base-control.js +1 -1
- package/dist/components/button/button.js +6 -6
- package/dist/components/checkbox/checkbox.js +7 -7
- package/dist/components/color-pickers/color-picker.js +2 -2
- package/dist/components/color-pickers/color-swatch.js +3 -3
- package/dist/components/color-pickers/gradient-editor.js +2 -2
- package/dist/components/color-pickers/solid-color-picker.js +64 -64
- package/dist/components/component-toggle/component-toggle.js +1 -1
- package/dist/components/draggable/draggable-handle.js +2 -2
- package/dist/components/draggable/draggable.js +7 -4
- package/dist/components/draggable-list/draggable-list-item.js +2 -2
- package/dist/components/draggable-list/draggable-list.js +6 -3
- package/dist/components/expandable/expandable.js +3 -3
- package/dist/components/index.js +3 -1
- package/dist/components/input-field/input-field.js +7 -7
- package/dist/components/item-collection/item-collection.js +6 -1
- package/dist/components/link-input/link-input.js +40 -36
- package/dist/components/list-box/list-box.js +2 -2
- package/dist/components/matrix-align/matrix-align.js +2 -2
- package/dist/components/menu/menu.js +15 -15
- package/dist/components/modal/modal.js +6 -6
- package/dist/components/number-picker/number-picker.js +10 -10
- package/dist/components/option-select/option-select.js +1 -1
- package/dist/components/options-panel/options-panel.js +1 -1
- package/dist/components/placeholders/file-placeholder.js +1 -1
- package/dist/components/placeholders/media-placeholder.js +6 -5
- package/dist/components/popover/popover.js +2 -2
- package/dist/components/radio/radio.js +13 -13
- package/dist/components/repeater/repeater-item.js +1 -1
- package/dist/components/repeater/repeater.js +6 -3
- package/dist/components/responsive/mini-responsive.js +495 -0
- package/dist/components/responsive/responsive-legacy.js +2 -2
- package/dist/components/responsive/responsive.js +7 -3
- package/dist/components/responsive-preview/responsive-preview.js +1 -1
- package/dist/components/select/async-multi-select.js +1 -0
- package/dist/components/select/async-single-select.js +1 -0
- package/dist/components/select/multi-select.js +1 -0
- package/dist/components/select/single-select.js +1 -0
- package/dist/components/select/styles.js +1 -1
- package/dist/components/slider/column-config-slider.js +3 -3
- package/dist/components/slider/slider.js +3 -3
- package/dist/components/slider/utils.js +1 -1
- package/dist/components/spacer/spacer.js +3 -4
- package/dist/components/tabs/tabs.js +22 -17
- package/dist/components/toggle/switch.js +6 -6
- package/dist/components/toggle/toggle.js +1 -1
- package/dist/components/toggle-button/toggle-button.js +6 -6
- package/dist/components/tooltip/tooltip.js +3 -3
- package/dist/{context-kCEA3M_y.js → context-Cs-ZD1nu.js} +1 -1
- package/dist/{default-i18n-BqWys-1G.js → default-i18n-DRnM8y4w.js} +45 -21
- package/dist/{focusSafely-xMzk3syC.js → focusSafely-CgFLw4FA.js} +1 -1
- package/dist/icons/jsx-svg.js +1 -1
- package/dist/index.js +3 -1
- package/dist/{number-CHmNj-oR.js → number-GajL10e1.js} +2 -2
- package/dist/{react-jsx-parser.min-sPC96O_U.js → react-jsx-parser.min-B5HVwW_W.js} +103 -53
- package/dist/{textSelection-D5Bit8i8.js → textSelection-CvK0YHTZ.js} +1 -1
- package/dist/{tooltip-srrt1p-b.js → tooltip-eKaARDoV.js} +5 -5
- package/dist/{useButton-6H5k2W5N.js → useButton-Cy9eEev7.js} +3 -3
- package/dist/{useEvent-BY-3vfxa.js → useEvent-LZebwyrb.js} +1 -1
- package/dist/{useFocusRing-rz8eyzby.js → useFocusRing-BMOTWmOx.js} +1 -1
- package/dist/{useFocusable-Bu2Ovohk.js → useFocusable-ByyKSVQv.js} +2 -2
- package/dist/{useFormReset-fUHUaaR6.js → useFormReset-B8m1uz1J.js} +1 -1
- package/dist/{useFormValidationState-DAan_XbC.js → useFormValidationState-BjMhz_VI.js} +2 -2
- package/dist/{useLabel-Bk7iP__W.js → useLabel-B6uO0wVK.js} +2 -2
- package/dist/{useLabels-DmsOywGg.js → useLabels-5dFkeiXx.js} +1 -1
- package/dist/{useListState-GXSJsAgz.js → useListState-eKxv7HPC.js} +28 -16
- package/dist/{useLocalizedStringFormatter-m03yY3xi.js → useLocalizedStringFormatter-BaKmjFNp.js} +1 -1
- package/dist/{useMenuTrigger-CT2-BFLo.js → useMenuTrigger-4fwEmto8.js} +4 -4
- package/dist/{useNumberFieldState-CpmU88xz.js → useNumberField-DMMUTZ-h.js} +169 -169
- package/dist/{useNumberFormatter-B-20GQ2u.js → useNumberFormatter-Cyx5Dxkf.js} +1 -1
- package/dist/{usePress-Cs8K7gKw.js → usePress-D8nPoIQm.js} +22 -10
- package/dist/{useSingleSelectListState-C1ddMCq3.js → useSingleSelectListState-CABciySJ.js} +3 -2
- package/dist/{useToggle-Cn2nQUNS.js → useToggle-BmltE9Zr.js} +4 -4
- package/dist/{useToggleState-Dj0JhD9W.js → useToggleState-DZXLEnA_.js} +1 -1
- package/dist/{utils-Du2x3YVu.js → utils-BCJajCwh.js} +15 -7
- package/package.json +24 -24
- package/dist/Button-CYX0D6At.js +0 -55
- package/dist/LiveAnnouncer-D8h-3GrG.js +0 -63
|
@@ -0,0 +1,185 @@
|
|
|
1
|
+
import { a as $64fa3d84918910a7$export$29f1550f4b0d4415, b as $64fa3d84918910a7$export$4d86445c2cf5e3, e as $bdb11010cef70236$export$f680877a34711e37, c as $3ef42575df84b30b$export$9d1611c77c2fe928 } from "./utils-BCJajCwh.js";
|
|
2
|
+
import React__default, { createContext, useRef, useEffect } from "react";
|
|
3
|
+
import { $ as $f39a9eba43920ace$export$86427a43e3e48ebb } from "./Hidden-CcFqOzrp.js";
|
|
4
|
+
import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "./filterDOMProps-EDDcM64A.js";
|
|
5
|
+
import { $ as $701a24aa0da5b062$export$ea18c227d4417cc3 } from "./useButton-Cy9eEev7.js";
|
|
6
|
+
import { $ as $f7dceffc5ad7768b$export$4e328f61c538687f } from "./useFocusRing-BMOTWmOx.js";
|
|
7
|
+
import { $ as $6179b936705e76d3$export$ae780daf29e6d456 } from "./focusSafely-CgFLw4FA.js";
|
|
8
|
+
const $319e236875307eab$var$LIVEREGION_TIMEOUT_DELAY = 7e3;
|
|
9
|
+
let $319e236875307eab$var$liveAnnouncer = null;
|
|
10
|
+
function $319e236875307eab$export$a9b970dcc4ae71a9(message, assertiveness = "assertive", timeout = $319e236875307eab$var$LIVEREGION_TIMEOUT_DELAY) {
|
|
11
|
+
if (!$319e236875307eab$var$liveAnnouncer) {
|
|
12
|
+
$319e236875307eab$var$liveAnnouncer = new $319e236875307eab$var$LiveAnnouncer();
|
|
13
|
+
if (!(typeof IS_REACT_ACT_ENVIRONMENT === "boolean" ? IS_REACT_ACT_ENVIRONMENT : typeof jest !== "undefined")) setTimeout(() => {
|
|
14
|
+
if ($319e236875307eab$var$liveAnnouncer === null || $319e236875307eab$var$liveAnnouncer === void 0 ? void 0 : $319e236875307eab$var$liveAnnouncer.isAttached()) $319e236875307eab$var$liveAnnouncer === null || $319e236875307eab$var$liveAnnouncer === void 0 ? void 0 : $319e236875307eab$var$liveAnnouncer.announce(message, assertiveness, timeout);
|
|
15
|
+
}, 100);
|
|
16
|
+
else $319e236875307eab$var$liveAnnouncer.announce(message, assertiveness, timeout);
|
|
17
|
+
} else $319e236875307eab$var$liveAnnouncer.announce(message, assertiveness, timeout);
|
|
18
|
+
}
|
|
19
|
+
function $319e236875307eab$export$d10ae4f68404609a(assertiveness) {
|
|
20
|
+
if ($319e236875307eab$var$liveAnnouncer) $319e236875307eab$var$liveAnnouncer.clear(assertiveness);
|
|
21
|
+
}
|
|
22
|
+
class $319e236875307eab$var$LiveAnnouncer {
|
|
23
|
+
isAttached() {
|
|
24
|
+
var _this_node;
|
|
25
|
+
return (_this_node = this.node) === null || _this_node === void 0 ? void 0 : _this_node.isConnected;
|
|
26
|
+
}
|
|
27
|
+
createLog(ariaLive) {
|
|
28
|
+
let node = document.createElement("div");
|
|
29
|
+
node.setAttribute("role", "log");
|
|
30
|
+
node.setAttribute("aria-live", ariaLive);
|
|
31
|
+
node.setAttribute("aria-relevant", "additions");
|
|
32
|
+
return node;
|
|
33
|
+
}
|
|
34
|
+
destroy() {
|
|
35
|
+
if (!this.node) return;
|
|
36
|
+
document.body.removeChild(this.node);
|
|
37
|
+
this.node = null;
|
|
38
|
+
}
|
|
39
|
+
announce(message, assertiveness = "assertive", timeout = $319e236875307eab$var$LIVEREGION_TIMEOUT_DELAY) {
|
|
40
|
+
var _this_assertiveLog, _this_politeLog;
|
|
41
|
+
if (!this.node) return;
|
|
42
|
+
let node = document.createElement("div");
|
|
43
|
+
if (typeof message === "object") {
|
|
44
|
+
node.setAttribute("role", "img");
|
|
45
|
+
node.setAttribute("aria-labelledby", message["aria-labelledby"]);
|
|
46
|
+
} else node.textContent = message;
|
|
47
|
+
if (assertiveness === "assertive") (_this_assertiveLog = this.assertiveLog) === null || _this_assertiveLog === void 0 ? void 0 : _this_assertiveLog.appendChild(node);
|
|
48
|
+
else (_this_politeLog = this.politeLog) === null || _this_politeLog === void 0 ? void 0 : _this_politeLog.appendChild(node);
|
|
49
|
+
if (message !== "") setTimeout(() => {
|
|
50
|
+
node.remove();
|
|
51
|
+
}, timeout);
|
|
52
|
+
}
|
|
53
|
+
clear(assertiveness) {
|
|
54
|
+
if (!this.node) return;
|
|
55
|
+
if ((!assertiveness || assertiveness === "assertive") && this.assertiveLog) this.assertiveLog.innerHTML = "";
|
|
56
|
+
if ((!assertiveness || assertiveness === "polite") && this.politeLog) this.politeLog.innerHTML = "";
|
|
57
|
+
}
|
|
58
|
+
constructor() {
|
|
59
|
+
this.node = null;
|
|
60
|
+
this.assertiveLog = null;
|
|
61
|
+
this.politeLog = null;
|
|
62
|
+
if (typeof document !== "undefined") {
|
|
63
|
+
this.node = document.createElement("div");
|
|
64
|
+
this.node.dataset.liveAnnouncer = "true";
|
|
65
|
+
Object.assign(this.node.style, {
|
|
66
|
+
border: 0,
|
|
67
|
+
clip: "rect(0 0 0 0)",
|
|
68
|
+
clipPath: "inset(50%)",
|
|
69
|
+
height: "1px",
|
|
70
|
+
margin: "-1px",
|
|
71
|
+
overflow: "hidden",
|
|
72
|
+
padding: 0,
|
|
73
|
+
position: "absolute",
|
|
74
|
+
width: "1px",
|
|
75
|
+
whiteSpace: "nowrap"
|
|
76
|
+
});
|
|
77
|
+
this.assertiveLog = this.createLog("assertive");
|
|
78
|
+
this.node.appendChild(this.assertiveLog);
|
|
79
|
+
this.politeLog = this.createLog("polite");
|
|
80
|
+
this.node.appendChild(this.politeLog);
|
|
81
|
+
document.body.prepend(this.node);
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
const $0393f8ab869a0f1a$export$e9f3bf65a26ce129 = /* @__PURE__ */ createContext(null);
|
|
86
|
+
const $d2b4bc8c273e7be6$var$additionalButtonHTMLAttributes = /* @__PURE__ */ new Set([
|
|
87
|
+
"form",
|
|
88
|
+
"formAction",
|
|
89
|
+
"formEncType",
|
|
90
|
+
"formMethod",
|
|
91
|
+
"formNoValidate",
|
|
92
|
+
"formTarget",
|
|
93
|
+
"name",
|
|
94
|
+
"value"
|
|
95
|
+
]);
|
|
96
|
+
const $d2b4bc8c273e7be6$export$24d547caef80ccd1 = /* @__PURE__ */ createContext({});
|
|
97
|
+
function $d2b4bc8c273e7be6$var$Button(props, ref) {
|
|
98
|
+
[props, ref] = $64fa3d84918910a7$export$29f1550f4b0d4415(props, ref, $d2b4bc8c273e7be6$export$24d547caef80ccd1);
|
|
99
|
+
props = $d2b4bc8c273e7be6$var$disablePendingProps(props);
|
|
100
|
+
let ctx = props;
|
|
101
|
+
let { isPending } = ctx;
|
|
102
|
+
let { buttonProps, isPressed } = $701a24aa0da5b062$export$ea18c227d4417cc3(props, ref);
|
|
103
|
+
let { focusProps, isFocused, isFocusVisible } = $f7dceffc5ad7768b$export$4e328f61c538687f(props);
|
|
104
|
+
let { hoverProps, isHovered } = $6179b936705e76d3$export$ae780daf29e6d456({
|
|
105
|
+
...props,
|
|
106
|
+
isDisabled: props.isDisabled || isPending
|
|
107
|
+
});
|
|
108
|
+
let renderValues = {
|
|
109
|
+
isHovered,
|
|
110
|
+
isPressed: (ctx.isPressed || isPressed) && !isPending,
|
|
111
|
+
isFocused,
|
|
112
|
+
isFocusVisible,
|
|
113
|
+
isDisabled: props.isDisabled || false,
|
|
114
|
+
isPending: isPending !== null && isPending !== void 0 ? isPending : false
|
|
115
|
+
};
|
|
116
|
+
let renderProps = $64fa3d84918910a7$export$4d86445c2cf5e3({
|
|
117
|
+
...props,
|
|
118
|
+
values: renderValues,
|
|
119
|
+
defaultClassName: "react-aria-Button"
|
|
120
|
+
});
|
|
121
|
+
let buttonId = $bdb11010cef70236$export$f680877a34711e37(buttonProps.id);
|
|
122
|
+
let progressId = $bdb11010cef70236$export$f680877a34711e37();
|
|
123
|
+
let ariaLabelledby = buttonProps["aria-labelledby"];
|
|
124
|
+
if (isPending) {
|
|
125
|
+
if (ariaLabelledby) ariaLabelledby = `${ariaLabelledby} ${progressId}`;
|
|
126
|
+
else if (buttonProps["aria-label"]) ariaLabelledby = `${buttonId} ${progressId}`;
|
|
127
|
+
}
|
|
128
|
+
let wasPending = useRef(isPending);
|
|
129
|
+
useEffect(() => {
|
|
130
|
+
let message = {
|
|
131
|
+
"aria-labelledby": ariaLabelledby || buttonId
|
|
132
|
+
};
|
|
133
|
+
if (!wasPending.current && isFocused && isPending) $319e236875307eab$export$a9b970dcc4ae71a9(message, "assertive");
|
|
134
|
+
else if (wasPending.current && isFocused && !isPending) $319e236875307eab$export$a9b970dcc4ae71a9(message, "assertive");
|
|
135
|
+
wasPending.current = isPending;
|
|
136
|
+
}, [
|
|
137
|
+
isPending,
|
|
138
|
+
isFocused,
|
|
139
|
+
ariaLabelledby,
|
|
140
|
+
buttonId
|
|
141
|
+
]);
|
|
142
|
+
return /* @__PURE__ */ React__default.createElement("button", {
|
|
143
|
+
...$65484d02dcb7eb3e$export$457c3d6518dd4c6f(props, {
|
|
144
|
+
propNames: $d2b4bc8c273e7be6$var$additionalButtonHTMLAttributes
|
|
145
|
+
}),
|
|
146
|
+
...$3ef42575df84b30b$export$9d1611c77c2fe928(buttonProps, focusProps, hoverProps),
|
|
147
|
+
...renderProps,
|
|
148
|
+
id: buttonId,
|
|
149
|
+
ref,
|
|
150
|
+
"aria-labelledby": ariaLabelledby,
|
|
151
|
+
slot: props.slot || void 0,
|
|
152
|
+
"aria-disabled": isPending ? "true" : buttonProps["aria-disabled"],
|
|
153
|
+
"data-disabled": props.isDisabled || void 0,
|
|
154
|
+
"data-pressed": renderValues.isPressed || void 0,
|
|
155
|
+
"data-hovered": isHovered || void 0,
|
|
156
|
+
"data-focused": isFocused || void 0,
|
|
157
|
+
"data-pending": isPending || void 0,
|
|
158
|
+
"data-focus-visible": isFocusVisible || void 0
|
|
159
|
+
}, /* @__PURE__ */ React__default.createElement($0393f8ab869a0f1a$export$e9f3bf65a26ce129.Provider, {
|
|
160
|
+
value: {
|
|
161
|
+
id: progressId
|
|
162
|
+
}
|
|
163
|
+
}, renderProps.children));
|
|
164
|
+
}
|
|
165
|
+
function $d2b4bc8c273e7be6$var$disablePendingProps(props) {
|
|
166
|
+
if (props.isPending) {
|
|
167
|
+
props.onPress = void 0;
|
|
168
|
+
props.onPressStart = void 0;
|
|
169
|
+
props.onPressEnd = void 0;
|
|
170
|
+
props.onPressChange = void 0;
|
|
171
|
+
props.onPressUp = void 0;
|
|
172
|
+
props.onKeyDown = void 0;
|
|
173
|
+
props.onKeyUp = void 0;
|
|
174
|
+
props.onClick = void 0;
|
|
175
|
+
props.href = void 0;
|
|
176
|
+
}
|
|
177
|
+
return props;
|
|
178
|
+
}
|
|
179
|
+
const $d2b4bc8c273e7be6$export$353f5b6fc5456de1 = /* @__PURE__ */ $f39a9eba43920ace$export$86427a43e3e48ebb($d2b4bc8c273e7be6$var$Button);
|
|
180
|
+
export {
|
|
181
|
+
$d2b4bc8c273e7be6$export$24d547caef80ccd1 as $,
|
|
182
|
+
$d2b4bc8c273e7be6$export$353f5b6fc5456de1 as a,
|
|
183
|
+
$319e236875307eab$export$a9b970dcc4ae71a9 as b,
|
|
184
|
+
$319e236875307eab$export$d10ae4f68404609a as c
|
|
185
|
+
};
|