@cccsaurora/howler-ui 2.14.0-dev.268 → 2.14.0-dev.271

package/components/elements/addons/lists/TuiList.tsx

@@ -1,31 +0,0 @@
-import AppListEmpty from '@cccsaurora/howler-ui/commons/components/display/AppListEmpty';
-import { memo } from 'react';
-import type { TuiListItemOnSelect, TuiListItemRenderer } from '.';
-import TuiListBase from './TuiListBase';
-import TuiListElement from './TuiListElement';
-
-type TuiListProps<T> = {
-  keyboard?: boolean;
-  children: TuiListItemRenderer<T>;
-  onSelection?: TuiListItemOnSelect<T>;
-};
-
-const TuiList = <T,>({ keyboard, children, onSelection }: TuiListProps<T>) => {
-  return (
-    <TuiListBase keyboard={keyboard} onSelect={onSelection}>
-      {(items, onSelect) =>
-        items && items.length > 0 ? (
-          items.map((element, i) => (
-            <TuiListElement key={element.id} position={i} item={element} onSelect={onSelect}>
-              {children}
-            </TuiListElement>
-          ))
-        ) : (
-          <AppListEmpty />
-        )
-      }
-    </TuiListBase>
-  );
-};
-
-export default memo(TuiList);

package/components/elements/addons/lists/TuiListBase.tsx

@@ -1,98 +0,0 @@
-import { emphasize, styled } from '@mui/material';
-import { useAppBar, useAppBarHeight, useAppLayout } from '@cccsaurora/howler-ui/commons/components/app/hooks';
-import useTuiListKeyboard from '@cccsaurora/howler-ui/components/elements/addons/lists/hooks/useTuiListKeyboard';
-import { memo, useCallback, useContext, useEffect, useLayoutEffect, useRef, type ReactNode } from 'react';
-import type { TuiListItem, TuiListItemOnSelect } from '.';
-import {
-  TuiListItemsContext,
-  TuiListMethodContext,
-  type TuiListItemsState,
-  type TuiListMethodsState
-} from './TuiListProvider';
-
-const TuiListBaseRoot = styled('div')(({ theme }) => ({
-  outline: 'none',
-  backgroundColor: theme.palette.background.default,
-
-  '.elementFocus': {
-    backgroundColor: emphasize(theme.palette.background.default, 0.02),
-    '& .actions': {
-      display: 'flex',
-      backgroundColor: emphasize(theme.palette.background.default, 0.02)
-    }
-  },
-
-  '.elementHover': {
-    '&:hover': {
-      cursor: 'pointer',
-      backgroundColor: emphasize(theme.palette.background.default, 0.03)
-    },
-    '&:hover .actions': {
-      display: 'flex',
-      backgroundColor: emphasize(theme.palette.background.default, 0.03)
-    }
-  },
-
-  '.elementSelected': {
-    backgroundColor: emphasize(theme.palette.background.default, 0.04),
-    '& .actions': {
-      display: 'flex',
-      backgroundColor: emphasize(theme.palette.background.default, 0.04)
-    }
-  }
-}));
-
-export type TuiListItemsRenderer<T> = (items: TuiListItem<T>[], onSelect: TuiListItemOnSelect<T>) => ReactNode;
-
-type TuiListBaseProps<T> = {
-  keyboard?: boolean;
-  onSelect: TuiListItemOnSelect<T>;
-  children: TuiListItemsRenderer<T>;
-};
-
-const TuiListBase = <T,>({ keyboard = false, onSelect, children }: TuiListBaseProps<T>) => {
-  const listEl = useRef<HTMLDivElement>();
-  const appbar = useAppBar();
-  const appbarHeight = useAppBarHeight();
-  const layout = useAppLayout();
-  const { items } = useContext<TuiListItemsState<T>>(TuiListItemsContext);
-  const { select } = useContext<TuiListMethodsState<T>>(TuiListMethodContext);
-
-  const onItemSelect = useCallback(
-    (selection: TuiListItem<T>, index: number) => {
-      const newItem = select(selection, index);
-      if (onSelect) {
-        onSelect(newItem, index);
-      }
-    },
-    [select, onSelect]
-  );
-
-  const { register } = useTuiListKeyboard(onItemSelect);
-
-  useEffect(() => {
-    if (keyboard) {
-      return register(listEl.current);
-    }
-  }, [keyboard, register]);
-
-  useLayoutEffect(() => {
-    if (keyboard) {
-      listEl.current.focus({ preventScroll: true });
-    }
-  }, [keyboard]);
-
-  return (
-    <TuiListBaseRoot
-      ref={listEl}
-      tabIndex={-1}
-      data-tuiappbar-height={appbarHeight}
-      data-tuilayout={layout.current}
-      data-tuiappbar-autohide={appbar.autoHide}
-    >
-      {children(items, onItemSelect)}
-    </TuiListBaseRoot>
-  );
-};
-
-export default memo(TuiListBase);

