@salt-ds/lab 1.0.0-alpha.36 → 1.0.0-alpha.38

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.
Files changed (109) hide show
  1. package/css/salt-lab.css +27 -400
  2. package/dist-cjs/calendar/internal/CalendarNavigation.js +4 -8
  3. package/dist-cjs/calendar/internal/CalendarNavigation.js.map +1 -1
  4. package/dist-cjs/combo-box/useCombobox.js.map +1 -1
  5. package/dist-cjs/index.js +2 -8
  6. package/dist-cjs/index.js.map +1 -1
  7. package/dist-cjs/segmented-button-group/SegmentedButtonGroup.css.js +6 -0
  8. package/dist-cjs/segmented-button-group/SegmentedButtonGroup.css.js.map +1 -0
  9. package/dist-cjs/segmented-button-group/SegmentedButtonGroup.js +30 -0
  10. package/dist-cjs/segmented-button-group/SegmentedButtonGroup.js.map +1 -0
  11. package/dist-cjs/tabs-next/TabstripNext.css.js +1 -1
  12. package/dist-es/calendar/internal/CalendarNavigation.js +3 -7
  13. package/dist-es/calendar/internal/CalendarNavigation.js.map +1 -1
  14. package/dist-es/combo-box/useCombobox.js.map +1 -1
  15. package/dist-es/index.js +1 -4
  16. package/dist-es/index.js.map +1 -1
  17. package/dist-es/segmented-button-group/SegmentedButtonGroup.css.js +4 -0
  18. package/dist-es/segmented-button-group/SegmentedButtonGroup.css.js.map +1 -0
  19. package/dist-es/segmented-button-group/SegmentedButtonGroup.js +26 -0
  20. package/dist-es/segmented-button-group/SegmentedButtonGroup.js.map +1 -0
  21. package/dist-es/tabs-next/TabstripNext.css.js +1 -1
  22. package/dist-types/calendar/internal/CalendarNavigation.d.ts +2 -3
  23. package/dist-types/index.d.ts +1 -3
  24. package/dist-types/segmented-button-group/SegmentedButtonGroup.d.ts +4 -0
  25. package/dist-types/segmented-button-group/index.d.ts +1 -0
  26. package/package.json +2 -2
  27. package/dist-cjs/combo-box-next/ComboBoxNext.css.js +0 -6
  28. package/dist-cjs/combo-box-next/ComboBoxNext.css.js.map +0 -1
  29. package/dist-cjs/combo-box-next/ComboBoxNext.js +0 -366
  30. package/dist-cjs/combo-box-next/ComboBoxNext.js.map +0 -1
  31. package/dist-cjs/combo-box-next/useComboBoxNext.js +0 -68
  32. package/dist-cjs/combo-box-next/useComboBoxNext.js.map +0 -1
  33. package/dist-cjs/dropdown-next/DropdownNext.css.js +0 -6
  34. package/dist-cjs/dropdown-next/DropdownNext.css.js.map +0 -1
  35. package/dist-cjs/dropdown-next/DropdownNext.js +0 -335
  36. package/dist-cjs/dropdown-next/DropdownNext.js.map +0 -1
  37. package/dist-cjs/list-control/ListControlContext.js +0 -38
  38. package/dist-cjs/list-control/ListControlContext.js.map +0 -1
  39. package/dist-cjs/list-control/ListControlState.js +0 -192
  40. package/dist-cjs/list-control/ListControlState.js.map +0 -1
  41. package/dist-cjs/option/Option.css.js +0 -6
  42. package/dist-cjs/option/Option.css.js.map +0 -1
  43. package/dist-cjs/option/Option.js +0 -99
  44. package/dist-cjs/option/Option.js.map +0 -1
  45. package/dist-cjs/option/OptionGroup.css.js +0 -6
  46. package/dist-cjs/option/OptionGroup.css.js.map +0 -1
  47. package/dist-cjs/option/OptionGroup.js +0 -44
  48. package/dist-cjs/option/OptionGroup.js.map +0 -1
  49. package/dist-cjs/option/OptionList.css.js +0 -6
  50. package/dist-cjs/option/OptionList.css.js.map +0 -1
  51. package/dist-cjs/option/OptionList.js +0 -40
  52. package/dist-cjs/option/OptionList.js.map +0 -1
  53. package/dist-cjs/pill-input/PillInput.css.js +0 -6
  54. package/dist-cjs/pill-input/PillInput.css.js.map +0 -1
  55. package/dist-cjs/pill-input/PillInput.js +0 -256
  56. package/dist-cjs/pill-input/PillInput.js.map +0 -1
  57. package/dist-cjs/pill-input/useTruncatePills.js +0 -85
  58. package/dist-cjs/pill-input/useTruncatePills.js.map +0 -1
  59. package/dist-cjs/utils/useValueEffect.js +0 -40
  60. package/dist-cjs/utils/useValueEffect.js.map +0 -1
  61. package/dist-es/combo-box-next/ComboBoxNext.css.js +0 -4
  62. package/dist-es/combo-box-next/ComboBoxNext.css.js.map +0 -1
  63. package/dist-es/combo-box-next/ComboBoxNext.js +0 -362
  64. package/dist-es/combo-box-next/ComboBoxNext.js.map +0 -1
  65. package/dist-es/combo-box-next/useComboBoxNext.js +0 -64
  66. package/dist-es/combo-box-next/useComboBoxNext.js.map +0 -1
  67. package/dist-es/dropdown-next/DropdownNext.css.js +0 -4
  68. package/dist-es/dropdown-next/DropdownNext.css.js.map +0 -1
  69. package/dist-es/dropdown-next/DropdownNext.js +0 -331
  70. package/dist-es/dropdown-next/DropdownNext.js.map +0 -1
  71. package/dist-es/list-control/ListControlContext.js +0 -33
  72. package/dist-es/list-control/ListControlContext.js.map +0 -1
  73. package/dist-es/list-control/ListControlState.js +0 -187
  74. package/dist-es/list-control/ListControlState.js.map +0 -1
  75. package/dist-es/option/Option.css.js +0 -4
  76. package/dist-es/option/Option.css.js.map +0 -1
  77. package/dist-es/option/Option.js +0 -95
  78. package/dist-es/option/Option.js.map +0 -1
  79. package/dist-es/option/OptionGroup.css.js +0 -4
  80. package/dist-es/option/OptionGroup.css.js.map +0 -1
  81. package/dist-es/option/OptionGroup.js +0 -40
  82. package/dist-es/option/OptionGroup.js.map +0 -1
  83. package/dist-es/option/OptionList.css.js +0 -4
  84. package/dist-es/option/OptionList.css.js.map +0 -1
  85. package/dist-es/option/OptionList.js +0 -36
  86. package/dist-es/option/OptionList.js.map +0 -1
  87. package/dist-es/pill-input/PillInput.css.js +0 -4
  88. package/dist-es/pill-input/PillInput.css.js.map +0 -1
  89. package/dist-es/pill-input/PillInput.js +0 -252
  90. package/dist-es/pill-input/PillInput.js.map +0 -1
  91. package/dist-es/pill-input/useTruncatePills.js +0 -81
  92. package/dist-es/pill-input/useTruncatePills.js.map +0 -1
  93. package/dist-es/utils/useValueEffect.js +0 -36
  94. package/dist-es/utils/useValueEffect.js.map +0 -1
  95. package/dist-types/combo-box-next/ComboBoxNext.d.ts +0 -17
  96. package/dist-types/combo-box-next/index.d.ts +0 -1
  97. package/dist-types/combo-box-next/useComboBoxNext.d.ts +0 -30
  98. package/dist-types/dropdown-next/DropdownNext.d.ts +0 -99
  99. package/dist-types/dropdown-next/index.d.ts +0 -1
  100. package/dist-types/list-control/ListControlContext.d.ts +0 -21
  101. package/dist-types/list-control/ListControlState.d.ts +0 -70
  102. package/dist-types/option/Option.d.ts +0 -16
  103. package/dist-types/option/OptionGroup.d.ts +0 -12
  104. package/dist-types/option/OptionList.d.ts +0 -5
  105. package/dist-types/option/index.d.ts +0 -2
  106. package/dist-types/pill-input/PillInput.d.ts +0 -48
  107. package/dist-types/pill-input/index.d.ts +0 -1
  108. package/dist-types/pill-input/useTruncatePills.d.ts +0 -8
  109. package/dist-types/utils/useValueEffect.d.ts +0 -4
