@itcase/ui 1.0.30 → 1.0.32

package/dist/components/Dropdown.js

@@ -39,48 +39,37 @@ function Dropdown(props) {
     children = props.children,
     className = props.className;
     props.id;
-    var set = props.set;
+    var set = props.set,
+    isOpen = props.isOpen,
+    setIsOpen = props.setIsOpen;
   var dropdownRef = React.useRef(null);
-  var _useState = React.useState(false),
-    isOpen = _useState[0],
-    setIsOpen = _useState[1];
-  var _useState2 = React.useState({
+
+  // const [isOpen, setIsOpen] = useState(false)
+  var _useState = React.useState({
       className: ''
     }),
-    animationState = _useState2[0],
-    setAnimationState = _useState2[1];
-  var onClick = React.useCallback(function () {
-    setIsOpen(function (prevState) {
-      return !prevState;
-    });
-    setAnimationState(function (prevState) {
-      return {
-        className: prevState.className === animationOpen ? animationClose : animationOpen
-      };
-    });
-  }, []);
+    animationState = _useState[0],
+    setAnimationState = _useState[1];
   var onAnimationEnd = React.useCallback(function (event) {
     // When component is change his visibility(display) in DOM,
     // animation of close can run unnecessary on showing element.
-    // console.info('------  onAnimationEnd   -------------')
-    // console.log('event: ', event)
-    // console.log('event.target: ', event.target)
-    // console.log('isOpen: ', isOpen)
-    // console.log('animationOpen: ', animationOpen)
-    // console.log('animationClose: ', animationClose)
     // const dropdownElement = dropdownRef.current
-    // console.log('dropdownElement', dropdownElement)
-    // console.log('dropdownElement hasClass', dropdownElement.hasClass(animationClose))
     setAnimationState(function (prevState) {
       return {
         className: isOpen ? prevState.className : ''
       };
     });
   }, [isOpen]);
+  React.useEffect(function () {
+    setAnimationState(function (prevState) {
+      return {
+        className: isOpen ? animationOpen : animationClose
+      };
+    });
+  }, [isOpen]);
 
   // Close dropdown by click outside
   React.useEffect(function () {
-    // console.info('---------   useEffect  Dropdown   -------')
     // Add a handler to keep track of the click target.
     function onClickWindow(event) {
       var dropdownElement = dropdownRef.current;
@@ -92,14 +81,13 @@ function Dropdown(props) {
         if (!isContainsTarget && hasOpenClass) {
           // Trigger close event with animation
           // dropdownElement.click() - trigger "onClickWindow" again
-          onClick();
+          setIsOpen(false);
         }
       }
     }
     // Add event listener for current dropdown on first render
     window.addEventListener('click', onClickWindow);
     return function () {
-      // console.info('---------  UNMOUNT  useEffect  Dropdown   -------')
       // Remove event listener for current dropdown on unmount
       window.removeEventListener('click', onClickWindow);
     };
@@ -123,17 +111,10 @@ function Dropdown(props) {
   });
   var _useStyles = useStyles.useStyles(props),
     styles = _useStyles.styles;
-
-  // console.warn('======   Dropdown  ========')
-  // console.log('props: ', props)
-  // console.log('isOpen: ', isOpen)
-  // console.log('animationState: ', animationState)
-
   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),
     ref: dropdownRef,
-    style: styles,
-    onClick: onClick
+    style: styles
   }, children &&
   /*#__PURE__*/
   // Add "onAnimationEnd" only for wrapper for ignore dropdown button

package/dist/components/Grid.js

@@ -230,6 +230,18 @@ function GridItem(props) {
     prefix: 'fill_',
     propsKey: 'fill'
   });
+  var gapClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'gap_',
+    propsKey: 'gap'
+  });
+  var rowGapClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'row-gap_',
+    propsKey: 'rowGap'
+  });
+  var columnGapClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'column-gap_',
+    propsKey: 'columnGap'
+  });
   var directionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'direction_',
     propsKey: 'direction'
@@ -237,7 +249,7 @@ function GridItem(props) {
   var _useStyles = useStyles.useStyles(props),
     gridItemStyles = _useStyles.styles;
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(className, 'grid__item', orderClass, fillClass, alignSelfClass, justifySelfClass, columnStartClass, columnEndClass, columnSpanClass, rowStartClass, rowEndClass, rowSpanClass, directionClass),
+    className: clsx__default.default(className, 'grid__item', orderClass, fillClass, alignSelfClass, justifySelfClass, columnStartClass, columnEndClass, columnSpanClass, rowStartClass, rowEndClass, rowSpanClass, directionClass, gapClass, rowGapClass, columnGapClass),
     id: id,
     "data-tour": dataTour,
     style: gridItemStyles

package/dist/components/Label.js

@@ -75,10 +75,14 @@ function Label(props) {
     prefix: 'border_',
     propsKey: 'borderType'
   });
