@itcase/ui 1.0.86 → 1.0.88

package/dist/components/Cell.js

@@ -44,7 +44,7 @@ var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 function Cell(props) {
   const {
     className,
-    isShowTitleIcon,
+    showTitleIcon,
     titleIconFill,
     titleIconFillSize,
     titleIconIconFill,
@@ -53,7 +53,7 @@ function Cell(props) {
     titleIconSrc,
     titleIconShape,
     titleIcon,
-    isShowValueIcon,
+    showValueIcon,
     valueIconFill,
     valueIconFillSize,
     valueIconIconFill,
@@ -78,7 +78,7 @@ function Cell(props) {
     titleTextSize,
     titleTextColor,
     titleTextWeight,
-    isShowTitleLabel,
+    showTitleLabel,
     titleLabelAppearance,
     titleLabel,
     titleLabelTextSize,
@@ -90,9 +90,11 @@ function Cell(props) {
     valueLabelTextSize,
     valueLabelShape,
     valueLabelSize,
-    isZeroPadding,
-    isZeroGap,
-    isReverse,
+    titleTextWrap,
+    valueTextWrap,
+    zeroPadding,
+    zeroGap,
+    reverse,
     onClick,
     onMouseEnter
   } = props;
@@ -145,7 +147,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, isZeroPadding && 'cell_reset-padding', isZeroGap && 'cell_reset-gap', isReverse && 'cell_reverse'),
+    className: clsx__default.default(className, 'cell', size && `cell_size_${size}`, set && `cell_set_${set}`, bgFillClass, bgFillHoverClass, isActive && bgFillActiveClass, isDisabled && bgFillDisabledClass, bgShapeClass, widthClass, zeroPadding && 'cell_reset-padding', zeroGap && 'cell_reset-gap', reverse && 'cell_reverse'),
     onClick: onClick,
     onMouseEnter: onMouseEnter
   }, before && /*#__PURE__*/React__default.default.createElement("div", {
@@ -159,8 +161,9 @@ function Cell(props) {
     size: titleTextSize,
     tag: titleTag,
     textColor: titleTextColor,
-    textWeight: titleTextWeight
-  }, title), isShowTitleIcon && /*#__PURE__*/React__default.default.createElement(index$1.Icon, {
+    textWeight: titleTextWeight,
+    textWrap: titleTextWrap
+  }, title), showTitleIcon && /*#__PURE__*/React__default.default.createElement(index$1.Icon, {
     className: "cell__icon",
     fill: titleIconFill,
     fillSize: titleIconFillSize,
@@ -170,7 +173,7 @@ function Cell(props) {
     imageSrc: titleIconSrc,
     shape: titleIconShape,
     SvgImage: titleIcon
-  }), isShowTitleLabel && /*#__PURE__*/React__default.default.createElement(index$2.Label, {
+  }), showTitleLabel && /*#__PURE__*/React__default.default.createElement(index$2.Label, {
     appearance: titleLabelAppearance,
     label: titleLabel,
     labelTextSize: titleLabelTextSize,
@@ -183,8 +186,9 @@ function Cell(props) {
     size: valueTextSize,
     tag: valueTag,
     textColor: valueTextColor,
-    textWeight: valueTextWeight
-  }, value), isShowValueIcon && /*#__PURE__*/React__default.default.createElement(index$1.Icon, {
+    textWeight: valueTextWeight,
+    textWrap: valueTextWrap
+  }, value), showValueIcon && /*#__PURE__*/React__default.default.createElement(index$1.Icon, {
     className: "cell__icon",
     fill: valueIconFill,
     fillSize: valueIconFillSize,

package/dist/components/Choice.js

@@ -46,6 +46,7 @@ const Choice = /*#__PURE__*/React__default.default.forwardRef(function Choice(pr
     type,
     options,
     active,
+    isDisabled,
     set,
     setActiveSegment,
     size,
@@ -55,8 +56,12 @@ const Choice = /*#__PURE__*/React__default.default.forwardRef(function Choice(pr
     before,
     after,
     icon,
+    iconFillDisabled,
+    iconStrokeDisabled,
     activeIcon,
     iconSize,
+    labelTextActiveColorDisabled,
+    labelTextColorDisabled,
     activeIconItemFill,
     iconItemFill,
     iconStroke,
@@ -88,6 +93,10 @@ const Choice = /*#__PURE__*/React__default.default.forwardRef(function Choice(pr
     prefix: 'fill_',
     propsKey: 'fill'
   });
+  const fillDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_disabled_',
+    propsKey: 'fillDisabled'
+  });
   const fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'fill_hover_',
     propsKey: 'fillHover'
@@ -96,13 +105,17 @@ const Choice = /*#__PURE__*/React__default.default.forwardRef(function Choice(pr
     prefix: 'fill_active_',
     propsKey: 'fillActive'
   });
+  const fillActiveDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_active_disabled_',
+    propsKey: 'fillActiveDisabled'
+  });
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(className, 'choice', shapeClass, fillClass, borderColorClass, borderWidthClass, borderTypeClass, set && `choice_set_${set}`, size && `choice_size_${size}`, type && `choice_type_${type}`),
+    className: clsx__default.default(className, 'choice', shapeClass, !isDisabled ? fillClass : fillDisabledClass, borderColorClass, borderWidthClass, borderTypeClass, set && `choice_set_${set}`, size && `choice_size_${size}`, type && `choice_type_${type}`),
     ref: controlRef
   }, /*#__PURE__*/React__default.default.createElement("div", {
     className: "choice__wrapper"
   }, options?.map((item, i) => /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default('choice__item', fillHoverClass, item.value === active.value && fillActiveClass, item.value === active.value && 'choice__item_active'),
+    className: clsx__default.default('choice__item', !isDisabled && fillHoverClass, item.value !== active.value && isDisabled && 'choice__item_state_disabled', item.value === active.value ? !isDisabled ? fillActiveClass : fillActiveDisabledClass : !isDisabled ? fillClass : fillDisabledClass, item.value === active.value && isDisabled && 'choice__item_active_state_disabled', item.value === active.value && 'choice__item_active'),
     key: item.value,
     ref: optionsRefs.get(item.value)
   }, /*#__PURE__*/React__default.default.createElement("input", {
@@ -110,20 +123,23 @@ const Choice = /*#__PURE__*/React__default.default.forwardRef(function Choice(pr
     className: "choice__item-radio",
     id: `${name}-${item.value}`,
     name: name,
+    disabled: isDisabled,
     type: isMultiple ? 'checkbox' : 'radio',
     value: item.value,
     onChange: event => onChange(event, item)
   }), /*#__PURE__*/React__default.default.createElement("label", {
-    className: clsx__default.default('choice__item-label'),
+    className: clsx__default.default('choice__item-label', isDisabled && 'choice__item-label_state_disabled'),
     htmlFor: `${name}-${item.value}`
   }, before, item.label && /*#__PURE__*/React__default.default.createElement(index.Text, {
     size: labelTextSize,
-    textColor: item.value === active.value ? labelTextActiveColor : labelTextColor
+    textColor: item.value === active.value ? !isDisabled ? labelTextActiveColor : labelTextActiveColorDisabled : !isDisabled ? labelTextColor : labelTextColorDisabled
   }, item.label), (icon || activeIcon) && /*#__PURE__*/React__default.default.createElement(index$1.Icon, {
     className: "choice__item-icon",
     iconFill: item.value === active.value ? activeIconItemFill : iconItemFill,
+    iconFillDisabled: isDisabled && iconFillDisabled,
     iconSize: iconSize,
-    stroke: iconStroke,
+    iconStroke: iconStroke,
+    iconStrokeDisabled: isDisabled && iconStrokeDisabled,
     SvgImage: item.value === active.value ? activeIcon : icon
   }), after)))));
 });

package/dist/components/Dropdown.js

@@ -112,11 +112,10 @@ function Dropdown(props) {
     className: clsx__default.default(className, 'dropdown', set && `dropdown_set_${set}`, shapeClass, elevationClass, isOpen ? 'dropdown_state_open' : 'dropdown_state_close', animationState.className),
     ref: dropdownRef,
     style: styles
-  }, children &&
-  
-  // Add "onAnimationEnd" only for wrapper for ignore dropdown button
-  React__default.default.createElement("div", {
-    className: clsx__default.default('dropdown__wrapper', fillClass, fillHoverClass),
+  }, children && /*#__PURE__*/React__default.default.createElement("div", {
+    className: clsx__default.default('dropdown__wrapper', fillClass, fillHoverClass)
+    // Add "onAnimationEnd" only for wrapper for ignore dropdown button
+    ,
     onAnimationEnd: onAnimationEnd
   }, children));
 }

package/dist/components/Icon.js

@@ -82,6 +82,10 @@ const Icon = /*#__PURE__*/React__default.default.forwardRef(function Icon(props,
     prefix: 'fill_hover_',
     propsKey: 'fillHover'
   });
+  const fillDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_disabled_',
+    propsKey: 'fillDisabled'
+  });
   const fillSizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'icon_fill_size_',
     propsKey: 'fillSize'
