lecom-ui 5.4.41 → 5.4.43

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -65,6 +65,7 @@ function DataTable({
65
65
  manualSorting,
66
66
  enableSortingRemoval: true,
67
67
  enableMultiSort: false,
68
+ sortDescFirst: false,
68
69
  state: {
69
70
  sorting,
70
71
  expanded
@@ -1,6 +1,8 @@
1
1
  import * as React from 'react';
2
+ import { useTranslation } from 'react-i18next';
2
3
  import { ArrowUp, ArrowDown, ArrowUpDown } from 'lucide-react';
3
4
  import { Checkbox } from '../Checkbox/Checkbox.js';
5
+ import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from '../Tooltip/Tooltip.js';
4
6
  import { Typography } from '../Typography/Typography.js';
5
7
 
6
8
  function buildHeaderSelect({
@@ -35,7 +37,9 @@ function renderSortArrow({
35
37
  externalColumn,
36
38
  table
37
39
  }) {
40
+ const { t } = useTranslation();
38
41
  const sorted = column.getIsSorted();
42
+ const sortType = externalColumn.sortType || "numeric";
39
43
  const handleClick = (event) => {
40
44
  event.stopPropagation();
41
45
  const sortingHandler = column.getToggleSortingHandler?.();
@@ -57,34 +61,43 @@ function renderSortArrow({
57
61
  sortingHandler(event);
58
62
  }
59
63
  };
64
+ const getTooltipText = () => {
65
+ if (sorted === "asc") {
66
+ return sortType === "numeric" ? t("dataTable.sortDescendingNumeric") : t("dataTable.sortDescendingText");
67
+ }
68
+ if (sorted === "desc") {
69
+ return t("dataTable.sortDefault");
70
+ }
71
+ return sortType === "numeric" ? t("dataTable.sortAscendingNumeric") : t("dataTable.sortAscendingText");
72
+ };
60
73
  if (sorted === "asc") {
61
- return /* @__PURE__ */ React.createElement(
74
+ return /* @__PURE__ */ React.createElement(TooltipProvider, null, /* @__PURE__ */ React.createElement(Tooltip, null, /* @__PURE__ */ React.createElement(TooltipTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(
62
75
  ArrowUp,
63
76
  {
64
77
  size: 16,
65
78
  className: "ml-1 text-grey-950 hover:cursor-pointer",
66
79
  onClick: handleClick
67
80
  }
68
- );
81
+ )), /* @__PURE__ */ React.createElement(TooltipContent, { color: "black" }, getTooltipText())));
69
82
  }
70
83
  if (sorted === "desc") {
71
- return /* @__PURE__ */ React.createElement(
84
+ return /* @__PURE__ */ React.createElement(TooltipProvider, null, /* @__PURE__ */ React.createElement(Tooltip, null, /* @__PURE__ */ React.createElement(TooltipTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(
72
85
  ArrowDown,
73
86
  {
74
87
  size: 16,
75
88
  className: "ml-1 text-grey-950 hover:cursor-pointer",
76
89
  onClick: handleClick
77
90
  }
78
- );
91
+ )), /* @__PURE__ */ React.createElement(TooltipContent, { color: "black" }, getTooltipText())));
79
92
  }
80
- return /* @__PURE__ */ React.createElement(
93
+ return /* @__PURE__ */ React.createElement(TooltipProvider, null, /* @__PURE__ */ React.createElement(Tooltip, null, /* @__PURE__ */ React.createElement(TooltipTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(
81
94
  ArrowUpDown,
82
95
  {
83
96
  size: 16,
84
97
  className: "ml-1 text-grey-400 group-hover:text-grey-950 hover:cursor-pointer",
85
98
  onClick: handleClick
86
99
  }
87
- );
100
+ )), /* @__PURE__ */ React.createElement(TooltipContent, { color: "black" }, getTooltipText())));
88
101
  }
89
102
  function createExpandToggle(row) {
90
103
  return {
@@ -5,6 +5,7 @@ import { cn } from '../../lib/utils.js';
5
5
  import { ChevronDown, MoreHorizontal, ChevronLast, ChevronRight, ChevronLeft, ChevronFirst } from 'lucide-react';
6
6
  import { initializeI18n } from '../../i18n/index.js';
7
7
  import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from '../DropdownMenu/DropdownMenu.js';
8
+ import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from '../Tooltip/Tooltip.js';
8
9
  import { Typography } from '../Typography/Typography.js';
9
10
 
10
11
  initializeI18n();
@@ -24,76 +25,88 @@ const PaginationFirst = ({
24
25
  disabled,
25
26
  isActive,
26
27
  onClick
27
- }) => /* @__PURE__ */ React.createElement(
28
- Button,
29
- {
30
- disabled,
31
- iconButton: true,
32
- variant: "ghost",
33
- color: "grey",
34
- size: "small",
35
- onClick,
36
- className: cn(isActive && "bg-white", className)
37
- },
38
- /* @__PURE__ */ React.createElement(ChevronFirst, { size: 20 })
39
- );
28
+ }) => {
29
+ const { t } = useTranslation();
30
+ return /* @__PURE__ */ React.createElement(TooltipProvider, null, /* @__PURE__ */ React.createElement(Tooltip, null, /* @__PURE__ */ React.createElement(TooltipTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(
31
+ Button,
32
+ {
33
+ disabled,
34
+ iconButton: true,
35
+ variant: "ghost",
36
+ color: "grey",
37
+ size: "small",
38
+ onClick,
39
+ className: cn(isActive && "bg-white", className)
40
+ },
41
+ /* @__PURE__ */ React.createElement(ChevronFirst, { size: 20 })
42
+ )), /* @__PURE__ */ React.createElement(TooltipContent, { color: "black" }, t("pagination.firstPage"))));
43
+ };
40
44
  PaginationFirst.displayName = "PaginationFirst";
41
45
  const PaginationLast = ({
42
46
  className,
43
47
  disabled,
44
48
  isActive,
45
49
  onClick
46
- }) => /* @__PURE__ */ React.createElement(
47
- Button,
48
- {
49
- disabled,
50
- iconButton: true,
51
- variant: "ghost",
52
- color: "grey",
53
- size: "small",
54
- onClick,
55
- className: cn(isActive && "bg-white", className)
56
- },
57
- /* @__PURE__ */ React.createElement(ChevronLast, { size: 20 })
58
- );
50
+ }) => {
51
+ const { t } = useTranslation();
52
+ return /* @__PURE__ */ React.createElement(TooltipProvider, null, /* @__PURE__ */ React.createElement(Tooltip, null, /* @__PURE__ */ React.createElement(TooltipTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(
53
+ Button,
54
+ {
55
+ disabled,
56
+ iconButton: true,
57
+ variant: "ghost",
58
+ color: "grey",
59
+ size: "small",
60
+ onClick,
61
+ className: cn(isActive && "bg-white", className)
62
+ },
63
+ /* @__PURE__ */ React.createElement(ChevronLast, { size: 20 })
64
+ )), /* @__PURE__ */ React.createElement(TooltipContent, { color: "black" }, t("pagination.lastPage"))));
65
+ };
59
66
  PaginationLast.displayName = "PaginationLast";
60
67
  const PaginationPrevious = ({
61
68
  className,
62
69
  disabled,
63
70
  isActive,
64
71
  onClick
65
- }) => /* @__PURE__ */ React.createElement(
66
- Button,
67
- {
68
- disabled,
69
- iconButton: true,
70
- variant: "ghost",
71
- color: "grey",
72
- size: "small",
73
- onClick,
74
- className: cn(isActive && "bg-white", className)
75
- },
76
- /* @__PURE__ */ React.createElement(ChevronLeft, { size: 20 })
77
- );
72
+ }) => {
73
+ const { t } = useTranslation();
74
+ return /* @__PURE__ */ React.createElement(TooltipProvider, null, /* @__PURE__ */ React.createElement(Tooltip, null, /* @__PURE__ */ React.createElement(TooltipTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(
75
+ Button,
76
+ {
77
+ disabled,
78
+ iconButton: true,
79
+ variant: "ghost",
80
+ color: "grey",
81
+ size: "small",
82
+ onClick,
83
+ className: cn(isActive && "bg-white", className)
84
+ },
85
+ /* @__PURE__ */ React.createElement(ChevronLeft, { size: 20 })
86
+ )), /* @__PURE__ */ React.createElement(TooltipContent, { color: "black" }, t("pagination.previousPage"))));
87
+ };
78
88
  PaginationPrevious.displayName = "PaginationPrevious";
79
89
  const PaginationNext = ({
80
90
  className,
81
91
  disabled,
82
92
  isActive,
83
93
  onClick
84
- }) => /* @__PURE__ */ React.createElement(
85
- Button,
86
- {
87
- disabled,
88
- iconButton: true,
89
- variant: "ghost",
90
- color: "grey",
91
- size: "small",
92
- onClick,
93
- className: cn(isActive && "bg-white", className)
94
- },
95
- /* @__PURE__ */ React.createElement(ChevronRight, { size: 20 })
96
- );
94
+ }) => {
95
+ const { t } = useTranslation();
96
+ return /* @__PURE__ */ React.createElement(TooltipProvider, null, /* @__PURE__ */ React.createElement(Tooltip, null, /* @__PURE__ */ React.createElement(TooltipTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(
97
+ Button,
98
+ {
99
+ disabled,
100
+ iconButton: true,
101
+ variant: "ghost",
102
+ color: "grey",
103
+ size: "small",
104
+ onClick,
105
+ className: cn(isActive && "bg-white", className)
106
+ },
107
+ /* @__PURE__ */ React.createElement(ChevronRight, { size: 20 })
108
+ )), /* @__PURE__ */ React.createElement(TooltipContent, { color: "black" }, t("pagination.nextPage"))));
109
+ };
97
110
  PaginationNext.displayName = "PaginationNext";
