@salutejs/plasma-new-hope 0.78.0-canary.1185.8913944828.0 → 0.78.0-canary.1195.8913931601.0

package/styled-components/es/components/Dropdown/ui/DropdownItem/DropdownItem.styles.js

@@ -1,41 +1,25 @@
+var _templateObject;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+import { css } from 'styled-components';
 import styled from 'styled-components';
 import { classes, tokens } from '../../Dropdown.tokens';
 import { addFocus, applyEllipsis } from '../../../../mixins';
 export var StyledContentLeft = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-hs0ek1-0"
-})(["display:inline-flex;"]);
+})(["display:inline-flex;min-width:var(", ");color:var(", ");"], tokens.itemContentLeftWidth, tokens.itemContentLeftColor);
 export var StyledContentRight = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-hs0ek1-1"
-})(["margin-left:auto;display:inline-flex;"]);
-export var DisclosureIconWrapper = /*#__PURE__*/styled.div.withConfig({
-  componentId: "plasma-new-hope__sc-hs0ek1-2"
-})(["line-height:0;color:var(", ");"], tokens.disclosureIconColor);
+})(["margin-left:auto;display:inline-flex;min-width:var(", ");color:var(", ");"], tokens.itemContentRightWidth, tokens.itemContentRightColor);
 export var StyledText = /*#__PURE__*/styled.div.withConfig({
-  componentId: "plasma-new-hope__sc-hs0ek1-3"
-})(["", ";flex:1;"], /*#__PURE__*/applyEllipsis());
+  componentId: "plasma-new-hope__sc-hs0ek1-2"
+})(["", ";"], /*#__PURE__*/applyEllipsis());
 
-// TODO: Remove baseContent after refactoring a Select component
+// INFO: Для возможности переиспользования стилей в других компонентах
 export var baseContent = /*#__PURE__*/"\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    ".concat(addFocus({
   outlineSize: '0.0625rem',
   outlineOffset: '0',
   outlineColor: "var(".concat(tokens.focusColor, ")"),
   outlineRadius: "var(".concat(tokens.itemBorderRadius, ")"),
-  hasTransition: false,
-  customFocusRules: "\n            &.".concat(classes.dropdownItemIsFocused, ":before {\n                outline: none;\n                box-shadow: 0 0 0 0.0625rem var(").concat(tokens.focusColor, ");\n            }\n        ")
-}), ";\n\n    width: 100%;\n\n    font-family: var(").concat(tokens.itemFontFamily, ");\n    font-size: var(").concat(tokens.itemFontSize, ");\n    font-style: var(").concat(tokens.itemFontStyle, ");\n    font-weight: var(").concat(tokens.itemFontWeightBold, ");\n    letter-spacing: var(").concat(tokens.itemFontLetterSpacing, ");\n    line-height: var(").concat(tokens.itemFontLineHeight, ");\n\n    background: var(").concat(tokens.itemBackground, ");\n    color: var(").concat(tokens.itemColor, ");\n    border-radius: var(").concat(tokens.itemBorderRadius, ");\n\n    padding: var(").concat(tokens.itemPaddingTop, ") var(").concat(tokens.itemPaddingRight, ") var(").concat(tokens.itemPaddingBottom, ") var(").concat(tokens.itemPaddingLeft, ");\n\n    margin: 0;\n\n    &:hover:not(.").concat(classes.dropdownItemIsDisabled, ") {\n        cursor: pointer;\n        background: var(").concat(tokens.itemBackgroundHover, ");\n    }\n\n    &.").concat(classes.dropdownItemIsActive, " {\n        background: var(").concat(tokens.itemBackgroundHover, ");\n    }\n\n    &.").concat(classes.dropdownItemIsDisabled, " {\n        opacity: var(").concat(tokens.disabledOpacity, ");\n        cursor: not-allowed;\n    }\n");
-export var Wrapper = /*#__PURE__*/styled.li.withConfig({
-  componentId: "plasma-new-hope__sc-hs0ek1-4"
-})(["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 (_ref) {
-  var variant = _ref.variant;
-  return "var(".concat(variant === 'tight' ? tokens.itemPaddingTopTight : tokens.itemPaddingTop, ")");
-}, tokens.itemPaddingRight, function (_ref2) {
-  var variant = _ref2.variant;
-  return "var(".concat(variant === 'tight' ? tokens.itemPaddingBottomTight : tokens.itemPaddingBottom, ")");
-}, 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({
-  outlineSize: '0.0625rem',
-  outlineOffset: '0',
-  outlineColor: /*#__PURE__*/"var(".concat(tokens.focusColor, ")"),
-  outlineRadius: /*#__PURE__*/"var(".concat(tokens.itemBorderRadius, ")"),
-  hasTransition: false,
-  customFocusRules: /*#__PURE__*/"\n            &.".concat(classes.dropdownItemIsFocused, ":before {\n                outline: none;\n                box-shadow: 0 0 0 0.0625rem var(").concat(tokens.focusColor, ");\n            }\n        ")
-}));
+  hasTransition: false
+}), ";\n\n    width: 100%;\n\n    font-family: var(").concat(tokens.itemFontFamily, ");\n    font-size: var(").concat(tokens.itemFontSize, ");\n    font-style: var(").concat(tokens.itemFontStyle, ");\n    font-weight: var(").concat(tokens.itemFontWeightBold, ");\n    letter-spacing: var(").concat(tokens.itemFontLetterSpacing, ");\n    line-height: var(").concat(tokens.itemFontLineHeight, ");\n\n    background: var(").concat(tokens.itemBackground, ");\n    color: var(").concat(tokens.itemColor, ");\n    border-radius: var(").concat(tokens.itemBorderRadius, ");\n\n    width: var(").concat(tokens.itemWidth, ");\n    height: var(").concat(tokens.itemHeight, ");\n\n    padding: var(").concat(tokens.itemPaddingTop, ") var(").concat(tokens.itemPaddingRight, ") var(").concat(tokens.itemPaddingBottom, ")\n        var(").concat(tokens.itemPaddingLeft, ");\n\n    margin: var(").concat(tokens.itemMarginTop, ") var(").concat(tokens.itemMarginRight, ") var(").concat(tokens.itemMarginBottom, ")\n        var(").concat(tokens.itemMarginLeft, ");\n\n    &:hover:not(.").concat(classes.dropdownItemIsDisabled, ") {\n        cursor: pointer;\n        background: var(").concat(tokens.itemBackgroundHover, ");\n    }\n\n    &.").concat(String(classes.dropdownItemIsSelected), " {\n        color: var(").concat(tokens.itemColorSelected, ");\n        background: var(").concat(tokens.itemBackgroundSelected, ");\n\n        &:hover:not(.").concat(classes.dropdownItemIsDisabled, ") {\n            background: var(").concat(tokens.itemBackgroundSelectedHover, ");\n        }\n    }\n\n    &.").concat(classes.dropdownItemIsDisabled, " {\n        opacity: var(").concat(tokens.disabledOpacity, ");\n        cursor: not-allowed;\n    }\n");
+export var base = /*#__PURE__*/css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n    ", ";\n"])), baseContent);

