lecom-ui 5.2.81 → 5.2.82

package/README.md

@@ -1 +1 @@
-lecom-ui
+lecom-ui

package/dist/components/Collapse/Collapse.js

@@ -0,0 +1,94 @@
+import * as React from 'react';
+import { cn } from '../../lib/utils.js';
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import { cva } from 'class-variance-authority';
+import { ChevronRight } from 'lucide-react';
+
+const collapseTriggerVariants = cva(
+  "flex items-center justify-between w-full transition-all text-left outline-none data-[state=open]:font-semibold",
+  {
+    variants: {
+      size: {
+        small: "text-sm py-1.5 px-4 min-h-8",
+        medium: "text-base py-2.5 px-4 min-h-10",
+        large: "text-lg py-3 px-4 min-h-12"
+      },
+      ghost: {
+        true: "bg-transparent border-none",
+        false: "border-t-none border-grey-400"
+      }
+    },
+    defaultVariants: {
+      size: "large",
+      ghost: false
+    }
+  }
+);
+const CollapseRoot = AccordionPrimitive.Root;
+const CollapseItem = AccordionPrimitive.Item;
+const CollapsePanel = React.forwardRef(
+  ({
+    header,
+    children,
+    extra,
+    expandIconPosition = "start",
+    size = "large",
+    ghost = false,
+    disabled = false,
+    className,
+    ...props
+  }, ref) => /* @__PURE__ */ React.createElement(
+    CollapseItem,
+    {
+      ref,
+      ...props,
+      className: cn(
+        "group w-full",
+        disabled && "pointer-events-none opacity-50",
+        className
+      )
+    },
+    /* @__PURE__ */ React.createElement(AccordionPrimitive.Header, { asChild: true }, /* @__PURE__ */ React.createElement(
+      AccordionPrimitive.Trigger,
+      {
+        disabled,
+        className: cn(
+          collapseTriggerVariants({ size, ghost }),
+          "flex gap-2 items-center text-left font-normal"
+        )
+      },
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: cn(
+            "flex flex-1 items-center justify-between gap-4 w-full",
+            expandIconPosition === "end" ? "flex-row-reverse" : ""
+          )
+        },
+        /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 truncate" }, /* @__PURE__ */ React.createElement(
+          "span",
+          {
+            className: "flex items-center justify-center flex-shrink-0 min-w-4 min-h-4 transition-transform duration-300 group-data-[state=open]:rotate-90 text-grey-700 text-lg select-none font-normal"
+          },
+          /* @__PURE__ */ React.createElement(ChevronRight, { className: "size-4" })
+        ), /* @__PURE__ */ React.createElement("span", { className: "font-normal" }, header)),
+        extra && /* @__PURE__ */ React.createElement("div", { className: "text-sm text-grey-500" }, extra)
+      )
+    )),
+    /* @__PURE__ */ React.createElement(
+      AccordionPrimitive.Content,
+      {
+        className: cn(
+          "overflow-hidden data-[state=open]:animate-accordion-down data-[state=closed]:animate-accordion-up"
+        )
+      },
+      /* @__PURE__ */ React.createElement("div", { className: "text-sm text-grey-800 pt-2 pb-4 px-4" }, children)
+    )
+  )
+);
+CollapsePanel.displayName = "CollapsePanel";
+const Collapse = Object.assign(CollapseRoot, {
+  Panel: CollapsePanel
+});
+
+export { Collapse, collapseTriggerVariants };

package/dist/components/Combobox/Combobox.js

