@inceptionbg/iui 2.0.29 → 2.0.31

package/src/components/Table/components/items/TableItemActions.tsx

@@ -1,6 +1,6 @@
 import type { ITableDataItem } from '../../../../types/ITable';
 import { type FC } from 'react';
-import { faEllipsisVertical, faPen, faTrashCan } from '../../../../assets/icons';
+import { faEllipsisVertical, faPen, faTrashCan } from '@inceptionbg/icons';
 import { useIsMenuOpen } from '../../../../hooks/useIsMenuOpen';
 import { IconButton } from '../../../Button/IconButton';
 import { Menu } from '../../../Menu/Menu';

package/src/components/Table/components/print/TablePrint.tsx

@@ -1,9 +1,9 @@
 import type { FC } from 'react';
 import type { IPrintData } from '../../../../types/ITable';
 import { useEffect, useMemo } from 'react';
+import { faPrint } from '@inceptionbg/icons';
 import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
-import { faPrint } from '../../../../assets/icons';
 import { faFileArrowDown } from '../../../../assets/icons/regular/faFileArrowDown';
 import { useHideZendesk } from '../../../../hooks/useZendesk';
 import { formatDate, getCurrentDateFormatted } from '../../../../utils/dateUtils';

package/src/components/Table/components/select/TableSelect.tsx

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import { useState } from 'react';
+import { faClipboardCheck } from '@inceptionbg/icons';
 import { useTranslation } from 'react-i18next';
-import { faClipboardCheck } from '../../../../assets/icons/light/faClipboardCheck';
 import { NotificationBadge } from '../../../Badge/NotificationBadge';
 import { IconButton } from '../../../Button/IconButton';
 import { Menu } from '../../../Menu/Menu';

package/src/components/Table/components/sort/TableSort.tsx

@@ -1,9 +1,11 @@
 import type { FC } from 'react';
 import { useEffect, useState } from 'react';
+import {
+  faArrowDownShortWide,
+  faArrowDownWideShort,
+  faArrowUpArrowDown,
+} from '@inceptionbg/icons';
 import { useTranslation } from 'react-i18next';
-import { faArrowDownShortWide } from '../../../../assets/icons/light/faArrowDownShortWide';
-import { faArrowDownWideShort } from '../../../../assets/icons/light/faArrowDownWideShort';
-import { faArrowUpArrowDown } from '../../../../assets/icons/light/faArrowUpArrowDown';
 import { IconButton } from '../../../Button/IconButton';
 import { Menu } from '../../../Menu/Menu';
 import { Tooltip } from '../../../Tooltip/Tooltip';

package/src/components/Table/components/templates/TableTemplates.tsx

@@ -1,8 +1,8 @@
 import type { FC } from 'react';
 import type { IReportTemplate } from '../../../../types/ITable';
 import { useEffect } from 'react';
+import { faBookmark } from '@inceptionbg/icons';
 import { useTranslation } from 'react-i18next';
-import { faBookmark } from '../../../../assets/icons';
 import { setTemplateData } from '../../../../utils/tableUtils';
 import { IconButton } from '../../../Button/IconButton';
 import { useTableContext } from '../../contexts/TableContext';

package/src/components/Table/components/templates/TemplatesPullover.tsx

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import type { IReportTemplate, ITableTemplateData } from '../../../../types/ITable';
+import { faBookmark, faBookmarkSlash, faTrashCan } from '@inceptionbg/icons';
 import { useTranslation } from 'react-i18next';
-import { faBookmark, faBookmarkSlash, faTrashCan } from '../../../../assets/icons';
 import { usePopupControl } from '../../../../hooks/usePopupControl';
 import { List } from '../../../List/List';
 import { Pullover } from '../../../Pullover/Pullover';

package/src/components/Tree/TreeItem.tsx

@@ -1,8 +1,8 @@
 import type { FC } from 'react';
 import type { ITreeItem } from '../../types/ITree';
 import { useState } from 'react';
+import { faChevronRight } from '@inceptionbg/icons';
 import clsx from 'clsx';
-import { faChevronRight } from '../../assets/icons';
 import { IconButton } from '../Button/IconButton';
 import { Collapse } from '../Helper/Collapse';
 

package/src/components/Wrappers/PageLayout.tsx

@@ -2,11 +2,10 @@ import type { FC, ReactNode } from 'react';
 import type { IHeaderAction } from '../../types/IHeader';
 import type { IMenuItem } from '../../types/IMenu';
 import { useLayoutEffect, useState } from 'react';
+import { faArrowLeft, faEllipsisVertical, faQuestion } from '@inceptionbg/icons';
 import clsx from 'clsx';
 import { Trans } from 'react-i18next';
 import { Link, useNavigate } from 'react-router';
-import { faEllipsisVertical, faQuestion } from '../../assets/icons';
-import { faArrowLeft } from '../../assets/icons/regular/faArrowLeft';
 import { usePopupControl } from '../../hooks/usePopupControl';
 import { Button } from '../Button/Button';
 import { IconButton } from '../Button/IconButton';

package/src/hooks/useLocalPopoverControl.ts

