@inceptionbg/iui 2.0.10 → 2.0.12

package/src/components/Inputs/Select2/Select.tsx

@@ -158,7 +158,6 @@ export const Select: FC<CustomSelectProps> = ({
     }
   };
 
-  console.log(menuStyle);
   return (
     <div
       className="customSelect"

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.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/Menu/hooks/useMenuPosition.tsx

@@ -33,18 +33,29 @@ export const useMenuPosition = ({
     if (containerRef.current && menuRef.current) {
       const containerRect = containerRef.current.getBoundingClientRect();
       const menuRect = menuRef.current.getBoundingClientRect();
-      const [placementY, placementX] = placement.split('-');
+      let [placementY, placementX] = placement.split('-');
 
       setMinWidth(containerRect.width);
 
       let offsetTop = containerRect.bottom + 5;
-      // let offsetTop = containerRect.bottom + document.documentElement.scrollTop + 5;
 
-      const offsetLeft =
+      let offsetLeft =
         containerRect.left +
         (placementX === 'right' ? containerRect.width - menuRect.width : 0);
       // + document.documentElement.scrollLeft;
 
+      // Check for horizontal overflow and adjust placement
+      if (placementX === 'right' && offsetLeft < 0) {
+        placementX = 'left';
+        offsetLeft = containerRect.left;
+      } else if (
+        placementX === 'left' &&
+        offsetLeft + menuRect.width > window.innerWidth
+      ) {
+        placementX = 'right';
+        offsetLeft = containerRect.left + containerRect.width - menuRect.width;
+      }
+
       if (placementY === 'bottom') {
         setMaxHeight(window.innerHeight - containerRect.bottom - 20);
       }
@@ -56,10 +67,21 @@ export const useMenuPosition = ({
         );
       }
 
+      // Check for vertical overflow and adjust placement
+      if (placementY === 'bottom' && offsetTop + menuRect.height > window.innerHeight) {
+        placementY = 'top';
+        offsetTop = containerRect.top - menuRect.height - 5;
+        setMaxHeight(containerRect.top - 20);
+      } else if (placementY === 'top' && offsetTop < 0) {
+        placementY = 'bottom';
+        offsetTop = containerRect.bottom + 5;
+        setMaxHeight(window.innerHeight - containerRect.bottom - 20);
+      }
+
       // check for space on the bottom
       if (
         (placementY === 'auto' && offsetTop + menuRect.height > window.innerHeight) ||
-        placementY === 'top'
+        (placement.split('-')[0] === 'top' && placementY !== 'bottom')
       ) {
         offsetTop = containerRect.top - menuRect.height - 5; //+ document.documentElement.scrollTop
       }
@@ -72,10 +94,6 @@ export const useMenuPosition = ({
     isOpen
       ? document.addEventListener('resize', recalculatePosition)
       : document.removeEventListener('resize', recalculatePosition);
-    // Disable scroll & fix page resize on menu open
-    document.body.style.marginRight =
-      isOpen && window.innerWidth > document.body.clientWidth ? '19px' : '';
-    // document.body.style.overflow = isOpen ? 'hidden' : '';
 
     recalculatePosition();
     return () => {

package/src/components/Pullover/Pullover.tsx

@@ -1,50 +1,54 @@
-import { FC, KeyboardEventHandler, ReactNode, Ref, useEffect, useRef } from 'react';
+import { FC, KeyboardEventHandler, ReactNode, useEffect, useRef } from 'react';
 import { createPortal } from 'react-dom';
 import { rootDir } from '../../utils/rootDir';
 import clsx from 'clsx';
 import { SearchInput } from '../Inputs/SearchInput';
-import {
-  PopupControlRef,
-  useLocalPopoverControl,
-} from '../../hooks/useLocalPopoverControl';
+import { useLocalPopoverControl } from '../../hooks/useLocalPopoverControl';
 import { ConditionalWrapper } from '../Wrappers/ConditionalWrapper';
 import { useGetFocusableElements } from '../../hooks/useGetFocusableElements';
 import { IDialogFooterActions } from '../Dialog/components/DialogFooter';
 import { Button } from '../Button/Button';
 import { useTranslation } from 'react-i18next';
 import { onPopupKeyDown } from '../../utils/popupUtils';
+import { ILocalPopupControl } from '../../types/IPopup';
+import { Loader } from '../Loader/Loader';
 
 interface Props {
-  controlRef: Ref<PopupControlRef>;
+  id?: string;
+  control: ILocalPopupControl;
   header?: {
     title: string;
     onSearch?: (search: string) => void;
   };
+  isLoading?: boolean;
   onFormSubmit?: () => 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> = ({
-  controlRef,
+  id,
+  control,
   header,
+  isLoading = false,
   onFormSubmit,
   onCloseCallback,
   footer,
   size = 'vw50',
   className,
   contentClassName,
+  portalTarget,
   children,
 }) => {
   const { t } = useTranslation();
   const searchRef = useRef<HTMLInputElement>(null);
 
   const { elementRef, isOpen, onClose } = useLocalPopoverControl({
-    controlRef,
+    control,
     onCloseCallback,
   });
 
@@ -84,6 +88,7 @@ export const Pullover: FC<Props> = ({
   return isOpen
     ? createPortal(
         <div
+          id={id}
           ref={elementRef}
           className="pullover"
           onClick={onClose}
@@ -94,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
@@ -121,24 +126,36 @@ export const Pullover: FC<Props> = ({
                 )}
               >
                 {/* CONTENT */}
-                <div className={clsx('pullover-content', contentClassName)}>
-                  {children}
-                </div>
+                <Loader isLoading={isLoading}>
+                  <div 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}
+                        disabled={footer.additionalButton.disabled || isLoading}
                         variant="simple"
                         className="mr-auto"
                       />
                     )}
-                    <Button label={t('Cancel')} variant="outlined" onClick={onClose} />
+                    <Button
+                      label={t('Cancel')}
+                      variant="outlined"
+                      onClick={onClose}
+                      disabled={isLoading}
+                    />
                     <Button
                       {...footer.confirmButton}
                       label={footer.confirmButton.label ?? t('Confirm')}
+                      disabled={footer.confirmButton.disabled || isLoading}
+                      type={
+                        (footer.confirmButton.type ?? onFormSubmit) ? 'submit' : 'button'
+                      }
                     />
                   </div>
                 )}
@@ -146,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 { controlRef, isOpen, 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,
@@ -67,7 +65,7 @@ export const TableFilters: FC = () => {
         <IconButton
           tooltip={t('Filter')}
           icon={faFilter}
-          active={isOpen}
+          active={control.isOpen}
           onClick={onOpen}
           size="s"
           variant="outlined"
@@ -75,7 +73,7 @@ export const TableFilters: FC = () => {
       </NotificationBadge>
 
       <Pullover
-        controlRef={controlRef}
+        control={control}
         header={{
           title: t('Filter'),
           onSearch: visibleFilters.length > 2 ? setFilterSearch : undefined,
@@ -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>
-);