@itcase/ui 1.0.47 → 1.0.49

package/dist/components/Drawer.js

@@ -0,0 +1,197 @@
+'use strict';
+
+var React = require('react');
+var PropTypes = require('prop-types');
+var clsx = require('clsx');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
+var getDirectionStyle = function getDirectionStyle(dir, size) {
+  switch (dir) {
+    case 'left':
+      return {
+        top: 0,
+        left: 0,
+        transform: 'translate3d(-100%, 0, 0)',
+        width: size,
+        height: '100vh'
+      };
+
+    case 'right':
+      return {
+        top: 0,
+        right: 0,
+        transform: 'translate3d(100%, 0, 0)',
+        width: size,
+        height: '100vh'
+      };
+
+    case 'bottom':
+      return {
+        left: 0,
+        right: 0,
+        bottom: 0,
+        transform: 'translate3d(0, 100%, 0)',
+        width: '100%',
+        height: size
+      };
+
+    case 'top':
+      return {
+        left: 0,
+        right: 0,
+        top: 0,
+        transform: 'translate3d(0, -100%, 0)',
+        width: '100%',
+        height: size
+      };
+
+    default:
+      return {};
+  }
+};
+
+var EZDrawer = function EZDrawer(props) {
+  var open = props.open,
+      _props$onClose = props.onClose,
+      onClose = _props$onClose === void 0 ? function () {} : _props$onClose,
+      children = props.children,
+      style = props.style,
+      _props$enableOverlay = props.enableOverlay,
+      enableOverlay = _props$enableOverlay === void 0 ? true : _props$enableOverlay,
+      _props$overlayColor = props.overlayColor,
+      overlayColor = _props$overlayColor === void 0 ? '#000' : _props$overlayColor,
+      _props$overlayOpacity = props.overlayOpacity,
+      overlayOpacity = _props$overlayOpacity === void 0 ? 0.4 : _props$overlayOpacity,
+      _props$zIndex = props.zIndex,
+      zIndex = _props$zIndex === void 0 ? 100 : _props$zIndex,
+      _props$duration = props.duration,
+      duration = _props$duration === void 0 ? 500 : _props$duration,
+      direction = props.direction,
+      _props$size = props.size,
+      size = _props$size === void 0 ? 250 : _props$size,
+      className = props.className,
+      customIdSuffix = props.customIdSuffix,
+      _props$lockBackground = props.lockBackgroundScroll,
+      lockBackgroundScroll = _props$lockBackground === void 0 ? false : _props$lockBackground,
+      _props$overlayClassNa = props.overlayClassName,
+      overlayClassName = _props$overlayClassNa === void 0 ? '' : _props$overlayClassNa;
+  var bodyRef = React.useRef(null);
+  React.useEffect(function () {
+    var updatePageScroll = function updatePageScroll() {
+      bodyRef.current = window.document.querySelector('body');
+
+      if (bodyRef.current && lockBackgroundScroll) {
+        if (open) {
+          bodyRef.current.style.overflow = 'hidden';
+        } else {
+          bodyRef.current.style.overflow = '';
+        }
+      }
+    };
+
+    updatePageScroll();
+  }, [open]);
+  var idSuffix = React.useMemo(function () {
+    return customIdSuffix || (Math.random() + 1).toString(36).substring(7);
+  }, [customIdSuffix]);
+  var overlayStyles = {
+    backgroundColor: "" + overlayColor,
+    opacity: "" + overlayOpacity,
+    zIndex: zIndex
+  };
+
+  var drawerStyles = _extends({
+    zIndex: zIndex + 1,
+    transitionDuration: duration + "ms"
+  }, getDirectionStyle(direction, size), style);
+
+  return React__default.default.createElement("div", {
+    id: 'EZDrawer' + idSuffix,
+    className: 'EZDrawer'
+  }, React__default.default.createElement("input", {
+    type: 'checkbox',
+    id: 'EZDrawer__checkbox' + idSuffix,
+    className: 'EZDrawer__checkbox',
+    onChange: onClose,
+    checked: open
+  }), React__default.default.createElement("nav", {
+    role: 'navigation',
+    id: 'EZDrawer__container' + idSuffix,
+    style: drawerStyles,
+    className: 'EZDrawer__container ' + className
+  }, children), enableOverlay && React__default.default.createElement("label", {
+    htmlFor: 'EZDrawer__checkbox' + idSuffix,
+    id: 'EZDrawer__overlay' + idSuffix,
+    className: 'EZDrawer__overlay ' + overlayClassName,
+    style: overlayStyles
+  }));
+};
+
+function Drawer(props) {
+  const {
+    isOpenModal,
+    type,
+    closeModal,
+    children,
+    size,
+    before,
+    after,
+    dataTour,
+    direction,
+    className
+  } = props;
+  return /*#__PURE__*/React__default.default.createElement(EZDrawer, {
+    className: clsx__default.default('drawer', type && `drawer_type_${type}`, className, dataTour && `data-tour-${dataTour}`),
+    direction: direction || 'right',
+    lockBackgroundScroll: true,
+    open: isOpenModal,
+    overlayClassName: "drawer__overlay",
+    size: size || 600,
+    onClose: closeModal
+  }, before && /*#__PURE__*/React__default.default.createElement("div", {
+    className: "drawer__before"
+  }, before), children && /*#__PURE__*/React__default.default.createElement("div", {
+    className: "drawer__wrapper"
+  }, children), after && /*#__PURE__*/React__default.default.createElement("div", {
+    className: "drawer__after"
+  }, after));
+}
+Drawer.propTypes = {
+  isOpenModal: PropTypes__default.default.bool.isRequired,
+  after: PropTypes__default.default.any,
+  before: PropTypes__default.default.any,
+  children: PropTypes__default.default.any,
+  className: PropTypes__default.default.string,
+  closeModal: PropTypes__default.default.func,
+  dataTour: PropTypes__default.default.string,
+  direction: PropTypes__default.default.string,
+  // "right", "left", "top", "bottom"
+  size: PropTypes__default.default.number,
+  // width in px
+  type: PropTypes__default.default.string
+};
+
+exports.Drawer = Drawer;

