@salutejs/plasma-new-hope 0.77.1-canary.1201.8930079977.0 → 0.78.0-canary.1176.8921778834.0

package/cjs/components/Combobox/ui/ComboboxItem/ComboboxItem.styles.js

@@ -1,30 +1,18 @@
-import './ComboboxItem.styles_s4sk53.css';
+import './ComboboxItem.styles_936wgl.css';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var react = require('@linaria/react');
+require('react');
+require('@salutejs/plasma-core');
+require('@linaria/react');
+require('@linaria/core');
 require('focus-visible');
+require('react-dom');
+require('react-popper');
+require('../../../../utils/react.js');
 
-var StyledContentLeft = /*#__PURE__*/react.styled('div')({
-  name: "StyledContentLeft",
-  "class": "s1thh7ji",
-  propsAsIs: false
-});
-var StyledContentRight = /*#__PURE__*/react.styled('div')({
-  name: "StyledContentRight",
-  "class": "s1exy6xj",
-  propsAsIs: false
-});
-var StyledText = /*#__PURE__*/react.styled('div')({
-  name: "StyledText",
-  "class": "s18437sq",
-  propsAsIs: false
-});
-var base = "bvoi56l";
+var base = "b1thh7ji";
 
-exports.StyledContentLeft = StyledContentLeft;
-exports.StyledContentRight = StyledContentRight;
-exports.StyledText = StyledText;
 exports.base = base;
 //# sourceMappingURL=ComboboxItem.styles.js.map

package/cjs/components/Combobox/ui/ComboboxItem/ComboboxItem.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboboxItem.styles.js","sources":["../../../../../src/components/Combobox/ui/ComboboxItem/ComboboxItem.styles.ts"],"sourcesContent":["import { css } from '@linaria/core';\nimport { styled } from '@linaria/react';\n\nimport { classes, tokens } from '../../Combobox.tokens';\nimport { addFocus, applyEllipsis } from '../../../../mixins';\n\nexport const StyledContentLeft = styled.div`\n    display: inline-flex;\n\n    min-width: var(${tokens.itemContentLeftWidth});\n    color: var(${tokens.itemContentLeftColor});\n`;\n\nexport const StyledContentRight = styled.div`\n    margin-left: auto;\n    display: inline-flex;\n\n    min-width: var(${tokens.itemContentRightWidth});\n    color: var(${tokens.itemContentRightColor});\n`;\n\nexport const StyledText = styled.div`\n    ${applyEllipsis()};\n`;\n\n// INFO: Для возможности переиспользования стилей в других компонентах\nexport const baseContent = `\n    box-sizing: content-box;\n    display: flex;\n    align-items: center;\n    user-select: none;\n\n    :focus {\n        outline: none;\n    }\n\n    ${addFocus({\n        outlineSize: '0.0625rem',\n        outlineOffset: '0',\n        outlineColor: `var(${tokens.focusColor})`,\n        outlineRadius: `var(${tokens.itemBorderRadius})`,\n        hasTransition: false,\n    })};\n\n    width: 100%;\n\n    font-family: var(${tokens.itemFontFamily});\n    font-size: var(${tokens.itemFontSize});\n    font-style: var(${tokens.itemFontStyle});\n    font-weight: var(${tokens.itemFontWeightBold});\n    letter-spacing: var(${tokens.itemFontLetterSpacing});\n    line-height: var(${tokens.itemFontLineHeight});\n\n    background: var(${tokens.itemBackground});\n    color: var(${tokens.itemColor});\n    border-radius: var(${tokens.itemBorderRadius});\n\n    width: var(${tokens.itemWidth});\n    height: var(${tokens.itemHeight});\n\n    padding: var(${tokens.itemPaddingTop}) var(${tokens.itemPaddingRight}) var(${tokens.itemPaddingBottom})\n        var(${tokens.itemPaddingLeft});\n\n    margin: var(${tokens.itemMarginTop}) var(${tokens.itemMarginRight}) var(${tokens.itemMarginBottom})\n        var(${tokens.itemMarginLeft});\n\n    &:hover:not(.${classes.comboboxItemIsDisabled}) {\n        cursor: pointer;\n        background: var(${tokens.itemBackgroundHover});\n    }\n\n    &.${String(classes.comboboxItemIsSelected)} {\n        color: var(${tokens.itemColorSelected});\n        background: var(${tokens.itemBackgroundSelected});\n\n        &:hover:not(.${classes.comboboxItemIsDisabled}) {\n            background: var(${tokens.itemBackgroundSelectedHover});\n        }\n    }\n\n    &.${classes.comboboxItemIsDisabled} {\n        opacity: var(${tokens.disabledOpacity});\n        cursor: not-allowed;\n    }\n`;\n\nexport const base = css`\n    ${baseContent};\n`;\n"],"names":["StyledContentLeft","styled","name","class","propsAsIs","StyledContentRight","StyledText","base"],"mappings":";;;;;;;AAMO,IAAMA,iBAAiB,gBAAGC,YAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,mBAAA;AAAAC,EAAAA,OAAAA,EAAA,UAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAKtC,EAAA;AAEM,IAAMC,kBAAkB,gBAAGJ,YAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,oBAAA;AAAAC,EAAAA,OAAAA,EAAA,UAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAMvC,EAAA;AAEM,IAAME,UAAU,gBAAGL,YAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,YAAA;AAAAC,EAAAA,OAAAA,EAAA,UAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAE/B,EAAA;AA+DM,IAAMG,IAAI,GAEhB;;;;;;;"}
+{"version":3,"file":"ComboboxItem.styles.js","sources":["../../../../../src/components/Combobox/ui/ComboboxItem/ComboboxItem.styles.ts"],"sourcesContent":["import { css } from '@linaria/core';\n\nimport { tokens } from '../../Combobox.tokens';\nimport { dropdownTokens } from '../../../Dropdown';\nimport { baseContent as dropdownItemBase } from '../../../Dropdown/ui/DropdownItem/DropdownItem.styles';\n\n// NOTE: Необходимое переопределение токенов из компонента DropdownItem т.к. используются его части\nexport const mappingOverride = `\n    ${dropdownTokens.itemBackground}: var(${tokens.itemBackground});\n    ${dropdownTokens.itemColor}: var(${tokens.itemColor});\n    ${dropdownTokens.itemBackgroundHover}: var(${tokens.itemBackgroundHover});\n    ${dropdownTokens.itemBackgroundSelected}: var(${tokens.itemBackgroundSelected});\n    ${dropdownTokens.itemColorSelected}: var(${tokens.itemColorSelected});\n    ${dropdownTokens.itemBackgroundSelectedHover}: var(${tokens.itemBackgroundSelectedHover});\n    ${dropdownTokens.itemColorSelectedHover}: var(${tokens.itemColorSelectedHover});\n    ${dropdownTokens.itemContentLeftColor}: var(${tokens.itemContentLeftColor});\n    ${dropdownTokens.itemContentRightColor}: var(${tokens.itemContentRightColor});\n    ${dropdownTokens.disabledOpacity}: var(${tokens.disabledOpacity});\n    ${dropdownTokens.focusColor}: var(${tokens.focusColor});\n    ${dropdownTokens.itemWidth}: var(${tokens.itemWidth});\n    ${dropdownTokens.itemHeight}: var(${tokens.itemHeight});\n    ${dropdownTokens.itemBorderRadius}: var(${tokens.itemBorderRadius});\n    ${dropdownTokens.itemPaddingTop}: var(${tokens.itemPaddingTop});\n    ${dropdownTokens.itemPaddingRight}: var(${tokens.itemPaddingRight});\n    ${dropdownTokens.itemPaddingBottom}: var(${tokens.itemPaddingBottom});\n    ${dropdownTokens.itemPaddingLeft}: var(${tokens.itemPaddingLeft});\n    ${dropdownTokens.itemMarginTop}: var(${tokens.itemMarginTop});\n    ${dropdownTokens.itemMarginRight}: var(${tokens.itemMarginRight});\n    ${dropdownTokens.itemMarginBottom}: var(${tokens.itemMarginBottom});\n    ${dropdownTokens.itemMarginLeft}: var(${tokens.itemMarginLeft});\n    ${dropdownTokens.itemFontFamily}: var(${tokens.itemFontFamily});\n    ${dropdownTokens.itemFontSize}: var(${tokens.itemFontSize});\n    ${dropdownTokens.itemFontStyle}: var(${tokens.itemFontStyle});\n    ${dropdownTokens.itemFontWeightBold}: var(${tokens.itemFontWeightBold});\n    ${dropdownTokens.itemFontLetterSpacing}: var(${tokens.itemFontLetterSpacing});\n    ${dropdownTokens.itemFontLineHeight}: var(${tokens.itemFontLineHeight});\n    ${dropdownTokens.itemContentLeftWidth}: var(${tokens.itemContentLeftWidth});\n    ${dropdownTokens.itemContentRightWidth}: var(${tokens.itemContentRightWidth});\n`;\n\nexport const base = css`\n    ${dropdownItemBase};\n    ${mappingOverride};\n`;\n"],"names":["base"],"mappings":";;;;;;;;;;;;;AAwCO,IAAMA,IAAI,GAGhB;;;;"}

package/cjs/components/Combobox/ui/ComboboxItem/ComboboxItem.styles_936wgl.css

