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

package/dist/index.cjs

@@ -18,15 +18,19 @@ 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
 var AutoComplete = react.forwardRef(function AutoComplete2({
@@ -880,9 +884,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
     }));
@@ -940,6 +955,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,
@@ -950,6 +966,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,
@@ -1219,6 +1272,292 @@ var MultiSelect = react.forwardRef(function MultiSelect2({
     ] })
   ] });
 });
+var PageHeader = react.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] = react.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 react.cloneElement(
+        element,
+        { "aria-current": active ? "page" : void 0 },
+        /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          (variant === "primary" || tab.icon) && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cr-page-header__tab-icon", "aria-hidden": "true", children: tab.icon }),
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { ref, className: classes, ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: `cr-page-header__title-group${tools ? " cr-page-header__title-group--tools" : ""}`,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cr-page-header__title-text", children: [
+            onBack && /* @__PURE__ */ jsxRuntime.jsx(
+              IconButton,
+              {
+                variant: "tertiary",
+                size: "small",
+                icon: /* @__PURE__ */ jsxRuntime.jsx(react$1.ArrowLeft, {}),
+                "aria-label": backLabel,
+                onClick: onBack
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "cr-page-header__title", children: title }),
+            tag && /* @__PURE__ */ jsxRuntime.jsx(Tag, { className: "cr-page-header__tag", children: tag })
+          ] }),
+          tools && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cr-page-header__tools", children: [
+            segmentControl && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cr-page-header__segment", children: segmentControl }),
+            actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cr-page-header__actions", children: actions })
+          ] }),
+          onExpand && /* @__PURE__ */ jsxRuntime.jsx(
+            IconButton,
+            {
+              className: "cr-page-header__expand",
+              variant: "tertiary",
+              size: "medium",
+              icon: /* @__PURE__ */ jsxRuntime.jsx(react$1.ArrowsOutSimple, {}),
+              "aria-label": expandLabel,
+              onClick: onExpand
+            }
+          )
+        ]
+      }
+    ),
+    tabs && tabs.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+      tabmenu.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 = 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 seta = (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: seta("Primeira p\xE1gina", /* @__PURE__ */ jsxRuntime.jsx(react$1.CaretDoubleLeft, { "aria-hidden": "true" })),
+        PrevPageLink: seta("P\xE1gina anterior", /* @__PURE__ */ jsxRuntime.jsx(react$1.CaretLeft, { "aria-hidden": "true" })),
+        NextPageLink: seta("Pr\xF3xima p\xE1gina", /* @__PURE__ */ jsxRuntime.jsx(react$1.CaretRight, { "aria-hidden": "true" })),
+        LastPageLink: seta("\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());
@@ -1383,108 +1722,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,
@@ -1615,6 +1852,71 @@ 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.AutoComplete = AutoComplete;
 exports.Badge = Badge;
@@ -1629,8 +1931,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;
@@ -1640,6 +1945,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