98
111
  const PaginationEllipsis = ({
99
112
  className,
@@ -11,10 +11,14 @@ const language = {
11
11
  pagination: {
12
12
  show: "Show:",
13
13
  selectedProcess: "Item(s) selected",
14
- selectedItemSingular: "item selected"
14
+ selectedItemSingular: "item selected",
15
+ firstPage: "First page",
16
+ lastPage: "Last page",
17
+ previousPage: "Back",
18
+ nextPage: "Forward"
15
19
  },
16
20
  upload: {
17
- label: "Drag and drop the file here or click to select it.",
21
+ label: "Drag and drop the file here or click to select it",
18
22
  download: "Download file",
19
23
  remove: "Remove file"
20
24
  },
@@ -24,6 +28,13 @@ const language = {
24
28
  selectAll: "Select all",
25
29
  placeholder: "Select",
26
30
  create: "Create"
31
+ },
32
+ dataTable: {
33
+ sortAscendingNumeric: "Sort ascending",
34
+ sortDescendingNumeric: "Sort descending",
35
+ sortAscendingText: "Sort A-Z",
36
+ sortDescendingText: "Sort Z-A",
37
+ sortDefault: "Restore default"
27
38
  }
28
39
  }
29
40
  };
@@ -11,10 +11,14 @@ const language = {
11
11
  pagination: {
12
12
  show: "Mostrar:",
13
13
  selectedProcess: "Item(s) seleccionado(s)",
14
- selectedItemSingular: "item seleccionado"
14
+ selectedItemSingular: "item seleccionado",
15
+ firstPage: "Primera p\xE1gina",
16
+ lastPage: "\xDAltima p\xE1gina",
17
+ previousPage: "Volver",
18
+ nextPage: "Avanzar"
15
19
  },
16
20
  upload: {
17
- label: "Arrastre y suelte el archivo aqu\xED o haga clic para seleccionarlo.",
21
+ label: "Arrastre y suelte el archivo aqu\xED o haga clic para seleccionarlo",
18
22
  remove: "Eliminar archivo",
19
23
  download: "Descargar archivo"
20
24
  },
@@ -24,6 +28,13 @@ const language = {
24
28
  selectAll: "Seleccionar todo",
25
29
  placeholder: "Seleccionar",
26
30
  create: "Crear"
31
+ },
32
+ dataTable: {
33
+ sortAscendingNumeric: "Ordenar ascendente",
34
+ sortDescendingNumeric: "Ordenar descendente",
35
+ sortAscendingText: "Ordenar A-Z",
36
+ sortDescendingText: "Ordenar Z-A",
37
+ sortDefault: "Restaurar predeterminado"
27
38
  }
28
39
  }
29
40
  };
