@itcase/ui 1.0.11 → 1.0.13

package/dist/components/Empty.js

@@ -0,0 +1,95 @@
+'use strict';
+
+var React = require('react');
+var PropTypes = require('prop-types');
+var size = require('../constants/componentProps/size.js');
+var fill = require('../constants/componentProps/fill.js');
+var shape = require('../constants/componentProps/shape.js');
+var width = require('../constants/componentProps/width.js');
+var textColor = require('../constants/componentProps/textColor.js');
+var index$1 = require('./Button.js');
+var index = require('./Text.js');
+require('clsx');
+require('../constants/componentProps/borderType.js');
+require('../constants/componentProps/horizontalResizeMode.js');
+require('../constants/componentProps/type.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/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('../constants/componentProps/textColorActive.js');
+require('../constants/componentProps/textColorHover.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
+
+function Empty(props) {
+  var before = props.before,
+    message = props.message,
+    messageTextColor = props.messageTextColor,
+    messageTextSize = props.messageTextSize,
+    buttonAfter = props.buttonAfter,
+    buttonBefore = props.buttonBefore,
+    buttonFill = props.buttonFill,
+    buttonFillHover = props.buttonFillHover,
+    buttonLabel = props.buttonLabel,
+    buttonLabelTextColor = props.buttonLabelTextColor,
+    buttonLabelTextSize = props.buttonLabelTextSize,
+    buttonShape = props.buttonShape,
+    buttonSize = props.buttonSize,
+    buttonWidth = props.buttonWidth;
+  return /*#__PURE__*/React__default.default.createElement("div", {
+    className: "empty"
+  }, before, message && /*#__PURE__*/React__default.default.createElement(index.Text, {
+    className: "empty__message",
+    size: messageTextSize,
+    textColor: messageTextColor
+  }, message), buttonLabel && /*#__PURE__*/React__default.default.createElement(index$1.Button, {
+    className: "empty__button",
+    after: buttonAfter,
+    before: buttonBefore,
+    fill: buttonFill,
+    fillHover: buttonFillHover,
+    label: buttonLabel,
+    labelTextColor: buttonLabelTextColor,
+    labelTextSize: buttonLabelTextSize,
+    shape: buttonShape,
+    size: buttonSize,
+    width: buttonWidth
+  }));
+}
+Empty.propTypes = {
+  before: PropTypes__default.default.any,
+  message: PropTypes__default.default.string,
+  messageTextColor: PropTypes__default.default.oneOf(textColor.default),
+  messageTextSize: PropTypes__default.default.oneOf(size.default),
+  buttonAfter: PropTypes__default.default.any,
+  buttonBefore: PropTypes__default.default.any,
+  buttonFill: PropTypes__default.default.oneOf(fill.default),
+  buttonFillHover: PropTypes__default.default.oneOf(fill.default),
+  buttonLabel: PropTypes__default.default.string,
+  buttonLabelTextColor: PropTypes__default.default.oneOf(textColor.default),
+  buttonLabelTextSize: PropTypes__default.default.oneOf(size.default),
+  buttonShape: PropTypes__default.default.oneOf(shape.default),
+  buttonSize: PropTypes__default.default.oneOf(size.default),
+  buttonWidth: PropTypes__default.default.oneOf(width.default)
+};
+
+exports.Empty = Empty;

package/dist/components/FormField.js

@@ -37,8 +37,7 @@ require('../constants/componentProps/textGradient.js');
 require('../constants/componentProps/type.js');
 require('../constants/componentProps/underline.js');
 require('react-select');
-require('../defineProperty-72768a50.js');
-require('../typeof-6dd323c6.js');
+require('../defineProperty-f9e5e1f3.js');
 require('react-dom');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

package/dist/components/Grid.js

@@ -76,26 +76,26 @@ function Grid(props) {
     prefix: 'fill_',
     propsKey: 'fill'
   });
-  var fillWrapperClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'fill_',
     propsKey: 'fillWrapper'
   });
-  var fillWrapperInnerClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'fill_',
     propsKey: 'fillWrapperInner'
   });
-  var shapeWrapperClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'grid_shape_',
     propsKey: 'shapeWrapper'
   });
-  var shapeWrapperInnerClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'grid_shape_',
     propsKey: 'shapeWrapperInner'
   });
   var _useStyles = useStyles.useStyles(props),
-    gridStyles = _useStyles.styles,
-    gridWrapperStyles = _useStyles.gridWrapper,
-    gridWrapperInnerStyles = _useStyles.gridWrapperInner;
+    gridStyles = _useStyles.styles;
+    _useStyles.gridWrapper;
+    _useStyles.gridWrapperInner;
   return /*#__PURE__*/React__default.default.createElement(Tag, {
     className: clsx__default.default(className, 'grid', useGridSystem && "grid_state_system", type && "grid_type_" + type, columnsClass, rowsClass, rowGapClass, columnGapClass, alignContentClass, alignItemsClass, justifyContentClass, justifyItemsClass, fillClass, horizontalResizing && "grid_horizontal-resizing_" + horizontalResizing, verticalResizing && "grid_vertical-resizing_" + verticalResizing),
     id: id,
@@ -103,13 +103,7 @@ function Grid(props) {
     onClick: onClick
   }, before && /*#__PURE__*/React__default.default.createElement("div", {
     className: "grid__before"
-  }, before), /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default('grid__wrapper', fillWrapperClass, shapeWrapperClass),
-    style: gridWrapperStyles
-  }, /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default('grid__wrapper-inner', fillWrapperInnerClass, shapeWrapperInnerClass),
-    style: gridWrapperInnerStyles
-  }, children)), after && /*#__PURE__*/React__default.default.createElement("div", {
+  }, before), children, after && /*#__PURE__*/React__default.default.createElement("div", {
     className: "grid__after"
   }, after));
 }

