@itcase/ui 1.0.13 → 1.0.15

package/dist/components/InputPassword.js

@@ -0,0 +1,160 @@
+'use strict';
+
+var React = require('react');
+var PropTypes = require('prop-types');
+var clsx = require('clsx');
+var index = require('./Icon.js');
+var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
+require('react-inlinesvg');
+require('../constants/componentProps/fill.js');
+require('../constants/componentProps/iconSize.js');
+require('../constants/componentProps/shape.js');
+require('../constants/componentProps/strokeColor.js');
+require('./Link.js');
+require('../useStyles-e4accb53.js');
+require('lodash/camelCase');
+require('lodash/maxBy');
+require('lodash/upperFirst');
+require('../hooks/styleAttributes.js');
+require('../context/UIContext.js');
+require('../hooks/useMediaQueries.js');
+require('react-responsive');
+require('../constants/componentProps/size.js');
+require('../constants/componentProps/textColor.js');
+require('../constants/componentProps/textGradient.js');
+require('../constants/componentProps/textStyle.js');
+require('../constants/componentProps/textWeight.js');
+require('../constants/componentProps/type.js');
+require('../constants/componentProps/underline.js');
+require('lodash/castArray');
+
+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);
+
+var inputPasswordConfig = {
+  state: {},
+  setState: function setState(newComponent) {
+    inputPasswordConfig.state = newComponent;
+  }
+};
+function InputPassword(props) {
+  var _inputPasswordConfig$, _inputPasswordConfig$2, _inputPasswordConfig$3;
+  var state = props.state,
+    id = props.id,
+    iconFill = props.iconFill,
+    iconRevealableHide = props.iconRevealableHide,
+    iconRevealableShow = props.iconRevealableShow,
+    iconFillHover = props.iconFillHover,
+    iconShape = props.iconShape,
+    iconSize = props.iconSize,
+    isRevealable = props.isRevealable,
+    className = props.className,
+    placeholder = props.placeholder,
+    disabled = props.disabled,
+    value = props.value,
+    onBlur = props.onBlur,
+    onChange = props.onChange,
+    onFocus = props.onFocus,
+    onKeyDown = props.onKeyDown;
+  var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'fill'
+  });
+  var sizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'input-password__input_size_',
+    propsKey: 'size'
+  });
+  var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'input-password__input_shape_',
+    propsKey: 'shape'
+  });
+  var textSizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'text_size_',
+    propsKey: 'textSize'
+  });
+  var textColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'text-color_',
+    propsKey: 'textColor'
+  });
+  var caretClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'caret-color_',
+    propsKey: 'caret'
+  });
+  var placeholderClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'placeholder-text-color_',
+    propsKey: 'placeholderTextColor'
+  });
+  var weightClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'text-weight_',
+    propsKey: 'textWeight'
+  });
+  var borderWidthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-width_',
+    propsKey: 'borderWidth'
+  });
+  var borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-color_',
+    propsKey: 'borderColor'
+  });
+  var widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'width_',
+    propsKey: 'width'
+  });
+  var _useState = React.useState(false),
+    isRevealed = _useState[0],
+    setIsRevealed = _useState[1];
+  var inputType = React.useMemo(function () {
+    return isRevealed ? 'text' : 'password';
+  }, [isRevealed]);
+  var revealeHandler = React.useCallback(function (e) {
+    e.preventDefault();
+    setIsRevealed(function (prev) {
+      return !prev;
+    });
+  }, [setIsRevealed]);
+  return /*#__PURE__*/React__default.default.createElement("div", {
+    className: "input-password"
+  }, /*#__PURE__*/React__default.default.createElement("input", {
+    className: clsx__default.default(className, 'input-password__input', (textSizeClass || textColorClass || weightClass) && 'text', caretClass, fillClass, placeholderClass, shapeClass, textSizeClass, textColorClass, weightClass, widthClass, borderWidthClass, borderColorClass, sizeClass, ((_inputPasswordConfig$ = inputPasswordConfig.state[state]) == null ? void 0 : _inputPasswordConfig$.fillClass) && ("fill_" + inputPasswordConfig.state[state].fillClass).replace(/([A-Z])/g, '-$1').toLowerCase(), ((_inputPasswordConfig$2 = inputPasswordConfig.state[state]) == null ? void 0 : _inputPasswordConfig$2.borderColor) && ("border-color_" + inputPasswordConfig.state[state].borderColor).replace(/([A-Z])/g, '-$1').toLowerCase(), ((_inputPasswordConfig$3 = inputPasswordConfig.state[state]) == null ? void 0 : _inputPasswordConfig$3.shape) && "shape_" + inputPasswordConfig.state[state].shape),
+    type: inputType,
+    id: id,
+    disabled: disabled,
+    placeholder: placeholder,
+    value: value,
+    onBlur: onBlur,
+    onChange: onChange,
+    onFocus: onFocus,
+    onKeyDown: onKeyDown
+  }), isRevealable && /*#__PURE__*/React__default.default.createElement(index.Icon, {
+    className: "input-password__icon",
+    iconFill: iconFill,
+    iconFillHover: iconFillHover,
+    SvgImage: isRevealed ? iconRevealableHide : iconRevealableShow,
+    imageSrc: isRevealed ? iconRevealableHide : iconRevealableShow,
+    shape: iconShape,
+    size: iconSize,
+    onClick: revealeHandler
+  }));
+}
+InputPassword.propTypes = {
+  id: PropTypes__default.default.string,
+  className: PropTypes__default.default.string,
+  placeholder: PropTypes__default.default.string,
+  value: PropTypes__default.default.string,
+  checked: PropTypes__default.default.bool,
+  disabled: PropTypes__default.default.bool,
+  onBlur: PropTypes__default.default.func,
+  onChange: PropTypes__default.default.func,
+  onKeyDown: PropTypes__default.default.func,
+  type: PropTypes__default.default.string
+};
+InputPassword.defaultProps = {
+  size: 'm',
+  type: 'text'
+};
+
+exports.InputPassword = InputPassword;
+exports.inputPasswordConfig = inputPasswordConfig;