@@ -11,10 +11,14 @@ const language = {
11
11
  pagination: {
12
12
  show: "Mostrar:",
13
13
  selectedProcess: "Item(s) selecionado(s)",
14
- selectedItemSingular: "item selecionado"
14
+ selectedItemSingular: "item selecionado",
15
+ firstPage: "Primeira p\xE1gina",
16
+ lastPage: "\xDAltima p\xE1gina",
17
+ previousPage: "Voltar",
18
+ nextPage: "Avan\xE7ar"
15
19
  },
16
20
  upload: {
17
- label: "Arraste e solte o arquivo aqui ou clique para selecion\xE1-lo.",
21
+ label: "Arraste e solte o arquivo aqui ou clique para selecion\xE1-lo",
18
22
  remove: "Remover arquivo",
19
23
  download: "Baixar arquivo"
20
24
  },
@@ -24,6 +28,13 @@ const language = {
24
28
  selectAll: "Selecionar tudo",
25
29
  placeholder: "Selecione",
26
30
  create: "Criar"
31
+ },
32
+ dataTable: {
33
+ sortAscendingNumeric: "Ordenar crescente",
34
+ sortDescendingNumeric: "Ordenar decrescente",
35
+ sortAscendingText: "Ordenar A-Z",
36
+ sortDescendingText: "Ordenar Z-A",
37
+ sortDefault: "Restaurar padr\xE3o"
27
38
  }
28
39
  }
