@itcase/ui 1.0.45 → 1.0.47

package/dist/components/Choice.js

@@ -34,6 +34,7 @@ const Choice = /*#__PURE__*/React__default.default.forwardRef((props, ref) => {
     type,
     options,
     active,
+    set,
     setActiveSegment,
     size,
     labelTextColor,
@@ -71,7 +72,7 @@ const Choice = /*#__PURE__*/React__default.default.forwardRef((props, ref) => {
     propsKey: 'fillActive'
   });
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(className, 'choice', shapeClass, fillClass, borderColorClass, borderWidthClass, borderTypeClass, size && `choice_size_${size}`, type && `choice_type_${type}`),
+    className: clsx__default.default(className, 'choice', shapeClass, fillClass, borderColorClass, borderWidthClass, borderTypeClass, set && `choice_set_${set}`, size && `choice_size_${size}`, type && `choice_type_${type}`),
     ref: controlRef
   }, /*#__PURE__*/React__default.default.createElement("div", {
     className: "choice__wrapper"

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);
@@ -4872,6 +4873,15 @@ function Swiper(props) {
     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 ? {
@@ -4883,7 +4893,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/Choice/Choice.css

@@ -5,12 +5,12 @@
     position: relative;
     display: flex;
     ^&__item {
-      min-width: 80px;
-      position: relative;
-      display: flex;
-      border-top: 0;
+      min-width: 30px;
       border-left: 0;
+      border-top: 0;
       border-bottom: 0;
+      position: relative;
+      display: flex;
       &:hover {
         background: var(--choice-item-background-hover);
       }
@@ -22,16 +22,13 @@
       & input {
         width: 100%;
         height: 100%;
+        margin: 0;
+        border: 0;
         position: absolute;
-        left: 0;
-        top: 0;
-        right: 0;
-        bottom: 0;
+        inset: 0 0 0 0;
         z-index: 2;
         opacity: 0%;
         cursor: pointer;
-        border: 0;
-        margin: 0;
       }
       &-label {
         width: 100%;
@@ -65,7 +62,7 @@
 }
 .choice {
   &_size {
-    @each $size in normal, compact {
+    @each $size in tiny, compact, normal {
       &_$(size) {
         ^^&__item {
           &-label {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui",
-  "version": "1.0.45",
+  "version": "1.0.47",
   "description": "UI components (Modal, Loader, Popup, etc)",
   "keywords": [
     "Modal",
@@ -83,7 +83,7 @@
     "eslint-config-standard": "^17.1.0",
     "eslint-plugin-babel": "^5.3.1",
     "eslint-plugin-import": "^2.28.1",
-    "eslint-plugin-n": "^16.0.2",
+    "eslint-plugin-n": "^16.1.0",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-promise": "^6.1.1",