@strapi/design-system 0.0.0-599b75fb-test → 0.0.0-622b91ef

package/dist/Popover/Popover.js

@@ -1,83 +1,104 @@
-import { jsx as i, jsxs as x } from "react/jsx-runtime";
-import * as a from "react";
-import { useFloating as w, offset as k, shift as y, flip as $, autoUpdate as v } from "@floating-ui/react-dom";
-import c from "styled-components";
-import { Box as d } from "../Box/Box.js";
-import { useIntersection as P } from "../hooks/useIntersection.js";
-import { Portal as S } from "../Portal/Portal.js";
-const T = ["top", "top-start", "top-end", "right", "right-start", "right-end", "bottom", "bottom-start", "bottom-end", "left", "left-start", "left-end"], W = c(d)`
-  box-shadow: ${({
-  theme: t
-}) => t.shadows.filterShadow};
-  z-index: 4;
-  border: 1px solid ${({
-  theme: t
-}) => t.colors.neutral150};
-  background: ${({
-  theme: t
-}) => t.colors.neutral0};
-`, E = ({
-  source: t,
-  children: e,
-  spacing: o = 0,
-  fullWidth: r = !1,
-  placement: s = "bottom-start",
-  centered: n = !1,
-  ...l
-}) => {
-  const [p, u] = a.useState(void 0), {
-    x: h,
-    y: m,
-    reference: f,
-    floating: b,
-    strategy: g
-  } = w({
+import { jsx as r, jsxs as I } from "react/jsx-runtime";
+import * as o from "react";
+import { useFloating as W, offset as A, shift as K, flip as j, autoUpdate as M } from "@floating-ui/react-dom";
+import { FocusScope as T } from "@radix-ui/react-focus-scope";
+import { useCallbackRef as U, composeEventHandlers as v } from "@strapi/ui-primitives";
+import { hideOthers as B } from "aria-hidden";
+import { RemoveScroll as H } from "react-remove-scroll";
+import k from "styled-components";
+import { DismissibleLayer as N } from "../DismissibleLayer/index.js";
+import { stripReactIdOfColon as x } from "../helpers/strings.js";
+import { useComposedRefs as V } from "../hooks/useComposeRefs.js";
+import { useId as Z } from "../hooks/useId.js";
+import { useIntersection as _ } from "../hooks/useIntersection.js";
+import { Box as h } from "../Box/Box.js";
+import { Portal as q } from "../Portal/Portal.js";
+const me = [
+  "top",
+  "top-start",
+  "top-end",
+  "right",
+  "right-start",
+  "right-end",
+  "bottom",
+  "bottom-start",
+  "bottom-end",
+  "left",
+  "left-start",
+  "left-end"
+], G = k(h)`
+  box-shadow: ${({ theme: e }) => e.shadows.filterShadow};
+  z-index: ${({ theme: e }) => e.zIndices[0]};
+  border: 1px solid ${({ theme: e }) => e.colors.neutral150};
+`, J = o.forwardRef(({ source: e, children: s, spacing: n = 0, fullWidth: i = !1, placement: l = "bottom-start", centered: a = !1, onEscapeKeyDown: d, onPointerDownOutside: f, onDismiss: c, onFocusOutside: u, ...E }, R) => {
+  const [m, y] = o.useState(null), [P, C] = o.useState(void 0), b = o.useRef(!1), { x: D, y: L, reference: w, floating: S, strategy: O } = W({
     strategy: "fixed",
-    placement: n ? "bottom" : s,
-    middleware: [k({
-      mainAxis: o
-    }), y(), $()],
-    whileElementsMounted: v
+    placement: a ? "bottom" : l,
+    middleware: [
+      A({
+        mainAxis: n
+      }),
+      K(),
+      j()
+    ],
+    whileElementsMounted: M
   });
-  return a.useLayoutEffect(() => {
-    f(t.current);
-  }, [t, f]), a.useLayoutEffect(() => {
-    r && u(t.current.offsetWidth);
-  }, [r, t]), i(W, {
-    ref: b,
-    style: {
-      left: h,
-      top: m,
-      position: g,
-      width: p || void 0
+  o.useLayoutEffect(() => {
+    w(e.current);
+  }, [e, w]), o.useLayoutEffect(() => {
+    i && C(e.current.offsetWidth);
+  }, [i, e]), o.useEffect(() => {
+    if (m)
+      return B(m);
+  }, [m]);
+  const g = U(c);
+  o.useEffect(() => {
+    const t = () => {
+      g();
+    };
+    return window.addEventListener("blur", t), window.addEventListener("resize", t), () => {
+      window.removeEventListener("blur", t), window.removeEventListener("resize", t);
+    };
+  }, [g]);
+  const $ = V(R, (t) => y(t), S);
+  return r(H, { allowPinchZoom: !0, children: r(T, {
+    asChild: !0,
+    loop: !0,
+    // we make sure we're not trapping once it's been closed
+    // (closed !== unmounted when animating out)
+    trapped: !0,
+    onUnmountAutoFocus: (t) => {
+      t.preventDefault(), b.current || e.current?.focus({ preventScroll: !0 });
     },
-    hasRadius: !0,
-    background: "neutral0",
-    padding: 1,
-    ...l,
-    children: e
-  });
-}, R = ({
-  children: t,
-  intersectionId: e,
-  onReachEnd: o,
-  ...r
-}) => {
-  const s = a.useRef(null);
-  return P(s, o ?? (() => {
+    children: r(N, {
+      asChild: !0,
+      onEscapeKeyDown: d,
+      onPointerDownOutside: v(f, (t) => {
+        const p = t.detail.originalEvent, F = p.button === 0 && p.ctrlKey === !0, z = p.button === 2 || F;
+        b.current = z;
+      }, { checkForDefaultPrevented: !1 }),
+      // When focus is trapped, a `focusout` event may still happen.
+      // We make sure we don't trigger our `onDismiss` in such case.
+      onFocusOutside: v(u, (t) => t.preventDefault(), {
+        checkForDefaultPrevented: !1
+      }),
+      onDismiss: c,
+      children: r(G, { ref: $, style: {
+        left: D,
+        top: L,
+        position: O,
+        width: P || void 0
+      }, hasRadius: !0, background: "neutral0", padding: 1, ...E, children: s })
+    })
+  }) });
+}), Q = ({ children: e, intersectionId: s, onReachEnd: n, ...i }) => {
+  const l = o.useRef(null), a = Z();
+  return _(l, n ?? (() => {
   }), {
-    selectorToWatch: `#${e}`,
-    skipWhen: !e || !o
-  }), x(L, {
-    ref: s,
-    ...r,
-    children: [t, e && o && i(d, {
-      id: e,
-      width: "100%",
-      height: "1px"
-    })]
-  });
-}, L = c(d)`
+    selectorToWatch: `#${x(a)}`,
+    skipWhen: !s || !n
+  }), I(X, { ref: l, ...i, children: [e, s && n && r(h, { id: x(a), width: "100%", height: "1px" })] });
+}, X = k(h)`
   // 16 is base base size, 3 is the factor to get closer to 40px and 5 is the number of elements visible in the list
   max-height: ${3 * 5}rem;
   overflow-y: auto;
@@ -89,44 +110,18 @@ const T = ["top", "top-start", "top-end", "right", "right-start", "right-end", "
   }
 
   &::-webkit-scrollbar-track {
-    background: ${({
-  theme: t
-}) => t.colors.neutral0};
+    background: ${({ theme: e }) => e.colors.neutral0};
   }
 
   &::-webkit-scrollbar-thumb {
-    background: ${({
-  theme: t
-}) => t.colors.neutral150};
-    border-radius: ${({
-  theme: t
-}) => t.borderRadius};
+    background: ${({ theme: e }) => e.colors.neutral150};
+    border-radius: ${({ theme: e }) => e.borderRadius};
     margin-right: 10px;
   }
-`, B = ({
-  children: t,
-  source: e,
-  spacing: o,
-  fullWidth: r,
-  placement: s,
-  centered: n,
-  ...l
-}) => i(S, {
-  children: i(E, {
-    source: e,
-    spacing: o,
-    fullWidth: r,
-    placement: s,
-    centered: n,
-    children: i(R, {
-      ...l,
-      children: t
-    })
-  })
-});
+`, pe = ({ children: e, source: s, spacing: n, fullWidth: i, placement: l, centered: a, onEscapeKeyDown: d, onPointerDownOutside: f, onDismiss: c, ...u }) => r(q, { children: r(J, { source: s, spacing: n, fullWidth: i, placement: l, centered: a, onEscapeKeyDown: d, onPointerDownOutside: f, onDismiss: c, children: r(Q, { ...u, children: e }) }) });
 export {
-  E as Content,
-  T as POPOVER_PLACEMENTS,
-  B as Popover,
-  R as Scrolling
+  J as Content,
+  me as POPOVER_PLACEMENTS,
+  pe as Popover,
+  Q as Scrolling
 };

package/dist/Popover/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./Popover.cjs"),o={Content:e.Content,Scrolling:e.Scrolling};exports.POPOVER_PLACEMENTS=e.POPOVER_PLACEMENTS;exports.Popover=e.Popover;exports.PopoverPrimitives=o;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./Popover.cjs"),o=require("./primitives.cjs");exports.POPOVER_PLACEMENTS=e.POPOVER_PLACEMENTS;exports.Popover=e.Popover;exports.PopoverPrimitives=o;

package/dist/Popover/index.js

@@ -1,11 +1,7 @@
-import { Content as o, Scrolling as r } from "./Popover.js";
-import { POPOVER_PLACEMENTS as p, Popover as m } from "./Popover.js";
-const e = {
-  Content: o,
-  Scrolling: r
-};
+import { POPOVER_PLACEMENTS as e, Popover as p } from "./Popover.js";
+import * as o from "./primitives.js";
 export {
-  p as POPOVER_PLACEMENTS,
-  m as Popover,
-  e as PopoverPrimitives
+  e as POPOVER_PLACEMENTS,
+  p as Popover,
+  o as PopoverPrimitives
 };

package/dist/Popover/primitives.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./Popover.cjs");exports.Content=e.Content;exports.Scrolling=e.Scrolling;

package/dist/Popover/primitives.js

@@ -0,0 +1,5 @@
+import { Content as r, Scrolling as t } from "./Popover.js";
+export {
+  r as Content,
+  t as Scrolling
+};

package/dist/Portal/Portal.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react"),c=require("react-dom");function a(e){if(e&&e.__esModule)return e;const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:()=>e[r]})}}return t.default=e,Object.freeze(t)}const u=a(o),l=({children:e})=>{const t=u.useRef(null),[r,n]=u.useState(!1);return u.useLayoutEffect(()=>(t.current=document.createElement("div"),t.current.setAttribute("data-react-portal","true"),document.body.appendChild(t.current),n(!0),()=>{t.current?.remove()}),[]),!r||!t.current?null:c.createPortal(e,t.current)};exports.Portal=l;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),a=require("react"),u=require("react-dom"),l=require("../Box/Box.cjs");function s(e){if(e&&e.__esModule)return e;const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const o=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,o.get?o:{enumerable:!0,get:()=>e[t]})}}return r.default=e,Object.freeze(r)}const i=s(a),n=i.forwardRef(({container:e=globalThis?.document?.body,...r},t)=>e?u.createPortal(c.jsx(l.Box,{ref:t,...r}),e):null);n.displayName="Portal";exports.Portal=n;

package/dist/Portal/Portal.js

@@ -1,13 +1,9 @@
-import * as e from "react";
-import { createPortal as o } from "react-dom";
-const a = ({
-  children: r
-}) => {
-  const t = e.useRef(null), [u, n] = e.useState(!1);
-  return e.useLayoutEffect(() => (t.current = document.createElement("div"), t.current.setAttribute("data-react-portal", "true"), document.body.appendChild(t.current), n(!0), () => {
-    t.current?.remove();
-  }), []), !u || !t.current ? null : o(r, t.current);
-};
+import { jsx as m } from "react/jsx-runtime";
+import * as a from "react";
+import { createPortal as e } from "react-dom";
+import { Box as l } from "../Box/Box.js";
+const f = a.forwardRef(({ container: o = globalThis?.document?.body, ...r }, t) => o ? e(m(l, { ref: t, ...r }), o) : null);
+f.displayName = "Portal";
 export {
-  a as Portal
+  f as Portal
 };

package/dist/Portal/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./Portal.cjs");exports.Portal=e.Portal;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./Portal.cjs");exports.Portal=t.Portal;

package/dist/ProgressBar/ProgressBar.cjs

@@ -1,11 +1,11 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("react"),d=require("prop-types"),c=require("styled-components"),p=require("../Box/Box.cjs"),r=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},f=r(i),t=r(d),b=r(c),m=b.default(p.Box)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),i=require("styled-components"),l=require("../Box/Box.cjs"),n=r=>r&&r.__esModule?r:{default:r},d=n(i),c=d.default(l.Box)`
   &:before {
-    background-color: ${({theme:e})=>e.colors.neutral0};
-    border-radius: ${({theme:e})=>e.borderRadius};
+    background-color: ${({theme:r})=>r.colors.neutral0};
+    border-radius: ${({theme:r})=>r.borderRadius};
     bottom: 0;
     content: '';
     position: absolute;
     top: 0;
-    width: ${({value:e})=>`${e}%`};
+    width: ${({value:r})=>`${r}%`};
   }
-`,o=({min:e,max:u,value:a,children:l,size:s,...n})=>f.default.createElement(m,{background:"neutral600",hasRadius:!0,"aria-label":l,"aria-valuemax":u,"aria-valuemin":e,"aria-valuenow":a,height:s==="S"?1:2,position:"relative",role:"progressbar",value:a,width:s==="S"?"78px":"102px",...n});o.defaultProps={min:0,max:100,value:0,size:"M"};o.propTypes={children:t.default.node.isRequired,max:t.default.number,min:t.default.number,size:t.default.oneOf(["S","M"]),value:t.default.number};exports.ProgressBar=o;
+`,b=({min:r=0,max:t=100,value:e=0,children:a,size:o="M",...s})=>u.jsx(c,{background:"neutral600",hasRadius:!0,"aria-label":a,"aria-valuemax":t,"aria-valuemin":r,"aria-valuenow":e,height:o==="S"?1:2,position:"relative",role:"progressbar",value:e,width:o==="S"?"78px":"102px",...s});exports.ProgressBar=b;

package/dist/ProgressBar/ProgressBar.js

@@ -1,8 +1,7 @@
-import u from "react";
-import e from "prop-types";
-import m from "styled-components";
-import { Box as l } from "../Box/Box.js";
-const p = m(l)`
+import { jsx as s } from "react/jsx-runtime";
+import l from "styled-components";
+import { Box as n } from "../Box/Box.js";
+const u = l(n)`
   &:before {
     background-color: ${({ theme: r }) => r.colors.neutral0};
     border-radius: ${({ theme: r }) => r.borderRadius};
@@ -12,36 +11,7 @@ const p = m(l)`
     top: 0;
     width: ${({ value: r }) => `${r}%`};
   }
-`, t = ({ min: r, max: i, value: o, children: s, size: a, ...n }) => /* @__PURE__ */ u.createElement(
-  p,
-  {
-    background: "neutral600",
-    hasRadius: !0,
-    "aria-label": s,
-    "aria-valuemax": i,
-    "aria-valuemin": r,
-    "aria-valuenow": o,
-    height: a === "S" ? 1 : 2,
-    position: "relative",
-    role: "progressbar",
-    value: o,
-    width: a === "S" ? "78px" : "102px",
-    ...n
-  }
-);
-t.defaultProps = {
-  min: 0,
-  max: 100,
-  value: 0,
-  size: "M"
-};
-t.propTypes = {
-  children: e.node.isRequired,
-  max: e.number,
-  min: e.number,
-  size: e.oneOf(["S", "M"]),
-  value: e.number
-};
+`, m = ({ min: r = 0, max: e = 100, value: o = 0, children: t, size: a = "M", ...i }) => s(u, { background: "neutral600", hasRadius: !0, "aria-label": t, "aria-valuemax": e, "aria-valuemin": r, "aria-valuenow": o, height: a === "S" ? 1 : 2, position: "relative", role: "progressbar", value: o, width: a === "S" ? "78px" : "102px", ...i });
 export {
-  t as ProgressBar
+  m as ProgressBar
 };

package/dist/ProgressBar/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("./ProgressBar.cjs");exports.ProgressBar=r.ProgressBar;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./ProgressBar.cjs");exports.ProgressBar=r.ProgressBar;

package/dist/Radio/Radio.cjs

@@ -1,4 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react"),d=require("prop-types"),n=require("styled-components"),u=require("../BaseRadio/BaseRadio.cjs"),c=require("../Box/Box.cjs"),i=require("../Typography/Typography.cjs"),a=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=a(l),o=a(d),p=a(n),y=p.default(i.Typography)`
-  display: flex;
-  align-items: center;
-`,r=({children:e,...s})=>t.default.createElement(y,{as:"label",textColor:"neutral800"},t.default.createElement(u.BaseRadio,{...s}),t.default.createElement(c.Box,{paddingLeft:2},e));r.propTypes={children:o.default.node.isRequired,value:o.default.any.isRequired};exports.Radio=r;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("../BaseRadio/BaseRadio.cjs"),s=require("../Flex/Flex.cjs"),a=require("../Typography/Typography.cjs"),i=({children:r,...t})=>e.jsxs(s.Flex,{alignItems:"center",as:"label",gap:2,children:[e.jsx(o.BaseRadio,{...t}),e.jsx(a.Typography,{textColor:"neutral800",children:r})]});exports.Radio=i;

package/dist/Radio/Radio.js

@@ -1,17 +1,8 @@
-import e from "react";
-import r from "prop-types";
-import a from "styled-components";
-import { BaseRadio as i } from "../BaseRadio/BaseRadio.js";
-import { Box as m } from "../Box/Box.js";
-import { Typography as p } from "../Typography/Typography.js";
-const l = a(p)`
-  display: flex;
-  align-items: center;
-`, n = ({ children: t, ...o }) => /* @__PURE__ */ e.createElement(l, { as: "label", textColor: "neutral800" }, /* @__PURE__ */ e.createElement(i, { ...o }), /* @__PURE__ */ e.createElement(m, { paddingLeft: 2 }, t));
-n.propTypes = {
-  children: r.node.isRequired,
-  value: r.any.isRequired
-};
+import { jsxs as t, jsx as r } from "react/jsx-runtime";
+import { BaseRadio as a } from "../BaseRadio/BaseRadio.js";
+import { Flex as i } from "../Flex/Flex.js";
+import { Typography as m } from "../Typography/Typography.js";
+const x = ({ children: o, ...e }) => t(i, { alignItems: "center", as: "label", gap: 2, children: [r(a, { ...e }), r(m, { textColor: "neutral800", children: o })] });
 export {
-  n as Radio
+  x as Radio
 };

package/dist/Radio/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("./Radio.cjs"),e=require("../BaseRadio/RadioGroup.cjs");exports.Radio=o.Radio;exports.RadioGroup=e.RadioGroup;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./Radio.cjs"),e=require("../BaseRadio/RadioGroup.cjs");exports.Radio=o.Radio;exports.RadioGroup=e.RadioGroup;

package/dist/RawTable/RawCell.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const g=require("react/jsx-runtime"),l=require("react"),F=require("./RawTableContext.cjs"),v=require("../Box/Box.cjs"),s=require("../helpers/getFocusableNodes.cjs"),d=require("../helpers/keyboardKeys.cjs"),w=n=>g.jsx(y,{...n,as:"th"}),y=({coords:n={col:0,row:0},as:h="td",...x})=>{const a=l.useRef(null),{rowIndex:T,colIndex:E,setTableValues:N}=F.useTable(),[c,i]=l.useState(!1),K=e=>{const t=s.getFocusableNodes(a.current,!0);if(t.length===0||t.length===1&&s.getFocusableNodesWithKeyboardNav(t).length===0)return;if(t.length>1&&!t.find(u=>u.tagName!=="BUTTON")){e.preventDefault();const u=t.findIndex(r=>r===document.activeElement);if(e.key===d.KeyboardKeys.RIGHT){const r=t[u+1];r&&(e.stopPropagation(),r.focus())}else if(e.key===d.KeyboardKeys.LEFT){const r=t[u-1];r&&(e.stopPropagation(),r.focus())}return}const o=e.key===d.KeyboardKeys.ENTER;if(o&&!c)i(!0);else if((e.key===d.KeyboardKeys.ESCAPE||o)&&c){if(o&&document.activeElement?.tagName==="A")return;i(!1),a.current.focus()}else c&&e.stopPropagation()},f=T===n.row-1&&E===n.col-1;l.useLayoutEffect(()=>{const e=s.getFocusableNodes(a.current,!0);e.length===0||e.length===1&&s.getFocusableNodesWithKeyboardNav(e).length!==0||e.length>1&&Boolean(e.find(t=>t.tagName!=="BUTTON"))?(a.current.setAttribute("tabIndex",!c&&f?"0":"-1"),e.forEach((t,o)=>{t.setAttribute("tabIndex",c?"0":"-1"),c&&o===0&&t.focus()})):e.forEach(t=>{t.setAttribute("tabIndex",f?"0":"-1")})},[c,f]);const b=l.useCallback(()=>{const e=s.getFocusableNodes(a.current,!0);e.length>=1&&(s.getFocusableNodesWithKeyboardNav(e).length!==0||!e.find(t=>t.tagName!=="BUTTON"))&&i(!0),N({rowIndex:n.row-1,colIndex:n.col-1})},[n,N]);return l.useLayoutEffect(()=>{const e=a.current;return s.getFocusableNodes(e,!0).forEach(o=>{o.addEventListener("focus",b)}),()=>{s.getFocusableNodes(e,!0).forEach(u=>{u.removeEventListener("focus",b)})}},[b]),g.jsx(v.Box,{role:"gridcell",as:h,ref:a,onKeyDown:K,...x})};exports.RawTd=y;exports.RawTh=w;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const g=require("react/jsx-runtime"),l=require("react"),F=require("./RawTableContext.cjs"),s=require("../helpers/getFocusableNodes.cjs"),d=require("../helpers/keyboardKeys.cjs"),v=require("../Box/Box.cjs"),w=n=>g.jsx(y,{...n,as:"th"}),y=({coords:n={col:0,row:0},as:h="td",...x})=>{const a=l.useRef(null),{rowIndex:T,colIndex:E,setTableValues:N}=F.useTable(),[c,f]=l.useState(!1),K=e=>{const t=s.getFocusableNodes(a.current,!0);if(t.length===0||t.length===1&&s.getFocusableNodesWithKeyboardNav(t).length===0)return;if(t.length>1&&!t.find(u=>u.tagName!=="BUTTON")){e.preventDefault();const u=t.findIndex(r=>r===document.activeElement);if(e.key===d.KeyboardKeys.RIGHT){const r=t[u+1];r&&(e.stopPropagation(),r.focus())}else if(e.key===d.KeyboardKeys.LEFT){const r=t[u-1];r&&(e.stopPropagation(),r.focus())}return}const o=e.key===d.KeyboardKeys.ENTER;if(o&&!c)f(!0);else if((e.key===d.KeyboardKeys.ESCAPE||o)&&c){if(o&&document.activeElement?.tagName==="A")return;f(!1),a.current.focus()}else c&&e.stopPropagation()},i=T===n.row-1&&E===n.col-1;l.useLayoutEffect(()=>{const e=s.getFocusableNodes(a.current,!0);e.length===0||e.length===1&&s.getFocusableNodesWithKeyboardNav(e).length!==0||e.length>1&&e.find(t=>t.tagName!=="BUTTON")?(a.current.setAttribute("tabIndex",!c&&i?"0":"-1"),e.forEach((t,o)=>{t.setAttribute("tabIndex",c?"0":"-1"),c&&o===0&&t.focus()})):e.forEach(t=>{t.setAttribute("tabIndex",i?"0":"-1")})},[c,i]);const b=l.useCallback(()=>{const e=s.getFocusableNodes(a.current,!0);e.length>=1&&(s.getFocusableNodesWithKeyboardNav(e).length!==0||!e.find(t=>t.tagName!=="BUTTON"))&&f(!0),N({rowIndex:n.row-1,colIndex:n.col-1})},[n,N]);return l.useLayoutEffect(()=>{const e=a.current;return s.getFocusableNodes(e,!0).forEach(o=>{o.addEventListener("focus",b)}),()=>{s.getFocusableNodes(e,!0).forEach(u=>{u.removeEventListener("focus",b)})}},[b]),g.jsx(v.Box,{role:"gridcell",as:h,ref:a,onKeyDown:K,...x})};exports.RawTd=y;exports.RawTh=w;

package/dist/RawTable/RawCell.js

@@ -1,25 +1,11 @@
 import { jsx as g } from "react/jsx-runtime";
 import { useRef as y, useState as I, useLayoutEffect as N, useCallback as v } from "react";
 import { useTable as w } from "./RawTableContext.js";
-import { Box as A } from "../Box/Box.js";
 import { getFocusableNodes as u, getFocusableNodesWithKeyboardNav as b } from "../helpers/getFocusableNodes.js";
 import { KeyboardKeys as f } from "../helpers/keyboardKeys.js";
-const D = (n) => g(B, {
-  ...n,
-  as: "th"
-}), B = ({
-  coords: n = {
-    col: 0,
-    row: 0
-  },
-  as: h = "td",
-  ...E
-}) => {
-  const s = y(null), {
-    rowIndex: p,
-    colIndex: x,
-    setTableValues: m
-  } = w(), [r, l] = I(!1), T = (e) => {
+import { Box as A } from "../Box/Box.js";
+const D = (n) => g(B, { ...n, as: "th" }), B = ({ coords: n = { col: 0, row: 0 }, as: h = "td", ...E }) => {
+  const s = y(null), { rowIndex: p, colIndex: x, setTableValues: m } = w(), [r, l] = I(!1), T = (e) => {
     const t = u(s.current, !0);
     if (t.length === 0 || t.length === 1 && b(t).length === 0)
       return;
@@ -47,7 +33,7 @@ const D = (n) => g(B, {
   }, i = p === n.row - 1 && x === n.col - 1;
   N(() => {
     const e = u(s.current, !0);
-    e.length === 0 || e.length === 1 && b(e).length !== 0 || e.length > 1 && Boolean(e.find((t) => t.tagName !== "BUTTON")) ? (s.current.setAttribute("tabIndex", !r && i ? "0" : "-1"), e.forEach((t, o) => {
+    e.length === 0 || e.length === 1 && b(e).length !== 0 || e.length > 1 && e.find((t) => t.tagName !== "BUTTON") ? (s.current.setAttribute("tabIndex", !r && i ? "0" : "-1"), e.forEach((t, o) => {
       t.setAttribute("tabIndex", r ? "0" : "-1"), r && o === 0 && t.focus();
     })) : e.forEach((t) => {
       t.setAttribute("tabIndex", i ? "0" : "-1");
@@ -55,10 +41,7 @@ const D = (n) => g(B, {
   }, [r, i]);
   const d = v(() => {
     const e = u(s.current, !0);
-    e.length >= 1 && (b(e).length !== 0 || !e.find((t) => t.tagName !== "BUTTON")) && l(!0), m({
-      rowIndex: n.row - 1,
-      colIndex: n.col - 1
-    });
+    e.length >= 1 && (b(e).length !== 0 || !e.find((t) => t.tagName !== "BUTTON")) && l(!0), m({ rowIndex: n.row - 1, colIndex: n.col - 1 });
   }, [n, m]);
   return N(() => {
     const e = s.current;
@@ -69,13 +52,7 @@ const D = (n) => g(B, {
         a.removeEventListener("focus", d);
       });
     };
-  }, [d]), g(A, {
-    role: "gridcell",
-    as: h,
-    ref: s,
-    onKeyDown: T,
-    ...E
-  });
+  }, [d]), g(A, { role: "gridcell", as: h, ref: s, onKeyDown: T, ...E });
 };
 export {
   B as RawTd,

package/dist/RawTable/RawTable.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("react/jsx-runtime"),r=require("react"),E=require("./focusFocusable.cjs"),P=require("./RawTableContext.cjs"),s=require("../helpers/keyboardKeys.cjs"),j=({colCount:b,rowCount:c,jumpStep:l=3,initialCol:D=0,initialRow:d=0,...k})=>{const f=r.useRef(null),n=r.useRef(!1),[o,t]=r.useState(d),[y,u]=r.useState(D),K=r.useCallback(({colIndex:a,rowIndex:e})=>{u(a),t(e)},[]);r.useEffect(()=>{n.current&&E.focusFocusable(f.current),n.current||(n.current=!0)},[y,o]);const T=a=>{switch(a.key){case s.KeyboardKeys.RIGHT:{a.preventDefault(),u(e=>e<b-1?e+1:e);break}case s.KeyboardKeys.LEFT:{a.preventDefault(),u(e=>e>0?e-1:e);break}case s.KeyboardKeys.UP:{a.preventDefault(),t(e=>e>0?e-1:e);break}case s.KeyboardKeys.DOWN:{a.preventDefault(),t(e=>e<c-1?e+1:e);break}case s.KeyboardKeys.HOME:{a.preventDefault(),a.ctrlKey&&t(0),u(0);break}case s.KeyboardKeys.END:{a.preventDefault(),a.ctrlKey&&t(c-1),u(b-1);break}case s.KeyboardKeys.PAGE_DOWN:{a.preventDefault(),t(e=>e+l<c?e+l:c-1);break}case s.KeyboardKeys.PAGE_UP:{a.preventDefault(),t(e=>e-l>0?e-l:0);break}}},R=r.useMemo(()=>({rowIndex:o,colIndex:y,setTableValues:K}),[y,o,K]);return i.jsx(P.RawTableContext.Provider,{value:R,children:i.jsx("table",{role:"grid",ref:f,"aria-rowcount":c,"aria-colcount":b,onKeyDown:T,...k})})};exports.RawTable=j;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),r=require("react"),P=require("./focusFocusable.cjs"),R=require("./RawTableContext.cjs"),t=require("../helpers/keyboardKeys.cjs"),q=({colCount:l,rowCount:c,jumpStep:b=3,initialCol:D=0,initialRow:k=0,...d})=>{const f=r.useRef(null),n=r.useRef(!1),[o,s]=r.useState(k),[y,u]=r.useState(D),K=r.useCallback(({colIndex:a,rowIndex:e})=>{u(a),s(e)},[]);r.useEffect(()=>{n.current&&P.focusFocusable(f.current),n.current||(n.current=!0)},[y,o]);const T=a=>{switch(a.key){case t.KeyboardKeys.RIGHT:{a.preventDefault(),u(e=>e<l-1?e+1:e);break}case t.KeyboardKeys.LEFT:{a.preventDefault(),u(e=>e>0?e-1:e);break}case t.KeyboardKeys.UP:{a.preventDefault(),s(e=>e>0?e-1:e);break}case t.KeyboardKeys.DOWN:{a.preventDefault(),s(e=>e<c-1?e+1:e);break}case t.KeyboardKeys.HOME:{a.preventDefault(),a.ctrlKey&&s(0),u(0);break}case t.KeyboardKeys.END:{a.preventDefault(),a.ctrlKey&&s(c-1),u(l-1);break}case t.KeyboardKeys.PAGE_DOWN:{a.preventDefault(),s(e=>e+b<c?e+b:c-1);break}case t.KeyboardKeys.PAGE_UP:{a.preventDefault(),s(e=>e-b>0?e-b:0);break}}},E=r.useMemo(()=>({rowIndex:o,colIndex:y,setTableValues:K}),[y,o,K]);return i.jsx(R.RawTableContext.Provider,{value:E,children:i.jsx("table",{role:"grid",ref:f,"aria-rowcount":c,"aria-colcount":l,onKeyDown:T,...d})})};exports.RawTable=q;

package/dist/RawTable/RawTable.js

@@ -3,18 +3,8 @@ import { useRef as k, useState as m, useCallback as h, useEffect as G, useMemo a
 import { focusFocusable as O } from "./focusFocusable.js";
 import { RawTableContext as A } from "./RawTableContext.js";
 import { KeyboardKeys as a } from "../helpers/keyboardKeys.js";
-const _ = ({
-  colCount: l,
-  rowCount: c,
-  jumpStep: f = 3,
-  initialCol: y = 0,
-  initialRow: E = 0,
-  ...K
-}) => {
-  const b = k(null), n = k(!1), [u, r] = m(E), [o, s] = m(y), i = h(({
-    colIndex: t,
-    rowIndex: e
-  }) => {
+const _ = ({ colCount: l, rowCount: c, jumpStep: f = 3, initialCol: y = 0, initialRow: E = 0, ...K }) => {
+  const b = k(null), n = k(!1), [u, r] = m(E), [o, s] = m(y), i = h(({ colIndex: t, rowIndex: e }) => {
     s(t), r(e);
   }, []);
   G(() => {
@@ -55,22 +45,8 @@ const _ = ({
         break;
       }
     }
-  }, T = N(() => ({
-    rowIndex: u,
-    colIndex: o,
-    setTableValues: i
-  }), [o, u, i]);
-  return D(A.Provider, {
-    value: T,
-    children: D("table", {
-      role: "grid",
-      ref: b,
-      "aria-rowcount": c,
-      "aria-colcount": l,
-      onKeyDown: P,
-      ...K
-    })
-  });
+  }, T = N(() => ({ rowIndex: u, colIndex: o, setTableValues: i }), [o, u, i]);
+  return D(A.Provider, { value: T, children: D("table", { role: "grid", ref: b, "aria-rowcount": c, "aria-colcount": l, onKeyDown: P, ...K }) });
 };
 export {
   _ as RawTable

package/dist/RawTable/RawTableContext.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react"),t=e.createContext({rowIndex:0,colIndex:0,setTableValues(){throw new Error("setTableValues must be initialized via the RawTableContext.Provider")}}),a=()=>e.useContext(t);exports.RawTableContext=t;exports.useTable=a;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),t=e.createContext({rowIndex:0,colIndex:0,setTableValues(){throw new Error("setTableValues must be initialized via the RawTableContext.Provider")}}),a=()=>e.useContext(t);exports.RawTableContext=t;exports.useTable=a;

package/dist/RawTable/RawTbody.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react/jsx-runtime"),r=require("react"),u=({children:t,...n})=>{const o=r.Children.toArray(t).map((e,i)=>r.isValidElement(e)?r.cloneElement(e,{"aria-rowindex":i+2}):e);return a.jsx("tbody",{...n,children:o})};exports.RawTbody=u;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),r=require("react"),l=({children:t,...n})=>{const o=r.Children.toArray(t).map((e,i)=>r.isValidElement(e)?r.cloneElement(e,{"aria-rowindex":i+2}):e);return a.jsx("tbody",{...n,children:o})};exports.RawTbody=l;

package/dist/RawTable/RawTbody.js

@@ -1,16 +1,8 @@
 import { jsx as i } from "react/jsx-runtime";
 import { Children as m, isValidElement as a, cloneElement as l } from "react";
-const s = ({
-  children: e,
-  ...n
-}) => {
-  const o = m.toArray(e).map((r, t) => a(r) ? l(r, {
-    "aria-rowindex": t + 2
-  }) : r);
-  return i("tbody", {
-    ...n,
-    children: o
-  });
+const s = ({ children: e, ...n }) => {
+  const o = m.toArray(e).map((r, t) => a(r) ? l(r, { "aria-rowindex": t + 2 }) : r);
+  return i("tbody", { ...n, children: o });
 };
 export {
   s as RawTbody

package/dist/RawTable/RawThead.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("react/jsx-runtime"),r=require("react"),o=({children:t,...n})=>{const a=r.Children.toArray(t).map(e=>r.isValidElement(e)?r.cloneElement(e,{"aria-rowindex":1}):e);return i.jsx("thead",{...n,children:a})};exports.RawThead=o;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),r=require("react"),o=({children:t,...n})=>{const a=r.Children.toArray(t).map(e=>r.isValidElement(e)?r.cloneElement(e,{"aria-rowindex":1}):e);return i.jsx("thead",{...n,children:a})};exports.RawThead=o;

package/dist/RawTable/RawThead.js

@@ -1,16 +1,8 @@
 import { jsx as o } from "react/jsx-runtime";
 import { Children as a, isValidElement as i, cloneElement as m } from "react";
-const p = ({
-  children: e,
-  ...n
-}) => {
-  const t = a.toArray(e).map((r) => i(r) ? m(r, {
-    "aria-rowindex": 1
-  }) : r);
-  return o("thead", {
-    ...n,
-    children: t
-  });
+const p = ({ children: e, ...n }) => {
+  const t = a.toArray(e).map((r) => i(r) ? m(r, { "aria-rowindex": 1 }) : r);
+  return o("thead", { ...n, children: t });
 };
 export {
   p as RawThead

package/dist/RawTable/RawTr.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("react/jsx-runtime"),r=require("react"),c=require("../Box/Box.cjs"),s=({children:n,...t})=>{const a=r.Children.toArray(n).map((e,o)=>r.isValidElement(e)?r.cloneElement(e,{"aria-colindex":o+1,coords:{col:o+1,row:t["aria-rowindex"]}}):e);return i.jsx(c.Box,{as:"tr",...t,children:a})};exports.RawTr=s;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),r=require("react"),c=require("../Box/Box.cjs"),l=({children:o,...t})=>{const i=r.Children.toArray(o).map((e,n)=>r.isValidElement(e)?r.cloneElement(e,{"aria-colindex":n+1,coords:{col:n+1,row:t["aria-rowindex"]}}):e);return a.jsx(c.Box,{as:"tr",...t,children:i})};exports.RawTr=l;