@inceptionbg/iui 2.0.19 → 2.0.20

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

@@ -67,7 +67,7 @@ export const FormWrapper: FC<IFormWrapper> = ({
             {!noAccess && (
               <Button
                 label={submitButton.label ?? t('Save')}
-                // icon={submitButton.icon}
+                icon={submitButton.icon}
                 disabled={isLoading || submitButton.disabled}
                 variant={submitButton.variant}
                 color={submitButton.color}

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/_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/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/components/Inputs/Select2/Select.tsx

@@ -1,258 +0,0 @@
-import './select.scss';
-
-import { useState, useRef, useEffect, ChangeEvent, FC, UIEvent } from 'react';
-import clsx from 'clsx';
-import { InputWrapper } from '../InputWrapper';
-import { createPortal } from 'react-dom';
-import { rootDir } from '../../../utils/rootDir';
-import { useMenuPosition } from '../../Menu/hooks/useMenuPosition';
-import { IMenuPlacement } from '../../../types/IMenu';
-
-export interface OptionType {
-  label: string;
-  value: any;
-}
-
-// interface LoadOptionsParams {
-//   inputValue: string;
-//   loadedOptions: OptionType[];
-//   page: number;
-// }
-
-interface LoadOptionsResponse {
-  options: OptionType[];
-  hasMore: boolean;
-}
-
-interface CustomSelectProps {
-  label: string;
-  value?: any;
-  setValue: (option: OptionType | null) => void;
-  required?: boolean;
-  disabled?: boolean;
-  isMulti?: boolean;
-  isAsync?: boolean;
-  isCreatable?: boolean;
-  options?: OptionType[];
-  placeholder?: string;
-  loadOptions?: (
-    inputValue: string,
-    loadedOptions: OptionType[],
-    params: { page: number }
-  ) => Promise<LoadOptionsResponse>;
-  onCreateOption?: (inputValue: string) => Promise<OptionType>;
-  isClearable: boolean;
-  onClearInput?: () => void;
-  helperText?: string;
-  errorText?: string;
-  error?: boolean;
-  menuPlacement?: IMenuPlacement;
-  className?: string;
-  // minWidth?: number;
-}
-
-export const Select: FC<CustomSelectProps> = ({
-  label,
-  value,
-  setValue,
-  onCreateOption,
-  required,
-  disabled,
-  options = [],
-  loadOptions,
-  placeholder = 'Select...',
-  isMulti,
-  isAsync = false,
-  isCreatable = false,
-  isClearable = true,
-  onClearInput,
-  helperText,
-  errorText,
-  error,
-  menuPlacement = 'bottom-left',
-  className,
-  // minWidth,
-}) => {
-  const [inputValue, setInputValue] = useState<string | null>(null);
-  const [dropdownVisible, setDropdownVisible] = useState(false);
-  const [filteredOptions, setFilteredOptions] = useState<OptionType[]>([]);
-  const [page, setPage] = useState(0);
-  const [index, setIndex] = useState<number | null>(null);
-  const [hasMore, setHasMore] = useState(true);
-
-  const containerRef = useRef<HTMLDivElement>(null);
-  const dropdownRef = useRef<HTMLDivElement>(null);
-
-  const menuStyle = useMenuPosition({
-    isOpen: dropdownVisible,
-    placement: menuPlacement,
-    containerRef,
-    menuRef: dropdownRef,
-    withMinWidth: true,
-  });
-
-  useEffect(() => {
-    if (!isAsync) {
-      const filtered = inputValue
-        ? options.filter(opt =>
-            opt.label.toLowerCase().includes(inputValue.toLowerCase())
-          )
-        : options;
-      setFilteredOptions(filtered);
-    }
-  }, [inputValue, options, isAsync]);
-
-  useEffect(() => {
-    if (isAsync && loadOptions) {
-      loadOptions(inputValue ?? '', filteredOptions, { page }).then(
-        ({ options: newOptions, hasMore }) => {
-          setFilteredOptions(prev => [...prev, ...newOptions]);
-          setHasMore(hasMore);
-        }
-      );
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [page]);
-
-  const handleOptionClick = (option: OptionType) => {
-    setValue(option);
-    setInputValue(null);
-    setTimeout(() => {
-      setIndex(null);
-      // setDropdownVisible(false);
-    });
-  };
-
-  const handleInput = (e: ChangeEvent<HTMLInputElement>) => {
-    const inputValue = e.target.value;
-    setInputValue(
-      e.target.defaultValue === value?.label
-        ? // @ts-ignore
-          (e.nativeEvent?.data ?? '')
-        : inputValue
-    );
-    // setFilteredOptions([]);
-    setPage(0);
-    if (isAsync && loadOptions) {
-      loadOptions(inputValue, [], { page: 0 }).then(({ options, hasMore }) => {
-        setFilteredOptions(options);
-        setHasMore(hasMore);
-      });
-    }
-  };
-
-  const handleScroll = (e: UIEvent<HTMLDivElement>) => {
-    const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
-    if (scrollHeight - scrollTop === clientHeight && hasMore) {
-      setPage(prev => prev + 1);
-    }
-  };
-
-  const handleCreate = async () => {
-    if (onCreateOption && inputValue?.trim()) {
-      const newOption = await onCreateOption(inputValue);
-      setFilteredOptions(prev => [newOption, ...prev]);
-      setValue(newOption);
-      setInputValue(null);
-      setDropdownVisible(false);
-    }
-  };
-
-  return (
-    <div
-      className="customSelect"
-      onFocus={() => setDropdownVisible(true)}
-      onBlur={() => {
-        setDropdownVisible(false);
-        setInputValue(null);
-      }}
-    >
-      <InputWrapper
-        label={label}
-        required={required}
-        disabled={disabled}
-        // endText={endText}
-        // endButton={endButton}
-        onClearInput={
-          isClearable && value
-            ? () => {
-                setValue(null);
-                setInputValue('');
-                // setSelectedOption(null);
-              }
-            : undefined
-        }
-        helperText={helperText}
-        errorText={errorText}
-        error={error}
-        inputFieldRef={containerRef}
-        className={className}
-      >
-        <input
-          value={inputValue ?? value?.label ?? ''}
-          onChange={handleInput}
-          required={required}
-          disabled={disabled}
-          // onFocus={e => e.currentTarget.select()}
-          //   autoFocus={autoFocus}
-          placeholder={value?.label || placeholder}
-          onKeyDown={e => {
-            if (e.key === 'ArrowUp') {
-              e.preventDefault();
-              if (index === null || index === 0) {
-                setIndex(filteredOptions.length - 1);
-              } else {
-                setIndex(prev => prev! - 1);
-              }
-            } else if (e.key === 'ArrowDown') {
-              e.preventDefault();
-              if (index === null || index === filteredOptions.length - 1) {
-                setIndex(0);
-              } else {
-                setIndex(prev => prev! + 1);
-                dropdownRef.current?.scrollTo({ top: 20 * ((index ?? 0) + 1) });
-              }
-            } else if (e.key === 'Enter' && index !== null) {
-              e.preventDefault();
-              e.currentTarget.blur();
-              handleOptionClick(filteredOptions[index]);
-            } else if (e.key === 'Escape') {
-              e.preventDefault();
-              e.currentTarget.blur();
-            }
-          }}
-        />
-      </InputWrapper>
-
-      {dropdownVisible
-        ? createPortal(
-            <div
-              ref={dropdownRef}
-              className="select-dropdown"
-              onScroll={handleScroll}
-              style={menuStyle}
-            >
-              {filteredOptions.map((option, i) => (
-                <div
-                  key={i}
-                  className={clsx('option', { hover: index === i })}
-                  onMouseDown={() => handleOptionClick(option)}
-                >
-                  {option.label}
-                </div>
-              ))}
-              {!filteredOptions.length && <div className="option">No options</div>}
-              {isCreatable &&
-                inputValue &&
-                !filteredOptions.some(opt => opt.label === inputValue) && (
-                  <div className="option createOption" onClick={handleCreate}>
-                    {`Create ${inputValue}`}
-                  </div>
-                )}
-            </div>,
-            rootDir
-          )
-        : null}
-    </div>
-  );
-};

package/src/components/Inputs/Select2/select.scss

@@ -1,42 +0,0 @@
-.customSelect {
-  position: relative;
-  width: 300px;
-  font-family: sans-serif;
-
-  .inputWrapper {
-    input {
-      width: 100%;
-      padding: 8px 12px;
-      border: 1px solid #ccc;
-      border-radius: 4px;
-      font-size: 14px;
-    }
-  }
-}
-
-.select-dropdown {
-  position: absolute;
-  z-index: 1000;
-  // width: 100%;
-  min-width: 200px;
-  max-height: 200px;
-  overflow-y: auto;
-  background: #fff;
-  border: var(--border);
-  border-radius: 8px;
-  // border-radius: 0 0 8px 8px;
-  margin-top: 2px;
-  .option {
-    padding: 8px 12px;
-    cursor: pointer;
-
-    &.hover,
-    &:hover {
-      background-color: #f5f5f5;
-    }
-  }
-  .createOption {
-    font-weight: bold;
-    color: #007bff;
-  }
-}