@itcase/ui 1.1.4 → 1.1.6

package/dist/components/Flex.js

@@ -3,7 +3,7 @@
 var React = require('react');
 var PropTypes = require('prop-types');
 var clsx = require('clsx');
-var direction = require('../constants/componentProps/direction.js');
+var alignDirection = require('../constants/componentProps/alignDirection.js');
 var fill = require('../constants/componentProps/fill.js');
 var flexAlign = require('../constants/componentProps/flexAlign.js');
 var flexJustifyContent = require('../constants/componentProps/flexJustifyContent.js');
@@ -13,6 +13,7 @@ var width = require('../constants/componentProps/width.js');
 var position = require('../constants/componentProps/position.js');
 var useStyles = require('../hooks/useStyles.js');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
+var direction = require('../constants/componentProps/direction.js');
 var horizontalResizeMode = require('../constants/componentProps/horizontalResizeMode.js');
 require('lodash/camelCase');
 require('lodash/maxBy');
@@ -102,20 +103,20 @@ function Flex(props) {
 }
 Flex.propTypes = {
   id: PropTypes__default.default.string,
-  alignContent: PropTypes__default.default.oneOf(flexAlign.default),
-  alignContentDesktop: PropTypes__default.default.oneOf(flexAlign.default),
-  alignContentMobile: PropTypes__default.default.oneOf(flexAlign.default),
-  alignContentTablet: PropTypes__default.default.oneOf(flexAlign.default),
+  alignContent: PropTypes__default.default.oneOf(flexJustifyContent.default),
+  alignContentDesktop: PropTypes__default.default.oneOf(flexJustifyContent.default),
+  alignContentMobile: PropTypes__default.default.oneOf(flexJustifyContent.default),
+  alignContentTablet: PropTypes__default.default.oneOf(flexJustifyContent.default),
   alignItems: PropTypes__default.default.oneOf(flexAlign.default),
   alignItemsDesktop: PropTypes__default.default.oneOf(flexAlign.default),
   alignItemsMobile: PropTypes__default.default.oneOf(flexAlign.default),
   alignItemsTablet: PropTypes__default.default.oneOf(flexAlign.default),
   children: PropTypes__default.default.any,
   className: PropTypes__default.default.string,
-  direction: PropTypes__default.default.oneOf(direction.default),
-  directionDesktop: PropTypes__default.default.oneOf(direction.default),
-  directionMobile: PropTypes__default.default.oneOf(direction.default),
-  directionTablet: PropTypes__default.default.oneOf(direction.default),
+  direction: PropTypes__default.default.oneOf(alignDirection.default),
+  directionDesktop: PropTypes__default.default.oneOf(alignDirection.default),
+  directionMobile: PropTypes__default.default.oneOf(alignDirection.default),
+  directionTablet: PropTypes__default.default.oneOf(alignDirection.default),
   fill: PropTypes__default.default.oneOf(fill.default),
   fillDesktop: PropTypes__default.default.oneOf(fill.default),
   fillMobile: PropTypes__default.default.oneOf(fill.default),
@@ -183,7 +184,7 @@ Flex.__docgenInfo = {
       "type": {
         "name": "enum",
         "computed": true,
-        "value": "flexAlignProps"
+        "value": "flexJustifyContentProps"
       },
       "required": false
     },
@@ -192,7 +193,7 @@ Flex.__docgenInfo = {
       "type": {
         "name": "enum",
         "computed": true,
-        "value": "flexAlignProps"
+        "value": "flexJustifyContentProps"
       },
       "required": false
     },
@@ -201,7 +202,7 @@ Flex.__docgenInfo = {
       "type": {
         "name": "enum",
         "computed": true,
-        "value": "flexAlignProps"
+        "value": "flexJustifyContentProps"
       },
       "required": false
     },
@@ -210,7 +211,7 @@ Flex.__docgenInfo = {
       "type": {
         "name": "enum",
         "computed": true,
-        "value": "flexAlignProps"
+        "value": "flexJustifyContentProps"
       },
       "required": false
     },
@@ -269,7 +270,7 @@ Flex.__docgenInfo = {
       "type": {
         "name": "enum",
         "computed": true,
-        "value": "directionProps"
+        "value": "alignDirectionProps"
       },
       "required": false
     },
@@ -278,7 +279,7 @@ Flex.__docgenInfo = {
       "type": {
         "name": "enum",
         "computed": true,
-        "value": "directionProps"
+        "value": "alignDirectionProps"
       },
       "required": false
     },
@@ -287,7 +288,7 @@ Flex.__docgenInfo = {
       "type": {
         "name": "enum",
         "computed": true,
-        "value": "directionProps"
+        "value": "alignDirectionProps"
       },
       "required": false
     },
@@ -296,7 +297,7 @@ Flex.__docgenInfo = {
       "type": {
         "name": "enum",
         "computed": true,
-        "value": "directionProps"
+        "value": "alignDirectionProps"
       },
       "required": false
     },

package/dist/components/Grid.js

@@ -80,6 +80,10 @@ function Grid(props) {
     prefix: 'fill_',
     propsKey: 'fill'
   });
