norma-library 0.6.893 → 0.6.981

package/src/components/UncontrolledTable/{styles.tsx → UncontrolledTable.style.tsx}

@@ -1,9 +1,10 @@
-import { breakpoints } from '../../utils/styledBreakpoints';
-import styled from 'styled-components';
+import { breakpoints } from '../../utils/styledBreakpoints'
+import styled from 'styled-components'
 
 export const Container = styled.div`
   background-color: #fff;
-`;
+  padding: 15px;
+`
 
 export const Table = styled.table`
   display: table;
@@ -12,26 +13,26 @@ export const Table = styled.table`
   border-spacing: 0;
   min-width: 650px;
   border: none;
-`;
+`
 
 const StickyStyles = (top: number) => `
   position: sticky;
   top: ${top}px;
   z-index: 1;
-  background: #fff;
-`;
+`
 
-export const Thead = styled.thead<{ $sticky?: boolean, $stickyTopP?: number}>`
+export const Thead = styled.thead<{ $sticky?: boolean; $stickyTopP?: number }>`
   display: table-header-group;
-  ${props => props.$sticky && StickyStyles(props.$stickyTopP || 0)};
-`;
+  background-color: #fafafa;
+  ${(props) => props.$sticky && StickyStyles(props.$stickyTopP || 0)};
+`
 
 export const TableRow = styled.tr`
   color: inherit;
   display: table-row;
   vertical-align: middle;
   outline: 0;
-`;
+`
 
 export const Th = styled.th`
   font-weight: 500;
@@ -42,7 +43,7 @@ export const Th = styled.th`
   vertical-align: inherit;
   border-bottom: 1px solid rgba(224, 224, 224, 1);
   text-align: left;
-  padding: 16px;
+  padding: 16px 8px;
   ${breakpoints({
     cssProp: 'padding',
     cssPropUnits: 'px',
@@ -53,20 +54,29 @@ export const Th = styled.th`
   color: #666666;
   font-size: 0.875rem;
   font-weight: 700;
-`;
+`
 
 export const ColumnContent = styled.div`
   display: flex;
   align-items: center;
   gap: 5px;
-`;
+`
 
-export const TextColumn = styled.span``;
+export const TextColumn = styled.span<{ $size?: string }>`
+  line-height: 1.3;
+  ${(props) =>
+    props.$size &&
+    ` white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      width: ${props.$size};
+    `}
+`
 
 export const IconFilterDialog = styled.div`
   height: 20px;
   width: 20px;
-`;
+`
 
 export const FilterDialog = styled.div`
   position: absolute;
@@ -77,7 +87,7 @@ export const FilterDialog = styled.div`
   box-shadow: 0px 3px 6px #00000029;
   border: 1px solid #e0e0e0;
   z-index: 99;
-`;
+`
 
 export const ListFilterDialog = styled.div`
   display: flex;
@@ -93,7 +103,7 @@ export const ListFilterDialog = styled.div`
     border: 1px solid #e0e0e0;
     padding: 8px 12px;
   }
-`;
+`
 
 export const OptionFilterDialog = styled.div`
   display: flex;
@@ -120,4 +130,4 @@ export const OptionFilterDialog = styled.div`
     font-size: 16px;
     font-weight: 400;
   }
-`;
+`

package/src/components/UncontrolledTable/{index.tsx → UncontrolledTable.tsx}