package/styled-components/es/components/Dropdown/ui/DropdownItem/variations/_size/base.js

@@ -0,0 +1,2 @@
+import { css } from 'styled-components';
+export var base = /*#__PURE__*/css([""]);

package/styled-components/es/components/Dropdown/ui/DropdownItem/variations/_size/tokens.json

@@ -0,0 +1,19 @@
+[
+    "--plasma-dropdown-item-width",
+    "--plasma-dropdown-item-height",
+    "--plasma-dropdown-item-padding-top",
+    "--plasma-dropdown-item-padding-right",
+    "--plasma-dropdown-item-padding-bottom",
+    "--plasma-dropdown-item-padding-left",
+    "--plasma-dropdown-item-margin-top",
+    "--plasma-dropdown-item-margin-right",
+    "--plasma-dropdown-item-margin-bottom",
+    "--plasma-dropdown-item-margin-left",
+    "--plasma-dropdown-item-border-radius",
+    "--plasma-dropdown-item-font-family",
+    "--plasma-dropdown-item-font-size",
+    "--plasma-dropdown-item-font-style",
+    "--plasma-dropdown-item-letter-spacing",
+    "--plasma-dropdown-item-line-height",
+    "--plasma-dropdown-item-font-weight"
+]

package/styled-components/es/components/Dropdown/ui/DropdownItem/variations/_view/base.js

@@ -0,0 +1,2 @@
+import { css } from 'styled-components';
+export var base = /*#__PURE__*/css([""]);

package/styled-components/es/components/Dropdown/ui/DropdownItem/variations/_view/tokens.json

@@ -0,0 +1,9 @@
+[
+    "--plasma-dropdown-item-background",
+    "--plasma-dropdown-item-color",
+    "--plasma-dropdown-item-background-hover",
+    "--plasma-dropdown-item-background-selected",
+    "--plasma-dropdown-item-color-selected",
+    "--plasma-dropdown-item-background-selected-hover",
+    "--plasma-dropdown-item-color-selected-hover"
+]

package/styled-components/es/components/Dropdown/ui/index.js

@@ -2,5 +2,4 @@ export { dropdownDividerRoot, dropdownDividerConfig } from './DropdownDivider/Dr
 export { dropdownFooterRoot, dropdownFooterConfig } from './DropdownFooter/DropdownFooter';
 export { dropdownGroupRoot, dropdownGroupConfig } from './DropdownGroup/DropdownGroup';
 export { dropdownHeaderRoot, dropdownHeaderConfig } from './DropdownHeader/DropdownHeader';
-export { DropdownItem } from './DropdownItem/DropdownItem';
-export { DropdownInner } from './DropdownInner/DropdownInner';
+export { dropdownItemRoot, dropdownItemConfig } from './DropdownItem/DropdownItem';

package/styled-components/es/components/Dropdown/utils/index.js

@@ -1,4 +1,5 @@
-import React, { Children } from 'react';
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+import React, { cloneElement, isValidElement } from 'react';
 export var getPlacement = function getPlacement(placement) {
   return "".concat(placement, "-start");
 };
@@ -14,17 +15,16 @@ export var getPlacements = function getPlacements(placements) {
     return getPlacement(placement);
   });
 };
