norma-library 0.6.893 → 0.6.981

package/src/components/UncontrolledTable/components/row/DraggableRow.tsx

@@ -1,14 +1,14 @@
-import React, { CSSProperties } from 'react';
-import * as S from './styles';
+import React, { CSSProperties } from 'react'
+import * as S from './styles'
 
-import { flexRender } from '@tanstack/react-table';
-import { useSortable } from '@dnd-kit/sortable';
-import { CSS } from '@dnd-kit/utilities';
+import { flexRender } from '@tanstack/react-table'
+import { useSortable } from '@dnd-kit/sortable'
+import { CSS } from '@dnd-kit/utilities'
 
 const DraggableRow: React.FC<any> = ({ row, onClick, onMouseOver, onMouseOut }) => {
   const { transform, transition, setNodeRef, isDragging } = useSortable({
     id: row.id,
-  });
+  })
 
   const style: CSSProperties = {
     transform: CSS.Transform.toString(transform),
@@ -16,10 +16,10 @@ const DraggableRow: React.FC<any> = ({ row, onClick, onMouseOver, onMouseOut })
     opacity: isDragging ? 0.8 : 1,
     zIndex: isDragging ? 1 : 0,
     position: 'relative',
-  };
+  }
 
   return (
-    <S.Tr $hasAction={!!onClick || !!onMouseOver || !!onMouseOut} ref={setNodeRef} style={style}>
+    <S.Tr ref={setNodeRef} style={style}>
       {row.getVisibleCells().map((cell: any) => (
         <S.Td key={cell.id} onClick={onClick} onMouseOver={onMouseOver} onMouseOut={onMouseOut}>
           {cell.column.columnDef.type == 'action'
@@ -28,7 +28,7 @@ const DraggableRow: React.FC<any> = ({ row, onClick, onMouseOver, onMouseOut })
         </S.Td>
       ))}
     </S.Tr>
-  );
-};
+  )
+}
 
-export default DraggableRow;
+export default DraggableRow

package/src/components/UncontrolledTable/components/row/SimpleRow.tsx

@@ -1,11 +1,10 @@
-import React from 'react';
-import { flexRender } from '@tanstack/react-table';
-import * as S from './styles';
+import React from 'react'
+import { flexRender } from '@tanstack/react-table'
+import * as S from './styles'
 
 const SimpleRow: React.FC<any> = ({ row, onClick, onMouseOver, onMouseOut }) => {
   return (
     <S.Tr
-      $hasAction={!!onClick || !!onMouseOver || !!onMouseOut}
       onClick={() => (onClick ? onClick(row.original) : null)}
       onMouseOver={() => (onMouseOver ? onMouseOver(row.original) : null)}
       onMouseOut={() => (onMouseOut ? onMouseOut(row.original) : null)}
@@ -17,10 +16,10 @@ const SimpleRow: React.FC<any> = ({ row, onClick, onMouseOver, onMouseOut }) =>
               ? cell.getValue()
               : flexRender(cell.column.columnDef.cell, cell.getContext())}
           </S.Td>
-        );
+        )
       })}
     </S.Tr>
-  );
-};
+  )
+}
 
-export default SimpleRow;
+export default SimpleRow

package/src/components/UncontrolledTable/components/row/styles.tsx

@@ -1,15 +1,11 @@
-import { breakpoints } from '../../../../utils/styledBreakpoints';
-import styled from 'styled-components';
+import styled from 'styled-components'
 
-export const Tr = styled.tr<any>`
+export const Tr = styled.tr`
   color: inherit;
   display: table-row;
   vertical-align: middle;
   outline: 0;
-  &:nth-of-type(even) {
-    background-color: #fafafa;
-  }
-`;
+`
 
 export const Td = styled.td`
   font-weight: 500;
@@ -20,13 +16,7 @@ export const Td = styled.td`
   vertical-align: inherit;
   border-bottom: 1px solid rgba(224, 224, 224, 1);
   text-align: left;
-  padding: 16px;
-  ${breakpoints({
-    cssProp: 'padding',
-    cssPropUnits: 'px',
-    values: [{ 1440: 8 }],
-    mediaQueryType: 'max-width',
-  })};
+  padding: 8px;
   color: #666666;
   font-size: 0.875rem;
-`;
+`

package/src/components/UncontrolledTable/interface.ts

