@apipass/design-system 3.1.0 → 4.0.0

package/dist/lib/ui/primitives/Tooltip/Tooltip.js

@@ -1,95 +1,98 @@
-import { jsxs as a, jsx as o, Fragment as h } from "react/jsx-runtime";
+import { jsxs as l, jsx as o, Fragment as v } from "react/jsx-runtime";
 import { clsx as d } from "../../../vendor/clsx/dist/clsx.js";
-import { useRef as u } from "react";
-import { useTooltipTrigger as v } from "../../../vendor/@react-aria/tooltip/dist/useTooltipTrigger.js";
-import { useTooltipTriggerState as x } from "../../../vendor/@react-stately/tooltip/dist/useTooltipTriggerState.js";
-import { DialogTrigger as b, Popover as N, Dialog as $, OverlayArrow as w, TooltipTriggerStateContext as y, Tooltip as L } from "react-aria-components";
+import { useRef as N } from "react";
+import { useTooltipTrigger as x } from "../../../vendor/@react-aria/tooltip/dist/useTooltipTrigger.js";
+import { useTooltipTriggerState as b } from "../../../vendor/@react-stately/tooltip/dist/useTooltipTriggerState.js";
+import { DialogTrigger as C, Popover as L, Dialog as $, OverlayArrow as w, TooltipTriggerStateContext as y, Tooltip as A } from "react-aria-components";
 /* empty css            */
