@salutejs/plasma-new-hope 0.77.1-dev.0 → 0.77.3-canary.1204.8986491983.0
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/components/TextField/TextField.js +2 -2
- package/cjs/components/TextField/TextField.js.map +1 -1
- package/es/components/TextField/TextField.js +3 -3
- package/es/components/TextField/TextField.js.map +1 -1
- package/package.json +2 -2
- package/styled-components/cjs/components/TextField/TextField.js +4 -4
- package/styled-components/cjs/examples/plasma_b2c/components/Combobox/Combobox.config.js +1 -1
- package/styled-components/cjs/examples/plasma_b2c/components/Dropdown/Normal/Dropdown.config.js +1 -1
- package/styled-components/cjs/examples/plasma_b2c/components/Dropdown/Tight/Dropdown.config.js +1 -1
- package/styled-components/cjs/examples/plasma_b2c/components/IconButton/IconButton.stories.tsx +71 -0
- package/styled-components/cjs/examples/plasma_b2c/components/Notification/Notification.config.js +1 -1
- package/styled-components/cjs/examples/plasma_b2c/components/Select/Select.config.js +1 -1
- package/styled-components/cjs/examples/plasma_b2c/components/Toast/Toast.config.js +3 -3
- package/styled-components/cjs/examples/plasma_b2c/components/Toolbar/Toolbar.config.js +1 -1
- package/styled-components/cjs/examples/plasma_b2c/components/Tooltip/Tooltip.config.js +1 -1
- package/styled-components/cjs/examples/plasma_web/components/Combobox/Combobox.config.js +1 -1
- package/styled-components/cjs/examples/plasma_web/components/Dropdown/Normal/Dropdown.config.js +1 -1
- package/styled-components/cjs/examples/plasma_web/components/Dropdown/Tight/Dropdown.config.js +1 -1
- package/styled-components/cjs/examples/plasma_web/components/Notification/Notification.config.js +1 -1
- package/styled-components/cjs/examples/plasma_web/components/Select/Select.config.js +1 -1
- package/styled-components/cjs/examples/plasma_web/components/Toast/Toast.config.js +3 -3
- package/styled-components/cjs/examples/plasma_web/components/Toolbar/Toolbar.config.js +1 -1
- package/styled-components/cjs/examples/plasma_web/components/Tooltip/Tooltip.config.js +1 -1
- package/styled-components/cjs/examples/sds_engineer/components/Notification/Notification.config.js +1 -1
- package/styled-components/cjs/examples/sds_engineer/components/Toast/Toast.config.js +3 -3
- package/styled-components/cjs/examples/sds_engineer/components/Toolbar/Toolbar.config.js +1 -1
- package/styled-components/es/components/TextField/TextField.js +4 -4
- package/styled-components/es/examples/plasma_b2c/components/Combobox/Combobox.config.js +1 -1
- package/styled-components/es/examples/plasma_b2c/components/Dropdown/Normal/Dropdown.config.js +1 -1
- package/styled-components/es/examples/plasma_b2c/components/Dropdown/Tight/Dropdown.config.js +1 -1
- package/styled-components/es/examples/plasma_b2c/components/IconButton/IconButton.stories.tsx +71 -0
- package/styled-components/es/examples/plasma_b2c/components/Notification/Notification.config.js +1 -1
- package/styled-components/es/examples/plasma_b2c/components/Select/Select.config.js +1 -1
- package/styled-components/es/examples/plasma_b2c/components/Toast/Toast.config.js +3 -3
- package/styled-components/es/examples/plasma_b2c/components/Toolbar/Toolbar.config.js +1 -1
- package/styled-components/es/examples/plasma_b2c/components/Tooltip/Tooltip.config.js +1 -1
- package/styled-components/es/examples/plasma_web/components/Combobox/Combobox.config.js +1 -1
- package/styled-components/es/examples/plasma_web/components/Dropdown/Normal/Dropdown.config.js +1 -1
- package/styled-components/es/examples/plasma_web/components/Dropdown/Tight/Dropdown.config.js +1 -1
- package/styled-components/es/examples/plasma_web/components/Notification/Notification.config.js +1 -1
- package/styled-components/es/examples/plasma_web/components/Select/Select.config.js +1 -1
- package/styled-components/es/examples/plasma_web/components/Toast/Toast.config.js +3 -3
- package/styled-components/es/examples/plasma_web/components/Toolbar/Toolbar.config.js +1 -1
- package/styled-components/es/examples/plasma_web/components/Tooltip/Tooltip.config.js +1 -1
- package/styled-components/es/examples/sds_engineer/components/Notification/Notification.config.js +1 -1
- package/styled-components/es/examples/sds_engineer/components/Toast/Toast.config.js +3 -3
- package/styled-components/es/examples/sds_engineer/components/Toolbar/Toolbar.config.js +1 -1
- package/types/components/TextField/TextField.d.ts +2 -2
- package/types/components/TextField/TextField.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Combobox/Combobox.config.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Dropdown/Normal/Dropdown.config.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Dropdown/Tight/Dropdown.config.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Notification/Notification.config.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Select/Select.config.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/TextField/TextField.d.ts +2 -2
- package/types/examples/plasma_b2c/components/TextField/TextField.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Toast/Toast.config.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Toolbar/Toolbar.config.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Tooltip/Tooltip.config.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Combobox/Combobox.config.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Dropdown/Normal/Dropdown.config.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Dropdown/Tight/Dropdown.config.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Notification/Notification.config.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Select/Select.config.d.ts.map +1 -1
- package/types/examples/plasma_web/components/TextField/TextField.d.ts +2 -2
- package/types/examples/plasma_web/components/TextField/TextField.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Toast/Toast.config.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Toolbar/Toolbar.config.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Tooltip/Tooltip.config.d.ts.map +1 -1
- package/types/examples/sds_engineer/components/Notification/Notification.config.d.ts.map +1 -1
- package/types/examples/sds_engineer/components/TextField/TextField.d.ts +2 -2
- package/types/examples/sds_engineer/components/TextField/TextField.d.ts.map +1 -1
- package/types/examples/sds_engineer/components/Toast/Toast.config.d.ts.map +1 -1
- package/types/examples/sds_engineer/components/Toolbar/Toolbar.config.d.ts.map +1 -1
@@ -43,6 +43,7 @@ var textFieldRoot = function textFieldRoot(Root) {
|
|
43
43
|
rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
|
44
44
|
var contentRef = React.useRef(null);
|
45
45
|
var inputRef = React.useRef(null);
|
46
|
+
var inputForkRef = plasmaCore.useForkRef(inputRef, ref);
|
46
47
|
var chipsRefs = React.useRef([]);
|
47
48
|
var controlledRefs = {
|
48
49
|
contentRef: contentRef,
|
@@ -131,7 +132,6 @@ var textFieldRoot = function textFieldRoot(Root) {
|
|
131
132
|
setChips(newChips);
|
132
133
|
}, [isChipEnumeration, values]);
|
133
134
|
return /*#__PURE__*/React.createElement(Root, {
|
134
|
-
ref: ref,
|
135
135
|
view: view,
|
136
136
|
size: size,
|
137
137
|
disabled: disabled,
|
@@ -170,7 +170,7 @@ var textFieldRoot = function textFieldRoot(Root) {
|
|
170
170
|
onClick: onChipClick
|
171
171
|
});
|
172
172
|
})), /*#__PURE__*/React.createElement(TextField_styles.Input, _rollupPluginBabelHelpers.extends({}, rest, {
|
173
|
-
ref:
|
173
|
+
ref: inputForkRef,
|
174
174
|
id: innerId,
|
175
175
|
"aria-labelledby": labelId,
|
176
176
|
"aria-describedby": helperTextId,
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"TextField.js","sources":["../../../src/components/TextField/TextField.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useRef, useState } from 'react';\nimport type { ChangeEventHandler } from 'react';\nimport { safeUseId } from '@salutejs/plasma-core';\nimport { css } from '@linaria/core';\n\nimport type { RootProps } from '../../engines';\nimport { cx } from '../../utils';\n\nimport type { ChipValues, TextFieldPrimitiveValue, TextFieldProps } from './TextField.types';\nimport { base as sizeCSS } from './variations/_size/base';\nimport { base as viewCSS } from './variations/_view/base';\nimport { base as disabledCSS } from './variations/_disabled/base';\nimport { base as readOnlyCSS } from './variations/_read-only/base';\nimport { base as labelPlacementCSS } from './variations/_label-placement/base';\nimport {\n Input,\n LeftHelper,\n Label,\n InputWrapper,\n InputLabelWrapper,\n StyledContentLeft,\n StyledContentRight,\n StyledChips,\n} from './TextField.styles';\nimport { classes } from './TextField.tokens';\nimport { TextFieldChip } from './ui';\nimport { useKeyNavigation } from './hooks/useKeyNavigation';\n\nexport const base = css`\n /* NOTE: Webkit не применяет opacity к inline тегам */\n display: block;\n overflow: hidden;\n`;\n\nexport const textFieldRoot = (Root: RootProps<HTMLDivElement, TextFieldProps>) =>\n forwardRef<HTMLDivElement, TextFieldProps>(\n (\n {\n id,\n\n // layout\n contentLeft,\n contentRight,\n label,\n labelPlacement,\n placeholder,\n leftHelper,\n enumerationType = 'plain',\n\n // variations\n view,\n size,\n readOnly = false,\n disabled = false,\n\n // controlled\n chips: values,\n\n // events\n onChange,\n onChangeChips,\n onSearch,\n\n ...rest\n },\n ref,\n ) => {\n const contentRef = useRef<HTMLDivElement>(null);\n const inputRef = useRef<HTMLInputElement>(null);\n const chipsRefs = useRef<Array<HTMLButtonElement>>([]);\n\n const controlledRefs = { contentRef, inputRef, chipsRefs };\n\n const [chips, setChips] = useState<Array<ChipValues>>([]);\n\n const uniqId = safeUseId();\n const innerId = id || uniqId;\n const labelId = safeUseId();\n const helperTextId = safeUseId();\n\n const isChipEnumeration = enumerationType === 'chip';\n const hideLabel = (size === 'xs' || isChipEnumeration) && labelPlacement === 'inner';\n const labelInside = size !== 'xs' && labelPlacement === 'inner';\n const innerLabelPlacementValue = hideLabel ? 'outer' : labelPlacement;\n const innerPlaceholderValue = hideLabel ? label : placeholder;\n const innerLabelValue = hideLabel ? undefined : label;\n\n const isChipsVisible = isChipEnumeration && chips?.length;\n const withHasChips = isChipsVisible ? classes.hasChips : undefined;\n const wrapperWithoutLeftContent = !contentLeft && isChipsVisible ? classes.hasEmptyContentLeft : undefined;\n const wrapperWithoutRightContent =\n !contentRight && isChipsVisible ? classes.hasEmptyContentRight : undefined;\n\n const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n if (disabled || readOnly) {\n return;\n }\n\n const { maxLength, value } = event.target;\n\n if (maxLength !== -1 && value.length > maxLength) {\n return;\n }\n\n onChange?.(event);\n };\n\n const updateChips = (newChips: Array<ChipValues>, newValues: Array<TextFieldPrimitiveValue>) => {\n setChips(newChips);\n onChangeChips?.(newValues);\n };\n\n const { handleInputKeydown, handleChipKeyDown, onChipClear, handleContentKeyDown } = useKeyNavigation({\n controlledRefs,\n disabled,\n readOnly,\n chips,\n enumerationType,\n updateChips,\n onSearch,\n onChange,\n });\n\n const onChipClick = (event: React.MouseEvent<HTMLButtonElement>) => event.stopPropagation();\n\n const handleInputFocus = () => {\n if (readOnly || disabled || !inputRef?.current) {\n return;\n }\n\n inputRef.current.scrollIntoView({\n behavior: 'smooth',\n block: 'center',\n inline: 'center',\n });\n inputRef.current.focus({ preventScroll: true });\n };\n\n const getRef = (element: HTMLButtonElement | null, index: number) => {\n if (element && chipsRefs?.current) {\n chipsRefs.current[index] = element;\n }\n };\n\n useEffect(() => {\n if (!isChipEnumeration && !values?.length) {\n return;\n }\n\n const newChips =\n values?.map((value, index) => ({\n id: `${index}_${value}`,\n text: value,\n })) || [];\n\n setChips(newChips);\n }, [isChipEnumeration, values]);\n\n return (\n <Root\n ref={ref}\n view={view}\n size={size}\n disabled={disabled}\n readOnly={!disabled && readOnly}\n labelPlacement={innerLabelPlacementValue}\n onClick={handleInputFocus}\n >\n {labelInside ||\n (innerLabelValue && (\n <Label id={labelId} htmlFor={id}>\n {innerLabelValue}\n </Label>\n ))}\n <InputWrapper className={cx(withHasChips, wrapperWithoutLeftContent, wrapperWithoutRightContent)}>\n {contentLeft && <StyledContentLeft>{contentLeft}</StyledContentLeft>}\n <InputLabelWrapper\n tabIndex={-1}\n ref={contentRef}\n onKeyDown={handleContentKeyDown}\n className={withHasChips}\n >\n {isChipEnumeration && Boolean(chips?.length) && (\n <StyledChips>\n {chips?.map(({ id: chipId, text }, index) => {\n return (\n <TextFieldChip\n id={chipId}\n ref={(element) => getRef(element, index)}\n key={`${chipId}_${index}`}\n disabled={disabled}\n readOnly={readOnly}\n value={text}\n text={text}\n onKeyDown={(event) => handleChipKeyDown(event, chipId, index)}\n onClear={() => onChipClear(chipId, index)}\n onClick={onChipClick}\n />\n );\n })}\n </StyledChips>\n )}\n <Input\n {...rest}\n ref={inputRef}\n id={innerId}\n aria-labelledby={labelId}\n aria-describedby={helperTextId}\n placeholder={innerPlaceholderValue}\n disabled={disabled}\n readOnly={!disabled && readOnly}\n onChange={handleChange}\n onKeyDown={handleInputKeydown}\n />\n {labelInside && (\n <Label id={labelId} htmlFor={innerId}>\n {innerLabelValue}\n </Label>\n )}\n </InputLabelWrapper>\n {contentRight && <StyledContentRight>{contentRight}</StyledContentRight>}\n </InputWrapper>\n {leftHelper && <LeftHelper id={helperTextId}>{leftHelper}</LeftHelper>}\n </Root>\n );\n },\n );\n\nexport const textFieldConfig = {\n name: 'TextField',\n tag: 'div',\n layout: textFieldRoot,\n base,\n variations: {\n view: {\n css: viewCSS,\n },\n size: {\n css: sizeCSS,\n },\n disabled: {\n css: disabledCSS,\n attrs: true,\n },\n readOnly: {\n css: readOnlyCSS,\n attrs: true,\n },\n labelPlacement: {\n css: labelPlacementCSS,\n },\n },\n defaults: {\n size: 'm',\n view: 'default',\n },\n};\n"],"names":["base","textFieldRoot","Root","forwardRef","_ref","ref","id","contentLeft","contentRight","label","labelPlacement","placeholder","leftHelper","_ref$enumerationType","enumerationType","view","size","_ref$readOnly","readOnly","_ref$disabled","disabled","values","chips","onChange","onChangeChips","onSearch","rest","contentRef","useRef","inputRef","chipsRefs","controlledRefs","_useState","useState","_useState2","_slicedToArray","setChips","uniqId","safeUseId","innerId","labelId","helperTextId","isChipEnumeration","hideLabel","labelInside","innerLabelPlacementValue","innerPlaceholderValue","innerLabelValue","undefined","isChipsVisible","length","withHasChips","classes","hasChips","wrapperWithoutLeftContent","hasEmptyContentLeft","wrapperWithoutRightContent","hasEmptyContentRight","handleChange","event","_event$target","target","maxLength","value","updateChips","newChips","newValues","_useKeyNavigation","useKeyNavigation","handleInputKeydown","handleChipKeyDown","onChipClear","handleContentKeyDown","onChipClick","stopPropagation","handleInputFocus","current","scrollIntoView","behavior","block","inline","focus","preventScroll","getRef","element","index","useEffect","map","concat","text","React","createElement","onClick","Label","htmlFor","InputWrapper","className","cx","StyledContentLeft","InputLabelWrapper","tabIndex","onKeyDown","Boolean","StyledChips","_ref2","chipId","TextFieldChip","key","onClear","Input","_extends","StyledContentRight","LeftHelper","textFieldConfig","name","tag","layout","variations","css","viewCSS","sizeCSS","disabledCSS","attrs","readOnlyCSS","labelPlacementCSS","defaults"],"mappings":"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"}
|
1
|
+
{"version":3,"file":"TextField.js","sources":["../../../src/components/TextField/TextField.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useRef, useState } from 'react';\nimport type { ChangeEventHandler } from 'react';\nimport { safeUseId, useForkRef } from '@salutejs/plasma-core';\nimport { css } from '@linaria/core';\n\nimport type { RootProps } from '../../engines';\nimport { cx } from '../../utils';\n\nimport type { ChipValues, TextFieldPrimitiveValue, TextFieldProps } from './TextField.types';\nimport { base as sizeCSS } from './variations/_size/base';\nimport { base as viewCSS } from './variations/_view/base';\nimport { base as disabledCSS } from './variations/_disabled/base';\nimport { base as readOnlyCSS } from './variations/_read-only/base';\nimport { base as labelPlacementCSS } from './variations/_label-placement/base';\nimport {\n Input,\n LeftHelper,\n Label,\n InputWrapper,\n InputLabelWrapper,\n StyledContentLeft,\n StyledContentRight,\n StyledChips,\n} from './TextField.styles';\nimport { classes } from './TextField.tokens';\nimport { TextFieldChip } from './ui';\nimport { useKeyNavigation } from './hooks';\n\nexport const base = css`\n /* NOTE: Webkit не применяет opacity к inline тегам */\n display: block;\n overflow: hidden;\n`;\n\nexport const textFieldRoot = (Root: RootProps<HTMLDivElement, TextFieldProps>) =>\n forwardRef<HTMLInputElement, TextFieldProps>(\n (\n {\n id,\n\n // layout\n contentLeft,\n contentRight,\n label,\n labelPlacement,\n placeholder,\n leftHelper,\n enumerationType = 'plain',\n\n // variations\n view,\n size,\n readOnly = false,\n disabled = false,\n\n // controlled\n chips: values,\n\n // events\n onChange,\n onChangeChips,\n onSearch,\n\n ...rest\n },\n ref,\n ) => {\n const contentRef = useRef<HTMLDivElement>(null);\n const inputRef = useRef<HTMLInputElement>(null);\n const inputForkRef = useForkRef(inputRef, ref);\n const chipsRefs = useRef<Array<HTMLButtonElement>>([]);\n\n const controlledRefs = { contentRef, inputRef, chipsRefs };\n\n const [chips, setChips] = useState<Array<ChipValues>>([]);\n\n const uniqId = safeUseId();\n const innerId = id || uniqId;\n const labelId = safeUseId();\n const helperTextId = safeUseId();\n\n const isChipEnumeration = enumerationType === 'chip';\n const hideLabel = (size === 'xs' || isChipEnumeration) && labelPlacement === 'inner';\n const labelInside = size !== 'xs' && labelPlacement === 'inner';\n const innerLabelPlacementValue = hideLabel ? 'outer' : labelPlacement;\n const innerPlaceholderValue = hideLabel ? label : placeholder;\n const innerLabelValue = hideLabel ? undefined : label;\n\n const isChipsVisible = isChipEnumeration && chips?.length;\n const withHasChips = isChipsVisible ? classes.hasChips : undefined;\n const wrapperWithoutLeftContent = !contentLeft && isChipsVisible ? classes.hasEmptyContentLeft : undefined;\n const wrapperWithoutRightContent =\n !contentRight && isChipsVisible ? classes.hasEmptyContentRight : undefined;\n\n const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n if (disabled || readOnly) {\n return;\n }\n\n const { maxLength, value } = event.target;\n\n if (maxLength !== -1 && value.length > maxLength) {\n return;\n }\n\n onChange?.(event);\n };\n\n const updateChips = (newChips: Array<ChipValues>, newValues: Array<TextFieldPrimitiveValue>) => {\n setChips(newChips);\n onChangeChips?.(newValues);\n };\n\n const { handleInputKeydown, handleChipKeyDown, onChipClear, handleContentKeyDown } = useKeyNavigation({\n controlledRefs,\n disabled,\n readOnly,\n chips,\n enumerationType,\n updateChips,\n onSearch,\n onChange,\n });\n\n const onChipClick = (event: React.MouseEvent<HTMLButtonElement>) => event.stopPropagation();\n\n const handleInputFocus = () => {\n if (readOnly || disabled || !inputRef?.current) {\n return;\n }\n\n inputRef.current.scrollIntoView({\n behavior: 'smooth',\n block: 'center',\n inline: 'center',\n });\n\n inputRef.current.focus({ preventScroll: true });\n };\n\n const getRef = (element: HTMLButtonElement | null, index: number) => {\n if (element && chipsRefs?.current) {\n chipsRefs.current[index] = element;\n }\n };\n\n useEffect(() => {\n if (!isChipEnumeration && !values?.length) {\n return;\n }\n\n const newChips =\n values?.map((value, index) => ({\n id: `${index}_${value}`,\n text: value,\n })) || [];\n\n setChips(newChips);\n }, [isChipEnumeration, values]);\n\n return (\n <Root\n view={view}\n size={size}\n disabled={disabled}\n readOnly={!disabled && readOnly}\n labelPlacement={innerLabelPlacementValue}\n onClick={handleInputFocus}\n >\n {labelInside ||\n (innerLabelValue && (\n <Label id={labelId} htmlFor={id}>\n {innerLabelValue}\n </Label>\n ))}\n <InputWrapper className={cx(withHasChips, wrapperWithoutLeftContent, wrapperWithoutRightContent)}>\n {contentLeft && <StyledContentLeft>{contentLeft}</StyledContentLeft>}\n <InputLabelWrapper\n tabIndex={-1}\n ref={contentRef}\n onKeyDown={handleContentKeyDown}\n className={withHasChips}\n >\n {isChipEnumeration && Boolean(chips?.length) && (\n <StyledChips>\n {chips?.map(({ id: chipId, text }, index) => {\n return (\n <TextFieldChip\n id={chipId}\n ref={(element) => getRef(element, index)}\n key={`${chipId}_${index}`}\n disabled={disabled}\n readOnly={readOnly}\n value={text}\n text={text}\n onKeyDown={(event) => handleChipKeyDown(event, chipId, index)}\n onClear={() => onChipClear(chipId, index)}\n onClick={onChipClick}\n />\n );\n })}\n </StyledChips>\n )}\n <Input\n {...rest}\n ref={inputForkRef}\n id={innerId}\n aria-labelledby={labelId}\n aria-describedby={helperTextId}\n placeholder={innerPlaceholderValue}\n disabled={disabled}\n readOnly={!disabled && readOnly}\n onChange={handleChange}\n onKeyDown={handleInputKeydown}\n />\n {labelInside && (\n <Label id={labelId} htmlFor={innerId}>\n {innerLabelValue}\n </Label>\n )}\n </InputLabelWrapper>\n {contentRight && <StyledContentRight>{contentRight}</StyledContentRight>}\n </InputWrapper>\n {leftHelper && <LeftHelper id={helperTextId}>{leftHelper}</LeftHelper>}\n </Root>\n );\n },\n );\n\nexport const textFieldConfig = {\n name: 'TextField',\n tag: 'div',\n layout: textFieldRoot,\n base,\n variations: {\n view: {\n css: viewCSS,\n },\n size: {\n css: sizeCSS,\n },\n disabled: {\n css: disabledCSS,\n attrs: true,\n },\n readOnly: {\n css: readOnlyCSS,\n attrs: true,\n },\n labelPlacement: {\n css: labelPlacementCSS,\n },\n },\n defaults: {\n size: 'm',\n view: 'default',\n },\n};\n"],"names":["base","textFieldRoot","Root","forwardRef","_ref","ref","id","contentLeft","contentRight","label","labelPlacement","placeholder","leftHelper","_ref$enumerationType","enumerationType","view","size","_ref$readOnly","readOnly","_ref$disabled","disabled","values","chips","onChange","onChangeChips","onSearch","rest","contentRef","useRef","inputRef","inputForkRef","useForkRef","chipsRefs","controlledRefs","_useState","useState","_useState2","_slicedToArray","setChips","uniqId","safeUseId","innerId","labelId","helperTextId","isChipEnumeration","hideLabel","labelInside","innerLabelPlacementValue","innerPlaceholderValue","innerLabelValue","undefined","isChipsVisible","length","withHasChips","classes","hasChips","wrapperWithoutLeftContent","hasEmptyContentLeft","wrapperWithoutRightContent","hasEmptyContentRight","handleChange","event","_event$target","target","maxLength","value","updateChips","newChips","newValues","_useKeyNavigation","useKeyNavigation","handleInputKeydown","handleChipKeyDown","onChipClear","handleContentKeyDown","onChipClick","stopPropagation","handleInputFocus","current","scrollIntoView","behavior","block","inline","focus","preventScroll","getRef","element","index","useEffect","map","concat","text","React","createElement","onClick","Label","htmlFor","InputWrapper","className","cx","StyledContentLeft","InputLabelWrapper","tabIndex","onKeyDown","Boolean","StyledChips","_ref2","chipId","TextFieldChip","key","onClear","Input","_extends","StyledContentRight","LeftHelper","textFieldConfig","name","tag","layout","variations","css","viewCSS","sizeCSS","disabledCSS","attrs","readOnlyCSS","labelPlacementCSS","defaults"],"mappings":";;;;;;;;;;;;;;;;;;;AA4BO,IAAMA,IAAI,GAIhB,UAAA;IAEYC,aAAa,GAAGA,SAAhBA,aAAaA,CAAIC,IAA+C,EAAA;AAAA,EAAA,oBACzEC,gBAAU,CACN,UAAAC,IAAA,EA6BIC,GAAG,EACF;AAAA,IAAA,IA5BGC,EAAE,GAAAF,IAAA,CAAFE,EAAE;MAGFC,WAAW,GAAAH,IAAA,CAAXG,WAAW;MACXC,YAAY,GAAAJ,IAAA,CAAZI,YAAY;MACZC,KAAK,GAAAL,IAAA,CAALK,KAAK;MACLC,cAAc,GAAAN,IAAA,CAAdM,cAAc;MACdC,WAAW,GAAAP,IAAA,CAAXO,WAAW;MACXC,UAAU,GAAAR,IAAA,CAAVQ,UAAU;MAAAC,oBAAA,GAAAT,IAAA,CACVU,eAAe;AAAfA,MAAAA,eAAe,GAAAD,oBAAA,KAAG,KAAA,CAAA,GAAA,OAAO,GAAAA,oBAAA;MAGzBE,IAAI,GAAAX,IAAA,CAAJW,IAAI;MACJC,IAAI,GAAAZ,IAAA,CAAJY,IAAI;MAAAC,aAAA,GAAAb,IAAA,CACJc,QAAQ;AAARA,MAAAA,QAAQ,GAAAD,aAAA,KAAG,KAAA,CAAA,GAAA,KAAK,GAAAA,aAAA;MAAAE,aAAA,GAAAf,IAAA,CAChBgB,QAAQ;AAARA,MAAAA,QAAQ,GAAAD,aAAA,KAAG,KAAA,CAAA,GAAA,KAAK,GAAAA,aAAA;MAGTE,MAAM,GAAAjB,IAAA,CAAbkB,KAAK;MAGLC,QAAQ,GAAAnB,IAAA,CAARmB,QAAQ;MACRC,aAAa,GAAApB,IAAA,CAAboB,aAAa;MACbC,QAAQ,GAAArB,IAAA,CAARqB,QAAQ;AAELC,MAAAA,IAAAA,GAAAA,iDAAAA,CAAAA,IAAAA,EAAAA,SAAAA,CAAAA,CAAAA;AAIP,IAAA,IAAMC,UAAU,GAAGC,YAAM,CAAiB,IAAI,CAAC,CAAA;AAC/C,IAAA,IAAMC,QAAQ,GAAGD,YAAM,CAAmB,IAAI,CAAC,CAAA;AAC/C,IAAA,IAAME,YAAY,GAAGC,qBAAU,CAACF,QAAQ,EAAExB,GAAG,CAAC,CAAA;AAC9C,IAAA,IAAM2B,SAAS,GAAGJ,YAAM,CAA2B,EAAE,CAAC,CAAA;AAEtD,IAAA,IAAMK,cAAc,GAAG;AAAEN,MAAAA,UAAU,EAAVA,UAAU;AAAEE,MAAAA,QAAQ,EAARA,QAAQ;AAAEG,MAAAA,SAAAA,EAAAA,SAAAA;KAAW,CAAA;AAE1D,IAAA,IAAAE,SAAA,GAA0BC,cAAQ,CAAoB,EAAE,CAAC;MAAAC,UAAA,GAAAC,uCAAA,CAAAH,SAAA,EAAA,CAAA,CAAA;AAAlDZ,MAAAA,KAAK,GAAAc,UAAA,CAAA,CAAA,CAAA;AAAEE,MAAAA,QAAQ,GAAAF,UAAA,CAAA,CAAA,CAAA,CAAA;AAEtB,IAAA,IAAMG,MAAM,GAAGC,oBAAS,EAAE,CAAA;AAC1B,IAAA,IAAMC,OAAO,GAAGnC,EAAE,IAAIiC,MAAM,CAAA;AAC5B,IAAA,IAAMG,OAAO,GAAGF,oBAAS,EAAE,CAAA;AAC3B,IAAA,IAAMG,YAAY,GAAGH,oBAAS,EAAE,CAAA;AAEhC,IAAA,IAAMI,iBAAiB,GAAG9B,eAAe,KAAK,MAAM,CAAA;IACpD,IAAM+B,SAAS,GAAG,CAAC7B,IAAI,KAAK,IAAI,IAAI4B,iBAAiB,KAAKlC,cAAc,KAAK,OAAO,CAAA;IACpF,IAAMoC,WAAW,GAAG9B,IAAI,KAAK,IAAI,IAAIN,cAAc,KAAK,OAAO,CAAA;AAC/D,IAAA,IAAMqC,wBAAwB,GAAGF,SAAS,GAAG,OAAO,GAAGnC,cAAc,CAAA;AACrE,IAAA,IAAMsC,qBAAqB,GAAGH,SAAS,GAAGpC,KAAK,GAAGE,WAAW,CAAA;AAC7D,IAAA,IAAMsC,eAAe,GAAGJ,SAAS,GAAGK,SAAS,GAAGzC,KAAK,CAAA;IAErD,IAAM0C,cAAc,GAAGP,iBAAiB,KAAItB,KAAK,aAALA,KAAK,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAALA,KAAK,CAAE8B,MAAM,CAAA,CAAA;IACzD,IAAMC,YAAY,GAAGF,cAAc,GAAGG,wBAAO,CAACC,QAAQ,GAAGL,SAAS,CAAA;IAClE,IAAMM,yBAAyB,GAAG,CAACjD,WAAW,IAAI4C,cAAc,GAAGG,wBAAO,CAACG,mBAAmB,GAAGP,SAAS,CAAA;IAC1G,IAAMQ,0BAA0B,GAC5B,CAAClD,YAAY,IAAI2C,cAAc,GAAGG,wBAAO,CAACK,oBAAoB,GAAGT,SAAS,CAAA;AAE9E,IAAA,IAAMU,YAAkD,GAAIC,SAAtDD,YAAkDA,CAAIC,KAAK,EAAK;MAClE,IAAIzC,QAAQ,IAAIF,QAAQ,EAAE;AACtB,QAAA,OAAA;AACJ,OAAA;AAEA,MAAA,IAAA4C,aAAA,GAA6BD,KAAK,CAACE,MAAM;QAAjCC,SAAS,GAAAF,aAAA,CAATE,SAAS;QAAEC,KAAAA,GAAAA,aAAAA,CAAAA,KAAAA,CAAAA;MAEnB,IAAID,SAAS,KAAK,CAAC,CAAC,IAAIC,KAAK,CAACb,MAAM,GAAGY,SAAS,EAAE;AAC9C,QAAA,OAAA;AACJ,OAAA;AAEAzC,MAAAA,QAAQ,aAARA,QAAQ,KAAA,KAAA,CAAA,IAARA,QAAQ,CAAGsC,KAAK,CAAC,CAAA;KACpB,CAAA;IAED,IAAMK,WAAW,GAAGA,SAAdA,WAAWA,CAAIC,QAA2B,EAAEC,SAAyC,EAAK;MAC5F9B,QAAQ,CAAC6B,QAAQ,CAAC,CAAA;AAClB3C,MAAAA,aAAa,aAAbA,aAAa,KAAA,KAAA,CAAA,IAAbA,aAAa,CAAG4C,SAAS,CAAC,CAAA;KAC7B,CAAA;IAED,IAAAC,iBAAA,GAAqFC,iCAAgB,CAAC;AAClGrC,QAAAA,cAAc,EAAdA,cAAc;AACdb,QAAAA,QAAQ,EAARA,QAAQ;AACRF,QAAAA,QAAQ,EAARA,QAAQ;AACRI,QAAAA,KAAK,EAALA,KAAK;AACLR,QAAAA,eAAe,EAAfA,eAAe;AACfoD,QAAAA,WAAW,EAAXA,WAAW;AACXzC,QAAAA,QAAQ,EAARA,QAAQ;AACRF,QAAAA,QAAAA,EAAAA,QAAAA;AACJ,OAAC,CAAC;MATMgD,kBAAkB,GAAAF,iBAAA,CAAlBE,kBAAkB;MAAEC,iBAAiB,GAAAH,iBAAA,CAAjBG,iBAAiB;MAAEC,WAAW,GAAAJ,iBAAA,CAAXI,WAAW;MAAEC,oBAAAA,GAAAA,iBAAAA,CAAAA,oBAAAA,CAAAA;AAW5D,IAAA,IAAMC,WAAW,GAAGA,SAAdA,WAAWA,CAAId,KAA0C,EAAA;AAAA,MAAA,OAAKA,KAAK,CAACe,eAAe,EAAE,CAAA;AAAA,KAAA,CAAA;AAE3F,IAAA,IAAMC,gBAAgB,GAAGA,SAAnBA,gBAAgBA,GAAS;AAC3B,MAAA,IAAI3D,QAAQ,IAAIE,QAAQ,IAAI,EAACS,QAAQ,KAARA,IAAAA,IAAAA,QAAQ,KAARA,KAAAA,CAAAA,IAAAA,QAAQ,CAAEiD,OAAO,CAAE,EAAA;AAC5C,QAAA,OAAA;AACJ,OAAA;AAEAjD,MAAAA,QAAQ,CAACiD,OAAO,CAACC,cAAc,CAAC;AAC5BC,QAAAA,QAAQ,EAAE,QAAQ;AAClBC,QAAAA,KAAK,EAAE,QAAQ;AACfC,QAAAA,MAAM,EAAE,QAAA;AACZ,OAAC,CAAC,CAAA;AAEFrD,MAAAA,QAAQ,CAACiD,OAAO,CAACK,KAAK,CAAC;AAAEC,QAAAA,aAAa,EAAE,IAAA;AAAK,OAAC,CAAC,CAAA;KAClD,CAAA;IAED,IAAMC,MAAM,GAAGA,SAATA,MAAMA,CAAIC,OAAiC,EAAEC,KAAa,EAAK;MACjE,IAAID,OAAO,IAAItD,SAAS,KAAA,IAAA,IAATA,SAAS,KAATA,KAAAA,CAAAA,IAAAA,SAAS,CAAE8C,OAAO,EAAE;AAC/B9C,QAAAA,SAAS,CAAC8C,OAAO,CAACS,KAAK,CAAC,GAAGD,OAAO,CAAA;AACtC,OAAA;KACH,CAAA;AAEDE,IAAAA,eAAS,CAAC,YAAM;MACZ,IAAI,CAAC5C,iBAAiB,IAAI,EAACvB,MAAM,KAANA,IAAAA,IAAAA,MAAM,KAANA,KAAAA,CAAAA,IAAAA,MAAM,CAAE+B,MAAM,CAAE,EAAA;AACvC,QAAA,OAAA;AACJ,OAAA;AAEA,MAAA,IAAMe,QAAQ,GACV9C,CAAAA,MAAM,aAANA,MAAM,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAANA,MAAM,CAAEoE,GAAG,CAAC,UAACxB,KAAK,EAAEsB,KAAK,EAAA;QAAA,OAAM;UAC3BjF,EAAE,EAAA,EAAA,CAAAoF,MAAA,CAAKH,KAAM,OAAAG,MAAA,CAAGzB,KAAM,CAAC;AACvB0B,UAAAA,IAAI,EAAE1B,KAAAA;SACT,CAAA;OAAC,CAAC,KAAI,EAAE,CAAA;MAEb3B,QAAQ,CAAC6B,QAAQ,CAAC,CAAA;AACtB,KAAC,EAAE,CAACvB,iBAAiB,EAAEvB,MAAM,CAAC,CAAC,CAAA;AAE/B,IAAA,oBACIuE,KAAA,CAAAC,aAAA,CAAC3F,IAAI,EAAA;AACDa,MAAAA,IAAI,EAAEA,IAAK;AACXC,MAAAA,IAAI,EAAEA,IAAK;AACXI,MAAAA,QAAQ,EAAEA,QAAS;AACnBF,MAAAA,QAAQ,EAAE,CAACE,QAAQ,IAAIF,QAAS;AAChCR,MAAAA,cAAc,EAAEqC,wBAAyB;AACzC+C,MAAAA,OAAO,EAAEjB,gBAAAA;KAER/B,EAAAA,WAAW,IACPG,eAAe,iBACZ2C,KAAA,CAAAC,aAAA,CAACE,sBAAK,EAAA;AAACzF,MAAAA,EAAE,EAAEoC,OAAQ;AAACsD,MAAAA,OAAO,EAAE1F,EAAAA;AAAG,KAAA,EAC3B2C,eACE,CACT,eACN2C,KAAA,CAAAC,aAAA,CAACI,6BAAY,EAAA;AAACC,MAAAA,SAAS,EAAEC,QAAE,CAAC9C,YAAY,EAAEG,yBAAyB,EAAEE,0BAA0B,CAAA;AAAE,KAAA,EAC5FnD,WAAW,iBAAIqF,KAAA,CAAAC,aAAA,CAACO,kCAAiB,EAAE7F,IAAAA,EAAAA,WAA+B,CAAC,eACpEqF,KAAA,CAAAC,aAAA,CAACQ,kCAAiB,EAAA;MACdC,QAAQ,EAAE,CAAC,CAAE;AACbjG,MAAAA,GAAG,EAAEsB,UAAW;AAChB4E,MAAAA,SAAS,EAAE7B,oBAAqB;AAChCwB,MAAAA,SAAS,EAAE7C,YAAAA;AAAa,KAAA,EAEvBT,iBAAiB,IAAI4D,OAAO,CAAClF,KAAK,KAAA,IAAA,IAALA,KAAK,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAALA,KAAK,CAAE8B,MAAM,CAAC,iBACxCwC,KAAA,CAAAC,aAAA,CAACY,4BAAW,EAAA,IAAA,EACPnF,KAAK,KAAA,IAAA,IAALA,KAAK,KAALA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,KAAK,CAAEmE,GAAG,CAAC,UAAAiB,KAAA,EAAuBnB,KAAK,EAAK;AAAA,MAAA,IAA1BoB,MAAM,GAAAD,KAAA,CAAVpG,EAAE;QAAUqF,IAAAA,GAAAA,KAAAA,CAAAA,IAAAA,CAAAA;AACvB,MAAA,oBACIC,KAAA,CAAAC,aAAA,CAACe,2BAAa,EAAA;AACVtG,QAAAA,EAAE,EAAEqG,MAAO;QACXtG,GAAG,EAAGiF,SAAAA,GAAAA,CAAAA,OAAO,EAAA;AAAA,UAAA,OAAKD,MAAM,CAACC,OAAO,EAAEC,KAAK,CAAC,CAAA;SAAC;QACzCsB,GAAG,EAAA,EAAA,CAAAnB,MAAA,CAAKiB,MAAO,OAAAjB,MAAA,CAAGH,KAAM,CAAE;AAC1BnE,QAAAA,QAAQ,EAAEA,QAAS;AACnBF,QAAAA,QAAQ,EAAEA,QAAS;AACnB+C,QAAAA,KAAK,EAAE0B,IAAK;AACZA,QAAAA,IAAI,EAAEA,IAAK;QACXY,SAAS,EAAG1C,SAAAA,SAAAA,CAAAA,KAAK,EAAA;AAAA,UAAA,OAAKW,iBAAiB,CAACX,KAAK,EAAE8C,MAAM,EAAEpB,KAAK,CAAC,CAAA;SAAC;QAC9DuB,OAAO,EAAE,SAAAA,OAAA,GAAA;AAAA,UAAA,OAAMrC,WAAW,CAACkC,MAAM,EAAEpB,KAAK,CAAC,CAAA;SAAC;AAC1CO,QAAAA,OAAO,EAAEnB,WAAAA;AAAY,OACvB,CAAA,CAAA;KAET,CACQ,CAChB,eACDiB,KAAA,CAAAC,aAAA,CAACkB,sBAAK,EAAAC,iCAAA,CAAA,EAAA,EACEtF,IAAI,EAAA;AACRrB,MAAAA,GAAG,EAAEyB,YAAa;AAClBxB,MAAAA,EAAE,EAAEmC,OAAQ;AACZ,MAAA,iBAAA,EAAiBC,OAAQ;AACzB,MAAA,kBAAA,EAAkBC,YAAa;AAC/BhC,MAAAA,WAAW,EAAEqC,qBAAsB;AACnC5B,MAAAA,QAAQ,EAAEA,QAAS;AACnBF,MAAAA,QAAQ,EAAE,CAACE,QAAQ,IAAIF,QAAS;AAChCK,MAAAA,QAAQ,EAAEqC,YAAa;AACvB2C,MAAAA,SAAS,EAAEhC,kBAAAA;KAAmB,CAAA,CAAA,EAEjCzB,WAAW,iBACR8C,KAAA,CAAAC,aAAA,CAACE,sBAAK,EAAA;AAACzF,MAAAA,EAAE,EAAEoC,OAAQ;AAACsD,MAAAA,OAAO,EAAEvD,OAAAA;KACxBQ,EAAAA,eACE,CAEI,CAAA,EAClBzC,YAAY,iBAAIoF,KAAA,CAAAC,aAAA,CAACoB,mCAAkB,QAAEzG,YAAiC,CAC7D,CAAA,EACbI,UAAU,iBAAIgF,KAAA,CAAAC,aAAA,CAACqB,2BAAU,EAAA;AAAC5G,MAAAA,EAAE,EAAEqC,YAAAA;KAAe/B,EAAAA,UAAuB,CACnE,CAAC,CAAA;AAEf,GACJ,CAAC,CAAA;AAAA,EAAA;AAEE,IAAMuG,eAAe,GAAG;AAC3BC,EAAAA,IAAI,EAAE,WAAW;AACjBC,EAAAA,GAAG,EAAE,KAAK;AACVC,EAAAA,MAAM,EAAErH,aAAa;AACrBD,EAAAA,IAAI,EAAJA,IAAI;AACJuH,EAAAA,UAAU,EAAE;AACRxG,IAAAA,IAAI,EAAE;AACFyG,MAAAA,GAAG,EAAEC,WAAAA;KACR;AACDzG,IAAAA,IAAI,EAAE;AACFwG,MAAAA,GAAG,EAAEE,WAAAA;KACR;AACDtG,IAAAA,QAAQ,EAAE;AACNoG,MAAAA,GAAG,EAAEG,WAAW;AAChBC,MAAAA,KAAK,EAAE,IAAA;KACV;AACD1G,IAAAA,QAAQ,EAAE;AACNsG,MAAAA,GAAG,EAAEK,WAAW;AAChBD,MAAAA,KAAK,EAAE,IAAA;KACV;AACDlH,IAAAA,cAAc,EAAE;AACZ8G,MAAAA,GAAG,EAAEM,WAAAA;AACT,KAAA;GACH;AACDC,EAAAA,QAAQ,EAAE;AACN/G,IAAAA,IAAI,EAAE,GAAG;AACTD,IAAAA,IAAI,EAAE,SAAA;AACV,GAAA;AACJ;;;;;;"}
|
@@ -1,7 +1,7 @@
|
|
1
1
|
import './TextField_wctd2m.css';
|
2
2
|
import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
3
3
|
import React, { forwardRef, useRef, useState, useEffect } from 'react';
|
4
|
-
import { safeUseId } from '@salutejs/plasma-core';
|
4
|
+
import { useForkRef, safeUseId } from '@salutejs/plasma-core';
|
5
5
|
import { cx } from '../../utils/index.js';
|
6
6
|
import { base as base$2 } from './variations/_size/base.js';
|
7
7
|
import { base as base$1 } from './variations/_view/base.js';
|
@@ -39,6 +39,7 @@ var textFieldRoot = function textFieldRoot(Root) {
|
|
39
39
|
rest = _objectWithoutProperties(_ref, _excluded);
|
40
40
|
var contentRef = useRef(null);
|
41
41
|
var inputRef = useRef(null);
|
42
|
+
var inputForkRef = useForkRef(inputRef, ref);
|
42
43
|
var chipsRefs = useRef([]);
|
43
44
|
var controlledRefs = {
|
44
45
|
contentRef: contentRef,
|
@@ -127,7 +128,6 @@ var textFieldRoot = function textFieldRoot(Root) {
|
|
127
128
|
setChips(newChips);
|
128
129
|
}, [isChipEnumeration, values]);
|
129
130
|
return /*#__PURE__*/React.createElement(Root, {
|
130
|
-
ref: ref,
|
131
131
|
view: view,
|
132
132
|
size: size,
|
133
133
|
disabled: disabled,
|
@@ -166,7 +166,7 @@ var textFieldRoot = function textFieldRoot(Root) {
|
|
166
166
|
onClick: onChipClick
|
167
167
|
});
|
168
168
|
})), /*#__PURE__*/React.createElement(Input, _extends({}, rest, {
|
169
|
-
ref:
|
169
|
+
ref: inputForkRef,
|
170
170
|
id: innerId,
|
171
171
|
"aria-labelledby": labelId,
|
172
172
|
"aria-describedby": helperTextId,
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"TextField.js","sources":["../../../src/components/TextField/TextField.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useRef, useState } from 'react';\nimport type { ChangeEventHandler } from 'react';\nimport { safeUseId } from '@salutejs/plasma-core';\nimport { css } from '@linaria/core';\n\nimport type { RootProps } from '../../engines';\nimport { cx } from '../../utils';\n\nimport type { ChipValues, TextFieldPrimitiveValue, TextFieldProps } from './TextField.types';\nimport { base as sizeCSS } from './variations/_size/base';\nimport { base as viewCSS } from './variations/_view/base';\nimport { base as disabledCSS } from './variations/_disabled/base';\nimport { base as readOnlyCSS } from './variations/_read-only/base';\nimport { base as labelPlacementCSS } from './variations/_label-placement/base';\nimport {\n Input,\n LeftHelper,\n Label,\n InputWrapper,\n InputLabelWrapper,\n StyledContentLeft,\n StyledContentRight,\n StyledChips,\n} from './TextField.styles';\nimport { classes } from './TextField.tokens';\nimport { TextFieldChip } from './ui';\nimport { useKeyNavigation } from './hooks/useKeyNavigation';\n\nexport const base = css`\n /* NOTE: Webkit не применяет opacity к inline тегам */\n display: block;\n overflow: hidden;\n`;\n\nexport const textFieldRoot = (Root: RootProps<HTMLDivElement, TextFieldProps>) =>\n forwardRef<HTMLDivElement, TextFieldProps>(\n (\n {\n id,\n\n // layout\n contentLeft,\n contentRight,\n label,\n labelPlacement,\n placeholder,\n leftHelper,\n enumerationType = 'plain',\n\n // variations\n view,\n size,\n readOnly = false,\n disabled = false,\n\n // controlled\n chips: values,\n\n // events\n onChange,\n onChangeChips,\n onSearch,\n\n ...rest\n },\n ref,\n ) => {\n const contentRef = useRef<HTMLDivElement>(null);\n const inputRef = useRef<HTMLInputElement>(null);\n const chipsRefs = useRef<Array<HTMLButtonElement>>([]);\n\n const controlledRefs = { contentRef, inputRef, chipsRefs };\n\n const [chips, setChips] = useState<Array<ChipValues>>([]);\n\n const uniqId = safeUseId();\n const innerId = id || uniqId;\n const labelId = safeUseId();\n const helperTextId = safeUseId();\n\n const isChipEnumeration = enumerationType === 'chip';\n const hideLabel = (size === 'xs' || isChipEnumeration) && labelPlacement === 'inner';\n const labelInside = size !== 'xs' && labelPlacement === 'inner';\n const innerLabelPlacementValue = hideLabel ? 'outer' : labelPlacement;\n const innerPlaceholderValue = hideLabel ? label : placeholder;\n const innerLabelValue = hideLabel ? undefined : label;\n\n const isChipsVisible = isChipEnumeration && chips?.length;\n const withHasChips = isChipsVisible ? classes.hasChips : undefined;\n const wrapperWithoutLeftContent = !contentLeft && isChipsVisible ? classes.hasEmptyContentLeft : undefined;\n const wrapperWithoutRightContent =\n !contentRight && isChipsVisible ? classes.hasEmptyContentRight : undefined;\n\n const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n if (disabled || readOnly) {\n return;\n }\n\n const { maxLength, value } = event.target;\n\n if (maxLength !== -1 && value.length > maxLength) {\n return;\n }\n\n onChange?.(event);\n };\n\n const updateChips = (newChips: Array<ChipValues>, newValues: Array<TextFieldPrimitiveValue>) => {\n setChips(newChips);\n onChangeChips?.(newValues);\n };\n\n const { handleInputKeydown, handleChipKeyDown, onChipClear, handleContentKeyDown } = useKeyNavigation({\n controlledRefs,\n disabled,\n readOnly,\n chips,\n enumerationType,\n updateChips,\n onSearch,\n onChange,\n });\n\n const onChipClick = (event: React.MouseEvent<HTMLButtonElement>) => event.stopPropagation();\n\n const handleInputFocus = () => {\n if (readOnly || disabled || !inputRef?.current) {\n return;\n }\n\n inputRef.current.scrollIntoView({\n behavior: 'smooth',\n block: 'center',\n inline: 'center',\n });\n inputRef.current.focus({ preventScroll: true });\n };\n\n const getRef = (element: HTMLButtonElement | null, index: number) => {\n if (element && chipsRefs?.current) {\n chipsRefs.current[index] = element;\n }\n };\n\n useEffect(() => {\n if (!isChipEnumeration && !values?.length) {\n return;\n }\n\n const newChips =\n values?.map((value, index) => ({\n id: `${index}_${value}`,\n text: value,\n })) || [];\n\n setChips(newChips);\n }, [isChipEnumeration, values]);\n\n return (\n <Root\n ref={ref}\n view={view}\n size={size}\n disabled={disabled}\n readOnly={!disabled && readOnly}\n labelPlacement={innerLabelPlacementValue}\n onClick={handleInputFocus}\n >\n {labelInside ||\n (innerLabelValue && (\n <Label id={labelId} htmlFor={id}>\n {innerLabelValue}\n </Label>\n ))}\n <InputWrapper className={cx(withHasChips, wrapperWithoutLeftContent, wrapperWithoutRightContent)}>\n {contentLeft && <StyledContentLeft>{contentLeft}</StyledContentLeft>}\n <InputLabelWrapper\n tabIndex={-1}\n ref={contentRef}\n onKeyDown={handleContentKeyDown}\n className={withHasChips}\n >\n {isChipEnumeration && Boolean(chips?.length) && (\n <StyledChips>\n {chips?.map(({ id: chipId, text }, index) => {\n return (\n <TextFieldChip\n id={chipId}\n ref={(element) => getRef(element, index)}\n key={`${chipId}_${index}`}\n disabled={disabled}\n readOnly={readOnly}\n value={text}\n text={text}\n onKeyDown={(event) => handleChipKeyDown(event, chipId, index)}\n onClear={() => onChipClear(chipId, index)}\n onClick={onChipClick}\n />\n );\n })}\n </StyledChips>\n )}\n <Input\n {...rest}\n ref={inputRef}\n id={innerId}\n aria-labelledby={labelId}\n aria-describedby={helperTextId}\n placeholder={innerPlaceholderValue}\n disabled={disabled}\n readOnly={!disabled && readOnly}\n onChange={handleChange}\n onKeyDown={handleInputKeydown}\n />\n {labelInside && (\n <Label id={labelId} htmlFor={innerId}>\n {innerLabelValue}\n </Label>\n )}\n </InputLabelWrapper>\n {contentRight && <StyledContentRight>{contentRight}</StyledContentRight>}\n </InputWrapper>\n {leftHelper && <LeftHelper id={helperTextId}>{leftHelper}</LeftHelper>}\n </Root>\n );\n },\n );\n\nexport const textFieldConfig = {\n name: 'TextField',\n tag: 'div',\n layout: textFieldRoot,\n base,\n variations: {\n view: {\n css: viewCSS,\n },\n size: {\n css: sizeCSS,\n },\n disabled: {\n css: disabledCSS,\n attrs: true,\n },\n readOnly: {\n css: readOnlyCSS,\n attrs: true,\n },\n labelPlacement: {\n css: labelPlacementCSS,\n },\n },\n defaults: {\n size: 'm',\n view: 'default',\n },\n};\n"],"names":["base","textFieldRoot","Root","forwardRef","_ref","ref","id","contentLeft","contentRight","label","labelPlacement","placeholder","leftHelper","_ref$enumerationType","enumerationType","view","size","_ref$readOnly","readOnly","_ref$disabled","disabled","values","chips","onChange","onChangeChips","onSearch","rest","contentRef","useRef","inputRef","chipsRefs","controlledRefs","_useState","useState","_useState2","_slicedToArray","setChips","uniqId","safeUseId","innerId","labelId","helperTextId","isChipEnumeration","hideLabel","labelInside","innerLabelPlacementValue","innerPlaceholderValue","innerLabelValue","undefined","isChipsVisible","length","withHasChips","classes","hasChips","wrapperWithoutLeftContent","hasEmptyContentLeft","wrapperWithoutRightContent","hasEmptyContentRight","handleChange","event","_event$target","target","maxLength","value","updateChips","newChips","newValues","_useKeyNavigation","useKeyNavigation","handleInputKeydown","handleChipKeyDown","onChipClear","handleContentKeyDown","onChipClick","stopPropagation","handleInputFocus","current","scrollIntoView","behavior","block","inline","focus","preventScroll","getRef","element","index","useEffect","map","concat","text","React","createElement","onClick","Label","htmlFor","InputWrapper","className","cx","StyledContentLeft","InputLabelWrapper","tabIndex","onKeyDown","Boolean","StyledChips","_ref2","chipId","TextFieldChip","key","onClear","Input","_extends","StyledContentRight","LeftHelper","textFieldConfig","name","tag","layout","variations","css","viewCSS","sizeCSS","disabledCSS","attrs","readOnlyCSS","labelPlacementCSS","defaults"],"mappings":"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"}
|
1
|
+
{"version":3,"file":"TextField.js","sources":["../../../src/components/TextField/TextField.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useRef, useState } from 'react';\nimport type { ChangeEventHandler } from 'react';\nimport { safeUseId, useForkRef } from '@salutejs/plasma-core';\nimport { css } from '@linaria/core';\n\nimport type { RootProps } from '../../engines';\nimport { cx } from '../../utils';\n\nimport type { ChipValues, TextFieldPrimitiveValue, TextFieldProps } from './TextField.types';\nimport { base as sizeCSS } from './variations/_size/base';\nimport { base as viewCSS } from './variations/_view/base';\nimport { base as disabledCSS } from './variations/_disabled/base';\nimport { base as readOnlyCSS } from './variations/_read-only/base';\nimport { base as labelPlacementCSS } from './variations/_label-placement/base';\nimport {\n Input,\n LeftHelper,\n Label,\n InputWrapper,\n InputLabelWrapper,\n StyledContentLeft,\n StyledContentRight,\n StyledChips,\n} from './TextField.styles';\nimport { classes } from './TextField.tokens';\nimport { TextFieldChip } from './ui';\nimport { useKeyNavigation } from './hooks';\n\nexport const base = css`\n /* NOTE: Webkit не применяет opacity к inline тегам */\n display: block;\n overflow: hidden;\n`;\n\nexport const textFieldRoot = (Root: RootProps<HTMLDivElement, TextFieldProps>) =>\n forwardRef<HTMLInputElement, TextFieldProps>(\n (\n {\n id,\n\n // layout\n contentLeft,\n contentRight,\n label,\n labelPlacement,\n placeholder,\n leftHelper,\n enumerationType = 'plain',\n\n // variations\n view,\n size,\n readOnly = false,\n disabled = false,\n\n // controlled\n chips: values,\n\n // events\n onChange,\n onChangeChips,\n onSearch,\n\n ...rest\n },\n ref,\n ) => {\n const contentRef = useRef<HTMLDivElement>(null);\n const inputRef = useRef<HTMLInputElement>(null);\n const inputForkRef = useForkRef(inputRef, ref);\n const chipsRefs = useRef<Array<HTMLButtonElement>>([]);\n\n const controlledRefs = { contentRef, inputRef, chipsRefs };\n\n const [chips, setChips] = useState<Array<ChipValues>>([]);\n\n const uniqId = safeUseId();\n const innerId = id || uniqId;\n const labelId = safeUseId();\n const helperTextId = safeUseId();\n\n const isChipEnumeration = enumerationType === 'chip';\n const hideLabel = (size === 'xs' || isChipEnumeration) && labelPlacement === 'inner';\n const labelInside = size !== 'xs' && labelPlacement === 'inner';\n const innerLabelPlacementValue = hideLabel ? 'outer' : labelPlacement;\n const innerPlaceholderValue = hideLabel ? label : placeholder;\n const innerLabelValue = hideLabel ? undefined : label;\n\n const isChipsVisible = isChipEnumeration && chips?.length;\n const withHasChips = isChipsVisible ? classes.hasChips : undefined;\n const wrapperWithoutLeftContent = !contentLeft && isChipsVisible ? classes.hasEmptyContentLeft : undefined;\n const wrapperWithoutRightContent =\n !contentRight && isChipsVisible ? classes.hasEmptyContentRight : undefined;\n\n const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n if (disabled || readOnly) {\n return;\n }\n\n const { maxLength, value } = event.target;\n\n if (maxLength !== -1 && value.length > maxLength) {\n return;\n }\n\n onChange?.(event);\n };\n\n const updateChips = (newChips: Array<ChipValues>, newValues: Array<TextFieldPrimitiveValue>) => {\n setChips(newChips);\n onChangeChips?.(newValues);\n };\n\n const { handleInputKeydown, handleChipKeyDown, onChipClear, handleContentKeyDown } = useKeyNavigation({\n controlledRefs,\n disabled,\n readOnly,\n chips,\n enumerationType,\n updateChips,\n onSearch,\n onChange,\n });\n\n const onChipClick = (event: React.MouseEvent<HTMLButtonElement>) => event.stopPropagation();\n\n const handleInputFocus = () => {\n if (readOnly || disabled || !inputRef?.current) {\n return;\n }\n\n inputRef.current.scrollIntoView({\n behavior: 'smooth',\n block: 'center',\n inline: 'center',\n });\n\n inputRef.current.focus({ preventScroll: true });\n };\n\n const getRef = (element: HTMLButtonElement | null, index: number) => {\n if (element && chipsRefs?.current) {\n chipsRefs.current[index] = element;\n }\n };\n\n useEffect(() => {\n if (!isChipEnumeration && !values?.length) {\n return;\n }\n\n const newChips =\n values?.map((value, index) => ({\n id: `${index}_${value}`,\n text: value,\n })) || [];\n\n setChips(newChips);\n }, [isChipEnumeration, values]);\n\n return (\n <Root\n view={view}\n size={size}\n disabled={disabled}\n readOnly={!disabled && readOnly}\n labelPlacement={innerLabelPlacementValue}\n onClick={handleInputFocus}\n >\n {labelInside ||\n (innerLabelValue && (\n <Label id={labelId} htmlFor={id}>\n {innerLabelValue}\n </Label>\n ))}\n <InputWrapper className={cx(withHasChips, wrapperWithoutLeftContent, wrapperWithoutRightContent)}>\n {contentLeft && <StyledContentLeft>{contentLeft}</StyledContentLeft>}\n <InputLabelWrapper\n tabIndex={-1}\n ref={contentRef}\n onKeyDown={handleContentKeyDown}\n className={withHasChips}\n >\n {isChipEnumeration && Boolean(chips?.length) && (\n <StyledChips>\n {chips?.map(({ id: chipId, text }, index) => {\n return (\n <TextFieldChip\n id={chipId}\n ref={(element) => getRef(element, index)}\n key={`${chipId}_${index}`}\n disabled={disabled}\n readOnly={readOnly}\n value={text}\n text={text}\n onKeyDown={(event) => handleChipKeyDown(event, chipId, index)}\n onClear={() => onChipClear(chipId, index)}\n onClick={onChipClick}\n />\n );\n })}\n </StyledChips>\n )}\n <Input\n {...rest}\n ref={inputForkRef}\n id={innerId}\n aria-labelledby={labelId}\n aria-describedby={helperTextId}\n placeholder={innerPlaceholderValue}\n disabled={disabled}\n readOnly={!disabled && readOnly}\n onChange={handleChange}\n onKeyDown={handleInputKeydown}\n />\n {labelInside && (\n <Label id={labelId} htmlFor={innerId}>\n {innerLabelValue}\n </Label>\n )}\n </InputLabelWrapper>\n {contentRight && <StyledContentRight>{contentRight}</StyledContentRight>}\n </InputWrapper>\n {leftHelper && <LeftHelper id={helperTextId}>{leftHelper}</LeftHelper>}\n </Root>\n );\n },\n );\n\nexport const textFieldConfig = {\n name: 'TextField',\n tag: 'div',\n layout: textFieldRoot,\n base,\n variations: {\n view: {\n css: viewCSS,\n },\n size: {\n css: sizeCSS,\n },\n disabled: {\n css: disabledCSS,\n attrs: true,\n },\n readOnly: {\n css: readOnlyCSS,\n attrs: true,\n },\n labelPlacement: {\n css: labelPlacementCSS,\n },\n },\n defaults: {\n size: 'm',\n view: 'default',\n },\n};\n"],"names":["base","textFieldRoot","Root","forwardRef","_ref","ref","id","contentLeft","contentRight","label","labelPlacement","placeholder","leftHelper","_ref$enumerationType","enumerationType","view","size","_ref$readOnly","readOnly","_ref$disabled","disabled","values","chips","onChange","onChangeChips","onSearch","rest","contentRef","useRef","inputRef","inputForkRef","useForkRef","chipsRefs","controlledRefs","_useState","useState","_useState2","_slicedToArray","setChips","uniqId","safeUseId","innerId","labelId","helperTextId","isChipEnumeration","hideLabel","labelInside","innerLabelPlacementValue","innerPlaceholderValue","innerLabelValue","undefined","isChipsVisible","length","withHasChips","classes","hasChips","wrapperWithoutLeftContent","hasEmptyContentLeft","wrapperWithoutRightContent","hasEmptyContentRight","handleChange","event","_event$target","target","maxLength","value","updateChips","newChips","newValues","_useKeyNavigation","useKeyNavigation","handleInputKeydown","handleChipKeyDown","onChipClear","handleContentKeyDown","onChipClick","stopPropagation","handleInputFocus","current","scrollIntoView","behavior","block","inline","focus","preventScroll","getRef","element","index","useEffect","map","concat","text","React","createElement","onClick","Label","htmlFor","InputWrapper","className","cx","StyledContentLeft","InputLabelWrapper","tabIndex","onKeyDown","Boolean","StyledChips","_ref2","chipId","TextFieldChip","key","onClear","Input","_extends","StyledContentRight","LeftHelper","textFieldConfig","name","tag","layout","variations","css","viewCSS","sizeCSS","disabledCSS","attrs","readOnlyCSS","labelPlacementCSS","defaults"],"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.77.
|
3
|
+
"version": "0.77.3-canary.1204.8986491983.0",
|
4
4
|
"description": "Salute Design System blueprint",
|
5
5
|
"main": "cjs/index.js",
|
6
6
|
"module": "es/index.js",
|
@@ -102,5 +102,5 @@
|
|
102
102
|
"react-popper": "2.3.0",
|
103
103
|
"storeon": "3.1.5"
|
104
104
|
},
|
105
|
-
"gitHead": "
|
105
|
+
"gitHead": "70a02947265c91d9b6073a02145f4e8a1618883b"
|
106
106
|
}
|
@@ -17,7 +17,7 @@ var _base5 = /*#__PURE__*/require("./variations/_label-placement/base");
|
|
17
17
|
var _TextField = /*#__PURE__*/require("./TextField.styles");
|
18
18
|
var _TextField2 = /*#__PURE__*/require("./TextField.tokens");
|
19
19
|
var _ui = /*#__PURE__*/require("./ui");
|
20
|
-
var
|
20
|
+
var _hooks = /*#__PURE__*/require("./hooks");
|
21
21
|
var _excluded = ["id", "contentLeft", "contentRight", "label", "labelPlacement", "placeholder", "leftHelper", "enumerationType", "view", "size", "readOnly", "disabled", "chips", "onChange", "onChangeChips", "onSearch"];
|
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; }
|
@@ -55,6 +55,7 @@ var textFieldRoot = exports.textFieldRoot = function textFieldRoot(Root) {
|
|
55
55
|
rest = _objectWithoutProperties(_ref, _excluded);
|
56
56
|
var contentRef = (0, _react.useRef)(null);
|
57
57
|
var inputRef = (0, _react.useRef)(null);
|
58
|
+
var inputForkRef = (0, _plasmaCore.useForkRef)(inputRef, ref);
|
58
59
|
var chipsRefs = (0, _react.useRef)([]);
|
59
60
|
var controlledRefs = {
|
60
61
|
contentRef: contentRef,
|
@@ -95,7 +96,7 @@ var textFieldRoot = exports.textFieldRoot = function textFieldRoot(Root) {
|
|
95
96
|
setChips(newChips);
|
96
97
|
onChangeChips === null || onChangeChips === void 0 || onChangeChips(newValues);
|
97
98
|
};
|
98
|
-
var _useKeyNavigation = (0,
|
99
|
+
var _useKeyNavigation = (0, _hooks.useKeyNavigation)({
|
99
100
|
controlledRefs: controlledRefs,
|
100
101
|
disabled: disabled,
|
101
102
|
readOnly: readOnly,
|
@@ -143,7 +144,6 @@ var textFieldRoot = exports.textFieldRoot = function textFieldRoot(Root) {
|
|
143
144
|
setChips(newChips);
|
144
145
|
}, [isChipEnumeration, values]);
|
145
146
|
return /*#__PURE__*/_react["default"].createElement(Root, {
|
146
|
-
ref: ref,
|
147
147
|
view: view,
|
148
148
|
size: size,
|
149
149
|
disabled: disabled,
|
@@ -182,7 +182,7 @@ var textFieldRoot = exports.textFieldRoot = function textFieldRoot(Root) {
|
|
182
182
|
onClick: onChipClick
|
183
183
|
});
|
184
184
|
})), /*#__PURE__*/_react["default"].createElement(_TextField.Input, _extends({}, rest, {
|
185
|
-
ref:
|
185
|
+
ref: inputForkRef,
|
186
186
|
id: innerId,
|
187
187
|
"aria-labelledby": labelId,
|
188
188
|
"aria-describedby": helperTextId,
|
@@ -19,7 +19,7 @@ var config = exports.config = {
|
|
19
19
|
l: /*#__PURE__*/(0, _styledComponents.css)(["", ":100%;", ":auto;", ":0.875rem;", ":0.125rem;", ":0.125rem;", ":0.125rem;", ":0.125rem;", ":var(--surface-transparent-tertiary);", ":0.063rem;", ":0;", ":1rem;", ":0;", ":1rem;", ":auto;", ":1.5rem;", ":1rem;", ":1rem;", ":1rem;", ":1rem;", ":0.75rem;", ":1.875rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0.25rem;", ":0.5rem;", ":auto;", ":2.75rem;", ":0.75rem;", ":1rem;", ":0.625rem;", ":0rem;", ":1rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":1rem;", ":3.5rem;", ":100%;", ":0.875rem;", ":0 3.5rem 0 1.5rem;", ":0 3.625rem 0 0.375rem;", ":0 3.625rem 0 0.625rem;", ":0.5rem;", ":0.375rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);"], _Combobox.comboboxTokens.width, _Combobox.comboboxTokens.height, _Combobox.comboboxTokens.borderRadius, _Combobox.comboboxTokens.paddingTop, _Combobox.comboboxTokens.paddingRight, _Combobox.comboboxTokens.paddingBottom, _Combobox.comboboxTokens.paddingLeft, _Combobox.comboboxTokens.dividerColor, _Combobox.comboboxTokens.dividerHeight, _Combobox.comboboxTokens.dividerMarginTop, _Combobox.comboboxTokens.dividerMarginRight, _Combobox.comboboxTokens.dividerMarginBottom, _Combobox.comboboxTokens.dividerMarginLeft, _Combobox.comboboxTokens.itemWidth, _Combobox.comboboxTokens.itemHeight, _Combobox.comboboxTokens.itemPaddingTop, _Combobox.comboboxTokens.itemPaddingRight, _Combobox.comboboxTokens.itemPaddingBottom, _Combobox.comboboxTokens.itemPaddingLeft, _Combobox.comboboxTokens.itemBorderRadius, _Combobox.comboboxTokens.itemContentLeftWidth, _Combobox.comboboxTokens.itemFontFamily, _Combobox.comboboxTokens.itemFontSize, _Combobox.comboboxTokens.itemFontStyle, _Combobox.comboboxTokens.itemFontWeightBold, _Combobox.comboboxTokens.itemFontLetterSpacing, _Combobox.comboboxTokens.itemFontLineHeight, _Combobox.comboboxTokens.chipGap, _Combobox.comboboxTokens.chipBorderRadius, _Combobox.comboboxTokens.chipWidth, _Combobox.comboboxTokens.chipHeight, _Combobox.comboboxTokens.chipPaddingRight, _Combobox.comboboxTokens.chipPaddingLeft, _Combobox.comboboxTokens.chipClearContentMarginLeft, _Combobox.comboboxTokens.chipClearContentMarginRight, _Combobox.comboboxTokens.chipCloseIconSize, _Combobox.comboboxTokens.chipFontFamily, _Combobox.comboboxTokens.chipFontSize, _Combobox.comboboxTokens.chipFontStyle, _Combobox.comboboxTokens.chipFontWeight, _Combobox.comboboxTokens.chipLetterSpacing, _Combobox.comboboxTokens.chipLineHeight, _Combobox.comboboxTokens.targetArrowRight, _Combobox.comboboxTokens.targetHeight, _Combobox.comboboxTokens.targetWidth, _Combobox.comboboxTokens.targetRadius, _Combobox.comboboxTokens.targetPadding, _Combobox.comboboxTokens.targetPaddingHasChips, _Combobox.comboboxTokens.targetPaddingWithInput, _Combobox.comboboxTokens.targetInnerTop, _Combobox.comboboxTokens.targetLabelInnerTop, _Combobox.comboboxTokens.targetFontFamily, _Combobox.comboboxTokens.targetFontSize, _Combobox.comboboxTokens.targetFontStyle, _Combobox.comboboxTokens.targetFontWeight, _Combobox.comboboxTokens.targetLetterSpacing, _Combobox.comboboxTokens.targetLineHeight, _Combobox.comboboxTokens.targetLabelInnerFontFamily, _Combobox.comboboxTokens.targetLabelInnerFontSize, _Combobox.comboboxTokens.targetLabelInnerFontStyle, _Combobox.comboboxTokens.targetLabelInnerFontWeight, _Combobox.comboboxTokens.targetLabelInnerLetterSpacing, _Combobox.comboboxTokens.targetLabelInnerLineHeight)
|
20
20
|
},
|
21
21
|
view: {
|
22
|
-
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--surface-transparent-primary);", ":var(--surface-transparent-primary-hover);", ":var(--surface-transparent-primary-active);", ":var(--surface-transparent-secondary);", ":var(--surface-solid-card);", ":var(--shadow-down-soft-s);", ":var(--plasma-colors-transparent);", ":var(--surface-transparent-secondary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":0.4;", ":var(--surface-accent);"], _Combobox.comboboxTokens.targetColor, _Combobox.comboboxTokens.targetLabelColor, _Combobox.comboboxTokens.targetArrowColor, _Combobox.comboboxTokens.targetBackgroundColor, _Combobox.comboboxTokens.targetBackgroundColorHover, _Combobox.comboboxTokens.targetBackgroundColorActive, _Combobox.comboboxTokens.targetBackgroundColorOpen, _Combobox.comboboxTokens.background, _Combobox.comboboxTokens.boxShadow, _Combobox.comboboxTokens.itemBackground, _Combobox.comboboxTokens.itemBackgroundHover, _Combobox.comboboxTokens.itemBackgroundSelectedHover, _Combobox.comboboxTokens.itemColor, _Combobox.comboboxTokens.itemContentLeftColor, _Combobox.comboboxTokens.chipCloseIconColor, _Combobox.comboboxTokens.chipColor, _Combobox.comboboxTokens.chipBackground, _Combobox.comboboxTokens.chipColorHover, _Combobox.comboboxTokens.chipBackgroundHover, _Combobox.comboboxTokens.chipColorActive, _Combobox.comboboxTokens.chipBackgroundActive, _Combobox.comboboxTokens.chipBackgroundReadOnly, _Combobox.comboboxTokens.chipColorReadOnly, _Combobox.comboboxTokens.chipBackgroundReadOnlyHover, _Combobox.comboboxTokens.chipColorReadOnlyHover, _Combobox.comboboxTokens.chipOpacityReadonly, _Combobox.comboboxTokens.disabledOpacity, _Combobox.comboboxTokens.focusColor)
|
22
|
+
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--surface-transparent-primary);", ":var(--surface-transparent-primary-hover);", ":var(--surface-transparent-primary-active);", ":var(--surface-transparent-secondary);", ":color-mix( in srgb,var(--surface-solid-card),#FFFFFF 6% );", ":var(--shadow-down-soft-s);", ":var(--plasma-colors-transparent);", ":var(--surface-transparent-secondary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":0.4;", ":var(--surface-accent);"], _Combobox.comboboxTokens.targetColor, _Combobox.comboboxTokens.targetLabelColor, _Combobox.comboboxTokens.targetArrowColor, _Combobox.comboboxTokens.targetBackgroundColor, _Combobox.comboboxTokens.targetBackgroundColorHover, _Combobox.comboboxTokens.targetBackgroundColorActive, _Combobox.comboboxTokens.targetBackgroundColorOpen, _Combobox.comboboxTokens.background, _Combobox.comboboxTokens.boxShadow, _Combobox.comboboxTokens.itemBackground, _Combobox.comboboxTokens.itemBackgroundHover, _Combobox.comboboxTokens.itemBackgroundSelectedHover, _Combobox.comboboxTokens.itemColor, _Combobox.comboboxTokens.itemContentLeftColor, _Combobox.comboboxTokens.chipCloseIconColor, _Combobox.comboboxTokens.chipColor, _Combobox.comboboxTokens.chipBackground, _Combobox.comboboxTokens.chipColorHover, _Combobox.comboboxTokens.chipBackgroundHover, _Combobox.comboboxTokens.chipColorActive, _Combobox.comboboxTokens.chipBackgroundActive, _Combobox.comboboxTokens.chipBackgroundReadOnly, _Combobox.comboboxTokens.chipColorReadOnly, _Combobox.comboboxTokens.chipBackgroundReadOnlyHover, _Combobox.comboboxTokens.chipColorReadOnlyHover, _Combobox.comboboxTokens.chipOpacityReadonly, _Combobox.comboboxTokens.disabledOpacity, _Combobox.comboboxTokens.focusColor)
|
23
23
|
}
|
24
24
|
}
|
25
25
|
};
|
package/styled-components/cjs/examples/plasma_b2c/components/Dropdown/Normal/Dropdown.config.js
CHANGED
@@ -21,7 +21,7 @@ var config = exports.config = {
|
|
21
21
|
l: /*#__PURE__*/(0, _styledComponents.css)(["", ";", ";", ":1.0625rem;", ":1rem;", ":1.0625rem;", ":1rem;", ":0.75rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);"], dropdownSizeCommon, dropdownItemSizeCommon, _Dropdown.dropdownTokens.itemPaddingTop, _Dropdown.dropdownTokens.itemPaddingRight, _Dropdown.dropdownTokens.itemPaddingBottom, _Dropdown.dropdownTokens.itemPaddingLeft, _Dropdown.dropdownTokens.itemBorderRadius, _Dropdown.dropdownTokens.itemFontFamily, _Dropdown.dropdownTokens.itemFontSize, _Dropdown.dropdownTokens.itemFontStyle, _Dropdown.dropdownTokens.itemFontWeightBold, _Dropdown.dropdownTokens.itemFontLetterSpacing, _Dropdown.dropdownTokens.itemFontLineHeight)
|
22
22
|
},
|
23
23
|
view: {
|
24
|
-
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;", ":var(--surface-solid-card);", ":var(--shadow-down-soft-s);", ":var(--plasma-colors-transparent);", ":var(--surface-transparent-secondary);", ":inherit;", ":inherit;", ":inherit;", ":inherit;", ":var(--text-primary);"], _Dropdown.dropdownTokens.disabledOpacity, _Dropdown.dropdownTokens.background, _Dropdown.dropdownTokens.boxShadow, _Dropdown.dropdownTokens.itemBackground, _Dropdown.dropdownTokens.itemBackgroundHover, _Dropdown.dropdownTokens.itemBackgroundSelected, _Dropdown.dropdownTokens.itemColorSelected, _Dropdown.dropdownTokens.itemBackgroundSelectedHover, _Dropdown.dropdownTokens.itemColorSelectedHover, _Dropdown.dropdownTokens.itemColor)
|
24
|
+
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;", ":color-mix( in srgb,var(--surface-solid-card),#FFFFFF 6% );", ":var(--shadow-down-soft-s);", ":var(--plasma-colors-transparent);", ":var(--surface-transparent-secondary);", ":inherit;", ":inherit;", ":inherit;", ":inherit;", ":var(--text-primary);"], _Dropdown.dropdownTokens.disabledOpacity, _Dropdown.dropdownTokens.background, _Dropdown.dropdownTokens.boxShadow, _Dropdown.dropdownTokens.itemBackground, _Dropdown.dropdownTokens.itemBackgroundHover, _Dropdown.dropdownTokens.itemBackgroundSelected, _Dropdown.dropdownTokens.itemColorSelected, _Dropdown.dropdownTokens.itemBackgroundSelectedHover, _Dropdown.dropdownTokens.itemColorSelectedHover, _Dropdown.dropdownTokens.itemColor)
|
25
25
|
}
|
26
26
|
}
|
27
27
|
};
|
package/styled-components/cjs/examples/plasma_b2c/components/Dropdown/Tight/Dropdown.config.js
CHANGED
@@ -21,7 +21,7 @@ var config = exports.config = {
|
|
21
21
|
l: /*#__PURE__*/(0, _styledComponents.css)(["", ";", ";", ":0.8125rem;", ":1rem;", ":0.8125rem;", ":1rem;", ":0.75rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);"], dropdownSizeCommon, dropdownItemSizeCommon, _Dropdown.dropdownTokens.itemPaddingTop, _Dropdown.dropdownTokens.itemPaddingRight, _Dropdown.dropdownTokens.itemPaddingBottom, _Dropdown.dropdownTokens.itemPaddingLeft, _Dropdown.dropdownTokens.itemBorderRadius, _Dropdown.dropdownTokens.itemFontFamily, _Dropdown.dropdownTokens.itemFontSize, _Dropdown.dropdownTokens.itemFontStyle, _Dropdown.dropdownTokens.itemFontWeightBold, _Dropdown.dropdownTokens.itemFontLetterSpacing, _Dropdown.dropdownTokens.itemFontLineHeight)
|
22
22
|
},
|
23
23
|
view: {
|
24
|
-
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;", ":var(--surface-solid-card);", ":var(--shadow-down-soft-s);", ":var(--plasma-colors-transparent);", ":var(--surface-transparent-secondary);", ":inherit;", ":inherit;", ":inherit;", ":inherit;", ":var(--text-primary);"], _Dropdown.dropdownTokens.disabledOpacity, _Dropdown.dropdownTokens.background, _Dropdown.dropdownTokens.boxShadow, _Dropdown.dropdownTokens.itemBackground, _Dropdown.dropdownTokens.itemBackgroundHover, _Dropdown.dropdownTokens.itemBackgroundSelected, _Dropdown.dropdownTokens.itemColorSelected, _Dropdown.dropdownTokens.itemBackgroundSelectedHover, _Dropdown.dropdownTokens.itemColorSelectedHover, _Dropdown.dropdownTokens.itemColor)
|
24
|
+
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;", ":color-mix( in srgb,var(--surface-solid-card),#FFFFFF 6% );", ":var(--shadow-down-soft-s);", ":var(--plasma-colors-transparent);", ":var(--surface-transparent-secondary);", ":inherit;", ":inherit;", ":inherit;", ":inherit;", ":var(--text-primary);"], _Dropdown.dropdownTokens.disabledOpacity, _Dropdown.dropdownTokens.background, _Dropdown.dropdownTokens.boxShadow, _Dropdown.dropdownTokens.itemBackground, _Dropdown.dropdownTokens.itemBackgroundHover, _Dropdown.dropdownTokens.itemBackgroundSelected, _Dropdown.dropdownTokens.itemColorSelected, _Dropdown.dropdownTokens.itemBackgroundSelectedHover, _Dropdown.dropdownTokens.itemColorSelectedHover, _Dropdown.dropdownTokens.itemColor)
|
25
25
|
}
|
26
26
|
}
|
27
27
|
};
|
package/styled-components/cjs/examples/plasma_b2c/components/IconButton/IconButton.stories.tsx
ADDED
@@ -0,0 +1,71 @@
|
|
1
|
+
import React, { ComponentProps } from 'react';
|
2
|
+
import type { StoryObj, Meta } from '@storybook/react';
|
3
|
+
import { disableProps } from '@salutejs/plasma-sb-utils';
|
4
|
+
|
5
|
+
import { iconButtonConfig } from '../../../../components/IconButton';
|
6
|
+
import { mergeConfig } from '../../../../engines';
|
7
|
+
import { WithTheme, argTypesFromConfig } from '../../../_helpers';
|
8
|
+
import { IconChevronLeft } from '../../../../components/_Icon';
|
9
|
+
|
10
|
+
import { config } from './IconButton.config';
|
11
|
+
import { IconButton } from './IconButton';
|
12
|
+
|
13
|
+
const meta: Meta<typeof IconButton> = {
|
14
|
+
title: 'plasma_b2c/IconButton',
|
15
|
+
decorators: [WithTheme],
|
16
|
+
component: IconButton,
|
17
|
+
argTypes: {
|
18
|
+
...argTypesFromConfig(mergeConfig(iconButtonConfig, config)),
|
19
|
+
pin: {
|
20
|
+
options: [
|
21
|
+
'square-square',
|
22
|
+
'square-clear',
|
23
|
+
'clear-square',
|
24
|
+
'clear-clear',
|
25
|
+
'clear-circle',
|
26
|
+
'circle-clear',
|
27
|
+
'circle-circle',
|
28
|
+
'',
|
29
|
+
],
|
30
|
+
control: {
|
31
|
+
type: 'select',
|
32
|
+
},
|
33
|
+
table: { defaultValue: { summary: 'bottom' } },
|
34
|
+
},
|
35
|
+
},
|
36
|
+
};
|
37
|
+
|
38
|
+
export default meta;
|
39
|
+
|
40
|
+
const getSizeForIcon = (size) => {
|
41
|
+
const map = {
|
42
|
+
mr: 's',
|
43
|
+
lr: 's',
|
44
|
+
m: 's',
|
45
|
+
l: 's',
|
46
|
+
sr: 's',
|
47
|
+
xsr: 'xs',
|
48
|
+
};
|
49
|
+
if (map[size]) {
|
50
|
+
return map[size];
|
51
|
+
}
|
52
|
+
|
53
|
+
return size;
|
54
|
+
};
|
55
|
+
|
56
|
+
export const Default: StoryObj<ComponentProps<typeof IconButton>> = {
|
57
|
+
args: {
|
58
|
+
children: <IconChevronLeft />,
|
59
|
+
view: 'default',
|
60
|
+
size: 'm',
|
61
|
+
disabled: false,
|
62
|
+
focused: true,
|
63
|
+
isLoading: false,
|
64
|
+
},
|
65
|
+
argTypes: { ...disableProps(['children']) },
|
66
|
+
render: (args) => (
|
67
|
+
<IconButton {...args}>
|
68
|
+
<IconChevronLeft size={getSizeForIcon(args.size)} />
|
69
|
+
</IconButton>
|
70
|
+
),
|
71
|
+
};
|
package/styled-components/cjs/examples/plasma_b2c/components/Notification/Notification.config.js
CHANGED
@@ -12,7 +12,7 @@ var config = exports.config = {
|
|
12
12
|
},
|
13
13
|
variations: {
|
14
14
|
view: {
|
15
|
-
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-secondary);", ":var(--surface-transparent-card);", ":0.75rem;", ":0.375rem;", ":0.125rem;", ":0.25rem;", ":0rem;", ":0.25rem;", ":0.25rem;", ":1rem;", ":0.1875rem;", ":0.125rem;", ":0.375rem;", ":0.125rem;", ":1.625rem;", ":0.25rem;", ":0.5rem;", ":0.5rem;", ":0.375rem;", ":1.5rem;", ":0.375rem;", ":0.5rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-bold-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":var(--text-tertiary);", ":var(--text-primary);", ":0.375rem;", ":0.75rem;", ":0.8125rem 0.5rem 0.8125rem 0.875rem;"], _Notification.notificationTokens.contentColor, _Notification.notificationTokens.background, _Notification.notificationTokens.borderRadius, _Notification.notificationTokens.padding, _Notification.notificationTokens.contentPaddingTop, _Notification.notificationTokens.contentPaddingRight, _Notification.notificationTokens.contentPaddingBottom, _Notification.notificationTokens.contentPaddingLeft, _Notification.notificationTokens.contentPaddingTopWithoutIcon, _Notification.notificationTokens.horizontalLayoutRightPaddingWithoutCloseIcon, _Notification.notificationTokens.textboxPaddingTop, _Notification.notificationTokens.textboxPaddingRight, _Notification.notificationTokens.textboxPaddingBottom, _Notification.notificationTokens.textboxPaddingLeft, _Notification.notificationTokens.textboxPaddingRightWithCloseIcon, _Notification.notificationTokens.textboxGap, _Notification.notificationTokens.closeIconTop, _Notification.notificationTokens.closeIconRight, _Notification.notificationTokens.buttonsMarginTop, _Notification.notificationTokens.contentLeftIconSize, _Notification.notificationTokens.contentLeftIconMargin, _Notification.notificationTokens.contentTopIconMargin, _Notification.notificationTokens.contentFontFamily, _Notification.notificationTokens.contentFontSize, _Notification.notificationTokens.contentFontStyle, _Notification.notificationTokens.contentFontWeight, _Notification.notificationTokens.contentFontLetterSpacing, _Notification.notificationTokens.contentFontLineHeight, _Notification.notificationTokens.titleFontFamily, _Notification.notificationTokens.titleFontSize, _Notification.notificationTokens.titleFontStyle, _Notification.notificationTokens.titleFontWeight, _Notification.notificationTokens.titleFontLetterSpacing, _Notification.notificationTokens.titleFontLineHeight, _Notification.notificationTokens.closeIconColor, _Notification.notificationTokens.closeIconColorOnHover, _Notification.notificationTokens.horizontalLayoutGap, _Notification.notificationTokens.horizontalLayoutLeftIconMargin, _Notification.notificationTokens.paddingOneLineTextbox)
|
15
|
+
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-secondary);", ":color-mix( in srgb,var(--surface-transparent-card),#FFFFFF 6% );", ":0.75rem;", ":0.375rem;", ":0.125rem;", ":0.25rem;", ":0rem;", ":0.25rem;", ":0.25rem;", ":1rem;", ":0.1875rem;", ":0.125rem;", ":0.375rem;", ":0.125rem;", ":1.625rem;", ":0.25rem;", ":0.5rem;", ":0.5rem;", ":0.375rem;", ":1.5rem;", ":0.375rem;", ":0.5rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-bold-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":var(--text-tertiary);", ":var(--text-primary);", ":0.375rem;", ":0.75rem;", ":0.8125rem 0.5rem 0.8125rem 0.875rem;"], _Notification.notificationTokens.contentColor, _Notification.notificationTokens.background, _Notification.notificationTokens.borderRadius, _Notification.notificationTokens.padding, _Notification.notificationTokens.contentPaddingTop, _Notification.notificationTokens.contentPaddingRight, _Notification.notificationTokens.contentPaddingBottom, _Notification.notificationTokens.contentPaddingLeft, _Notification.notificationTokens.contentPaddingTopWithoutIcon, _Notification.notificationTokens.horizontalLayoutRightPaddingWithoutCloseIcon, _Notification.notificationTokens.textboxPaddingTop, _Notification.notificationTokens.textboxPaddingRight, _Notification.notificationTokens.textboxPaddingBottom, _Notification.notificationTokens.textboxPaddingLeft, _Notification.notificationTokens.textboxPaddingRightWithCloseIcon, _Notification.notificationTokens.textboxGap, _Notification.notificationTokens.closeIconTop, _Notification.notificationTokens.closeIconRight, _Notification.notificationTokens.buttonsMarginTop, _Notification.notificationTokens.contentLeftIconSize, _Notification.notificationTokens.contentLeftIconMargin, _Notification.notificationTokens.contentTopIconMargin, _Notification.notificationTokens.contentFontFamily, _Notification.notificationTokens.contentFontSize, _Notification.notificationTokens.contentFontStyle, _Notification.notificationTokens.contentFontWeight, _Notification.notificationTokens.contentFontLetterSpacing, _Notification.notificationTokens.contentFontLineHeight, _Notification.notificationTokens.titleFontFamily, _Notification.notificationTokens.titleFontSize, _Notification.notificationTokens.titleFontStyle, _Notification.notificationTokens.titleFontWeight, _Notification.notificationTokens.titleFontLetterSpacing, _Notification.notificationTokens.titleFontLineHeight, _Notification.notificationTokens.closeIconColor, _Notification.notificationTokens.closeIconColorOnHover, _Notification.notificationTokens.horizontalLayoutGap, _Notification.notificationTokens.horizontalLayoutLeftIconMargin, _Notification.notificationTokens.paddingOneLineTextbox)
|
16
16
|
},
|
17
17
|
layout: {
|
18
18
|
horizontal: /*#__PURE__*/(0, _styledComponents.css)(["", ":25rem;", ":1rem 0.5rem 1rem 0.875rem;"], _Notification.notificationTokens.width, _Notification.notificationTokens.horizontalLayoutPadding),
|
@@ -24,7 +24,7 @@ var config = exports.config = {
|
|
24
24
|
l: /*#__PURE__*/(0, _styledComponents.css)(["", ":100%;", ":auto;", ":0.875rem;", ":0.125rem;", ":0.125rem;", ":0.125rem;", ":0.125rem;", ":var(--surface-transparent-tertiary);", ":0.063rem;", ":0;", ":1rem;", ":0;", ":1rem;", ":auto;", ":1.5rem;", ":1rem;", ":1rem;", ":1rem;", ":1rem;", ":0.75rem;", ":1.875rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0.25rem;", ":0.5rem;", ":auto;", ":2.75rem;", ":0.75rem;", ":1rem;", ":0.625rem;", ":0rem;", ":1rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":1rem;", ":3.5rem;", ":100%;", ":0.875rem;", ":0 3.5rem 0 1.5rem;", ":0 3.625rem 0 0.375rem;", ":0 3.625rem 0 0.625rem;", ":0.5rem;", ":0.375rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);"], _Select.selectTokens.width, _Select.selectTokens.height, _Select.selectTokens.borderRadius, _Select.selectTokens.paddingTop, _Select.selectTokens.paddingRight, _Select.selectTokens.paddingBottom, _Select.selectTokens.paddingLeft, _Select.selectTokens.dividerColor, _Select.selectTokens.dividerHeight, _Select.selectTokens.dividerMarginTop, _Select.selectTokens.dividerMarginRight, _Select.selectTokens.dividerMarginBottom, _Select.selectTokens.dividerMarginLeft, _Select.selectTokens.itemWidth, _Select.selectTokens.itemHeight, _Select.selectTokens.itemPaddingTop, _Select.selectTokens.itemPaddingRight, _Select.selectTokens.itemPaddingBottom, _Select.selectTokens.itemPaddingLeft, _Select.selectTokens.itemBorderRadius, _Select.selectTokens.itemContentLeftWidth, _Select.selectTokens.itemFontFamily, _Select.selectTokens.itemFontSize, _Select.selectTokens.itemFontStyle, _Select.selectTokens.itemFontWeightBold, _Select.selectTokens.itemFontLetterSpacing, _Select.selectTokens.itemFontLineHeight, _Select.selectTokens.chipGap, _Select.selectTokens.chipBorderRadius, _Select.selectTokens.chipWidth, _Select.selectTokens.chipHeight, _Select.selectTokens.chipPaddingRight, _Select.selectTokens.chipPaddingLeft, _Select.selectTokens.chipClearContentMarginLeft, _Select.selectTokens.chipClearContentMarginRight, _Select.selectTokens.chipCloseIconSize, _Select.selectTokens.chipFontFamily, _Select.selectTokens.chipFontSize, _Select.selectTokens.chipFontStyle, _Select.selectTokens.chipFontWeight, _Select.selectTokens.chipLetterSpacing, _Select.selectTokens.chipLineHeight, _Select.selectTokens.targetArrowRight, _Select.selectTokens.targetHeight, _Select.selectTokens.targetWidth, _Select.selectTokens.targetRadius, _Select.selectTokens.targetPadding, _Select.selectTokens.targetPaddingHasChips, _Select.selectTokens.targetPaddingWithInput, _Select.selectTokens.targetInnerTop, _Select.selectTokens.targetLabelInnerTop, _Select.selectTokens.targetFontFamily, _Select.selectTokens.targetFontSize, _Select.selectTokens.targetFontStyle, _Select.selectTokens.targetFontWeight, _Select.selectTokens.targetLetterSpacing, _Select.selectTokens.targetLineHeight, _Select.selectTokens.targetLabelInnerFontFamily, _Select.selectTokens.targetLabelInnerFontSize, _Select.selectTokens.targetLabelInnerFontStyle, _Select.selectTokens.targetLabelInnerFontWeight, _Select.selectTokens.targetLabelInnerLetterSpacing, _Select.selectTokens.targetLabelInnerLineHeight)
|
25
25
|
},
|
26
26
|
view: {
|
27
|
-
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--surface-solid-card);", ":var(--shadow-down-soft-s);", ":var(--plasma-colors-transparent);", ":var(--surface-transparent-secondary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":0.4;", ":var(--surface-accent);"], _Select.selectTokens.background, _Select.selectTokens.boxShadow, _Select.selectTokens.itemBackground, _Select.selectTokens.itemBackgroundHover, _Select.selectTokens.itemBackgroundSelectedHover, _Select.selectTokens.itemColor, _Select.selectTokens.itemContentLeftColor, _Select.selectTokens.chipCloseIconColor, _Select.selectTokens.chipColor, _Select.selectTokens.chipBackground, _Select.selectTokens.chipColorHover, _Select.selectTokens.chipBackgroundHover, _Select.selectTokens.chipColorActive, _Select.selectTokens.chipBackgroundActive, _Select.selectTokens.chipBackgroundReadOnly, _Select.selectTokens.chipColorReadOnly, _Select.selectTokens.chipBackgroundReadOnlyHover, _Select.selectTokens.chipColorReadOnlyHover, _Select.selectTokens.chipOpacityReadonly, _Select.selectTokens.disabledOpacity, _Select.selectTokens.focusColor)
|
27
|
+
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":color-mix( in srgb,var(--surface-solid-card),#FFFFFF 6% );", ":var(--shadow-down-soft-s);", ":var(--plasma-colors-transparent);", ":var(--surface-transparent-secondary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":0.4;", ":var(--surface-accent);"], _Select.selectTokens.background, _Select.selectTokens.boxShadow, _Select.selectTokens.itemBackground, _Select.selectTokens.itemBackgroundHover, _Select.selectTokens.itemBackgroundSelectedHover, _Select.selectTokens.itemColor, _Select.selectTokens.itemContentLeftColor, _Select.selectTokens.chipCloseIconColor, _Select.selectTokens.chipColor, _Select.selectTokens.chipBackground, _Select.selectTokens.chipColorHover, _Select.selectTokens.chipBackgroundHover, _Select.selectTokens.chipColorActive, _Select.selectTokens.chipBackgroundActive, _Select.selectTokens.chipBackgroundReadOnly, _Select.selectTokens.chipColorReadOnly, _Select.selectTokens.chipBackgroundReadOnlyHover, _Select.selectTokens.chipColorReadOnlyHover, _Select.selectTokens.chipOpacityReadonly, _Select.selectTokens.disabledOpacity, _Select.selectTokens.focusColor)
|
28
28
|
}
|
29
29
|
}
|
30
30
|
};
|
@@ -13,9 +13,9 @@ var config = exports.config = {
|
|
13
13
|
},
|
14
14
|
variations: {
|
15
15
|
view: {
|
16
|
-
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-solid-card);", ":var(--text-secondary);", ":var(--text-secondary);"], _Toast.toastTokens.color, _Toast.toastTokens.background, _Toast.toastTokens.closeIconColor, _Toast.toastTokens.closeIconColorOnHover),
|
17
|
-
dark: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);
|
18
|
-
light: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-light-text-primary);", ":var(--on-light-surface-solid-primary);", ":var(--on-light-text-secondary);", ":var(--on-light-text-secondary);"], _Toast.toastTokens.color, _Toast.toastTokens.background, _Toast.toastTokens.closeIconColor, _Toast.toastTokens.closeIconColorOnHover)
|
16
|
+
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":color-mix( in srgb,var(--surface-solid-card),#FFFFFF 6% );", ":var(--text-secondary);", ":var(--text-secondary);"], _Toast.toastTokens.color, _Toast.toastTokens.background, _Toast.toastTokens.closeIconColor, _Toast.toastTokens.closeIconColorOnHover),
|
17
|
+
dark: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);color-mix( in srgb,var(--on-dark-surface-solid-primary),#FFFFFF 6% );", ":var(--on-dark-text-secondary);", ":var(--on-dark-text-secondary);"], _Toast.toastTokens.color, _Toast.toastTokens.closeIconColor, _Toast.toastTokens.closeIconColorOnHover),
|
18
|
+
light: /*#__PURE__*/(0, _styledComponents.css)(["", ":color-mix( in srgb,var(--on-light-text-primary),#FFFFFF 6% );", ":var(--on-light-surface-solid-primary);", ":var(--on-light-text-secondary);", ":var(--on-light-text-secondary);"], _Toast.toastTokens.color, _Toast.toastTokens.background, _Toast.toastTokens.closeIconColor, _Toast.toastTokens.closeIconColorOnHover)
|
19
19
|
},
|
20
20
|
size: {
|
21
21
|
m: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.75rem;", ":calc(100vw - 5rem);", ":0.5625rem 0.75rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":-0.0625rem 0.375rem -0.0625rem -0.125rem;", ":-0.0625rem -0.25rem -0.0625rem 0.5rem;"], _Toast.toastTokens.borderRadius, _Toast.toastTokens.maxWidth, _Toast.toastTokens.padding, _Toast.toastTokens.fontFamily, _Toast.toastTokens.fontSize, _Toast.toastTokens.fontStyle, _Toast.toastTokens.fontWeight, _Toast.toastTokens.letterSpacing, _Toast.toastTokens.lineHeight, _Toast.toastTokens.leftContentMargin, _Toast.toastTokens.closeIconMargin)
|
@@ -13,7 +13,7 @@ var config = exports.config = {
|
|
13
13
|
},
|
14
14
|
variations: {
|
15
15
|
view: {
|
16
|
-
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--shadow-down-soft-s);", ":var(--surface-solid-card);", ":var(--surface-transparent-tertiary);"], _Toolbar.toolbarTokens.boxShadow, _Toolbar.toolbarTokens.background, _Toolbar.toolbarTokens.dividerColor)
|
16
|
+
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--shadow-down-soft-s);", ":color-mix( in srgb,var(--surface-solid-card),#FFFFFF 6% );", ":var(--surface-transparent-tertiary);"], _Toolbar.toolbarTokens.boxShadow, _Toolbar.toolbarTokens.background, _Toolbar.toolbarTokens.dividerColor)
|
17
17
|
},
|
18
18
|
size: {
|
19
19
|
xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":2.5rem;", ":0.25rem;", ":0.75rem;", ":1.25rem;", ":0.5rem;", ":0.0625rem;"], _Toolbar.toolbarTokens.size, _Toolbar.toolbarTokens.padding, _Toolbar.toolbarTokens.borderRadius, _Toolbar.toolbarTokens.dividerSize, _Toolbar.toolbarTokens.dividerOffset, _Toolbar.toolbarTokens.dividerBorderRadius),
|
@@ -17,7 +17,7 @@ var config = exports.config = {
|
|
17
17
|
m: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.6875rem;", ":0.875rem;", ":0.6875rem;", ":0.875rem;", ":2.5rem;", ":0.625rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":0.375rem;", ":1.25rem;", ":1.25rem;", ":url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg==\");", ":0.5rem;", ":0.625rem;", ":var(--surface-solid-card);"], _Tooltip.tooltipTokens.paddingTop, _Tooltip.tooltipTokens.paddingRight, _Tooltip.tooltipTokens.paddingBottom, _Tooltip.tooltipTokens.paddingLeft, _Tooltip.tooltipTokens.minHeight, _Tooltip.tooltipTokens.borderRadius, _Tooltip.tooltipTokens.textFontFamily, _Tooltip.tooltipTokens.textFontSize, _Tooltip.tooltipTokens.textFontStyle, _Tooltip.tooltipTokens.textFontWeight, _Tooltip.tooltipTokens.textFontLetterSpacing, _Tooltip.tooltipTokens.textFontLineHeight, _Tooltip.tooltipTokens.contentLeftMargin, _Tooltip.tooltipTokens.arrowMaskWidth, _Tooltip.tooltipTokens.arrowMaskHeight, _Tooltip.tooltipTokens.arrowMaskImage, _Tooltip.tooltipTokens.arrowHeight, _Tooltip.tooltipTokens.arrowEdgeMargin, _Tooltip.tooltipTokens.arrowBackground)
|
18
18
|
},
|
19
19
|
view: {
|
20
|
-
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--surface-solid-card);", ":var(--shadow-down-hard-s);", ":var(--text-primary);"], _Tooltip.tooltipTokens.backgroundColor, _Tooltip.tooltipTokens.boxShadow, _Tooltip.tooltipTokens.color)
|
20
|
+
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":color-mix( in srgb,var(--surface-solid-card),#FFFFFF 6% );", ":var(--shadow-down-hard-s);", ":var(--text-primary);"], _Tooltip.tooltipTokens.backgroundColor, _Tooltip.tooltipTokens.boxShadow, _Tooltip.tooltipTokens.color)
|
21
21
|
}
|
22
22
|
}
|
23
23
|
};
|
@@ -19,7 +19,7 @@ var config = exports.config = {
|
|
19
19
|
l: /*#__PURE__*/(0, _styledComponents.css)(["", ":100%;", ":auto;", ":0.875rem;", ":0.125rem;", ":0.125rem;", ":0.125rem;", ":0.125rem;", ":var(--surface-transparent-tertiary);", ":0.063rem;", ":0;", ":1rem;", ":0;", ":1rem;", ":auto;", ":1.5rem;", ":1rem;", ":1rem;", ":1rem;", ":1rem;", ":0.75rem;", ":1.875rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0.25rem;", ":0.5rem;", ":auto;", ":2.75rem;", ":0.75rem;", ":1rem;", ":0.625rem;", ":0rem;", ":1rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":1rem;", ":3.5rem;", ":100%;", ":0.875rem;", ":0 3.5rem 0 1.5rem;", ":0 3.625rem 0 0.375rem;", ":0 3.625rem 0 0.625rem;", ":0.5rem;", ":0.375rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);"], _Combobox.comboboxTokens.width, _Combobox.comboboxTokens.height, _Combobox.comboboxTokens.borderRadius, _Combobox.comboboxTokens.paddingTop, _Combobox.comboboxTokens.paddingRight, _Combobox.comboboxTokens.paddingBottom, _Combobox.comboboxTokens.paddingLeft, _Combobox.comboboxTokens.dividerColor, _Combobox.comboboxTokens.dividerHeight, _Combobox.comboboxTokens.dividerMarginTop, _Combobox.comboboxTokens.dividerMarginRight, _Combobox.comboboxTokens.dividerMarginBottom, _Combobox.comboboxTokens.dividerMarginLeft, _Combobox.comboboxTokens.itemWidth, _Combobox.comboboxTokens.itemHeight, _Combobox.comboboxTokens.itemPaddingTop, _Combobox.comboboxTokens.itemPaddingRight, _Combobox.comboboxTokens.itemPaddingBottom, _Combobox.comboboxTokens.itemPaddingLeft, _Combobox.comboboxTokens.itemBorderRadius, _Combobox.comboboxTokens.itemContentLeftWidth, _Combobox.comboboxTokens.itemFontFamily, _Combobox.comboboxTokens.itemFontSize, _Combobox.comboboxTokens.itemFontStyle, _Combobox.comboboxTokens.itemFontWeightBold, _Combobox.comboboxTokens.itemFontLetterSpacing, _Combobox.comboboxTokens.itemFontLineHeight, _Combobox.comboboxTokens.chipGap, _Combobox.comboboxTokens.chipBorderRadius, _Combobox.comboboxTokens.chipWidth, _Combobox.comboboxTokens.chipHeight, _Combobox.comboboxTokens.chipPaddingRight, _Combobox.comboboxTokens.chipPaddingLeft, _Combobox.comboboxTokens.chipClearContentMarginLeft, _Combobox.comboboxTokens.chipClearContentMarginRight, _Combobox.comboboxTokens.chipCloseIconSize, _Combobox.comboboxTokens.chipFontFamily, _Combobox.comboboxTokens.chipFontSize, _Combobox.comboboxTokens.chipFontStyle, _Combobox.comboboxTokens.chipFontWeight, _Combobox.comboboxTokens.chipLetterSpacing, _Combobox.comboboxTokens.chipLineHeight, _Combobox.comboboxTokens.targetArrowRight, _Combobox.comboboxTokens.targetHeight, _Combobox.comboboxTokens.targetWidth, _Combobox.comboboxTokens.targetRadius, _Combobox.comboboxTokens.targetPadding, _Combobox.comboboxTokens.targetPaddingHasChips, _Combobox.comboboxTokens.targetPaddingWithInput, _Combobox.comboboxTokens.targetInnerTop, _Combobox.comboboxTokens.targetLabelInnerTop, _Combobox.comboboxTokens.targetFontFamily, _Combobox.comboboxTokens.targetFontSize, _Combobox.comboboxTokens.targetFontStyle, _Combobox.comboboxTokens.targetFontWeight, _Combobox.comboboxTokens.targetLetterSpacing, _Combobox.comboboxTokens.targetLineHeight, _Combobox.comboboxTokens.targetLabelInnerFontFamily, _Combobox.comboboxTokens.targetLabelInnerFontSize, _Combobox.comboboxTokens.targetLabelInnerFontStyle, _Combobox.comboboxTokens.targetLabelInnerFontWeight, _Combobox.comboboxTokens.targetLabelInnerLetterSpacing, _Combobox.comboboxTokens.targetLabelInnerLineHeight)
|
20
20
|
},
|
21
21
|
view: {
|
22
|
-
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-tertiary-hover);", ":var(--text-tertiary-active);", ":var(--text-accent);", ":var(--surface-solid-card);", ":var(--shadow-down-soft-s);", ":var(--plasma-colors-transparent);", ":var(--surface-transparent-secondary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":0.4;", ":var(--surface-accent);"], _Combobox.comboboxTokens.targetColor, _Combobox.comboboxTokens.targetLabelColor, _Combobox.comboboxTokens.targetArrowColor, _Combobox.comboboxTokens.targetBorderColor, _Combobox.comboboxTokens.targetBorderColorHover, _Combobox.comboboxTokens.targetBorderColorActive, _Combobox.comboboxTokens.targetBorderColorOpen, _Combobox.comboboxTokens.background, _Combobox.comboboxTokens.boxShadow, _Combobox.comboboxTokens.itemBackground, _Combobox.comboboxTokens.itemBackgroundHover, _Combobox.comboboxTokens.itemBackgroundSelectedHover, _Combobox.comboboxTokens.itemColor, _Combobox.comboboxTokens.itemContentLeftColor, _Combobox.comboboxTokens.chipCloseIconColor, _Combobox.comboboxTokens.chipColor, _Combobox.comboboxTokens.chipBackground, _Combobox.comboboxTokens.chipColorHover, _Combobox.comboboxTokens.chipBackgroundHover, _Combobox.comboboxTokens.chipColorActive, _Combobox.comboboxTokens.chipBackgroundActive, _Combobox.comboboxTokens.chipBackgroundReadOnly, _Combobox.comboboxTokens.chipColorReadOnly, _Combobox.comboboxTokens.chipBackgroundReadOnlyHover, _Combobox.comboboxTokens.chipColorReadOnlyHover, _Combobox.comboboxTokens.chipOpacityReadonly, _Combobox.comboboxTokens.disabledOpacity, _Combobox.comboboxTokens.focusColor)
|
22
|
+
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-tertiary-hover);", ":var(--text-tertiary-active);", ":var(--text-accent);", ":color-mix( in srgb,var(--surface-solid-card),#FFFFFF 6% );", ":var(--shadow-down-soft-s);", ":var(--plasma-colors-transparent);", ":var(--surface-transparent-secondary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":0.4;", ":var(--surface-accent);"], _Combobox.comboboxTokens.targetColor, _Combobox.comboboxTokens.targetLabelColor, _Combobox.comboboxTokens.targetArrowColor, _Combobox.comboboxTokens.targetBorderColor, _Combobox.comboboxTokens.targetBorderColorHover, _Combobox.comboboxTokens.targetBorderColorActive, _Combobox.comboboxTokens.targetBorderColorOpen, _Combobox.comboboxTokens.background, _Combobox.comboboxTokens.boxShadow, _Combobox.comboboxTokens.itemBackground, _Combobox.comboboxTokens.itemBackgroundHover, _Combobox.comboboxTokens.itemBackgroundSelectedHover, _Combobox.comboboxTokens.itemColor, _Combobox.comboboxTokens.itemContentLeftColor, _Combobox.comboboxTokens.chipCloseIconColor, _Combobox.comboboxTokens.chipColor, _Combobox.comboboxTokens.chipBackground, _Combobox.comboboxTokens.chipColorHover, _Combobox.comboboxTokens.chipBackgroundHover, _Combobox.comboboxTokens.chipColorActive, _Combobox.comboboxTokens.chipBackgroundActive, _Combobox.comboboxTokens.chipBackgroundReadOnly, _Combobox.comboboxTokens.chipColorReadOnly, _Combobox.comboboxTokens.chipBackgroundReadOnlyHover, _Combobox.comboboxTokens.chipColorReadOnlyHover, _Combobox.comboboxTokens.chipOpacityReadonly, _Combobox.comboboxTokens.disabledOpacity, _Combobox.comboboxTokens.focusColor)
|
23
23
|
}
|
24
24
|
}
|
25
25
|
};
|
package/styled-components/cjs/examples/plasma_web/components/Dropdown/Normal/Dropdown.config.js
CHANGED
@@ -21,7 +21,7 @@ var config = exports.config = {
|
|
21
21
|
l: /*#__PURE__*/(0, _styledComponents.css)(["", ";", ";", ":1.0625rem;", ":1rem;", ":1.0625rem;", ":1rem;", ":0.75rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);"], dropdownSizeCommon, dropdownItemSizeCommon, _Dropdown.dropdownTokens.itemPaddingTop, _Dropdown.dropdownTokens.itemPaddingRight, _Dropdown.dropdownTokens.itemPaddingBottom, _Dropdown.dropdownTokens.itemPaddingLeft, _Dropdown.dropdownTokens.itemBorderRadius, _Dropdown.dropdownTokens.itemFontFamily, _Dropdown.dropdownTokens.itemFontSize, _Dropdown.dropdownTokens.itemFontStyle, _Dropdown.dropdownTokens.itemFontWeightBold, _Dropdown.dropdownTokens.itemFontLetterSpacing, _Dropdown.dropdownTokens.itemFontLineHeight)
|
22
22
|
},
|
23
23
|
view: {
|
24
|
-
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;", ":var(--surface-solid-card);", ":var(--shadow-down-soft-s);", ":var(--plasma-colors-transparent);", ":var(--surface-transparent-secondary);", ":inherit;", ":inherit;", ":inherit;", ":inherit;", ":var(--text-primary);"], _Dropdown.dropdownTokens.disabledOpacity, _Dropdown.dropdownTokens.background, _Dropdown.dropdownTokens.boxShadow, _Dropdown.dropdownTokens.itemBackground, _Dropdown.dropdownTokens.itemBackgroundHover, _Dropdown.dropdownTokens.itemBackgroundSelected, _Dropdown.dropdownTokens.itemColorSelected, _Dropdown.dropdownTokens.itemBackgroundSelectedHover, _Dropdown.dropdownTokens.itemColorSelectedHover, _Dropdown.dropdownTokens.itemColor)
|
24
|
+
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;", ":color-mix( in srgb,var(--surface-solid-card),#FFFFFF 6% );", ":var(--shadow-down-soft-s);", ":var(--plasma-colors-transparent);", ":var(--surface-transparent-secondary);", ":inherit;", ":inherit;", ":inherit;", ":inherit;", ":var(--text-primary);"], _Dropdown.dropdownTokens.disabledOpacity, _Dropdown.dropdownTokens.background, _Dropdown.dropdownTokens.boxShadow, _Dropdown.dropdownTokens.itemBackground, _Dropdown.dropdownTokens.itemBackgroundHover, _Dropdown.dropdownTokens.itemBackgroundSelected, _Dropdown.dropdownTokens.itemColorSelected, _Dropdown.dropdownTokens.itemBackgroundSelectedHover, _Dropdown.dropdownTokens.itemColorSelectedHover, _Dropdown.dropdownTokens.itemColor)
|
25
25
|
}
|
26
26
|
}
|
27
27
|
};
|