@itcase/ui 1.0.10 → 1.0.11

package/dist/Modal-375ef8c3.js

@@ -0,0 +1,234 @@
+'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/Chips.js

@@ -36,6 +36,7 @@ function Chips(props) {
     label = props.label,
     labelSize = props.labelSize,
     labelTextColor = props.labelTextColor,
+    labelTextWeight = props.labelTextWeight,
     type = props.type;
   var alignDirectionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'align_',
@@ -75,6 +76,7 @@ function Chips(props) {
   }, typeof label === 'string' ? /*#__PURE__*/React__default.default.createElement(index.Text, {
     className: "chips__label",
     textColor: labelTextColor,
+    textWeight: labelTextWeight,
     size: labelSize
   }, label) : /*#__PURE__*/React__default.default.createElement("div", {
     className: "chips__label"

package/dist/components/Choice.js

@@ -0,0 +1,118 @@
+'use strict';
+
+var React = require('react');
+var PropTypes = require('prop-types');
+var clsx = require('clsx');
+var index = require('./Text.js');
+var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
+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('../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('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 Choice = /*#__PURE__*/React__default.default.forwardRef(function (props, ref) {
+  var name = props.name,
+    className = props.className,
+    type = props.type,
+    options = props.options,
+    active = props.active,
+    setActiveSegment = props.setActiveSegment,
+    size = props.size,
+    labelTextColor = props.labelTextColor,
+    labelTextActiveColor = props.labelTextActiveColor,
+    labelTextSize = props.labelTextSize;
+  var controlRef = React.useRef(null);
+  var optionsRefs = React.useMemo(function () {
+    return new Map(options.map(function (item) {
+      return [item.value, /*#__PURE__*/React.createRef()];
+    }));
+  }, [options]);
+  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 shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'choice_shape_',
+    propsKey: 'shape'
+  });
+  var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'fill'
+  });
+  var fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_hover_',
+    propsKey: 'fillHover'
+  });
+  var fillActiveClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_active_',
+    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),
+    ref: controlRef
+  }, /*#__PURE__*/React__default.default.createElement("div", {
+    className: "choice__wrapper"
+  }, options == null ? void 0 : options.map(function (item, i) {
+    return /*#__PURE__*/React__default.default.createElement("div", {
+      className: clsx__default.default('choice__item', borderColorClass, borderWidthClass, borderTypeClass, fillHoverClass, item.value === active.value && fillActiveClass, item.value === active.value && 'choice__item_active'),
+      key: item.value,
+      ref: optionsRefs.get(item.value)
+    }, /*#__PURE__*/React__default.default.createElement("input", {
+      checked: item.value === active.value,
+      className: "choice__item-radio",
+      id: item.label,
+      name: name,
+      type: "radio",
+      value: item.value,
+      onChange: function onChange() {
+        return setActiveSegment(item);
+      }
+    }), /*#__PURE__*/React__default.default.createElement("label", {
+      className: clsx__default.default('choice__item-label'),
+      htmlFor: item.label
+    }, /*#__PURE__*/React__default.default.createElement(index.Text, {
+      textColor: item.value === active.value ? labelTextActiveColor : labelTextColor,
+      size: labelTextSize
+    }, item.label)));
+  })));
+});
+Choice.displayName = 'Choice';
+Choice.propTypes = {
+  active: PropTypes__default.default.object,
+  className: PropTypes__default.default.string,
+  fill: PropTypes__default.default.string,
+  name: PropTypes__default.default.string,
+  options: PropTypes__default.default.array,
+  setActiveSegment: PropTypes__default.default.func,
+  type: PropTypes__default.default.string
+};
+Choice.defaultProps = {
+  active: {}
+};
+
+exports.Choice = Choice;