package/dist/components/Image.js

@@ -34,8 +34,8 @@ function Image(props) {
     caption,
     children,
     className,
-    imgClassName,
-    imgWrapClassName,
+    imageWrapperClassName,
+    imageClassName,
     overlay,
     src,
     title,
@@ -88,14 +88,14 @@ function Image(props) {
     onClick: onClick,
     style: styles
   }, before, /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default('image__wrapper', imgWrapClassName),
+    className: clsx__default.default('image__wrapper', imageWrapperClassName),
     style: wrapperStyles
   }, /*#__PURE__*/React__default.default.createElement("img", {
     src: src,
     alt: alt,
     title: title,
     style: imageStyles,
-    className: clsx__default.default('image__item', widthClass, heightClass, imgClassName, borderClass, borderColorImageClass),
+    className: clsx__default.default('image__item', widthClass, heightClass, imageClassName, borderClass, borderColorImageClass),
     onError: onError
   }), overlay, caption, children), after);
 }
@@ -116,7 +116,7 @@ Image.propTypes = {
   horizontalContentAlignDesktop: PropTypes__default.default.oneOf(horizontalContentAlign.default),
   horizontalContentAlignMobile: PropTypes__default.default.oneOf(horizontalContentAlign.default),
   horizontalContentAlignTablet: PropTypes__default.default.oneOf(horizontalContentAlign.default),
-  imgClassName: PropTypes__default.default.string,
+  imageClassName: PropTypes__default.default.string,
   imgWrapClassName: PropTypes__default.default.string,
   onClick: PropTypes__default.default.func,
   resizeMode: PropTypes__default.default.oneOf(resizeMode.default),

package/dist/components/Modal.js

@@ -59,6 +59,7 @@ const Modal = /*#__PURE__*/React__default.default.forwardRef(function Modal(prop
     contentClassName,
     id,
     isFader,
+    faderClassName,
     faderFill,
     faderFillGradient,
     faderOpacity,
@@ -66,7 +67,7 @@ const Modal = /*#__PURE__*/React__default.default.forwardRef(function Modal(prop
     isScrollOnOpen,
     isSetFocusOnOpen,
     modalQuerySelector,
-    isOutsideClose,
+    debug,
     onCloseModal,
     onOpenModal
   } = props;
@@ -159,9 +160,9 @@ const Modal = /*#__PURE__*/React__default.default.forwardRef(function Modal(prop
     closeModal,
     modalElement
   }));
-  const contentFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'fill_',
-    propsKey: 'contentFill'
+    propsKey: 'fill'
   });
   const shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'modal-shape_',
@@ -191,11 +192,11 @@ const Modal = /*#__PURE__*/React__default.default.forwardRef(function Modal(prop
   return modalElement && /*#__PURE__*/ReactDOM__default.default.createPortal(
   // Any valid React child: JSX, strings, arrays, etc.
   isOpen ? /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default('modal-content', contentClassName, contentFillClass, shapeClass, borderColorClass, borderWidthClass, borderTypeClass, elevationClass),
+    className: clsx__default.default('modal-content', contentClassName, fillClass, shapeClass, borderColorClass, borderWidthClass, borderTypeClass, elevationClass),
     id: id,
     ref: modalContentRef,
     tabIndex: 0,
-    onBlur: isOutsideClose ? undefined : closeModal,
+    onBlur: debug ? undefined : closeModal,
     style: modalStyles
   }, closeButton && /*#__PURE__*/React__default.default.createElement("div", {
     className: "modal-content__close",
@@ -205,7 +206,7 @@ const Modal = /*#__PURE__*/React__default.default.forwardRef(function Modal(prop
     fill: faderFill,
     fillGradient: faderFillGradient,
     opacity: faderOpacity,
-    className: "modal__fader",
+    className: clsx__default.default('modal__fader', 'fader_type_modal', faderClassName),
     isFader: isFader
   })) : null,
   // A DOM element
@@ -225,7 +226,7 @@ Modal.propTypes = {
   isScrollOnOpen: PropTypes__default.default.bool,
   isSetFocusOnOpen: PropTypes__default.default.bool,
   modalQuerySelector: PropTypes__default.default.string,
-  isOutsideClose: PropTypes__default.default.bool,
+  debug: PropTypes__default.default.bool,
   onCloseModal: PropTypes__default.default.func,
   onOpenModal: PropTypes__default.default.func
 };

package/dist/components/Swiper.js

@@ -4759,13 +4759,16 @@ SwiperSlide.displayName = 'SwiperSlide';
 function Swiper(props) {
   const {
     activeSlideIndex,
-    allowTouchMove,
     autoHeight,
     breakpoints,
     children,
     className,
     direction,
-    disabledButtonClass,
+    allowTouchMove,
+    swiperSlideClass,
+    preventClicks,
+    preventClicksPropagation,
+    simulateTouch,
     forwardedRef,
     // https://github.com/vercel/next.js/issues/4957
     freeMode,
@@ -4865,23 +4868,15 @@ function Swiper(props) {
     className: "swiper-block__next swiper-button",
     ref: nextRef
   }, nextButton))), /*#__PURE__*/React__default.default.createElement(Swiper$1, {
-    allowTouchMove: allowTouchMove,
     autoHeight: autoHeight ?? false,
     breakpoints: breakpoints,
+    allowTouchMove: allowTouchMove,
+    centeredSlides: true,
     className: clsx__default.default('swiper-block__swiper', swiperClass),
     direction: direction,
     freeMode: freeMode,
     init: isInit ?? true,
     loop: isLoop,
-    noSwipingClass: "swiper-no-swiping",
-    noSwiping: true,
-    a11y: false,
-    watchSlidesProgress: true,
-    noSwipingSelector: 'button',
-    allowTouchMove: false,
-    preventClicks: false,
-    preventClicksPropagation: false,
-    simulateTouch: false,
     modules: modules,
     mousewheel: mousewheel,
     navigation: isNavigation ? {
@@ -4889,28 +4884,24 @@ function Swiper(props) {
       nextEl
     } : false,
     normalizeSlideIndex: normalizeSlideIndex,
-    pagination: isPagination,
-    ref: swiperRef,
-    scrollbar: isScrollbar,
-    slidesPerView: slidesPerView,
-    spaceBetween: spaceBetween
-    // noSwiping={true}
-    // allowTouchMove={false}
-    // touchStartPreventDefault={false}
-    // touchMoveStopPropagation={false}
-    // preventClicks={false}
-    // preventClicksPropagation={false}
-    ,
-    speed: speed ?? 500,
     onInit: onInitSwiper,
     onSlideChange: onSlideChange,
     onSlideNextTransitionEnd: onSlideNextTransitionEnd,
     onSlidePrevTransitionEnd: onSlidePrevTransitionEnd,
     onSwiper: onSwiper,
+    onTransitionStart: onTransitionStart,
     onUpdate: onUpdate,
-    onTransitionStart: onTransitionStart
+    pagination: isPagination,
+    preventClicks: preventClicks,
+    preventClicksPropagation: preventClicksPropagation,
+    ref: swiperRef,
+    scrollbar: isScrollbar,
+    simulateTouch: simulateTouch,
+    slidesPerView: slidesPerView,
+    spaceBetween: spaceBetween,
+    speed: speed ?? 500
   }, children || items?.map((item, i) => /*#__PURE__*/React__default.default.createElement(SwiperSlide, {
-    className: clsx__default.default(alignDirectionClass, alignClass),
+    className: clsx__default.default('swiper-block__item', swiperSlideClass, alignDirectionClass, alignClass),
     key: `swiper-slide_${i}`
   }, item))));
 }

package/dist/css/components/Choice/Choice.css

@@ -4,42 +4,6 @@
   &__wrapper {
     position: relative;
     display: flex;
-    ^&__item {
-      min-width: 30px;
-      border-left: 0;
-      border-top: 0;
-      border-bottom: 0;
-      position: relative;
-      display: flex;
-      &:hover {
-        background: var(--choice-item-background-hover);
-      }
-      &:last-child {
-        border-right: 0;
-      }
-      &_state_active {
-      }
-      & input {
-        width: 100%;
-        height: 100%;
-        margin: 0;
-        border: 0;
-        position: absolute;
-        inset: 0 0 0 0;
-        z-index: 2;
-        opacity: 0%;
-        cursor: pointer;
-      }
-      &-label {
-        width: 100%;
-        text-align: center;
-        position: relative;
-        display: block;
-        z-index: 3;
-        transition: color 0.5s ease;
-        cursor: pointer;
-      }
-    }
   }
 }
 .choice {
@@ -73,6 +37,42 @@
     }
   }
 }
