@addev-be/ui 0.3.5 → 0.3.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@addev-be/ui",
-  "version": "0.3.5",
+  "version": "0.3.6",
   "type": "module",
   "scripts": {
     "watch": "tsc -b --watch",

package/src/components/data/DataGrid/DataGridRowTemplate.tsx

@@ -0,0 +1,69 @@
+import * as styles from './styles';
+
+import { DataGridCell } from './DataGridCell';
+import { DataGridRowTemplateProps } from './types';
+import { useContext } from 'react';
+
+export const DataGridRowTemplate = <R,>({
+  row,
+  rowIndex,
+  context,
+}: DataGridRowTemplateProps<R>) => {
+  const { visibleColumns, rowKeyGetter, toggleSelection, ...props } =
+    useContext(context);
+
+  if (!row) {
+    return (
+      <styles.DataGridRow key={`loading-row-${rowIndex}`}>
+        {!!props.selectable && (
+          <styles.LoadingCell className="animate-pulse">
+            <div />
+          </styles.LoadingCell>
+        )}
+        {visibleColumns.map((_, index) => (
+          <styles.LoadingCell
+            className="animate-pulse"
+            key={`loading-${rowIndex}-${index}`}
+          >
+            <div />
+          </styles.LoadingCell>
+        ))}
+      </styles.DataGridRow>
+    );
+  }
+  const key = rowKeyGetter(row);
+  const selected = props.selectedKeys.includes(key);
+  const { className, style } = props.rowClassNameGetter?.(row) ?? {
+    className: '',
+    style: undefined,
+  };
+  return (
+    <styles.DataGridRow key={key}>
+      {!!props.selectable && (
+        <styles.SelectionCell
+          key="__select_checkbox__"
+          onClick={() => toggleSelection(key)}
+        >
+          <input
+            type="checkbox"
+            value={key as string}
+            checked={selected}
+            readOnly
+          />
+        </styles.SelectionCell>
+      )}
+      {visibleColumns.map(([key, col], index) => (
+        <DataGridCell
+          key={`loading-${rowIndex}-${index}`}
+          {...(index === 0 ? { className, style } : {})}
+          row={row}
+          rowIndex={rowIndex}
+          column={col}
+          columnIndex={index}
+          context={context}
+          columnKey={key}
+        />
+      ))}
+    </styles.DataGridRow>
+  );
+};

package/src/components/data/DataGrid/VirtualScroller.tsx

@@ -1,12 +1,11 @@
 import * as styles from './styles';
 
-import { ReactNode, useContext } from 'react';
-
-import { DataGridContext } from './types';
+import { DataGridContext, DataGridRowTemplateProps } from './types';
+import { FC, useContext } from 'react';
 
 type VirtualScrollerProps<R> = {
   showAllRows?: boolean;
-  rowTemplate: (row: R, index: number) => ReactNode;
+  rowTemplate: FC<DataGridRowTemplateProps<R>>;
   hasFooter?: boolean;
   context: DataGridContext<R>;
   onRangeChange?: (startIndex: number, length: number) => void;
@@ -22,7 +21,7 @@ export const VirtualScroller = <R,>(props: VirtualScrollerProps<R>) => {
     gridTemplateColumns,
   } = useContext(props.context);
   const {
-    rowTemplate,
+    rowTemplate: RowTemplate,
     // hasFooter, onRangeChange
   } = props;
 
@@ -39,7 +38,9 @@ export const VirtualScroller = <R,>(props: VirtualScrollerProps<R>) => {
         $topPadding={topPadding}
         $rowHeight={rowHeight}
       >
-        {visibleRows.map(rowTemplate)}
+        {visibleRows.map((row, index) => (
+          <RowTemplate row={row} rowIndex={index} context={props.context} />
+        ))}
       </styles.VirtualScrollerRowsContainer>
     </styles.VirtualScrollerContainer>
   );

package/src/components/data/DataGrid/hooks/useDataGrid.tsx

@@ -92,6 +92,17 @@ export const useDataGrid = <R,>(
     onSelectionChange?.(selectedKeys);
   }, [onSelectionChange, selectedKeys]);
 
+  const toggleSelection = useCallback(
+    (key: string) => {
+      if (selectedKeys.includes(key)) {
+        setSelectedKeys(selectedKeys.filter((p) => p !== key));
+      } else {
+        setSelectedKeys([...selectedKeys, key]);
+      }
+    },
+    [selectedKeys, setSelectedKeys]
+  );
+
   /** ROWS FILTERING **/
 
   const [filters, setFilters] = useState<DataGridFilters>({});
@@ -240,6 +251,7 @@ export const useDataGrid = <R,>(
       footers,
       setFooters,
       footerFunctions,
+      toggleSelection,
       ...override,
     }),
     [
@@ -265,6 +277,7 @@ export const useDataGrid = <R,>(
       gridTemplateColumns,
       footers,
       footerFunctions,
+      toggleSelection,
       override,
     ]
   );
