@itcase/ui 1.0.82 → 1.0.83

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/Choice.js

@@ -40,7 +40,9 @@ const Choice = /*#__PURE__*/React__default.default.forwardRef((props, ref) => {
     size,
     labelTextColor,
     labelTextActiveColor,
-    labelTextSize
+    labelTextSize,
+    before,
+    after
   } = props;
   const controlRef = React.useRef(null);
   const optionsRefs = React.useMemo(() => new Map(options.map(item => [item.value, /*#__PURE__*/React.createRef()])), [options]);
@@ -92,10 +94,10 @@ const Choice = /*#__PURE__*/React__default.default.forwardRef((props, ref) => {
   }), /*#__PURE__*/React__default.default.createElement("label", {
     className: clsx__default.default('choice__item-label'),
     htmlFor: item.label
-  }, /*#__PURE__*/React__default.default.createElement(index.Text, {
+  }, 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 = {

package/dist/components/Dropdown.js

@@ -258,7 +258,7 @@ function DropdownItem(props) {
     styles: dropdownItem
   } = useStyles.useStyles(props);
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default('dropdown__item', isActive && 'dropdown__item_state_active', isHover && 'dropdown__item_state_hover', directionClass, className, fillClass, fillHoverClass, fillActiveClass, fillActiveHoverClass, fillDisabledClass, sizeClass, shapeClass, typeClass, widthClass, set && `dropdown__item_set_${set}`, justifyContentClass),
+    className: clsx__default.default('dropdown__item', isActive && 'dropdown__item_state_active', isHover && 'dropdown__item_state_hover', directionClass, className, fillClass, fillHoverClass, fillActiveClass, fillActiveHoverClass, fillDisabledClass, sizeClass, shapeClass, typeClass, widthClass, onClick && 'cursor_type_pointer', set && `dropdown__item_set_${set}`, justifyContentClass),
     style: dropdownItem,
     onClick: onClick,
     onMouseEnter: onMouseEnter

package/dist/components/Label.js

@@ -67,6 +67,10 @@ function Label(props) {
     prefix: 'fill_',
     propsKey: 'fill'
   });
+  const fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_hover_',
+    propsKey: 'fillHover'
+  });
   const sizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'label_size_',
     propsKey: 'size'
@@ -83,6 +87,10 @@ function Label(props) {
     prefix: 'border_type_',
     propsKey: 'borderType'
   });
+  const widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'width_',
+    propsKey: 'width'
+  });
   const wrapClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'word-wrap_',
     propsKey: 'labelTextWrap'
@@ -91,7 +99,7 @@ function Label(props) {
     styles: labelStyles
   } = useStyles.useStyles(props);
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(className, 'label', fillClass || labelConfig.appearance[appearance] && `fill_${labelConfig.appearance[appearance].fillClass}`.replace(/([A-Z])/g, '-$1').toLowerCase(), shapeClass, borderClass, borderTypeClass, sizeClass, wrapClass, alignDirectionClass, alignClass, type && `label_type_${type}`, set && `label_set_${set}`, onClick && (cursor || 'cursor_type_pointer')),
+    className: clsx__default.default(className, 'label', fillClass || labelConfig.appearance[appearance] && `fill_${labelConfig.appearance[appearance].fillClass}`.replace(/([A-Z])/g, '-$1').toLowerCase(), fillHoverClass || labelConfig.appearance[appearance] && `fill_hover_${labelConfig.appearance[appearance].fillHoverClass}`.replace(/([A-Z])/g, '-$1').toLowerCase(), shapeClass, borderClass, borderTypeClass, sizeClass, wrapClass, widthClass, alignDirectionClass, alignClass, type && `label_type_${type}`, set && `label_set_${set}`, onClick && (cursor || 'cursor_type_pointer')),
     "data-tour": dataTour,
     style: labelStyles,
     onClick: onClick

package/dist/components/Search.js

