@itcase/ui 1.0.44 → 1.0.46

package/dist/components/Code.js

@@ -4,22 +4,11 @@ var React = require('react');
 var PropTypes = require('prop-types');
 var clsx = require('clsx');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
-require('./Text.js');
 require('lodash/castArray');
 require('lodash/camelCase');
 require('../context/UIContext.js');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
-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('../hooks/useStyles.js');
-require('lodash/maxBy');
-require('lodash/upperFirst');
-require('../hooks/styleAttributes.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -196,14 +185,12 @@ function Code(props) {
     inputType,
     before,
     after,
-    separatorComponent
+    separatorComponent,
+    onBlur,
+    onChange,
+    onFocus
   } = props;
   const [otp, setOtp] = React.useState('');
-
-  // const formattedHelpText = useMemo(() => {
-  //   return helpText.replace('{fields}', inputCount)
-  // }, [])
-
   const fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'fill_',
     propsKey: 'inputFill'
@@ -264,17 +251,33 @@ function Code(props) {
     prefix: 'width_',
     propsKey: 'width'
   });
+
+  // NOTE: too many dependencies for "useCallback" and possible too many checks
+  const renderInput = otpInputProps => {
+    return /*#__PURE__*/React__default.default.createElement("input", Object.assign({}, otpInputProps, {
+      autocomplete: "one-time-code",
+      className: clsx__default.default('code__input', caretClass, fillClass, fillHoverClass, placeholderClass, shapeClass, textSizeClass, textColorClass, weightClass, borderWidthClass, borderColorClass, borderColorHoverClass, borderColorFocusClass, sizeClass, fillClass),
+      onBlur: event => {
+        onBlur && onBlur(event);
+        otpInputProps.onBlur(event);
+      },
+      onFocus: event => {
+        onFocus && onFocus(event);
+        otpInputProps.onFocus(event);
+      }
+    }));
+  };
+  React.useEffect(() => {
+    onChange && onChange(otp);
+  }, [otp]);
   return /*#__PURE__*/React__default.default.createElement("div", {
     className: clsx__default.default(className, 'code', widthClass)
   }, before, /*#__PURE__*/React__default.default.createElement(OTPInput, {
     containerStyle: clsx__default.default(className, 'code__wrapper', gapClass),
-    numInputs: inputCount,
     inputType: inputType,
+    numInputs: inputCount,
     placeholder: inputPlaceholder,
-    renderInput: props => /*#__PURE__*/React__default.default.createElement("input", Object.assign({}, props, {
-      autocomplete: "one-time-code",
-      className: clsx__default.default('code__input', caretClass, fillClass, fillHoverClass, placeholderClass, shapeClass, textSizeClass, textColorClass, weightClass, borderWidthClass, borderColorClass, borderColorHoverClass, borderColorFocusClass, sizeClass, fillClass)
-    })),
+    renderInput: renderInput,
     renderSeparator: separatorComponent || null,
     shouldAutoFocus: inputAutoFocus,
     value: otp,

package/dist/components/Swiper.js

@@ -4805,6 +4805,7 @@ function Swiper(props) {
   const isLoop = loop ?? true;
   React.useImperativeHandle(forwardedRef, () => swiperRef.current, []);
   const onInitSwiper = React.useCallback(swiper => {
+    // swiper.touchEventsData.formElements = 'undefined'
     // Set "disabled" state to navigation buttons on init
     if (!isLoop && setPrevBtnDisabled && setNextBtnDisabled) {
       setPrevBtnDisabled(swiper.isBeginning);
@@ -4883,7 +4884,14 @@ function Swiper(props) {
     ref: swiperRef,
     scrollbar: isScrollbar,
     slidesPerView: slidesPerView,
-    spaceBetween: spaceBetween,
+    spaceBetween: spaceBetween
+    // noSwiping={true}
+    // allowTouchMove={false}
+    // touchStartPreventDefault={false}
+    // touchMoveStopPropagation={false}
+    // preventClicks={false}
+    // preventClicksPropagation={false}
+    ,
     speed: speed ?? 500,
     onInit: onInitSwiper,
     onSlideChange: onSlideChange,

package/dist/css/components/Code/Code.css

@@ -1,19 +1,5 @@
 .code {
-  width: 100%;
-  margin: 32px 0 8px;
   display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  gap: 12px;
-  &__wrapper {
-    width: 100%;
-    flex-wrap: nowrap;
-    justify-content: space-between;
-    ^&__input {
-      text-align: center;
-    }
-  }
 }
 .code__input {
   &_size {

package/dist/css/components/Notification/Notification.css

@@ -2,29 +2,26 @@
 }
 .notification {
   &&_type_global {
+    background: none;
+    padding: 0;
     position: fixed;
-    right: 0;
     top: 0;
-    padding: 0;
-    background: none;
+    right: 0;
     z-index: 1000;
     ^&__wrapper {
       width: 100%;
-      align-items: flex-end;
-      display: flex;
-      gap: 20px;
       position: relative;
+      display: flex;
+      flex-flow: column nowrap;
+      align-items: flex-end;
       top: 20px;
       right: 40px;
-      flex-flow: column nowrap;
+      gap: 20px;
       ^^&__item {
         width: 320px;
       }
     }
   }
-}
-:root {
-
 }
 .notification__item {
   &_set {
@@ -56,6 +53,21 @@
     }
   }
 }
+.notification__item {
+  &_set {
+    &_form {
+      width: 100%;
+      ^^&-wrapper {
+        text-align: left;
+        padding: 12px 16px;
+        border-radius: 8px;
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+      }
+    }
+  }
+}
 .notification__item {
   &_status {
     &_success {

package/dist/css/components/Notification/css/__item/notification__item_set_form.css

@@ -0,0 +1,15 @@
+.notification__item {
+  &_set {
+    &_form {
+      width: 100%;
+      ^^&-wrapper {
+        text-align: left;
+        padding: 12px 16px;
+        border-radius: 8px;
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+      }
+    }
+  }
+}

package/package.json

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