@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.
- package/cjs/components/Select/Select.js +4 -2
- package/cjs/components/Select/Select.js.map +1 -1
- package/cjs/components/Select/elements/Inner/elements/Item/Item.js +3 -2
- package/cjs/components/Select/elements/Inner/elements/Item/Item.js.map +1 -1
- package/cjs/components/Select/elements/Inner/elements/Item/Item.styles.js +10 -10
- package/cjs/components/Select/elements/Inner/elements/Item/Item.styles.js.map +1 -1
- package/cjs/components/Select/elements/Target/elements/Textfield/Textfield.styles.js.map +1 -1
- package/es/components/Select/Select.js +4 -2
- package/es/components/Select/Select.js.map +1 -1
- package/es/components/Select/elements/Inner/elements/Item/Item.js +3 -2
- package/es/components/Select/elements/Inner/elements/Item/Item.js.map +1 -1
- package/es/components/Select/elements/Inner/elements/Item/Item.styles.js +10 -10
- package/es/components/Select/elements/Inner/elements/Item/Item.styles.js.map +1 -1
- package/es/components/Select/elements/Target/elements/Textfield/Textfield.styles.js.map +1 -1
- package/package.json +2 -2
- package/styled-components/cjs/components/Select/Select.js +4 -2
- package/styled-components/cjs/components/Select/elements/Inner/elements/Item/Item.js +3 -2
- package/styled-components/cjs/components/Select/elements/Inner/elements/Item/Item.styles.js +1 -1
- package/styled-components/cjs/components/Select/elements/Target/elements/Textfield/Textfield.styles.js +1 -4
- package/styled-components/cjs/examples/plasma_b2c/components/Select/Select.stories.tsx +29 -4
- package/styled-components/cjs/examples/plasma_web/components/Select/Select.stories.tsx +29 -4
- package/styled-components/es/components/Select/Select.js +4 -2
- package/styled-components/es/components/Select/elements/Inner/elements/Item/Item.js +3 -2
- package/styled-components/es/components/Select/elements/Inner/elements/Item/Item.styles.js +2 -2
- package/styled-components/es/components/Select/elements/Target/elements/Textfield/Textfield.styles.js +0 -3
- package/styled-components/es/examples/plasma_b2c/components/Select/Select.stories.tsx +29 -4
- package/styled-components/es/examples/plasma_web/components/Select/Select.stories.tsx +29 -4
- package/types/components/Select/Select.d.ts.map +1 -1
- package/types/components/Select/Select.types.d.ts +5 -0
- package/types/components/Select/Select.types.d.ts.map +1 -1
- package/types/components/Select/elements/Inner/elements/Item/Item.d.ts.map +1 -1
- package/types/components/Select/elements/Target/elements/Textfield/Textfield.styles.d.ts +0 -3
- 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 {
|
|
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
|
|
21
|
+
var _exp12 = function _exp12() {
|
|
22
22
|
return Indicator;
|
|
23
23
|
};
|
|
24
|
-
var StyledIndicator = /*#__PURE__*/styled(
|
|
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
|
|
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
|
|
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
|
|
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__*/
|
|
68
|
-
"ijzon79-1": [/*#__PURE__*/
|
|
69
|
-
"ijzon79-2": [/*#__PURE__*/
|
|
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
|
|
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__*/
|
|
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
|
|
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":"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"}
|
|
@@ -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
|
|
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.
|
|
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": "
|
|
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
|
-
})(["
|
|
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.
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
-
})(["
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
);
|