@@ -0,0 +1 @@
+.b1thh7ji{box-sizing:content-box;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;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;width:100%;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);width:var(--plasma-dropdown-item-width);height:var(--plasma-dropdown-item-height);padding:var(--plasma-dropdown-item-padding-top) var(--plasma-dropdown-item-padding-right) var(--plasma-dropdown-item-padding-bottom) var(--plasma-dropdown-item-padding-left);margin:var(--plasma-dropdown-item-margin-top) var(--plasma-dropdown-item-margin-right) var(--plasma-dropdown-item-margin-bottom) var(--plasma-dropdown-item-margin-left);--plasma-dropdown-item-background:var(--plasma-combobox-item-background);--plasma-dropdown-item-color:var(--plasma-combobox-item-color);--plasma-dropdown-item-background-hover:var(--plasma-combobox-item-background-hover);--plasma-dropdown-item-background-selected:var(--plasma-combobox-item-background-selected);--plasma-dropdown-item-color-selected:var(--plasma-combobox-item-color-selected);--plasma-dropdown-item-background-selected-hover:var(--plasma-combobox-item-background-selected-hover);--plasma-dropdown-item-color-selected-hover:var(--plasma-combobox-item-color-selected-hover);--plasma-dropdown-item-content-left-color:var(--plasma-combobox-item-content-left-color);--plasma-dropdown-item-content-right-color:var(--plasma-combobox-item-content-right-color);--plasma-dropdown-disabled-opacity:var(--plasma-combobox-disabled-opacity);--plasma-dropdown-focus-color:var(--plasma-combobox-focus-color);--plasma-dropdown-item-width:var(--plasma-combobox-item-width);--plasma-dropdown-item-height:var(--plasma-combobox-item-height);--plasma-dropdown-item-border-radius:var(--plasma-combobox-item-border-radius);--plasma-dropdown-item-padding-top:var(--plasma-combobox-item-padding-top);--plasma-dropdown-item-padding-right:var(--plasma-combobox-item-padding-right);--plasma-dropdown-item-padding-bottom:var(--plasma-combobox-item-padding-bottom);--plasma-dropdown-item-padding-left:var(--plasma-combobox-item-padding-left);--plasma-dropdown-item-margin-top:var(--plasma-combobox-item-margin-top);--plasma-dropdown-item-margin-right:var(--plasma-combobox-item-margin-right);--plasma-dropdown-item-margin-bottom:var(--plasma-combobox-item-margin-bottom);--plasma-dropdown-item-margin-left:var(--plasma-combobox-item-margin-left);--plasma-dropdown-item-font-family:var(--plasma-combobox-item-font-family);--plasma-dropdown-item-font-size:var(--plasma-combobox-item-font-size);--plasma-dropdown-item-font-style:var(--plasma-combobox-item-font-style);--plasma-dropdown-item-letter-spacing:var(--plasma-combobox-item-letter-spacing);--plasma-dropdown-item-line-height:var(--plasma-combobox-item-line-height);--plasma-dropdown-item-font-weight:var(--plasma-combobox-item-font-weight);--plasma-dropdown-item-content-left-width:var(--plasma-combobox-item-content-left-width);--plasma-dropdown-item-content-right-width:var(--plasma-combobox-item-content-right-width);}.b1thh7ji:focus{outline:none;}.b1thh7ji::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;}.b1thh7ji.focus-visible:focus::before,.b1thh7ji[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 0.0625rem var(--plasma-dropdown-focus-color);}.b1thh7ji:hover:not(.dropdown-item-is-disabled){cursor:pointer;background:var(--plasma-dropdown-item-background-hover);}.b1thh7ji.dropdown-item-is-selected{color:var(--plasma-dropdown-item-color-selected);background:var(--plasma-dropdown-item-background-selected);}.b1thh7ji.dropdown-item-is-selected:hover:not(.dropdown-item-is-disabled){background:var(--plasma-dropdown-item-background-selected-hover);}.b1thh7ji.dropdown-item-is-disabled{opacity:var(--plasma-dropdown-disabled-opacity);cursor:not-allowed;}

package/cjs/components/Dropdown/Dropdown.css