@@ -298,6 +311,7 @@ export const useDataGrid = <R,>(
         gridTemplateColumns: '',
         footers: {},
         setFooters: () => {},
+        toggleSelection: () => {},
       }),
     []
   );

package/src/components/data/DataGrid/index.tsx

@@ -2,11 +2,10 @@ import * as styles from './styles';
 
 import { DataGridContextProps, DataGridProps } from './types';
 
-import { DataGridCell } from './DataGridCell';
 import { DataGridFooter } from './DataGridFooter';
 import { DataGridHeader } from './DataGridHeader';
+import { DataGridRowTemplate } from './DataGridRowTemplate';
 import { VirtualScroller } from './VirtualScroller';
-import { useCallback } from 'react';
 import { useDataGrid } from './hooks';
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
@@ -25,95 +24,16 @@ export const DataGrid = <R,>({
   } = props;
   const [contextProps, DataGridContext] = useDataGrid(props, contextOverride);
   const {
-    selectedKeys,
-    setSelectedKeys,
     columns,
-    visibleColumns,
     rowHeight = 32,
     headerRowHeight = 40,
     scrollableRef,
     onScroll,
-    rowKeyGetter,
   } = contextProps;
 
   const hasFooter = Object.values(columns).some((col) => col.footer);
 
-  const toggleSelection = useCallback(
-    (key: string) => {
-      if (selectedKeys.includes(key)) {
-        setSelectedKeys(selectedKeys.filter((p) => p !== key));
-      } else {
-        setSelectedKeys([...selectedKeys, key]);
-      }
-    },
-    [selectedKeys, setSelectedKeys]
-  );
-
-  const rowTemplate = useCallback(
-    (row: R, rowIndex: number) => {
-      if (!row) {
-        return (
-          <styles.DataGridRow key={`loading-row-${rowIndex}`}>
-            {!!props.selectable && (
-              <styles.LoadingCell className="animate-pulse">
-                <div />
-              </styles.LoadingCell>
-            )}
-            {visibleColumns.map((_, index) => (
-              <styles.LoadingCell
-                className="animate-pulse"
-                key={`loading-${rowIndex}-${index}`}
-              >
-                <div />
-              </styles.LoadingCell>
-            ))}
-          </styles.DataGridRow>
-        );
-      }
-      const key = rowKeyGetter(row);
-      const { className, style } = props.rowClassNameGetter?.(row) ?? {
-        className: '',
-        style: undefined,
-      };
-      return (
-        <styles.DataGridRow key={key}>
-          {!!props.selectable && (
-            <styles.SelectionCell
-              key="__select_checkbox__"
-              onClick={() => toggleSelection(key)}
-            >
-              <input
-                type="checkbox"
-                value={key as string}
-                checked={selectedKeys.includes(key)}
-                readOnly
-              />
-            </styles.SelectionCell>
-          )}
-          {visibleColumns.map(([key, col], index) => (
-            <DataGridCell
-              key={`loading-${rowIndex}-${index}`}
-              {...(index === 0 ? { className, style } : {})}
-              row={row}
-              rowIndex={rowIndex}
-              column={col}
-              columnIndex={index}
-              context={DataGridContext}
-              columnKey={key}
-            />
-          ))}
-        </styles.DataGridRow>
-      );
-    },
-    [
-      DataGridContext,
-      props,
-      rowKeyGetter,
-      selectedKeys,
-      toggleSelection,
-      visibleColumns,
-    ]
-  );
+  const rowTemplate = DataGridRowTemplate;
 
   return (
     <DataGridContext.Provider value={contextProps}>

package/src/components/data/DataGrid/types.ts

@@ -131,6 +131,7 @@ export type DataGridContextProps<R> = DataGridProps<R> & {
   length: number;
   rowKeyGetter: (row: R) => string;
   gridTemplateColumns: string;
+  toggleSelection: (key: string) => void;
 };
 
 export type DataGridContext<R> = Context<DataGridContextProps<R>>;
@@ -265,3 +266,11 @@ export type DataGridFilterCheckbox = {
   values: DataGridFilterValue[];
   level: number;
 };
+
+export type DataGridRowTemplateProps<R> = {
+  row: R | null;
+  rowIndex: number;
+  selected?: boolean;
+  toggleSelection?: () => void;
+  context: DataGridContext<R>;
+};

package/src/components/forms/styles.ts

@@ -15,6 +15,8 @@ export const inputStyle = css`
   }
 `;
 
-export const Input = styled.input`
+export const Input = styled.input.attrs({
+  className: 'Input',
+})`
   ${inputStyle}
 `;

package/src/components/search/QuickSearchBar.tsx

@@ -1,8 +1,10 @@
+import * as styles from './styles';
+
 import { SearchResults, SearchTypeDefinitions } from './types';
 import { useCallback, useEffect, useRef, useState } from 'react';
 
 import { Dropdown } from '../layout';
-import { QuickSearchBarInput } from './styles';
+import { Input } from '../forms';
 import { QuickSearchResults } from './QuickSearchResults';
 import { useDebounce } from '@uidotdev/usehooks';
 import { useGlobalSearchRequestHandler } from '../../services';
@@ -18,8 +20,10 @@ export const QuickSearchBar = <R,>({ definitions }: QuickSearchBarProps<R>) => {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const [results, setResults] = useState<SearchResults<R> | null>(null);
 
+  const fakeInputRef = useRef<HTMLInputElement | null>(null);
   const inputRef = useRef<HTMLInputElement | null>(null);
-  const rect = inputRef.current?.getBoundingClientRect() ?? new DOMRect();
+  const rect = fakeInputRef.current?.getBoundingClientRect() ?? new DOMRect();
+  const destRect = new DOMRect(rect.x, rect.y, rect.width, 0);
   const globalSearch = useGlobalSearchRequestHandler();
 
   useEffect(() => {
@@ -36,41 +40,39 @@ export const QuickSearchBar = <R,>({ definitions }: QuickSearchBarProps<R>) => {
   }, [globalSearch, debouncedTerm]);
 
   const onFocus = useCallback(() => {
-    if (term) {
-      setDropdownVisible(true);
-    }
-  }, [term]);
-
-  useEffect(() => {
-    const input = inputRef.current;
-    input?.addEventListener('focus', onFocus);
-    return () => {
-      input?.removeEventListener('focus', onFocus);
-    };
-  }, [onFocus]);
+    setDropdownVisible(true);
+    requestAnimationFrame(() => {
+      inputRef.current?.focus();
+    });
+  }, []);
 
   return (
     <>
-      <QuickSearchBarInput
-        type="text"
-        value={term}
-        onChange={(e) => setTerm(e.target.value)}
-        ref={inputRef}
-        $opened={dropdownVisible}
-      />
-      {results && dropdownVisible && rect && (
+      <Input type="text" ref={fakeInputRef} value={term} onFocus={onFocus} />
+      {dropdownVisible && rect && (
         <Dropdown
-          $sourceRect={rect}
+          $sourceRect={destRect}
           onClose={() => setDropdownVisible(false)}
           $width={rect.width}
-          $height={[250, 400]}
+          $height={[results ? 250 : rect.height, 400]}
           $autoPositionY={false}
         >
-          <QuickSearchResults
-            results={results}
-            definitions={definitions}
-            term={debouncedTerm}
-          />
+          <styles.QuickSearchDropdownContainer>
+            <Input
+              type="text"
+              ref={inputRef}
+              value={term}
+              onChange={(e) => setTerm(e.target.value)}
+              onClick={(e) => e.stopPropagation()}
+            />
+            {results && (
+              <QuickSearchResults
+                results={results}
+                definitions={definitions}
+                term={debouncedTerm}
+              />
+            )}
+          </styles.QuickSearchDropdownContainer>
         </Dropdown>
       )}
     </>

package/src/components/search/styles.ts

@@ -1,41 +1,64 @@
-import { Input } from '../forms';
 import styled from 'styled-components';
 
-export const QuickSearchResultsContainer = styled.div`
+export const QuickSearchDropdownContainer = styled.div.attrs({
+  className: 'QuickSearchDropdownContainer',
+})`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+`;
+
+export const QuickSearchResultsContainer = styled.div.attrs({
+  className: 'QuickSearchResultsContainer',
+})`
   display: flex;
   flex-direction: row;
   height: 100%;
+  flex: 1;
+  padding: var(--space-2) 0;
+  overflow: hidden;
 `;
 
-export const QuickSearchResultsListContainer = styled.div`
+export const QuickSearchResultsListContainer = styled.div.attrs({
+  className: 'QuickSearchResultsListContainer',
+})`
   display: flex;
   flex-direction: column;
   padding: var(--space-2);
-  border-right: 1px solid var(--color-gray-200);
-  flex: 3;
+  border-right: 1px solid var(--color-neutral-200);
+  flex: 1;
   overflow: auto;
 `;
 
-export const QuickSearchResultsTitle = styled.div`
+export const QuickSearchResultsTitle = styled.div.attrs({
+  className: 'QuickSearchResultsTitle',
+})`
   margin: 0;
   margin-bottom: var(--space-1);
   &:not(:first-child) {
     margin-top: var(--space-2);
   }
   font-weight: bold;
-  font-size: var(--text-lg);
+  font-size: var(--text-sm);
+  text-transform: uppercase;
+  letter-spacing: 120%;
+  color: var(--color-neutral-500);
 `;
 
-export const QuickSearchResultsItem = styled.div`
+export const QuickSearchResultsItem = styled.div.attrs({
+  className: 'QuickSearchResultsItem',
+})`
   padding: var(--space-2) var(--space-3);
   cursor: pointer;
   border-radius: 4px;
   &:hover {
-    background-color: var(--color-gray-100);
+    background-color: var(--color-neutral-100);
   }
 `;
 
-export const QuickSearchResultsDetailsContainer = styled.div`
+export const QuickSearchResultsDetailsContainer = styled.div.attrs({
+  className: 'QuickSearchResultsDetailsContainer',
+})`
   display: flex;
   flex-direction: column;
   padding: var(--space-2);
@@ -46,15 +69,11 @@ export const QuickSearchResultsDetailsDivider = styled.hr`
   margin: var(--space-2) 0;
   height: 1px;
   border: none;
-  background-color: var(--color-gray-200);
+  background-color: var(--color-neutral-200);
 `;
 
-export const QuickSearchResultDetailsTitle = styled.div`
+export const QuickSearchResultDetailsTitle = styled.div.attrs({
+  className: 'QuickSearchResultDetailsTitle',
+})`
   margin: 0;
 `;
-
-export const QuickSearchBarInput = styled(Input)<{ $opened?: boolean }>`
-  position: relative;
-  width: 100%;
-  z-index: ${({ $opened }) => ($opened ? 10000 : 0)};
-`;

package/src/services/WebSocketService.ts

@@ -45,6 +45,7 @@ export class WebSocketService {
         if (this.socket && this.socket.readyState === 1) {
           clearInterval(interval);
           this.setStatus(true);
+          this.sendQueue();
           this.onOpen?.();
         }
       }, 100);