+  var wrapClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'word-wrap_',
+    propsKey: 'labelTextWrap'
+  });
   var _useStyles = useStyles.useStyles(props),
     labelStyles = _useStyles.styles;
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(className, 'label', fillClass || appearance && ("fill_" + labelConfig.appearance[appearance].fillClass).replace(/([A-Z])/g, '-$1').toLowerCase(), shapeClass, borderClass, borderTypeClass, sizeClass, alignDirectionClass, alignClass, type && "label_type_" + type, set && "label_set_" + set),
+    className: clsx__default.default(className, 'label', fillClass || 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", {

package/dist/components/Segmented.js

@@ -53,7 +53,8 @@ var Segmented = /*#__PURE__*/React__default.default.forwardRef(function (props,
       offsetLeft = activeSegmentRef.current.offsetLeft;
     }
     controlRef.current.style.setProperty('--segmented-active-width', offsetWidth + "px");
-    controlRef.current.style.setProperty('--segmented-active-x-pos', offsetLeft - 2 + "px");
+    // controlRef.current.style.setProperty('--segmented-active-x-pos', `${offsetLeft - 2}px`)
+    controlRef.current.style.setProperty('--segmented-active-x-pos', offsetLeft + "px");
   }, [activeSegment, segmentsRefs]);
   var indicatorFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'fill_',

package/dist/components/Select.js

