@quen-ui/components 0.0.14 → 1.0.0

package/dist/Modal/Modal.es.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
 import { createPortal } from "react-dom";
 import { useTransitionState } from "react-transition-state";
-import { ModalContainer, ModalStyled, ModalHeaderStyled, ModalFooterStyled } from "./styles.es.js";
+import { ModalContainer, ModalStyled, ModalHeaderStyled, ModalContentStyled, ModalFooterStyled } from "./styles.es.js";
 import Title from "../typography/Title/Title.es.js";
 import Text from "../typography/Text/Text.es.js";
 import Button from "../Button/Button.es.js";
@@ -21,8 +21,10 @@ const Modal = ({
   fullScreen,
   classNameFooter,
   className,
+  width,
   ...props
 }) => {
+  console.log(open);
   const [state, toggle] = useTransitionState({
     timeout: 500,
     unmountOnExit: true,
@@ -34,7 +36,7 @@ const Modal = ({
   const [container, setContainer] = useState(null);
   const handleEscapeDown = (event) => {
     if (event.key === "Escape") {
-      onEsc == null ? void 0 : onEsc();
+      onEsc?.();
     }
   };
   useEffect(() => {
@@ -44,18 +46,26 @@ const Modal = ({
     }
     setContainer(container2);
     return () => {
-      container2 == null ? void 0 : container2.removeEventListener("keydown", handleEscapeDown);
+      container2?.removeEventListener("keydown", handleEscapeDown);
     };
   }, []);
+  useEffect(() => {
+    if (state.isEnter) {
+      document.body.style.overflow = "hidden";
+    }
+    return () => {
+      document.body.style.overflow = "unset";
+    };
+  }, [state]);
   if (state.isEnter && container) {
     return createPortal(
-      /* @__PURE__ */ jsx(ModalContainer, { status: state.status, zIndex, ...props, children: /* @__PURE__ */ jsxs(ModalStyled, { fullScreen, className, size, children: [
+      /* @__PURE__ */ jsx(ModalContainer, { status: state.status, zIndex, ...props, children: /* @__PURE__ */ jsxs(ModalStyled, { fullScreen, className, size, width, children: [
         /* @__PURE__ */ jsxs(ModalHeaderStyled, { children: [
           title && /* @__PURE__ */ jsx(Title, { size, children: title }),
-          closeButton && /* @__PURE__ */ jsx(Button, { view: "icon", size, onClick: onClickClose, children: /* @__PURE__ */ jsx(SvgIconClose, { width: 16, height: 16 }) })
+          closeButton && /* @__PURE__ */ jsx(Button, { view: "icon", size, onClick: onClickClose, "aria-label": "Close", children: /* @__PURE__ */ jsx(SvgIconClose, { width: 16, height: 16 }) })
         ] }),
         description && /* @__PURE__ */ jsx(Text, { size, children: description }),
-        children,
+        /* @__PURE__ */ jsx(ModalContentStyled, { scrollable: !fullScreen, children }),
         footer && /* @__PURE__ */ jsx(ModalFooterStyled, { className: classNameFooter, children: footer })
       ] }) }),
       container

package/dist/Modal/styles.cjs.js

@@ -9,30 +9,59 @@ const ModalContainer = styled.div.withConfig({
       opacity: 0;
       transform: scale(0.9);
     `};
-  position: absolute;
+  position: fixed;
   opacity: 1;
-  width: 100%;
-  height: 100%;
-  background: ${({ theme }) => polished.rgba(theme.colors.grayViolet[3], 0.7)};
+  width: 100vw;
+  height: 100vh;
+  background: ${({ theme }) => theme.components.Modal.overlayBackground};
   display: flex;
   align-items: center;
   justify-content: center;
   top: 0;
   left: 0;
   z-index: ${({ zIndex }) => zIndex};
+  overflow-y: auto;
+  padding: 20px;
+  @media (max-width: 480px) {
+    padding: 0;
+  }
 `;
 const ModalStyled = styled.div.withConfig({
-  shouldForwardProp: (props) => !["fullScreen", "size"].includes(props)
+  shouldForwardProp: (props) => !["fullScreen", "size", "width"].includes(props)
 })`
   display: flex;
   flex-direction: column;
   gap: 2rem;
   padding: ${({ theme, size }) => polished.math(`${theme.space[size]} * 2`)};
-  background-color: ${({ theme }) => theme.colors.grayViolet[3]};
+  background-color: ${({ theme }) => theme.components.Modal.backgroundColor};
   border-radius: 0.5rem;
-  ${({ fullScreen }) => fullScreen && styled.css`
-      width: 100%;
-      height: 100%;
+  max-height: calc(100vh - 40px);
+  ${({ fullScreen, width }) => fullScreen ? styled.css`
+          width: 100%;
+          height: 100%;
+          max-height: 100vh;
+        ` : styled.css`
+          max-width: 90vw;
+          width: ${width}px;
+          margin: auto;
+
+          @media (max-width: 768px) {
+            width: 90vw;
+            max-height: 90vh;
+          }
+
+          @media (max-width: 480px) {
+            width: 100vw;
+            max-height: 100vh;
+            border-radius: 0;
+            margin: 0;
+          }
+        `};
+`;
+const ModalContentStyled = styled.div`
+  ${({ scrollable }) => scrollable && styled.css`
+      overflow-y: auto;
+      max-height: 60vh;
     `};
 `;
 const ModalHeaderStyled = styled.div`
@@ -47,6 +76,7 @@ const ModalFooterStyled = styled.div`
   gap: 1rem;
 `;
 exports.ModalContainer = ModalContainer;
+exports.ModalContentStyled = ModalContentStyled;
 exports.ModalFooterStyled = ModalFooterStyled;
 exports.ModalHeaderStyled = ModalHeaderStyled;
 exports.ModalStyled = ModalStyled;

package/dist/Modal/styles.d.ts

@@ -8,6 +8,10 @@ export declare const ModalContainer: import('styled-components/dist/types').ISty
 export declare const ModalStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     fullScreen?: boolean;
     size: TQuenSize;
+    width?: number;
+}>> & string;
+export declare const ModalContentStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    scrollable?: boolean;
 }>> & string;
 export declare const ModalHeaderStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const ModalFooterStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/Modal/styles.es.js

@@ -1,5 +1,5 @@
 import styled, { css } from "styled-components";
-import { rgba, math } from "polished";
+import { math } from "polished";
 const ModalContainer = styled.div.withConfig({
   shouldForwardProp: (prop) => !["status", "zIndex"].includes(prop)
 })`
@@ -7,30 +7,59 @@ const ModalContainer = styled.div.withConfig({
       opacity: 0;
       transform: scale(0.9);
     `};
-  position: absolute;
+  position: fixed;
   opacity: 1;
-  width: 100%;
-  height: 100%;
-  background: ${({ theme }) => rgba(theme.colors.grayViolet[3], 0.7)};
+  width: 100vw;
+  height: 100vh;
+  background: ${({ theme }) => theme.components.Modal.overlayBackground};
   display: flex;
   align-items: center;
   justify-content: center;
   top: 0;
   left: 0;
   z-index: ${({ zIndex }) => zIndex};
+  overflow-y: auto;
+  padding: 20px;
+  @media (max-width: 480px) {
+    padding: 0;
+  }
 `;
 const ModalStyled = styled.div.withConfig({
-  shouldForwardProp: (props) => !["fullScreen", "size"].includes(props)
+  shouldForwardProp: (props) => !["fullScreen", "size", "width"].includes(props)
 })`
   display: flex;
   flex-direction: column;
   gap: 2rem;
   padding: ${({ theme, size }) => math(`${theme.space[size]} * 2`)};
-  background-color: ${({ theme }) => theme.colors.grayViolet[3]};
+  background-color: ${({ theme }) => theme.components.Modal.backgroundColor};
   border-radius: 0.5rem;
-  ${({ fullScreen }) => fullScreen && css`
-      width: 100%;
-      height: 100%;
+  max-height: calc(100vh - 40px);
+  ${({ fullScreen, width }) => fullScreen ? css`
+          width: 100%;
+          height: 100%;
+          max-height: 100vh;
+        ` : css`
+          max-width: 90vw;
+          width: ${width}px;
+          margin: auto;
+
+          @media (max-width: 768px) {
+            width: 90vw;
+            max-height: 90vh;
+          }
+
+          @media (max-width: 480px) {
+            width: 100vw;
+            max-height: 100vh;
+            border-radius: 0;
+            margin: 0;
+          }
+        `};
+`;
+const ModalContentStyled = styled.div`
+  ${({ scrollable }) => scrollable && css`
+      overflow-y: auto;
+      max-height: 60vh;
     `};
 `;
 const ModalHeaderStyled = styled.div`
@@ -46,6 +75,7 @@ const ModalFooterStyled = styled.div`
 `;
 export {
   ModalContainer,
+  ModalContentStyled,
   ModalFooterStyled,
   ModalHeaderStyled,
   ModalStyled

package/dist/Modal/types.d.ts

@@ -27,5 +27,7 @@ export interface IModalProps {
     children?: React.ReactNode;
     /** Footer content (e.g., buttons) */
     footer?: React.ReactNode;
+    /** Width modal window */
+    width?: number;
     [key: string]: any;
 }

package/dist/Notification/Notification.cjs.js

@@ -47,12 +47,12 @@ const Notification = ({
   const handleAutoClose = () => {
     if (typeof autoClose === "number") {
       autoCloseTimeout.current = window.setTimeout(
-        () => onClose == null ? void 0 : onClose({}),
+        () => onClose?.({}),
         autoClose
       );
     }
     if (autoClose) {
-      autoCloseTimeout.current = window.setTimeout(() => onClose == null ? void 0 : onClose({}), 5e3);
+      autoCloseTimeout.current = window.setTimeout(() => onClose?.({}), 5e3);
     }
   };
   React.useEffect(() => {
@@ -65,7 +65,7 @@ const Notification = ({
         IconComponent,
         title ? /* @__PURE__ */ jsxRuntime.jsx(Title, { size: "xs", children: title }) : /* @__PURE__ */ jsxRuntime.jsx(Text, { size: "s", children: message })
       ] }),
-      closeButton && /* @__PURE__ */ jsxRuntime.jsx(Button, { view: "icon", size: "s", onClick: () => onClose == null ? void 0 : onClose({}), children: /* @__PURE__ */ jsxRuntime.jsx(iconClose, { width: 16 }) })
+      closeButton && /* @__PURE__ */ jsxRuntime.jsx(Button, { view: "icon", size: "s", onClick: () => onClose?.({}), children: /* @__PURE__ */ jsxRuntime.jsx(iconClose, { width: 16 }) })
     ] }),
     title && /* @__PURE__ */ jsxRuntime.jsx(Text, { size: "s", type: "secondary", children: message })
   ] });

package/dist/Notification/Notification.es.js

@@ -46,12 +46,12 @@ const Notification = ({
   const handleAutoClose = () => {
     if (typeof autoClose === "number") {
       autoCloseTimeout.current = window.setTimeout(
-        () => onClose == null ? void 0 : onClose({}),
+        () => onClose?.({}),
         autoClose
       );
     }
     if (autoClose) {
-      autoCloseTimeout.current = window.setTimeout(() => onClose == null ? void 0 : onClose({}), 5e3);
+      autoCloseTimeout.current = window.setTimeout(() => onClose?.({}), 5e3);
     }
   };
   useEffect(() => {
@@ -64,7 +64,7 @@ const Notification = ({
         IconComponent,
         title ? /* @__PURE__ */ jsx(Title, { size: "xs", children: title }) : /* @__PURE__ */ jsx(Text, { size: "s", children: message })
       ] }),
-      closeButton && /* @__PURE__ */ jsx(Button, { view: "icon", size: "s", onClick: () => onClose == null ? void 0 : onClose({}), children: /* @__PURE__ */ jsx(SvgIconClose, { width: 16 }) })
+      closeButton && /* @__PURE__ */ jsx(Button, { view: "icon", size: "s", onClick: () => onClose?.({}), children: /* @__PURE__ */ jsx(SvgIconClose, { width: 16 }) })
     ] }),
     title && /* @__PURE__ */ jsx(Text, { size: "s", type: "secondary", children: message })
   ] });

package/dist/Notification/NotificationInstance.cjs.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
-const reactDom = require("react-dom");
+const require$$2 = require("react-dom");
 const helpers = require("@quen-ui/helpers");
 const NotificationsStore = require("./NotificationsStore.cjs.js");
 const styles = require("./styles.cjs.js");
@@ -65,14 +65,14 @@ const NotificationInstance = () => {
     NotificationsStore.subscribe(updateNotifications);
     return () => {
       NotificationsStore.unsubscribe(updateNotifications);
-      element == null ? void 0 : element.remove();
+      element?.remove();
     };
   }, []);
   const updateNotifications = () => {
     setNotifications([...NotificationsStore.data]);
   };
   if (element) {
-    return reactDom.createPortal(
+    return require$$2.createPortal(
       /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         topNotifications.length ? /* @__PURE__ */ jsxRuntime.jsx(
           styles.NotificationsWrapper,
@@ -85,9 +85,8 @@ const NotificationInstance = () => {
                 ...notification,
                 key: notification.id,
                 onClose: () => {
-                  var _a;
                   hideNotification(notification.id);
-                  (_a = notification.onClose) == null ? void 0 : _a.call(notification, notification);
+                  notification.onClose?.(notification);
                 }
               }
             )) })
@@ -104,9 +103,8 @@ const NotificationInstance = () => {
                 ...notification,
                 key: notification.id,
                 onClose: () => {
-                  var _a;
                   hideNotification(notification.id);
-                  (_a = notification.onClose) == null ? void 0 : _a.call(notification, notification);
+                  notification.onClose?.(notification);
                 }
               }
             ))
@@ -123,9 +121,8 @@ const NotificationInstance = () => {
                 ...notification,
                 key: notification.id,
                 onClose: () => {
-                  var _a;
                   hideNotification(notification.id);
-                  (_a = notification.onClose) == null ? void 0 : _a.call(notification, notification);
+                  notification.onClose?.(notification);
                 }
               }
             ))
@@ -142,9 +139,8 @@ const NotificationInstance = () => {
                 ...notification,
                 key: notification.id,
                 onClose: () => {
-                  var _a;
                   hideNotification(notification.id);
-                  (_a = notification.onClose) == null ? void 0 : _a.call(notification, notification);
+                  notification.onClose?.(notification);
                 }
               }
             ))
@@ -161,9 +157,8 @@ const NotificationInstance = () => {
                 ...notification,
                 key: notification.id,
                 onClose: () => {
-                  var _a;
                   hideNotification(notification.id);
-                  (_a = notification.onClose) == null ? void 0 : _a.call(notification, notification);
+                  notification.onClose?.(notification);
                 }
               }
             ))
@@ -180,9 +175,8 @@ const NotificationInstance = () => {
                 ...notification,
                 key: notification.id,
                 onClose: () => {
-                  var _a;
                   hideNotification(notification.id);
-                  (_a = notification.onClose) == null ? void 0 : _a.call(notification, notification);
+                  notification.onClose?.(notification);
                 }
               }
             ))
@@ -207,9 +201,8 @@ const showNotification = (notification) => {
 };
 const hideNotification = (id) => {
   const newNotifications = NotificationsStore.data.filter((notification) => {
-    var _a;
     if (notification.id === id) {
-      (_a = notification.onClose) == null ? void 0 : _a.call(notification, notification);
+      notification.onClose?.(notification);
       return false;
     }
     return true;

package/dist/Notification/NotificationInstance.es.js

@@ -63,7 +63,7 @@ const NotificationInstance = () => {
     notificationsStore.subscribe(updateNotifications);
     return () => {
       notificationsStore.unsubscribe(updateNotifications);
-      element == null ? void 0 : element.remove();
+      element?.remove();
     };
   }, []);
   const updateNotifications = () => {
@@ -83,9 +83,8 @@ const NotificationInstance = () => {
                 ...notification,
                 key: notification.id,
                 onClose: () => {
-                  var _a;
                   hideNotification(notification.id);
-                  (_a = notification.onClose) == null ? void 0 : _a.call(notification, notification);
+                  notification.onClose?.(notification);
                 }
               }
             )) })
@@ -102,9 +101,8 @@ const NotificationInstance = () => {
                 ...notification,
                 key: notification.id,
                 onClose: () => {
-                  var _a;
                   hideNotification(notification.id);
-                  (_a = notification.onClose) == null ? void 0 : _a.call(notification, notification);
+                  notification.onClose?.(notification);
                 }
               }
             ))
@@ -121,9 +119,8 @@ const NotificationInstance = () => {
                 ...notification,
                 key: notification.id,
                 onClose: () => {
-                  var _a;
                   hideNotification(notification.id);
-                  (_a = notification.onClose) == null ? void 0 : _a.call(notification, notification);
+                  notification.onClose?.(notification);
                 }
               }
             ))
@@ -140,9 +137,8 @@ const NotificationInstance = () => {
                 ...notification,
                 key: notification.id,
                 onClose: () => {
-                  var _a;
                   hideNotification(notification.id);
-                  (_a = notification.onClose) == null ? void 0 : _a.call(notification, notification);
+                  notification.onClose?.(notification);
                 }
               }
             ))
@@ -159,9 +155,8 @@ const NotificationInstance = () => {
                 ...notification,
                 key: notification.id,
                 onClose: () => {
-                  var _a;
                   hideNotification(notification.id);
-                  (_a = notification.onClose) == null ? void 0 : _a.call(notification, notification);
+                  notification.onClose?.(notification);
                 }
               }
             ))
@@ -178,9 +173,8 @@ const NotificationInstance = () => {
                 ...notification,
                 key: notification.id,
                 onClose: () => {
-                  var _a;
                   hideNotification(notification.id);
-                  (_a = notification.onClose) == null ? void 0 : _a.call(notification, notification);
+                  notification.onClose?.(notification);
                 }
               }
             ))
@@ -205,9 +199,8 @@ const showNotification = (notification) => {
 };
 const hideNotification = (id) => {
   const newNotifications = notificationsStore.data.filter((notification) => {
-    var _a;
     if (notification.id === id) {
-      (_a = notification.onClose) == null ? void 0 : _a.call(notification, notification);
+      notification.onClose?.(notification);
       return false;
     }
     return true;

package/dist/Notification/NotificationsStore.cjs.js

@@ -1,12 +1,7 @@
 "use strict";
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 class NotificationsStore {
-  constructor() {
-    __publicField(this, "subscribes", []);
-    __publicField(this, "notifications", []);
-  }
+  subscribes = [];
+  notifications = [];
   subscribe(callback) {
     this.subscribes.push(callback);
   }

package/dist/Notification/NotificationsStore.es.js

@@ -1,11 +1,6 @@
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 class NotificationsStore {
-  constructor() {
-    __publicField(this, "subscribes", []);
-    __publicField(this, "notifications", []);
-  }
+  subscribes = [];
+  notifications = [];
   subscribe(callback) {
     this.subscribes.push(callback);
   }

package/dist/Notification/styles.cjs.js

@@ -4,13 +4,13 @@ const styled = require("styled-components");
 const getBackgroundStatus = (theme, status) => {
   switch (status) {
     case "info":
-      return theme.colors.violet["9"];
+      return theme.components.Notification.infoColor;
     case "warning":
-      return theme.colors.orange["9"];
+      return theme.components.Notification.warningColor;
     case "error":
-      return theme.colors.red["9"];
+      return theme.components.Notification.errorColor;
     case "success":
-      return theme.colors.green["9"];
+      return theme.components.Notification.successColor;
   }
 };
 const getPosition = (theme, position) => {
@@ -64,9 +64,9 @@ const NotificationStyled = styled.div.withConfig({
 })`
   width: 384px;
   position: relative;
-  border-radius: ${({ theme }) => theme.control.radius};
+  border-radius: ${({ theme }) => theme.components.Notification.radius};
   padding: ${({ theme }) => theme.space.m};
-  background: ${({ theme }) => theme.colors.grayViolet["2"]};
+  background: ${({ theme }) => theme.components.Notification.background};
   margin-bottom: ${({ theme }) => theme.space.m};
 
   .quen-ui__notification-icon {

package/dist/Notification/styles.es.js

@@ -2,13 +2,13 @@ import styled, { css } from "styled-components";
 const getBackgroundStatus = (theme, status) => {
   switch (status) {
     case "info":
-      return theme.colors.violet["9"];
+      return theme.components.Notification.infoColor;
     case "warning":
-      return theme.colors.orange["9"];
+      return theme.components.Notification.warningColor;
     case "error":
-      return theme.colors.red["9"];
+      return theme.components.Notification.errorColor;
     case "success":
-      return theme.colors.green["9"];
+      return theme.components.Notification.successColor;
   }
 };
 const getPosition = (theme, position) => {
@@ -62,9 +62,9 @@ const NotificationStyled = styled.div.withConfig({
 })`
   width: 384px;
   position: relative;
-  border-radius: ${({ theme }) => theme.control.radius};
+  border-radius: ${({ theme }) => theme.components.Notification.radius};
   padding: ${({ theme }) => theme.space.m};
-  background: ${({ theme }) => theme.colors.grayViolet["2"]};
+  background: ${({ theme }) => theme.components.Notification.background};
   margin-bottom: ${({ theme }) => theme.space.m};
 
   .quen-ui__notification-icon {