@vector-business-services/cristal-ds-web 0.8.0 → 0.10.0

package/dist/index.js

@@ -1,6 +1,6 @@
 import { forwardRef, useId, useRef, useImperativeHandle, useCallback, useEffect, useContext, useState, Children, isValidElement, cloneElement } from 'react';
 import { AutoComplete as AutoComplete$1 } from 'primereact/autocomplete';
-import { WarningCircle, Info, Check, CircleNotch, CaretDown, MagnifyingGlass, CaretUp, X, List, DribbbleLogo, ArrowLeft, Question } from '@phosphor-icons/react';
+import { WarningCircle, Info, Check, CircleNotch, CaretDown, MagnifyingGlass, ArrowLeft, ArrowsOutSimple, CaretUp, X, List, DribbbleLogo, SealWarning, XCircle, CheckCircle, Warning, CaretDoubleRight, CaretRight, CaretLeft, CaretDoubleLeft, Question } from '@phosphor-icons/react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { Badge as Badge$1 } from 'primereact/badge';
 import { Button as Button$1 } from 'primereact/button';
@@ -16,15 +16,19 @@ import { Menubar as Menubar$1 } from 'primereact/menubar';
 import { Avatar } from 'primereact/avatar';
 import { Tooltip as Tooltip$1 } from 'primereact/tooltip';
 import { Tag as Tag$1 } from 'primereact/tag';
+import { Message as Message$1 } from 'primereact/message';
 import { Dialog } from 'primereact/dialog';
 import { MultiSelect as MultiSelect$1 } from 'primereact/multiselect';
+import { TabMenu } from 'primereact/tabmenu';
+import { Paginator as Paginator$1 } from 'primereact/paginator';
+import { Dropdown } from 'primereact/dropdown';
 import { Panel as Panel$1 } from 'primereact/panel';
 import { RadioButton } from 'primereact/radiobutton';
 import { ScrollPanel as ScrollPanel$1 } from 'primereact/scrollpanel';
 import { SelectButton } from 'primereact/selectbutton';
-import { Dropdown } from 'primereact/dropdown';
 import { InputSwitch } from 'primereact/inputswitch';
 import { TabView, TabPanel as TabPanel$1 } from 'primereact/tabview';
+import { Toast as Toast$1 } from 'primereact/toast';
 
 // src/components/AutoComplete/AutoComplete.tsx
 var AutoComplete = forwardRef(function AutoComplete2({
@@ -878,9 +882,20 @@ var MenuPrincipal = forwardRef(
   }, ref) {
     const primeRef = useRef(null);
     const context = useContext(PrimeReactContext);
+    const [baseDoAlvo, setBaseDoAlvo] = useState();
+    const medirAlvo = (event) => {
+      const alvo = event.currentTarget;
+      if (alvo instanceof Element) setBaseDoAlvo(alvo.getBoundingClientRect().bottom);
+    };
     useImperativeHandle(ref, () => ({
-      toggle: (event) => primeRef.current?.toggle(event),
-      show: (event) => primeRef.current?.show(event),
+      toggle: (event) => {
+        medirAlvo(event);
+        primeRef.current?.toggle(event);
+      },
+      show: (event) => {
+        medirAlvo(event);
+        primeRef.current?.show(event);
+      },
       hide: (event) => primeRef.current?.hide(event),
       getElement: () => primeRef.current?.getElement() ?? null
     }));
@@ -938,6 +953,7 @@ var MenuPrincipal = forwardRef(
         ref: primeRef,
         id,
         className: classes,
+        style: popup && baseDoAlvo !== void 0 ? { "--cr-menu-principal-topo": `${baseDoAlvo}px` } : void 0,
         model: items,
         popup,
         onShow,
@@ -948,6 +964,43 @@ var MenuPrincipal = forwardRef(
     return context ? menu : /* @__PURE__ */ jsx(PrimeReactProvider, { children: menu });
   }
 );
+var SEVERITY = {
+  info: "info",
+  warning: "warn",
+  success: "success",
+  danger: "error",
+  highlight: "contrast",
+  neutral: "secondary"
+};
+var ICON = {
+  info: /* @__PURE__ */ jsx(Info, {}),
+  warning: /* @__PURE__ */ jsx(Warning, {}),
+  success: /* @__PURE__ */ jsx(CheckCircle, {}),
+  danger: /* @__PURE__ */ jsx(XCircle, {}),
+  highlight: /* @__PURE__ */ jsx(SealWarning, {}),
+  neutral: /* @__PURE__ */ jsx(WarningCircle, {})
+};
+var Message = forwardRef(function Message2({ type = "info", children, showIcon = true, id, className }, ref) {
+  const primeRef = useRef(null);
+  useImperativeHandle(ref, () => primeRef.current?.getElement());
+  return /* @__PURE__ */ jsx(
+    Message$1,
+    {
+      unstyled: true,
+      ref: primeRef,
+      id,
+      severity: SEVERITY[type],
+      text: children,
+      icon: showIcon ? /* @__PURE__ */ jsx("span", { className: "cr-message__icon", "aria-hidden": "true", children: ICON[type] }) : /* @__PURE__ */ jsx(Fragment, {}),
+      pt: {
+        root: {
+          className: ["cr-message", `cr-message--${type}`, className].filter(Boolean).join(" ")
+        },
+        text: { className: "cr-message__text" }
+      }
+    }
+  );
+});
 function Modal({
   visible,
   onHide,
@@ -1217,6 +1270,292 @@ var MultiSelect = forwardRef(function MultiSelect2({
     ] })
   ] });
 });
