@itcase/ui 1.0.82 → 1.0.84

package/dist/components/Accordion.js

@@ -7,7 +7,8 @@ var castArray = require('lodash/castArray');
 var fill = require('../constants/componentProps/fill.js');
 var direction = require('../constants/componentProps/direction.js');
 var shape = require('../constants/componentProps/shape.js');
-var index = require('./Icon.js');
+var index$1 = require('./Icon.js');
+var index = require('./Text.js');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 var useStyles = require('../hooks/useStyles.js');
 require('react-inlinesvg');
@@ -30,6 +31,8 @@ require('../constants/componentProps/borderColor.js');
 require('../constants/componentProps/borderType.js');
 require('../constants/componentProps/iconSize.js');
 require('../constants/componentProps/strokeColor.js');
+require('../constants/componentProps/textColorActive.js');
+require('../constants/componentProps/textColorHover.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -70,6 +73,12 @@ function AccordionItem(props) {
     beforeContent,
     afterContent,
     className,
+    titleTextSize,
+    titleTextColor,
+    titleTextWeight,
+    contentTextSize,
+    contentTextColor,
+    contentTextWeight,
     isExpanded,
     onClick
   } = props;
@@ -97,19 +106,26 @@ function AccordionItem(props) {
   return /*#__PURE__*/React__default.default.createElement("div", {
     className: clsx__default.default('accordion-item', className, fillClass, shapeClass, isExpanded && 'accordion-item_state_open'),
     style: styles
-  }, /*#__PURE__*/React__default.default.createElement("div", {
+  }, /*#__PURE__*/React__default.default.createElement(index.Text, {
     className: clsx__default.default('accordion-item__title', onClickTitle && 'cursor_type_pointer'),
+    size: titleTextSize,
+    textColor: titleTextColor,
+    textWeight: titleTextWeight,
     onClick: onClickTitle
   }, title), /*#__PURE__*/React__default.default.createElement("div", {
     className: "accordion-item__icon",
     onClick: onClickTitle
-  }, icon || /*#__PURE__*/React__default.default.createElement(index.Icon, {
+  }, icon || /*#__PURE__*/React__default.default.createElement(index$1.Icon, {
     iconFill: iconFill,
     size: "16",
     SvgImage: icon16.chevron_down
   })), beforeContent && beforeContent, isExpanded && /*#__PURE__*/React__default.default.createElement("div", {
     className: "accordion-item__content"
-  }, children || content), afterContent && afterContent);
+  }, children || content && /*#__PURE__*/React__default.default.createElement(index.Text, {
+    size: contentTextSize,
+    textColor: contentTextColor,
+    textWeight: contentTextWeight
+  }, content)), afterContent && afterContent);
 }
 
 /* Component default props */
@@ -144,7 +160,7 @@ AccordionItem.propTypes = {
   shapeDesktop: PropTypes__default.default.oneOf(shape.default),
   shapeMobile: PropTypes__default.default.oneOf(shape.default),
   shapeTablet: PropTypes__default.default.oneOf(shape.default),
-  title: PropTypes__default.default.any,
+  title: PropTypes__default.default.string,
   onClick: PropTypes__default.default.func
 };
 
