@salutejs/plasma-new-hope 0.88.0-canary.1233.9452624028.0 → 0.88.0-canary.1233.9482768810.0
Sign up to get free protection for your applications and to get access to all the features.
- 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/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/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/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/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
|
@@ -22,10 +22,10 @@ var StyledCheckbox = /*#__PURE__*/react.styled(_exp())({
|
|
|
22
22
|
});
|
|
23
23
|
var mergedIndicatorConfig = /*#__PURE__*/common.mergeConfig(Indicator$1.indicatorConfig);
|
|
24
24
|
var Indicator = /*#__PURE__*/common.component(mergedIndicatorConfig);
|
|
25
|
-
var
|
|
25
|
+
var _exp12 = function _exp12() {
|
|
26
26
|
return Indicator;
|
|
27
27
|
};
|
|
28
|
-
var StyledIndicator = /*#__PURE__*/react.styled(
|
|
28
|
+
var StyledIndicator = /*#__PURE__*/react.styled(_exp12())({
|
|
29
29
|
name: "StyledIndicator",
|
|
30
30
|
"class": "sywiq3e",
|
|
31
31
|
propsAsIs: true
|
|
@@ -45,19 +45,19 @@ var DisclosureIconWrapper = /*#__PURE__*/react.styled('div')({
|
|
|
45
45
|
"class": "dbxrye",
|
|
46
46
|
propsAsIs: false
|
|
47
47
|
});
|
|
48
|
-
var
|
|
48
|
+
var _exp20 = function _exp20() {
|
|
49
49
|
return function (_ref) {
|
|
50
50
|
var variant = _ref.variant;
|
|
51
51
|
return "var(".concat(variant === 'tight' ? Select_tokens.tokens.itemIconSizeTight : Select_tokens.tokens.itemIconSize, ")");
|
|
52
52
|
};
|
|
53
53
|
};
|
|
54
|
-
var
|
|
54
|
+
var _exp24 = function _exp24() {
|
|
55
55
|
return function (_ref2) {
|
|
56
56
|
var variant = _ref2.variant;
|
|
57
57
|
return "var(".concat(variant === 'tight' ? Select_tokens.tokens.checkboxTriggerSizeTight : Select_tokens.tokens.checkboxTriggerSize, ")");
|
|
58
58
|
};
|
|
59
59
|
};
|
|
60
|
-
var
|
|
60
|
+
var _exp25 = function _exp25() {
|
|
61
61
|
return function (_ref3) {
|
|
62
62
|
var variant = _ref3.variant;
|
|
63
63
|
return "var(".concat(variant === 'tight' ? Select_tokens.tokens.checkboxTriggerBorderRadiusTight : Select_tokens.tokens.checkboxTriggerBorderRadius, ")");
|
|
@@ -68,9 +68,9 @@ var IconWrapper = /*#__PURE__*/react.styled('div')({
|
|
|
68
68
|
"class": "ijzon79",
|
|
69
69
|
propsAsIs: false,
|
|
70
70
|
vars: {
|
|
71
|
-
"ijzon79-0": [/*#__PURE__*/
|
|
72
|
-
"ijzon79-1": [/*#__PURE__*/
|
|
73
|
-
"ijzon79-2": [/*#__PURE__*/
|
|
71
|
+
"ijzon79-0": [/*#__PURE__*/_exp20()],
|
|
72
|
+
"ijzon79-1": [/*#__PURE__*/_exp24()],
|
|
73
|
+
"ijzon79-2": [/*#__PURE__*/_exp25()]
|
|
74
74
|
}
|
|
75
75
|
});
|
|
76
76
|
var StyledText = /*#__PURE__*/react.styled('div')({
|
|
@@ -78,7 +78,7 @@ var StyledText = /*#__PURE__*/react.styled('div')({
|
|
|
78
78
|
"class": "s1vkcneb",
|
|
79
79
|
propsAsIs: false
|
|
80
80
|
});
|
|
81
|
-
var
|
|
81
|
+
var _exp28 = function _exp28() {
|
|
82
82
|
return function (_ref4) {
|
|
83
83
|
var variant = _ref4.variant;
|
|
84
84
|
return "var(".concat(variant === 'tight' ? Select_tokens.tokens.itemPaddingTight : Select_tokens.tokens.itemPadding, ")");
|
|
@@ -89,7 +89,7 @@ var Wrapper = /*#__PURE__*/react.styled('li')({
|
|
|
89
89
|
"class": "w1nwrhpk",
|
|
90
90
|
propsAsIs: false,
|
|
91
91
|
vars: {
|
|
92
|
-
"w1nwrhpk-0": [/*#__PURE__*/
|
|
92
|
+
"w1nwrhpk-0": [/*#__PURE__*/_exp28()]
|
|
93
93
|
}
|
|
94
94
|
});
|
|
95
95
|
|
|
@@ -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":";;;;;;;;;;;AASA,IAAMA,oBAAoB,gBAAGC,kBAAW,CAACC,yBAAc,CAAC,CAAA;AACxD,IAAMC,QAAQ,gBAAGC,gBAAS,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,YAAM,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,kBAAW,CAACW,2BAAe,CAAC,CAAA;AAC1D,IAAMC,SAAS,gBAAGT,gBAAS,CAACO,qBAAqB,CAAC,CAAA;AAAC,IAAAG,MAAA,GApBjCA,SAoBiCA,MAAAA,GAAA;AAAA,EAAA,OAEbD,SAAS,CAAA;AAAA,CAAA,CAAA;AAAxC,IAAME,eAAe,gBAAGR,YAAM,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,YAAM,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,YAAM,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,YAAM,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,oBAAM,CAACC,iBAAiB,GAAGD,oBAAM,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,oBAAM,CAACK,wBAAwB,GAAGL,oBAAM,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,oBAAM,CAACS,gCAAgC,GAAGT,oBAAM,CAACU,2BAC1E,EAAA,GAAA,CAAA,CAAA;GAAE,CAAA;AAAA,CAAA,CAAA;AAhBR,IAAMC,WAAW,gBAAG1B,YAAM,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,YAAM,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,oBAAM,CAACgB,gBAAgB,GAAGhB,oBAAM,CAACiB,WAAY,EAAA,GAAA,CAAA,CAAA;GAAE,CAAA;AAAA,CAAA,CAAA;AANrG,IAAMC,OAAO,gBAAGjC,YAAM,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
|
|
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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"}
|
|
@@ -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":";;;;;;;;;;AAUA,IAAMA,kBAAkB,gBAAGC,WAAW,CAACC,YAAY,CAAC,CAAA;AACpD,IAAMC,MAAM,gBAAGC,SAAS,CAACJ,kBAAkB,CAAC,CAAA;AAAC,IAAAK,KAAA,GAV3BA,SAU2BA,KAAAA,GAAA;AAAA,EAAA,OAMvB,UAAAC,IAAA,EAAA;AAAA,IAAA,IAAGC,MAAAA,GAAAA,IAAAA,CAAAA,MAAAA,CAAAA;AAAAA,IAAAA,OACbA,MAAM,GAAA,MAAA,CAAAC,MAAA,CACOC,MAAM,CAACC,oCAAqC,EAAA,GAAA,CAAA,GAAA,MAAA,CAAAF,MAAA,CAC5CC,MAAM,CAACE,8BAA+B,EAAE,GAAA,CAAA,CAAA;AAAA,GAAA,CAAA;AAAA,CAAA,CAAA;AAAA,IAAAC,KAAA,GAnB/CA,SAmB+CA,KAAAA,GAAA;AAAA,EAAA,OAC9C,UAAAC,KAAA,EAAA;AAAA,IAAA,IAAGC,KAAAA,GAAAA,KAAAA,CAAAA,KAAAA,CAAAA;IAAAA,OACVC,KAAK,CAACC,OAAO,CAACF,KAAK,CAAC,IAAI,CAACG,OAAO,CAACH,KAAK,CAAC,YAAAN,MAAA,CACxBC,MAAM,CAACS,0BAA2B,EAAA,GAAA,CAAA,GAAA,QAAA,CAAAV,MAAA,CAClCC,MAAM,CAACU,sBAAuB,EAAE,GAAA,CAAA,CAAA;AAAA,GAAA,CAAA;AAAA,CAAA,CAAA;AAXpD,IAAMC,gBAAgB,gBAAGC,MAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,kBAAA;AAAAC,EAAAA,OAAAA,EAAA,UAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAAC,EAAAA,IAAA,EAAA;AAAA,IAAA,YAAA,EAAA,cAIhBpB,KAG2C,EAAA,CAAA;AAAA,IAAA,YAAA,EAAA,cAC9CO,KAGwC,EAAA,CAAA;AAAA,GAAA;AAAA,CAM1D,EAAA;AAAC,IAAAc,KAAA,GA7BgBA,SA6BhBA,KAAAA,GAAA;AAAA,EAAA,OAEiCvB,MAAM,CAAA;AAAA,CAAA,CAAA;AAAlC,IAAMwB,YAAY,gBAAGN,MAAM,CAAAK,KAAA,EAAA,CAAA,CAAA;AAAAJ,EAAAA,IAAA,EAAA,cAAA;AAAAC,EAAAA,OAAAA,EAAA,UAAA;AAAAC,EAAAA,SAAA,EAAA,IAAA;AAAA,CAwBjC,EAAA;AAAC,IAAAI,MAAA,GAvDgBA,SAuDhBA,MAAAA,GAAA;AAAA,EAAA,OAEgCC,0BAA0B,CAAA;AAAA,CAAA,CAAA;AAArD,IAAMC,WAAW,gBAAGT,MAAM,CAAAO,MAAA,EAAA,CAAA,CAAA;AAAAN,EAAAA,IAAA,EAAA,aAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,IAAA;AAAA,CAA8B,EAAA;AAExD,IAAMO,gBAAgB,gBAAGV,MAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,kBAAA;AAAAC,EAAAA,OAAAA,EAAA,UAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAYrC,EAAA;AAEM,IAAMQ,OAAO,gBAAGX,MAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,SAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAU5B,EAAA;AAEM,IAAMS,WAAW,gBAAGZ,MAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,aAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAgBhC,EAAA;AAEM,IAAMU,KAAK,gBAAGb,MAAM,CAAA,OAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,OAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAQ1B,EAAA;AAEM,IAAMW,WAAW,gBAAGd,MAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,aAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAQhC,EAAA;AAEM,IAAMY,iBAAiB,gBAAGf,MAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,mBAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAWtC,EAAA;AAEM,IAAMa,UAAU,gBAAGhB,MAAM,CAAA,OAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,YAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAS/B,EAAA;AAEM,IAAMc,kBAAkB,gBAAGjB,MAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,oBAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAIvC,EAAA;AAEM,IAAMe,KAAK,gBAAGlB,MAAM,CAAA,MAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,OAAA;AAAAC,EAAAA,OAAAA,EAAA,UAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAE1B;;;;"}
|
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.9482768810.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": "139295bac76235710b9288fe8caf9dcd0d6a468b"
|
|
107
107
|
}
|
|
@@ -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
|
);
|
|
@@ -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
|
);
|
|
@@ -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
|
);
|
|
@@ -4,9 +4,6 @@ export declare const TextfieldWrapper: import("@linaria/react").StyledComponent<
|
|
|
4
4
|
opened: boolean;
|
|
5
5
|
value: SelectProps['value'];
|
|
6
6
|
}>;
|
|
7
|
-
export declare const c2: {
|
|
8
|
-
focusSize: string;
|
|
9
|
-
};
|
|
10
7
|
export declare const StyledButton: import("@linaria/react").StyledMeta & import("react").FunctionComponent<import("../../../../../../engines/types").PropsType<import("../../../../../../engines/types").Variants> & ((Omit<import("react").ButtonHTMLAttributes<HTMLElement>, "value"> & Omit<import("react").AnchorHTMLAttributes<HTMLElement>, "type"> & import("../../../../../../types").AsProps<any> & {
|
|
11
8
|
text?: string | undefined;
|
|
12
9
|
contentLeft?: import("react").ReactNode;
|
package/types/components/Select/elements/Target/elements/Textfield/Textfield.styles.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Textfield.styles.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/Select/elements/Target/elements/Textfield/Textfield.styles.tsx"],"names":[],"mappings":";AAQA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAK5D,eAAO,MAAM,gBAAgB;YAAwB,OAAO;WAAS,WAAW,CAAC,OAAO,CAAC;EAiBxF,CAAC;AAEF,eAAO,MAAM,
|
|
1
|
+
{"version":3,"file":"Textfield.styles.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/Select/elements/Target/elements/Textfield/Textfield.styles.tsx"],"names":[],"mappings":";AAQA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAK5D,eAAO,MAAM,gBAAgB;YAAwB,OAAO;WAAS,WAAW,CAAC,OAAO,CAAC;EAiBxF,CAAC;AAEF,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uDAwBxB,CAAC;AAEF,eAAO,MAAM,WAAW,6GAAuC,CAAC;AAEhE,eAAO,MAAM,gBAAgB,qKAY5B,CAAC;AAEF,eAAO,MAAM,OAAO,qKAUnB,CAAC;AAEF,eAAO,MAAM,WAAW,qKAgBvB,CAAC;AAEF,eAAO,MAAM,KAAK,8KAQjB,CAAC;AAEF,eAAO,MAAM,WAAW,qKAQvB,CAAC;AAEF,eAAO,MAAM,iBAAiB,qKAW7B,CAAC;AAEF,eAAO,MAAM,UAAU,8KAStB,CAAC;AAEF,eAAO,MAAM,kBAAkB,qKAI9B,CAAC;AAEF,eAAO,MAAM,KAAK,uKAEjB,CAAC"}
|