29
40
  };
package/dist/index.d.ts CHANGED
@@ -387,6 +387,7 @@ interface Column<TData, TValue> {
387
387
  headerStyle?: React.CSSProperties;
388
388
  cellClassName?: string;
389
389
  showHeaderTooltip?: boolean;
390
+ sortType?: 'numeric' | 'text';
390
391
  customHeaderRender?: ({ table, column, }: ColumnSort<TData, TValue>) => React.ReactNode;
391
392
  render?: (({ value, row }: ColumnRender<TData, TValue>) => React.ReactNode) | React.ReactNode;
392
393
  onSort?: ({ table, column }: ColumnSort<TData, TValue>) => 'asc' | 'desc' | null | void;
@@ -790,9 +791,9 @@ interface HeaderProps extends React$1.HTMLAttributes<HTMLElement>, VariantProps<
790
791
  }
791
792
 
792
793
  declare const inputVariants: (props?: ({
793
- variant?: "default" | "filled" | "borderless" | null | undefined;
794
- size?: "default" | "small" | "large" | null | undefined;
795
- radius?: "default" | "small" | "large" | "full" | null | undefined;
794
+ variant?: "filled" | "default" | "borderless" | null | undefined;
795
+ size?: "small" | "large" | "default" | null | undefined;
796
+ radius?: "small" | "large" | "default" | "full" | null | undefined;
796
797
  } & class_variance_authority_types.ClassProp) | undefined) => string;
