@vector-business-services/cristal-ds-web 0.9.0 → 0.11.0

package/dist/index.cjs

@@ -1,9 +1,10 @@
 'use strict';
 
 var react = require('react');
-var autocomplete = require('primereact/autocomplete');
+var accordion = require('primereact/accordion');
 var react$1 = require('@phosphor-icons/react');
 var jsxRuntime = require('react/jsx-runtime');
+var autocomplete = require('primereact/autocomplete');
 var badge = require('primereact/badge');
 var button = require('primereact/button');
 var card = require('primereact/card');
@@ -18,18 +19,74 @@ var menubar = require('primereact/menubar');
 var avatar = require('primereact/avatar');
 var tooltip = require('primereact/tooltip');
 var tag = require('primereact/tag');
+var message = require('primereact/message');
 var dialog = require('primereact/dialog');
 var multiselect = require('primereact/multiselect');
 var tabmenu = require('primereact/tabmenu');
+var paginator = require('primereact/paginator');
+var dropdown = require('primereact/dropdown');
 var panel = require('primereact/panel');
 var radiobutton = require('primereact/radiobutton');
 var scrollpanel = require('primereact/scrollpanel');
 var selectbutton = require('primereact/selectbutton');
-var dropdown = require('primereact/dropdown');
 var inputswitch = require('primereact/inputswitch');
 var tabview = require('primereact/tabview');
+var toast = require('primereact/toast');
 
-// src/components/AutoComplete/AutoComplete.tsx
+// src/components/Accordion/Accordion.tsx
+function AccordionTab(_props) {
+  return null;
+}
+var seta = (icon) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cr-accordion__toggle", "aria-hidden": "true", children: icon });
+var Accordion = react.forwardRef(function Accordion2({ multiple = false, activeIndex, onTabChange, children, id, className }, ref) {
+  const primeRef = react.useRef(null);
+  react.useImperativeHandle(ref, () => primeRef.current?.getElement());
+  const [interno, setInterno] = react.useState(multiple ? [0] : 0);
+  const abertos = activeIndex === void 0 ? interno : activeIndex;
+  const tabs = react.Children.toArray(children).filter(
+    (child) => react.isValidElement(child)
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    accordion.Accordion,
+    {
+      ...{ unstyled: true },
+      ref: primeRef,
+      id,
+      multiple,
+      activeIndex: abertos,
+      onTabChange: (event) => {
+        const index = event.index;
+        setInterno(index);
+        onTabChange?.(index);
+      },
+      expandIcon: seta(/* @__PURE__ */ jsxRuntime.jsx(react$1.CaretDown, {})),
+      collapseIcon: seta(/* @__PURE__ */ jsxRuntime.jsx(react$1.CaretUp, {})),
+      pt: { root: { className: ["cr-accordion", className].filter(Boolean).join(" ") } },
+      children: tabs.map((tab, index) => /* @__PURE__ */ jsxRuntime.jsx(
+        accordion.AccordionTab,
+        {
+          header: tab.props.header,
+          disabled: tab.props.disabled,
+          headerTemplate: tab.props.headerContent ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cr-accordion__custom", children: tab.props.headerContent }) : /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "cr-accordion__texts", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cr-accordion__title", children: tab.props.header }),
+            tab.props.description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cr-accordion__description", children: tab.props.description })
+          ] }),
+          pt: {
+            root: { className: "cr-accordion__item" },
+            header: { className: "cr-accordion__header" },
+            headerAction: { className: "cr-accordion__action" },
+            toggleableContent: { className: "cr-accordion__region" },
+            content: { className: "cr-accordion__content" },
+            // Sem animação: o Prime manteria o conteúdo na tela pelos 450ms da saída dele.
+            transition: { timeout: 0 }
+          },
+          children: tab.props.children
+        },
+        tab.key ?? index
+      ))
+    }
+  );
+});
 var AutoComplete = react.forwardRef(function AutoComplete2({
   variant = "outline",
   size = "large",
@@ -881,9 +938,20 @@ var MenuPrincipal = react.forwardRef(
   }, ref) {
     const primeRef = react.useRef(null);
     const context = react.useContext(api.PrimeReactContext);
+    const [baseDoAlvo, setBaseDoAlvo] = react.useState();
+    const medirAlvo = (event) => {
+      const alvo = event.currentTarget;
+      if (alvo instanceof Element) setBaseDoAlvo(alvo.getBoundingClientRect().bottom);
+    };
     react.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
     }));
@@ -941,6 +1009,7 @@ var MenuPrincipal = react.forwardRef(
         ref: primeRef,
         id,
         className: classes,
+        style: popup && baseDoAlvo !== void 0 ? { "--cr-menu-principal-topo": `${baseDoAlvo}px` } : void 0,
         model: items,
         popup,
         onShow,
@@ -951,6 +1020,43 @@ var MenuPrincipal = react.forwardRef(
     return context ? menu$1 : /* @__PURE__ */ jsxRuntime.jsx(api.PrimeReactProvider, { children: menu$1 });
   }
 );