@@ -1,49 +1,70 @@
-import { ColumnDef } from '@tanstack/react-table';
+import { ColumnDef } from '@tanstack/react-table'
+import { JSX } from 'react'
 
 type Labels = {
-  orderAsc: string;
-  orderDesc: string;
-  filter: string;
-  clearFilter: string;
-};
+  orderAsc?: string
+  orderDesc?: string
+  filter?: string
+  clearFilter?: string
+  columns?: string
+}
 
 interface Pagination {
-  pageIndex: number;
-  pageSize: number;
+  pageIndex: number
+  pageSize: number
+}
+
+interface Sticky {
+  enabled: boolean
+  top: number
+}
+
+export interface TableList {
+  id: string
+  label: string | JSX.Element
+  onClick?: (id: string) => void
+  checked?: () => boolean | boolean
+  disabled?: boolean
+}
+
+export interface TableButton {
+  render: () => JSX.Element
+  list?: {
+    options: TableList[]
+    toggleableList?: boolean
+    closeOnClick?: boolean
+  }
+  disabled?: boolean
+  onClick?: () => void
 }
 
 export interface UncontrolledTableProps {
-  data: any;
-  columns: ColumnDef<ColumnsTable>[];
-  onClick: any;
-  onMouseOver: any;
-  onMouseOut: any;
-  showTotalResults: boolean;
-  showSettings: boolean;
-  pagination?: Pagination;
-  totalPages: number;
-  showClearFields?: boolean;
-  customTotalResults?: string;
-  labels?: Labels;
-  tableClassName?: string;
-  stickyHeader?: boolean;
-  stickyHeaderP?: number;
-  customIcons?: React.ReactNode[];
-  hideColumns?: string[];
-  draggable?: boolean;
-  onChangePage: (pagination: Pagination) => void;
-  onClearFieldsClick?: () => void;
-  onFilterClick?: (column: string) => void;
-  onSortClick?: (column: string, direction: string) => void;
-  onColumnVisibilityChange?: (columnId: string, isVisible: boolean) => void;
-  onDragEnd?: (data: any[]) => void;
+  data: any
+  columns: ColumnDef<ColumnsTable>[]
+  pagination?: Pagination
+  totalPages?: number
+  labels?: Labels
+  tableClassName?: string
+  sticky?: Sticky
+  draggable?: boolean
+  buttons?: TableButton[]
+  configs?: TableButton[]
+  hideColumns?: string[]
+  onClick?: () => void
+  onMouseOver?: () => void
+  onMouseOut?: () => void
+  onColumnVisibilityChange?: (column: string, value: boolean) => void
+  onChangePage?: (pagination: Pagination) => void
+  onFilterClick?: (column: string) => void
+  onSortClick?: (column: string, direction: string) => void
+  onDragEnd?: (data: any[]) => void
 }
 
 export interface ColumnsTable {
-  header: string;
-  accessorKey: string;
-  type: string;
-  enableColumnFilter: boolean;
-  filterFn: string;
-  nofilter?: boolean;
+  header: string
+  accessorKey: string
+  type: string
+  enableColumnFilter: boolean
+  filterFn: string
+  nofilter?: boolean
 }

package/src/hooks/useClickOutside.tsx

@@ -1,18 +1,18 @@
-import { useEffect } from 'react';
+import { useEffect } from 'react'
 
 const useClickOutside = (ref: React.RefObject<HTMLElement | null>, callback: () => void) => {
   const handleClickOutside = (event: MouseEvent) => {
     if (ref.current && !ref.current.contains(event.target as Node)) {
-      callback();
+      callback()
     }
-  };
+  }
 
   useEffect(() => {
-    document.addEventListener('mousedown', handleClickOutside);
+    document.addEventListener('mousedown', handleClickOutside)
     return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, [ref, callback]);
-};
+      document.removeEventListener('mousedown', handleClickOutside)
+    }
+  }, [ref, callback])
+}
 
-export default useClickOutside;
+export default useClickOutside

package/src/hooks/useOutsideScreen.tsx

@@ -0,0 +1,35 @@
+import { useState, useEffect, RefObject } from 'react'
+
+/**
+ * Hook that detects when an element is partially visible in the viewport
+ * @param elementRef - Reference to the DOM element to observe
+ * @returns boolean indicating if the element is partially visible in the viewport
+ */
+export const usePartiallyVisible = (elementRef: RefObject<HTMLElement | null>): boolean => {
+    const [isPartiallyVisible, setIsPartiallyVisible] = useState<boolean>(false)
+
+    useEffect(() => {
+        const element = elementRef.current
+        if (!element) return
+
+        const observer = new IntersectionObserver(
+            ([entry]) => {
+                // Element is partially visible if it's intersecting but not completely visible
+                const isPartial = entry.isIntersecting && entry.intersectionRatio < 1.0
+                setIsPartiallyVisible(isPartial)
+            },
+            {
+                root: null, // Use the viewport as the root
+                threshold: [0, 1.0], // Check at these thresholds to determine partial visibility
+            }
+        )
+
+        observer.observe(element)
+
+        return () => {
+            if (element) observer.unobserve(element)
+        }
+    }, [elementRef])
+
+    return isPartiallyVisible
+}

package/src/index.ts

@@ -25,7 +25,7 @@ import MultiSelectInput from './components/MultiSelectInput';
 import { Title, Text } from './components/Typography';
 import TextInput from './components/TextInput';
 import Table from './components/Table';
-import UncontrolledTable from './components/UncontrolledTable';
+import UncontrolledTable from './components/UncontrolledTable/UncontrolledTable';
 import UncontrolledTabs from './components/UncontrolledTabs/UncontrolledTabs';
 import { TimeLine, TimeLineData } from './components/TimeLine/TimeLine';
 import { ModalStatus } from './components/StatusModal/StatusModal';