@itcase/ui 1.0.83 → 1.0.85

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

@@ -5,6 +5,7 @@ var PropTypes = require('prop-types');
 var clsx = require('clsx');
 var index$1 = require('./Icon.js');
 var index = require('./Text.js');
+var index$2 = require('./Label.js');
 var size = require('../constants/componentProps/size.js');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 require('react-inlinesvg');
@@ -31,6 +32,7 @@ require('../constants/componentProps/shape.js');
 require('../constants/componentProps/strokeColor.js');
 require('../constants/componentProps/textColorActive.js');
 require('../constants/componentProps/textColorHover.js');
+require('../constants/componentProps/textAlign.js');
 require('lodash/castArray');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -42,18 +44,24 @@ var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 function Cell(props) {
   const {
     className,
-    titleIcon,
-    titleIconSize,
-    titleIconSrc,
-    titleIconBgFill,
+    isShowTitleIcon,
     titleIconFill,
+    titleIconFillSize,
+    titleIconIconFill,
+    titleIconFillHover,
     titleIconStroke,
-    valueIcon,
-    valueIconSize,
-    valueIconSrc,
-    valueIconBgFill,
+    titleIconSrc,
+    titleIconShape,
+    titleIcon,
+    isShowValueIcon,
     valueIconFill,
+    valueIconFillSize,
+    valueIconIconFill,
+    valueIconFillHover,
     valueIconStroke,
+    valueIconSrc,
+    valueIconShape,
+    valueIcon,
     isActive,
     isDisabled,
     set,
@@ -70,6 +78,21 @@ function Cell(props) {
     titleTextSize,
     titleTextColor,
     titleTextWeight,
+    isShowTitleLabel,
+    titleLabelAppearance,
+    titleLabel,
+    titleLabelTextSize,
+    titleLabelShape,
+    titleLabelSize,
+    isShowValueLabel,
+    valueLabelAppearance,
+    valueLabel,
+    valueLabelTextSize,
+    valueLabelShape,
+    valueLabelSize,
+    isZeroPadding,
+    isZeroGap,
+    isReverse,
     onClick,
     onMouseEnter
   } = props;
@@ -122,7 +145,7 @@ function Cell(props) {
     propsKey: 'width'
   });
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(className, 'cell', size && `cell_size_${size}`, set && `cell_set_${set}`, bgFillClass, bgFillHoverClass, isActive && bgFillActiveClass, isDisabled && bgFillDisabledClass, bgShapeClass, widthClass),
+    className: clsx__default.default(className, 'cell', size && `cell_size_${size}`, set && `cell_set_${set}`, bgFillClass, bgFillHoverClass, isActive && bgFillActiveClass, isDisabled && bgFillDisabledClass, bgShapeClass, widthClass, isZeroPadding && 'cell_reset-padding', isZeroGap && 'cell_reset-gap', isReverse && 'cell_reverse'),
     onClick: onClick,
     onMouseEnter: onMouseEnter
   }, before && /*#__PURE__*/React__default.default.createElement("div", {
@@ -137,14 +160,22 @@ function Cell(props) {
     tag: titleTag,
     textColor: titleTextColor,
     textWeight: titleTextWeight
-  }, title), (titleIcon || titleIconSrc) && /*#__PURE__*/React__default.default.createElement(index$1.Icon, {
-    bgFill: titleIconBgFill,
+  }, title), isShowTitleIcon && /*#__PURE__*/React__default.default.createElement(index$1.Icon, {
     className: "cell__icon",
-    iconFill: titleIconFill,
-    iconSize: titleIconSize,
+    fill: titleIconFill,
+    fillSize: titleIconFillSize,
+    iconFill: titleIconIconFill,
+    iconFillHover: titleIconFillHover,
     iconStroke: titleIconStroke,
     imageSrc: titleIconSrc,
+    shape: titleIconShape,
     SvgImage: titleIcon
+  }), isShowTitleLabel && /*#__PURE__*/React__default.default.createElement(index$2.Label, {
+    appearance: titleLabelAppearance,
+    label: titleLabel,
+    labelTextSize: titleLabelTextSize,
+    shape: titleLabelShape,
+    size: titleLabelSize
   })), value && /*#__PURE__*/React__default.default.createElement("div", {
     className: "cell__data"
   }, /*#__PURE__*/React__default.default.createElement(index.Text, {
@@ -153,14 +184,22 @@ function Cell(props) {
     tag: valueTag,
     textColor: valueTextColor,
     textWeight: valueTextWeight
-  }, value), (valueIcon || valueIconSrc) && /*#__PURE__*/React__default.default.createElement(index$1.Icon, {
-    bgFill: valueIconBgFill,
+  }, value), isShowValueIcon && /*#__PURE__*/React__default.default.createElement(index$1.Icon, {
     className: "cell__icon",
-    iconFill: valueIconFill,
-    iconSize: valueIconSize,
+    fill: valueIconFill,
+    fillSize: valueIconFillSize,
+    iconFill: valueIconIconFill,
+    iconFillHover: valueIconFillHover,
     iconStroke: valueIconStroke,
     imageSrc: valueIconSrc,
+    shape: valueIconShape,
     SvgImage: valueIcon
+  }), isShowValueLabel && /*#__PURE__*/React__default.default.createElement(index$2.Label, {
+    appearance: valueLabelAppearance,
+    label: valueLabel,
+    labelTextSize: valueLabelTextSize,
+    shape: valueLabelShape,
+    size: valueLabelSize
   }))), after && /*#__PURE__*/React__default.default.createElement("div", {
     className: "cell__after"
   }, after));