+var SEVERITY = {
+  info: "info",
+  warning: "warn",
+  success: "success",
+  danger: "error",
+  highlight: "contrast",
+  neutral: "secondary"
+};
+var ICON = {
+  info: /* @__PURE__ */ jsxRuntime.jsx(react$1.Info, {}),
+  warning: /* @__PURE__ */ jsxRuntime.jsx(react$1.Warning, {}),
+  success: /* @__PURE__ */ jsxRuntime.jsx(react$1.CheckCircle, {}),
+  danger: /* @__PURE__ */ jsxRuntime.jsx(react$1.XCircle, {}),
+  highlight: /* @__PURE__ */ jsxRuntime.jsx(react$1.SealWarning, {}),
+  neutral: /* @__PURE__ */ jsxRuntime.jsx(react$1.WarningCircle, {})
+};
+var Message = react.forwardRef(function Message2({ type = "info", children, showIcon = true, id, className }, ref) {
+  const primeRef = react.useRef(null);
+  react.useImperativeHandle(ref, () => primeRef.current?.getElement());
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    message.Message,
+    {
+      unstyled: true,
+      ref: primeRef,
+      id,
+      severity: SEVERITY[type],
+      text: children,
+      icon: showIcon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cr-message__icon", "aria-hidden": "true", children: ICON[type] }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {}),
+      pt: {
+        root: {
+          className: ["cr-message", `cr-message--${type}`, className].filter(Boolean).join(" ")
+        },
+        text: { className: "cr-message__text" }
+      }
+    }
+  );
+});
 function Modal({
   visible,
   onHide,
@@ -1319,6 +1425,193 @@ var PageHeader = react.forwardRef(function PageHeader2({
     )
   ] });
 });
