@inceptionbg/iui 2.0.7 → 2.0.10

package/src/components/Wrappers/PageLayout.tsx

@@ -8,10 +8,10 @@ import { faArrowLeft } from '../../assets/icons/regular/faArrowLeft';
 import { faEllipsisVertical, faQuestion } from '../../assets/icons';
 import { Trans } from 'react-i18next';
 import { Pullover } from '../Pullover/Pullover';
-import { Alert } from '../Alert/Alert';
 import { Link, useNavigate } from 'react-router';
 import { IMenuItem } from '../../types/IMenu';
 import { Menu } from '../Menu/Menu';
+import { usePopupControl } from '../../hooks/usePopupControl';
 
 export interface IPageLayoutProps {
   breadcrumbs?: (string | undefined)[];
@@ -43,7 +43,7 @@ export const PageLayout: FC<IPageLayoutProps> = ({
   children,
 }) => {
   const [isMoreActionsOpen, setIsMoreActionsOpen] = useState(false);
-  const [isHelpOpen, setIsHelpOpen] = useState(false);
+  const helpControl = usePopupControl();
 
   const navigate = useNavigate();
   const filteredActions = moreActions?.filter(e => !e.hidden);
@@ -88,21 +88,18 @@ export const PageLayout: FC<IPageLayoutProps> = ({
                 <>
                   <IconButton
                     icon={faQuestion}
-                    onClick={() => setIsHelpOpen(!isHelpOpen)}
+                    onClick={helpControl.onOpen}
                     variant="outlined"
                     size="s"
                   />
                   <Pullover
-                    isOpen={isHelpOpen}
-                    onClose={() => setIsHelpOpen(false)}
-                    size="m"
+                    controlRef={helpControl.controlRef}
+                    header={{
+                      title: help.title,
+                    }}
+                    size="vw50"
                   >
-                    <Alert severity="info">
-                      <div>
-                        <p className="bold mb-3">{help.title}</p>
-                        <p>{help.descEl}</p>
-                      </div>
-                    </Alert>
+                    {help.descEl}
                   </Pullover>
                 </>
               )}
@@ -140,12 +137,10 @@ export const PageLayout: FC<IPageLayoutProps> = ({
             </div>
           </div>
         )}
-        <div className="page-content">
-          <div className="flex-grow">{children}</div>
-          <p className="footer">
-            <Trans i18nKey="FooterText" />
-          </p>
-        </div>
+        <div className="page-content">{children}</div>
+        <footer className="page-footer">
+          <Trans i18nKey="FooterText" />
+        </footer>
       </div>
     </Loader>
   );

package/src/hooks/useGetFocusableElements.ts

@@ -0,0 +1,42 @@
+import { RefObject, useEffect, useState } from 'react';
+
+export const useGetFocusableElements = ({
+  elementRef,
+  isOpen,
+  autoFocusIndex,
+}: {
+  elementRef: RefObject<HTMLDivElement | null>;
+  isOpen: boolean;
+  autoFocusIndex?: number;
+}) => {
+  const [focusableElements, setFocusableElements] = useState<HTMLElement[]>([]);
+
+  useEffect(() => {
+    const element = elementRef.current;
+    if (!element || !isOpen) return;
+
+    const focusableSelectors = [
+      'button:not([disabled]):not([tabindex="-1"])',
+      'input:not([disabled]):not([tabindex="-1"])',
+      'textarea:not([disabled]):not([tabindex="-1"])',
+      // 'select:not([disabled]):not([tabindex="-1"])',
+    ];
+
+    const focusables = Array.from(
+      element.querySelectorAll<HTMLElement>(focusableSelectors.join(','))
+    );
+
+    setFocusableElements(focusables);
+
+    // Autofocus
+    if (typeof autoFocusIndex === 'number' && focusables.length > autoFocusIndex) {
+      setTimeout(() => {
+        focusables[autoFocusIndex].focus();
+      }, 200);
+    } else {
+      element.focus();
+    }
+  }, [elementRef, isOpen, autoFocusIndex]);
+
+  return focusableElements;
+};

package/src/hooks/useLocalPopoverControl.ts

@@ -0,0 +1,38 @@
+import { Ref, useCallback, useImperativeHandle, useRef, useState } from 'react';
+
+export interface PopupControlRef {
+  isOpen: boolean;
+  onOpen: () => void;
+  onClose: () => void;
+}
+
+interface Props {
+  controlRef?: Ref<PopupControlRef>;
+  onCloseCallback?: () => void;
+}
+
+export const useLocalPopoverControl = ({ controlRef, onCloseCallback }: Props) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const elementRef = useRef<HTMLDivElement>(null);
+
+  const handleClose = useCallback(() => {
+    elementRef.current?.classList.add('closing');
+    setTimeout(() => {
+      onCloseCallback?.();
+      setIsOpen(false);
+    }, 200);
+  }, [onCloseCallback]);
+
+  useImperativeHandle(controlRef, () => ({
+    isOpen,
+    onOpen: () => setIsOpen(true),
+    onClose: handleClose,
+  }));
+
+  return {
+    isOpen,
+    onClose: handleClose,
+    elementRef: elementRef,
+  };
+};

