@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.
@@ -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 };