@itcase/ui 1.0.34 → 1.0.36

package/dist/components/Avatar.js

@@ -77,8 +77,8 @@ function Avatar(props) {
     propsKey: 'shape'
   });
   var avatarChars = React.useMemo(function () {
-    var firstChar = (firstName[0] || '').toUpperCase();
-    var secondChar = (secondName[0] || '').toUpperCase();
+    var firstChar = ((firstName == null ? void 0 : firstName[0]) || '').toUpperCase();
+    var secondChar = ((secondName == null ? void 0 : secondName[0]) || '').toUpperCase();
     return "" + firstChar + secondChar;
   }, [firstName, secondName]);
   return /*#__PURE__*/React__default.default.createElement("div", {
@@ -90,12 +90,12 @@ function Avatar(props) {
     className: "avatar__image",
     shape: "circular",
     src: src
-  }) : avatarChars ? /*#__PURE__*/React__default.default.createElement(index$1.Text, {
+  }) : /*#__PURE__*/React__default.default.createElement(index$1.Text, {
     className: "avatar__name",
     size: textSize,
     textColor: textColor,
     textWeight: textWeight
-  }, avatarChars) : null, icon && /*#__PURE__*/React__default.default.createElement(index$2.Icon, {
+  }, avatarChars), icon && /*#__PURE__*/React__default.default.createElement(index$2.Icon, {
     className: "avatar__icon",
     fill: iconFill,
     fillHover: iconFillHover,
@@ -120,7 +120,9 @@ Avatar.defaultProps = {
   titleColor: 'surfaceTextPrimary',
   titleTag: 'span',
   titleSize: 'xxl',
-  textColor: 'surfaceTextTertiary'
+  textColor: 'surfaceTextTertiary',
+  firstName: '',
+  secondName: ''
 };
 
 exports.Avatar = Avatar;

package/dist/components/Dropdown.js

@@ -112,14 +112,14 @@ function Dropdown(props) {
   var _useStyles = useStyles.useStyles(props),
     styles = _useStyles.styles;
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(className, 'dropdown', set && "dropdown_set_" + set, shapeClass, fillClass, fillHoverClass, elevationClass, isOpen ? 'dropdown_state_open' : 'dropdown_state_close', animationState.className),
+    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 &&
   /*#__PURE__*/
   // Add "onAnimationEnd" only for wrapper for ignore dropdown button
   React__default.default.createElement("div", {
-    className: "dropdown__wrapper",
+    className: clsx__default.default('dropdown__wrapper', fillClass, fillHoverClass),
     onAnimationEnd: onAnimationEnd
   }, children));
 }

package/dist/components/Grid.js

@@ -309,7 +309,9 @@ function GridRow(props) {
   var id = props.id,
     children = props.children,
     className = props.className,
-    dataTour = props.dataTour;
+    dataTour = props.dataTour,
+    Tag = props.tag,
+    htmlFor = props.htmlFor;
   var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'fill_',
     propsKey: 'fill'
@@ -320,9 +322,10 @@ function GridRow(props) {
   });
   var _useStyles = useStyles.useStyles(props),
     gridRowStyles = _useStyles.styles;
-  return /*#__PURE__*/React__default.default.createElement("div", {
+  return /*#__PURE__*/React__default.default.createElement(Tag, {
     className: clsx__default.default(className, 'grid__row', fillClass, fillHoverClass),
     id: id,
+    htmlFor: htmlFor,
     style: gridRowStyles,
     "data-tour": dataTour
   }, children);
@@ -376,6 +379,9 @@ GridRow.propTypes = {
   zIndexTablet: PropTypes__default.default.number,
   zIndexDesktop: PropTypes__default.default.number
 };
+GridRow.defaultProps = {
+  tag: 'div'
+};
 
 exports.Grid = Grid;
 exports.GridItem = GridItem;

package/dist/components/Label.js

@@ -45,6 +45,8 @@ function Label(props) {
     labelTextWrap = props.labelTextWrap,
     labelTextColor = props.labelTextColor,
     set = props.set,
+    before = props.before,
+    after = props.after,
     dataTour = props.dataTour,
     type = props.type;
   var alignDirectionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
@@ -85,7 +87,7 @@ function Label(props) {
     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),
     "data-tour": dataTour,
     style: labelStyles
-  }, /*#__PURE__*/React__default.default.createElement("div", {
+  }, before, /*#__PURE__*/React__default.default.createElement("div", {
     className: "label__inner"
   }, typeof label === 'string' ? /*#__PURE__*/React__default.default.createElement(index.Text, {
     className: "label__label",
@@ -94,7 +96,7 @@ function Label(props) {
     textWrap: labelTextWrap
   }, label) : /*#__PURE__*/React__default.default.createElement("div", {
     className: "label__label"
-  }, label), children));
+  }, label), children), after);
 }
 Label.propTypes = {
   children: PropTypes__default.default.any,

package/dist/components/Loader.js

@@ -5,13 +5,13 @@ var PropTypes = require('prop-types');
 var clsx = require('clsx');
 var index = require('./Text.js');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
+var useStyles = require('../useStyles-e4accb53.js');
 require('../constants/componentProps/textColor.js');
 require('../constants/componentProps/textColorActive.js');
 require('../constants/componentProps/textColorHover.js');
 require('../constants/componentProps/size.js');
 require('../constants/componentProps/textStyle.js');
 require('../constants/componentProps/textWeight.js');
-require('../useStyles-e4accb53.js');
 require('lodash/camelCase');
 require('lodash/maxBy');
 require('lodash/upperFirst');
@@ -27,8 +27,15 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 
+var loaderConfig = {
+  appearance: {},
+  setAppearance: function setAppearance(newComponent) {
+    loaderConfig.appearance = newComponent;
+  }
+};
 function Loader(props) {
-  var className = props.className,
+  var appearance = props.appearance,
+    className = props.className,
     children = props.children,
     set = props.set,
     text = props.text,
@@ -42,16 +49,32 @@ function Loader(props) {
     prefix: 'fill_',
     propsKey: 'fill'
   });
+  var widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'width_',
+    propsKey: 'width'
+  });
+  var heightClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'height_',
+    propsKey: 'height'
+  });
+  var positionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'position_',
+    propsKey: 'position'
+  });
+  var _useStyles = useStyles.useStyles(props),
+    loader = _useStyles.styles;
+  var itemFill = itemFillClass || loaderConfig.appearance[appearance] && ("fill_" + loaderConfig.appearance[appearance].itemFillClass.replace(/([A-Z])/g, '-$1')).toLowerCase();
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default('loader', fillClass, className, set && "loader_set_" + set)
+    className: clsx__default.default('loader', positionClass, widthClass, heightClass, fillClass || loaderConfig.appearance[appearance] && ("fill_" + loaderConfig.appearance[appearance].fillClass).replace(/([A-Z])/g, '-$1').toLowerCase(), className, set && "loader_set_" + set),
+    style: loader
   }, children || /*#__PURE__*/React__default.default.createElement("div", {
     className: "loader__inner"
   }, /*#__PURE__*/React__default.default.createElement("span", {
-    className: clsx__default.default('loader__item', itemFillClass)
+    className: clsx__default.default('loader__item', itemFill)
   }), /*#__PURE__*/React__default.default.createElement("span", {
-    className: clsx__default.default('loader__item', itemFillClass)
+    className: clsx__default.default('loader__item', itemFill)
   }), /*#__PURE__*/React__default.default.createElement("span", {
-    className: clsx__default.default('loader__item', itemFillClass)
+    className: clsx__default.default('loader__item', itemFill)
   })), text && /*#__PURE__*/React__default.default.createElement(index.Text, {
     className: "loader__text",
     size: textSize,
@@ -68,3 +91,4 @@ Loader.propTypes = {
 };
 
 exports.Loader = Loader;
+exports.loaderConfig = loaderConfig;

package/dist/components/RadioButton.js

@@ -47,7 +47,8 @@ function RadioButton(props) {
     label = props.label,
     labelTextSize = props.labelTextSize,
     labelTextWidth = props.labelTextWidth,
-    labelTextColor = props.labelTextColor;
+    labelTextColor = props.labelTextColor,
+    Tag = props.tag;
   var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'fill_',
     propsKey: 'fill'
@@ -88,7 +89,7 @@ function RadioButton(props) {
     prefix: 'border-color_',
     propsKey: checked ? 'stateBorderColorDisabledChecked' : 'stateBorderColorDisabled'
   });
-  return /*#__PURE__*/React__default.default.createElement("label", {
+  return /*#__PURE__*/React__default.default.createElement(Tag, {
     htmlFor: id,
     "class": clsx__default.default(className, 'radio-button', fillClass, shapeClass)
   }, /*#__PURE__*/React__default.default.createElement("div", {
@@ -119,8 +120,9 @@ function RadioButton(props) {
 RadioButton.propTypes = {
   className: PropTypes__default.default.string
 };
-RadioButton.defaulProps = {
-  shape: 'circular'
+RadioButton.defaultProps = {
+  shape: 'circular',
+  tag: 'label'
 };
 
 exports.RadioButton = RadioButton;

package/dist/css/components/Dropdown/Dropdown.css

@@ -6,15 +6,14 @@
       ^^&__wrapper {
         display: flex;
         flex-direction: column;
-        padding: 12px 0;
+        padding: var(--dropdown-normal-padding, 12px 0);
       }
     }
     &_compact {
       ^^&__wrapper {
         display: flex;
         flex-direction: column;
-        padding: 8px 0;
-        gap: 8px;
+        padding: var(--dropdown-compact-padding, 8px 0);
       }
     }
   }
@@ -36,8 +35,11 @@
 .dropdown {
   &_shape {
     &_rounded {
-      border-radius: 12px;
-      position: relative;
+      border-radius: var(--dropdown-shape-rounded, 12px);
+      ^^&__wrapper {
+        border-radius: var(--dropdown-shape-rounded, 12px);
+        overflow: hidden;
+      }
     }
   }
 }
@@ -62,11 +64,11 @@
     &_set {
       &_normal {
         min-width: 240px;
-        padding: 10px 12px 10px 16px;
+        padding: var(--dropdown-item-normal-padding, 10px 12px 10px 16px);
       }
       &_compact {
         min-width: 180px;
-        padding: 0 12px 0 16px;
+        padding: var(--dropdown-item-compact-padding, 0 12px 0 16px);
       }
     }
     &-label {
@@ -76,7 +78,6 @@
       @each $size in normal, compact {
         &_$(size) {
           ^^&-label {
-            padding: var(--dropdown-item-size-$(size)-padding);
             gap: var(--dropdown-item-size-$(size)-gap);
           }
         }

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

@@ -153,6 +153,7 @@
 }
 .grid {
   &__item {
+    transition: var(--grid-item-transition);
   }
 }
 .grid {
@@ -210,5 +211,10 @@
 .grid {
   &__row {
     display: grid;
+    transition: var(--grid-row-transition);
   }
 }
+:root {
+  --grid-row-transition: all 0.2s ease 0s;
+  --grid-item-transition: all 0.2s ease 0s;
+}

package/dist/css/components/Grid/css/__item/grid__item.css

@@ -1,4 +1,5 @@
 .grid {
   &__item {
+    transition: var(--grid-item-transition);
   }
 }

package/dist/css/components/Grid/css/__row/grid__row.css

@@ -1,5 +1,6 @@
 .grid {
   &__row {
     display: grid;
+    transition: var(--grid-row-transition);
   }
 }

package/dist/css/components/Group/Group.css

@@ -1,15 +1,5 @@
 .group {
-  &_wrap {
-    &_wrap {
-      flex-wrap: wrap;
-    }
-    &_nowrap {
-      flex-wrap: nowrap;
-    }
-    &_wrap-reverse {
-      flex-wrap: wrap-reverse;
-    }
-  }
+  transition: var(--group-transition);
 }
 
 .group {

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

@@ -33,7 +33,7 @@
 .input {
   &_shape {
     &_rounded {
-      border-radius: 4px;
+      border-radius: var(--input-shape-rounded, 4px);
       position: relative;
     }
     &_underline {

package/dist/css/components/Label/Label.css

@@ -1,5 +1,7 @@
 .label {
   display: inline-flex;
+  position: relative;
+  overflow: hidden;
   &__inner {
     font-size: 0;
     line-height: 0;
@@ -10,7 +12,9 @@
   &_size {
     @each $size in xxs, xs, s, m, l, xl, xxl {
       &_$(size) {
-        padding: var(--label-size-$(size)-padding);
+        ^^&__inner {
+          padding: var(--label-size-$(size)-padding);
+        }
       }
     }
   }

package/dist/css/components/Loader/Loader.css

@@ -24,7 +24,7 @@
         border-radius: 100%;
         display: inline-block;
         margin: 4px;
-        animation: loaderFilter 1.4s infinite ease-in-out both;
+        animation: loaderSimple 1.4s infinite ease-in-out both;
         &:first-child {
           animation-delay: -0.32s;
         }
@@ -35,7 +35,7 @@
     }
   }
 }
-@keyframes loaderFilter {
+@keyframes loaderSimple {
   0%, 80%, 100% {
     transform: scale(0);
   } 40% {

package/dist/css/components/RadioButton/RadioButton.css

@@ -32,6 +32,9 @@
       width: 100%;
       height: 100%;
       z-index: 3;
+      &:disabled + .radio-button__state {
+        border-color: transparent !important;
+      }
     }
     ^&__state {
       flex: 1;
@@ -66,14 +69,18 @@
 .radio-button {
   &_shape {
     &_rounded {
-      border-radius: 4px;
-      position: relative;
-      overflow: hidden;
+      ^^&__item {
+        border-radius: 4px;
+        position: relative;
+        overflow: hidden;
+      }
     }
     &_circular {
-      border-radius: 50%;
-      position: relative;
-      overflow: hidden;
+      ^^&__item {
+        border-radius: 50%;
+        position: relative;
+        overflow: hidden;
+      }
     }
   }
 }

package/package.json

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