-function P({
-  children: r,
+import { useOverlayPortalContainer as T } from "../../hooks/useOverlayPortal.js";
+function B({
+  children: t,
   content: e,
-  className: t,
+  className: i,
   offset: s,
-  delay: c,
-  closeDelay: p,
-  placement: n
+  delay: n,
+  closeDelay: c,
+  placement: p
 }) {
-  const l = x({ delay: c, closeDelay: p }), i = u(null), { triggerProps: g, tooltipProps: T } = v(
+  const a = b({ delay: n, closeDelay: c }), r = N(null), { triggerProps: g, tooltipProps: m } = x(
     {},
-    l,
-    i
-  ), f = d(t, "tooltip");
-  return /* @__PURE__ */ a(h, { children: [
-    /* @__PURE__ */ o("span", { ref: i, className: "tooltip-trigger-wrapper", ...g, children: r }),
-    /* @__PURE__ */ o(y.Provider, { value: l, children: /* @__PURE__ */ a(
-      L,
+    a,
+    r
+  ), u = d(i, "tooltip"), h = T();
+  return /* @__PURE__ */ l(v, { children: [
+    /* @__PURE__ */ o("span", { ref: r, className: "tooltip-trigger-wrapper", ...g, children: t }),
+    /* @__PURE__ */ o(y.Provider, { value: a, children: /* @__PURE__ */ l(
+      A,
       {
-        ...T,
-        triggerRef: i,
-        className: f,
+        ...m,
+        triggerRef: r,
+        className: u,
         offset: s,
-        placement: n,
+        placement: p,
+        UNSTABLE_portalContainer: h,
         children: [
-          /* @__PURE__ */ o(m, {}),
+          /* @__PURE__ */ o(f, {}),
           /* @__PURE__ */ o("div", { className: "dialog dialog-type-card", children: e })
         ]
       }
     ) })
   ] });
 }
-function S({
-  children: r,
+function M({
+  children: t,
   content: e,
-  className: t,
+  className: i,
   offset: s = 16,
-  trigger: c = "hover",
-  delay: p = 500,
-  closeDelay: n = 100,
-  placement: l,
-  ...i
+  trigger: n = "hover",
+  delay: c = 500,
+  closeDelay: p = 100,
+  placement: a,
+  ...r
 }) {
-  const g = d(t, "tooltip");
-  return c === "click" ? /* @__PURE__ */ a(b, { children: [
-    r,
-    /* @__PURE__ */ a(
-      N,
+  const g = d(i, "tooltip"), m = T();
+  return n === "click" ? /* @__PURE__ */ l(C, { children: [
+    t,
+    /* @__PURE__ */ l(
+      L,
       {
-        ...i,
+        ...r,
         className: g,
         offset: s,
-        placement: l,
+        placement: a,
+        UNSTABLE_portalContainer: r.UNSTABLE_portalContainer ?? m,
         children: [
-          /* @__PURE__ */ o(m, {}),
+          /* @__PURE__ */ o(f, {}),
           /* @__PURE__ */ o($, { className: "dialog dialog-type-card", "aria-label": "Tooltip", children: e })
         ]
       }
     )
   ] }) : /* @__PURE__ */ o(
-    P,
+    B,
     {
       content: e,
-      className: t,
+      className: i,
       offset: s,
-      delay: p,
-      closeDelay: n,
-      placement: l,
-      ...i,
-      children: r
+      delay: c,
+      closeDelay: p,
+      placement: a,
+      ...r,
+      children: t
     }
   );
 }
-function m({
-  className: r,
+function f({
+  className: t,
   ...e
 }) {
-  const t = d(r, "tooltip-overlay-arrow");
-  return /* @__PURE__ */ a(w, { ...e, className: t, children: [
+  const i = d(t, "tooltip-overlay-arrow");
+  return /* @__PURE__ */ l(w, { ...e, className: i, children: [
     /* @__PURE__ */ o("svg", { viewBox: "0 0 10 5", children: /* @__PURE__ */ o("path", { d: "M0 0 L5 5 L10 0" }) }),
     /* @__PURE__ */ o("svg", { viewBox: "0 0 10 5", children: /* @__PURE__ */ o("path", { d: "M0 0 L5 5 L10 0" }) })
   ] });
 }
 export {
-  S as Tooltip,
-  m as TooltipOverlayArrow
+  M as Tooltip,
+  f as TooltipOverlayArrow
 };
 //# sourceMappingURL=Tooltip.js.map

package/dist/lib/ui/primitives/Tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sources":["../../../../../src/ui/primitives/Tooltip/Tooltip.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useRef } from \"react\";\nimport { useTooltipTrigger } from \"@react-aria/tooltip\";\nimport { useTooltipTriggerState } from \"@react-stately/tooltip\";\nimport {\n  DialogTrigger as RACDialogTrigger,\n  Dialog as RACDialog,\n  OverlayArrow as RACOverlayArrow,\n  Popover as RACPopover,\n  Tooltip as RACTooltip,\n  TooltipTriggerStateContext,\n  type OverlayArrowProps as RACOverlayArrowProps,\n  type PopoverProps as RACPopoverProps,\n} from \"react-aria-components\";\nimport \"./tooltip.css\";\n\nexport type TooltipTrigger = \"hover\" | \"click\";\n\nexport interface TooltipProps\n  extends Omit<\n    RACPopoverProps,\n    \"children\" | \"isOpen\" | \"defaultOpen\" | \"onOpenChange\" | \"triggerRef\"\n  > {\n  children: React.ReactNode;\n  content: React.ReactNode;\n  trigger?: TooltipTrigger;\n  delay?: number;\n  closeDelay?: number;\n}\n\nfunction HoverTooltip({\n  children,\n  content,\n  className,\n  offset,\n  delay,\n  closeDelay,\n  placement,\n}: Omit<TooltipProps, \"trigger\">) {\n  const state = useTooltipTriggerState({ delay, closeDelay });\n  const triggerRef = useRef<HTMLSpanElement>(null);\n  const { triggerProps, tooltipProps } = useTooltipTrigger(\n    { delay, closeDelay },\n    state,\n    triggerRef,\n  );\n  const classNames = clsx(className, \"tooltip\");\n\n  return (\n    <>\n      <span ref={triggerRef} className=\"tooltip-trigger-wrapper\" {...triggerProps}>\n        {children}\n      </span>\n      <TooltipTriggerStateContext.Provider value={state}>\n        <RACTooltip\n          {...tooltipProps}\n          triggerRef={triggerRef}\n          className={classNames}\n          offset={offset}\n          placement={placement}\n        >\n          <TooltipOverlayArrow />\n          <div className=\"dialog dialog-type-card\">{content}</div>\n        </RACTooltip>\n      </TooltipTriggerStateContext.Provider>\n    </>\n  );\n}\n\nexport function Tooltip({\n  children,\n  content,\n  className,\n  offset = 16,\n  trigger = \"hover\",\n  delay = 500,\n  closeDelay = 100,\n  placement,\n  ...popoverProps\n}: TooltipProps) {\n  const classNames = clsx(className, \"tooltip\");\n\n  if (trigger === \"click\") {\n    return (\n      <RACDialogTrigger>\n        {children}\n        <RACPopover\n          {...popoverProps}\n          className={classNames}\n          offset={offset}\n          placement={placement}\n        >\n          <TooltipOverlayArrow />\n          <RACDialog className=\"dialog dialog-type-card\" aria-label=\"Tooltip\">\n            {content}\n          </RACDialog>\n        </RACPopover>\n      </RACDialogTrigger>\n    );\n  }\n\n  return (\n    <HoverTooltip\n      content={content}\n      className={className}\n      offset={offset}\n      delay={delay}\n      closeDelay={closeDelay}\n      placement={placement}\n      {...popoverProps}\n    >\n      {children}\n    </HoverTooltip>\n  );\n}\n\nexport type TooltipOverlayArrowProps = RACOverlayArrowProps;\nexport function TooltipOverlayArrow({\n  className,\n  ...props\n}: TooltipOverlayArrowProps) {\n  const classNames = clsx(className, \"tooltip-overlay-arrow\");\n  return (\n    <RACOverlayArrow {...props} className={classNames}>\n      <svg viewBox=\"0 0 10 5\">\n        <path d=\"M0 0 L5 5 L10 0\" />\n      </svg>\n      <svg viewBox=\"0 0 10 5\">\n        <path d=\"M0 0 L5 5 L10 0\" />\n      </svg>\n    </RACOverlayArrow>\n  );\n}\n"],"names":["HoverTooltip","children","content","className","offset","delay","closeDelay","placement","state","useTooltipTriggerState","triggerRef","useRef","triggerProps","tooltipProps","useTooltipTrigger","classNames","clsx","jsxs","Fragment","jsx","TooltipTriggerStateContext","RACTooltip","TooltipOverlayArrow","Tooltip","trigger","popoverProps","RACDialogTrigger","RACPopover","RACDialog","props","RACOverlayArrow"],"mappings":";;;;;;;AA8BA,SAASA,EAAa;AAAA,EACpB,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC;AAAA,EACA,OAAAC;AAAA,EACA,YAAAC;AAAA,EACA,WAAAC;AACF,GAAkC;AAChC,QAAMC,IAAQC,EAAuB,EAAE,OAAAJ,GAAO,YAAAC,GAAY,GACpDI,IAAaC,EAAwB,IAAI,GACzC,EAAE,cAAAC,GAAc,cAAAC,EAAA,IAAiBC;AAAAA,IACrC,CAAoB;AAAA,IACpBN;AAAA,IACAE;AAAA,EAAA,GAEIK,IAAaC,EAAKb,GAAW,SAAS;AAE5C,SACE,gBAAAc,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAC,EAAC,UAAK,KAAKT,GAAY,WAAU,2BAA2B,GAAGE,GAC5D,UAAAX,GACH;AAAA,IACA,gBAAAkB,EAACC,EAA2B,UAA3B,EAAoC,OAAOZ,GAC1C,UAAA,gBAAAS;AAAA,MAACI;AAAAA,MAAA;AAAA,QACE,GAAGR;AAAA,QACJ,YAAAH;AAAA,QACA,WAAWK;AAAA,QACX,QAAAX;AAAA,QACA,WAAAG;AAAA,QAEA,UAAA;AAAA,UAAA,gBAAAY,EAACG,GAAA,EAAoB;AAAA,UACrB,gBAAAH,EAAC,OAAA,EAAI,WAAU,2BAA2B,UAAAjB,EAAA,CAAQ;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,EACpD,CACF;AAAA,EAAA,GACF;AAEJ;AAEO,SAASqB,EAAQ;AAAA,EACtB,UAAAtB;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,SAAAoB,IAAU;AAAA,EACV,OAAAnB,IAAQ;AAAA,EACR,YAAAC,IAAa;AAAA,EACb,WAAAC;AAAA,EACA,GAAGkB;AACL,GAAiB;AACf,QAAMV,IAAaC,EAAKb,GAAW,SAAS;AAE5C,SAAIqB,MAAY,4BAEXE,GAAA,EACE,UAAA;AAAA,IAAAzB;AAAA,IACD,gBAAAgB;AAAA,MAACU;AAAAA,MAAA;AAAA,QACE,GAAGF;AAAA,QACJ,WAAWV;AAAA,QACX,QAAAX;AAAA,QACA,WAAAG;AAAA,QAEA,UAAA;AAAA,UAAA,gBAAAY,EAACG,GAAA,EAAoB;AAAA,4BACpBM,GAAA,EAAU,WAAU,2BAA0B,cAAW,WACvD,UAAA1B,EAAA,CACH;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GACF,IAKF,gBAAAiB;AAAA,IAACnB;AAAA,IAAA;AAAA,MACC,SAAAE;AAAA,MACA,WAAAC;AAAA,MACA,QAAAC;AAAA,MACA,OAAAC;AAAA,MACA,YAAAC;AAAA,MACA,WAAAC;AAAA,MACC,GAAGkB;AAAA,MAEH,UAAAxB;AAAA,IAAA;AAAA,EAAA;AAGP;AAGO,SAASqB,EAAoB;AAAA,EAClC,WAAAnB;AAAA,EACA,GAAG0B;AACL,GAA6B;AAC3B,QAAMd,IAAaC,EAAKb,GAAW,uBAAuB;AAC1D,SACE,gBAAAc,EAACa,GAAA,EAAiB,GAAGD,GAAO,WAAWd,GACrC,UAAA;AAAA,IAAA,gBAAAI,EAAC,SAAI,SAAQ,YACX,4BAAC,QAAA,EAAK,GAAE,mBAAkB,EAAA,CAC5B;AAAA,IACA,gBAAAA,EAAC,SAAI,SAAQ,YACX,4BAAC,QAAA,EAAK,GAAE,mBAAkB,EAAA,CAC5B;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"Tooltip.js","sources":["../../../../../src/ui/primitives/Tooltip/Tooltip.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useOverlayPortalContainer } from \"hooks\";\nimport { useRef } from \"react\";\nimport { useTooltipTrigger } from \"@react-aria/tooltip\";\nimport { useTooltipTriggerState } from \"@react-stately/tooltip\";\nimport {\n  DialogTrigger as RACDialogTrigger,\n  Dialog as RACDialog,\n  OverlayArrow as RACOverlayArrow,\n  Popover as RACPopover,\n  Tooltip as RACTooltip,\n  TooltipTriggerStateContext,\n  type OverlayArrowProps as RACOverlayArrowProps,\n  type PopoverProps as RACPopoverProps,\n} from \"react-aria-components\";\nimport \"./tooltip.css\";\n\nexport type TooltipTrigger = \"hover\" | \"click\";\n\nexport interface TooltipProps\n  extends Omit<\n    RACPopoverProps,\n    \"children\" | \"isOpen\" | \"defaultOpen\" | \"onOpenChange\" | \"triggerRef\"\n  > {\n  children: React.ReactNode;\n  content: React.ReactNode;\n  trigger?: TooltipTrigger;\n  delay?: number;\n  closeDelay?: number;\n}\n\nfunction HoverTooltip({\n  children,\n  content,\n  className,\n  offset,\n  delay,\n  closeDelay,\n  placement,\n}: Omit<TooltipProps, \"trigger\">) {\n  const state = useTooltipTriggerState({ delay, closeDelay });\n  const triggerRef = useRef<HTMLSpanElement>(null);\n  const { triggerProps, tooltipProps } = useTooltipTrigger(\n    { delay, closeDelay },\n    state,\n    triggerRef,\n  );\n  const classNames = clsx(className, \"tooltip\");\n  // Sem container explícito o tooltip faz portal no document.body — fora da\n  // shadow root do MFE, sem CSS. Ver ui/hooks/useOverlayPortal.\n  const portalContainer = useOverlayPortalContainer();\n\n  return (\n    <>\n      <span ref={triggerRef} className=\"tooltip-trigger-wrapper\" {...triggerProps}>\n        {children}\n      </span>\n      <TooltipTriggerStateContext.Provider value={state}>\n        <RACTooltip\n          {...tooltipProps}\n          triggerRef={triggerRef}\n          className={classNames}\n          offset={offset}\n          placement={placement}\n          UNSTABLE_portalContainer={portalContainer}\n        >\n          <TooltipOverlayArrow />\n          <div className=\"dialog dialog-type-card\">{content}</div>\n        </RACTooltip>\n      </TooltipTriggerStateContext.Provider>\n    </>\n  );\n}\n\nexport function Tooltip({\n  children,\n  content,\n  className,\n  offset = 16,\n  trigger = \"hover\",\n  delay = 500,\n  closeDelay = 100,\n  placement,\n  ...popoverProps\n}: TooltipProps) {\n  const classNames = clsx(className, \"tooltip\");\n  // Sem container explícito o popover faz portal no document.body — fora da\n  // shadow root do MFE, sem CSS. Ver ui/hooks/useOverlayPortal.\n  const portalContainer = useOverlayPortalContainer();\n\n  if (trigger === \"click\") {\n    return (\n      <RACDialogTrigger>\n        {children}\n        <RACPopover\n          {...popoverProps}\n          className={classNames}\n          offset={offset}\n          placement={placement}\n          UNSTABLE_portalContainer={\n            popoverProps.UNSTABLE_portalContainer ?? portalContainer\n          }\n        >\n          <TooltipOverlayArrow />\n          <RACDialog className=\"dialog dialog-type-card\" aria-label=\"Tooltip\">\n            {content}\n          </RACDialog>\n        </RACPopover>\n      </RACDialogTrigger>\n    );\n  }\n\n  return (\n    <HoverTooltip\n      content={content}\n      className={className}\n      offset={offset}\n      delay={delay}\n      closeDelay={closeDelay}\n      placement={placement}\n      {...popoverProps}\n    >\n      {children}\n    </HoverTooltip>\n  );\n}\n\nexport type TooltipOverlayArrowProps = RACOverlayArrowProps;\nexport function TooltipOverlayArrow({\n  className,\n  ...props\n}: TooltipOverlayArrowProps) {\n  const classNames = clsx(className, \"tooltip-overlay-arrow\");\n  return (\n    <RACOverlayArrow {...props} className={classNames}>\n      <svg viewBox=\"0 0 10 5\">\n        <path d=\"M0 0 L5 5 L10 0\" />\n      </svg>\n      <svg viewBox=\"0 0 10 5\">\n        <path d=\"M0 0 L5 5 L10 0\" />\n      </svg>\n    </RACOverlayArrow>\n  );\n}\n"],"names":["HoverTooltip","children","content","className","offset","delay","closeDelay","placement","state","useTooltipTriggerState","triggerRef","useRef","triggerProps","tooltipProps","useTooltipTrigger","classNames","clsx","portalContainer","useOverlayPortalContainer","jsxs","Fragment","jsx","TooltipTriggerStateContext","RACTooltip","TooltipOverlayArrow","Tooltip","trigger","popoverProps","RACDialogTrigger","RACPopover","RACDialog","props","RACOverlayArrow"],"mappings":";;;;;;;;AA+BA,SAASA,EAAa;AAAA,EACpB,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC;AAAA,EACA,OAAAC;AAAA,EACA,YAAAC;AAAA,EACA,WAAAC;AACF,GAAkC;AAChC,QAAMC,IAAQC,EAAuB,EAAE,OAAAJ,GAAO,YAAAC,GAAY,GACpDI,IAAaC,EAAwB,IAAI,GACzC,EAAE,cAAAC,GAAc,cAAAC,EAAA,IAAiBC;AAAAA,IACrC,CAAoB;AAAA,IACpBN;AAAA,IACAE;AAAA,EAAA,GAEIK,IAAaC,EAAKb,GAAW,SAAS,GAGtCc,IAAkBC,EAAA;AAExB,SACE,gBAAAC,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAC,EAAC,UAAK,KAAKX,GAAY,WAAU,2BAA2B,GAAGE,GAC5D,UAAAX,GACH;AAAA,IACA,gBAAAoB,EAACC,EAA2B,UAA3B,EAAoC,OAAOd,GAC1C,UAAA,gBAAAW;AAAA,MAACI;AAAAA,MAAA;AAAA,QACE,GAAGV;AAAA,QACJ,YAAAH;AAAA,QACA,WAAWK;AAAA,QACX,QAAAX;AAAA,QACA,WAAAG;AAAA,QACA,0BAA0BU;AAAA,QAE1B,UAAA;AAAA,UAAA,gBAAAI,EAACG,GAAA,EAAoB;AAAA,UACrB,gBAAAH,EAAC,OAAA,EAAI,WAAU,2BAA2B,UAAAnB,EAAA,CAAQ;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,EACpD,CACF;AAAA,EAAA,GACF;AAEJ;AAEO,SAASuB,EAAQ;AAAA,EACtB,UAAAxB;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,SAAAsB,IAAU;AAAA,EACV,OAAArB,IAAQ;AAAA,EACR,YAAAC,IAAa;AAAA,EACb,WAAAC;AAAA,EACA,GAAGoB;AACL,GAAiB;AACf,QAAMZ,IAAaC,EAAKb,GAAW,SAAS,GAGtCc,IAAkBC,EAAA;AAExB,SAAIQ,MAAY,4BAEXE,GAAA,EACE,UAAA;AAAA,IAAA3B;AAAA,IACD,gBAAAkB;AAAA,MAACU;AAAAA,MAAA;AAAA,QACE,GAAGF;AAAA,QACJ,WAAWZ;AAAA,QACX,QAAAX;AAAA,QACA,WAAAG;AAAA,QACA,0BACEoB,EAAa,4BAA4BV;AAAA,QAG3C,UAAA;AAAA,UAAA,gBAAAI,EAACG,GAAA,EAAoB;AAAA,4BACpBM,GAAA,EAAU,WAAU,2BAA0B,cAAW,WACvD,UAAA5B,EAAA,CACH;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GACF,IAKF,gBAAAmB;AAAA,IAACrB;AAAA,IAAA;AAAA,MACC,SAAAE;AAAA,MACA,WAAAC;AAAA,MACA,QAAAC;AAAA,MACA,OAAAC;AAAA,MACA,YAAAC;AAAA,MACA,WAAAC;AAAA,MACC,GAAGoB;AAAA,MAEH,UAAA1B;AAAA,IAAA;AAAA,EAAA;AAGP;AAGO,SAASuB,EAAoB;AAAA,EAClC,WAAArB;AAAA,EACA,GAAG4B;AACL,GAA6B;AAC3B,QAAMhB,IAAaC,EAAKb,GAAW,uBAAuB;AAC1D,SACE,gBAAAgB,EAACa,GAAA,EAAiB,GAAGD,GAAO,WAAWhB,GACrC,UAAA;AAAA,IAAA,gBAAAM,EAAC,SAAI,SAAQ,YACX,4BAAC,QAAA,EAAK,GAAE,mBAAkB,EAAA,CAC5B;AAAA,IACA,gBAAAA,EAAC,SAAI,SAAQ,YACX,4BAAC,QAAA,EAAK,GAAE,mBAAkB,EAAA,CAC5B;AAAA,EAAA,GACF;AAEJ;"}

package/dist/types/json-viewer.index.d.ts

@@ -0,0 +1 @@
+export * from "./ui/primitives/JsonViewer/JsonViewer";

package/dist/types/ui/hooks/index.d.ts

@@ -1 +1,2 @@
 export * from "./useMediaQuery";
+export * from "./useOverlayPortal";

package/dist/types/ui/hooks/useOverlayPortal.d.ts

@@ -0,0 +1,15 @@
+import { type ReactNode } from "react";
+export interface OverlayPortalProviderProps {
+    /** Elemento onde os overlays devem ser inseridos. `null`/`undefined` mantém o padrão do RAC. */
+    container: Element | null | undefined;
+    children: ReactNode;
+}
+export declare function OverlayPortalProvider({ container, children, }: OverlayPortalProviderProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Container de portal do overlay, ou `undefined` se não houver provider acima.
+ *
+ * Retorna `undefined` (e não `null`) de propósito: passar
+ * `UNSTABLE_portalContainer={undefined}` para um componente do RAC é um no-op e
+ * preserva o comportamento padrão, enquanto `null` não é aceito pelo tipo.
+ */
+export declare function useOverlayPortalContainer(): Element | undefined;

package/dist/types/ui/primitives/Dialog/Dialog.d.ts

@@ -24,4 +24,4 @@ export type DialogBodyProps = {
 } & React.ComponentPropsWithoutRef<"div">;
 export declare function DialogBody({ bleed, className, ...props }: DialogBodyProps): import("react/jsx-runtime").JSX.Element;
 export type DialogModalProps = RACModalOverlayProps;
-export declare function DialogModal({ children, className, isDismissable, ...props }: DialogModalProps): import("react/jsx-runtime").JSX.Element;
+export declare function DialogModal({ children, className, isDismissable, UNSTABLE_portalContainer, ...props }: DialogModalProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/ui/primitives/JsonViewer/JsonViewer.d.ts

@@ -0,0 +1,16 @@
+import type { ReactNode } from "react";
+import "./jsonviewer.css";
+export interface JsonViewerAction {
+    key: string;
+    label: string;
+    icon: ReactNode;
+    onPress: () => void;
+}
+export interface JsonViewerProps {
+    value: unknown;
+    expandAllLabel: string;
+    actions?: JsonViewerAction[];
+    className?: string;
+    height?: string | number;
+}
+export declare function JsonViewer({ value, expandAllLabel, actions, className, height }: JsonViewerProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/ui/primitives/Menu/Menu.d.ts

@@ -14,7 +14,7 @@ export interface MenuButtonProps<T> extends RACMenuProps<T>, Omit<RACMenuTrigger
 }
 export declare function MenuButton<T extends object>({ label, children, icon, placement, variant, ...props }: MenuButtonProps<T>): import("react/jsx-runtime").JSX.Element;
 export type MenuPopoverProps = RACPopoverProps;
-export declare function MenuPopover({ ...props }: MenuPopoverProps): import("react/jsx-runtime").JSX.Element;
+export declare function MenuPopover({ UNSTABLE_portalContainer, ...props }: MenuPopoverProps): import("react/jsx-runtime").JSX.Element;
 export type MenuItemProps = RACMenuItemProps;
 export declare function MenuItem({ className, ...props }: MenuItemProps): import("react/jsx-runtime").JSX.Element;
 export type MenuHeaderProps = React.ComponentPropsWithoutRef<"div">;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apipass/design-system",
-  "version": "3.1.0",
+  "version": "4.0.0",
   "type": "module",
   "description": "APIPass React Design System",
   "sideEffects": [
@@ -26,6 +26,11 @@
       "import": "./dist/lib/charts.index.js",
       "require": "./dist/lib/charts.index.cjs"
     },
+    "./json-viewer": {
+      "types": "./dist/types/json-viewer.index.d.ts",
+      "import": "./dist/lib/json-viewer.index.js",
+      "require": "./dist/lib/json-viewer.index.cjs"
+    },
     "./style.css": "./dist/lib/style.css",
     "./embedded-styles": {
       "types": "./dist/lib/embedded-styles.d.ts",
@@ -38,6 +43,9 @@
       "charts": [
         "./dist/types/charts.index.d.ts"
       ],
+      "json-viewer": [
+        "./dist/types/json-viewer.index.d.ts"
+      ],
       "icons": [
         "./dist/types/ui/icons/index.d.ts"
       ]
@@ -72,6 +80,11 @@
     ]
   },
   "peerDependencies": {
+    "@codemirror/lang-json": ">=6.0.0",
+    "@codemirror/language": ">=6.0.0",
+    "@codemirror/state": ">=6.0.0",
+    "@codemirror/view": ">=6.0.0",
+    "@lezer/highlight": ">=1.0.0",
     "@monaco-editor/react": ">=4.0.0",
     "echarts": ">=5.5.0",
     "react": ">=18.0.0",
@@ -79,6 +92,21 @@
     "react-dom": ">=18.0.0"
   },
   "peerDependenciesMeta": {
+    "@codemirror/lang-json": {
+      "optional": true
+    },
+    "@codemirror/language": {
+      "optional": true
+    },
+    "@codemirror/state": {
+      "optional": true
+    },
+    "@codemirror/view": {
+      "optional": true
+    },
+    "@lezer/highlight": {
+      "optional": true
+    },
     "@monaco-editor/react": {
       "optional": true
     },
@@ -93,7 +121,12 @@
     "react-toastify": "^11.1.0"
   },
   "devDependencies": {
+    "@codemirror/lang-json": "^6.0.2",
+    "@codemirror/language": "^6.12.4",
+    "@codemirror/state": "^6.7.1",
+    "@codemirror/view": "^6.43.9",
     "@figma/code-connect": "^1.3.10",
+    "@lezer/highlight": "^1.2.3",
     "@monaco-editor/react": "^4.7.0",
     "@react-types/shared": "^3.23.0",
     "@storybook/addon-docs": "^10.3.4",