@@ -94,6 +98,10 @@ const Icon = /*#__PURE__*/React__default.default.forwardRef(function Icon(props,
     prefix: 'icon_fill_hover_',
     propsKey: 'iconFillHover'
   });
+  const iconFillDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'icon_fill_disabled_',
+    propsKey: 'iconFillDisabled'
+  });
   const iconStrokeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'icon_stroke_',
     propsKey: 'iconStroke'
@@ -102,6 +110,10 @@ const Icon = /*#__PURE__*/React__default.default.forwardRef(function Icon(props,
     prefix: 'icon_stroke_hover_',
     propsKey: 'iconStrokeHover'
   });
+  const iconStrokeDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'icon_stroke_disabled_',
+    propsKey: 'iconStrokeDisabled'
+  });
   const iconSizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'icon_size_',
     propsKey: 'iconSize'
@@ -147,7 +159,7 @@ const Icon = /*#__PURE__*/React__default.default.forwardRef(function Icon(props,
     return null;
   }, [SvgImage, imageSrc]);
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(className, 'icon', fillClass, fillHoverClass, fillSizeClass, iconFillClass, iconFillHoverClass, shapeClass, iconStrokeClass, iconStrokeHoverClass, borderColorClass, borderColorHoverClass, borderWidthClass, borderTypeClass, cursorClass, Badge && 'icon_type_with-badge', (link || href || onClick) && 'cursor_type_pointer'),
+    className: clsx__default.default(className, 'icon', fillClass, fillHoverClass, fillSizeClass, fillDisabledClass, iconFillClass, iconFillHoverClass, iconFillDisabledClass, shapeClass, iconStrokeClass, iconStrokeHoverClass, iconStrokeDisabledClass, borderColorClass, borderColorHoverClass, borderWidthClass, borderTypeClass, cursorClass, Badge && 'icon_type_with-badge', (link || href || onClick) && 'cursor_type_pointer'),
     "data-tour": dataTour,
     id: id,
     ref: ref,