-export var getCorrectHeight = function getCorrectHeight(listHeight) {
-  if (Number.isNaN(Number(listHeight))) {
-    return listHeight.toString();
-  }
-  return "".concat(listHeight, "rem");
+var isReactObject = function isReactObject(element) {
+  return _typeof(element) === 'object' || typeof element === 'function';
 };
-export var childrenWithProps = function childrenWithProps(children, additionalProps) {
-  return Children.map(children, function (child) {
-    if ( /*#__PURE__*/React.isValidElement(child)) {
-      return /*#__PURE__*/React.cloneElement(child, additionalProps);
-    }
-    return child;
-  });
+export var getValidComponent = function getValidComponent(element, props) {
+  if ( /*#__PURE__*/isValidElement(element)) {
+    return /*#__PURE__*/cloneElement(element, props);
+  }
+  if (isReactObject(element)) {
+    var Component = element;
+    return /*#__PURE__*/React.createElement(Component, props);
+  }
+  return element;
 };

package/styled-components/es/components/Dropdown/variations/_size/tokens.json

@@ -1 +1,9 @@
-[]
+[
+    " --plasma-dropdown-width",
+    " --plasma-dropdown-height",
+    " --plasma-dropdown-border-radius",
+    " --plasma-dropdown-padding-top",
+    " --plasma-dropdown-padding-right",
+    " --plasma-dropdown-padding-bottom",
+    " --plasma-dropdown-padding-left"
+]

package/styled-components/es/components/Dropdown/variations/_view/tokens.json

@@ -1 +1 @@
-[]
+["--plasma-dropdown-background", "--plasma-dropdown-box-shadow"]

package/styled-components/es/components/IconButton/IconButton.js

@@ -0,0 +1,77 @@
+var _excluded = ["children", "view", "size", "icon", "isLoading", "loader", "pin", "disabled", "focused", "outlined", "className", "style"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import React, { forwardRef } from 'react';
+import { cx } from '../../utils';
+import { base, IconButtonStyled } from './IconButton.styles';
+import { classes } from './IconButton.tokens';
+import { base as viewCSS } from './variations/_view/base';
+import { base as sizeCSS } from './variations/_size/base';
+import { base as disabledCSS } from './variations/_disabled/base';
+import { base as focusedCSS } from './variations/_focused/base';
+export var iconButtonRoot = function iconButtonRoot(Root) {
+  return /*#__PURE__*/forwardRef(function (props, ref) {
+    var children = props.children,
+      view = props.view,
+      size = props.size,
+      icon = props.icon,
+      isLoading = props.isLoading,
+      loader = props.loader,
+      pin = props.pin,
+      disabled = props.disabled,
+      focused = props.focused,
+      outlined = props.outlined,
+      className = props.className,
+      style = props.style,
+      rest = _objectWithoutProperties(props, _excluded);
+    return /*#__PURE__*/React.createElement(Root, {
+      view: view,
+      size: size,
+      focused: focused,
+      disabled: disabled,
+      className: classes.iconButtonItem
+    }, /*#__PURE__*/React.createElement(IconButtonStyled, _extends({
+      view: view,
+      size: size,
+      loader: loader,
+      isLoading: isLoading,
+      pin: pin,
+      disabled: disabled,
+      focused: focused,
+      outlined: outlined,
+      ref: ref,
+      square: true // Временное решение
+      ,
+      stretching: "fixed" // Не работает не понятное почему
+      ,
+      className: cx(className),
+      style: style
+    }, rest), icon || children));
+  });
+};
+export var iconButtonConfig = {
+  name: 'Button',
+  tag: 'div',
+  layout: iconButtonRoot,
+  base: base,
+  variations: {
+    view: {
+      css: viewCSS
+    },
+    size: {
+      css: sizeCSS
+    },
+    disabled: {
+      css: disabledCSS,
+      attrs: true
+    },
+    focused: {
+      css: focusedCSS
+    }
+  },
+  defaults: {
+    view: 'secondary',
+    size: 'm'
+  }
+};

package/styled-components/es/components/IconButton/IconButton.styles.js

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+import { css } from 'styled-components';
+import { component, mergeConfig } from '../../engines';
+import { buttonConfig, buttonTokens } from '../Button';
+import { tokens, classes } from './IconButton.tokens';
+var mergedConfig = /*#__PURE__*/mergeConfig(buttonConfig);
+var Button = /*#__PURE__*/component(mergedConfig);
+export var base = /*#__PURE__*/css(["&&.", "{display:inline-flex;}"], classes.iconButtonItem);
+export var IconButtonStyled = /*#__PURE__*/styled(Button).withConfig({
+  componentId: "plasma-new-hope__sc-bil9m7-0"
+})(["", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");"], buttonTokens.buttonColor, tokens.iconButtonColor, buttonTokens.buttonBackgroundColor, tokens.iconButtonBackgroundColor, buttonTokens.buttonColorHover, tokens.iconButtonColorHover, buttonTokens.buttonBackgroundColorHover, tokens.iconButtonBackgroundColorHover, buttonTokens.buttonColorActive, tokens.iconButtonColorActive, buttonTokens.buttonBackgroundColorActive, tokens.iconButtonBackgroundColorActive, buttonTokens.buttonFontFamily, tokens.iconButtonFontFamily, buttonTokens.buttonFontSize, tokens.iconButtonFontSize, buttonTokens.buttonFontStyle, tokens.iconButtonFontStyle, buttonTokens.buttonFontWeight, tokens.iconButtonFontWeight, buttonTokens.buttonLetterSpacing, tokens.iconButtonLetterSpacing, buttonTokens.buttonLineHeight, tokens.iconButtonLineHeight, buttonTokens.buttonWidth, tokens.iconButtonWidth, buttonTokens.buttonHeight, tokens.iconButtonHeight, buttonTokens.buttonRadius, tokens.iconButtonRadius, buttonTokens.buttonDisabledOpacity, tokens.iconButtonDisabledOpacity, buttonTokens.buttonFocusColor, tokens.iconButtonFocusColor, buttonTokens.buttonSpinnerSize, tokens.iconButtonSpinnerSize, buttonTokens.buttonSpinnerColor, tokens.iconButtonSpinnerColor);

package/styled-components/es/components/IconButton/IconButton.tokens.js

@@ -0,0 +1,28 @@
+export var classes = {
+  iconButtonItem: 'icon-button-item'
+};
+export var tokens = {
+  iconButtonColor: '--plasma-icon-button-color',
+  iconButtonBackgroundColor: '--plasma-icon-button-background-color',
+  iconButtonColorHover: '--plasma-icon-button-color-hover',
+  iconButtonBackgroundColorHover: '--plasma-icon-button-background-color-hover',
+  iconButtonColorActive: '--plasma-icon-button-color-active',
+  iconButtonBackgroundColorActive: '--plasma-icon-button-background-color-active',
+  iconButtonScaleHover: '--plasma-icon-button-scale-hover',
+  iconButtonScaleActive: '---plasma-icon-button-scale-active',
+  iconButtonHeight: '--plasma-icon-button-height',
+  iconButtonWidth: '--plasma-icon-button-width',
+  iconButtonPadding: '--plasma-icon-button-padding',
+  iconButtonRadius: '--plasma-icon-button-radius',
+  iconButtonRadiusCircle: '--plasma-icon-button-radius-circle',
+  iconButtonFontFamily: '--plasma-icon-button-font-family',
+  iconButtonFontSize: '--plasma-icon-button-font-size',
+  iconButtonFontStyle: '--plasma-icon-button-font-style',
+  iconButtonFontWeight: '--plasma-icon-button-font-weight',
+  iconButtonLetterSpacing: '--plasma-icon-button-letter-spacing',
+  iconButtonLineHeight: '--plasma-icon-button-line-height',
+  iconButtonDisabledOpacity: '--plasma-icon-button-disabled-opacity',
+  iconButtonFocusColor: '--plasma-icon-button-focus-color',
+  iconButtonSpinnerColor: '--plasma-icon-button-spinner-color',
+  iconButtonSpinnerSize: '--plasma-icon-button-spinner-size'
+};

package/styled-components/es/components/IconButton/index.js

@@ -0,0 +1,2 @@
+export { iconButtonRoot, iconButtonConfig } from './IconButton';
+export { tokens as iconButtonTokens, classes as iconButtonClasses } from './IconButton.tokens';

package/styled-components/es/components/IconButton/variations/_disabled/base.js

@@ -0,0 +1,2 @@
+import { css } from 'styled-components';
+export var base = /*#__PURE__*/css([""]);

package/styled-components/es/components/IconButton/variations/_disabled/tokens.json

@@ -0,0 +1 @@
+{}

package/styled-components/es/components/IconButton/variations/_focused/base.js

@@ -0,0 +1,2 @@
+import { css } from 'styled-components';
+export var base = /*#__PURE__*/css([""]);

package/styled-components/es/components/IconButton/variations/_focused/tokens.json

@@ -0,0 +1 @@
+{}

package/styled-components/es/components/IconButton/variations/_size/base.js

@@ -0,0 +1,2 @@
+import { css } from 'styled-components';
+export var base = /*#__PURE__*/css([""]);

package/styled-components/es/components/IconButton/variations/_size/tokens.json

@@ -0,0 +1 @@
+{}

package/styled-components/es/components/IconButton/variations/_view/base.js

@@ -0,0 +1,2 @@
+import { css } from 'styled-components';
+export var base = /*#__PURE__*/css([""]);

package/styled-components/es/components/IconButton/variations/_view/tokens.json

@@ -0,0 +1 @@
+{}

package/styled-components/es/components/Select/ui/SelectItem/SelectItem.js

@@ -1,8 +1,8 @@
-import { comboboxItemRoot } from '../../../Combobox';
+import { dropdownItemRoot } from '../../../Dropdown';
 import { base as viewCSS } from './variations/_view/base';
 import { base as sizeCSS } from './variations/_size/base';
 import { base } from './SelectItem.styles';
-export var selectItemRoot = comboboxItemRoot;
+export var selectItemRoot = dropdownItemRoot;
 export var selectItemConfig = {
   name: 'SelectItem',
   tag: 'div',

package/styled-components/es/components/Select/ui/SelectItem/SelectItem.styles.js

@@ -1,8 +1,8 @@
 import { css } from 'styled-components';
 import { tokens } from '../../Select.tokens';
-import { comboboxTokens } from '../../../Combobox';
+import { dropdownTokens } from '../../../Dropdown';
 import { baseContent as dropdownItemBase } from '../../../Dropdown/ui/DropdownItem/DropdownItem.styles';
 
 // NOTE: Необходимое переопределение токенов из компонента DropdownItem т.к. используются его части
-export var mappingOverride = /*#__PURE__*/"\n    ".concat(comboboxTokens.itemBackground, ": var(").concat(tokens.itemBackground, ");\n    ").concat(comboboxTokens.itemColor, ": var(").concat(tokens.itemColor, ");\n    ").concat(comboboxTokens.itemBackgroundHover, ": var(").concat(tokens.itemBackgroundHover, ");\n    ").concat(comboboxTokens.itemBackgroundSelected, ": var(").concat(tokens.itemBackgroundSelected, ");\n    ").concat(comboboxTokens.itemColorSelected, ": var(").concat(tokens.itemColorSelected, ");\n    ").concat(comboboxTokens.itemBackgroundSelectedHover, ": var(").concat(tokens.itemBackgroundSelectedHover, ");\n    ").concat(comboboxTokens.itemColorSelectedHover, ": var(").concat(tokens.itemColorSelectedHover, ");\n    ").concat(comboboxTokens.itemContentLeftColor, ": var(").concat(tokens.itemContentLeftColor, ");\n    ").concat(comboboxTokens.itemContentRightColor, ": var(").concat(tokens.itemContentRightColor, ");\n    ").concat(comboboxTokens.disabledOpacity, ": var(").concat(tokens.disabledOpacity, ");\n    ").concat(comboboxTokens.focusColor, ": var(").concat(tokens.focusColor, ");\n    ").concat(comboboxTokens.itemWidth, ": var(").concat(tokens.itemWidth, ");\n    ").concat(comboboxTokens.itemHeight, ": var(").concat(tokens.itemHeight, ");\n    ").concat(comboboxTokens.itemBorderRadius, ": var(").concat(tokens.itemBorderRadius, ");\n    ").concat(comboboxTokens.itemPaddingTop, ": var(").concat(tokens.itemPaddingTop, ");\n    ").concat(comboboxTokens.itemPaddingRight, ": var(").concat(tokens.itemPaddingRight, ");\n    ").concat(comboboxTokens.itemPaddingBottom, ": var(").concat(tokens.itemPaddingBottom, ");\n    ").concat(comboboxTokens.itemPaddingLeft, ": var(").concat(tokens.itemPaddingLeft, ");\n    ").concat(comboboxTokens.itemMarginTop, ": var(").concat(tokens.itemMarginTop, ");\n    ").concat(comboboxTokens.itemMarginRight, ": var(").concat(tokens.itemMarginRight, ");\n    ").concat(comboboxTokens.itemMarginBottom, ": var(").concat(tokens.itemMarginBottom, ");\n    ").concat(comboboxTokens.itemMarginLeft, ": var(").concat(tokens.itemMarginLeft, ");\n    ").concat(comboboxTokens.itemFontFamily, ": var(").concat(tokens.itemFontFamily, ");\n    ").concat(comboboxTokens.itemFontSize, ": var(").concat(tokens.itemFontSize, ");\n    ").concat(comboboxTokens.itemFontStyle, ": var(").concat(tokens.itemFontStyle, ");\n    ").concat(comboboxTokens.itemFontWeightBold, ": var(").concat(tokens.itemFontWeightBold, ");\n    ").concat(comboboxTokens.itemFontLetterSpacing, ": var(").concat(tokens.itemFontLetterSpacing, ");\n    ").concat(comboboxTokens.itemFontLineHeight, ": var(").concat(tokens.itemFontLineHeight, ");\n    ").concat(comboboxTokens.itemContentLeftWidth, ": var(").concat(tokens.itemContentLeftWidth, ");\n    ").concat(comboboxTokens.itemContentRightWidth, ": var(").concat(tokens.itemContentRightWidth, ");\n");
+export var mappingOverride = /*#__PURE__*/"\n    ".concat(dropdownTokens.itemBackground, ": var(").concat(tokens.itemBackground, ");\n    ").concat(dropdownTokens.itemColor, ": var(").concat(tokens.itemColor, ");\n    ").concat(dropdownTokens.itemBackgroundHover, ": var(").concat(tokens.itemBackgroundHover, ");\n    ").concat(dropdownTokens.itemBackgroundSelected, ": var(").concat(tokens.itemBackgroundSelected, ");\n    ").concat(dropdownTokens.itemColorSelected, ": var(").concat(tokens.itemColorSelected, ");\n    ").concat(dropdownTokens.itemBackgroundSelectedHover, ": var(").concat(tokens.itemBackgroundSelectedHover, ");\n    ").concat(dropdownTokens.itemColorSelectedHover, ": var(").concat(tokens.itemColorSelectedHover, ");\n    ").concat(dropdownTokens.itemContentLeftColor, ": var(").concat(tokens.itemContentLeftColor, ");\n    ").concat(dropdownTokens.itemContentRightColor, ": var(").concat(tokens.itemContentRightColor, ");\n    ").concat(dropdownTokens.disabledOpacity, ": var(").concat(tokens.disabledOpacity, ");\n    ").concat(dropdownTokens.focusColor, ": var(").concat(tokens.focusColor, ");\n    ").concat(dropdownTokens.itemWidth, ": var(").concat(tokens.itemWidth, ");\n    ").concat(dropdownTokens.itemHeight, ": var(").concat(tokens.itemHeight, ");\n    ").concat(dropdownTokens.itemBorderRadius, ": var(").concat(tokens.itemBorderRadius, ");\n    ").concat(dropdownTokens.itemPaddingTop, ": var(").concat(tokens.itemPaddingTop, ");\n    ").concat(dropdownTokens.itemPaddingRight, ": var(").concat(tokens.itemPaddingRight, ");\n    ").concat(dropdownTokens.itemPaddingBottom, ": var(").concat(tokens.itemPaddingBottom, ");\n    ").concat(dropdownTokens.itemPaddingLeft, ": var(").concat(tokens.itemPaddingLeft, ");\n    ").concat(dropdownTokens.itemMarginTop, ": var(").concat(tokens.itemMarginTop, ");\n    ").concat(dropdownTokens.itemMarginRight, ": var(").concat(tokens.itemMarginRight, ");\n    ").concat(dropdownTokens.itemMarginBottom, ": var(").concat(tokens.itemMarginBottom, ");\n    ").concat(dropdownTokens.itemMarginLeft, ": var(").concat(tokens.itemMarginLeft, ");\n    ").concat(dropdownTokens.itemFontFamily, ": var(").concat(tokens.itemFontFamily, ");\n    ").concat(dropdownTokens.itemFontSize, ": var(").concat(tokens.itemFontSize, ");\n    ").concat(dropdownTokens.itemFontStyle, ": var(").concat(tokens.itemFontStyle, ");\n    ").concat(dropdownTokens.itemFontWeightBold, ": var(").concat(tokens.itemFontWeightBold, ");\n    ").concat(dropdownTokens.itemFontLetterSpacing, ": var(").concat(tokens.itemFontLetterSpacing, ");\n    ").concat(dropdownTokens.itemFontLineHeight, ": var(").concat(tokens.itemFontLineHeight, ");\n    ").concat(dropdownTokens.itemContentLeftWidth, ": var(").concat(tokens.itemContentLeftWidth, ");\n    ").concat(dropdownTokens.itemContentRightWidth, ": var(").concat(tokens.itemContentRightWidth, ");\n");
 export var base = /*#__PURE__*/css(["", ";", ";"], dropdownItemBase, mappingOverride);

package/styled-components/es/components/_Icon/Icon.assets/DisclosureRight.js

@@ -11,7 +11,8 @@ export var DisclosureRight = function DisclosureRight(props) {
       fillRule: "evenodd",
       clipRule: "evenodd",
       d: "M9.883 4.707a1 1 0 011.414-1.414L16.004 8l-4.707 4.707a1 1 0 01-1.414-1.414L13.176 8 9.883 4.707z",
-      fill: "currentColor"
+      fill: "currentColor",
+      fillOpacity: 0.56
     })));
   }
   return /*#__PURE__*/React.createElement("svg", _extends({

package/styled-components/es/examples/plasma_b2c/components/Dropdown/Normal/Dropdown.config.js

@@ -0,0 +1,21 @@
+import { css } from 'styled-components';
+import { dropdownTokens } from '../../../../../components/Dropdown';
+var dropdownSizeCommon = /*#__PURE__*/"\n    ".concat(dropdownTokens.width, ": 12.5rem;\n    ").concat(dropdownTokens.height, ": auto;\n    ").concat(dropdownTokens.borderRadius, ": 0.5rem;\n    ").concat(dropdownTokens.paddingTop, ": 0.125rem;\n    ").concat(dropdownTokens.paddingRight, ": 0.0625rem;\n    ").concat(dropdownTokens.paddingBottom, ": 0.125rem;\n    ").concat(dropdownTokens.paddingLeft, ": 0.125rem;\n");
+var dropdownItemSizeCommon = /*#__PURE__*/"\n    ".concat(dropdownTokens.itemWidth, ": auto;\n    ").concat(dropdownTokens.itemHeight, ": auto;\n    ").concat(dropdownTokens.itemMarginTop, ": 0;\n    ").concat(dropdownTokens.itemMarginRight, ": 0;\n    ").concat(dropdownTokens.itemMarginBottom, ": 0;\n    ").concat(dropdownTokens.itemMarginLeft, ": 0;\n");
+export var config = {
+  defaults: {
+    view: 'default',
+    size: 'm'
+  },
+  variations: {
+    size: {
+      xs: /*#__PURE__*/css(["", ";", ";", ":0.5625rem;", ":0.5rem;", ":0.5625rem;", ":0.5rem;", ":0.375rem;", ":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);"], dropdownSizeCommon, dropdownItemSizeCommon, dropdownTokens.itemPaddingTop, dropdownTokens.itemPaddingRight, dropdownTokens.itemPaddingBottom, dropdownTokens.itemPaddingLeft, dropdownTokens.itemBorderRadius, dropdownTokens.itemFontFamily, dropdownTokens.itemFontSize, dropdownTokens.itemFontStyle, dropdownTokens.itemFontWeightBold, dropdownTokens.itemFontLetterSpacing, dropdownTokens.itemFontLineHeight),
+      s: /*#__PURE__*/css(["", ";", ";", ":0.6875rem;", ":0.75rem;", ":0.6875rem;", ":0.75rem;", ":0.5rem;", ":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);"], dropdownSizeCommon, dropdownItemSizeCommon, dropdownTokens.itemPaddingTop, dropdownTokens.itemPaddingRight, dropdownTokens.itemPaddingBottom, dropdownTokens.itemPaddingLeft, dropdownTokens.itemBorderRadius, dropdownTokens.itemFontFamily, dropdownTokens.itemFontSize, dropdownTokens.itemFontStyle, dropdownTokens.itemFontWeightBold, dropdownTokens.itemFontLetterSpacing, dropdownTokens.itemFontLineHeight),
+      m: /*#__PURE__*/css(["", ";", ";", ":0.875rem;", ":0.875rem;", ":0.875rem;", ":0.875rem;", ":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);"], dropdownSizeCommon, dropdownItemSizeCommon, dropdownTokens.itemPaddingTop, dropdownTokens.itemPaddingRight, dropdownTokens.itemPaddingBottom, dropdownTokens.itemPaddingLeft, dropdownTokens.itemBorderRadius, dropdownTokens.itemFontFamily, dropdownTokens.itemFontSize, dropdownTokens.itemFontStyle, dropdownTokens.itemFontWeightBold, dropdownTokens.itemFontLetterSpacing, dropdownTokens.itemFontLineHeight),
+      l: /*#__PURE__*/css(["", ";", ";", ":1.0625rem;", ":1rem;", ":1.0625rem;", ":1rem;", ":0.75rem;", ":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);"], dropdownSizeCommon, dropdownItemSizeCommon, dropdownTokens.itemPaddingTop, dropdownTokens.itemPaddingRight, dropdownTokens.itemPaddingBottom, dropdownTokens.itemPaddingLeft, dropdownTokens.itemBorderRadius, dropdownTokens.itemFontFamily, dropdownTokens.itemFontSize, dropdownTokens.itemFontStyle, dropdownTokens.itemFontWeightBold, dropdownTokens.itemFontLetterSpacing, dropdownTokens.itemFontLineHeight)
+    },
+    view: {
+      "default": /*#__PURE__*/css(["", ":0.4;", ":var(--surface-solid-card);", ":var(--shadow-down-soft-s);", ":var(--plasma-colors-transparent);", ":var(--surface-transparent-secondary);", ":inherit;", ":inherit;", ":inherit;", ":inherit;", ":var(--text-primary);"], dropdownTokens.disabledOpacity, dropdownTokens.background, dropdownTokens.boxShadow, dropdownTokens.itemBackground, dropdownTokens.itemBackgroundHover, dropdownTokens.itemBackgroundSelected, dropdownTokens.itemColorSelected, dropdownTokens.itemBackgroundSelectedHover, dropdownTokens.itemColorSelectedHover, dropdownTokens.itemColor)
+    }
+  }
+};

package/styled-components/es/examples/plasma_b2c/components/Dropdown/Normal/Dropdown.js

@@ -0,0 +1,7 @@
+import { dropdownConfig, dropdownItemConfig } from '../../../../../components/Dropdown';
+import { component, mergeConfig } from '../../../../../engines';
+import { config } from './Dropdown.config';
+var mergedConfig = /*#__PURE__*/mergeConfig(dropdownConfig, config);
+export var Dropdown = /*#__PURE__*/component(mergedConfig);
+var mergedItemConfig = /*#__PURE__*/mergeConfig(dropdownItemConfig);
+export var DropdownItem = /*#__PURE__*/component(mergedItemConfig);

package/styled-components/es/examples/plasma_b2c/components/Dropdown/Normal/Dropdown.stories.tsx

@@ -0,0 +1,194 @@
+import React, { useState } from 'react';
+import type { ComponentProps } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import styled from 'styled-components';
+
+import { WithTheme, argTypesFromConfig } from '../../../../_helpers';
+import { mergeConfig } from '../../../../../engines';
+import { dropdownConfig } from '../../../../../components/Dropdown';
+import { Button } from '../../Button/Button';
+import { Radiobox } from '../../Radiobox/Radiobox';
+import { Checkbox } from '../../Checkbox/Checkbox';
+import type { DropdownPlacement, DropdownTrigger } from '../../../../../components/Dropdown/Dropdown.types';
+
+import { Dropdown, DropdownItem } from './Dropdown';
+import { config } from './Dropdown.config';
+
+const placements: Array<DropdownPlacement> = ['top', 'bottom', 'right', 'left', 'auto'];
+const triggers: Array<DropdownTrigger> = ['click', 'hover'];
+
+type StoryDropdownPropsCustom = {
+    skidding?: number;
+    distance?: number;
+};
+
+type StoryDropdownProps = ComponentProps<typeof Dropdown> & StoryDropdownPropsCustom;
+
+const meta: Meta<StoryDropdownProps> = {
+    title: 'plasma_b2c/Dropdown',
+    decorators: [WithTheme],
+    component: Dropdown,
+    argTypes: {
+        placement: {
+            options: placements,
+            control: {
+                type: 'select',
+            },
+        },
+        trigger: {
+            options: triggers,
+            control: {
+                type: 'select',
+            },
+        },
+        ...argTypesFromConfig(mergeConfig(dropdownConfig, config)),
+    },
+    args: {
+        placement: 'bottom',
+        trigger: 'click',
+        closeOnOverlayClick: false,
+        closeOnEsc: true,
+        isFocusTrapped: true,
+        skidding: 0,
+        distance: 0,
+    },
+};
+
+export default meta;
+
+const onSelect = action('onSelect');
+const onClick = action('onClick');
+const onChange = action('onChange');
+
+const getDropdownItems = (slug: string, elemCount: number) =>
+    [...Array(elemCount).keys()].map((num) => ({
+        value: `${slug}_${num}`,
+        child: `${slug} ${num}`,
+    }));
+
+const StyledRadiobox = styled(Radiobox)`
+    margin-right: 0.5rem;
+`;
+
+const StyledCheckbox = styled(Checkbox)`
+    margin-left: auto;
+`;
+
+const StyledDisclosureRightIcon = styled.div`
+    width: 1.25rem;
+    height: 1.25rem;
+    margin-left: auto;
+`;
+
+const DisclosureRightIcon = (props) => (
+    <StyledDisclosureRightIcon>
+        <svg width="100%" viewBox="0 0 24 24" fill="none" {...props}>
+            <path
+                d="M9.883 8.707a1 1 0 011.414-1.414L16.004 12l-4.707 4.707a1 1 0 01-1.414-1.414L13.176 12 9.883 8.707z"
+                fill="currentColor"
+            />
+        </svg>
+    </StyledDisclosureRightIcon>
+);
+
+const StoryNormal = (args: StoryDropdownProps) => {
+    const [selected, setSelected] = useState('');
+    const [isOpen, setIsOpen] = useState(false);
+    const [isOpenDropdown2, setIsOpenDropdown2] = useState(false);
+
+    const { skidding, distance, placement, ...rest } = args;
+
+    const onMainClose = () => {
+        setIsOpen(false);
+        setIsOpenDropdown2(false);
+    };
+
+    const onMainToggle = (openValue: boolean) => {
+        setIsOpen(openValue);
+
+        if (!openValue) {
+            onMainClose();
+        }
+    };
+
+    const handleSelect = (value: string, text: string) => {
+        setSelected(value);
+        onSelect(value, text);
+        setIsOpen(false);
+    };
+
+    return (
+        <div>
+            <h3>This is header</h3>
+            <Dropdown
+                target={<Button>Target</Button>}
+                isOpen={isOpen}
+                onToggle={onMainToggle}
+                offset={[Number(skidding), Number(distance)]}
+                placement={placement}
+                {...rest}
+            >
+                {getDropdownItems('item', 6).map((item) => (
+                    <DropdownItem
+                        key={item.value}
+                        isSelected={Boolean(item.value === selected)}
+                        onSelect={() => handleSelect(item.value, item.child)}
+                        onClick={onClick}
+                        value={item.value}
+                    >
+                        {item.child}
+                    </DropdownItem>
+                ))}
+                <Dropdown
+                    target={<DropdownItem contentRight={DisclosureRightIcon} name="test" text="Nested dropdown" />}
+                    onToggle={(is) => setIsOpenDropdown2(is)}
+                    isOpen={isOpenDropdown2}
+                    offset={[0, 0]}
+                    {...rest}
+                >
+                    <DropdownItem contentRight={StyledCheckbox} value="checked" onChange={onChange} text="Checkbox" />
+                    {getDropdownItems('nested', 4).map((item) => (
+                        <DropdownItem
+                            key={item.value}
+                            isSelected={Boolean(item.value === selected)}
+                            onSelect={() => handleSelect(item.value, item.child)}
+                            onClick={onClick}
+                            value={item.value}
+                        >
+                            {item.child}
+                        </DropdownItem>
+                    ))}
+                    <DropdownItem
+                        contentLeft={StyledRadiobox}
+                        name="radio"
+                        value="1"
+                        onChange={onChange}
+                        text="Radiobox 1"
+                    />
+                    <DropdownItem
+                        contentLeft={StyledRadiobox}
+                        name="radio"
+                        value="2"
+                        onChange={onChange}
+                        text="Radiobox 2"
+                    />
+                </Dropdown>
+
+                <DropdownItem
+                    isSelected={selected === 'disabled'}
+                    onSelect={() => handleSelect('disabled', 'disabled')}
+                    onClick={onClick}
+                    value="disabled"
+                    disabled
+                >
+                    disabled
+                </DropdownItem>
+            </Dropdown>
+        </div>
+    );
+};
+
+export const Normal: StoryObj<StoryDropdownProps> = {
+    render: (args) => <StoryNormal {...args} />,
+};