@salutejs/plasma-new-hope 0.88.0-canary.1233.9437372350.0 → 0.88.0-canary.1233.9449328054.0
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.js +0 -1
- package/cjs/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.js.map +1 -1
- package/cjs/components/Select/Select.css +0 -5
- package/cjs/components/Select/Select.js +2 -5
- package/cjs/components/Select/Select.js.map +1 -1
- package/cjs/components/Select/elements/Inner/Inner.css +0 -5
- package/cjs/components/Select/elements/Inner/elements/Item/Item.css +0 -5
- package/cjs/components/Select/hooks/useKeyboardNavigation.js +9 -0
- package/cjs/components/Select/hooks/useKeyboardNavigation.js.map +1 -1
- package/es/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.js +0 -1
- package/es/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.js.map +1 -1
- package/es/components/Select/Select.css +0 -5
- package/es/components/Select/Select.js +2 -5
- package/es/components/Select/Select.js.map +1 -1
- package/es/components/Select/elements/Inner/Inner.css +0 -5
- package/es/components/Select/elements/Inner/elements/Item/Item.css +0 -5
- package/es/components/Select/hooks/useKeyboardNavigation.js +9 -0
- package/es/components/Select/hooks/useKeyboardNavigation.js.map +1 -1
- package/package.json +2 -2
- package/styled-components/cjs/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.js +0 -1
- package/styled-components/cjs/components/Select/Select.js +2 -5
- package/styled-components/cjs/components/Select/hooks/useKeyboardNavigation.js +9 -0
- package/styled-components/cjs/examples/plasma_b2c/components/Select/Select.config.js +1 -0
- package/styled-components/cjs/examples/plasma_b2c/components/Select/Select.stories.tsx +33 -49
- package/styled-components/cjs/examples/plasma_web/components/Select/Select.config.js +40 -0
- package/styled-components/cjs/examples/plasma_web/components/Select/Select.js +17 -0
- package/styled-components/cjs/examples/plasma_web/components/Select/Select.stories.tsx +817 -0
- package/styled-components/cjs/examples/plasma_web/components/Select/style.css +38 -0
- package/styled-components/es/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.js +0 -1
- package/styled-components/es/components/Select/Select.js +2 -5
- package/styled-components/es/components/Select/hooks/useKeyboardNavigation.js +9 -0
- package/styled-components/es/examples/plasma_b2c/components/Select/Select.config.js +1 -0
- package/styled-components/es/examples/plasma_b2c/components/Select/Select.js +2 -2
- package/styled-components/es/examples/plasma_b2c/components/Select/Select.stories.tsx +33 -49
- package/styled-components/es/examples/plasma_web/components/Select/Select.config.js +34 -0
- package/styled-components/es/examples/plasma_web/components/Select/Select.js +6 -0
- package/styled-components/es/examples/plasma_web/components/Select/Select.stories.tsx +817 -0
- package/styled-components/es/examples/plasma_web/components/Select/style.css +38 -0
- package/types/components/Dropdown/Dropdown.types.d.ts +5 -9
- package/types/components/Dropdown/Dropdown.types.d.ts.map +1 -1
- package/types/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.styles.d.ts +12 -88
- package/types/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.styles.d.ts.map +1 -1
- package/types/components/Select/Select.d.ts +1 -0
- package/types/components/Select/Select.d.ts.map +1 -1
- package/types/components/Select/Select.types.d.ts +23 -21
- package/types/components/Select/Select.types.d.ts.map +1 -1
- package/types/components/Select/elements/SelectNotFoundContent/SelectNotFoundContent.types.d.ts +1 -1
- package/types/components/Select/elements/SelectNotFoundContent/SelectNotFoundContent.types.d.ts.map +1 -1
- package/types/components/Select/hooks/useKeyboardNavigation.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Select/Select.config.d.ts +1 -0
- package/types/examples/plasma_b2c/components/Select/Select.config.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Select/Select.d.ts +14 -90
- package/types/examples/plasma_b2c/components/Select/Select.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Select/Select.config.d.ts +33 -0
- package/types/examples/plasma_web/components/Select/Select.config.d.ts.map +1 -0
- package/types/examples/plasma_web/components/Select/Select.d.ts +81 -0
- package/types/examples/plasma_web/components/Select/Select.d.ts.map +1 -0
@@ -0,0 +1,38 @@
|
|
1
|
+
|
2
|
+
.container {
|
3
|
+
width: 100%;
|
4
|
+
}
|
5
|
+
|
6
|
+
table {
|
7
|
+
border-collapse: collapse;
|
8
|
+
box-shadow: 0 0 20px rgba(0,0,0,0.1);
|
9
|
+
}
|
10
|
+
|
11
|
+
th,
|
12
|
+
td {
|
13
|
+
padding: 15px;
|
14
|
+
}
|
15
|
+
|
16
|
+
th {
|
17
|
+
text-align: left;
|
18
|
+
}
|
19
|
+
|
20
|
+
table, th, td {
|
21
|
+
border: 1px solid lightgray;
|
22
|
+
border-collapse: collapse;
|
23
|
+
}
|
24
|
+
|
25
|
+
thead {
|
26
|
+
th {
|
27
|
+
background-color: #55608f;
|
28
|
+
color: #fff;
|
29
|
+
}
|
30
|
+
}
|
31
|
+
|
32
|
+
tbody {
|
33
|
+
|
34
|
+
td {
|
35
|
+
position: relative;
|
36
|
+
|
37
|
+
}
|
38
|
+
}
|
@@ -27,7 +27,6 @@ export var PaginationSelectPerPage = function PaginationSelectPerPage(_ref) {
|
|
27
27
|
value: num.toString()
|
28
28
|
};
|
29
29
|
});
|
30
|
-
console.log('listWidth', listWidth);
|
31
30
|
return /*#__PURE__*/React.createElement(SelectPerPageRoot, rest, /*#__PURE__*/React.createElement(SelectPerPageTypography, null, textPerPage), /*#__PURE__*/React.createElement(SelectPerPageSelect, {
|
32
31
|
className: classes.selectWrapper,
|
33
32
|
items: transformedList,
|
@@ -1,4 +1,3 @@
|
|
1
|
-
var _SelectNotFoundConten;
|
2
1
|
var _excluded = ["value", "onChange", "target", "separator", "items", "placement", "label", "labelPlacement", "placeholder", "helperText", "isTargetAmount", "disabled", "view", "size", "isOpen", "listOverflow", "listHeight", "listWidth", "status", "contentLeft", "onScrollBottom", "isInfiniteLoading", "notFoundContent", "chipView", "variant", "portal", "renderValue"];
|
3
2
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
4
3
|
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
@@ -16,7 +15,6 @@ import { getPlacements } from '../Dropdown/utils';
|
|
16
15
|
import { useKeyNavigation } from './hooks/useKeyboardNavigation';
|
17
16
|
import { initialItemsTransform, updateAncestors, updateDescendants, updateSingleAncestors, getView } from './utils';
|
18
17
|
import { Inner } from './elements/Inner/Inner';
|
19
|
-
import { SelectNotFoundContent } from './elements/SelectNotFoundContent/SelectNotFoundContent';
|
20
18
|
import { Target } from './elements/Target/Target';
|
21
19
|
import { pathReducer, focusedPathReducer, focusedChipIndexReducer } from './reducers';
|
22
20
|
import { usePathMaps } from './hooks/usePathMaps';
|
@@ -255,9 +253,7 @@ export var selectRoot = function selectRoot(Root) {
|
|
255
253
|
}),
|
256
254
|
preventOverflow: false,
|
257
255
|
closeOnOverlayClick: true
|
258
|
-
},
|
259
|
-
description: "\u0414\u043E\u0434\u0435\u043B\u0430\u0442\u044C"
|
260
|
-
})) : /*#__PURE__*/React.createElement(Ul, {
|
256
|
+
}, notFoundContent || /*#__PURE__*/React.createElement(Ul, {
|
261
257
|
role: "tree",
|
262
258
|
id: "tree_level_1",
|
263
259
|
listHeight: listHeight,
|
@@ -292,6 +288,7 @@ export var selectConfig = {
|
|
292
288
|
},
|
293
289
|
defaults: {
|
294
290
|
view: 'default',
|
291
|
+
chipView: 'default',
|
295
292
|
size: 'm'
|
296
293
|
}
|
297
294
|
};
|
@@ -160,6 +160,15 @@ export var useKeyNavigation = function useKeyNavigation(_ref) {
|
|
160
160
|
{
|
161
161
|
event.preventDefault();
|
162
162
|
var _currentItem2 = getFurtherPath(focusedPath, focusedToValueMap);
|
163
|
+
if (!path[0]) {
|
164
|
+
dispatchPath({
|
165
|
+
type: 'opened_first_level'
|
166
|
+
});
|
167
|
+
dispatchFocusedPath({
|
168
|
+
type: 'set_initial_focus'
|
169
|
+
});
|
170
|
+
break;
|
171
|
+
}
|
163
172
|
if (!_currentItem2 || _currentItem2 !== null && _currentItem2 !== void 0 && _currentItem2.isDisabled || _currentItem2 !== null && _currentItem2 !== void 0 && _currentItem2.disabled) {
|
164
173
|
break;
|
165
174
|
}
|
@@ -2,5 +2,5 @@ import { component, mergeConfig } from '../../../../engines';
|
|
2
2
|
import { selectConfig, SelectNotFoundContent } from '../../../../components/Select';
|
3
3
|
import { config } from './Select.config';
|
4
4
|
var mergedConfig = /*#__PURE__*/mergeConfig(selectConfig, config);
|
5
|
-
|
6
|
-
export { SelectNotFoundContent };
|
5
|
+
var Select = /*#__PURE__*/component(mergedConfig);
|
6
|
+
export { Select, SelectNotFoundContent };
|
@@ -7,7 +7,7 @@ import './style.css';
|
|
7
7
|
|
8
8
|
import { WithTheme } from '../../../_helpers';
|
9
9
|
|
10
|
-
import { Select } from './Select';
|
10
|
+
import { Select, SelectNotFoundContent } from './Select';
|
11
11
|
|
12
12
|
type StorySelectProps = ComponentProps<typeof Select> & {
|
13
13
|
enableContentLeft?: boolean;
|
@@ -290,41 +290,14 @@ const items = [
|
|
290
290
|
isDisabled: true,
|
291
291
|
},
|
292
292
|
];
|
293
|
-
const loadingItems = [
|
294
|
-
{ value: '1', label: 'Item 1' },
|
295
|
-
{ value: '2', label: 'Item 2' },
|
296
|
-
{ value: '3', label: 'Item 3' },
|
297
|
-
{ value: '4', label: 'Item 4' },
|
298
|
-
{ value: '5', label: 'Item 5' },
|
299
|
-
{ value: '6', label: 'Item 6' },
|
300
|
-
{ value: '7', label: 'Item 7' },
|
301
|
-
{ value: '8', label: 'Item 8' },
|
302
|
-
{ value: '9', label: 'Item 9' },
|
303
|
-
{ value: '10', label: 'Item 10' },
|
304
|
-
];
|
305
293
|
|
306
294
|
const SingleStory = (args: StorySelectProps) => {
|
307
295
|
const [value, setValue] = useState('');
|
308
296
|
|
309
|
-
const iconSize = args.size === 'xs' ? 'xs' : 's';
|
310
|
-
|
311
297
|
return (
|
312
|
-
|
313
|
-
<
|
314
|
-
|
315
|
-
</button>
|
316
|
-
|
317
|
-
<div style={{ width: '300px' }}>
|
318
|
-
<Select
|
319
|
-
{...args}
|
320
|
-
multiselect={false}
|
321
|
-
items={items}
|
322
|
-
value={value}
|
323
|
-
onChange={setValue}
|
324
|
-
contentLeft={<IconPlaceholder size={iconSize} />}
|
325
|
-
/>
|
326
|
-
</div>
|
327
|
-
</>
|
298
|
+
<div style={{ width: '300px' }}>
|
299
|
+
<Select {...args} items={items} value={value} onChange={setValue} />
|
300
|
+
</div>
|
328
301
|
);
|
329
302
|
};
|
330
303
|
|
@@ -335,25 +308,10 @@ export const Single: StoryObj<StorySelectProps> = {
|
|
335
308
|
const MultiselectStory = (args: StorySelectProps) => {
|
336
309
|
const [value, setValue] = useState<Array<string>>([]);
|
337
310
|
|
338
|
-
const iconSize = args.size === 'xs' ? 'xs' : 's';
|
339
|
-
|
340
311
|
return (
|
341
|
-
|
342
|
-
<
|
343
|
-
|
344
|
-
</button>
|
345
|
-
|
346
|
-
<div style={{ width: '300px' }}>
|
347
|
-
<Select
|
348
|
-
{...args}
|
349
|
-
multiselect
|
350
|
-
items={items}
|
351
|
-
value={value}
|
352
|
-
onChange={setValue}
|
353
|
-
contentLeft={<IconPlaceholder size={iconSize} />}
|
354
|
-
/>
|
355
|
-
</div>
|
356
|
-
</>
|
312
|
+
<div style={{ width: '300px' }}>
|
313
|
+
<Select {...args} items={items} value={value} onChange={setValue} />
|
314
|
+
</div>
|
357
315
|
);
|
358
316
|
};
|
359
317
|
|
@@ -380,6 +338,32 @@ export const Predefined: StoryObj<StorySelectProps> = {
|
|
380
338
|
render: (args) => <PredefinedStory {...args} />,
|
381
339
|
};
|
382
340
|
|
341
|
+
const EmptyListStory = (args: StorySelectProps) => {
|
342
|
+
const [valueSingle, setValueSingle] = useState('');
|
343
|
+
|
344
|
+
return (
|
345
|
+
<div style={{ width: '300px' }}>
|
346
|
+
<Select
|
347
|
+
{...args}
|
348
|
+
items={[]}
|
349
|
+
value={valueSingle}
|
350
|
+
onChange={setValueSingle}
|
351
|
+
notFoundContent={
|
352
|
+
<SelectNotFoundContent
|
353
|
+
icon={<IconPlaceholder size="s" />}
|
354
|
+
description="Description"
|
355
|
+
buttonText="Label"
|
356
|
+
/>
|
357
|
+
}
|
358
|
+
/>
|
359
|
+
</div>
|
360
|
+
);
|
361
|
+
};
|
362
|
+
|
363
|
+
export const EmptyList: StoryObj<StorySelectProps> = {
|
364
|
+
render: (args) => <EmptyListStory {...args} />,
|
365
|
+
};
|
366
|
+
|
383
367
|
const CommonStory = (args: StorySelectProps) => {
|
384
368
|
const [value, setValue] = useState('');
|
385
369
|
const [valueMultiple, setValueMultiple] = useState<Array<string>>([]);
|
@@ -0,0 +1,34 @@
|
|
1
|
+
import { css } from 'styled-components';
|
2
|
+
import { selectTokens } from '../../../../components/Select';
|
3
|
+
export var config = {
|
4
|
+
defaults: {
|
5
|
+
view: 'default',
|
6
|
+
chipView: 'default',
|
7
|
+
size: 'm'
|
8
|
+
},
|
9
|
+
variations: {
|
10
|
+
size: {
|
11
|
+
xs: /*#__PURE__*/css(["", ":0.125rem;", ":0.5rem;", ":0.125rem;", ":1rem;", ":0.5rem 0.5rem 0.5rem 0.375rem;", ":0.25rem 0.5rem 0.25rem 0.375rem;", ":0.375rem;", ":1rem;", ":1rem;", ":0 0.25rem 0 0;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.875rem;", ":0.875rem;", ":0.25rem;", ":0.25rem;", ":var(--text-accent);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":0.375rem;", ":0.25rem;", ":0.125rem;", ":1.25rem;", ":0.375rem;", ":0.625rem;", ":0.25rem;", ":0rem;", ":0.75rem;", ":0 -0.125rem 0 0.25rem;", ":0 0 0 0.375rem;", ":2rem;", ":0.75rem 0 0.75rem;", ":0.5rem 0 0.625rem;", ":0.5rem 0 0.25rem;", ":0.375rem;", ":0;", ":0.25rem;", ":1rem;", ":1rem;", ":0.875rem 0.5rem 0.5rem 0.5rem;", ":0.25rem;"], selectTokens.padding, selectTokens.borderRadius, selectTokens.focusOffset, selectTokens.itemHeight, selectTokens.itemPadding, selectTokens.itemPaddingTight, selectTokens.itemBorderRadius, selectTokens.itemIconSize, selectTokens.itemIconSizeTight, selectTokens.itemIconMargin, selectTokens.fontFamily, selectTokens.fontSize, selectTokens.fontStyle, selectTokens.fontWeight, selectTokens.fontLetterSpacing, selectTokens.fontLineHeight, selectTokens.checkboxTriggerSize, selectTokens.checkboxTriggerSizeTight, selectTokens.checkboxTriggerBorderRadius, selectTokens.checkboxTriggerBorderRadiusTight, selectTokens.checkboxFillColor, selectTokens.checkboxIconColor, selectTokens.checkboxTriggerBorderColor, selectTokens.indicatorSize, selectTokens.chipGap, selectTokens.chipBorderRadius, selectTokens.chipHeight, selectTokens.chipPaddingRight, selectTokens.chipPaddingLeft, selectTokens.chipClearContentMarginLeft, selectTokens.chipClearContentMarginRight, selectTokens.chipCloseIconSize, selectTokens.targetButtonArrowMargin, selectTokens.targetTextfieldArrowMargin, selectTokens.targetHeight, selectTokens.targetButtonPadding, selectTokens.targetTextfieldPadding, selectTokens.targetTextfieldChipPadding, selectTokens.labelOffset, selectTokens.innerLabelGap, selectTokens.helperTextOffset, selectTokens.spinnerSize, selectTokens.spinnerSizeTight, selectTokens.notFoundContentPadding, selectTokens.notFoundContentGap),
|
12
|
+
s: /*#__PURE__*/css(["", ":0.125rem;", ":0.625rem;", ":0.125rem;", ":1.5rem;", ":0.5rem 0.75rem 0.5rem 0.675rem;", ":0.25rem 0.75rem 0.25rem 0.675rem;", ":0.5rem;", ":1.5rem;", ":1rem;", ":0 0.375rem 0 0;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":1.25rem;", ":0.875rem;", ":0.375rem;", ":0.25rem;", ":var(--text-accent);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":0.375rem;", ":0.25rem;", ":0.25rem;", ":1.75rem;", ":0.5rem;", ":0.75rem;", ":0.375rem;", ":0rem;", ":0.75rem;", ":0 -0.125rem 0 0.25rem;", ":0 0 0 0.375rem;", ":2.5rem;", ":1rem 0 1rem;", ":0.75rem 0 0.875rem;", ":0.75rem 0 0.25rem;", ":0.5rem;", ":0;", ":0.25rem;", ":1.5rem;", ":1rem;", ":1.25rem 0.625rem 0.625rem 0.625rem;", ":0.25rem;"], selectTokens.padding, selectTokens.borderRadius, selectTokens.focusOffset, selectTokens.itemHeight, selectTokens.itemPadding, selectTokens.itemPaddingTight, selectTokens.itemBorderRadius, selectTokens.itemIconSize, selectTokens.itemIconSizeTight, selectTokens.itemIconMargin, selectTokens.fontFamily, selectTokens.fontSize, selectTokens.fontStyle, selectTokens.fontWeight, selectTokens.fontLetterSpacing, selectTokens.fontLineHeight, selectTokens.checkboxTriggerSize, selectTokens.checkboxTriggerSizeTight, selectTokens.checkboxTriggerBorderRadius, selectTokens.checkboxTriggerBorderRadiusTight, selectTokens.checkboxFillColor, selectTokens.checkboxIconColor, selectTokens.checkboxTriggerBorderColor, selectTokens.indicatorSize, selectTokens.chipGap, selectTokens.chipBorderRadius, selectTokens.chipHeight, selectTokens.chipPaddingRight, selectTokens.chipPaddingLeft, selectTokens.chipClearContentMarginLeft, selectTokens.chipClearContentMarginRight, selectTokens.chipCloseIconSize, selectTokens.targetButtonArrowMargin, selectTokens.targetTextfieldArrowMargin, selectTokens.targetHeight, selectTokens.targetButtonPadding, selectTokens.targetTextfieldPadding, selectTokens.targetTextfieldChipPadding, selectTokens.labelOffset, selectTokens.innerLabelGap, selectTokens.helperTextOffset, selectTokens.spinnerSize, selectTokens.spinnerSizeTight, selectTokens.notFoundContentPadding, selectTokens.notFoundContentGap),
|
13
|
+
m: /*#__PURE__*/css(["", ":0.125rem;", ":0.75rem;", ":0.125rem;", ":1.5rem;", ":0.75rem 0.75rem 0.75rem 0.75rem;", ":0.5rem 0.75rem 0.5rem 0.75rem;", ":0.625rem;", ":0 0.375rem 0 0;", ":1.5rem;", ":1.5rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":1.25rem;", ":1.25rem;", ":0.375rem;", ":0.375rem;", ":var(--text-accent);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":0.375rem;", ":0.25rem;", ":0.375rem;", ":2.25rem;", ":0.875rem;", ":0.625rem;", ":0.5rem;", ":0rem;", ":1rem;", ":0 -0.125rem 0 0.375rem;", ":0 0 0 0.625rem;", ":3rem;", ":1.25rem 0 1.25rem;", ":0.875rem 0 1rem;", ":0.875rem 0 0.25rem;", ":0.625rem;", ":0.125rem;", ":0.25rem;", ":1.5rem;", ":1.5rem;", ":1.5rem 0.875rem 0.75rem 0.875rem;", ":0.375rem;"], selectTokens.padding, selectTokens.borderRadius, selectTokens.focusOffset, selectTokens.itemHeight, selectTokens.itemPadding, selectTokens.itemPaddingTight, selectTokens.itemBorderRadius, selectTokens.itemIconMargin, selectTokens.itemIconSize, selectTokens.itemIconSizeTight, selectTokens.fontFamily, selectTokens.fontSize, selectTokens.fontStyle, selectTokens.fontWeight, selectTokens.fontLetterSpacing, selectTokens.fontLineHeight, selectTokens.checkboxTriggerSize, selectTokens.checkboxTriggerSizeTight, selectTokens.checkboxTriggerBorderRadius, selectTokens.checkboxTriggerBorderRadiusTight, selectTokens.checkboxFillColor, selectTokens.checkboxIconColor, selectTokens.checkboxTriggerBorderColor, selectTokens.indicatorSize, selectTokens.chipGap, selectTokens.chipBorderRadius, selectTokens.chipHeight, selectTokens.chipPaddingRight, selectTokens.chipPaddingLeft, selectTokens.chipClearContentMarginLeft, selectTokens.chipClearContentMarginRight, selectTokens.chipCloseIconSize, selectTokens.targetButtonArrowMargin, selectTokens.targetTextfieldArrowMargin, selectTokens.targetHeight, selectTokens.targetButtonPadding, selectTokens.targetTextfieldPadding, selectTokens.targetTextfieldChipPadding, selectTokens.labelOffset, selectTokens.innerLabelGap, selectTokens.helperTextOffset, selectTokens.spinnerSize, selectTokens.spinnerSizeTight, selectTokens.notFoundContentPadding, selectTokens.notFoundContentGap),
|
14
|
+
l: /*#__PURE__*/css(["", ":0.125rem;", ":0.875rem;", ":0.125rem;", ":1.5rem;", ":1rem 1rem 1rem 0.875rem;", ":0.75rem 1rem 0.75rem 0.875rem;", ":0.75rem;", ":0 0.5rem 0 0;", ":1.5rem;", ":1.5rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":1.25rem;", ":1.25rem;", ":0.375rem;", ":0.375rem;", ":var(--text-accent);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":0.375rem;", ":0.25rem;", ":0.5rem;", ":2.75rem;", ":0.75rem;", ":1rem;", ":0.625rem;", ":0rem;", ":1rem;", ":0 -0.125rem 0 0.5rem;", ":0 0 0 0.75rem;", ":3.5rem;", ":1.5rem 0 1.5rem;", ":1rem 0 1.125rem;", ":1rem 0 0.25rem;", ":0.75rem;", ":0.125rem;", ":0.25rem;", ":1.5rem;", ":1.5rem;", ":1.875rem 1rem 1rem 1rem;", ":0.5rem;"], selectTokens.padding, selectTokens.borderRadius, selectTokens.focusOffset, selectTokens.itemHeight, selectTokens.itemPadding, selectTokens.itemPaddingTight, selectTokens.itemBorderRadius, selectTokens.itemIconMargin, selectTokens.itemIconSize, selectTokens.itemIconSizeTight, selectTokens.fontFamily, selectTokens.fontSize, selectTokens.fontStyle, selectTokens.fontWeight, selectTokens.fontLetterSpacing, selectTokens.fontLineHeight, selectTokens.checkboxTriggerSize, selectTokens.checkboxTriggerSizeTight, selectTokens.checkboxTriggerBorderRadius, selectTokens.checkboxTriggerBorderRadiusTight, selectTokens.checkboxFillColor, selectTokens.checkboxIconColor, selectTokens.checkboxTriggerBorderColor, selectTokens.indicatorSize, selectTokens.chipGap, selectTokens.chipBorderRadius, selectTokens.chipHeight, selectTokens.chipPaddingRight, selectTokens.chipPaddingLeft, selectTokens.chipClearContentMarginLeft, selectTokens.chipClearContentMarginRight, selectTokens.chipCloseIconSize, selectTokens.targetButtonArrowMargin, selectTokens.targetTextfieldArrowMargin, selectTokens.targetHeight, selectTokens.targetButtonPadding, selectTokens.targetTextfieldPadding, selectTokens.targetTextfieldChipPadding, selectTokens.labelOffset, selectTokens.innerLabelGap, selectTokens.helperTextOffset, selectTokens.spinnerSize, selectTokens.spinnerSizeTight, selectTokens.notFoundContentPadding, selectTokens.notFoundContentGap)
|
15
|
+
},
|
16
|
+
view: {
|
17
|
+
"default": /*#__PURE__*/css(["", ":var(--text-secondary);", ":var(--inverse-text-primary);", ":var(--inverse-text-primary-hover);", ":var(--inverse-text-primary-active);", ":var(--inverse-text-secondary);", ":var(--inverse-text-secondary-hover);", ":var(--inverse-text-secondary-hover);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-hover);", ":var(--surface-solid-default);", ":var(--surface-solid-default-hover);", ":var(--surface-solid-default-hover);", ":var(--surface-transparent-primary);", ":var(--surface-transparent-secondary);"], selectTokens.helperTextColor, selectTokens.targetButtonColor, selectTokens.targetButtonColorHover, selectTokens.targetButtonColorActive, selectTokens.targetButtonArrowColor, selectTokens.targetButtonArrowColorHover, selectTokens.targetButtonArrowColorActive, selectTokens.targetTextfieldArrowColor, selectTokens.targetTextfieldArrowColorHover, selectTokens.targetTextfieldArrowColorActive, selectTokens.targetButtonBackgroundColor, selectTokens.targetButtonBackgroundColorHover, selectTokens.targetButtonBackgroundColorActive, selectTokens.targetTextfieldBackgroundColor, selectTokens.targetTextfieldBackgroundColorOpened),
|
18
|
+
positive: /*#__PURE__*/css(["", ":var(--text-positive);", ":var(--on-dark-text-primary);", ":var(--on-dark-text-primary-hover);", ":var(--on-dark-text-primary-active);", ":var(--on-dark-text-secondary);", ":var(--on-dark-text-secondary-hover);", ":var(--on-dark-text-secondary-hover);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-hover);", ":var(--surface-positive);", ":var(--surface-positive-hover);", ":var(--surface-positive-active);", ":var(--surface-transparent-positive);", ":var(--surface-transparent-positive-active);"], selectTokens.helperTextColor, selectTokens.targetButtonColor, selectTokens.targetButtonColorHover, selectTokens.targetButtonColorActive, selectTokens.targetButtonArrowColor, selectTokens.targetButtonArrowColorHover, selectTokens.targetButtonArrowColorActive, selectTokens.targetTextfieldArrowColor, selectTokens.targetTextfieldArrowColorHover, selectTokens.targetTextfieldArrowColorActive, selectTokens.targetButtonBackgroundColor, selectTokens.targetButtonBackgroundColorHover, selectTokens.targetButtonBackgroundColorActive, selectTokens.targetTextfieldBackgroundColor, selectTokens.targetTextfieldBackgroundColorOpened),
|
19
|
+
warning: /*#__PURE__*/css(["", ":var(--text-warning);", ":var(--on-dark-text-primary);", ":var(--on-dark-text-primary-hover);", ":var(--on-dark-text-primary-active);", ":var(--on-dark-text-secondary);", ":var(--on-dark-text-secondary-hover);", ":var(--on-dark-text-secondary-hover);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-hover);", ":var(--surface-warning);", ":var(--surface-warning-hover);", ":var(--surface-warning-active);", ":var(--surface-transparent-warning);", ":var(--surface-transparent-warning-active);"], selectTokens.helperTextColor, selectTokens.targetButtonColor, selectTokens.targetButtonColorHover, selectTokens.targetButtonColorActive, selectTokens.targetButtonArrowColor, selectTokens.targetButtonArrowColorHover, selectTokens.targetButtonArrowColorActive, selectTokens.targetTextfieldArrowColor, selectTokens.targetTextfieldArrowColorHover, selectTokens.targetTextfieldArrowColorActive, selectTokens.targetButtonBackgroundColor, selectTokens.targetButtonBackgroundColorHover, selectTokens.targetButtonBackgroundColorActive, selectTokens.targetTextfieldBackgroundColor, selectTokens.targetTextfieldBackgroundColorOpened),
|
20
|
+
negative: /*#__PURE__*/css(["", ":var(--text-negative);", ":var(--on-dark-text-primary);", ":var(--on-dark-text-primary-hover);", ":var(--on-dark-text-primary-active);", ":var(--on-dark-text-secondary);", ":var(--on-dark-text-secondary-hover);", ":var(--on-dark-text-secondary-hover);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-hover);", ":var(--surface-negative);", ":var(--surface-negative-hover);", ":var(--surface-negative-active);", ":var(--surface-transparent-negative);", ":var(--surface-transparent-negative-active);"], selectTokens.helperTextColor, selectTokens.targetButtonColor, selectTokens.targetButtonColorHover, selectTokens.targetButtonColorActive, selectTokens.targetButtonArrowColor, selectTokens.targetButtonArrowColorHover, selectTokens.targetButtonArrowColorActive, selectTokens.targetTextfieldArrowColor, selectTokens.targetTextfieldArrowColorHover, selectTokens.targetTextfieldArrowColorActive, selectTokens.targetButtonBackgroundColor, selectTokens.targetButtonBackgroundColorHover, selectTokens.targetButtonBackgroundColorActive, selectTokens.targetTextfieldBackgroundColor, selectTokens.targetTextfieldBackgroundColorOpened),
|
21
|
+
accent: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-primary-hover);", ":var(--on-dark-text-primary-active);", ":var(--on-dark-text-secondary);", ":var(--on-dark-text-secondary-hover);", ":var(--on-dark-text-secondary-hover);", ":var(--surface-accent);", ":var(--surface-accent-hover);", ":var(--surface-accent-active);"], selectTokens.targetButtonColor, selectTokens.targetButtonColorHover, selectTokens.targetButtonColorActive, selectTokens.targetButtonArrowColor, selectTokens.targetButtonArrowColorHover, selectTokens.targetButtonArrowColorActive, selectTokens.targetButtonBackgroundColor, selectTokens.targetButtonBackgroundColorHover, selectTokens.targetButtonBackgroundColorActive),
|
22
|
+
secondary: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--text-primary-hover);", ":var(--text-primary-active);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-hover);", ":var(--surface-transparent-secondary);", ":var(--surface-transparent-secondary-hover);", ":var(--surface-transparent-secondary-active);"], selectTokens.targetButtonColor, selectTokens.targetButtonColorHover, selectTokens.targetButtonColorActive, selectTokens.targetButtonArrowColor, selectTokens.targetButtonArrowColorHover, selectTokens.targetButtonArrowColorActive, selectTokens.targetButtonBackgroundColor, selectTokens.targetButtonBackgroundColorHover, selectTokens.targetButtonBackgroundColorActive),
|
23
|
+
clear: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--text-primary-hover);", ":var(--text-primary-active);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-active);", ":var(--surface-clear);", ":var(--surface-clear);", ":var(--surface-clear);"], selectTokens.targetButtonColor, selectTokens.targetButtonColorHover, selectTokens.targetButtonColorActive, selectTokens.targetButtonArrowColor, selectTokens.targetButtonArrowColorHover, selectTokens.targetButtonArrowColorActive, selectTokens.targetButtonBackgroundColor, selectTokens.targetButtonBackgroundColorHover, selectTokens.targetButtonBackgroundColorActive),
|
24
|
+
dark: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-primary-hover);", ":var(--on-dark-text-primary-active);", ":var(--on-dark-text-secondary);", ":var(--on-dark-text-secondary-hover);", ":var(--on-dark-text-secondary-active);", ":var(--on-light-surface-transparent-deep);", ":var(--on-light-surface-transparent-deep-hover);", ":var(--on-light-surface-transparent-deep-active);"], selectTokens.targetButtonColor, selectTokens.targetButtonColorHover, selectTokens.targetButtonColorActive, selectTokens.targetButtonArrowColor, selectTokens.targetButtonArrowColorHover, selectTokens.targetButtonArrowColorActive, selectTokens.targetButtonBackgroundColor, selectTokens.targetButtonBackgroundColorHover, selectTokens.targetButtonBackgroundColorActive),
|
25
|
+
black: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-primary-hover);", ":var(--on-dark-text-primary-active);", ":var(--on-dark-text-secondary);", ":var(--on-dark-text-secondary-hover);", ":var(--on-dark-text-secondary-active);", ":var(--on-light-surface-solid-default);", ":var(--on-light-surface-solid-default-hover);", ":var(--on-light-surface-solid-default-active);"], selectTokens.targetButtonColor, selectTokens.targetButtonColorHover, selectTokens.targetButtonColorActive, selectTokens.targetButtonArrowColor, selectTokens.targetButtonArrowColorHover, selectTokens.targetButtonArrowColorActive, selectTokens.targetButtonBackgroundColor, selectTokens.targetButtonBackgroundColorHover, selectTokens.targetButtonBackgroundColorActive),
|
26
|
+
white: /*#__PURE__*/css(["", ":var(--on-light-text-primary);", ":var(--on-light-text-primary-hover);", ":var(--on-light-text-primary-active);", ":var(--on-light-text-secondary);", ":var(--on-light-text-secondary-hover);", ":var(--on-light-text-secondary-active);", ":var(--on-dark-surface-solid-default);", ":var(--on-dark-surface-solid-default-hover);", ":var(--on-dark-surface-solid-default-active);"], selectTokens.targetButtonColor, selectTokens.targetButtonColorHover, selectTokens.targetButtonColorActive, selectTokens.targetButtonArrowColor, selectTokens.targetButtonArrowColorHover, selectTokens.targetButtonArrowColorActive, selectTokens.targetButtonBackgroundColor, selectTokens.targetButtonBackgroundColorHover, selectTokens.targetButtonBackgroundColorActive)
|
27
|
+
},
|
28
|
+
chipView: {
|
29
|
+
"default": /*#__PURE__*/css(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--surface-solid-default-hover);", ":var(--surface-solid-default-active);"], selectTokens.chipColor, selectTokens.chipBackground, selectTokens.chipBackgroundHover, selectTokens.chipBackgroundActive),
|
30
|
+
secondary: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--surface-transparent-secondary-hover);", ":var(--surface-transparent-secondary-active);"], selectTokens.chipColor, selectTokens.chipBackground, selectTokens.chipBackgroundHover, selectTokens.chipBackgroundActive),
|
31
|
+
accent: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-accent);", ":var(--surface-accent-hover);", ":var(--surface-accent-active);"], selectTokens.chipColor, selectTokens.chipBackground, selectTokens.chipBackgroundHover, selectTokens.chipBackgroundActive)
|
32
|
+
}
|
33
|
+
}
|
34
|
+
};
|
@@ -0,0 +1,6 @@
|
|
1
|
+
import { component, mergeConfig } from '../../../../engines';
|
2
|
+
import { selectConfig, SelectNotFoundContent } from '../../../../components/Select';
|
3
|
+
import { config } from './Select.config';
|
4
|
+
var mergedConfig = /*#__PURE__*/mergeConfig(selectConfig, config);
|
5
|
+
var Select = /*#__PURE__*/component(mergedConfig);
|
6
|
+
export { Select, SelectNotFoundContent };
|