@addev-be/ui 0.8.7 → 0.8.9

package/package.json

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

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

@@ -60,13 +60,18 @@ export const SqlRequestDataGridInner = <R,>(
 
   const [columnsKeys, visibleColumnsKeys] = useMemo(
     () => [
-      [...Object.keys(props.columns), ...(props.hiddenColumns ?? [])],
       [
-        ...Object.keys(props.columns).filter((key) =>
-          isColumnVisible(props.columns[key])
+        ...Object.keys(props.columns).filter(
+          (key) => !props.columns[key].ignore
         ),
         ...(props.hiddenColumns ?? []),
       ],
+      [
+        ...Object.keys(props.columns)
+          .filter((key) => !props.columns[key].ignore)
+          .filter((key) => isColumnVisible(props.columns[key])),
+        ...(props.hiddenColumns ?? []),
+      ],
     ],
     [props.columns, props.hiddenColumns]
   );

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

@@ -27,6 +27,7 @@ export type SqlRequestDataGridColumn<R> = DataGridColumn<R> & {
   field?: FieldDTO;
   filterField?: string;
   sortField?: string;
+  ignore?: boolean;
 };
 
 export type SqlRequestDataGridColumns<R> = Record<

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

@@ -42,11 +42,14 @@ export const SqlRequestGridInner = <R, P extends object = {}>(
 
   const [columnsKeys, visibleColumnsKeys] = useMemo(
     () => [
-      [...Object.keys(props.fields), ...(props.additionalFields ?? [])],
       [
-        ...Object.keys(props.fields).filter((key) =>
-          isColumnVisible(props.fields[key])
-        ),
+        ...Object.keys(props.fields).filter((key) => !props.fields[key].ignore),
+        ...(props.additionalFields ?? []),
+      ],
+      [
+        ...Object.keys(props.fields)
+          .filter((key) => !props.fields[key].ignore)
+          .filter((key) => isColumnVisible(props.fields[key])),
         ...(props.additionalFields ?? []),
       ],
     ],

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

@@ -27,6 +27,7 @@ export type SqlRequestGridColumn<R> = DataGridColumn<R> & {
   field?: FieldDTO;
   filterField?: string;
   sortField?: string;
+  ignore?: boolean;
 };
 
 export type SqlRequestGridColumns<R> = Record<string, SqlRequestGridColumn<R>>;

package/src/components/layout/Dropdown/index.tsx

@@ -1,6 +1,14 @@
 import * as styles from './styles';
 
-import { CSSProperties, FC, PropsWithChildren, useMemo } from 'react';
+import {
+  CSSProperties,
+  FC,
+  PropsWithChildren,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+} from 'react';
 
 import { usePortals } from '../../../providers';
 
@@ -57,23 +65,47 @@ const getDropdownStyle = (dropdown: DropdownProps): CSSProperties => {
 export const Dropdown: FC<DropdownProps> = ({
   children,
   onClose,
-  $backdropAlpha,
   ...props
 }) => {
   const { createPortal } = usePortals();
 
+  const firstClick = useRef(true);
+  const containerRef = useRef<HTMLDivElement | null>(null);
   const style = useMemo(() => getDropdownStyle(props), [props]);
 
+  const onDocumentClick = useCallback(
+    (ev: MouseEvent) => {
+      if (firstClick.current) {
+        firstClick.current = false;
+        return;
+      }
+      if (
+        containerRef.current &&
+        !containerRef.current.contains(ev.target as Node)
+      ) {
+        return onClose?.();
+      }
+    },
+    [onClose]
+  );
+
+  useEffect(() => {
+    if (containerRef.current) {
+      document.addEventListener('click', onDocumentClick);
+      return () => {
+        document.removeEventListener('click', onDocumentClick);
+      };
+    }
+  }, [onDocumentClick]);
+
   const modalPortal = useMemo(
     () =>
       createPortal(
-        <styles.DropdownBackdrop onClick={onClose} $alpha={$backdropAlpha}>
-          <styles.DropdownContainer {...props} style={style}>
-            {children}
-          </styles.DropdownContainer>
-        </styles.DropdownBackdrop>
+        <styles.DropdownContainer ref={containerRef} {...props} style={style}>
+          {children}
+        </styles.DropdownContainer>
       ),
-    [$backdropAlpha, children, createPortal, onClose, props, style]
+    [children, createPortal, props, style]
   );
 
   return <>{modalPortal}</>;