@@ -1,30 +1,7 @@
-.DropdownDivider_styles_v3xor1_s1brpi5d__3a791565{background:var(--plasma-dropdown-divider-color);width:var(--plasma-dropdown-divider-width);height:var(--plasma-dropdown-divider-height);margin:var(--plasma-dropdown-divider-margin-top) var(--plasma-dropdown-divider-margin-right) var(--plasma-dropdown-divider-margin-bottom) var(--plasma-dropdown-divider-margin-left);}
-
-.DropdownFooter_styles_1j4sg1p_stiw0r3__41ff7287{background:var(--plasma-dropdown-footer-background);font-family:var(--plasma-dropdown-footer-font-family);font-size:var(--plasma-dropdown-footer-font-size);font-style:var(--plasma-dropdown-footer-font-style);font-weight:var(--plasma-dropdown-footer-letter-spacing);-webkit-letter-spacing:var(--plasma-dropdown-footer-line-height);-moz-letter-spacing:var(--plasma-dropdown-footer-line-height);-ms-letter-spacing:var(--plasma-dropdown-footer-line-height);letter-spacing:var(--plasma-dropdown-footer-line-height);line-height:var(--plasma-dropdown-footer-font-weight);width:var(--plasma-dropdown-footer-width);height:var(--plasma-dropdown-footer-height);padding:var(--plasma-dropdown-footer-padding-top) var(--plasma-dropdown-footer-padding-right) var(--plasma-dropdown-footer-padding-bottom) var(--plasma-dropdown-footer-padding-left);margin:var(--plasma-dropdown-footer-margin-top) var(--plasma-dropdown-footer-margin-right) var(--plasma-dropdown-footer-margin-bottom) var(--plasma-dropdown-footer-margin-left);}
-
-.DropdownGroup_styles_1o990eo_scop7qk__fca8c58e{background:var(--plasma-dropdown-group-background);width:var(--plasma-dropdown-group-width);height:var(--plasma-dropdown-group-height);padding:var(--plasma-dropdown-group-padding-top) var(--plasma-dropdown-group-padding-right) var(--plasma-dropdown-group-padding-bottom) var(--plasma-dropdown-group-padding-left);margin:var(--plasma-dropdown-group-margin-top) var(--plasma-dropdown-group-margin-right) var(--plasma-dropdown-group-margin-bottom) var(--plasma-dropdown-group-margin-left);}
-.DropdownGroup_styles_1o990eo_s1oaw95y__fca8c58e{font-family:var(--plasma-dropdown-group-label-font-family);font-size:var(--plasma-dropdown-group-label-font-size);font-style:var(--plasma-dropdown-group-label-font-style);font-weight:var(--plasma-dropdown-group-label-font-weight);-webkit-letter-spacing:var(--plasma-dropdown-group-label-letter-spacing);-moz-letter-spacing:var(--plasma-dropdown-group-label-letter-spacing);-ms-letter-spacing:var(--plasma-dropdown-group-label-letter-spacing);letter-spacing:var(--plasma-dropdown-group-label-letter-spacing);line-height:var(--plasma-dropdown-group-label-line-height);color:var(--plasma-dropdown-group-label-color);padding:var(--plasma-dropdown-group-label-padding-top) var(--plasma-dropdown-group-label-padding-right) var(--plasma-dropdown-group-label-padding-bottom) var(--plasma-dropdown-group-label-padding-left);margin:var(--plasma-dropdown-group-label-margin-top) var(--plasma-dropdown-group-label-margin-right) var(--plasma-dropdown-group-label-margin-bottom) var(--plasma-dropdown-group-label-margin-left);}
-
-.DropdownHeader_styles_196gwgm_s133b1g2__3510806e{background:var(--plasma-dropdown-header-background);font-family:var(--plasma-dropdown-header-font-family);font-size:var(--plasma-dropdown-header-font-size);font-style:var(--plasma-dropdown-header-font-style);font-weight:var(--plasma-dropdown-header-letter-spacing);-webkit-letter-spacing:var(--plasma-dropdown-header-line-height);-moz-letter-spacing:var(--plasma-dropdown-header-line-height);-ms-letter-spacing:var(--plasma-dropdown-header-line-height);letter-spacing:var(--plasma-dropdown-header-line-height);line-height:var(--plasma-dropdown-header-font-weight);width:var(--plasma-dropdown-header-width);height:var(--plasma-dropdown-header-height);padding:var(--plasma-dropdown-header-padding-top) var(--plasma-dropdown-header-padding-right) var(--plasma-dropdown-header-padding-bottom) var(--plasma-dropdown-header-padding-left);margin:var(--plasma-dropdown-header-margin-top) var(--plasma-dropdown-header-margin-right) var(--plasma-dropdown-header-margin-bottom) var(--plasma-dropdown-header-margin-left);}
-
-.IconRoot_7pl7ig_svvlqhf__32c458a1{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;width:var(--svvlqhf-0);height:var(--svvlqhf-0);-webkit-flex:0 0 var(--svvlqhf-0);-ms-flex:0 0 var(--svvlqhf-0);flex:0 0 var(--svvlqhf-0);}
-
-.DropdownItem_styles_1o4szyu_s1gkzlls__6703745b{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}
-.DropdownItem_styles_1o4szyu_sz6s14y__6703745b{margin-left:auto;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}
-.DropdownItem_styles_1o4szyu_d1m97l2m__6703745b{line-height:0;color:var(--plasma-dropdown-disclosure-icon-color);}
-.DropdownItem_styles_1o4szyu_soib72h__6703745b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-flex:1;-ms-flex:1;flex:1;}
-.DropdownItem_styles_1o4szyu_w6l2f0g__6703745b{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;}.DropdownItem_styles_1o4szyu_w6l2f0g__6703745b:hover:not(.DropdownItem_styles_1o4szyu_dropdownItemIsDisabled__6703745b){cursor:pointer;background:var(--plasma-dropdown-item-background-hover);}.DropdownItem_styles_1o4szyu_w6l2f0g__6703745b.DropdownItem_styles_1o4szyu_dropdownItemIsActive__6703745b{background:var(--plasma-dropdown-item-background-hover);}.DropdownItem_styles_1o4szyu_w6l2f0g__6703745b.DropdownItem_styles_1o4szyu_dropdownItemIsDisabled__6703745b{opacity:var(--plasma-dropdown-disabled-opacity);cursor:not-allowed;}.DropdownItem_styles_1o4szyu_w6l2f0g__6703745b:focus{outline:none;}.DropdownItem_styles_1o4szyu_w6l2f0g__6703745b::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;}.DropdownItem_styles_1o4szyu_w6l2f0g__6703745b.DropdownItem_styles_1o4szyu_dropdownItemIsFocused__6703745b:before{outline:none;box-shadow:0 0 0 0.0625rem var(--plasma-dropdown-focus-color);}
-
-.DropdownItem_styles_12e50g5_s1iqs5in__94ac8eef{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;min-width:var(--plasma-dropdown-item-content-left-width);color:var(--plasma-dropdown-item-content-left-color);}
-.DropdownItem_styles_12e50g5_sfg3dyd__94ac8eef{margin-left:auto;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;min-width:var(--plasma-dropdown-item-content-right-width);color:var(--plasma-dropdown-item-content-right-color);}
-.DropdownItem_styles_12e50g5_s1dea6tl__94ac8eef{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
-.DropdownItem_styles_12e50g5_b1b2nce8__94ac8eef{box-sizing:content-box;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;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;width:auto;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);width:var(--plasma-dropdown-item-width);height:var(--plasma-dropdown-item-height);padding:var(--plasma-dropdown-item-padding-top) var(--plasma-dropdown-item-padding-right) var(--plasma-dropdown-item-padding-bottom) var(--plasma-dropdown-item-padding-left);margin:var(--plasma-dropdown-item-margin-top) var(--plasma-dropdown-item-margin-right) var(--plasma-dropdown-item-margin-bottom) var(--plasma-dropdown-item-margin-left);}.DropdownItem_styles_12e50g5_b1b2nce8__94ac8eef:focus{outline:none;}.DropdownItem_styles_12e50g5_b1b2nce8__94ac8eef::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;}.DropdownItem_styles_12e50g5_b1b2nce8__94ac8eef.DropdownItem_styles_12e50g5_focusVisible__94ac8eef:focus::before,.DropdownItem_styles_12e50g5_b1b2nce8__94ac8eef[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 0.0625rem var(--plasma-dropdown-focus-color);}.DropdownItem_styles_12e50g5_b1b2nce8__94ac8eef:hover:not(.DropdownItem_styles_12e50g5_dropdownItemIsDisabled__94ac8eef){cursor:pointer;background:var(--plasma-dropdown-item-background-hover);}.DropdownItem_styles_12e50g5_b1b2nce8__94ac8eef.DropdownItem_styles_12e50g5_dropdownItemIsSelected__94ac8eef{color:var(--plasma-dropdown-item-color-selected);background:var(--plasma-dropdown-item-background-selected);}.DropdownItem_styles_12e50g5_b1b2nce8__94ac8eef.DropdownItem_styles_12e50g5_dropdownItemIsSelected__94ac8eef:hover:not(.DropdownItem_styles_12e50g5_dropdownItemIsDisabled__94ac8eef){background:var(--plasma-dropdown-item-background-selected-hover);}.DropdownItem_styles_12e50g5_b1b2nce8__94ac8eef.DropdownItem_styles_12e50g5_dropdownItemIsDisabled__94ac8eef{opacity:var(--plasma-dropdown-disabled-opacity);cursor:not-allowed;}
-
 .Popover_styles_rmr9za_s1g1xbt5__0bafa6fb{display:inline-block;}
 .Popover_styles_rmr9za_s12xwbyh__0bafa6fb{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;box-sizing:border-box;position:relative;}
 .Popover_styles_rmr9za_s1pd4d8a__0bafa6fb{width:var(--plasma-popover-arrow-mask-width);height:var(--plasma-popover-arrow-mask-height);}.Popover_styles_rmr9za_s1pd4d8a__0bafa6fb::before{position:absolute;width:var(--plasma-popover-arrow-mask-width);height:var(--plasma-popover-arrow-mask-height);-webkit-mask-image:var(--plasma-popover-arrow-mask-image);mask-image:var(--plasma-popover-arrow-mask-image);background:var(--plasma-popover-arrow-background);content:'';-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}
 .Popover_styles_rmr9za_s16xlixz__0bafa6fb{position:absolute;z-index:var(--s16xlixz-0);}.Popover_styles_rmr9za_s16xlixz__0bafa6fb[data-popper-placement^='top'] > .Popover_styles_rmr9za_popoverArrow__0bafa6fb{bottom:calc(0px - var(--plasma-popover-arrow-height));}.Popover_styles_rmr9za_s16xlixz__0bafa6fb[data-popper-placement^='bottom'] > .Popover_styles_rmr9za_popoverArrow__0bafa6fb{top:calc(0px - var(--plasma-popover-arrow-height));}.Popover_styles_rmr9za_s16xlixz__0bafa6fb[data-popper-placement^='bottom'] > .Popover_styles_rmr9za_popoverArrow__0bafa6fb::before{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);}.Popover_styles_rmr9za_s16xlixz__0bafa6fb[data-popper-placement^='left'] > .Popover_styles_rmr9za_popoverArrow__0bafa6fb{right:calc(0px - var(--plasma-popover-arrow-height));}.Popover_styles_rmr9za_s16xlixz__0bafa6fb[data-popper-placement^='left'] > .Popover_styles_rmr9za_popoverArrow__0bafa6fb::before{-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg);}.Popover_styles_rmr9za_s16xlixz__0bafa6fb[data-popper-placement^='right'] > .Popover_styles_rmr9za_popoverArrow__0bafa6fb{left:calc(0px - var(--plasma-popover-arrow-height));}.Popover_styles_rmr9za_s16xlixz__0bafa6fb[data-popper-placement^='right'] > .Popover_styles_rmr9za_popoverArrow__0bafa6fb::before{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);}.Popover_styles_rmr9za_s16xlixz__0bafa6fb[data-popper-placement^='top-start'] > .Popover_styles_rmr9za_popoverArrow__0bafa6fb{bottom:calc(0px - var(--plasma-popover-arrow-height));left:var(--plasma-popover-arrow-edge-margin) !important;-webkit-transform:unset !important;-ms-transform:unset !important;transform:unset !important;}.Popover_styles_rmr9za_s16xlixz__0bafa6fb[data-popper-placement^='top-end'] > .Popover_styles_rmr9za_popoverArrow__0bafa6fb{bottom:calc(0px - var(--plasma-popover-arrow-height));left:unset !important;right:var(--plasma-popover-arrow-edge-margin) !important;-webkit-transform:unset !important;-ms-transform:unset !important;transform:unset !important;}.Popover_styles_rmr9za_s16xlixz__0bafa6fb[data-popper-placement^='bottom-start'] > .Popover_styles_rmr9za_popoverArrow__0bafa6fb{top:calc(0px - var(--plasma-popover-arrow-height));left:var(--plasma-popover-arrow-edge-margin) !important;-webkit-transform:unset !important;-ms-transform:unset !important;transform:unset !important;}.Popover_styles_rmr9za_s16xlixz__0bafa6fb[data-popper-placement^='bottom-start'] > .Popover_styles_rmr9za_popoverArrow__0bafa6fb::before{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);}.Popover_styles_rmr9za_s16xlixz__0bafa6fb[data-popper-placement^='bottom-end'] > .Popover_styles_rmr9za_popoverArrow__0bafa6fb{top:calc(0px - var(--plasma-popover-arrow-height));left:unset !important;right:var(--plasma-popover-arrow-edge-margin) !important;-webkit-transform:unset !important;-ms-transform:unset !important;transform:unset !important;}.Popover_styles_rmr9za_s16xlixz__0bafa6fb[data-popper-placement^='bottom-end'] > .Popover_styles_rmr9za_popoverArrow__0bafa6fb::before{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);}.Popover_styles_rmr9za_s16xlixz__0bafa6fb[data-popper-placement^='left-start'] > .Popover_styles_rmr9za_popoverArrow__0bafa6fb,.Popover_styles_rmr9za_s16xlixz__0bafa6fb[data-popper-placement^='right-start'] > .Popover_styles_rmr9za_popoverArrow__0bafa6fb{top:var(--plasma-popover-arrow-edge-margin) !important;-webkit-transform:unset !important;-ms-transform:unset !important;transform:unset !important;}.Popover_styles_rmr9za_s16xlixz__0bafa6fb[data-popper-placement^='left-end'] > .Popover_styles_rmr9za_popoverArrow__0bafa6fb,.Popover_styles_rmr9za_s16xlixz__0bafa6fb[data-popper-placement^='right-end'] > .Popover_styles_rmr9za_popoverArrow__0bafa6fb{top:unset !important;bottom:var(--plasma-popover-arrow-edge-margin) !important;-webkit-transform:unset !important;-ms-transform:unset !important;transform:unset !important;}
 
-.Dropdown_styles_1tihqkp_sn7uamp__39673f55 .Dropdown_styles_1tihqkp_popoverWrapper__39673f55,.Dropdown_styles_1tihqkp_sn7uamp__39673f55 .Dropdown_styles_1tihqkp_popoverTarget__39673f55{display:block;}
-.Dropdown_styles_1tihqkp_ujr7fmv__39673f55{box-sizing:border-box;background:var(--plasma-dropdown-background);box-shadow:var(--plasma-dropdown-box-shadow);border-radius:var(--plasma-dropdown-border-radius);width:var(--ujr7fmv-0);height:var(--ujr7fmv-1);overflow:var(--ujr7fmv-2);margin:var(--ujr7fmv-3);padding:var(--plasma-dropdown-padding);}
-.Dropdown_styles_1tihqkp_byfocd2__39673f55{display:inline-block;}
+.Dropdown_styles_1daxhqh_sn7uamp__488e0a19 .Dropdown_styles_1daxhqh_popoverTarget__488e0a19{display:block;}
+.Dropdown_styles_1daxhqh_sjr7fmv__488e0a19{box-sizing:border-box;background:var(--plasma-dropdown-background);box-shadow:var(--plasma-dropdown-box-shadow);border-radius:var(--plasma-dropdown-border-radius);width:var(--plasma-dropdown-width);height:var(--plasma-dropdown-height);padding:var(--plasma-dropdown-padding-top) var(--plasma-dropdown-padding-right) var(--plasma-dropdown-padding-bottom) var(--plasma-dropdown-padding-left);}

package/cjs/components/Dropdown/Dropdown.js

@@ -4,166 +4,82 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
-var index = require('../../utils/index.js');
-var pathReducer = require('./reducers/pathReducer.js');
-var focusedPathReducer = require('./reducers/focusedPathReducer.js');
-require('@salutejs/plasma-core');
-require('@linaria/react');
-var Dropdown_tokens = require('./Dropdown.tokens.js');
-var DropdownInner = require('./ui/DropdownInner/DropdownInner.js');
-var index$1 = require('./utils/index.js');
-require('focus-visible');
+var plasmaCore = require('@salutejs/plasma-core');
 var base = require('./variations/_view/base.js');
 var base$1 = require('./variations/_size/base.js');
 var Dropdown_styles = require('./Dropdown.styles.js');