@@ -1 +0,0 @@
1
- {"version":3,"file":"useTruncatePills.js","sources":["../src/pill-input/useTruncatePills.ts"],"sourcesContent":["import { useCallback, useRef } from \"react\";\nimport { useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport { useValueEffect } from \"../utils/useValueEffect\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useResizeObserver } from \"../responsive\";\n\nexport function useTruncatePills({\n pills,\n enable,\n}: {\n pills: string[];\n enable?: boolean;\n}) {\n const pillListRef = useRef<HTMLDivElement>(null);\n const [{ visibleCount }, setVisibleItems] = useValueEffect({\n visibleCount: pills.length,\n });\n const targetWindow = useWindow();\n\n const updateOverflow = useCallback(() => {\n if (!enable) {\n return;\n }\n\n const computeVisible = (visibleCount: number) => {\n const pillList = pillListRef.current;\n\n if (pillList && targetWindow) {\n let pillElements = Array.from(\n pillList.querySelectorAll('[role=\"listitem\"]')\n ) as HTMLLIElement[];\n const maxWidth = pillList.getBoundingClientRect().width;\n const listGap = parseInt(targetWindow.getComputedStyle(pillList).gap);\n let isShowingOverflow = pillList.querySelector(\n \"[data-overflowindicator]\"\n );\n\n let currentSize = 0;\n let newVisibleCount = 0;\n\n if (isShowingOverflow) {\n let pill = pillElements.pop();\n if (pill) {\n let pillWidth = pill.getBoundingClientRect().width;\n currentSize += pillWidth + listGap;\n }\n }\n\n for (let pill of pillElements) {\n let pillWidth = pill.getBoundingClientRect().width;\n currentSize += pillWidth + listGap;\n\n if (Math.round(currentSize) <= Math.round(maxWidth)) {\n newVisibleCount++;\n } else {\n break;\n }\n }\n return newVisibleCount;\n }\n return visibleCount;\n };\n\n setVisibleItems(function* () {\n // Show all\n yield {\n visibleCount: pills.length,\n };\n\n // Measure the visible count\n let newVisibleCount = computeVisible(pills.length);\n let isMeasuring = newVisibleCount < pills.length && newVisibleCount > 0;\n yield {\n visibleCount: newVisibleCount,\n };\n\n // ensure the visible count is correct\n if (isMeasuring) {\n newVisibleCount = computeVisible(visibleCount);\n yield {\n visibleCount: newVisibleCount,\n };\n }\n });\n }, [pills, setVisibleItems, enable, targetWindow]);\n\n useIsomorphicLayoutEffect(updateOverflow, [updateOverflow, pills]);\n useResizeObserver(pillListRef, [\"width\"], updateOverflow, true);\n\n return {\n pillListRef,\n visibleCount,\n visiblePills: enable ? pills.slice(0, visibleCount) : pills,\n };\n}\n"],"names":["useRef","useValueEffect","useWindow","useCallback","visibleCount","useIsomorphicLayoutEffect","useResizeObserver"],"mappings":"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"}
@@ -1,40 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var React = require('react');
6
- var core = require('@salt-ds/core');
7
- var useEventCallback = require('./useEventCallback.js');
8
-
9
- function useValueEffect(defaultValue) {
10
- let [value, setValue] = React.useState(defaultValue);
11
- let effect = React.useRef(null);
12
- let nextRef = useEventCallback.useEventCallback(() => {
13
- if (!effect.current) {
14
- return;
15
- }
16
- let newValue = effect.current.next();
17
- if (newValue.done) {
18
- effect.current = null;
19
- return;
20
- }
21
- if (value === newValue.value) {
22
- nextRef();
23
- } else {
24
- setValue(newValue.value);
25
- }
26
- });
27
- core.useIsomorphicLayoutEffect(() => {
28
- if (effect.current) {
29
- nextRef();
30
- }
31
- });
32
- let queue = useEventCallback.useEventCallback((fn) => {
33
- effect.current = fn(value);
34
- nextRef();
35
- });
36
- return [value, queue];
37
- }
38
-
39
- exports.useValueEffect = useValueEffect;
40
- //# sourceMappingURL=useValueEffect.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useValueEffect.js","sources":["../src/utils/useValueEffect.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport { Dispatch, MutableRefObject, useRef, useState } from \"react\";\nimport { useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport { useEventCallback } from \"./useEventCallback\";\n\ntype SetValueAction<S> = (prev: S) => Generator<any, void, unknown>;\n\n// This hook works like `useState`, but when setting the value, you pass a generator function\n// that can yield multiple values. Each yielded value updates the state and waits for the next\n// layout effect, then continues the generator. This allows sequential updates to state to be\n// written linearly.\nexport function useValueEffect<S>(\n defaultValue: S | (() => S)\n): [S, Dispatch<SetValueAction<S>>] {\n let [value, setValue] = useState(defaultValue);\n let effect: MutableRefObject<Generator<S> | null> =\n useRef<Generator<S> | null>(null);\n\n // Store the function in a ref so we can always access the current version\n // which has the proper `value` in scope.\n let nextRef = useEventCallback(() => {\n if (!effect.current) {\n return;\n }\n // Run the generator to the next yield.\n let newValue = effect.current.next();\n\n // If the generator is done, reset the effect.\n if (newValue.done) {\n effect.current = null;\n return;\n }\n\n // If the value is the same as the current value,\n // then continue to the next yield. Otherwise,\n // set the value in state and wait for the next layout effect.\n if (value === newValue.value) {\n nextRef();\n } else {\n setValue(newValue.value);\n }\n });\n\n useIsomorphicLayoutEffect(() => {\n // If there is an effect currently running, continue to the next yield.\n if (effect.current) {\n nextRef();\n }\n });\n\n let queue: Dispatch<SetValueAction<S>> = useEventCallback((fn) => {\n effect.current = fn(value);\n nextRef();\n });\n\n return [value, queue];\n}\n"],"names":["useState","useRef","useEventCallback","useIsomorphicLayoutEffect"],"mappings":";;;;;;;;AAsBO,SAAS,eACd,YACkC,EAAA;AAClC,EAAA,IAAI,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAIA,eAAS,YAAY,CAAA,CAAA;AAC7C,EAAI,IAAA,MAAA,GACFC,aAA4B,IAAI,CAAA,CAAA;AAIlC,EAAI,IAAA,OAAA,GAAUC,kCAAiB,MAAM;AACnC,IAAI,IAAA,CAAC,OAAO,OAAS,EAAA;AACnB,MAAA,OAAA;AAAA,KACF;AAEA,IAAI,IAAA,QAAA,GAAW,MAAO,CAAA,OAAA,CAAQ,IAAK,EAAA,CAAA;AAGnC,IAAA,IAAI,SAAS,IAAM,EAAA;AACjB,MAAA,MAAA,CAAO,OAAU,GAAA,IAAA,CAAA;AACjB,MAAA,OAAA;AAAA,KACF;AAKA,IAAI,IAAA,KAAA,KAAU,SAAS,KAAO,EAAA;AAC5B,MAAQ,OAAA,EAAA,CAAA;AAAA,KACH,MAAA;AACL,MAAA,QAAA,CAAS,SAAS,KAAK,CAAA,CAAA;AAAA,KACzB;AAAA,GACD,CAAA,CAAA;AAED,EAAAC,8BAAA,CAA0B,MAAM;AAE9B,IAAA,IAAI,OAAO,OAAS,EAAA;AAClB,MAAQ,OAAA,EAAA,CAAA;AAAA,KACV;AAAA,GACD,CAAA,CAAA;AAED,EAAI,IAAA,KAAA,GAAqCD,iCAAiB,CAAA,CAAC,EAAO,KAAA;AAChE,IAAO,MAAA,CAAA,OAAA,GAAU,GAAG,KAAK,CAAA,CAAA;AACzB,IAAQ,OAAA,EAAA,CAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAO,OAAA,CAAC,OAAO,KAAK,CAAA,CAAA;AACtB;;;;"}
@@ -1,4 +0,0 @@
1
- var css_248z = ".saltComboBoxNext-focused {\n outline: var(--salt-focused-outline);\n}\n";
2
-
3
- export { css_248z as default };
4
- //# sourceMappingURL=ComboBoxNext.css.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ComboBoxNext.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
@@ -1,362 +0,0 @@
1
- import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
2
- import { forwardRef, useRef, useEffect } from 'react';
3
- import { makePrefixer, useFormFieldProps, useFloatingComponent, useFloatingUI, useForkRef, useId, Button } from '@salt-ds/core';
4
- import { defaultValueToString } from '../list-control/ListControlState.js';
5
- import { ListControlContext } from '../list-control/ListControlContext.js';
6
- import { clsx } from 'clsx';
7
- import { size, flip, useInteractions, useDismiss, useFocus, useClick } from '@floating-ui/react';
8
- import { ChevronUpIcon, ChevronDownIcon } from '@salt-ds/icons';
9
- import { useComboBoxNext } from './useComboBoxNext.js';
10
- import { OptionList } from '../option/OptionList.js';
11
- import { PillInput } from '../pill-input/PillInput.js';
12
- import { useWindow } from '@salt-ds/window';
13
- import { useComponentCssInjection } from '@salt-ds/styles';
14
- import css_248z from './ComboBoxNext.css.js';
15
-
16
- const withBaseName = makePrefixer("saltComboBoxNext");
17
- const ComboBoxNext = forwardRef(function ComboBox(props, ref) {
18
- var _a, _b;
19
- const {
20
- children,
21
- className,
22
- disabled: disabledProp,
23
- endAdornment,
24
- readOnly: readOnlyProp,
25
- multiselect,
26
- onSelectionChange,
27
- selected,
28
- defaultSelected,
29
- defaultOpen,
30
- onOpenChange,
31
- onChange,
32
- open,
33
- inputProps: inputPropsProp,
34
- variant = "primary",
35
- onClick,
36
- onKeyDown,
37
- onFocus,
38
- onBlur,
39
- value,
40
- defaultValue,
41
- valueToString = defaultValueToString,
42
- truncate,
43
- ...rest
44
- } = props;
45
- const targetWindow = useWindow();
46
- useComponentCssInjection({
47
- testId: "salt-combo-box-next",
48
- css: css_248z,
49
- window: targetWindow
50
- });
51
- const {
52
- a11yProps: { "aria-labelledby": formFieldLabelledBy } = {},
53
- disabled: formFieldDisabled,
54
- readOnly: formFieldReadOnly
55
- } = useFormFieldProps();
56
- const disabled = Boolean(disabledProp) || formFieldDisabled;
57
- const readOnly = Boolean(readOnlyProp) || formFieldReadOnly;
58
- const inputRef = useRef(null);
59
- const listControl = useComboBoxNext({
60
- open,
61
- defaultOpen,
62
- onOpenChange,
63
- multiselect,
64
- defaultSelected,
65
- selected,
66
- onSelectionChange,
67
- value,
68
- defaultValue,
69
- disabled,
70
- readOnly,
71
- valueToString
72
- });
73
- const {
74
- activeState,
75
- setActive,
76
- openState,
77
- setOpen,
78
- openKey,
79
- getOptionAtIndex,
80
- getIndexOfOption,
81
- getOptionsMatching,
82
- options,
83
- selectedState,
84
- select,
85
- clear,
86
- focusVisibleState,
87
- setFocusVisibleState,
88
- focusedState,
89
- setFocusedState,
90
- listRef,
91
- valueState,
92
- setValueState
93
- } = listControl;
94
- const { Component: FloatingComponent } = useFloatingComponent();
95
- const handleOpenChange = (newOpen, _event, reason) => {
96
- var _a2;
97
- const focusNotBlur = reason === "focus" && newOpen;
98
- if (reason == "focus") {
99
- setFocusedState(newOpen);
100
- }
101
- if (reason == "focus" && !newOpen) {
102
- setFocusVisibleState(false);
103
- }
104
- if (readOnly || focusNotBlur)
105
- return;
106
- setOpen(newOpen);
107
- if (newOpen) {
108
- (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
109
- }
110
- };
111
- const { x, y, strategy, elements, floating, reference, context } = useFloatingUI({
112
- open: openState && !readOnly && children != void 0,
113
- onOpenChange: handleOpenChange,
114
- placement: "bottom-start",
115
- middleware: [
116
- size({
117
- apply({ rects, elements: elements2, availableHeight }) {
118
- Object.assign(elements2.floating.style, {
119
- minWidth: `${rects.reference.width}px`,
120
- maxHeight: `max(calc(${availableHeight}px - var(--salt-spacing-100)), calc((var(--salt-size-base) + var(--salt-spacing-100)) * 5))`
121
- });
122
- }
123
- }),
124
- flip({ fallbackStrategy: "initialPlacement" })
125
- ]
126
- });
127
- const { getReferenceProps, getFloatingProps } = useInteractions([
128
- useDismiss(context),
129
- useFocus(context),
130
- useClick(context, { keyboardHandlers: false, toggle: false })
131
- ]);
132
- const handleRef = useForkRef(reference, ref);
133
- const handleButtonClick = (event) => {
134
- if (!readOnly) {
135
- event.stopPropagation();
136
- setFocusVisibleState(false);
137
- setOpen(!openState, "manual");
138
- }
139
- };
140
- const handleButtonFocus = () => {
141
- var _a2;
142
- (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
143
- };
144
- const handleKeyDown = (event) => {
145
- const currentIndex = activeState ? getIndexOfOption(activeState) : -1;
146
- const count = options.length - 1;
147
- if (readOnly) {
148
- return;
149
- }
150
- if (!openState) {
151
- if (event.key === "ArrowDown" || event.key === "ArrowUp") {
152
- setOpen(true, void 0, event.key);
153
- return;
154
- }
155
- }
156
- let newActive;
157
- switch (event.key) {
158
- case "ArrowDown":
159
- newActive = getOptionAtIndex(Math.min(count, currentIndex + 1));
160
- break;
161
- case "ArrowUp":
162
- newActive = getOptionAtIndex(Math.max(0, currentIndex - 1));
163
- break;
164
- case "Home":
165
- newActive = getOptionAtIndex(0);
166
- break;
167
- case "End":
168
- newActive = getOptionAtIndex(count);
169
- break;
170
- case "PageUp":
171
- newActive = getOptionAtIndex(Math.max(0, currentIndex - 10));
172
- break;
173
- case "PageDown":
174
- newActive = getOptionAtIndex(Math.min(count, currentIndex + 10));
175
- break;
176
- case "Enter":
177
- if (openState && (activeState == null ? void 0 : activeState.disabled)) {
178
- event.preventDefault();
179
- return;
180
- }
181
- if (!openState || !activeState) {
182
- return;
183
- }
184
- select(event, activeState);
185
- if (!multiselect) {
186
- event.preventDefault();
187
- }
188
- break;
189
- case "Tab":
190
- if (!multiselect && activeState) {
191
- select(event, activeState);
192
- }
193
- break;
194
- }
195
- if (newActive) {
196
- setFocusVisibleState(true);
197
- }
198
- if (newActive && (newActive == null ? void 0 : newActive.id) != (activeState == null ? void 0 : activeState.id)) {
199
- event.preventDefault();
200
- setActive(newActive);
201
- }
202
- onKeyDown == null ? void 0 : onKeyDown(event);
203
- };
204
- const handleFocus = (event) => {
205
- setFocusedState(true);
206
- onFocus == null ? void 0 : onFocus(event);
207
- };
208
- const handleChange = (event) => {
209
- if (!openState) {
210
- setOpen(true, "input");
211
- }
212
- if (event.target.value === "" && !multiselect) {
213
- clear(event);
214
- }
215
- setValueState(event.target.value);
216
- queueMicrotask(() => {
217
- if (event.target.value !== "") {
218
- const newOption = getOptionAtIndex(0);
219
- if (newOption) {
220
- setActive(newOption);
221
- }
222
- } else {
223
- setActive(void 0);
224
- }
225
- });
226
- onChange == null ? void 0 : onChange(event);
227
- };
228
- const handlePillRemove = (event, index) => {
229
- event.stopPropagation();
230
- const removed = selectedState[index];
231
- select(event, getOptionsMatching((option) => option.value === removed)[0]);
232
- };
233
- const handleListMouseOver = () => {
234
- setFocusVisibleState(false);
235
- };
236
- const handleListMouseLeave = () => {
237
- setActive(void 0);
238
- };
239
- const handleFocusInput = () => {
240
- var _a2;
241
- (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
242
- };
243
- useEffect(() => {
244
- const activeIndex = activeState ? getIndexOfOption(activeState) : -1;
245
- let newActive = void 0;
246
- if (activeIndex > -1) {
247
- return;
248
- }
249
- if (!openState) {
250
- setActive(void 0);
251
- return;
252
- }
253
- if (selectedState.length > 0) {
254
- newActive = getOptionsMatching(
255
- (option) => option.value === selectedState[0]
256
- ).pop();
257
- }
258
- if (!newActive) {
259
- if (openKey.current === "ArrowDown") {
260
- newActive = getOptionAtIndex(0);
261
- setFocusVisibleState(true);
262
- } else if (openKey.current === "ArrowUp") {
263
- newActive = getOptionAtIndex(options.length - 1);
264
- setFocusVisibleState(true);
265
- }
266
- }
267
- if (!newActive) {
268
- newActive = getOptionAtIndex(0);
269
- }
270
- setActive(newActive);
271
- }, [openState, children]);
272
- const buttonId = useId();
273
- const listId = useId();
274
- return /* @__PURE__ */ jsxs(ListControlContext.Provider, {
275
- value: listControl,
276
- children: [
277
- /* @__PURE__ */ jsx(PillInput, {
278
- className: clsx(
279
- withBaseName(),
280
- {
281
- [withBaseName("focused")]: focusedState,
282
- [withBaseName("focusVisible")]: focusVisibleState
283
- },
284
- className
285
- ),
286
- endAdornment: /* @__PURE__ */ jsxs(Fragment, {
287
- children: [
288
- endAdornment,
289
- !readOnly ? /* @__PURE__ */ jsx(Button, {
290
- "aria-labelledby": clsx(buttonId, formFieldLabelledBy),
291
- "aria-label": "Show options",
292
- "aria-expanded": openState,
293
- "aria-controls": openState ? listId : void 0,
294
- "aria-haspopup": "listbox",
295
- disabled,
296
- variant: "secondary",
297
- onClick: handleButtonClick,
298
- onFocus: handleButtonFocus,
299
- tabIndex: -1,
300
- children: openState ? /* @__PURE__ */ jsx(ChevronUpIcon, {
301
- "aria-hidden": true
302
- }) : /* @__PURE__ */ jsx(ChevronDownIcon, {
303
- "aria-hidden": true
304
- })
305
- }) : void 0
306
- ]
307
- }),
308
- onChange: handleChange,
309
- role: "combobox",
310
- disabled,
311
- readOnly,
312
- inputProps: {
313
- role: "combobox",
314
- "aria-expanded": openState,
315
- "aria-multiselectable": multiselect,
316
- "aria-controls": openState ? listId : void 0,
317
- onKeyDown: handleKeyDown,
318
- ...inputPropsProp
319
- },
320
- "aria-activedescendant": activeState == null ? void 0 : activeState.id,
321
- variant,
322
- inputRef,
323
- value: valueState,
324
- ref: handleRef,
325
- ...getReferenceProps({
326
- onBlur,
327
- onFocus: handleFocus,
328
- ...rest
329
- }),
330
- pills: multiselect ? selectedState.map((item) => valueToString(item)) : [],
331
- truncate: truncate && !focusedState && !openState,
332
- onPillRemove: handlePillRemove,
333
- hidePillClose: !focusedState || readOnly,
334
- emptyReadOnlyMarker: readOnly && selectedState.length > 0 ? "" : void 0
335
- }),
336
- /* @__PURE__ */ jsx(FloatingComponent, {
337
- open: (openState || focusedState) && !readOnly && children != void 0,
338
- ...getFloatingProps(),
339
- left: x != null ? x : 0,
340
- top: y != null ? y : 0,
341
- position: strategy,
342
- width: (_a = elements.floating) == null ? void 0 : _a.offsetWidth,
343
- height: (_b = elements.floating) == null ? void 0 : _b.offsetHeight,
344
- ref: floating,
345
- children: /* @__PURE__ */ jsx(OptionList, {
346
- collapsed: !openState,
347
- ref: listRef,
348
- id: listId,
349
- onMouseOver: handleListMouseOver,
350
- onFocus: handleFocusInput,
351
- onClick: handleFocusInput,
352
- onMouseLeave: handleListMouseLeave,
353
- tabIndex: -1,
354
- children
355
- })
356
- })
357
- ]
358
- });
359
- });
360
-
361
- export { ComboBoxNext };
362
- //# sourceMappingURL=ComboBoxNext.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ComboBoxNext.js","sources":["../src/combo-box-next/ComboBoxNext.tsx"],"sourcesContent":["import {\n ChangeEvent,\n FocusEvent,\n ForwardedRef,\n forwardRef,\n KeyboardEvent,\n MouseEvent,\n ReactNode,\n Ref,\n SyntheticEvent,\n useEffect,\n useRef,\n} from \"react\";\nimport {\n Button,\n makePrefixer,\n useFloatingComponent,\n useFloatingUI,\n UseFloatingUIProps,\n useForkRef,\n useFormFieldProps,\n useId,\n} from \"@salt-ds/core\";\nimport { defaultValueToString } from \"../list-control/ListControlState\";\nimport { ListControlContext } from \"../list-control/ListControlContext\";\nimport { clsx } from \"clsx\";\nimport {\n flip,\n size,\n useClick,\n useDismiss,\n useFocus,\n useInteractions,\n} from \"@floating-ui/react\";\nimport { ChevronDownIcon, ChevronUpIcon } from \"@salt-ds/icons\";\nimport { useComboBoxNext, UseComboBoxNextProps } from \"./useComboBoxNext\";\nimport { OptionList } from \"../option/OptionList\";\nimport { PillInput, PillInputProps } from \"../pill-input\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport comboBoxNextCss from \"./ComboBoxNext.css\";\n\nexport type ComboBoxNextProps<Item = string> = {\n /**\n * The options to display in the combo box.\n */\n children?: ReactNode;\n} & UseComboBoxNextProps<Item> &\n PillInputProps;\n\nconst withBaseName = makePrefixer(\"saltComboBoxNext\");\n\nexport const ComboBoxNext = forwardRef(function ComboBox<Item>(\n props: ComboBoxNextProps<Item>,\n ref: ForwardedRef<HTMLDivElement>\n) {\n const {\n children,\n className,\n disabled: disabledProp,\n endAdornment,\n readOnly: readOnlyProp,\n multiselect,\n onSelectionChange,\n selected,\n defaultSelected,\n defaultOpen,\n onOpenChange,\n onChange,\n open,\n inputProps: inputPropsProp,\n variant = \"primary\",\n onClick,\n onKeyDown,\n onFocus,\n onBlur,\n value,\n defaultValue,\n valueToString = defaultValueToString,\n truncate,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-combo-box-next\",\n css: comboBoxNextCss,\n window: targetWindow,\n });\n\n const {\n a11yProps: { \"aria-labelledby\": formFieldLabelledBy } = {},\n disabled: formFieldDisabled,\n readOnly: formFieldReadOnly,\n } = useFormFieldProps();\n\n const disabled = Boolean(disabledProp) || formFieldDisabled;\n const readOnly = Boolean(readOnlyProp) || formFieldReadOnly;\n const inputRef = useRef<HTMLInputElement>(null);\n\n const listControl = useComboBoxNext<Item>({\n open,\n defaultOpen,\n onOpenChange,\n multiselect,\n defaultSelected,\n selected,\n onSelectionChange,\n value,\n defaultValue,\n disabled,\n readOnly,\n valueToString,\n });\n\n const {\n activeState,\n setActive,\n openState,\n setOpen,\n openKey,\n getOptionAtIndex,\n getIndexOfOption,\n getOptionsMatching,\n options,\n selectedState,\n select,\n clear,\n focusVisibleState,\n setFocusVisibleState,\n focusedState,\n setFocusedState,\n listRef,\n valueState,\n setValueState,\n } = listControl;\n\n const { Component: FloatingComponent } = useFloatingComponent();\n\n const handleOpenChange: UseFloatingUIProps[\"onOpenChange\"] = (\n newOpen,\n _event,\n reason\n ) => {\n const focusNotBlur = reason === \"focus\" && newOpen;\n if (reason == \"focus\") {\n setFocusedState(newOpen);\n }\n\n if (reason == \"focus\" && !newOpen) {\n setFocusVisibleState(false);\n }\n\n if (readOnly || focusNotBlur) return;\n setOpen(newOpen);\n\n if (newOpen) {\n inputRef.current?.focus();\n }\n };\n\n const { x, y, strategy, elements, floating, reference, context } =\n useFloatingUI({\n open: openState && !readOnly && children != undefined,\n onOpenChange: handleOpenChange,\n placement: \"bottom-start\",\n middleware: [\n size({\n apply({ rects, elements, availableHeight }) {\n Object.assign(elements.floating.style, {\n minWidth: `${rects.reference.width}px`,\n maxHeight: `max(calc(${availableHeight}px - var(--salt-spacing-100)), calc((var(--salt-size-base) + var(--salt-spacing-100)) * 5))`,\n });\n },\n }),\n flip({ fallbackStrategy: \"initialPlacement\" }),\n ],\n });\n\n const { getReferenceProps, getFloatingProps } = useInteractions([\n useDismiss(context),\n useFocus(context),\n useClick(context, { keyboardHandlers: false, toggle: false }),\n ]);\n\n const handleRef = useForkRef<HTMLDivElement>(reference, ref);\n\n const handleButtonClick = (event: MouseEvent<HTMLButtonElement>) => {\n if (!readOnly) {\n event.stopPropagation();\n setFocusVisibleState(false);\n setOpen(!openState, \"manual\");\n }\n };\n\n const handleButtonFocus = () => {\n inputRef.current?.focus();\n };\n\n const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n const currentIndex = activeState ? getIndexOfOption(activeState) : -1;\n const count = options.length - 1;\n\n if (readOnly) {\n return;\n }\n\n if (!openState) {\n if (event.key === \"ArrowDown\" || event.key === \"ArrowUp\") {\n setOpen(true, undefined, event.key);\n return;\n }\n }\n\n let newActive;\n switch (event.key) {\n case \"ArrowDown\":\n newActive = getOptionAtIndex(Math.min(count, currentIndex + 1));\n break;\n case \"ArrowUp\":\n newActive = getOptionAtIndex(Math.max(0, currentIndex - 1));\n break;\n case \"Home\":\n newActive = getOptionAtIndex(0);\n break;\n case \"End\":\n newActive = getOptionAtIndex(count);\n break;\n case \"PageUp\":\n newActive = getOptionAtIndex(Math.max(0, currentIndex - 10));\n break;\n case \"PageDown\":\n newActive = getOptionAtIndex(Math.min(count, currentIndex + 10));\n break;\n case \"Enter\":\n if (openState && activeState?.disabled) {\n event.preventDefault();\n return;\n }\n\n if (!openState || !activeState) {\n return;\n }\n\n select(event, activeState);\n\n if (!multiselect) {\n event.preventDefault();\n }\n\n break;\n case \"Tab\":\n if (!multiselect && activeState) {\n select(event, activeState);\n }\n break;\n }\n\n if (newActive) {\n setFocusVisibleState(true);\n }\n\n if (newActive && newActive?.id != activeState?.id) {\n event.preventDefault();\n setActive(newActive);\n }\n\n onKeyDown?.(event);\n };\n\n const handleFocus = (event: FocusEvent<HTMLInputElement>) => {\n setFocusedState(true);\n onFocus?.(event);\n };\n\n const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n if (!openState) {\n setOpen(true, \"input\");\n }\n\n if (event.target.value === \"\" && !multiselect) {\n clear(event);\n }\n\n setValueState(event.target.value);\n\n // Wait for the filter to happen\n queueMicrotask(() => {\n if (event.target.value !== \"\") {\n const newOption = getOptionAtIndex(0);\n if (newOption) {\n setActive(newOption);\n }\n } else {\n setActive(undefined);\n }\n });\n onChange?.(event);\n };\n\n const handlePillRemove = (event: SyntheticEvent, index: number) => {\n event.stopPropagation();\n const removed = selectedState[index];\n select(event, getOptionsMatching((option) => option.value === removed)[0]);\n };\n\n const handleListMouseOver = () => {\n setFocusVisibleState(false);\n };\n\n const handleListMouseLeave = () => {\n setActive(undefined);\n };\n\n const handleFocusInput = () => {\n inputRef.current?.focus();\n };\n\n useEffect(() => {\n // We check the active index because the active item may have been removed\n const activeIndex = activeState ? getIndexOfOption(activeState) : -1;\n let newActive = undefined;\n\n // If the active item is still in the list, we don't need to do anything\n if (activeIndex > -1) {\n return;\n }\n\n // If the list is closed we should clear the active item\n if (!openState) {\n setActive(undefined);\n return;\n }\n\n // If we have selected an item, we should make that the active item\n if (selectedState.length > 0) {\n newActive = getOptionsMatching(\n (option) => option.value === selectedState[0]\n ).pop();\n }\n\n // If we still don't have an active item, we should check if the list has been opened with the keyboard\n if (!newActive) {\n if (openKey.current === \"ArrowDown\") {\n newActive = getOptionAtIndex(0);\n setFocusVisibleState(true);\n } else if (openKey.current === \"ArrowUp\") {\n newActive = getOptionAtIndex(options.length - 1);\n setFocusVisibleState(true);\n }\n }\n\n // If we still don't have an active item, we should just select the first item\n if (!newActive) {\n newActive = getOptionAtIndex(0);\n }\n\n setActive(newActive);\n }, [openState, children]);\n\n const buttonId = useId();\n const listId = useId();\n\n return (\n <ListControlContext.Provider value={listControl}>\n <PillInput\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"focused\")]: focusedState,\n [withBaseName(\"focusVisible\")]: focusVisibleState,\n },\n className\n )}\n endAdornment={\n <>\n {endAdornment}\n {!readOnly ? (\n <Button\n aria-labelledby={clsx(buttonId, formFieldLabelledBy)}\n aria-label=\"Show options\"\n aria-expanded={openState}\n aria-controls={openState ? listId : undefined}\n aria-haspopup=\"listbox\"\n disabled={disabled}\n variant=\"secondary\"\n onClick={handleButtonClick}\n onFocus={handleButtonFocus}\n tabIndex={-1}\n >\n {openState ? (\n <ChevronUpIcon aria-hidden />\n ) : (\n <ChevronDownIcon aria-hidden />\n )}\n </Button>\n ) : undefined}\n </>\n }\n onChange={handleChange}\n role=\"combobox\"\n disabled={disabled}\n readOnly={readOnly}\n inputProps={{\n role: \"combobox\",\n \"aria-expanded\": openState,\n \"aria-multiselectable\": multiselect,\n \"aria-controls\": openState ? listId : undefined,\n onKeyDown: handleKeyDown,\n ...inputPropsProp,\n }}\n aria-activedescendant={activeState?.id}\n variant={variant}\n inputRef={inputRef}\n value={valueState}\n ref={handleRef}\n {...getReferenceProps({\n onBlur,\n onFocus: handleFocus,\n ...rest,\n })}\n pills={\n multiselect ? selectedState.map((item) => valueToString(item)) : []\n }\n truncate={truncate && !focusedState && !openState}\n onPillRemove={handlePillRemove}\n hidePillClose={!focusedState || readOnly}\n emptyReadOnlyMarker={\n readOnly && selectedState.length > 0 ? \"\" : undefined\n }\n />\n <FloatingComponent\n open={(openState || focusedState) && !readOnly && children != undefined}\n {...getFloatingProps()}\n left={x ?? 0}\n top={y ?? 0}\n position={strategy}\n width={elements.floating?.offsetWidth}\n height={elements.floating?.offsetHeight}\n ref={floating}\n >\n <OptionList\n collapsed={!openState}\n ref={listRef}\n id={listId}\n onMouseOver={handleListMouseOver}\n onFocus={handleFocusInput}\n onClick={handleFocusInput}\n onMouseLeave={handleListMouseLeave}\n tabIndex={-1}\n >\n {children}\n </OptionList>\n </FloatingComponent>\n </ListControlContext.Provider>\n );\n}) as <Item = string>(\n props: ComboBoxNextProps<Item> & { ref?: Ref<HTMLDivElement> }\n) => JSX.Element;\n"],"names":["comboBoxNextCss","_a","elements"],"mappings":"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"}
@@ -1,64 +0,0 @@
1
- import { useListControl } from '../list-control/ListControlState.js';
2
- import { useControlled } from '@salt-ds/core';
3
-
4
- function useComboBoxNext(props) {
5
- const {
6
- open,
7
- defaultOpen,
8
- onOpenChange,
9
- multiselect,
10
- defaultSelected,
11
- selected,
12
- onSelectionChange,
13
- disabled,
14
- readOnly,
15
- valueToString,
16
- value,
17
- defaultValue
18
- } = props;
19
- const listControl = useListControl({
20
- open,
21
- defaultOpen,
22
- onOpenChange,
23
- multiselect,
24
- defaultSelected,
25
- selected,
26
- onSelectionChange,
27
- disabled,
28
- readOnly,
29
- valueToString
30
- });
31
- const { selectedState, getOptionsMatching, setSelectedState, setOpen } = listControl;
32
- const [valueState, setValueState] = useControlled({
33
- controlled: value,
34
- default: (defaultValue != null ? defaultValue : selectedState.length === 1) ? listControl.valueToString(selectedState[0]) : defaultValue,
35
- name: "ComboBoxNext",
36
- state: "value"
37
- });
38
- const select = (event, option) => {
39
- if (option.disabled || disabled || readOnly) {
40
- return;
41
- }
42
- let newSelected = [option.value];
43
- if (multiselect) {
44
- if (selectedState.includes(option.value)) {
45
- newSelected = selectedState.filter((item) => item !== option.value);
46
- } else {
47
- newSelected = selectedState.concat([option.value]);
48
- }
49
- }
50
- setSelectedState(newSelected);
51
- const newValue = getOptionsMatching(
52
- (option2) => newSelected.includes(option2.value)
53
- ).map((option2) => listControl.valueToString(option2.value));
54
- setValueState(multiselect ? "" : newValue[0]);
55
- onSelectionChange == null ? void 0 : onSelectionChange(event, newSelected);
56
- if (!multiselect) {
57
- setOpen(false);
58
- }
59
- };
60
- return { ...listControl, select, valueState, setValueState };
61
- }
62
-
63
- export { useComboBoxNext };
64
- //# sourceMappingURL=useComboBoxNext.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useComboBoxNext.js","sources":["../src/combo-box-next/useComboBoxNext.tsx"],"sourcesContent":["import {\n useListControl,\n ListControlProps,\n} from \"../list-control/ListControlState\";\n\nimport { ComponentPropsWithoutRef, SyntheticEvent } from \"react\";\nimport { OptionValue } from \"../list-control/ListControlContext\";\nimport { useControlled } from \"@salt-ds/core\";\n\nexport type UseComboBoxNextProps<Item> = ListControlProps<Item> &\n Pick<ComponentPropsWithoutRef<\"input\">, \"value\" | \"defaultValue\">;\n\nexport function useComboBoxNext<Item>(props: UseComboBoxNextProps<Item>) {\n const {\n open,\n defaultOpen,\n onOpenChange,\n multiselect,\n defaultSelected,\n selected,\n onSelectionChange,\n disabled,\n readOnly,\n valueToString,\n value,\n defaultValue,\n } = props;\n\n const listControl = useListControl<Item>({\n open,\n defaultOpen,\n onOpenChange,\n multiselect,\n defaultSelected,\n selected,\n onSelectionChange,\n disabled,\n readOnly,\n valueToString,\n });\n\n const { selectedState, getOptionsMatching, setSelectedState, setOpen } =\n listControl;\n\n const [valueState, setValueState] = useControlled({\n controlled: value,\n default:\n defaultValue ?? selectedState.length === 1\n ? listControl.valueToString(selectedState[0])\n : defaultValue,\n name: \"ComboBoxNext\",\n state: \"value\",\n });\n\n const select = (event: SyntheticEvent, option: OptionValue<Item>) => {\n if (option.disabled || disabled || readOnly) {\n return;\n }\n\n let newSelected = [option.value];\n\n if (multiselect) {\n if (selectedState.includes(option.value)) {\n newSelected = selectedState.filter((item) => item !== option.value);\n } else {\n newSelected = selectedState.concat([option.value]);\n }\n }\n\n setSelectedState(newSelected);\n const newValue = getOptionsMatching((option) =>\n newSelected.includes(option.value)\n ).map((option) => listControl.valueToString(option.value));\n setValueState(multiselect ? \"\" : newValue[0]);\n onSelectionChange?.(event, newSelected);\n\n if (!multiselect) {\n setOpen(false);\n }\n };\n\n return { ...listControl, select, valueState, setValueState };\n}\n"],"names":["option"],"mappings":";;;AAYO,SAAS,gBAAsB,KAAmC,EAAA;AACvE,EAAM,MAAA;AAAA,IACJ,IAAA;AAAA,IACA,WAAA;AAAA,IACA,YAAA;AAAA,IACA,WAAA;AAAA,IACA,eAAA;AAAA,IACA,QAAA;AAAA,IACA,iBAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACA,aAAA;AAAA,IACA,KAAA;AAAA,IACA,YAAA;AAAA,GACE,GAAA,KAAA,CAAA;AAEJ,EAAA,MAAM,cAAc,cAAqB,CAAA;AAAA,IACvC,IAAA;AAAA,IACA,WAAA;AAAA,IACA,YAAA;AAAA,IACA,WAAA;AAAA,IACA,eAAA;AAAA,IACA,QAAA;AAAA,IACA,iBAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACA,aAAA;AAAA,GACD,CAAA,CAAA;AAED,EAAA,MAAM,EAAE,aAAA,EAAe,kBAAoB,EAAA,gBAAA,EAAkB,SAC3D,GAAA,WAAA,CAAA;AAEF,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAI,aAAc,CAAA;AAAA,IAChD,UAAY,EAAA,KAAA;AAAA,IACZ,OAAA,EAAA,CACE,sCAAgB,aAAc,CAAA,MAAA,KAAW,KACrC,WAAY,CAAA,aAAA,CAAc,aAAc,CAAA,CAAA,CAAE,CAC1C,GAAA,YAAA;AAAA,IACN,IAAM,EAAA,cAAA;AAAA,IACN,KAAO,EAAA,OAAA;AAAA,GACR,CAAA,CAAA;AAED,EAAM,MAAA,MAAA,GAAS,CAAC,KAAA,EAAuB,MAA8B,KAAA;AACnE,IAAI,IAAA,MAAA,CAAO,QAAY,IAAA,QAAA,IAAY,QAAU,EAAA;AAC3C,MAAA,OAAA;AAAA,KACF;AAEA,IAAI,IAAA,WAAA,GAAc,CAAC,MAAA,CAAO,KAAK,CAAA,CAAA;AAE/B,IAAA,IAAI,WAAa,EAAA;AACf,MAAA,IAAI,aAAc,CAAA,QAAA,CAAS,MAAO,CAAA,KAAK,CAAG,EAAA;AACxC,QAAA,WAAA,GAAc,cAAc,MAAO,CAAA,CAAC,IAAS,KAAA,IAAA,KAAS,OAAO,KAAK,CAAA,CAAA;AAAA,OAC7D,MAAA;AACL,QAAA,WAAA,GAAc,aAAc,CAAA,MAAA,CAAO,CAAC,MAAA,CAAO,KAAK,CAAC,CAAA,CAAA;AAAA,OACnD;AAAA,KACF;AAEA,IAAA,gBAAA,CAAiB,WAAW,CAAA,CAAA;AAC5B,IAAA,MAAM,QAAW,GAAA,kBAAA;AAAA,MAAmB,CAACA,OAAAA,KACnC,WAAY,CAAA,QAAA,CAASA,QAAO,KAAK,CAAA;AAAA,KACnC,CAAE,IAAI,CAACA,OAAAA,KAAW,YAAY,aAAcA,CAAAA,OAAAA,CAAO,KAAK,CAAC,CAAA,CAAA;AACzD,IAAc,aAAA,CAAA,WAAA,GAAc,EAAK,GAAA,QAAA,CAAS,CAAE,CAAA,CAAA,CAAA;AAC5C,IAAA,iBAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,iBAAA,CAAoB,KAAO,EAAA,WAAA,CAAA,CAAA;AAE3B,IAAA,IAAI,CAAC,WAAa,EAAA;AAChB,MAAA,OAAA,CAAQ,KAAK,CAAA,CAAA;AAAA,KACf;AAAA,GACF,CAAA;AAEA,EAAA,OAAO,EAAE,GAAG,WAAa,EAAA,MAAA,EAAQ,YAAY,aAAc,EAAA,CAAA;AAC7D;;;;"}
@@ -1,4 +0,0 @@
1
- var css_248z = ".saltDropdownNext {\n --dropdownNext-borderColor: var(--salt-editable-borderColor);\n --dropdownNext-color: var(--salt-content-primary-foreground);\n --dropdownNext-cursor: var(--salt-selectable-cursor-hover);\n}\n\n.saltDropdownNext {\n all: unset;\n box-sizing: border-box;\n min-width: 4em;\n width: 100%;\n background: var(--dropdownNext-background);\n cursor: var(--dropdownNext-cursor);\n min-height: var(--salt-size-base);\n border-bottom: var(--salt-size-border) var(--salt-editable-borderStyle) var(--dropdownNext-borderColor);\n display: flex;\n align-items: center;\n padding: 0 var(--salt-spacing-100);\n gap: var(--salt-spacing-100);\n color: var(--dropdownNext-color);\n font-family: var(--salt-text-fontFamily);\n font-size: var(--salt-text-fontSize);\n font-weight: var(--salt-text-fontWeight);\n}\n\n.saltDropdownNext:hover {\n --dropdownNext-borderColor: var(--salt-editable-borderColor-hover);\n}\n\n.saltDropdownNext:focus-visible {\n outline: var(--salt-focused-outline);\n --dropdownNext-borderColor: var(--salt-editable-borderColor-hover);\n}\n\n.saltDropdownNext-content {\n flex: 1;\n max-width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n text-wrap: nowrap;\n}\n\n.saltDropdownNext-placeholder {\n color: var(--salt-content-secondary-foreground);\n font-weight: var(--salt-text-fontWeight-small);\n}\n\n.saltDropdownNext-primary {\n --dropdownNext-background: var(--salt-editable-primary-background);\n}\n\n.saltDropdownNext-secondary {\n --dropdownNext-background: var(--salt-editable-secondary-background);\n}\n\n.saltDropdownNext:disabled {\n --dropdownNext-background: var(--salt-editable-primary-background-disabled);\n --dropdownNext-borderColor: var(--salt-editable-borderColor-disabled);\n --dropdownNext-color: var(--salt-content-primary-foreground-disabled);\n --dropdownNext-cursor: var(--salt-selectable-cursor-disabled);\n}\n\n.saltDropdownNext[aria-readonly=\"true\"] {\n --dropdownNext-background: var(--salt-editable-primary-background-readonly);\n --dropdownNext-borderColor: var(--salt-editable-borderColor-readonly);\n --dropdownNext-color: var(--salt-content-primary-foreground);\n --dropdownNext-cursor: var(--salt-selectable-cursor-readonly);\n}\n\n.saltDropdownNext-error {\n --dropdownNext-background: var(--salt-status-error-background);\n --dropdownNext-borderColor: var(--salt-status-error-borderColor);\n}\n\n.saltDropdownNext-error .saltDropdownNext:focus-visible {\n outline-color: var(--salt-status-error-borderColor);\n --dropdownNext-borderColor: var(--salt-status-error-borderColor);\n}\n\n.saltDropdownNext-warning {\n --dropdownNext-background: var(--salt-status-warning-background);\n --dropdownNext-borderColor: var(--salt-status-warning-borderColor);\n}\n\n.saltDropdownNext-warning .saltDropdownNext:focus-visible {\n outline-color: var(--salt-status-warning-borderColor);\n --dropdownNext-borderColor: var(--salt-status-warning-borderColor);\n}\n\n.saltDropdownNext-success {\n --dropdownNext-background: var(--salt-status-success-background);\n --dropdownNext-borderColor: var(--salt-status-success-borderColor);\n}\n\n.saltDropdownNext-success .saltDropdownNext:focus-visible {\n outline-color: var(--salt-status-success-borderColor);\n --dropdownNext-borderColor: var(--salt-status-success-borderColor);\n}\n";
2
-
3
- export { css_248z as default };
4
- //# sourceMappingURL=DropdownNext.css.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"DropdownNext.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}