package/src/hooks/usePopupControl.ts

@@ -0,0 +1,13 @@
+import { useRef } from 'react';
+import { PopupControlRef } from './useLocalPopoverControl';
+
+export const usePopupControl = () => {
+  const controlRef = useRef<PopupControlRef>(null);
+
+  return {
+    controlRef,
+    isOpen: controlRef.current?.isOpen,
+    onOpen: () => controlRef.current?.onOpen(),
+    onClose: () => controlRef.current?.onClose(),
+  };
+};

package/src/index.ts

@@ -22,11 +22,12 @@ import type { ISelectData } from './types/ISelect';
 import type { ITab } from './types/ITab';
 import type {
   IPagination,
-  IServerSidePagination,
+  IPaginationControl,
   ITable,
   ITableColumn,
   ITableDataItem,
-  ITableEditRow,
+  ITableDataItemCells,
+  ITableEdit,
   ITableFilter,
   ITableFilterData,
   ITableFilterItem,
@@ -37,6 +38,7 @@ import type { IHeaderAction, IHeaderUserMenuProps } from './types/IHeader';
 import { tableCustomLimit1000 } from './types/ITable';
 
 import type { IRoute } from './types/IRouter';
+import type { ISidebarItem } from './components/Sidebar/types/ISidebar';
 import { Router } from './components/Router/Router';
 
 import { Accordions } from './components/Accordions/Accordions';
@@ -49,7 +51,6 @@ import { IconButton } from './components/Button/IconButton';
 import { Dashboard } from './components/Dashboard/Dashboard';
 import { DashboardWidget } from './components/Dashboard/DashboardWidget';
 import { FastLinksWidget } from './components/Dashboard/FastLinksWidget/FastLinksWidget';
-import { DeleteItemDialog } from './components/Dialog/DeleteItemDialog';
 import { Dialog } from './components/Dialog/Dialog';
 import { Collapse } from './components/Helper/Collapse';
 import { Checkbox } from './components/Inputs/Checkbox';
@@ -71,14 +72,7 @@ import { TextInput } from './components/Inputs/TextInput';
 import { FullScreenLoader, LazyLoader, Loader } from './components/Loader/Loader';
 import { Menu } from './components/Menu/Menu';
 import { MenuItem } from './components/Menu/MenuItem';
-import { ItemActionsMenu } from './components/Table/Components/Edit/ItemActionsMenu';
-import { ItemEditOptionsButtons } from './components/Table/Components/Edit/ItemEditOptionsButtons';
-import { TableEditRow } from './components/Table/Components/Edit/TableEditRow';
-import { FilterItem } from './components/Table/Components/FilterItem';
-import { SetTableFilter } from './components/Table/Components/SetTableFilter';
-import { TableFooter } from './components/Table/Components/TableFooter';
-import { Table } from './components/Table/Table';
-import { TablePrint } from './components/Table/Components/Print/TablePrint';
+// import { ItemActionsMenu } from './components/Table/Components/Edit/ItemActionsMenu';
 import { Tabs } from './components/Tabs/Tabs';
 import { Tooltip } from './components/Tooltip/Tooltip';
 import { Tree } from './components/Tree/Tree';
@@ -86,6 +80,26 @@ import { ConditionalWrapper } from './components/Wrappers/ConditionalWrapper';
 import { FormWrapper } from './components/Wrappers/FormWrapper';
 import { PageLayout } from './components/Wrappers/PageLayout';
 
+///// PULLOVER /////
+import { Pullover } from './components/Pullover/Pullover';
+
+///// TABLE /////
+import { Table } from './components/Table/Table';
+// import { ItemEditOptionsButtons } from './components/Table/Components/Edit/ItemEditOptionsButtons';
+// import { TableEditRow } from './components/Table/Components/Edit/TableEditRow';
+// import { FilterItem } from './components/Table/Components/FilterItem';
+// import { SetTableFilter } from './components/Table/Components/SetTableFilter';
+// import { TableFooter } from './components/Table/Components/TableFooter';
+// import { GridTable } from '../idea/GridTable/GridTable';
+// import { TablePrint } from './components/Table/Components/Print/TablePrint';
+import { useDefaultTemplate } from './components/Table/hooks/useDefaultTemplate';
+import { useTableEdit } from './components/Table/hooks/useTableEdit';
+import { useTableFilterFields } from './components/Table/hooks/useTableFilterFields';
+import { useTablePagination } from './components/Table/hooks/useTablePagination';
+import { useTableSearch } from './components/Table/hooks/useTableSearch';
+import { useTableSelect } from './components/Table/hooks/useTableSelect';
+import { useTableSort } from './components/Table/hooks/useTableSort';
+
 import {
   checkIfExpired,
   dateAddDays,
@@ -97,7 +111,7 @@ import {
   getCurrentDateFormatted,
   getCurrentDateFormattedYMD,
   getDaysLeft,
-} from './utils/DateUtils';
+} from './utils/dateUtils';
 import {
   calculateFilesSize,
   dataURLtoFile,
@@ -120,12 +134,12 @@ import {
   lsSet,
   setActiveOrgUuid,
   setDefaultOrgUuid,
-} from './utils/LocalStorageHelper';
+} from './utils/localStorageHelper';
 import {
   formatCurrency,
   formatCurrencyNoDecimals,
   formatDecimalNumber,
-} from './utils/NumberUtils';
+} from './utils/numberUtils';
 import {
   areStringArraysEqual,
   compareArrayItemsIndex,
@@ -137,7 +151,7 @@ import {
   deleteProps,
   deletePropsThatEndsWith,
   intersectArrays,
-} from './utils/ObjectUtils';
+} from './utils/objectUtils';
 import {
   convertReportTemplateFilterToSearch,
   convertSearchToReportTemplateFilter,
@@ -145,23 +159,21 @@ import {
   getPrintColumns,
   getVisibleColumnsIds,
   setTemplateData,
-} from './utils/TableUtils';
-import { rootDir } from './utils/RootDir';
-import { getInputHelperText, getInputMinMaxPattern, maxChar } from './utils/StringUtils';
-import { toastError, toastSuccess } from './utils/Toasts';
-import { parseUrlSearch } from './utils/UrlUtils';
+} from './utils/tableUtils';
+import { rootDir } from './utils/rootDir';
+import { getInputHelperText, getInputMinMaxPattern, maxChar } from './utils/stringUtils';
+import { toastError, toastSuccess } from './utils/toasts';
+import { parseUrlSearch } from './utils/urlUtils';
 import { i18nIUILatin } from './utils/i18n/i18nIUILatin';
 import { i18nIUICyrilic } from './utils/i18n/i18nIUICyrilic';
 import { i18nIUIMe } from './utils/i18n/i18nIUIMe';
 