@@ -356,7 +372,7 @@ AccordionItem.__docgenInfo = {
     "title": {
       "description": "",
       "type": {
-        "name": "any"
+        "name": "string"
       },
       "required": false
     },

package/dist/components/Badge.js

@@ -80,11 +80,11 @@ function Badge(props) {
     styles: badgeStyles
   } = useStyles.useStyles(props);
   return /*#__PURE__*/React__default.default.createElement("div", {
-    style: badgeStyles,
-    className: clsx__default.default(className, 'badge', !value && 'badge_type_status', borderColorClass, borderColorHoverClass, borderWidthClass, borderTypeClass, fillClass || badgeConfig.appearance[appearance] && `fill_${badgeConfig.appearance[appearance].fillClass}`?.replace(/([A-Z])/g, '-$1').toLowerCase(), positionClass, sizeClass, shapeClass)
+    className: clsx__default.default(className, 'badge', !value && 'badge_type_status', borderColorClass, borderColorHoverClass, borderWidthClass, borderTypeClass, fillClass || badgeConfig.appearance[appearance] && `fill_${badgeConfig.appearance[appearance].fillClass}`?.replace(/([A-Z])/g, '-$1').toLowerCase(), positionClass, sizeClass, shapeClass),
+    style: badgeStyles
   }, children || value && /*#__PURE__*/React__default.default.createElement(index.Text, {
     size: textSize,
-    textColor: textColor || badgeConfig.appearance[appearance] && badgeConfig.appearance[appearance].textColor?.replace(/([A-Z])/g, '-$1').toLowerCase()
+    textColor: textColor || badgeConfig.appearance[appearance]?.textColor
   }, value));
 }
 Badge.propTypes = {

package/dist/components/Button.js

@@ -153,15 +153,15 @@ const Button = /*#__PURE__*/React__default.default.forwardRef(function Button(pr
     set: loaderSet
   }), before, (iconBefore || iconBeforeSrc) && /*#__PURE__*/React__default.default.createElement(index$2.Icon, {
     className: "button__icon_before",
-    iconFill: iconBeforeFill || buttonConfig.appearance[appearance] && buttonConfig.appearance[appearance].iconBeforeFill?.replace(/([A-Z])/g, '-$1').toLowerCase(),
-    iconStroke: iconBeforeStroke || buttonConfig.appearance[appearance] && buttonConfig.appearance[appearance].iconBeforeStroke?.replace(/([A-Z])/g, '-$1').toLowerCase(),
+    iconFill: iconBeforeFill || buttonConfig.appearance[appearance]?.iconBeforeFill,
+    iconStroke: iconBeforeStroke || buttonConfig.appearance[appearance]?.iconBeforeStroke,
     imageSrc: iconBeforeSrc,
     size: iconBeforeSize,
     SvgImage: iconBefore
   }), (icon || iconSrc) && /*#__PURE__*/React__default.default.createElement(index$2.Icon, {
     className: "button__icon",
-    iconFill: iconFill || buttonConfig.appearance[appearance] && buttonConfig.appearance[appearance].iconFill?.replace(/([A-Z])/g, '-$1').toLowerCase(),
-    iconStroke: iconStroke || buttonConfig.appearance[appearance] && buttonConfig.appearance[appearance].iconStroke?.replace(/([A-Z])/g, '-$1').toLowerCase(),
+    iconFill: iconFill || buttonConfig.appearance[appearance]?.iconFill,
+    iconStroke: iconStroke || buttonConfig.appearance[appearance]?.iconStroke,
     imageSrc: iconSrc,
     size: iconSize,
     SvgImage: icon
@@ -169,13 +169,13 @@ const Button = /*#__PURE__*/React__default.default.forwardRef(function Button(pr
     className: "button__label",
     size: labelTextSize,
     style: labelStyles,
-    textColor: labelTextColor || buttonConfig.appearance[appearance] && buttonConfig.appearance[appearance].labelTextColor?.replace(/([A-Z])/g, '-$1').toLowerCase(),
-    textColorHover: labelTextColorHover || buttonConfig.appearance[appearance] && buttonConfig.appearance[appearance].labelTextColorHover?.replace(/([A-Z])/g, '-$1').toLowerCase(),
+    textColor: labelTextColor || buttonConfig.appearance[appearance]?.labelTextColor,
+    textColorHover: labelTextColorHover || buttonConfig.appearance[appearance]?.labelTextColorHover,
     textWrap: labelTextWrap
   }, children || label), (iconAfter || iconAfterSrc) && /*#__PURE__*/React__default.default.createElement(index$2.Icon, {
     className: "button__icon_after",
-    iconFill: iconAfterFill || buttonConfig.appearance[appearance] && buttonConfig.appearance[appearance].iconAfterFill?.replace(/([A-Z])/g, '-$1').toLowerCase(),
-    iconStroke: iconAfterStroke || buttonConfig.appearance[appearance] && buttonConfig.appearance[appearance].iconAfterStroke?.replace(/([A-Z])/g, '-$1').toLowerCase(),
+    iconFill: iconAfterFill || buttonConfig.appearance[appearance]?.iconAfterFill,
+    iconStroke: iconAfterStroke || buttonConfig.appearance[appearance]?.iconAfterStroke,
     imageSrc: iconAfterSrc,
     size: iconAfterSize,
     SvgImage: iconAfter
@@ -200,7 +200,7 @@ Button.propTypes = {
   iconFill: PropTypes__default.default.string,
   iconSize: PropTypes__default.default.string,
   iconStroke: PropTypes__default.default.string,
-  isDisabled: PropTypes__default.default.string,
+  isDisabled: PropTypes__default.default.bool,
   label: PropTypes__default.default.string,
   labelTextColor: PropTypes__default.default.string,
   labelTextColorHover: PropTypes__default.default.string,
@@ -420,7 +420,7 @@ Button.__docgenInfo = {
     "isDisabled": {
       "description": "",
       "type": {
-        "name": "string"
+        "name": "bool"
       },
       "required": false
     },

package/dist/components/Card.js

@@ -62,8 +62,8 @@ function Card(props) {
     propsKey: 'width'
   });
   return /*#__PURE__*/React__default.default.createElement("div", {
-    onClick: onClick,
-    className: clsx__default.default(className, 'card', shapeClass, size && `card_size_${size}`, type && `card_type_${type}`, widthClass)
+    className: clsx__default.default(className, 'card', shapeClass, size && `card_size_${size}`, type && `card_type_${type}`, widthClass),
+    onClick: onClick
   }, /*#__PURE__*/React__default.default.createElement("div", {
     className: "card__wrapper"
   }, image, src && /*#__PURE__*/React__default.default.createElement(index.Image, {

package/dist/components/Cell.js

@@ -185,7 +185,7 @@ Cell.propTypes = {
   title: PropTypes__default.default.string,
   titleTextColor: PropTypes__default.default.string,
   titleTextSize: PropTypes__default.default.oneOf(size.default),
-  value: PropTypes__default.default.string,
+  value: PropTypes__default.default.oneOfType([PropTypes__default.default.element, PropTypes__default.default.string]),
   valueTextColor: PropTypes__default.default.string,
   valueTextSize: PropTypes__default.default.oneOf(size.default),
   onClick: PropTypes__default.default.func,
@@ -349,7 +349,12 @@ Cell.__docgenInfo = {
     "value": {
       "description": "",
       "type": {
-        "name": "string"
+        "name": "union",
+        "value": [{
+          "name": "element"
+        }, {
+          "name": "string"
+        }]
       },
       "required": false
     },

package/dist/components/Choice.js

@@ -28,7 +28,7 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 
-const Choice = /*#__PURE__*/React__default.default.forwardRef((props, ref) => {
+const Choice = /*#__PURE__*/React__default.default.forwardRef(function Choice(props, ref) {
   const {
     name,
     className,
@@ -40,10 +40,17 @@ const Choice = /*#__PURE__*/React__default.default.forwardRef((props, ref) => {
     size,
     labelTextColor,
     labelTextActiveColor,
-    labelTextSize
+    labelTextSize,
+    before,
+    after,
+    isMultiple
   } = props;
   const controlRef = React.useRef(null);
   const optionsRefs = React.useMemo(() => new Map(options.map(item => [item.value, /*#__PURE__*/React.createRef()])), [options]);
+  const onChange = React.useCallback((event, item) => {
+    const isChecked = isMultiple ? event.target.checked : true;
+    setActiveSegment && setActiveSegment(item, isChecked);
+  }, [isMultiple, setActiveSegment]);
   const borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'border-color_',
     propsKey: 'borderColor'
@@ -84,31 +91,44 @@ const Choice = /*#__PURE__*/React__default.default.forwardRef((props, ref) => {
   }, /*#__PURE__*/React__default.default.createElement("input", {
     checked: item.value === active.value,
     className: "choice__item-radio",
-    id: item.label,
+    id: `${name}-${item.value}`,
     name: name,
-    type: "radio",
+    type: isMultiple ? 'checkbox' : 'radio',
     value: item.value,
-    onChange: () => setActiveSegment && setActiveSegment(item)
+    onChange: event => onChange(event, item)
   }), /*#__PURE__*/React__default.default.createElement("label", {
     className: clsx__default.default('choice__item-label'),
-    htmlFor: item.label
-  }, /*#__PURE__*/React__default.default.createElement(index.Text, {
+    htmlFor: `${name}-${item.value}`
+  }, before, /*#__PURE__*/React__default.default.createElement(index.Text, {
     size: labelTextSize,
     textColor: item.value === active.value ? labelTextActiveColor : labelTextColor
-  }, item.label))))));
+  }, item.label), after)))));
 });
-Choice.displayName = 'Choice';
 Choice.propTypes = {
-  active: PropTypes__default.default.object,
+  active: PropTypes__default.default.shape({
+    value: PropTypes__default.default.string,
+    label: PropTypes__default.default.string
+  }),
+  after: PropTypes__default.default.any,
+  before: PropTypes__default.default.any,
   className: PropTypes__default.default.string,
-  fill: PropTypes__default.default.string,
+  isMultiple: PropTypes__default.default.bool,
+  labelTextActiveColor: PropTypes__default.default.string,
+  labelTextColor: PropTypes__default.default.string,
+  labelTextSize: PropTypes__default.default.string,
   name: PropTypes__default.default.string,
-  options: PropTypes__default.default.array,
+  options: PropTypes__default.default.arrayOf(PropTypes__default.default.shape({
+    value: PropTypes__default.default.string,
+    label: PropTypes__default.default.string
+  })),
+  set: PropTypes__default.default.string,
   setActiveSegment: PropTypes__default.default.func,
+  size: PropTypes__default.default.string,
   type: PropTypes__default.default.string
 };
 Choice.defaultProps = {
-  active: {}
+  active: {},
+  options: []
 };
 Choice.__docgenInfo = {
   "description": "",
@@ -122,7 +142,55 @@ Choice.__docgenInfo = {
       },
       "description": "",
       "type": {
-        "name": "object"
+        "name": "shape",
+        "value": {
+          "value": {
+            "name": "string",
+            "required": false
+          },
+          "label": {
+            "name": "string",
+            "required": false
+          }
+        }
+      },
+      "required": false
+    },
+    "options": {
+      "defaultValue": {
+        "value": "[]",
+        "computed": false
+      },
+      "description": "",
+      "type": {
+        "name": "arrayOf",
+        "value": {
+          "name": "shape",
+          "value": {
+            "value": {
+              "name": "string",
+              "required": false
+            },
+            "label": {
+              "name": "string",
+              "required": false
+            }
+          }
+        }
+      },
+      "required": false
+    },
+    "after": {
+      "description": "",
+      "type": {
+        "name": "any"
+      },
+      "required": false
+    },
+    "before": {
+      "description": "",
+      "type": {
+        "name": "any"
       },
       "required": false
     },
@@ -133,7 +201,28 @@ Choice.__docgenInfo = {
       },
       "required": false
     },
-    "fill": {
+    "isMultiple": {
+      "description": "",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
+    },
+    "labelTextActiveColor": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "labelTextColor": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "labelTextSize": {
       "description": "",
       "type": {
         "name": "string"
@@ -147,10 +236,10 @@ Choice.__docgenInfo = {
       },
       "required": false
     },
-    "options": {
+    "set": {
       "description": "",
       "type": {
-        "name": "array"
+        "name": "string"
       },
       "required": false
     },
@@ -161,6 +250,13 @@ Choice.__docgenInfo = {
       },
       "required": false
     },
+    "size": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
     "type": {
       "description": "",
       "type": {

package/dist/components/Code.js

@@ -56,8 +56,19 @@ var OTPInput = function (_a) {
     };
     var handleInputChange = function (event) {
         var nativeEvent = event.nativeEvent;
-        if (!isInputValueValid(event.target.value)) {
-            // @ts-expect-error - This was added previosly to handle and edge case
+        var value = event.target.value;
+        if (!isInputValueValid(value)) {
+            // Pasting from the native autofill suggestion on a mobile device can pass
+            // the pasted string as one long input to one of the cells. This ensures
+            // that we handle the full input and not just the first character.
+            if (value.length === numInputs) {
+                var hasInvalidInput = value.split('').some(function (cellInput) { return !isInputValueValid(cellInput); });
+                if (!hasInvalidInput) {
+                    handleOTPChange(value.split(''));
+                    focusInput(numInputs - 1);
+                }
+            }
+            // @ts-expect-error - This was added previously to handle and edge case
             // for dealing with keyCode "229 Unidentified" on Android. Check if this is
             // still needed.
             if (nativeEvent.data === null && nativeEvent.inputType === 'deleteContentBackward') {
@@ -164,7 +175,6 @@ var OTPInput = function (_a) {
                 onKeyDown: handleKeyDown,
                 onPaste: handlePaste,
                 autoComplete: 'off',
-                maxLength: 1,
                 'aria-label': "Please enter OTP character ".concat(index + 1),
                 style: Object.assign(!skipDefaultStyles ? { width: '1em', textAlign: 'center' } : {}, isStyleObject(inputStyle) ? inputStyle : {}),
                 className: typeof inputStyle === 'string' ? inputStyle : undefined,