@@ -0,0 +1,128 @@
+import * as React from 'react';
+import { ChevronUpIcon, ChevronDownIcon } from 'lucide-react';
+import { cn } from '../../lib/utils.js';
+import { Button } from '../Button/Button.js';
+import { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem } from '../Command/Command.js';
+import { Popover, PopoverTrigger, PopoverContent } from '../Popover/Popover.js';
+import { Typography } from '../Typography/Typography.js';
+
+function Combobox({
+  options,
+  value,
+  onChange,
+  placeholder = "Selecione...",
+  disabled = false,
+  notFoundContent = "Nenhuma op\xE7\xE3o encontrada.",
+  status = "default",
+  searchTerm = "Pesquisar...",
+  triggerClassName,
+  contentClassName
+}) {
+  const [open, setOpen] = React.useState(false);
+  const [search, setSearch] = React.useState("");
+  const filterOptions = React.useCallback(
+    (opts) => {
+      const searchLower = search.toLowerCase();
+      return opts.map((item) => {
+        if ("options" in item) {
+          const filtered = item.options.filter(
+            (opt) => opt.label.toLowerCase().includes(searchLower) || opt.value.toLowerCase().includes(searchLower)
+          );
+          if (!filtered.length) return null;
+          return { ...item, options: filtered };
+        }
+        return item.label.toLowerCase().includes(searchLower) || item.value.toLowerCase().includes(searchLower) ? item : null;
+      }).filter(Boolean);
+    },
+    [search]
+  );
+  const filteredOptions = React.useMemo(
+    () => !search ? options : filterOptions(options),
+    [options, search, filterOptions]
+  );
+  const selectedLabel = options.flatMap((opt) => "options" in opt ? opt.options : [opt]).find((opt) => opt.value === value)?.label || placeholder;
+  React.useEffect(() => {
+    if (!open) setSearch("");
+  }, [open]);
+  return /* @__PURE__ */ React.createElement(Popover, { open, onOpenChange: setOpen }, /* @__PURE__ */ React.createElement(PopoverTrigger, { asChild: true, className: cn(contentClassName) }, /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      type: "button",
+      role: "combobox",
+      "aria-expanded": open,
+      className: cn(
+        triggerClassName,
+        "w-full h-10 bg-white rounded-md px-3 text-left shadow-sm flex items-center justify-between transition",
+        status === "error" ? "border border-red-500 hover:ring-1 hover:ring-red-500 focus:ring-1 focus:ring-red-500" : "border border-gray-300 hover:ring-1 hover:ring-blue-600 focus:ring-1 focus:ring-blue-600",
+        !value && "text-gray-400",
+        disabled && "opacity-50 pointer-events-none",
+        "hover:bg-white focus:!bg-white active:!bg-white"
+      ),
+      disabled
+    },
+    /* @__PURE__ */ React.createElement(
+      "span",
+      {
+        className: cn(
+          value ? "text-black" : "text-gray-400",
+          "font-normal truncate max-w-[calc(100%-2.5rem)]"
+        )
+      },
+      /* @__PURE__ */ React.createElement(Typography, { variant: "body-medium-400" }, selectedLabel)
+    ),
+    open ? /* @__PURE__ */ React.createElement(
+      ChevronUpIcon,
+      {
+        className: "ml-2 h-4 w-4 shrink-0 text-gray-400",
+        color: "black"
+      }
+    ) : /* @__PURE__ */ React.createElement(
+      ChevronDownIcon,
+      {
+        className: "ml-2 h-4 w-4 shrink-0 text-gray-400",
+        color: "black"
+      }
+    )
+  )), /* @__PURE__ */ React.createElement(PopoverContent, { className: "w-[var(--radix-popover-trigger-width)] p-0" }, /* @__PURE__ */ React.createElement(Command, null, /* @__PURE__ */ React.createElement(
+    CommandInput,
+    {
+      placeholder: searchTerm,
+      value: search,
+      onValueChange: setSearch
+    }
+  ), /* @__PURE__ */ React.createElement(CommandList, null, /* @__PURE__ */ React.createElement(CommandEmpty, null, notFoundContent), filteredOptions.map(
+    (item, idx) => "options" in item ? /* @__PURE__ */ React.createElement(CommandGroup, { key: `${item.label}-${idx}`, heading: item.label }, item.options.map((opt) => /* @__PURE__ */ React.createElement(
+      CommandItem,
+      {
+        key: opt.value,
+        onSelect: () => {
+          if (opt.disabled) return;
+          onChange(opt.value === value ? null : opt.value);
+          setOpen(false);
+        },
+        className: cn(
+          opt.value === value ? "bg-blue-100 font-semibold text-black" : "hover:bg-gray-100",
+          opt.disabled && "opacity-50 pointer-events-none"
+        )
+      },
+      opt.label
+    ))) : /* @__PURE__ */ React.createElement(
+      CommandItem,
+      {
+        key: item.value,
+        onSelect: () => {
+          if (item.disabled) return;
+          onChange(item.value === value ? null : item.value);
+          setOpen(false);
+        },
+        className: cn(
+          item.value === value ? "bg-blue-100 font-semibold text-black" : "hover:bg-gray-100",
+          item.disabled && "opacity-50 pointer-events-none"
+        )
+      },
+      item.label
+    )
+  )))));
+}
+
+export { Combobox };