@@ -177,7 +177,7 @@ const SearchInput = /*#__PURE__*/React__default.default.forwardRef(function Sear
     textWeight: placeholderWeightClass,
     textStyle: placeholderStyleClass,
     textColor: placeholderColorClass
-  }, placeholder || 'Search')), (iconClear || iconClearSrc) && /*#__PURE__*/React__default.default.createElement(index.Icon, {
+  }, placeholder || 'Search')), value && /*#__PURE__*/React__default.default.createElement(index.Icon, {
     className: clsx__default.default('search-input__clear', onClickClearIcon && 'cursor_type_pointer'),
     SvgImage: iconClear,
     imageSrc: iconClearSrc,

package/dist/components/Select.js

@@ -7996,6 +7996,7 @@ const SelectOption = props => {
     data
   } = props;
   const {
+    menuItemSize,
     optionFill,
     optionFillHover,
     optionBorder,
@@ -8008,7 +8009,7 @@ const SelectOption = props => {
     optionAfter
   } = props.selectProps;
   return /*#__PURE__*/React__namespace.default.createElement(Select$1.components.Option, Object.assign({}, props, {
-    className: clsx__default.default('select__menu-list-item', isSelected && 'select__menu-list-item_state_selected', optionFill, optionBorder, optionBorderType, optionFillHover, optionShape)
+    className: clsx__default.default('select__menu-list-item', isSelected && 'select__menu-list-item_state_selected', menuItemSize && `select__menu-list-item_size_${menuItemSize}`, optionFill, optionBorder, optionBorderType, optionFillHover, optionShape)
   }), optionBefore, /*#__PURE__*/React__namespace.default.createElement(index$2.Text, {
     className: "select__menu-list-item_option",
     size: optionTextSize,
@@ -8271,6 +8272,7 @@ const SelectContainer = /*#__PURE__*/React__namespace.default.forwardRef(functio
     isCreatable,
     isMulti,
     isSearchable,
+    menuItemSize,
     noOptionsText,
     openMenuOnClick,
     options,
@@ -8433,6 +8435,7 @@ const SelectContainer = /*#__PURE__*/React__namespace.default.forwardRef(functio
     isSearchable: isSearchable,
     set: set,
     optionFill: optionFillClass,
+    menuItemSize: menuItemSize,
     optionFillHover: optionFillHoverClass,
     optionTextSize: optionTextSizeClass,
     optionTextColor: optionTextColorClass,

package/dist/components/Tab.js

@@ -67,6 +67,7 @@ function Tab(props) {
     labelTextSize,
     labelTextWrap,
     labelTextStyle,
+    reset,
     labelTextWeight,
     dataTour,
     dividerFill,
@@ -138,7 +139,7 @@ function Tab(props) {
     styles: tab
   } = useStyles.useStyles(props);
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default('tab', isActive && 'tab_state_active', isHover && 'tab_state_hover', fillClass || tabConfig.appearance[appearance] && `fill_${tabConfig.appearance[appearance].fillClass}`.replace(/([A-Z])/g, '-$1').toLowerCase(), fillHoverClass || tabConfig.appearance[appearance] && `fill_hover_${tabConfig.appearance[appearance].fillHoverClass}`.replace(/([A-Z])/g, '-$1').toLowerCase(), className, sizeClass, fillActiveClass, fillActiveHoverClass, fillDisabledClass, shapeClass, typeClass, widthClass, set && `tab_set_${set}`, justifyContentClass, onClick && 'cursor_type_pointer'),
+    className: clsx__default.default('tab', isActive && 'tab_state_active', isHover && 'tab_state_hover', fillClass || tabConfig.appearance[appearance] && `fill_${tabConfig.appearance[appearance].fillClass}`.replace(/([A-Z])/g, '-$1').toLowerCase(), fillHoverClass || tabConfig.appearance[appearance] && `fill_hover_${tabConfig.appearance[appearance].fillHoverClass}`.replace(/([A-Z])/g, '-$1').toLowerCase(), className, sizeClass, fillActiveClass, fillActiveHoverClass, fillDisabledClass, shapeClass, typeClass, widthClass, reset && 'tab-reset', set && `tab_set_${set}`, justifyContentClass, onClick && 'cursor_type_pointer'),
     "data-tour": dataTour,
     style: tab,
     onClick: onClick,

package/dist/css/components/Accordion/Accordion.css

@@ -30,13 +30,15 @@
   }
 }
 .accordion-item {
+  min-width: 170px;
+  padding: 10px 12px;
   display: flex;
   flex-flow: row wrap;
+  gap: 8px;
   &__title {
     flex: 1;
   }
   &__icon {
-    margin: 0 0 0 40px;
     align-self: center;
     transform-origin: 50% 50%;
     transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);

package/dist/css/components/Grid/Grid.css

@@ -58,6 +58,7 @@
 .grid {
   @each $val in 1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100,101,102,103,104,105,106,107,108,109,110,111,112,113,114,115,116,117,118,119,120,121,122,123,124,125,126,127,128,129,130,131,132,133,134,135,136,137,138,139,140,141,142,143,144,145,146,147,148,149,150,151,152,153,154,155,156,157,158,159,160,161,162,163,164,165,166,167,168,169,170,171,172,173,174,175,176,177,178,179,180,181,182,183,184,185,186,187,188,189,190,191,192,193,194,195,196,197,198,199,200 {
     &_columns_$(val) {
+      grid-template-columns: repeat($(val), 1fr);
       & > ^&__wrapper {
         & > div {
           grid-template-columns: repeat($(val), 1fr);
@@ -101,10 +102,11 @@
 .grid {
   @each $val in 1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100,101,102,103,104,105,106,107,108,109,110,111,112,113,114,115,116,117,118,119,120,121,122,123,124,125,126,127,128,129,130,131,132,133,134,135,136,137,138,139,140,141,142,143,144,145,146,147,148,149,150,151,152,153,154,155,156,157,158,159,160,161,162,163,164,165,166,167,168,169,170,171,172,173,174,175,176,177,178,179,180,181,182,183,184,185,186,187,188,189,190,191,192,193,194,195,196,197,198,199,200 {
     &_rows_$(val) {
+      grid-template-columns: repeat($(val), 1fr);
       & > ^&__wrapper {
         & > div {
           grid-template-columns: repeat($(val), 1fr);
-          }
+        }
       }
     }
   }

package/dist/css/components/Select/Select.css

@@ -132,6 +132,7 @@
 .select {
   &__placeholder {
     position: absolute;
+    display: flex;
   }
 }
 
@@ -188,23 +189,40 @@
   }
 }
 
+.select {
+  &__menu {
+    &-list {
+      &-item {
+        &_size {
+          @each $size in xs, s, m, l, xl, xxl {
+            &_$(size) {
+              padding: var(--select-menu-list-item-size-$(size)-padding, 5px 10px);
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
 .select {
   &__menu {
     width: 100%;
+    background: var(--color-surface-primary);
+    padding: 12px 0;
     margin: var(--select-menu-margin, 0);
+    border-radius: var(--select-menu-border-radius, 0);
     border-top: none;
     position: absolute;
     left: 0;
     top: 100%;
     z-index: 100000;
-    border-radius: var(--select-menu-border-radius, 0);
     &-group-heading {
       z-index: 100000;
     }
     &-list {
       overflow-y: auto;
       max-height: 240px;
-      border-radius: var(--select-menu-border-radius, 0);
       &-item {
         width: 100%;
         position: relative;
@@ -216,11 +234,11 @@
         }
         &_selected {
           height: 100%;
+          position: absolute;
           display: flex;
           align-items: center;
-          position: absolute;
-          right: 8px;
           top: 0;
+          right: 8px;
         }
       }
 

package/dist/css/components/Select/css/__menu/select__menu-list-item_size.css

@@ -0,0 +1,15 @@
+.select {
+  &__menu {
+    &-list {
+      &-item {
+        &_size {
+          @each $size in xs, s, m, l, xl, xxl {
+            &_$(size) {
+              padding: var(--select-menu-list-item-size-$(size)-padding, 5px 10px);
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/dist/css/components/Select/css/__menu/select__menu.css

@@ -1,20 +1,21 @@
 .select {
   &__menu {
     width: 100%;
+    background: var(--color-surface-primary);
+    padding: 12px 0;
     margin: var(--select-menu-margin, 0);
+    border-radius: var(--select-menu-border-radius, 0);
     border-top: none;
     position: absolute;
     left: 0;
     top: 100%;
     z-index: 100000;
-    border-radius: var(--select-menu-border-radius, 0);
     &-group-heading {
       z-index: 100000;
     }
     &-list {
       overflow-y: auto;
       max-height: 240px;
-      border-radius: var(--select-menu-border-radius, 0);
       &-item {
         width: 100%;
         position: relative;
@@ -26,11 +27,11 @@
         }
         &_selected {
           height: 100%;
+          position: absolute;
           display: flex;
           align-items: center;
-          position: absolute;
-          right: 8px;
           top: 0;
+          right: 8px;
         }
       }
 

package/dist/css/components/Select/css/__placeholder/select__placeholder.css

@@ -1,5 +1,6 @@
 .select {
   &__placeholder {
     position: absolute;
+    display: flex;
   }
 }

package/dist/css/components/Tab/Tab.css

@@ -5,6 +5,35 @@
     align-content: center;
   }
 }
+.tab-group {
+  position: relative;
+  display: flex;
+  flex-flow: row wrap;
+  align-items: stretch;
+  & .tab {
+    display: flex;
+    flex-flow: column nowrap;
+    justify-content: flex-end;
+    &__wrapper {
+      display: flex;
+      flex: 1;
+      justify-content: center;
+      align-items: center;
+      gap: 4px;
+    }
+    &__label {
+      display: flex;
+      flex: 1;
+    }
+  }
+}
+div.tab-reset {
+  & .tab__wrapper {
+    padding: 0;
+    gap: 0;
+    margin: 0;
+  }
+}
 .tab {
   @each $val in flex-start, flex-end, center, space-between, space-around, space-evenly {
     &_justify-content_$(val) {
@@ -26,7 +55,7 @@
 }
 .tab {
   &_size {
-    @each $size in normal, compact {
+    @each $size in normal, compact, xxs, xs, s, m, l, xl, xxl, {
       &_$(size) {
         ^^&__wrapper {
           padding: var(--tab-size-$(size)-padding);
@@ -36,28 +65,6 @@
     }
   }
 }
-.tab-group {
-  position: relative;
-  display: flex;
-  flex-flow: row wrap;
-  align-items: stretch;
-  & .tab {
-    display: flex;
-    flex-flow: column nowrap;
-    justify-content: flex-end;
-    &__wrapper {
-      display: flex;
-      flex: 1;
-      justify-content: center;
-      align-items: center;
-      gap: 4px;
-    }
-    &__label {
-      display: flex;
-      flex: 1;
-    }
-  }
-}
 :root {
   --tab-size-normal-padding: 10px;
   --tab-size-normal-gap: 10px;

package/dist/css/components/Textarea/Textarea.css

@@ -1,8 +1,8 @@
 .textarea {
   width: 100%;
   min-width: 100%;
-  min-height: 160px;
-  max-height: 160px;
+  min-height: var(--textarea-min-height, 160px);
+  max-height: var(--textarea-max-height, 160px);
   padding: var(--textarea-padding, 16px 16px);
   padding: 0;
   margin: 0;

package/package.json

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