@itcase/ui 1.1.1 → 1.1.3

package/dist/components/Button.js

@@ -140,7 +140,7 @@ const Button = /*#__PURE__*/React__default.default.forwardRef(function Button(pr
   } = useStyles.useStyles(props);
   return /*#__PURE__*/React__default.default.createElement(index.LinkWrapper, {
     className: clsx__default.default(className, 'button', type && `button_type_${type}`, borderWidthClass || buttonConfig.appearance[appearance] && `border-width_${buttonConfig.appearance[appearance].borderWidth}`.replace(/([A-Z])/g, '-$1').toLowerCase(), borderColorClass || buttonConfig.appearance[appearance] && `border-color_${buttonConfig.appearance[appearance].borderColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), borderTypeClass || buttonConfig.appearance[appearance] && `border-type_${buttonConfig.appearance[appearance].borderType}`.replace(/([A-Z])/g, '-$1').toLowerCase(), fillClass || buttonConfig.appearance[appearance] && `fill_${buttonConfig.appearance[appearance].fill}`.replace(/([A-Z])/g, '-$1').toLowerCase(), fillHoverClass || buttonConfig.appearance[appearance] && `fill_hover_${buttonConfig.appearance[appearance].fillHover}`.replace(/([A-Z])/g, '-$1').toLowerCase(), shapeClass, sizeClass, widthClass, elevationClass, onClick && 'cursor_type_pointer', isDisabled && 'cursor_type_default', Badge && 'button_type_badge', loading && 'button_state_loading', !label && (iconBefore || iconBeforeSrc || iconAfter || iconAfterSrc || icon || iconSrc) && 'button_type_icon', label && (after || before || icon || iconAfter || iconAfterSrc || iconBefore || iconBeforeSrc || iconSrc) && `button_type_with-icon button_type_with-icon_${size}`),
-    "data-testid": `${dataTestId}Button`,
+    "data-test-id": `${dataTestId}Button`,
     "data-tour": dataTour,
     DefaultComponent: "button",
     disabled: isDisabled,
@@ -209,7 +209,7 @@ Button.propTypes = {
   iconSize: PropTypes__default.default.string,
   iconStroke: PropTypes__default.default.string,
   isDisabled: PropTypes__default.default.bool,
-  label: PropTypes__default.default.string,
+  label: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.number]),
   labelTextColor: PropTypes__default.default.string,
   labelTextColorHover: PropTypes__default.default.string,
   labelTextSize: PropTypes__default.default.string,
@@ -435,7 +435,12 @@ Button.__docgenInfo = {
     "label": {
       "description": "",
       "type": {
-        "name": "string"
+        "name": "union",
+        "value": [{
+          "name": "string"
+        }, {
+          "name": "number"
+        }]
       },
       "required": false
     },

package/dist/components/Cell.js

@@ -6,12 +6,15 @@ 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 titleSize = require('../constants/componentProps/titleSize.js');
+var textSize = require('../constants/componentProps/textSize.js');
+var textColor = require('../constants/componentProps/textColor.js');
+var textAlign = require('../constants/componentProps/textAlign.js');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 require('react-inlinesvg');
 require('./Link.js');
 require('../constants/componentProps/fill.js');
-require('../constants/componentProps/textColor.js');
+require('../constants/componentProps/size.js');
 require('../constants/componentProps/textGradient.js');
 require('../constants/componentProps/textStyle.js');
 require('../constants/componentProps/textWeight.js');
@@ -32,10 +35,7 @@ require('../constants/componentProps/shape.js');
 require('../constants/componentProps/strokeColor.js');
 require('./Tooltip.js');
 require('./Title.js');
-require('../constants/componentProps/textAlign.js');
-require('../constants/componentProps/titleSize.js');
 require('../constants/componentProps/wrap.js');
-require('../constants/componentProps/textSize.js');
 require('../constants/componentProps/textColorActive.js');
 require('../constants/componentProps/textColorHover.js');
 require('lodash/castArray');
@@ -75,13 +75,16 @@ function Cell(props) {
     mode,
     size,
     value,
+    valueTextAlign,
     valueTextSize,
     valueTextColor,
     valueTextWeight,
     title,
     titleTextSize,
     titleTextColor,
+    titleTextTruncate,
     titleTextWeight,
+    titleTextWrap,
     showTitleLabel,
     titleLabelAppearance,
     titleLabel,
@@ -94,7 +97,6 @@ function Cell(props) {
     valueLabelTextSize,
     valueLabelShape,
     valueLabelSize,
-    titleTextWrap,
     valueTextWrap,
     zeroPadding,
     zeroGap,
@@ -165,6 +167,7 @@ function Cell(props) {
     size: titleTextSize,
     tag: titleTag,
     textColor: titleTextColor,
+    textTruncate: titleTextTruncate,
     textWeight: titleTextWeight,
     textWrap: titleTextWrap
   }, title), (titleIcon || titleIconSrc) && /*#__PURE__*/React__default.default.createElement(index$1.Icon, {
@@ -189,6 +192,7 @@ function Cell(props) {
     className: "cell__value",
     size: valueTextSize,
     tag: valueTag,
+    textAlign: valueTextAlign,
     textColor: valueTextColor,
     textWeight: valueTextWeight,
     textWrap: valueTextWrap
@@ -223,14 +227,15 @@ Cell.propTypes = {
   titleIcon: PropTypes__default.default.any,
   titleIconFill: PropTypes__default.default.string,
   titleIconStroke: PropTypes__default.default.string,
-  titleTextColor: PropTypes__default.default.string,
-  titleTextSize: PropTypes__default.default.oneOf(size.default),
+  titleTextColor: PropTypes__default.default.oneOf(textColor.default),
+  titleTextSize: PropTypes__default.default.oneOf(titleSize.default),
   value: PropTypes__default.default.oneOfType([PropTypes__default.default.element, PropTypes__default.default.string]),
   valueIcon: PropTypes__default.default.any,
   valueIconFill: PropTypes__default.default.string,
   valueIconStroke: PropTypes__default.default.string,
-  valueTextColor: PropTypes__default.default.string,
-  valueTextSize: PropTypes__default.default.oneOf(size.default),
+  valueTextAlign: PropTypes__default.default.oneOf(textAlign.default),
+  valueTextColor: PropTypes__default.default.oneOf(textColor.default),
+  valueTextSize: PropTypes__default.default.oneOf(textSize.default),
   onClick: PropTypes__default.default.func,
   onMouseEnter: PropTypes__default.default.func
 };
@@ -327,7 +332,9 @@ Cell.__docgenInfo = {
     "titleTextColor": {
       "description": "",
       "type": {
-        "name": "string"
+        "name": "enum",
+        "computed": true,
+        "value": "textColorProps"
       },
       "required": false
     },
@@ -336,7 +343,7 @@ Cell.__docgenInfo = {
       "type": {
         "name": "enum",
         "computed": true,
-        "value": "sizeProps"
+        "value": "titleSizeProps"
       },
       "required": false
     },
@@ -373,10 +380,21 @@ Cell.__docgenInfo = {
       },
       "required": false
     },
+    "valueTextAlign": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "textAlignProps"
+      },
+      "required": false
+    },
     "valueTextColor": {
       "description": "",
       "type": {
-        "name": "string"
+        "name": "enum",
+        "computed": true,
+        "value": "textColorProps"
       },
       "required": false
     },
@@ -385,7 +403,7 @@ Cell.__docgenInfo = {
       "type": {
         "name": "enum",
         "computed": true,
-        "value": "sizeProps"
+        "value": "textSizeProps"
       },
       "required": false
     },

package/dist/components/DatePicker.js

@@ -9183,13 +9183,14 @@ function DatePickerClearButton(props, ref) {
   } = props;
   const onClick = React.useCallback(event => {
     datepickerRef?.current?.onClearClick(event);
+    datepickerRef?.current?.handleFocus(event);
   }, []);
   return /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, clearLabel && /*#__PURE__*/React__namespace.default.createElement(index$3.Label, {
     className: clsx__default.default('react-datepicker__clear-label', onClick && 'cursor_type_pointer'),
     label: clearLabel,
-    labelTextSize: clearLabelTextSize,
     labelTextColor: clearLabelTextColor,
     labelTextColorHover: clearLabelTextColorHover,
+    labelTextSize: clearLabelTextSize,
     onClick: onClick
   }), (clearIcon || clearIconSrc) && /*#__PURE__*/React__namespace.default.createElement(index$4.Icon, {
     className: clsx__default.default('react-datepicker__clear-icon', onClick && 'cursor_type_pointer'),

package/dist/components/FormField.js

@@ -115,7 +115,7 @@ function FormField(props) {
   } = useStyles.useStyles(props);
   return /*#__PURE__*/React__default.default.createElement("div", {
     className: clsx__default.default(className, 'form-field', set && `form-field_set_${set}`, sizeClass, fillClass, shapeClass, directionClass),
-    "data-testId": dataTestId,
+    "data-test-id": dataTestId,
     style: formFieldStyles
   }, label && /*#__PURE__*/React__default.default.createElement("label", {
     htmlFor: id,
@@ -140,10 +140,10 @@ function FormField(props) {
     size: clearIconSize
   }), afterItem), /*#__PURE__*/React__default.default.createElement(index$2.Divider, {
     className: "form-field__item-divider",
-    width: dividerWidth,
     direction: dividerDirection,
+    fill: dividerFill,
     size: dividerSize,
-    fill: dividerFill
+    width: dividerWidth
   })), message && /*#__PURE__*/React__default.default.createElement("div", {
     className: "form-field__message"
   }, /*#__PURE__*/React__default.default.createElement(index.Text, {

package/dist/components/Grid.js

@@ -36,7 +36,7 @@ function Grid(props) {
     children,
     className,
     horizontalResizing,
-    scroll,
+    horizontalScroll,
     onClick,
     type,
     useGridSystem,
@@ -102,7 +102,7 @@ function Grid(props) {
     gridWrapperInner: gridWrapperInnerStyles
   } = useStyles.useStyles(props);
   return /*#__PURE__*/React__default.default.createElement(Tag, {
-    className: clsx__default.default(className, 'grid', useGridSystem && `grid_state_system`, scroll && `grid_scroll_${scroll}`, type && `grid_type_${type}`, columnsClass, rowsClass, rowGapClass, columnGapClass, alignContentClass, alignItemsClass, justifyContentClass, justifyItemsClass, fillClass, horizontalResizing && `grid_horizontal-resizing_${horizontalResizing}`, verticalResizing && `grid_vertical-resizing_${verticalResizing}`),
+    className: clsx__default.default(className, 'grid', useGridSystem && `grid_state_system`, horizontalScroll && `grid_scroll_horizontal`, type && `grid_type_${type}`, columnsClass, rowsClass, rowGapClass, columnGapClass, alignContentClass, alignItemsClass, justifyContentClass, justifyItemsClass, fillClass, horizontalResizing && `grid_horizontal-resizing_${horizontalResizing}`, verticalResizing && `grid_vertical-resizing_${verticalResizing}`),
     "data-tour": dataTour,
     id: id,
     style: gridStyles,

package/dist/components/Icon.js

@@ -54,26 +54,26 @@ const iconConfig = {
 const Icon = /*#__PURE__*/React__default.default.forwardRef(function Icon(props, ref) {
   const [isTooltipVisible, setIsTooltipVisible] = React.useState(false);
   const {
-    before,
-    after,
     Badge,
     SvgImage,
-    id,
-    imageSrc,
-    dataTour,
+    after,
+    before,
     className,
+    dataTour,
+    height,
     href,
+    id,
+    imageSrc,
     link,
-    linkTarget,
     linkRel,
-    width,
-    height,
+    linkTarget,
     showTooltip,
+    tooltipAppearance,
     tooltipText,
     tooltipTextSize,
     tooltipTitle,
     tooltipTitleSize,
-    tooltipAppearance,
+    width,
     onClick
   } = props;
   const svgSizes = React.useMemo(() => {
@@ -85,7 +85,7 @@ const Icon = /*#__PURE__*/React__default.default.forwardRef(function Icon(props,
       sizes.height = height;
     }
     return sizes;
-  }, []);
+  }, [height, width]);
   const cursorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'cursor_',
     propsKey: 'cursor'
@@ -177,7 +177,7 @@ const Icon = /*#__PURE__*/React__default.default.forwardRef(function Icon(props,
       });
     }
     return null;
-  }, [SvgImage, imageSrc]);
+  }, [SvgImage, svgSizes, imageSrc]);
   return /*#__PURE__*/React__default.default.createElement("div", {
     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,
@@ -194,8 +194,8 @@ const Icon = /*#__PURE__*/React__default.default.forwardRef(function Icon(props,
     rel: linkRel,
     target: linkTarget
   }, before, ImageComponent, after, Badge, isTooltipVisible && showTooltip && /*#__PURE__*/React__default.default.createElement(index$1.Tooltip, {
-    className: clsx__default.default(className, 'icon__tooltip', alignmentClass),
     appearance: tooltipAppearance,
+    className: clsx__default.default(className, 'icon__tooltip', alignmentClass),
     text: tooltipText,
     textSize: tooltipTextSize,
     title: tooltipTitle,
@@ -203,13 +203,18 @@ const Icon = /*#__PURE__*/React__default.default.forwardRef(function Icon(props,
   })));
 });
 Icon.propTypes = {
+  after: PropTypes__default.default.any,
+  // "bool" type is valid for condition constructions, e.g. "Boolean(some) && <Badge>"
+  Badge: PropTypes__default.default.oneOfType([PropTypes__default.default.element, PropTypes__default.default.bool]),
+  before: PropTypes__default.default.any,
   borderColor: PropTypes__default.default.oneOf(borderColor.default),
   borderType: PropTypes__default.default.oneOf(borderType.default),
   className: PropTypes__default.default.string,
+  dataTour: PropTypes__default.default.string,
   fill: PropTypes__default.default.oneOf(fill.default),
   fillDesktop: PropTypes__default.default.oneOf(fill.default),
   fillMobile: PropTypes__default.default.oneOf(fill.default),
-  fillSize: PropTypes__default.default.string,
+  fillSize: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.number]),
   fillSizeDesktop: PropTypes__default.default.string,
   fillSizeMobile: PropTypes__default.default.string,
   fillSizeTablet: PropTypes__default.default.string,
@@ -220,6 +225,7 @@ Icon.propTypes = {
   iconStrokeDesktop: PropTypes__default.default.oneOf(strokeColor.default),
   iconStrokeMobile: PropTypes__default.default.oneOf(strokeColor.default),
   iconStrokeTablet: PropTypes__default.default.oneOf(strokeColor.default),
+  id: PropTypes__default.default.string,
   imageSrc: PropTypes__default.default.string,
   link: PropTypes__default.default.string,
   LinkComponent: PropTypes__default.default.any,
@@ -229,11 +235,17 @@ Icon.propTypes = {
   shapeDesktop: PropTypes__default.default.oneOf(shape.default),
   shapeMobile: PropTypes__default.default.oneOf(shape.default),
   shapeTablet: PropTypes__default.default.oneOf(shape.default),
+  showTooltip: PropTypes__default.default.bool,
   size: PropTypes__default.default.oneOf(iconSize.default),
   sizeDesktop: PropTypes__default.default.oneOf(iconSize.default),
   sizeMobile: PropTypes__default.default.oneOf(iconSize.default),
   sizeTablet: PropTypes__default.default.oneOf(iconSize.default),
-  SvgImage: PropTypes__default.default.oneOfType([PropTypes__default.default.element, PropTypes__default.default.func, PropTypes__default.default.object]),
+  SvgImage: PropTypes__default.default.oneOfType([PropTypes__default.default.elementType, PropTypes__default.default.func, PropTypes__default.default.object]),
+  tooltipAppearance: PropTypes__default.default.string,
+  tooltipText: PropTypes__default.default.string,
+  tooltipTextSize: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.number]),
+  tooltipTitle: PropTypes__default.default.string,
+  tooltipTitleSize: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.number]),
   width: PropTypes__default.default.string,
   onClick: PropTypes__default.default.func
 };
@@ -259,6 +271,32 @@ Icon.__docgenInfo = {
       },
       "required": false
     },
+    "after": {
+      "description": "",
+      "type": {
+        "name": "any"
+      },
+      "required": false
+    },
+    "Badge": {
+      "description": "",
+      "type": {
+        "name": "union",
+        "value": [{
+          "name": "element"
+        }, {
+          "name": "bool"
+        }]
+      },
+      "required": false
+    },
+    "before": {
+      "description": "",
+      "type": {
+        "name": "any"
+      },
+      "required": false
+    },
     "borderColor": {
       "description": "",
       "type": {
@@ -284,6 +322,13 @@ Icon.__docgenInfo = {
       },
       "required": false
     },
+    "dataTour": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
     "fill": {
       "description": "",
       "type": {
@@ -314,7 +359,12 @@ Icon.__docgenInfo = {
     "fillSize": {
       "description": "",
       "type": {
-        "name": "string"
+        "name": "union",
+        "value": [{
+          "name": "string"
+        }, {
+          "name": "number"
+        }]
       },
       "required": false
     },
@@ -398,6 +448,13 @@ Icon.__docgenInfo = {
       },
       "required": false
     },
+    "id": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
     "imageSrc": {
       "description": "",
       "type": {
@@ -462,6 +519,13 @@ Icon.__docgenInfo = {
       },
       "required": false
     },
+    "showTooltip": {
+      "description": "",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
+    },
     "size": {
       "description": "",
       "type": {
@@ -503,7 +567,7 @@ Icon.__docgenInfo = {
       "type": {
         "name": "union",
         "value": [{
-          "name": "element"
+          "name": "elementType"
         }, {
           "name": "func"
         }, {
@@ -512,6 +576,51 @@ Icon.__docgenInfo = {
       },
       "required": false
     },
+    "tooltipAppearance": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "tooltipText": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "tooltipTextSize": {
+      "description": "",
+      "type": {
+        "name": "union",
+        "value": [{
+          "name": "string"
+        }, {
+          "name": "number"
+        }]
+      },
+      "required": false
+    },
+    "tooltipTitle": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "tooltipTitleSize": {
+      "description": "",
+      "type": {
+        "name": "union",
+        "value": [{
+          "name": "string"
+        }, {
+          "name": "number"
+        }]
+      },
+      "required": false
+    },
     "width": {
       "description": "",
       "type": {

package/dist/components/Input.js

@@ -108,13 +108,6 @@ const Input = /*#__PURE__*/React__default.default.forwardRef(function Input(prop
     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, !isDisabled ? fillClass : fillDisabledClass, shapeClass || inputConfig.appearance[appearance] && `input_shape_${inputConfig.appearance[appearance].shape}`.replace(/([A-Z])/g, '-$1').toLowerCase(), textSizeClass || inputConfig.appearance[appearance] && `text_size_${inputConfig.appearance[appearance].textSize}`.replace(/([A-Z])/g, '-$1').toLowerCase(), weightClass, widthClass, !isDisabled ? borderWidthClass : borderWidthDisabledClass, sizeClass || inputConfig.appearance[appearance] && `input_size_${inputConfig.appearance[appearance].size}`.replace(/([A-Z])/g, '-$1').toLowerCase(), borderColorClass || inputConfig.appearance[appearance]?.borderColor && `border-color_${inputConfig.appearance[appearance].borderColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), placeholderTextColorClass || inputConfig.appearance[appearance]?.placeholderTextColor && `placeholder-text-color_${inputConfig.appearance[appearance].placeholderTextColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), textColorClass || inputConfig.appearance[appearance]?.textColor && `text-color_${inputConfig.appearance[appearance].textColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), !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,
@@ -123,7 +116,7 @@ const Input = /*#__PURE__*/React__default.default.forwardRef(function Input(prop
     ref: ref,
     disabled: isDisabled,
     placeholder: placeholder,
-    "data-testid": dataTestId || (name ? `${name}Input` : 'input'),
+    "data-test-id": dataTestId || (name ? `${name}Input` : 'input'),
     value: value,
     onBlur: onBlur,
     onChange: onChange,