package/dist/components/Select.js

@@ -2986,6 +2986,14 @@ function _taggedTemplateLiteral(strings, raw) {
   }));
 }
 
+const min = Math.min;
+const max = Math.max;
+const round = Math.round;
+const floor = Math.floor;
+const createCoords = v => ({
+  x: v,
+  y: v
+});
 function rectToClientRect(rect) {
   return {
     ...rect,
@@ -2996,18 +3004,6 @@ function rectToClientRect(rect) {
   };
 }
 
-function getWindow(node) {
-  var _node$ownerDocument;
-  return (node == null ? void 0 : (_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.defaultView) || window;
-}
-
-function getComputedStyle$1(element) {
-  return getWindow(element).getComputedStyle(element);
-}
-
-function isNode(value) {
-  return value instanceof getWindow(value).Node;
-}
 function getNodeName(node) {
   if (isNode(node)) {
     return (node.nodeName || '').toLowerCase();
@@ -3017,16 +3013,29 @@ function getNodeName(node) {
   // https://github.com/floating-ui/floating-ui/issues/2317
   return '#document';
 }
-
+function getWindow(node) {
+  var _node$ownerDocument;
+  return (node == null ? void 0 : (_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.defaultView) || window;
+}
+function getDocumentElement(node) {
+  var _ref;
+  return (_ref = (isNode(node) ? node.ownerDocument : node.document) || window.document) == null ? void 0 : _ref.documentElement;
+}
+function isNode(value) {
+  return value instanceof Node || value instanceof getWindow(value).Node;
+}
+function isElement(value) {
+  return value instanceof Element || value instanceof getWindow(value).Element;
+}
 function isHTMLElement(value) {
   return value instanceof HTMLElement || value instanceof getWindow(value).HTMLElement;
 }
-function isShadowRoot(node) {
+function isShadowRoot(value) {
   // Browsers without `ShadowRoot` support.
   if (typeof ShadowRoot === 'undefined') {
     return false;
   }
-  return node instanceof getWindow(node).ShadowRoot || node instanceof ShadowRoot;
+  return value instanceof ShadowRoot || value instanceof getWindow(value).ShadowRoot;
 }
 function isOverflowElement(element) {
   const {
@@ -3037,22 +3046,54 @@ function isOverflowElement(element) {
   } = getComputedStyle$1(element);
   return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !['inline', 'contents'].includes(display);
 }
-function isSafari() {
+function isWebKit() {
   if (typeof CSS === 'undefined' || !CSS.supports) return false;
   return CSS.supports('-webkit-backdrop-filter', 'none');
 }
 function isLastTraversableNode(node) {
   return ['html', 'body', '#document'].includes(getNodeName(node));
 }
-
-const min = Math.min;
-const max = Math.max;
-const round = Math.round;
-const floor = Math.floor;
-const createCoords = v => ({
-  x: v,
-  y: v
-});
+function getComputedStyle$1(element) {
+  return getWindow(element).getComputedStyle(element);
+}
+function getParentNode(node) {
+  if (getNodeName(node) === 'html') {
+    return node;
+  }
+  const result =
+  // Step into the shadow DOM of the parent of a slotted node.
+  node.assignedSlot ||
+  // DOM Element detected.
+  node.parentNode ||
+  // ShadowRoot detected.
+  isShadowRoot(node) && node.host ||
+  // Fallback.
+  getDocumentElement(node);
+  return isShadowRoot(result) ? result.host : result;
+}
+function getNearestOverflowAncestor(node) {
+  const parentNode = getParentNode(node);
+  if (isLastTraversableNode(parentNode)) {
+    return node.ownerDocument ? node.ownerDocument.body : node.body;
+  }
+  if (isHTMLElement(parentNode) && isOverflowElement(parentNode)) {
+    return parentNode;
+  }
+  return getNearestOverflowAncestor(parentNode);
+}
+function getOverflowAncestors(node, list) {
+  var _node$ownerDocument2;
+  if (list === void 0) {
+    list = [];
+  }
+  const scrollableAncestor = getNearestOverflowAncestor(node);
+  const isBody = scrollableAncestor === ((_node$ownerDocument2 = node.ownerDocument) == null ? void 0 : _node$ownerDocument2.body);
+  const win = getWindow(scrollableAncestor);
+  if (isBody) {
+    return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : []);
+  }
+  return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor));
+}
 
 function getCssDimensions(element) {
   const css = getComputedStyle$1(element);
@@ -3075,10 +3116,6 @@ function getCssDimensions(element) {
   };
 }
 
-function isElement(value) {
-  return value instanceof Element || value instanceof getWindow(value).Element;
-}
-
 function unwrapElement(element) {
   return !isElement(element) ? element.contextElement : element;
 }
@@ -3114,7 +3151,7 @@ function getScale(element) {
 const noOffsets = /*#__PURE__*/createCoords(0);
 function getVisualOffsets(element) {
   const win = getWindow(element);
-  if (!isSafari() || !win.visualViewport) {
+  if (!isWebKit() || !win.visualViewport) {
     return noOffsets;
   }
   return {
@@ -3163,7 +3200,7 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
     while (currentIFrame && offsetParent && offsetWin !== win) {
       const iframeScale = getScale(currentIFrame);
       const iframeRect = currentIFrame.getBoundingClientRect();
-      const css = getComputedStyle(currentIFrame);
+      const css = getComputedStyle$1(currentIFrame);
       const left = iframeRect.left + (currentIFrame.clientLeft + parseFloat(css.paddingLeft)) * iframeScale.x;
       const top = iframeRect.top + (currentIFrame.clientTop + parseFloat(css.paddingTop)) * iframeScale.y;
       x *= iframeScale.x;
@@ -3183,52 +3220,6 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
   });
 }
 
-function getDocumentElement(node) {
-  var _ref;
-  return (_ref = (isNode(node) ? node.ownerDocument : node.document) || window.document) == null ? void 0 : _ref.documentElement;
-}
-
-function getParentNode(node) {
-  if (getNodeName(node) === 'html') {
-    return node;
-  }
-  const result =
-  // Step into the shadow DOM of the parent of a slotted node.
-  node.assignedSlot ||
-  // DOM Element detected.
-  node.parentNode ||
-  // ShadowRoot detected.
-  isShadowRoot(node) && node.host ||
-  // Fallback.
-  getDocumentElement(node);
-  return isShadowRoot(result) ? result.host : result;
-}
-
-function getNearestOverflowAncestor(node) {
-  const parentNode = getParentNode(node);
-  if (isLastTraversableNode(parentNode)) {
-    return node.ownerDocument ? node.ownerDocument.body : node.body;
-  }
-  if (isHTMLElement(parentNode) && isOverflowElement(parentNode)) {
-    return parentNode;
-  }
-  return getNearestOverflowAncestor(parentNode);
-}
-
-function getOverflowAncestors(node, list) {
-  var _node$ownerDocument;
-  if (list === void 0) {
-    list = [];
-  }
-  const scrollableAncestor = getNearestOverflowAncestor(node);
-  const isBody = scrollableAncestor === ((_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.body);
-  const win = getWindow(scrollableAncestor);
-  if (isBody) {
-    return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : []);
-  }
-  return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor));
-}
-
 // https://samthor.au/2021/observing-dom/
 function observeMove(element, onMove) {
   let io = null;

package/dist/components/Swiper.js

@@ -627,13 +627,13 @@ function Observer(_ref) {
   const init = () => {
     if (!swiper.params.observer) return;
     if (swiper.params.observeParents) {
-      const containerParents = elementParents(swiper.el);
+      const containerParents = elementParents(swiper.hostEl);
       for (let i = 0; i < containerParents.length; i += 1) {
         attach(containerParents[i]);
       }
     }
     // Observe container
-    attach(swiper.el, {
+    attach(swiper.hostEl, {
       childList: swiper.params.observeSlideChildren
     });
 
@@ -2233,11 +2233,13 @@ function loopFix(_temp) {
           swiper.slideTo(activeIndex + slidesPrepended, 0, false, true);
           if (setTranslate) {
             swiper.touches[swiper.isHorizontal() ? 'startX' : 'startY'] += diff;
+            swiper.touchEventsData.currentTranslate = swiper.translate;
           }
         }
       } else {
         if (setTranslate) {
           swiper.slideToLoop(slideRealIndex, 0, false, true);
+          swiper.touchEventsData.currentTranslate = swiper.translate;
         }
       }
     } else if (appendSlidesIndexes.length > 0 && isNext) {
@@ -2251,6 +2253,7 @@ function loopFix(_temp) {
           swiper.slideTo(activeIndex - slidesAppended, 0, false, true);
           if (setTranslate) {
             swiper.touches[swiper.isHorizontal() ? 'startX' : 'startY'] += diff;
+            swiper.touchEventsData.currentTranslate = swiper.translate;
           }
         }
       } else {
@@ -3815,7 +3818,7 @@ let Swiper$2 = class Swiper {
       return false;
     }
     el.swiper = swiper;
-    if (el.parentNode && el.parentNode.host) {
+    if (el.parentNode && el.parentNode.host && el.parentNode.host.nodeName === 'SWIPER-CONTAINER') {
       swiper.isElement = true;
     }
     const getWrapperSelector = () => {
@@ -3841,7 +3844,7 @@ let Swiper$2 = class Swiper {
     Object.assign(swiper, {
       el,
       wrapperEl,
-      slidesEl: swiper.isElement ? el.parentNode.host : wrapperEl,
+      slidesEl: swiper.isElement && !el.parentNode.host.slideSlots ? el.parentNode.host : wrapperEl,
       hostEl: swiper.isElement ? el.parentNode.host : el,
       mounted: true,
       // RTL
@@ -4236,8 +4239,7 @@ function getParams(obj, splitEvents) {
   };
   const events = {};
   const passedParams = {};
-  extend(params, Swiper$2.defaults);
-  extend(params, Swiper$2.extendedDefaults);
+  extend(params, defaults);
   params._emitClasses = true;
   params.init = false;
   const rest = {};
@@ -4352,7 +4354,7 @@ const updateOnVirtualData = swiper => {
 };
 
 /**
- * Swiper React 10.0.4
+ * Swiper React 10.1.0
  * Most modern mobile touch slider and framework with hardware accelerated transitions
  * https://swiperjs.com
  *
@@ -4360,7 +4362,7 @@ const updateOnVirtualData = swiper => {
  *
  * Released under the MIT License
  *
- * Released on: July 8, 2023
+ * Released on: August 1, 2023
  */
 
 

package/dist/css/components/InputPassword/InputPassword.css

@@ -0,0 +1,68 @@
+.input-password {
+  position: relative;
+  &__icon {
+    position: absolute;
+    right: 8px;
+    top: 50%;
+    transform: translate(0, -50%);
+  }
+  &__input {
+    border: none;
+    appearance: none;
+    padding: 0;
+    margin: 0;
+    min-width: unset;
+    box-shadow: none;
+    outline: 0;
+    position: relative;
+    caret-color: var(--input-password-caret-color);
+    &:focus {
+      outline: none;
+    }
+    &:hover {
+      border: solid 1px var(--input-password-state-hover-border);
+      background: var(--input-password-state-hover-background);
+    }
+    &&_state {
+      &_success {
+        border: solid 1px var(--input-password-state-success-border);
+        background: var(--input-password-state-success-background);
+      }
+      &_error {
+        border: solid 1px var(--input-password-state-error-border);
+        background: var(--input-password-state-error-background);
+      }
+      &_focus {
+        border: solid 1px var(--input-password-state-focus-border);
+        background: var(--input-password-state-focus-background);
+      }
+    }
+  }
+}
+.input-password {
+  &__input {
+    &_shape {
+      &_rounded {
+        border-radius: 4px;
+        position: relative;
+      }
+      &_underline {
+        position: relative;
+        border-left: none !important;
+        border-right: none !important;
+        border-top: none !important;
+      }
+    }
+  }
+}
+.input-password {
+  &__input {
+    &&_size {
+      @each $size in xs, s, m, l, xl, xxl, normal, tiny, compact, large {
+        &_$(size) {
+          padding: var(--input-password-size-$(size)-padding);
+        }
+      }
+    }
+  }
+}

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

@@ -1,5 +1,5 @@
 /**
- * Swiper 10.0.4
+ * Swiper 10.1.0
  * Most modern mobile touch slider and framework with hardware accelerated transitions
  * https://swiperjs.com
  *
@@ -7,7 +7,7 @@
  *
  * Released under the MIT License
  *
- * Released on: July 8, 2023
+ * Released on: August 1, 2023
  */
 
 /* FONT_START */
@@ -686,6 +686,8 @@ button.swiper-pagination-bullet {
   display: none;
 }
 
+/* Zoom container styles start */
+
 .swiper-zoom-container {
   width: 100%;
   height: 100%;
@@ -703,6 +705,8 @@ button.swiper-pagination-bullet {
   object-fit: contain;
 }
 
+/* Zoom container styles end */
+
 .swiper-slide-zoomed {
   cursor: move;
   touch-action: none;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui",
-  "version": "1.0.13",
+  "version": "1.0.15",
   "description": "UI components (Modal, Loader, Popup, etc)",
   "keywords": [
     "Modal",
@@ -40,7 +40,7 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "@itcase/common": "^1.1.2",
+    "@itcase/common": "^1.1.3",
     "clsx": "^2.0.0",
     "html5-boilerplate": "^8.0.0",
     "js-cookie": "^3.0.5",
@@ -56,7 +56,7 @@
     "react-responsive": "^9.0.2",
     "react-scrollbars-custom": "^4.1.1",
     "react-select": "^5.7.4",
-    "swiper": "^10.0.4",
+    "swiper": "^10.1.0",
     "uuid": "^9.0.0"
   },
   "devDependencies": {
@@ -77,7 +77,7 @@
     "babel-loader": "^9.1.3",
     "babel-plugin-inline-react-svg": "^2.0.2",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
-    "eslint": "8.45.0",
+    "eslint": "8.46.0",
     "eslint-config-prettier": "^8.9.0",
     "eslint-config-standard": "^17.1.0",
     "eslint-plugin-babel": "^5.3.1",
@@ -86,7 +86,7 @@
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-promise": "^6.1.1",
-    "eslint-plugin-react": "^7.33.0",
+    "eslint-plugin-react": "^7.33.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-standard": "^5.0.0",
     "husky": "^8.0.3",
@@ -116,7 +116,7 @@
     "postcss-sort-media-queries": "^5.2.0",
     "prettier": "^3.0.0",
     "react-datepicker": "^4.16.0",
-    "rollup": "^3.26.3",
+    "rollup": "^3.27.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "semantic-release": "^21.0.7",
     "stylelint": "^15.10.2",