+.choice__item {
+  min-width: 30px;
+  border-left: 0;
+  border-top: 0;
+  border-bottom: 0;
+  position: relative;
+  display: flex;
+  &:hover {
+    background: var(--choice-item-background-hover);
+  }
+  &:last-child {
+    border-right: 0;
+  }
+  &_state_active {
+  }
+  & input {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    border: 0;
+    position: absolute;
+    inset: 0 0 0 0;
+    z-index: 2;
+    opacity: 0%;
+    cursor: pointer;
+  }
+  &-label {
+    width: 100%;
+    text-align: center;
+    position: relative;
+    display: block;
+    z-index: 3;
+    transition: color 0.5s ease;
+    cursor: pointer;
+  }
+}
 :root {
   --choice-item-background-hover: var(--color-surface-secondary);
 }

package/dist/css/components/Choice/css/__item/choice__item.css

@@ -0,0 +1,36 @@
+.choice__item {
+  min-width: 30px;
+  border-left: 0;
+  border-top: 0;
+  border-bottom: 0;
+  position: relative;
+  display: flex;
+  &:hover {
+    background: var(--choice-item-background-hover);
+  }
+  &:last-child {
+    border-right: 0;
+  }
+  &_state_active {
+  }
+  & input {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    border: 0;
+    position: absolute;
+    inset: 0 0 0 0;
+    z-index: 2;
+    opacity: 0%;
+    cursor: pointer;
+  }
+  &-label {
+    width: 100%;
+    text-align: center;
+    position: relative;
+    display: block;
+    z-index: 3;
+    transition: color 0.5s ease;
+    cursor: pointer;
+  }
+}