package/components/elements/addons/lists/TuiListElement.tsx

@@ -1,51 +0,0 @@
-import { memo, useCallback, useRef } from 'react';
-import { type TuiListItem, type TuiListItemOnSelect, type TuiListItemRenderer } from '.';
-import VSBoxElement from '../layout/vsbox/VSBoxElement';
-
-type TuiListElementProps<T> = {
-  position: number;
-  item: TuiListItem<T>;
-  onSelect?: TuiListItemOnSelect<T>;
-  children: TuiListItemRenderer<T>;
-};
-
-const TuiListElement = <T,>({ position, item, onSelect: onClick, children }: TuiListElementProps<T>) => {
-  const elementEl = useRef<HTMLDivElement>();
-
-  const onItemClick = useCallback(
-    _event => {
-      if (onClick) {
-        onClick(item, position);
-      }
-    },
-    [onClick, item, position]
-  );
-
-  const classRenderer = useCallback(() => {
-    const _classes = ['elementHover'];
-    if (item.cursor) {
-      _classes.push('elementFocus');
-    }
-    if (item.selected) {
-      _classes.push('elementSelected');
-    }
-    return _classes.join(' ');
-  }, [item.cursor, item.selected]);
-
-  return (
-    <VSBoxElement focus={!!item.cursor}>
-      <div
-        ref={elementEl}
-        data-tuilist-index={position}
-        data-tuilist-id={item.id}
-        data-tuilist-focus={!!item.cursor}
-        data-tuilist-selected={!!item.selected}
-        onClick={onItemClick}
-      >
-        {children({ item, position }, classRenderer)}
-      </div>
-    </VSBoxElement>
-  );
-};
-
-export default memo(TuiListElement);

package/components/elements/addons/lists/TuiListMenu.tsx

@@ -1,61 +0,0 @@
-import { styled } from '@mui/material';
-import type { CSSProperties, ReactElement } from 'react';
-import { memo } from 'react';
-
-const MY_PROPS = ['permanent', 'placement'];
-
-const PLACEMENTS = {
-  right: { top: 0, right: 0, bottom: 0, left: null },
-  left: { top: 0, right: null, bottom: 0, left: 0 },
-  'top-left': { top: 0, right: null, bottom: null, left: 0 },
-  'top-right': { top: 0, right: 0, bottom: null, left: null },
-  'bottom-left': { top: null, right: null, bottom: 0, left: 0 },
-  'bottom-right': { top: null, right: 0, bottom: 0, left: null }
-};
-
-type TuiListMenuProps = {
-  permanent?: boolean;
-  placement?: TuiListMenuPlacement;
-  style?: CSSProperties;
-  className?: string;
-  children: ReactElement | ReactElement[];
-};
-
-export type TuiListMenuPlacement = keyof typeof PLACEMENTS;
-
-const TuiListMenuRoot = styled('div', { shouldForwardProp: prop => !MY_PROPS.includes(prop as string) })<{
-  permanent: boolean;
-  placement: TuiListMenuPlacement;
-}>(({ theme, permanent, placement }) => {
-  const position = PLACEMENTS[placement];
-  return {
-    ...(position || {}),
-    zIndex: position ? 100 : null,
-    display: permanent ? 'flex' : 'none',
-    position: position ? 'absolute' : 'inherit',
-    alignItems: 'center',
-    margin: 'auto',
-    backgroundColor: theme.palette.background.default,
-    '& button': {
-      marginRight: theme.spacing(1),
-      boxShadow: theme.shadows[4]
-    }
-  };
-});
-
-// TODO: placement property (top-left, top-right, bottom-left, bottom-right)
-const TuiListMenu = ({ style, className, permanent, placement, children }: TuiListMenuProps) => {
-  return (
-    <TuiListMenuRoot
-      permanent={permanent}
-      placement={placement}
-      style={style}
-      className={`actions ${className || ''}`}
-      onClick={event => event.stopPropagation()}
-    >
-      {children}
-    </TuiListMenuRoot>
-  );
-};
-
-export default memo(TuiListMenu);