@@ -1,6 +1,4 @@
-import React, { useState, useMemo, useRef } from 'react';
-import * as S from './styles';
-
+import React, { useState, useMemo, useRef } from 'react'
 import {
   flexRender,
   getCoreRowModel,
@@ -8,8 +6,7 @@ import {
   useReactTable,
   ColumnFiltersState,
   TableOptions,
-} from '@tanstack/react-table';
-
+} from '@tanstack/react-table'
 import {
   DndContext,
   MouseSensor,
@@ -20,45 +17,45 @@ import {
   useSensors,
   TouchSensor,
   KeyboardSensor,
-} from '@dnd-kit/core';
-import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
-import { arrayMove, SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
+} from '@dnd-kit/core'
+import { restrictToVerticalAxis } from '@dnd-kit/modifiers'
+import { arrayMove, SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable'
 
-import { Pagination, Header, SimpleRow, DraggableRow, RowDragHandleCell } from './components';
-import { UncontrolledTableProps } from './interface';
-import useClickOutside from '../../hooks/useClickOutside';
+import useClickOutside from '../../hooks/useClickOutside'
+import { Pagination, Header, SimpleRow, DraggableRow, RowDragHandleCell } from './components'
+import { UncontrolledTableProps } from './interface'
+
+import * as S from './UncontrolledTable.style'
 
 const UncontrolledTable = (props: UncontrolledTableProps) => {
   const {
     data,
     columns,
+    pagination,
+    totalPages,
+    labels,
+    tableClassName,
+    sticky,
+    draggable,
+    buttons,
+    configs,
+    hideColumns,
+  } = props
+
+  const {
     onClick,
     onMouseOver,
     onMouseOut,
-    showTotalResults,
-    showSettings,
     onChangePage,
-    pagination,
-    totalPages,
-    showClearFields,
-    onClearFieldsClick,
     onFilterClick,
     onSortClick,
-    customTotalResults,
-    labels,
-    tableClassName,
-    stickyHeader,
-    stickyHeaderP,
-    draggable,
     onDragEnd,
-  } = props;
+    onColumnVisibilityChange,
+  } = props
 
-  const [openFilterDialog, setOpenFilterDialog] = useState('');
-  const [sorting, setSorting] = useState<any>([]);
-  const [filterByColumn, setFilterByColumn] = useState<ColumnFiltersState>([]);
-  const [globalFilters, setGlobalFilters] = useState<any>([]);
-  const [orderSmallest, setOrderSmallest] = useState(false);
-  const [orderLargest, setOrderLargest] = useState(false);
+  const [openFilterDialog, setOpenFilterDialog] = useState('')
+  const [sorting, setSorting] = useState<any>([])
+  const [filterByColumn, setFilterByColumn] = useState<ColumnFiltersState>([])
 
   const _columns: any[] = useMemo(() => {
     return draggable
@@ -66,7 +63,7 @@ const UncontrolledTable = (props: UncontrolledTableProps) => {
           {
             id: 'drag',
             header: '',
-            cell: ({ row }: { row: any }) => <RowDragHandleCell rowId={row.id}/>,
+            cell: ({ row }: { row: any }) => <RowDragHandleCell rowId={row.id} />,
             disableMenu: true,
           },
           ...columns.map((column) => ({
@@ -74,8 +71,8 @@ const UncontrolledTable = (props: UncontrolledTableProps) => {
             disableMenu: true,
           })),
         ]
-      : columns;
-  }, [columns]);
+      : columns
+  }, [columns])
 
   const reactTableConfig = useMemo(() => {
     const config: TableOptions<unknown> = {
@@ -87,64 +84,59 @@ const UncontrolledTable = (props: UncontrolledTableProps) => {
         pagination: pagination,
       },
       rowCount: totalPages,
-      getCoreRowModel: getCoreRowModel(),
-      getSortedRowModel: getSortedRowModel(),
-      onSortingChange: setSorting,
-      onColumnFiltersChange: setFilterByColumn,
       manualPagination: true,
-      getRowId: (row: any) => row.id,
       debugTable: true,
       debugHeaders: true,
       debugColumns: true,
-    };
+      getRowId: (row: any) => row.id,
+      getCoreRowModel: getCoreRowModel(),
+      getSortedRowModel: getSortedRowModel(),
+      onSortingChange: setSorting,
+      onColumnFiltersChange: setFilterByColumn,
+    }
 
-    return config;
-  }, [data, sorting, filterByColumn, _columns, pagination]);
+    return config
+  }, [data, sorting, filterByColumn, _columns, pagination])
 