-import { useDefaultTemplate } from './components/Table/hooks/useDefaultTemplate';
 import { useHideZendesk } from './hooks/useZendesk';
 import { useOnEsc } from './hooks/useOnEsc';
-import { useDialogObserver } from './components/Dialog/hooks/useDialogObserver';
-import { useTableSelect } from './components/Table/hooks/useTableSelect';
 import { useIsMenuOpen } from './hooks/useIsMenuOpen';
+import { usePopupControl } from './hooks/usePopupControl';
 
-export { Router, type IRoute };
+export { Router, type IRoute, type ISidebarItem };
 
 export {
   Accordions,
@@ -175,15 +187,11 @@ export {
   Dashboard,
   DashboardWidget,
   FastLinksWidget,
-  DeleteItemDialog,
   Dialog,
   DotBadge,
-  FilterItem,
   FormWrapper,
   FullScreenLoader,
   IconButton,
-  ItemActionsMenu,
-  ItemEditOptionsButtons,
   TextAreaInput,
   LazyLoader,
   Loader,
@@ -193,6 +201,7 @@ export {
   NumberInput,
   PageLayout,
   PasswordInput,
+  Pullover,
   PillBadge,
   Radio,
   RadioLarge,
@@ -200,11 +209,6 @@ export {
   Select,
   SelectAsyncPaginate,
   SelectCreatable,
-  SetTableFilter,
-  Table,
-  TablePrint,
-  TableEditRow,
-  TableFooter,
   tableCustomLimit1000,
   Tabs,
   TextInput,
@@ -215,14 +219,23 @@ export {
 };
 
 export {
-  useHideZendesk,
-  useOnEsc,
+  Table,
+  // SetTableFilter,
+  // GridTable,
+  // TablePrint,
+  // TableEditRow,
+  // TableFooter,
   useDefaultTemplate,
-  useDialogObserver,
+  useTableEdit,
+  useTableFilterFields,
+  useTablePagination,
+  useTableSearch,
   useTableSelect,
-  useIsMenuOpen,
+  useTableSort,
 };
 
+export { useHideZendesk, useOnEsc, useIsMenuOpen, usePopupControl };
+
 export type {
   IAlertProps,
   DeepPartial,
@@ -237,7 +250,7 @@ export type {
   IHeaderUserMenuProps,
   IPagination,
   ISelectData,
-  IServerSidePagination,
+  IPaginationControl,
   ISimpleObject,
   ISimpleObjectWithCode,
   IStringObject,
@@ -245,7 +258,8 @@ export type {
   ITable,
   ITableColumn,
   ITableDataItem,
-  ITableEditRow,
+  ITableDataItemCells,
+  ITableEdit,
   ITableFilter,
   ITableFilterData,
   ITableFilterItem,

package/src/styles/common/_typography.scss

@@ -33,6 +33,9 @@ h2 {
 h3 {
   font-size: 24px;
 }
+h4 {
+  font-size: 18px;
+}
 
 .bold {
   font-weight: bold !important;

package/src/styles/common/helpers/_size.scss

@@ -1,6 +1,6 @@
 .full-screen {
   height: 100dvh !important;
-  width: 100vw !important;
+  width: 100dvw !important;
 }
 .full-width {
   width: 100% !important;

package/src/styles/components/_accordions.scss

@@ -3,7 +3,7 @@
   flex-direction: column;
 }
 .iui-accordion {
-  background: var(--white);
+  background: var(--background);
   box-shadow: var(--container-shadow);
   border-radius: var(--container-radius);
   margin: 3px 0;

package/src/styles/components/_badge.scss

@@ -11,7 +11,8 @@
   align-items: center;
   transform: scale(1) translate(50%, -50%);
   transform-origin: 100% 0%;
-  border-radius: 100%;
+  border-radius: 50px;
+  padding: 0 4px;
   &.primary {
     color: var(--text-inverse);
     border: 2px solid white;
@@ -21,12 +22,12 @@
   &.s {
     font-size: 10px;
     height: 18px;
-    width: 18px;
+    min-width: 18px;
   }
   &.m {
     font-size: 11px;
     height: 21px;
-    width: 21px;
+    min-width: 21px;
   }
 }
 

package/src/styles/components/_card.scss

@@ -1,7 +1,7 @@
 .iui-card {
   box-shadow: var(--container-shadow);
   border-radius: var(--container-radius);
-  background: var(--white);
+  background: var(--background);
   & > .content {
     &.s {
       padding: 10px;

package/src/styles/components/_dialog.scss

@@ -8,37 +8,32 @@ $dialog-sizes: (
 );
 
 .iui-dialog {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
   display: flex;
   align-items: center;
   justify-content: center;
-  position: fixed;
-  z-index: 1000;
-  inset: 0;
-  background-color: var(--neutral-t);
-  animation: fade-in 200ms forwards;
+  background: var(--neutral-t);
   backdrop-filter: blur(8px);
+  animation: fade-in 0.2s forwards;
   &.closing {
-    animation: fade-out 200ms forwards;
+    animation: fade-out 0.2s forwards;
     display: flex;
   }
 }
 
 .iui-dialog-container {
-  background-color: var(--white);
+  background-color: var(--background);
   border-radius: 16px;
   min-width: 400px;
   max-width: 98vw;
-  animation: scale-in 200ms forwards;
+  animation: scale-in 0.2s forwards;
   overflow: hidden;
   .iui-dialog-header {
     display: flex;
     gap: 16px;
-    h1 {
-      font-size: 18px;
-      font-weight: 600;
-    }
     .iui-dialog-desc {
-      margin-top: 8px;
       color: var(--text);
       word-break: break-word;
       white-space: pre-line;
@@ -49,6 +44,10 @@ $dialog-sizes: (
       width: 100%;
       justify-content: space-between;
       align-items: baseline;
+      h4 {
+        font-weight: 600;
+        margin-bottom: 8px;
+      }
       .close-icon {
         margin: -14px;
       }
@@ -75,6 +74,9 @@ $dialog-sizes: (
 }
 
 .iui-dialog-content {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
   max-height: 80vh;
   padding: 24px;
   &:not(.no-overflow) {

package/src/styles/components/_input.scss

@@ -26,7 +26,7 @@
     position: relative;
     border: var(--border);
     border-radius: 8px;
-    background-color: var(--white);
+    background-color: var(--background);
     overflow: hidden;
     display: flex;
     align-items: center;

package/src/styles/components/_inputCheckbox.scss

@@ -82,7 +82,7 @@
       height: 8px;
       width: 8px;
       border-radius: 8px;
-      background-color: var(--white);
+      background-color: var(--background);
       transform: scale(0);
       transition: transform 150ms cubic-bezier(0.4, 0, 1, 1) 0ms;
     }

package/src/styles/components/_inputDateTime.scss

@@ -87,7 +87,7 @@
     font-size: 15px;
     font-weight: 500;
     height: 40px;
-    &--now {
+    &--now:not(&--active) {
       background: var(--primary-100) !important;
       color: var(--primary);
       &:enabled:hover {
@@ -97,7 +97,7 @@
     &--active,
     &--hasActive {
       background: var(--primary) !important;
-      color: var(--text-inverse);
+      color: var(--text-inverse) !important;
     }
   }
 

package/src/styles/components/_inputRadio.scss

@@ -33,7 +33,7 @@
       height: 8px;
       width: 8px;
       border-radius: 8px;
-      background-color: var(--white);
+      background-color: var(--background);
       transform: scale(0);
       transition: transform 150ms cubic-bezier(0.4, 0, 1, 1) 0ms;
     }

package/src/styles/components/_inputSelect.scss

@@ -1,6 +1,8 @@
-.select-wrapper {
-  .field {
-    min-height: 40px;
-    height: auto;
+.select-wrapper.s .iui-input-wrapper-field {
+  height: 24px;
+  min-height: 24px;
+  .icon {
+    height: 12px;
+    width: 12px;
   }
 }

package/src/styles/components/_menu-v2.scss

@@ -5,7 +5,7 @@
   padding: 4px 0;
   border: none;
   border-radius: 8px;
-  background: var(--white);
+  background: var(--background);
   box-shadow: var(--deep-shadow);
   animation: fade-in 200ms forwards;
   overscroll-behavior: none;

package/src/styles/components/_menu.scss

@@ -2,7 +2,7 @@
   position: absolute;
   padding: 4px 0;
   border-radius: 8px;
-  background: var(--white);
+  background: var(--background);
   box-shadow: var(--deep-shadow);
   overflow: auto;
   animation: fade-in 200ms forwards;
@@ -22,29 +22,37 @@
 }
 
 .iui-menu-item {
-  user-select: none;
-  padding: 8px 16px;
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  &.clickable:hover:not(:disabled):not(.disabled) {
+  &.clickable:hover:not(:disabled):not(.disabled):not(.active) {
     background-color: var(--neutral-hover);
   }
+  &.active {
+    transition: none;
+    background-color: var(--primary);
+    color: var(--text-inverse);
+    .menu-item-content .menu-item-icon {
+      color: var(--text-inverse);
+    }
+  }
   &.with-devider:not(:last-child) {
     border-bottom: var(--border);
   }
-  .menu-item-icon {
+  .menu-item-content {
     display: flex;
     align-items: center;
-    min-width: 24px;
-    color: var(--text);
-    svg {
-      height: 16px;
+    gap: 8px;
+    padding: 8px 16px;
+    user-select: none;
+    .menu-item-icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--text);
+      svg {
+        height: 16px;
+        width: 16px;
+      }
     }
   }
-  // .menu-item-label {
-  //   width: 100%;
-  // }
   .menu-item-badge {
     top: -3px;
     right: -3px;

package/src/styles/components/_page.scss

@@ -10,6 +10,7 @@
 }
 .app-content {
   grid-area: content;
+  overflow: hidden;
 }
 
 .app-layout {
@@ -55,8 +56,8 @@
   }
 }
 
-.footer {
+.page-footer {
   text-align: center;
-  padding: 36px 0 8px;
+  padding: 16px;
   font-size: 12px;
 }