@kaizen/components 0.0.0-canary-typescript-transform-paths-3.5.2-20241113035843 → 0.0.0-canary-package-bundler-v2-20241113055116
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/cjs/Pagination/Pagination.cjs +1 -1
- package/dist/esm/Pagination/Pagination.mjs +1 -1
- package/dist/styles.css +66 -66
- package/package.json +3 -3
- package/src/Pagination/Pagination.tsx +1 -1
- package/src/Pagination/subcomponents/PaginationLink/PaginationLink.module.scss +1 -1
- package/src/Pagination/subcomponents/TruncateIndicator/TruncateIndicator.module.css +1 -1
- package/dist/types/Heading-Bq3fifM0.js +0 -114
- package/dist/types/IconButton-AN3AP9ja.js +0 -855
- package/dist/types/RemovableTag-CIqQvZuu.js +0 -674
- package/dist/types/ReversedColors-D9BxpiSS.js +0 -14
- package/dist/types/Tooltip-DNGasNM8.js +0 -286
- package/dist/types/actionsV1.js +0 -11
- package/dist/types/actionsV2.js +0 -10
- package/dist/types/actionsV3.js +0 -74
- package/dist/types/future.js +0 -211
- package/dist/types/index-hKXin_Zl.js +0 -10
- package/dist/types/index-offJCDcb.js +0 -6
- package/dist/types/index.js +0 -1016
- package/dist/types/mergeClassNames-BuzaWRqN.js +0 -25
- package/dist/types/overlaysV1.js +0 -8
- package/dist/types/overlaysV2.js +0 -7
- package/dist/types/overlaysV3.js +0 -104
- package/dist/types/reactAriaComponentsV3.js +0 -1
- package/dist/types/reactAriaV3.js +0 -1
- package/dist/types/styles.css +0 -11923
- package/dist/types/utilitiesV3.js +0 -2
|
@@ -1,674 +0,0 @@
|
|
|
1
|
-
import { __rest, __assign, __spreadArray } from 'tslib';
|
|
2
|
-
import React, { createElement, useContext, useState, useEffect, useRef } from 'react';
|
|
3
|
-
import classnames from 'classnames';
|
|
4
|
-
import { useListBox, useListBoxSection } from '@react-aria/listbox';
|
|
5
|
-
import { H as Heading } from './Heading-Bq3fifM0.js';
|
|
6
|
-
import { useOption, useFocusRing, mergeProps } from 'react-aria';
|
|
7
|
-
import { FocusScope } from '@react-aria/focus';
|
|
8
|
-
import { useOverlay, DismissButton } from '@react-aria/overlays';
|
|
9
|
-
import { Section, Item } from '@react-stately/collections';
|
|
10
|
-
import { createPortal } from 'react-dom';
|
|
11
|
-
import { useFloating, offset, flip, size, autoUpdate } from '@floating-ui/react-dom';
|
|
12
|
-
import { FocusOn } from 'react-focus-on';
|
|
13
|
-
|
|
14
|
-
/* eslint-disable camelcase */
|
|
15
|
-
var handledRtlIcons = {
|
|
16
|
-
checklist: "checklist_rtl",
|
|
17
|
-
format_list_numbered: "format_list_numbered_rtl"
|
|
18
|
-
};
|
|
19
|
-
var styles$e = {
|
|
20
|
-
"material-symbols-outlined": "Icon-module_material-symbols-outlined__ipR58",
|
|
21
|
-
"icon": "Icon-module_icon__CkmHY",
|
|
22
|
-
"filled": "Icon-module_filled__-VArQ",
|
|
23
|
-
"shouldMirrorInRTL": "Icon-module_shouldMirrorInRTL__kxncF",
|
|
24
|
-
"iconLTR": "Icon-module_iconLTR__b3GoB",
|
|
25
|
-
"iconRTL": "Icon-module_iconRTL__lpVw5"
|
|
26
|
-
};
|
|
27
|
-
var MaterialIcon = function (_a) {
|
|
28
|
-
var children = _a.children,
|
|
29
|
-
isFilled = _a.isFilled,
|
|
30
|
-
isPresentational = _a.isPresentational,
|
|
31
|
-
alt = _a.alt,
|
|
32
|
-
className = _a.className,
|
|
33
|
-
restProps = __rest(_a, ["children", "isFilled", "isPresentational", "alt", "className"]);
|
|
34
|
-
return /*#__PURE__*/React.createElement("span", __assign({
|
|
35
|
-
className: classnames(styles$e["material-symbols-outlined"], styles$e.icon, isFilled && styles$e.filled, className),
|
|
36
|
-
"aria-hidden": isPresentational,
|
|
37
|
-
role: isPresentational ? undefined : "img",
|
|
38
|
-
"aria-label": alt
|
|
39
|
-
}, restProps), children);
|
|
40
|
-
};
|
|
41
|
-
var Icon = function (_a) {
|
|
42
|
-
var name = _a.name,
|
|
43
|
-
shouldMirrorInRTL = _a.shouldMirrorInRTL,
|
|
44
|
-
restProps = __rest(_a, ["name", "shouldMirrorInRTL"]);
|
|
45
|
-
if (!shouldMirrorInRTL) {
|
|
46
|
-
return /*#__PURE__*/React.createElement(MaterialIcon, __assign({}, restProps), name);
|
|
47
|
-
}
|
|
48
|
-
if (Object.keys(handledRtlIcons).includes(name)) {
|
|
49
|
-
return /*#__PURE__*/React.createElement(MaterialIcon, __assign({}, restProps), /*#__PURE__*/React.createElement("span", {
|
|
50
|
-
className: styles$e.iconLTR
|
|
51
|
-
}, name), /*#__PURE__*/React.createElement("span", {
|
|
52
|
-
className: styles$e.iconRTL
|
|
53
|
-
}, handledRtlIcons[name]));
|
|
54
|
-
}
|
|
55
|
-
return /*#__PURE__*/React.createElement(MaterialIcon, __assign({}, restProps, {
|
|
56
|
-
className: classnames(styles$e.shouldMirrorInRTL, restProps.className)
|
|
57
|
-
}), name);
|
|
58
|
-
};
|
|
59
|
-
var styles$d = {
|
|
60
|
-
"text": "Text-module_text__Byo7R",
|
|
61
|
-
"intro-lede": "Text-module_intro-lede__ENE72",
|
|
62
|
-
"body": "Text-module_body__cO-XH",
|
|
63
|
-
"small": "Text-module_small__uZNGn",
|
|
64
|
-
"extra-small": "Text-module_extra-small__3g9eN",
|
|
65
|
-
"dark": "Text-module_dark__-jDSk",
|
|
66
|
-
"dark-reduced-opacity": "Text-module_dark-reduced-opacity__18nLo",
|
|
67
|
-
"white": "Text-module_white__-yVD0",
|
|
68
|
-
"white-reduced-opacity": "Text-module_white-reduced-opacity__i0veZ",
|
|
69
|
-
"positive": "Text-module_positive__e-IKh",
|
|
70
|
-
"negative": "Text-module_negative__agbge"
|
|
71
|
-
};
|
|
72
|
-
|
|
73
|
-
/**
|
|
74
|
-
* {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3074885298/Typography#Paragraph Guidance}
|
|
75
|
-
* {@link https://cultureamp.design/?path=/docs/components-typography-text--body Storybook}
|
|
76
|
-
*/
|
|
77
|
-
var Text = function (_a) {
|
|
78
|
-
var children = _a.children,
|
|
79
|
-
tag = _a.tag,
|
|
80
|
-
variant = _a.variant,
|
|
81
|
-
_b = _a.color,
|
|
82
|
-
color = _b === void 0 ? "dark" : _b,
|
|
83
|
-
classNameOverride = _a.classNameOverride,
|
|
84
|
-
restProps = __rest(_a, ["children", "tag", "variant", "color", "classNameOverride"]);
|
|
85
|
-
var className = classnames(styles$d.text, styles$d[variant], styles$d[color], classNameOverride);
|
|
86
|
-
return /*#__PURE__*/createElement(tag === undefined ? "p" : tag, __assign(__assign({}, restProps), {
|
|
87
|
-
className: className
|
|
88
|
-
}), children);
|
|
89
|
-
};
|
|
90
|
-
Text.displayName = "Text";
|
|
91
|
-
var styles$c = {
|
|
92
|
-
"label": "Label-module_label__Dmp7q",
|
|
93
|
-
"reversed": "Label-module_reversed__n6Q4r",
|
|
94
|
-
"disabled": "Label-module_disabled__qOB4e",
|
|
95
|
-
"text": "Label-module_text__LUnIh",
|
|
96
|
-
"radio": "Label-module_radio__-Iu-D",
|
|
97
|
-
"checkbox": "Label-module_checkbox__Fhjww",
|
|
98
|
-
"toggle": "Label-module_toggle__4tyKF",
|
|
99
|
-
"prependedLabel": "Label-module_prependedLabel__pdsEt",
|
|
100
|
-
"appendedLabel": "Label-module_appendedLabel__-OHis",
|
|
101
|
-
"prominent": "Label-module_prominent__SPdrr"
|
|
102
|
-
};
|
|
103
|
-
const Label = /*#__PURE__*/function () {
|
|
104
|
-
const Label = function (_a) {
|
|
105
|
-
var children = _a.children,
|
|
106
|
-
_b = _a.labelText,
|
|
107
|
-
labelText = _b === void 0 ? "" : _b,
|
|
108
|
-
_c = _a.labelType,
|
|
109
|
-
labelType = _c === void 0 ? "text" : _c,
|
|
110
|
-
_d = _a.labelPosition,
|
|
111
|
-
labelPosition = _d === void 0 ? "end" : _d,
|
|
112
|
-
_e = _a.reversed,
|
|
113
|
-
reversed = _e === void 0 ? false : _e,
|
|
114
|
-
_f = _a.variant,
|
|
115
|
-
variant = _f === void 0 ? "default" : _f,
|
|
116
|
-
disabled = _a.disabled,
|
|
117
|
-
classNameOverride = _a.classNameOverride,
|
|
118
|
-
restProps = __rest(_a, ["children", "labelText", "labelType", "labelPosition", "reversed", "variant", "disabled", "classNameOverride"]);
|
|
119
|
-
return /*#__PURE__*/React.createElement("label", __assign({
|
|
120
|
-
className: classnames(styles$c.label, classNameOverride, styles$c[labelType], reversed && styles$c.reversed, variant === "prominent" && styles$c.prominent, disabled && styles$c.disabled)
|
|
121
|
-
}, restProps), children, /*#__PURE__*/React.createElement("span", {
|
|
122
|
-
className: classnames(labelPosition === "start" && styles$c.prependedLabel, labelPosition === "end" && styles$c.appendedLabel)
|
|
123
|
-
}, labelText));
|
|
124
|
-
};
|
|
125
|
-
Label.displayName = "Label";
|
|
126
|
-
return Label;
|
|
127
|
-
}();
|
|
128
|
-
var styles$b = {
|
|
129
|
-
"message": "FieldMessage-module_message__bKbYp",
|
|
130
|
-
"default": "FieldMessage-module_default__tpp8j",
|
|
131
|
-
"reversed": "FieldMessage-module_reversed__FCi8c",
|
|
132
|
-
"error": "FieldMessage-module_error__OxUCB",
|
|
133
|
-
"caution": "FieldMessage-module_caution__EPqo4",
|
|
134
|
-
"positionBottom": "FieldMessage-module_positionBottom__rLWzS",
|
|
135
|
-
"positionTop": "FieldMessage-module_positionTop__8Hjpb",
|
|
136
|
-
"warningIcon": "FieldMessage-module_warningIcon__0y1jx"
|
|
137
|
-
};
|
|
138
|
-
const FieldMessage = /*#__PURE__*/function () {
|
|
139
|
-
const FieldMessage = function (_a) {
|
|
140
|
-
var message = _a.message,
|
|
141
|
-
_b = _a.status,
|
|
142
|
-
status = _b === void 0 ? "default" : _b,
|
|
143
|
-
_c = _a.position,
|
|
144
|
-
position = _c === void 0 ? "bottom" : _c,
|
|
145
|
-
_d = _a.reversed,
|
|
146
|
-
reversed = _d === void 0 ? false : _d,
|
|
147
|
-
classNameOverride = _a.classNameOverride,
|
|
148
|
-
restProps = __rest(_a, ["message", "status", "position", "reversed", "classNameOverride"]);
|
|
149
|
-
var textColor = status === "default" || status === "success" ? reversed ? "white-reduced-opacity" : "dark-reduced-opacity" : "dark";
|
|
150
|
-
return /*#__PURE__*/React.createElement("div", __assign({
|
|
151
|
-
className: classnames(styles$b.message, styles$b[status], classNameOverride, reversed && styles$b.reversed, position === "bottom" && styles$b.positionBottom, position === "top" && styles$b.positionTop)
|
|
152
|
-
}, restProps), (status === "error" || status === "caution") && ( /*#__PURE__*/React.createElement("span", {
|
|
153
|
-
className: styles$b.warningIcon
|
|
154
|
-
}, /*#__PURE__*/React.createElement(Icon, {
|
|
155
|
-
name: status === "error" ? "error" : "warning",
|
|
156
|
-
isFilled: true,
|
|
157
|
-
alt: "".concat(status, " message")
|
|
158
|
-
}))), /*#__PURE__*/React.createElement("div", {
|
|
159
|
-
className: styles$b.message
|
|
160
|
-
}, /*#__PURE__*/React.createElement(Text, {
|
|
161
|
-
variant: "small",
|
|
162
|
-
tag: typeof message === "string" ? "p" : "div",
|
|
163
|
-
color: textColor
|
|
164
|
-
}, message)));
|
|
165
|
-
};
|
|
166
|
-
FieldMessage.displayName = "FieldMessage";
|
|
167
|
-
return FieldMessage;
|
|
168
|
-
}();
|
|
169
|
-
var styles$a = {
|
|
170
|
-
"wrapper": "Divider-module_wrapper__K5mht",
|
|
171
|
-
"content": "Divider-module_content__BhDyy",
|
|
172
|
-
"menuSeparator": "Divider-module_menuSeparator__kjXV5",
|
|
173
|
-
"canvas": "Divider-module_canvas__2eQT6",
|
|
174
|
-
"reversed": "Divider-module_reversed__puJw2"
|
|
175
|
-
};
|
|
176
|
-
|
|
177
|
-
/**
|
|
178
|
-
* {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082061035/Divider Guidance} |
|
|
179
|
-
* {@link https://cultureamp.design/?path=/docs/components-divider--docs Storybook}
|
|
180
|
-
*/
|
|
181
|
-
const Divider = /*#__PURE__*/function () {
|
|
182
|
-
const Divider = function (_a) {
|
|
183
|
-
var variant = _a.variant,
|
|
184
|
-
_b = _a.isReversed,
|
|
185
|
-
isReversed = _b === void 0 ? false : _b,
|
|
186
|
-
classNameOverride = _a.classNameOverride,
|
|
187
|
-
props = __rest(_a, ["variant", "isReversed", "classNameOverride"]);
|
|
188
|
-
return /*#__PURE__*/React.createElement("hr", __assign({
|
|
189
|
-
"aria-hidden": "true",
|
|
190
|
-
className: classnames(styles$a.wrapper, classNameOverride, isReversed && styles$a.reversed, styles$a[variant])
|
|
191
|
-
}, props));
|
|
192
|
-
};
|
|
193
|
-
Divider.displayName = "Divider";
|
|
194
|
-
return Divider;
|
|
195
|
-
}();
|
|
196
|
-
var SelectContext = /*#__PURE__*/React.createContext(null);
|
|
197
|
-
var useSelectContext = function () {
|
|
198
|
-
var context = useContext(SelectContext);
|
|
199
|
-
if (!context) {
|
|
200
|
-
throw new Error("useSelectContext must be used within the SelectContext.Provider");
|
|
201
|
-
}
|
|
202
|
-
return context;
|
|
203
|
-
};
|
|
204
|
-
var SelectProvider = function (_a) {
|
|
205
|
-
var children = _a.children,
|
|
206
|
-
state = _a.state;
|
|
207
|
-
return /*#__PURE__*/React.createElement(SelectContext.Provider, {
|
|
208
|
-
value: {
|
|
209
|
-
state: state
|
|
210
|
-
}
|
|
211
|
-
}, children);
|
|
212
|
-
};
|
|
213
|
-
|
|
214
|
-
/**
|
|
215
|
-
* A hook that returns a truthy value indicating if the code can be run on client side.
|
|
216
|
-
* This is a useful hook for determining if the `document` or `window` objects are available.
|
|
217
|
-
*/
|
|
218
|
-
var useIsClientReady = function () {
|
|
219
|
-
var _a = useState(false),
|
|
220
|
-
isClientReady = _a[0],
|
|
221
|
-
setIsClientReady = _a[1];
|
|
222
|
-
useEffect(function () {
|
|
223
|
-
if (typeof window !== "undefined" && typeof document !== "undefined") {
|
|
224
|
-
setIsClientReady(true);
|
|
225
|
-
}
|
|
226
|
-
}, []);
|
|
227
|
-
return isClientReady;
|
|
228
|
-
};
|
|
229
|
-
var styles$9 = {
|
|
230
|
-
"listBox": "ListBox-module_listBox__Uf6Mc"
|
|
231
|
-
};
|
|
232
|
-
|
|
233
|
-
/** A util to retrieve the key of the correct focusable items based of the focus strategy
|
|
234
|
-
* This is used to determine which element from the collection to focus to on open base on the keyboard event
|
|
235
|
-
* ie: UpArrow will set the focusStrategy to "last"
|
|
236
|
-
*/
|
|
237
|
-
var getOptionKeyFromCollection = function (state) {
|
|
238
|
-
if (state.selectedItem) {
|
|
239
|
-
return state.selectedItem.key;
|
|
240
|
-
} else if (state.focusStrategy === "last") {
|
|
241
|
-
return state.collection.getLastKey();
|
|
242
|
-
}
|
|
243
|
-
return state.collection.getFirstKey();
|
|
244
|
-
};
|
|
245
|
-
/** This makes the use of query selector less brittle in instances where a failed selector is passed in
|
|
246
|
-
*/
|
|
247
|
-
var safeQuerySelector = function (selector) {
|
|
248
|
-
try {
|
|
249
|
-
return document.querySelector(selector);
|
|
250
|
-
} catch (error) {
|
|
251
|
-
// eslint-disable-next-line no-console
|
|
252
|
-
console.error("Kaizen querySelector failed:", error);
|
|
253
|
-
return null;
|
|
254
|
-
}
|
|
255
|
-
};
|
|
256
|
-
const ListBox = /*#__PURE__*/function () {
|
|
257
|
-
const ListBox = function (_a) {
|
|
258
|
-
var children = _a.children,
|
|
259
|
-
menuProps = _a.menuProps,
|
|
260
|
-
classNameOverride = _a.classNameOverride,
|
|
261
|
-
restProps = __rest(_a, ["children", "menuProps", "classNameOverride"]);
|
|
262
|
-
var isClientReady = useIsClientReady();
|
|
263
|
-
var state = useSelectContext().state;
|
|
264
|
-
var ref = useRef(null);
|
|
265
|
-
var listBoxProps = useListBox(__assign(__assign({}, menuProps), {
|
|
266
|
-
disallowEmptySelection: true,
|
|
267
|
-
// This is to ensure that the listbox doesn't use React Aria's auto focus feature for Listbox, which creates a visual bug
|
|
268
|
-
autoFocus: false
|
|
269
|
-
}), state, ref).listBoxProps;
|
|
270
|
-
/**
|
|
271
|
-
* This uses the new useIsClientReady to ensure document exists before trying to querySelector and give the time to focus to the correct element
|
|
272
|
-
*/
|
|
273
|
-
useEffect(function () {
|
|
274
|
-
var _a;
|
|
275
|
-
if (isClientReady) {
|
|
276
|
-
var optionKey = getOptionKeyFromCollection(state);
|
|
277
|
-
var focusToElement = safeQuerySelector("[data-key='".concat(optionKey, "']"));
|
|
278
|
-
if (focusToElement) {
|
|
279
|
-
focusToElement.focus();
|
|
280
|
-
} else {
|
|
281
|
-
// If an element is not found, focus on the listbox. This ensures the list can still be navigated to via keyboard if the keys do not align to the data attributes of the list items.
|
|
282
|
-
(_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
283
|
-
}
|
|
284
|
-
}
|
|
285
|
-
}, [isClientReady]);
|
|
286
|
-
return /*#__PURE__*/React.createElement("ul", __assign({
|
|
287
|
-
ref: ref,
|
|
288
|
-
className: classnames(styles$9.listBox, classNameOverride)
|
|
289
|
-
}, listBoxProps, restProps), children);
|
|
290
|
-
};
|
|
291
|
-
ListBox.displayName = "ListBox";
|
|
292
|
-
return ListBox;
|
|
293
|
-
}();
|
|
294
|
-
var styles$8 = {
|
|
295
|
-
"icon": "Option-module_icon__i3CDN",
|
|
296
|
-
"option": "Option-module_option__gPSuE",
|
|
297
|
-
"isFocusVisible": "Option-module_isFocusVisible__wzfsx",
|
|
298
|
-
"disabled": "Option-module_disabled__ob1Pw",
|
|
299
|
-
"isSelected": "Option-module_isSelected__J3Z-z"
|
|
300
|
-
};
|
|
301
|
-
const Option = /*#__PURE__*/function () {
|
|
302
|
-
const Option = function (_a) {
|
|
303
|
-
var item = _a.item,
|
|
304
|
-
classNameOverride = _a.classNameOverride,
|
|
305
|
-
props = __rest(_a, ["item", "classNameOverride"]);
|
|
306
|
-
var state = useSelectContext().state;
|
|
307
|
-
var ref = React.useRef(null);
|
|
308
|
-
var _b = useOption({
|
|
309
|
-
key: item.key
|
|
310
|
-
}, state, ref),
|
|
311
|
-
optionProps = _b.optionProps,
|
|
312
|
-
isSelected = _b.isSelected,
|
|
313
|
-
isDisabled = _b.isDisabled;
|
|
314
|
-
var onPointerUp = optionProps.onPointerUp,
|
|
315
|
-
restOptionProps = __rest(optionProps, ["onPointerUp"]);
|
|
316
|
-
var _c = useFocusRing(),
|
|
317
|
-
isFocusVisible = _c.isFocusVisible,
|
|
318
|
-
focusProps = _c.focusProps;
|
|
319
|
-
return /*#__PURE__*/React.createElement("li", __assign({}, mergeProps(restOptionProps, focusProps, props, {
|
|
320
|
-
onPointerUp: function (e) {
|
|
321
|
-
if (e.pointerType === "touch") {
|
|
322
|
-
// On touch devices, the listbox closes too quickly so below elements will trigger their pointer events.
|
|
323
|
-
// Slow it down a bit to prevent the appearance of propagation.
|
|
324
|
-
setTimeout(function () {
|
|
325
|
-
return state.setSelectedKey(item.key);
|
|
326
|
-
}, 250);
|
|
327
|
-
} else {
|
|
328
|
-
onPointerUp === null || onPointerUp === void 0 ? void 0 : onPointerUp(e);
|
|
329
|
-
}
|
|
330
|
-
}
|
|
331
|
-
}), {
|
|
332
|
-
ref: ref,
|
|
333
|
-
className: classnames(styles$8.option, isSelected && styles$8.isSelected, isFocusVisible && styles$8.isFocusVisible, isDisabled && styles$8.disabled, classNameOverride),
|
|
334
|
-
"aria-label": item.textValue
|
|
335
|
-
}), item.rendered, /*#__PURE__*/React.createElement("span", {
|
|
336
|
-
className: classnames(styles$8.icon, isSelected && styles$8.isSelected)
|
|
337
|
-
}, isSelected && /*#__PURE__*/React.createElement(Icon, {
|
|
338
|
-
name: "check",
|
|
339
|
-
isPresentational: true
|
|
340
|
-
})));
|
|
341
|
-
};
|
|
342
|
-
Option.displayName = "Option";
|
|
343
|
-
return Option;
|
|
344
|
-
}();
|
|
345
|
-
var styles$7 = {
|
|
346
|
-
"sectionWrapper": "ListBoxSection-module_sectionWrapper__2jPgd",
|
|
347
|
-
"sectionHeading": "ListBoxSection-module_sectionHeading__o6WzT",
|
|
348
|
-
"sectionList": "ListBoxSection-module_sectionList__lJ35F"
|
|
349
|
-
};
|
|
350
|
-
const ListBoxSection = /*#__PURE__*/function () {
|
|
351
|
-
const ListBoxSection = function (_a) {
|
|
352
|
-
var section = _a.section;
|
|
353
|
-
var _b = useListBoxSection({
|
|
354
|
-
heading: section.rendered,
|
|
355
|
-
"aria-label": section["aria-label"]
|
|
356
|
-
}),
|
|
357
|
-
itemProps = _b.itemProps,
|
|
358
|
-
headingProps = _b.headingProps,
|
|
359
|
-
groupProps = _b.groupProps;
|
|
360
|
-
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("li", __assign({}, itemProps, {
|
|
361
|
-
className: styles$7.sectionWrapper
|
|
362
|
-
}), section.rendered && ( /*#__PURE__*/React.createElement(Heading, __assign({
|
|
363
|
-
tag: "span",
|
|
364
|
-
variant: "heading-6"
|
|
365
|
-
}, headingProps, {
|
|
366
|
-
classNameOverride: styles$7.sectionHeading
|
|
367
|
-
}), section.rendered)), /*#__PURE__*/React.createElement("ul", __assign({}, groupProps, {
|
|
368
|
-
className: styles$7.sectionList
|
|
369
|
-
}), Array.from(section.childNodes).map(function (item) {
|
|
370
|
-
return /*#__PURE__*/React.createElement(Option, {
|
|
371
|
-
key: item.key,
|
|
372
|
-
item: item
|
|
373
|
-
});
|
|
374
|
-
}))));
|
|
375
|
-
};
|
|
376
|
-
ListBoxSection.displayName = "ListBoxSection";
|
|
377
|
-
return ListBoxSection;
|
|
378
|
-
}();
|
|
379
|
-
const ListItem = /*#__PURE__*/function () {
|
|
380
|
-
const ListItem = function (_a) {
|
|
381
|
-
var item = _a.item;
|
|
382
|
-
return item.type === "section" ? ( /*#__PURE__*/React.createElement(ListBoxSection, {
|
|
383
|
-
key: item.key,
|
|
384
|
-
section: item
|
|
385
|
-
})) : ( /*#__PURE__*/React.createElement(Option, {
|
|
386
|
-
key: item.key,
|
|
387
|
-
item: item
|
|
388
|
-
}));
|
|
389
|
-
};
|
|
390
|
-
ListItem.displayName = "ListItem";
|
|
391
|
-
|
|
392
|
-
/*
|
|
393
|
-
* Default rendered list of select items
|
|
394
|
-
*/
|
|
395
|
-
return ListItem;
|
|
396
|
-
}();
|
|
397
|
-
const ListItems = /*#__PURE__*/function () {
|
|
398
|
-
const ListItems = function (_a) {
|
|
399
|
-
var items = _a.items;
|
|
400
|
-
return /*#__PURE__*/React.createElement(React.Fragment, null, items.map(function (item) {
|
|
401
|
-
return /*#__PURE__*/React.createElement(ListItem, {
|
|
402
|
-
key: item.key,
|
|
403
|
-
item: item
|
|
404
|
-
});
|
|
405
|
-
}));
|
|
406
|
-
};
|
|
407
|
-
ListItems.displayName = "ListItems";
|
|
408
|
-
return ListItems;
|
|
409
|
-
}();
|
|
410
|
-
const Overlay = /*#__PURE__*/function () {
|
|
411
|
-
const Overlay = function (_a) {
|
|
412
|
-
var children = _a.children,
|
|
413
|
-
classNameOverride = _a.classNameOverride,
|
|
414
|
-
restProps = __rest(_a, ["children", "classNameOverride"]);
|
|
415
|
-
var state = useSelectContext().state;
|
|
416
|
-
// Handle events that should cause the menu to close,
|
|
417
|
-
// e.g. blur, clicking outside, or pressing the escape key.
|
|
418
|
-
var overlayRef = React.useRef(null);
|
|
419
|
-
var overlayProps = useOverlay({
|
|
420
|
-
isDismissable: true,
|
|
421
|
-
isOpen: state.isOpen,
|
|
422
|
-
onClose: state.close
|
|
423
|
-
}, overlayRef).overlayProps;
|
|
424
|
-
// Wrap in <FocusScope> so that focus is restored back to the trigger when the menu is closed
|
|
425
|
-
// and auto focus on the first focusable item after loading. (disable eslint no-autofocus error for it)
|
|
426
|
-
// In addition, add hidden <DismissButton> components at the start and end of the list
|
|
427
|
-
// to allow screen reader users to dismiss the popup easily.
|
|
428
|
-
return /*#__PURE__*/React.createElement("div", __assign({
|
|
429
|
-
ref: overlayRef,
|
|
430
|
-
className: classNameOverride
|
|
431
|
-
}, overlayProps, restProps), /*#__PURE__*/React.createElement(FocusScope, {
|
|
432
|
-
autoFocus: false,
|
|
433
|
-
restoreFocus: true
|
|
434
|
-
}, /*#__PURE__*/React.createElement(DismissButton, {
|
|
435
|
-
onDismiss: state.close
|
|
436
|
-
}), children, /*#__PURE__*/React.createElement(DismissButton, {
|
|
437
|
-
onDismiss: state.close
|
|
438
|
-
})));
|
|
439
|
-
};
|
|
440
|
-
Overlay.displayName = "Overlay";
|
|
441
|
-
return Overlay;
|
|
442
|
-
}();
|
|
443
|
-
var styles$6 = {
|
|
444
|
-
"divider": "SectionDivider-module_divider__qtq-c"
|
|
445
|
-
};
|
|
446
|
-
const SectionDivider = /*#__PURE__*/function () {
|
|
447
|
-
const SectionDivider = function () {
|
|
448
|
-
return /*#__PURE__*/React.createElement(Divider, {
|
|
449
|
-
classNameOverride: styles$6.divider,
|
|
450
|
-
variant: "canvas"
|
|
451
|
-
});
|
|
452
|
-
};
|
|
453
|
-
SectionDivider.displayName = "SectionDivider";
|
|
454
|
-
return SectionDivider;
|
|
455
|
-
}();
|
|
456
|
-
var styles$5 = {
|
|
457
|
-
"selectPopoverContents": "SelectPopoverContents-module_selectPopoverContents__9V5SB"
|
|
458
|
-
};
|
|
459
|
-
const SelectPopoverContents = /*#__PURE__*/function () {
|
|
460
|
-
const SelectPopoverContents = function (_a) {
|
|
461
|
-
var children = _a.children,
|
|
462
|
-
menuProps = _a.menuProps;
|
|
463
|
-
var state = useSelectContext().state;
|
|
464
|
-
// The collection structure is set by useSelectState's `children`
|
|
465
|
-
// which we have used a util to ensure the following structure
|
|
466
|
-
// - SelectOptionGroup => Section
|
|
467
|
-
// - Option => Item
|
|
468
|
-
var itemNodes = Array.from(state.collection);
|
|
469
|
-
return /*#__PURE__*/React.createElement("div", {
|
|
470
|
-
className: styles$5.selectPopoverContents
|
|
471
|
-
}, /*#__PURE__*/React.createElement(Overlay, null, /*#__PURE__*/React.createElement(ListBox, {
|
|
472
|
-
menuProps: menuProps
|
|
473
|
-
}, children ? children({
|
|
474
|
-
items: itemNodes
|
|
475
|
-
}) : ( /*#__PURE__*/React.createElement(ListItems, {
|
|
476
|
-
items: itemNodes
|
|
477
|
-
})))));
|
|
478
|
-
};
|
|
479
|
-
SelectPopoverContents.displayName = "Select.PopoverContents";
|
|
480
|
-
return SelectPopoverContents;
|
|
481
|
-
}();
|
|
482
|
-
var styles$4 = {
|
|
483
|
-
"iconWrapper": "SelectToggle-module_iconWrapper__E4YL8",
|
|
484
|
-
"icon": "SelectToggle-module_icon__BqMEK",
|
|
485
|
-
"selectToggle": "SelectToggle-module_selectToggle__fWnqy",
|
|
486
|
-
"placeholder": "SelectToggle-module_placeholder__wQK-w",
|
|
487
|
-
"error": "SelectToggle-module_error__pxp-j",
|
|
488
|
-
"caution": "SelectToggle-module_caution__-G7WL",
|
|
489
|
-
"disabled": "SelectToggle-module_disabled__8A4rw",
|
|
490
|
-
"reversed": "SelectToggle-module_reversed__ku-Ph",
|
|
491
|
-
"value": "SelectToggle-module_value__XRxRl"
|
|
492
|
-
};
|
|
493
|
-
const SelectToggle = /*#__PURE__*/function () {
|
|
494
|
-
const SelectToggle = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
495
|
-
var label = _a.label,
|
|
496
|
-
labelProps = _a.labelProps,
|
|
497
|
-
value = _a.value,
|
|
498
|
-
valueProps = _a.valueProps,
|
|
499
|
-
isOpen = _a.isOpen,
|
|
500
|
-
_b = _a.placeholder,
|
|
501
|
-
placeholder = _b === void 0 ? "Select" : _b,
|
|
502
|
-
status = _a.status,
|
|
503
|
-
isDisabled = _a.isDisabled,
|
|
504
|
-
isReversed = _a.isReversed,
|
|
505
|
-
classNameOverride = _a.classNameOverride,
|
|
506
|
-
restProps = __rest(_a, ["label", "labelProps", "value", "valueProps", "isOpen", "placeholder", "status", "isDisabled", "isReversed", "classNameOverride"]);
|
|
507
|
-
return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Label, __assign({}, labelProps, {
|
|
508
|
-
reversed: isReversed,
|
|
509
|
-
disabled: isDisabled
|
|
510
|
-
}), label), /*#__PURE__*/React.createElement("button", __assign({
|
|
511
|
-
type: "button",
|
|
512
|
-
// for the eslint issue below, both of the attributes (aria-expanded and aria-controls) are on the button but it just doesn't know it
|
|
513
|
-
// eslint-disable-next-line jsx-a11y/role-has-required-aria-props
|
|
514
|
-
role: "combobox"
|
|
515
|
-
}, restProps, {
|
|
516
|
-
ref: ref,
|
|
517
|
-
className: classnames(styles$4.selectToggle, (value === null || value === undefined) && styles$4.placeholder, status === "error" && styles$4.error, status === "caution" && styles$4.caution, isDisabled && styles$4.disabled, isReversed && styles$4.reversed, classNameOverride)
|
|
518
|
-
}), /*#__PURE__*/React.createElement("span", __assign({}, valueProps, {
|
|
519
|
-
className: styles$4.value
|
|
520
|
-
}), value !== null && value !== void 0 ? value : placeholder), /*#__PURE__*/React.createElement(Icon, {
|
|
521
|
-
name: isOpen ? "keyboard_arrow_up" : "keyboard_arrow_down",
|
|
522
|
-
isPresentational: true,
|
|
523
|
-
className: styles$4.icon
|
|
524
|
-
})));
|
|
525
|
-
});
|
|
526
|
-
SelectToggle.displayName = "SelectToggle";
|
|
527
|
-
return SelectToggle;
|
|
528
|
-
}();
|
|
529
|
-
var isSelectOptionGroup = function (item) {
|
|
530
|
-
return item.hasOwnProperty("options") && Array.isArray(item.options);
|
|
531
|
-
};
|
|
532
|
-
var getDisabledKeysFromItems = function (items) {
|
|
533
|
-
return items.reduce(function (acc, item) {
|
|
534
|
-
if (isSelectOptionGroup(item)) {
|
|
535
|
-
var keys = Array.from(item.options).filter(function (groupItem) {
|
|
536
|
-
return groupItem.disabled;
|
|
537
|
-
}).map(function (disabledItems) {
|
|
538
|
-
return disabledItems.value;
|
|
539
|
-
});
|
|
540
|
-
return __spreadArray(__spreadArray([], acc, true), keys, true);
|
|
541
|
-
}
|
|
542
|
-
return item.disabled ? __spreadArray(__spreadArray([], acc, true), [item.value], false) : acc;
|
|
543
|
-
}, []);
|
|
544
|
-
};
|
|
545
|
-
var transformSelectItemToCollectionElement = function (item) {
|
|
546
|
-
return isSelectOptionGroup(item) ? ( /*#__PURE__*/React.createElement(Section, {
|
|
547
|
-
key: item.label,
|
|
548
|
-
title: item.label,
|
|
549
|
-
items: item.options
|
|
550
|
-
}, function (child) {
|
|
551
|
-
return /*#__PURE__*/React.createElement(Item, {
|
|
552
|
-
key: child.value
|
|
553
|
-
}, child.label);
|
|
554
|
-
})) : ( /*#__PURE__*/React.createElement(Item, {
|
|
555
|
-
key: item.value
|
|
556
|
-
}, item.label));
|
|
557
|
-
};
|
|
558
|
-
var styles$3 = {
|
|
559
|
-
"popover": "Popover-module_popover__B7k5I"
|
|
560
|
-
};
|
|
561
|
-
const Popover = /*#__PURE__*/function () {
|
|
562
|
-
const Popover = function (_a) {
|
|
563
|
-
var children = _a.children,
|
|
564
|
-
refs = _a.refs,
|
|
565
|
-
floatingOptions = _a.floatingOptions,
|
|
566
|
-
focusOnProps = _a.focusOnProps,
|
|
567
|
-
portalContainer = _a.portalContainer,
|
|
568
|
-
classNameOverride = _a.classNameOverride,
|
|
569
|
-
restProps = __rest(_a, ["children", "refs", "floatingOptions", "focusOnProps", "portalContainer", "classNameOverride"]);
|
|
570
|
-
var floatingStyles = useFloating(__assign({
|
|
571
|
-
elements: {
|
|
572
|
-
reference: refs.reference.current,
|
|
573
|
-
floating: refs.floating.current
|
|
574
|
-
},
|
|
575
|
-
placement: "bottom-start",
|
|
576
|
-
middleware: [offset(6), flip(), size({
|
|
577
|
-
apply: function (_a) {
|
|
578
|
-
var availableWidth = _a.availableWidth,
|
|
579
|
-
availableHeight = _a.availableHeight,
|
|
580
|
-
elements = _a.elements;
|
|
581
|
-
Object.assign(elements.floating.style, {
|
|
582
|
-
maxWidth: "".concat(Math.min(availableWidth, 400), "px"),
|
|
583
|
-
minWidth: "".concat(Math.min(availableWidth, 196), "px"),
|
|
584
|
-
maxHeight: "".concat(Math.min(availableHeight, 352), "px")
|
|
585
|
-
});
|
|
586
|
-
}
|
|
587
|
-
})],
|
|
588
|
-
whileElementsMounted: autoUpdate
|
|
589
|
-
}, floatingOptions)).floatingStyles;
|
|
590
|
-
return /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(FocusOn, __assign({
|
|
591
|
-
enabled: false,
|
|
592
|
-
scrollLock: false
|
|
593
|
-
}, focusOnProps), /*#__PURE__*/React.createElement("div", __assign({
|
|
594
|
-
ref: refs.setFloating,
|
|
595
|
-
style: floatingStyles,
|
|
596
|
-
className: classnames(styles$3.popover, classNameOverride)
|
|
597
|
-
}, restProps), children)), portalContainer !== null && portalContainer !== void 0 ? portalContainer : document.body);
|
|
598
|
-
};
|
|
599
|
-
Popover.displayName = "Popover";
|
|
600
|
-
return Popover;
|
|
601
|
-
}();
|
|
602
|
-
var styles$2 = {
|
|
603
|
-
"tag": "Tag-module_tag__Ef8Iu",
|
|
604
|
-
"iconContainer": "Tag-module_iconContainer__tEPTW",
|
|
605
|
-
"gray": "Tag-module_gray__4YmDZ",
|
|
606
|
-
"blue": "Tag-module_blue__CjyTI",
|
|
607
|
-
"green": "Tag-module_green__uC0TU",
|
|
608
|
-
"yellow": "Tag-module_yellow__wEk5Z",
|
|
609
|
-
"orange": "Tag-module_orange__V-KdG",
|
|
610
|
-
"red": "Tag-module_red__cg1Rf",
|
|
611
|
-
"purple": "Tag-module_purple__OR2Jt"
|
|
612
|
-
};
|
|
613
|
-
const Tag = /*#__PURE__*/function () {
|
|
614
|
-
const Tag = function (_a) {
|
|
615
|
-
var children = _a.children,
|
|
616
|
-
classNameOverride = _a.classNameOverride,
|
|
617
|
-
icon = _a.icon,
|
|
618
|
-
_b = _a.color,
|
|
619
|
-
color = _b === void 0 ? "gray" : _b,
|
|
620
|
-
restProps = __rest(_a, ["children", "classNameOverride", "icon", "color"]);
|
|
621
|
-
return /*#__PURE__*/React.createElement("span", __assign({
|
|
622
|
-
className: classnames(styles$2.tag, styles$2[color], classNameOverride)
|
|
623
|
-
}, restProps), icon && /*#__PURE__*/React.createElement("span", {
|
|
624
|
-
className: styles$2.iconContainer
|
|
625
|
-
}, icon), children);
|
|
626
|
-
};
|
|
627
|
-
Tag.displayName = "Tag";
|
|
628
|
-
return Tag;
|
|
629
|
-
}();
|
|
630
|
-
var styles$1 = {
|
|
631
|
-
"removeButton": "RemoveButton-module_removeButton__9yzxJ"
|
|
632
|
-
};
|
|
633
|
-
const RemoveButton = /*#__PURE__*/function () {
|
|
634
|
-
const RemoveButton = function (_a) {
|
|
635
|
-
var classNameOverride = _a.classNameOverride,
|
|
636
|
-
// color = "gray",
|
|
637
|
-
ariaLabel = _a.ariaLabel,
|
|
638
|
-
onClick = _a.onClick,
|
|
639
|
-
restProps = __rest(_a, ["classNameOverride", "ariaLabel", "onClick"]);
|
|
640
|
-
return /*#__PURE__*/React.createElement("button", __assign({
|
|
641
|
-
type: "button",
|
|
642
|
-
"aria-label": ariaLabel,
|
|
643
|
-
className: classnames(styles$1.removeButton, classNameOverride),
|
|
644
|
-
onClick: onClick
|
|
645
|
-
}, restProps), /*#__PURE__*/React.createElement(Icon, {
|
|
646
|
-
name: "close",
|
|
647
|
-
isPresentational: true
|
|
648
|
-
}));
|
|
649
|
-
};
|
|
650
|
-
RemoveButton.displayName = "RemoveButton";
|
|
651
|
-
return RemoveButton;
|
|
652
|
-
}();
|
|
653
|
-
var styles = {
|
|
654
|
-
"removableTag": "RemovableTag-module_removableTag__IwJHj"
|
|
655
|
-
};
|
|
656
|
-
const RemovableTag = /*#__PURE__*/function () {
|
|
657
|
-
const RemovableTag = function (_a) {
|
|
658
|
-
var children = _a.children,
|
|
659
|
-
classNameOverride = _a.classNameOverride,
|
|
660
|
-
// Note: We've commented out color support for now, but may introduce it back in later
|
|
661
|
-
// if a good use case comes along.
|
|
662
|
-
// color = "gray",
|
|
663
|
-
removeButtonProps = _a.removeButtonProps,
|
|
664
|
-
restProps = __rest(_a, ["children", "classNameOverride", "removeButtonProps"]);
|
|
665
|
-
return /*#__PURE__*/React.createElement(Tag, __assign({
|
|
666
|
-
classNameOverride: classnames(classNameOverride, styles.removableTag)
|
|
667
|
-
}, restProps), children, /*#__PURE__*/React.createElement(RemoveButton
|
|
668
|
-
// color={color}
|
|
669
|
-
, __assign({}, removeButtonProps)));
|
|
670
|
-
};
|
|
671
|
-
RemovableTag.displayName = "RemovableTag";
|
|
672
|
-
return RemovableTag;
|
|
673
|
-
}();
|
|
674
|
-
export { Divider as D, FieldMessage as F, Icon as I, ListBoxSection as L, Option as O, Popover as P, RemovableTag as R, SelectToggle as S, Tag as T, SelectProvider as a, SelectPopoverContents as b, SectionDivider as c, ListItem as d, ListBox as e, Text as f, getDisabledKeysFromItems as g, Label as h, transformSelectItemToCollectionElement as t };
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
var ReversedColorsContext = /*#__PURE__*/React.createContext(false);
|
|
3
|
-
var useReversedColors = function () {
|
|
4
|
-
return React.useContext(ReversedColorsContext);
|
|
5
|
-
};
|
|
6
|
-
var ReversedColors = function (_a) {
|
|
7
|
-
var children = _a.children,
|
|
8
|
-
_b = _a.isReversed,
|
|
9
|
-
isReversed = _b === void 0 ? true : _b;
|
|
10
|
-
return /*#__PURE__*/React.createElement(ReversedColorsContext.Provider, {
|
|
11
|
-
value: isReversed
|
|
12
|
-
}, children);
|
|
13
|
-
};
|
|
14
|
-
export { ReversedColors as R, useReversedColors as u };
|