@salutejs/plasma-new-hope 0.339.0-canary.2288.18653805742.0 → 0.339.0-canary.2288.18833592459.0

package/styled-components/es/components/Select/ui/TreeList/ui/Item/Item.js

@@ -0,0 +1,99 @@
+import React, { useContext } from "react";
+import { classes } from "../../../../Select.tokens";
+import { sizeToIconSize } from "../../../../utils";
+import { keyExists } from "../../../../reducers/treePathReducer";
+import { Context } from "../../../../Select.context";
+import { ItemWrapper, ChildItems, Offset, IconWrapper, StyledCheckboxWrapper, StyledCheckbox, StyledIndicator, StyledIconDone, StyledText, StyledWrapper, StyledCell, DisclosureIconWrapper, StyledArrowRight, Wrapper, StyledArrowLeft } from "./Item.styles";
+export var Item = function(param) {
+    var item = param.item, index = param.index;
+    var _valueToPathMap_get, _item_items;
+    var label = item.label, value = item.value, disabled = item.disabled, isDisabled = item.isDisabled, contentLeft = item.contentLeft, contentRight = item.contentRight;
+    var isLeaf = !(item === null || item === void 0 ? void 0 : item.items);
+    var _useContext = useContext(Context), checked = _useContext.checked, multiselect = _useContext.multiselect, size = _useContext.size, variant = _useContext.variant, renderItem = _useContext.renderItem, // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    _checkboxAppearance = _useContext._checkboxAppearance, focusedPath = _useContext.focusedPath, treePath = _useContext.treePath, dispatchTreePath = _useContext.dispatchTreePath, arrowPlacement = _useContext.arrowPlacement, handleItemClick = _useContext.handleItemClick, handleCheckboxChange = _useContext.handleCheckboxChange, valueToPathMap = _useContext.valueToPathMap;
+    var itemDisabled = Boolean(disabled || isDisabled);
+    var currentItemDepth = (((_valueToPathMap_get = valueToPathMap.get(item.value.toString())) === null || _valueToPathMap_get === void 0 ? void 0 : _valueToPathMap_get.length) || 0) - 1;
+    var isCurrentLevelOpened = keyExists(treePath, valueToPathMap.get(value.toString()) || []);
+    var withArrowInverse = isCurrentLevelOpened ? classes.arrowInverse : undefined;
+    var focusedClass = currentItemDepth === focusedPath.length - 1 && index === (focusedPath === null || focusedPath === void 0 ? void 0 : focusedPath[currentItemDepth]) ? classes.dropdownItemIsFocused : undefined;
+    var handleClick = function(e) {
+        if (!isLeaf) {
+            dispatchTreePath({
+                type: 'toggled_level',
+                value: valueToPathMap.get(value.toString()) || []
+            });
+        }
+        if (handleItemClick) {
+            handleItemClick(item, e);
+        }
+    };
+    var handleChange = function(e) {
+        if (itemDisabled) return;
+        e.stopPropagation();
+        handleCheckboxChange(item);
+    };
+    return /*#__PURE__*/ React.createElement(ItemWrapper, null, /*#__PURE__*/ React.createElement(Wrapper, {
+        className: focusedClass,
+        onClick: handleClick,
+        variant: variant,
+        role: "treeitem"
+    }, /*#__PURE__*/ React.createElement(Offset, {
+        depth: currentItemDepth
+    }), arrowPlacement === 'left' && /*#__PURE__*/ React.createElement(DisclosureIconWrapper, {
+        visibility: isLeaf ? 'hidden' : 'visible'
+    }, /*#__PURE__*/ React.createElement(StyledArrowLeft, {
+        size: sizeToIconSize(size, variant),
+        color: "inherit",
+        className: withArrowInverse
+    })), multiselect && /*#__PURE__*/ React.createElement(IconWrapper, {
+        variant: variant
+    }, /*#__PURE__*/ React.createElement(StyledCheckboxWrapper, {
+        onClick: function(e) {
+            return e.stopPropagation();
+        }
+    }, /*#__PURE__*/ React.createElement(StyledCheckbox, {
+        disabled: itemDisabled,
+        checked: Boolean(checked.get(item.value)),
+        indeterminate: checked.get(item.value) === 'indeterminate',
+        onChange: handleChange,
+        appearance: _checkboxAppearance !== null && _checkboxAppearance !== void 0 ? _checkboxAppearance : 'default'
+    }))), !multiselect && arrowPlacement === 'right' && /*#__PURE__*/ React.createElement(IconWrapper, {
+        variant: variant
+    }, checked.get(item.value) === 'dot' && /*#__PURE__*/ React.createElement(StyledIndicator, {
+        size: "s",
+        view: "default"
+    }), checked.get(item.value) === 'done' && /*#__PURE__*/ React.createElement(StyledIconDone, {
+        size: sizeToIconSize(size, variant),
+        color: "inherit"
+    })), renderItem ? /*#__PURE__*/ React.createElement(StyledText, null, renderItem(item)) : /*#__PURE__*/ React.createElement(StyledWrapper, {
+        disabled: itemDisabled
+    }, /*#__PURE__*/ React.createElement(StyledCell, {
+        contentLeft: contentLeft,
+        contentRight: contentRight,
+        // TODO: #1548
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        title: /*#__PURE__*/ React.createElement("span", null, label)
+    })), !multiselect && arrowPlacement === 'left' && /*#__PURE__*/ React.createElement(IconWrapper, {
+        variant: variant
+    }, checked.get(item.value) === 'dot' && /*#__PURE__*/ React.createElement(StyledIndicator, {
+        size: "s",
+        view: "default"
+    }), checked.get(item.value) === 'done' && /*#__PURE__*/ React.createElement(StyledIconDone, {
+        size: sizeToIconSize(size, variant),
+        color: "inherit"
+    })), arrowPlacement === 'right' && /*#__PURE__*/ React.createElement(DisclosureIconWrapper, {
+        visibility: isLeaf ? 'hidden' : 'visible'
+    }, /*#__PURE__*/ React.createElement(StyledArrowRight, {
+        size: sizeToIconSize(size, variant),
+        color: "inherit",
+        className: withArrowInverse
+    }))), !isLeaf && isCurrentLevelOpened && /*#__PURE__*/ React.createElement(ChildItems, null, (_item_items = item.items) === null || _item_items === void 0 ? void 0 : _item_items.map(function(item, index) {
+        return /*#__PURE__*/ React.createElement(Item, {
+            item: item,
+            index: index,
+            key: index
+        });
+    })));
+};