+  const borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-color_',
+    propsKey: 'borderColor'
+  });
   useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'fill_',
     propsKey: 'fillWrapper'
@@ -102,7 +106,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`, 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}`),
+    className: clsx__default.default(className, 'grid', useGridSystem && `grid_state_system`, horizontalScroll && `grid_scroll_horizontal`, type && `grid_type_${type}`, columnsClass, rowsClass, rowGapClass, columnGapClass, alignContentClass, alignItemsClass, borderColorClass, justifyContentClass, justifyItemsClass, fillClass, horizontalResizing && `grid_horizontal-resizing_${horizontalResizing}`, verticalResizing && `grid_vertical-resizing_${verticalResizing}`),
     "data-tour": dataTour,
     id: id,
     style: gridStyles,

package/dist/components/Group.js

@@ -135,23 +135,23 @@ function Group(props) {
   }, children) : children);
 }
 Group.propTypes = {
-  id: PropTypes__default.default.string,
   children: PropTypes__default.default.any,
   className: PropTypes__default.default.string,
+  columns: PropTypes__default.default.number,
+  contentAlign: PropTypes__default.default.oneOf([null, 'center']),
   direction: PropTypes__default.default.oneOf(direction.default),
   fill: PropTypes__default.default.oneOf(fill.default),
-  contentAlign: PropTypes__default.default.oneOf([null, 'center']),
-  tag: PropTypes__default.default.string,
-  stacking: PropTypes__default.default.oneOf(stacking.default),
-  wrap: PropTypes__default.default.oneOf(wrap.default),
+  horizontalScroll: PropTypes__default.default.bool,
+  htmlFor: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.number]),
+  id: PropTypes__default.default.string,
+  set: PropTypes__default.default.string,
   shape: PropTypes__default.default.oneOf(shape.default),
   spaceBetweenItems: PropTypes__default.default.string,
+  stacking: PropTypes__default.default.oneOf(stacking.default),
+  tag: PropTypes__default.default.string,
   width: PropTypes__default.default.oneOf(width.default),
-  columns: PropTypes__default.default.number,
-  set: PropTypes__default.default.string,
-  horizontalScroll: PropTypes__default.default.bool,
-  onClick: PropTypes__default.default.func,
-  htmlFor: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.number])
+  wrap: PropTypes__default.default.oneOf(wrap.default),
+  onClick: PropTypes__default.default.func
 };
 Group.defaultProps = {
   tag: 'div'
@@ -172,24 +172,38 @@ Group.__docgenInfo = {
       },
       "required": false
     },
