@itcase/ui 1.0.11 → 1.0.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui",
-  "version": "1.0.11",
+  "version": "1.0.13",
   "description": "UI components (Modal, Loader, Popup, etc)",
   "keywords": [
     "Modal",
@@ -41,7 +41,7 @@
   },
   "dependencies": {
     "@itcase/common": "^1.1.2",
-    "clsx": "^1.2.1",
+    "clsx": "^2.0.0",
     "html5-boilerplate": "^8.0.0",
     "js-cookie": "^3.0.5",
     "lodash": "^4.17.21",
@@ -55,44 +55,44 @@
     "react-paginate": "^8.2.0",
     "react-responsive": "^9.0.2",
     "react-scrollbars-custom": "^4.1.1",
-    "react-select": "^5.7.3",
-    "swiper": "^9.4.1",
+    "react-select": "^5.7.4",
+    "swiper": "^10.0.4",
     "uuid": "^9.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.22.5",
-    "@babel/eslint-parser": "^7.22.5",
-    "@babel/preset-env": "^7.22.5",
+    "@babel/core": "^7.22.9",
+    "@babel/eslint-parser": "^7.22.9",
+    "@babel/preset-env": "^7.22.9",
     "@babel/preset-react": "^7.22.5",
-    "@commitlint/cli": "^17.6.6",
-    "@commitlint/config-conventional": "^17.6.6",
+    "@commitlint/cli": "^17.6.7",
+    "@commitlint/config-conventional": "^17.6.7",
     "@rollup/plugin-babel": "^6.0.3",
-    "@rollup/plugin-commonjs": "^25.0.2",
+    "@rollup/plugin-commonjs": "^25.0.3",
     "@rollup/plugin-json": "^6.0.0",
     "@rollup/plugin-node-resolve": "^15.1.0",
     "@rollup/plugin-terser": "^0.4.3",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
-    "@semantic-release/release-notes-generator": "^11.0.3",
-    "babel-loader": "^9.1.2",
+    "@semantic-release/release-notes-generator": "^11.0.4",
+    "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.43.0",
-    "eslint-config-prettier": "^8.8.0",
+    "eslint": "8.45.0",
+    "eslint-config-prettier": "^8.9.0",
     "eslint-config-standard": "^17.1.0",
     "eslint-plugin-babel": "^5.3.1",
-    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-import": "^2.28.0",
     "eslint-plugin-n": "^16.0.1",
     "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-promise": "^6.1.1",
-    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react": "^7.33.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-standard": "^5.0.0",
     "husky": "^8.0.3",
     "lint-staged": "^13.2.3",
-    "npm": "^9.7.2",
-    "postcss": "^8.4.24",
+    "npm": "^9.8.1",
+    "postcss": "^8.4.27",
     "postcss-aspect-ratio-polyfill": "^2.0.0",
     "postcss-cli": "^10.1.0",
     "postcss-combine-duplicated-selectors": "^10.0.3",
@@ -100,7 +100,7 @@
     "postcss-dark-theme-class": "^0.7.3",
     "postcss-discard-duplicates": "^6.0.0",
     "postcss-each": "^1.1.0",
-    "postcss-easings": "^3.0.1",
+    "postcss-easings": "^4.0.0",
     "postcss-flexbugs-fixes": "^5.0.2",
     "postcss-hexrgba": "^2.1.0",
     "postcss-import": "^15.1.0",
@@ -110,18 +110,18 @@
     "postcss-nested-ancestors": "^3.0.0",
     "postcss-normalize": "^10.0.1",
     "postcss-prepend-imports": "^1.0.1",
-    "postcss-preset-env": "^8.5.1",
+    "postcss-preset-env": "^9.1.0",
     "postcss-pxtorem": "^6.0.0",
     "postcss-responsive-type": "github:ITCase/postcss-responsive-type",
     "postcss-sort-media-queries": "^5.2.0",
-    "prettier": "^2.8.8",
+    "prettier": "^3.0.0",
     "react-datepicker": "^4.16.0",
-    "rollup": "^3.26.0",
+    "rollup": "^3.26.3",
     "rollup-plugin-peer-deps-external": "^2.2.4",
-    "semantic-release": "^21.0.6",
-    "stylelint": "^15.9.0",
-    "stylelint-config-standard": "^33.0.0",
-    "stylelint-no-unsupported-browser-features": "^6.1.0",
+    "semantic-release": "^21.0.7",
+    "stylelint": "^15.10.2",
+    "stylelint-config-standard": "^34.0.0",
+    "stylelint-no-unsupported-browser-features": "^7.0.0",
     "stylelint-order": "^6.0.3"
   }
 }

