@itcase/ui 1.1.6 → 1.1.8

package/dist/components/Modal.js

@@ -1,402 +1,21 @@
-'use strict';
-
-var React = require('react');
-var PropTypes = require('prop-types');
-var ReactDOM = require('react-dom');
-var clsx = require('clsx');
-var index = require('./Overlay.js');
-var useStyles = require('../hooks/useStyles.js');
-var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
-var index$1 = require('./Loader.js');
-require('../constants/componentProps/fill.js');
-require('../constants/componentProps/fillGradient.js');
-require('lodash/castArray');
-require('lodash/camelCase');
-require('../context/UIContext.js');
-require('../hooks/useMediaQueries.js');
-require('react-responsive');
-require('lodash/maxBy');
-require('lodash/upperFirst');
-require('../hooks/styleAttributes.js');
-require('./Text.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/textGradient.js');
-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);
-
-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.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] = React.useState(null);
-  React.useLayoutEffect(() => {
-    const element = getOrCreateModalElement(modalQuerySelector, className);
-    setModalElement(element);
-    if (element) {
-      addModalProps(element);
-    }
-  }, []);
-  const modalContentRef = React.useRef(null);
-  const modalOverlayRef = React.useRef(null);
-  const [isOpen, setIsOpen] = React.useState(initialIsOpen);
-  const addModalProps = React.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]);
-  React.useEffect(() => {
-    if (!modalElement) {
-      return;
-    }
-    addModalProps(modalElement);
-  }, [isOpen]); // eslint-disable-line
-
-  // Show modal with children content
-  const openModal = React.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 = React.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
-  React.useImperativeHandle(ref, () => ({
-    isOpen,
-    openModal,
-    closeModal,
-    modalElement
-  }));
-  const fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'fill_',
-    propsKey: 'fill'
-  });
-
-  // Collect classes and styles
-  const shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'modal-shape_',
-    propsKey: 'shape'
-  });
-  const borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'border-color_',
-    propsKey: 'borderColor'
-  });
-  const borderWidthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'border-width_',
-    propsKey: 'borderWidth'
-  });
-  const borderTypeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'border_type_',
-    propsKey: 'borderType'
-  });
-  const elevationClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'elevation_',
-    propsKey: 'elevation'
-  });
-  const {
-    styles: modalStyles
-  } = useStyles.useStyles(props);
-
-  // 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, fillClass, shapeClass, borderColorClass, borderWidthClass, borderTypeClass, elevationClass),
-    id: id,
-    ref: modalContentRef,
-    style: modalStyles,
-    tabIndex: 0,
-    onBlur: debug ? undefined : closeModal
-  }, closeButton && /*#__PURE__*/React__default.default.createElement("div", {
-    className: "modal-content__close",
-    onClick: closeModal
-  }, closeButton), /*#__PURE__*/React__default.default.createElement("div", {
-    className: "modal-content__wrapper"
-  }, children)), /*#__PURE__*/React__default.default.createElement(index.Overlay, {
-    className: clsx__default.default('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__default.default.any,
-  className: PropTypes__default.default.string,
-  closeIcon: PropTypes__default.default.string,
-  closeText: PropTypes__default.default.string,
-  contentClassName: PropTypes__default.default.string,
-  debug: PropTypes__default.default.bool,
-  overlayFill: PropTypes__default.default.string,
-  overlayFillGradient: PropTypes__default.default.string,
-  overlayOpacity: PropTypes__default.default.string,
-  id: PropTypes__default.default.string,
-  isOverlay: PropTypes__default.default.bool,
-  isScrollOnOpen: PropTypes__default.default.bool,
-  isSetFocusOnOpen: PropTypes__default.default.bool,
-  modalQuerySelector: PropTypes__default.default.string,
-  onCloseModal: PropTypes__default.default.func,
-  onOpenModal: PropTypes__default.default.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.default.createElement("div", {
-    className: "modal-loading"
-  }, /*#__PURE__*/React__default.default.createElement("div", {
-    className: "modal-loading__inner"
-  }, /*#__PURE__*/React__default.default.createElement(index$1.Loader, null)));
-}
-ModalLoader.__docgenInfo = {
-  "description": "",
-  "methods": [],
-  "displayName": "ModalLoader"
-};
-
-exports.Modal = Modal;
-exports.ModalLoader = ModalLoader;
+export { M as Modal, a as ModalLoader } from '../ModalLoader-DJVKhIZR.js';
+import 'react';
+import 'prop-types';
+import 'react-dom';
+import 'clsx';
+import './Overlay.js';
+import '../constants/componentProps/fill.js';
+import '../constants/componentProps/fillGradient.js';
+import '../hooks/useDeviceTargetClass.js';
+import 'lodash/castArray';
+import 'lodash/camelCase';
+import '../context/UIContext.js';
+import '../hooks/useMediaQueries.js';
+import 'react-responsive';
+import '../hooks/useStyles.js';
+import 'lodash/maxBy';
+import 'lodash/upperFirst';
+import '../hooks/styleAttributes.js';
+import './Loader.js';
+import '../Text-BcGbRc14.js';
+import '../jsx-runtime-ClDdVO4Q.js';

package/dist/components/Notification/Notification.interface.d.ts

@@ -0,0 +1,49 @@
+import React from 'react';
+import { TypeStyleAttributes } from '../../hooks/styleAttributes.interface';
+import { fillPropsType, sizePropsType, textColorPropsType, textSizePropsType, titleSizePropsType } from '../../types';
+import { appearanceKeysDefaultType } from '../../types/componentProps/appearanceKeys';
+export interface INotificationItemThemeColor {
+    fill?: fillPropsType;
+    size?: sizePropsType;
+    textSize?: textSizePropsType;
+    textColor?: textColorPropsType;
+    titleTextSize?: titleSizePropsType;
+    titleTextColor?: textColorPropsType;
+}
+type appearanceKeysType = appearanceKeysDefaultType & {};
+export type notificationItemAppearanceType = {
+    [key in appearanceKeysType]?: INotificationItemThemeColor;
+};
+export interface INotificationItemConfig {
+    appearance: notificationItemAppearanceType | undefined;
+    setAppearance: (newComponent: notificationItemAppearanceType) => void;
+}
+export interface INotificationItemProps extends TypeStyleAttributes {
+    id?: number | string;
+    appearance?: appearanceKeysType;
+    className?: string;
+    after?: React.ReactNode;
+    before?: React.ReactNode;
+    closeButton?: React.ReactNode;
+    set?: string;
+    status?: string;
+    size?: sizePropsType;
+    dataTour?: string;
+    text?: string;
+    textSize?: textSizePropsType;
+    textColor?: textColorPropsType;
+    title?: string;
+    titleTextSize?: titleSizePropsType;
+    titleTextColor?: textColorPropsType;
+    type?: string;
+    onClickClose?: (id?: number | string) => void;
+    fill?: fillPropsType;
+}
+export interface INotificationListProps {
+    className?: string;
+    size?: sizePropsType;
+    type?: string;
+    set?: string;
+    closeButton?: React.ReactNode;
+}
+export {};

package/dist/components/Notification/NotificationItem.d.ts

@@ -0,0 +1,10 @@
+import { INotificationItemConfig, INotificationItemProps } from './Notification.interface';
+declare const notificationItemConfig: INotificationItemConfig;
+declare function NotificationItem(props: INotificationItemProps): import("react/jsx-runtime").JSX.Element;
+declare namespace NotificationItem {
+    var defaultProps: {
+        titleTextSize: string;
+        textSize: string;
+    };
+}
+export { NotificationItem, notificationItemConfig };

package/dist/components/Notification/NotificationList.d.ts

@@ -0,0 +1,3 @@
+import { INotificationListProps } from './Notification.interface';
+declare function NotificationList(props: INotificationListProps): import("react/jsx-runtime").JSX.Element;
+export { NotificationList };

package/dist/components/Notification/index.d.ts

@@ -0,0 +1,3 @@
+import { NotificationItem, notificationItemConfig } from './NotificationItem';
+import { NotificationList } from './NotificationList';
+export { NotificationList, NotificationItem, notificationItemConfig };