@inceptionbg/iui 2.0.35 → 2.0.36

package/package.json

@@ -1,8 +1,11 @@
 {
   "name": "@inceptionbg/iui",
-  "version": "2.0.35",
+  "version": "2.0.36",
   "description": "UI components, elements & utils for Inception ecosystem",
   "type": "module",
+  "files": [
+    "dist"
+  ],
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {

package/idea/GridTable/GridTable.tsx

@@ -1,119 +0,0 @@
-import './gridTable.scss';
-
-import type { FC } from 'react';
-import clsx from 'clsx';
-import {
-  TableProvider,
-  useTableContext,
-} from '../../src/components/Table/contexts/TableContext';
-import { useLocalTableSelect } from '../../src/components/Table/hooks/localHooks/useLocalTableSelect';
-import { useLocalTableColumns } from '../../src/components/Table/hooks/localHooks/useLocalTableColumns';
-import type { ITable } from '../../src/types/ITable';
-import { TableFooter } from '../../src/components/Table/components/footer/TableFooter';
-import { useLocalTablePagination } from '../../src/components/Table/hooks/localHooks/useLocalTablePagination';
-
-export const Table: FC = () => {
-  const { columns, data, footer, maxHeight } = useTableContext();
-
-  const colCount = columns?.length;
-
-  const localPagination = useLocalTablePagination({
-    defaultLimit: footer?.customPagination?.defaultLimit,
-  });
-  const pagination = footer?.pagination ?? localPagination;
-  const totalRows = footer?.totalRows ?? data.length;
-  const noTotalRows = footer?.totalRows === undefined;
-
-  return (
-    !!colCount && (
-      <div className="iui-table">
-        <div className="table-wrapper" style={{ maxHeight }}>
-          <div
-            className="table-grid"
-            style={{
-              gridTemplateColumns: `repeat(${colCount}, auto)`,
-            }}
-          >
-            <div className="header-row">
-              {columns?.map((col, colIndex) => (
-                <div
-                  key={col.id}
-                  className={clsx(
-                    `header cell justify-${col.align || 'left'}`,
-                    col.color,
-                    {
-                      'last-col': colCount === colIndex + 1,
-                    }
-                  )}
-                >
-                  {col.label}
-                </div>
-              ))}
-            </div>
-            <div className="body">
-              {data?.map((row, rowIndex) =>
-                columns?.map((col, colIndex) => (
-                  <div
-                    key={row.uuid + col.id}
-                    className={clsx(`cell justify-${col.align || 'left'}`, col.color, {
-                      'last-row': data.length === rowIndex + 1,
-                      'last-col': colCount === colIndex + 1,
-                    })}
-                  >
-                    {row.cells[col.id as keyof typeof row.cells]?.value}
-                  </div>
-                ))
-              )}
-            </div>
-          </div>
-        </div>
-        {footer && (!!data.length || (noTotalRows && pagination.offset > 0)) && (
-          <TableFooter
-            pagination={pagination}
-            totalRows={totalRows}
-            noTotalRows={noTotalRows}
-            customLimit={footer.customPagination?.customLimit}
-            footerAction={footer.footerAction}
-            dataLength={data.length}
-          />
-        )}
-      </div>
-    )
-  );
-};
-
-export const GridTable: FC<ITable> = ({
-  columns: initialColumns,
-  //   setColumns,
-  //   withColumnsSearch,
-  //   customHeader,
-  data,
-  //   sumRows,
-  //   isLoading,
-
-  //   headerWrap,
-  //   selectedRowUuid,
-  rowSelect,
-  //   filterData,
-  //   sortData,
-  //   printData,
-  //   customPrintData,
-  //   templates,
-  //   additionsalOptions,
-  //   footer,
-  //   className,
-  //   rowHeight = 'm',
-  //   maxHeight,
-  //   editable,
-  //   keyboard,
-  ...props
-}) => {
-  const { selectColumn } = useLocalTableSelect({ data, rowSelect });
-  const { columns, setColumns } = useLocalTableColumns({ initialColumns, selectColumn });
-
-  return (
-    <TableProvider columns={columns} setColumns={setColumns} data={data} {...props}>
-      <Table />
-    </TableProvider>
-  );
-};

package/idea/GridTable/gridTable.scss

@@ -1,42 +0,0 @@
-.table-wrapper {
-  width: 100%;
-  overflow: auto;
-  border: 1px solid #ccc;
-  border-radius: 8px;
-  position: relative;
-}
-
-.table-grid {
-  display: grid;
-  grid-template-rows: auto 1fr;
-}
-
-.header-row,
-.body {
-  display: contents;
-}
-
-.cell {
-  display: flex;
-  align-items: center;
-  padding: 10px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  min-width: 100px;
-  &.secondary {
-    background-color: var(--neutral-100);
-  }
-  &.header {
-    background-color: var(--primary-100);
-    border-bottom: var(--border);
-    position: sticky;
-    top: 0;
-  }
-  &:not(.last-col) {
-    border-right: var(--border);
-  }
-  &:not(.last-row) {
-    border-bottom: var(--border);
-  }
-}

package/idea/Menu/Menu.tsx

@@ -1,121 +0,0 @@
-import '@oddbird/popover-polyfill';
-import clsx from 'clsx';
-import type {
-  ReactNode,
-  RefObject} from 'react';
-import {
-  forwardRef,
-  useEffect,
-  useImperativeHandle,
-  useRef,
-  useState,
-} from 'react';
-import type { IMenuItem} from './MenuItem';
-import { MenuItem } from './MenuItem';
-
-export type MenuPlacement = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
-
-interface Props {
-  id: string;
-  renderButton: (ref: RefObject<any>) => ReactNode;
-  items?: IMenuItem[];
-  placement?: MenuPlacement;
-  size?: 's' | 'm' | 'l';
-  className?: string;
-  classNameItem?: string;
-  children?: ReactNode;
-}
-
-export interface MenuHandle {
-  isOpen: boolean;
-  handleOpen: () => void;
-  handleClose: () => void;
-}
-
-export const Menu = forwardRef<MenuHandle, Props>(
-  (
-    {
-      id,
-      renderButton,
-      items,
-      placement = 'bottom-left',
-      size,
-      className,
-      classNameItem,
-      children,
-    },
-    ref
-  ) => {
-    const buttonRef = useRef<Element>(null);
-    const popoverRef = useRef<HTMLDivElement>(null);
-    const [isOpen, setIsOpen] = useState(false);
-
-    // Anchor button setup
-    useEffect(() => {
-      if (buttonRef.current) {
-        buttonRef.current.setAttribute('popovertarget', id);
-        buttonRef.current.setAttribute('anchor-name', `--${id}`);
-      }
-    }, [id]);
-
-    // Sync open/close state based on native popover behavior
-    useEffect(() => {
-      const popover = popoverRef.current;
-      if (!popover) return;
-
-      const handleToggle = () => {
-        setIsOpen(popover.matches(':open'));
-      };
-
-      popover.addEventListener('toggle', handleToggle);
-      return () => {
-        popover.removeEventListener('toggle', handleToggle);
-      };
-    }, []);
-
-    // Expose public API via ref
-    useImperativeHandle(
-      ref,
-      () => ({
-        isOpen,
-        handleOpen: () => popoverRef.current?.showPopover?.(),
-        handleClose: () => popoverRef.current?.hidePopover?.(),
-      }),
-      [isOpen]
-    );
-
-    return (
-      <>
-        {renderButton(buttonRef)}
-        <div
-          ref={popoverRef}
-          role="menu"
-          popover="auto"
-          className={clsx('iui-menu', size, placement, className)}
-          id={id}
-        >
-          {!!items?.length && (
-            <div>
-              {items.map(item => (
-                <MenuItem
-                  key={item.label}
-                  {...item}
-                  className={classNameItem}
-                  onClick={e => {
-                    item.onClick?.(e);
-                    if (!item.keepOpen) {
-                      popoverRef.current?.hidePopover?.();
-                    }
-                  }}
-                />
-              ))}
-            </div>
-          )}
-          {children}
-        </div>
-      </>
-    );
-  }
-);
-
-Menu.displayName = 'Menu';

package/idea/Menu/MenuItem.tsx

@@ -1,75 +0,0 @@
-import type { IconDefinition, RotateProp } from '@fortawesome/fontawesome-svg-core';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import clsx from 'clsx';
-import type { MouseEventHandler, ReactNode} from 'react';
-import { forwardRef } from 'react';
-import { ConditionalWrapper } from '../Wrappers/ConditionalWrapper';
-import { Link } from 'react-router';
-import { NotificationBadge } from '../Badge/NotificationBadge';
-
-export interface IMenuItem {
-  label: string;
-  icon?: IconDefinition;
-  iconRotation?: RotateProp;
-  onClick?: MouseEventHandler<HTMLDivElement>;
-  to?: string;
-  badge?: number;
-  disabled?: boolean;
-  hidden?: boolean;
-  withDevider?: boolean;
-  keepOpen?: boolean;
-  className?: string;
-  children?: ReactNode;
-}
-export const MenuItem = forwardRef<HTMLDivElement, IMenuItem>(
-  (
-    {
-      label,
-      icon,
-      iconRotation,
-      onClick,
-      to,
-      badge,
-      disabled,
-      hidden,
-      withDevider,
-      className,
-      children,
-    },
-    ref
-  ) =>
-    hidden ? null : (
-      <div ref={ref}>
-        <ConditionalWrapper
-          key={label}
-          condition={!disabled && !!to}
-          wrapper={children => <Link to={to!}>{children}</Link>}
-        >
-          <div
-            // className="flex align-center gap-1"
-            className={clsx(className, {
-              'iui-menu-item': !className,
-              clickable: !!onClick || !!to,
-              disabled,
-              'with-devider': withDevider,
-            })}
-            onClick={disabled ? undefined : onClick}
-          >
-            {icon && (
-              <div className="menu-item-icon">
-                <FontAwesomeIcon icon={icon} rotation={iconRotation} />
-              </div>
-            )}
-            {!!badge ? (
-              <NotificationBadge number={badge} small className="menu-item-badge">
-                <p>{label}</p>
-              </NotificationBadge>
-            ) : (
-              <p className="menu-item-label">{label}</p>
-            )}
-            {children}
-          </div>
-        </ConditionalWrapper>
-      </div>
-    )
-);

package/idea/Menu/hooks/useMenuControl.ts

@@ -1,13 +0,0 @@
-import { useRef } from 'react';
-import type { MenuHandle } from '../Menu';
-
-export const useMenuControl = () => {
-  const menuRef = useRef<MenuHandle>(null);
-
-  return {
-    menuRef,
-    isOpen: menuRef.current?.isOpen,
-    onOpen: () => menuRef.current?.handleOpen?.(),
-    onClose: () => menuRef.current?.handleClose?.(),
-  };
-};

package/idea/Menu.tsx

@@ -1,133 +0,0 @@
-import clsx from 'clsx';
-import type {
-  FC,
-  ReactNode,
-  RefObject} from 'react';
-import {
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-} from 'react';
-import { createPortal } from 'react-dom';
-import { rootDir } from '../src/utils/RootDir';
-
-interface Props {
-  isOpen: boolean;
-  onClose: () => void;
-  renderButton: (ref: RefObject<any>) => ReactNode;
-  placementX?: 'left' | 'right';
-  placementY?: 'bottom' | 'top' | 'auto';
-  size?: 's' | 'm' | 'l';
-  className?: string;
-  children?: ReactNode;
-}
-
-interface Offsets {
-  offsetTop: number;
-  offsetLeft: number;
-}
-
-export const Menu: FC<Props> = ({
-  isOpen,
-  onClose,
-  renderButton,
-  placementX,
-  placementY = 'auto',
-  size,
-  className,
-  children,
-}) => {
-  const menuRef = useRef<HTMLDivElement>(null);
-  const portalRef = useRef<HTMLDivElement>(null);
-  const containerRef = useRef<Element>(null);
-  const [offsets, setOffsets] = useState<Offsets>({
-    offsetLeft: 0,
-    offsetTop: 0,
-  });
-  const [maxHeight, setMaxHeight] = useState<number>();
-
-  const recalculatePosition = useCallback(() => {
-    if (containerRef.current && menuRef.current) {
-      const containerRect = containerRef.current.getBoundingClientRect();
-      const menuRect = menuRef.current.getBoundingClientRect();
-
-      let offsetTop = containerRect.bottom + 5;
-      // let offsetTop = containerRect.bottom + document.documentElement.scrollTop + 5;
-
-      const offsetLeft =
-        containerRect.left +
-        (placementX === 'right' ? containerRect.width - menuRect.width : 0);
-      // + document.documentElement.scrollLeft;
-
-      if (placementY === 'bottom') {
-        setMaxHeight(window.innerHeight - containerRect.bottom - 20);
-      }
-
-      if (placementY === 'top') {
-        setMaxHeight(
-          window.innerHeight - containerRect.top + 40
-          // - 2 * document.documentElement.scrollTop
-        );
-      }
-
-      // check for space on the bottom
-      if (
-        (placementY === 'auto' && offsetTop + menuRect.height > window.innerHeight) ||
-        placementY === 'top'
-      ) {
-        offsetTop = containerRect.top - menuRect.height - 5; //+ document.documentElement.scrollTop
-      }
-
-      setOffsets({ offsetTop, offsetLeft });
-    }
-  }, [menuRef, containerRef, placementX, placementY]);
-
-  useEffect(() => {
-    isOpen
-      ? window.addEventListener('resize', recalculatePosition)
-      : window.removeEventListener('resize', recalculatePosition);
-    // Disable scroll & fix page resize on menu open
-    document.body.style.marginRight =
-      isOpen && window.innerWidth > document.body.clientWidth ? '19px' : '';
-    // document.body.style.overflow = isOpen ? 'hidden' : '';
-
-    recalculatePosition();
-    return () => {
-      window.removeEventListener('resize', recalculatePosition);
-    };
-  }, [isOpen, recalculatePosition]);
-
-  useEffect(() => {
-    const portal = portalRef.current;
-    const handleClick = (ev: MouseEvent) => ev.target === portal && onClose();
-    isOpen
-      ? portal?.addEventListener('click', handleClick)
-      : portal?.removeEventListener('click', handleClick);
-    return () => portal?.removeEventListener('click', handleClick);
-  }, [isOpen, onClose]);
-
-  return (
-    <>
-      {renderButton(containerRef)}
-      {isOpen
-        ? createPortal(
-            <div ref={portalRef} className="portal-background">
-              <div
-                ref={menuRef}
-                className={clsx('iui-menu', className, size)}
-                style={{
-                  top: offsets.offsetTop + 'px',
-                  left: offsets.offsetLeft + 'px',
-                  maxHeight: maxHeight || undefined,
-                }}
-              >
-                {children}
-              </div>
-            </div>,
-            rootDir
-          )
-        : null}
-    </>
-  );
-};