package/dist/Modal-375ef8c3.js

@@ -1,234 +0,0 @@
-'use strict';
-
-var React = require('react');
-var PropTypes = require('prop-types');
-var ReactDOM = require('react-dom');
-var clsx = require('clsx');
-var index = require('./components/Fader.js');
-var useStyles = require('./useStyles-e4accb53.js');
-var useDeviceTargetClass = require('./hooks/useDeviceTargetClass.js');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefault(React);
-var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
-var ReactDOM__default = /*#__PURE__*/_interopDefault(ReactDOM);
-var clsx__default = /*#__PURE__*/_interopDefault(clsx);
-
-var getOrCreateModalElement = function getOrCreateModalElement(modalQuerySelector, className) {
-  if (className === void 0) {
-    className = '';
-  }
-  // prettier-ignore
-  var classList = className && typeof className === 'string' ? className.split(' ').filter(Boolean) : [];
-  var modalElement = document.querySelector(modalQuerySelector);
-  if (!modalElement) {
-    // Add modal element into the DOM on mount.
-    modalElement = document.createElement('div');
-    modalElement.setAttribute('id', 'modal-global');
-    modalElement.classList.add('modal');
-    if (classList.length) {
-      var _modalElement$classLi;
-      (_modalElement$classLi = modalElement.classList).add.apply(_modalElement$classLi, classList);
-    }
-    document.body.prepend(modalElement);
-  }
-  return modalElement;
-};
-
-// Modal component that is an abstraction around the portal API.
-var Modal = /*#__PURE__*/React__default.default.forwardRef(function Modal(props, ref) {
-  var children = props.children,
-    className = props.className,
-    closeButton = props.closeButton,
-    contentClassName = props.contentClassName,
-    id = props.id,
-    isFader = props.isFader,
-    faderFill = props.faderFill,
-    faderFillGradient = props.faderFillGradient,
-    faderOpacity = props.faderOpacity,
-    initialIsOpen = props.isOpen,
-    isScrollOnOpen = props.isScrollOnOpen,
-    isSetFocusOnOpen = props.isSetFocusOnOpen,
-    modalQuerySelector = props.modalQuerySelector,
-    isOutsideClose = props.isOutsideClose,
-    onCloseModal = props.onCloseModal,
-    onOpenModal = props.onOpenModal;
-
-  // Query DOM element
-  var _useState = React.useState(null),
-    modalElement = _useState[0],
-    setModalElement = _useState[1];
-  React.useLayoutEffect(function () {
-    var element = getOrCreateModalElement(modalQuerySelector, className);
-    setModalElement(element);
-    if (element) {
-      addModalProps(element);
-    }
-  }, []);
-  var modalContentRef = React.useRef(null);
-  var modalFaderRef = React.useRef(null);
-  var _useState2 = React.useState(initialIsOpen),
-    isOpen = _useState2[0],
-    setIsOpen = _useState2[1];
-  var addModalProps = React.useCallback(function (element) {
-    // Change class need in "useEffect"
-    if (isOpen) {
-      // Show modal
-      element.classList.add('modal_state_visible');
-      // Scroll to opened modal
-      if (isScrollOnOpen) {
-        // modalContentRef.current.style.top = `${window.visualViewport.pageTop}px`
-        element.scrollIntoView({
-          block: 'center',
-          behavior: 'smooth'
-        });
-      }
-
-      // "setTimeout" in this implementation is needs for set focus on modal
-      // after "onMouseDown" event on button
-      if (isSetFocusOnOpen) {
-        setTimeout(function () {
-          return modalContentRef.current.focus();
-        }, 0);
-      }
-    } else if (!element.children.length) {
-      // Hide modal if has no children
-      element.classList.remove('modal_state_visible');
-    }
-  }, [isOpen, isSetFocusOnOpen]);
-  React.useEffect(function () {
-    if (!modalElement) {
-      return;
-    }
-    addModalProps(modalElement);
-  }, [isOpen]); // eslint-disable-line
-
-  // Show modal with children content
-  var openModal = React.useCallback(function () {
-    setIsOpen(true);
-
-    // Callback
-    if (typeof onOpenModal === 'function') {
-      onOpenModal();
-    }
-
-    /* SHOW TARGET POPUP ABOVE OTHERS POPUPS IF TARGET ALREADY OPENED
-      // If current modal is already opened
-      // Move content to end of modal root container. For order in DOM.
-      const modalContentElement = modalContentRef.current
-      if (modalContentElement) {
-        modalContentElement.parentNode.appendChild(modalContentElement)
-      }
-      // Also move fader to end of modal root container after container
-      const modalFaderElement = modalFaderRef.current
-      if (modalFaderElement) {
-        modalFaderElement.parentNode.appendChild(modalFaderElement)
-      }
-    */
-  }, [onOpenModal]);
-
-  // Hide modal and unmount children content
-  var closeModal = React.useCallback(function (event) {
-    if (event === void 0) {
-      event = {};
-    }
-    var hasRelatedTarget = event.relatedTarget && modalElement.contains(event.relatedTarget);
-    if (hasRelatedTarget) {
-      return event;
-    }
-    setIsOpen(false);
-
-    // Callback
-    if (typeof onCloseModal === 'function') {
-      onCloseModal();
-    }
-  }, [modalElement, onCloseModal]);
-
-  // Save ref things
-  React.useImperativeHandle(ref, function () {
-    return {
-      isOpen: isOpen,
-      openModal: openModal,
-      closeModal: closeModal,
-      modalElement: modalElement
-    };
-  });
-  var contentFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'fill_',
-    propsKey: 'contentFill'
-  });
-  var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'modal-shape_',
-    propsKey: 'shape'
-  });
-  var borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'border-color_',
-    propsKey: 'borderColor'
-  });
-  var borderWidthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'border-width_',
-    propsKey: 'borderWidth'
-  });
-  var borderTypeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'border-type_',
-    propsKey: 'borderType'
-  });
-  var elevationClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'elevation_',
-    propsKey: 'elevation'
-  });
-  var _useStyles = useStyles.useStyles(props),
-    modalStyles = _useStyles.styles;
-
-  // Use a portal to render the children into the element
-  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),
-    id: id,
-    ref: modalContentRef,
-    tabIndex: 0,
-    onBlur: isOutsideClose ? undefined : closeModal,
-    style: modalStyles
-  }, closeButton && /*#__PURE__*/React__default.default.createElement("div", {
-    className: "modal-content__close",
-    onClick: closeModal
-  }, closeButton), children), /*#__PURE__*/React__default.default.createElement(index.Fader, {
-    ref: modalFaderRef,
-    fill: faderFill,
-    fillGradient: faderFillGradient,
-    opacity: faderOpacity,
-    className: "modal__fader",
-    isFader: isFader
-  })) : null,
-  // A DOM element
-  modalElement);
-});
-Modal.propTypes = {
-  children: PropTypes__default.default.any,
-  className: PropTypes__default.default.string,
-  closeIcon: PropTypes__default.default.string,
-  closeText: PropTypes__default.default.string,
-  faderFill: PropTypes__default.default.string,
-  faderFillGradient: PropTypes__default.default.string,
-  faderOpacity: PropTypes__default.default.string,
-  contentClassName: PropTypes__default.default.string,
-  id: PropTypes__default.default.string,
-  isFader: PropTypes__default.default.bool,
-  isScrollOnOpen: PropTypes__default.default.bool,
-  isSetFocusOnOpen: PropTypes__default.default.bool,
-  modalQuerySelector: PropTypes__default.default.string,
-  isOutsideClose: PropTypes__default.default.bool,
-  onCloseModal: PropTypes__default.default.func,
-  onOpenModal: PropTypes__default.default.func
-};
-Modal.defaultProps = {
-  isFader: true,
-  isOpen: false,
-  isScrollOnOpen: true,
-  isSetFocusOnOpen: true,
-  modalQuerySelector: '#modal-global'
-};
-
-exports.Modal = Modal;