package/styled-components/es/components/Select/ui/TreeList/ui/Item/Item.styles.js

@@ -0,0 +1,236 @@
+import styled from "styled-components";
+import { addFocus, applyEllipsis } from "../../../../../../mixins";
+import { component, mergeConfig } from "../../../../../../engines";
+import { classes, tokens, constants } from "../../../../Select.tokens";
+import { checkboxConfig, checkboxTokens } from "../../../../../Checkbox";
+import { cellConfig, cellTokens } from "../../../../../Cell";
+import { indicatorConfig, indicatorTokens } from "../../../../../Indicator";
+import { IconDisclosureRightCentered, IconDone } from "../../../../../_Icon";
+export var ItemWrapper = styled.div.withConfig({
+    displayName: "Item.styles__ItemWrapper",
+    componentId: "sc-9fbb8f6d-0"
+})([
+    ""
+]);
+var mergedCheckboxConfig = mergeConfig(checkboxConfig);
+var Checkbox = component(mergedCheckboxConfig);
+var mergedCellConfig = mergeConfig(cellConfig);
+var Cell = component(mergedCellConfig);
+var mergedIndicatorConfig = mergeConfig(indicatorConfig);
+var Indicator = component(mergedIndicatorConfig);
+export var StyledWrapper = styled.div.withConfig({
+    displayName: "Item.styles__StyledWrapper",
+    componentId: "sc-9fbb8f6d-1"
+})([
+    "",
+    ":",
+    ";",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");width:100%;& div.cell-content,& div.cell-textbox{flex:1;}& div.cell-textbox-title{position:relative;}& div.cell-textbox-title:before{content:' ';visibility:hidden;}& div.cell-textbox-title span{position:absolute;left:0;right:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}"
+], cellTokens.cellTitleColor, function(param) {
+    var disabled = param.disabled;
+    return disabled ? "var(".concat(tokens.itemDisabledColor, ")") : "var(".concat(constants.cellTitleColor, ")");
+}, cellTokens.cellBackgroundColor, constants.cellBackgroundColor, cellTokens.cellPadding, tokens.cellPadding, cellTokens.cellPaddingLeftContent, tokens.cellPaddingLeftContent, cellTokens.cellPaddingContent, tokens.cellPaddingContent, cellTokens.cellPaddingRightContent, tokens.cellPaddingRightContent, cellTokens.cellTextboxGap, tokens.cellTextboxGap, cellTokens.cellGap, tokens.cellGap, cellTokens.cellTitleFontFamily, tokens.cellTitleFontFamily, cellTokens.cellTitleFontSize, tokens.cellTitleFontSize, cellTokens.cellTitleFontStyle, tokens.cellTitleFontStyle, cellTokens.cellTitleFontWeight, tokens.cellTitleFontWeight, cellTokens.cellTitleLetterSpacing, tokens.cellTitleLetterSpacing, cellTokens.cellTitleLineHeight, tokens.cellTitleLineHeight);
+export var StyledCell = styled(Cell).withConfig({
+    displayName: "Item.styles__StyledCell",
+    componentId: "sc-9fbb8f6d-2"
+})([
+    ""
+]);
+export var StyledCheckbox = styled(Checkbox).withConfig({
+    displayName: "Item.styles__StyledCheckbox",
+    componentId: "sc-9fbb8f6d-3"
+})([
+    "",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");"
+], checkboxTokens.triggerSize, tokens.checkboxTriggerSize, checkboxTokens.triggerBorderRadius, tokens.checkboxTriggerBorderRadius, checkboxTokens.fillColor, tokens.checkboxFillColor, checkboxTokens.iconColor, tokens.checkboxIconColor, checkboxTokens.triggerBorderWidth, tokens.checkboxTriggerBorderWidth, checkboxTokens.triggerBorderColor, tokens.checkboxTriggerBorderColor, checkboxTokens.triggerBorderCheckedColor, tokens.checkboxTriggerBorderCheckedColor);
+export var StyledIndicator = styled(Indicator).withConfig({
+    displayName: "Item.styles__StyledIndicator",
+    componentId: "sc-9fbb8f6d-4"
+})([
+    "",
+    ":var(",
+    ");",
+    ":var(",
+    ");"
+], indicatorTokens.size, tokens.indicatorSize, indicatorTokens.color, tokens.itemIconColor);
+// TODO: Удалить после поддержки JS переменных в конфиге компонент
+export var sizeMap = {
+    xs: '1rem',
+    s: '1.5rem'
+};
+export var StyledArrowLeft = styled(IconDisclosureRightCentered).withConfig({
+    displayName: "Item.styles__StyledArrowLeft",
+    componentId: "sc-9fbb8f6d-5"
+})([
+    "width:",
+    ";height:",
+    ";&.",
+    "{transform:rotate(90deg);}"
+], function(param) {
+    var _param_size = param.size, size = _param_size === void 0 ? 'xs' : _param_size;
+    return "var(".concat(tokens.disclosureIconSize, ", ").concat(sizeMap[size], ")");
+}, function(param) {
+    var _param_size = param.size, size = _param_size === void 0 ? 'xs' : _param_size;
+    return "var(".concat(tokens.disclosureIconSize, ", ").concat(sizeMap[size], ")");
+}, classes.arrowInverse);
+export var StyledArrowRight = styled(IconDisclosureRightCentered).withConfig({
+    displayName: "Item.styles__StyledArrowRight",
+    componentId: "sc-9fbb8f6d-6"
+})([
+    "width:",
+    ";height:",
+    ";transform:rotate(90deg);&.",
+    "{transform:rotate(-90deg);}"
+], function(param) {
+    var _param_size = param.size, size = _param_size === void 0 ? 'xs' : _param_size;
+    return "var(".concat(tokens.disclosureIconSize, ", ").concat(sizeMap[size], ")");
+}, function(param) {
+    var _param_size = param.size, size = _param_size === void 0 ? 'xs' : _param_size;
+    return "var(".concat(tokens.disclosureIconSize, ", ").concat(sizeMap[size], ")");
+}, classes.arrowInverse);
+export var StyledIconDone = styled(IconDone).withConfig({
+    displayName: "Item.styles__StyledIconDone",
+    componentId: "sc-9fbb8f6d-7"
+})([
+    "width:",
+    ";height:",
+    ";"
+], function(param) {
+    var _param_size = param.size, size = _param_size === void 0 ? 'xs' : _param_size;
+    return "var(".concat(tokens.disclosureIconSize, ", ").concat(sizeMap[size], ")");
+}, function(param) {
+    var _param_size = param.size, size = _param_size === void 0 ? 'xs' : _param_size;
+    return "var(".concat(tokens.disclosureIconSize, ", ").concat(sizeMap[size], ")");
+});
+export var DisclosureIconWrapper = styled.div.withConfig({
+    displayName: "Item.styles__DisclosureIconWrapper",
+    componentId: "sc-9fbb8f6d-8"
+})([
+    "line-height:0;color:var(",
+    ");visibility:",
+    ";&:hover{color:var(",
+    ");}"
+], tokens.disclosureIconColor, function(param) {
+    var visibility = param.visibility;
+    return visibility || 'visible';
+}, tokens.disclosureIconColorHover);
+export var IconWrapper = styled.div.withConfig({
+    displayName: "Item.styles__IconWrapper",
+    componentId: "sc-9fbb8f6d-9"
+})([
+    "display:flex;align-items:center;justify-content:center;flex:none;width:",
+    ";height:",
+    ";line-height:0;color:var(",
+    ");"
+], function(param) {
+    var variant = param.variant;
+    return "var(".concat(variant === 'tight' ? tokens.itemIconSizeTight : tokens.itemIconSize, ")");
+}, function(param) {
+    var variant = param.variant;
+    return "var(".concat(variant === 'tight' ? tokens.itemIconSizeTight : tokens.itemIconSize, ")");
+}, tokens.itemIconColor);
+export var StyledText = styled.div.withConfig({
+    displayName: "Item.styles__StyledText",
+    componentId: "sc-9fbb8f6d-10"
+})([
+    "",
+    ";flex:1;"
+], applyEllipsis());
+export var Wrapper = styled.div.withConfig({
+    displayName: "Item.styles__Wrapper",
+    componentId: "sc-9fbb8f6d-11"
+})([
+    "display:flex;align-items:center;gap:var(",
+    ");min-height:var(",
+    ");margin:0;box-sizing:content-box;padding:",
+    ";font-family:var(",
+    ");font-size:var(",
+    ");font-style:var(",
+    ");font-weight:var(",
+    ");letter-spacing:var(",
+    ");line-height:var(",
+    ");background-color:var(",
+    ");color:var(--text-primary);border-radius:calc(var(",
+    ") - 0.125rem - var(",
+    ",0rem));user-select:none;background-clip:padding-box;&:hover:not(.",
+    "){cursor:pointer;background-color:var(",
+    ");}&.",
+    "{background-color:var(",
+    ");}&.",
+    "{opacity:var(",
+    ");color:var(",
+    ");cursor:not-allowed;}:focus{outline:none;}",
+    ";"
+], tokens.itemGap, tokens.itemHeight, function(param) {
+    var variant = param.variant;
+    return "var(".concat(variant === 'tight' ? tokens.itemPaddingTight : tokens.itemPadding, ")");
+}, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.fontLetterSpacing, tokens.fontLineHeight, constants.itemBackground, tokens.borderRadius, tokens.dropdownBorderWidth, classes.dropdownItemIsDisabled, tokens.itemBackgroundHover, classes.dropdownItemIsActive, tokens.itemBackgroundHover, classes.dropdownItemIsDisabled, tokens.itemDisabledOpacity, tokens.itemDisabledColor, addFocus({
+    outlineSize: '0',
+    outlineOffset: '0',
+    outlineColor: "var(".concat(constants.focusColor, ")"),
+    outlineRadius: "calc(var(".concat(tokens.borderRadius, ") - 0.125rem - var(").concat(tokens.dropdownBorderWidth, ", 0rem))"),
+    hasTransition: false,
+    customFocusRules: "\n            &.".concat(classes.dropdownItemIsFocused, ":before {\n                outline: none;\n                box-shadow: inset 0 0 0 0.0625rem var(").concat(constants.focusColor, ");\n            }\n        ")
+}));
+export var StyledCheckboxWrapper = styled.span.withConfig({
+    displayName: "Item.styles__StyledCheckboxWrapper",
+    componentId: "sc-9fbb8f6d-12"
+})([
+    ""
+]);
+export var ChildItems = styled.div.withConfig({
+    displayName: "Item.styles__ChildItems",
+    componentId: "sc-9fbb8f6d-13"
+})([
+    ""
+]);
+export var Offset = styled.div.withConfig({
+    displayName: "Item.styles__Offset",
+    componentId: "sc-9fbb8f6d-14"
+})([
+    "width:calc(",
+    " * var(",
+    "));flex:none;margin-right:calc(var(",
+    ") * -1);"
+], function(param) {
+    var depth = param.depth;
+    return depth || 0;
+}, tokens.itemTreeOffsetWidth, tokens.itemGap);