@@ -171,21 +210,17 @@ Cell.propTypes = {
   children: PropTypes__default.default.any,
   className: PropTypes__default.default.string,
   titleIcon: PropTypes__default.default.any,
-  titleIconBgFill: PropTypes__default.default.string,
   titleIconFill: PropTypes__default.default.string,
-  titleIconSize: PropTypes__default.default.string,
   titleIconStroke: PropTypes__default.default.string,
   valueIcon: PropTypes__default.default.any,
-  valueIconBgFill: PropTypes__default.default.string,
   valueIconFill: PropTypes__default.default.string,
-  valueIconSize: PropTypes__default.default.string,
   valueIconStroke: PropTypes__default.default.string,
   isActive: PropTypes__default.default.bool,
   isDisabled: PropTypes__default.default.bool,
   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,
@@ -253,13 +288,6 @@ Cell.__docgenInfo = {
       },
       "required": false
     },
-    "titleIconBgFill": {
-      "description": "",
-      "type": {
-        "name": "string"
-      },
-      "required": false
-    },
     "titleIconFill": {
       "description": "",
       "type": {
@@ -267,13 +295,6 @@ Cell.__docgenInfo = {
       },
       "required": false
     },
-    "titleIconSize": {
-      "description": "",
-      "type": {
-        "name": "string"
-      },
-      "required": false
-    },
     "titleIconStroke": {
       "description": "",
       "type": {
@@ -288,13 +309,6 @@ Cell.__docgenInfo = {
       },
       "required": false
     },
-    "valueIconBgFill": {
-      "description": "",
-      "type": {
-        "name": "string"
-      },
-      "required": false
-    },
     "valueIconFill": {
       "description": "",
       "type": {
@@ -302,13 +316,6 @@ Cell.__docgenInfo = {
       },
       "required": false
     },
-    "valueIconSize": {
-      "description": "",
-      "type": {
-        "name": "string"
-      },
-      "required": false
-    },
     "valueIconStroke": {
       "description": "",
       "type": {
@@ -349,7 +356,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,
@@ -42,10 +42,15 @@ const Choice = /*#__PURE__*/React__default.default.forwardRef((props, ref) => {
     labelTextActiveColor,
     labelTextSize,
     before,
-    after
+    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'
@@ -86,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
+    htmlFor: `${name}-${item.value}`
   }, before, /*#__PURE__*/React__default.default.createElement(index.Text, {
     size: labelTextSize,
     textColor: item.value === active.value ? labelTextActiveColor : labelTextColor
   }, 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": "",
@@ -124,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
     },
@@ -135,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"
@@ -149,10 +236,10 @@ Choice.__docgenInfo = {
       },
       "required": false
     },
-    "options": {
+    "set": {
       "description": "",
       "type": {
-        "name": "array"
+        "name": "string"
       },
       "required": false
     },
@@ -163,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,