@inceptionbg/iui 2.0.20 → 2.0.21

package/src/components/Inputs/Select2/Select.tsx

@@ -0,0 +1,258 @@
+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

@@ -0,0 +1,42 @@
+.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;
+  }
+}

package/src/components/Tooltip/Tooltip.tsx

@@ -103,31 +103,98 @@ 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 + 16);
-    const top = Math.floor(containerRect.top - tooltipRect.height - 16);
-    const leftCenter = Math.floor(
+    const bottom = Math.floor(containerRect.bottom + margin);
+    const top = Math.floor(containerRect.top - tooltipRect.height - margin);
+    let 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') : '');
 
-    targetEl.style.top = `${
-      position === 'bottom' ? (reverse ? top : bottom) : reverse ? bottom : top
-    }px`;
+    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.left = `${leftCenter}px`;
   } else if (position === 'right') {
-    targetEl.style.top =
-      Math.floor(containerRect.top + containerRect.height / 2 - tooltipRect.height / 2) +
-      'px';
-    targetEl.style.left = Math.floor(containerRect.right + 16) + 'px';
+    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`;
   } else if (position === 'left') {
-    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';
+    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`;
   }
 };

package/src/components/Wrappers/FormWrapper.tsx

@@ -61,16 +61,18 @@ export const FormWrapper: FC<IFormWrapper> = ({
                     variant={e.variant}
                     color={e.color}
                     onClick={e.onClick}
+                    type="button"
                   />
                 )
             )}
             {!noAccess && (
               <Button
                 label={submitButton.label ?? t('Save')}
-                icon={submitButton.icon}
+                // icon={submitButton.icon}
                 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/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/_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,6 +94,7 @@ table {
   }
   .clickable-cell:hover {
     background-color: var(--primary-100) !important;
+    cursor: pointer;
   }
   // Item Actions
   .table-item-actions {