-  const table = useReactTable(reactTableConfig);
-  const filterRef = useRef<HTMLDivElement>(null);
+  const table = useReactTable(reactTableConfig)
+  const filterRef = useRef<HTMLDivElement>(null)
 
-  useClickOutside(filterRef, () => setOpenFilterDialog(''));
+  useClickOutside(filterRef, () => setOpenFilterDialog(''))
 
   const handleDragEnd = (event: DragEndEvent) => {
-    const { active, over } = event;
-
+    const { active, over } = event
 
     if (active && over && active.id !== over.id && onDragEnd) {
-      const oldIndex = dataIds.indexOf(active.id);
-      const newIndex = dataIds.indexOf(over.id);
+      const oldIndex = dataIds.indexOf(active.id)
+      const newIndex = dataIds.indexOf(over.id)
 
-      const _data = arrayMove(data, oldIndex, newIndex);
-      onDragEnd(_data);
+      const _data = arrayMove(data, oldIndex, newIndex)
+      onDragEnd(_data)
     }
-  };
+  }
 
-  const sensors = useSensors(useSensor(MouseSensor, {}), useSensor(TouchSensor, {}), useSensor(KeyboardSensor, {}));
+  const sensors = useSensors(
+    useSensor(MouseSensor, {}),
+    useSensor(TouchSensor, {}),
+    useSensor(KeyboardSensor, {}),
+  )
 
   const dataIds = useMemo<UniqueIdentifier[]>(
     () => data?.map((item: { id: UniqueIdentifier }) => item.id) || [],
     [data],
-  );
+  )
 
   return (
-    <S.Container>
+    <S.Container className="Norma__Table">
       <Header
         table={table}
-        globalFilters={globalFilters}
-        orderSmallest={orderSmallest}
-        orderLargest={orderLargest}
-        showTotalResults={showTotalResults}
-        showSettings={showSettings}
-        setGlobalFilters={setGlobalFilters}
-        setOrderLargest={setOrderLargest}
-        setOrderSmallest={setOrderSmallest}
-        showClearFiels={showClearFields}
-        customTotalResults={customTotalResults}
-        clearLabel={labels?.clearFilter}
-        onClearFieldsClick={() => onClearFieldsClick && onClearFieldsClick()}
-        customIcons={props.customIcons}
-        hideColumns={props.hideColumns}
-        onColumnVisibilityChange={props.onColumnVisibilityChange}
+        labels={{
+          columns: labels?.columns || 'Colunas',
+        }}
+        configs={configs}
+        menus={buttons}
+        hideColumns={hideColumns}
+        onColumnVisibilityChange={onColumnVisibilityChange}
       />
       <DndContext
         collisionDetection={closestCenter}
@@ -153,7 +145,7 @@ const UncontrolledTable = (props: UncontrolledTableProps) => {
         sensors={sensors}
       >
         <S.Table className={tableClassName || ''}>
-          <S.Thead $sticky={stickyHeader} $stickyTopP={stickyHeaderP}>
+          <S.Thead $sticky={sticky?.enabled} $stickyTopP={sticky?.top}>
             {table.getHeaderGroups().map((headerGroup: any) => (
               <S.TableRow key={headerGroup.id}>
                 {headerGroup.headers.map((header: any) => (
@@ -161,11 +153,15 @@ const UncontrolledTable = (props: UncontrolledTableProps) => {
                     <S.ColumnContent
                       onClick={() => {
                         if (!header?.column?.columnDef?.disableMenu)
-                          setOpenFilterDialog(header.column.columnDef.accessorKey);
+                          setOpenFilterDialog(header.column.columnDef.accessorKey)
                       }}
                     >
-                      <S.TextColumn>
-                        {!header.isPlaceholder && flexRender(header.column.columnDef.header, header.getContext())}
+                      <S.TextColumn
+                        title={header.column.columnDef.header}
+                        $size={header.column.columnDef.width}
+                      >
+                        {!header.isPlaceholder &&
+                          flexRender(header.column.columnDef.header, header.getContext())}
                       </S.TextColumn>
                       {!header?.column?.columnDef?.disableMenu && (
                         <S.IconFilterDialog>
@@ -179,12 +175,9 @@ const UncontrolledTable = (props: UncontrolledTableProps) => {
                       <S.FilterDialog ref={filterRef}>
                         <S.ListFilterDialog>
                           <S.OptionFilterDialog
-                            style={{
-                              background: orderSmallest ? 'rgba(0, 0, 0, 0.04)' : '',
-                            }}
                             onClick={() => {
-                              onSortClick && onSortClick(header.column.columnDef.accessorKey, 'asc');
-                              setOpenFilterDialog('');
+                              onSortClick && onSortClick(header.column.columnDef.accessorKey, 'asc')
+                              setOpenFilterDialog('')
                             }}
                           >
                             <div className="icon">
@@ -208,12 +201,10 @@ const UncontrolledTable = (props: UncontrolledTableProps) => {
                             <p>{labels?.orderAsc || 'Menor primeiro'}</p>
                           </S.OptionFilterDialog>
                           <S.OptionFilterDialog
-                            style={{
-                              background: orderLargest ? 'rgba(0, 0, 0, 0.04)' : '',
-                            }}
                             onClick={() => {
-                              onSortClick && onSortClick(header.column.columnDef.accessorKey, 'desc');
-                              setOpenFilterDialog('');
+                              onSortClick &&
+                                onSortClick(header.column.columnDef.accessorKey, 'desc')
+                              setOpenFilterDialog('')
                             }}
                           >
                             <div className="icon rotate">
@@ -239,8 +230,8 @@ const UncontrolledTable = (props: UncontrolledTableProps) => {
                           {!header?.column?.columnDef?.nofilter && (
                             <S.OptionFilterDialog
                               onClick={() => {
-                                onFilterClick && onFilterClick(header.column.columnDef.accessorKey);
-                                setOpenFilterDialog('');
+                                onFilterClick && onFilterClick(header.column.columnDef.accessorKey)
+                                setOpenFilterDialog('')
                               }}
                             >
                               <div className="icon">
@@ -291,7 +282,7 @@ const UncontrolledTable = (props: UncontrolledTableProps) => {
                     onMouseOver={onMouseOver}
                     onMouseOut={onMouseOut}
                   />
-                );
+                )
               })}
             </SortableContext>
           </tbody>
@@ -300,12 +291,12 @@ const UncontrolledTable = (props: UncontrolledTableProps) => {
       {pagination && (
         <Pagination
           pagination={pagination}
-          count={totalPages}
-          onChangePage={(page: number) => onChangePage({ ...pagination, pageIndex: page })}
+          count={totalPages || 0}
+          onChangePage={(page: number) => onChangePage?.({ ...pagination, pageIndex: page })}
         />
       )}
     </S.Container>
-  );
-};
+  )
+}
 
-export default UncontrolledTable;
+export default UncontrolledTable

package/src/components/UncontrolledTable/components/TableButton/TableButton.style.tsx

@@ -0,0 +1,50 @@
+import styled from 'styled-components'
+
+export const TableButtonContainer = styled.div<{$disabled?: boolean}>`
+  display: block;
+  position: relative;
+  cursor: ${(props) => (props.$disabled ? 'not-allowed' : 'pointer')};
+`
+
+export const TableButton = styled.div<{ $config?: boolean; $list?: boolean, $disabled?: boolean }>`
+  background-color: ${(props) => (!props.$config ? '#f0f0f0' : '#fff')};
+  border: ${(props) => (props.$config ? '1px solid #ccc' : 'none')};
+  box-sizing: border-box;
+  padding: 10px;
+  border-radius: 4px;
+  pointer-events: ${(props) => (props.$disabled ? 'none' : 'auto')};
+  opacity: ${(props) => (props.$disabled ? 0.3 : 1)};
+  &:hover {
+    background-color: ${(props) => (!props.$config ? '#e0e0e0' : '#f9f9f9')};
+  }
+`
+
+export const TableLabel = styled.div`
+  font-size: 14px;
+  color: #333;
+  font-weight: 500;
+`
+
+export const TableList = styled.div<{ $position?: 'left' | 'right', $visible?: boolean }>`
+  visibility: ${(props) => (props.$visible ? 'visible' : 'hidden')};
+  position: absolute;
+  background-color: #fff;
+  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
+  border-radius: 4px;
+  padding: 10px;
+  z-index: 1000;
+  ${(props) => (props.$position === 'left' ? 'left: 0;' : 'right: 0;')}
+  top: calc(100% + 10px);
+  width: 200px;
+`
+
+export const TableListItem = styled.div<{ $disabled?: boolean }>`
+  filter: ${(props) => (props.$disabled ? 'grayscale(1)' : 'none')};
+  pointer-events: ${(props) => (props.$disabled ? 'none' : 'auto')};
+  color: ${(props) => (props.$disabled ? '#999' : '#333')};
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 5px 10px;
+  cursor: pointer;
+`

package/src/components/UncontrolledTable/components/TableButton/TableButton.tsx

@@ -0,0 +1,83 @@
+import React, { useEffect, useRef, useState } from 'react'
+import * as S from './TableButton.style'
+import { TableList } from '../../interface'
+import { Switch } from '@mui/material'
+import useClickOutside from '../../../../hooks/useClickOutside'
+
+interface TableButtonProps {
+  children: React.ReactNode
+  theme: 'menu' | 'config'
+  list?: {
+    options: TableList[]
+    toggleableList?: boolean
+    closeOnClick?: boolean
+  }
+  onClick?: () => void
+  disabled?: boolean
+}
+
+const TableButton = (props: TableButtonProps) => {
+  const { children, theme, list, disabled, onClick } = props
+  const [isOpen, setIsOpen] = useState(false)
+  const TableListItemRef = useRef<HTMLDivElement>(null)
+  const ListRef = useRef<HTMLDivElement>(null)
+  const [isOutside, setIsOutside] = useState<boolean>(true)
+
+  useClickOutside(TableListItemRef, () => {
+    if (isOpen) setIsOpen(false)
+  })
+
+  useEffect(() => {
+    if (isOpen && ListRef.current) {
+      const listRect = ListRef.current.getBoundingClientRect()
+      const viewportWidth = window.innerWidth
+
+      setIsOutside(listRect.right < viewportWidth)
+
+      return () => {
+        setIsOutside(true)
+      }
+    }
+  }, [isOpen])
+
+  return (
+    <S.TableButtonContainer ref={TableListItemRef} $disabled={disabled}>
+      <S.TableButton
+        ref={TableListItemRef}
+        $config={theme === 'config'}
+        $list={!!list}
+        $disabled={disabled}
+        onClick={() => {
+          setIsOpen(!isOpen)
+          if (!list) onClick?.()
+        }}
+      >
+        <S.TableLabel>{children}</S.TableLabel>
+      </S.TableButton>
+      {list && (
+        <S.TableList ref={ListRef} $position={isOutside ? 'left' : 'right'} $visible={isOpen}>
+          {list?.options.map((item, index) => (
+            <S.TableListItem
+              key={index}
+              onClick={() => {
+                item.onClick?.(item.id)
+                if (list.closeOnClick) setIsOpen(false)
+              }}
+              $disabled={item.disabled}
+            >
+              <span>{item.label}</span>
+              {list.toggleableList && (
+                <Switch
+                  size="small"
+                  checked={typeof item.checked === 'function' ? item.checked?.() : item.checked}
+                />
+              )}
+            </S.TableListItem>
+          ))}
+        </S.TableList>
+      )}
+    </S.TableButtonContainer>
+  )
+}
+
+export default TableButton

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

@@ -0,0 +1,26 @@
+import styled from 'styled-components'
+
+export const Header = styled.div`
+  display: flex;
+  padding: 10px 0;
+  border-bottom: 1px solid #e0e0e0;
+  justify-content: space-between;
+`
+
+export const HeaderMenus = styled.div`
+  display: flex;
+  gap: 10px;
+  align-items: center;
+`
+
+export const BtnColumns = styled.div`
+  display: flex;
+  gap: 5px;
+  align-items: center;
+`
+
+export const HeaderConfigs = styled.div`
+  display: flex;
+  gap: 10px;
+  align-items: center;
+`

package/src/components/UncontrolledTable/components/header/header.tsx

@@ -0,0 +1,85 @@
+import React, { useCallback, useEffect, useMemo } from 'react'
+import { Table } from '@tanstack/react-table'
+import TableButton from '../TableButton/TableButton'
+import TableChartIcon from '@mui/icons-material/TableChart'
+
+import * as S from './header.styles'
+import { TableButton as TypeTableButton } from '../../interface'
+
+interface HeaderProps {
+  table: Table<unknown>
+  menus?: TypeTableButton[]
+  configs?: TypeTableButton[]
+  labels: {
+    columns: string
+  }
+  hideColumns?: string[]
+  onColumnVisibilityChange?: (column: string, value: boolean) => void
+}
+
+const Header = (props: HeaderProps) => {
+  const { table, menus, configs, labels, hideColumns, onColumnVisibilityChange } = props
+
+  useEffect(() => {
+    if (!hideColumns) return
+    table
+      .getAllLeafColumns()
+      .filter((column: any) => hideColumns.includes(column.id))
+      .forEach((column: any) => column.toggleVisibility(false))
+  }, [hideColumns, table])
+
+  const _tableFields = useCallback(() => {
+    return table.getAllLeafColumns().map((column: any) => ({
+      id: column.id,
+      label: column.columnDef.header || column.id,
+      onClick: () => {
+        const isVisible = !column.getIsVisible()
+        column.toggleVisibility(isVisible)
+        onColumnVisibilityChange?.(column.id, isVisible)
+      },
+      checked: () => column.getIsVisible(),
+    }))
+  }, [table])
+
+  const _menus = useMemo(() => {
+    return menus
+  }, [menus])
+
+  const _configs = useMemo(() => {
+    const _fields: TypeTableButton = {
+      render: () => (
+        <S.BtnColumns>
+          <TableChartIcon style={{ fontSize: '1rem' }} />
+          {labels.columns}
+        </S.BtnColumns>
+      ),
+      list: {
+        options: _tableFields(),
+        toggleableList: true,
+        
+      },
+    }
+    return [...(configs || []), _fields]
+  }, [configs])
+
+  return (
+    <S.Header>
+      <S.HeaderMenus>
+        {_menus?.map((menu, index) => (
+          <TableButton key={index} theme="menu" onClick={() => menu.onClick?.()} list={menu.list} disabled={menu.disabled}>
+            {menu.render()}
+          </TableButton>
+        ))}
+      </S.HeaderMenus>
+      <S.HeaderConfigs>
+        {_configs?.map((config, index) => (
+          <TableButton key={index} theme="config" onClick={() => config.onClick?.()} list={config.list} disabled={config.disabled}>
+            {config.render()}
+          </TableButton>
+        ))}
+      </S.HeaderConfigs>
+    </S.Header>
+  )
+}
+
+export default Header

package/src/components/UncontrolledTable/components/index.tsx

@@ -1,13 +1,16 @@
-import Pagination from "./pagination";
-import Header from "./header"
+import Pagination from "./pagination/pagination";
+import Header from "./header/header"
 import SimpleRow from "./row/SimpleRow";
 import DraggableRow from "./row/DraggableRow";
 import RowDragHandleCell from "./row/RowDragHandleCell";
+import TableButton from "./TableButton/TableButton";
+
 
 export {
   Pagination,
   Header,
   SimpleRow,
   DraggableRow,
-  RowDragHandleCell
+  RowDragHandleCell,
+  TableButton
 }

package/src/components/UncontrolledTable/components/pagination/{index.tsx → pagination.tsx}

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Pagination as MuiPagination, PaginationItem } from '@mui/material';
-import * as S from './styles';
+import * as S from './pagination.styles';
 
 interface PaginationProps {
   count: number;