package/styled-components/es/components/Select/ui/TreeList/ui/Item/Item.types.js

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

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

@@ -2,3 +2,4 @@ export * from "./Inner/Inner";
 export * from "./Target/Target";
 export * from "./VirtualList/VirtualList";
 export * from "./SelectAll/SelectAll";
+export * from "./TreeList/TreeList";

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

@@ -129,7 +129,6 @@ import { base as hintViewCSS } from "./variations/_hint-view/base";
 import { base as hintSizeCSS } from "./variations/_hint-size/base";
 import { HintComponent } from "./ui/Hint/Hint";
 var innerPlaceholderUp = classes.innerPlaceholderUp, focusedOuterPlaceholderColor = classes.focusedOuterPlaceholderColor, hidePlaceHolder = classes.hidePlaceHolder, styledContainer = classes.styledContainer, styledTextArea = classes.styledTextArea, styledTextAreaWrapper = classes.styledTextAreaWrapper, styledPlaceholder = classes.styledPlaceholder, styledHelpers = classes.styledHelpers, hasHeaderSlot = classes.hasHeaderSlot, styledContentWrapper = classes.styledContentWrapper;
-var optionalText = 'optional';
 var base = css([
     "",
     ";position:relative;box-sizing:border-box;"
@@ -162,7 +161,7 @@ export var getDynamicLabelClasses = function(props, focused) {
 };
 export var textAreaRoot = function(Root) {
     return /*#__PURE__*/ forwardRef(function(props, innerRef) {
-        var helperText = props.helperText, status = props.status, resize = props.resize, headerSlot = props.headerSlot, rightHelper = props.rightHelper, leftHelper = props.leftHelper, _props_leftHelperPlacement = props.leftHelperPlacement, leftHelperPlacement = _props_leftHelperPlacement === void 0 ? 'inner' : _props_leftHelperPlacement, contentRight = props.contentRight, _props_autoResize = props.autoResize, autoResize = _props_autoResize === void 0 ? false : _props_autoResize, _props_minAuto = props.minAuto, minAuto = _props_minAuto === void 0 ? 0 : _props_minAuto, maxAuto = props.maxAuto, label = props.label, _props_labelPlacement = props.labelPlacement, labelPlacement = _props_labelPlacement === void 0 ? 'inner' : _props_labelPlacement, titleCaption = props.titleCaption, placeholder = props.placeholder, defaultValue = props.defaultValue, height = props.height, width = props.width, value = props.value, disabled = props.disabled, _props_required = props.required, required = _props_required === void 0 ? false : _props_required, _props_requiredPlacement = props.requiredPlacement, requiredPlacement = _props_requiredPlacement === void 0 ? 'right' : _props_requiredPlacement, _props_hasRequiredIndicator = props.hasRequiredIndicator, hasRequiredIndicator = _props_hasRequiredIndicator === void 0 ? true : _props_hasRequiredIndicator, _props_optional = props.optional, optional = _props_optional === void 0 ? false : _props_optional, clear = props.clear, hasDivider = props.hasDivider, size = props.size, view = props.view, id = props.id, style = props.style, className = props.className, readOnly = props.readOnly, rows = props.rows, cols = props.cols, _props_hintTrigger = props.hintTrigger, hintTrigger = _props_hintTrigger === void 0 ? 'hover' : _props_hintTrigger, hintText = props.hintText, _props_hintView = props.hintView, hintView = _props_hintView === void 0 ? 'default' : _props_hintView, _props_hintSize = props.hintSize, hintSize = _props_hintSize === void 0 ? 'm' : _props_hintSize, hintTargetIcon = props.hintTargetIcon, _props_hintPlacement = props.hintPlacement, hintPlacement = _props_hintPlacement === void 0 ? 'auto' : _props_hintPlacement, hintHasArrow = props.hintHasArrow, _props_hintOffset = props.hintOffset, hintOffset = _props_hintOffset === void 0 ? HINT_DEFAULT_OFFSET : _props_hintOffset, hintWidth = props.hintWidth, hintContentLeft = props.hintContentLeft, _props_labelAriaHidden = props.labelAriaHidden, labelAriaHidden = _props_labelAriaHidden === void 0 ? false : _props_labelAriaHidden, onChange = props.onChange, rest = _object_without_properties(props, [
+        var helperText = props.helperText, status = props.status, resize = props.resize, headerSlot = props.headerSlot, rightHelper = props.rightHelper, leftHelper = props.leftHelper, _props_leftHelperPlacement = props.leftHelperPlacement, leftHelperPlacement = _props_leftHelperPlacement === void 0 ? 'inner' : _props_leftHelperPlacement, contentRight = props.contentRight, _props_autoResize = props.autoResize, autoResize = _props_autoResize === void 0 ? false : _props_autoResize, _props_minAuto = props.minAuto, minAuto = _props_minAuto === void 0 ? 0 : _props_minAuto, maxAuto = props.maxAuto, label = props.label, _props_labelPlacement = props.labelPlacement, labelPlacement = _props_labelPlacement === void 0 ? 'inner' : _props_labelPlacement, titleCaption = props.titleCaption, placeholder = props.placeholder, defaultValue = props.defaultValue, height = props.height, width = props.width, value = props.value, disabled = props.disabled, _props_required = props.required, required = _props_required === void 0 ? false : _props_required, _props_requiredPlacement = props.requiredPlacement, requiredPlacement = _props_requiredPlacement === void 0 ? 'right' : _props_requiredPlacement, _props_hasRequiredIndicator = props.hasRequiredIndicator, hasRequiredIndicator = _props_hasRequiredIndicator === void 0 ? true : _props_hasRequiredIndicator, _props_optional = props.optional, optional = _props_optional === void 0 ? false : _props_optional, _props_optionalText = props.optionalText, optionalText = _props_optionalText === void 0 ? 'optional' : _props_optionalText, clear = props.clear, hasDivider = props.hasDivider, size = props.size, view = props.view, id = props.id, style = props.style, className = props.className, readOnly = props.readOnly, rows = props.rows, cols = props.cols, _props_hintTrigger = props.hintTrigger, hintTrigger = _props_hintTrigger === void 0 ? 'hover' : _props_hintTrigger, hintText = props.hintText, _props_hintView = props.hintView, hintView = _props_hintView === void 0 ? 'default' : _props_hintView, _props_hintSize = props.hintSize, hintSize = _props_hintSize === void 0 ? 'm' : _props_hintSize, hintTargetIcon = props.hintTargetIcon, _props_hintPlacement = props.hintPlacement, hintPlacement = _props_hintPlacement === void 0 ? 'auto' : _props_hintPlacement, hintHasArrow = props.hintHasArrow, _props_hintOffset = props.hintOffset, hintOffset = _props_hintOffset === void 0 ? HINT_DEFAULT_OFFSET : _props_hintOffset, hintWidth = props.hintWidth, hintContentLeft = props.hintContentLeft, _props_labelAriaHidden = props.labelAriaHidden, labelAriaHidden = _props_labelAriaHidden === void 0 ? false : _props_labelAriaHidden, onChange = props.onChange, rest = _object_without_properties(props, [
             "helperText",
             "status",
             "resize",
@@ -187,6 +186,7 @@ export var textAreaRoot = function(Root) {
             "requiredPlacement",
             "hasRequiredIndicator",
             "optional",
+            "optionalText",
             "clear",
             "hasDivider",
             "size",

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

@@ -119,7 +119,6 @@ import { TextFieldChip, TextFieldChipNew } from "./ui";
 import { useKeyNavigation } from "./hooks";
 import { HintComponent } from "./ui/Hint/Hint";
 import { getInputWidth } from "./getInputWidth";
-var optionalText = 'optional';
 export var base = css([
     "display:block;"
 ]);
@@ -132,7 +131,7 @@ export var textFieldRoot = function(Root) {
         var id = _param.id, className = _param.className, style = _param.style, // layout
         contentLeft = _param.contentLeft, contentRight = _param.contentRight, label = _param.label, labelPlacement = _param.labelPlacement, keepPlaceholder = _param.keepPlaceholder, textBefore = _param.textBefore, textAfter = _param.textAfter, placeholder = _param.placeholder, leftHelper = _param.leftHelper, _param_enumerationType = _param.enumerationType, enumerationType = _param_enumerationType === void 0 ? 'plain' : _param_enumerationType, _param_requiredPlacement = _param.requiredPlacement, requiredPlacement = _param_requiredPlacement === void 0 ? 'right' : _param_requiredPlacement, _param_hasRequiredIndicator = _param.hasRequiredIndicator, hasRequiredIndicator = _param_hasRequiredIndicator === void 0 ? true : _param_hasRequiredIndicator, titleCaption = _param.titleCaption, _param_chipView = _param.chipView, chipView = _param_chipView === void 0 ? 'default' : _param_chipView, chipValidator = _param.chipValidator, _param_hintTrigger = _param.// hint
         hintTrigger, hintTrigger = _param_hintTrigger === void 0 ? 'hover' : _param_hintTrigger, hintText = _param.hintText, _param_hintView = _param.hintView, hintView = _param_hintView === void 0 ? 'default' : _param_hintView, _param_hintSize = _param.hintSize, hintSize = _param_hintSize === void 0 ? 'm' : _param_hintSize, hintTargetIcon = _param.hintTargetIcon, _param_hintTargetPlacement = _param.hintTargetPlacement, hintTargetPlacement = _param_hintTargetPlacement === void 0 ? 'outer' : _param_hintTargetPlacement, _param_hintPlacement = _param.hintPlacement, hintPlacement = _param_hintPlacement === void 0 ? 'auto' : _param_hintPlacement, hintHasArrow = _param.hintHasArrow, _param_hintOffset = _param.hintOffset, hintOffset = _param_hintOffset === void 0 ? HINT_DEFAULT_OFFSET : _param_hintOffset, hintWidth = _param.hintWidth, hintContentLeft = _param.hintContentLeft, // variations
-        view = _param.view, size = _param.size, _param_readOnly = _param.readOnly, readOnly = _param_readOnly === void 0 ? false : _param_readOnly, _param_disabled = _param.disabled, disabled = _param_disabled === void 0 ? false : _param_disabled, _param_required = _param.required, required = _param_required === void 0 ? false : _param_required, _param_clear = _param.clear, clear = _param_clear === void 0 ? false : _param_clear, optional = _param.optional, hasDivider = _param.hasDivider, // controlled
+        view = _param.view, size = _param.size, _param_readOnly = _param.readOnly, readOnly = _param_readOnly === void 0 ? false : _param_readOnly, _param_disabled = _param.disabled, disabled = _param_disabled === void 0 ? false : _param_disabled, _param_required = _param.required, required = _param_required === void 0 ? false : _param_required, _param_clear = _param.clear, clear = _param_clear === void 0 ? false : _param_clear, optional = _param.optional, _param_optionalText = _param.optionalText, optionalText = _param_optionalText === void 0 ? 'optional' : _param_optionalText, hasDivider = _param.hasDivider, // controlled
         outerValue = _param.value, values = _param.chips, _param_chipType = _param.chipType, chipType = _param_chipType === void 0 ? 'default' : _param_chipType, // @ts-ignore
         _chips = _param._chips, // @ts-ignore
         _chipClickArea = _param._chipClickArea, // @ts-ignore
@@ -177,6 +176,7 @@ export var textFieldRoot = function(Root) {
             "required",
             "clear",
             "optional",
+            "optionalText",
             "hasDivider",
             "value",
             "chips",