@inceptionbg/iui 2.0.11 → 2.0.13

package/src/components/Header/Components/ModuleSelect.tsx

@@ -2,7 +2,7 @@ import { FC } from 'react';
 import { Link } from 'react-router';
 import { Menu } from '../../Menu/Menu';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
 import { useIsMenuOpen } from '../../../hooks/useIsMenuOpen';
 
 interface Props {
@@ -19,7 +19,6 @@ export const ModuleSelect: FC<Props> = ({ modules, activeModule }) => {
         <Menu
           isOpen={isMenuOpen}
           onClose={onMenuClose}
-          // id="headerModuleSelect"
           renderButton={ref => (
             <button ref={ref} className="header-button clickable" onClick={onMenuOpen}>
               <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
@@ -36,10 +35,19 @@ export const ModuleSelect: FC<Props> = ({ modules, activeModule }) => {
               </svg>
             </button>
           )}
-          items={modules.map(e => ({ ...e, label: e.name, to: e.url }))}
-          className="grid fr-2 p-2"
-          classNameItem="module-item hover-neutral"
-        />
+          className="modules-menu"
+        >
+          {modules.map(e => (
+            <Link to={e.url} key={e.name}>
+              <div className="module-item clickable hover-neutral">
+                <div className="menu-item-icon">
+                  <FontAwesomeIcon icon={e.icon} />
+                </div>
+                <p className="menu-item-label">{e.name}</p>
+              </div>
+            </Link>
+          ))}
+        </Menu>
       )}
 
       {activeModule && (

package/src/components/Inputs/InputWrapper.tsx

@@ -1,4 +1,4 @@
-import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import clsx from 'clsx';
 import { FC, ReactNode, Ref } from 'react';

package/src/components/Inputs/TextInput.tsx

@@ -1,4 +1,4 @@
-import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
 import { FC, FocusEventHandler, InputHTMLAttributes, Ref, useState } from 'react';
 import { InputWrapper } from './InputWrapper';
 

package/src/components/List/List.tsx

@@ -0,0 +1,18 @@
+import type { FC } from 'react';
+import { IListItem, ListItem } from './ListItem';
+
+interface Props {
+  items?: IListItem[];
+}
+
+export const List: FC<Props> = ({ items }) => {
+  if (!items || items.length === 0) return null;
+
+  return (
+    <div className="iui-list">
+      {items.map(item => (
+        <ListItem key={item.id ?? item.label} {...item} />
+      ))}
+    </div>
+  );
+};

package/src/components/List/ListItem.tsx

@@ -0,0 +1,24 @@
+import clsx from 'clsx';
+import type { FC } from 'react';
+
+export interface IListItem {
+  id?: string;
+  label: string;
+  desc?: string;
+  onClick?: () => void;
+  active?: boolean;
+  disabled?: boolean;
+}
+
+export const ListItem: FC<IListItem> = ({ label, desc, onClick, active, disabled }) => (
+  <div
+    className={clsx('iui-list-item', { active, disabled })}
+    onClick={e => {
+      e.stopPropagation();
+      onClick?.();
+    }}
+  >
+    <p className="bold">{label}</p>
+    {desc && <div className="iui-list-item-desc">{desc}</div>}
+  </div>
+);

package/src/components/Loader/ProgressBar.tsx

@@ -0,0 +1,41 @@
+import clsx from 'clsx';
+import type { CSSProperties, FC } from 'react';
+import { useTranslation } from 'react-i18next';
+
+interface Props {
+  progress?: number;
+  label?: string;
+}
+
+export const ProgressBar: FC<Props> = ({ progress, label }) => {
+  const { t } = useTranslation();
+
+  if (progress === undefined) return null;
+
+  const now = Math.round(Math.min(Math.max(progress, 0), 100)); // Ensure percentage is between 0 and 100
+
+  return (
+    <div className="progress-bar-container">
+      <div className="progress-label">{label ?? t('LoadingProgress')}</div>
+      <div
+        className="progress-bar-bg"
+        role="progressbar"
+        aria-valuemin={0}
+        aria-valuemax={100}
+        aria-valuenow={now}
+        style={
+          {
+            '--progress-clip': `${now}%`,
+            '--progress-text': `'${now}%'`,
+          } as CSSProperties
+        }
+      >
+        <div
+          className={clsx('progress-bar-fill', { loading: now < 100 })}
+          style={{ width: `${now}%` }}
+        />
+        <span className="progress-bar-text">{now}%</span>
+      </div>
+    </div>
+  );
+};

package/src/components/Menu/Menu.tsx

@@ -15,7 +15,6 @@ interface Props {
   placement?: IMenuPlacement;
   size?: 's' | 'm' | 'l';
   className?: string;
-  classNameItem?: string;
   children?: ReactNode;
 }
 
@@ -27,7 +26,6 @@ export const Menu: FC<Props> = ({
   placement = 'bottom-left',
   size,
   className,
-  classNameItem,
   children,
 }) => {
   const menuRef = useRef<HTMLDivElement>(null);
@@ -58,7 +56,6 @@ export const Menu: FC<Props> = ({
                   <MenuItem
                     {...item}
                     key={item.label}
-                    className={classNameItem}
                     onClick={e => {
                       item.onClick?.(e);
                       !item.keepOpen && onClose();

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

@@ -12,6 +12,7 @@ import { useTranslation } from 'react-i18next';
 import { onPopupKeyDown } from '../../utils/popupUtils';
 import { ILocalPopupControl } from '../../types/IPopup';
 import { Loader } from '../Loader/Loader';
+import { SplitButton } from '../Button/SplitButton';
 
 interface Props {
   id?: string;
@@ -22,30 +23,35 @@ interface Props {
   };
   isLoading?: boolean;
   onFormSubmit?: () => void;
+  onContentClick?: () => void;
   onCloseCallback?: () => void;
   footer?: IDialogFooterActions;
   size?: 'vw25' | 'vw50' | 'vw75' | 'vw100' | 'w500' | 'w600';
   className?: string;
   contentClassName?: string;
+  portalTarget?: HTMLElement;
   children: ReactNode;
 }
-
 export const Pullover: FC<Props> = ({
   id,
   control,
   header,
   isLoading = false,
   onFormSubmit,
+  onContentClick,
   onCloseCallback,
   footer,
   size = 'vw50',
   className,
   contentClassName,
+  portalTarget,
   children,
 }) => {
   const { t } = useTranslation();
   const searchRef = useRef<HTMLInputElement>(null);
 
+  const ConfirmButton = footer?.confirmButton.splitActions ? SplitButton : Button;
+
   const { elementRef, isOpen, onClose } = useLocalPopoverControl({
     control,
     onCloseCallback,
@@ -98,7 +104,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
@@ -126,14 +132,17 @@ export const Pullover: FC<Props> = ({
               >
                 {/* CONTENT */}
                 <Loader isLoading={isLoading}>
-                  <div className={clsx('pullover-content', contentClassName)}>
+                  <div
+                    onClick={onContentClick}
+                    className={clsx('pullover-content', contentClassName)}
+                  >
                     {children}
                   </div>
                 </Loader>
 
                 {/* FOOTER */}
                 {footer && (
-                  <div className={clsx('pullover-footer', className)}>
+                  <div className={clsx('pullover-footer no-print', className)}>
                     {footer.additionalButton && (
                       <Button
                         {...footer.additionalButton}
@@ -148,7 +157,7 @@ export const Pullover: FC<Props> = ({
                       onClick={onClose}
                       disabled={isLoading}
                     />
-                    <Button
+                    <ConfirmButton
                       {...footer.confirmButton}
                       label={footer.confirmButton.label ?? t('Confirm')}
                       disabled={footer.confirmButton.disabled || isLoading}
@@ -162,7 +171,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.templateData && <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}
         >