@qoretechnologies/reqore 0.40.6 → 0.40.7

package/src/containers/ReqoreProvider.tsx

@@ -30,8 +30,15 @@ export interface IReqoreNotifications {
   options?: IReqoreOptions;
 }
 
+export interface IReqoreModal {
+  modal: IReqoreModalFromProps | TReqoreCustomModal;
+  options?: {
+    closable?: boolean;
+  };
+}
+
 export interface IReqoreModals {
-  [id: string]: IReqoreModalFromProps | TReqoreCustomModal;
+  [id: string]: IReqoreModal;
 }
 
 export interface IReqoreModalFromProps extends IReqoreModalProps {}
@@ -86,13 +93,22 @@ const ReqoreProvider: React.FC<IReqoreNotifications> = ({ children, options = {}
   };
 
   const addModal = useCallback(
-    (modal: IReqoreModalFromProps | TReqoreCustomModal, id?: string): string => {
+    (
+      modal: IReqoreModalFromProps | TReqoreCustomModal,
+      id?: string,
+      options?: IReqoreModal['options']
+    ): string => {
       const _id = id || shortid.generate();
 
       setModals((cur) => {
         return {
           ...cur,
-          [_id]: modal,
+          [_id]: {
+            modal,
+            options: {
+              closable: options?.closable ?? true,
+            },
+          },
         };
       });
 
@@ -233,16 +249,18 @@ const ReqoreProvider: React.FC<IReqoreNotifications> = ({ children, options = {}
               </ReqoreTextEffect>
             </ReqoreModal>
           )}
-          {map(modals, (modal, key) =>
+          {map(modals, ({ modal, options }, key) =>
             React.isValidElement(modal) ? (
               createPortal(
                 React.cloneElement(modal, {
                   key,
                   isOpen: true,
-                  onClose: () => {
-                    removeModal(key);
-                    modal.props.onClose?.();
-                  },
+                  onClose: options?.closable
+                    ? () => {
+                        removeModal(key);
+                        modal.props.onClose?.();
+                      }
+                    : undefined,
                 }),
                 document.querySelector('#reqore-portal')!
               )
@@ -251,10 +269,14 @@ const ReqoreProvider: React.FC<IReqoreNotifications> = ({ children, options = {}
                 {...modal}
                 key={key}
                 isOpen
-                onClose={() => {
-                  removeModal(key);
-                  modal.onClose?.();
-                }}
+                onClose={
+                  options?.closable
+                    ? () => {
+                        removeModal(key);
+                        modal.onClose?.();
+                      }
+                    : undefined
+                }
               />
             )
           )}

package/src/context/ReqoreContext.tsx

@@ -2,6 +2,7 @@ import { createContext } from 'use-context-selector';
 import { DEFAULT_THEME, IReqoreTheme } from '../constants/theme';
 import {
   IReqoreConfirmationModal,
+  IReqoreModal,
   IReqoreModalFromProps,
   IReqoreNotificationData,
   TReqoreCustomModal,
@@ -12,7 +13,11 @@ export interface IReqoreContext {
   readonly confirmAction: (data: IReqoreConfirmationModal) => void;
   readonly notifications?: IReqoreNotificationData[] | null;
   readonly addNotification?: (data: IReqoreNotificationData) => any;
-  readonly addModal?: (modal: IReqoreModalFromProps | TReqoreCustomModal, id?: string) => string;
+  readonly addModal?: (
+    modal: IReqoreModalFromProps | TReqoreCustomModal,
+    id?: string,
+    options?: IReqoreModal['options']
+  ) => string;
   readonly removeModal?: (id: string) => void;
   readonly removeNotification?: (id: string) => any;
   readonly isMobile?: boolean;

package/src/helpers/colors.ts

@@ -231,9 +231,9 @@ export const getColorFromMaybeString = (
 
   if (shading) {
     if (shading === 'lighten') {
-      _color = lighten(0.1 * multiplier, _color) as TReqoreHexColor;
+      _color = lighten(0.033 * multiplier, _color) as TReqoreHexColor;
     } else if (shading === 'darken') {
-      _color = darken(0.1 * multiplier, _color) as TReqoreHexColor;
+      _color = darken(0.033 * multiplier, _color) as TReqoreHexColor;
     }
   }
 

package/src/stories/Menu/Menu.stories.tsx

@@ -161,7 +161,7 @@ const Template: StoryFn<IReqoreMenuProps> = (args) => {
             onRightIconClick={() => alert('Icon clicked')}
             description='Button with right icon and description'
             customTheme={{
-              main: 'info:darken:1:0.3',
+              main: 'info:darken:5:0.3',
             }}
           >
             Some button

package/src/stories/Modal/Manager.stories.tsx

@@ -20,7 +20,7 @@ const TIMEOUT = 2000;
 const meta = {
   title: 'Utilities/Global Modal/Tests',
   component: ReqoreModal,
-  render: ({ data, updateToData }) => {
+  render: ({ data, updateToData, options }) => {
     const addModal = useReqoreProperty('addModal');
     const [modalId, setModalId] = useState<string>(undefined);
 
@@ -37,7 +37,7 @@ const meta = {
         <ReqoreButton
           id='modal'
           onClick={() => {
-            setModalId(addModal(data, 'modal'));
+            setModalId(addModal(data, 'modal', options));
           }}
         >
           Open new modal
@@ -162,6 +162,20 @@ export const CanBeClosedManually: Story = {
   },
 };
 
+export const CannotBeClosed: Story = {
+  args: {
+    data: {
+      children: 'I cannot be closed',
+    },
+    options: {
+      closable: false,
+    },
+  },
+  play: async ({ canvasElement, ...rest }) => {
+    await FromObject.play({ canvasElement, ...rest });
+  },
+};
+
 export const CanBeUpdated: Story = {
   args: {
     data: (<ModalWithState label='Test modal' />) as any,