@addev-be/ui 0.17.1 → 0.17.2

package/package.json

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

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

@@ -147,6 +147,7 @@ export const useDataGrid = <R,>(
     updatedRows,
     editRow,
     addRow,
+    addRows,
     updateRow,
     clearChangedRows,
   } = useDataGridChangedRows<R>(rowKeyGetter as any, onRowAdded);
@@ -291,6 +292,7 @@ export const useDataGrid = <R,>(
       updatedRows,
       editRow,
       addRow,
+      addRows,
       updateRow,
       clearChangedRows,
 
@@ -325,6 +327,7 @@ export const useDataGrid = <R,>(
       updatedRows,
       editRow,
       addRow,
+      addRows,
       updateRow,
       clearChangedRows,
       setRows,
@@ -367,6 +370,7 @@ export const useDataGrid = <R,>(
         setRows: () => {},
         editRow: () => {},
         addRow: () => {},
+        addRows: () => {},
         updateRow: () => {},
         clearChangedRows: () => {},
       }),

package/src/components/data/DataGrid/hooks/useDataGridChangedRows.ts

@@ -15,6 +15,13 @@ export const useDataGridChangedRows = <R>(
     [onRowAdded]
   );
 
+  const addRows = useCallback(
+    (rows: R[]) => {
+      rows.forEach(addRow);
+    },
+    [addRow]
+  );
+
   const updateRow = useCallback(
     (row: Partial<R>) => {
       const rowKey = rowKeyGetter(row);
@@ -83,6 +90,7 @@ export const useDataGridChangedRows = <R>(
     updatedRows,
     editRow,
     addRow,
+    addRows,
     updateRow,
     clearChangedRows,
   };

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

@@ -15,10 +15,10 @@ import {
 } from './constants';
 import { DataGridContextProps, DataGridProps, DataGridRefProps } from './types';
 
-import { VirtualScroller } from '../VirtualScroller';
 import { DataGridFooter } from './DataGridFooter';
 import { DataGridHeader } from './DataGridHeader';
 import { DataGridRowTemplate } from './DataGridRowTemplate';
+import { VirtualScroller } from '../VirtualScroller';
 import { useDataGrid } from './hooks';
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
@@ -31,7 +31,7 @@ export const DataGridInner = <R,>(
   }: DataGridProps<R> & {
     contextOverride?: Partial<DataGridContextProps<R>>;
   },
-  ref: ForwardedRef<DataGridRefProps>
+  ref: ForwardedRef<DataGridRefProps<R>>
 ) => {
   const scrollableRef = useRef<HTMLDivElement>(null);
   const { className } = props;
@@ -46,6 +46,7 @@ export const DataGridInner = <R,>(
     onVisibleRowsChange,
     refresh,
     setSelectedKeys,
+    addRows,
     fixedColumnsCount,
     resizingColumnKey,
     moveResizing,
@@ -57,8 +58,9 @@ export const DataGridInner = <R,>(
     () => ({
       refresh: refresh ?? (() => {}),
       setSelectedKeys,
+      addRows,
     }),
-    [refresh, setSelectedKeys]
+    [addRows, refresh, setSelectedKeys]
   );
 
   const hasFooter = Object.values(columns).some((col) => col.footer);

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

@@ -210,6 +210,7 @@ export type DataGridContextProps<R> = DataGridProps<R> & {
   updatedRows: DataGridEditedRows<R>;
   editRow: (row: Partial<R>) => void;
   addRow: (row: R) => void;
+  addRows: (rows: R[]) => void;
   updateRow: (row: Partial<R>) => void;
   clearChangedRows: (keys?: string[]) => void;
 };
@@ -359,9 +360,10 @@ export type DataGridRowTemplateProps<R> = {
   context: DataGridContext<R>;
 };
 
-export type DataGridRefProps = {
+export type DataGridRefProps<R> = {
   refresh: () => void;
   setSelectedKeys: (keys: string[]) => void;
+  addRows: (rows: R[]) => void;
 };
 
 export type DataGridEditedRows<R> = Partial<R>[];

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

@@ -36,7 +36,7 @@ export const SqlRequestDataGridInner = <R,>(
     onSelectionChange: onSelectionChangeFromProps,
     ...props
   }: SqlRequestDataGridProps<R>,
-  ref: ForwardedRef<DataGridRefProps>
+  ref: ForwardedRef<DataGridRefProps<R>>
 ) => {
   const currentRows = useRef<R[]>([]);
   const [rows, setRows] = useState<R[]>([]);
@@ -53,7 +53,7 @@ export const SqlRequestDataGridInner = <R,>(
   const [sqlRequest, sqlIdRequest, sqlPartialRequest] = useSqlRequestHandler<R>(
     props.type
   );
-  const gridRef = useRef<DataGridRefProps>(null);
+  const gridRef = useRef<DataGridRefProps<R>>(null);
 
   const [conditions, setConditions] = useState<Record<string, ConditionDTO>>(
     {}
@@ -375,6 +375,7 @@ export const SqlRequestDataGridInner = <R,>(
     () => ({
       refresh,
       setSelectedKeys: gridRef.current?.setSelectedKeys ?? (() => {}),
+      addRows: gridRef.current?.addRows ?? (() => {}),
     }),
     [refresh]
   );

package/src/components/forms/styles.ts

@@ -1,7 +1,7 @@
 import styled, { css } from 'styled-components';
 
 export const inputStyle = css`
-  font-family: inherit;
+  font-family: var(--font-sans);
   font-size: inherit;
   color: inherit;
   border: 1px solid var(--color-gray-300);
@@ -15,9 +15,7 @@ export const inputStyle = css`
   }
 `;
 
-export const Input = styled.input.attrs({
-  className: 'Input',
-})`
+export const Input = styled.input`
   ${inputStyle}
 `;
 

package/src/components/search/QuickSearchBar.tsx

@@ -1,6 +1,13 @@
 import * as styles from './styles';
 
-import { useCallback, useEffect, useRef, useState } from 'react';
+import {
+  ComponentProps,
+  FC,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
 import { SearchResults, SearchTypeDefinitions } from './types';
 
 import { useDebounce } from '@uidotdev/usehooks';
@@ -12,11 +19,16 @@ import { QuickSearchResults } from './QuickSearchResults';
 type QuickSearchBarProps<R> = {
   definitions: SearchTypeDefinitions<R>;
   types?: string[];
+  conditions?: { field: string; operator: string }[];
+  placeholder?: string;
+  inputComponent?: FC<ComponentProps<typeof Input>>;
 };
 
 export const QuickSearchBar = <R,>({
   definitions,
   types,
+  placeholder,
+  inputComponent: InputComponent = Input,
 }: QuickSearchBarProps<R>) => {
   const [term, setTerm] = useState('');
   const [dropdownVisible, setDropdownVisible] = useState(false);
@@ -58,7 +70,13 @@ export const QuickSearchBar = <R,>({
 
   return (
     <>
-      <Input type="text" ref={fakeInputRef} value={term} onFocus={onFocus} />
+      <InputComponent
+        type="text"
+        ref={fakeInputRef}
+        value={term}
+        onFocus={onFocus}
+        placeholder={placeholder}
+      />
       {dropdownVisible && rect && (
         <Dropdown
           $sourceRect={destRect}
@@ -68,10 +86,11 @@ export const QuickSearchBar = <R,>({
           $autoPositionY={false}
         >
           <styles.QuickSearchDropdownContainer>
-            <Input
+            <InputComponent
               type="text"
               ref={inputRef}
               value={term}
+              placeholder={placeholder}
               onChange={(e) => setTerm(e.target.value)}
               onClick={(e) => e.stopPropagation()}
             />