@@ -7669,23 +7669,28 @@ SelectNoOptions.propTypes = {
 
 var SelectOption = function SelectOption(props) {
   var label = props.label,
-    isSelected = props.isSelected,
-    data = props.data;
+    isSelected = props.isSelected;
+    props.data;
   var _props$selectProps = props.selectProps,
     optionFill = _props$selectProps.optionFill,
     optionFillHover = _props$selectProps.optionFillHover,
     optionBorder = _props$selectProps.optionBorder,
     optionBorderType = _props$selectProps.optionBorderType,
+    optionSelected = _props$selectProps.optionSelected,
     optionTextSize = _props$selectProps.optionTextSize,
     optionShape = _props$selectProps.optionShape,
-    optionTextColor = _props$selectProps.optionTextColor;
+    optionTextColor = _props$selectProps.optionTextColor,
+    optionBefore = _props$selectProps.optionBefore,
+    optionAfter = _props$selectProps.optionAfter;
   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)
-  }), data.optionBefore, /*#__PURE__*/React__namespace.default.createElement(index$2.Text, {
+  }), optionBefore, /*#__PURE__*/React__namespace.default.createElement(index$2.Text, {
     className: "select__menu-list-item_option",
     size: optionTextSize,
     textColor: optionTextColor
-  }, label), data.optionAfter);
+  }, label), isSelected && /*#__PURE__*/React__namespace.default.createElement("div", {
+    className: "select__menu-list-item_selected"
+  }, optionSelected), optionAfter);
 };
 SelectOption.propTypes = {
   selectProps: PropTypes__default.default.shape({
@@ -7697,8 +7702,7 @@ SelectOption.propTypes = {
     optionAfter: PropTypes__default.default.any
   }),
   label: PropTypes__default.default.string,
-  isSelected: PropTypes__default.default.any,
-  data: PropTypes__default.default.object
+  isSelected: PropTypes__default.default.any
 };
 
 var SelectPlaceholder = function SelectPlaceholder(props) {
@@ -7784,6 +7788,9 @@ var SelectContainer = /*#__PURE__*/React__namespace.default.forwardRef(function
     noOptionsText = props.noOptionsText,
     openMenuOnClick = props.openMenuOnClick,
     options = props.options,
+    optionBefore = props.optionBefore,
+    optionAfter = props.optionAfter,
+    optionSelected = props.optionSelected,
     elevation = props.elevation,
     placeholder = props.placeholder,
     set = props.set,
@@ -7923,6 +7930,9 @@ var SelectContainer = /*#__PURE__*/React__namespace.default.forwardRef(function
     optionShape: optionShapeClass,
     optionBorder: optionBorderClass,
     optionBorderType: optionBorderTypeClass,
+    optionSelected: optionSelected,
+    optionBefore: optionBefore,
+    optionAfter: optionAfter,
     inputBefore: inputBefore,
     inputAfter: inputAfter,
     inputFill: inputFillClass,

package/dist/css/components/DatePicker/DatePicker.css

@@ -727,14 +727,18 @@
   box-shadow: var(--date-picker-box-shadow);
   font-size: inherit;
   display: flex;
-  &-popper {
-    z-index: 10;
-  }
   &__triangle {
     display: none;
   }
   &-wrapper {
     width: 100%;
+    ^&__input-container {
+      & .input {
+        cursor: pointer;
+      }
+    }
+  }
+  &__tab-loop {
     ^&-popper {
       z-index: 1000 !important;
     }

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

@@ -42,6 +42,7 @@
 }
 .dropdown {
   &__item {
+    cursor: pointer;
     min-width: 240px;
     &-label {
       display: block;

package/dist/css/components/Segmented/Segmented.css

@@ -14,11 +14,15 @@
         position: absolute;
         content: '';
         display: block;
-        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12), 0 3px 1px rgba(0, 0, 0, 0.04);
+        box-shadow:
+          0 3px 8px rgba(0, 0, 0, 0.12),
+          0 3px 1px rgba(0, 0, 0, 0.04);
         left: var(--segmented-active-x-pos);
         top: 0;
         z-index: 1;
-        transition: left 0.3s ease, width 0.3s ease;
+        transition:
+          left 0.3s ease,
+          width 0.3s ease;
       }
       ^^&__item {
         border-radius: 6px;
@@ -26,7 +30,7 @@
         position: relative;
         display: flex;
         align-items: center;
-        &::after {
+        /* &::after {
           width: 1px;
           height: 100%;
           background: var(--color-surface-border-tertiary);
@@ -39,7 +43,7 @@
           &::after {
             display: none;
           }
-        }
+        } */
         &_state_active {
           & label {
             color: #fff;
@@ -68,7 +72,7 @@
           transition: color 0.5s ease;
           cursor: pointer;
           &-text {
-             @mixin word-wrap;
+            @mixin word-wrap;
           }
         }
       }

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

@@ -170,9 +170,21 @@
       border-radius: var(--select-menu-border-radius, 0);
       &-item {
         width: 100%;
+        position: relative;
+        &_state_selected  {
+
+        }
         &_option {
           z-index: 100000;
         }
+        &_selected {
+          height: 100%;
+          display: flex;
+          align-items: center;
+          position: absolute;
+          right: 8px;
+          top: 0;
+        }
       }
 
       &--is-multi {
@@ -274,13 +286,11 @@
     flex-wrap: nowrap;
     align-items: center;
     &--is-multi {
+      flex-wrap: wrap;
       gap: 8px;
       & .select__placeholder {
         position: relative;
       }
-      & .select__input-container {
-        display: none;
-      }
     }
   }
 }

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

@@ -17,9 +17,21 @@
       border-radius: var(--select-menu-border-radius, 0);
       &-item {
         width: 100%;
+        position: relative;
+        &_state_selected  {
+
+        }
         &_option {
           z-index: 100000;
         }
+        &_selected {
+          height: 100%;
+          display: flex;
+          align-items: center;
+          position: absolute;
+          right: 8px;
+          top: 0;
+        }
       }
 
       &--is-multi {

package/dist/css/components/Select/css/__value-container/select__value-container.css

@@ -7,13 +7,11 @@
     flex-wrap: nowrap;
     align-items: center;
     &--is-multi {
+      flex-wrap: wrap;
       gap: 8px;
       & .select__placeholder {
         position: relative;
       }
-      & .select__input-container {
-        display: none;
-      }
     }
   }
 }

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

@@ -44,6 +44,7 @@
     display: flex;
     flex-flow: column nowrap;
     justify-content: flex-end;
+    cursor: pointer;
     &__wrapper {
       display: flex;
       flex: 1;

package/dist/css/styles/column-gap/column-gap.css

@@ -0,0 +1,5 @@
+.column-gap {
+  @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 {
+    column-gap: $(val)px;
+  }
+}

package/dist/css/styles/gap/gap.css

@@ -0,0 +1,5 @@
+.gap {
+  @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 {
+    gap: $(val)px;
+  }
+}

package/dist/css/styles/row-gap/row-gap.css

@@ -0,0 +1,5 @@
+.row-gap {
+  @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 {
+    row-gap: $(val)px;
+  }
+}

package/package.json

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