@itcase/ui 1.1.5 → 1.1.7

package/dist/ModalLoader-DJVKhIZR.js

@@ -0,0 +1,374 @@
+import React__default, { useState, useLayoutEffect, useRef, useCallback, useEffect, useImperativeHandle } from 'react';
+import PropTypes from 'prop-types';
+import ReactDOM__default from 'react-dom';
+import clsx from 'clsx';
+import { Overlay } from './components/Overlay.js';
+import { useStyles } from './hooks/useStyles.js';
+import { useDeviceTargetClass } from './hooks/useDeviceTargetClass.js';
+import { Loader } from './components/Loader.js';
+
+const getOrCreateModalElement = (modalQuerySelector, className = '') => {
+  // prettier-ignore
+  const classList = className && typeof className === 'string' ? className.split(' ').filter(Boolean) : [];
+  let 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) {
+      modalElement.classList.add(...classList);
+    }
+    document.body.prepend(modalElement);
+  }
+  return modalElement;
+};
+
+// Modal component that is an abstraction around the portal API.
+const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(props, ref) {
+  const {
+    children,
+    className,
+    closeButton,
+    contentClassName,
+    id,
+    isOverlay,
+    overlayClassName,
+    overlayFill,
+    overlayFillGradient,
+    overlayOpacity,
+    isOpen: initialIsOpen,
+    isScrollOnOpen,
+    isSetFocusOnOpen,
+    modalQuerySelector,
+    debug,
+    onCloseModal,
+    onOpenModal
+  } = props;
+
+  // Query DOM element
+  const [modalElement, setModalElement] = useState(null);
+  useLayoutEffect(() => {
+    const element = getOrCreateModalElement(modalQuerySelector, className);
+    setModalElement(element);
+    if (element) {
+      addModalProps(element);
+    }
+  }, []);
+  const modalContentRef = useRef(null);
+  const modalOverlayRef = useRef(null);
+  const [isOpen, setIsOpen] = useState(initialIsOpen);
+  const addModalProps = useCallback(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(() => modalContentRef.current.focus(), 0);
+      }
+    } else if (!element.children.length) {
+      // Hide modal if has no children
+      element.classList.remove('modal_state_visible');
+    }
+  }, [isOpen, isSetFocusOnOpen]);
+  useEffect(() => {
+    if (!modalElement) {
+      return;
+    }
+    addModalProps(modalElement);
+  }, [isOpen]); // eslint-disable-line
+
+  // Show modal with children content
+  const openModal = useCallback(() => {
+    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 overlay to end of modal root container after container
+      const modalOverlayElement = modalOverlayRef.current
+      if (modalOverlayElement) {
+        modalOverlayElement.parentNode.appendChild(modalOverlayElement)
+      }
+    */
+  }, [onOpenModal]);
+
+  // Hide modal and unmount children content
+  const closeModal = useCallback((event = {}) => {
+    const hasRelatedTarget = event.relatedTarget && modalElement.contains(event.relatedTarget);
+    if (hasRelatedTarget) {
+      return event;
+    }
+    setIsOpen(false);
+
+    // Callback
+    if (typeof onCloseModal === 'function') {
+      onCloseModal();
+    }
+  }, [modalElement, onCloseModal]);
+
+  // Save ref things
+  useImperativeHandle(ref, () => ({
+    isOpen,
+    openModal,
+    closeModal,
+    modalElement
+  }));
+  const fillClass = useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'fill'
+  });
+
+  // Collect classes and styles
+  const shapeClass = useDeviceTargetClass(props, {
+    prefix: 'modal-shape_',
+    propsKey: 'shape'
+  });
+  const borderColorClass = useDeviceTargetClass(props, {
+    prefix: 'border-color_',
+    propsKey: 'borderColor'
+  });
+  const borderWidthClass = useDeviceTargetClass(props, {
+    prefix: 'border-width_',
+    propsKey: 'borderWidth'
+  });
+  const borderTypeClass = useDeviceTargetClass(props, {
+    prefix: 'border_type_',
+    propsKey: 'borderType'
+  });
+  const elevationClass = useDeviceTargetClass(props, {
+    prefix: 'elevation_',
+    propsKey: 'elevation'
+  });
+  const {
+    styles: modalStyles
+  } = useStyles(props);
+
+  // Use a portal to render the children into the element
+  return modalElement && /*#__PURE__*/ReactDOM__default.createPortal(
+  // Any valid React child: JSX, strings, arrays, etc.
+  isOpen ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
+    className: clsx('modal-content', contentClassName, fillClass, shapeClass, borderColorClass, borderWidthClass, borderTypeClass, elevationClass),
+    id: id,
+    ref: modalContentRef,
+    style: modalStyles,
+    tabIndex: 0,
+    onBlur: debug ? undefined : closeModal
+  }, closeButton && /*#__PURE__*/React__default.createElement("div", {
+    className: "modal-content__close",
+    onClick: closeModal
+  }, closeButton), /*#__PURE__*/React__default.createElement("div", {
+    className: "modal-content__wrapper"
+  }, children)), /*#__PURE__*/React__default.createElement(Overlay, {
+    className: clsx('modal__overlay', 'overlay_type_modal', overlayClassName),
+    fill: overlayFill,
+    fillGradient: overlayFillGradient,
+    isOverlay: isOverlay,
+    opacity: overlayOpacity,
+    ref: modalOverlayRef
+  })) : null,
+  // A DOM element
+  modalElement);
+});
+Modal.propTypes = {
+  children: PropTypes.any,
+  className: PropTypes.string,
+  closeIcon: PropTypes.string,
+  closeText: PropTypes.string,
+  contentClassName: PropTypes.string,
+  debug: PropTypes.bool,
+  overlayFill: PropTypes.string,
+  overlayFillGradient: PropTypes.string,
+  overlayOpacity: PropTypes.string,
+  id: PropTypes.string,
+  isOverlay: PropTypes.bool,
+  isScrollOnOpen: PropTypes.bool,
+  isSetFocusOnOpen: PropTypes.bool,
+  modalQuerySelector: PropTypes.string,
+  onCloseModal: PropTypes.func,
+  onOpenModal: PropTypes.func
+};
+Modal.defaultProps = {
+  isOverlay: true,
+  isOpen: false,
+  isScrollOnOpen: true,
+  isSetFocusOnOpen: true,
+  modalQuerySelector: '#modal-global'
+};
+Modal.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "Modal",
+  "props": {
+    "isOverlay": {
+      "defaultValue": {
+        "value": "true",
+        "computed": false
+      },
+      "description": "",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
+    },
+    "isOpen": {
+      "defaultValue": {
+        "value": "false",
+        "computed": false
+      },
+      "required": false
+    },
+    "isScrollOnOpen": {
+      "defaultValue": {
+        "value": "true",
+        "computed": false
+      },
+      "description": "",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
+    },
+    "isSetFocusOnOpen": {
+      "defaultValue": {
+        "value": "true",
+        "computed": false
+      },
+      "description": "",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
+    },
+    "modalQuerySelector": {
+      "defaultValue": {
+        "value": "'#modal-global'",
+        "computed": false
+      },
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "children": {
+      "description": "",
+      "type": {
+        "name": "any"
+      },
+      "required": false
+    },
+    "className": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "closeIcon": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "closeText": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "contentClassName": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "debug": {
+      "description": "",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
+    },
+    "overlayFill": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "overlayFillGradient": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "overlayOpacity": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "id": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "onCloseModal": {
+      "description": "",
+      "type": {
+        "name": "func"
+      },
+      "required": false
+    },
+    "onOpenModal": {
+      "description": "",
+      "type": {
+        "name": "func"
+      },
+      "required": false
+    }
+  }
+};
+
+function ModalLoader(props) {
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "modal-loading"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "modal-loading__inner"
+  }, /*#__PURE__*/React__default.createElement(Loader, null)));
+}
+ModalLoader.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "ModalLoader"
+};
+
+export { Modal as M, ModalLoader as a };

