@salutejs/plasma-new-hope 0.150.0-canary.1443.10955942474.0 → 0.150.0-canary.1446.10958757493.0
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/components/Combobox/ComboboxOld/Combobox.css +6 -5
- package/cjs/components/Combobox/ComboboxOld/ui/ComboboxDivider/ComboboxDivider.css +6 -5
- package/cjs/components/Combobox/ComboboxOld/ui/ComboboxFooter/ComboboxFooter.css +6 -5
- package/cjs/components/Combobox/ComboboxOld/ui/ComboboxGroup/ComboboxGroup.css +6 -5
- package/cjs/components/Combobox/ComboboxOld/ui/ComboboxHeader/ComboboxHeader.css +6 -5
- package/cjs/components/Dropdown/Dropdown.css +6 -5
- package/cjs/components/Dropdown/Dropdown.tokens.js +7 -5
- package/cjs/components/Dropdown/Dropdown.tokens.js.map +1 -1
- package/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.css +6 -5
- package/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.js +9 -3
- package/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.js.map +1 -1
- package/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.styles.js +27 -5
- package/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.styles.js.map +1 -1
- package/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.styles_blclup.css +6 -0
- package/cjs/index.css +6 -5
- package/emotion/cjs/components/Dropdown/Dropdown.template-doc.mdx +8 -0
- package/emotion/cjs/components/Dropdown/Dropdown.tokens.js +7 -5
- package/emotion/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.js +9 -3
- package/emotion/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.styles.js +24 -14
- package/emotion/cjs/examples/plasma_b2c/components/Dropdown/Dropdown.config.js +5 -5
- package/emotion/cjs/examples/plasma_b2c/components/Dropdown/Dropdown.stories.tsx +2 -0
- package/emotion/cjs/examples/plasma_web/components/Dropdown/Dropdown.config.js +5 -5
- package/emotion/cjs/examples/plasma_web/components/Dropdown/Dropdown.stories.tsx +2 -0
- package/emotion/es/components/Dropdown/Dropdown.template-doc.mdx +8 -0
- package/emotion/es/components/Dropdown/Dropdown.tokens.js +7 -5
- package/emotion/es/components/Dropdown/ui/DropdownItem/DropdownItem.js +10 -4
- package/emotion/es/components/Dropdown/ui/DropdownItem/DropdownItem.styles.js +23 -13
- package/emotion/es/examples/plasma_b2c/components/Dropdown/Dropdown.config.js +5 -5
- package/emotion/es/examples/plasma_b2c/components/Dropdown/Dropdown.stories.tsx +2 -0
- package/emotion/es/examples/plasma_web/components/Dropdown/Dropdown.config.js +5 -5
- package/emotion/es/examples/plasma_web/components/Dropdown/Dropdown.stories.tsx +2 -0
- package/es/components/Combobox/ComboboxOld/Combobox.css +6 -5
- package/es/components/Combobox/ComboboxOld/ui/ComboboxDivider/ComboboxDivider.css +6 -5
- package/es/components/Combobox/ComboboxOld/ui/ComboboxFooter/ComboboxFooter.css +6 -5
- package/es/components/Combobox/ComboboxOld/ui/ComboboxGroup/ComboboxGroup.css +6 -5
- package/es/components/Combobox/ComboboxOld/ui/ComboboxHeader/ComboboxHeader.css +6 -5
- package/es/components/Dropdown/Dropdown.css +6 -5
- package/es/components/Dropdown/Dropdown.tokens.js +7 -5
- package/es/components/Dropdown/Dropdown.tokens.js.map +1 -1
- package/es/components/Dropdown/ui/DropdownItem/DropdownItem.css +6 -5
- package/es/components/Dropdown/ui/DropdownItem/DropdownItem.js +10 -4
- package/es/components/Dropdown/ui/DropdownItem/DropdownItem.js.map +1 -1
- package/es/components/Dropdown/ui/DropdownItem/DropdownItem.styles.js +27 -6
- package/es/components/Dropdown/ui/DropdownItem/DropdownItem.styles.js.map +1 -1
- package/es/components/Dropdown/ui/DropdownItem/DropdownItem.styles_blclup.css +6 -0
- package/es/index.css +6 -5
- package/package.json +2 -2
- package/styled-components/cjs/components/Dropdown/Dropdown.template-doc.mdx +8 -0
- package/styled-components/cjs/components/Dropdown/Dropdown.tokens.js +7 -5
- package/styled-components/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.js +9 -3
- package/styled-components/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.styles.js +14 -5
- package/styled-components/cjs/examples/plasma_b2c/components/Dropdown/Dropdown.config.js +5 -5
- package/styled-components/cjs/examples/plasma_b2c/components/Dropdown/Dropdown.stories.tsx +2 -0
- package/styled-components/cjs/examples/plasma_web/components/Dropdown/Dropdown.config.js +5 -5
- package/styled-components/cjs/examples/plasma_web/components/Dropdown/Dropdown.stories.tsx +2 -0
- package/styled-components/es/components/Dropdown/Dropdown.template-doc.mdx +8 -0
- package/styled-components/es/components/Dropdown/Dropdown.tokens.js +7 -5
- package/styled-components/es/components/Dropdown/ui/DropdownItem/DropdownItem.js +10 -4
- package/styled-components/es/components/Dropdown/ui/DropdownItem/DropdownItem.styles.js +13 -4
- package/styled-components/es/examples/plasma_b2c/components/Dropdown/Dropdown.config.js +5 -5
- package/styled-components/es/examples/plasma_b2c/components/Dropdown/Dropdown.stories.tsx +2 -0
- package/styled-components/es/examples/plasma_web/components/Dropdown/Dropdown.config.js +5 -5
- package/styled-components/es/examples/plasma_web/components/Dropdown/Dropdown.stories.tsx +2 -0
- package/types/components/Dropdown/Dropdown.tokens.d.ts +7 -5
- package/types/components/Dropdown/Dropdown.tokens.d.ts.map +1 -1
- package/types/components/Dropdown/ui/DropdownItem/DropdownItem.d.ts.map +1 -1
- package/types/components/Dropdown/ui/DropdownItem/DropdownItem.styles.d.ts +3 -0
- package/types/components/Dropdown/ui/DropdownItem/DropdownItem.styles.d.ts.map +1 -1
- package/types/components/Dropdown/ui/DropdownItem/DropdownItem.type.d.ts +8 -0
- package/types/components/Dropdown/ui/DropdownItem/DropdownItem.type.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Dropdown/Dropdown.config.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Dropdown/Dropdown.config.d.ts.map +1 -1
- package/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.styles_1o4szyu.css +0 -5
- package/emotion/cjs/components/Steps/Steps.template-doc.mdx +0 -82
- package/emotion/es/components/Steps/Steps.template-doc.mdx +0 -82
- package/es/components/Dropdown/ui/DropdownItem/DropdownItem.styles_1o4szyu.css +0 -5
- package/styled-components/cjs/components/Steps/Steps.template-doc.mdx +0 -82
- package/styled-components/es/components/Steps/Steps.template-doc.mdx +0 -82
@@ -37,7 +37,9 @@ var DropdownItem = exports.DropdownItem = function DropdownItem(_ref) {
|
|
37
37
|
disabled = item.disabled,
|
38
38
|
isDisabled = item.isDisabled,
|
39
39
|
contentLeft = item.contentLeft,
|
40
|
-
contentRight = item.contentRight
|
40
|
+
contentRight = item.contentRight,
|
41
|
+
dividerBefore = item.dividerBefore,
|
42
|
+
dividerAfter = item.dividerAfter;
|
41
43
|
var ref = (0, _react.useRef)(null);
|
42
44
|
var disclosureIconSize = size === 'xs' ? 'xs' : 's';
|
43
45
|
var isDisabledClassName = disabled || isDisabled ? _Dropdown.classes.dropdownItemIsDisabled : undefined;
|
@@ -71,7 +73,9 @@ var DropdownItem = exports.DropdownItem = function DropdownItem(_ref) {
|
|
71
73
|
onHover(index);
|
72
74
|
}
|
73
75
|
};
|
74
|
-
return /*#__PURE__*/_react["default"].createElement(_DropdownItem.
|
76
|
+
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, dividerBefore && /*#__PURE__*/_react["default"].createElement(_DropdownItem.Divider, {
|
77
|
+
variant: variant
|
78
|
+
}), /*#__PURE__*/_react["default"].createElement(_DropdownItem.Wrapper, {
|
75
79
|
className: (0, _utils.cx)(isDisabledClassName, focusedClass, activeClass),
|
76
80
|
id: value.toString(),
|
77
81
|
role: itemRole,
|
@@ -88,5 +92,7 @@ var DropdownItem = exports.DropdownItem = function DropdownItem(_ref) {
|
|
88
92
|
}, contentLeft && /*#__PURE__*/_react["default"].createElement(_DropdownItem.StyledContentLeft, null, contentLeft), /*#__PURE__*/_react["default"].createElement(_DropdownItem.StyledText, null, label), contentRight && /*#__PURE__*/_react["default"].createElement(_DropdownItem.StyledContentRight, null, contentRight), item.items && hasArrow && /*#__PURE__*/_react["default"].createElement(_DropdownItem.DisclosureIconWrapper, null, /*#__PURE__*/_react["default"].createElement(_Icon.IconDisclosureRight, {
|
89
93
|
size: disclosureIconSize,
|
90
94
|
color: "inherit"
|
91
|
-
})))
|
95
|
+
}))), dividerAfter && /*#__PURE__*/_react["default"].createElement(_DropdownItem.Divider, {
|
96
|
+
variant: variant
|
97
|
+
}));
|
92
98
|
};
|
@@ -3,7 +3,7 @@
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
4
4
|
value: true
|
5
5
|
});
|
6
|
-
exports.Wrapper = exports.StyledText = exports.StyledContentRight = exports.StyledContentLeft = exports.DisclosureIconWrapper = void 0;
|
6
|
+
exports.Wrapper = exports.StyledText = exports.StyledContentRight = exports.StyledContentLeft = exports.Divider = exports.DisclosureIconWrapper = void 0;
|
7
7
|
var _styledComponents = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("styled-components"));
|
8
8
|
var _Dropdown = /*#__PURE__*/require("../../Dropdown.tokens");
|
9
9
|
var _mixins = /*#__PURE__*/require("../../../../mixins");
|
@@ -20,13 +20,22 @@ var DisclosureIconWrapper = exports.DisclosureIconWrapper = /*#__PURE__*/_styled
|
|
20
20
|
var StyledText = exports.StyledText = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
21
21
|
componentId: "plasma-new-hope__sc-hs0ek1-3"
|
22
22
|
})(["", ";flex:1;"], /*#__PURE__*/(0, _mixins.applyEllipsis)());
|
23
|
-
var
|
23
|
+
var Divider = exports.Divider = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
24
24
|
componentId: "plasma-new-hope__sc-hs0ek1-4"
|
25
|
-
})(["
|
25
|
+
})(["height:1px;margin-top:", ";margin-right:var(", ");margin-bottom:", ";margin-left:var(", ");background:var(", ");"], function (_ref) {
|
26
26
|
var variant = _ref.variant;
|
27
|
-
return "var(".concat(variant === 'tight' ? _Dropdown.tokens.
|
28
|
-
}, _Dropdown.tokens.
|
27
|
+
return "var(".concat(variant === 'tight' ? _Dropdown.tokens.dividerMarginTopTight : _Dropdown.tokens.dividerMarginTop, ")");
|
28
|
+
}, _Dropdown.tokens.dividerMarginRight, function (_ref2) {
|
29
29
|
var variant = _ref2.variant;
|
30
|
+
return "var(".concat(variant === 'tight' ? _Dropdown.tokens.dividerMarginBottomTight : _Dropdown.tokens.dividerMarginBottom, ")");
|
31
|
+
}, _Dropdown.tokens.dividerMarginLeft, _Dropdown.tokens.dividerColor);
|
32
|
+
var Wrapper = exports.Wrapper = /*#__PURE__*/_styledComponents["default"].li.withConfig({
|
33
|
+
componentId: "plasma-new-hope__sc-hs0ek1-5"
|
34
|
+
})(["display:flex;align-items:center;margin:0;box-sizing:content-box;padding-top:", ";padding-right:var(", ");padding-bottom:", ";padding-left:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");background:var(", ");color:var(", ");border-radius:var(", ");user-select:none;&:hover:not(.", "){cursor:pointer;background:var(", ");}&.", "{background:var(", ");}&.", "{opacity:var(", ");cursor:not-allowed;}:focus{outline:none;}", ";"], function (_ref3) {
|
35
|
+
var variant = _ref3.variant;
|
36
|
+
return "var(".concat(variant === 'tight' ? _Dropdown.tokens.itemPaddingTopTight : _Dropdown.tokens.itemPaddingTop, ")");
|
37
|
+
}, _Dropdown.tokens.itemPaddingRight, function (_ref4) {
|
38
|
+
var variant = _ref4.variant;
|
30
39
|
return "var(".concat(variant === 'tight' ? _Dropdown.tokens.itemPaddingBottomTight : _Dropdown.tokens.itemPaddingBottom, ")");
|
31
40
|
}, _Dropdown.tokens.itemPaddingLeft, _Dropdown.tokens.itemFontFamily, _Dropdown.tokens.itemFontSize, _Dropdown.tokens.itemFontStyle, _Dropdown.tokens.itemFontWeightBold, _Dropdown.tokens.itemFontLetterSpacing, _Dropdown.tokens.itemFontLineHeight, _Dropdown.tokens.itemBackground, _Dropdown.tokens.itemColor, _Dropdown.tokens.itemBorderRadius, _Dropdown.classes.dropdownItemIsDisabled, _Dropdown.tokens.itemBackgroundHover, _Dropdown.classes.dropdownItemIsActive, _Dropdown.tokens.itemBackgroundHover, _Dropdown.classes.dropdownItemIsDisabled, _Dropdown.tokens.disabledOpacity, /*#__PURE__*/(0, _mixins.addFocus)({
|
32
41
|
outlineSize: '0.0625rem',
|
@@ -13,13 +13,13 @@ var config = exports.config = {
|
|
13
13
|
},
|
14
14
|
variations: {
|
15
15
|
size: {
|
16
|
-
xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.125rem;", ":10rem;", ":0.5rem;", ":0.5625rem;", ":0.5rem;", ":0.5625rem;", ":0.5rem;", ":0.375rem;", ":0.3125rem;", ":0.3125rem;", ":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);"], _Dropdown.dropdownTokens.padding, _Dropdown.dropdownTokens.width, _Dropdown.dropdownTokens.borderRadius, _Dropdown.dropdownTokens.itemPaddingTop, _Dropdown.dropdownTokens.itemPaddingRight, _Dropdown.dropdownTokens.itemPaddingBottom, _Dropdown.dropdownTokens.itemPaddingLeft, _Dropdown.dropdownTokens.itemBorderRadius, _Dropdown.dropdownTokens.itemPaddingTopTight, _Dropdown.dropdownTokens.itemPaddingBottomTight, _Dropdown.dropdownTokens.itemFontFamily, _Dropdown.dropdownTokens.itemFontSize, _Dropdown.dropdownTokens.itemFontStyle, _Dropdown.dropdownTokens.itemFontWeightBold, _Dropdown.dropdownTokens.itemFontLetterSpacing, _Dropdown.dropdownTokens.itemFontLineHeight),
|
17
|
-
s: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.125rem;", ":12.5rem;", ":0.625rem;", ":0.6875rem;", ":0.75rem;", ":0.6875rem;", ":0.75rem;", ":0.5rem;", ":0.4375rem;", ":0.4375rem;", ":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);"], _Dropdown.dropdownTokens.padding, _Dropdown.dropdownTokens.width, _Dropdown.dropdownTokens.borderRadius, _Dropdown.dropdownTokens.itemPaddingTop, _Dropdown.dropdownTokens.itemPaddingRight, _Dropdown.dropdownTokens.itemPaddingBottom, _Dropdown.dropdownTokens.itemPaddingLeft, _Dropdown.dropdownTokens.itemBorderRadius, _Dropdown.dropdownTokens.itemPaddingTopTight, _Dropdown.dropdownTokens.itemPaddingBottomTight, _Dropdown.dropdownTokens.itemFontFamily, _Dropdown.dropdownTokens.itemFontSize, _Dropdown.dropdownTokens.itemFontStyle, _Dropdown.dropdownTokens.itemFontWeightBold, _Dropdown.dropdownTokens.itemFontLetterSpacing, _Dropdown.dropdownTokens.itemFontLineHeight),
|
18
|
-
m: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.125rem;", ":15rem;", ":0.75rem;", ":0.875rem;", ":0.875rem;", ":0.875rem;", ":0.875rem;", ":0.625rem;", ":0.625rem;", ":0.625rem;", ":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);"], _Dropdown.dropdownTokens.padding, _Dropdown.dropdownTokens.width, _Dropdown.dropdownTokens.borderRadius, _Dropdown.dropdownTokens.itemPaddingTop, _Dropdown.dropdownTokens.itemPaddingRight, _Dropdown.dropdownTokens.itemPaddingBottom, _Dropdown.dropdownTokens.itemPaddingLeft, _Dropdown.dropdownTokens.itemBorderRadius, _Dropdown.dropdownTokens.itemPaddingTopTight, _Dropdown.dropdownTokens.itemPaddingBottomTight, _Dropdown.dropdownTokens.itemFontFamily, _Dropdown.dropdownTokens.itemFontSize, _Dropdown.dropdownTokens.itemFontStyle, _Dropdown.dropdownTokens.itemFontWeightBold, _Dropdown.dropdownTokens.itemFontLetterSpacing, _Dropdown.dropdownTokens.itemFontLineHeight),
|
19
|
-
l: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.125rem;", ":17.5rem;", ":0.875rem;", ":1.0625rem;", ":1rem;", ":1.0625rem;", ":1rem;", ":0.75rem;", ":0.8125rem;", ":0.8125rem;", ":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);"], _Dropdown.dropdownTokens.padding, _Dropdown.dropdownTokens.width, _Dropdown.dropdownTokens.borderRadius, _Dropdown.dropdownTokens.itemPaddingTop, _Dropdown.dropdownTokens.itemPaddingRight, _Dropdown.dropdownTokens.itemPaddingBottom, _Dropdown.dropdownTokens.itemPaddingLeft, _Dropdown.dropdownTokens.itemBorderRadius, _Dropdown.dropdownTokens.itemPaddingTopTight, _Dropdown.dropdownTokens.itemPaddingBottomTight, _Dropdown.dropdownTokens.itemFontFamily, _Dropdown.dropdownTokens.itemFontSize, _Dropdown.dropdownTokens.itemFontStyle, _Dropdown.dropdownTokens.itemFontWeightBold, _Dropdown.dropdownTokens.itemFontLetterSpacing, _Dropdown.dropdownTokens.itemFontLineHeight)
|
16
|
+
xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.125rem;", ":10rem;", ":0.5rem;", ":0.5625rem;", ":0.5rem;", ":0.5625rem;", ":0.5rem;", ":0.375rem;", ":0.3125rem;", ":0.3125rem;", ":0.25rem;", ":0.5rem;", ":0.25rem;", ":0.5rem;", ":0.125rem;", ":0.125rem;", ":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);"], _Dropdown.dropdownTokens.padding, _Dropdown.dropdownTokens.width, _Dropdown.dropdownTokens.borderRadius, _Dropdown.dropdownTokens.itemPaddingTop, _Dropdown.dropdownTokens.itemPaddingRight, _Dropdown.dropdownTokens.itemPaddingBottom, _Dropdown.dropdownTokens.itemPaddingLeft, _Dropdown.dropdownTokens.itemBorderRadius, _Dropdown.dropdownTokens.itemPaddingTopTight, _Dropdown.dropdownTokens.itemPaddingBottomTight, _Dropdown.dropdownTokens.dividerMarginTop, _Dropdown.dropdownTokens.dividerMarginRight, _Dropdown.dropdownTokens.dividerMarginBottom, _Dropdown.dropdownTokens.dividerMarginLeft, _Dropdown.dropdownTokens.dividerMarginTopTight, _Dropdown.dropdownTokens.dividerMarginBottomTight, _Dropdown.dropdownTokens.itemFontFamily, _Dropdown.dropdownTokens.itemFontSize, _Dropdown.dropdownTokens.itemFontStyle, _Dropdown.dropdownTokens.itemFontWeightBold, _Dropdown.dropdownTokens.itemFontLetterSpacing, _Dropdown.dropdownTokens.itemFontLineHeight),
|
17
|
+
s: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.125rem;", ":12.5rem;", ":0.625rem;", ":0.6875rem;", ":0.75rem;", ":0.6875rem;", ":0.75rem;", ":0.5rem;", ":0.4375rem;", ":0.4375rem;", ":0.375rem;", ":0.75rem;", ":0.375rem;", ":0.75rem;", ":0.25rem;", ":0.25rem;", ":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);"], _Dropdown.dropdownTokens.padding, _Dropdown.dropdownTokens.width, _Dropdown.dropdownTokens.borderRadius, _Dropdown.dropdownTokens.itemPaddingTop, _Dropdown.dropdownTokens.itemPaddingRight, _Dropdown.dropdownTokens.itemPaddingBottom, _Dropdown.dropdownTokens.itemPaddingLeft, _Dropdown.dropdownTokens.itemBorderRadius, _Dropdown.dropdownTokens.itemPaddingTopTight, _Dropdown.dropdownTokens.itemPaddingBottomTight, _Dropdown.dropdownTokens.dividerMarginTop, _Dropdown.dropdownTokens.dividerMarginRight, _Dropdown.dropdownTokens.dividerMarginBottom, _Dropdown.dropdownTokens.dividerMarginLeft, _Dropdown.dropdownTokens.dividerMarginTopTight, _Dropdown.dropdownTokens.dividerMarginBottomTight, _Dropdown.dropdownTokens.itemFontFamily, _Dropdown.dropdownTokens.itemFontSize, _Dropdown.dropdownTokens.itemFontStyle, _Dropdown.dropdownTokens.itemFontWeightBold, _Dropdown.dropdownTokens.itemFontLetterSpacing, _Dropdown.dropdownTokens.itemFontLineHeight),
|
18
|
+
m: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.125rem;", ":15rem;", ":0.75rem;", ":0.875rem;", ":0.875rem;", ":0.875rem;", ":0.875rem;", ":0.625rem;", ":0.625rem;", ":0.625rem;", ":0.375rem;", ":0.875rem;", ":0.375rem;", ":0.875rem;", ":0.375rem;", ":0.375rem;", ":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);"], _Dropdown.dropdownTokens.padding, _Dropdown.dropdownTokens.width, _Dropdown.dropdownTokens.borderRadius, _Dropdown.dropdownTokens.itemPaddingTop, _Dropdown.dropdownTokens.itemPaddingRight, _Dropdown.dropdownTokens.itemPaddingBottom, _Dropdown.dropdownTokens.itemPaddingLeft, _Dropdown.dropdownTokens.itemBorderRadius, _Dropdown.dropdownTokens.itemPaddingTopTight, _Dropdown.dropdownTokens.itemPaddingBottomTight, _Dropdown.dropdownTokens.dividerMarginTop, _Dropdown.dropdownTokens.dividerMarginRight, _Dropdown.dropdownTokens.dividerMarginBottom, _Dropdown.dropdownTokens.dividerMarginLeft, _Dropdown.dropdownTokens.dividerMarginTopTight, _Dropdown.dropdownTokens.dividerMarginBottomTight, _Dropdown.dropdownTokens.itemFontFamily, _Dropdown.dropdownTokens.itemFontSize, _Dropdown.dropdownTokens.itemFontStyle, _Dropdown.dropdownTokens.itemFontWeightBold, _Dropdown.dropdownTokens.itemFontLetterSpacing, _Dropdown.dropdownTokens.itemFontLineHeight),
|
19
|
+
l: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.125rem;", ":17.5rem;", ":0.875rem;", ":1.0625rem;", ":1rem;", ":1.0625rem;", ":1rem;", ":0.75rem;", ":0.8125rem;", ":0.8125rem;", ":0.5rem;", ":1.125rem;", ":0.5rem;", ":1.125rem;", ":0.375rem;", ":0.375rem;", ":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);"], _Dropdown.dropdownTokens.padding, _Dropdown.dropdownTokens.width, _Dropdown.dropdownTokens.borderRadius, _Dropdown.dropdownTokens.itemPaddingTop, _Dropdown.dropdownTokens.itemPaddingRight, _Dropdown.dropdownTokens.itemPaddingBottom, _Dropdown.dropdownTokens.itemPaddingLeft, _Dropdown.dropdownTokens.itemBorderRadius, _Dropdown.dropdownTokens.itemPaddingTopTight, _Dropdown.dropdownTokens.itemPaddingBottomTight, _Dropdown.dropdownTokens.dividerMarginTop, _Dropdown.dropdownTokens.dividerMarginRight, _Dropdown.dropdownTokens.dividerMarginBottom, _Dropdown.dropdownTokens.dividerMarginLeft, _Dropdown.dropdownTokens.dividerMarginTopTight, _Dropdown.dropdownTokens.dividerMarginBottomTight, _Dropdown.dropdownTokens.itemFontFamily, _Dropdown.dropdownTokens.itemFontSize, _Dropdown.dropdownTokens.itemFontStyle, _Dropdown.dropdownTokens.itemFontWeightBold, _Dropdown.dropdownTokens.itemFontLetterSpacing, _Dropdown.dropdownTokens.itemFontLineHeight)
|
20
20
|
},
|
21
21
|
view: {
|
22
|
-
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;", ":var(--surface-accent);", ":var(--surface-solid-card-brightness);", ":0px 4px 14px -4px rgba(8,8,8,0.08),0px 1px 4px -1px rgba(0,0,0,0.04);", ":var(--text-secondary);", ":var(--surface-clear);", ":var(--surface-transparent-secondary);", ":var(--text-primary);"], _Dropdown.dropdownTokens.disabledOpacity, _Dropdown.dropdownTokens.focusColor, _Dropdown.dropdownTokens.background, _Dropdown.dropdownTokens.boxShadow, _Dropdown.dropdownTokens.disclosureIconColor, _Dropdown.dropdownTokens.itemBackground, _Dropdown.dropdownTokens.itemBackgroundHover, _Dropdown.dropdownTokens.itemColor)
|
22
|
+
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;", ":var(--surface-accent);", ":var(--surface-solid-card-brightness);", ":0px 4px 14px -4px rgba(8,8,8,0.08),0px 1px 4px -1px rgba(0,0,0,0.04);", ":var(--text-secondary);", ":var(--surface-clear);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-tertiary);"], _Dropdown.dropdownTokens.disabledOpacity, _Dropdown.dropdownTokens.focusColor, _Dropdown.dropdownTokens.background, _Dropdown.dropdownTokens.boxShadow, _Dropdown.dropdownTokens.disclosureIconColor, _Dropdown.dropdownTokens.itemBackground, _Dropdown.dropdownTokens.itemBackgroundHover, _Dropdown.dropdownTokens.itemColor, _Dropdown.dropdownTokens.dividerColor)
|
23
23
|
}
|
24
24
|
}
|
25
25
|
};
|
@@ -13,13 +13,13 @@ var config = exports.config = {
|
|
13
13
|
},
|
14
14
|
variations: {
|
15
15
|
size: {
|
16
|
-
xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.125rem;", ":10rem;", ":0.5rem;", ":0.5625rem;", ":0.5rem;", ":0.5625rem;", ":0.5rem;", ":0.375rem;", ":0.3125rem;", ":0.3125rem;", ":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);"], _Dropdown.dropdownTokens.padding, _Dropdown.dropdownTokens.width, _Dropdown.dropdownTokens.borderRadius, _Dropdown.dropdownTokens.itemPaddingTop, _Dropdown.dropdownTokens.itemPaddingRight, _Dropdown.dropdownTokens.itemPaddingBottom, _Dropdown.dropdownTokens.itemPaddingLeft, _Dropdown.dropdownTokens.itemBorderRadius, _Dropdown.dropdownTokens.itemPaddingTopTight, _Dropdown.dropdownTokens.itemPaddingBottomTight, _Dropdown.dropdownTokens.itemFontFamily, _Dropdown.dropdownTokens.itemFontSize, _Dropdown.dropdownTokens.itemFontStyle, _Dropdown.dropdownTokens.itemFontWeightBold, _Dropdown.dropdownTokens.itemFontLetterSpacing, _Dropdown.dropdownTokens.itemFontLineHeight),
|
17
|
-
s: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.125rem;", ":12.5rem;", ":0.625rem;", ":0.6875rem;", ":0.75rem;", ":0.6875rem;", ":0.75rem;", ":0.5rem;", ":0.4375rem;", ":0.4375rem;", ":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);"], _Dropdown.dropdownTokens.padding, _Dropdown.dropdownTokens.width, _Dropdown.dropdownTokens.borderRadius, _Dropdown.dropdownTokens.itemPaddingTop, _Dropdown.dropdownTokens.itemPaddingRight, _Dropdown.dropdownTokens.itemPaddingBottom, _Dropdown.dropdownTokens.itemPaddingLeft, _Dropdown.dropdownTokens.itemBorderRadius, _Dropdown.dropdownTokens.itemPaddingTopTight, _Dropdown.dropdownTokens.itemPaddingBottomTight, _Dropdown.dropdownTokens.itemFontFamily, _Dropdown.dropdownTokens.itemFontSize, _Dropdown.dropdownTokens.itemFontStyle, _Dropdown.dropdownTokens.itemFontWeightBold, _Dropdown.dropdownTokens.itemFontLetterSpacing, _Dropdown.dropdownTokens.itemFontLineHeight),
|
18
|
-
m: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.125rem;", ":15rem;", ":0.75rem;", ":0.875rem;", ":0.875rem;", ":0.875rem;", ":0.875rem;", ":0.625rem;", ":0.625rem;", ":0.625rem;", ":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);"], _Dropdown.dropdownTokens.padding, _Dropdown.dropdownTokens.width, _Dropdown.dropdownTokens.borderRadius, _Dropdown.dropdownTokens.itemPaddingTop, _Dropdown.dropdownTokens.itemPaddingRight, _Dropdown.dropdownTokens.itemPaddingBottom, _Dropdown.dropdownTokens.itemPaddingLeft, _Dropdown.dropdownTokens.itemBorderRadius, _Dropdown.dropdownTokens.itemPaddingTopTight, _Dropdown.dropdownTokens.itemPaddingBottomTight, _Dropdown.dropdownTokens.itemFontFamily, _Dropdown.dropdownTokens.itemFontSize, _Dropdown.dropdownTokens.itemFontStyle, _Dropdown.dropdownTokens.itemFontWeightBold, _Dropdown.dropdownTokens.itemFontLetterSpacing, _Dropdown.dropdownTokens.itemFontLineHeight),
|
19
|
-
l: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.125rem;", ":17.5rem;", ":0.875rem;", ":1.0625rem;", ":1rem;", ":1.0625rem;", ":1rem;", ":0.75rem;", ":0.8125rem;", ":0.8125rem;", ":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);"], _Dropdown.dropdownTokens.padding, _Dropdown.dropdownTokens.width, _Dropdown.dropdownTokens.borderRadius, _Dropdown.dropdownTokens.itemPaddingTop, _Dropdown.dropdownTokens.itemPaddingRight, _Dropdown.dropdownTokens.itemPaddingBottom, _Dropdown.dropdownTokens.itemPaddingLeft, _Dropdown.dropdownTokens.itemBorderRadius, _Dropdown.dropdownTokens.itemPaddingTopTight, _Dropdown.dropdownTokens.itemPaddingBottomTight, _Dropdown.dropdownTokens.itemFontFamily, _Dropdown.dropdownTokens.itemFontSize, _Dropdown.dropdownTokens.itemFontStyle, _Dropdown.dropdownTokens.itemFontWeightBold, _Dropdown.dropdownTokens.itemFontLetterSpacing, _Dropdown.dropdownTokens.itemFontLineHeight)
|
16
|
+
xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.125rem;", ":10rem;", ":0.5rem;", ":0.5625rem;", ":0.5rem;", ":0.5625rem;", ":0.5rem;", ":0.375rem;", ":0.3125rem;", ":0.3125rem;", ":0.25rem;", ":0.5rem;", ":0.25rem;", ":0.5rem;", ":0.125rem;", ":0.125rem;", ":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);"], _Dropdown.dropdownTokens.padding, _Dropdown.dropdownTokens.width, _Dropdown.dropdownTokens.borderRadius, _Dropdown.dropdownTokens.itemPaddingTop, _Dropdown.dropdownTokens.itemPaddingRight, _Dropdown.dropdownTokens.itemPaddingBottom, _Dropdown.dropdownTokens.itemPaddingLeft, _Dropdown.dropdownTokens.itemBorderRadius, _Dropdown.dropdownTokens.itemPaddingTopTight, _Dropdown.dropdownTokens.itemPaddingBottomTight, _Dropdown.dropdownTokens.dividerMarginTop, _Dropdown.dropdownTokens.dividerMarginRight, _Dropdown.dropdownTokens.dividerMarginBottom, _Dropdown.dropdownTokens.dividerMarginLeft, _Dropdown.dropdownTokens.dividerMarginTopTight, _Dropdown.dropdownTokens.dividerMarginBottomTight, _Dropdown.dropdownTokens.itemFontFamily, _Dropdown.dropdownTokens.itemFontSize, _Dropdown.dropdownTokens.itemFontStyle, _Dropdown.dropdownTokens.itemFontWeightBold, _Dropdown.dropdownTokens.itemFontLetterSpacing, _Dropdown.dropdownTokens.itemFontLineHeight),
|
17
|
+
s: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.125rem;", ":12.5rem;", ":0.625rem;", ":0.6875rem;", ":0.75rem;", ":0.6875rem;", ":0.75rem;", ":0.5rem;", ":0.4375rem;", ":0.4375rem;", ":0.375rem;", ":0.75rem;", ":0.375rem;", ":0.75rem;", ":0.25rem;", ":0.25rem;", ":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);"], _Dropdown.dropdownTokens.padding, _Dropdown.dropdownTokens.width, _Dropdown.dropdownTokens.borderRadius, _Dropdown.dropdownTokens.itemPaddingTop, _Dropdown.dropdownTokens.itemPaddingRight, _Dropdown.dropdownTokens.itemPaddingBottom, _Dropdown.dropdownTokens.itemPaddingLeft, _Dropdown.dropdownTokens.itemBorderRadius, _Dropdown.dropdownTokens.itemPaddingTopTight, _Dropdown.dropdownTokens.itemPaddingBottomTight, _Dropdown.dropdownTokens.dividerMarginTop, _Dropdown.dropdownTokens.dividerMarginRight, _Dropdown.dropdownTokens.dividerMarginBottom, _Dropdown.dropdownTokens.dividerMarginLeft, _Dropdown.dropdownTokens.dividerMarginTopTight, _Dropdown.dropdownTokens.dividerMarginBottomTight, _Dropdown.dropdownTokens.itemFontFamily, _Dropdown.dropdownTokens.itemFontSize, _Dropdown.dropdownTokens.itemFontStyle, _Dropdown.dropdownTokens.itemFontWeightBold, _Dropdown.dropdownTokens.itemFontLetterSpacing, _Dropdown.dropdownTokens.itemFontLineHeight),
|
18
|
+
m: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.125rem;", ":15rem;", ":0.75rem;", ":0.875rem;", ":0.875rem;", ":0.875rem;", ":0.875rem;", ":0.625rem;", ":0.625rem;", ":0.625rem;", ":0.375rem;", ":0.875rem;", ":0.375rem;", ":0.875rem;", ":0.375rem;", ":0.375rem;", ":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);"], _Dropdown.dropdownTokens.padding, _Dropdown.dropdownTokens.width, _Dropdown.dropdownTokens.borderRadius, _Dropdown.dropdownTokens.itemPaddingTop, _Dropdown.dropdownTokens.itemPaddingRight, _Dropdown.dropdownTokens.itemPaddingBottom, _Dropdown.dropdownTokens.itemPaddingLeft, _Dropdown.dropdownTokens.itemBorderRadius, _Dropdown.dropdownTokens.itemPaddingTopTight, _Dropdown.dropdownTokens.itemPaddingBottomTight, _Dropdown.dropdownTokens.dividerMarginTop, _Dropdown.dropdownTokens.dividerMarginRight, _Dropdown.dropdownTokens.dividerMarginBottom, _Dropdown.dropdownTokens.dividerMarginLeft, _Dropdown.dropdownTokens.dividerMarginTopTight, _Dropdown.dropdownTokens.dividerMarginBottomTight, _Dropdown.dropdownTokens.itemFontFamily, _Dropdown.dropdownTokens.itemFontSize, _Dropdown.dropdownTokens.itemFontStyle, _Dropdown.dropdownTokens.itemFontWeightBold, _Dropdown.dropdownTokens.itemFontLetterSpacing, _Dropdown.dropdownTokens.itemFontLineHeight),
|
19
|
+
l: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.125rem;", ":17.5rem;", ":0.875rem;", ":1.0625rem;", ":1rem;", ":1.0625rem;", ":1rem;", ":0.75rem;", ":0.8125rem;", ":0.8125rem;", ":0.5rem;", ":1.125rem;", ":0.5rem;", ":1.125rem;", ":0.375rem;", ":0.375rem;", ":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);"], _Dropdown.dropdownTokens.padding, _Dropdown.dropdownTokens.width, _Dropdown.dropdownTokens.borderRadius, _Dropdown.dropdownTokens.itemPaddingTop, _Dropdown.dropdownTokens.itemPaddingRight, _Dropdown.dropdownTokens.itemPaddingBottom, _Dropdown.dropdownTokens.itemPaddingLeft, _Dropdown.dropdownTokens.itemBorderRadius, _Dropdown.dropdownTokens.itemPaddingTopTight, _Dropdown.dropdownTokens.itemPaddingBottomTight, _Dropdown.dropdownTokens.dividerMarginTop, _Dropdown.dropdownTokens.dividerMarginRight, _Dropdown.dropdownTokens.dividerMarginBottom, _Dropdown.dropdownTokens.dividerMarginLeft, _Dropdown.dropdownTokens.dividerMarginTopTight, _Dropdown.dropdownTokens.dividerMarginBottomTight, _Dropdown.dropdownTokens.itemFontFamily, _Dropdown.dropdownTokens.itemFontSize, _Dropdown.dropdownTokens.itemFontStyle, _Dropdown.dropdownTokens.itemFontWeightBold, _Dropdown.dropdownTokens.itemFontLetterSpacing, _Dropdown.dropdownTokens.itemFontLineHeight)
|
20
20
|
},
|
21
21
|
view: {
|
22
|
-
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;", ":var(--surface-accent);", ":var(--surface-solid-card-brightness);", ":0px 4px 14px -4px rgba(8,8,8,0.08),0px 1px 4px -1px rgba(0,0,0,0.04);", ":var(--text-secondary);", ":var(--surface-clear);", ":var(--surface-transparent-secondary);", ":var(--text-primary);"], _Dropdown.dropdownTokens.disabledOpacity, _Dropdown.dropdownTokens.focusColor, _Dropdown.dropdownTokens.background, _Dropdown.dropdownTokens.boxShadow, _Dropdown.dropdownTokens.disclosureIconColor, _Dropdown.dropdownTokens.itemBackground, _Dropdown.dropdownTokens.itemBackgroundHover, _Dropdown.dropdownTokens.itemColor)
|
22
|
+
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;", ":var(--surface-accent);", ":var(--surface-solid-card-brightness);", ":0px 4px 14px -4px rgba(8,8,8,0.08),0px 1px 4px -1px rgba(0,0,0,0.04);", ":var(--text-secondary);", ":var(--surface-clear);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-tertiary);"], _Dropdown.dropdownTokens.disabledOpacity, _Dropdown.dropdownTokens.focusColor, _Dropdown.dropdownTokens.background, _Dropdown.dropdownTokens.boxShadow, _Dropdown.dropdownTokens.disclosureIconColor, _Dropdown.dropdownTokens.itemBackground, _Dropdown.dropdownTokens.itemBackgroundHover, _Dropdown.dropdownTokens.itemColor, _Dropdown.dropdownTokens.dividerColor)
|
23
23
|
}
|
24
24
|
}
|
25
25
|
};
|
@@ -45,6 +45,14 @@ type Items = Array<{
|
|
45
45
|
* Слот для контента справа
|
46
46
|
*/
|
47
47
|
contentRight?: ReactNode;
|
48
|
+
/**
|
49
|
+
* Отобразить ли разделитель до элемента
|
50
|
+
*/
|
51
|
+
dividerBefore?: boolean;
|
52
|
+
/**
|
53
|
+
* Отобразить ли разделитель после элемента
|
54
|
+
*/
|
55
|
+
dividerAfter?: boolean;
|
48
56
|
/**
|
49
57
|
* Выбранный item.
|
50
58
|
* @deprecated использовать ContentLeft || ContentRight
|
@@ -14,6 +14,13 @@ export var tokens = {
|
|
14
14
|
disclosureIconColor: '--plasma-dropdown-disclosure-icon-color',
|
15
15
|
disabledOpacity: '--plasma-dropdown-disabled-opacity',
|
16
16
|
focusColor: '--plasma-dropdown-focus-color',
|
17
|
+
dividerColor: '--plasma-dropdown-divider-color',
|
18
|
+
dividerMarginTop: '--plasma-dropdown-divider-margin-top',
|
19
|
+
dividerMarginTopTight: '--plasma-dropdown-divider-margin-top-tight',
|
20
|
+
dividerMarginRight: '--plasma-dropdown-divider-margin-right',
|
21
|
+
dividerMarginBottom: '--plasma-dropdown-divider-margin-bottom',
|
22
|
+
dividerMarginBottomTight: '--plasma-dropdown-divider-margin-bottom-tight',
|
23
|
+
dividerMarginLeft: '--plasma-dropdown-divider-margin-left',
|
17
24
|
itemBackground: '--plasma-dropdown-item-background',
|
18
25
|
itemBackgroundHover: '--plasma-dropdown-item-background-hover',
|
19
26
|
itemBackgroundSelected: '--plasma-dropdown-item-background-selected',
|
@@ -93,13 +100,8 @@ export var tokens = {
|
|
93
100
|
headerFontWeightBold: '--plasma-dropdown-header-letter-spacing',
|
94
101
|
headerFontLetterSpacing: '--plasma-dropdown-header-line-height',
|
95
102
|
headerFontLineHeight: '--plasma-dropdown-header-font-weight',
|
96
|
-
dividerColor: '--plasma-dropdown-divider-color',
|
97
103
|
dividerWidth: '--plasma-dropdown-divider-width',
|
98
104
|
dividerHeight: '--plasma-dropdown-divider-height',
|
99
|
-
dividerMarginTop: '--plasma-dropdown-divider-margin-top',
|
100
|
-
dividerMarginRight: '--plasma-dropdown-divider-margin-right',
|
101
|
-
dividerMarginBottom: '--plasma-dropdown-divider-margin-bottom',
|
102
|
-
dividerMarginLeft: '--plasma-dropdown-divider-margin-left',
|
103
105
|
groupBackground: '--plasma-dropdown-group-background',
|
104
106
|
groupWidth: '--plasma-dropdown-group-width',
|
105
107
|
groupHeight: '--plasma-dropdown-group-height',
|
@@ -2,7 +2,7 @@ import React, { useEffect, useRef } from 'react';
|
|
2
2
|
import { classes } from '../../Dropdown.tokens';
|
3
3
|
import { cx } from '../../../../utils';
|
4
4
|
import { IconDisclosureRight } from '../../../_Icon';
|
5
|
-
import { StyledContentLeft, StyledContentRight, StyledText, Wrapper, DisclosureIconWrapper } from './DropdownItem.styles';
|
5
|
+
import { StyledContentLeft, StyledContentRight, StyledText, Wrapper, DisclosureIconWrapper, Divider } from './DropdownItem.styles';
|
6
6
|
export var DropdownItem = function DropdownItem(_ref) {
|
7
7
|
var item = _ref.item,
|
8
8
|
path = _ref.path,
|
@@ -28,7 +28,9 @@ export var DropdownItem = function DropdownItem(_ref) {
|
|
28
28
|
disabled = item.disabled,
|
29
29
|
isDisabled = item.isDisabled,
|
30
30
|
contentLeft = item.contentLeft,
|
31
|
-
contentRight = item.contentRight
|
31
|
+
contentRight = item.contentRight,
|
32
|
+
dividerBefore = item.dividerBefore,
|
33
|
+
dividerAfter = item.dividerAfter;
|
32
34
|
var ref = useRef(null);
|
33
35
|
var disclosureIconSize = size === 'xs' ? 'xs' : 's';
|
34
36
|
var isDisabledClassName = disabled || isDisabled ? classes.dropdownItemIsDisabled : undefined;
|
@@ -62,7 +64,9 @@ export var DropdownItem = function DropdownItem(_ref) {
|
|
62
64
|
onHover(index);
|
63
65
|
}
|
64
66
|
};
|
65
|
-
return /*#__PURE__*/React.createElement(
|
67
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, dividerBefore && /*#__PURE__*/React.createElement(Divider, {
|
68
|
+
variant: variant
|
69
|
+
}), /*#__PURE__*/React.createElement(Wrapper, {
|
66
70
|
className: cx(isDisabledClassName, focusedClass, activeClass),
|
67
71
|
id: value.toString(),
|
68
72
|
role: itemRole,
|
@@ -79,5 +83,7 @@ export var DropdownItem = function DropdownItem(_ref) {
|
|
79
83
|
}, contentLeft && /*#__PURE__*/React.createElement(StyledContentLeft, null, contentLeft), /*#__PURE__*/React.createElement(StyledText, null, label), contentRight && /*#__PURE__*/React.createElement(StyledContentRight, null, contentRight), item.items && hasArrow && /*#__PURE__*/React.createElement(DisclosureIconWrapper, null, /*#__PURE__*/React.createElement(IconDisclosureRight, {
|
80
84
|
size: disclosureIconSize,
|
81
85
|
color: "inherit"
|
82
|
-
})))
|
86
|
+
}))), dividerAfter && /*#__PURE__*/React.createElement(Divider, {
|
87
|
+
variant: variant
|
88
|
+
}));
|
83
89
|
};
|
@@ -13,13 +13,22 @@ export var DisclosureIconWrapper = /*#__PURE__*/styled.div.withConfig({
|
|
13
13
|
export var StyledText = /*#__PURE__*/styled.div.withConfig({
|
14
14
|
componentId: "plasma-new-hope__sc-hs0ek1-3"
|
15
15
|
})(["", ";flex:1;"], /*#__PURE__*/applyEllipsis());
|
16
|
-
export var
|
16
|
+
export var Divider = /*#__PURE__*/styled.div.withConfig({
|
17
17
|
componentId: "plasma-new-hope__sc-hs0ek1-4"
|
18
|
-
})(["
|
18
|
+
})(["height:1px;margin-top:", ";margin-right:var(", ");margin-bottom:", ";margin-left:var(", ");background:var(", ");"], function (_ref) {
|
19
19
|
var variant = _ref.variant;
|
20
|
-
return "var(".concat(variant === 'tight' ? tokens.
|
21
|
-
}, tokens.
|
20
|
+
return "var(".concat(variant === 'tight' ? tokens.dividerMarginTopTight : tokens.dividerMarginTop, ")");
|
21
|
+
}, tokens.dividerMarginRight, function (_ref2) {
|
22
22
|
var variant = _ref2.variant;
|
23
|
+
return "var(".concat(variant === 'tight' ? tokens.dividerMarginBottomTight : tokens.dividerMarginBottom, ")");
|
24
|
+
}, tokens.dividerMarginLeft, tokens.dividerColor);
|
25
|
+
export var Wrapper = /*#__PURE__*/styled.li.withConfig({
|
26
|
+
componentId: "plasma-new-hope__sc-hs0ek1-5"
|
27
|
+
})(["display:flex;align-items:center;margin:0;box-sizing:content-box;padding-top:", ";padding-right:var(", ");padding-bottom:", ";padding-left:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");background:var(", ");color:var(", ");border-radius:var(", ");user-select:none;&:hover:not(.", "){cursor:pointer;background:var(", ");}&.", "{background:var(", ");}&.", "{opacity:var(", ");cursor:not-allowed;}:focus{outline:none;}", ";"], function (_ref3) {
|
28
|
+
var variant = _ref3.variant;
|
29
|
+
return "var(".concat(variant === 'tight' ? tokens.itemPaddingTopTight : tokens.itemPaddingTop, ")");
|
30
|
+
}, tokens.itemPaddingRight, function (_ref4) {
|
31
|
+
var variant = _ref4.variant;
|
23
32
|
return "var(".concat(variant === 'tight' ? tokens.itemPaddingBottomTight : tokens.itemPaddingBottom, ")");
|
24
33
|
}, tokens.itemPaddingLeft, tokens.itemFontFamily, tokens.itemFontSize, tokens.itemFontStyle, tokens.itemFontWeightBold, tokens.itemFontLetterSpacing, tokens.itemFontLineHeight, tokens.itemBackground, tokens.itemColor, tokens.itemBorderRadius, classes.dropdownItemIsDisabled, tokens.itemBackgroundHover, classes.dropdownItemIsActive, tokens.itemBackgroundHover, classes.dropdownItemIsDisabled, tokens.disabledOpacity, /*#__PURE__*/addFocus({
|
25
34
|
outlineSize: '0.0625rem',
|
@@ -7,13 +7,13 @@ export var config = {
|
|
7
7
|
},
|
8
8
|
variations: {
|
9
9
|
size: {
|
10
|
-
xs: /*#__PURE__*/css(["", ":0.125rem;", ":10rem;", ":0.5rem;", ":0.5625rem;", ":0.5rem;", ":0.5625rem;", ":0.5rem;", ":0.375rem;", ":0.3125rem;", ":0.3125rem;", ":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);"], dropdownTokens.padding, dropdownTokens.width, dropdownTokens.borderRadius, dropdownTokens.itemPaddingTop, dropdownTokens.itemPaddingRight, dropdownTokens.itemPaddingBottom, dropdownTokens.itemPaddingLeft, dropdownTokens.itemBorderRadius, dropdownTokens.itemPaddingTopTight, dropdownTokens.itemPaddingBottomTight, dropdownTokens.itemFontFamily, dropdownTokens.itemFontSize, dropdownTokens.itemFontStyle, dropdownTokens.itemFontWeightBold, dropdownTokens.itemFontLetterSpacing, dropdownTokens.itemFontLineHeight),
|
11
|
-
s: /*#__PURE__*/css(["", ":0.125rem;", ":12.5rem;", ":0.625rem;", ":0.6875rem;", ":0.75rem;", ":0.6875rem;", ":0.75rem;", ":0.5rem;", ":0.4375rem;", ":0.4375rem;", ":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);"], dropdownTokens.padding, dropdownTokens.width, dropdownTokens.borderRadius, dropdownTokens.itemPaddingTop, dropdownTokens.itemPaddingRight, dropdownTokens.itemPaddingBottom, dropdownTokens.itemPaddingLeft, dropdownTokens.itemBorderRadius, dropdownTokens.itemPaddingTopTight, dropdownTokens.itemPaddingBottomTight, dropdownTokens.itemFontFamily, dropdownTokens.itemFontSize, dropdownTokens.itemFontStyle, dropdownTokens.itemFontWeightBold, dropdownTokens.itemFontLetterSpacing, dropdownTokens.itemFontLineHeight),
|
12
|
-
m: /*#__PURE__*/css(["", ":0.125rem;", ":15rem;", ":0.75rem;", ":0.875rem;", ":0.875rem;", ":0.875rem;", ":0.875rem;", ":0.625rem;", ":0.625rem;", ":0.625rem;", ":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);"], dropdownTokens.padding, dropdownTokens.width, dropdownTokens.borderRadius, dropdownTokens.itemPaddingTop, dropdownTokens.itemPaddingRight, dropdownTokens.itemPaddingBottom, dropdownTokens.itemPaddingLeft, dropdownTokens.itemBorderRadius, dropdownTokens.itemPaddingTopTight, dropdownTokens.itemPaddingBottomTight, dropdownTokens.itemFontFamily, dropdownTokens.itemFontSize, dropdownTokens.itemFontStyle, dropdownTokens.itemFontWeightBold, dropdownTokens.itemFontLetterSpacing, dropdownTokens.itemFontLineHeight),
|
13
|
-
l: /*#__PURE__*/css(["", ":0.125rem;", ":17.5rem;", ":0.875rem;", ":1.0625rem;", ":1rem;", ":1.0625rem;", ":1rem;", ":0.75rem;", ":0.8125rem;", ":0.8125rem;", ":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);"], dropdownTokens.padding, dropdownTokens.width, dropdownTokens.borderRadius, dropdownTokens.itemPaddingTop, dropdownTokens.itemPaddingRight, dropdownTokens.itemPaddingBottom, dropdownTokens.itemPaddingLeft, dropdownTokens.itemBorderRadius, dropdownTokens.itemPaddingTopTight, dropdownTokens.itemPaddingBottomTight, dropdownTokens.itemFontFamily, dropdownTokens.itemFontSize, dropdownTokens.itemFontStyle, dropdownTokens.itemFontWeightBold, dropdownTokens.itemFontLetterSpacing, dropdownTokens.itemFontLineHeight)
|
10
|
+
xs: /*#__PURE__*/css(["", ":0.125rem;", ":10rem;", ":0.5rem;", ":0.5625rem;", ":0.5rem;", ":0.5625rem;", ":0.5rem;", ":0.375rem;", ":0.3125rem;", ":0.3125rem;", ":0.25rem;", ":0.5rem;", ":0.25rem;", ":0.5rem;", ":0.125rem;", ":0.125rem;", ":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);"], dropdownTokens.padding, dropdownTokens.width, dropdownTokens.borderRadius, dropdownTokens.itemPaddingTop, dropdownTokens.itemPaddingRight, dropdownTokens.itemPaddingBottom, dropdownTokens.itemPaddingLeft, dropdownTokens.itemBorderRadius, dropdownTokens.itemPaddingTopTight, dropdownTokens.itemPaddingBottomTight, dropdownTokens.dividerMarginTop, dropdownTokens.dividerMarginRight, dropdownTokens.dividerMarginBottom, dropdownTokens.dividerMarginLeft, dropdownTokens.dividerMarginTopTight, dropdownTokens.dividerMarginBottomTight, dropdownTokens.itemFontFamily, dropdownTokens.itemFontSize, dropdownTokens.itemFontStyle, dropdownTokens.itemFontWeightBold, dropdownTokens.itemFontLetterSpacing, dropdownTokens.itemFontLineHeight),
|
11
|
+
s: /*#__PURE__*/css(["", ":0.125rem;", ":12.5rem;", ":0.625rem;", ":0.6875rem;", ":0.75rem;", ":0.6875rem;", ":0.75rem;", ":0.5rem;", ":0.4375rem;", ":0.4375rem;", ":0.375rem;", ":0.75rem;", ":0.375rem;", ":0.75rem;", ":0.25rem;", ":0.25rem;", ":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);"], dropdownTokens.padding, dropdownTokens.width, dropdownTokens.borderRadius, dropdownTokens.itemPaddingTop, dropdownTokens.itemPaddingRight, dropdownTokens.itemPaddingBottom, dropdownTokens.itemPaddingLeft, dropdownTokens.itemBorderRadius, dropdownTokens.itemPaddingTopTight, dropdownTokens.itemPaddingBottomTight, dropdownTokens.dividerMarginTop, dropdownTokens.dividerMarginRight, dropdownTokens.dividerMarginBottom, dropdownTokens.dividerMarginLeft, dropdownTokens.dividerMarginTopTight, dropdownTokens.dividerMarginBottomTight, dropdownTokens.itemFontFamily, dropdownTokens.itemFontSize, dropdownTokens.itemFontStyle, dropdownTokens.itemFontWeightBold, dropdownTokens.itemFontLetterSpacing, dropdownTokens.itemFontLineHeight),
|
12
|
+
m: /*#__PURE__*/css(["", ":0.125rem;", ":15rem;", ":0.75rem;", ":0.875rem;", ":0.875rem;", ":0.875rem;", ":0.875rem;", ":0.625rem;", ":0.625rem;", ":0.625rem;", ":0.375rem;", ":0.875rem;", ":0.375rem;", ":0.875rem;", ":0.375rem;", ":0.375rem;", ":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);"], dropdownTokens.padding, dropdownTokens.width, dropdownTokens.borderRadius, dropdownTokens.itemPaddingTop, dropdownTokens.itemPaddingRight, dropdownTokens.itemPaddingBottom, dropdownTokens.itemPaddingLeft, dropdownTokens.itemBorderRadius, dropdownTokens.itemPaddingTopTight, dropdownTokens.itemPaddingBottomTight, dropdownTokens.dividerMarginTop, dropdownTokens.dividerMarginRight, dropdownTokens.dividerMarginBottom, dropdownTokens.dividerMarginLeft, dropdownTokens.dividerMarginTopTight, dropdownTokens.dividerMarginBottomTight, dropdownTokens.itemFontFamily, dropdownTokens.itemFontSize, dropdownTokens.itemFontStyle, dropdownTokens.itemFontWeightBold, dropdownTokens.itemFontLetterSpacing, dropdownTokens.itemFontLineHeight),
|
13
|
+
l: /*#__PURE__*/css(["", ":0.125rem;", ":17.5rem;", ":0.875rem;", ":1.0625rem;", ":1rem;", ":1.0625rem;", ":1rem;", ":0.75rem;", ":0.8125rem;", ":0.8125rem;", ":0.5rem;", ":1.125rem;", ":0.5rem;", ":1.125rem;", ":0.375rem;", ":0.375rem;", ":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);"], dropdownTokens.padding, dropdownTokens.width, dropdownTokens.borderRadius, dropdownTokens.itemPaddingTop, dropdownTokens.itemPaddingRight, dropdownTokens.itemPaddingBottom, dropdownTokens.itemPaddingLeft, dropdownTokens.itemBorderRadius, dropdownTokens.itemPaddingTopTight, dropdownTokens.itemPaddingBottomTight, dropdownTokens.dividerMarginTop, dropdownTokens.dividerMarginRight, dropdownTokens.dividerMarginBottom, dropdownTokens.dividerMarginLeft, dropdownTokens.dividerMarginTopTight, dropdownTokens.dividerMarginBottomTight, dropdownTokens.itemFontFamily, dropdownTokens.itemFontSize, dropdownTokens.itemFontStyle, dropdownTokens.itemFontWeightBold, dropdownTokens.itemFontLetterSpacing, dropdownTokens.itemFontLineHeight)
|
14
14
|
},
|
15
15
|
view: {
|
16
|
-
"default": /*#__PURE__*/css(["", ":0.4;", ":var(--surface-accent);", ":var(--surface-solid-card-brightness);", ":0px 4px 14px -4px rgba(8,8,8,0.08),0px 1px 4px -1px rgba(0,0,0,0.04);", ":var(--text-secondary);", ":var(--surface-clear);", ":var(--surface-transparent-secondary);", ":var(--text-primary);"], dropdownTokens.disabledOpacity, dropdownTokens.focusColor, dropdownTokens.background, dropdownTokens.boxShadow, dropdownTokens.disclosureIconColor, dropdownTokens.itemBackground, dropdownTokens.itemBackgroundHover, dropdownTokens.itemColor)
|
16
|
+
"default": /*#__PURE__*/css(["", ":0.4;", ":var(--surface-accent);", ":var(--surface-solid-card-brightness);", ":0px 4px 14px -4px rgba(8,8,8,0.08),0px 1px 4px -1px rgba(0,0,0,0.04);", ":var(--text-secondary);", ":var(--surface-clear);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-tertiary);"], dropdownTokens.disabledOpacity, dropdownTokens.focusColor, dropdownTokens.background, dropdownTokens.boxShadow, dropdownTokens.disclosureIconColor, dropdownTokens.itemBackground, dropdownTokens.itemBackgroundHover, dropdownTokens.itemColor, dropdownTokens.dividerColor)
|
17
17
|
}
|
18
18
|
}
|
19
19
|
};
|
@@ -7,13 +7,13 @@ export var config = {
|
|
7
7
|
},
|
8
8
|
variations: {
|
9
9
|
size: {
|
10
|
-
xs: /*#__PURE__*/css(["", ":0.125rem;", ":10rem;", ":0.5rem;", ":0.5625rem;", ":0.5rem;", ":0.5625rem;", ":0.5rem;", ":0.375rem;", ":0.3125rem;", ":0.3125rem;", ":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);"], dropdownTokens.padding, dropdownTokens.width, dropdownTokens.borderRadius, dropdownTokens.itemPaddingTop, dropdownTokens.itemPaddingRight, dropdownTokens.itemPaddingBottom, dropdownTokens.itemPaddingLeft, dropdownTokens.itemBorderRadius, dropdownTokens.itemPaddingTopTight, dropdownTokens.itemPaddingBottomTight, dropdownTokens.itemFontFamily, dropdownTokens.itemFontSize, dropdownTokens.itemFontStyle, dropdownTokens.itemFontWeightBold, dropdownTokens.itemFontLetterSpacing, dropdownTokens.itemFontLineHeight),
|
11
|
-
s: /*#__PURE__*/css(["", ":0.125rem;", ":12.5rem;", ":0.625rem;", ":0.6875rem;", ":0.75rem;", ":0.6875rem;", ":0.75rem;", ":0.5rem;", ":0.4375rem;", ":0.4375rem;", ":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);"], dropdownTokens.padding, dropdownTokens.width, dropdownTokens.borderRadius, dropdownTokens.itemPaddingTop, dropdownTokens.itemPaddingRight, dropdownTokens.itemPaddingBottom, dropdownTokens.itemPaddingLeft, dropdownTokens.itemBorderRadius, dropdownTokens.itemPaddingTopTight, dropdownTokens.itemPaddingBottomTight, dropdownTokens.itemFontFamily, dropdownTokens.itemFontSize, dropdownTokens.itemFontStyle, dropdownTokens.itemFontWeightBold, dropdownTokens.itemFontLetterSpacing, dropdownTokens.itemFontLineHeight),
|
12
|
-
m: /*#__PURE__*/css(["", ":0.125rem;", ":15rem;", ":0.75rem;", ":0.875rem;", ":0.875rem;", ":0.875rem;", ":0.875rem;", ":0.625rem;", ":0.625rem;", ":0.625rem;", ":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);"], dropdownTokens.padding, dropdownTokens.width, dropdownTokens.borderRadius, dropdownTokens.itemPaddingTop, dropdownTokens.itemPaddingRight, dropdownTokens.itemPaddingBottom, dropdownTokens.itemPaddingLeft, dropdownTokens.itemBorderRadius, dropdownTokens.itemPaddingTopTight, dropdownTokens.itemPaddingBottomTight, dropdownTokens.itemFontFamily, dropdownTokens.itemFontSize, dropdownTokens.itemFontStyle, dropdownTokens.itemFontWeightBold, dropdownTokens.itemFontLetterSpacing, dropdownTokens.itemFontLineHeight),
|
13
|
-
l: /*#__PURE__*/css(["", ":0.125rem;", ":17.5rem;", ":0.875rem;", ":1.0625rem;", ":1rem;", ":1.0625rem;", ":1rem;", ":0.75rem;", ":0.8125rem;", ":0.8125rem;", ":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);"], dropdownTokens.padding, dropdownTokens.width, dropdownTokens.borderRadius, dropdownTokens.itemPaddingTop, dropdownTokens.itemPaddingRight, dropdownTokens.itemPaddingBottom, dropdownTokens.itemPaddingLeft, dropdownTokens.itemBorderRadius, dropdownTokens.itemPaddingTopTight, dropdownTokens.itemPaddingBottomTight, dropdownTokens.itemFontFamily, dropdownTokens.itemFontSize, dropdownTokens.itemFontStyle, dropdownTokens.itemFontWeightBold, dropdownTokens.itemFontLetterSpacing, dropdownTokens.itemFontLineHeight)
|
10
|
+
xs: /*#__PURE__*/css(["", ":0.125rem;", ":10rem;", ":0.5rem;", ":0.5625rem;", ":0.5rem;", ":0.5625rem;", ":0.5rem;", ":0.375rem;", ":0.3125rem;", ":0.3125rem;", ":0.25rem;", ":0.5rem;", ":0.25rem;", ":0.5rem;", ":0.125rem;", ":0.125rem;", ":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);"], dropdownTokens.padding, dropdownTokens.width, dropdownTokens.borderRadius, dropdownTokens.itemPaddingTop, dropdownTokens.itemPaddingRight, dropdownTokens.itemPaddingBottom, dropdownTokens.itemPaddingLeft, dropdownTokens.itemBorderRadius, dropdownTokens.itemPaddingTopTight, dropdownTokens.itemPaddingBottomTight, dropdownTokens.dividerMarginTop, dropdownTokens.dividerMarginRight, dropdownTokens.dividerMarginBottom, dropdownTokens.dividerMarginLeft, dropdownTokens.dividerMarginTopTight, dropdownTokens.dividerMarginBottomTight, dropdownTokens.itemFontFamily, dropdownTokens.itemFontSize, dropdownTokens.itemFontStyle, dropdownTokens.itemFontWeightBold, dropdownTokens.itemFontLetterSpacing, dropdownTokens.itemFontLineHeight),
|
11
|
+
s: /*#__PURE__*/css(["", ":0.125rem;", ":12.5rem;", ":0.625rem;", ":0.6875rem;", ":0.75rem;", ":0.6875rem;", ":0.75rem;", ":0.5rem;", ":0.4375rem;", ":0.4375rem;", ":0.375rem;", ":0.75rem;", ":0.375rem;", ":0.75rem;", ":0.25rem;", ":0.25rem;", ":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);"], dropdownTokens.padding, dropdownTokens.width, dropdownTokens.borderRadius, dropdownTokens.itemPaddingTop, dropdownTokens.itemPaddingRight, dropdownTokens.itemPaddingBottom, dropdownTokens.itemPaddingLeft, dropdownTokens.itemBorderRadius, dropdownTokens.itemPaddingTopTight, dropdownTokens.itemPaddingBottomTight, dropdownTokens.dividerMarginTop, dropdownTokens.dividerMarginRight, dropdownTokens.dividerMarginBottom, dropdownTokens.dividerMarginLeft, dropdownTokens.dividerMarginTopTight, dropdownTokens.dividerMarginBottomTight, dropdownTokens.itemFontFamily, dropdownTokens.itemFontSize, dropdownTokens.itemFontStyle, dropdownTokens.itemFontWeightBold, dropdownTokens.itemFontLetterSpacing, dropdownTokens.itemFontLineHeight),
|
12
|
+
m: /*#__PURE__*/css(["", ":0.125rem;", ":15rem;", ":0.75rem;", ":0.875rem;", ":0.875rem;", ":0.875rem;", ":0.875rem;", ":0.625rem;", ":0.625rem;", ":0.625rem;", ":0.375rem;", ":0.875rem;", ":0.375rem;", ":0.875rem;", ":0.375rem;", ":0.375rem;", ":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);"], dropdownTokens.padding, dropdownTokens.width, dropdownTokens.borderRadius, dropdownTokens.itemPaddingTop, dropdownTokens.itemPaddingRight, dropdownTokens.itemPaddingBottom, dropdownTokens.itemPaddingLeft, dropdownTokens.itemBorderRadius, dropdownTokens.itemPaddingTopTight, dropdownTokens.itemPaddingBottomTight, dropdownTokens.dividerMarginTop, dropdownTokens.dividerMarginRight, dropdownTokens.dividerMarginBottom, dropdownTokens.dividerMarginLeft, dropdownTokens.dividerMarginTopTight, dropdownTokens.dividerMarginBottomTight, dropdownTokens.itemFontFamily, dropdownTokens.itemFontSize, dropdownTokens.itemFontStyle, dropdownTokens.itemFontWeightBold, dropdownTokens.itemFontLetterSpacing, dropdownTokens.itemFontLineHeight),
|
13
|
+
l: /*#__PURE__*/css(["", ":0.125rem;", ":17.5rem;", ":0.875rem;", ":1.0625rem;", ":1rem;", ":1.0625rem;", ":1rem;", ":0.75rem;", ":0.8125rem;", ":0.8125rem;", ":0.5rem;", ":1.125rem;", ":0.5rem;", ":1.125rem;", ":0.375rem;", ":0.375rem;", ":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);"], dropdownTokens.padding, dropdownTokens.width, dropdownTokens.borderRadius, dropdownTokens.itemPaddingTop, dropdownTokens.itemPaddingRight, dropdownTokens.itemPaddingBottom, dropdownTokens.itemPaddingLeft, dropdownTokens.itemBorderRadius, dropdownTokens.itemPaddingTopTight, dropdownTokens.itemPaddingBottomTight, dropdownTokens.dividerMarginTop, dropdownTokens.dividerMarginRight, dropdownTokens.dividerMarginBottom, dropdownTokens.dividerMarginLeft, dropdownTokens.dividerMarginTopTight, dropdownTokens.dividerMarginBottomTight, dropdownTokens.itemFontFamily, dropdownTokens.itemFontSize, dropdownTokens.itemFontStyle, dropdownTokens.itemFontWeightBold, dropdownTokens.itemFontLetterSpacing, dropdownTokens.itemFontLineHeight)
|
14
14
|
},
|
15
15
|
view: {
|
16
|
-
"default": /*#__PURE__*/css(["", ":0.4;", ":var(--surface-accent);", ":var(--surface-solid-card-brightness);", ":0px 4px 14px -4px rgba(8,8,8,0.08),0px 1px 4px -1px rgba(0,0,0,0.04);", ":var(--text-secondary);", ":var(--surface-clear);", ":var(--surface-transparent-secondary);", ":var(--text-primary);"], dropdownTokens.disabledOpacity, dropdownTokens.focusColor, dropdownTokens.background, dropdownTokens.boxShadow, dropdownTokens.disclosureIconColor, dropdownTokens.itemBackground, dropdownTokens.itemBackgroundHover, dropdownTokens.itemColor)
|
16
|
+
"default": /*#__PURE__*/css(["", ":0.4;", ":var(--surface-accent);", ":var(--surface-solid-card-brightness);", ":0px 4px 14px -4px rgba(8,8,8,0.08),0px 1px 4px -1px rgba(0,0,0,0.04);", ":var(--text-secondary);", ":var(--surface-clear);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-tertiary);"], dropdownTokens.disabledOpacity, dropdownTokens.focusColor, dropdownTokens.background, dropdownTokens.boxShadow, dropdownTokens.disclosureIconColor, dropdownTokens.itemBackground, dropdownTokens.itemBackgroundHover, dropdownTokens.itemColor, dropdownTokens.dividerColor)
|
17
17
|
}
|
18
18
|
}
|
19
19
|
};
|
@@ -14,6 +14,13 @@ export declare const tokens: {
|
|
14
14
|
disclosureIconColor: string;
|
15
15
|
disabledOpacity: string;
|
16
16
|
focusColor: string;
|
17
|
+
dividerColor: string;
|
18
|
+
dividerMarginTop: string;
|
19
|
+
dividerMarginTopTight: string;
|
20
|
+
dividerMarginRight: string;
|
21
|
+
dividerMarginBottom: string;
|
22
|
+
dividerMarginBottomTight: string;
|
23
|
+
dividerMarginLeft: string;
|
17
24
|
itemBackground: string;
|
18
25
|
itemBackgroundHover: string;
|
19
26
|
itemBackgroundSelected: string;
|
@@ -78,13 +85,8 @@ export declare const tokens: {
|
|
78
85
|
headerFontWeightBold: string;
|
79
86
|
headerFontLetterSpacing: string;
|
80
87
|
headerFontLineHeight: string;
|
81
|
-
dividerColor: string;
|
82
88
|
dividerWidth: string;
|
83
89
|
dividerHeight: string;
|
84
|
-
dividerMarginTop: string;
|
85
|
-
dividerMarginRight: string;
|
86
|
-
dividerMarginBottom: string;
|
87
|
-
dividerMarginLeft: string;
|
88
90
|
groupBackground: string;
|
89
91
|
groupWidth: string;
|
90
92
|
groupHeight: string;
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Dropdown.tokens.d.ts","sourceRoot":"","sources":["../../../src/components/Dropdown/Dropdown.tokens.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO;;;;;;CAMnB,CAAC;AAEF,eAAO,MAAM,MAAM
|
1
|
+
{"version":3,"file":"Dropdown.tokens.d.ts","sourceRoot":"","sources":["../../../src/components/Dropdown/Dropdown.tokens.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO;;;;;;CAMnB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmHlB,CAAC"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"DropdownItem.d.ts","sourceRoot":"","sources":["../../../../../src/components/Dropdown/ui/DropdownItem/DropdownItem.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAqB,EAAE,EAAE,MAAM,OAAO,CAAC;
|
1
|
+
{"version":3,"file":"DropdownItem.d.ts","sourceRoot":"","sources":["../../../../../src/components/Dropdown/ui/DropdownItem/DropdownItem.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAqB,EAAE,EAAE,MAAM,OAAO,CAAC;AAcrD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAE7D,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CAkG9C,CAAC"}
|
@@ -4,6 +4,9 @@ export declare const StyledContentLeft: import("@linaria/react").StyledComponent
|
|
4
4
|
export declare const StyledContentRight: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
|
5
5
|
export declare const DisclosureIconWrapper: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
|
6
6
|
export declare const StyledText: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
|
7
|
+
export declare const Divider: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
|
8
|
+
variant: DropdownProps['variant'];
|
9
|
+
}>;
|
7
10
|
export declare const Wrapper: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLLIElement> & import("react").LiHTMLAttributes<HTMLLIElement> & {
|
8
11
|
variant: DropdownProps['variant'];
|
9
12
|
}>;
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"DropdownItem.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/Dropdown/ui/DropdownItem/DropdownItem.styles.ts"],"names":[],"mappings":";AAIA,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAErD,eAAO,MAAM,iBAAiB,qKAE7B,CAAC;AAEF,eAAO,MAAM,kBAAkB,qKAG9B,CAAC;AAEF,eAAO,MAAM,qBAAqB,qKAGjC,CAAC;AAEF,eAAO,MAAM,UAAU,qKAGtB,CAAC;AAEF,eAAO,MAAM,OAAO;aAAwB,aAAa,CAAC,SAAS,CAAC;EAoDnE,CAAC"}
|
1
|
+
{"version":3,"file":"DropdownItem.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/Dropdown/ui/DropdownItem/DropdownItem.styles.ts"],"names":[],"mappings":";AAIA,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAErD,eAAO,MAAM,iBAAiB,qKAE7B,CAAC;AAEF,eAAO,MAAM,kBAAkB,qKAG9B,CAAC;AAEF,eAAO,MAAM,qBAAqB,qKAGjC,CAAC;AAEF,eAAO,MAAM,UAAU,qKAGtB,CAAC;AAEF,eAAO,MAAM,OAAO;aAAyB,aAAa,CAAC,SAAS,CAAC;EASpE,CAAC;AAEF,eAAO,MAAM,OAAO;aAAwB,aAAa,CAAC,SAAS,CAAC;EAoDnE,CAAC"}
|
@@ -27,6 +27,14 @@ export declare type DropdownItemOption = {
|
|
27
27
|
* Слот для контента справа
|
28
28
|
*/
|
29
29
|
contentRight?: ReactNode;
|
30
|
+
/**
|
31
|
+
* Отобразить ли разделитель до элемента
|
32
|
+
*/
|
33
|
+
dividerBefore?: boolean;
|
34
|
+
/**
|
35
|
+
* Отобразить ли разделитель после элемента
|
36
|
+
*/
|
37
|
+
dividerAfter?: boolean;
|
30
38
|
/**
|
31
39
|
* Выбранный item.
|
32
40
|
* @deprecated использовать ContentLeft || ContentRight
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"DropdownItem.type.d.ts","sourceRoot":"","sources":["../../../../../src/components/Dropdown/ui/DropdownItem/DropdownItem.type.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEvE,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AAC1E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAE5D,oBAAY,kBAAkB,GAAG;IAC7B;;OAEG;IACH,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,kBAAkB,CAAC,CAAC;IAClC;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC;AAEF,MAAM,WAAW,iBAAkB,SAAQ,cAAc,CAAC,aAAa,CAAC;IACpE,IAAI,EAAE,kBAAkB,CAAC;IACzB,WAAW,EAAE,gBAAgB,CAAC;IAC9B,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IAClC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACrC,aAAa,CAAC,EAAE,aAAa,CAAC,eAAe,CAAC,CAAC;IAC/C,kBAAkB,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG,cAAc,CAAC,OAAO,EAAE,KAAK,CAAC,KAAK,IAAI,CAAC;IAC9F,OAAO,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACnC,YAAY,CAAC,EAAE,aAAa,CAAC,cAAc,CAAC,CAAC;IAC7C,WAAW,CAAC,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;IAC3C,QAAQ,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACrC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC;IACrD,SAAS,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,CAAC;IAC/C,SAAS,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,CAAC;CAClD"}
|
1
|
+
{"version":3,"file":"DropdownItem.type.d.ts","sourceRoot":"","sources":["../../../../../src/components/Dropdown/ui/DropdownItem/DropdownItem.type.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEvE,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AAC1E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAE5D,oBAAY,kBAAkB,GAAG;IAC7B;;OAEG;IACH,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,kBAAkB,CAAC,CAAC;IAClC;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC;AAEF,MAAM,WAAW,iBAAkB,SAAQ,cAAc,CAAC,aAAa,CAAC;IACpE,IAAI,EAAE,kBAAkB,CAAC;IACzB,WAAW,EAAE,gBAAgB,CAAC;IAC9B,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IAClC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACrC,aAAa,CAAC,EAAE,aAAa,CAAC,eAAe,CAAC,CAAC;IAC/C,kBAAkB,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG,cAAc,CAAC,OAAO,EAAE,KAAK,CAAC,KAAK,IAAI,CAAC;IAC9F,OAAO,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACnC,YAAY,CAAC,EAAE,aAAa,CAAC,cAAc,CAAC,CAAC;IAC7C,WAAW,CAAC,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;IAC3C,QAAQ,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACrC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC;IACrD,SAAS,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,CAAC;IAC/C,SAAS,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,CAAC;CAClD"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Dropdown.config.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_b2c/components/Dropdown/Dropdown.config.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;
|
1
|
+
{"version":3,"file":"Dropdown.config.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_b2c/components/Dropdown/Dropdown.config.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;CAkIlB,CAAC"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Dropdown.config.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_web/components/Dropdown/Dropdown.config.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;
|
1
|
+
{"version":3,"file":"Dropdown.config.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_web/components/Dropdown/Dropdown.config.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;CAkIlB,CAAC"}
|
@@ -1,5 +0,0 @@
|
|
1
|
-
.s1gkzlls{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}
|
2
|
-
.sz6s14y{margin-left:auto;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}
|
3
|
-
.d1m97l2m{line-height:0;color:var(--plasma-dropdown-disclosure-icon-color);}
|
4
|
-
.soib72h{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-flex:1;-ms-flex:1;flex:1;}
|
5
|
-
.w6l2f0g{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin:0;box-sizing:content-box;padding-top:var(--w6l2f0g-0);padding-right:var(--plasma-dropdown-item-padding-right);padding-bottom:var(--w6l2f0g-1);padding-left:var(--plasma-dropdown-item-padding-left);font-family:var(--plasma-dropdown-item-font-family);font-size:var(--plasma-dropdown-item-font-size);font-style:var(--plasma-dropdown-item-font-style);font-weight:var(--plasma-dropdown-item-letter-spacing);-webkit-letter-spacing:var(--plasma-dropdown-item-line-height);-moz-letter-spacing:var(--plasma-dropdown-item-line-height);-ms-letter-spacing:var(--plasma-dropdown-item-line-height);letter-spacing:var(--plasma-dropdown-item-line-height);line-height:var(--plasma-dropdown-item-font-weight);background:var(--plasma-dropdown-item-background);color:var(--plasma-dropdown-item-color);border-radius:var(--plasma-dropdown-item-border-radius);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;}.w6l2f0g:hover:not(.dropdown-item-is-disabled){cursor:pointer;background:var(--plasma-dropdown-item-background-hover);}.w6l2f0g.dropdown-item-is-active{background:var(--plasma-dropdown-item-background-hover);}.w6l2f0g.dropdown-item-is-disabled{opacity:var(--plasma-dropdown-disabled-opacity);cursor:not-allowed;}.w6l2f0g:focus{outline:none;}.w6l2f0g::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;z-index:1;display:block;box-sizing:content-box;border:0.0625rem solid transparent;border-radius:var(--plasma-dropdown-item-border-radius);-webkit-transition:none;transition:none;pointer-events:none;}.w6l2f0g.dropdown-item-is-focused:before{outline:none;box-shadow:0 0 0 0.0625rem var(--plasma-dropdown-focus-color);}
|
@@ -1,82 +0,0 @@
|
|
1
|
-
---
|
2
|
-
id: steps
|
3
|
-
title: Steps
|
4
|
-
---
|
5
|
-
|
6
|
-
# Steps
|
7
|
-
Шаги могут отображаться в нескольких размерах, в упрощенном виде и в горизонтальной/вертикальной ориентации
|
8
|
-
|
9
|
-
```tsx live
|
10
|
-
import React, { ReactNode, useState } from "react";
|
11
|
-
|
12
|
-
interface StepItemSimple {
|
13
|
-
indicator?: number | string | ReactNode;
|
14
|
-
progress?: "notStarted" | "completed" | "inProgress";
|
15
|
-
disabled?: boolean;
|
16
|
-
}
|
17
|
-
|
18
|
-
interface StepItem {
|
19
|
-
title?: string;
|
20
|
-
content?: string | ReactNode;
|
21
|
-
indicator?: number | string | ReactNode;
|
22
|
-
progress?: "notStarted" | "completed" | "inProgress";
|
23
|
-
disabled?: boolean;
|
24
|
-
}
|
25
|
-
|
26
|
-
type StepItemType = StepItemSimple | StepItem;
|
27
|
-
|
28
|
-
interface Steps {
|
29
|
-
orientation?: "horizontal" | "vertical";
|
30
|
-
/* выравнивание заголовков и контента
|
31
|
-
* @default 'left' */
|
32
|
-
contentAlign?: "left" | "center"; //
|
33
|
-
size?: "xs" | "s" | "m" | "l";
|
34
|
-
indicatorSize?: 8 | 16 | 24 | 36;
|
35
|
-
/* наличие разделительной линии
|
36
|
-
* @default 'left' */
|
37
|
-
hasLine?: boolean;
|
38
|
-
/* включает упрощенное отображение, то есть без title и content
|
39
|
-
* даже если они есть в items */
|
40
|
-
simple?: boolean;
|
41
|
-
/* обработчик кликов по StepItem
|
42
|
-
при наличии onClick у полей появляется :hover
|
43
|
-
без onClick можно разместить в content кнопки и обрабатывать переходы через них
|
44
|
-
*/
|
45
|
-
onClick?: (item: StepItemType, index: number) => void;
|
46
|
-
items: StepItemType[];
|
47
|
-
}
|
48
|
-
|
49
|
-
export const fullItems = [
|
50
|
-
{
|
51
|
-
title: 'Просто заголовок',
|
52
|
-
indicator: 1,
|
53
|
-
content: text,
|
54
|
-
progress: 'completed',
|
55
|
-
},
|
56
|
-
{
|
57
|
-
title: 'Очень длинный и неприятный заголовок',
|
58
|
-
indicator: 2,
|
59
|
-
content: text,
|
60
|
-
progress: 'inProgress',
|
61
|
-
},
|
62
|
-
{
|
63
|
-
title: 'СамыйДлинныйИзНеприятныхЗаголовковЕщеИБезПробелов',
|
64
|
-
indicator: 3,
|
65
|
-
content: text,
|
66
|
-
progress: 'notStarted',
|
67
|
-
},
|
68
|
-
];
|
69
|
-
|
70
|
-
// пример использования
|
71
|
-
const [exampleItems, setExampleItems] = useState<StepItem>(() =>
|
72
|
-
fullItems.map((item) => ({ ...item, progress: "notStarted" })),
|
73
|
-
);
|
74
|
-
|
75
|
-
<Steps
|
76
|
-
onClick={(item, index) => {
|
77
|
-
exampleItems[index].progress = "completed";
|
78
|
-
setExampleItems([...exampleItems]);
|
79
|
-
}}
|
80
|
-
items={exampleItems}
|
81
|
-
/>;
|
82
|
-
```
|