@@ -1,32 +1,66 @@
-import type { ILocalPopupControl } from '../types/IPopup';
-import { useCallback, useImperativeHandle, useRef } from 'react';
+import type {
+  DeclarativeDialogProps,
+  ImperativeDialogProps,
+} from '../components/Dialog/Dialog';
+import { useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
 
-interface Props {
-  control: ILocalPopupControl;
-  onCloseCallback?: () => void;
-}
+type Props = ImperativeDialogProps | DeclarativeDialogProps;
 
-export const useLocalPopoverControl = ({ control, onCloseCallback }: Props) => {
+export const useLocalPopoverControl = (props: Props) => {
+  const { control, onCloseCallback, isOpen: propsIsOpen, onClose } = props;
   const elementRef = useRef<HTMLDivElement>(null);
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
 
-  const handleOpen = useCallback(() => control.setIsOpen(true), [control]);
+  // Determine the operation mode
+  const isImperative = !!control;
+  const shouldBeOpen = isImperative ? control.isOpen : propsIsOpen;
 
-  const handleClose = useCallback(() => {
-    elementRef.current?.classList.add('closing');
-    setTimeout(() => {
-      onCloseCallback?.();
+  const [isMounted, setIsMounted] = useState(shouldBeOpen);
+
+  // 3. Handle State Synchronization and Animation
+  useEffect(() => {
+    if (shouldBeOpen && !isMounted) {
+      console.log('Opening');
+      timeoutRef.current && clearTimeout(timeoutRef.current);
+      elementRef.current?.classList.remove('closing');
+      setIsMounted(true);
+    } else if (!shouldBeOpen && isMounted) {
+      console.log('Closing');
+      elementRef.current?.classList.add('closing');
+      timeoutRef.current = setTimeout(() => {
+        setIsMounted(false);
+        onCloseCallback?.();
+        onClose?.();
+      }, 200);
+    }
+
+    console.log('Render');
+
+    return () => {
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    };
+  }, [shouldBeOpen, isMounted, onClose, onCloseCallback]);
+
+  const handleCloseRequest = useCallback(() => {
+    if (isImperative) {
       control.setIsOpen(false);
-    }, 200);
-  }, [control, onCloseCallback]);
+    } else {
+      onClose();
+    }
+  }, [isImperative, control, onClose]);
+
+  const handleOpenRequest = useCallback(() => {
+    if (isImperative) control.setIsOpen(true);
+  }, [isImperative, control]);
 
   useImperativeHandle(control?.controlRef, () => ({
-    onOpen: handleOpen,
-    onClose: handleClose,
+    onOpen: handleOpenRequest,
+    onClose: handleCloseRequest,
   }));
 
   return {
-    isOpen: control?.isOpen,
-    onClose: handleClose,
-    elementRef: elementRef,
+    isOpen: isMounted,
+    onClose: handleCloseRequest,
+    elementRef,
   };
 };

package/src/styles/components/_button.scss

@@ -83,7 +83,7 @@ $btn-colors: (primary, neutral, danger);
 
 ///// Icon Button /////
 
-.iui-icon-btn {
+.iui-btn.iui-icon-btn {
   @each $size, $vars in buttonMaps.$icon-button-sizes {
     &.#{$size} {
       min-height: map.get($vars, size);

package/src/styles/components/_inputCheckbox.scss

@@ -46,60 +46,3 @@
     }
   }
 }
-
-// Radio group
-.radio-group {
-  display: flex;
-  width: fit-content;
-  &.column {
-    flex-direction: column;
-  }
-  &.row {
-    align-items: center;
-    flex-direction: row;
-  }
-}
-
-// Radio
-.iui-radio {
-  display: inline-flex;
-  user-select: none;
-  padding: 8px;
-  font-size: var(--fs-m);
-  width: fit-content;
-  gap: 8px;
-  .icon {
-    position: relative;
-    height: 20px;
-    width: 20px;
-    border-radius: 20px;
-    border: 2px solid #d0d5dd;
-    min-width: 20px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    .dot {
-      height: 8px;
-      width: 8px;
-      border-radius: 8px;
-      background-color: var(--background);
-      transform: scale(0);
-      transition: transform 150ms cubic-bezier(0.4, 0, 1, 1) 0ms;
-    }
-    &.selected {
-      background-color: var(--primary);
-      border-color: var(--primary);
-      .dot {
-        transform: scale(1);
-      }
-    }
-  }
-  .radio-content {
-    p {
-      line-height: 20px;
-    }
-    .label {
-      font-weight: 500;
-    }
-  }
-}

package/dist/NoAccessPage-DTPU8bP2.js

@@ -1,2 +0,0 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useTranslation as r}from"react-i18next";import{Link as a}from"react-router";import{Button as c}from"./index.js";import"@fortawesome/react-fontawesome";import"@hello-pangea/dnd";import"clsx";import"dayjs";import"react-toastify";import"react";import"react-dom";import"react-calendar";import"react-select";import"react-select-async-paginate";import"react-select/async-creatable";const o=()=>{const{t:o}=r();return e("div",{className:"full-screen-page",children:[e("div",{id:"content",children:[t("h1",{children:o("NoAccessPage")}),t("p",{className:"subtitle",children:o("NoAccessPageInfo")})]}),t("p",{id:"img",className:"img-403",children:"403"}),t("div",{id:"actions",children:t(a,{to:"/",children:t(c,{label:o("ReturnToHomepage")})})})]})};export{o as default};
-//# sourceMappingURL=NoAccessPage-DTPU8bP2.js.map