package/dist/NotificationList-KbxjrO3o.js

@@ -0,0 +1,245 @@
+import React__default from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { T as Text } from './Text-DffpwlYq.js';
+import { Title } from './components/Title.js';
+import './Group-DhYXDvAJ.js';
+import { useDeviceTargetClass } from './hooks/useDeviceTargetClass.js';
+import { useNotifications, useNotificationsAPI } from './context/Notifications.js';
+
+const notificationItemConfig = {
+  appearance: {},
+  setAppearance: newComponent => {
+    notificationItemConfig.appearance = newComponent;
+  }
+};
+function NotificationItem(props) {
+  const {
+    id,
+    appearance,
+    closeButton,
+    after,
+    before,
+    set,
+    status,
+    size,
+    dataTour,
+    text,
+    textSize,
+    textColor,
+    title,
+    titleTextSize,
+    titleTextColor,
+    onClickClose,
+    className
+  } = props;
+  const fillClass = useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'fill'
+  });
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: clsx('notification__item', status && `notification__item_status_${status}`, set && `notification__item_set_${set}`, size && `notification__item_set_${size}`, closeButton && 'notification__item_type_close-button', fillClass || notificationItemConfig.appearance[appearance]?.fill && `fill_${notificationItemConfig.appearance[appearance].fill}`.replace(/([A-Z])/g, '-$1').toLowerCase()),
+    "data-tour": dataTour
+  }, before, /*#__PURE__*/React__default.createElement("div", {
+    className: clsx(className, 'notification__item-wrapper')
+  }, title && /*#__PURE__*/React__default.createElement(Title, {
+    className: "notification__item-title",
+    size: titleTextSize,
+    textColor: titleTextColor || notificationItemConfig.appearance[appearance]?.titleTextColor && notificationItemConfig.appearance[appearance].titleTextColor.replace(/([A-Z])/g, '-$1').toLowerCase()
+  }, title), text && /*#__PURE__*/React__default.createElement(Text, {
+    className: "notification__item-text",
+    size: textSize,
+    textColor: textColor || notificationItemConfig.appearance[appearance]?.textColor && notificationItemConfig.appearance[appearance].textColor.replace(/([A-Z])/g, '-$1').toLowerCase()
+  }, text), closeButton && /*#__PURE__*/React__default.createElement("div", {
+    className: clsx('notification__item-close', onClickClose && 'cursor_type_pointer'),
+    onClick: () => onClickClose && onClickClose(id)
+  }, closeButton)), after);
+}
+NotificationItem.propTypes = {
+  className: PropTypes.string,
+  type: PropTypes.string,
+  set: PropTypes.string,
+  status: PropTypes.string,
+  text: PropTypes.string,
+  title: PropTypes.string,
+  after: PropTypes.any,
+  before: PropTypes.any
+};
+NotificationItem.defaultProps = {
+  titleTextSize: 'h5',
+  textSize: 's'
+};
+NotificationItem.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "NotificationItem",
+  "props": {
+    "titleTextSize": {
+      "defaultValue": {
+        "value": "'h5'",
+        "computed": false
+      },
+      "required": false
+    },
+    "textSize": {
+      "defaultValue": {
+        "value": "'s'",
+        "computed": false
+      },
+      "required": false
+    },
+    "className": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "type": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "set": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "status": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "text": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "title": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "after": {
+      "description": "",
+      "type": {
+        "name": "any"
+      },
+      "required": false
+    },
+    "before": {
+      "description": "",
+      "type": {
+        "name": "any"
+      },
+      "required": false
+    }
+  }
+};
+
+function NotificationList(props) {
+  const notifications = useNotifications();
+  const {
+    hideNotifications
+  } = useNotificationsAPI();
+  const {
+    className,
+    size,
+    type,
+    set,
+    closeButton
+  } = props;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: clsx('notification', className)
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "notification__wrapper"
+  }, notifications.map((notification, i) => /*#__PURE__*/React__default.createElement(NotificationItem, {
+    key: i,
+    id: notification.id,
+    type: notification.type || type,
+    set: notification.set || set,
+    size: notification.size || size,
+    title: notification.title,
+    text: notification.text,
+    status: notification.status,
+    closeButton: closeButton,
+    onClickClose: hideNotifications
+  }))));
+}
+NotificationList.propTypes = {
+  className: PropTypes.string,
+  type: PropTypes.string,
+  set: PropTypes.string,
+  textColor: PropTypes.string,
+  textSize: PropTypes.string,
+  titleColor: PropTypes.string,
+  titleSize: PropTypes.string
+};
+NotificationList.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "NotificationList",
+  "props": {
+    "className": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "type": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "set": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "textColor": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "textSize": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "titleColor": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "titleSize": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    }
+  }
+};
+
+export { NotificationItem as N, NotificationList as a, notificationItemConfig as n };