@inceptionbg/iui 2.0.19 → 2.0.21

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/Wrappers/FormWrapper.tsx

@@ -61,6 +61,7 @@ export const FormWrapper: FC<IFormWrapper> = ({
                     variant={e.variant}
                     color={e.color}
                     onClick={e.onClick}
+                    type="button"
                   />
                 )
             )}
@@ -71,6 +72,7 @@ export const FormWrapper: FC<IFormWrapper> = ({
                 disabled={isLoading || submitButton.disabled}
                 variant={submitButton.variant}
                 color={submitButton.color}
+                type="submit"
               />
             )}
           </div>

package/src/components/Wrappers/PageLayout.tsx

@@ -28,6 +28,7 @@ export interface IPageLayoutProps {
   noAccess?: boolean;
   isInitiallyLoading?: boolean;
   isLoading?: boolean;
+  hideFooter?: boolean;
   children?: ReactNode;
 }
 
@@ -40,6 +41,7 @@ export const PageLayout: FC<IPageLayoutProps> = ({
   noAccess,
   isLoading,
   isInitiallyLoading,
+  hideFooter,
   children,
 }) => {
   const [isMoreActionsOpen, setIsMoreActionsOpen] = useState(false);
@@ -56,9 +58,11 @@ export const PageLayout: FC<IPageLayoutProps> = ({
     return null;
   }
 
-  return isInitiallyLoading ? (
-    <Loader isLoading isFullPage />
-  ) : (
+  if (isInitiallyLoading) {
+    return <Loader isLoading isFullPage />;
+  }
+
+  return (
     <Loader isLoading={!!isLoading}>
       <div className="page-container">
         {breadcrumbs && (
@@ -138,9 +142,13 @@ export const PageLayout: FC<IPageLayoutProps> = ({
           </div>
         )}
         <div className="page-content">{children}</div>
-        <footer className="page-footer">
-          <Trans i18nKey="FooterText" />
-        </footer>
+        {!hideFooter && (
+          <footer className="page-footer">
+            <p className="page-footer-text">
+              <Trans i18nKey="FooterText" />
+            </p>
+          </footer>
+        )}
       </div>
     </Loader>
   );

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/common/helpers/_size.scss

@@ -14,6 +14,9 @@
 .w-300 {
   width: 300px !important;
 }
+.w-600 {
+  width: 600px !important;
+}
 
 .full-height {
   height: 100% !important;

package/src/styles/components/_accordions.scss

@@ -44,4 +44,7 @@
     height: 12px;
     width: 14px;
   }
+  .iui-accordion-content {
+    padding: 8px 24px 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/_page.scss

@@ -32,14 +32,6 @@
   max-height: calc(100vh - var(--header-height));
 }
 
-.page-content {
-  display: flex;
-  flex-direction: column;
-  padding: 1.5rem 1.5rem 1rem 1.5rem;
-  flex: 1;
-  overflow-y: auto;
-}
-
 .page-header {
   display: flex;
   justify-content: space-between;
@@ -57,9 +49,50 @@
   }
 }
 
+.page-content {
+  display: flex;
+  flex-direction: column;
+  padding: 1.5rem 1.5rem 1rem 1.5rem;
+  flex: 1;
+  overflow-y: auto;
+}
+.scrollable-content {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  overflow-y: auto;
+  margin-right: -1.5rem;
+  padding-right: 1.5rem;
+  padding-bottom: 1rem;
+}
+
 .page-footer {
-  text-align: center;
-  padding: 16px;
-  font-size: 12px;
-  white-space: pre-line;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  padding: 16px 24px;
+  margin: 0 -1.5rem -1rem;
+  &.footer-actions {
+    box-shadow: var(--container-shadow);
+    z-index: 2;
+  }
+  .page-footer-text {
+    text-align: center;
+    font-size: 12px;
+    white-space: pre-line;
+  }
+}
+
+.page-footer-text {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  padding: 16px 24px;
+  .page-footer-text {
+    text-align: center;
+    font-size: 12px;
+    white-space: pre-line;
+  }
 }

package/src/styles/components/_table.scss

@@ -94,13 +94,14 @@ table {
   }
   .clickable-cell:hover {
     background-color: var(--primary-100) !important;
+    cursor: pointer;
   }
   // Item Actions
   .table-item-actions {
     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/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) : []),
+  ]);
+};