package/dist/components/Input.js

@@ -30,7 +30,7 @@ const Input = /*#__PURE__*/React__default.default.forwardRef(function Input(prop
     type,
     className,
     placeholder,
-    disabled,
+    isDisabled,
     value,
     onBlur,
     onChange,
@@ -41,6 +41,10 @@ const Input = /*#__PURE__*/React__default.default.forwardRef(function Input(prop
     prefix: 'fill_',
     propsKey: 'fill'
   });
+  const fillDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_disabled_',
+    propsKey: 'fillDisabled'
+  });
   const sizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'input_size_',
     propsKey: 'size'
@@ -57,6 +61,10 @@ const Input = /*#__PURE__*/React__default.default.forwardRef(function Input(prop
     prefix: 'text-color_',
     propsKey: 'textColor'
   });
+  const textColorDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'text-color_disabled_',
+    propsKey: 'textColor'
+  });
   const caretClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'caret-color_',
     propsKey: 'caret'
@@ -65,6 +73,10 @@ const Input = /*#__PURE__*/React__default.default.forwardRef(function Input(prop
     prefix: 'placeholder-text-color_',
     propsKey: 'placeholderTextColor'
   });
+  const placeholderTextColorDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'placeholder-text-color_disabled_',
+    propsKey: 'placeholderTextColorDisabled'
+  });
   const weightClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'text-weight_',
     propsKey: 'textWeight'
@@ -73,21 +85,36 @@ const Input = /*#__PURE__*/React__default.default.forwardRef(function Input(prop
     prefix: 'border-width_',
     propsKey: 'borderWidth'
   });