package/components/elements/addons/lists/TuiListProvider.tsx

@@ -1,162 +0,0 @@
-import type { ReactNode } from 'react';
-import { createContext, useCallback, useMemo, useState } from 'react';
-import type { TuiListItem } from '.';
-
-export type TuiListMethodsState<T> = {
-  load: (items: TuiListItem<T>[]) => void;
-  move: (index: number) => void;
-  select: (item: TuiListItem<T>, index: number) => TuiListItem<T>;
-  replace: (item: TuiListItem<T>, newItem: TuiListItem<T>) => void;
-  replaceById: (item: TuiListItem<T>, newItem: TuiListItem<T>) => void;
-  remove: (id: string) => void;
-};
-
-export type TuiListItemsState<T> = {
-  items: TuiListItem<T>[];
-  moveNext: () => void;
-  movePrevious: () => void;
-};
-
-const DEFAULT_METHODS_STATE = {
-  load: () => null,
-  move: () => null,
-  select: () => null,
-  replace: () => null,
-  replaceById: () => null,
-  remove: () => null
-};
-
-const DEFAULT_ITEMS_STATE = {
-  size: 0,
-  items: [],
-  movePrevious: () => null,
-  moveNext: () => null
-};
-
-export const TuiListMethodContext = createContext<TuiListMethodsState<any>>(DEFAULT_METHODS_STATE);
-
-export const TuiListItemsContext = createContext<TuiListItemsState<any>>(DEFAULT_ITEMS_STATE);
-
-type TuiListProviderProps = {
-  children: ReactNode;
-};
-
-const TuiListProvider = <T,>({ children }: TuiListProviderProps) => {
-  const [items, setItems] = useState<TuiListItem<T>[]>([]);
-
-  const load = useCallback((_items: TuiListItem<T>[]) => {
-    setItems(current => {
-      return _items.map(i => {
-        const previous = current.find(_i => i.id === _i.id);
-        if (previous) {
-          return {
-            ...i,
-            cursor: i.cursor === undefined ? previous.cursor : i.cursor,
-            selected: i.selected === undefined ? previous.selected : i.selected,
-            details: i.details === undefined ? previous.details : i.details
-          };
-        }
-        return i;
-      });
-    });
-  }, []);
-
-  const select = useCallback((item: TuiListItem<T>, index: number) => {
-    const newItem = { ...item, cursor: true, selected: item ? !item.selected : true };
-    setItems(current => {
-      return current.map((_item, _index) => {
-        if (index === _index) {
-          return newItem;
-        } else if (_item.selected || _item.cursor) {
-          return { ..._item, cursor: false, selected: false };
-        }
-        return _item;
-      });
-    });
-    return newItem;
-  }, []);
-
-  const move = useCallback((index: number) => {
-    setItems(current => {
-      return current.map((_item, _index) => {
-        if (index === _index) {
-          return { ..._item, cursor: true };
-        } else if (_item.cursor) {
-          return { ..._item, cursor: false };
-        }
-        return _item;
-      });
-    });
-  }, []);
-
-  const replace = useCallback((item: TuiListItem<T>, newItem: TuiListItem<T>) => {
-    setItems(current => {
-      const index = current.findIndex(i => i === item);
-      if (index > -1) {
-        current[index] = { ...current[index], ...newItem };
-      }
-      return [...current];
-    });
-  }, []);
-
-  const replaceById = useCallback((item: TuiListItem<T>, newItem: TuiListItem<T>) => {
-    setItems(current => {
-      const index = current.findIndex(i => i.id === item.id);
-      if (index > -1) {
-        current[index] = { ...current[index], ...newItem };
-      }
-      return [...current];
-    });
-  }, []);
-
-  const remove = useCallback((id: string) => {
-    setItems(current => {
-      const index = current.findIndex(i => i.id === id);
-      if (index > -1) {
-        return current.filter(i => i.id !== id);
-      }
-      return [...current];
-    });
-  }, []);
-
-  const moveNext = useCallback(() => {
-    const cursor = items.findIndex(i => !!i.cursor);
-    const next = cursor + 1 > items.length - 1 ? 0 : cursor + 1;
-    move(next);
-  }, [items, move]);
-
-  const movePrevious = useCallback(() => {
-    const cursor = items.findIndex(i => !!i.cursor);
-    const next = cursor - 1 < 0 ? items.length - 1 : cursor - 1;
-    move(next);
-  }, [items, move]);
-
-  const _items = useMemo(
-    () => ({
-      items,
-      moveNext,
-      movePrevious
-    }),
-    [items, moveNext, movePrevious]
-  );
-
-  const _functions = useMemo(
-    () => ({
-      load,
-      move,
-      select,
-      replace,
-      replaceById,
-      remove
-    }),
-    [load, select, move, replace, replaceById, remove]
-  );
-
-  return (
-    <TuiListMethodContext.Provider value={_functions}>
-      <TuiListItemsContext.Provider value={_items}>{children}</TuiListItemsContext.Provider>
-    </TuiListMethodContext.Provider>
-  );
-};
-
-export default TuiListProvider;