package/dist/css/components/Drawer/Drawer.css

@@ -0,0 +1,47 @@
+.EZDrawer .EZDrawer__checkbox {
+  display: none; }
+  .EZDrawer .EZDrawer__checkbox:checked ~ .EZDrawer__overlay {
+    display: block;
+    opacity: 1; }
+  .EZDrawer .EZDrawer__checkbox:checked ~ .EZDrawer__container {
+    visibility: visible;
+    transform: translate3d(0, 0, 0) !important; }
+  .EZDrawer .EZDrawer__overlay {
+  display: none;
+  height: 100vh;
+  left: 0;
+  position: fixed;
+  top: 0;
+  width: 100%; }
+  .EZDrawer .EZDrawer__container {
+  position: fixed;
+  visibility: hidden;
+  background: white;
+  transition: all;
+  box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.1); }
+  .drawer {
+  overflow-y: scroll;
+  display: flex;
+  flex-flow: column nowrap;
+  &__overlay {
+    background: rgba(116, 116, 116, 0.5) !important;
+    opacity: 100% !important;
+    backdrop-filter: blur(10px) !important;
+  }
+  &__wrapper {
+    flex: 1;
+  }
+  &__after {
+    z-index: 10;
+  }
+  &_type {
+    &_sticky-button {
+      ^^&__after {
+        width: 100%;
+        position: sticky;
+        left: 0;
+        bottom: 0;
+      }
+    }
+  }
+}

package/dist/css/components/Fader/Fader.css