+  const borderWidthDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-width_disabled_',
+    propsKey: 'borderWidthDisabled'
+  });
   const borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'border-color_',
     propsKey: 'borderColor'
   });
+  const borderColorDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-color_disabled_',
+    propsKey: 'borderColorDisabled'
+  });
   const widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'width_',
     propsKey: 'width'
   });
+
+  // const disabledClasses = {
+  //   'borderColorClass': 'borderColorDisabledClass',
+  //   'placeholderTextColorClass': 'placeholderTextColorDisabledClass',
+  //   'textColorClass': 'textColorDisabledClass'
+  // }
+
   return /*#__PURE__*/React__default.default.createElement("input", {
-    className: clsx__default.default(className, 'input', type === 'number' && 'input_type_number', (textSizeClass || textColorClass || weightClass) && 'text', caretClass, fillClass, shapeClass, textSizeClass, weightClass, widthClass, borderWidthClass, sizeClass, borderColorClass || inputConfig.state[state]?.borderColor && `border-color_${inputConfig.state[state].borderColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), placeholderTextColorClass || inputConfig.state[state]?.placeholderTextColor && `placeholder-text-color_${inputConfig.state[state].placeholderTextColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), textColorClass || inputConfig.state[state]?.textColor && `text-color_${inputConfig.state[state].textColor}`.replace(/([A-Z])/g, '-$1').toLowerCase()),
+    className: clsx__default.default(className, 'input', type === 'number' && 'input_type_number', (textSizeClass || textColorClass || weightClass) && 'text', caretClass, !isDisabled ? fillClass : fillDisabledClass, shapeClass, textSizeClass, weightClass, widthClass, !isDisabled ? borderWidthClass : borderWidthDisabledClass, sizeClass, !isDisabled ? borderColorClass || inputConfig.state[state]?.borderColor && `border-color_${inputConfig.state[state].borderColor}`.replace(/([A-Z])/g, '-$1').toLowerCase() : borderColorDisabledClass || inputConfig.state[state]?.borderColor && `border-color_disabled_${inputConfig.state[state].borderColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), !isDisabled ? placeholderTextColorClass || inputConfig.state[state]?.placeholderTextColor && `placeholder-text-color_${inputConfig.state[state].placeholderTextColor}`.replace(/([A-Z])/g, '-$1').toLowerCase() : placeholderTextColorDisabledClass || inputConfig.state[state]?.placeholderTextColor && `placeholder-text-color_${inputConfig.state[state].placeholderTextColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), !isDisabled ? textColorClass || inputConfig.state[state]?.textColor && `text-color_${inputConfig.state[state].textColor}`.replace(/([A-Z])/g, '-$1').toLowerCase() : textColorDisabledClass || inputConfig.state[state]?.textColor && `text-color_${inputConfig.state[state].textColor}`.replace(/([A-Z])/g, '-$1').toLowerCase()),
     type: type,
     id: id,
     index: index,
     ref: ref,
-    disabled: disabled,
+    disabled: isDisabled,
     placeholder: placeholder,
     value: value,
     onBlur: onBlur,
@@ -102,7 +129,7 @@ Input.propTypes = {
   placeholder: PropTypes__default.default.string,
   value: PropTypes__default.default.string,
   checked: PropTypes__default.default.bool,
-  disabled: PropTypes__default.default.bool,
+  isDisabled: PropTypes__default.default.bool,
   onBlur: PropTypes__default.default.func,
   onChange: PropTypes__default.default.func,
   onKeyDown: PropTypes__default.default.func,
@@ -170,7 +197,7 @@ Input.__docgenInfo = {
       },
       "required": false
     },
-    "disabled": {
+    "isDisabled": {
       "description": "",
       "type": {
         "name": "bool"

package/dist/css/components/Choice/Choice.css

@@ -1,36 +1,3 @@
-.choice {
-  position: relative;
-  display: flex;
-  align-items: center;
-  &__wrapper {
-    position: relative;
-    display: flex;
-  }
-}
-.choice {
-  &_shape {
-    &_rounded {
-      border-radius: var(--choice-shape-rounded, 8px);
-      overflow: hidden;
-    }
-    &_circular {
-      border-radius: 50%;
-    }
-  }
-}
-.choice {
-  &_size {
-    @each $size in xs, s, m, l, xl, xxl, tiny, compact, normal, large {
-      &_$(size) {
-        ^^&__item {
-          &-label {
-            padding: var(--choice-item-size-$(size)-padding, 9px 16px);
-          }
-        }
-      }
-    }
-  }
-}
 .choice__item {
   min-width: 30px;
   position: relative;
@@ -41,8 +8,20 @@
   &:not(:last-child) {
     border-right: 1px solid var(--choice-border-color);
   }
+  &_state_disabled {
+    background: var(--choice-item-state-disabled-background, #ECECEC);
+    &:hover {
+      background: var(--choice-item-state-disabled-background, #ECECEC);
+    }
+  }
   &_active {
     background: var(--choice-item-background-active);
+    &_state_disabled {
+      background: var(--choice-item-active-state-disabled-background, #ccc);
+      &:hover {
+        background: var(--choice-item-active-state-disabled-background, #ccc);
+      }
+    }
   }
   & input {
     width: 100%;
@@ -68,8 +47,48 @@
     padding: var(--choice-item-icon-padding);
   }
 }
+
+.choice {
+  &_shape {
+    &_rounded {
+      border-radius: var(--choice-shape-rounded, 8px);
+      overflow: hidden;
+    }
+    &_circular {
+      border-radius: 50%;
+    }
+  }
+}
+
+.choice {
+  &_size {
+    @each $size in xs, s, m, l, xl, xxl, tiny, compact, normal, large {
+      &_$(size) {
+        ^^&__item {
+          &-label {
+            padding: var(--choice-item-size-$(size)-padding, 9px 16px);
+          }
+        }
+      }
+    }
+  }
+}
+
+.choice {
+  position: relative;
+  display: flex;
+  align-items: center;
+  &__wrapper {
+    position: relative;
+    display: flex;
+  }
+}
+
 :root {
+
   --choice-item-background-hover: var(--color-surface-secondary);
+
   --choice-item-background-active: var(--color-surface-active);
+
   --choice-border-color: var(--color-surface-border-tertiary);
 }

package/dist/css/components/Choice/css/__item/choice__item.css

@@ -8,8 +8,20 @@
   &:not(:last-child) {
     border-right: 1px solid var(--choice-border-color);
   }
+  &_state_disabled {
+    background: var(--choice-item-state-disabled-background, #ECECEC);
+    &:hover {
+      background: var(--choice-item-state-disabled-background, #ECECEC);
+    }
+  }
   &_active {
     background: var(--choice-item-background-active);
+    &_state_disabled {
+      background: var(--choice-item-active-state-disabled-background, #ccc);
+      &:hover {
+        background: var(--choice-item-active-state-disabled-background, #ccc);
+      }
+    }
   }
   & input {
     width: 100%;

package/dist/css/components/Input/Input.css

@@ -1,32 +1,40 @@
 .input {
-  border: none;
-  appearance: none;
+  min-width: unset;
   padding: 0;
   margin: 0;
-  min-width: unset;
+  border: none;
+  position: relative;
   box-shadow: none;
+  appearance: none;
   outline: 0;
-  position: relative;
   caret-color: var(--input-caret-color);
+  &:disabled {
+    background: var(--input-state-disabled-background, #ECECEC);
+    border: solid 1px var(--input-state-disabled-border, #747474);
+    &:hover {
+      background: var(--input-state-disabled-background, #ECECEC);
+      border: solid 1px var(--input-state-disabled-border, #747474);
+    }
+  }
   &:focus {
     outline: none;
   }
   &:hover {
-    border: solid 1px var(--input-state-hover-border);
     background: var(--input-state-hover-background);
+    border: solid 1px var(--input-state-hover-border);
   }
   &&_state {
     &_success {
-      border: solid 1px var(--input-state-success-border);
       background: var(--input-state-success-background);
+      border: solid 1px var(--input-state-success-border);
     }
     &_error {
-      border: solid 1px var(--input-state-error-border);
       background: var(--input-state-error-background);
+      border: solid 1px var(--input-state-error-border);
     }
     &_focus {
-      border: solid 1px var(--input-state-focus-border);
       background: var(--input-state-focus-background);
+      border: solid 1px var(--input-state-focus-border);
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui",
-  "version": "1.0.86",
+  "version": "1.0.88",
   "description": "UI components (Modal, Loader, Popup, etc)",
   "keywords": [
     "Modal",