package/components/elements/addons/lists/hooks/useTuiListKeyboard.tsx

@@ -1,60 +0,0 @@
-import { isArrowDown, isArrowUp, isEnter } from '@cccsaurora/howler-ui/commons/components/utils/keyboard';
-import { useCallback, useContext, useMemo } from 'react';
-import Throttler from '@cccsaurora/howler-ui/utils/Throttler';
-import type { TuiListItemOnSelect } from '..';
-import { TuiListItemsContext, type TuiListItemsState } from '../TuiListProvider';
-
-const THROTTLER = new Throttler(10);
-
-const useTuiListKeyboard = <T,>(onSelect: TuiListItemOnSelect<T>) => {
-  const { items, movePrevious, moveNext } = useContext<TuiListItemsState<T>>(TuiListItemsContext);
-
-  // Keyboard[keydown] event handler.
-  const onKeyDown = useCallback(
-    (event: KeyboardEvent) => {
-      // console.log(`kd[${event.key}]`);
-      // event.preventDefault();
-
-      // going up.
-      if (isArrowUp(event.key)) {
-        event.preventDefault();
-        THROTTLER.debounce(() => movePrevious());
-      }
-
-      // going down.
-      else if (isArrowDown(event.key)) {
-        event.preventDefault();
-        THROTTLER.debounce(() => moveNext());
-      }
-
-      // select.
-      else if (isEnter(event.key)) {
-        const index = items.findIndex(i => !!i.cursor);
-        onSelect(items[index], index);
-      }
-    },
-    [items, movePrevious, moveNext, onSelect]
-  );
-
-  // Register keyboard event handler.
-  const register = useCallback(
-    (element: HTMLElement) => {
-      if (element) {
-        element.addEventListener('keydown', onKeyDown);
-      }
-      return () => {
-        element.removeEventListener('keydown', onKeyDown);
-      };
-    },
-    [onKeyDown]
-  );
-
-  return useMemo(
-    () => ({
-      register
-    }),
-    [register]
-  );
-};
-
-export default useTuiListKeyboard;

package/components/elements/addons/lists/index.tsx

@@ -1,25 +0,0 @@
-import type { ReactElement } from 'react';
-import TuiList from './TuiList';
-import TuiListElement from './TuiListElement';
-import TuiListProvider from './TuiListProvider';
-
-export type TuiListItemOnSelect<T> = (selection: TuiListItem<T>, rowIndex: number) => void;
-
-export type TuiListItem<T> = {
-  id: string | number;
-  details?: boolean;
-  cursor?: boolean;
-  selected?: boolean;
-  item: T;
-};
-
-export type TuiListItemProps<T> = {
-  item: TuiListItem<T>;
-  position: number;
-};
-
-export type TuiListMenuRenderer<T> = (props: TuiListItemProps<T>) => ReactElement | ReactElement[];
-
-export type TuiListItemRenderer<T> = (props: TuiListItemProps<T>, classRenderer: () => string) => ReactElement;
-
-export { TuiList, TuiListElement, TuiListProvider };

package/components/elements/addons/lists/table/TuiTable.tsx

