@vector-business-services/cristal-ds-web 0.15.0 → 0.17.0

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.
package/dist/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { forwardRef, useRef, useImperativeHandle, useState, Children, isValidElement, useId, useLayoutEffect, useMemo, useCallback, useEffect, useContext, cloneElement } from 'react';
2
2
  import { Accordion as Accordion$1, AccordionTab as AccordionTab$1 } from 'primereact/accordion';
3
- import { WarningCircle, Info, Question, Check, ArrowLeft, X, CircleNotch, CaretDown, MagnifyingGlass, ArrowsInSimple, ArrowsOutSimple, CaretUp, List, DribbbleLogo, SealWarning, XCircle, CheckCircle, Warning, CaretDoubleRight, CaretRight, CaretLeft, CaretDoubleLeft } from '@phosphor-icons/react';
3
+ import { WarningCircle, Info, Question, Check, CircleNotch, ArrowLeft, X, CaretDown, MagnifyingGlass, ArrowsInSimple, ArrowsOutSimple, CaretUp, Funnel, List, DribbbleLogo, SealWarning, XCircle, CheckCircle, Warning, Note, ArrowsInLineHorizontal, SortAscending, SortDescending, DotsThreeVertical, CaretLeft, CaretRight, Trash, CaretDoubleRight, CaretDoubleLeft, GearSix } from '@phosphor-icons/react';
4
4
  import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
5
5
  import { AutoComplete as AutoComplete$1 } from 'primereact/autocomplete';
6
6
  import { Badge as Badge$1 } from 'primereact/badge';
@@ -10,11 +10,12 @@ import { Chart as Chart$1 } from 'primereact/chart';
10
10
  import { Tooltip as Tooltip$1 } from 'primereact/tooltip';
11
11
  import { Checkbox as Checkbox$1 } from 'primereact/checkbox';
12
12
  import { Chip as Chip$1 } from 'primereact/chip';
13
+ import { ContextMenu as ContextMenu$1 } from 'primereact/contextmenu';
14
+ import { PrimeReactContext, PrimeReactProvider } from 'primereact/api';
15
+ import { Menu as Menu$1 } from 'primereact/menu';
13
16
  import { Divider as Divider$1 } from 'primereact/divider';
14
17
  import { Sidebar } from 'primereact/sidebar';
15
18
  import { InputText } from 'primereact/inputtext';
16
- import { PrimeReactContext, PrimeReactProvider } from 'primereact/api';
17
- import { Menu as Menu$1 } from 'primereact/menu';
18
19
  import { Menubar as Menubar$1 } from 'primereact/menubar';
19
20
  import { Tag as Tag$1 } from 'primereact/tag';
20
21
  import { Message as Message$1 } from 'primereact/message';
@@ -27,8 +28,11 @@ import { Panel as Panel$1 } from 'primereact/panel';
27
28
  import { RadioButton } from 'primereact/radiobutton';
28
29
  import { ScrollPanel as ScrollPanel$1 } from 'primereact/scrollpanel';
29
30
  import { SelectButton } from 'primereact/selectbutton';
31
+ import { Skeleton as Skeleton$1 } from 'primereact/skeleton';
30
32
  import { InputSwitch } from 'primereact/inputswitch';
31
33
  import { TabView, TabPanel as TabPanel$1 } from 'primereact/tabview';
34
+ import { DataTable } from 'primereact/datatable';
35
+ import { Column as Column$1 } from 'primereact/column';
32
36
  import { Toast as Toast$1 } from 'primereact/toast';
33
37
 
34
38
  // src/components/Accordion/Accordion.tsx