package/dist/components/Label.js

@@ -8,7 +8,6 @@ var borderType = require('../constants/componentProps/borderType.js');
 var size = require('../constants/componentProps/size.js');
 var fill = require('../constants/componentProps/fill.js');
 var shape = require('../constants/componentProps/shape.js');
-var emojiSize = require('../constants/componentProps/emojiSize.js');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 var useStyles = require('../useStyles-e4accb53.js');
 require('../constants/componentProps/textColor.js');
@@ -102,10 +101,6 @@ Label.propTypes = {
   borderTypeDesktop: PropTypes__default.default.oneOf(borderType.default),
   borderTypeMobile: PropTypes__default.default.oneOf(borderType.default),
   borderTypeTablet: PropTypes__default.default.oneOf(borderType.default),
-  emoji: PropTypes__default.default.string,
-  emojiFill: PropTypes__default.default.oneOf(fill.default),
-  emojiSize: PropTypes__default.default.oneOf(emojiSize.default),
-  emojiType: PropTypes__default.default.string,
   fill: PropTypes__default.default.oneOf(fill.default),
   fillDesktop: PropTypes__default.default.oneOf(fill.default),
   fillMobile: PropTypes__default.default.oneOf(fill.default),

package/dist/components/Modal.js

@@ -1,21 +1,20 @@
 'use strict';
 
-var Modal = require('../Modal-375ef8c3.js');
 var React = require('react');
-var index = require('./Loader.js');
-require('prop-types');
-require('react-dom');
-require('clsx');
-require('./Fader.js');
+var PropTypes = require('prop-types');
+var ReactDOM = require('react-dom');
+var clsx = require('clsx');
+var index = require('./Fader.js');
+var useStyles = require('../useStyles-e4accb53.js');
+var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
+var index$1 = require('./Loader.js');
 require('../constants/componentProps/fill.js');
 require('../constants/componentProps/fillGradient.js');
-require('../hooks/useDeviceTargetClass.js');
 require('lodash/castArray');
 require('lodash/camelCase');
 require('../context/UIContext.js');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
-require('../useStyles-e4accb53.js');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
@@ -30,14 +29,233 @@ require('../constants/componentProps/textWeight.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'
+};
 
 function ModalLoader(props) {
   return /*#__PURE__*/React__default.default.createElement("div", {
     className: "modal-loading"
   }, /*#__PURE__*/React__default.default.createElement("div", {
     className: "modal-loading__inner"
-  }, /*#__PURE__*/React__default.default.createElement(index.Loader, null)));
+  }, /*#__PURE__*/React__default.default.createElement(index$1.Loader, null)));
 }
 
-exports.Modal = Modal.Modal;
+exports.Modal = Modal;
 exports.ModalLoader = ModalLoader;

package/dist/components/Search.js

@@ -57,9 +57,9 @@ var SearchInput = /*#__PURE__*/React__default.default.forwardRef(function Search
     iconClear = props.iconClear;
     props.iconClearBgFill;
     var iconClearFill = props.iconClearFill,
-    iconClearSize = props.iconClearSize,
-    iconClearStroke = props.iconClearStroke,
-    placeholder = props.placeholder,
+    iconClearSize = props.iconClearSize;
+    props.iconClearStroke;
+    var placeholder = props.placeholder,
     type = props.type,
     value = props.value,
     onChange = props.onChange,
@@ -189,7 +189,6 @@ var SearchInput = /*#__PURE__*/React__default.default.forwardRef(function Search
     SvgImage: iconClear,
     size: iconClearSize,
     iconFill: iconClearFill,
-    iconStroke: iconClearStroke,
     onClick: onClickClearIcon
   })), iconAfter && /*#__PURE__*/React__default.default.createElement(index.Icon, {
     className: "search-input__icon search-input__icon-after",

package/dist/components/Segmented.js

@@ -79,8 +79,12 @@ var Segmented = /*#__PURE__*/React__default.default.forwardRef(function (props,
     prefix: 'fill_',
     propsKey: 'fill'
   });
+  var widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'segmented_width_',
+    propsKey: 'width'
+  });
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(className, 'segmented', shapeClass, fillClass, size && "segmented_size_" + size, type && "segmented_type_" + type),
+    className: clsx__default.default(className, 'segmented', shapeClass, fillClass, widthClass, size && "segmented_size_" + size, type && "segmented_type_" + type),
     ref: controlRef
   }, /*#__PURE__*/React__default.default.createElement("div", {
     className: "segmented__wrapper"

package/dist/components/Select.js

@@ -4,8 +4,7 @@ var React = require('react');
 var PropTypes = require('prop-types');
 var clsx = require('clsx');
 var Select$1 = require('react-select');
-var defineProperty = require('../defineProperty-72768a50.js');
-var _typeof = require('../typeof-6dd323c6.js');
+var defineProperty = require('../defineProperty-f9e5e1f3.js');
 var ReactDOM = require('react-dom');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 var index$1 = require('./Icon.js');
@@ -3436,7 +3435,7 @@ function classNames(prefix, state) {
 
 var cleanValue = function cleanValue(value) {
   if (isArray(value)) return value.filter(Boolean);
-  if (_typeof._typeof(value) === 'object' && value !== null) return [value];
+  if (defineProperty._typeof(value) === 'object' && value !== null) return [value];
   return [];
 };