-var useKeyboardNavigation = require('./hooks/useKeyboardNavigation.js');
-var useHashMaps = require('./hooks/useHashMaps.js');
-
-var _excluded = ["items", "children", "placement", "offset", "closeOnOverlayClick", "onToggle", "size", "view", "itemRole", "className", "listWidth", "listHeight", "listOverflow", "closeOnSelect", "onHover", "onItemSelect", "onItemClick", "trigger", "variant", "hasArrow"];
+var index = require('./utils/index.js');
 
+var _excluded = ["id", "target", "children", "hasArrow", "role", "view", "size", "frame", "onToggle", "isFocusTrapped", "isOpen", "placement", "trigger", "offset", "preventOverflow", "closeOnOverlayClick", "closeOnEsc"];
 /**
- * Выпадающий список.
+ * Выпадающий список без внешнего контроля видимости.
  */
 var dropdownRoot = function dropdownRoot(Root) {
-  return /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-    var items = _ref.items,
+  return /*#__PURE__*/React.forwardRef(function (_ref, outerRootRef) {
+    var id = _ref.id,
+      target = _ref.target,
       children = _ref.children,
-      _ref$placement = _ref.placement,
-      placement = _ref$placement === void 0 ? 'bottom' : _ref$placement,
-      _ref$offset = _ref.offset,
-      offset = _ref$offset === void 0 ? [0, 0] : _ref$offset,
-      _ref$closeOnOverlayCl = _ref.closeOnOverlayClick,
-      closeOnOverlayClick = _ref$closeOnOverlayCl === void 0 ? true : _ref$closeOnOverlayCl,
-      onToggle = _ref.onToggle,
-      size = _ref.size,
+      hasArrow = _ref.hasArrow,
+      role = _ref.role,
       view = _ref.view,
-      _ref$itemRole = _ref.itemRole,
-      itemRole = _ref$itemRole === void 0 ? 'option' : _ref$itemRole,
-      className = _ref.className,
-      listWidth = _ref.listWidth,
-      listHeight = _ref.listHeight,
-      listOverflow = _ref.listOverflow,
-      _ref$closeOnSelect = _ref.closeOnSelect,
-      closeOnSelect = _ref$closeOnSelect === void 0 ? true : _ref$closeOnSelect,
-      onHover = _ref.onHover,
-      onItemSelect = _ref.onItemSelect,
-      onItemClick = _ref.onItemClick,
+      size = _ref.size,
+      frame = _ref.frame,
+      _onToggle = _ref.onToggle,
+      _ref$isFocusTrapped = _ref.isFocusTrapped,
+      isFocusTrapped = _ref$isFocusTrapped === void 0 ? true : _ref$isFocusTrapped,
+      _ref$isOpen = _ref.isOpen,
+      isOpen = _ref$isOpen === void 0 ? false : _ref$isOpen,
+      _ref$placement = _ref.placement,
+      placement = _ref$placement === void 0 ? 'auto' : _ref$placement,
       _ref$trigger = _ref.trigger,
       trigger = _ref$trigger === void 0 ? 'click' : _ref$trigger,
-      _ref$variant = _ref.variant,
-      variant = _ref$variant === void 0 ? 'normal' : _ref$variant,
-      _ref$hasArrow = _ref.hasArrow,
-      hasArrow = _ref$hasArrow === void 0 ? true : _ref$hasArrow,
+      _ref$offset = _ref.offset,
+      offset = _ref$offset === void 0 ? [0, 6] : _ref$offset,
+      _ref$preventOverflow = _ref.preventOverflow,
+      preventOverflow = _ref$preventOverflow === void 0 ? false : _ref$preventOverflow,
+      _ref$closeOnOverlayCl = _ref.closeOnOverlayClick,
+      closeOnOverlayClick = _ref$closeOnOverlayCl === void 0 ? false : _ref$closeOnOverlayCl,
+      _ref$closeOnEsc = _ref.closeOnEsc,
+      closeOnEsc = _ref$closeOnEsc === void 0 ? false : _ref$closeOnEsc,
       rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-    var _useReducer = React.useReducer(pathReducer.pathReducer, []),
-      _useReducer2 = _rollupPluginBabelHelpers.slicedToArray(_useReducer, 2),
-      path = _useReducer2[0],
-      dispatchPath = _useReducer2[1];
-    var _useReducer3 = React.useReducer(focusedPathReducer.focusedPathReducer, []),
-      _useReducer4 = _rollupPluginBabelHelpers.slicedToArray(_useReducer3, 2),
-      focusedPath = _useReducer4[0],
-      dispatchFocusedPath = _useReducer4[1];
-    var _useHashMaps = useHashMaps.useHashMaps(items),
-      _useHashMaps2 = _rollupPluginBabelHelpers.slicedToArray(_useHashMaps, 2),
-      pathMap = _useHashMaps2[0],
-      focusedToValueMap = _useHashMaps2[1];
-    var handleGlobalToggle = function handleGlobalToggle(opened, event) {
-      if (opened) {
-        dispatchPath({
-          type: 'opened_first_level'
-        });
-      } else {
-        dispatchFocusedPath({
-          type: 'reset'
-        });
-        dispatchPath({
-          type: 'reset'
-        });
-      }
-      if (onToggle) {
-        onToggle(opened, event);
-      }
-    };
-    var _useKeyNavigation = useKeyboardNavigation.useKeyNavigation({
-        focusedPath: focusedPath,
-        dispatchFocusedPath: dispatchFocusedPath,
-        path: path,
-        dispatchPath: dispatchPath,
-        pathMap: pathMap,
-        focusedToValueMap: focusedToValueMap,
-        handleGlobalToggle: handleGlobalToggle,
-        closeOnSelect: closeOnSelect,
-        onItemSelect: onItemSelect,
-        onItemClick: onItemClick
-      }),
-      onKeyDown = _useKeyNavigation.onKeyDown;
-    var isCurrentListOpen = Boolean(path[0]);
-    var getActiveDescendant = function getActiveDescendant() {
-      var _focusedToValueMap$ge;
-      var focusedPathAsString = focusedPath.reduce(function (acc, n) {
-        return "".concat(acc, "/").concat(n);
-      }, '').replace(/^(\/)/, '');
-      return focusedToValueMap === null || focusedToValueMap === void 0 || (_focusedToValueMap$ge = focusedToValueMap.get(focusedPathAsString)) === null || _focusedToValueMap$ge === void 0 ? void 0 : _focusedToValueMap$ge.value.toString();
-    };
-    return /*#__PURE__*/React.createElement(Root, _rollupPluginBabelHelpers.extends({
-      className: index.cx(className, Dropdown_tokens.classes.dropdownRoot),
-      ref: ref,
-      view: view,
-      size: size,
-      items: items
-    }, rest), /*#__PURE__*/React.createElement(Dropdown_styles.StyledPopover, {
-      isOpen: isCurrentListOpen,
+    var uniqId = plasmaCore.useUniqId();
+    var innerId = id || uniqId;
+    var rootRef = React.useRef(null);
+    var dropdownRef = React.useRef(null);
+    var handleRef = plasmaCore.useForkRef(rootRef, outerRootRef);
+    var trapRef = plasmaCore.useFocusTrap(isOpen && isFocusTrapped);
+    var dropdownForkRef = plasmaCore.useForkRef(dropdownRef, trapRef);
+    return /*#__PURE__*/React.createElement(Dropdown_styles.StyledPopover, {
+      role: role,
+      isOpen: isOpen,
       usePortal: false,
-      onToggle: handleGlobalToggle,
+      onToggle: function onToggle(is, event) {
+        return _onToggle === null || _onToggle === void 0 ? void 0 : _onToggle(is, event);
+      },
+      id: innerId,
+      ref: dropdownForkRef,
+      target: target,
       offset: offset,
-      placement: index$1.getPlacements(placement),
+      preventOverflow: preventOverflow,
+      hasArrow: hasArrow,
+      placement: index.getPlacements(placement),
       trigger: trigger,
       closeOnOverlayClick: closeOnOverlayClick,
-      isFocusTrapped: false,
-      target: index$1.childrenWithProps(children, {
-        role: 'combobox',
-        'aria-controls': 'listbox1',
-        'aria-expanded': isCurrentListOpen,
-        'aria-haspopup': 'listbox',
-        'aria-activedescendant': getActiveDescendant(),
-        onKeyDown: onKeyDown
-      })
-    }, /*#__PURE__*/React.createElement(Dropdown_styles.Ul, {
-      listHeight: listHeight,
-      listOverflow: listOverflow,
-      role: "listbox",
-      id: "listbox1",
-      listWidth: listWidth
-    }, items.map(function (item, index) {
-      return /*#__PURE__*/React.createElement(DropdownInner.DropdownInner, {
-        key: "".concat(index, "/0"),
-        item: item,
-        currentLevel: 0,
-        focusedPath: focusedPath,
-        trigger: trigger,
-        path: path,
-        dispatchPath: dispatchPath,
-        index: index,
-        itemRole: itemRole,
-        listHeight: listHeight,
-        listOverflow: listOverflow,
-        handleGlobalToggle: handleGlobalToggle,
-        closeOnSelect: closeOnSelect,
-        onHover: onHover,
-        onItemSelect: onItemSelect,
-        onItemClick: onItemClick,
-        listWidth: listWidth,
-        variant: variant,
-        hasArrow: hasArrow
-      });
-    }))));
+      closeOnEsc: closeOnEsc,
+      isFocusTrapped: isFocusTrapped,
+      frame: frame
+    }, /*#__PURE__*/React.createElement(Root, _rollupPluginBabelHelpers.extends({
+      ref: handleRef,
+      view: view,
+      size: size
+    }, rest), /*#__PURE__*/React.createElement(Dropdown_styles.StyledDropdown, null, children)));
   });
 };
 var dropdownConfig = {
   name: 'Dropdown',
   tag: 'div',
   layout: dropdownRoot,
-  base: Dropdown_styles.base,
+  base: '',
   variations: {
     view: {
       css: base.base

package/cjs/components/Dropdown/Dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.js","sources":["../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import React, { forwardRef, useReducer } from 'react';\n\nimport { RootProps } from '../../engines';\nimport { cx } from '../../utils';\n\nimport { pathReducer } from './reducers/pathReducer';\nimport { focusedPathReducer } from './reducers/focusedPathReducer';\nimport { DropdownInner } from './ui';\nimport { base as viewCSS } from './variations/_view/base';\nimport { base as sizeCSS } from './variations/_size/base';\nimport { Ul, StyledPopover, base } from './Dropdown.styles';\nimport { getPlacements, childrenWithProps } from './utils';\nimport type { DropdownProps, HandleGlobalToggleType } from './Dropdown.types';\nimport { classes } from './Dropdown.tokens';\nimport { useKeyNavigation } from './hooks/useKeyboardNavigation';\nimport { useHashMaps } from './hooks/useHashMaps';\n\n/**\n * Выпадающий список.\n */\nexport const dropdownRoot = (Root: RootProps<HTMLDivElement, DropdownProps>) =>\n    forwardRef<HTMLDivElement, DropdownProps>(\n        (\n            {\n                items,\n                children,\n                placement = 'bottom',\n                offset = [0, 0],\n                closeOnOverlayClick = true,\n                onToggle,\n                size,\n                view,\n                itemRole = 'option',\n                className,\n                listWidth,\n                listHeight,\n                listOverflow,\n                closeOnSelect = true,\n                onHover,\n                onItemSelect,\n                onItemClick,\n                trigger = 'click',\n                variant = 'normal',\n                hasArrow = true,\n                ...rest\n            },\n            ref,\n        ) => {\n            const [path, dispatchPath] = useReducer(pathReducer, []);\n            const [focusedPath, dispatchFocusedPath] = useReducer(focusedPathReducer, []);\n\n            const [pathMap, focusedToValueMap] = useHashMaps(items);\n\n            const handleGlobalToggle: HandleGlobalToggleType = (opened, event) => {\n                if (opened) {\n                    dispatchPath({ type: 'opened_first_level' });\n                } else {\n                    dispatchFocusedPath({ type: 'reset' });\n                    dispatchPath({ type: 'reset' });\n                }\n\n                if (onToggle) {\n                    onToggle(opened, event);\n                }\n            };\n\n            const { onKeyDown } = useKeyNavigation({\n                focusedPath,\n                dispatchFocusedPath,\n                path,\n                dispatchPath,\n                pathMap,\n                focusedToValueMap,\n                handleGlobalToggle,\n                closeOnSelect,\n                onItemSelect,\n                onItemClick,\n            });\n\n            const isCurrentListOpen = Boolean(path[0]);\n\n            const getActiveDescendant = () => {\n                const focusedPathAsString = focusedPath.reduce((acc, n) => `${acc}/${n}`, '').replace(/^(\\/)/, '');\n                return focusedToValueMap?.get(focusedPathAsString)?.value.toString();\n            };\n\n            return (\n                <Root\n                    className={cx(className, classes.dropdownRoot)}\n                    ref={ref}\n                    view={view}\n                    size={size}\n                    items={items}\n                    {...rest}\n                >\n                    <StyledPopover\n                        isOpen={isCurrentListOpen}\n                        usePortal={false}\n                        onToggle={handleGlobalToggle}\n                        offset={offset}\n                        placement={getPlacements(placement)}\n                        trigger={trigger}\n                        closeOnOverlayClick={closeOnOverlayClick}\n                        isFocusTrapped={false}\n                        target={childrenWithProps(children, {\n                            role: 'combobox',\n                            'aria-controls': 'listbox1',\n                            'aria-expanded': isCurrentListOpen,\n                            'aria-haspopup': 'listbox',\n                            'aria-activedescendant': getActiveDescendant(),\n                            onKeyDown,\n                        })}\n                    >\n                        <Ul\n                            listHeight={listHeight}\n                            listOverflow={listOverflow}\n                            role=\"listbox\"\n                            id=\"listbox1\"\n                            listWidth={listWidth}\n                        >\n                            {items.map((item, index) => (\n                                <DropdownInner\n                                    key={`${index}/0`}\n                                    item={item}\n                                    currentLevel={0}\n                                    focusedPath={focusedPath}\n                                    trigger={trigger}\n                                    path={path}\n                                    dispatchPath={dispatchPath}\n                                    index={index}\n                                    itemRole={itemRole}\n                                    listHeight={listHeight}\n                                    listOverflow={listOverflow}\n                                    handleGlobalToggle={handleGlobalToggle}\n                                    closeOnSelect={closeOnSelect}\n                                    onHover={onHover}\n                                    onItemSelect={onItemSelect}\n                                    onItemClick={onItemClick}\n                                    listWidth={listWidth}\n                                    variant={variant}\n                                    hasArrow={hasArrow}\n                                />\n                            ))}\n                        </Ul>\n                    </StyledPopover>\n                </Root>\n            );\n        },\n    );\n\nexport const dropdownConfig = {\n    name: 'Dropdown',\n    tag: 'div',\n    layout: dropdownRoot,\n    base,\n    variations: {\n        view: {\n            css: viewCSS,\n        },\n        size: {\n            css: sizeCSS,\n        },\n    },\n    defaults: {\n        view: 'default',\n        size: 'm',\n    },\n};\n"],"names":["dropdownRoot","Root","forwardRef","_ref","ref","items","children","_ref$placement","placement","_ref$offset","offset","_ref$closeOnOverlayCl","closeOnOverlayClick","onToggle","size","view","_ref$itemRole","itemRole","className","listWidth","listHeight","listOverflow","_ref$closeOnSelect","closeOnSelect","onHover","onItemSelect","onItemClick","_ref$trigger","trigger","_ref$variant","variant","_ref$hasArrow","hasArrow","rest","_objectWithoutProperties","_excluded","_useReducer","useReducer","pathReducer","_useReducer2","_slicedToArray","path","dispatchPath","_useReducer3","focusedPathReducer","_useReducer4","focusedPath","dispatchFocusedPath","_useHashMaps","useHashMaps","_useHashMaps2","pathMap","focusedToValueMap","handleGlobalToggle","opened","event","type","_useKeyNavigation","useKeyNavigation","onKeyDown","isCurrentListOpen","Boolean","getActiveDescendant","_focusedToValueMap$ge","focusedPathAsString","reduce","acc","n","concat","replace","get","value","toString","React","createElement","_extends","cx","classes","StyledPopover","isOpen","usePortal","getPlacements","isFocusTrapped","target","childrenWithProps","role","Ul","id","map","item","index","DropdownInner","key","currentLevel","dropdownConfig","name","tag","layout","base","variations","css","viewCSS","sizeCSS","defaults"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAiBA;AACA;AACA;IACaA,YAAY,GAAG,SAAfA,YAAYA,CAAIC,IAA8C,EAAA;AAAA,EAAA,oBACvEC,gBAAU,CACN,UAAAC,IAAA,EAwBIC,GAAG,EACF;AAAA,IAAA,IAvBGC,KAAK,GAAAF,IAAA,CAALE,KAAK;MACLC,QAAQ,GAAAH,IAAA,CAARG,QAAQ;MAAAC,cAAA,GAAAJ,IAAA,CACRK,SAAS;AAATA,MAAAA,SAAS,GAAAD,cAAA,KAAG,KAAA,CAAA,GAAA,QAAQ,GAAAA,cAAA;MAAAE,WAAA,GAAAN,IAAA,CACpBO,MAAM;MAANA,MAAM,GAAAD,WAAA,KAAG,KAAA,CAAA,GAAA,CAAC,CAAC,EAAE,CAAC,CAAC,GAAAA,WAAA;MAAAE,qBAAA,GAAAR,IAAA,CACfS,mBAAmB;AAAnBA,MAAAA,mBAAmB,GAAAD,qBAAA,KAAG,KAAA,CAAA,GAAA,IAAI,GAAAA,qBAAA;MAC1BE,QAAQ,GAAAV,IAAA,CAARU,QAAQ;MACRC,IAAI,GAAAX,IAAA,CAAJW,IAAI;MACJC,IAAI,GAAAZ,IAAA,CAAJY,IAAI;MAAAC,aAAA,GAAAb,IAAA,CACJc,QAAQ;AAARA,MAAAA,QAAQ,GAAAD,aAAA,KAAG,KAAA,CAAA,GAAA,QAAQ,GAAAA,aAAA;MACnBE,SAAS,GAAAf,IAAA,CAATe,SAAS;MACTC,SAAS,GAAAhB,IAAA,CAATgB,SAAS;MACTC,UAAU,GAAAjB,IAAA,CAAViB,UAAU;MACVC,YAAY,GAAAlB,IAAA,CAAZkB,YAAY;MAAAC,kBAAA,GAAAnB,IAAA,CACZoB,aAAa;AAAbA,MAAAA,aAAa,GAAAD,kBAAA,KAAG,KAAA,CAAA,GAAA,IAAI,GAAAA,kBAAA;MACpBE,OAAO,GAAArB,IAAA,CAAPqB,OAAO;MACPC,YAAY,GAAAtB,IAAA,CAAZsB,YAAY;MACZC,WAAW,GAAAvB,IAAA,CAAXuB,WAAW;MAAAC,YAAA,GAAAxB,IAAA,CACXyB,OAAO;AAAPA,MAAAA,OAAO,GAAAD,YAAA,KAAG,KAAA,CAAA,GAAA,OAAO,GAAAA,YAAA;MAAAE,YAAA,GAAA1B,IAAA,CACjB2B,OAAO;AAAPA,MAAAA,OAAO,GAAAD,YAAA,KAAG,KAAA,CAAA,GAAA,QAAQ,GAAAA,YAAA;MAAAE,aAAA,GAAA5B,IAAA,CAClB6B,QAAQ;AAARA,MAAAA,QAAQ,GAAAD,aAAA,KAAG,KAAA,CAAA,GAAA,IAAI,GAAAA,aAAA;AACZE,MAAAA,IAAI,GAAAC,iDAAA,CAAA/B,IAAA,EAAAgC,SAAA,CAAA,CAAA;AAIX,IAAA,IAAAC,WAAA,GAA6BC,gBAAU,CAACC,uBAAW,EAAE,EAAE,CAAC;MAAAC,YAAA,GAAAC,uCAAA,CAAAJ,WAAA,EAAA,CAAA,CAAA;AAAjDK,MAAAA,IAAI,GAAAF,YAAA,CAAA,CAAA,CAAA;AAAEG,MAAAA,YAAY,GAAAH,YAAA,CAAA,CAAA,CAAA,CAAA;AACzB,IAAA,IAAAI,YAAA,GAA2CN,gBAAU,CAACO,qCAAkB,EAAE,EAAE,CAAC;MAAAC,YAAA,GAAAL,uCAAA,CAAAG,YAAA,EAAA,CAAA,CAAA;AAAtEG,MAAAA,WAAW,GAAAD,YAAA,CAAA,CAAA,CAAA;AAAEE,MAAAA,mBAAmB,GAAAF,YAAA,CAAA,CAAA,CAAA,CAAA;AAEvC,IAAA,IAAAG,YAAA,GAAqCC,uBAAW,CAAC5C,KAAK,CAAC;MAAA6C,aAAA,GAAAV,uCAAA,CAAAQ,YAAA,EAAA,CAAA,CAAA;AAAhDG,MAAAA,OAAO,GAAAD,aAAA,CAAA,CAAA,CAAA;AAAEE,MAAAA,iBAAiB,GAAAF,aAAA,CAAA,CAAA,CAAA,CAAA;IAEjC,IAAMG,kBAA0C,GAAG,SAA7CA,kBAA0CA,CAAIC,MAAM,EAAEC,KAAK,EAAK;AAClE,MAAA,IAAID,MAAM,EAAE;AACRZ,QAAAA,YAAY,CAAC;AAAEc,UAAAA,IAAI,EAAE,oBAAA;AAAqB,SAAC,CAAC,CAAA;AAChD,OAAC,MAAM;AACHT,QAAAA,mBAAmB,CAAC;AAAES,UAAAA,IAAI,EAAE,OAAA;AAAQ,SAAC,CAAC,CAAA;AACtCd,QAAAA,YAAY,CAAC;AAAEc,UAAAA,IAAI,EAAE,OAAA;AAAQ,SAAC,CAAC,CAAA;AACnC,OAAA;AAEA,MAAA,IAAI3C,QAAQ,EAAE;AACVA,QAAAA,QAAQ,CAACyC,MAAM,EAAEC,KAAK,CAAC,CAAA;AAC3B,OAAA;KACH,CAAA;IAED,IAAAE,iBAAA,GAAsBC,sCAAgB,CAAC;AACnCZ,QAAAA,WAAW,EAAXA,WAAW;AACXC,QAAAA,mBAAmB,EAAnBA,mBAAmB;AACnBN,QAAAA,IAAI,EAAJA,IAAI;AACJC,QAAAA,YAAY,EAAZA,YAAY;AACZS,QAAAA,OAAO,EAAPA,OAAO;AACPC,QAAAA,iBAAiB,EAAjBA,iBAAiB;AACjBC,QAAAA,kBAAkB,EAAlBA,kBAAkB;AAClB9B,QAAAA,aAAa,EAAbA,aAAa;AACbE,QAAAA,YAAY,EAAZA,YAAY;AACZC,QAAAA,WAAW,EAAXA,WAAAA;AACJ,OAAC,CAAC;MAXMiC,SAAS,GAAAF,iBAAA,CAATE,SAAS,CAAA;IAajB,IAAMC,iBAAiB,GAAGC,OAAO,CAACpB,IAAI,CAAC,CAAC,CAAC,CAAC,CAAA;AAE1C,IAAA,IAAMqB,mBAAmB,GAAG,SAAtBA,mBAAmBA,GAAS;AAAA,MAAA,IAAAC,qBAAA,CAAA;MAC9B,IAAMC,mBAAmB,GAAGlB,WAAW,CAACmB,MAAM,CAAC,UAACC,GAAG,EAAEC,CAAC,EAAA;AAAA,QAAA,OAAA,EAAA,CAAAC,MAAA,CAAQF,GAAG,EAAAE,GAAAA,CAAAA,CAAAA,MAAA,CAAID,CAAC,CAAA,CAAA;OAAE,EAAE,EAAE,CAAC,CAACE,OAAO,CAAC,OAAO,EAAE,EAAE,CAAC,CAAA;MAClG,OAAOjB,iBAAiB,aAAjBA,iBAAiB,KAAA,KAAA,CAAA,IAAA,CAAAW,qBAAA,GAAjBX,iBAAiB,CAAEkB,GAAG,CAACN,mBAAmB,CAAC,MAAA,IAAA,IAAAD,qBAAA,KAA3CA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,qBAAA,CAA6CQ,KAAK,CAACC,QAAQ,EAAE,CAAA;KACvE,CAAA;AAED,IAAA,oBACIC,KAAA,CAAAC,aAAA,CAACzE,IAAI,EAAA0E,iCAAA,CAAA;MACDzD,SAAS,EAAE0D,QAAE,CAAC1D,SAAS,EAAE2D,uBAAO,CAAC7E,YAAY,CAAE;AAC/CI,MAAAA,GAAG,EAAEA,GAAI;AACTW,MAAAA,IAAI,EAAEA,IAAK;AACXD,MAAAA,IAAI,EAAEA,IAAK;AACXT,MAAAA,KAAK,EAAEA,KAAAA;AAAM,KAAA,EACT4B,IAAI,CAERwC,eAAAA,KAAA,CAAAC,aAAA,CAACI,6BAAa,EAAA;AACVC,MAAAA,MAAM,EAAEnB,iBAAkB;AAC1BoB,MAAAA,SAAS,EAAE,KAAM;AACjBnE,MAAAA,QAAQ,EAAEwC,kBAAmB;AAC7B3C,MAAAA,MAAM,EAAEA,MAAO;AACfF,MAAAA,SAAS,EAAEyE,qBAAa,CAACzE,SAAS,CAAE;AACpCoB,MAAAA,OAAO,EAAEA,OAAQ;AACjBhB,MAAAA,mBAAmB,EAAEA,mBAAoB;AACzCsE,MAAAA,cAAc,EAAE,KAAM;AACtBC,MAAAA,MAAM,EAAEC,yBAAiB,CAAC9E,QAAQ,EAAE;AAChC+E,QAAAA,IAAI,EAAE,UAAU;AAChB,QAAA,eAAe,EAAE,UAAU;AAC3B,QAAA,eAAe,EAAEzB,iBAAiB;AAClC,QAAA,eAAe,EAAE,SAAS;QAC1B,uBAAuB,EAAEE,mBAAmB,EAAE;AAC9CH,QAAAA,SAAS,EAATA,SAAAA;OACH,CAAA;AAAE,KAAA,eAEHc,KAAA,CAAAC,aAAA,CAACY,kBAAE,EAAA;AACClE,MAAAA,UAAU,EAAEA,UAAW;AACvBC,MAAAA,YAAY,EAAEA,YAAa;AAC3BgE,MAAAA,IAAI,EAAC,SAAS;AACdE,MAAAA,EAAE,EAAC,UAAU;AACbpE,MAAAA,SAAS,EAAEA,SAAAA;AAAU,KAAA,EAEpBd,KAAK,CAACmF,GAAG,CAAC,UAACC,IAAI,EAAEC,KAAK,EAAA;AAAA,MAAA,oBACnBjB,KAAA,CAAAC,aAAA,CAACiB,2BAAa,EAAA;AACVC,QAAAA,GAAG,EAAAxB,EAAAA,CAAAA,MAAA,CAAKsB,KAAK,EAAK,IAAA,CAAA;AAClBD,QAAAA,IAAI,EAAEA,IAAK;AACXI,QAAAA,YAAY,EAAE,CAAE;AAChB/C,QAAAA,WAAW,EAAEA,WAAY;AACzBlB,QAAAA,OAAO,EAAEA,OAAQ;AACjBa,QAAAA,IAAI,EAAEA,IAAK;AACXC,QAAAA,YAAY,EAAEA,YAAa;AAC3BgD,QAAAA,KAAK,EAAEA,KAAM;AACbzE,QAAAA,QAAQ,EAAEA,QAAS;AACnBG,QAAAA,UAAU,EAAEA,UAAW;AACvBC,QAAAA,YAAY,EAAEA,YAAa;AAC3BgC,QAAAA,kBAAkB,EAAEA,kBAAmB;AACvC9B,QAAAA,aAAa,EAAEA,aAAc;AAC7BC,QAAAA,OAAO,EAAEA,OAAQ;AACjBC,QAAAA,YAAY,EAAEA,YAAa;AAC3BC,QAAAA,WAAW,EAAEA,WAAY;AACzBP,QAAAA,SAAS,EAAEA,SAAU;AACrBW,QAAAA,OAAO,EAAEA,OAAQ;AACjBE,QAAAA,QAAQ,EAAEA,QAAAA;AAAS,OACtB,CAAC,CAAA;KACL,CACD,CACO,CACb,CAAC,CAAA;AAEf,GACJ,CAAC,CAAA;AAAA,EAAA;AAEE,IAAM8D,cAAc,GAAG;AAC1BC,EAAAA,IAAI,EAAE,UAAU;AAChBC,EAAAA,GAAG,EAAE,KAAK;AACVC,EAAAA,MAAM,EAAEjG,YAAY;AACpBkG,EAAAA,IAAI,EAAJA,oBAAI;AACJC,EAAAA,UAAU,EAAE;AACRpF,IAAAA,IAAI,EAAE;AACFqF,MAAAA,GAAG,EAAEC,SAAAA;KACR;AACDvF,IAAAA,IAAI,EAAE;AACFsF,MAAAA,GAAG,EAAEE,WAAAA;AACT,KAAA;GACH;AACDC,EAAAA,QAAQ,EAAE;AACNxF,IAAAA,IAAI,EAAE,SAAS;AACfD,IAAAA,IAAI,EAAE,GAAA;AACV,GAAA;AACJ;;;;;"}
+{"version":3,"file":"Dropdown.js","sources":["../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import React, { forwardRef, useRef } from 'react';\nimport { useFocusTrap, useForkRef, useUniqId } from '@salutejs/plasma-core';\n\nimport { RootProps } from '../../engines';\n\nimport { base as viewCSS } from './variations/_view/base';\nimport { base as sizeCSS } from './variations/_size/base';\nimport { StyledDropdown, StyledPopover } from './Dropdown.styles';\nimport { getPlacements } from './utils';\nimport type { DropdownProps } from './Dropdown.types';\n\n/**\n * Выпадающий список без внешнего контроля видимости.\n */\nexport const dropdownRoot = (Root: RootProps<HTMLDivElement, DropdownProps>) =>\n    forwardRef<HTMLDivElement, DropdownProps>(\n        (\n            {\n                id,\n                target,\n                children,\n                hasArrow,\n                role,\n                view,\n                size,\n                frame,\n                onToggle,\n                isFocusTrapped = true,\n                isOpen = false,\n                placement = 'auto',\n                trigger = 'click',\n                offset = [0, 6],\n                preventOverflow = false,\n                closeOnOverlayClick = false,\n                closeOnEsc = false,\n                ...rest\n            },\n            outerRootRef,\n        ) => {\n            const uniqId = useUniqId();\n            const innerId = id || uniqId;\n\n            const rootRef = useRef<HTMLDivElement | null>(null);\n            const dropdownRef = useRef<HTMLDivElement | null>(null);\n            const handleRef = useForkRef<HTMLDivElement>(rootRef, outerRootRef);\n\n            const trapRef = useFocusTrap(isOpen && isFocusTrapped);\n\n            const dropdownForkRef = useForkRef<HTMLDivElement>(dropdownRef, trapRef);\n\n            return (\n                <StyledPopover\n                    role={role}\n                    isOpen={isOpen}\n                    usePortal={false}\n                    onToggle={(is, event) => onToggle?.(is, event)}\n                    id={innerId}\n                    ref={dropdownForkRef}\n                    target={target}\n                    offset={offset}\n                    preventOverflow={preventOverflow}\n                    hasArrow={hasArrow}\n                    placement={getPlacements(placement)}\n                    trigger={trigger}\n                    closeOnOverlayClick={closeOnOverlayClick}\n                    closeOnEsc={closeOnEsc}\n                    isFocusTrapped={isFocusTrapped}\n                    frame={frame}\n                >\n                    <Root ref={handleRef} view={view} size={size} {...rest}>\n                        <StyledDropdown>{children}</StyledDropdown>\n                    </Root>\n                </StyledPopover>\n            );\n        },\n    );\n\nexport const dropdownConfig = {\n    name: 'Dropdown',\n    tag: 'div',\n    layout: dropdownRoot,\n    base: '',\n    variations: {\n        view: {\n            css: viewCSS,\n        },\n        size: {\n            css: sizeCSS,\n        },\n    },\n    defaults: {\n        view: 'default',\n        size: 'm',\n    },\n};\n"],"names":["dropdownRoot","Root","forwardRef","_ref","outerRootRef","id","target","children","hasArrow","role","view","size","frame","onToggle","_ref$isFocusTrapped","isFocusTrapped","_ref$isOpen","isOpen","_ref$placement","placement","_ref$trigger","trigger","_ref$offset","offset","_ref$preventOverflow","preventOverflow","_ref$closeOnOverlayCl","closeOnOverlayClick","_ref$closeOnEsc","closeOnEsc","rest","_objectWithoutProperties","_excluded","uniqId","useUniqId","innerId","rootRef","useRef","dropdownRef","handleRef","useForkRef","trapRef","useFocusTrap","dropdownForkRef","React","createElement","StyledPopover","usePortal","is","event","ref","getPlacements","_extends","StyledDropdown","dropdownConfig","name","tag","layout","base","variations","css","viewCSS","sizeCSS","defaults"],"mappings":"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"}

package/cjs/components/Dropdown/Dropdown.styles.js

@@ -1,4 +1,4 @@
-import './Dropdown.styles_1tihqkp.css';
+import './Dropdown.styles_1daxhqh.css';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
@@ -7,9 +7,8 @@ var react = require('@linaria/react');
 require('@linaria/core');
 var common = require('../../engines/common.js');
 var Popover$1 = require('../Popover/Popover.js');
-var index = require('./utils/index.js');
-var Dropdown_tokens = require('./Dropdown.tokens.js');
 
+// issue #823
 var Popover = /*#__PURE__*/common.component(Popover$1.popoverConfig);
 var _exp = function _exp() {
   return Popover;
@@ -19,44 +18,12 @@ var StyledPopover = /*#__PURE__*/react.styled(_exp())({
   "class": "sn7uamp",
   propsAsIs: true
 });
-var _exp7 = function _exp7() {
-  return function (_ref) {
-    var listWidth = _ref.listWidth;
-    return listWidth || "var(".concat(Dropdown_tokens.tokens.width, ")");
-  };
-};
-var _exp8 = function _exp8() {
-  return function (_ref2) {
-    var listHeight = _ref2.listHeight;
-    return listHeight ? index.getCorrectHeight(listHeight) : 'auto';
-  };
-};
-var _exp9 = function _exp9() {
-  return function (_ref3) {
-    var listOverflow = _ref3.listOverflow;
-    return listOverflow || 'initial';
-  };
-};
-var _exp10 = function _exp10() {
-  return function (_ref4) {
-    var isInnerUl = _ref4.isInnerUl;
-    return isInnerUl ? "calc(var(".concat(Dropdown_tokens.tokens.padding, ") * -1) 0 0 var(").concat(Dropdown_tokens.tokens.padding, ")") : 0;
-  };
-};
-var Ul = /*#__PURE__*/react.styled('ul')({
-  name: "Ul",
-  "class": "ujr7fmv",
-  propsAsIs: false,
-  vars: {
-    "ujr7fmv-0": [/*#__PURE__*/_exp7()],
-    "ujr7fmv-1": [/*#__PURE__*/_exp8()],
-    "ujr7fmv-2": [/*#__PURE__*/_exp9()],
-    "ujr7fmv-3": [/*#__PURE__*/_exp10()]
-  }
+var StyledDropdown = /*#__PURE__*/react.styled('div')({
+  name: "StyledDropdown",
+  "class": "sjr7fmv",
+  propsAsIs: false
 });
-var base = "byfocd2";
 
+exports.StyledDropdown = StyledDropdown;
 exports.StyledPopover = StyledPopover;
-exports.Ul = Ul;
-exports.base = base;
 //# sourceMappingURL=Dropdown.styles.js.map

package/cjs/components/Dropdown/Dropdown.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.styles.js","sources":["../../../src/components/Dropdown/Dropdown.styles.ts"],"sourcesContent":["import { styled } from '@linaria/react';\nimport { css } from '@linaria/core';\n\nimport { component } from '../../engines';\nimport { popoverConfig, popoverClasses } from '../Popover';\n\nimport { getCorrectHeight } from './utils';\nimport { DropdownProps } from './Dropdown.types';\nimport { tokens } from './Dropdown.tokens';\n\nconst Popover = component(popoverConfig);\n\nexport const StyledPopover = styled(Popover)`\n    .${String(popoverClasses.wrapper)}, .${String(popoverClasses.target)} {\n        display: block;\n    }\n`;\n\nexport const Ul = styled.ul<{\n    listHeight: DropdownProps['listHeight'];\n    listOverflow: DropdownProps['listOverflow'];\n    isInnerUl?: boolean;\n    listWidth?: DropdownProps['listWidth'];\n}>`\n    box-sizing: border-box;\n\n    background: var(${tokens.background});\n    box-shadow: var(${tokens.boxShadow});\n\n    border-radius: var(${tokens.borderRadius});\n    width: ${({ listWidth }) => listWidth || `var(${tokens.width})`};\n    height: ${({ listHeight }) => (listHeight ? getCorrectHeight(listHeight) : 'auto')};\n    overflow: ${({ listOverflow }) => listOverflow || 'initial'};\n\n    margin: ${({ isInnerUl }) => (isInnerUl ? `calc(var(${tokens.padding}) * -1) 0 0 var(${tokens.padding})` : 0)};\n    padding: var(${tokens.padding});\n`;\n\nexport const base = css`\n    display: inline-block;\n`;\n"],"names":["Popover","component","popoverConfig","_exp","StyledPopover","styled","name","class","propsAsIs","_exp7","_ref","listWidth","concat","tokens","width","_exp8","_ref2","listHeight","getCorrectHeight","_exp9","_ref3","listOverflow","_exp10","_ref4","isInnerUl","padding","Ul","vars","base"],"mappings":";;;;;;;;;;;AAUA,IAAMA,OAAO,gBAAGC,gBAAS,CAACC,uBAAa,CAAC,CAAA;AAAC,IAAAC,IAAA,GATvBA,SASuBA,IAAAA,GAAA;AAAA,EAAA,OAELH,OAAO,CAAA;AAAA,CAAA,CAAA;AAApC,IAAMI,aAAa,gBAAGC,YAAM,CAAAF,IAAA,EAAA,CAAA,CAAA;AAAAG,EAAAA,IAAA,EAAA,eAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,IAAA;AAAA,CAIlC,EAAA;AAAC,IAAAC,KAAA,GAfgBA,SAehBA,KAAAA,GAAA;AAAA,EAAA,OAcW,UAAAC,IAAA,EAAA;AAAA,IAAA,IAAGC,SAAAA,GAAAA,IAAAA,CAAAA,SAAAA,CAAAA;AAAAA,IAAAA,OAAgBA,SAAS,IAAAC,MAAAA,CAAAA,MAAA,CAAWC,sBAAM,CAACC,KAAM,EAAE,GAAA,CAAA,CAAA;AAAA,GAAA,CAAA;AAAA,CAAA,CAAA;AAAA,IAAAC,KAAA,GA7BjDA,SA6BiDA,KAAAA,GAAA;AAAA,EAAA,OACrD,UAAAC,KAAA,EAAA;AAAA,IAAA,IAAGC,UAAAA,GAAAA,KAAAA,CAAAA,UAAAA,CAAAA;AAAAA,IAAAA,OAAkBA,UAAU,GAAGC,sBAAgB,CAACD,UAAU,CAAC,GAAG,MAAO,CAAA;AAAA,GAAA,CAAA;AAAA,CAAA,CAAA;AAAA,IAAAE,KAAA,GA9BpEA,SA8BoEA,KAAAA,GAAA;AAAA,EAAA,OACtE,UAAAC,KAAA,EAAA;AAAA,IAAA,IAAGC,YAAAA,GAAAA,KAAAA,CAAAA,YAAAA,CAAAA;IAAAA,OAAmBA,YAAY,IAAI,SAAS,CAAA;AAAA,GAAA,CAAA;AAAA,CAAA,CAAA;AAAA,IAAAC,MAAA,GA/B7CA,SA+B6CA,MAAAA,GAAA;AAAA,EAAA,OAEjD,UAAAC,KAAA,EAAA;AAAA,IAAA,IAAGC,SAAAA,GAAAA,KAAAA,CAAAA,SAAAA,CAAAA;AAAAA,IAAAA,OAAiBA,SAAS,GAAA,WAAA,CAAAZ,MAAA,CAAeC,sBAAM,CAACY,OAAQ,EAAAb,kBAAAA,CAAAA,CAAAA,MAAA,CAAkBC,sBAAM,CAACY,OAAQ,SAAK,CAAE,CAAA;AAAA,GAAA,CAAA;AAAA,CAAA,CAAA;AAhB1G,IAAMC,EAAE,gBAAGrB,YAAM,CAAA,IAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,IAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAAmB,EAAAA,IAAA,EAAA;AAAA,IAAA,WAAA,EAAA,cAYXlB,KAAsD,EAAA,CAAA;AAAA,IAAA,WAAA,EAAA,cACrDM,KAAwE,EAAA,CAAA;AAAA,IAAA,WAAA,EAAA,cACtEI,KAA+C,EAAA,CAAA;AAAA,IAAA,WAAA,EAAA,cAEjDG,MAAmG,EAAA,CAAA;AAAA,GAAA;AAAA,CAEhH,EAAA;AAEM,IAAMM,IAAI,GAEhB;;;;;;"}
+{"version":3,"file":"Dropdown.styles.js","sources":["../../../src/components/Dropdown/Dropdown.styles.ts"],"sourcesContent":["import { styled } from '@linaria/react';\n\nimport { component } from '../../engines';\nimport { popoverConfig, popoverClasses } from '../Popover';\n\nimport { tokens } from './Dropdown.tokens';\n\n// issue #823\nconst Popover = component(popoverConfig);\n\nexport const StyledPopover = styled(Popover)`\n    .${String(popoverClasses.target)} {\n        display: block;\n    }\n`;\n\nexport const StyledDropdown = styled.div`\n    box-sizing: border-box;\n\n    background: var(${tokens.background});\n    box-shadow: var(${tokens.boxShadow});\n\n    border-radius: var(${tokens.borderRadius});\n    width: var(${tokens.width});\n    height: var(${tokens.height});\n\n    padding: var(${tokens.paddingTop}) var(${tokens.paddingRight}) var(${tokens.paddingBottom})\n        var(${tokens.paddingLeft});\n`;\n"],"names":["Popover","component","popoverConfig","_exp","StyledPopover","styled","name","class","propsAsIs","StyledDropdown"],"mappings":";;;;;;;;;AAOA;AACA,IAAMA,OAAO,gBAAGC,gBAAS,CAACC,uBAAa,CAAC,CAAA;AAAC,IAAAC,IAAA,GAPvBA,SAOuBA,IAAAA,GAAA;AAAA,EAAA,OAELH,OAAO,CAAA;AAAA,CAAA,CAAA;AAApC,IAAMI,aAAa,gBAAGC,YAAM,CAAAF,IAAA,EAAA,CAAA,CAAA;AAAAG,EAAAA,IAAA,EAAA,eAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,IAAA;AAAA,CAIlC,EAAA;AAEM,IAAMC,cAAc,gBAAGJ,YAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,gBAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAYnC;;;;;"}

package/cjs/components/Dropdown/Dropdown.styles_1daxhqh.css

@@ -0,0 +1,2 @@
+.sn7uamp .popover-target{display:block;}
+.sjr7fmv{box-sizing:border-box;background:var(--plasma-dropdown-background);box-shadow:var(--plasma-dropdown-box-shadow);border-radius:var(--plasma-dropdown-border-radius);width:var(--plasma-dropdown-width);height:var(--plasma-dropdown-height);padding:var(--plasma-dropdown-padding-top) var(--plasma-dropdown-padding-right) var(--plasma-dropdown-padding-bottom) var(--plasma-dropdown-padding-left);}

package/cjs/components/Dropdown/Dropdown.tokens.js

@@ -3,38 +3,47 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var classes = {
-  dropdownRoot: 'dropdown-root',
-  dropdownItemIsFocused: 'dropdown-item-is-focused',
-  dropdownItemIsDisabled: 'dropdown-item-is-disabled',
-  dropdownItemIsActive: 'dropdown-item-is-active',
-  dropdownItemIsSelected: 'dropdownItemIsSelected'
+  dropdownItemIsSelected: 'dropdown-item-is-selected',
+  dropdownItemIsDisabled: 'dropdown-item-is-disabled'
 };
 var tokens = {
   background: '--plasma-dropdown-background',
   boxShadow: '--plasma-dropdown-box-shadow',
   width: '--plasma-dropdown-width',
+  height: '--plasma-dropdown-height',
   borderRadius: '--plasma-dropdown-border-radius',
-  padding: '--plasma-dropdown-padding',
-  disclosureIconColor: '--plasma-dropdown-disclosure-icon-color',
+  paddingTop: '--plasma-dropdown-padding-top',
+  paddingRight: '--plasma-dropdown-padding-right',
+  paddingBottom: '--plasma-dropdown-padding-bottom',
+  paddingLeft: '--plasma-dropdown-padding-left',
   itemBackground: '--plasma-dropdown-item-background',
   itemColor: '--plasma-dropdown-item-color',
   itemBackgroundHover: '--plasma-dropdown-item-background-hover',
+  itemBackgroundSelected: '--plasma-dropdown-item-background-selected',
+  itemColorSelected: '--plasma-dropdown-item-color-selected',
+  itemBackgroundSelectedHover: '--plasma-dropdown-item-background-selected-hover',
+  itemColorSelectedHover: '--plasma-dropdown-item-color-selected-hover',
+  itemWidth: '--plasma-dropdown-item-width',
+  itemHeight: '--plasma-dropdown-item-height',
   itemBorderRadius: '--plasma-dropdown-item-border-radius',
   itemPaddingTop: '--plasma-dropdown-item-padding-top',
-  itemPaddingTopTight: '--plasma-dropdown-item-padding-top-tight',
   itemPaddingRight: '--plasma-dropdown-item-padding-right',
   itemPaddingBottom: '--plasma-dropdown-item-padding-bottom',
-  itemPaddingBottomTight: '--plasma-dropdown-item-padding-bottom-tight',
   itemPaddingLeft: '--plasma-dropdown-item-padding-left',
+  itemMarginTop: '--plasma-dropdown-item-margin-top',
+  itemMarginRight: '--plasma-dropdown-item-margin-right',
+  itemMarginBottom: '--plasma-dropdown-item-margin-bottom',
+  itemMarginLeft: '--plasma-dropdown-item-margin-left',
   itemFontFamily: '--plasma-dropdown-item-font-family',
   itemFontSize: '--plasma-dropdown-item-font-size',
   itemFontStyle: '--plasma-dropdown-item-font-style',
   itemFontWeightBold: '--plasma-dropdown-item-letter-spacing',
   itemFontLetterSpacing: '--plasma-dropdown-item-line-height',
   itemFontLineHeight: '--plasma-dropdown-item-font-weight',
-  disabledOpacity: '--plasma-dropdown-disabled-opacity',
-  focusColor: '--plasma-dropdown-focus-color',
-  // TODO: Remove below tokens as soon as they are no longer needed
+  itemContentLeftColor: '--plasma-dropdown-item-content-left-color',
+  itemContentRightColor: '--plasma-dropdown-item-content-right-color',
+  itemContentLeftWidth: '--plasma-dropdown-item-content-left-width',
+  itemContentRightWidth: '--plasma-dropdown-item-content-right-width',
   footerBackground: '--plasma-dropdown-footer-background',
   footerWidth: '--plasma-dropdown-footer-width',
   footerHeight: '--plasma-dropdown-footer-height',
@@ -102,20 +111,8 @@ var tokens = {
   groupLabelMarginRight: '--plasma-dropdown-group-label-margin-right',
   groupLabelMarginBottom: '--plasma-dropdown-group-label-margin-bottom',
   groupLabelMarginLeft: '--plasma-dropdown-group-label-margin-left',
-  itemBackgroundSelected: '--plasma-dropdown-item-background-selected',
-  itemColorSelected: '--plasma-dropdown-item-color-selected',
-  itemBackgroundSelectedHover: '--plasma-dropdown-item-background-selected-hover',
-  itemColorSelectedHover: '--plasma-dropdown-item-color-selected-hover',
-  itemContentLeftColor: '--plasma-dropdown-item-content-left-color',
-  itemContentRightColor: '--plasma-dropdown-item-content-right-color',
-  itemWidth: '--plasma-dropdown-item-width',
-  itemHeight: '--plasma-dropdown-item-height',
-  itemMarginTop: '--plasma-dropdown-item-margin-top',
-  itemMarginRight: '--plasma-dropdown-item-margin-right',
-  itemMarginBottom: '--plasma-dropdown-item-margin-bottom',
-  itemMarginLeft: '--plasma-dropdown-item-margin-left',
-  itemContentLeftWidth: '--plasma-dropdown-item-content-left-width',
-  itemContentRightWidth: '--plasma-dropdown-item-content-right-width'
+  disabledOpacity: '--plasma-dropdown-disabled-opacity',
+  focusColor: '--plasma-dropdown-focus-color'
 };
 
 exports.classes = classes;