package/dist/components/DateRangePicker.js

@@ -1,218 +0,0 @@
-'use strict';
-
-var React = require('react');
-var clsx = require('clsx');
-var reactDateRange = require('react-date-range');
-var luxon = require('luxon');
-var index$1 = require('../index-738f53f6.js');
-var index$2 = require('./Button.js');
-var Modal = require('../Modal-375ef8c3.js');
-require('./Loader.js');
-var index = require('./Input.js');
-require('../typeof-6dd323c6.js');
-require('prop-types');
-require('../constants/componentProps/borderType.js');
-require('../constants/componentProps/fill.js');
-require('../constants/componentProps/horizontalResizeMode.js');
-require('../constants/componentProps/shape.js');
-require('../constants/componentProps/size.js');
-require('../constants/componentProps/type.js');
-require('../constants/componentProps/width.js');
-require('./Icon.js');
-require('react-inlinesvg');
-require('../constants/componentProps/iconSize.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/textColor.js');
-require('../constants/componentProps/textGradient.js');
-require('../constants/componentProps/textStyle.js');
-require('../constants/componentProps/textWeight.js');
-require('../constants/componentProps/underline.js');
-require('../hooks/useDeviceTargetClass.js');
-require('lodash/castArray');
-require('./Text.js');
-require('../constants/componentProps/textColorActive.js');
-require('../constants/componentProps/textColorHover.js');
-require('react-dom');
-require('./Fader.js');
-require('../constants/componentProps/fillGradient.js');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefault(React);
-var clsx__default = /*#__PURE__*/_interopDefault(clsx);
-
-var DateRangePickerInput = /*#__PURE__*/React__default.default.forwardRef(function (props, ref) {
-  var onChange = props.onChange,
-    onFocus = props.onFocus,
-    toFormat = props.toFormat,
-    value = props.value,
-    _props$initialDate = props.initialDate,
-    initialDate = _props$initialDate === void 0 ? new Date() : _props$initialDate,
-    modalIsOpen = props.modalIsOpen,
-    modalIsFader = props.modalIsFader,
-    modalIsOutsideClose = props.modalIsOutsideClose,
-    modalShape = props.modalShape,
-    modalElevation = props.modalElevation,
-    modalPadding = props.modalPadding,
-    dateRangeProps = props.dateRangeProps,
-    primaryButtonShape = props.primaryButtonShape,
-    secondaryButtonShape = props.secondaryButtonShape,
-    primaryButtonFill = props.primaryButtonFill,
-    primaryButtonFillHover = props.primaryButtonFillHover,
-    primaryButtonSize = props.primaryButtonSize,
-    primaryButtonLabelTextColor = props.primaryButtonLabelTextColor,
-    primaryButtonLabelSize = props.primaryButtonLabelSize,
-    primaryButtonLabelTextWeight = props.primaryButtonLabelTextWeight,
-    primaryButtonLabel = props.primaryButtonLabel,
-    secondaryButtonFill = props.secondaryButtonFill,
-    secondaryButtonFillHover = props.secondaryButtonFillHover,
-    secondaryButtonSize = props.secondaryButtonSize,
-    secondaryButtonLabelTextColor = props.secondaryButtonLabelTextColor,
-    secondaryButtonLabelSize = props.secondaryButtonLabelSize,
-    secondaryButtonLabelTextWeight = props.secondaryButtonLabelTextWeight,
-    secondaryButtonLabel = props.secondaryButtonLabel,
-    placeholder = props.placeholder,
-    inputProps = props.inputProps;
-  var rangeRef = React.useRef(null);
-  var modalRef = React.useRef(null);
-  var onClickSave = React.useCallback(function () {
-    var _rangeRef$current;
-    var value = (_rangeRef$current = rangeRef.current) == null ? void 0 : _rangeRef$current.value;
-    if (onChange) {
-      onChange(value);
-    }
-    modalRef.current.closeModal();
-  }, [onChange]);
-  var onClickCancel = React.useCallback(function () {
-    modalRef.current.closeModal();
-  }, []);
-
-  // Create JS Date object for Calendar component
-  var _useState = React.useState(function () {
-      var startDate = initialDate.startDate,
-        endDate = initialDate.endDate;
-      if (typeof initialDate === 'string' && initialDate.includes('-')) {
-        var _initialDate$split = initialDate.split(' - ');
-        startDate = _initialDate$split[0];
-        endDate = _initialDate$split[1];
-      }
-      var state = {
-        startDate: null,
-        endDate: null,
-        key: 'date'
-      };
-      if (!startDate && !endDate) {
-        return state;
-      }
-      if (typeof startDate === 'string' && typeof endDate === 'string') {
-        state.startDate = luxon.DateTime.fromISO(startDate).toJSDate();
-        state.endDate = luxon.DateTime.fromISO(endDate).toJSDate();
-      }
-      if (startDate instanceof Date && endDate instanceof Date) {
-        state.startDate = startDate;
-        state.endDate = endDate;
-      }
-      return state;
-    }),
-    dateRanges = _useState[0],
-    setDateRanges = _useState[1];
-  React.useImperativeHandle(ref, function () {
-    var startDate = luxon.DateTime.fromJSDate(dateRanges.startDate).toISODate();
-    var endDate = luxon.DateTime.fromJSDate(dateRanges.endDate).toISODate();
-    return {
-      value: startDate + " - " + endDate
-    };
-  });
-  var onChangeDate = React.useCallback(function (range) {
-    setDateRanges(function (prevState) {
-      var _range$date, _range$date2;
-      return Object.assign({}, prevState, {
-        startDate: (_range$date = range.date) == null ? void 0 : _range$date.startDate,
-        endDate: (_range$date2 = range.date) == null ? void 0 : _range$date2.endDate
-      });
-    });
-  }, []);
-  var onFocusInput = React.useCallback(function () {
-    onFocus && onFocus();
-    modalRef.current.openModal();
-  }, [onFocus]);
-  return /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, /*#__PURE__*/React__default.default.createElement(index.Input, Object.assign({
-    readonly: "true",
-    type: "text",
-    onFocus: onFocusInput,
-    value: value
-    // onBlur={input.onBlur}
-    ,
-    onChange: function onChange() {
-      /* set empty function for disable react warning */
-    },
-    placeholder: placeholder
-  }, inputProps)), /*#__PURE__*/React__default.default.createElement(Modal.Modal, {
-    ref: modalRef,
-    isOpen: modalIsOpen,
-    isFader: modalIsFader,
-    isOutsideClose: modalIsOutsideClose,
-    shape: modalShape,
-    elevation: modalElevation,
-    padding: modalPadding
-  }, /*#__PURE__*/React__default.default.createElement(reactDateRange.DateRange, Object.assign({
-    locale: index$1.ru,
-    className: clsx__default.default('date-range-picker'),
-    ranges: [dateRanges],
-    toFormat: toFormat,
-    weekdayDisplayFormat: "EEEEEE",
-    dayDisplayFormat: "d",
-    showDateDisplay: false,
-    onChange: onChangeDate
-  }, dateRangeProps)), /*#__PURE__*/React__default.default.createElement(index$2.Button, {
-    width: "fill",
-    fill: primaryButtonFill,
-    fillHover: primaryButtonFillHover,
-    size: primaryButtonSize,
-    labelTextColor: primaryButtonLabelTextColor,
-    labelSize: primaryButtonLabelSize,
-    labelTextWeight: primaryButtonLabelTextWeight,
-    label: primaryButtonLabel,
-    shape: primaryButtonShape,
-    onClick: onClickSave
-  }), /*#__PURE__*/React__default.default.createElement(index$2.Button, {
-    width: "fill",
-    fill: secondaryButtonFill,
-    fillHover: secondaryButtonFillHover,
-    size: secondaryButtonSize,
-    labelTextColor: secondaryButtonLabelTextColor,
-    labelSize: secondaryButtonLabelSize,
-    shape: secondaryButtonShape,
-    labelTextWeight: secondaryButtonLabelTextWeight,
-    label: secondaryButtonLabel,
-    onClick: onClickCancel
-  })));
-});
-DateRangePickerInput.displayName = 'DateRangePickerInput';
-DateRangePickerInput.defaultProps = {
-  primaryButtonFill: 'accentPrimary',
-  primaryButtonFillHover: 'accentPrimaryHover',
-  primaryButtonSize: 'xl',
-  primaryButtonShape: 'rounded',
-  primaryButtonLabelTextColor: 'accentTextPrimary',
-  primaryButtonLabelSize: 'l',
-  primaryButtonLabel: 'OK',
-  secondaryButtonFill: 'surfaceSecondary',
-  secondaryButtonFillHover: 'surfaceSecondaryHover',
-  secondaryButtonSize: 'xl',
-  secondaryButtonShape: 'rounded',
-  secondaryButtonLabelTextColor: 'surfaceTextPrimary',
-  secondaryButtonLabelSize: 'l',
-  secondaryButtonLabel: 'Отмена'
-};
-
-exports.DateRangePickerInput = DateRangePickerInput;