+var PageHeader = forwardRef(function PageHeader2({
+  title,
+  variant = "primary",
+  onBack,
+  backLabel = "Voltar",
+  tag,
+  segmentControl,
+  actions,
+  onExpand,
+  expandLabel = "Expandir",
+  tabs,
+  activeTab,
+  onTabChange,
+  tabsLabel,
+  className,
+  ...props
+}, ref) {
+  const [interna, setInterna] = useState(0);
+  const ativa = activeTab ?? interna;
+  const tools = segmentControl || actions;
+  const tabTemplate = (tab) => (
+    // O TabMenu também passa o index da aba nas opções, além do que o tipo do MenuItem declara.
+    function TabContent(item, options) {
+      const { element, index } = options;
+      const active = index === ativa;
+      return cloneElement(
+        element,
+        { "aria-current": active ? "page" : void 0 },
+        /* @__PURE__ */ jsxs(Fragment, { children: [
+          (variant === "primary" || tab.icon) && /* @__PURE__ */ jsx("span", { className: "cr-page-header__tab-icon", "aria-hidden": "true", children: tab.icon }),
+          /* @__PURE__ */ jsx("span", { className: "cr-page-header__tab-label", children: item.label })
+        ] })
+      );
+    }
+  );
+  const classes = ["cr-page-header", `cr-page-header--${variant}`, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("div", { ref, className: classes, ...props, children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `cr-page-header__title-group${tools ? " cr-page-header__title-group--tools" : ""}`,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "cr-page-header__title-text", children: [
+            onBack && /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                variant: "tertiary",
+                size: "small",
+                icon: /* @__PURE__ */ jsx(ArrowLeft, {}),
+                "aria-label": backLabel,
+                onClick: onBack
+              }
+            ),
+            /* @__PURE__ */ jsx("h1", { className: "cr-page-header__title", children: title }),
+            tag && /* @__PURE__ */ jsx(Tag, { className: "cr-page-header__tag", children: tag })
+          ] }),
+          tools && /* @__PURE__ */ jsxs("div", { className: "cr-page-header__tools", children: [
+            segmentControl && /* @__PURE__ */ jsx("div", { className: "cr-page-header__segment", children: segmentControl }),
+            actions && /* @__PURE__ */ jsx("div", { className: "cr-page-header__actions", children: actions })
+          ] }),
+          onExpand && /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              className: "cr-page-header__expand",
+              variant: "tertiary",
+              size: "medium",
+              icon: /* @__PURE__ */ jsx(ArrowsOutSimple, {}),
+              "aria-label": expandLabel,
+              onClick: onExpand
+            }
+          )
+        ]
+      }
+    ),
+    tabs && tabs.length > 0 && /* @__PURE__ */ jsx(
+      TabMenu,
+      {
+        unstyled: true,
+        model: tabs.map((tab) => ({
+          label: tab.label,
+          disabled: tab.disabled,
+          template: tabTemplate(tab)
+        })),
+        activeIndex: ativa,
+        onTabChange: (event) => {
+          setInterna(event.index);
+          onTabChange?.(event.index);
+        },
+        pt: {
+          root: { className: "cr-page-header__tabs" },
+          menu: { className: "cr-page-header__tab-list", "aria-label": tabsLabel ?? title },
+          menuitem: { className: "cr-page-header__tab-item" },
+          action: { className: "cr-page-header__tab" },
+          inkbar: { className: "cr-page-header__inkbar" }
+        }
+      }
+    )
+  ] });
+});
+var Select = forwardRef(function Select2({
+  variant = "outline",
+  size = "large",
+  label,
+  "aria-label": ariaLabel,
+  options,
+  optionLabel = "label",
+  optionValue,
+  value,
+  onChange,
+  placeholder = "Selecione uma op\xE7\xE3o",
+  hint,
+  error,
+  required,
+  disabled,
+  id,
+  name,
+  className
+}, ref) {
+  const autoId = useId();
+  const inputId = id ?? autoId;
+  const hintId = `${inputId}-hint`;
+  const listId = `${inputId}-list`;
+  const supportText = error ?? hint;
+  const [open, setOpen] = useState(false);
+  const setInputRef = useCallback(
+    (input) => {
+      input?.setAttribute("role", "combobox");
+      if (typeof ref === "function") ref(input);
+      else if (ref) ref.current = input;
+    },
+    [ref]
+  );
+  const classes = [
+    "cr-field",
+    `cr-field--${variant}`,
+    `cr-field--${size}`,
+    "cr-select",
+    error && "cr-field--error",
+    disabled && "cr-field--disabled",
+    className
+  ].filter(Boolean).join(" ");
+  const pt = {
+    root: {
+      className: `cr-field__control cr-select__control${open ? " cr-select__control--open" : ""}`,
+      // O Prime aponta para um item mesmo sem destaque (dropdownItem_-1); o foco vai no item.
+      "aria-activedescendant": void 0
+    },
+    // O <select> escondido do Prime só existe para formulários: fora da árvore de acessibilidade.
+    select: { "aria-hidden": true },
+    hiddenSelectedMessage: { className: "cr-select__hidden" },
+    // O Prime usa a mesma chave no texto do campo e no combobox escondido.
+    input: { className: "cr-select__value" },
+    trigger: { className: "cr-field__icon cr-select__trigger", "aria-hidden": true },
+    panel: { className: "cr-select__panel" },
+    wrapper: { className: "cr-select__wrapper" },
+    list: { className: "cr-select__list", id: listId },
+    item: { className: "cr-select__item" },
+    emptyMessage: { className: "cr-select__item cr-select__empty" }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: classes, children: [
+    label && /* @__PURE__ */ jsxs("label", { className: "cr-field__label", htmlFor: inputId, children: [
+      label,
+      required && /* @__PURE__ */ jsx("span", { className: "cr-field__required", "aria-hidden": "true", children: "*" })
+    ] }),
+    /* @__PURE__ */ jsx(
+      Dropdown,
+      {
+        unstyled: true,
+        inputId,
+        focusInputRef: setInputRef,
+        value,
+        options,
+        optionLabel,
+        optionValue,
+        onChange: (event) => onChange?.(event.value),
+        onShow: () => setOpen(true),
+        onHide: () => setOpen(false),
+        disabled,
+        required,
+        name,
+        invalid: Boolean(error),
+        placeholder,
+        valueTemplate: (option) => option == null ? /* @__PURE__ */ jsx("span", { className: "cr-select__placeholder", children: placeholder }) : String(option[optionLabel] ?? option),
+        scrollHeight: "185px",
+        dropdownIcon: /* @__PURE__ */ jsx(CaretDown, {}),
+        collapseIcon: /* @__PURE__ */ jsx(CaretUp, {}),
+        "aria-label": label ? void 0 : ariaLabel,
+        "aria-expanded": open,
+        "aria-controls": open ? listId : void 0,
+        "aria-describedby": supportText ? hintId : void 0,
+        "aria-invalid": error ? true : void 0,
+        "aria-required": required || void 0,
+        pt
+      }
+    ),
+    supportText && /* @__PURE__ */ jsxs("p", { id: hintId, className: `cr-field__hint${error ? " cr-field__hint--error" : ""}`, children: [
+      /* @__PURE__ */ jsx("span", { className: "cr-field__hint-icon", "aria-hidden": "true", children: error ? /* @__PURE__ */ jsx(WarningCircle, {}) : /* @__PURE__ */ jsx(Info, {}) }),
+      supportText
+    ] })
+  ] });
+});
+var seta = (label, icon) => (options) => /* @__PURE__ */ jsx(
+  "button",
+  {
+    type: "button",
+    className: "cr-paginator__arrow",
+    "aria-label": label,
+    disabled: options.disabled,
+    onClick: options.onClick,
+    children: icon
+  }
+);
+var Paginator = forwardRef(function Paginator2({
+  totalRecords,
+  first,
+  rows,
+  rowsPerPageOptions,
+  pageLinkSize = 5,
+  onPageChange,
+  rowsPerPageLabel = "Itens por p\xE1gina",
+  id,
+  className
+}, ref) {
+  const primeRef = useRef(null);
+  useImperativeHandle(ref, () => primeRef.current?.getElement());
+  const [interno, setInterno] = useState({
+    first: 0,
+    rows: rowsPerPageOptions?.[0] ?? 10
+  });
+  const atual = { first: first ?? interno.first, rows: rows ?? interno.rows };
+  return /* @__PURE__ */ jsx(
+    Paginator$1,
+    {
+      unstyled: true,
+      ref: primeRef,
+      id,
+      totalRecords,
+      first: atual.first,
+      rows: atual.rows,
+      rowsPerPageOptions,
+      pageLinkSize,
+      onPageChange: (event) => {
+        setInterno({ first: event.first, rows: event.rows });
+        onPageChange?.(event);
+      },
+      template: {
+        layout: "FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown",
+        FirstPageLink: seta("Primeira p\xE1gina", /* @__PURE__ */ jsx(CaretDoubleLeft, { "aria-hidden": "true" })),
+        PrevPageLink: seta("P\xE1gina anterior", /* @__PURE__ */ jsx(CaretLeft, { "aria-hidden": "true" })),
+        NextPageLink: seta("Pr\xF3xima p\xE1gina", /* @__PURE__ */ jsx(CaretRight, { "aria-hidden": "true" })),
+        LastPageLink: seta("\xDAltima p\xE1gina", /* @__PURE__ */ jsx(CaretDoubleRight, { "aria-hidden": "true" })),
+        PageLinks: (options) => {
+          const ativa = options.page === options.currentPage;
+          return /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "cr-paginator__page",
+              "aria-label": `P\xE1gina ${options.page + 1}`,
+              "aria-current": ativa ? "page" : void 0,
+              onClick: options.onClick,
+              children: options.page + 1
+            }
+          );
+        },
+        // O Prime chama o template mesmo sem rowsPerPageOptions.
+        RowsPerPageDropdown: (options) => options.options.length > 0 && /* @__PURE__ */ jsx(
+          Select,
+          {
+            className: "cr-paginator__rows",
+            size: "medium",
+            "aria-label": rowsPerPageLabel,
+            options: options.options,
+            optionValue: "value",
+            value: options.value,
+            onChange: (value) => options.onChange({ value })
+          }
+        )
+      },
+      pt: {
+        root: { className: ["cr-paginator", className].filter(Boolean).join(" ") },
+        pages: { className: "cr-paginator__pages" }
+      }
+    }
+  );
+});
 var Panel = forwardRef(function Panel2({ className, style, children, ...props }, ref) {
   const primeRef = useRef(null);
   useImperativeHandle(ref, () => primeRef.current?.getElement());
@@ -1381,108 +1720,6 @@ var SegmentControl = forwardRef(
     );
   }
 );
