@itcase/ui 1.0.5 → 1.0.7

package/dist/components/Popup.js

@@ -1,255 +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('./Icon.js');
-var index$1 = require('./Text.js');
-var index$2 = require('./Fader.js');
-require('lodash/camelCase');
-require('lodash/maxBy');
-require('lodash/upperFirst');
-require('../context/UIContext.js');
-var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
-var index$3 = require('./Loader.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('../hooks/styleAttributes.js');
-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('../hooks/useMediaQueries.js');
-require('react-responsive');
-require('lodash/castArray');
-require('../constants/componentProps/textColorActive.js');
-require('../constants/componentProps/textColorHover.js');
-require('../constants/componentProps/fillGradient.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 getOrCreatePopupElement = function getOrCreatePopupElement(popupQuerySelector, className) {
-  if (className === void 0) {
-    className = '';
-  }
-  // prettier-ignore
-  var classList = className && typeof className === 'string' ? className.split(' ').filter(Boolean) : [];
-  var popupElement = document.querySelector(popupQuerySelector);
-  if (!popupElement) {
-    // Add popup element into the DOM on mount.
-    popupElement = document.createElement('div');
-    popupElement.setAttribute('id', 'popup-global');
-    popupElement.classList.add('popup');
-    if (classList.length) {
-      var _popupElement$classLi;
-      (_popupElement$classLi = popupElement.classList).add.apply(_popupElement$classLi, classList);
-    }
-    document.body.prepend(popupElement);
-  }
-  return popupElement;
-};
-
-// Popup component that is an abstraction around the portal API.
-var Popup = /*#__PURE__*/React__default.default.forwardRef(function Popup(props, ref) {
-  var children = props.children,
-    className = props.className,
-    closeIcon = props.closeIcon,
-    closeIconFill = props.closeIconFill,
-    closeIconSize = props.closeIconSize,
-    closeText = props.closeText;
-    props.contentFill;
-    var 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,
-    popupQuerySelector = props.popupQuerySelector,
-    debug = props.debug,
-    onClosePopup = props.onClosePopup,
-    onOpenPopup = props.onOpenPopup;
-
-  // Query DOM element
-  var _useState = React.useState(null),
-    popupElement = _useState[0],
-    setPopupElement = _useState[1];
-  React.useLayoutEffect(function () {
-    var element = getOrCreatePopupElement(popupQuerySelector, className);
-    setPopupElement(element);
-    if (element) {
-      addPopupProps(element);
-    }
-  }, []);
-  var popupContentRef = React.useRef(null);
-  var popupFaderRef = React.useRef(null);
-  var _useState2 = React.useState(initialIsOpen),
-    isOpen = _useState2[0],
-    setIsOpen = _useState2[1];
-  var addPopupProps = React.useCallback(function (element) {
-    // Change class need in "useEffect"
-    if (isOpen) {
-      // Show popup
-      element.classList.add('popup_state_visible');
-      // Scroll to opened popup
-      if (isScrollOnOpen) {
-        // popupContentRef.current.style.top = `${window.visualViewport.pageTop}px`
-        element.scrollIntoView({
-          block: 'center',
-          behavior: 'smooth'
-        });
-      }
-
-      // "setTimeout" in this implementation is needs for set focus on popup
-      // after "onMouseDown" event on button
-      if (isSetFocusOnOpen) {
-        setTimeout(function () {
-          return popupContentRef.current.focus();
-        }, 0);
-      }
-    } else if (!element.children.length) {
-      // Hide popup if has no children
-      element.classList.remove('popup_state_visible');
-    }
-  }, [isOpen, isSetFocusOnOpen]);
-  React.useEffect(function () {
-    if (!popupElement) {
-      return;
-    }
-    addPopupProps(popupElement);
-  }, [isOpen]); // eslint-disable-line
-
-  // Show popup with children content
-  var openPopup = React.useCallback(function () {
-    setIsOpen(true);
-
-    // Callback
-    if (typeof onOpenPopup === 'function') {
-      onOpenPopup();
-    }
-
-    /* SHOW TARGET POPUP ABOVE OTHERS POPUPS IF TARGET ALREADY OPENED
-      // If current popup is already opened
-      // Move content to end of popup root container. For order in DOM.
-      const popupContentElement = popupContentRef.current
-      if (popupContentElement) {
-        popupContentElement.parentNode.appendChild(popupContentElement)
-      }
-      // Also move fader to end of popup root container after container
-      const popupFaderElement = popupFaderRef.current
-      if (popupFaderElement) {
-        popupFaderElement.parentNode.appendChild(popupFaderElement)
-      }
-    */
-  }, [onOpenPopup]);
-
-  // Hide popup and unmount children content
-  var closePopup = React.useCallback(function (event) {
-    if (event === void 0) {
-      event = {};
-    }
-    var hasRelatedTarget = event.relatedTarget && popupElement.contains(event.relatedTarget);
-    if (hasRelatedTarget) {
-      return event;
-    }
-    setIsOpen(false);
-
-    // Callback
-    if (typeof onClosePopup === 'function') {
-      onClosePopup();
-    }
-  }, [popupElement, onClosePopup]);
-
-  // Save ref things
-  React.useImperativeHandle(ref, function () {
-    return {
-      isOpen: isOpen,
-      openPopup: openPopup,
-      closePopup: closePopup,
-      popupElement: popupElement
-    };
-  });
-  var contentFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'fill_',
-    propsKey: 'contentFill'
-  });
-
-  // Use a portal to render the children into the element
-  return popupElement && /*#__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", {
-    ref: popupContentRef,
-    className: clsx__default.default('popup-content', contentClassName, contentFillClass),
-    id: id,
-    tabIndex: 0,
-    onBlur: debug ? undefined : closePopup
-  }, closeIcon && /*#__PURE__*/React__default.default.createElement("div", {
-    className: "popup-content__close",
-    onClick: closePopup
-  }, closeIcon && /*#__PURE__*/React__default.default.createElement(index.Icon, {
-    SvgImage: closeIcon,
-    size: closeIconSize,
-    fill: closeIconFill
-  }), closeText && /*#__PURE__*/React__default.default.createElement(index$1.Text, null, closeText)), children), /*#__PURE__*/React__default.default.createElement(index$2.Fader, {
-    ref: popupFaderRef,
-    fill: faderFill,
-    fillGradient: faderFillGradient,
-    opacity: faderOpacity,
-    className: "popup__fader",
-    isFader: isFader
-  })) : null,
-  // A DOM element
-  popupElement);
-});
-Popup.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,
-  popupQuerySelector: PropTypes__default.default.string,
-  debug: PropTypes__default.default.bool,
-  onClosePopup: PropTypes__default.default.func,
-  onOpenPopup: PropTypes__default.default.func
-};
-Popup.defaultProps = {
-  isFader: true,
-  isOpen: false,
-  isScrollOnOpen: true,
-  isSetFocusOnOpen: true,
-  popupQuerySelector: '#popup-global'
-};
-
-function PopupLoader(props) {
-  return /*#__PURE__*/React__default.default.createElement("div", {
-    className: "popup-loading"
-  }, /*#__PURE__*/React__default.default.createElement("div", {
-    className: "popup-loading__inner"
-  }, /*#__PURE__*/React__default.default.createElement(index$3.Loader, null)));
-}
-
-exports.Popup = Popup;
-exports.PopupLoader = PopupLoader;