@@ -40,7 +44,7 @@ var Accordion = forwardRef(function Accordion2({ multiple = false, activeIndex,
40
44
  const primeRef = useRef(null);
41
45
  useImperativeHandle(ref, () => primeRef.current?.getElement());
42
46
  const [interno, setInterno] = useState(multiple ? [0] : 0);
43
- const abertos = activeIndex === void 0 ? interno : activeIndex;
47
+ const abertos2 = activeIndex === void 0 ? interno : activeIndex;
44
48
  const tabs = Children.toArray(children).filter(
45
49
  (child) => isValidElement(child)
46
50
  );
@@ -52,7 +56,7 @@ var Accordion = forwardRef(function Accordion2({ multiple = false, activeIndex,
52
56
  ref: primeRef,
53
57
  id,
54
58
  multiple,
55
- activeIndex: abertos,
59
+ activeIndex: abertos2,
56
60
  onTabChange: (event) => {
57
61
  const index = event.index;
58
62
  setInterno(index);
@@ -76,8 +80,16 @@ var Accordion = forwardRef(function Accordion2({ multiple = false, activeIndex,
76
80
  headerAction: { className: "cr-accordion__action" },
77
81
  toggleableContent: { className: "cr-accordion__region" },
78
82
  content: { className: "cr-accordion__content" },
79
- // Sem animação: o Prime manteria o conteúdo na tela pelos 450ms da saída dele.
80
- transition: { timeout: 0 }
83
+ // Abre e fecha pela altura, como o tema do Prime (p-toggleable-content, Accordion.css):
84
+ // no unstyled o Prime só dá o tempo, sem classes.
85
+ transition: {
86
+ classNames: {
87
+ enter: "cr-accordion__region--entrar",
88
+ enterActive: "cr-accordion__region--entrando",
89
+ exit: "cr-accordion__region--sair",
90
+ exitActive: "cr-accordion__region--saindo"
91
+ }
92
+ }
81
93
  },
82
94
  children: tab.props.children
83
95
  },
@@ -105,7 +117,17 @@ var painelDoCampo = (campo, seletorDoPainel) => {
105
117
  const lista = campo?.getAttribute("aria-controls");
106
118
  return lista ? document.getElementById(lista)?.closest(seletorDoPainel) : null;
107
119
  };
108
- var aoPosicionar = (onEnter) => ({ onEnter });
120
+ var CLASSES_DO_POPUP = {
121
+ enter: "cr-popup--entrar",
122
+ enterActive: "cr-popup--entrando",
123
+ enterDone: "cr-popup--entrou",
124
+ exitActive: "cr-popup--saindo"
125
+ };
126
+ var transicaoDoPopup = (onEnter) => (
127
+ // Sem onEnter, a chave nem aparece: o Prime soma as funções do pt às dele, mas um undefined
128
+ // substituiria o onEnter dele (que posiciona a lista).
129
+ { classNames: CLASSES_DO_POPUP, ...onEnter && { onEnter } }
130
+ );
109
131
  var AutoComplete = forwardRef(function AutoComplete2({
110
132
  variant = "outline",
111
133
  size = "large",
@@ -158,8 +180,9 @@ var AutoComplete = forwardRef(function AutoComplete2({
158
180
  // O Prime mostra um spinner próprio enquanto busca; o Figma não define esse estado.
159
181
  loadingIcon: { className: "cr-autocomplete__loader" },
160
182
  panel: { className: "cr-lista cr-autocomplete__panel" },
161
- // Lado da lista (acima ou abaixo do campo), medido logo depois de o Prime posicionar.
162
- transition: aoPosicionar(() => {
183
+ // Animação de entrada e saída (a do Prime) e o lado da lista, medido logo depois de o Prime
184
+ // posicionar.
185
+ transition: transicaoDoPopup(() => {
163
186
  const campo = document.getElementById(id);
164
187
  seguirLado(painelDoCampo(campo, ".cr-autocomplete__panel"), campo);
165
188
  }),
@@ -239,8 +262,16 @@ var Card = forwardRef(function Card2({ padding = "xsmall", outline = false, clas
239
262
  );
240
263
  });
241
264
  var usandoTeclado = false;
265
+ var abertos = /* @__PURE__ */ new Set();
242
266
  if (typeof document !== "undefined") {
243
- document.addEventListener("keydown", () => usandoTeclado = true, true);
267
+ document.addEventListener(
268
+ "keydown",
269
+ (event) => {
270
+ usandoTeclado = true;
271
+ if (event.key === "Escape") abertos.forEach((fechar) => fechar());
272
+ },
273
+ true
274
+ );
244
275
  document.addEventListener("pointerdown", () => usandoTeclado = false, true);
245
276
  }
246
277
  var resolveTargets = (target) => {
@@ -263,6 +294,9 @@ function Tooltip({
263
294
  }) {
264
295
  const autoId = useId();
265
296
  const tooltipId = id ?? autoId;
297
+ const primeRef = useRef(null);
298
+ const [fechar] = useState(() => () => void primeRef.current?.hide());
299
+ useEffect(() => () => void abertos.delete(fechar), [fechar]);
266
300
  useEffect(() => {
267
301
  if (!describe) return;
268
302
  const elements = resolveTargets(target);
@@ -297,9 +331,17 @@ function Tooltip({
297
331
  event,
298
332
  showDelay,
299
333
  hideDelay,
334
+ ref: primeRef,
300
335
  disabled,
301
- closeOnEscape: true,
302
- onBeforeShow: (e) => e.originalEvent?.type !== "focus" || usandoTeclado,
336
+ onBeforeShow: (e) => {
337
+ const abre = e.originalEvent?.type !== "focus" || usandoTeclado;
338
+ if (abre) abertos.add(fechar);
339
+ return abre;
340
+ },
341
+ onBeforeHide: () => {
342
+ abertos.delete(fechar);
343
+ return true;
344
+ },
303
345
  pt,
304
346
  children: content
305
347
  }
@@ -724,6 +766,152 @@ var Chip = forwardRef(function Chip2({
724
766
  }
725
767
  );
726
768
  });
769
+ var itensDoPrime = (model) => model.map((item) => ({
770
+ id: item.id,
771
+ label: item.label,
772
+ icon: item.icon ? /* @__PURE__ */ jsx("span", { className: "cr-menu__icon", "aria-hidden": "true", children: item.icon }) : void 0,
773
+ disabled: item.disabled,
774
+ command: item.command,
775
+ url: item.url,
776
+ target: item.target,
777
+ className: [item.selected && "cr-menu__item--selected", item.className].filter(Boolean).join(" "),
778
+ data: { selected: item.selected }
779
+ }));
780
+ var Menu = forwardRef(function Menu2({
781
+ model,
782
+ density = "normal",
783
+ popup = false,
784
+ popupAlignment = "left",
785
+ loading = false,
786
+ loadingLabel = "Carregando",
787
+ "aria-label": ariaLabel,
788
+ "aria-labelledby": ariaLabelledBy,
789
+ onShow,
790
+ onHide,
791
+ id,
792
+ className,
793
+ ...props
794
+ }, ref) {
795
+ const primeRef = useRef(null);
796
+ const alvo = useRef(null);
797
+ const context = useContext(PrimeReactContext);
798
+ useImperativeHandle(ref, () => ({
799
+ toggle: (event) => {
800
+ alvo.current = event.currentTarget;
801
+ primeRef.current?.toggle(event);
802
+ },
803
+ show: (event) => {
804
+ alvo.current = event.currentTarget;
805
+ primeRef.current?.show(event);
806
+ },
807
+ hide: (event) => primeRef.current?.hide(event),
808
+ getElement: () => primeRef.current?.getElement() ?? null
809
+ }));
810
+ const items = loading ? [
811
+ {
812
+ label: loadingLabel,
813
+ disabled: true,
814
+ template: () => /* @__PURE__ */ jsx("div", { className: "cr-menu__loading", children: /* @__PURE__ */ jsx(CircleNotch, { className: "cr-menu__spinner", "aria-hidden": "true" }) })
815
+ }
816
+ ] : itensDoPrime(model);
817
+ const classes = ["cr-lista cr-menu", `cr-menu--${density}`, popup && "cr-menu--popup", className].filter(Boolean).join(" ");
818
+ const pt = {
819
+ // O nome acessível vai na lista (role=menu); o Prime lê `ariaLabel`, mas não o declara no tipo.
820
+ menu: {
821
+ className: "cr-menu__list",
822
+ "aria-label": ariaLabel,
823
+ "aria-labelledby": ariaLabelledBy,
824
+ "aria-busy": loading || void 0
825
+ },
826
+ menuitem: (options) => {
827
+ const item = options?.context?.item;
828
+ return {
829
+ className: "cr-menu__item",
830
+ "aria-current": item?.data?.selected ? "true" : void 0
831
+ };
832
+ },
833
+ content: { className: "cr-menu__content" },
834
+ // Animação de entrada e saída (a do Prime) e o lado do popup, medido logo depois de o Prime
835
+ // posicionar.
836
+ // Numa microtarefa: no onEnter o Prime ainda está religando a ref (getElement vem vazio); ela
837
+ // roda logo depois, antes de a tela ser pintada.
838
+ transition: transicaoDoPopup(
839
+ () => queueMicrotask(() => seguirLado(primeRef.current?.getElement(), alvo.current))
840
+ ),
841
+ action: { className: "cr-lista__item cr-menu__action" },
842
+ label: { className: "cr-menu__label" }
843
+ };
844
+ const menu = /* @__PURE__ */ jsx(
845
+ Menu$1,
846
+ {
847
+ ...props,
848
+ unstyled: true,
849
+ ref: primeRef,
850
+ id,
851
+ className: classes,
852
+ model: items,
853
+ popup,
854
+ popupAlignment,
855
+ onShow,
856
+ onHide,
857
+ pt
858
+ }
859
+ );
860
+ return context ? menu : /* @__PURE__ */ jsx(PrimeReactProvider, { children: menu });
861
+ });
862
+ var ContextMenu = forwardRef(function ContextMenu2({
863
+ model,
864
+ density = "normal",
865
+ global,
866
+ "aria-label": ariaLabel,
867
+ "aria-labelledby": ariaLabelledBy,
868
+ onShow,
869
+ onHide,
870
+ id,
871
+ className,
872
+ ...props
873
+ }, ref) {
874
+ const primeRef = useRef(null);
875
+ useImperativeHandle(ref, () => ({
876
+ show: (event) => primeRef.current?.show(event),
877
+ hide: (event) => primeRef.current?.hide(event),
878
+ getElement: () => primeRef.current?.getElement() ?? null
879
+ }));
880
+ const classes = ["cr-lista cr-menu cr-context-menu", `cr-menu--${density}`, className].filter(Boolean).join(" ");
881
+ const pt = {
882
+ root: { ...props, className: classes },
883
+ // O nome vai na lista (o Prime dá a ela role=menubar, vertical).
884
+ menu: {
885
+ className: "cr-menu__list",
886
+ "aria-label": ariaLabel,
887
+ "aria-labelledby": ariaLabelledBy
888
+ },
889
+ // O Prime põe aria-level nos itens, que role=menuitem não aceita (axe).
890
+ menuitem: { className: "cr-menu__item", "aria-level": void 0 },
891
+ action: { className: "cr-lista__item cr-menu__action" },
892
+ label: { className: "cr-menu__label" },
893
+ // As classes da animação do Prime (ContextMenu.css). O tipo do Prime exige o addEndListener
894
+ // do react-transition-group, que aqui não se usa.
895
+ transition: {
896
+ classNames: { enter: "cr-context-menu--entrar", enterActive: "cr-context-menu--entrando" }
897
+ },
898
+ // O Prime aplica o pt do content, mas não o declara no tipo.
899
+ ...{ content: { className: "cr-menu__content" } }
900
+ };
901
+ return /* @__PURE__ */ jsx(
902
+ ContextMenu$1,
903
+ {
904
+ unstyled: true,
905
+ ref: primeRef,
906
+ id,
907
+ model: itensDoPrime(model),
908
+ global,
909
+ onShow,
910
+ onHide,
911
+ pt
912
+ }
913
+ );
914
+ });
727
915
  var Divider = forwardRef(function Divider2({ orientation = "horizontal", variant = "solid", className, style, ...props }, ref) {
728
916
  const primeRef = useRef(null);
729
917
  useImperativeHandle(ref, () => primeRef.current?.getElement());
@@ -1004,97 +1192,6 @@ var Input = forwardRef(function Input2({
1004
1192
  ] })
1005
1193
  ] });
1006
1194
  });
1007
- var Menu = forwardRef(function Menu2({
1008
- model,
1009
- density = "normal",
1010
- popup = false,
1011
- popupAlignment = "left",
1012
- loading = false,
1013
- loadingLabel = "Carregando",
1014
- "aria-label": ariaLabel,
1015
- "aria-labelledby": ariaLabelledBy,
1016
- onShow,
1017
- onHide,
1018
- id,
1019
- className,
1020
- ...props
1021
- }, ref) {
1022
- const primeRef = useRef(null);
1023
- const alvo = useRef(null);
1024
- const context = useContext(PrimeReactContext);
1025
- useImperativeHandle(ref, () => ({
1026
- toggle: (event) => {
1027
- alvo.current = event.currentTarget;
1028
- primeRef.current?.toggle(event);
1029
- },
1030
- show: (event) => {
1031
- alvo.current = event.currentTarget;
1032
- primeRef.current?.show(event);
1033
- },
1034
- hide: (event) => primeRef.current?.hide(event),
1035
- getElement: () => primeRef.current?.getElement() ?? null
1036
- }));
1037
- const items = loading ? [
1038
- {
1039
- label: loadingLabel,
1040
- disabled: true,
1041
- template: () => /* @__PURE__ */ jsx("div", { className: "cr-menu__loading", children: /* @__PURE__ */ jsx(CircleNotch, { className: "cr-menu__spinner", "aria-hidden": "true" }) })
1042
- }
1043
- ] : model.map((item) => ({
1044
- id: item.id,
1045
- label: item.label,
1046
- icon: item.icon ? /* @__PURE__ */ jsx("span", { className: "cr-menu__icon", "aria-hidden": "true", children: item.icon }) : void 0,
1047
- disabled: item.disabled,
1048
- command: item.command,
1049
- url: item.url,
1050
- target: item.target,
1051
- className: [item.selected && "cr-menu__item--selected", item.className].filter(Boolean).join(" "),
1052
- data: { selected: item.selected }
1053
- }));
1054
- const classes = ["cr-lista cr-menu", `cr-menu--${density}`, popup && "cr-menu--popup", className].filter(Boolean).join(" ");
1055
- const pt = {
1056
- // O nome acessível vai na lista (role=menu); o Prime lê `ariaLabel`, mas não o declara no tipo.
1057
- menu: {
1058
- className: "cr-menu__list",
1059
- "aria-label": ariaLabel,
1060
- "aria-labelledby": ariaLabelledBy,
1061
- "aria-busy": loading || void 0
1062
- },
1063
- menuitem: (options) => {
1064
- const item = options?.context?.item;
1065
- return {
1066
- className: "cr-menu__item",
1067
- "aria-current": item?.data?.selected ? "true" : void 0
1068
- };
1069
- },
1070
- content: { className: "cr-menu__content" },
1071
- // Lado do popup (acima ou abaixo de quem o abriu), medido logo depois de o Prime posicionar.
1072
- // Numa microtarefa: no onEnter o Prime ainda está religando a ref (getElement vem vazio); ela
1073
- // roda logo depois, antes de a tela ser pintada.
1074
- transition: aoPosicionar(
1075
- () => queueMicrotask(() => seguirLado(primeRef.current?.getElement(), alvo.current))
1076
- ),
1077
- action: { className: "cr-lista__item cr-menu__action" },
1078
- label: { className: "cr-menu__label" }
1079
- };
1080
- const menu = /* @__PURE__ */ jsx(
1081
- Menu$1,
1082
- {
1083
- ...props,
1084
- unstyled: true,
1085
- ref: primeRef,
1086
- id,
1087
- className: classes,
1088
- model: items,
1089
- popup,
1090
- popupAlignment,
1091
- onShow,
1092
- onHide,
1093
- pt
1094
- }
1095
- );
1096
- return context ? menu : /* @__PURE__ */ jsx(PrimeReactProvider, { children: menu });
1097
- });
1098
1195
 
1099
1196
  // src/components/Menubar/assets/vector-logo-simbolo.svg
1100
1197
  var vector_logo_simbolo_default = 'data:image/svg+xml,<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="42.7061" height="20" viewBox="0 0 42.7061 20" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<g id="Grupo 2380">%0A<path id="Caminho 1049" d="M26.8782 10.21C26.8393 10.1525 26.7869 10.1055 26.7255 10.0731C26.6642 10.0408 26.5958 10.024 26.5264 10.0244H4.21626C4.14666 10.024 4.07803 10.0408 4.0165 10.0733C3.95497 10.1059 3.90244 10.1531 3.8636 10.2109C3.82535 10.2676 3.80224 10.3333 3.79648 10.4015C3.79072 10.4697 3.80251 10.5383 3.8307 10.6007L7.35895 19.7545C7.39283 19.8281 7.44722 19.8905 7.51559 19.934C7.58397 19.9776 7.66345 20.0005 7.74451 20C7.82641 19.9998 7.90647 19.9758 7.97493 19.9308C8.0434 19.8859 8.09731 19.822 8.13007 19.7469L11.5604 13.47H25.3511C25.4325 13.4705 25.5123 13.4474 25.5809 13.4035C25.6494 13.3596 25.7038 13.2969 25.7375 13.2228L26.9086 10.5964C26.9365 10.5347 26.9484 10.4669 26.9431 10.3993C26.9378 10.3318 26.9154 10.2666 26.8782 10.21V10.21Z" fill="%23C1BFBF"/>%0A<g id="Grupo 2378">%0A<path id="Caminho 1050" d="M26.3926 6.06543L24.0666 19.1424C24.0588 19.2502 24.0736 19.3585 24.1103 19.4602C24.1469 19.5619 24.2045 19.6549 24.2792 19.7329C24.3554 19.813 24.447 19.8767 24.5485 19.9202C24.65 19.9637 24.7593 19.9861 24.8698 19.986H30.4229L29.2578 13.5446L26.3926 6.06543Z" fill="%231545DE"/>%0A<g id="Grupo 2377">%0A<path id="Caminho 1051" d="M42.2783 16.0921H42.0598C42.0303 11.9033 41.8911 10.7668 41.2541 10.086C40.167 9.29536 38.9793 8.65329 37.7225 8.17676C37.1378 7.91016 36.4755 7.60812 36.3684 7.52881C36.1102 7.27149 34.8768 5.05179 34.2145 3.85884C33.9378 3.36107 33.6956 2.92488 33.5311 2.63887C33.166 1.80107 32.5487 1.09795 31.7653 0.627372C30.9818 0.15679 30.0712 -0.0578392 29.16 0.0133599H21.1072C21.036 0.0134652 20.966 0.0313585 20.9036 0.0653944C20.8411 0.0994303 20.7881 0.148532 20.7494 0.208251C20.7106 0.268417 20.6872 0.337237 20.6813 0.408613C20.6754 0.479989 20.6872 0.551716 20.7157 0.617433L28.9955 19.7283C29.0285 19.8051 29.0832 19.8705 29.1529 19.9166C29.2226 19.9626 29.3043 19.9872 29.3878 19.9873H30.9849C31.0972 19.9869 31.2048 19.9425 31.2848 19.8637C31.3648 19.7848 31.4107 19.6778 31.4126 19.5655C31.4126 18.581 31.8037 17.6368 32.4999 16.9406C33.1961 16.2444 34.1403 15.8533 35.1248 15.8533C36.1093 15.8533 37.0535 16.2444 37.7497 16.9406C38.4459 17.6368 38.837 18.581 38.837 19.5655C38.839 19.6778 38.8848 19.7848 38.9648 19.8637C39.0447 19.9425 39.1524 19.9869 39.2647 19.9873H41.6396C41.6961 19.9871 41.752 19.9758 41.8041 19.9539C41.8561 19.9321 41.9034 19.9002 41.9431 19.8601C41.9828 19.82 42.0143 19.7724 42.0356 19.7201C42.0569 19.6678 42.0677 19.6119 42.0674 19.5554C42.0674 19.2179 42.0674 18.9015 42.0674 18.5911H42.2783C42.3923 18.5904 42.5013 18.5445 42.5815 18.4636C42.6617 18.3826 42.7065 18.2731 42.7061 18.1591V16.5241C42.7065 16.4101 42.6617 16.3006 42.5815 16.2196C42.5013 16.1386 42.3923 16.0928 42.2783 16.0921V16.0921ZM31.6058 8.33621H27.9359C27.7958 8.33732 27.6591 8.29246 27.547 8.20849C27.4348 8.12452 27.3533 8.00609 27.3149 7.87135L26.0545 3.91029C26.0293 3.8176 26.0262 3.72028 26.0455 3.62619C26.0649 3.5321 26.1061 3.44388 26.1658 3.36866C26.2264 3.29247 26.3034 3.23091 26.391 3.18856C26.4786 3.1462 26.5747 3.12414 26.672 3.124H28.9305C29.2861 3.13975 29.6349 3.22716 29.9558 3.38098C30.2768 3.53479 30.5634 3.75184 30.7984 4.01912C31.7475 5.02307 32.2662 6.35841 32.2437 7.73973C32.2339 7.90191 32.1624 8.05419 32.0437 8.16517C31.925 8.27615 31.7683 8.33736 31.6058 8.33621V8.33621Z" fill="%231545DE"/>%0A</g>%0A</g>%0A<path id="Caminho 1052" d="M18.318 0.208784C18.2779 0.150057 18.224 0.102045 18.1611 0.0689531C18.0981 0.0358617 18.028 0.0186933 17.9569 0.0189526H0.432107C0.361515 0.0187583 0.291932 0.0356991 0.229331 0.0683223C0.166729 0.100945 0.112985 0.148276 0.0727059 0.206248C0.0332923 0.263519 0.00898875 0.329827 0.00205642 0.399002C-0.00487591 0.468178 0.00578389 0.537987 0.0330492 0.601939L1.0404 3.29747C1.07434 3.3749 1.13023 3.44069 1.20115 3.48672C1.27206 3.53275 1.35491 3.55701 1.43945 3.55648H16.5134C16.5968 3.55702 16.6787 3.53341 16.749 3.4885C16.8194 3.44359 16.8753 3.37931 16.9099 3.30338L18.3526 0.607835C18.3813 0.543894 18.3933 0.473655 18.3872 0.403804C18.3812 0.333954 18.3573 0.266823 18.318 0.208784V0.208784Z" fill="%23C1BFBF"/>%0A<path id="Caminho 1053" d="M20.2107 5.18251C20.1706 5.12378 20.1167 5.07577 20.0538 5.04268C19.9908 5.00959 19.9207 4.99242 19.8496 4.99268H2.32482C2.25423 4.99248 2.18465 5.00943 2.12205 5.04205C2.05945 5.07467 2.0057 5.122 1.96542 5.17997C1.92601 5.23725 1.9017 5.30355 1.89477 5.37273C1.88784 5.4419 1.8985 5.51171 1.92577 5.57567L2.93311 8.2712C2.96706 8.34863 3.02294 8.41442 3.09386 8.46045C3.16478 8.50648 3.24763 8.53073 3.33217 8.53021H18.4061C18.4896 8.53075 18.5714 8.50714 18.6417 8.46224C18.7121 8.41733 18.768 8.35304 18.8026 8.27711L20.2453 5.58157C20.274 5.51761 20.2859 5.44738 20.2798 5.37754C20.2738 5.30771 20.25 5.24058 20.2107 5.18251V5.18251Z" fill="%23C1BFBF"/>%0A</g>%0A</svg>%0A';
@@ -1414,7 +1511,7 @@ var MenuPrincipal = forwardRef(
1414
1511
  menuitem: { className: "cr-menu-principal__item" },
1415
1512
  // Lado do popup, medido logo depois de o Prime posicionar.
1416
1513
  // Numa microtarefa: no onEnter o Prime ainda está religando a ref (como no Menu).
1417
- transition: aoPosicionar(
1514
+ transition: transicaoDoPopup(
1418
1515
  () => queueMicrotask(() => seguirLado(primeRef.current?.getElement(), alvo.current))
1419
1516
  )
1420
1517
  };
@@ -1528,6 +1625,16 @@ var Modal = forwardRef(function Modal2({
1528
1625
  className: classes,
1529
1626
  "aria-labelledby": titleId,
1530
1627
  "aria-describedby": void 0
1628
+ },
1629
+ // Entrada e saída do tema do Prime (p-dialog, Modal.css). No unstyled o Prime não põe
1630
+ // classes na transição; o tipo exige o addEndListener do react-transition-group.
1631
+ transition: {
1632
+ classNames: {
1633
+ enter: "cr-modal--entrar",
1634
+ enterActive: "cr-modal--entrando",
1635
+ enterDone: "cr-modal--entrou",
1636
+ exitActive: "cr-modal--saindo"
1637
+ }
1531
1638
  }
1532
1639
  },
1533
1640
  content: ({ hide, closeRef }) => /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -1713,7 +1820,9 @@ var MultiSelect = forwardRef(function MultiSelect2({
1713
1820
  ...checkbox,
1714
1821
  root: { ...checkbox.root, role: void 0, "aria-checked": void 0, inert: true }
1715
1822
  },
1716
- emptyMessage: { className: "cr-multiselect__empty" }
1823
+ emptyMessage: { className: "cr-multiselect__empty" },
1824
+ // Animação de entrada e saída da lista, a do Prime (comum.css).
1825
+ transition: transicaoDoPopup()
1717
1826
  };
1718
1827
  return /* @__PURE__ */ jsxs("div", { className: classes, children: [
1719
1828
  label && /* @__PURE__ */ jsxs("label", { className: "cr-field__label", htmlFor: inputId, children: [
@@ -1915,8 +2024,9 @@ var Select = forwardRef(function Select2({
1915
2024
  input: { className: "cr-select__value" },
1916
2025
  trigger: { className: "cr-field__icon cr-select__trigger", "aria-hidden": true },
1917
2026
  panel: { className: "cr-lista cr-select__panel" },
1918
- // Lado da lista (acima ou abaixo do campo), medido logo depois de o Prime posicionar.
1919
- transition: aoPosicionar(
2027
+ // Animação de entrada e saída (a do Prime) e o lado da lista, medido logo depois de o Prime
2028
+ // posicionar.
2029
+ transition: transicaoDoPopup(
1920
2030
  () => seguirLado(
1921
2031
  document.getElementById(listId)?.closest(".cr-select__panel"),
1922
2032
  document.getElementById(inputId)?.closest(".cr-select__control")
@@ -1988,6 +2098,40 @@ var seta2 = (label, icon) => (options) => /* @__PURE__ */ jsx(
1988
2098
  children: icon
1989
2099
  }
1990
2100
  );
2101
+ var paginatorTemplate = (rowsPerPageLabel) => ({
2102
+ layout: "FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown",
2103
+ FirstPageLink: seta2("Primeira p\xE1gina", /* @__PURE__ */ jsx(CaretDoubleLeft, { "aria-hidden": "true" })),
2104
+ PrevPageLink: seta2("P\xE1gina anterior", /* @__PURE__ */ jsx(CaretLeft, { "aria-hidden": "true" })),
2105
+ NextPageLink: seta2("Pr\xF3xima p\xE1gina", /* @__PURE__ */ jsx(CaretRight, { "aria-hidden": "true" })),
2106
+ LastPageLink: seta2("\xDAltima p\xE1gina", /* @__PURE__ */ jsx(CaretDoubleRight, { "aria-hidden": "true" })),
2107
+ PageLinks: (options) => {
2108
+ const ativa = options.page === options.currentPage;
2109
+ return /* @__PURE__ */ jsx(
2110
+ "button",
2111
+ {
2112
+ type: "button",
2113
+ className: "cr-paginator__page",
2114
+ "aria-label": `P\xE1gina ${options.page + 1}`,
2115
+ "aria-current": ativa ? "page" : void 0,
2116
+ onClick: options.onClick,
2117
+ children: options.page + 1
2118
+ }
2119
+ );
2120
+ },
2121
+ // O Prime chama o template mesmo sem rowsPerPageOptions.
2122
+ RowsPerPageDropdown: (options) => options.options.length > 0 && /* @__PURE__ */ jsx(
2123
+ Select,
2124
+ {
2125
+ className: "cr-paginator__rows",
2126
+ size: "medium",
2127
+ "aria-label": rowsPerPageLabel,
2128
+ options: options.options,
2129
+ optionValue: "value",
2130
+ value: options.value,
2131
+ onChange: (value) => options.onChange({ value })
2132
+ }
2133
+ )
2134
+ });
1991
2135
  var Paginator = forwardRef(function Paginator2({
1992
2136
  totalRecords,
1993
2137
  first,
@@ -2023,40 +2167,7 @@ var Paginator = forwardRef(function Paginator2({
2023
2167
  setInterno({ first: event.first, rows: event.rows });
2024
2168
  onPageChange?.(event);
2025
2169
  },
2026
- template: {
2027
- layout: "FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown",
2028
- FirstPageLink: seta2("Primeira p\xE1gina", /* @__PURE__ */ jsx(CaretDoubleLeft, { "aria-hidden": "true" })),
2029
- PrevPageLink: seta2("P\xE1gina anterior", /* @__PURE__ */ jsx(CaretLeft, { "aria-hidden": "true" })),
2030
- NextPageLink: seta2("Pr\xF3xima p\xE1gina", /* @__PURE__ */ jsx(CaretRight, { "aria-hidden": "true" })),
2031
- LastPageLink: seta2("\xDAltima p\xE1gina", /* @__PURE__ */ jsx(CaretDoubleRight, { "aria-hidden": "true" })),
2032
- PageLinks: (options) => {
2033
- const ativa = options.page === options.currentPage;
2034
- return /* @__PURE__ */ jsx(
2035
- "button",
2036
- {
2037
- type: "button",
2038
- className: "cr-paginator__page",
2039
- "aria-label": `P\xE1gina ${options.page + 1}`,
2040
- "aria-current": ativa ? "page" : void 0,
2041
- onClick: options.onClick,
2042
- children: options.page + 1
2043
- }
2044
- );
2045
- },
2046
- // O Prime chama o template mesmo sem rowsPerPageOptions.
2047
- RowsPerPageDropdown: (options) => options.options.length > 0 && /* @__PURE__ */ jsx(
2048
- Select,
2049
- {
2050
- className: "cr-paginator__rows",
2051
- size: "medium",
2052
- "aria-label": rowsPerPageLabel,
2053
- options: options.options,
2054
- optionValue: "value",
2055
- value: options.value,
2056
- onChange: (value) => options.onChange({ value })
2057
- }
2058
- )
2059
- },
2170
+ template: paginatorTemplate(rowsPerPageLabel),
2060
2171
  pt: {
2061
2172
  root: { className: ["cr-paginator", className].filter(Boolean).join(" ") },
2062
2173
  pages: { className: "cr-paginator__pages" }
@@ -2240,6 +2351,37 @@ var SegmentControl = forwardRef(
2240
2351
  );
2241
2352
  }
2242
2353
  );
2354
+ var Skeleton = forwardRef(function Skeleton2({
2355
+ shape = "rectangle",
2356
+ width = "100%",
2357
+ height = "16px",
2358
+ size,
2359
+ animated = true,
2360
+ className,
2361
+ ...props
2362
+ }, ref) {
2363
+ const primeRef = useRef(null);
2364
+ useImperativeHandle(ref, () => primeRef.current?.getElement());
2365
+ const classes = [
2366
+ "cr-skeleton",
2367
+ `cr-skeleton--${shape}`,
2368
+ animated && "cr-skeleton--animated",
2369
+ className
2370
+ ].filter(Boolean).join(" ");
2371
+ return /* @__PURE__ */ jsx(
2372
+ Skeleton$1,
2373
+ {
2374
+ unstyled: true,
2375
+ ref: primeRef,
2376
+ shape,
2377
+ width,
2378
+ height,
2379
+ size,
2380
+ animation: animated ? "wave" : "none",
2381
+ pt: { root: { ...props, className: classes } }
2382
+ }
2383
+ );
2384
+ });
2243
2385
  var Switch = forwardRef(function Switch2({
2244
2386
  label,
2245
2387
  showLabel = true,
@@ -2377,6 +2519,541 @@ var Tabs = forwardRef(function Tabs2({ activeIndex, onTabChange, children, id, c
2377
2519
  }
2378
2520
  );
2379
2521
  });
2522
+ function Column(_props) {
2523
+ return null;
2524
+ }
2525
+ var caixa = (label) => ({
2526
+ root: (options) => ({
2527
+ className: `cr-checkbox cr-checkbox__control${options?.props.checked ? " cr-checkbox__control--checked" : ""}`,
2528
+ role: void 0,
2529
+ "aria-label": void 0,
2530
+ tabIndex: void 0
2531
+ }),
2532
+ input: { className: "cr-checkbox__input", "aria-label": label },
2533
+ box: { className: "cr-checkbox__box" },
2534
+ icon: { className: "cr-checkbox__icon", "aria-hidden": true }
2535
+ });
2536
+ function Ajuda({ content }) {
2537
+ const ref = useRef(null);
2538
+ return /* @__PURE__ */ jsxs(Fragment, { children: [
2539
+ /* @__PURE__ */ jsx(
2540
+ "button",
2541
+ {
2542
+ ref,
2543
+ type: "button",
2544
+ className: "cr-table__help",
2545
+ "aria-label": "Ajuda",
2546
+ onClick: (event) => event.stopPropagation(),
2547
+ onKeyDown: (event) => event.stopPropagation(),
2548
+ children: /* @__PURE__ */ jsx(Question, { "aria-hidden": "true" })
2549
+ }
2550
+ ),
2551
+ /* @__PURE__ */ jsx(Tooltip, { target: ref, content, describe: true })
2552
+ ] });
2553
+ }
2554
+ var chaveDaColuna = (props, index) => props.columnKey ?? props.field ?? String(index);
2555
+ function coluna(element, index, opcoes) {
2556
+ const { help, header, align, selectionMode, ...props } = element.props;
2557
+ const { carregando, ajustada, abrirMenu } = opcoes;
2558
+ const frozen = opcoes.fixada ?? props.frozen;
2559
+ const chave = chaveDaColuna(element.props, index);
2560
+ const celula = [
2561
+ "cr-table__cell",
2562
+ `cr-table__cell--${align ?? "left"}`,
2563
+ selectionMode && "cr-table__cell--selection",
2564
+ // O Prime calcula a posição das colunas fixas procurando esta classe, mesmo no unstyled.
2565
+ frozen && "cr-table__cell--frozen p-frozen-column"
2566
+ ].filter(Boolean).join(" ");
2567
+ return /* @__PURE__ */ jsx(
2568
+ Column$1,
2569
+ {
2570
+ ...props,
2571
+ align,
2572
+ frozen,
2573
+ style: ajustada ? { ...props.style, width: "1px" } : props.style,
2574
+ ...carregando ? { body: /* @__PURE__ */ jsx(Skeleton, { size: selectionMode ? "24px" : void 0 }) } : { selectionMode },
2575
+ header: (
2576
+ // Carregando, a seleção perde o checkbox do cabeçalho: o nome da coluna fica só para o
2577
+ // leitor de tela (um Skeleton ali sumiria, da mesma cor do fundo do cabeçalho).
2578
+ carregando && selectionMode ? /* @__PURE__ */ jsx("span", { className: "cr-so-leitor", children: "Sele\xE7\xE3o" }) : help && typeof header !== "function" ? /* @__PURE__ */ jsxs("span", { className: "cr-table__title", children: [
2579
+ /* @__PURE__ */ jsx(Ajuda, { content: help }),
2580
+ /* @__PURE__ */ jsx("span", { className: "cr-table__title-text", children: header })
2581
+ ] }) : header
2582
+ ),
2583
+ pt: {
2584
+ headerCell: {
2585
+ className: `cr-table__head ${celula}`,
2586
+ // Botão direito (ou a tecla de menu) no cabeçalho: o menu de contexto da coluna.
2587
+ ...abrirMenu && !selectionMode && !carregando && {
2588
+ onContextMenu: (event) => abrirMenu(event, {
2589
+ chave,
2590
+ titulo: typeof header === "string" ? header : props.field ?? "",
2591
+ sortField: props.sortField ?? props.field,
2592
+ sortable: Boolean(props.sortable),
2593
+ fixada: Boolean(frozen)
2594
+ })
2595
+ }
2596
+ },
2597
+ headerContent: { className: "cr-table__head-content" },
2598
+ headerTitle: { className: "cr-table__head-title" },
2599
+ sort: { className: "cr-table__sort" },
2600
+ columnResizer: { className: "cr-table__resizer" },
2601
+ bodyCell: { className: celula },
2602
+ headerCheckbox: caixa("Selecionar todas as linhas"),
2603
+ rowCheckbox: caixa("Selecionar linha")
2604
+ }
2605
+ },
2606
+ element.key ?? chave
2607
+ );
2608
+ }
2609
+ function TableBase({
2610
+ value,
2611
+ children,
2612
+ selectionMode,
2613
+ paginator = true,
2614
+ rows,
2615
+ rowsPerPageOptions,
2616
+ report = ({ shown, totalRecords: total }) => `Mostrando ${shown} de ${total} registros`,
2617
+ rowsPerPageLabel = "Itens por p\xE1gina",
2618
+ emptyMessage = "N\xE3o h\xE1 registros para mostrar.",
2619
+ loading,
2620
+ columnMenu = true,
2621
+ ...props
2622
+ }, ref) {
2623
+ const elementos = Children.toArray(children).filter(isValidElement);
2624
+ const colunaDeSelecao = elementos.some((element) => element.props.selectionMode === "multiple");
2625
+ const template = paginatorTemplate(rowsPerPageLabel);
2626
+ const carregando = Boolean(loading);
2627
+ const paginaPropria = !props.onPage;
2628
+ const ordemPropria = !props.onSort;
2629
+ const [pagina, setPagina] = useState({
2630
+ first: props.first ?? 0,
2631
+ rows: rows ?? rowsPerPageOptions?.[0] ?? 10
2632
+ });
2633
+ const [ordem, setOrdem] = useState({
2634
+ sortField: props.sortField ?? "",
2635
+ sortOrder: props.sortOrder
2636
+ });
2637
+ const linhas = paginaPropria ? pagina.rows : rows ?? rowsPerPageOptions?.[0] ?? 10;
2638
+ const menuRef = useRef(null);
2639
+ const [fixadas, setFixadas] = useState({});
2640
+ const [ajustadas, setAjustadas] = useState({});
2641
+ const [alvo, setAlvo] = useState(null);
2642
+ const ordenar = (sortField, sortOrder) => {
2643
+ if (props.onSort) {
2644
+ props.onSort({
2645
+ first: props.first ?? 0,
2646
+ rows: linhas,
2647
+ sortField,
2648
+ sortOrder,
2649
+ multiSortMeta: null,
2650
+ filters: props.filters ?? {}
2651
+ });
2652
+ return;
2653
+ }
2654
+ setOrdem({ sortField, sortOrder });
2655
+ if (paginaPropria) setPagina((atual) => ({ ...atual, first: 0 }));
2656
+ };
2657
+ const modeloDoMenu = alvo ? [
2658
+ {
2659
+ label: alvo.fixada ? "Desafixar coluna" : "Fixar coluna",
2660
+ icon: /* @__PURE__ */ jsx(Note, {}),
2661
+ command: () => setFixadas((atuais) => ({ ...atuais, [alvo.chave]: !alvo.fixada }))
2662
+ },
2663
+ {
2664
+ label: "Ajustar ao conte\xFAdo",
2665
+ icon: /* @__PURE__ */ jsx(ArrowsInLineHorizontal, {}),
2666
+ command: () => setAjustadas((atuais) => ({ ...atuais, [alvo.chave]: true }))
2667
+ },
2668
+ ...alvo.sortable && alvo.sortField ? [
2669
+ {
2670
+ label: "Ordenar ascendente",
2671
+ icon: /* @__PURE__ */ jsx(SortAscending, {}),
2672
+ command: () => ordenar(alvo.sortField, 1)
2673
+ },
2674
+ {
2675
+ label: "Ordenar descendente",
2676
+ icon: /* @__PURE__ */ jsx(SortDescending, {}),
2677
+ command: () => ordenar(alvo.sortField, -1)
2678
+ }
2679
+ ] : []
2680
+ ] : [];
2681
+ const [pedido, setPedido] = useState(null);
2682
+ useEffect(() => {
2683
+ if (pedido) menuRef.current?.show(pedido);
2684
+ }, [pedido]);
2685
+ const abrirMenu = (event, coluna2) => {
2686
+ event.preventDefault();
2687
+ setAlvo(coluna2);
2688
+ setPedido(event);
2689
+ };
2690
+ const tableProps = {
2691
+ scrollable: true,
2692
+ columnResizeMode: "expand",
2693
+ paginatorTemplate: {
2694
+ ...template,
2695
+ layout: `CurrentPageReport ${template.layout}`,
2696
+ CurrentPageReport: (options) => /* @__PURE__ */ jsx("span", { className: "cr-table__report", children: report({
2697
+ shown: options.totalRecords === 0 ? 0 : options.last - options.first + 1,
2698
+ totalRecords: options.totalRecords
2699
+ }) })
2700
+ },
2701
+ sortIcon: ({ sorted, sortOrder }) => sorted && sortOrder === -1 ? /* @__PURE__ */ jsx(SortDescending, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(SortAscending, { "aria-hidden": "true" }),
2702
+ checkIcon: /* @__PURE__ */ jsx(Check, { size: 16 }),
2703
+ ...props,
2704
+ ...paginaPropria && {
2705
+ first: pagina.first,
2706
+ onPage: (event) => setPagina({ first: event.first, rows: event.rows })
2707
+ },
2708
+ ...ordemPropria && {
2709
+ sortField: ordem.sortField,
2710
+ sortOrder: ordem.sortOrder,
2711
+ onSort: (event) => {
2712
+ setOrdem({ sortField: event.sortField, sortOrder: event.sortOrder });
2713
+ if (paginaPropria) setPagina((atual) => ({ ...atual, first: 0 }));
2714
+ }
2715
+ },
2716
+ value,
2717
+ selectionMode: selectionMode ?? (colunaDeSelecao ? "checkbox" : void 0),
2718
+ paginator,
2719
+ rows: linhas,
2720
+ rowsPerPageOptions,
2721
+ // Carregando: uma linha de Skeleton por linha da página, sem filtrar nem ordenar (lazy), com o
2722
+ // total que já se conhece no rodapé.
2723
+ ...carregando && {
2724
+ value: Array.from({ length: linhas }, (_, indice) => ({ crSkeleton: indice })),
2725
+ dataKey: "crSkeleton",
2726
+ lazy: true,
2727
+ totalRecords: props.totalRecords ?? value.length,
2728
+ selectionMode: void 0
2729
+ },
2730
+ emptyMessage: typeof emptyMessage === "function" ? emptyMessage : /* @__PURE__ */ jsx(Message, { type: "info", className: "cr-table__empty", children: emptyMessage })
2731
+ };
2732
+ return (
2733
+ // Contêiner da consulta de largura: a variante de 360px também muda a caixa do DataTable.
2734
+ /* @__PURE__ */ jsxs("div", { className: "cr-table", children: [
2735
+ /* @__PURE__ */ jsx(
2736
+ DataTable,
2737
+ {
2738
+ ...tableProps,
2739
+ ref,
2740
+ unstyled: true,
2741
+ pt: {
2742
+ root: { className: "cr-table__box", "aria-busy": carregando || void 0 },
2743
+ header: { className: "cr-table__header" },
2744
+ wrapper: { className: "cr-table__wrapper cr-rolagem-fina" },
2745
+ table: { className: "cr-table__table" },
2746
+ thead: { className: "cr-table__thead" },
2747
+ tbody: { className: "cr-table__tbody" },
2748
+ bodyRow: {
2749
+ className: carregando ? "cr-table__row cr-table__row--skeleton" : "cr-table__row"
2750
+ },
2751
+ emptyMessage: { className: "cr-table__empty-row" },
2752
+ resizeHelper: { className: "cr-table__resize-helper" },
2753
+ footer: { className: "cr-table__footer" },
2754
+ paginator: {
2755
+ root: { className: "cr-paginator cr-table__paginator" },
2756
+ pages: { className: "cr-paginator__pages" }
2757
+ }
2758
+ },
2759
+ children: elementos.map((element, index) => {
2760
+ const chave = chaveDaColuna(element.props, index);
2761
+ return coluna(element, index, {
2762
+ carregando,
2763
+ fixada: fixadas[chave],
2764
+ ajustada: Boolean(ajustadas[chave]),
2765
+ abrirMenu: columnMenu ? abrirMenu : void 0
2766
+ });
2767
+ })
2768
+ }
2769
+ ),
2770
+ columnMenu && // O ContextMenu do Cristal (a Dropdown List do Figma): abre no ponto do clique.
2771
+ /* @__PURE__ */ jsx(
2772
+ ContextMenu,
2773
+ {
2774
+ ref: menuRef,
2775
+ model: modeloDoMenu,
2776
+ "aria-label": alvo ? `Op\xE7\xF5es da coluna ${alvo.titulo}` : void 0,
2777
+ onHide: () => setAlvo(null)
2778
+ }
2779
+ )
2780
+ ] })
2781
+ );
2782
+ }
2783
+ var Table = forwardRef(TableBase);
2784
+ function BotaoDeMenu({
2785
+ icon,
2786
+ label,
2787
+ model,
2788
+ variant,
2789
+ tooltip,
2790
+ popupAlignment = "left",
2791
+ disabled,
2792
+ className
2793
+ }) {
2794
+ const menuRef = useRef(null);
2795
+ const menuId = useId();
2796
+ const [open, setOpen] = useState(false);
2797
+ return /* @__PURE__ */ jsxs("span", { className, children: [
2798
+ /* @__PURE__ */ jsx(
2799
+ IconButton,
2800
+ {
2801
+ variant,
2802
+ size: "medium",
2803
+ icon,
2804
+ "aria-label": label,
2805
+ "aria-haspopup": "menu",
2806
+ "aria-expanded": open,
2807
+ "aria-controls": open ? menuId : void 0,
2808
+ tooltip: open ? false : tooltip,
2809
+ disabled,
2810
+ onClick: (event) => menuRef.current?.toggle(event)
2811
+ }
2812
+ ),
2813
+ /* @__PURE__ */ jsx(
2814
+ Menu,
2815
+ {
2816
+ ref: menuRef,
2817
+ id: menuId,
2818
+ popup: true,
2819
+ popupAlignment,
2820
+ model,
2821
+ "aria-label": label,
2822
+ onShow: () => setOpen(true),
2823
+ onHide: () => setOpen(false)
2824
+ }
2825
+ )
2826
+ ] });
2827
+ }
2828
+ function MaisAcoes({
2829
+ actions,
2830
+ label,
2831
+ className
2832
+ }) {
2833
+ if (actions.length === 0) return null;
2834
+ const model = actions.map((action) => ({
2835
+ label: action.label,
2836
+ icon: action.icon,
2837
+ disabled: action.disabled,
2838
+ command: (event) => action.onClick?.(event.originalEvent)
2839
+ }));
2840
+ return /* @__PURE__ */ jsx(
2841
+ BotaoDeMenu,
2842
+ {
2843
+ icon: /* @__PURE__ */ jsx(DotsThreeVertical, {}),
2844
+ label,
2845
+ model,
2846
+ variant: "tertiary",
2847
+ popupAlignment: "right",
2848
+ className
2849
+ }
2850
+ );
2851
+ }
2852
+ function BarraDeFiltros({
2853
+ filters,
2854
+ onClear,
2855
+ clearLabel
2856
+ }) {
2857
+ const chipsRef = useRef(null);
2858
+ const [setas, setSetas] = useState({ esquerda: false, direita: false });
2859
+ const medir = useCallback(() => {
2860
+ const chips = chipsRef.current;
2861
+ if (!chips) return;
2862
+ setSetas({
2863
+ esquerda: chips.scrollLeft > 0,
2864
+ // sem token: 1px de folga para o arredondamento da rolagem.
2865
+ direita: chips.scrollLeft + chips.clientWidth < chips.scrollWidth - 1
2866
+ });
2867
+ }, []);
2868
+ useEffect(() => {
2869
+ const chips = chipsRef.current;
2870
+ if (!chips) return;
2871
+ medir();
2872
+ const observer = new ResizeObserver(medir);
2873
+ observer.observe(chips);
2874
+ return () => observer.disconnect();
2875
+ }, [medir, filters.length]);
2876
+ const rolar = (sentido) => chipsRef.current?.scrollBy({
2877
+ left: sentido * chipsRef.current.clientWidth,
2878
+ behavior: "smooth"
2879
+ });
2880
+ return /* @__PURE__ */ jsxs("div", { className: "cr-table-toolbar__filters", children: [
2881
+ setas.esquerda && /* @__PURE__ */ jsx(
2882
+ IconButton,
2883
+ {
2884
+ variant: "tertiary",
2885
+ size: "xsmall",
2886
+ icon: /* @__PURE__ */ jsx(CaretLeft, {}),
2887
+ "aria-label": "Filtros anteriores",
2888
+ onClick: () => rolar(-1)
2889
+ }
2890
+ ),
2891
+ /* @__PURE__ */ jsx("div", { ref: chipsRef, className: "cr-table-toolbar__chips", onScroll: medir, children: filters.map((filter) => /* @__PURE__ */ jsx(
2892
+ Chip,
2893
+ {
2894
+ variant: "outline",
2895
+ size: "large",
2896
+ label: /* @__PURE__ */ jsxs(Fragment, { children: [
2897
+ /* @__PURE__ */ jsxs("span", { className: "cr-table-toolbar__chip-label", children: [
2898
+ filter.label,
2899
+ ":"
2900
+ ] }),
2901
+ " ",
2902
+ filter.value
2903
+ ] }),
2904
+ removeLabel: `Remover filtro ${filter.label}: ${filter.value}`,
2905
+ onRemove: filter.onRemove ? () => {
2906
+ filter.onRemove?.();
2907
+ return false;
2908
+ } : void 0
2909
+ },
2910
+ `${filter.label}:${filter.value}`
2911
+ )) }),
2912
+ setas.direita && /* @__PURE__ */ jsx(
2913
+ IconButton,
2914
+ {
2915
+ variant: "tertiary",
2916
+ size: "xsmall",
2917
+ icon: /* @__PURE__ */ jsx(CaretRight, {}),
2918
+ "aria-label": "Pr\xF3ximos filtros",
2919
+ onClick: () => rolar(1)
2920
+ }
2921
+ ),
2922
+ onClear && /* @__PURE__ */ jsxs(Fragment, { children: [
2923
+ /* @__PURE__ */ jsx(Divider, { orientation: "vertical", className: "cr-table-toolbar__divider" }),
2924
+ /* @__PURE__ */ jsx(
2925
+ IconButton,
2926
+ {
2927
+ variant: "tertiary",
2928
+ size: "xsmall",
2929
+ icon: /* @__PURE__ */ jsx(Trash, {}),
2930
+ "aria-label": clearLabel,
2931
+ onClick: onClear
2932
+ }
2933
+ )
2934
+ ] })
2935
+ ] });
2936
+ }
2937
+ var TableToolbar = forwardRef(function TableToolbar2({
2938
+ searchValue,
2939
+ onSearchChange,
2940
+ searchPlaceholder = "Procurar por",
2941
+ searchLabel = "Procurar",
2942
+ onFilter,
2943
+ filterLabel = "Filtrar",
2944
+ filters = [],
2945
+ onClearFilters,
2946
+ clearFiltersLabel = "Limpar filtros",
2947
+ actions = [],
2948
+ moreActionsLabel = "Mais a\xE7\xF5es",
2949
+ className,
2950
+ ...props
2951
+ }, ref) {
2952
+ const busca = searchValue !== void 0 || onSearchChange !== void 0;
2953
+ const contagem = filters.length;
2954
+ const filtrar = contagem > 0 ? `${filterLabel}, ${contagem} aplicados` : filterLabel;
2955
+ const secundarias = actions.filter((action) => action.variant !== "primary");
2956
+ return /* @__PURE__ */ jsxs("div", { ref, className: ["cr-table-toolbar", className].filter(Boolean).join(" "), ...props, children: [
2957
+ /* @__PURE__ */ jsxs("div", { className: "cr-table-toolbar__main", children: [
2958
+ /* @__PURE__ */ jsxs("div", { className: "cr-table-toolbar__start", children: [
2959
+ busca && /* @__PURE__ */ jsx(
2960
+ Input,
2961
+ {
2962
+ className: "cr-table-toolbar__search",
2963
+ size: "medium",
2964
+ role: "searchbox",
2965
+ "aria-label": searchLabel,
2966
+ placeholder: searchPlaceholder,
2967
+ value: searchValue ?? "",
2968
+ onChange: (event) => onSearchChange?.(event.target.value),
2969
+ trailingIcon: /* @__PURE__ */ jsx(MagnifyingGlass, {})
2970
+ }
2971
+ ),
2972
+ onFilter && /* @__PURE__ */ jsxs("span", { className: "cr-table-toolbar__filter", children: [
2973
+ /* @__PURE__ */ jsx(
2974
+ Button,
2975
+ {
2976
+ className: "cr-table-toolbar__filter-button",
2977
+ variant: "tertiary",
2978
+ size: "medium",
2979
+ leadingIcon: /* @__PURE__ */ jsx(Funnel, {}),
2980
+ "aria-label": contagem > 0 ? filtrar : void 0,
2981
+ onClick: onFilter,
2982
+ children: filterLabel
2983
+ }
2984
+ ),
2985
+ /* @__PURE__ */ jsx(
2986
+ IconButton,
2987
+ {
2988
+ className: "cr-table-toolbar__filter-icon",
2989
+ variant: "tertiary",
2990
+ size: "medium",
2991
+ icon: /* @__PURE__ */ jsx(Funnel, {}),
2992
+ "aria-label": filtrar,
2993
+ tooltip: filterLabel,
2994
+ onClick: onFilter
2995
+ }
2996
+ ),
2997
+ contagem > 0 && /* @__PURE__ */ jsx(Badge, { className: "cr-table-toolbar__badge", size: "medium", "aria-hidden": "true", children: contagem })
2998
+ ] })
2999
+ ] }),
3000
+ actions.length > 0 && /* @__PURE__ */ jsxs("div", { className: "cr-table-toolbar__end", children: [
3001
+ /* @__PURE__ */ jsx(
3002
+ MaisAcoes,
3003
+ {
3004
+ actions: secundarias,
3005
+ label: moreActionsLabel,
3006
+ className: "cr-table-toolbar__more cr-table-toolbar__more--tablet"
3007
+ }
3008
+ ),
3009
+ /* @__PURE__ */ jsx(
3010
+ MaisAcoes,
3011
+ {
3012
+ actions,
3013
+ label: moreActionsLabel,
3014
+ className: "cr-table-toolbar__more cr-table-toolbar__more--mobile"
3015
+ }
3016
+ ),
3017
+ actions.map((action) => /* @__PURE__ */ jsx(
3018
+ Button,
3019
+ {
3020
+ className: `cr-table-toolbar__action cr-table-toolbar__action--${action.variant ?? "tertiary"}`,
3021
+ variant: action.variant ?? "tertiary",
3022
+ size: "medium",
3023
+ leadingIcon: action.icon,
3024
+ disabled: action.disabled,
3025
+ onClick: action.onClick,
3026
+ children: action.label
3027
+ },
3028
+ action.label
3029
+ ))
3030
+ ] })
3031
+ ] }),
3032
+ contagem > 0 && /* @__PURE__ */ jsx(BarraDeFiltros, { filters, onClear: onClearFilters, clearLabel: clearFiltersLabel })
3033
+ ] });
3034
+ });
3035
+ function TableRowActions({
3036
+ model,
3037
+ "aria-label": label,
3038
+ icon = /* @__PURE__ */ jsx(GearSix, {}),
3039
+ tooltip = "A\xE7\xF5es",
3040
+ popupAlignment,
3041
+ disabled
3042
+ }) {
3043
+ return /* @__PURE__ */ jsx(
3044
+ BotaoDeMenu,
3045
+ {
3046
+ icon,
3047
+ label,
3048
+ model,
3049
+ variant: "ghost",
3050
+ tooltip,
3051
+ popupAlignment,
3052
+ disabled,
3053
+ className: "cr-table__row-actions"
3054
+ }
3055
+ );
3056
+ }
2380
3057
  var SEVERITY2 = {
2381
3058
  warning: "warn",
2382
3059
  danger: "error",
@@ -2435,6 +3112,7 @@ var Toast = forwardRef(function Toast2({ position = "top-right", closeLabel = "F
2435
3112
  classNames: {
2436
3113
  enter: "cr-toast__message--enter",
2437
3114
  enterActive: "cr-toast__message--enter-active",
3115
+ exit: "cr-toast__message--exit",
2438
3116
  exitActive: "cr-toast__message--exit-active"
2439
3117
  }
2440
3118
  }
@@ -2443,6 +3121,6 @@ var Toast = forwardRef(function Toast2({ position = "top-right", closeLabel = "F
2443
3121
  );
2444
3122
  });
2445
3123
 
2446
- export { Accordion, AccordionTab, AutoComplete, Badge, Button, Card, Chart, Checkbox, Chip, Divider, Drawer, IconButton, Input, Menu, MenuPrincipal, Menubar, Message, Modal, MultiSelect, PageHeader, Paginator, Panel, Radio, ScrollPanel, SegmentControl, Select, Switch, TabPanel, Tabs, Tag, Toast, Tooltip };
3124
+ export { Accordion, AccordionTab, AutoComplete, Badge, Button, Card, Chart, Checkbox, Chip, Column, ContextMenu, Divider, Drawer, IconButton, Input, Menu, MenuPrincipal, Menubar, Message, Modal, MultiSelect, PageHeader, Paginator, Panel, Radio, ScrollPanel, SegmentControl, Select, Skeleton, Switch, TabPanel, Table, TableRowActions, TableToolbar, Tabs, Tag, Toast, Tooltip };
2447
3125
  //# sourceMappingURL=index.js.map
2448
3126
  //# sourceMappingURL=index.js.map