+var Select = react.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 = react.useId();
+  const inputId = id ?? autoId;
+  const hintId = `${inputId}-hint`;
+  const listId = `${inputId}-list`;
+  const supportText = error ?? hint;
+  const [open, setOpen] = react.useState(false);
+  const setInputRef = react.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__ */ jsxRuntime.jsxs("div", { className: classes, children: [
+    label && /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "cr-field__label", htmlFor: inputId, children: [
+      label,
+      required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cr-field__required", "aria-hidden": "true", children: "*" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      dropdown.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__ */ jsxRuntime.jsx("span", { className: "cr-select__placeholder", children: placeholder }) : String(option[optionLabel] ?? option),
+        scrollHeight: "185px",
+        dropdownIcon: /* @__PURE__ */ jsxRuntime.jsx(react$1.CaretDown, {}),
+        collapseIcon: /* @__PURE__ */ jsxRuntime.jsx(react$1.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__ */ jsxRuntime.jsxs("p", { id: hintId, className: `cr-field__hint${error ? " cr-field__hint--error" : ""}`, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cr-field__hint-icon", "aria-hidden": "true", children: error ? /* @__PURE__ */ jsxRuntime.jsx(react$1.WarningCircle, {}) : /* @__PURE__ */ jsxRuntime.jsx(react$1.Info, {}) }),
+      supportText
+    ] })
+  ] });
+});
+var seta2 = (label, icon) => (options) => /* @__PURE__ */ jsxRuntime.jsx(
+  "button",
+  {
+    type: "button",
+    className: "cr-paginator__arrow",
+    "aria-label": label,
+    disabled: options.disabled,
+    onClick: options.onClick,
+    children: icon
+  }
+);
+var Paginator = react.forwardRef(function Paginator2({
+  totalRecords,
+  first,
+  rows,
+  rowsPerPageOptions,
+  pageLinkSize = 5,
+  onPageChange,
+  rowsPerPageLabel = "Itens por p\xE1gina",
+  id,
+  className
+}, ref) {
+  const primeRef = react.useRef(null);
+  react.useImperativeHandle(ref, () => primeRef.current?.getElement());
+  const [interno, setInterno] = react.useState({
+    first: 0,
+    rows: rowsPerPageOptions?.[0] ?? 10
+  });
+  const atual = { first: first ?? interno.first, rows: rows ?? interno.rows };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    paginator.Paginator,
+    {
+      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: seta2("Primeira p\xE1gina", /* @__PURE__ */ jsxRuntime.jsx(react$1.CaretDoubleLeft, { "aria-hidden": "true" })),
+        PrevPageLink: seta2("P\xE1gina anterior", /* @__PURE__ */ jsxRuntime.jsx(react$1.CaretLeft, { "aria-hidden": "true" })),
+        NextPageLink: seta2("Pr\xF3xima p\xE1gina", /* @__PURE__ */ jsxRuntime.jsx(react$1.CaretRight, { "aria-hidden": "true" })),
+        LastPageLink: seta2("\xDAltima p\xE1gina", /* @__PURE__ */ jsxRuntime.jsx(react$1.CaretDoubleRight, { "aria-hidden": "true" })),
+        PageLinks: (options) => {
+          const ativa = options.page === options.currentPage;
+          return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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 = react.forwardRef(function Panel2({ className, style, children, ...props }, ref) {
   const primeRef = react.useRef(null);
   react.useImperativeHandle(ref, () => primeRef.current?.getElement());
@@ -1483,108 +1776,6 @@ var SegmentControl = react.forwardRef(
     );
   }
 );
-var Select = react.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 = react.useId();
-  const inputId = id ?? autoId;
-  const hintId = `${inputId}-hint`;
-  const listId = `${inputId}-list`;
-  const supportText = error ?? hint;
-  const [open, setOpen] = react.useState(false);
-  const setInputRef = react.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__ */ jsxRuntime.jsxs("div", { className: classes, children: [
-    label && /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "cr-field__label", htmlFor: inputId, children: [
-      label,
-      required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cr-field__required", "aria-hidden": "true", children: "*" })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      dropdown.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__ */ jsxRuntime.jsx("span", { className: "cr-select__placeholder", children: placeholder }) : String(option[optionLabel] ?? option),
-        scrollHeight: "185px",
-        dropdownIcon: /* @__PURE__ */ jsxRuntime.jsx(react$1.CaretDown, {}),
-        collapseIcon: /* @__PURE__ */ jsxRuntime.jsx(react$1.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__ */ jsxRuntime.jsxs("p", { id: hintId, className: `cr-field__hint${error ? " cr-field__hint--error" : ""}`, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cr-field__hint-icon", "aria-hidden": "true", children: error ? /* @__PURE__ */ jsxRuntime.jsx(react$1.WarningCircle, {}) : /* @__PURE__ */ jsxRuntime.jsx(react$1.Info, {}) }),
-      supportText
-    ] })
-  ] });
-});
 var Switch = react.forwardRef(function Switch2({
   label,
   showLabel = true,
@@ -1715,7 +1906,74 @@ var Tabs = react.forwardRef(function Tabs2({ activeIndex, onTabChange, children,
     }
   );
 });
+var SEVERITY2 = {
+  warning: "warn",
+  danger: "error",
+  success: "success",
+  info: "info"
+};
+var ICON2 = {
+  warning: /* @__PURE__ */ jsxRuntime.jsx(react$1.Warning, {}),
+  danger: /* @__PURE__ */ jsxRuntime.jsx(react$1.XCircle, {}),
+  success: /* @__PURE__ */ jsxRuntime.jsx(react$1.Check, {}),
+  info: /* @__PURE__ */ jsxRuntime.jsx(react$1.Info, {})
+};
+var Toast = react.forwardRef(function Toast2({ position = "top-right", closeLabel = "Fechar", id, className }, ref) {
+  const primeRef = react.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__ */ jsxRuntime.jsx("span", { className: "cr-toast__icon", "aria-hidden": "true", children: ICON2[type] }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {}),
+    closeIcon: /* @__PURE__ */ jsxRuntime.jsx(react$1.X, { "aria-hidden": "true" }),
+    life,
+    sticky,
+    className: `cr-toast__message--${type}`
+  });
+  react.useImperativeHandle(ref, () => ({
+    show: (message) => primeRef.current?.show(Array.isArray(message) ? message.map(converter) : converter(message)),
+    clear: () => primeRef.current?.clear()
+  }));
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    toast.Toast,
+    {
+      ...{ 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"
+          }
+        }
+      }
+    }
+  );
+});
 
+exports.Accordion = Accordion;
+exports.AccordionTab = AccordionTab;
 exports.AutoComplete = AutoComplete;
 exports.Badge = Badge;
 exports.Button = Button;
@@ -1729,9 +1987,11 @@ exports.Input = Input;
 exports.Menu = Menu;
 exports.MenuPrincipal = MenuPrincipal;
 exports.Menubar = Menubar;
+exports.Message = Message;
 exports.Modal = Modal;
 exports.MultiSelect = MultiSelect;
 exports.PageHeader = PageHeader;
+exports.Paginator = Paginator;
 exports.Panel = Panel;
 exports.Radio = Radio;
 exports.ScrollPanel = ScrollPanel;
@@ -1741,6 +2001,7 @@ exports.Switch = Switch;
 exports.TabPanel = TabPanel;
 exports.Tabs = Tabs;
 exports.Tag = Tag;
+exports.Toast = Toast;
 exports.Tooltip = Tooltip;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map