@inceptionbg/iui 2.0.11 → 2.0.12

package/src/components/Menu/MenuItem.tsx

@@ -20,29 +20,27 @@ export const MenuItem: FC<IMenuItem> = ({
   className,
 }) =>
   hidden ? null : (
-    <div
-      className={clsx(className, {
-        'iui-menu-item': !className,
-        clickable: !!onClick || !!to,
-        disabled,
-        active,
-        'with-devider': withDevider,
-      })}
+    <ConditionalWrapper
+      condition={!disabled && !!to}
+      wrapper={children => <Link to={to!}>{children}</Link>}
     >
-      <ConditionalWrapper
-        condition={!disabled && !!to}
-        wrapper={children => <Link to={to!}>{children}</Link>}
+      <div
+        className={clsx('iui-menu-item', className, {
+          clickable: !!onClick || !!to,
+          disabled,
+          active,
+          'with-devider': withDevider,
+        })}
+        onClick={disabled ? undefined : onClick}
       >
-        <div className="menu-item-content" onClick={disabled ? undefined : onClick}>
-          {icon && (
-            <div className="menu-item-icon">
-              <FontAwesomeIcon icon={icon} rotation={iconRotation} />
-            </div>
-          )}
-          <NotificationBadge number={badge} size="s" className="menu-item-badge">
-            <p className="menu-item-label">{label}</p>
-          </NotificationBadge>
-        </div>
-      </ConditionalWrapper>
-    </div>
+        {icon && (
+          <div className="menu-item-icon">
+            <FontAwesomeIcon icon={icon} rotation={iconRotation} />
+          </div>
+        )}
+        <NotificationBadge number={badge} size="s" className="menu-item-badge">
+          <p className="menu-item-label">{label}</p>
+        </NotificationBadge>
+      </div>
+    </ConditionalWrapper>
   );

package/src/components/Menu/NewMenu.tsx

