lecom-ui 4.1.5 → 4.1.7

package/dist/components/DataTable/DataTable.js

@@ -6,8 +6,6 @@ import { Skeleton } from '../Skeleton/Skeleton.js';
 import { buildColumns } from './DataTable.utils.js';
 
 function DataTable({
-  columnFullSize,
-  fixedColumns,
   isLoading,
   columns,
   data,
@@ -25,10 +23,7 @@ function DataTable({
     onSortingChange: setSorting,
     getSortedRowModel: getSortedRowModel(),
     state: {
-      sorting,
-      columnPinning: {
-        left: fixedColumns || []
-      }
+      sorting
     }
   });
   const styleDataTableContainer = () => ({
@@ -41,15 +36,30 @@ function DataTable({
     }
     return /* @__PURE__ */ React.createElement(Pagination, { ...pagination });
   };
+  const styleColumn = (meta) => ({
+    width: meta.width
+  });
+  const getFixed = (meta) => meta.fixed;
   const arrSkeleton = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];
   React.useEffect(() => {
     if (!isLoading) {
-      console.log(
-        isLoading,
-        document.querySelector(
-          `table#data-table tbody tr:nth-child(50) td:nth-child(2)`
-        )
-      );
+      const listRows = document.querySelectorAll(`table#data-table tr`);
+      listRows.forEach((listRow, listRowIndex) => {
+        const rowsElem = listRow.querySelectorAll("[data-fixed]");
+        rowsElem.forEach((rowElem, rowElemIndex) => {
+          const beforeElem = rowsElem[rowElemIndex - 1];
+          const currentElem = rowElem;
+          const beforeElemWidth = beforeElem?.getBoundingClientRect()?.width ?? 0;
+          const beforeElemLeft = beforeElem?.style?.left ? Number(beforeElem.style.left.replace(/px/g, "")) : 0;
+          const lastColumnFixed = rowsElem.length - 1 === rowElemIndex;
+          const lastRow = listRows.length - 1 === listRowIndex;
+          const currentElemIsTh = currentElem.tagName === "TH";
+          const boxShadow = lastColumnFixed ? `#c9c9c9 -0.5px ${lastRow ? "0px" : currentElemIsTh ? "-1.5px" : "-0.5px"} 0px inset` : `#c9c9c9 0px ${lastRow ? "0px" : currentElemIsTh ? "-1.5px" : "-0.5px"} 0px inset`;
+          currentElem.style.position = "sticky";
+          currentElem.style.left = `${beforeElemWidth + beforeElemLeft}px`;
+          currentElem.style.boxShadow = boxShadow;
+        });
+      });
     }
   }, [isLoading]);
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
@@ -74,7 +84,14 @@ function DataTable({
         "th",
         {
           key: header.id,
-          className: "h-12 px-4 [&:has([role=checkbox])]:pr-0 bg-white shadow-[0_-1.5px_0px_0px_#c9c9c9_inset] text-left"
+          className: "h-12 px-4 [&:has([role=checkbox])]:pr-0 bg-white shadow-[0_-1.5px_0px_0px_#c9c9c9_inset] text-left",
+          "data-header": header.id,
+          "data-fixed": getFixed(
+            header.column.columnDef.meta
+          ),
+          style: styleColumn(
+            header.column.columnDef.meta
+          )
         },
         header.isPlaceholder ? null : flexRender(
           header.column.columnDef.header,
@@ -91,7 +108,14 @@ function DataTable({
           "td",
           {
             key: cell.id,
-            className: "p-4 py-0 h-10 [&:has([role=checkbox])]:pr-0 transition-colors bg-white shadow-[0_-0.5px_0px_0px_#c9c9c9_inset] text-left"
+            className: "p-4 py-0 h-10 [&:has([role=checkbox])]:pr-0 transition-colors bg-white shadow-[0_-0.5px_0px_0px_#c9c9c9_inset] text-left",
+            "data-column": cell.column.id,
+            "data-fixed": getFixed(
+              cell.column.columnDef.meta
+            ),
+            style: styleColumn(
+              cell.column.columnDef.meta
+            )
           },
           flexRender(
             cell.column.columnDef.cell,

package/dist/components/DataTable/DataTable.utils.js

@@ -87,6 +87,10 @@ function buildColumns({
         return externalColumn.render;
       }
       return /* @__PURE__ */ React.createElement(Typography, { variant: "body-large-400", textColor: "text-grey-800" }, row.getValue(externalColumn.key));
+    },
+    meta: {
+      width: externalColumn.width,
+      fixed: externalColumn.fixed
     }
   }));
   return mappedColumns;

package/dist/components/RadioGroup/RadioGroup.js

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { cn } from '../../lib/utils.js';
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import { Circle } from 'lucide-react';
+
+const RadioGroup = React.forwardRef(({ className, disabled, ...props }, ref) => /* @__PURE__ */ React.createElement(
+  RadioGroupPrimitive.Root,
+  {
+    className: cn("grid gap-2", className),
+    disabled,
+    ...props,
+    ref
+  }
+));
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
+const RadioGroupItem = React.forwardRef(({ className, children, disabled, ...props }, ref) => {
+  const id = React.useId();
+  return /* @__PURE__ */ React.createElement("div", { className: "flex items-center space-x-2" }, /* @__PURE__ */ React.createElement(
+    RadioGroupPrimitive.Item,
+    {
+      ref,
+      className: cn(
+        "peer relative aspect-square h-5 w-5 rounded-full border-2 border-grey-400 transition-all hover:border-grey-500 active:border-grey-700 disabled:cursor-not-allowed disabled:border-grey-300 focus-visible:outline-none focus-visible:before:absolute focus-visible:before:-z-10 focus-visible:before:top-1/2 focus-visible:before:left-1/2 focus-visible:before:transform focus-visible:before:-translate-x-1/2 focus-visible:before:-translate-y-1/2 focus-visible:before:w-10 focus-visible:before:h-10 focus-visible:before:rounded-full focus-visible:before:bg-blue-100 data-[state=checked]:border-blue-600 data-[state=checked]:text-blue-600 data-[state=checked]:hover:border-blue-700 data-[state=checked]:hover:text-blue-700 data-[state=checked]:active:border-blue-800 data-[state=checked]:active:text-blue-800 data-[state=checked]:disabled:border-blue-400 data-[state=checked]:disabled:text-blue-400",
+        className
+      ),
+      disabled,
+      ...props,
+      id
+    },
+    /* @__PURE__ */ React.createElement(RadioGroupPrimitive.Indicator, { className: "flex items-center justify-center" }, /* @__PURE__ */ React.createElement(Circle, { className: "h-2.5 w-2.5 fill-current text-current" }))
+  ), /* @__PURE__ */ React.createElement(
+    "label",
+    {
+      htmlFor: id,
+      className: "body-medium-400 leading-none cursor-pointer peer-disabled:cursor-not-allowed peer-disabled:opacity-50 transition-opacity"
+    },
+    children
+  ));
+});
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
+
+export { RadioGroup, RadioGroupItem };

package/dist/index.d.ts

@@ -11,6 +11,7 @@ import { CustomStyles as CustomStyles$2 } from '@/components/Button';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import * as SwitchPrimitives from '@radix-ui/react-switch';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
 import { InitOptions } from 'i18next';
 export { TFunction, default as i18n } from 'i18next';
@@ -349,6 +350,8 @@ interface Column<TData, TValue> {
     key: string;
     title?: (({ table, column }: ColumnTitle<TData, TValue>) => React.ReactNode) | React.ReactNode;
     enableSelect?: boolean;
+    width?: number | string;
+    fixed?: string;
     render?: (({ value, row }: ColumnRender<TData, TValue>) => React.ReactNode) | React.ReactNode;
     onSort?: ({ table, column }: ColumnSort<TData, TValue>) => void;
     checkedHeader?: ({ table, column }: CheckedHeader<TData, TValue>) => boolean;
@@ -357,8 +360,6 @@ interface Column<TData, TValue> {
     onCheckedCellChange?: ({ row, value }: CheckedCellChange<TData>) => void;
 }
 interface DataTableProps<TData, TValue> {
-    columnFullSize?: string;
-    fixedColumns?: string[];
     isLoading?: boolean;
     columns: Column<TData, TValue>[];
     data: TData[];
@@ -389,8 +390,9 @@ interface BuildCellSelect<TData, TValue> {
     checkedCell: Column<TData, TValue>['checkedCell'];
     onCheckedCellChange: Column<TData, TValue>['onCheckedCellChange'];
 }
+type Meta = Record<string, string | number>;
 
-declare function DataTable<TData, TValue>({ columnFullSize, fixedColumns, isLoading, columns, data, noResults, pagination, vwDiff, vhDiff, onIsSelected, }: DataTableProps<TData, TValue>): React$1.JSX.Element;
+declare function DataTable<TData, TValue>({ isLoading, columns, data, noResults, pagination, vwDiff, vhDiff, onIsSelected, }: DataTableProps<TData, TValue>): React$1.JSX.Element;
 declare namespace DataTable {
     var displayName: string;
 }
@@ -691,6 +693,9 @@ declare const Typography: {
     displayName: string;
 };
 
+declare const RadioGroup: React$1.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const RadioGroupItem: React$1.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupItemProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+
 declare const ScrollArea: React$1.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 declare const ScrollBar: React$1.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaScrollbarProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 
@@ -734,4 +739,4 @@ declare const fonts: {
     ibm: string[];
 };
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, type BgColor, type BuildCellSelect, type BuildColumns, type BuildHeaderSelect, Button, type ButtonProps, CadastroFacil, type CadastroFacilProps, type CalloutNotificationProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, type CheckboxProps, type CheckedCell, type CheckedCellChange, type CheckedHeader, type CheckedHeaderChange, type Color, type ColorToken, type Column, type ColumnRender, type ColumnSort, type ColumnTitle, type CustomStyles$1 as CustomStyles, DataTable, type DataTableProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, type FillColor, type Fonts, type Header, type HeaderProps, type InlineNotificationProps, Layout, type LayoutProps, LogoLecom, LogoLecomBrand, type LogoLecomBrandProps, type LogoLecomProps, ModoTeste, type ModoTesteProps, Notification, type NotificationProps, Pagination, PaginationContent, PaginationEllipsis, PaginationFirst, PaginationIndex, PaginationItem, PaginationLast, PaginationNext, PaginationPrevious, type PaginationProps, Popover, PopoverContent, PopoverTrigger, type Row, Rpa, type RpaProps, ScrollArea, ScrollBar, type SideBarProps, Skeleton, Spin, type SpinProps, Switch, TOAST_REMOVE_DELAY, Tag, type TagProps, type TextColor, type ToastNotificationProps, type ToasterToast, Tooltip, TooltipArrow, TooltipContent, type TooltipContentProps, TooltipPortal, TooltipProvider, TooltipTrigger, Translations, TypeMessageNotification, Typography, type TypographyProps, type UsePaginationItem, accordionVariants, buttonVariants, colors, fonts, getPositionClass, initializeI18n, notificationVariants, reducer, tagVariants, toast, typographyVariants, useIsMobile, useNotificationToast, usePagination, useSidebar };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, type BgColor, type BuildCellSelect, type BuildColumns, type BuildHeaderSelect, Button, type ButtonProps, CadastroFacil, type CadastroFacilProps, type CalloutNotificationProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, type CheckboxProps, type CheckedCell, type CheckedCellChange, type CheckedHeader, type CheckedHeaderChange, type Color, type ColorToken, type Column, type ColumnRender, type ColumnSort, type ColumnTitle, type CustomStyles$1 as CustomStyles, DataTable, type DataTableProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, type FillColor, type Fonts, type Header, type HeaderProps, type InlineNotificationProps, Layout, type LayoutProps, LogoLecom, LogoLecomBrand, type LogoLecomBrandProps, type LogoLecomProps, type Meta, ModoTeste, type ModoTesteProps, Notification, type NotificationProps, Pagination, PaginationContent, PaginationEllipsis, PaginationFirst, PaginationIndex, PaginationItem, PaginationLast, PaginationNext, PaginationPrevious, type PaginationProps, Popover, PopoverContent, PopoverTrigger, RadioGroup, RadioGroupItem, type Row, Rpa, type RpaProps, ScrollArea, ScrollBar, type SideBarProps, Skeleton, Spin, type SpinProps, Switch, TOAST_REMOVE_DELAY, Tag, type TagProps, type TextColor, type ToastNotificationProps, type ToasterToast, Tooltip, TooltipArrow, TooltipContent, type TooltipContentProps, TooltipPortal, TooltipProvider, TooltipTrigger, Translations, TypeMessageNotification, Typography, type TypographyProps, type UsePaginationItem, accordionVariants, buttonVariants, colors, fonts, getPositionClass, initializeI18n, notificationVariants, reducer, tagVariants, toast, typographyVariants, useIsMobile, useNotificationToast, usePagination, useSidebar };

package/dist/index.js

@@ -20,6 +20,7 @@ export { Switch } from './components/Switch/Switch.js';
 export { Tag, tagVariants } from './components/Tag/Tag.js';
 export { Tooltip, TooltipArrow, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger } from './components/Tooltip/Tooltip.js';
 export { Typography, typographyVariants } from './components/Typography/Typography.js';
+export { RadioGroup, RadioGroupItem } from './components/RadioGroup/RadioGroup.js';
 export { ScrollArea, ScrollBar } from './components/ScrollArea/ScrollArea.js';
 export { Spin } from './components/Spin/Spin.js';
 export { useSidebar } from './components/Sidebar/Sidebar.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lecom-ui",
-  "version": "4.1.5",
+  "version": "4.1.7",
   "license": "MIT",
   "type": "module",
   "module": "dist/index.js",