-    "id": {
+    "children": {
+      "description": "",
+      "type": {
+        "name": "any"
+      },
+      "required": false
+    },
+    "className": {
       "description": "",
       "type": {
         "name": "string"
       },
       "required": false
     },
-    "children": {
+    "columns": {
       "description": "",
       "type": {
-        "name": "any"
+        "name": "number"
       },
       "required": false
     },
-    "className": {
+    "contentAlign": {
       "description": "",
       "type": {
-        "name": "string"
+        "name": "enum",
+        "value": [{
+          "value": "null",
+          "computed": false
+        }, {
+          "value": "'center'",
+          "computed": false
+        }]
       },
       "required": false
     },
@@ -211,35 +225,36 @@ Group.__docgenInfo = {
       },
       "required": false
     },
-    "contentAlign": {
+    "horizontalScroll": {
       "description": "",
       "type": {
-        "name": "enum",
+        "name": "bool"
+      },
+      "required": false
+    },
+    "htmlFor": {
+      "description": "",
+      "type": {
+        "name": "union",
         "value": [{
-          "value": "null",
-          "computed": false
+          "name": "string"
         }, {
-          "value": "'center'",
-          "computed": false
+          "name": "number"
         }]
       },
       "required": false
     },
-    "stacking": {
+    "id": {
       "description": "",
       "type": {
-        "name": "enum",
-        "computed": true,
-        "value": "stackingProps"
+        "name": "string"
       },
       "required": false
     },
-    "wrap": {
+    "set": {
       "description": "",
       "type": {
-        "name": "enum",
-        "computed": true,
-        "value": "wrapProps"
+        "name": "string"
       },
       "required": false
     },
@@ -259,33 +274,30 @@ Group.__docgenInfo = {
       },
       "required": false
     },
-    "width": {
+    "stacking": {
       "description": "",
       "type": {
         "name": "enum",
         "computed": true,
-        "value": "widthProps"
-      },
-      "required": false
-    },
-    "columns": {
-      "description": "",
-      "type": {
-        "name": "number"
+        "value": "stackingProps"
       },
       "required": false
     },
-    "set": {
+    "width": {
       "description": "",
       "type": {
-        "name": "string"
+        "name": "enum",
+        "computed": true,
+        "value": "widthProps"
       },
       "required": false
     },
-    "horizontalScroll": {
+    "wrap": {
       "description": "",
       "type": {
-        "name": "bool"
+        "name": "enum",
+        "computed": true,
+        "value": "wrapProps"
       },
       "required": false
     },
@@ -295,18 +307,6 @@ Group.__docgenInfo = {
         "name": "func"
       },
       "required": false
-    },
-    "htmlFor": {
-      "description": "",
-      "type": {
-        "name": "union",
-        "value": [{
-          "name": "string"
-        }, {
-          "name": "number"
-        }]
-      },
-      "required": false
     }
   }
 };

package/dist/components/Image.js

@@ -139,7 +139,6 @@ Image.propTypes = {
   shapeDesktop: PropTypes__default.default.oneOf(shape.default),
   shapeMobile: PropTypes__default.default.oneOf(shape.default),
   shapeTablet: PropTypes__default.default.oneOf(shape.default),
-  size: PropTypes__default.default.string,
   src: PropTypes__default.default.string,
   style: PropTypes__default.default.object,
   title: PropTypes__default.default.string,
@@ -348,13 +347,6 @@ Image.__docgenInfo = {
       },
       "required": false
     },
-    "size": {
-      "description": "",
-      "type": {
-        "name": "string"
-      },
-      "required": false
-    },
     "src": {
       "description": "",
       "type": {

package/dist/components/Input.js

@@ -110,13 +110,13 @@ const Input = /*#__PURE__*/React__default.default.forwardRef(function Input(prop
   });
   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,
+    "data-test-id": dataTestId || (name ? `${name}Input` : 'input'),
+    disabled: isDisabled,
     id: id,
     index: index,
-    ref: ref,
-    disabled: isDisabled,
     placeholder: placeholder,
-    "data-test-id": dataTestId || (name ? `${name}Input` : 'input'),
+    ref: ref,
+    type: type,
     value: value,
     onBlur: onBlur,
     onChange: onChange,
@@ -125,16 +125,16 @@ const Input = /*#__PURE__*/React__default.default.forwardRef(function Input(prop
   });
 });
 Input.propTypes = {
-  id: PropTypes__default.default.string,
+  checked: PropTypes__default.default.bool,
   className: PropTypes__default.default.string,
+  id: PropTypes__default.default.string,
+  isDisabled: PropTypes__default.default.bool,
   placeholder: PropTypes__default.default.string,
+  type: PropTypes__default.default.string,
   value: PropTypes__default.default.string,
-  checked: PropTypes__default.default.bool,
-  isDisabled: PropTypes__default.default.bool,
   onBlur: PropTypes__default.default.func,
   onChange: PropTypes__default.default.func,
-  onKeyDown: PropTypes__default.default.func,
-  type: PropTypes__default.default.string
+  onKeyDown: PropTypes__default.default.func
 };
 Input.defaultProps = {
   size: 'm',
@@ -163,10 +163,10 @@ Input.__docgenInfo = {
       },
       "required": false
     },
-    "id": {
+    "checked": {
       "description": "",
       "type": {
-        "name": "string"
+        "name": "bool"
       },
       "required": false
     },
@@ -177,31 +177,31 @@ Input.__docgenInfo = {
       },
       "required": false
     },
-    "placeholder": {
+    "id": {
       "description": "",
       "type": {
         "name": "string"
       },
       "required": false
     },
-    "value": {
+    "isDisabled": {
       "description": "",
       "type": {
-        "name": "string"
+        "name": "bool"
       },
       "required": false
     },
-    "checked": {
+    "placeholder": {
       "description": "",
       "type": {
-        "name": "bool"
+        "name": "string"
       },
       "required": false
     },
-    "isDisabled": {
+    "value": {
       "description": "",
       "type": {
-        "name": "bool"
+        "name": "string"
       },
       "required": false
     },

package/dist/components/MenuItem.js

@@ -151,7 +151,7 @@ function MenuItem(props) {
     size: textSize,
     textColor: textColor || appearance && menuItemConfig.appearance[appearance].textColor.replace(/([A-Z])/g, '-$1').toLowerCase(),
     textColorActive: isActive && (textColorActive || appearance && menuItemConfig.appearance[appearance].textColorActive.replace(/([A-Z])/g, '-$1').toLowerCase()),
-    textColorHover: textColorHover || appearance && menuItemConfig.appearance[appearance].textColor.replace(/([A-Z])/g, '-$1').toLowerCase(),
+    textColorHover: textColorHover || appearance && menuItemConfig.appearance[appearance].textColorHover.replace(/([A-Z])/g, '-$1').toLowerCase(),
     textGradient: textGradient,
     textStyle: textStyle,
     textWeight: textWeight,

package/dist/components/Radio.js

@@ -41,21 +41,20 @@ const radioConfig = {
 function Radio(props) {
   const {
     appearance,
-    state,
-    id,
-    className,
     checked,
-    onChange,
-    disabled,
+    className,
+    desc,
+    descTextColor,
     descTextSize,
     descTextWidth,
-    descTextColor,
-    desc,
+    disabled,
+    id,
     label,
+    labelTextColor,
     labelTextSize,
     labelTextWidth,
-    labelTextColor,
-    tag: Tag
+    tag: Tag,
+    onChange
   } = props;
   const fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'fill_',
@@ -98,8 +97,8 @@ function Radio(props) {
     propsKey: checked ? 'stateBorderColorDisabledChecked' : 'stateBorderColorDisabled'
   });
   return /*#__PURE__*/React__default.default.createElement(Tag, {
-    htmlFor: id,
-    className: clsx__default.default(className, 'radio', fillClass, shapeClass)
+    className: clsx__default.default(className, 'radio', fillClass, shapeClass),
+    htmlFor: id
   }, /*#__PURE__*/React__default.default.createElement("div", {
     className: clsx__default.default('radio__item', stateCheckmarkFillClass || radioConfig.appearance[appearance] && `radio_checkmark_fill_${radioConfig.appearance[appearance].stateCheckmarkFill}`.replace(/([A-Z])/g, '-$1').toLowerCase())
   }, /*#__PURE__*/React__default.default.createElement("input", {
@@ -126,7 +125,21 @@ function Radio(props) {
   }, desc));
 }
 Radio.propTypes = {
-  className: PropTypes__default.default.string
+  appearance: PropTypes__default.default.string,
+  checked: PropTypes__default.default.bool,
+  className: PropTypes__default.default.string,
+  desc: PropTypes__default.default.string,
+  descTextColor: PropTypes__default.default.string,
+  descTextSize: PropTypes__default.default.string,
+  descTextWidth: PropTypes__default.default.string,
+  disabled: PropTypes__default.default.bool,
+  id: PropTypes__default.default.string,
+  label: PropTypes__default.default.string,
+  labelTextColor: PropTypes__default.default.string,
+  labelTextSize: PropTypes__default.default.string,
+  labelTextWidth: PropTypes__default.default.string,
+  tag: PropTypes__default.default.string,
+  onChange: PropTypes__default.default.func
 };
 Radio.defaultProps = {
   shape: 'circular',
@@ -149,6 +162,24 @@ Radio.__docgenInfo = {
         "value": "'label'",
         "computed": false
       },
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "appearance": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "checked": {
+      "description": "",
+      "type": {
+        "name": "bool"
+      },
       "required": false
     },
     "className": {
@@ -157,6 +188,83 @@ Radio.__docgenInfo = {
         "name": "string"
       },
       "required": false
+    },
+    "desc": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "descTextColor": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "descTextSize": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "descTextWidth": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "disabled": {
+      "description": "",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
+    },
+    "id": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "label": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "labelTextColor": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "labelTextSize": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "labelTextWidth": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "onChange": {
+      "description": "",
+      "type": {
+        "name": "func"
+      },
+      "required": false
     }
   }
 };

package/dist/components/Response.js

@@ -162,7 +162,7 @@ function Response(props) {
     className: "response__message",
     size: messageTextSize || responseConfig.appearance[appearance]?.messageTextSize || 'xxl',
     textColor: messageTextColor || responseConfig.appearance[appearance]?.messageTextColor
-  }, message)), (primaryButtonLabel || responseConfig.appearance[appearance]?.primaryButtonLabel || primaryButton || secondaryButtonLabel || responseConfig.appearance[appearance]?.secondaryButtonLabel || secondaryButton) && /*#__PURE__*/React__default.default.createElement(index.Group, {
+  }, message)), (primaryButtonLabel || primaryButton || secondaryButtonLabel || secondaryButton || responseConfig.appearance[appearance]) && /*#__PURE__*/React__default.default.createElement(index.Group, {
     className: "response__button",
     width: "fill"
   }, primaryButtonLabel || responseConfig.appearance[appearance].primaryButtonLabel ? /*#__PURE__*/React__default.default.createElement(index$3.Button, {
@@ -172,7 +172,7 @@ function Response(props) {
     className: "response__button-item",
     fill: primaryButtonFill,
     fillHover: primaryButtonFillHover,
-    label: primaryButtonLabel || responseConfig.appearance[appearance].primaryButtonLabel,
+    label: primaryButtonLabel || responseConfig.appearance[appearance]?.primaryButtonLabel,
     labelTextColor: primaryButtonLabelTextColor,
     labelTextSize: primaryButtonLabelTextSize || responseConfig.appearance[appearance]?.primaryButtonLabelTextSize,
     shape: primaryButtonShape || responseConfig.appearance[appearance]?.primaryButtonShape,
@@ -186,7 +186,7 @@ function Response(props) {
     className: "response__button-item",
     fill: secondaryButtonFill,
     fillHover: secondaryButtonFillHover,
-    label: secondaryButtonLabel || responseConfig.appearance[appearance].secondaryButtonLabel,
+    label: secondaryButtonLabel || responseConfig.appearance[appearance]?.secondaryButtonLabel,
     labelTextColor: secondaryButtonLabelTextColor,
     labelTextSize: secondaryButtonLabelTextSize || responseConfig.appearance[appearance]?.secondaryButtonLabelTextSize,
     shape: secondaryButtonShape || responseConfig.appearance[appearance]?.secondaryButtonShape,