@inceptionbg/iui 2.0.17 → 2.0.20

package/src/components/Table/components/items/TableItemActions.tsx

@@ -2,10 +2,6 @@ import { type FC } from 'react';
 import { useTableContext } from '../../contexts/TableContext';
 import { IconButton } from '../../../Button/IconButton';
 import { faEllipsisVertical, faPen, faTrashCan } from '../../../../assets/icons';
-// TO CONSIDER
-// import { faPen } from '../../../../assets/icons/duotone/faPen';
-// import { faTrashCan } from '../../../../assets/icons/duotone/faTrashCan';
-// import { faEllipsisVertical } from '../../../../assets/icons/regular/faEllipsisVertical';
 import { useIsMenuOpen } from '../../../../hooks/useIsMenuOpen';
 import { Menu } from '../../../Menu/Menu';
 import { ITableDataItem } from '../../../../types/ITable';
@@ -21,6 +17,9 @@ export const TableItemActions: FC<{ tableDataItem: ITableDataItem<any> }> = ({
     return null;
   }
 
+  const filteredActions =
+    dataActions.actions?.(tableDataItem.item).filter(e => e.hasAccess) ?? [];
+
   return (
     <div className="table-item-actions">
       {dataActions.isEditable && (
@@ -44,8 +43,7 @@ export const TableItemActions: FC<{ tableDataItem: ITableDataItem<any> }> = ({
           color="danger"
         />
       )}
-
-      {!!dataActions.filteredActions?.length && (
+      {!!filteredActions?.length && (
         <Menu
           isOpen={isOpen}
           onClose={onClose}
@@ -63,7 +61,7 @@ export const TableItemActions: FC<{ tableDataItem: ITableDataItem<any> }> = ({
             />
           )}
           items={
-            dataActions.actions?.(tableDataItem.item)?.map(action => ({
+            filteredActions?.map(action => ({
               label: action.label,
               hidden: !action.hasAccess,
               disabled: action.disabled,

package/src/components/Table/contexts/TableContext.tsx

@@ -26,7 +26,6 @@ interface ITableContext<T = unknown> extends ITable<T> {
     hasItemActions: boolean;
     isEditable: boolean;
     isDeletable: boolean;
-    filteredActions: ITableSelectedAction[];
   };
   editable?: ITableEdit<T> & {
     isAdding: boolean;
@@ -71,16 +70,20 @@ export const TableProvider = <T,>({
   const updatedDataActions = useMemo(() => {
     const isEditable = Boolean(dataActions?.hasEditAccess);
     const isDeletable = Boolean(rest.itemDeleteData?.hasAccess);
-    const filteredActions = dataActions?.actions?.().filter(e => e.hasAccess) ?? [];
+
+    const hasCustomActions = initialData.some(({ item }) => {
+      const actions = dataActions?.actions?.(item).filter(e => e.hasAccess) ?? [];
+      return actions.length > 0;
+    });
+
     return {
       hasEditAccess: isEditable,
       actions: dataActions?.actions,
-      filteredActions,
-      hasItemActions: isEditable || isDeletable || filteredActions.length > 0,
+      hasItemActions: isEditable || isDeletable || hasCustomActions,
       isEditable,
       isDeletable,
     };
-  }, [dataActions, rest.itemDeleteData?.hasAccess]);
+  }, [dataActions, initialData, rest.itemDeleteData?.hasAccess]);
 
   const localPagination = useLocalTablePagination({
     defaultLimit: footer?.customPagination?.defaultLimit,

package/src/components/Table/hooks/localHooks/useLocalTableData.tsx

@@ -36,7 +36,7 @@ export const useLocalTableData = <T,>({
             localPagination.offset * localPagination.limit + localPagination.limit
           );
 
-    const additionalDataActions = dataActions?.actions?.().filter(e => e.hasAccess) ?? [];
+    const additionalDataActions = dataActions?.actions?.() ?? [];
     const withActions = Boolean(
       dataActions?.hasEditAccess || isDeletable || additionalDataActions.length
     );

package/src/components/Table/hooks/localHooks/useLocalTableKeyboard.ts

@@ -117,7 +117,8 @@ export const useLocalTableKeyboard = () => {
           },
           {
             code: 'Space',
-            disabled: !dataActions?.hasItemActions && !!focusedRow?.uuid,
+            disabled:
+              !dataActions?.hasItemActions || !focusedRow?.uuid || isEditing || isAdding,
             onAction: () => {
               const rowUuid = focusedRow?.uuid!;
               const isRowSelected = rowSelect?.selectedRows.has(rowUuid);
@@ -138,6 +139,7 @@ export const useLocalTableKeyboard = () => {
           ) {
             event.preventDefault();
             event.stopPropagation();
+            console.log(action);
             if (
               action.onBulkAction &&
               dataActions?.hasItemActions &&

package/src/components/Table/hooks/useTableEdit.tsx

@@ -11,9 +11,11 @@ interface BaseItemProps<T> {
   placeholder?: string;
   required?: boolean;
   additionalClearIds?: (keyof T)[];
+  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
 }
 interface SelectProps<T> extends BaseItemProps<T> {
   options: readonly (string | boolean)[] | (string | boolean)[];
+  minWidth?: number;
   formatOption: (value: string | boolean) => {
     value: string | boolean;
     label: string;
@@ -30,6 +32,7 @@ export const useTableEdit = <T extends Record<string, any>>() => {
     required,
     id,
     additionalClearIds = [],
+    inputProps,
   }: BaseItemProps<T>) => ({
     value: (
       <TextInput
@@ -39,6 +42,7 @@ export const useTableEdit = <T extends Record<string, any>>() => {
         setValue={e =>
           setEditData(e ? { ...editData, [id]: e } : deleteProps(editData as T, [id]))
         }
+        inputProps={inputProps}
         onClear={() => deleteProps(editData as T, [id, ...additionalClearIds])}
       />
     ),
@@ -50,6 +54,7 @@ export const useTableEdit = <T extends Record<string, any>>() => {
     required,
     id,
     additionalClearIds = [],
+    inputProps,
   }: BaseItemProps<T>) => ({
     value: (
       <NumberInput
@@ -59,6 +64,7 @@ export const useTableEdit = <T extends Record<string, any>>() => {
         setValue={e =>
           setEditData(e ? { ...editData, [id]: e } : deleteProps(editData as T, [id]))
         }
+        inputProps={inputProps}
         onClear={() => deleteProps(editData as T, [id, ...additionalClearIds])}
       />
     ),
@@ -69,7 +75,7 @@ export const useTableEdit = <T extends Record<string, any>>() => {
     id,
     required,
     additionalClearIds,
-  }: Omit<BaseItemProps<T>, 'placeholder'>) => ({
+  }: Omit<BaseItemProps<T>, 'placeholder' | 'inputProps'>) => ({
     value: (
       <DateInput
         required={required}
@@ -92,6 +98,7 @@ export const useTableEdit = <T extends Record<string, any>>() => {
     options,
     formatOption,
     additionalClearIds = [],
+    minWidth = 110,
   }: SelectProps<T>) => ({
     value: (
       <Select
@@ -99,7 +106,7 @@ export const useTableEdit = <T extends Record<string, any>>() => {
         placeholder={placeholder}
         value={hasValue(editData[id]) ? formatOption(editData[id]!) : null}
         options={options.map(formatOption)}
-        minWidth={150}
+        minWidth={minWidth}
         onChange={e => {
           e
             ? setEditData({

package/src/components/Table/hooks/useTableSearch.ts

@@ -1,4 +1,5 @@
 import { Dispatch, SetStateAction, useState } from 'react';
+import { deletePropsThatEndsWith } from '../../../utils/objectUtils';
 
 export interface ITableSearchProps<T> {
   setOffset: Dispatch<SetStateAction<number>>;
@@ -17,7 +18,7 @@ export const useTableSearch = <T>({
   const onSearch = (filters: T) => {
     setOffset(0);
     resetSelectedRows?.();
-    setSearch(filters);
+    setSearch(<T>deletePropsThatEndsWith(filters, 'Obj'));
   };
 
   return {

package/src/components/Tabs/Tabs.tsx

@@ -27,9 +27,9 @@ export const Tabs: FC<Props> = ({
 }) => {
   const filteredTabs = useMemo(() => tabs.filter(e => !e.hidden), [tabs]);
 
-  const [selected, setSelected] = useState(initialValue || filteredTabs[0].value);
+  const [selected, setSelected] = useState(initialValue || filteredTabs[0]?.value || '');
 
-  const activeTab = filteredTabs.find(tab => (control?.value || selected) === tab.value);
+  const activeTab = filteredTabs.find(tab => (control?.value ?? selected) === tab.value);
 
   return filteredTabs.length > 0 ? (
     <div className={className}>
@@ -39,7 +39,7 @@ export const Tabs: FC<Props> = ({
             id={tab.value}
             key={tab.value}
             className={clsx('iui-tab clickable', {
-              selected: (control?.value || selected) === tab.value,
+              selected: (control?.value ?? selected) === tab.value,
               disabled: tab.disabled,
               'no-wrap': noWrap,
             })}

package/src/components/Tooltip/Tooltip.tsx

@@ -103,98 +103,31 @@ const setAbsolutePosition = (
 ) => {
   const containerRect = containerEl.getBoundingClientRect();
   const tooltipRect = targetEl.getBoundingClientRect();
-  const margin = 16; // Distance from container
-  const screenPadding = 8; // Minimum distance from screen edges
 
   if (position === 'bottom' || position === 'top') {
-    const bottom = Math.floor(containerRect.bottom + margin);
-    const top = Math.floor(containerRect.top - tooltipRect.height - margin);
-    let leftCenter = Math.floor(
+    const bottom = Math.floor(containerRect.bottom + 16);
+    const top = Math.floor(containerRect.top - tooltipRect.height - 16);
+    const leftCenter = Math.floor(
       containerRect.left + containerRect.width / 2 - tooltipRect.width / 2
     );
-
-    // Check if tooltip overflows horizontally and adjust
-    if (leftCenter < screenPadding) {
-      targetEl.style.width = `${tooltipRect.width + leftCenter}px`;
-      leftCenter = screenPadding;
-    } else if (leftCenter + tooltipRect.width > window.innerWidth - screenPadding) {
-      leftCenter = window.innerWidth - tooltipRect.width - screenPadding;
-    }
-
     const reverse =
       position === 'top' ? top < 0 : bottom + tooltipRect.height > window.innerHeight;
 
     setNewPosition(reverse ? (position === 'bottom' ? 'top' : 'bottom') : '');
 
-    let finalTop =
-      position === 'bottom' ? (reverse ? top : bottom) : reverse ? bottom : top;
-
-    // Ensure tooltip doesn't go above screen
-    if (finalTop < screenPadding) {
-      finalTop = screenPadding;
-    }
-    // Ensure tooltip doesn't go below screen
-    if (finalTop + tooltipRect.height > window.innerHeight - screenPadding) {
-      finalTop = window.innerHeight - tooltipRect.height - screenPadding;
-    }
-
-    targetEl.style.top = `${finalTop}px`;
+    targetEl.style.top = `${
+      position === 'bottom' ? (reverse ? top : bottom) : reverse ? bottom : top
+    }px`;
     targetEl.style.left = `${leftCenter}px`;
   } else if (position === 'right') {
-    let finalTop = Math.floor(
-      containerRect.top + containerRect.height / 2 - tooltipRect.height / 2
-    );
-    let finalLeft = Math.floor(containerRect.right + margin);
-
-    // Check if tooltip overflows vertically and adjust
-    if (finalTop < screenPadding) {
-      finalTop = screenPadding;
-    } else if (finalTop + tooltipRect.height > window.innerHeight - screenPadding) {
-      finalTop = window.innerHeight - tooltipRect.height - screenPadding;
-    }
-
-    // Check if tooltip overflows to the right and flip to left
-    if (finalLeft + tooltipRect.width > window.innerWidth - screenPadding) {
-      finalLeft = Math.floor(containerRect.left - tooltipRect.width - margin);
-      setNewPosition('left');
-
-      // If it still overflows on the left, position it at the edge
-      if (finalLeft < screenPadding) {
-        finalLeft = screenPadding;
-      }
-    } else {
-      setNewPosition('');
-    }
-
-    targetEl.style.top = `${finalTop}px`;
-    targetEl.style.left = `${finalLeft}px`;
+    targetEl.style.top =
+      Math.floor(containerRect.top + containerRect.height / 2 - tooltipRect.height / 2) +
+      'px';
+    targetEl.style.left = Math.floor(containerRect.right + 16) + 'px';
   } else if (position === 'left') {
-    let finalTop = Math.floor(
-      containerRect.top + containerRect.height / 2 - tooltipRect.height / 2
-    );
-    let finalLeft = Math.floor(containerRect.left - tooltipRect.width - margin);
-
-    // Check if tooltip overflows vertically and adjust
-    if (finalTop < screenPadding) {
-      finalTop = screenPadding;
-    } else if (finalTop + tooltipRect.height > window.innerHeight - screenPadding) {
-      finalTop = window.innerHeight - tooltipRect.height - screenPadding;
-    }
-
-    // Check if tooltip overflows to the left and flip to right
-    if (finalLeft < screenPadding) {
-      finalLeft = Math.floor(containerRect.right + margin);
-      setNewPosition('right');
-
-      // If it still overflows on the right, position it at the edge
-      if (finalLeft + tooltipRect.width > window.innerWidth - screenPadding) {
-        finalLeft = window.innerWidth - tooltipRect.width - screenPadding;
-      }
-    } else {
-      setNewPosition('');
-    }
-
-    targetEl.style.top = `${finalTop}px`;
-    targetEl.style.left = `${finalLeft}px`;
+    targetEl.style.top =
+      Math.floor(containerRect.top + containerRect.height / 2 - tooltipRect.height / 2) +
+      'px';
+    targetEl.style.left = Math.floor(containerRect.left - tooltipRect.width - 16) + 'px';
   }
 };

package/src/index.ts

@@ -173,6 +173,7 @@ import {
   deleteEmptyPropsIncludingArray,
   deleteProps,
   deletePropsThatEndsWith,
+  flattenTreeForSelect,
   intersectArrays,
 } from './utils/objectUtils';
 import {
@@ -345,6 +346,7 @@ export {
   setTemplateData,
   getVisibleColumnsIds,
   inputPattern,
+  flattenTreeForSelect,
   intersectArrays,
   maxChar,
   parseUrlSearch,

package/src/styles/common/_typography.scss

@@ -1,8 +1,8 @@
 @use '../variables/bp';
-@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;0,900;1,400;1,500;1,600;1,700;1,900&display=swap');
+@import url('@fontsource-variable/ibm-plex-sans');
 
 * {
-  font-family: 'Poppins', sans-serif;
+  font-family: 'IBM Plex Sans Variable', sans-serif;
 }
 
 body {

package/src/styles/components/_accordions.scss

@@ -26,6 +26,7 @@
     align-items: center;
     justify-content: space-between;
     user-select: none;
+    font-size: 14px;
     font-weight: 500;
     margin-bottom: 1px;
     padding: 0 16px;

package/src/styles/components/_dialog.scss

@@ -24,15 +24,22 @@ $dialog-sizes: (
 }
 
 .iui-dialog-container {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
   background-color: var(--background);
   border-radius: 16px;
   min-width: 400px;
   max-width: 98vw;
+  max-height: 95dvh;
   animation: scale-in 0.2s forwards;
   overflow: hidden;
+  padding: 24px;
+
   .iui-dialog-header {
     display: flex;
     gap: 16px;
+    flex-shrink: 0;
     .iui-dialog-desc {
       color: var(--text);
       word-break: break-word;
@@ -53,6 +60,18 @@ $dialog-sizes: (
       }
     }
   }
+  .iui-dialog-content {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    flex: 1;
+    margin-right: -24px;
+    padding-right: 24px;
+    &:not(.no-overflow) {
+      overflow: auto;
+      overscroll-behavior: none;
+    }
+  }
 
   @each $key, $value in $dialog-sizes {
     &.#{$key} {
@@ -71,28 +90,15 @@ $dialog-sizes: (
       }
     }
   }
-}
-
-.iui-dialog-content {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  max-height: 80vh;
-  padding: 24px;
-  &:not(.no-overflow) {
-    overflow: auto;
-    overscroll-behavior: none;
+  .iui-dialog-actions {
+    display: flex;
+    gap: 8px;
+    justify-content: right;
+    padding-top: 24px;
+    border-top: var(--border);
   }
 }
 
-.iui-dialog-actions {
-  display: flex;
-  gap: 8px;
-  justify-content: right;
-  padding: 24px;
-  border-top: var(--border);
-}
-
 @media #{bp.$mobile} {
   .iui-dialog-container {
     height: 100dvh;

package/src/styles/components/_header.scss

@@ -12,6 +12,11 @@
   padding-left: 8px;
   box-sizing: border-box;
   z-index: 2;
+  .env-badge {
+    color: var(--text);
+    font-weight: bold;
+    font-size: 14px;
+  }
   .header-button {
     height: 40px;
     width: 40px;

package/src/styles/components/_table.scss

@@ -100,7 +100,7 @@ table {
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: 0 4px;
+    padding: 0 8px;
   }
 
   //// Footer ////

package/src/styles/components/_tabs.scss

@@ -2,7 +2,7 @@
   display: flex;
   overflow: auto;
   border-bottom: var(--border);
-  padding-bottom: 4px;
+  flex-shrink: 0;
   &::-webkit-scrollbar {
     height: 5px;
   }

package/src/types/ISelect.ts

@@ -43,6 +43,7 @@ export interface AsyncSelectProps extends BaseSelectProps {
   variant: 'async';
   loadOptions: any;
   defaultData?: ISelectData[];
+  refresh?: any[];
 }
 
 export interface CreatableSelectProps extends BaseSelectProps {

package/src/types/ITable.ts

@@ -97,7 +97,7 @@ export interface ITableDataItemCells {
 }
 
 export interface ITableDataActions<T = unknown> {
-  hasEditAccess: boolean;
+  hasEditAccess?: boolean;
   actions?: (item?: T) => {
     label: string;
     onClick: () => void;

package/src/utils/InputPatternValidation.ts

@@ -3,10 +3,10 @@ export const inputPattern = {
   businessCode: '^\\d{8}$',
   umcn: '^\\d{13}$',
   idCardNumber: '^\\d{9}$',
-  phoneNumber: '^\\d{8,9}$',
+  phoneNumber: '^\\+\\d{11,13}$',
   port: '^\\d{4}$',
   year: '^\\d{4}$',
   number: '^\\d*$',
   strongPassword: '^.*(?=.{8,})(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z0-9]).*$',
-  // email: '\\S+@\\S+\\.\\S+',
+  email: '\\S+@\\S+\\.\\S+',
 };

package/src/utils/objectUtils.ts

@@ -14,17 +14,14 @@ export const deleteProps = <T extends Record<string, any>>(
   return newObj as Partial<T>;
 };
 
-export const deletePropsThatEndsWith = <T extends Record<string, any>>(
-  obj: T,
-  endsWith: string
-) => {
+export const deletePropsThatEndsWith = <T>(obj: T, endsWith: string) => {
   const newObj = { ...obj };
   for (const prop in newObj) {
     if (prop.endsWith(endsWith)) {
       delete newObj[prop];
     }
   }
-  return newObj;
+  return newObj as Partial<T>;
 };
 
 export const deleteEmptyProps = <T extends Record<string, any>>(obj: T): T =>
@@ -102,3 +99,16 @@ export const getNotificationValues = (
     }
     return { ...obj, [item.key]: processedValue };
   }, {});
+
+export const flattenTreeForSelect = (items: any[], depth = 0, maxDepth = 5): any[] => {
+  if (!Array.isArray(items)) return [];
+  const indent = '\u00A0'.repeat(Math.min(depth, maxDepth) * 3);
+  return items.flatMap(node => [
+    {
+      value: node.uuid,
+      label: `${indent}${node.code ? node.code + ' - ' : ''}${node.name}`,
+      disabled: node.active === false || node.hasUserAccess === false,
+    },
+    ...(node.children ? flattenTreeForSelect(node.children, depth + 1, maxDepth) : []),
+  ]);
+};

package/src/assets/icons/duotone/faPen.ts

@@ -1,18 +0,0 @@
-import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
-
-const prefix = "fad";
-const iconName = "pen";
-const width = 512;
-const height = 512;
-const unicode = "f304";
-const svgPathData = [
-  "M497.9 74.16L437.8 14.06c-18.75-18.75-49.19-18.75-67.93 0l-56.53 56.55l127.1 128l56.56-56.55C516.7 123.3 516.7 92.91 497.9 74.16z",
-  "M313.4 70.61l-282.3 282.3c-2.234 2.234-3.755 5.078-4.376 8.176l-26.34 131.7C-1.921 504 7.95 513.9 19.15 511.7l131.7-26.34c3.098-.6191 5.941-2.141 8.175-4.373l282.3-282.3L313.4 70.61z",
-];
-
-export const faPen: IconDefinition = {
-  prefix,
-  iconName,
-  icon: [width, height, [], unicode, svgPathData],
-};
-

package/src/assets/icons/duotone/faTrashCan.ts

@@ -1,18 +0,0 @@
-import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
-
-const prefix = "fad";
-const iconName = "trash-can";
-const width = 448;
-const height = 512;
-const unicode = "f2ed";
-const svgPathData = [
-  "M32 96v368C32 490.5 53.5 512 80 512h288c26.5 0 48-21.5 48-48V96H32zM144 416c0 8.875-7.125 16-16 16S112 424.9 112 416V192c0-8.875 7.125-16 16-16S144 183.1 144 192V416zM240 416c0 8.875-7.125 16-16 16S208 424.9 208 416V192c0-8.875 7.125-16 16-16s16 7.125 16 16V416zM336 416c0 8.875-7.125 16-16 16s-16-7.125-16-16V192c0-8.875 7.125-16 16-16s16 7.125 16 16V416z",
-  "M432 32H320l-11.58-23.16c-2.709-5.42-8.25-8.844-14.31-8.844H153.9c-6.061 0-11.6 3.424-14.31 8.844L128 32H16c-8.836 0-16 7.162-16 16V80c0 8.836 7.164 16 16 16h416c8.838 0 16-7.164 16-16V48C448 39.16 440.8 32 432 32z",
-];
-
-export const faTrashCan: IconDefinition = {
-  prefix,
-  iconName,
-  icon: [width, height, [], unicode, svgPathData],
-};
-

package/src/assets/icons/regular/faEllipsisVertical.ts

@@ -1,15 +0,0 @@
-import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
-
-const prefix = "far";
-const iconName = "ellipsis-vertical";
-const width = 128;
-const height = 512; 
-const unicode = "f142";
-const svgPathData =
-  "M64 368C90.51 368 112 389.5 112 416C112 442.5 90.51 464 64 464C37.49 464 16 442.5 16 416C16 389.5 37.49 368 64 368zM64 208C90.51 208 112 229.5 112 256C112 282.5 90.51 304 64 304C37.49 304 16 282.5 16 256C16 229.5 37.49 208 64 208zM64 144C37.49 144 16 122.5 16 96C16 69.49 37.49 48 64 48C90.51 48 112 69.49 112 96C112 122.5 90.51 144 64 144z";
-
-export const faEllipsisVertical: IconDefinition = {
-  prefix,
-  iconName,
-  icon: [width, height, [], unicode, svgPathData],
-};