package/dist/components/CustomDivider/CustomDivider.js

@@ -0,0 +1,207 @@
+import * as React from 'react';
+import { useFormContext, Controller } from 'react-hook-form';
+import { cn } from '../../lib/utils.js';
+import { Button } from '../Button/Button.js';
+
+function DividerLine({
+  dashed,
+  plain,
+  isGroupDivider,
+  isActive,
+  className,
+  style
+}) {
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: cn(
+        "w-full",
+        isGroupDivider ? "my-4" : "my-2",
+        isActive ? "opacity-100" : "opacity-50",
+        className
+      ),
+      style
+    },
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: cn(
+          "w-full border-t",
+          dashed ? "border-dashed" : "border-solid",
+          plain ? "border-gray-200" : "border-gray-300"
+        )
+      }
+    )
+  );
+}
+function OptionButtons({
+  value,
+  onChange,
+  isActive,
+  plain,
+  optionLabels,
+  ButtonComponent,
+  buttonSize,
+  buttonClassName
+}) {
+  const [labelAnd, labelOr] = optionLabels;
+  const Btn = ButtonComponent;
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: cn(
+        "relative z-10 inline-flex overflow-hidden",
+        plain ? "bg-white" : "rounded-md border border-gray-300 bg-white shadow-sm"
+      )
+    },
+    /* @__PURE__ */ React.createElement(
+      Btn,
+      {
+        type: "button",
+        variant: "ghost",
+        color: "grey",
+        size: buttonSize,
+        onClick: () => onChange("AND"),
+        disabled: !isActive,
+        className: cn(
+          "px-4 py-1 text-sm transition !rounded-none",
+          value === "AND" ? "bg-blue-600 text-white hover:bg-blue-500" : "bg-white text-gray-700 hover:bg-blue-50",
+          buttonClassName
+        )
+      },
+      labelAnd
+    ),
+    /* @__PURE__ */ React.createElement(
+      Btn,
+      {
+        type: "button",
+        variant: "ghost",
+        color: "grey",
+        size: buttonSize,
+        onClick: () => onChange("OR"),
+        disabled: !isActive,
+        className: cn(
+          "px-4 py-1 text-sm transition !rounded-none",
+          value === "OR" ? "bg-blue-600 text-white hover:bg-blue-500" : "bg-white text-gray-700 hover:bg-blue-50",
+          buttonClassName
+        )
+      },
+      labelOr
+    )
+  );
+}
+function CustomDivider({
+  name,
+  control,
+  isActive = true,
+  isGroupDivider = false,
+  orientation = "center",
+  dashed = false,
+  plain = false,
+  lineOnly = false,
+  optionLabels = ["E", "OU"],
+  ButtonComponent = Button,
+  buttonSize = "medium",
+  buttonClassName,
+  className,
+  style,
+  children
+}) {
+  const formContext = useFormContext();
+  const controlToUse = control ?? formContext?.control;
+  const justifyMap = {
+    left: "justify-start",
+    center: "justify-center",
+    right: "justify-end"
+  };
+  if (lineOnly && !children) {
+    return /* @__PURE__ */ React.createElement(
+      DividerLine,
+      {
+        dashed,
+        plain,
+        isGroupDivider,
+        isActive,
+        className,
+        style
+      }
+    );
+  }
+  if (children) {
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: cn(
+          "relative w-full flex items-center",
+          isGroupDivider ? "my-4" : "my-2",
+          isActive ? "opacity-100" : "opacity-50",
+          justifyMap[orientation],
+          className
+        ),
+        style
+      },
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: cn(
+            "absolute inset-x-0 border-t",
+            dashed ? "border-dashed" : "border-solid",
+            plain ? "border-gray-200" : "border-gray-300"
+          )
+        }
+      ),
+      /* @__PURE__ */ React.createElement("span", { className: "relative z-10 px-2 bg-white" }, children)
+    );
+  }
+  if (!name) {
+    throw new Error(
+      "CustomDivider: prop `name` \xE9 obrigat\xF3ria se `lineOnly` for false."
+    );
+  }
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: cn(
+        "relative w-full flex items-center",
+        isGroupDivider ? "my-4" : "my-2",
+        isActive ? "opacity-100" : "opacity-50",
+        justifyMap[orientation],
+        className
+      ),
+      style
+    },
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: cn(
+          "absolute inset-x-0 border-t",
+          dashed ? "border-dashed" : "border-solid",
+          plain ? "border-gray-200" : "border-gray-300"
+        )
+      }
+    ),
+    /* @__PURE__ */ React.createElement(
+      Controller,
+      {
+        name,
+        control: controlToUse,
+        render: ({ field: { value, onChange } }) => /* @__PURE__ */ React.createElement(
+          OptionButtons,
+          {
+            value,
+            onChange,
+            isActive,
+            plain,
+            optionLabels,
+            ButtonComponent,
+            buttonSize,
+            buttonClassName
+          }
+        )
+      }
+    )
+  );
+}
+CustomDivider.displayName = "CustomDivider";
+
+export { CustomDivider };