@@ -1,16 +1,17 @@
 .fader {
   width: 100%;
   height: 100%;
+  background: var(--fader-fill);
+  position: absolute;
   left: 0;
   top: 0;
   z-index: 1;
-  position: absolute;
+  backdrop-filter: blur(var(--fader-blur, 10px));
 }
 .fader {
   &&_state {
     &_visible {
       position: fixed;
-      display: block;
       visibility: visible !important;
       animation-name: faderFadeIn;
     }
@@ -40,15 +41,3 @@
     opacity: 0;
   }
 }
-.fader {
-  &&_type_modal {
-    opacity: 0;
-    display: none;
-    background: var(--color-fader);
-    backdrop-filter: blur(10px);
-    transition: opacity 1s ease-in-out;
-    animation-duration: 1s;
-    animation-fill-mode: both;
-    visibility: hidden;
-  }
-}

package/dist/css/components/Image/Image.css

@@ -9,6 +9,7 @@
   &_horizontal-content-align {
     &_center {
       ^^&__wrapper {
+        width: 100%;
         display: flex;
         justify-content: center;
       }
@@ -25,20 +26,6 @@
         }
       }
     }
-    &_caption-back {
-      > ^^&__wrapper {
-        position: relative;
-        & > ^^^&__item {
-          position: absolute;
-          height: 100%;
-          width: 100%;
-          object-fit: cover;
-        }
-      }
-      .caption {
-        position: inherit;
-      }
-    }
   }
 }
 .image {
@@ -98,6 +85,7 @@
   &_vertical-content-align {
     &_center {
       ^^&__wrapper {
+        height: 100%;
         display: flex;
         align-items: center;
       }

package/dist/css/components/Modal/Modal.css

@@ -17,7 +17,7 @@
 }
 .modal-shape {
   &_rounded {
-    border-radius: 12px;
+    border-radius: 20px;
   }
   &_circular {
     border-radius: 50%;
@@ -25,10 +25,13 @@
 }
 .modal-content {
   width: 100%;
-  max-width: var(--modal-max-width, 600px);
-  position: relative;
-  min-height: 200px;
   min-width: 200px;
+  min-height: 200px;
+  max-width: var(--modal-max-width, 800px);
+  position: relative;
+  &:focus {
+    outline: 0;
+  }
   &__inner {
     width: 100%;
   }

package/dist/css/components/Swiper/Swiper.css

@@ -883,10 +883,10 @@ button.swiper-pagination-bullet {
   overflow: hidden;
 }
 
-.swiper-block {
-  width: 100%;
-  & div.swiper-slide {
-    display: flex;
+div.swiper-block__item {
+  display: flex;
+  &_type_center {
+    height: auto !important;
   }
 }
 
@@ -903,3 +903,45 @@ button.swiper-pagination-bullet {
     }
   }
 }
+
+.swiper-block {
+  width: 100%;
+}
+
+div.swiper-pagination {
+  display: flex;
+  &-horizontal {
+    justify-content: center;
+    bottom: 16px;
+    & .swiper-pagination-bullet {
+      margin: 0;
+    }
+  }
+  & .swiper-pagination-bullet {
+    width: 24px;
+    height: 24px;
+    background: none;
+    margin: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    opacity: 100%;
+    &::after {
+      width: 6px;
+      height: 6px;
+      background: #fff;
+      border: solid 1px #000;
+      border-radius: 50%;
+      content: '';
+      display: block;
+    }
+    &-active {
+      &::after {
+        width: 10px;
+        height: 10px;
+        background: #fff;
+      }
+    }
+  }
+}
+

package/dist/css/components/Swiper/css/__item/swiper-block__item.css

@@ -0,0 +1,6 @@
+div.swiper-block__item {
+  display: flex;
+  &_type_center {
+    height: auto !important;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui",
-  "version": "1.0.47",
+  "version": "1.0.49",
   "description": "UI components (Modal, Loader, Popup, etc)",
   "keywords": [
     "Modal",
@@ -52,13 +52,14 @@
     "react-date-range": "^1.4.0",
     "react-dom": "^18.2.0",
     "react-inlinesvg": "^4.0.3",
+    "react-modern-drawer": "^1.2.2",
     "react-otp-input": "^3.0.4",
     "react-paginate": "^8.2.0",
     "react-responsive": "^9.0.2",
     "react-scrollbars-custom": "^4.1.1",
     "react-select": "^5.7.4",
     "swiper": "^10.2.0",
-    "uuid": "^9.0.0"
+    "uuid": "^9.0.1"
   },
   "devDependencies": {
     "@babel/core": "^7.22.17",