@inceptionbg/iui 2.0.28 → 2.0.31

package/src/components/Table/components/edit/TableEditRow.tsx

@@ -1,8 +1,8 @@
 import type { FC } from 'react';
 import type { ITableColumn, ITableDataItem } from '../../../../types/ITable';
 import { useEffect, useRef } from 'react';
+import { faCheck, faXmark } from '@inceptionbg/icons';
 import clsx from 'clsx';
-import { faCheck, faXmark } from '../../../../assets/icons';
 import { useGetFocusableElements } from '../../../../hooks/useGetFocusableElements';
 import { IconButton } from '../../../Button/IconButton';
 import { useTableContext } from '../../contexts/TableContext';

package/src/components/Table/components/filters/TableFilters.tsx

@@ -1,8 +1,8 @@
 import type { FC } from 'react';
 import type { ITableFilterItem } from '../../../../types/ITable';
 import { useMemo, useState } from 'react';
+import { faFilter } from '@inceptionbg/icons';
 import { useTranslation } from 'react-i18next';
-import { faFilter } from '../../../../assets/icons/light/faFilter';
 import { faFilterCircleXmark } from '../../../../assets/icons/regular/faFilterCircleXmark';
 import { usePopupControl } from '../../../../hooks/usePopupControl';
 import {

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,10 +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';
@@ -139,7 +139,7 @@ export const PageLayout: FC<IPageLayoutProps> = ({
                       condition={!!action.to}
                       wrapper={children => <Link to={action.to!}>{children}</Link>}
                     >
-                      <Button key={action.label} {...action} className="ml-2" />
+                      <Button key={action.label} {...action} />
                     </ConditionalWrapper>
                   )
               )}
@@ -148,7 +148,11 @@ export const PageLayout: FC<IPageLayoutProps> = ({
         )}
         <div className="page-content">{children}</div>
         {footer && (
-          <footer className="page-footer">
+          <footer
+            className={clsx('page-footer', {
+              'm-0': footer?.default || footer?.text,
+            })}
+          >
             {footer.custom ? (
               footer.custom
             ) : (

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/common/helpers/_base.scss

@@ -26,12 +26,16 @@ a {
 }
 
 .clickable {
-  cursor: pointer;
   transition: background-color 250ms;
+  &:not(.disabled):not(:disabled) {
+    cursor: pointer;
+    &.neutral:hover {
+      background-color: var(--neutral-hover);
+    }
+  }
   &:disabled,
   &.disabled {
     opacity: 0.4;
-    cursor: default;
     pointer-events: none;
     user-select: none;
   }

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/src/styles/components/_pullover.scss

@@ -67,7 +67,7 @@ $fixedWidth: (500, 600);
     display: flex;
     align-items: center;
     justify-content: flex-end;
-    gap: 16px;
+    gap: 8px;
     padding: 16px 24px;
     box-shadow: var(--container-shadow);
     z-index: 2;
@@ -90,10 +90,6 @@ $fixedWidth: (500, 600);
     .pullover-content,
     .pullover-footer {
       padding: 8px 16px;
-      gap: 8px;
-    }
-    .pullover-footer .main-actions {
-      gap: 8px;
     }
   }
 }

package/src/styles/components/_table.scss

@@ -1,5 +1,18 @@
 @use '../variables/bp';
 
+// Scrollable table container
+
+// .iui-table {
+//   display: flex;
+//   flex-direction: column;
+//   flex: 1;
+//   overflow: auto;
+//   thead {
+//     position: sticky;
+//     top: 0;
+//   }
+// }
+
 table {
   border-spacing: 0px;
   // border-collapse: collapse;

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