package/dist/components/DataTable/DataTable.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { cn } from '../../lib/utils.js';
-import { useReactTable, getFilteredRowModel, getSortedRowModel, getCoreRowModel } from '@tanstack/react-table';
+import { useReactTable, getSortedRowModel, getCoreRowModel } from '@tanstack/react-table';
 import { Pagination } from '../Pagination/Pagination.js';
 import { ScrollArea, ScrollBar } from '../ScrollArea/ScrollArea.js';
 import { buildColumns } from './DataTable.utils.js';
@@ -21,39 +21,16 @@ function DataTable({
   onIsSelected
 }) {
   const [sorting, setSorting] = React.useState([]);
-  const [columnFilters, setColumnFilters] = React.useState(
-    []
-  );
-  const memoizedColumns = React.useMemo(
-    () => buildColumns({ columns, size }),
-    [columns, size]
-  );
   const table = useReactTable({
     data,
-    columns: memoizedColumns,
-    onColumnFiltersChange: setColumnFilters,
+    columns: buildColumns({ columns, size }),
     getCoreRowModel: getCoreRowModel(),
     onSortingChange: setSorting,
     getSortedRowModel: getSortedRowModel(),
-    getFilteredRowModel: getFilteredRowModel(),
     state: {
-      sorting,
-      columnFilters
+      sorting
     }
   });
-  React.useEffect(() => {
-    if (!table) return;
-    columns.forEach((column) => {
-      const value = column.filterProps?.value;
-      const columnKey = column.key;
-      if (value !== void 0) {
-        const column2 = table.getColumn(columnKey);
-        if (column2) {
-          column2.setFilterValue(value);
-        }
-      }
-    });
-  }, [columns, table]);
   const styleDataTableContainer = () => ({
     width: vwDiff ? `calc(100vw - ${vwDiff}px)` : "100%",
     height: vhDiff ? `calc(100vh - ${vhDiff}px)` : "100%"

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

@@ -1,8 +1,7 @@
 import * as React from 'react';
-import { cn } from '../../lib/utils.js';
+import { clsx } from 'clsx';
 import { ArrowUpDown } from 'lucide-react';
 import { Checkbox } from '../Checkbox/Checkbox.js';
-import { Input } from '../Input/Input.js';
 import { Typography } from '../Typography/Typography.js';
 
 function buildHeaderSelect({
@@ -54,80 +53,33 @@ function buildColumns({
         return null;
       }
       const hasSort = !!externalColumn.onSort || !!externalColumn.onSortClient;
-      const isFilterable = !!externalColumn.filterable;
-      const filterInputValue = column.getFilterValue() ?? "";
-      const handleFilterInputChange = (event) => {
-        const updatedValue = event.target.value;
-        column.setFilterValue(updatedValue);
-        if (externalColumn?.filterProps?.setFilterValue) {
-          externalColumn.filterProps.setFilterValue(updatedValue);
-        }
-      };
       const title = typeof externalColumn.title === "function" ? externalColumn.title({ table, column }) : externalColumn.title;
-      function renderFilterInput() {
-        if (isFilterable && column.getCanFilter()) {
-          return /* @__PURE__ */ React.createElement(
-            "div",
-            {
-              className: cn(
-                "ml-2 w-full flex items-center justify-start",
-                externalColumn.filterProps?.className
-              )
-            },
-            /* @__PURE__ */ React.createElement(
-              Input,
-              {
-                ...externalColumn.filterProps?.inputProps,
-                type: "text",
-                value: filterInputValue,
-                onChange: handleFilterInputChange,
-                placeholder: externalColumn.filterProps?.placeholder
-              }
-            )
-          );
-        }
-        return null;
-      }
-      function renderSortArrow() {
-        if (hasSort) {
-          return /* @__PURE__ */ React.createElement(
-            ArrowUpDown,
-            {
-              size: 16,
-              className: "ml-1 text-grey-400 group-hover:text-grey-950 hover:cursor-pointer",
-              onClick: (e) => {
-                e.stopPropagation();
-                const handler = column.getToggleSortingHandler?.();
-                if (handler) handler(e);
-                else if (externalColumn.onSort) {
-                  externalColumn.onSort({ table, column });
-                }
-              }
-            }
-          );
-        }
-        return null;
-      }
       return /* @__PURE__ */ React.createElement(
         "div",
         {
-          className: cn(
+          className: clsx(
             "group flex items-center gap-1",
             hasSort && "hover:cursor-pointer"
-          )
+          ),
+          onClick: () => externalColumn.onSort?.({ table, column })
         },
         typeof externalColumn.title === "string" ? /* @__PURE__ */ React.createElement(
           Typography,
           {
             variant: size === "small" ? "body-medium-500" : "body-large-500",
             textColor: "text-grey-950",
-            className: "whitespace-normal break-words max-sm:truncate",
+            className: "truncate",
             title: externalColumn.title
           },
           externalColumn.title
         ) : title,
-        renderSortArrow(),
-        renderFilterInput()
+        hasSort && /* @__PURE__ */ React.createElement(
+          ArrowUpDown,
+          {
+            size: 16,
+            className: "text-grey-400 group-hover:text-grey-950"
+          }
+        )
       );
     },
     cell: ({ row }) => {
@@ -157,11 +109,6 @@ function buildColumns({
         row.getValue(externalColumn.key)
       );
     },
-    filterFn: externalColumn.filterable ? (row, columnId, filterValue) => {
-      const rawValue = row.getValue(columnId);
-      const value = typeof rawValue === "string" ? rawValue : String(rawValue ?? "");
-      return value.toLowerCase().includes(String(filterValue).toLowerCase());
-    } : void 0,
     meta: {
       width: externalColumn.width,
       fixed: externalColumn.fixed,

package/dist/components/DataTable/Table.js

@@ -54,7 +54,8 @@ function Table({
       style: styleColumn(
         header.column.columnDef.meta,
         "th"
-      )
+      ),
+      onClick: header.column.getToggleSortingHandler()
     },
     header.isPlaceholder ? null : flexRender(
       header.column.columnDef.header,