package/dist/css/components/Counter/Counter.css

@@ -1,55 +0,0 @@
-.counter {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 50%;
-}
-.counter {
-  &_size {
-    @each $size in xxs, xs, s, m, l, xl, xxl {
-      &_$(size) {
-        min-width: var(--counter-width-size-$(size));
-        min-height: var(--counter-height-size-$(size));
-        max-height: var(--counter-height-size-$(size));
-      }
-    }
-  }
-}
-.counter {
-  &&_type {
-    &_accent {
-      background: var(--color-accent-primary);
-      color: var(--color-accent-text-primary);
-    }
-  }
-}
-.counter {
-  &&_type {
-    &_primary {
-      background: var(--color-primary);
-      color: var(--color-primary-text-primary);
-    }
-  }
-}
-:root {
-  --counter-width-size-xxs: 16px;
-  --counter-height-size-xxs: 16px;
-
-  --counter-width-size-xs: 18px;
-  --counter-height-size-xs: 18px;
-
-  --counter-width-size-s: 20px;
-  --counter-height-size-s: 20px;
-
-  --counter-width-size-m: 24px;
-  --counter-height-size-m: 24px;
-
-  --counter-width-size-l: 32px;
-  --counter-height-size-l: 32px;
-
-  --counter-width-size-xl: 40px;
-  --counter-height-size-xl: 40px;
-
-  --counter-width-size-xxl: 48px;
-  --counter-height-size-xxl: 48px;
-}