@salutejs/plasma-new-hope 0.88.0-canary.1233.9452624028.0 → 0.88.0-canary.1233.9486423566.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (33) hide show
  1. package/cjs/components/Select/Select.js +4 -2
  2. package/cjs/components/Select/Select.js.map +1 -1
  3. package/cjs/components/Select/elements/Inner/elements/Item/Item.js +3 -2
  4. package/cjs/components/Select/elements/Inner/elements/Item/Item.js.map +1 -1
  5. package/cjs/components/Select/elements/Inner/elements/Item/Item.styles.js +10 -10
  6. package/cjs/components/Select/elements/Inner/elements/Item/Item.styles.js.map +1 -1
  7. package/cjs/components/Select/elements/Target/elements/Textfield/Textfield.styles.js.map +1 -1
  8. package/es/components/Select/Select.js +4 -2
  9. package/es/components/Select/Select.js.map +1 -1
  10. package/es/components/Select/elements/Inner/elements/Item/Item.js +3 -2
  11. package/es/components/Select/elements/Inner/elements/Item/Item.js.map +1 -1
  12. package/es/components/Select/elements/Inner/elements/Item/Item.styles.js +10 -10
  13. package/es/components/Select/elements/Inner/elements/Item/Item.styles.js.map +1 -1
  14. package/es/components/Select/elements/Target/elements/Textfield/Textfield.styles.js.map +1 -1
  15. package/package.json +2 -2
  16. package/styled-components/cjs/components/Select/Select.js +4 -2
  17. package/styled-components/cjs/components/Select/elements/Inner/elements/Item/Item.js +3 -2
  18. package/styled-components/cjs/components/Select/elements/Inner/elements/Item/Item.styles.js +1 -1
  19. package/styled-components/cjs/components/Select/elements/Target/elements/Textfield/Textfield.styles.js +1 -4
  20. package/styled-components/cjs/examples/plasma_b2c/components/Select/Select.stories.tsx +29 -4
  21. package/styled-components/cjs/examples/plasma_web/components/Select/Select.stories.tsx +29 -4
  22. package/styled-components/es/components/Select/Select.js +4 -2
  23. package/styled-components/es/components/Select/elements/Inner/elements/Item/Item.js +3 -2
  24. package/styled-components/es/components/Select/elements/Inner/elements/Item/Item.styles.js +2 -2
  25. package/styled-components/es/components/Select/elements/Target/elements/Textfield/Textfield.styles.js +0 -3
  26. package/styled-components/es/examples/plasma_b2c/components/Select/Select.stories.tsx +29 -4
  27. package/styled-components/es/examples/plasma_web/components/Select/Select.stories.tsx +29 -4
  28. package/types/components/Select/Select.d.ts.map +1 -1
  29. package/types/components/Select/Select.types.d.ts +5 -0
  30. package/types/components/Select/Select.types.d.ts.map +1 -1
  31. package/types/components/Select/elements/Inner/elements/Item/Item.d.ts.map +1 -1
  32. package/types/components/Select/elements/Target/elements/Textfield/Textfield.styles.d.ts +0 -3
  33. package/types/components/Select/elements/Target/elements/Textfield/Textfield.styles.d.ts.map +1 -1
@@ -1 +1 @@
1
- {"version":3,"file":"Item.js","sources":["../../../../../../../src/components/Select/elements/Inner/elements/Item/Item.tsx"],"sourcesContent":["import React, { useEffect, useRef, FC, useContext } from 'react';\n\nimport { sizeToIconSize } from '../../../../utils';\nimport { classes } from '../../../../Select.tokens';\nimport { cx, isEmpty } from '../../../../../../utils';\nimport { IconDisclosureRightCentered, IconDone } from '../../../../../_Icon';\nimport { Context } from '../../../../Select';\n\nimport { ItemProps } from './Item.types';\nimport {\n StyledContentLeft,\n StyledContentRight,\n StyledText,\n Wrapper,\n DisclosureIconWrapper,\n StyledCheckbox,\n IconWrapper,\n StyledIndicator,\n} from './Item.styles';\n\nexport const Item: FC<ItemProps> = ({\n item,\n path,\n currentLevel,\n index,\n ariaControls,\n ariaExpanded,\n ariaLevel,\n ariaLabel,\n itemRole,\n}) => {\n const { value, label, disabled, isDisabled, contentLeft, contentRight } = item;\n const ref = useRef<HTMLLIElement | null>(null);\n\n const { focusedPath, checked, multiselect, size, handleCheckboxChange, handleItemClick, variant } = useContext(\n Context,\n );\n\n const isDisabledClassName = disabled || isDisabled ? classes.dropdownItemIsDisabled : undefined;\n const focusedClass =\n currentLevel === focusedPath.length - 1 && index === focusedPath?.[currentLevel]\n ? classes.dropdownItemIsFocused\n : undefined;\n const activeClass = value === path?.[currentLevel + 1] ? classes.dropdownItemIsActive : undefined;\n\n useEffect(() => {\n if (focusedClass && ref?.current) {\n ref.current.scrollIntoView({\n behavior: 'smooth',\n block: 'center',\n inline: 'center',\n });\n }\n }, [focusedClass]);\n\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n if (disabled || isDisabled) return;\n\n e.stopPropagation();\n\n handleCheckboxChange(item);\n };\n\n const handleClick = (e: React.MouseEvent<HTMLElement>) => {\n if (disabled || isDisabled) return;\n\n handleItemClick(item, e);\n };\n\n return (\n <Wrapper\n className={cx(isDisabledClassName, focusedClass, activeClass)}\n id={value.toString()}\n ref={ref}\n onClick={handleClick}\n variant={variant}\n aria-controls={ariaControls}\n aria-expanded={ariaExpanded}\n aria-level={ariaLevel}\n aria-label={ariaLabel}\n role={itemRole}\n >\n <IconWrapper variant={variant}>\n {multiselect && (\n <span onClick={(e) => e.stopPropagation()}>\n <StyledCheckbox\n checked={Boolean(checked.get(item.value))}\n indeterminate={checked.get(item.value) === 'indeterminate'}\n onChange={handleChange}\n className={classes.selectItemCheckbox}\n />\n </span>\n )}\n\n {!multiselect && checked.get(item.value) === 'dot' && <StyledIndicator size=\"s\" view=\"default\" />}\n\n {!multiselect && checked.get(item.value) === 'done' && (\n <IconDone size={sizeToIconSize(size, variant)} color=\"inherit\" />\n )}\n </IconWrapper>\n\n {contentLeft && <StyledContentLeft>{contentLeft}</StyledContentLeft>}\n\n <StyledText>{label}</StyledText>\n\n {contentRight && <StyledContentRight>{contentRight}</StyledContentRight>}\n\n {!isEmpty(item.items) && (\n <DisclosureIconWrapper>\n <IconDisclosureRightCentered size={sizeToIconSize(size, variant)} color=\"inherit\" />\n </DisclosureIconWrapper>\n )}\n </Wrapper>\n );\n};\n"],"names":["Item","_ref","item","path","currentLevel","index","ariaControls","ariaExpanded","ariaLevel","ariaLabel","itemRole","value","label","disabled","isDisabled","contentLeft","contentRight","ref","useRef","_useContext","useContext","Context","focusedPath","checked","multiselect","size","handleCheckboxChange","handleItemClick","variant","isDisabledClassName","classes","dropdownItemIsDisabled","undefined","focusedClass","length","dropdownItemIsFocused","activeClass","dropdownItemIsActive","useEffect","current","scrollIntoView","behavior","block","inline","handleChange","e","stopPropagation","handleClick","React","createElement","Wrapper","className","cx","id","toString","onClick","role","IconWrapper","StyledCheckbox","Boolean","get","indeterminate","onChange","selectItemCheckbox","_StyledIndicator","StyledIndicator","view","IconDone","sizeToIconSize","color","StyledContentLeft","StyledText","StyledContentRight","isEmpty","items","DisclosureIconWrapper","IconDisclosureRightCentered"],"mappings":"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"}
1
+ {"version":3,"file":"Item.js","sources":["../../../../../../../src/components/Select/elements/Inner/elements/Item/Item.tsx"],"sourcesContent":["import React, { useEffect, useRef, FC, useContext } from 'react';\n\nimport { sizeToIconSize } from '../../../../utils';\nimport { classes } from '../../../../Select.tokens';\nimport { cx, isEmpty } from '../../../../../../utils';\nimport { IconDisclosureRightCentered, IconDone } from '../../../../../_Icon';\nimport { Context } from '../../../../Select';\n\nimport { ItemProps } from './Item.types';\nimport {\n StyledContentLeft,\n StyledContentRight,\n StyledText,\n Wrapper,\n DisclosureIconWrapper,\n StyledCheckbox,\n IconWrapper,\n StyledIndicator,\n} from './Item.styles';\n\nexport const Item: FC<ItemProps> = ({\n item,\n path,\n currentLevel,\n index,\n ariaControls,\n ariaExpanded,\n ariaLevel,\n ariaLabel,\n itemRole,\n}) => {\n const { value, label, disabled, isDisabled, contentLeft, contentRight } = item;\n const ref = useRef<HTMLLIElement | null>(null);\n\n const {\n focusedPath,\n checked,\n multiselect,\n size,\n handleCheckboxChange,\n handleItemClick,\n variant,\n renderItem,\n } = useContext(Context);\n\n const isDisabledClassName = disabled || isDisabled ? classes.dropdownItemIsDisabled : undefined;\n const focusedClass =\n currentLevel === focusedPath.length - 1 && index === focusedPath?.[currentLevel]\n ? classes.dropdownItemIsFocused\n : undefined;\n const activeClass = value === path?.[currentLevel + 1] ? classes.dropdownItemIsActive : undefined;\n\n useEffect(() => {\n if (focusedClass && ref?.current) {\n ref.current.scrollIntoView({\n behavior: 'smooth',\n block: 'center',\n inline: 'center',\n });\n }\n }, [focusedClass]);\n\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n if (disabled || isDisabled) return;\n\n e.stopPropagation();\n\n handleCheckboxChange(item);\n };\n\n const handleClick = (e: React.MouseEvent<HTMLElement>) => {\n if (disabled || isDisabled) return;\n\n handleItemClick(item, e);\n };\n\n return (\n <Wrapper\n className={cx(isDisabledClassName, focusedClass, activeClass)}\n id={value.toString()}\n ref={ref}\n onClick={handleClick}\n variant={variant}\n aria-controls={ariaControls}\n aria-expanded={ariaExpanded}\n aria-level={ariaLevel}\n aria-label={ariaLabel}\n role={itemRole}\n >\n <IconWrapper variant={variant}>\n {multiselect && (\n <span onClick={(e) => e.stopPropagation()}>\n <StyledCheckbox\n checked={Boolean(checked.get(item.value))}\n indeterminate={checked.get(item.value) === 'indeterminate'}\n onChange={handleChange}\n className={classes.selectItemCheckbox}\n />\n </span>\n )}\n\n {!multiselect && checked.get(item.value) === 'dot' && <StyledIndicator size=\"s\" view=\"default\" />}\n\n {!multiselect && checked.get(item.value) === 'done' && (\n <IconDone size={sizeToIconSize(size, variant)} color=\"inherit\" />\n )}\n </IconWrapper>\n\n {contentLeft && <StyledContentLeft>{contentLeft}</StyledContentLeft>}\n\n <StyledText>{(renderItem && renderItem(value, label)) || label}</StyledText>\n\n {contentRight && <StyledContentRight>{contentRight}</StyledContentRight>}\n\n {!isEmpty(item.items) && (\n <DisclosureIconWrapper>\n <IconDisclosureRightCentered size={sizeToIconSize(size, variant)} color=\"inherit\" />\n </DisclosureIconWrapper>\n )}\n </Wrapper>\n );\n};\n"],"names":["Item","_ref","item","path","currentLevel","index","ariaControls","ariaExpanded","ariaLevel","ariaLabel","itemRole","value","label","disabled","isDisabled","contentLeft","contentRight","ref","useRef","_useContext","useContext","Context","focusedPath","checked","multiselect","size","handleCheckboxChange","handleItemClick","variant","renderItem","isDisabledClassName","classes","dropdownItemIsDisabled","undefined","focusedClass","length","dropdownItemIsFocused","activeClass","dropdownItemIsActive","useEffect","current","scrollIntoView","behavior","block","inline","handleChange","e","stopPropagation","handleClick","React","createElement","Wrapper","className","cx","id","toString","onClick","role","IconWrapper","StyledCheckbox","Boolean","get","indeterminate","onChange","selectItemCheckbox","_StyledIndicator","StyledIndicator","view","IconDone","sizeToIconSize","color","StyledContentLeft","StyledText","StyledContentRight","isEmpty","items","DisclosureIconWrapper","IconDisclosureRightCentered"],"mappings":"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"}
@@ -18,10 +18,10 @@ var StyledCheckbox = /*#__PURE__*/styled(_exp())({
18
18
  });