-var Select = forwardRef(function Select2({
-  variant = "outline",
-  size = "large",
-  label,
-  "aria-label": ariaLabel,
-  options,
-  optionLabel = "label",
-  optionValue,
-  value,
-  onChange,
-  placeholder = "Selecione uma op\xE7\xE3o",
-  hint,
-  error,
-  required,
-  disabled,
-  id,
-  name,
-  className
-}, ref) {
-  const autoId = useId();
-  const inputId = id ?? autoId;
-  const hintId = `${inputId}-hint`;
-  const listId = `${inputId}-list`;
-  const supportText = error ?? hint;
-  const [open, setOpen] = useState(false);
-  const setInputRef = useCallback(
-    (input) => {
-      input?.setAttribute("role", "combobox");
-      if (typeof ref === "function") ref(input);
-      else if (ref) ref.current = input;
-    },
-    [ref]
-  );
-  const classes = [
-    "cr-field",
-    `cr-field--${variant}`,
-    `cr-field--${size}`,
-    "cr-select",
-    error && "cr-field--error",
-    disabled && "cr-field--disabled",
-    className
-  ].filter(Boolean).join(" ");
-  const pt = {
-    root: {
-      className: `cr-field__control cr-select__control${open ? " cr-select__control--open" : ""}`,
-      // O Prime aponta para um item mesmo sem destaque (dropdownItem_-1); o foco vai no item.
-      "aria-activedescendant": void 0
-    },
-    // O <select> escondido do Prime só existe para formulários: fora da árvore de acessibilidade.
-    select: { "aria-hidden": true },
-    hiddenSelectedMessage: { className: "cr-select__hidden" },
-    // O Prime usa a mesma chave no texto do campo e no combobox escondido.
-    input: { className: "cr-select__value" },
-    trigger: { className: "cr-field__icon cr-select__trigger", "aria-hidden": true },
-    panel: { className: "cr-select__panel" },
-    wrapper: { className: "cr-select__wrapper" },
-    list: { className: "cr-select__list", id: listId },
-    item: { className: "cr-select__item" },
-    emptyMessage: { className: "cr-select__item cr-select__empty" }
-  };
-  return /* @__PURE__ */ jsxs("div", { className: classes, children: [
-    label && /* @__PURE__ */ jsxs("label", { className: "cr-field__label", htmlFor: inputId, children: [
-      label,
-      required && /* @__PURE__ */ jsx("span", { className: "cr-field__required", "aria-hidden": "true", children: "*" })
-    ] }),
-    /* @__PURE__ */ jsx(
-      Dropdown,
-      {
-        unstyled: true,
-        inputId,
-        focusInputRef: setInputRef,
-        value,
-        options,
-        optionLabel,
-        optionValue,
-        onChange: (event) => onChange?.(event.value),
-        onShow: () => setOpen(true),
-        onHide: () => setOpen(false),
-        disabled,
-        required,
-        name,
-        invalid: Boolean(error),
-        placeholder,
-        valueTemplate: (option) => option == null ? /* @__PURE__ */ jsx("span", { className: "cr-select__placeholder", children: placeholder }) : String(option[optionLabel] ?? option),
-        scrollHeight: "185px",
-        dropdownIcon: /* @__PURE__ */ jsx(CaretDown, {}),
-        collapseIcon: /* @__PURE__ */ jsx(CaretUp, {}),
-        "aria-label": label ? void 0 : ariaLabel,
-        "aria-expanded": open,
-        "aria-controls": open ? listId : void 0,
-        "aria-describedby": supportText ? hintId : void 0,
-        "aria-invalid": error ? true : void 0,
-        "aria-required": required || void 0,
-        pt
-      }
-    ),
-    supportText && /* @__PURE__ */ jsxs("p", { id: hintId, className: `cr-field__hint${error ? " cr-field__hint--error" : ""}`, children: [
-      /* @__PURE__ */ jsx("span", { className: "cr-field__hint-icon", "aria-hidden": "true", children: error ? /* @__PURE__ */ jsx(WarningCircle, {}) : /* @__PURE__ */ jsx(Info, {}) }),
-      supportText
-    ] })
-  ] });
-});
 var Switch = forwardRef(function Switch2({
   label,
   showLabel = true,
@@ -1613,7 +1850,72 @@ var Tabs = forwardRef(function Tabs2({ activeIndex, onTabChange, children, id, c
     }
   );
 });
+var SEVERITY2 = {
+  warning: "warn",
+  danger: "error",
+  success: "success",
+  info: "info"
+};
+var ICON2 = {
+  warning: /* @__PURE__ */ jsx(Warning, {}),
+  danger: /* @__PURE__ */ jsx(XCircle, {}),
+  success: /* @__PURE__ */ jsx(Check, {}),
+  info: /* @__PURE__ */ jsx(Info, {})
+};
+var Toast = forwardRef(function Toast2({ position = "top-right", closeLabel = "Fechar", id, className }, ref) {
+  const primeRef = useRef(null);
+  const converter = ({
+    type,
+    title,
+    message,
+    showIcon = true,
+    life,
+    sticky
+  }) => ({
+    severity: SEVERITY2[type],
+    summary: title,
+    detail: message,
+    // Sem ícone, um fragmento vazio: com undefined o Prime põe o ícone dele.
+    icon: showIcon ? /* @__PURE__ */ jsx("span", { className: "cr-toast__icon", "aria-hidden": "true", children: ICON2[type] }) : /* @__PURE__ */ jsx(Fragment, {}),
+    closeIcon: /* @__PURE__ */ jsx(X, { "aria-hidden": "true" }),
+    life,
+    sticky,
+    className: `cr-toast__message--${type}`
+  });
+  useImperativeHandle(ref, () => ({
+    show: (message) => primeRef.current?.show(Array.isArray(message) ? message.map(converter) : converter(message)),
+    clear: () => primeRef.current?.clear()
+  }));
+  return /* @__PURE__ */ jsx(
+    Toast$1,
+    {
+      ...{ unstyled: true },
+      ref: primeRef,
+      id,
+      position,
+      pt: {
+        root: {
+          className: ["cr-toast", className].filter(Boolean).join(" ")
+        },
+        message: { className: "cr-toast__message" },
+        content: { className: "cr-toast__content" },
+        text: { className: "cr-toast__text" },
+        summary: { className: "cr-toast__title" },
+        detail: { className: "cr-toast__detail" },
+        closeButton: { className: "cr-toast__close", "aria-label": closeLabel },
+        // No unstyled o Prime não põe classes na transição: o Cristal dá as dele (Toast.css).
+        transition: {
+          classNames: {
+            enter: "cr-toast__message--enter",
+            enterActive: "cr-toast__message--enter-active",
+            exitActive: "cr-toast__message--exit-active"
+          }
+        }
+      }
+    }
+  );
+});
 
-export { AutoComplete, Badge, Button, Card, Checkbox, Chip, Divider, Drawer, IconButton, Input, Menu, MenuPrincipal, Menubar, Modal, MultiSelect, Panel, Radio, ScrollPanel, SegmentControl, Select, Switch, TabPanel, Tabs, Tag, Tooltip };
+export { AutoComplete, Badge, Button, Card, 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 };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map