@salutejs/sdds-cs 0.318.0-canary.1986.15340000377.0 → 0.318.0-canary.2006.15341327171.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/Combobox/Combobox.config.js +3 -3
- package/components/Combobox/Combobox.d.ts +0 -24
- package/components/Select/Select.config.js +3 -3
- package/components/Select/Select.d.ts +0 -3
- package/components/Table/Table.config.js +3 -3
- package/emotion/cjs/components/Combobox/Combobox.config.js +3 -3
- package/emotion/cjs/components/Combobox/Combobox.stories.tsx +0 -186
- package/emotion/cjs/components/Select/Select.config.js +3 -3
- package/emotion/cjs/components/Select/Select.stories.tsx +0 -186
- package/emotion/cjs/components/Table/Table.config.js +3 -3
- package/emotion/es/components/Combobox/Combobox.config.js +3 -3
- package/emotion/es/components/Combobox/Combobox.stories.tsx +0 -186
- package/emotion/es/components/Select/Select.config.js +3 -3
- package/emotion/es/components/Select/Select.stories.tsx +0 -186
- package/emotion/es/components/Table/Table.config.js +3 -3
- package/es/components/Combobox/Combobox.config.js +3 -3
- package/es/components/Select/Select.config.js +3 -3
- package/es/components/Table/Table.config.js +3 -3
- package/package.json +3 -3
|
@@ -15,11 +15,11 @@ var config = exports.config = {
|
|
|
15
15
|
},
|
|
16
16
|
variations: {
|
|
17
17
|
view: {
|
|
18
|
-
"default": /*#__PURE__*/(0, _emotion.css)(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--text-primary);\n ", ": var(--text-primary);\n\n ", ": var(--text-secondary);\n ", ": var(--text-tertiary);\n ", ": var(--text-secondary);\n ", ": var(--text-tertiary);\n\n ", ": var(--surface-solid-card);\n ", ": var(--surface-solid-card);\n ", ": var(--text-accent);\n ", ": var(--text-secondary);\n ", ": var(--text-secondary);\n ", ": var(--text-primary);\n ", ": var(--text-secondary);\n ", ": var(--text-accent);\n\n ", ": var(--outline-solid-primary);\n ", ": var(--outline-solid-primary-hover);\n ", ": var(--outline-accent);\n\n ", ": var(--text-secondary);\n ", ": var(--text-secondary-hover);\n ", ": var(--text-secondary-active);\n ", ": var(--text-accent);\n ", ": #1A9E32;\n ", ": var(--text-accent-active);\n\n ", ": var(--surface-negative);\n ", ": var(--text-tertiary);\n\n ", ": var(--text-secondary);\n ", ": var(--text-primary);\n ", ": var(--surface-transparent-secondary);\n ", ": var(--text-primary);\n ", ": var(--surface-transparent-secondary-hover);\n ", ": var(--text-primary);\n ", ": var(--surface-transparent-secondary-active);\n ", ": var(--surface-transparent-secondary);\n ", ": var(--text-primary);\n ", ": var(--surface-transparent-secondary);\n ", ": var(--text-primary);\n ", ": 0.72;\n ", ": var(--surface-solid-primary);\n\n ", ": var(--text-accent);\n ", ": #1A9E32;\n ", ": var(--surface-transparent-accent);\n
|
|
19
|
-
negative: /*#__PURE__*/(0, _emotion.css)(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--text-primary);\n ", ": var(--text-primary);\n\n ", ": var(--text-secondary);\n ", ": var(--text-tertiary);\n ", ": var(--text-secondary);\n ", ": var(--text-tertiary);\n\n ", ": var(--surface-solid-card);\n ", ": var(--surface-solid-card);\n ", ": var(--text-accent);\n ", ": var(--text-secondary);\n ", ": var(--text-secondary);\n ", ": var(--text-primary);\n ", ": var(--text-negative);\n ", ": var(--text-accent);\n\n ", ": var(--outline-negative);\n ", ": var(--outline-negative-hover);\n ", ": var(--outline-accent);\n\n ", ": var(--text-secondary);\n ", ": var(--text-secondary-hover);\n ", ": var(--text-secondary-active);\n ", ": var(--text-accent);\n ", ": #1A9E32;\n ", ": var(--text-accent-active);\n\n ", ": var(--surface-negative);\n ", ": var(--text-tertiary);\n\n ", ": var(--text-secondary);\n ", ": var(--text-primary);\n ", ": var(--surface-transparent-secondary);\n ", ": var(--text-primary);\n ", ": var(--surface-transparent-secondary-hover);\n ", ": var(--text-primary);\n ", ": var(--surface-transparent-secondary-active);\n ", ": var(--surface-transparent-secondary);\n ", ": var(--text-primary);\n ", ": var(--surface-transparent-secondary);\n ", ": var(--text-primary);\n ", ": 0.72;\n ", ": var(--surface-solid-primary);\n\n ", ": var(--text-accent);\n ", ": #1A9E32;\n ", ": var(--surface-transparent-accent);\n
|
|
18
|
+
"default": /*#__PURE__*/(0, _emotion.css)(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--text-primary);\n ", ": var(--text-primary);\n\n ", ": var(--text-secondary);\n ", ": var(--text-tertiary);\n ", ": var(--text-secondary);\n ", ": var(--text-tertiary);\n\n ", ": var(--surface-solid-card);\n ", ": var(--surface-solid-card);\n ", ": var(--text-accent);\n ", ": var(--text-secondary);\n ", ": var(--text-secondary);\n ", ": var(--text-primary);\n ", ": var(--text-secondary);\n ", ": var(--text-accent);\n\n ", ": var(--outline-solid-primary);\n ", ": var(--outline-solid-primary-hover);\n ", ": var(--outline-accent);\n\n ", ": var(--text-secondary);\n ", ": var(--text-secondary-hover);\n ", ": var(--text-secondary-active);\n ", ": var(--text-accent);\n ", ": #1A9E32;\n ", ": var(--text-accent-active);\n\n ", ": var(--surface-negative);\n ", ": var(--text-tertiary);\n\n ", ": var(--text-secondary);\n ", ": var(--text-primary);\n ", ": var(--surface-transparent-secondary);\n ", ": var(--text-primary);\n ", ": var(--surface-transparent-secondary-hover);\n ", ": var(--text-primary);\n ", ": var(--surface-transparent-secondary-active);\n ", ": var(--surface-transparent-secondary);\n ", ": var(--text-primary);\n ", ": var(--surface-transparent-secondary);\n ", ": var(--text-primary);\n ", ": 0.72;\n ", ": var(--surface-solid-primary);\n\n ", ": var(--text-accent);\n ", ": #1A9E32;\n ", ": var(--surface-transparent-accent);\n "])), _emotion.comboboxNewTokens.textFieldColor, _emotion.comboboxNewTokens.textFieldClearColor, _emotion.comboboxNewTokens.textFieldPlaceholderColor, _emotion.comboboxNewTokens.textFieldPlaceholderColorFocus, _emotion.comboboxNewTokens.textFieldClearPlaceholderColor, _emotion.comboboxNewTokens.textFieldClearPlaceholderColorFocus, _emotion.comboboxNewTokens.textFieldBackgroundColor, _emotion.comboboxNewTokens.textFieldBackgroundColorFocus, _emotion.comboboxNewTokens.textFieldCaretColor, _emotion.comboboxNewTokens.textFieldTextBeforeColor, _emotion.comboboxNewTokens.textFieldTextAfterColor, _emotion.comboboxNewTokens.textFieldLabelColor, _emotion.comboboxNewTokens.textFieldLeftHelperColor, _emotion.comboboxNewTokens.textFieldFocusColor, _emotion.comboboxNewTokens.textFieldBorderColor, _emotion.comboboxNewTokens.textFieldBorderColorHover, _emotion.comboboxNewTokens.textFieldBorderColorFocus, _emotion.comboboxNewTokens.textFieldContentSlotColor, _emotion.comboboxNewTokens.textFieldContentSlotColorHover, _emotion.comboboxNewTokens.textFieldContentSlotColorActive, _emotion.comboboxNewTokens.textFieldContentSlotRightColor, _emotion.comboboxNewTokens.textFieldContentSlotRightColorHover, _emotion.comboboxNewTokens.textFieldContentSlotRightColorActive, _emotion.comboboxNewTokens.textFieldIndicatorColor, _emotion.comboboxNewTokens.textFieldOptionalColor, _emotion.comboboxNewTokens.textFieldChipCloseIconColor, _emotion.comboboxNewTokens.textFieldChipColor, _emotion.comboboxNewTokens.textFieldChipBackground, _emotion.comboboxNewTokens.textFieldChipColorHover, _emotion.comboboxNewTokens.textFieldChipBackgroundHover, _emotion.comboboxNewTokens.textFieldChipColorActive, _emotion.comboboxNewTokens.textFieldChipBackgroundActive, _emotion.comboboxNewTokens.textFieldChipBackgroundReadOnly, _emotion.comboboxNewTokens.textFieldChipColorReadOnly, _emotion.comboboxNewTokens.textFieldChipBackgroundReadOnlyHover, _emotion.comboboxNewTokens.textFieldChipColorReadOnlyHover, _emotion.comboboxNewTokens.textFieldChipOpacityReadonly, _emotion.comboboxNewTokens.dropdownBorderColor, _emotion.comboboxNewTokens.disclosureIconColor, _emotion.comboboxNewTokens.disclosureIconColorHover, _emotion.comboboxNewTokens.itemBackgroundHover),
|
|
19
|
+
negative: /*#__PURE__*/(0, _emotion.css)(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--text-primary);\n ", ": var(--text-primary);\n\n ", ": var(--text-secondary);\n ", ": var(--text-tertiary);\n ", ": var(--text-secondary);\n ", ": var(--text-tertiary);\n\n ", ": var(--surface-solid-card);\n ", ": var(--surface-solid-card);\n ", ": var(--text-accent);\n ", ": var(--text-secondary);\n ", ": var(--text-secondary);\n ", ": var(--text-primary);\n ", ": var(--text-negative);\n ", ": var(--text-accent);\n\n ", ": var(--outline-negative);\n ", ": var(--outline-negative-hover);\n ", ": var(--outline-accent);\n\n ", ": var(--text-secondary);\n ", ": var(--text-secondary-hover);\n ", ": var(--text-secondary-active);\n ", ": var(--text-accent);\n ", ": #1A9E32;\n ", ": var(--text-accent-active);\n\n ", ": var(--surface-negative);\n ", ": var(--text-tertiary);\n\n ", ": var(--text-secondary);\n ", ": var(--text-primary);\n ", ": var(--surface-transparent-secondary);\n ", ": var(--text-primary);\n ", ": var(--surface-transparent-secondary-hover);\n ", ": var(--text-primary);\n ", ": var(--surface-transparent-secondary-active);\n ", ": var(--surface-transparent-secondary);\n ", ": var(--text-primary);\n ", ": var(--surface-transparent-secondary);\n ", ": var(--text-primary);\n ", ": 0.72;\n ", ": var(--surface-solid-primary);\n\n ", ": var(--text-accent);\n ", ": #1A9E32;\n ", ": var(--surface-transparent-accent);\n "])), _emotion.comboboxNewTokens.textFieldColor, _emotion.comboboxNewTokens.textFieldClearColor, _emotion.comboboxNewTokens.textFieldPlaceholderColor, _emotion.comboboxNewTokens.textFieldPlaceholderColorFocus, _emotion.comboboxNewTokens.textFieldClearPlaceholderColor, _emotion.comboboxNewTokens.textFieldClearPlaceholderColorFocus, _emotion.comboboxNewTokens.textFieldBackgroundColor, _emotion.comboboxNewTokens.textFieldBackgroundColorFocus, _emotion.comboboxNewTokens.textFieldCaretColor, _emotion.comboboxNewTokens.textFieldTextBeforeColor, _emotion.comboboxNewTokens.textFieldTextAfterColor, _emotion.comboboxNewTokens.textFieldLabelColor, _emotion.comboboxNewTokens.textFieldLeftHelperColor, _emotion.comboboxNewTokens.textFieldFocusColor, _emotion.comboboxNewTokens.textFieldBorderColor, _emotion.comboboxNewTokens.textFieldBorderColorHover, _emotion.comboboxNewTokens.textFieldBorderColorFocus, _emotion.comboboxNewTokens.textFieldContentSlotColor, _emotion.comboboxNewTokens.textFieldContentSlotColorHover, _emotion.comboboxNewTokens.textFieldContentSlotColorActive, _emotion.comboboxNewTokens.textFieldContentSlotRightColor, _emotion.comboboxNewTokens.textFieldContentSlotRightColorHover, _emotion.comboboxNewTokens.textFieldContentSlotRightColorActive, _emotion.comboboxNewTokens.textFieldIndicatorColor, _emotion.comboboxNewTokens.textFieldOptionalColor, _emotion.comboboxNewTokens.textFieldChipCloseIconColor, _emotion.comboboxNewTokens.textFieldChipColor, _emotion.comboboxNewTokens.textFieldChipBackground, _emotion.comboboxNewTokens.textFieldChipColorHover, _emotion.comboboxNewTokens.textFieldChipBackgroundHover, _emotion.comboboxNewTokens.textFieldChipColorActive, _emotion.comboboxNewTokens.textFieldChipBackgroundActive, _emotion.comboboxNewTokens.textFieldChipBackgroundReadOnly, _emotion.comboboxNewTokens.textFieldChipColorReadOnly, _emotion.comboboxNewTokens.textFieldChipBackgroundReadOnlyHover, _emotion.comboboxNewTokens.textFieldChipColorReadOnlyHover, _emotion.comboboxNewTokens.textFieldChipOpacityReadonly, _emotion.comboboxNewTokens.dropdownBorderColor, _emotion.comboboxNewTokens.disclosureIconColor, _emotion.comboboxNewTokens.disclosureIconColorHover, _emotion.comboboxNewTokens.itemBackgroundHover)
|
|
20
20
|
},
|
|
21
21
|
size: {
|
|
22
|
-
s: /*#__PURE__*/(0, _emotion.css)(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 2.5rem;\n ", ": 0.6875rem 0.75rem 0.6875rem 0.75rem;\n ", ": 0.375rem;\n ", ": 0.75rem;\n ", ": 0.125rem;\n\n ", ": -0.1875rem 0.25rem -0.1875rem -0.125rem;\n ", ": -0.1875rem -0.125rem -0.1875rem 0.75rem;\n\n ", ": 0 0.25rem 0 0;\n ", ": 0 0 0 0.25rem;\n\n ", ": var(--plasma-typo-body-m-font-family);\n ", ": var(--plasma-typo-body-m-font-size);\n ", ": var(--plasma-typo-body-m-font-style);\n ", ": var(--plasma-typo-body-m-font-weight);\n ", ": var(--plasma-typo-body-m-letter-spacing);\n ", ": var(--plasma-typo-body-m-line-height);\n\n ", ": 0.5rem;\n ", ": var(--plasma-typo-body-s-font-family);\n ", ": var(--plasma-typo-body-s-font-size);\n ", ": var(--plasma-typo-body-s-font-style);\n ", ": var(--plasma-typo-body-s-font-weight);\n ", ": var(--plasma-typo-body-s-letter-spacing);\n ", ": var(--plasma-typo-body-s-line-height);\n\n ", ": 0.25rem;\n ", ": var(--plasma-typo-body-s-font-family);\n ", ": var(--plasma-typo-body-s-font-size);\n ", ": var(--plasma-typo-body-s-font-style);\n ", ": var(--plasma-typo-body-s-font-weight);\n ", ": var(--plasma-typo-body-s-letter-spacing);\n ", ": var(--plasma-typo-body-s-line-height);\n\n ", ": 0.3125rem 0 0 0;\n ", ": 1.0625rem 0 0.3125rem 0;\n\n ", ": 0.375rem;\n ", ": 0.375rem;\n ", ": 0 0 0 0;\n ", ": 0.3125rem auto auto -0.6875rem;\n ", ": 0 0 auto auto;\n ", ": 0.25rem -0.625rem auto auto;\n ", ": 1.063rem auto auto -0.75rem;\n ", ": 1.063rem -0.75rem auto auto;\n ", ": 1.063rem -2.125rem auto auto;\n\n ", ": 0.25rem;\n ", ": 0.25rem;\n ", ": auto;\n ", ": 1.75rem;\n ", ": 0 0.5rem 0 0.75rem;\n ", ": 0.375rem;\n ", ": 0rem;\n ", ": 1rem;\n ", ": var(--plasma-typo-body-s-font-family);\n ", ": var(--plasma-typo-body-s-font-size);\n ", ": var(--plasma-typo-body-s-font-style);\n ", ": var(--plasma-typo-body-s-font-weight);\n ", ": var(--plasma-typo-body-s-letter-spacing);\n ", ": var(--plasma-typo-body-s-line-height);\n\n ", ": 0.625rem 0.875rem 0.625rem 0.875rem;\n ", ": 0.125rem;\n ", ": 0.75rem;\n\n ", ": 1.5rem;\n ", ": 0.5rem 0.75rem;\n ", ": 0.25rem 0.75rem;\n ", ": 0.5rem;\n ", ": 1.5rem;\n ", ": 1rem;\n ", ": 0 0.375rem 0 0;\n\n ", ": var(--plasma-typo-body-m-font-family);\n ", ": var(--plasma-typo-body-m-font-size);\n ", ": var(--plasma-typo-body-m-font-style);\n ", ": var(--plasma-typo-body-m-font-weight);\n ", ": var(--plasma-typo-body-m-letter-spacing);\n ", ": var(--plasma-typo-body-m-line-height);\n\n ", ": 0rem;\n ", ": 0rem;\n ", ": 0rem;\n ", ": 0rem;\n ", ": 0.125rem;\n ", ": 0.375rem;\n ", ": var(--plasma-typo-body-m-font-family);\n ", ": var(--plasma-typo-body-m-font-size);\n ", ": var(--plasma-typo-body-m-font-style);\n ", ": var(--plasma-typo-body-m-font-weight);\n ", ": var(--plasma-typo-body-m-letter-spacing);\n ", ": var(--plasma-typo-body-m-line-height);\n\n ", ": 1.25rem;\n ", ": 0.875rem;\n ", ": 0.375rem;\n ", ": 0.25rem;\n ", ": var(--text-accent);\n ", ": var(--on-dark-text-primary);\n ", ": none;\n ", ": 0.125rem;\n ", ": var(--outline-accent);\n\n ", ": 0.375rem;\n ", ": 0.0625rem;\n
|
|
22
|
+
s: /*#__PURE__*/(0, _emotion.css)(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 2.5rem;\n ", ": 0.6875rem 0.75rem 0.6875rem 0.75rem;\n ", ": 0.375rem;\n ", ": 0.75rem;\n ", ": 0.125rem;\n\n ", ": -0.1875rem 0.25rem -0.1875rem -0.125rem;\n ", ": -0.1875rem -0.125rem -0.1875rem 0.75rem;\n\n ", ": 0 0.25rem 0 0;\n ", ": 0 0 0 0.25rem;\n\n ", ": var(--plasma-typo-body-m-font-family);\n ", ": var(--plasma-typo-body-m-font-size);\n ", ": var(--plasma-typo-body-m-font-style);\n ", ": var(--plasma-typo-body-m-font-weight);\n ", ": var(--plasma-typo-body-m-letter-spacing);\n ", ": var(--plasma-typo-body-m-line-height);\n\n ", ": 0.5rem;\n ", ": var(--plasma-typo-body-s-font-family);\n ", ": var(--plasma-typo-body-s-font-size);\n ", ": var(--plasma-typo-body-s-font-style);\n ", ": var(--plasma-typo-body-s-font-weight);\n ", ": var(--plasma-typo-body-s-letter-spacing);\n ", ": var(--plasma-typo-body-s-line-height);\n\n ", ": 0.25rem;\n ", ": var(--plasma-typo-body-s-font-family);\n ", ": var(--plasma-typo-body-s-font-size);\n ", ": var(--plasma-typo-body-s-font-style);\n ", ": var(--plasma-typo-body-s-font-weight);\n ", ": var(--plasma-typo-body-s-letter-spacing);\n ", ": var(--plasma-typo-body-s-line-height);\n\n ", ": 0.3125rem 0 0 0;\n ", ": 1.0625rem 0 0.3125rem 0;\n\n ", ": 0.375rem;\n ", ": 0.375rem;\n ", ": 0 0 0 0;\n ", ": 0.3125rem auto auto -0.6875rem;\n ", ": 0 0 auto auto;\n ", ": 0.25rem -0.625rem auto auto;\n ", ": 1.063rem auto auto -0.75rem;\n ", ": 1.063rem -0.75rem auto auto;\n ", ": 1.063rem -2.125rem auto auto;\n\n ", ": 0.25rem;\n ", ": 0.25rem;\n ", ": auto;\n ", ": 1.75rem;\n ", ": 0 0.5rem 0 0.75rem;\n ", ": 0.375rem;\n ", ": 0rem;\n ", ": 1rem;\n ", ": var(--plasma-typo-body-s-font-family);\n ", ": var(--plasma-typo-body-s-font-size);\n ", ": var(--plasma-typo-body-s-font-style);\n ", ": var(--plasma-typo-body-s-font-weight);\n ", ": var(--plasma-typo-body-s-letter-spacing);\n ", ": var(--plasma-typo-body-s-line-height);\n\n ", ": 0.625rem 0.875rem 0.625rem 0.875rem;\n ", ": 0.125rem;\n ", ": 0.75rem;\n\n ", ": 1.5rem;\n ", ": 0.5rem 0.75rem;\n ", ": 0.25rem 0.75rem;\n ", ": 0.5rem;\n ", ": 1.5rem;\n ", ": 1rem;\n ", ": 0 0.375rem 0 0;\n\n ", ": var(--plasma-typo-body-m-font-family);\n ", ": var(--plasma-typo-body-m-font-size);\n ", ": var(--plasma-typo-body-m-font-style);\n ", ": var(--plasma-typo-body-m-font-weight);\n ", ": var(--plasma-typo-body-m-letter-spacing);\n ", ": var(--plasma-typo-body-m-line-height);\n\n ", ": 0rem;\n ", ": 0rem;\n ", ": 0rem;\n ", ": 0rem;\n ", ": 0.125rem;\n ", ": 0.375rem;\n ", ": var(--plasma-typo-body-m-font-family);\n ", ": var(--plasma-typo-body-m-font-size);\n ", ": var(--plasma-typo-body-m-font-style);\n ", ": var(--plasma-typo-body-m-font-weight);\n ", ": var(--plasma-typo-body-m-letter-spacing);\n ", ": var(--plasma-typo-body-m-line-height);\n\n ", ": 1.25rem;\n ", ": 0.875rem;\n ", ": 0.375rem;\n ", ": 0.25rem;\n ", ": var(--text-accent);\n ", ": var(--on-dark-text-primary);\n ", ": none;\n ", ": 0.125rem;\n ", ": var(--outline-accent);\n\n ", ": 0.375rem;\n ", ": 0.0625rem;\n "])), _emotion.comboboxNewTokens.textFieldHeight, _emotion.comboboxNewTokens.textFieldPadding, _emotion.comboboxNewTokens.textFieldPaddingWithChips, _emotion.comboboxNewTokens.textFieldBorderRadius, _emotion.comboboxNewTokens.textFieldBorderWidth, _emotion.comboboxNewTokens.textFieldLeftContentMargin, _emotion.comboboxNewTokens.textFieldRightContentMargin, _emotion.comboboxNewTokens.textFieldTextBeforeMargin, _emotion.comboboxNewTokens.textFieldTextAfterMargin, _emotion.comboboxNewTokens.textFieldFontFamily, _emotion.comboboxNewTokens.textFieldFontSize, _emotion.comboboxNewTokens.textFieldFontStyle, _emotion.comboboxNewTokens.textFieldFontWeight, _emotion.comboboxNewTokens.textFieldLetterSpacing, _emotion.comboboxNewTokens.textFieldLineHeight, _emotion.comboboxNewTokens.textFieldLabelOffset, _emotion.comboboxNewTokens.textFieldLabelFontFamily, _emotion.comboboxNewTokens.textFieldLabelFontSize, _emotion.comboboxNewTokens.textFieldLabelFontStyle, _emotion.comboboxNewTokens.textFieldLabelFontWeight, _emotion.comboboxNewTokens.textFieldLabelLetterSpacing, _emotion.comboboxNewTokens.textFieldLabelLineHeight, _emotion.comboboxNewTokens.textFieldLeftHelperOffset, _emotion.comboboxNewTokens.textFieldLeftHelperFontFamily, _emotion.comboboxNewTokens.textFieldLeftHelperFontSize, _emotion.comboboxNewTokens.textFieldLeftHelperFontStyle, _emotion.comboboxNewTokens.textFieldLeftHelperFontWeight, _emotion.comboboxNewTokens.textFieldLeftHelperLetterSpacing, _emotion.comboboxNewTokens.textFieldLeftHelperLineHeight, _emotion.comboboxNewTokens.textFieldLabelInnerPadding, _emotion.comboboxNewTokens.textFieldContentLabelInnerPadding, _emotion.comboboxNewTokens.textFieldIndicatorSizeInner, _emotion.comboboxNewTokens.textFieldIndicatorSizeOuter, _emotion.comboboxNewTokens.textFieldIndicatorLabelPlacementInner, _emotion.comboboxNewTokens.textFieldIndicatorLabelPlacementOuter, _emotion.comboboxNewTokens.textFieldIndicatorLabelPlacementInnerRight, _emotion.comboboxNewTokens.textFieldIndicatorLabelPlacementOuterRight, _emotion.comboboxNewTokens.textFieldClearIndicatorLabelPlacementInner, _emotion.comboboxNewTokens.textFieldClearIndicatorLabelPlacementInnerRight, _emotion.comboboxNewTokens.textFieldClearIndicatorHintInnerRight, _emotion.comboboxNewTokens.textFieldChipGap, _emotion.comboboxNewTokens.textFieldChipBorderRadius, _emotion.comboboxNewTokens.textFieldChipWidth, _emotion.comboboxNewTokens.textFieldChipHeight, _emotion.comboboxNewTokens.textFieldChipPadding, _emotion.comboboxNewTokens.textFieldChipClearContentMarginLeft, _emotion.comboboxNewTokens.textFieldChipClearContentMarginRight, _emotion.comboboxNewTokens.textFieldChipCloseIconSize, _emotion.comboboxNewTokens.textFieldChipFontFamily, _emotion.comboboxNewTokens.textFieldChipFontSize, _emotion.comboboxNewTokens.textFieldChipFontStyle, _emotion.comboboxNewTokens.textFieldChipFontWeight, _emotion.comboboxNewTokens.textFieldChipLetterSpacing, _emotion.comboboxNewTokens.textFieldChipLineHeight, _emotion.comboboxNewTokens.emptyStatePadding, _emotion.comboboxNewTokens.padding, _emotion.comboboxNewTokens.borderRadius, _emotion.comboboxNewTokens.itemHeight, _emotion.comboboxNewTokens.itemPadding, _emotion.comboboxNewTokens.itemPaddingTight, _emotion.comboboxNewTokens.itemBorderRadius, _emotion.comboboxNewTokens.itemIconSize, _emotion.comboboxNewTokens.itemIconSizeTight, _emotion.comboboxNewTokens.itemIconMargin, _emotion.comboboxNewTokens.fontFamily, _emotion.comboboxNewTokens.fontSize, _emotion.comboboxNewTokens.fontStyle, _emotion.comboboxNewTokens.fontWeight, _emotion.comboboxNewTokens.fontLetterSpacing, _emotion.comboboxNewTokens.fontLineHeight, _emotion.comboboxNewTokens.cellPadding, _emotion.comboboxNewTokens.cellPaddingLeftContent, _emotion.comboboxNewTokens.cellPaddingContent, _emotion.comboboxNewTokens.cellPaddingRightContent, _emotion.comboboxNewTokens.cellTextboxGap, _emotion.comboboxNewTokens.cellGap, _emotion.comboboxNewTokens.cellTitleFontFamily, _emotion.comboboxNewTokens.cellTitleFontSize, _emotion.comboboxNewTokens.cellTitleFontStyle, _emotion.comboboxNewTokens.cellTitleFontWeight, _emotion.comboboxNewTokens.cellTitleLetterSpacing, _emotion.comboboxNewTokens.cellTitleLineHeight, _emotion.comboboxNewTokens.checkboxTriggerSize, _emotion.comboboxNewTokens.checkboxTriggerSizeTight, _emotion.comboboxNewTokens.checkboxTriggerBorderRadius, _emotion.comboboxNewTokens.checkboxTriggerBorderRadiusTight, _emotion.comboboxNewTokens.checkboxFillColor, _emotion.comboboxNewTokens.checkboxIconColor, _emotion.comboboxNewTokens.checkboxTriggerBorderCheckedColor, _emotion.comboboxNewTokens.checkboxTriggerBorderWidth, _emotion.comboboxNewTokens.checkboxTriggerBorderColor, _emotion.comboboxNewTokens.indicatorSize, _emotion.comboboxNewTokens.dropdownBorderWidth)
|
|
23
23
|
},
|
|
24
24
|
labelPlacement: {
|
|
25
25
|
inner: /*#__PURE__*/(0, _emotion.css)(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--plasma-input-label-color, var(--plasma-input-placeholder-color, var(--plasma-colors-secondary)));\n ", ": var(--plasma-typo-body-xs-font-family);\n ", ": var(--plasma-typo-body-xs-font-size);\n ", ": var(--plasma-typo-body-xs-font-style);\n ", ": var(--plasma-typo-body-xs-font-weight);\n ", ": var(--plasma-typo-body-xs-letter-spacing);\n ", ": var(--plasma-typo-body-xs-line-height);\n "])), _emotion.comboboxNewTokens.textFieldPlaceholderColor, _emotion.comboboxNewTokens.textFieldLabelInnerFontFamily, _emotion.comboboxNewTokens.textFieldLabelInnerFontSize, _emotion.comboboxNewTokens.textFieldLabelInnerFontStyle, _emotion.comboboxNewTokens.textFieldLabelInnerFontWeight, _emotion.comboboxNewTokens.textFieldLabelInnerLetterSpacing, _emotion.comboboxNewTokens.textFieldLabelInnerLineHeight),
|
|
@@ -8,8 +8,6 @@ import { Combobox } from './Combobox';
|
|
|
8
8
|
|
|
9
9
|
type StorySelectProps = ComponentProps<typeof Combobox> & {
|
|
10
10
|
enableContentLeft?: boolean;
|
|
11
|
-
selectAllLabel?: string;
|
|
12
|
-
selectAllSticky?: boolean;
|
|
13
11
|
};
|
|
14
12
|
|
|
15
13
|
const view = ['default', 'negative'];
|
|
@@ -418,187 +416,3 @@ const MultipleStory = (args: StorySelectProps) => {
|
|
|
418
416
|
export const Multiple: StoryObj<StorySelectProps> = {
|
|
419
417
|
render: (args) => <MultipleStory {...args} />,
|
|
420
418
|
};
|
|
421
|
-
|
|
422
|
-
const flatItems = [
|
|
423
|
-
{
|
|
424
|
-
value: 'north_america',
|
|
425
|
-
label: 'Северная Америка',
|
|
426
|
-
},
|
|
427
|
-
{
|
|
428
|
-
value: 'rio_de_janeiro',
|
|
429
|
-
label: 'Рио-де-Жанейро',
|
|
430
|
-
},
|
|
431
|
-
{
|
|
432
|
-
value: 'sao_paulo',
|
|
433
|
-
label: 'Сан-Паулу',
|
|
434
|
-
},
|
|
435
|
-
{
|
|
436
|
-
value: 'buenos_aires',
|
|
437
|
-
label: 'Буэнос-Айрес',
|
|
438
|
-
},
|
|
439
|
-
{
|
|
440
|
-
value: 'cordoba',
|
|
441
|
-
label: 'Кордова',
|
|
442
|
-
},
|
|
443
|
-
{
|
|
444
|
-
value: 'bogota',
|
|
445
|
-
label: 'Богота',
|
|
446
|
-
},
|
|
447
|
-
{
|
|
448
|
-
value: 'medellin',
|
|
449
|
-
label: 'Медельин',
|
|
450
|
-
},
|
|
451
|
-
{
|
|
452
|
-
value: 'paris',
|
|
453
|
-
label: 'Париж',
|
|
454
|
-
},
|
|
455
|
-
{
|
|
456
|
-
value: 'lyon',
|
|
457
|
-
label: 'Лион',
|
|
458
|
-
},
|
|
459
|
-
{
|
|
460
|
-
value: 'berlin',
|
|
461
|
-
label: 'Берлин',
|
|
462
|
-
},
|
|
463
|
-
{
|
|
464
|
-
value: 'munich',
|
|
465
|
-
label: 'Мюнхен',
|
|
466
|
-
},
|
|
467
|
-
{
|
|
468
|
-
value: 'rome',
|
|
469
|
-
label: 'Рим',
|
|
470
|
-
},
|
|
471
|
-
{
|
|
472
|
-
value: 'milan',
|
|
473
|
-
label: 'Милан',
|
|
474
|
-
},
|
|
475
|
-
{
|
|
476
|
-
value: 'madrid',
|
|
477
|
-
label: 'Мадрид',
|
|
478
|
-
},
|
|
479
|
-
{
|
|
480
|
-
value: 'barcelona',
|
|
481
|
-
label: 'Барселона',
|
|
482
|
-
},
|
|
483
|
-
{
|
|
484
|
-
value: 'london',
|
|
485
|
-
label: 'Лондон',
|
|
486
|
-
},
|
|
487
|
-
{
|
|
488
|
-
value: 'manchester',
|
|
489
|
-
label: 'Манчестер',
|
|
490
|
-
},
|
|
491
|
-
{
|
|
492
|
-
value: 'beijing',
|
|
493
|
-
label: 'Пекин',
|
|
494
|
-
},
|
|
495
|
-
{
|
|
496
|
-
value: 'shanghai',
|
|
497
|
-
label: 'Шанхай',
|
|
498
|
-
},
|
|
499
|
-
{
|
|
500
|
-
value: 'tokyo',
|
|
501
|
-
label: 'Токио',
|
|
502
|
-
},
|
|
503
|
-
{
|
|
504
|
-
value: 'osaka',
|
|
505
|
-
label: 'Осака',
|
|
506
|
-
},
|
|
507
|
-
{
|
|
508
|
-
value: 'delhi',
|
|
509
|
-
label: 'Дели',
|
|
510
|
-
},
|
|
511
|
-
{
|
|
512
|
-
value: 'mumbai',
|
|
513
|
-
label: 'Мумбаи',
|
|
514
|
-
},
|
|
515
|
-
{
|
|
516
|
-
value: 'seoul',
|
|
517
|
-
label: 'Сеул',
|
|
518
|
-
},
|
|
519
|
-
{
|
|
520
|
-
value: 'busan',
|
|
521
|
-
label: 'Пусан',
|
|
522
|
-
},
|
|
523
|
-
{
|
|
524
|
-
value: 'bangkok',
|
|
525
|
-
label: 'Бангкок',
|
|
526
|
-
},
|
|
527
|
-
{
|
|
528
|
-
value: 'phuket',
|
|
529
|
-
label: 'Пхукет',
|
|
530
|
-
},
|
|
531
|
-
{
|
|
532
|
-
value: 'africa',
|
|
533
|
-
label: 'Африка',
|
|
534
|
-
},
|
|
535
|
-
];
|
|
536
|
-
|
|
537
|
-
const SelectAllStory = (args: StorySelectProps) => {
|
|
538
|
-
const [value, setValue] = useState([]);
|
|
539
|
-
const [checked, setChecked] = useState(false);
|
|
540
|
-
const [indeterminate, setIndeterminate] = useState(false);
|
|
541
|
-
|
|
542
|
-
const handleClick = () => {
|
|
543
|
-
if (checked && !indeterminate) {
|
|
544
|
-
setValue([]);
|
|
545
|
-
} else {
|
|
546
|
-
setValue(flatItems.map((item) => item.value));
|
|
547
|
-
}
|
|
548
|
-
};
|
|
549
|
-
|
|
550
|
-
React.useEffect(() => {
|
|
551
|
-
if (value.length === 0) {
|
|
552
|
-
setChecked(false);
|
|
553
|
-
setIndeterminate(false);
|
|
554
|
-
} else if (value.length === flatItems.length) {
|
|
555
|
-
setChecked(true);
|
|
556
|
-
setIndeterminate(false);
|
|
557
|
-
} else {
|
|
558
|
-
setChecked(true);
|
|
559
|
-
setIndeterminate(true);
|
|
560
|
-
}
|
|
561
|
-
}, [value]);
|
|
562
|
-
|
|
563
|
-
return (
|
|
564
|
-
<div style={{ width: '400px' }}>
|
|
565
|
-
<Combobox
|
|
566
|
-
placeholder="Placeholder"
|
|
567
|
-
multiple
|
|
568
|
-
items={flatItems}
|
|
569
|
-
value={value}
|
|
570
|
-
onChange={setValue}
|
|
571
|
-
listOverflow="auto"
|
|
572
|
-
listMaxHeight="300px"
|
|
573
|
-
selectAllOptions={{
|
|
574
|
-
sticky: args?.selectAllSticky || false,
|
|
575
|
-
label: args?.selectAllLabel,
|
|
576
|
-
checked,
|
|
577
|
-
indeterminate,
|
|
578
|
-
onClick: handleClick,
|
|
579
|
-
}}
|
|
580
|
-
/>
|
|
581
|
-
</div>
|
|
582
|
-
);
|
|
583
|
-
};
|
|
584
|
-
|
|
585
|
-
export const SelectAll: StoryObj<StorySelectProps> = {
|
|
586
|
-
render: (args) => <SelectAllStory {...args} />,
|
|
587
|
-
argTypes: {
|
|
588
|
-
selectAllSticky: {
|
|
589
|
-
control: 'boolean',
|
|
590
|
-
},
|
|
591
|
-
selectAllLabel: {
|
|
592
|
-
control: 'text',
|
|
593
|
-
},
|
|
594
|
-
},
|
|
595
|
-
args: {
|
|
596
|
-
selectAllSticky: false,
|
|
597
|
-
selectAllLabel: 'Выбрать все',
|
|
598
|
-
},
|
|
599
|
-
parameters: {
|
|
600
|
-
controls: {
|
|
601
|
-
include: ['selectAllSticky', 'selectAllLabel'],
|
|
602
|
-
},
|
|
603
|
-
},
|
|
604
|
-
};
|
|
@@ -17,11 +17,11 @@ var config = exports.config = {
|
|
|
17
17
|
},
|
|
18
18
|
variations: {
|
|
19
19
|
view: {
|
|
20
|
-
"default": /*#__PURE__*/(0, _emotion.css)(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--text-primary);\n ", ": var(--text-secondary);\n ", ": var(--surface-solid-card);\n ", ": var(--surface-solid-card);\n ", ": var(--text-primary);\n ", ": var(--text-secondary);\n ", ": var(--text-secondary);\n ", ": var(--outline-solid-primary);\n ", ": var(--outline-solid-primary-hover);\n ", ": var(--outline-accent);\n\n ", ": var(--surface-negative);\n ", ": var(--text-tertiary);\n\n ", ": var(--text-accent);\n ", ": #1A9E32;\n ", ": var(--text-accent-active);\n ", ": var(--text-primary);\n ", ": var(--text-primary-hover);\n ", ": var(--text-primary-hover);\n ", ": var(--surface-solid-primary);\n ", ": var(--surface-solid-primary-hover);\n ", ": var(--surface-solid-primary-active);\n\n ", ": var(--text-accent);\n ", ": #1A9E32;\n ", ": var(--surface-transparent-accent);\n ", ": 1;\n ", ": var(--text-secondary);\n\n ", ": var(--outline-solid-primary);\n ", ": var(--text-primary);\n
|
|
21
|
-
negative: /*#__PURE__*/(0, _emotion.css)(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--text-primary);\n ", ": var(--text-secondary);\n ", ": var(--surface-solid-card);\n ", ": var(--surface-solid-card);\n ", ": var(--text-primary);\n ", ": var(--text-negative);\n ", ": var(--text-secondary);\n ", ": var(--outline-negative);\n ", ": var(--outline-negative-hover);\n ", ": var(--outline-accent);\n\n ", ": var(--surface-negative);\n ", ": var(--text-tertiary);\n\n ", ": var(--text-accent);\n ", ": #1A9E32;\n ", ": var(--text-accent-active);\n ", ": var(--text-primary);\n ", ": var(--text-primary-hover);\n ", ": var(--text-primary-hover);\n ", ": var(--surface-solid-primary);\n ", ": var(--surface-solid-primary-hover);\n ", ": var(--surface-solid-primary-active);\n\n ", ": var(--text-accent);\n ", ": #1A9E32;\n ", ": var(--surface-transparent-accent);\n ", ": 1;\n ", ": var(--text-secondary);\n\n ", ": var(--outline-solid-primary);\n ", ": var(--text-accent);\n
|
|
20
|
+
"default": /*#__PURE__*/(0, _emotion.css)(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--text-primary);\n ", ": var(--text-secondary);\n ", ": var(--surface-solid-card);\n ", ": var(--surface-solid-card);\n ", ": var(--text-primary);\n ", ": var(--text-secondary);\n ", ": var(--text-secondary);\n ", ": var(--outline-solid-primary);\n ", ": var(--outline-solid-primary-hover);\n ", ": var(--outline-accent);\n\n ", ": var(--surface-negative);\n ", ": var(--text-tertiary);\n\n ", ": var(--text-accent);\n ", ": #1A9E32;\n ", ": var(--text-accent-active);\n ", ": var(--text-primary);\n ", ": var(--text-primary-hover);\n ", ": var(--text-primary-hover);\n ", ": var(--surface-solid-primary);\n ", ": var(--surface-solid-primary-hover);\n ", ": var(--surface-solid-primary-active);\n\n ", ": var(--text-accent);\n ", ": #1A9E32;\n ", ": var(--surface-transparent-accent);\n ", ": 1;\n ", ": var(--text-secondary);\n\n ", ": var(--outline-solid-primary);\n ", ": var(--text-primary);\n "])), _emotion.selectTokens.textFieldColor, _emotion.selectTokens.textFieldPlaceholderColor, _emotion.selectTokens.textFieldBackgroundColor, _emotion.selectTokens.textFieldBackgroundColorFocus, _emotion.selectTokens.textFieldLabelColor, _emotion.selectTokens.textFieldLeftHelperColor, _emotion.selectTokens.textFieldContentSlotColor, _emotion.selectTokens.textFieldBorderColor, _emotion.selectTokens.textFieldBorderColorHover, _emotion.selectTokens.textFieldBorderColorFocus, _plasmaNewHope.selectTokens.textFieldIndicatorColor, _plasmaNewHope.selectTokens.textFieldOptionalColor, _emotion.selectTokens.buttonColor, _emotion.selectTokens.buttonColorHover, _emotion.selectTokens.buttonColorActive, _emotion.selectTokens.buttonArrowColor, _emotion.selectTokens.buttonArrowColorHover, _emotion.selectTokens.buttonArrowColorActive, _emotion.selectTokens.buttonBackgroundColor, _emotion.selectTokens.buttonBackgroundColorHover, _emotion.selectTokens.buttonBackgroundColorActive, _emotion.selectTokens.disclosureIconColor, _emotion.selectTokens.disclosureIconColorHover, _emotion.selectTokens.itemBackgroundHover, _emotion.selectTokens.itemDisabledOpacity, _emotion.selectTokens.itemDisabledColor, _emotion.selectTokens.dropdownBorderColor, _emotion.selectTokens.checkboxIconColor),
|
|
21
|
+
negative: /*#__PURE__*/(0, _emotion.css)(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--text-primary);\n ", ": var(--text-secondary);\n ", ": var(--surface-solid-card);\n ", ": var(--surface-solid-card);\n ", ": var(--text-primary);\n ", ": var(--text-negative);\n ", ": var(--text-secondary);\n ", ": var(--outline-negative);\n ", ": var(--outline-negative-hover);\n ", ": var(--outline-accent);\n\n ", ": var(--surface-negative);\n ", ": var(--text-tertiary);\n\n ", ": var(--text-accent);\n ", ": #1A9E32;\n ", ": var(--text-accent-active);\n ", ": var(--text-primary);\n ", ": var(--text-primary-hover);\n ", ": var(--text-primary-hover);\n ", ": var(--surface-solid-primary);\n ", ": var(--surface-solid-primary-hover);\n ", ": var(--surface-solid-primary-active);\n\n ", ": var(--text-accent);\n ", ": #1A9E32;\n ", ": var(--surface-transparent-accent);\n ", ": 1;\n ", ": var(--text-secondary);\n\n ", ": var(--outline-solid-primary);\n ", ": var(--text-accent);\n "])), _emotion.selectTokens.textFieldColor, _emotion.selectTokens.textFieldPlaceholderColor, _emotion.selectTokens.textFieldBackgroundColor, _emotion.selectTokens.textFieldBackgroundColorFocus, _emotion.selectTokens.textFieldLabelColor, _emotion.selectTokens.textFieldLeftHelperColor, _emotion.selectTokens.textFieldContentSlotColor, _emotion.selectTokens.textFieldBorderColor, _emotion.selectTokens.textFieldBorderColorHover, _emotion.selectTokens.textFieldBorderColorFocus, _plasmaNewHope.selectTokens.textFieldIndicatorColor, _plasmaNewHope.selectTokens.textFieldOptionalColor, _emotion.selectTokens.buttonColor, _emotion.selectTokens.buttonColorHover, _emotion.selectTokens.buttonColorActive, _emotion.selectTokens.buttonArrowColor, _emotion.selectTokens.buttonArrowColorHover, _emotion.selectTokens.buttonArrowColorActive, _emotion.selectTokens.buttonBackgroundColor, _emotion.selectTokens.buttonBackgroundColorHover, _emotion.selectTokens.buttonBackgroundColorActive, _emotion.selectTokens.disclosureIconColor, _emotion.selectTokens.disclosureIconColorHover, _emotion.selectTokens.itemBackgroundHover, _emotion.selectTokens.itemDisabledOpacity, _emotion.selectTokens.itemDisabledColor, _emotion.selectTokens.dropdownBorderColor, _emotion.selectTokens.checkboxIconColor)
|
|
22
22
|
},
|
|
23
23
|
size: {
|
|
24
|
-
s: /*#__PURE__*/(0, _emotion.css)(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 2.5rem;\n ", ": 0.6875rem 0.875rem 0.6875rem 0.875rem;\n ", ": 0.375rem;\n ", ": 0.75rem;\n ", ": 0.125rem;\n\n ", ": -0.1875rem 0.25rem -0.1875rem -0.125rem;\n ", ": -0.1875rem -0.125rem -0.1875rem 0.75rem;\n\n ", ": 0 0.25rem 0 0;\n ", ": 0 0 0 0.25rem;\n\n ", ": var(--plasma-typo-body-m-font-family);\n ", ": var(--plasma-typo-body-m-font-size);\n ", ": var(--plasma-typo-body-m-font-style);\n ", ": var(--plasma-typo-body-m-font-weight);\n ", ": var(--plasma-typo-body-m-letter-spacing);\n ", ": var(--plasma-typo-body-m-line-height);\n\n ", ": 0.5rem;\n ", ": var(--plasma-typo-body-s-font-family);\n ", ": var(--plasma-typo-body-s-font-size);\n ", ": var(--plasma-typo-body-s-font-style);\n ", ": var(--plasma-typo-body-s-font-weight);\n ", ": var(--plasma-typo-body-s-letter-spacing);\n ", ": var(--plasma-typo-body-s-line-height);\n\n ", ": 0.25rem;\n ", ": var(--plasma-typo-body-s-font-family);\n ", ": var(--plasma-typo-body-s-font-size);\n ", ": var(--plasma-typo-body-s-font-style);\n ", ": var(--plasma-typo-body-s-font-weight);\n ", ": var(--plasma-typo-body-s-letter-spacing);\n ", ": var(--plasma-typo-body-s-line-height);\n\n ", ": 0.3125rem 0 0 0;\n ", ": 1.0625rem 0 0.3125rem 0;\n\n ", ": 0.375rem;\n ", ": 0.375rem;\n ", ": 0 0 0 0;\n ", ": 0.3125rem auto auto -0.6875rem;\n ", ": 0 0 auto auto;\n ", ": 0.25rem -0.625rem auto auto;\n ", ": 1.063rem auto auto -0.75rem;\n ", ": 1.063rem -0.75rem auto auto;\n ", ": 1.063rem -2.125rem auto auto;\n\n ", ": 0.25rem;\n ", ": 0.25rem;\n ", ": auto;\n ", ": 1.75rem;\n ", ": 0 0.5rem 0 0.75rem;\n ", ": 0.375rem;\n ", ": 0rem;\n ", ": 1rem;\n ", ": var(--plasma-typo-body-s-font-family);\n ", ": var(--plasma-typo-body-s-font-size);\n ", ": var(--plasma-typo-body-s-font-style);\n ", ": var(--plasma-typo-body-s-font-weight);\n ", ": var(--plasma-typo-body-s-letter-spacing);\n ", ": var(--plasma-typo-body-s-line-height);\n\n ", ": 0 -0.125rem 0 0.25rem;\n ", ": 2.5rem;\n ", ": 1rem 0 1rem;\n\n ", ": 0.125rem;\n ", ": 0.75rem;\n\n ", ": 0.125rem;\n\n ", ": 1.5rem;\n ", ": 0.5rem 0.5rem;\n ", ": 0.25rem 0.5rem;\n ", ": 0.5rem;\n ", ": 1.5rem;\n ", ": 1rem;\n ", ": 0 0.5rem 0 0;\n\n ", ": 0rem;\n ", ": 0rem;\n ", ": 0rem;\n ", ": 0rem;\n ", ": 0.125rem;\n ", ": 0.375rem;\n ", ": var(--plasma-typo-body-m-font-family);\n ", ": var(--plasma-typo-body-m-font-size);\n ", ": var(--plasma-typo-body-m-font-style);\n ", ": var(--plasma-typo-body-m-font-weight);\n ", ": var(--plasma-typo-body-m-letter-spacing);\n ", ": var(--plasma-typo-body-m-line-height);\n\n ", ": var(--plasma-typo-body-m-font-family);\n ", ": var(--plasma-typo-body-m-font-size);\n ", ": var(--plasma-typo-body-m-font-style);\n ", ": var(--plasma-typo-body-m-font-weight);\n ", ": var(--plasma-typo-body-m-letter-spacing);\n ", ": var(--plasma-typo-body-m-line-height);\n\n ", ": 1.25rem;\n ", ": 0.875rem;\n ", ": 0.375rem;\n ", ": 0.25rem;\n ", ": var(--text-primary);\n ", ": var(--on-dark-text-primary);\n ", ": var(--outline-accent);\n ", ": transparent;\n ", ": 0.125rem;\n\n ", ": 0.375rem;\n\n ", ": 0.375rem;\n ", ": 0.75rem;\n ", ": 0.375rem;\n ", ": 0.75rem;\n ", ": 0.25rem;\n ", ": 0.25rem;\n "])), _plasmaNewHope.selectTokens.textFieldHeight, _plasmaNewHope.selectTokens.textFieldPadding, _plasmaNewHope.selectTokens.textFieldPaddingWithChips, _plasmaNewHope.selectTokens.textFieldBorderRadius, _plasmaNewHope.selectTokens.textFieldBorderWidth, _plasmaNewHope.selectTokens.textFieldLeftContentMargin, _plasmaNewHope.selectTokens.textFieldRightContentMargin, _plasmaNewHope.selectTokens.textFieldTextBeforeMargin, _plasmaNewHope.selectTokens.textFieldTextAfterMargin, _plasmaNewHope.selectTokens.textFieldFontFamily, _plasmaNewHope.selectTokens.textFieldFontSize, _plasmaNewHope.selectTokens.textFieldFontStyle, _plasmaNewHope.selectTokens.textFieldFontWeight, _plasmaNewHope.selectTokens.textFieldLetterSpacing, _plasmaNewHope.selectTokens.textFieldLineHeight, _plasmaNewHope.selectTokens.textFieldLabelOffset, _plasmaNewHope.selectTokens.textFieldLabelFontFamily, _plasmaNewHope.selectTokens.textFieldLabelFontSize, _plasmaNewHope.selectTokens.textFieldLabelFontStyle, _plasmaNewHope.selectTokens.textFieldLabelFontWeight, _plasmaNewHope.selectTokens.textFieldLabelLetterSpacing, _plasmaNewHope.selectTokens.textFieldLabelLineHeight, _plasmaNewHope.selectTokens.textFieldLeftHelperOffset, _plasmaNewHope.selectTokens.textFieldLeftHelperFontFamily, _plasmaNewHope.selectTokens.textFieldLeftHelperFontSize, _plasmaNewHope.selectTokens.textFieldLeftHelperFontStyle, _plasmaNewHope.selectTokens.textFieldLeftHelperFontWeight, _plasmaNewHope.selectTokens.textFieldLeftHelperLetterSpacing, _plasmaNewHope.selectTokens.textFieldLeftHelperLineHeight, _plasmaNewHope.selectTokens.textFieldLabelInnerPadding, _plasmaNewHope.selectTokens.textFieldContentLabelInnerPadding, _plasmaNewHope.selectTokens.textFieldIndicatorSizeInner, _plasmaNewHope.selectTokens.textFieldIndicatorSizeOuter, _plasmaNewHope.selectTokens.textFieldIndicatorLabelPlacementInner, _plasmaNewHope.selectTokens.textFieldIndicatorLabelPlacementOuter, _plasmaNewHope.selectTokens.textFieldIndicatorLabelPlacementInnerRight, _plasmaNewHope.selectTokens.textFieldIndicatorLabelPlacementOuterRight, _plasmaNewHope.selectTokens.textFieldClearIndicatorLabelPlacementInner, _plasmaNewHope.selectTokens.textFieldClearIndicatorLabelPlacementInnerRight, _plasmaNewHope.selectTokens.textFieldClearIndicatorHintInnerRight, _plasmaNewHope.selectTokens.textFieldChipGap, _plasmaNewHope.selectTokens.textFieldChipBorderRadius, _plasmaNewHope.selectTokens.textFieldChipWidth, _plasmaNewHope.selectTokens.textFieldChipHeight, _plasmaNewHope.selectTokens.textFieldChipPadding, _plasmaNewHope.selectTokens.textFieldChipClearContentMarginLeft, _plasmaNewHope.selectTokens.textFieldChipClearContentMarginRight, _plasmaNewHope.selectTokens.textFieldChipCloseIconSize, _plasmaNewHope.selectTokens.textFieldChipFontFamily, _plasmaNewHope.selectTokens.textFieldChipFontSize, _plasmaNewHope.selectTokens.textFieldChipFontStyle, _plasmaNewHope.selectTokens.textFieldChipFontWeight, _plasmaNewHope.selectTokens.textFieldChipLetterSpacing, _plasmaNewHope.selectTokens.textFieldChipLineHeight, _plasmaNewHope.selectTokens.buttonArrowMargin, _plasmaNewHope.selectTokens.targetHeight, _plasmaNewHope.selectTokens.buttonPadding, _plasmaNewHope.selectTokens.padding, _plasmaNewHope.selectTokens.borderRadius, _plasmaNewHope.selectTokens.dropdownBorderWidth, _plasmaNewHope.selectTokens.itemHeight, _plasmaNewHope.selectTokens.itemPadding, _plasmaNewHope.selectTokens.itemPaddingTight, _plasmaNewHope.selectTokens.itemBorderRadius, _plasmaNewHope.selectTokens.itemIconSize, _plasmaNewHope.selectTokens.itemIconSizeTight, _plasmaNewHope.selectTokens.itemIconMargin, _plasmaNewHope.selectTokens.cellPadding, _plasmaNewHope.selectTokens.cellPaddingLeftContent, _plasmaNewHope.selectTokens.cellPaddingContent, _plasmaNewHope.selectTokens.cellPaddingRightContent, _plasmaNewHope.selectTokens.cellTextboxGap, _plasmaNewHope.selectTokens.cellGap, _plasmaNewHope.selectTokens.cellTitleFontFamily, _plasmaNewHope.selectTokens.cellTitleFontSize, _plasmaNewHope.selectTokens.cellTitleFontStyle, _plasmaNewHope.selectTokens.cellTitleFontWeight, _plasmaNewHope.selectTokens.cellTitleLetterSpacing, _plasmaNewHope.selectTokens.cellTitleLineHeight, _plasmaNewHope.selectTokens.fontFamily, _plasmaNewHope.selectTokens.fontSize, _plasmaNewHope.selectTokens.fontStyle, _plasmaNewHope.selectTokens.fontWeight, _plasmaNewHope.selectTokens.fontLetterSpacing, _plasmaNewHope.selectTokens.fontLineHeight, _plasmaNewHope.selectTokens.checkboxTriggerSize, _plasmaNewHope.selectTokens.checkboxTriggerSizeTight, _plasmaNewHope.selectTokens.checkboxTriggerBorderRadius, _plasmaNewHope.selectTokens.checkboxTriggerBorderRadiusTight, _plasmaNewHope.selectTokens.checkboxFillColor, _plasmaNewHope.selectTokens.checkboxIconColor, _plasmaNewHope.selectTokens.checkboxTriggerBorderColor, _plasmaNewHope.selectTokens.checkboxTriggerBorderCheckedColor, _plasmaNewHope.selectTokens.checkboxTriggerBorderWidth, _plasmaNewHope.selectTokens.indicatorSize, _plasmaNewHope.selectTokens.dividerMarginTop, _plasmaNewHope.selectTokens.dividerMarginRight, _plasmaNewHope.selectTokens.dividerMarginBottom, _plasmaNewHope.selectTokens.dividerMarginLeft, _plasmaNewHope.selectTokens.dividerMarginTopTight, _plasmaNewHope.selectTokens.dividerMarginBottomTight)
|
|
24
|
+
s: /*#__PURE__*/(0, _emotion.css)(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 2.5rem;\n ", ": 0.6875rem 0.875rem 0.6875rem 0.875rem;\n ", ": 0.375rem;\n ", ": 0.75rem;\n ", ": 0.125rem;\n\n ", ": -0.1875rem 0.25rem -0.1875rem -0.125rem;\n ", ": -0.1875rem -0.125rem -0.1875rem 0.75rem;\n\n ", ": 0 0.25rem 0 0;\n ", ": 0 0 0 0.25rem;\n\n ", ": var(--plasma-typo-body-m-font-family);\n ", ": var(--plasma-typo-body-m-font-size);\n ", ": var(--plasma-typo-body-m-font-style);\n ", ": var(--plasma-typo-body-m-font-weight);\n ", ": var(--plasma-typo-body-m-letter-spacing);\n ", ": var(--plasma-typo-body-m-line-height);\n\n ", ": 0.5rem;\n ", ": var(--plasma-typo-body-s-font-family);\n ", ": var(--plasma-typo-body-s-font-size);\n ", ": var(--plasma-typo-body-s-font-style);\n ", ": var(--plasma-typo-body-s-font-weight);\n ", ": var(--plasma-typo-body-s-letter-spacing);\n ", ": var(--plasma-typo-body-s-line-height);\n\n ", ": 0.25rem;\n ", ": var(--plasma-typo-body-s-font-family);\n ", ": var(--plasma-typo-body-s-font-size);\n ", ": var(--plasma-typo-body-s-font-style);\n ", ": var(--plasma-typo-body-s-font-weight);\n ", ": var(--plasma-typo-body-s-letter-spacing);\n ", ": var(--plasma-typo-body-s-line-height);\n\n ", ": 0.3125rem 0 0 0;\n ", ": 1.0625rem 0 0.3125rem 0;\n\n ", ": 0.375rem;\n ", ": 0.375rem;\n ", ": 0 0 0 0;\n ", ": 0.3125rem auto auto -0.6875rem;\n ", ": 0 0 auto auto;\n ", ": 0.25rem -0.625rem auto auto;\n ", ": 1.063rem auto auto -0.75rem;\n ", ": 1.063rem -0.75rem auto auto;\n ", ": 1.063rem -2.125rem auto auto;\n\n ", ": 0.25rem;\n ", ": 0.25rem;\n ", ": auto;\n ", ": 1.75rem;\n ", ": 0 0.5rem 0 0.75rem;\n ", ": 0.375rem;\n ", ": 0rem;\n ", ": 1rem;\n ", ": var(--plasma-typo-body-s-font-family);\n ", ": var(--plasma-typo-body-s-font-size);\n ", ": var(--plasma-typo-body-s-font-style);\n ", ": var(--plasma-typo-body-s-font-weight);\n ", ": var(--plasma-typo-body-s-letter-spacing);\n ", ": var(--plasma-typo-body-s-line-height);\n\n ", ": 0 -0.125rem 0 0.25rem;\n ", ": 2.5rem;\n ", ": 1rem 0 1rem;\n\n ", ": 0.125rem;\n ", ": 0.75rem;\n\n ", ": 0.125rem;\n\n ", ": 1.5rem;\n ", ": 0.5rem 0.5rem;\n ", ": 0.25rem 0.5rem;\n ", ": 0.5rem;\n ", ": 1.5rem;\n ", ": 1rem;\n ", ": 0 0.5rem 0 0;\n\n ", ": 0rem;\n ", ": 0rem;\n ", ": 0rem;\n ", ": 0rem;\n ", ": 0.125rem;\n ", ": 0.375rem;\n ", ": var(--plasma-typo-body-m-font-family);\n ", ": var(--plasma-typo-body-m-font-size);\n ", ": var(--plasma-typo-body-m-font-style);\n ", ": var(--plasma-typo-body-m-font-weight);\n ", ": var(--plasma-typo-body-m-letter-spacing);\n ", ": var(--plasma-typo-body-m-line-height);\n\n ", ": var(--plasma-typo-body-m-font-family);\n ", ": var(--plasma-typo-body-m-font-size);\n ", ": var(--plasma-typo-body-m-font-style);\n ", ": var(--plasma-typo-body-m-font-weight);\n ", ": var(--plasma-typo-body-m-letter-spacing);\n ", ": var(--plasma-typo-body-m-line-height);\n\n ", ": 1.25rem;\n ", ": 0.875rem;\n ", ": 0.375rem;\n ", ": 0.25rem;\n ", ": var(--text-primary);\n ", ": var(--on-dark-text-primary);\n ", ": var(--outline-accent);\n ", ": transparent;\n ", ": 0.125rem;\n\n ", ": 0.375rem;\n "])), _plasmaNewHope.selectTokens.textFieldHeight, _plasmaNewHope.selectTokens.textFieldPadding, _plasmaNewHope.selectTokens.textFieldPaddingWithChips, _plasmaNewHope.selectTokens.textFieldBorderRadius, _plasmaNewHope.selectTokens.textFieldBorderWidth, _plasmaNewHope.selectTokens.textFieldLeftContentMargin, _plasmaNewHope.selectTokens.textFieldRightContentMargin, _plasmaNewHope.selectTokens.textFieldTextBeforeMargin, _plasmaNewHope.selectTokens.textFieldTextAfterMargin, _plasmaNewHope.selectTokens.textFieldFontFamily, _plasmaNewHope.selectTokens.textFieldFontSize, _plasmaNewHope.selectTokens.textFieldFontStyle, _plasmaNewHope.selectTokens.textFieldFontWeight, _plasmaNewHope.selectTokens.textFieldLetterSpacing, _plasmaNewHope.selectTokens.textFieldLineHeight, _plasmaNewHope.selectTokens.textFieldLabelOffset, _plasmaNewHope.selectTokens.textFieldLabelFontFamily, _plasmaNewHope.selectTokens.textFieldLabelFontSize, _plasmaNewHope.selectTokens.textFieldLabelFontStyle, _plasmaNewHope.selectTokens.textFieldLabelFontWeight, _plasmaNewHope.selectTokens.textFieldLabelLetterSpacing, _plasmaNewHope.selectTokens.textFieldLabelLineHeight, _plasmaNewHope.selectTokens.textFieldLeftHelperOffset, _plasmaNewHope.selectTokens.textFieldLeftHelperFontFamily, _plasmaNewHope.selectTokens.textFieldLeftHelperFontSize, _plasmaNewHope.selectTokens.textFieldLeftHelperFontStyle, _plasmaNewHope.selectTokens.textFieldLeftHelperFontWeight, _plasmaNewHope.selectTokens.textFieldLeftHelperLetterSpacing, _plasmaNewHope.selectTokens.textFieldLeftHelperLineHeight, _plasmaNewHope.selectTokens.textFieldLabelInnerPadding, _plasmaNewHope.selectTokens.textFieldContentLabelInnerPadding, _plasmaNewHope.selectTokens.textFieldIndicatorSizeInner, _plasmaNewHope.selectTokens.textFieldIndicatorSizeOuter, _plasmaNewHope.selectTokens.textFieldIndicatorLabelPlacementInner, _plasmaNewHope.selectTokens.textFieldIndicatorLabelPlacementOuter, _plasmaNewHope.selectTokens.textFieldIndicatorLabelPlacementInnerRight, _plasmaNewHope.selectTokens.textFieldIndicatorLabelPlacementOuterRight, _plasmaNewHope.selectTokens.textFieldClearIndicatorLabelPlacementInner, _plasmaNewHope.selectTokens.textFieldClearIndicatorLabelPlacementInnerRight, _plasmaNewHope.selectTokens.textFieldClearIndicatorHintInnerRight, _plasmaNewHope.selectTokens.textFieldChipGap, _plasmaNewHope.selectTokens.textFieldChipBorderRadius, _plasmaNewHope.selectTokens.textFieldChipWidth, _plasmaNewHope.selectTokens.textFieldChipHeight, _plasmaNewHope.selectTokens.textFieldChipPadding, _plasmaNewHope.selectTokens.textFieldChipClearContentMarginLeft, _plasmaNewHope.selectTokens.textFieldChipClearContentMarginRight, _plasmaNewHope.selectTokens.textFieldChipCloseIconSize, _plasmaNewHope.selectTokens.textFieldChipFontFamily, _plasmaNewHope.selectTokens.textFieldChipFontSize, _plasmaNewHope.selectTokens.textFieldChipFontStyle, _plasmaNewHope.selectTokens.textFieldChipFontWeight, _plasmaNewHope.selectTokens.textFieldChipLetterSpacing, _plasmaNewHope.selectTokens.textFieldChipLineHeight, _plasmaNewHope.selectTokens.buttonArrowMargin, _plasmaNewHope.selectTokens.targetHeight, _plasmaNewHope.selectTokens.buttonPadding, _plasmaNewHope.selectTokens.padding, _plasmaNewHope.selectTokens.borderRadius, _plasmaNewHope.selectTokens.dropdownBorderWidth, _plasmaNewHope.selectTokens.itemHeight, _plasmaNewHope.selectTokens.itemPadding, _plasmaNewHope.selectTokens.itemPaddingTight, _plasmaNewHope.selectTokens.itemBorderRadius, _plasmaNewHope.selectTokens.itemIconSize, _plasmaNewHope.selectTokens.itemIconSizeTight, _plasmaNewHope.selectTokens.itemIconMargin, _plasmaNewHope.selectTokens.cellPadding, _plasmaNewHope.selectTokens.cellPaddingLeftContent, _plasmaNewHope.selectTokens.cellPaddingContent, _plasmaNewHope.selectTokens.cellPaddingRightContent, _plasmaNewHope.selectTokens.cellTextboxGap, _plasmaNewHope.selectTokens.cellGap, _plasmaNewHope.selectTokens.cellTitleFontFamily, _plasmaNewHope.selectTokens.cellTitleFontSize, _plasmaNewHope.selectTokens.cellTitleFontStyle, _plasmaNewHope.selectTokens.cellTitleFontWeight, _plasmaNewHope.selectTokens.cellTitleLetterSpacing, _plasmaNewHope.selectTokens.cellTitleLineHeight, _plasmaNewHope.selectTokens.fontFamily, _plasmaNewHope.selectTokens.fontSize, _plasmaNewHope.selectTokens.fontStyle, _plasmaNewHope.selectTokens.fontWeight, _plasmaNewHope.selectTokens.fontLetterSpacing, _plasmaNewHope.selectTokens.fontLineHeight, _plasmaNewHope.selectTokens.checkboxTriggerSize, _plasmaNewHope.selectTokens.checkboxTriggerSizeTight, _plasmaNewHope.selectTokens.checkboxTriggerBorderRadius, _plasmaNewHope.selectTokens.checkboxTriggerBorderRadiusTight, _plasmaNewHope.selectTokens.checkboxFillColor, _plasmaNewHope.selectTokens.checkboxIconColor, _plasmaNewHope.selectTokens.checkboxTriggerBorderColor, _plasmaNewHope.selectTokens.checkboxTriggerBorderCheckedColor, _plasmaNewHope.selectTokens.checkboxTriggerBorderWidth, _plasmaNewHope.selectTokens.indicatorSize)
|
|
25
25
|
},
|
|
26
26
|
labelPlacement: {
|
|
27
27
|
inner: /*#__PURE__*/(0, _emotion.css)(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--plasma-input-label-color, var(--plasma-input-placeholder-color, var(--plasma-colors-secondary)));\n ", ": var(--plasma-typo-body-xs-font-family);\n ", ": var(--plasma-typo-body-xs-font-size);\n ", ": var(--plasma-typo-body-xs-font-style);\n ", ": var(--plasma-typo-body-xs-font-weight);\n ", ": var(--plasma-typo-body-xs-letter-spacing);\n ", ": var(--plasma-typo-body-xs-line-height);\n "])), _plasmaNewHope.selectTokens.textFieldPlaceholderColor, _plasmaNewHope.selectTokens.textFieldLabelInnerFontFamily, _plasmaNewHope.selectTokens.textFieldLabelInnerFontSize, _plasmaNewHope.selectTokens.textFieldLabelInnerFontStyle, _plasmaNewHope.selectTokens.textFieldLabelInnerFontWeight, _plasmaNewHope.selectTokens.textFieldLabelInnerLetterSpacing, _plasmaNewHope.selectTokens.textFieldLabelInnerLineHeight),
|
|
@@ -9,8 +9,6 @@ import { Select } from './Select';
|
|
|
9
9
|
|
|
10
10
|
type StorySelectProps = ComponentProps<typeof Select> & {
|
|
11
11
|
enableContentLeft?: boolean;
|
|
12
|
-
selectAllLabel?: string;
|
|
13
|
-
selectAllSticky?: boolean;
|
|
14
12
|
};
|
|
15
13
|
|
|
16
14
|
const view = ['default', 'negative'];
|
|
@@ -456,187 +454,3 @@ const PredefinedStory = ({ enableContentLeft, ...args }: StorySelectProps) => {
|
|
|
456
454
|
export const Predefined: StoryObj<StorySelectProps> = {
|
|
457
455
|
render: (args) => <PredefinedStory {...args} />,
|
|
458
456
|
};
|
|
459
|
-
|
|
460
|
-
const flatItems = [
|
|
461
|
-
{
|
|
462
|
-
value: 'north_america',
|
|
463
|
-
label: 'Северная Америка',
|
|
464
|
-
},
|
|
465
|
-
{
|
|
466
|
-
value: 'rio_de_janeiro',
|
|
467
|
-
label: 'Рио-де-Жанейро',
|
|
468
|
-
},
|
|
469
|
-
{
|
|
470
|
-
value: 'sao_paulo',
|
|
471
|
-
label: 'Сан-Паулу',
|
|
472
|
-
},
|
|
473
|
-
{
|
|
474
|
-
value: 'buenos_aires',
|
|
475
|
-
label: 'Буэнос-Айрес',
|
|
476
|
-
},
|
|
477
|
-
{
|
|
478
|
-
value: 'cordoba',
|
|
479
|
-
label: 'Кордова',
|
|
480
|
-
},
|
|
481
|
-
{
|
|
482
|
-
value: 'bogota',
|
|
483
|
-
label: 'Богота',
|
|
484
|
-
},
|
|
485
|
-
{
|
|
486
|
-
value: 'medellin',
|
|
487
|
-
label: 'Медельин',
|
|
488
|
-
},
|
|
489
|
-
{
|
|
490
|
-
value: 'paris',
|
|
491
|
-
label: 'Париж',
|
|
492
|
-
},
|
|
493
|
-
{
|
|
494
|
-
value: 'lyon',
|
|
495
|
-
label: 'Лион',
|
|
496
|
-
},
|
|
497
|
-
{
|
|
498
|
-
value: 'berlin',
|
|
499
|
-
label: 'Берлин',
|
|
500
|
-
},
|
|
501
|
-
{
|
|
502
|
-
value: 'munich',
|
|
503
|
-
label: 'Мюнхен',
|
|
504
|
-
},
|
|
505
|
-
{
|
|
506
|
-
value: 'rome',
|
|
507
|
-
label: 'Рим',
|
|
508
|
-
},
|
|
509
|
-
{
|
|
510
|
-
value: 'milan',
|
|
511
|
-
label: 'Милан',
|
|
512
|
-
},
|
|
513
|
-
{
|
|
514
|
-
value: 'madrid',
|
|
515
|
-
label: 'Мадрид',
|
|
516
|
-
},
|
|
517
|
-
{
|
|
518
|
-
value: 'barcelona',
|
|
519
|
-
label: 'Барселона',
|
|
520
|
-
},
|
|
521
|
-
{
|
|
522
|
-
value: 'london',
|
|
523
|
-
label: 'Лондон',
|
|
524
|
-
},
|
|
525
|
-
{
|
|
526
|
-
value: 'manchester',
|
|
527
|
-
label: 'Манчестер',
|
|
528
|
-
},
|
|
529
|
-
{
|
|
530
|
-
value: 'beijing',
|
|
531
|
-
label: 'Пекин',
|
|
532
|
-
},
|
|
533
|
-
{
|
|
534
|
-
value: 'shanghai',
|
|
535
|
-
label: 'Шанхай',
|
|
536
|
-
},
|
|
537
|
-
{
|
|
538
|
-
value: 'tokyo',
|
|
539
|
-
label: 'Токио',
|
|
540
|
-
},
|
|
541
|
-
{
|
|
542
|
-
value: 'osaka',
|
|
543
|
-
label: 'Осака',
|
|
544
|
-
},
|
|
545
|
-
{
|
|
546
|
-
value: 'delhi',
|
|
547
|
-
label: 'Дели',
|
|
548
|
-
},
|
|
549
|
-
{
|
|
550
|
-
value: 'mumbai',
|
|
551
|
-
label: 'Мумбаи',
|
|
552
|
-
},
|
|
553
|
-
{
|
|
554
|
-
value: 'seoul',
|
|
555
|
-
label: 'Сеул',
|
|
556
|
-
},
|
|
557
|
-
{
|
|
558
|
-
value: 'busan',
|
|
559
|
-
label: 'Пусан',
|
|
560
|
-
},
|
|
561
|
-
{
|
|
562
|
-
value: 'bangkok',
|
|
563
|
-
label: 'Бангкок',
|
|
564
|
-
},
|
|
565
|
-
{
|
|
566
|
-
value: 'phuket',
|
|
567
|
-
label: 'Пхукет',
|
|
568
|
-
},
|
|
569
|
-
{
|
|
570
|
-
value: 'africa',
|
|
571
|
-
label: 'Африка',
|
|
572
|
-
},
|
|
573
|
-
];
|
|
574
|
-
|
|
575
|
-
const SelectAllStory = (args: StorySelectProps) => {
|
|
576
|
-
const [value, setValue] = useState([]);
|
|
577
|
-
const [checked, setChecked] = useState(false);
|
|
578
|
-
const [indeterminate, setIndeterminate] = useState(false);
|
|
579
|
-
|
|
580
|
-
const handleClick = () => {
|
|
581
|
-
if (checked && !indeterminate) {
|
|
582
|
-
setValue([]);
|
|
583
|
-
} else {
|
|
584
|
-
setValue(flatItems.map((item) => item.value));
|
|
585
|
-
}
|
|
586
|
-
};
|
|
587
|
-
|
|
588
|
-
React.useEffect(() => {
|
|
589
|
-
if (value.length === 0) {
|
|
590
|
-
setChecked(false);
|
|
591
|
-
setIndeterminate(false);
|
|
592
|
-
} else if (value.length === flatItems.length) {
|
|
593
|
-
setChecked(true);
|
|
594
|
-
setIndeterminate(false);
|
|
595
|
-
} else {
|
|
596
|
-
setChecked(true);
|
|
597
|
-
setIndeterminate(true);
|
|
598
|
-
}
|
|
599
|
-
}, [value]);
|
|
600
|
-
|
|
601
|
-
return (
|
|
602
|
-
<div style={{ width: '400px' }}>
|
|
603
|
-
<Select
|
|
604
|
-
placeholder="Placeholder"
|
|
605
|
-
multiselect
|
|
606
|
-
items={flatItems}
|
|
607
|
-
value={value}
|
|
608
|
-
onChange={setValue}
|
|
609
|
-
listOverflow="auto"
|
|
610
|
-
listMaxHeight="300px"
|
|
611
|
-
selectAllOptions={{
|
|
612
|
-
sticky: args?.selectAllSticky || false,
|
|
613
|
-
label: args?.selectAllLabel,
|
|
614
|
-
checked,
|
|
615
|
-
indeterminate,
|
|
616
|
-
onClick: handleClick,
|
|
617
|
-
}}
|
|
618
|
-
/>
|
|
619
|
-
</div>
|
|
620
|
-
);
|
|
621
|
-
};
|
|
622
|
-
|
|
623
|
-
export const SelectAll: StoryObj<StorySelectProps> = {
|
|
624
|
-
render: (args) => <SelectAllStory {...args} />,
|
|
625
|
-
argTypes: {
|
|
626
|
-
selectAllSticky: {
|
|
627
|
-
control: 'boolean',
|
|
628
|
-
},
|
|
629
|
-
selectAllLabel: {
|
|
630
|
-
control: 'text',
|
|
631
|
-
},
|
|
632
|
-
},
|
|
633
|
-
args: {
|
|
634
|
-
selectAllSticky: false,
|
|
635
|
-
selectAllLabel: 'Выбрать все',
|
|
636
|
-
},
|
|
637
|
-
parameters: {
|
|
638
|
-
controls: {
|
|
639
|
-
include: ['selectAllSticky', 'selectAllLabel'],
|
|
640
|
-
},
|
|
641
|
-
},
|
|
642
|
-
};
|