797
798
  interface InputProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, 'size' | 'sufix' | 'prefix'>, VariantProps<typeof inputVariants> {
798
799
  sufix?: React$1.ReactNode;
@@ -998,7 +999,7 @@ declare const RadioGroup: React$1.ForwardRefExoticComponent<Omit<RadioGroupPrimi
998
999
  declare const RadioGroupItem: React$1.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupItemProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
999
1000
 
1000
1001
  declare const ResizablePanelGroup: ({ className, ...props }: React$1.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => React$1.JSX.Element;
1001
- declare const ResizablePanel: React$1.ForwardRefExoticComponent<Omit<React$1.HTMLAttributes<HTMLDivElement | HTMLElement | HTMLButtonElement | HTMLOListElement | HTMLLIElement | HTMLAnchorElement | HTMLSpanElement | HTMLHeadingElement | HTMLParagraphElement | HTMLLabelElement | HTMLInputElement | HTMLObjectElement | HTMLAreaElement | HTMLAudioElement | HTMLBaseElement | HTMLQuoteElement | HTMLBodyElement | HTMLBRElement | HTMLCanvasElement | HTMLTableCaptionElement | HTMLTableColElement | HTMLDataElement | HTMLDataListElement | HTMLModElement | HTMLDetailsElement | HTMLDialogElement | HTMLDListElement | HTMLEmbedElement | HTMLFieldSetElement | HTMLFormElement | HTMLHeadElement | HTMLHRElement | HTMLHtmlElement | HTMLIFrameElement | HTMLImageElement | HTMLLegendElement | HTMLLinkElement | HTMLMapElement | HTMLMenuElement | HTMLMetaElement | HTMLMeterElement | HTMLOptGroupElement | HTMLOptionElement | HTMLOutputElement | HTMLPictureElement | HTMLPreElement | HTMLProgressElement | HTMLScriptElement | HTMLSelectElement | HTMLSlotElement | HTMLSourceElement | HTMLStyleElement | HTMLTableElement | HTMLTableSectionElement | HTMLTableCellElement | HTMLTemplateElement | HTMLTextAreaElement | HTMLTimeElement | HTMLTitleElement | HTMLTableRowElement | HTMLTrackElement | HTMLUListElement | HTMLVideoElement>, "id" | "onResize"> & {
1002
+ declare const ResizablePanel: React$1.ForwardRefExoticComponent<Omit<React$1.HTMLAttributes<HTMLButtonElement | HTMLElement | HTMLOListElement | HTMLLIElement | HTMLAnchorElement | HTMLSpanElement | HTMLDivElement | HTMLHeadingElement | HTMLParagraphElement | HTMLLabelElement | HTMLInputElement | HTMLUListElement | HTMLObjectElement | HTMLAreaElement | HTMLAudioElement | HTMLBaseElement | HTMLQuoteElement | HTMLBodyElement | HTMLBRElement | HTMLCanvasElement | HTMLTableCaptionElement | HTMLTableColElement | HTMLDataElement | HTMLDataListElement | HTMLModElement | HTMLDetailsElement | HTMLDialogElement | HTMLDListElement | HTMLEmbedElement | HTMLFieldSetElement | HTMLFormElement | HTMLHeadElement | HTMLHRElement | HTMLHtmlElement | HTMLIFrameElement | HTMLImageElement | HTMLLegendElement | HTMLLinkElement | HTMLMapElement | HTMLMenuElement | HTMLMetaElement | HTMLMeterElement | HTMLOptGroupElement | HTMLOptionElement | HTMLOutputElement | HTMLPictureElement | HTMLPreElement | HTMLProgressElement | HTMLScriptElement | HTMLSelectElement | HTMLSlotElement | HTMLSourceElement | HTMLStyleElement | HTMLTableElement | HTMLTableSectionElement | HTMLTableCellElement | HTMLTemplateElement | HTMLTextAreaElement | HTMLTimeElement | HTMLTitleElement | HTMLTableRowElement | HTMLTrackElement | HTMLVideoElement>, "id" | "onResize"> & {
1002
1003
  className?: string;
1003
1004
  collapsedSize?: number | undefined;
1004
1005
  collapsible?: boolean | undefined;
@@ -1164,9 +1165,9 @@ declare const TabsTrigger: React$1.ForwardRefExoticComponent<Omit<TabsPrimitive.
1164
1165
  declare const TabsContent: React$1.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
1165
1166
 
1166
1167
  declare const textareaVariants: (props?: ({
1167
- variant?: "default" | "filled" | "borderless" | null | undefined;
1168
- size?: "default" | "small" | "large" | null | undefined;
1169
- radius?: "default" | "small" | "large" | "full" | null | undefined;
1168
+ variant?: "filled" | "default" | "borderless" | null | undefined;
1169
+ size?: "small" | "large" | "default" | null | undefined;
1170
+ radius?: "small" | "large" | "default" | "full" | null | undefined;
1170
1171
  resize?: "default" | "both" | "horizontal" | "vertical" | "vertical-limited" | null | undefined;
1171
1172
  } & class_variance_authority_types.ClassProp) | undefined) => string;
1172
1173
  interface TextareaProps extends React$1.ComponentProps<'textarea'>, VariantProps<typeof textareaVariants> {
@@ -1356,7 +1357,7 @@ interface DateInputProps extends Omit<React$1.InputHTMLAttributes<HTMLInputEleme
1356
1357
  declare const DateInput: React$1.ForwardRefExoticComponent<DateInputProps & React$1.RefAttributes<HTMLInputElement>>;
1357
1358
 
1358
1359
  declare const badgeVariants: (props?: ({
1359
- variant?: "default" | "destructive" | "outline" | "secondary" | null | undefined;
1360
+ variant?: "destructive" | "default" | "outline" | "secondary" | null | undefined;
1360
1361
  } & class_variance_authority_types.ClassProp) | undefined) => string;
1361
1362
  interface BadgeProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
1362
1363
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "lecom-ui",
3
- "version": "5.4.41",
3
+ "version": "5.4.43",
4
4
  "license": "MIT",
5
5
  "type": "module",
6
6
  "module": "dist/index.js",