19
19
  var mergedIndicatorConfig = /*#__PURE__*/mergeConfig(indicatorConfig);
20
20
  var Indicator = /*#__PURE__*/component(mergedIndicatorConfig);
21
- var _exp7 = function _exp7() {
21
+ var _exp12 = function _exp12() {
22
22
  return Indicator;
23
23
  };
24
- var StyledIndicator = /*#__PURE__*/styled(_exp7())({
24
+ var StyledIndicator = /*#__PURE__*/styled(_exp12())({
25
25
  name: "StyledIndicator",
26
26
  "class": "sywiq3e",
27
27
  propsAsIs: true
@@ -41,19 +41,19 @@ var DisclosureIconWrapper = /*#__PURE__*/styled('div')({
41
41
  "class": "dbxrye",
42
42
  propsAsIs: false
43
43
  });
44
- var _exp15 = function _exp15() {
44
+ var _exp20 = function _exp20() {
45
45
  return function (_ref) {
46
46
  var variant = _ref.variant;
47
47
  return "var(".concat(variant === 'tight' ? tokens.itemIconSizeTight : tokens.itemIconSize, ")");
48
48
  };
49
49
  };
50
- var _exp19 = function _exp19() {
50
+ var _exp24 = function _exp24() {
51
51
  return function (_ref2) {
52
52
  var variant = _ref2.variant;
53
53
  return "var(".concat(variant === 'tight' ? tokens.checkboxTriggerSizeTight : tokens.checkboxTriggerSize, ")");
54
54
  };
55
55
  };
56
- var _exp20 = function _exp20() {
56
+ var _exp25 = function _exp25() {
57
57
  return function (_ref3) {
58
58
  var variant = _ref3.variant;
59
59
  return "var(".concat(variant === 'tight' ? tokens.checkboxTriggerBorderRadiusTight : tokens.checkboxTriggerBorderRadius, ")");
@@ -64,9 +64,9 @@ var IconWrapper = /*#__PURE__*/styled('div')({
64
64
  "class": "ijzon79",
65
65
  propsAsIs: false,
66
66
  vars: {
67
- "ijzon79-0": [/*#__PURE__*/_exp15()],
68
- "ijzon79-1": [/*#__PURE__*/_exp19()],
69
- "ijzon79-2": [/*#__PURE__*/_exp20()]
67
+ "ijzon79-0": [/*#__PURE__*/_exp20()],
68
+ "ijzon79-1": [/*#__PURE__*/_exp24()],
69
+ "ijzon79-2": [/*#__PURE__*/_exp25()]
70
70
  }
71
71
  });
72
72
  var StyledText = /*#__PURE__*/styled('div')({
@@ -74,7 +74,7 @@ var StyledText = /*#__PURE__*/styled('div')({
74
74
  "class": "s1vkcneb",
75
75
  propsAsIs: false
76
76
  });
77
- var _exp23 = function _exp23() {
77
+ var _exp28 = function _exp28() {
78
78
  return function (_ref4) {
79
79
  var variant = _ref4.variant;
80
80
  return "var(".concat(variant === 'tight' ? tokens.itemPaddingTight : tokens.itemPadding, ")");
@@ -85,7 +85,7 @@ var Wrapper = /*#__PURE__*/styled('li')({
85
85
  "class": "w1nwrhpk",
86
86
  propsAsIs: false,
87
87
  vars: {
88
- "w1nwrhpk-0": [/*#__PURE__*/_exp23()]
88
+ "w1nwrhpk-0": [/*#__PURE__*/_exp28()]
89
89
  }
90
90
  });
91
91
 
@@ -1 +1 @@
1
- {"version":3,"file":"Item.styles.js","sources":["../../../../../../../src/components/Select/elements/Inner/elements/Item/Item.styles.ts"],"sourcesContent":["import { styled } from '@linaria/react';\n\nimport { classes, tokens, constants } from '../../../../Select.tokens';\nimport { addFocus, applyEllipsis } from '../../../../../../mixins';\nimport { component, mergeConfig } from '../../../../../../engines';\nimport { checkboxConfig } from '../../../../../Checkbox';\nimport { indicatorConfig, indicatorTokens } from '../../../../../Indicator';\nimport type { SelectProps } from '../../../../Select.types';\n\nconst mergedCheckboxConfig = mergeConfig(checkboxConfig);\nconst Checkbox = component(mergedCheckboxConfig);\n\nexport const StyledCheckbox = styled(Checkbox)`\n --plasma-checkbox-trigger-size: var(${tokens.checkboxTriggerSize});\n --plasma-checkbox-trigger-border-radius: var(${tokens.checkboxTriggerBorderRadius});\n --plasma-checkbox-fill-color: var(${tokens.checkboxFillColor});\n --plasma-checkbox-icon-color: var(${tokens.checkboxIconColor});\n --plasma-checkbox-trigger-border-color: var(${tokens.checkboxTriggerBorderColor});\n`;\n\nconst mergedIndicatorConfig = mergeConfig(indicatorConfig);\nconst Indicator = component(mergedIndicatorConfig);\n\nexport const StyledIndicator = styled(Indicator)`\n ${indicatorTokens.size}: var(${tokens.indicatorSize});\n ${indicatorTokens.color}: var(${tokens.checkboxFillColor});\n`;\n\nexport const StyledContentLeft = styled.div`\n display: inline-flex;\n`;\n\nexport const StyledContentRight = styled.div`\n margin-left: auto;\n display: inline-flex;\n`;\n\nexport const DisclosureIconWrapper = styled.div`\n line-height: 0;\n color: var(${constants.disclosureIconColor});\n\n &:hover {\n color: var(${constants.disclosureIconColorHover});\n }\n`;\n\nexport const IconWrapper = styled.div<{ variant: SelectProps['variant'] }>`\n display: flex;\n align-items: center;\n justify-content: center;\n width: ${({ variant }) => `var(${variant === 'tight' ? tokens.itemIconSizeTight : tokens.itemIconSize})`};\n height: ${({ variant }) => `var(${variant === 'tight' ? tokens.itemIconSizeTight : tokens.itemIconSize})`};\n margin: var(${tokens.itemIconMargin});\n line-height: 0;\n color: var(${tokens.checkboxFillColor});\n\n & .${classes.selectItemCheckbox} {\n --plasma-checkbox-trigger-size: ${({ variant }) =>\n `var(${variant === 'tight' ? tokens.checkboxTriggerSizeTight : tokens.checkboxTriggerSize})`};\n --plasma-checkbox-trigger-border-radius: ${({ variant }) =>\n `var(${\n variant === 'tight' ? tokens.checkboxTriggerBorderRadiusTight : tokens.checkboxTriggerBorderRadius\n })`};\n }\n`;\n\nexport const StyledText = styled.div`\n ${applyEllipsis()};\n flex: 1;\n`;\n\nexport const Wrapper = styled.li<{ variant: SelectProps['variant'] }>`\n display: flex;\n align-items: center;\n min-height: var(${tokens.itemHeight});\n margin: 0;\n box-sizing: content-box;\n padding: ${({ variant }) => `var(${variant === 'tight' ? tokens.itemPaddingTight : tokens.itemPadding})`};\n font-family: var(${tokens.fontFamily});\n font-size: var(${tokens.fontSize});\n font-style: var(${tokens.fontStyle});\n font-weight: var(${tokens.fontWeight});\n letter-spacing: var(${tokens.fontLetterSpacing});\n line-height: var(${tokens.fontLineHeight});\n background: var(${constants.itemBackground});\n color: var(--text-primary);\n border-radius: var(${tokens.itemBorderRadius});\n user-select: none;\n\n &:hover:not(.${classes.dropdownItemIsDisabled}) {\n cursor: pointer;\n background: var(${constants.itemBackgroundHover});\n }\n\n &.${classes.dropdownItemIsActive} {\n background: var(${constants.itemBackgroundHover});\n }\n\n &.${classes.dropdownItemIsDisabled} {\n opacity: 0.4;\n cursor: not-allowed;\n }\n\n :focus {\n outline: none;\n }\n\n ${addFocus({\n outlineSize: '0.0625rem',\n outlineOffset: '0',\n outlineColor: `var(${constants.focusColor})`,\n outlineRadius: `var(${tokens.itemBorderRadius})`,\n hasTransition: false,\n customFocusRules: `\n &.${classes.dropdownItemIsFocused}:before {\n outline: none;\n box-shadow: 0 0 0 0.0625rem var(${constants.focusColor});\n }\n `,\n })};\n`;\n"],"names":["mergedCheckboxConfig","mergeConfig","checkboxConfig","Checkbox","component","_exp","StyledCheckbox","styled","name","class","propsAsIs","mergedIndicatorConfig","indicatorConfig","Indicator","_exp7","StyledIndicator","StyledContentLeft","StyledContentRight","DisclosureIconWrapper","_exp15","_ref","variant","tokens","itemIconSizeTight","itemIconSize","_exp19","_ref2","checkboxTriggerSizeTight","checkboxTriggerSize","_exp20","_ref3","checkboxTriggerBorderRadiusTight","checkboxTriggerBorderRadius","IconWrapper","vars","StyledText","_exp23","_ref4","itemPaddingTight","itemPadding","Wrapper"],"mappings":"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"}
1
+ {"version":3,"file":"Item.styles.js","sources":["../../../../../../../src/components/Select/elements/Inner/elements/Item/Item.styles.ts"],"sourcesContent":["import { styled } from '@linaria/react';\n\nimport { classes, tokens, constants } from '../../../../Select.tokens';\nimport { addFocus, applyEllipsis } from '../../../../../../mixins';\nimport { component, mergeConfig } from '../../../../../../engines';\nimport { checkboxConfig, checkboxTokens } from '../../../../../Checkbox';\nimport { indicatorConfig, indicatorTokens } from '../../../../../Indicator';\nimport type { SelectProps } from '../../../../Select.types';\n\nconst mergedCheckboxConfig = mergeConfig(checkboxConfig);\nconst Checkbox = component(mergedCheckboxConfig);\n\nexport const StyledCheckbox = styled(Checkbox)`\n ${checkboxTokens.triggerSize}: var(${tokens.checkboxTriggerSize});\n ${checkboxTokens.triggerBorderRadius}: var(${tokens.checkboxTriggerBorderRadius});\n ${checkboxTokens.fillColor}: var(${tokens.checkboxFillColor});\n ${checkboxTokens.iconColor}: var(${tokens.checkboxIconColor});\n ${checkboxTokens.triggerBorderColor}: var(${tokens.checkboxTriggerBorderColor});\n`;\n\nconst mergedIndicatorConfig = mergeConfig(indicatorConfig);\nconst Indicator = component(mergedIndicatorConfig);\n\nexport const StyledIndicator = styled(Indicator)`\n ${indicatorTokens.size}: var(${tokens.indicatorSize});\n ${indicatorTokens.color}: var(${tokens.checkboxFillColor});\n`;\n\nexport const StyledContentLeft = styled.div`\n display: inline-flex;\n`;\n\nexport const StyledContentRight = styled.div`\n margin-left: auto;\n display: inline-flex;\n`;\n\nexport const DisclosureIconWrapper = styled.div`\n line-height: 0;\n color: var(${constants.disclosureIconColor});\n\n &:hover {\n color: var(${constants.disclosureIconColorHover});\n }\n`;\n\nexport const IconWrapper = styled.div<{ variant: SelectProps['variant'] }>`\n display: flex;\n align-items: center;\n justify-content: center;\n width: ${({ variant }) => `var(${variant === 'tight' ? tokens.itemIconSizeTight : tokens.itemIconSize})`};\n height: ${({ variant }) => `var(${variant === 'tight' ? tokens.itemIconSizeTight : tokens.itemIconSize})`};\n margin: var(${tokens.itemIconMargin});\n line-height: 0;\n color: var(${tokens.checkboxFillColor});\n\n & .${classes.selectItemCheckbox} {\n --plasma-checkbox-trigger-size: ${({ variant }) =>\n `var(${variant === 'tight' ? tokens.checkboxTriggerSizeTight : tokens.checkboxTriggerSize})`};\n --plasma-checkbox-trigger-border-radius: ${({ variant }) =>\n `var(${\n variant === 'tight' ? tokens.checkboxTriggerBorderRadiusTight : tokens.checkboxTriggerBorderRadius\n })`};\n }\n`;\n\nexport const StyledText = styled.div`\n ${applyEllipsis()};\n flex: 1;\n`;\n\nexport const Wrapper = styled.li<{ variant: SelectProps['variant'] }>`\n display: flex;\n align-items: center;\n min-height: var(${tokens.itemHeight});\n margin: 0;\n box-sizing: content-box;\n padding: ${({ variant }) => `var(${variant === 'tight' ? tokens.itemPaddingTight : tokens.itemPadding})`};\n font-family: var(${tokens.fontFamily});\n font-size: var(${tokens.fontSize});\n font-style: var(${tokens.fontStyle});\n font-weight: var(${tokens.fontWeight});\n letter-spacing: var(${tokens.fontLetterSpacing});\n line-height: var(${tokens.fontLineHeight});\n background: var(${constants.itemBackground});\n color: var(--text-primary);\n border-radius: var(${tokens.itemBorderRadius});\n user-select: none;\n\n &:hover:not(.${classes.dropdownItemIsDisabled}) {\n cursor: pointer;\n background: var(${constants.itemBackgroundHover});\n }\n\n &.${classes.dropdownItemIsActive} {\n background: var(${constants.itemBackgroundHover});\n }\n\n &.${classes.dropdownItemIsDisabled} {\n opacity: 0.4;\n cursor: not-allowed;\n }\n\n :focus {\n outline: none;\n }\n\n ${addFocus({\n outlineSize: '0.0625rem',\n outlineOffset: '0',\n outlineColor: `var(${constants.focusColor})`,\n outlineRadius: `var(${tokens.itemBorderRadius})`,\n hasTransition: false,\n customFocusRules: `\n &.${classes.dropdownItemIsFocused}:before {\n outline: none;\n box-shadow: 0 0 0 0.0625rem var(${constants.focusColor});\n }\n `,\n })};\n`;\n"],"names":["mergedCheckboxConfig","mergeConfig","checkboxConfig","Checkbox","component","_exp","StyledCheckbox","styled","name","class","propsAsIs","mergedIndicatorConfig","indicatorConfig","Indicator","_exp12","StyledIndicator","StyledContentLeft","StyledContentRight","DisclosureIconWrapper","_exp20","_ref","variant","tokens","itemIconSizeTight","itemIconSize","_exp24","_ref2","checkboxTriggerSizeTight","checkboxTriggerSize","_exp25","_ref3","checkboxTriggerBorderRadiusTight","checkboxTriggerBorderRadius","IconWrapper","vars","StyledText","_exp28","_ref4","itemPaddingTight","itemPadding","Wrapper"],"mappings":";;;;;;;AASA,IAAMA,oBAAoB,gBAAGC,WAAW,CAACC,cAAc,CAAC,CAAA;AACxD,IAAMC,QAAQ,gBAAGC,SAAS,CAACJ,oBAAoB,CAAC,CAAA;AAAC,IAAAK,IAAA,GAT/BA,SAS+BA,IAAAA,GAAA;AAAA,EAAA,OAEZF,QAAQ,CAAA;AAAA,CAAA,CAAA;AAAtC,IAAMG,cAAc,gBAAGC,MAAM,CAAAF,IAAA,EAAA,CAAA,CAAA;AAAAG,EAAAA,IAAA,EAAA,gBAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,IAAA;AAAA,CAMnC,EAAA;AAED,IAAMC,qBAAqB,gBAAGV,WAAW,CAACW,eAAe,CAAC,CAAA;AAC1D,IAAMC,SAAS,gBAAGT,SAAS,CAACO,qBAAqB,CAAC,CAAA;AAAC,IAAAG,MAAA,GApBjCA,SAoBiCA,MAAAA,GAAA;AAAA,EAAA,OAEbD,SAAS,CAAA;AAAA,CAAA,CAAA;AAAxC,IAAME,eAAe,gBAAGR,MAAM,CAAAO,MAAA,EAAA,CAAA,CAAA;AAAAN,EAAAA,IAAA,EAAA,iBAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,IAAA;AAAA,CAGpC,EAAA;AAEM,IAAMM,iBAAiB,gBAAGT,MAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,mBAAA;AAAAC,EAAAA,OAAAA,EAAA,UAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAEtC,EAAA;AAEM,IAAMO,kBAAkB,gBAAGV,MAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,oBAAA;AAAAC,EAAAA,OAAAA,EAAA,UAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAGvC,EAAA;AAEM,IAAMQ,qBAAqB,gBAAGX,MAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,uBAAA;AAAAC,EAAAA,OAAAA,EAAA,QAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAO1C,EAAA;AAAC,IAAAS,MAAA,GA3CgBA,SA2ChBA,MAAAA,GAAA;AAAA,EAAA,OAOY,UAAAC,IAAA,EAAA;AAAA,IAAA,IAAGC,OAAAA,GAAAA,IAAAA,CAAAA,OAAAA,CAAAA;AAAAA,IAAAA,OAAAA,MAAAA,CAAAA,MAAAA,CAAqBA,OAAO,KAAK,OAAO,GAAGC,MAAM,CAACC,iBAAiB,GAAGD,MAAM,CAACE,YAAa,EAAA,GAAA,CAAA,CAAA;GAAE,CAAA;AAAA,CAAA,CAAA;AAAA,IAAAC,MAAA,GAlD3FA,SAkD2FA,MAAAA,GAAA;AAAA,EAAA,OAMnE,UAAAC,KAAA,EAAA;AAAA,IAAA,IAAGL,OAAAA,GAAAA,KAAAA,CAAAA,OAAAA,CAAAA;AAAAA,IAAAA,OAAAA,MAAAA,CAAAA,MAAAA,CAC1BA,OAAO,KAAK,OAAO,GAAGC,MAAM,CAACK,wBAAwB,GAAGL,MAAM,CAACM,mBAAoB,EAAA,GAAA,CAAA,CAAA;GAAE,CAAA;AAAA,CAAA,CAAA;AAAA,IAAAC,MAAA,GAzDtFA,SAyDsFA,MAAAA,GAAA;AAAA,EAAA,OACrD,UAAAC,KAAA,EAAA;AAAA,IAAA,IAAGT,OAAAA,GAAAA,KAAAA,CAAAA,OAAAA,CAAAA;AAAAA,IAAAA,OAAAA,MAAAA,CAAAA,MAAAA,CAEtCA,OAAO,KAAK,OAAO,GAAGC,MAAM,CAACS,gCAAgC,GAAGT,MAAM,CAACU,2BAC1E,EAAA,GAAA,CAAA,CAAA;GAAE,CAAA;AAAA,CAAA,CAAA;AAhBR,IAAMC,WAAW,gBAAG1B,MAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,aAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAAwB,EAAAA,IAAA,EAAA;AAAA,IAAA,WAAA,EAAA,cAKnBf,MAA+F,EAAA,CAAA;AAAA,IAAA,WAAA,EAAA,cAMnEM,MAC8D,EAAA,CAAA;AAAA,IAAA,WAAA,EAAA,cACrDI,MAGpC,EAAA,CAAA;AAAA,GAAA;AAAA,CAEd,EAAA;AAEM,IAAMM,UAAU,gBAAG5B,MAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,YAAA;AAAAC,EAAAA,OAAAA,EAAA,UAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAG/B,EAAA;AAAC,IAAA0B,MAAA,GApEgBA,SAoEhBA,MAAAA,GAAA;AAAA,EAAA,OAQa,UAAAC,KAAA,EAAA;AAAA,IAAA,IAAGhB,OAAAA,GAAAA,KAAAA,CAAAA,OAAAA,CAAAA;AAAAA,IAAAA,OAAAA,MAAAA,CAAAA,MAAAA,CAAqBA,OAAO,KAAK,OAAO,GAAGC,MAAM,CAACgB,gBAAgB,GAAGhB,MAAM,CAACiB,WAAY,EAAA,GAAA,CAAA,CAAA;GAAE,CAAA;AAAA,CAAA,CAAA;AANrG,IAAMC,OAAO,gBAAGjC,MAAM,CAAA,IAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,SAAA;AAAAC,EAAAA,OAAAA,EAAA,UAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAAwB,EAAAA,IAAA,EAAA;AAAA,IAAA,YAAA,EAAA,cAMdE,MAA6F,EAAA,CAAA;AAAA,GAAA;AAAA,CA2C3G;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"Textfield.styles.js","sources":["../../../../../../../src/components/Select/elements/Target/elements/Textfield/Textfield.styles.tsx"],"sourcesContent":["import { styled } from '@linaria/react';\n\nimport { isEmpty } from '../../../../../../utils';\nimport { applyEllipsis, addFocus } from '../../../../../../mixins';\nimport { IconDisclosureDownCentered } from '../../../../../_Icon';\nimport { component, mergeConfig } from '../../../../../../engines';\nimport { buttonConfig, buttonTokens } from '../../../../../Button';\nimport { tokens, classes, constants } from '../../../../Select.tokens';\nimport type { SelectProps } from '../../../../Select.types';\n\nconst mergedButtonConfig = mergeConfig(buttonConfig);\nconst Button = component(mergedButtonConfig);\n\nexport const TextfieldWrapper = styled.div<{ opened: boolean; value: SelectProps['value'] }>`\n display: inline;\n\n .${classes.textfieldTarget} {\n background: ${({ opened }) =>\n opened\n ? `var(${tokens.targetTextfieldBackgroundColorOpened})`\n : `var(${tokens.targetTextfieldBackgroundColor})`};\n padding: ${({ value }) =>\n Array.isArray(value) && !isEmpty(value)\n ? `0 var(${tokens.targetTextfieldChipPadding})`\n : `0 var(${tokens.targetTextfieldPadding})`};\n }\n\n .${classes.selectWithoutBoxShadow}::before {\n box-shadow: none !important;\n }\n`;\n\nexport const c2 = {\n focusSize: '6.25rem',\n};\n\nexport const StyledButton = styled(Button)`\n ${buttonTokens.buttonColor}: var(${constants.textfieldTargetColor});\n ${buttonTokens.buttonColorHover}: var(${constants.textfieldTargetColor});\n ${buttonTokens.buttonColorActive}: var(${constants.textfieldTargetColor});\n ${buttonTokens.buttonBackgroundColor}: var(${tokens.targetTextfieldBackgroundColor});\n ${buttonTokens.buttonHeight}: var(${tokens.targetHeight});\n ${buttonTokens.buttonWidth}: 100%;\n ${buttonTokens.buttonPadding}: var(${tokens.targetTextfieldPadding});\n ${buttonTokens.buttonRadius}: var(${tokens.borderRadius});\n ${buttonTokens.buttonFontFamily}: var(${tokens.fontFamily});\n ${buttonTokens.buttonFontSize}: var(${tokens.fontSize});\n ${buttonTokens.buttonFontStyle}: var(${tokens.fontStyle});\n ${buttonTokens.buttonFontWeight}:var(${tokens.fontWeight});\n ${buttonTokens.buttonLetterSpacing}: var(${tokens.fontLetterSpacing});\n ${buttonTokens.buttonLineHeight}: var(${tokens.fontLineHeight});\n ${buttonTokens.buttonDisabledOpacity}: 0.4;\n ${buttonTokens.buttonFocusColor}: var(${constants.focusColor});\n\n ${addFocus({\n outlineOffset: `calc(var(${tokens.focusOffset}) * -1)`,\n outlineSize: constants.focusSize,\n outlineRadius: `calc(var(${tokens.borderRadius}) + var(${tokens.focusOffset}))`,\n outlineColor: constants.focusColor,\n })}\n`;\n\nexport const StyledArrow = styled(IconDisclosureDownCentered)``;\n\nexport const IconArrowWrapper = styled.div`\n line-height: 0;\n margin: var(${tokens.targetTextfieldArrowMargin});\n color: var(${tokens.targetTextfieldArrowColor});\n\n &:hover {\n color: var(${tokens.targetTextfieldArrowColorHover});\n }\n\n &:active {\n color: var(${tokens.targetTextfieldArrowColorActive});\n }\n`;\n\nexport const Wrapper = styled.div`\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n .${classes.arrowInverse} {\n transform: rotate(-180deg);\n }\n`;\n\nexport const ChipWrapper = styled.div`\n width: 100%;\n display: flex;\n min-width: 0;\n padding: calc(${constants.focusSize} + var(${tokens.focusOffset}));\n gap: 0.25rem;\n overflow-x: scroll;\n border-top-right-radius: var(${tokens.chipBorderRadius});\n border-bottom-right-radius: var(${tokens.chipBorderRadius});\n\n -ms-overflow-style: none;\n scrollbar-width: none;\n\n &::-webkit-scrollbar {\n display: none;\n }\n`;\n\nexport const Label = styled.label`\n color: var(${constants.textfieldInnerLabelColor});\n font-family: var(${tokens.fontFamily});\n font-size: var(${tokens.fontSize});\n font-style: var(${tokens.fontStyle});\n font-weight: var(${tokens.fontWeight});\n letter-spacing: var(${tokens.fontLetterSpacing});\n line-height: var(${tokens.fontLineHeight});\n`;\n\nexport const Placeholder = styled.div`\n color: var(${constants.textfieldPlaceholderColor});\n font-family: var(${tokens.fontFamily});\n font-size: var(${tokens.fontSize});\n font-style: var(${tokens.fontStyle});\n font-weight: var(${tokens.fontWeight});\n letter-spacing: var(${tokens.fontLetterSpacing});\n line-height: var(${tokens.fontLineHeight});\n`;\n\nexport const InnerLabelWrapper = styled.div`\n display: flex;\n flex-direction: column;\n align-items: start;\n row-gap: var(${tokens.innerLabelGap});\n font-family: var(${tokens.fontFamily});\n font-size: var(${tokens.fontSize});\n font-style: var(${tokens.fontStyle});\n font-weight: var(${tokens.fontWeight});\n letter-spacing: var(${tokens.fontLetterSpacing});\n line-height: var(${tokens.fontLineHeight});\n`;\n\nexport const InnerLabel = styled.label`\n color: var(${constants.textfieldInnerLabelColor});\n font-family: var(--plasma-typo-body-xs-font-family);\n font-size: var(--plasma-typo-body-xs-font-size);\n font-style: var(--plasma-typo-body-xs-font-style);\n font-weight: var(--plasma-typo-body-xs-font-weight);\n letter-spacing: var(--plasma-typo-body-xs-letter-spacing);\n line-height: var(--plasma-typo-body-xs-line-height);\n text-align: left;\n`;\n\nexport const ContentLeftWrapper = styled.div`\n flex: none;\n margin-left: -2px;\n margin-right: 6px;\n`;\n\nexport const Value = styled.span`\n ${applyEllipsis()}\n`;\n"],"names":["mergedButtonConfig","mergeConfig","buttonConfig","Button","component","_exp2","_ref","opened","concat","tokens","targetTextfieldBackgroundColorOpened","targetTextfieldBackgroundColor","_exp3","_ref2","value","Array","isArray","isEmpty","targetTextfieldChipPadding","targetTextfieldPadding","TextfieldWrapper","styled","name","class","propsAsIs","vars","_exp5","StyledButton","_exp37","IconDisclosureDownCentered","StyledArrow","IconArrowWrapper","Wrapper","ChipWrapper","Label","Placeholder","InnerLabelWrapper","InnerLabel","ContentLeftWrapper","Value"],"mappings":"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"}
1
+ {"version":3,"file":"Textfield.styles.js","sources":["../../../../../../../src/components/Select/elements/Target/elements/Textfield/Textfield.styles.tsx"],"sourcesContent":["import { styled } from '@linaria/react';\n\nimport { isEmpty } from '../../../../../../utils';\nimport { applyEllipsis, addFocus } from '../../../../../../mixins';\nimport { IconDisclosureDownCentered } from '../../../../../_Icon';\nimport { component, mergeConfig } from '../../../../../../engines';\nimport { buttonConfig, buttonTokens } from '../../../../../Button';\nimport { tokens, classes, constants } from '../../../../Select.tokens';\nimport type { SelectProps } from '../../../../Select.types';\n\nconst mergedButtonConfig = mergeConfig(buttonConfig);\nconst Button = component(mergedButtonConfig);\n\nexport const TextfieldWrapper = styled.div<{ opened: boolean; value: SelectProps['value'] }>`\n display: inline;\n\n .${classes.textfieldTarget} {\n background: ${({ opened }) =>\n opened\n ? `var(${tokens.targetTextfieldBackgroundColorOpened})`\n : `var(${tokens.targetTextfieldBackgroundColor})`};\n padding: ${({ value }) =>\n Array.isArray(value) && !isEmpty(value)\n ? `0 var(${tokens.targetTextfieldChipPadding})`\n : `0 var(${tokens.targetTextfieldPadding})`};\n }\n\n .${classes.selectWithoutBoxShadow}::before {\n box-shadow: none !important;\n }\n`;\n\nexport const StyledButton = styled(Button)`\n ${buttonTokens.buttonColor}: var(${constants.textfieldTargetColor});\n ${buttonTokens.buttonColorHover}: var(${constants.textfieldTargetColor});\n ${buttonTokens.buttonColorActive}: var(${constants.textfieldTargetColor});\n ${buttonTokens.buttonBackgroundColor}: var(${tokens.targetTextfieldBackgroundColor});\n ${buttonTokens.buttonHeight}: var(${tokens.targetHeight});\n ${buttonTokens.buttonWidth}: 100%;\n ${buttonTokens.buttonPadding}: var(${tokens.targetTextfieldPadding});\n ${buttonTokens.buttonRadius}: var(${tokens.borderRadius});\n ${buttonTokens.buttonFontFamily}: var(${tokens.fontFamily});\n ${buttonTokens.buttonFontSize}: var(${tokens.fontSize});\n ${buttonTokens.buttonFontStyle}: var(${tokens.fontStyle});\n ${buttonTokens.buttonFontWeight}:var(${tokens.fontWeight});\n ${buttonTokens.buttonLetterSpacing}: var(${tokens.fontLetterSpacing});\n ${buttonTokens.buttonLineHeight}: var(${tokens.fontLineHeight});\n ${buttonTokens.buttonDisabledOpacity}: 0.4;\n ${buttonTokens.buttonFocusColor}: var(${constants.focusColor});\n\n ${addFocus({\n outlineOffset: `calc(var(${tokens.focusOffset}) * -1)`,\n outlineSize: constants.focusSize,\n outlineRadius: `calc(var(${tokens.borderRadius}) + var(${tokens.focusOffset}))`,\n outlineColor: constants.focusColor,\n })}\n`;\n\nexport const StyledArrow = styled(IconDisclosureDownCentered)``;\n\nexport const IconArrowWrapper = styled.div`\n line-height: 0;\n margin: var(${tokens.targetTextfieldArrowMargin});\n color: var(${tokens.targetTextfieldArrowColor});\n\n &:hover {\n color: var(${tokens.targetTextfieldArrowColorHover});\n }\n\n &:active {\n color: var(${tokens.targetTextfieldArrowColorActive});\n }\n`;\n\nexport const Wrapper = styled.div`\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n .${classes.arrowInverse} {\n transform: rotate(-180deg);\n }\n`;\n\nexport const ChipWrapper = styled.div`\n width: 100%;\n display: flex;\n min-width: 0;\n padding: calc(${constants.focusSize} + var(${tokens.focusOffset}));\n gap: 0.25rem;\n overflow-x: scroll;\n border-top-right-radius: var(${tokens.chipBorderRadius});\n border-bottom-right-radius: var(${tokens.chipBorderRadius});\n\n -ms-overflow-style: none;\n scrollbar-width: none;\n\n &::-webkit-scrollbar {\n display: none;\n }\n`;\n\nexport const Label = styled.label`\n color: var(${constants.textfieldInnerLabelColor});\n font-family: var(${tokens.fontFamily});\n font-size: var(${tokens.fontSize});\n font-style: var(${tokens.fontStyle});\n font-weight: var(${tokens.fontWeight});\n letter-spacing: var(${tokens.fontLetterSpacing});\n line-height: var(${tokens.fontLineHeight});\n`;\n\nexport const Placeholder = styled.div`\n color: var(${constants.textfieldPlaceholderColor});\n font-family: var(${tokens.fontFamily});\n font-size: var(${tokens.fontSize});\n font-style: var(${tokens.fontStyle});\n font-weight: var(${tokens.fontWeight});\n letter-spacing: var(${tokens.fontLetterSpacing});\n line-height: var(${tokens.fontLineHeight});\n`;\n\nexport const InnerLabelWrapper = styled.div`\n display: flex;\n flex-direction: column;\n align-items: start;\n row-gap: var(${tokens.innerLabelGap});\n font-family: var(${tokens.fontFamily});\n font-size: var(${tokens.fontSize});\n font-style: var(${tokens.fontStyle});\n font-weight: var(${tokens.fontWeight});\n letter-spacing: var(${tokens.fontLetterSpacing});\n line-height: var(${tokens.fontLineHeight});\n`;\n\nexport const InnerLabel = styled.label`\n color: var(${constants.textfieldInnerLabelColor});\n font-family: var(--plasma-typo-body-xs-font-family);\n font-size: var(--plasma-typo-body-xs-font-size);\n font-style: var(--plasma-typo-body-xs-font-style);\n font-weight: var(--plasma-typo-body-xs-font-weight);\n letter-spacing: var(--plasma-typo-body-xs-letter-spacing);\n line-height: var(--plasma-typo-body-xs-line-height);\n text-align: left;\n`;\n\nexport const ContentLeftWrapper = styled.div`\n flex: none;\n margin-left: -2px;\n margin-right: 6px;\n`;\n\nexport const Value = styled.span`\n ${applyEllipsis()}\n`;\n"],"names":["mergedButtonConfig","mergeConfig","buttonConfig","Button","component","_exp2","_ref","opened","concat","tokens","targetTextfieldBackgroundColorOpened","targetTextfieldBackgroundColor","_exp3","_ref2","value","Array","isArray","isEmpty","targetTextfieldChipPadding","targetTextfieldPadding","TextfieldWrapper","styled","name","class","propsAsIs","vars","_exp5","StyledButton","_exp37","IconDisclosureDownCentered","StyledArrow","IconArrowWrapper","Wrapper","ChipWrapper","Label","Placeholder","InnerLabelWrapper","InnerLabel","ContentLeftWrapper","Value"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salutejs/plasma-new-hope",
3
- "version": "0.88.0-canary.1233.9452624028.0",
3
+ "version": "0.88.0-canary.1233.9486423566.0",
4
4
  "description": "Salute Design System blueprint",
5
5
  "main": "cjs/index.js",
6
6
  "module": "es/index.js",
@@ -103,5 +103,5 @@
103
103
  "react-popper": "2.3.0",
104
104
  "storeon": "3.1.5"
105
105
  },
106
- "gitHead": "0844cf5e9598b5a8c62c76c8b381e829b68cc038"
106
+ "gitHead": "0e6e125d5a77173b5f64ad64408f409ed450f5f2"
107
107
  }
@@ -18,7 +18,7 @@ var _usePathMaps3 = /*#__PURE__*/require("./hooks/usePathMaps");
18
18
  var _Select = /*#__PURE__*/require("./Select.styles");
19
19
  var _base = /*#__PURE__*/require("./variations/_view/base");
20
20
  var _base2 = /*#__PURE__*/require("./variations/_size/base");
21
- var _excluded = ["value", "onChange", "target", "separator", "items", "placement", "label", "labelPlacement", "placeholder", "helperText", "isTargetAmount", "disabled", "view", "size", "isOpen", "listOverflow", "listHeight", "listWidth", "status", "contentLeft", "onScrollBottom", "isInfiniteLoading", "notFoundContent", "chipView", "variant", "portal", "renderValue"];
21
+ var _excluded = ["value", "onChange", "target", "separator", "items", "placement", "label", "labelPlacement", "placeholder", "helperText", "isTargetAmount", "disabled", "view", "size", "isOpen", "listOverflow", "listHeight", "listWidth", "status", "contentLeft", "onScrollBottom", "isInfiniteLoading", "notFoundContent", "chipView", "variant", "portal", "renderValue", "renderItem"];
22
22
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
23
23
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
24
24
  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); }
@@ -70,6 +70,7 @@ var selectRoot = exports.selectRoot = function selectRoot(Root) {
70
70
  variant = _props$variant === void 0 ? 'normal' : _props$variant,
71
71
  portal = props.portal,
72
72
  renderValue = props.renderValue,
73
+ renderItem = props.renderItem,
73
74
  rest = _objectWithoutProperties(props, _excluded);
74
75
  var multiselect = Array.isArray(value);
75
76
  var transformedItems = (0, _react.useMemo)(function () {
@@ -230,7 +231,8 @@ var selectRoot = exports.selectRoot = function selectRoot(Root) {
230
231
  size: size,
231
232
  handleCheckboxChange: handleCheckboxChange,
232
233
  handleItemClick: handleItemClick,
233
- variant: variant
234
+ variant: variant,
235
+ renderItem: renderItem
234
236
  }
235
237
  }, /*#__PURE__*/_react["default"].createElement(_Select.StyledPopover, {
236
238
  ref: targetRef,
@@ -39,7 +39,8 @@ var Item = exports.Item = function Item(_ref) {
39
39
  size = _useContext.size,
40
40
  handleCheckboxChange = _useContext.handleCheckboxChange,
41
41
  handleItemClick = _useContext.handleItemClick,
42
- variant = _useContext.variant;
42
+ variant = _useContext.variant,
43
+ renderItem = _useContext.renderItem;
43
44
  var isDisabledClassName = disabled || isDisabled ? _Select.classes.dropdownItemIsDisabled : undefined;
44
45
  var focusedClass = currentLevel === focusedPath.length - 1 && index === (focusedPath === null || focusedPath === void 0 ? void 0 : focusedPath[currentLevel]) ? _Select.classes.dropdownItemIsFocused : undefined;
45
46
  var activeClass = value === (path === null || path === void 0 ? void 0 : path[currentLevel + 1]) ? _Select.classes.dropdownItemIsActive : undefined;
@@ -89,7 +90,7 @@ var Item = exports.Item = function Item(_ref) {
89
90
  }))), !multiselect && checked.get(item.value) === 'done' && /*#__PURE__*/_react["default"].createElement(_Icon.IconDone, {
90
91
  size: (0, _utils.sizeToIconSize)(size, variant),
91
92
  color: "inherit"
92
- })), contentLeft && /*#__PURE__*/_react["default"].createElement(_Item.StyledContentLeft, null, contentLeft), /*#__PURE__*/_react["default"].createElement(_Item.StyledText, null, label), contentRight && /*#__PURE__*/_react["default"].createElement(_Item.StyledContentRight, null, contentRight), !(0, _utils2.isEmpty)(item.items) && /*#__PURE__*/_react["default"].createElement(_Item.DisclosureIconWrapper, null, /*#__PURE__*/_react["default"].createElement(_Icon.IconDisclosureRightCentered, {
93
+ })), contentLeft && /*#__PURE__*/_react["default"].createElement(_Item.StyledContentLeft, null, contentLeft), /*#__PURE__*/_react["default"].createElement(_Item.StyledText, null, renderItem && renderItem(value, label) || label), contentRight && /*#__PURE__*/_react["default"].createElement(_Item.StyledContentRight, null, contentRight), !(0, _utils2.isEmpty)(item.items) && /*#__PURE__*/_react["default"].createElement(_Item.DisclosureIconWrapper, null, /*#__PURE__*/_react["default"].createElement(_Icon.IconDisclosureRightCentered, {
93
94
  size: (0, _utils.sizeToIconSize)(size, variant),
94
95
  color: "inherit"
95
96
  })));
@@ -15,7 +15,7 @@ var mergedCheckboxConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Checkbox.chec
15
15
  var Checkbox = /*#__PURE__*/(0, _engines.component)(mergedCheckboxConfig);
16
16
  var StyledCheckbox = exports.StyledCheckbox = /*#__PURE__*/(0, _styledComponents["default"])(Checkbox).withConfig({
17
17
  componentId: "plasma-new-hope__sc-esps8l-0"
18
- })(["--plasma-checkbox-trigger-size:var(", ");--plasma-checkbox-trigger-border-radius:var(", ");--plasma-checkbox-fill-color:var(", ");--plasma-checkbox-icon-color:var(", ");--plasma-checkbox-trigger-border-color:var(", ");"], _Select.tokens.checkboxTriggerSize, _Select.tokens.checkboxTriggerBorderRadius, _Select.tokens.checkboxFillColor, _Select.tokens.checkboxIconColor, _Select.tokens.checkboxTriggerBorderColor);
18
+ })(["", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");"], _Checkbox.checkboxTokens.triggerSize, _Select.tokens.checkboxTriggerSize, _Checkbox.checkboxTokens.triggerBorderRadius, _Select.tokens.checkboxTriggerBorderRadius, _Checkbox.checkboxTokens.fillColor, _Select.tokens.checkboxFillColor, _Checkbox.checkboxTokens.iconColor, _Select.tokens.checkboxIconColor, _Checkbox.checkboxTokens.triggerBorderColor, _Select.tokens.checkboxTriggerBorderColor);
19
19
  var mergedIndicatorConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Indicator.indicatorConfig);
20
20
  var Indicator = /*#__PURE__*/(0, _engines.component)(mergedIndicatorConfig);
21
21
  var StyledIndicator = exports.StyledIndicator = /*#__PURE__*/(0, _styledComponents["default"])(Indicator).withConfig({
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.c2 = exports.Wrapper = exports.Value = exports.TextfieldWrapper = exports.StyledButton = exports.StyledArrow = exports.Placeholder = exports.Label = exports.InnerLabelWrapper = exports.InnerLabel = exports.IconArrowWrapper = exports.ContentLeftWrapper = exports.ChipWrapper = void 0;
6
+ exports.Wrapper = exports.Value = exports.TextfieldWrapper = exports.StyledButton = exports.StyledArrow = exports.Placeholder = exports.Label = exports.InnerLabelWrapper = exports.InnerLabel = exports.IconArrowWrapper = exports.ContentLeftWrapper = exports.ChipWrapper = void 0;
7
7
  var _styledComponents = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("styled-components"));
8
8
  var _utils = /*#__PURE__*/require("../../../../../../utils");
9
9
  var _mixins = /*#__PURE__*/require("../../../../../../mixins");
@@ -23,9 +23,6 @@ var TextfieldWrapper = exports.TextfieldWrapper = /*#__PURE__*/_styledComponents
23
23
  var value = _ref2.value;
24
24
  return Array.isArray(value) && !(0, _utils.isEmpty)(value) ? "0 var(".concat(_Select.tokens.targetTextfieldChipPadding, ")") : "0 var(".concat(_Select.tokens.targetTextfieldPadding, ")");
25
25
  }, _Select.classes.selectWithoutBoxShadow);
26
- var c2 = exports.c2 = {
27
- focusSize: '6.25rem'
28
- };
29
26
  var StyledButton = exports.StyledButton = /*#__PURE__*/(0, _styledComponents["default"])(Button).withConfig({
30
27
  componentId: "plasma-new-hope__sc-19p4a39-1"
31
28
  })(["", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":100%;", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":0.4;", ":var(", ");", ""], _Button.buttonTokens.buttonColor, _Select.constants.textfieldTargetColor, _Button.buttonTokens.buttonColorHover, _Select.constants.textfieldTargetColor, _Button.buttonTokens.buttonColorActive, _Select.constants.textfieldTargetColor, _Button.buttonTokens.buttonBackgroundColor, _Select.tokens.targetTextfieldBackgroundColor, _Button.buttonTokens.buttonHeight, _Select.tokens.targetHeight, _Button.buttonTokens.buttonWidth, _Button.buttonTokens.buttonPadding, _Select.tokens.targetTextfieldPadding, _Button.buttonTokens.buttonRadius, _Select.tokens.borderRadius, _Button.buttonTokens.buttonFontFamily, _Select.tokens.fontFamily, _Button.buttonTokens.buttonFontSize, _Select.tokens.fontSize, _Button.buttonTokens.buttonFontStyle, _Select.tokens.fontStyle, _Button.buttonTokens.buttonFontWeight, _Select.tokens.fontWeight, _Button.buttonTokens.buttonLetterSpacing, _Select.tokens.fontLetterSpacing, _Button.buttonTokens.buttonLineHeight, _Select.tokens.fontLineHeight, _Button.buttonTokens.buttonDisabledOpacity, _Button.buttonTokens.buttonFocusColor, _Select.constants.focusColor, /*#__PURE__*/(0, _mixins.addFocus)({
@@ -296,7 +296,13 @@ const SingleStory = (args: StorySelectProps) => {
296
296
 
297
297
  return (
298
298
  <div style={{ width: '300px' }}>
299
- <Select {...args} items={items} value={value} onChange={setValue} />
299
+ <Select
300
+ {...args}
301
+ items={items}
302
+ value={value}
303
+ onChange={setValue}
304
+ contentLeft={args.enableContentLeft ? <IconPlaceholder size="s" /> : undefined}
305
+ />
300
306
  </div>
301
307
  );
302
308
  };
@@ -310,7 +316,13 @@ const MultiselectStory = (args: StorySelectProps) => {
310
316
 
311
317
  return (
312
318
  <div style={{ width: '300px' }}>
313
- <Select {...args} items={items} value={value} onChange={setValue} />
319
+ <Select
320
+ {...args}
321
+ items={items}
322
+ value={value}
323
+ onChange={setValue}
324
+ contentLeft={args.enableContentLeft ? <IconPlaceholder size="s" /> : undefined}
325
+ />
314
326
  </div>
315
327
  );
316
328
  };
@@ -325,11 +337,23 @@ const PredefinedStory = (args: StorySelectProps) => {
325
337
 
326
338
  return (
327
339
  <div style={{ width: '300px' }}>
328
- <Select {...args} items={items} value={valueSingle} onChange={setValueSingle} multiselect={false} />
340
+ <Select
341
+ {...args}
342
+ items={items}
343
+ value={valueSingle}
344
+ onChange={setValueSingle}
345
+ contentLeft={args.enableContentLeft ? <IconPlaceholder size="s" /> : undefined}
346
+ />
329
347
 
330
348
  <br />
331
349
 
332
- <Select {...args} items={items} value={valueMultiple} onChange={setValueMultiple} multiselect />
350
+ <Select
351
+ {...args}
352
+ items={items}
353
+ value={valueMultiple}
354
+ onChange={setValueMultiple}
355
+ contentLeft={args.enableContentLeft ? <IconPlaceholder size="s" /> : undefined}
356
+ />
333
357
  </div>
334
358
  );
335
359
  };
@@ -355,6 +379,7 @@ const EmptyListStory = (args: StorySelectProps) => {
355
379
  buttonText="Label"
356
380
  />
357
381
  }
382
+ contentLeft={args.enableContentLeft ? <IconPlaceholder size="s" /> : undefined}
358
383
  />
359
384
  </div>
360
385
  );
@@ -296,7 +296,13 @@ const SingleStory = (args: StorySelectProps) => {
296
296
 
297
297
  return (
298
298
  <div style={{ width: '300px' }}>
299
- <Select {...args} items={items} value={value} onChange={setValue} />
299
+ <Select
300
+ {...args}
301
+ items={items}
302
+ value={value}
303
+ onChange={setValue}
304
+ contentLeft={args.enableContentLeft ? <IconPlaceholder size="s" /> : undefined}
305
+ />
300
306
  </div>
301
307
  );
302
308
  };
@@ -310,7 +316,13 @@ const MultiselectStory = (args: StorySelectProps) => {
310
316
 
311
317
  return (
312
318
  <div style={{ width: '300px' }}>
313
- <Select {...args} items={items} value={value} onChange={setValue} />
319
+ <Select
320
+ {...args}
321
+ items={items}
322
+ value={value}
323
+ onChange={setValue}
324
+ contentLeft={args.enableContentLeft ? <IconPlaceholder size="s" /> : undefined}
325
+ />
314
326
  </div>
315
327
  );
316
328
  };
@@ -325,11 +337,23 @@ const PredefinedStory = (args: StorySelectProps) => {
325
337
 
326
338
  return (
327
339
  <div style={{ width: '300px' }}>
328
- <Select {...args} items={items} value={valueSingle} onChange={setValueSingle} multiselect={false} />
340
+ <Select
341
+ {...args}
342
+ items={items}
343
+ value={valueSingle}
344
+ onChange={setValueSingle}
345
+ contentLeft={args.enableContentLeft ? <IconPlaceholder size="s" /> : undefined}
346
+ />
329
347
 
330
348
  <br />
331
349
 
332
- <Select {...args} items={items} value={valueMultiple} onChange={setValueMultiple} multiselect />
350
+ <Select
351
+ {...args}
352
+ items={items}
353
+ value={valueMultiple}
354
+ onChange={setValueMultiple}
355
+ contentLeft={args.enableContentLeft ? <IconPlaceholder size="s" /> : undefined}
356
+ />
333
357
  </div>
334
358
  );
335
359
  };
@@ -355,6 +379,7 @@ const EmptyListStory = (args: StorySelectProps) => {
355
379
  buttonText="Label"
356
380
  />
357
381
  }
382
+ contentLeft={args.enableContentLeft ? <IconPlaceholder size="s" /> : undefined}
358
383
  />
359
384
  </div>
360
385
  );
@@ -1,4 +1,4 @@
1
- var _excluded = ["value", "onChange", "target", "separator", "items", "placement", "label", "labelPlacement", "placeholder", "helperText", "isTargetAmount", "disabled", "view", "size", "isOpen", "listOverflow", "listHeight", "listWidth", "status", "contentLeft", "onScrollBottom", "isInfiniteLoading", "notFoundContent", "chipView", "variant", "portal", "renderValue"];
1
+ var _excluded = ["value", "onChange", "target", "separator", "items", "placement", "label", "labelPlacement", "placeholder", "helperText", "isTargetAmount", "disabled", "view", "size", "isOpen", "listOverflow", "listHeight", "listWidth", "status", "contentLeft", "onScrollBottom", "isInfiniteLoading", "notFoundContent", "chipView", "variant", "portal", "renderValue", "renderItem"];
2
2
  function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
3
3
  function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
4
4
  function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -61,6 +61,7 @@ export var selectRoot = function selectRoot(Root) {
61
61
  variant = _props$variant === void 0 ? 'normal' : _props$variant,
62
62
  portal = props.portal,
63
63
  renderValue = props.renderValue,
64
+ renderItem = props.renderItem,
64
65
  rest = _objectWithoutProperties(props, _excluded);
65
66
  var multiselect = Array.isArray(value);
66
67
  var transformedItems = useMemo(function () {
@@ -221,7 +222,8 @@ export var selectRoot = function selectRoot(Root) {
221
222
  size: size,
222
223
  handleCheckboxChange: handleCheckboxChange,
223
224
  handleItemClick: handleItemClick,
224
- variant: variant
225
+ variant: variant,
226
+ renderItem: renderItem
225
227
  }
226
228
  }, /*#__PURE__*/React.createElement(StyledPopover, {
227
229
  ref: targetRef,
@@ -30,7 +30,8 @@ export var Item = function Item(_ref) {
30
30
  size = _useContext.size,
31
31
  handleCheckboxChange = _useContext.handleCheckboxChange,
32
32
  handleItemClick = _useContext.handleItemClick,
33
- variant = _useContext.variant;
33
+ variant = _useContext.variant,
34
+ renderItem = _useContext.renderItem;
34
35
  var isDisabledClassName = disabled || isDisabled ? classes.dropdownItemIsDisabled : undefined;
35
36
  var focusedClass = currentLevel === focusedPath.length - 1 && index === (focusedPath === null || focusedPath === void 0 ? void 0 : focusedPath[currentLevel]) ? classes.dropdownItemIsFocused : undefined;
36
37
  var activeClass = value === (path === null || path === void 0 ? void 0 : path[currentLevel + 1]) ? classes.dropdownItemIsActive : undefined;
@@ -80,7 +81,7 @@ export var Item = function Item(_ref) {
80
81
  }))), !multiselect && checked.get(item.value) === 'done' && /*#__PURE__*/React.createElement(IconDone, {
81
82
  size: sizeToIconSize(size, variant),
82
83
  color: "inherit"
83
- })), contentLeft && /*#__PURE__*/React.createElement(StyledContentLeft, null, contentLeft), /*#__PURE__*/React.createElement(StyledText, null, label), contentRight && /*#__PURE__*/React.createElement(StyledContentRight, null, contentRight), !isEmpty(item.items) && /*#__PURE__*/React.createElement(DisclosureIconWrapper, null, /*#__PURE__*/React.createElement(IconDisclosureRightCentered, {
84
+ })), contentLeft && /*#__PURE__*/React.createElement(StyledContentLeft, null, contentLeft), /*#__PURE__*/React.createElement(StyledText, null, renderItem && renderItem(value, label) || label), contentRight && /*#__PURE__*/React.createElement(StyledContentRight, null, contentRight), !isEmpty(item.items) && /*#__PURE__*/React.createElement(DisclosureIconWrapper, null, /*#__PURE__*/React.createElement(IconDisclosureRightCentered, {
84
85
  size: sizeToIconSize(size, variant),
85
86
  color: "inherit"
86
87
  })));
@@ -2,13 +2,13 @@ import styled from 'styled-components';
2
2
  import { classes, tokens, constants } from '../../../../Select.tokens';
3
3
  import { addFocus, applyEllipsis } from '../../../../../../mixins';
4
4
  import { component, mergeConfig } from '../../../../../../engines';
5
- import { checkboxConfig } from '../../../../../Checkbox';
5
+ import { checkboxConfig, checkboxTokens } from '../../../../../Checkbox';
6
6
  import { indicatorConfig, indicatorTokens } from '../../../../../Indicator';
7
7
  var mergedCheckboxConfig = /*#__PURE__*/mergeConfig(checkboxConfig);
8
8
  var Checkbox = /*#__PURE__*/component(mergedCheckboxConfig);
9
9
  export var StyledCheckbox = /*#__PURE__*/styled(Checkbox).withConfig({
10
10
  componentId: "plasma-new-hope__sc-esps8l-0"
11
- })(["--plasma-checkbox-trigger-size:var(", ");--plasma-checkbox-trigger-border-radius:var(", ");--plasma-checkbox-fill-color:var(", ");--plasma-checkbox-icon-color:var(", ");--plasma-checkbox-trigger-border-color:var(", ");"], tokens.checkboxTriggerSize, tokens.checkboxTriggerBorderRadius, tokens.checkboxFillColor, tokens.checkboxIconColor, tokens.checkboxTriggerBorderColor);
11
+ })(["", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");"], checkboxTokens.triggerSize, tokens.checkboxTriggerSize, checkboxTokens.triggerBorderRadius, tokens.checkboxTriggerBorderRadius, checkboxTokens.fillColor, tokens.checkboxFillColor, checkboxTokens.iconColor, tokens.checkboxIconColor, checkboxTokens.triggerBorderColor, tokens.checkboxTriggerBorderColor);
12
12
  var mergedIndicatorConfig = /*#__PURE__*/mergeConfig(indicatorConfig);
13
13
  var Indicator = /*#__PURE__*/component(mergedIndicatorConfig);
14
14
  export var StyledIndicator = /*#__PURE__*/styled(Indicator).withConfig({
@@ -16,9 +16,6 @@ export var TextfieldWrapper = /*#__PURE__*/styled.div.withConfig({
16
16
  var value = _ref2.value;
17
17
  return Array.isArray(value) && !isEmpty(value) ? "0 var(".concat(tokens.targetTextfieldChipPadding, ")") : "0 var(".concat(tokens.targetTextfieldPadding, ")");
18
18
  }, classes.selectWithoutBoxShadow);
19
- export var c2 = {
20
- focusSize: '6.25rem'
21
- };
22
19
  export var StyledButton = /*#__PURE__*/styled(Button).withConfig({
23
20
  componentId: "plasma-new-hope__sc-19p4a39-1"
24
21
  })(["", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":100%;", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":0.4;", ":var(", ");", ""], buttonTokens.buttonColor, constants.textfieldTargetColor, buttonTokens.buttonColorHover, constants.textfieldTargetColor, buttonTokens.buttonColorActive, constants.textfieldTargetColor, buttonTokens.buttonBackgroundColor, tokens.targetTextfieldBackgroundColor, buttonTokens.buttonHeight, tokens.targetHeight, buttonTokens.buttonWidth, buttonTokens.buttonPadding, tokens.targetTextfieldPadding, buttonTokens.buttonRadius, tokens.borderRadius, buttonTokens.buttonFontFamily, tokens.fontFamily, buttonTokens.buttonFontSize, tokens.fontSize, buttonTokens.buttonFontStyle, tokens.fontStyle, buttonTokens.buttonFontWeight, tokens.fontWeight, buttonTokens.buttonLetterSpacing, tokens.fontLetterSpacing, buttonTokens.buttonLineHeight, tokens.fontLineHeight, buttonTokens.buttonDisabledOpacity, buttonTokens.buttonFocusColor, constants.focusColor, /*#__PURE__*/addFocus({
@@ -296,7 +296,13 @@ const SingleStory = (args: StorySelectProps) => {
296
296
 
297
297
  return (
298
298
  <div style={{ width: '300px' }}>
299
- <Select {...args} items={items} value={value} onChange={setValue} />
299
+ <Select
300
+ {...args}
301
+ items={items}
302
+ value={value}
303
+ onChange={setValue}
304
+ contentLeft={args.enableContentLeft ? <IconPlaceholder size="s" /> : undefined}
305
+ />
300
306
  </div>
301
307
  );
302
308
  };
@@ -310,7 +316,13 @@ const MultiselectStory = (args: StorySelectProps) => {
310
316
 
311
317
  return (
312
318
  <div style={{ width: '300px' }}>
313
- <Select {...args} items={items} value={value} onChange={setValue} />
319
+ <Select
320
+ {...args}
321
+ items={items}
322
+ value={value}
323
+ onChange={setValue}
324
+ contentLeft={args.enableContentLeft ? <IconPlaceholder size="s" /> : undefined}
325
+ />
314
326
  </div>
315
327
  );
316
328
  };
@@ -325,11 +337,23 @@ const PredefinedStory = (args: StorySelectProps) => {
325
337
 
326
338
  return (
327
339
  <div style={{ width: '300px' }}>
328
- <Select {...args} items={items} value={valueSingle} onChange={setValueSingle} multiselect={false} />
340
+ <Select
341
+ {...args}
342
+ items={items}
343
+ value={valueSingle}
344
+ onChange={setValueSingle}
345
+ contentLeft={args.enableContentLeft ? <IconPlaceholder size="s" /> : undefined}
346
+ />
329
347
 
330
348
  <br />
331
349
 
332
- <Select {...args} items={items} value={valueMultiple} onChange={setValueMultiple} multiselect />
350
+ <Select
351
+ {...args}
352
+ items={items}
353
+ value={valueMultiple}
354
+ onChange={setValueMultiple}
355
+ contentLeft={args.enableContentLeft ? <IconPlaceholder size="s" /> : undefined}
356
+ />
333
357
  </div>
334
358
  );
335
359
  };
@@ -355,6 +379,7 @@ const EmptyListStory = (args: StorySelectProps) => {
355
379
  buttonText="Label"
356
380
  />
357
381
  }
382
+ contentLeft={args.enableContentLeft ? <IconPlaceholder size="s" /> : undefined}
358
383
  />
359
384
  </div>
360
385
  );