@@ -1,151 +0,0 @@
-import { darken, emphasize, lighten, styled } from '@mui/material';
-import FlexPort from '@cccsaurora/howler-ui/components/elements/addons/layout/FlexPort';
-import { useEffect, useRef, useState } from 'react';
-import { useResizeDetector } from 'react-resize-detector';
-import type { TuiTableCellRenderer, TuiTableColumn, TuiTableRowDetailRenderer } from '.';
-import type { TuiListItemOnSelect, TuiListMenuRenderer } from '..';
-import TuiTableBody from './TuiTableBody';
-import TuiTableHead from './TuiTableHead';
-import TuiTableLayout from './TuiTableLayout';
-
-const TableRoot = styled('div')(({ theme }) => ({
-  flex: 1,
-
-  display: 'flex',
-
-  flexDirection: 'column',
-
-  '.tui-table-row': {
-    wordBreak: 'break-all',
-    borderBottom: '1px solid',
-    borderBottomColor:
-      theme.palette.mode === 'dark'
-        ? lighten(theme.palette.background.default, 0.05)
-        : darken(theme.palette.background.default, 0.05)
-  },
-
-  '.tui-table-cell': {
-    padding: theme.spacing(1)
-  },
-
-  '.tui-table-header': {
-    display: 'flex',
-    alignItems: 'center',
-    border: '1px dotted transparent',
-    padding: theme.spacing(1)
-  },
-
-  '.tui-table-header-active': {
-    border: '1px dotted',
-    borderColor: emphasize(theme.palette.background.default, 0.25),
-    backgroundColor: emphasize(theme.palette.background.default, 0.05)
-  },
-
-  '.tui-table-header-hover': {
-    '&:hover': {
-      cursor: 'pointer',
-      backgroundColor: emphasize(theme.palette.background.default, 0.05)
-    },
-    '&:hover .tui-table-header-menu-btn': {
-      opacity: 1
-    }
-  },
-
-  '.tui-table-header-menu': {},
-
-  '.tui-table-header-menu-btn': {
-    opacity: 0
-  },
-
-  '.tui-table-head': {
-    display: 'flex',
-    backgroundColor: theme.palette.background.default,
-    zIndex: theme.zIndex.appBar - 2
-  },
-
-  '.tui-table-divider': {
-    borderBottom: '1px solid',
-    borderBottomColor: theme.palette.divider
-  }
-}));
-
-type TuiTableProps<T> = {
-  keyboard?: boolean;
-  flexPort?: boolean;
-  headless?: boolean;
-  columns: TuiTableColumn[];
-  onRowSelect?: TuiListItemOnSelect<T>;
-  menuRenderer?: TuiListMenuRenderer<T>;
-  detailRenderer?: TuiTableRowDetailRenderer<T>;
-  children?: TuiTableCellRenderer<T>;
-};
-
-const TuiTable = <T,>({
-  keyboard,
-  flexPort,
-  headless,
-  columns,
-  onRowSelect,
-  menuRenderer,
-  detailRenderer,
-  children
-}: TuiTableProps<T>) => {
-  const { width, ref } = useResizeDetector({ handleHeight: false });
-  const { width: bodyWidth, ref: bodyRef } = useResizeDetector({ handleHeight: false });
-  const [layout, setLayout] = useState<TuiTableLayout>();
-  const widthRef = useRef<number>(width);
-
-  useEffect(() => {
-    if (!flexPort || !layout) {
-      if (width && width !== widthRef.current) {
-        setLayout(new TuiTableLayout(width, width, columns));
-      }
-      widthRef.current = width;
-    }
-  }, [flexPort, layout, width, columns]);
-
-  useEffect(() => {
-    if (flexPort && layout) {
-      if (bodyWidth && bodyWidth !== widthRef.current) {
-        setLayout(new TuiTableLayout(width, bodyWidth, columns));
-      }
-      widthRef.current = bodyWidth;
-    }
-  }, [flexPort, layout, width, bodyWidth, columns]);
-
-  return (
-    <TableRoot ref={ref} data-tuitable="true">
-      {!headless && layout && <TuiTableHead layout={layout} columns={columns} />}
-      {layout &&
-        (flexPort ? (
-          <FlexPort>
-            <div ref={bodyRef}>
-              <TuiTableBody
-                keyboard={keyboard}
-                layout={layout}
-                columns={columns}
-                onRowSelect={onRowSelect}
-                menuRenderer={menuRenderer}
-                detailRenderer={detailRenderer}
-              >
-                {children}
-              </TuiTableBody>
-            </div>
-          </FlexPort>
-        ) : (
-          <TuiTableBody
-            keyboard={keyboard}
-            layout={layout}
-            columns={columns}
-            onRowSelect={onRowSelect}
-            menuRenderer={menuRenderer}
-            detailRenderer={detailRenderer}
-          >
-            {children}
-          </TuiTableBody>
-        ))}
-    </TableRoot>
-  );
-};
-
-export default TuiTable;