@inceptionbg/iui 2.0.8 → 2.0.11

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"
+                    control={helpControl.control}
+                    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>
                 </>
               )}

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,32 @@
+import { useCallback, useImperativeHandle, useRef } from 'react';
+import { ILocalPopupControl } from '../types/IPopup';
+
+interface Props {
+  control: ILocalPopupControl;
+  onCloseCallback?: () => void;
+}
+
+export const useLocalPopoverControl = ({ control, onCloseCallback }: Props) => {
+  const elementRef = useRef<HTMLDivElement>(null);
+
+  const handleOpen = useCallback(() => control.setIsOpen(true), [control]);
+
+  const handleClose = useCallback(() => {
+    elementRef.current?.classList.add('closing');
+    setTimeout(() => {
+      onCloseCallback?.();
+      control.setIsOpen(false);
+    }, 200);
+  }, [control, onCloseCallback]);
+
+  useImperativeHandle(control?.controlRef, () => ({
+    onOpen: handleOpen,
+    onClose: handleClose,
+  }));
+
+  return {
+    isOpen: control?.isOpen,
+    onClose: handleClose,
+    elementRef: elementRef,
+  };
+};

package/src/hooks/usePopupControl.ts

@@ -0,0 +1,17 @@
+import { useCallback, useRef, useState } from 'react';
+import { IPopupControl, PopupControlRef } from '../types/IPopup';
+
+export const usePopupControl: () => IPopupControl = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const controlRef = useRef<PopupControlRef>(null);
+
+  const onOpen = useCallback(() => controlRef.current?.onOpen(), []);
+  const onClose = useCallback(() => controlRef.current?.onClose(), []);
+
+  return {
+    control: { controlRef, isOpen, setIsOpen },
+    onOpen,
+    onClose,
+  };
+};

package/src/index.ts

@@ -17,16 +17,18 @@ import type {
 } from './types/IBasic';
 import type { IKeyboardAction } from './types/IKeyboard';
 import type { IMenuItem, IMenuPlacement } from './types/IMenu';
+import type { PopupControlRef, IPopupControl } from './types/IPopup';
 import type { IError } from './types/IError';
 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 +39,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 +52,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 +73,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 +81,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 +112,7 @@ import {
   getCurrentDateFormatted,
   getCurrentDateFormattedYMD,
   getDaysLeft,
-} from './utils/DateUtils';
+} from './utils/dateUtils';
 import {
   calculateFilesSize,
   dataURLtoFile,
@@ -120,12 +135,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 +152,7 @@ import {
   deleteProps,
   deletePropsThatEndsWith,
   intersectArrays,
-} from './utils/ObjectUtils';
+} from './utils/objectUtils';
 import {
   convertReportTemplateFilterToSearch,
   convertSearchToReportTemplateFilter,
@@ -145,23 +160,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 +188,11 @@ export {
   Dashboard,
   DashboardWidget,
   FastLinksWidget,
-  DeleteItemDialog,
   Dialog,
   DotBadge,
-  FilterItem,
   FormWrapper,
   FullScreenLoader,
   IconButton,
-  ItemActionsMenu,
-  ItemEditOptionsButtons,
   TextAreaInput,
   LazyLoader,
   Loader,
@@ -193,6 +202,7 @@ export {
   NumberInput,
   PageLayout,
   PasswordInput,
+  Pullover,
   PillBadge,
   Radio,
   RadioLarge,
@@ -200,11 +210,6 @@ export {
   Select,
   SelectAsyncPaginate,
   SelectCreatable,
-  SetTableFilter,
-  Table,
-  TablePrint,
-  TableEditRow,
-  TableFooter,
   tableCustomLimit1000,
   Tabs,
   TextInput,
@@ -215,14 +220,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,
@@ -231,13 +245,15 @@ export type {
   IKeyboardAction,
   IMenuItem,
   IMenuPlacement,
+  PopupControlRef,
+  IPopupControl as IPopupControl,
   IError,
   IFormWrapper,
   IHeaderAction,
   IHeaderUserMenuProps,
   IPagination,
   ISelectData,
-  IServerSidePagination,
+  IPaginationControl,
   ISimpleObject,
   ISimpleObjectWithCode,
   IStringObject,
@@ -245,7 +261,8 @@ export type {
   ITable,
   ITableColumn,
   ITableDataItem,
-  ITableEditRow,
+  ITableDataItemCells,
+  ITableEdit,
   ITableFilter,
   ITableFilterData,
   ITableFilterItem,

package/src/styles/common/_typography.scss

@@ -38,7 +38,7 @@ h4 {
 }
 
 .bold {
-  font-weight: bold !important;
+  font-weight: 600 !important;
 }
 .italic {
   font-style: italic !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,27 +8,27 @@ $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;

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;