@@ -14,7 +14,6 @@ interface Props {
   placement?: IMenuPlacement;
   size?: 's' | 'm' | 'l';
   className?: string;
-  classNameItem?: string;
 }
 
 export const MenuV2: FC<Props> = ({
@@ -24,7 +23,6 @@ export const MenuV2: FC<Props> = ({
   placement = 'bottom-left',
   size,
   className,
-  classNameItem,
 }) => {
   const buttonRef = useRef<HTMLButtonElement>(null);
   const popoverRef = useRef<HTMLDivElement>(null);
@@ -52,7 +50,6 @@ export const MenuV2: FC<Props> = ({
             <MenuItem
               {...item}
               key={item.label}
-              className={classNameItem}
               onClick={e => {
                 item.onClick?.(e);
                 !item.keepOpen && popoverRef.current?.hidePopover();

package/src/components/Pullover/Pullover.tsx

@@ -27,9 +27,9 @@ interface Props {
   size?: 'vw25' | 'vw50' | 'vw75' | 'vw100' | 'w500' | 'w600';
   className?: string;
   contentClassName?: string;
+  portalTarget?: HTMLElement;
   children: ReactNode;
 }
-
 export const Pullover: FC<Props> = ({
   id,
   control,
@@ -41,6 +41,7 @@ export const Pullover: FC<Props> = ({
   size = 'vw50',
   className,
   contentClassName,
+  portalTarget,
   children,
 }) => {
   const { t } = useTranslation();
@@ -98,7 +99,7 @@ export const Pullover: FC<Props> = ({
           <div className={clsx('container', size)} onClick={e => e.stopPropagation()}>
             <div className={clsx('content', className)}>
               {header && (
-                <div className="pullover-header">
+                <div className="pullover-header no-print">
                   <h3>{header.title}</h3>
                   {header.onSearch && (
                     <SearchInput
@@ -133,7 +134,7 @@ export const Pullover: FC<Props> = ({
 
                 {/* FOOTER */}
                 {footer && (
-                  <div className={clsx('pullover-footer', className)}>
+                  <div className={clsx('pullover-footer no-print', className)}>
                     {footer.additionalButton && (
                       <Button
                         {...footer.additionalButton}
@@ -162,7 +163,7 @@ export const Pullover: FC<Props> = ({
             </div>
           </div>
         </div>,
-        rootDir
+        portalTarget ?? rootDir
       )
     : null;
 };

package/src/components/Sidebar/types/ISidebar.ts

@@ -1,4 +1,4 @@
-import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
 
 export interface ISidebarItem {
   label: string;

package/src/components/Table/Table.tsx

@@ -15,27 +15,28 @@ import { TableSelect } from './components/select/TableSelect';
 import { TableSort } from './components/sort/TableSort';
 import { TableFilters } from './components/filters/TableFilters';
 import { TableEditRow } from './components/edit/TableEditRow';
+import { TablePrint } from './components/print/TablePrint';
+import { TableTemplates } from './components/templates/TableTemplates';
 
 export const TableContent: FC = () => {
   const {
     columns,
+    customHeader,
+    headerWrap,
     // setColumns,
     // withColumnsSearch,
     data,
     sumRows,
     isLoading,
-
-    // filterData,
     selectedRowUuid,
-    // printData,
     // customPrintData,
     // templates,
     // additionsalOptions,
     footer,
-    className,
     rowHeight = 'm',
     maxHeight,
     editable,
+    ...props
   } = useTableContext();
 
   const [extendedRow, setExtendedRow] = useState('');
@@ -48,7 +49,7 @@ export const TableContent: FC = () => {
     <Loader isLoading={!!isLoading}>
       <div
         // onKeyDown={handleKeyDown}
-        className={clsx('iui-table', className, {
+        className={clsx('iui-table', props.className, {
           'pb-3': data.length === 0,
         })}
         // tabIndex={-1}
@@ -74,9 +75,11 @@ export const TableContent: FC = () => {
               additionsalOptions={additionsalOptions}
             />
           )} */}
-          <TableSelect />
-          <TableFilters />
-          <TableSort />
+          {props.selectActions.length > 0 && <TableSelect />}
+          {props.filterData && <TableFilters />}
+          {props.sortData && <TableSort />}
+          {props.templates && <TableTemplates />}
+          {props.printData && <TablePrint />}
         </div>
         <div className="table-container" style={{ maxHeight }}>
           <ConditionalWrapper
@@ -99,7 +102,12 @@ export const TableContent: FC = () => {
             )}
           >
             <table className="full-width">
-              <HeaderTable />
+              <HeaderTable
+                columns={columns}
+                customHeader={customHeader}
+                headerWrap={headerWrap}
+                maxHeight={maxHeight}
+              />
               <tbody>
                 {data.length ? (
                   <>
@@ -167,7 +175,6 @@ export const TableContent: FC = () => {
                                           link: cell?.link,
                                           'clickable-column': cell?.onClick,
                                           'word-break': column.break,
-                                          'no-border': isExtended,
                                         }
                                       )}
                                       colSpan={cell?.span}
@@ -247,7 +254,7 @@ export const TableContent: FC = () => {
               totalRows={footer.totalRows}
               noTotalRows={noTotalRows}
               customLimit={footer.customPagination?.customLimit}
-              footerAction={footer.footerAction}
+              refetch={footer.refetch}
               dataLength={data.length}
             />
           )}

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

@@ -19,15 +19,13 @@ import { faFilterCircleXmark } from '../../../../assets/icons/regular/faFilterCi
 import { usePopupControl } from '../../../../hooks/usePopupControl';
 
 export const TableFilters: FC = () => {
-  const { control, onClose, onOpen } = usePopupControl();
-
-  const [filterSearch, setFilterSearch] = useState('');
-
   const { t } = useTranslation();
   const { columns, filterData } = useTableContext();
-
+  const { control, onClose, onOpen } = usePopupControl();
   const columnIds = getVisibleColumnsIds(columns);
 
+  const [filterSearch, setFilterSearch] = useState('');
+
   const {
     filters,
     additionalFilters,
@@ -102,7 +100,6 @@ export const TableFilters: FC = () => {
               ? JSON.stringify(searchData) === JSON.stringify(defaultSearch)
               : Object.keys(searchData).length === 0,
           },
-          // onClose,
         }}
         contentClassName="iui-filters-list"
         onCloseCallback={() => setFilterSearch('')}

package/src/components/Table/components/footer/TableFooter.tsx

@@ -1,4 +1,3 @@
-import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
 import { FC, MouseEventHandler, useEffect, useState } from 'react';
 import { faAngleLeft } from '../../../../assets/icons/solid/faAngleLeft';
 import { faAngleRight } from '../../../../assets/icons/solid/faAngleRight';
@@ -15,10 +14,7 @@ interface Props {
   pagination: IPaginationControl;
   noTotalRows?: boolean;
   dataLength: number;
-  footerAction?: {
-    icon?: IconDefinition;
-    onClick: MouseEventHandler<HTMLButtonElement>;
-  };
+  refetch?: MouseEventHandler<HTMLButtonElement>;
   totalRows?: number;
   customLimit?: number[];
 }
@@ -28,7 +24,7 @@ export const TableFooter: FC<Props> = ({
   totalRows = 0,
   noTotalRows,
   dataLength,
-  footerAction,
+  refetch,
   customLimit,
 }) => {
   const [tempOffset, setTempOffset] = useState(offset + 1);
@@ -48,11 +44,11 @@ export const TableFooter: FC<Props> = ({
   const maxOffset = Math.ceil(totalRows / limit);
 
   return (
-    <div className={`table-footer ${footerAction ? 'justify-between' : 'justify-right'}`}>
-      {!!footerAction && (
+    <div className={`table-footer ${refetch ? 'justify-between' : 'justify-right'}`}>
+      {!!refetch && (
         <IconButton
-          icon={footerAction.icon || faRotateRight}
-          onClick={footerAction.onClick}
+          icon={faRotateRight}
+          onClick={refetch}
           tooltip={t('RefreshData')}
           variant="outlined"
           size="s"

package/src/components/Table/components/header/TableHeader.tsx

@@ -1,11 +1,24 @@
-import { FC, Fragment } from 'react';
+import { FC } from 'react';
 import clsx from 'clsx';
 import { TableHeaderRow } from './TableHeaderRow';
-import { useTableContext } from '../../contexts/TableContext';
+import { ITableColumn } from '../../../../types/ITable';
 
-export const HeaderTable: FC = () => {
-  const { columns, customHeader, headerWrap, maxHeight } = useTableContext();
-  const isSticky = !!maxHeight;
+type Props = {
+  columns: ITableColumn[];
+  customHeader?: ITableColumn[][];
+  headerWrap?: boolean;
+  maxHeight?: number | string;
+  print?: boolean;
+};
+
+export const HeaderTable: FC<Props> = ({
+  columns,
+  customHeader,
+  headerWrap,
+  maxHeight,
+  print,
+}) => {
+  const isSticky = !print && !!maxHeight;
 
   return (
     <thead
@@ -14,29 +27,14 @@ export const HeaderTable: FC = () => {
         'sticky-header': isSticky,
       })}
     >
-      <BorderRow span={columns.length} />
       {customHeader ? (
-        customHeader?.map((row, i) => (
-          // No array manipulation will be performed, so using key 'i' is acceptable.
-          <Fragment key={i}>
-            <TableHeaderRow row={row} />
-            {(isSticky || i + 1 < customHeader.length) && (
-              <BorderRow span={columns.length} />
-            )}
-          </Fragment>
+        customHeader.map((row, i) => (
+          // No array manipulation will be performed, so using key 'i' is fine.
+          <TableHeaderRow key={i} row={row} print={print} />
         ))
       ) : (
-        <>
-          <TableHeaderRow row={columns} />
-          <BorderRow span={columns.length} />
-        </>
+        <TableHeaderRow row={columns} print={print} />
       )}
     </thead>
   );
 };
-
-const BorderRow: FC<{ span?: number }> = ({ span }) => (
-  <tr>
-    <th className="border-row" colSpan={span} />
-  </tr>
-);

package/src/components/Table/components/header/TableHeaderRow.tsx

@@ -4,9 +4,10 @@ import clsx from 'clsx';
 
 interface Props {
   row: ITableColumn[];
+  print?: boolean;
 }
 
-export const TableHeaderRow: FC<Props> = ({ row }) => {
+export const TableHeaderRow: FC<Props> = ({ row, print }) => {
   // const { sortData } = useTableContext();
   // const { sort, setSort, sortOptions } = sortData ?? {};
   // const activeSortOption = sortOptions?.find(e => sort?.startsWith(e.value));
@@ -18,18 +19,26 @@ export const TableHeaderRow: FC<Props> = ({ row }) => {
           key={col.id}
           colSpan={col.colSpan}
           rowSpan={col.rowSpan}
-          className={clsx(col.color, col.className)}
+          className={
+            print
+              ? undefined
+              : clsx(col.color, col.className, {
+                  'not-first-cell': col.notFirstCell,
+                })
+          }
           // onClick={() => {
           //   const sortValue = sortOptions?.find(e => col.label === e.label)?.value;
           //   sortValue &&
           //     setSort?.(sort === sortValue + desc ? sortValue + asc : sortValue + desc);
           // }}
           style={
-            col.minWidth
-              ? { minWidth: col.minWidth }
-              : col.width
-                ? { width: col.width }
-                : undefined
+            print
+              ? undefined
+              : col.minWidth
+                ? { minWidth: col.minWidth }
+                : col.width
+                  ? { width: col.width }
+                  : undefined
           }
           hidden={col.hidden}
         >

package/{idea/Table/Components/Print → src/components/Table/components/print}/TablePrint.tsx

@@ -1,77 +1,84 @@
-import { FC, useEffect, useState } from 'react';
-import { createPortal } from 'react-dom';
-import { faFileArrowDown } from '../../../../assets/icons/regular/faFileArrowDown';
-import { faPrint } from '../../../../assets/icons/solid/faPrint';
-import { faXmark } from '../../../../assets/icons/solid/faXmark';
-import { IPrintData, ITableColumn, ITableDataItem } from '../../../../types/ITable';
-import { formatDate, getCurrentDateFormatted } from '../../../../utils/dateUtils';
-import { Button } from '../../../Button/Button';
-import { FullScreenLoader } from '../../../Loader/Loader';
+import { useEffect, useMemo, type FC } from 'react';
+import { IconButton } from '../../../Button/IconButton';
+import { faPrint } from '../../../../assets/icons';
 import { useTranslation } from 'react-i18next';
-import { rootDir } from '../../../../utils/rootDir';
-import clsx from 'clsx';
-import { HeaderTable } from '../Header/TableHeader';
+import { Pullover } from '../../../Pullover/Pullover';
+import { useTableContext } from '../../contexts/TableContext';
+import { IPrintData } from '../../../../types/ITable';
 import { useHideZendesk } from '../../../../hooks/useZendesk';
+import { formatDate, getCurrentDateFormatted } from '../../../../utils/dateUtils';
+import { HeaderTable } from '../header/TableHeader';
+import clsx from 'clsx';
+import { faFileArrowDown } from '../../../../assets/icons/regular/faFileArrowDown';
+import { ProgressBar } from '../../../Loader/ProgressBar';
 
-interface Props extends IPrintData {
-  isOpen: boolean;
-  onClose: () => void;
-  columns: ITableColumn[];
-  excludeColumnIds?: string[];
-}
-export const TablePrint: FC<Props> = ({
-  isOpen,
-  onClose,
-  columns,
-  excludeColumnIds = [],
-  customHeader,
-  organization,
-  filters,
-  label,
-  optionalNode,
-  getPrintData,
-  formatPrintData,
-  saveXlsx,
-  totals,
-}) => {
-  const [data, setData] = useState<ITableDataItem[]>([]);
-  const [offset, setOffset] = useState(0);
-  const [isLoading, setIsLoading] = useState(false);
-
+export const TablePrint: FC = () => {
   const { t } = useTranslation();
   useHideZendesk();
+  const { columns, printData } = useTableContext();
+
+  const {
+    label,
+    tableData: data,
+    isLoading,
+    progress,
+    paginationControl,
+    printPopupControl,
+    customHeader,
+    excludeColumnIds,
+    filters,
+    optionalNode,
+    organization,
+    saveXlsx,
+    totals,
+  } = useMemo(() => (printData ?? {}) as IPrintData, [printData]);
+  const { control, onOpen } = printPopupControl;
 
-  const cols = columns.filter(
-    e => !['actions', 'select', ...excludeColumnIds].includes(e.id)
+  const cols = useMemo(
+    () => columns.filter(e => !['actions', 'select', excludeColumnIds].includes(e.id)),
+    [columns, excludeColumnIds]
   );
 
   useEffect(() => {
-    rootDir?.classList.add('hidden');
-    return () => {
-      rootDir?.classList.remove('hidden');
-    };
-  }, []);
+    if (control.isOpen) {
+      paginationControl?.setLimit(1000);
+      paginationControl?.setOffset(0);
+    }
+  }, [paginationControl, control.isOpen]);
 
-  useEffect(() => {
-    setIsLoading(true);
-    getPrintData({ limit: 1000, offset })
-      .then(e => {
-        setData(prevState => {
-          const data = !!e.data.length ? formatPrintData(e.data) : [];
-          const newState = [...prevState, ...data];
-          e.totalRows && e.totalRows > newState.length
-            ? setOffset(offset + 1)
-            : setIsLoading(false);
-          return e.totalRows && e.totalRows > prevState.length ? newState : prevState;
-        });
-      })
-      .catch(() => setIsLoading(false));
-  }, [offset, formatPrintData, getPrintData]);
+  return (
+    printData && (
+      <>
+        <IconButton
+          tooltip={t('PrintExport')}
+          icon={faPrint}
+          onClick={onOpen}
+          size="s"
+          variant="outlined"
+        />
 
-  return isOpen
-    ? createPortal(
-        <div className="iui-print-dialog">
-          <div className="content">
+        <Pullover
+          control={control}
+          header={{ title: t('PrintExport') }}
+          footer={{
+            confirmButton: {
+              label: t('Print'),
+              onClick: window.print,
+              // type: 'submit',
+            },
+            additionalButton: saveXlsx
+              ? {
+                  label: t('SaveXlsx'),
+                  icon: faFileArrowDown,
+                  onClick: saveXlsx,
+                }
+              : undefined,
+          }}
+          contentClassName="iui-print"
+          size="vw100"
+          portalTarget={document.body}
+        >
+          <div className="print-content">
             <div className="flex justify-between">
               {organization ? (
                 <div>
@@ -121,11 +128,18 @@ export const TablePrint: FC<Props> = ({
               </div>
             )}
             {optionalNode?.aboveTable}
-            {data && (
-              <table width="100%" className="print-table">
-                <HeaderTable columns={cols} customHeader={customHeader} headerWrap />
-                <tbody>
-                  <>
+            {isLoading ? (
+              <ProgressBar progress={progress} />
+            ) : (
+              data && (
+                <table width="100%" className="print-table">
+                  <HeaderTable
+                    columns={cols}
+                    customHeader={customHeader}
+                    headerWrap
+                    print
+                  />
+                  <tbody>
                     {data.map(row => {
                       let totalColsSpan = 0;
                       return (
@@ -173,35 +187,14 @@ export const TablePrint: FC<Props> = ({
                         ))}
                       </tr>
                     )}
-                  </>
-                </tbody>
-              </table>
+                  </tbody>
+                </table>
+              )
             )}
             {optionalNode?.bellowTable}
           </div>
-          <div className="iui-print-actions no-print">
-            <Button
-              label={t('Cancel')}
-              icon={faXmark}
-              onClick={e => {
-                e.stopPropagation();
-                onClose();
-              }}
-              className="mr-3"
-            />
-            {!!saveXlsx && (
-              <Button
-                label={t('SaveXlsx')}
-                icon={faFileArrowDown}
-                onClick={() => saveXlsx()}
-                className="mr-3"
-              />
-            )}
-            <Button label={t('Print')} icon={faPrint} onClick={() => window.print()} />
-          </div>
-          <FullScreenLoader isLoading={isLoading} />
-        </div>,
-        document.body
-      )
-    : null;
+        </Pullover>
+      </>
+    )
+  );
 };

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

@@ -39,6 +39,8 @@ export const TableSort: FC = () => {
           label: e.label,
           onClick: () => setSort?.(sort === valueDesc ? valueAsc : valueDesc),
           active: sort?.startsWith(e.value),
+          className: 'table-sort-item',
+          keepOpen: true,
           icon:
             sort === valueDesc
               ? faArrowDownWideShort