@strapi/design-system 1.3.1-alpha.0 → 1.3.1

package/dist/Popover/Popover.js

@@ -1,11 +1,31 @@
-import * as o from "react";
-import t from "prop-types";
-import d from "styled-components";
-import { useFloating as R, offset as $, shift as W, flip as T, autoUpdate as O } from "@floating-ui/react-dom";
-import { Box as s } from "../Box/Box.js";
-import { Portal as S } from "../Portal/Portal.js";
-import { useIntersection as q } from "../helpers/useIntersection.js";
-const L = [
+var L = Object.defineProperty;
+var i = Object.getOwnPropertySymbols;
+var b = Object.prototype.hasOwnProperty, g = Object.prototype.propertyIsEnumerable;
+var h = (e, o, t) => o in e ? L(e, o, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[o] = t, p = (e, o) => {
+  for (var t in o || (o = {}))
+    b.call(o, t) && h(e, t, o[t]);
+  if (i)
+    for (var t of i(o))
+      g.call(o, t) && h(e, t, o[t]);
+  return e;
+};
+var w = (e, o) => {
+  var t = {};
+  for (var r in e)
+    b.call(e, r) && o.indexOf(r) < 0 && (t[r] = e[r]);
+  if (e != null && i)
+    for (var r of i(e))
+      o.indexOf(r) < 0 && g.call(e, r) && (t[r] = e[r]);
+  return t;
+};
+import * as s from "react";
+import n from "prop-types";
+import v from "styled-components";
+import { useFloating as z, offset as A, shift as C, flip as M, autoUpdate as B } from "@floating-ui/react-dom";
+import { Box as d } from "../Box/Box.js";
+import { Portal as D } from "../Portal/Portal.js";
+import { useIntersection as F } from "../helpers/useIntersection.js";
+const N = [
   "top",
   "top-start",
   "top-end",
@@ -18,12 +38,12 @@ const L = [
   "left",
   "left-start",
   "left-end"
-], z = d(s)`
+], U = v(d)`
   box-shadow: ${({ theme: e }) => e.shadows.filterShadow};
   z-index: 4;
   border: 1px solid ${({ theme: e }) => e.colors.neutral150};
   background: ${({ theme: e }) => e.colors.neutral0};
-`, A = d(s)`
+`, V = v(d)`
   // 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;
@@ -43,80 +63,86 @@ const L = [
     border-radius: ${({ theme: e }) => e.borderRadius};
     margin-right: 10px;
   }
-`, a = ({
-  source: e,
-  children: m,
-  spacing: h,
-  fullWidth: i,
-  placement: b,
-  onReachEnd: n,
-  intersectionId: r,
-  centered: g,
-  ...w
-}) => {
-  const l = o.useRef(null), [p, v] = o.useState(void 0), { x, y, reference: E, floating: P, strategy: k } = R({
+`, c = (_) => {
+  var f = _, {
+    source: e,
+    children: o,
+    spacing: t,
+    fullWidth: r,
+    placement: P,
+    onReachEnd: l,
+    intersectionId: a,
+    centered: k
+  } = f, R = w(f, [
+    "source",
+    "children",
+    "spacing",
+    "fullWidth",
+    "placement",
+    "onReachEnd",
+    "intersectionId",
+    "centered"
+  ]);
+  const u = s.useRef(null), [m, $] = s.useState(void 0), { x: W, y: T, reference: O, floating: S, strategy: q } = z({
     strategy: "fixed",
-    placement: g ? "bottom" : b,
+    placement: k ? "bottom" : P,
     middleware: [
-      $({
-        mainAxis: h
+      A({
+        mainAxis: t
       }),
-      W(),
-      T()
+      C(),
+      M()
     ],
-    whileElementsMounted: O
+    whileElementsMounted: B
   });
-  return o.useLayoutEffect(() => {
-    E(e.current);
-  }, [e]), o.useLayoutEffect(() => {
-    i && v(e.current.offsetWidth);
-  }, [i]), q(l, n, {
-    selectorToWatch: `#${r}`,
-    skipWhen: !r || !n
-  }), /* @__PURE__ */ o.createElement(z, {
-    ref: P,
+  return s.useLayoutEffect(() => {
+    O(e.current);
+  }, [e]), s.useLayoutEffect(() => {
+    r && $(e.current.offsetWidth);
+  }, [r]), F(u, l, {
+    selectorToWatch: `#${a}`,
+    skipWhen: !a || !l
+  }), /* @__PURE__ */ s.createElement(U, {
+    ref: S,
     style: {
-      left: x,
-      top: y,
-      position: k,
-      width: p || void 0
+      left: W,
+      top: T,
+      position: q,
+      width: m || void 0
     },
     hasRadius: !0,
     background: "neutral0",
     padding: 1
-  }, /* @__PURE__ */ o.createElement(A, {
-    ref: l,
-    ...w
-  }, m, r && n && /* @__PURE__ */ o.createElement(s, {
-    id: r,
+  }, /* @__PURE__ */ s.createElement(V, p({
+    ref: u
+  }, R), o, a && l && /* @__PURE__ */ s.createElement(d, {
+    id: a,
     width: "100%",
     height: "1px"
   })));
-}, c = (e) => /* @__PURE__ */ o.createElement(S, null, /* @__PURE__ */ o.createElement(a, {
-  ...e
-})), f = {
+}, x = (e) => /* @__PURE__ */ s.createElement(D, null, /* @__PURE__ */ s.createElement(c, p({}, e))), y = {
   fullWidth: !1,
   intersectionId: void 0,
   onReachEnd: void 0,
   centered: !1,
   placement: "bottom-start"
-}, u = {
-  centered: t.bool,
-  children: t.node.isRequired,
-  fullWidth: t.bool,
-  intersectionId: t.string,
-  onReachEnd: t.func,
-  placement: t.oneOf(L),
-  source: t.shape({
-    current: (typeof Element > "u" ? t.any : t.instanceOf(Element)).isRequired
+}, E = {
+  centered: n.bool,
+  children: n.node.isRequired,
+  fullWidth: n.bool,
+  intersectionId: n.string,
+  onReachEnd: n.func,
+  placement: n.oneOf(N),
+  source: n.shape({
+    current: (typeof Element == "undefined" ? n.any : n.instanceOf(Element)).isRequired
   }).isRequired,
-  spacing: t.number
+  spacing: n.number
 };
-a.propTypes = u;
-a.defaultProps = f;
-c.propTypes = u;
-c.defaultProps = f;
+c.propTypes = E;
+c.defaultProps = y;
+x.propTypes = E;
+x.defaultProps = y;
 export {
-  L as POPOVER_PLACEMENTS,
-  c as Popover
+  N as POPOVER_PLACEMENTS,
+  x as Popover
 };

package/dist/Portal/Portal.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react"),c=require("react-dom"),a=require("prop-types"),s=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},l=s(a),u=({children:e})=>{const t=r.useRef(null),[o,n]=r.useState(!1);return r.useLayoutEffect(()=>(t.current=document.createElement("div"),t.current.setAttribute("data-react-portal","true"),document.body.appendChild(t.current),n(!0),()=>{t.current?.remove()}),[]),!o||!t.current?null:c.createPortal(e,t.current)};u.propTypes={children:l.default.node.isRequired};exports.Portal=u;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react"),a=require("react-dom"),s=require("prop-types"),l=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},d=l(s),o=({children:e})=>{const t=r.useRef(null),[n,c]=r.useState(!1);return r.useLayoutEffect(()=>(t.current=document.createElement("div"),t.current.setAttribute("data-react-portal","true"),document.body.appendChild(t.current),c(!0),()=>{var u;(u=t.current)==null||u.remove()}),[]),!n||!t.current?null:a.createPortal(e,t.current)};o.propTypes={children:d.default.node.isRequired};exports.Portal=o;

package/dist/Portal/Portal.js

@@ -1,15 +1,16 @@
-import { useRef as u, useState as n, useLayoutEffect as c } from "react";
-import { createPortal as a } from "react-dom";
-import d from "prop-types";
-const p = ({ children: r }) => {
-  const e = u(null), [t, o] = n(!1);
-  return c(() => (e.current = document.createElement("div"), e.current.setAttribute("data-react-portal", "true"), document.body.appendChild(e.current), o(!0), () => {
-    e.current?.remove();
-  }), []), !t || !e.current ? null : a(r, e.current);
+import { useRef as n, useState as c, useLayoutEffect as a } from "react";
+import { createPortal as d } from "react-dom";
+import p from "prop-types";
+const s = ({ children: t }) => {
+  const e = n(null), [o, u] = c(!1);
+  return a(() => (e.current = document.createElement("div"), e.current.setAttribute("data-react-portal", "true"), document.body.appendChild(e.current), u(!0), () => {
+    var r;
+    (r = e.current) == null || r.remove();
+  }), []), !o || !e.current ? null : d(t, e.current);
 };
-p.propTypes = {
-  children: d.node.isRequired
+s.propTypes = {
+  children: p.node.isRequired
 };
 export {
-  p as Portal
+  s as Portal
 };

package/dist/ProgressBar/ProgressBar.cjs

@@ -1,4 +1,4 @@
-"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";var g=Object.defineProperty;var s=Object.getOwnPropertySymbols;var c=Object.prototype.hasOwnProperty,p=Object.prototype.propertyIsEnumerable;var d=(e,r,t)=>r in e?g(e,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[r]=t,f=(e,r)=>{for(var t in r||(r={}))c.call(r,t)&&d(e,t,r[t]);if(s)for(var t of s(r))p.call(r,t)&&d(e,t,r[t]);return e};var b=(e,r)=>{var t={};for(var o in e)c.call(e,o)&&r.indexOf(o)<0&&(t[o]=e[o]);if(e!=null&&s)for(var o of s(e))r.indexOf(o)<0&&p.call(e,o)&&(t[o]=e[o]);return t};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const y=require("react"),x=require("prop-types"),_=require("styled-components"),v=require("../Box/Box.cjs"),u=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},B=u(y),a=u(x),P=u(_),h=P.default(v.Box)`
   &:before {
     background-color: ${({theme:e})=>e.colors.neutral0};
     border-radius: ${({theme:e})=>e.borderRadius};
@@ -8,4 +8,4 @@
     top: 0;
     width: ${({value:e})=>`${e}%`};
   }
-`,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;
+`,l=q=>{var i=q,{min:e,max:r,value:t,children:o,size:n}=i,m=b(i,["min","max","value","children","size"]);return B.default.createElement(h,f({background:"neutral600",hasRadius:!0,"aria-label":o,"aria-valuemax":r,"aria-valuemin":e,"aria-valuenow":t,height:n==="S"?1:2,position:"relative",role:"progressbar",value:t,width:n==="S"?"78px":"102px"},m))};l.defaultProps={min:0,max:100,value:0,size:"M"};l.propTypes={children:a.default.node.isRequired,max:a.default.number,min:a.default.number,size:a.default.oneOf(["S","M"]),value:a.default.number};exports.ProgressBar=l;

package/dist/ProgressBar/ProgressBar.js

@@ -1,8 +1,28 @@
-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)`
+var f = Object.defineProperty;
+var i = Object.getOwnPropertySymbols;
+var m = Object.prototype.hasOwnProperty, l = Object.prototype.propertyIsEnumerable;
+var u = (r, o, e) => o in r ? f(r, o, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[o] = e, p = (r, o) => {
+  for (var e in o || (o = {}))
+    m.call(o, e) && u(r, e, o[e]);
+  if (i)
+    for (var e of i(o))
+      l.call(o, e) && u(r, e, o[e]);
+  return r;
+};
+var d = (r, o) => {
+  var e = {};
+  for (var a in r)
+    m.call(r, a) && o.indexOf(a) < 0 && (e[a] = r[a]);
+  if (r != null && i)
+    for (var a of i(r))
+      o.indexOf(a) < 0 && l.call(r, a) && (e[a] = r[a]);
+  return e;
+};
+import x from "react";
+import t from "prop-types";
+import g from "styled-components";
+import { Box as h } from "../Box/Box.js";
+const v = g(h)`
   &:before {
     background-color: ${({ theme: r }) => r.colors.neutral0};
     border-radius: ${({ theme: r }) => r.borderRadius};
@@ -12,33 +32,35 @@ 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 = {
+`, b = (P) => {
+  var n = P, { min: r, max: o, value: e, children: a, size: s } = n, c = d(n, ["min", "max", "value", "children", "size"]);
+  return /* @__PURE__ */ x.createElement(v, p({
+    background: "neutral600",
+    hasRadius: !0,
+    "aria-label": a,
+    "aria-valuemax": o,
+    "aria-valuemin": r,
+    "aria-valuenow": e,
+    height: s === "S" ? 1 : 2,
+    position: "relative",
+    role: "progressbar",
+    value: e,
+    width: s === "S" ? "78px" : "102px"
+  }, c));
+};
+b.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
+b.propTypes = {
+  children: t.node.isRequired,
+  max: t.number,
+  min: t.number,
+  size: t.oneOf(["S", "M"]),
+  value: t.number
 };
 export {
-  t as ProgressBar
+  b as ProgressBar
 };

package/dist/Radio/Radio.cjs

@@ -1,4 +1,4 @@
-"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("../Typography/Typography.cjs"),i=require("../Box/Box.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(c.Typography)`
+"use strict";var f=Object.defineProperty;var r=Object.getOwnPropertySymbols;var n=Object.prototype.hasOwnProperty,u=Object.prototype.propertyIsEnumerable;var d=(e,t,a)=>t in e?f(e,t,{enumerable:!0,configurable:!0,writable:!0,value:a}):e[t]=a,c=(e,t)=>{for(var a in t||(t={}))n.call(t,a)&&d(e,a,t[a]);if(r)for(var a of r(t))u.call(t,a)&&d(e,a,t[a]);return e};var i=(e,t)=>{var a={};for(var o in e)n.call(e,o)&&t.indexOf(o)<0&&(a[o]=e[o]);if(e!=null&&r)for(var o of r(e))t.indexOf(o)<0&&u.call(e,o)&&(a[o]=e[o]);return a};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const R=require("react"),g=require("prop-types"),T=require("styled-components"),_=require("../BaseRadio/BaseRadio.cjs"),q=require("../Typography/Typography.cjs"),B=require("../Box/Box.cjs"),l=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},s=l(R),p=l(g),x=l(T),m=x.default(q.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(i.Box,{paddingLeft:2},e));r.propTypes={children:o.default.node.isRequired,value:o.default.any.isRequired};exports.Radio=r;
+`,y=a=>{var o=a,{children:e}=o,t=i(o,["children"]);return s.default.createElement(m,{as:"label",textColor:"neutral800"},s.default.createElement(_.BaseRadio,c({},t)),s.default.createElement(B.Box,{paddingLeft:2},e))};y.propTypes={children:p.default.node.isRequired,value:p.default.any.isRequired};exports.Radio=y;

package/dist/Radio/Radio.js

@@ -1,24 +1,45 @@
-import e from "react";
-import r from "prop-types";
-import a from "styled-components";
-import { BaseRadio as i } from "../BaseRadio/BaseRadio.js";
-import { Typography as m } from "../Typography/Typography.js";
-import { Box as p } from "../Box/Box.js";
-const l = a(m)`
+var f = Object.defineProperty;
+var a = Object.getOwnPropertySymbols;
+var p = Object.prototype.hasOwnProperty, l = Object.prototype.propertyIsEnumerable;
+var m = (e, r, t) => r in e ? f(e, r, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[r] = t, n = (e, r) => {
+  for (var t in r || (r = {}))
+    p.call(r, t) && m(e, t, r[t]);
+  if (a)
+    for (var t of a(r))
+      l.call(r, t) && m(e, t, r[t]);
+  return e;
+};
+var d = (e, r) => {
+  var t = {};
+  for (var o in e)
+    p.call(e, o) && r.indexOf(o) < 0 && (t[o] = e[o]);
+  if (e != null && a)
+    for (var o of a(e))
+      r.indexOf(o) < 0 && l.call(e, o) && (t[o] = e[o]);
+  return t;
+};
+import i from "react";
+import s from "prop-types";
+import c from "styled-components";
+import { BaseRadio as y } from "../BaseRadio/BaseRadio.js";
+import { Typography as u } from "../Typography/Typography.js";
+import { Box as x } from "../Box/Box.js";
+const R = c(u)`
   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(p, {
-  paddingLeft: 2
-}, t));
-n.propTypes = {
-  children: r.node.isRequired,
-  value: r.any.isRequired
+`, T = (t) => {
+  var o = t, { children: e } = o, r = d(o, ["children"]);
+  return /* @__PURE__ */ i.createElement(R, {
+    as: "label",
+    textColor: "neutral800"
+  }, /* @__PURE__ */ i.createElement(y, n({}, r)), /* @__PURE__ */ i.createElement(x, {
+    paddingLeft: 2
+  }, e));
+};
+T.propTypes = {
+  children: s.node.isRequired,
+  value: s.any.isRequired
 };
 export {
-  n as Radio
+  T as Radio
 };

package/dist/RawTable/RawCell.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("react"),m=require("prop-types"),R=require("../Box/Box.cjs"),c=require("../helpers/getFocusableNodes.cjs"),l=require("../helpers/keyboardKeys.cjs"),w=require("./RawTableContext.cjs"),p=o=>o&&typeof o=="object"&&"default"in o?o:{default:o},g=p(d),a=p(m),y=o=>g.default.createElement(f,{...o,as:"th"}),f=({coords:o,as:h,...N})=>{const n=d.useRef(null),{rowIndex:T,colIndex:x,setTableValues:E}=w.useTable(),[u,i]=d.useState(!1),K=e=>{const t=c.getFocusableNodes(n.current,!0);if(!(t.length===0||t.length===1&&c.getFocusableNodesWithKeyboardNav(t).length===0)){if(t.length>1&&!Boolean(t.find(s=>s.tagName!=="BUTTON"))){e.preventDefault();const s=t.findIndex(r=>r===document.activeElement);if(e.key===l.KeyboardKeys.RIGHT){const r=t[s+1];r&&(e.stopPropagation(),r.focus())}else if(e.key===l.KeyboardKeys.LEFT){const r=t[s-1];r&&(e.stopPropagation(),r.focus())}return}e.key===l.KeyboardKeys.ENTER&&!u?i(!0):(e.key===l.KeyboardKeys.ESCAPE||e.key===l.KeyboardKeys.ENTER)&&u?(i(!1),n.current.focus()):u&&e.stopPropagation()}},b=T===o.row-1&&x===o.col-1;return d.useLayoutEffect(()=>{const e=c.getFocusableNodes(n.current,!0);e.length===0||e.length===1&&c.getFocusableNodesWithKeyboardNav(e).length!==0||e.length>1&&Boolean(e.find(t=>t.tagName!=="BUTTON"))?(n.current.setAttribute("tabIndex",!u&&b?0:-1),e.forEach((t,s)=>{t.setAttribute("tabIndex",u?0:-1),u&&s===0&&t.focus()})):e.forEach(t=>{t.setAttribute("tabIndex",b?0:-1)})},[u,b]),d.useLayoutEffect(()=>{const e=c.getFocusableNodes(n.current,!0),t=()=>{e.length>=1&&(c.getFocusableNodesWithKeyboardNav(e).length!==0||!Boolean(e.find(s=>s.tagName!=="BUTTON")))&&i(!0),E({rowIndex:o.row-1,colIndex:o.col-1})};return e.forEach(s=>{s.addEventListener("focus",t)}),()=>{c.getFocusableNodes(n.current,!0).forEach(r=>{r.removeEventListener("focus",t)})}},[]),g.default.createElement(R.Box,{as:h||"td",ref:n,onKeyDown:K,...N})};y.defaultProps={coords:{}};y.propTypes={["aria-colindex"]:a.default.number.isRequired,children:a.default.node,coords:a.default.shape({col:a.default.number,row:a.default.number})};f.defaultProps={coords:{}};f.propTypes={["aria-colindex"]:a.default.number.isRequired,as:a.default.oneOf(["td","th"]),children:a.default.node,coords:a.default.shape({col:a.default.number,row:a.default.number})};exports.RawTd=f;exports.RawTh=y;
+"use strict";var k=Object.defineProperty,_=Object.defineProperties;var j=Object.getOwnPropertyDescriptors;var y=Object.getOwnPropertySymbols;var K=Object.prototype.hasOwnProperty,m=Object.prototype.propertyIsEnumerable;var E=(e,o,a)=>o in e?k(e,o,{enumerable:!0,configurable:!0,writable:!0,value:a}):e[o]=a,N=(e,o)=>{for(var a in o||(o={}))K.call(o,a)&&E(e,a,o[a]);if(y)for(var a of y(o))m.call(o,a)&&E(e,a,o[a]);return e},R=(e,o)=>_(e,j(o));var w=(e,o)=>{var a={};for(var u in e)K.call(e,u)&&o.indexOf(u)<0&&(a[u]=e[u]);if(e!=null&&y)for(var u of y(e))o.indexOf(u)<0&&m.call(e,u)&&(a[u]=e[u]);return a};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const b=require("react"),A=require("prop-types"),L=require("../Box/Box.cjs"),f=require("../helpers/getFocusableNodes.cjs"),i=require("../helpers/keyboardKeys.cjs"),O=require("./RawTableContext.cjs"),F=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},v=F(b),n=F(A),T=e=>v.default.createElement(h,R(N({},e),{as:"th"})),h=u=>{var x=u,{coords:e,as:o}=x,a=w(x,["coords","as"]);const l=b.useRef(null),{rowIndex:B,colIndex:I,setTableValues:P}=O.useTable(),[d,p]=b.useState(!1),q=t=>{const s=f.getFocusableNodes(l.current,!0);if(!(s.length===0||s.length===1&&f.getFocusableNodesWithKeyboardNav(s).length===0)){if(s.length>1&&!Boolean(s.find(r=>r.tagName!=="BUTTON"))){t.preventDefault();const r=s.findIndex(c=>c===document.activeElement);if(t.key===i.KeyboardKeys.RIGHT){const c=s[r+1];c&&(t.stopPropagation(),c.focus())}else if(t.key===i.KeyboardKeys.LEFT){const c=s[r-1];c&&(t.stopPropagation(),c.focus())}return}t.key===i.KeyboardKeys.ENTER&&!d?p(!0):(t.key===i.KeyboardKeys.ESCAPE||t.key===i.KeyboardKeys.ENTER)&&d?(p(!1),l.current.focus()):d&&t.stopPropagation()}},g=B===e.row-1&&I===e.col-1;return b.useLayoutEffect(()=>{const t=f.getFocusableNodes(l.current,!0);t.length===0||t.length===1&&f.getFocusableNodesWithKeyboardNav(t).length!==0||t.length>1&&Boolean(t.find(s=>s.tagName!=="BUTTON"))?(l.current.setAttribute("tabIndex",!d&&g?0:-1),t.forEach((s,r)=>{s.setAttribute("tabIndex",d?0:-1),d&&r===0&&s.focus()})):t.forEach(s=>{s.setAttribute("tabIndex",g?0:-1)})},[d,g]),b.useLayoutEffect(()=>{const t=f.getFocusableNodes(l.current,!0),s=()=>{t.length>=1&&(f.getFocusableNodesWithKeyboardNav(t).length!==0||!Boolean(t.find(r=>r.tagName!=="BUTTON")))&&p(!0),P({rowIndex:e.row-1,colIndex:e.col-1})};return t.forEach(r=>{r.addEventListener("focus",s)}),()=>{f.getFocusableNodes(l.current,!0).forEach(c=>{c.removeEventListener("focus",s)})}},[]),v.default.createElement(L.Box,N({as:o||"td",ref:l,onKeyDown:q},a))};T.defaultProps={coords:{}};T.propTypes={["aria-colindex"]:n.default.number.isRequired,children:n.default.node,coords:n.default.shape({col:n.default.number,row:n.default.number})};h.defaultProps={coords:{}};h.propTypes={["aria-colindex"]:n.default.number.isRequired,as:n.default.oneOf(["td","th"]),children:n.default.node,coords:n.default.shape({col:n.default.number,row:n.default.number})};exports.RawTd=h;exports.RawTh=T;

package/dist/RawTable/RawCell.js

@@ -1,80 +1,100 @@
-import h, { useRef as I, useState as w, useLayoutEffect as b } from "react";
-import n from "prop-types";
-import { Box as R } from "../Box/Box.js";
-import { getFocusableNodes as l, getFocusableNodesWithKeyboardNav as i } from "../helpers/getFocusableNodes.js";
-import { KeyboardKeys as u } from "../helpers/keyboardKeys.js";
-import { useTable as v } from "./RawTableContext.js";
-const N = (c) => /* @__PURE__ */ h.createElement(m, {
-  ...c,
+var K = Object.defineProperty, L = Object.defineProperties;
+var O = Object.getOwnPropertyDescriptors;
+var i = Object.getOwnPropertySymbols;
+var x = Object.prototype.hasOwnProperty, y = Object.prototype.propertyIsEnumerable;
+var T = (e, o, r) => o in e ? K(e, o, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[o] = r, h = (e, o) => {
+  for (var r in o || (o = {}))
+    x.call(o, r) && T(e, r, o[r]);
+  if (i)
+    for (var r of i(o))
+      y.call(o, r) && T(e, r, o[r]);
+  return e;
+}, I = (e, o) => L(e, O(o));
+var w = (e, o) => {
+  var r = {};
+  for (var c in e)
+    x.call(e, c) && o.indexOf(c) < 0 && (r[c] = e[c]);
+  if (e != null && i)
+    for (var c of i(e))
+      o.indexOf(c) < 0 && y.call(e, c) && (r[c] = e[c]);
+  return r;
+};
+import v, { useRef as D, useState as U, useLayoutEffect as R } from "react";
+import a from "prop-types";
+import { Box as q } from "../Box/Box.js";
+import { getFocusableNodes as m, getFocusableNodesWithKeyboardNav as N } from "../helpers/getFocusableNodes.js";
+import { KeyboardKeys as d } from "../helpers/keyboardKeys.js";
+import { useTable as S } from "./RawTableContext.js";
+const B = (e) => /* @__PURE__ */ v.createElement(g, I(h({}, e), {
   as: "th"
-}), m = ({ coords: c, as: p, ...g }) => {
-  const s = I(null), { rowIndex: E, colIndex: T, setTableValues: x } = v(), [a, f] = w(!1), y = (e) => {
-    const t = l(s.current, !0);
-    if (!(t.length === 0 || t.length === 1 && i(t).length === 0)) {
-      if (t.length > 1 && !Boolean(t.find((o) => o.tagName !== "BUTTON"))) {
-        e.preventDefault();
-        const o = t.findIndex((r) => r === document.activeElement);
-        if (e.key === u.RIGHT) {
-          const r = t[o + 1];
-          r && (e.stopPropagation(), r.focus());
-        } else if (e.key === u.LEFT) {
-          const r = t[o - 1];
-          r && (e.stopPropagation(), r.focus());
+})), g = (c) => {
+  var E = c, { coords: e, as: o } = E, r = w(E, ["coords", "as"]);
+  const l = D(null), { rowIndex: P, colIndex: A, setTableValues: F } = S(), [f, p] = U(!1), k = (t) => {
+    const n = m(l.current, !0);
+    if (!(n.length === 0 || n.length === 1 && N(n).length === 0)) {
+      if (n.length > 1 && !Boolean(n.find((s) => s.tagName !== "BUTTON"))) {
+        t.preventDefault();
+        const s = n.findIndex((u) => u === document.activeElement);
+        if (t.key === d.RIGHT) {
+          const u = n[s + 1];
+          u && (t.stopPropagation(), u.focus());
+        } else if (t.key === d.LEFT) {
+          const u = n[s - 1];
+          u && (t.stopPropagation(), u.focus());
         }
         return;
       }
-      e.key === u.ENTER && !a ? f(!0) : (e.key === u.ESCAPE || e.key === u.ENTER) && a ? (f(!1), s.current.focus()) : a && e.stopPropagation();
+      t.key === d.ENTER && !f ? p(!0) : (t.key === d.ESCAPE || t.key === d.ENTER) && f ? (p(!1), l.current.focus()) : f && t.stopPropagation();
     }
-  }, d = E === c.row - 1 && T === c.col - 1;
-  return b(() => {
-    const e = l(s.current, !0);
-    e.length === 0 || e.length === 1 && i(e).length !== 0 || e.length > 1 && Boolean(e.find((t) => t.tagName !== "BUTTON")) ? (s.current.setAttribute("tabIndex", !a && d ? 0 : -1), e.forEach((t, o) => {
-      t.setAttribute("tabIndex", a ? 0 : -1), a && o === 0 && t.focus();
-    })) : e.forEach((t) => {
-      t.setAttribute("tabIndex", d ? 0 : -1);
+  }, b = P === e.row - 1 && A === e.col - 1;
+  return R(() => {
+    const t = m(l.current, !0);
+    t.length === 0 || t.length === 1 && N(t).length !== 0 || t.length > 1 && Boolean(t.find((n) => n.tagName !== "BUTTON")) ? (l.current.setAttribute("tabIndex", !f && b ? 0 : -1), t.forEach((n, s) => {
+      n.setAttribute("tabIndex", f ? 0 : -1), f && s === 0 && n.focus();
+    })) : t.forEach((n) => {
+      n.setAttribute("tabIndex", b ? 0 : -1);
     });
-  }, [a, d]), b(() => {
-    const e = l(s.current, !0), t = () => {
-      e.length >= 1 && (i(e).length !== 0 || !Boolean(e.find((o) => o.tagName !== "BUTTON"))) && f(!0), x({ rowIndex: c.row - 1, colIndex: c.col - 1 });
+  }, [f, b]), R(() => {
+    const t = m(l.current, !0), n = () => {
+      t.length >= 1 && (N(t).length !== 0 || !Boolean(t.find((s) => s.tagName !== "BUTTON"))) && p(!0), F({ rowIndex: e.row - 1, colIndex: e.col - 1 });
     };
-    return e.forEach((o) => {
-      o.addEventListener("focus", t);
+    return t.forEach((s) => {
+      s.addEventListener("focus", n);
     }), () => {
-      l(s.current, !0).forEach((r) => {
-        r.removeEventListener("focus", t);
+      m(l.current, !0).forEach((u) => {
+        u.removeEventListener("focus", n);
       });
     };
-  }, []), /* @__PURE__ */ h.createElement(R, {
-    as: p || "td",
-    ref: s,
-    onKeyDown: y,
-    ...g
-  });
+  }, []), /* @__PURE__ */ v.createElement(q, h({
+    as: o || "td",
+    ref: l,
+    onKeyDown: k
+  }, r));
 };
-N.defaultProps = {
+B.defaultProps = {
   coords: {}
 };
-N.propTypes = {
-  ["aria-colindex"]: n.number.isRequired,
-  children: n.node,
-  coords: n.shape({
-    col: n.number,
-    row: n.number
+B.propTypes = {
+  ["aria-colindex"]: a.number.isRequired,
+  children: a.node,
+  coords: a.shape({
+    col: a.number,
+    row: a.number
   })
 };
-m.defaultProps = {
+g.defaultProps = {
   coords: {}
 };
-m.propTypes = {
-  ["aria-colindex"]: n.number.isRequired,
-  as: n.oneOf(["td", "th"]),
-  children: n.node,
-  coords: n.shape({
-    col: n.number,
-    row: n.number
+g.propTypes = {
+  ["aria-colindex"]: a.number.isRequired,
+  as: a.oneOf(["td", "th"]),
+  children: a.node,
+  coords: a.shape({
+    col: a.number,
+    row: a.number
   })
 };
 export {
-  m as RawTd,
-  N as RawTh
+  g as RawTd,
+  B as RawTh
 };

package/dist/RawTable/RawTable.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("react"),_=require("prop-types"),m=require("./RawTableContext.cjs"),r=require("../helpers/keyboardKeys.cjs"),E=require("./focusFocusable.cjs"),D=a=>a&&typeof a=="object"&&"default"in a?a:{default:a},K=D(u),o=D(_),f=({colCount:a,rowCount:l,jumpStep:n,initialCol:k,initialRow:T,...p})=>{const i=u.useRef(null),b=u.useRef(!1),[y,s]=u.useState(T),[d,c]=u.useState(k),R=u.useCallback(({colIndex:t,rowIndex:e})=>{c(t),s(e)},[]);u.useEffect(()=>{b.current&&E.focusFocusable(i.current),b.current||(b.current=!0)},[d,y]);const P=t=>{switch(t.key){case r.KeyboardKeys.RIGHT:{t.preventDefault(),c(e=>e<a-1?e+1:e);break}case r.KeyboardKeys.LEFT:{t.preventDefault(),c(e=>e>0?e-1:e);break}case r.KeyboardKeys.UP:{t.preventDefault(),s(e=>e>0?e-1:e);break}case r.KeyboardKeys.DOWN:{t.preventDefault(),s(e=>e<l-1?e+1:e);break}case r.KeyboardKeys.HOME:{t.preventDefault(),t.ctrlKey&&s(0),c(0);break}case r.KeyboardKeys.END:{t.preventDefault(),t.ctrlKey&&s(l-1),c(a-1);break}case r.KeyboardKeys.PAGE_DOWN:{t.preventDefault(),s(e=>e+n<l?e+n:l-1);break}case r.KeyboardKeys.PAGE_UP:{t.preventDefault(),s(e=>e-n>0?e-n:0);break}}};return K.default.createElement(m.RawTableContext.Provider,{value:{rowIndex:y,colIndex:d,setTableValues:R}},K.default.createElement("table",{ref:i,"aria-rowcount":l,"aria-colcount":a,onKeyDown:P,...p}))};f.defaultProps={jumpStep:3,initialCol:0,initialRow:0};f.propTypes={colCount:o.default.number.isRequired,initialCol:o.default.number,initialRow:o.default.number,jumpStep:o.default.number,rowCount:o.default.number.isRequired};exports.RawTable=f;
+"use strict";var O=Object.defineProperty;var f=Object.getOwnPropertySymbols;var p=Object.prototype.hasOwnProperty,R=Object.prototype.propertyIsEnumerable;var T=(e,a,r)=>a in e?O(e,a,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[a]=r,P=(e,a)=>{for(var r in a||(a={}))p.call(a,r)&&T(e,r,a[r]);if(f)for(var r of f(a))R.call(a,r)&&T(e,r,a[r]);return e};var _=(e,a)=>{var r={};for(var u in e)p.call(e,u)&&a.indexOf(u)<0&&(r[u]=e[u]);if(e!=null&&f)for(var u of f(e))a.indexOf(u)<0&&R.call(e,u)&&(r[u]=e[u]);return r};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react"),g=require("prop-types"),h=require("./RawTableContext.cjs"),l=require("../helpers/keyboardKeys.cjs"),G=require("./focusFocusable.cjs"),E=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},m=E(o),b=E(g),y=M=>{var d=M,{colCount:e,rowCount:a,jumpStep:r,initialCol:u,initialRow:q}=d,w=_(d,["colCount","rowCount","jumpStep","initialCol","initialRow"]);const K=o.useRef(null),i=o.useRef(!1),[D,c]=o.useState(q),[k,n]=o.useState(u),j=o.useCallback(({colIndex:s,rowIndex:t})=>{n(s),c(t)},[]);o.useEffect(()=>{i.current&&G.focusFocusable(K.current),i.current||(i.current=!0)},[k,D]);const F=s=>{switch(s.key){case l.KeyboardKeys.RIGHT:{s.preventDefault(),n(t=>t<e-1?t+1:t);break}case l.KeyboardKeys.LEFT:{s.preventDefault(),n(t=>t>0?t-1:t);break}case l.KeyboardKeys.UP:{s.preventDefault(),c(t=>t>0?t-1:t);break}case l.KeyboardKeys.DOWN:{s.preventDefault(),c(t=>t<a-1?t+1:t);break}case l.KeyboardKeys.HOME:{s.preventDefault(),s.ctrlKey&&c(0),n(0);break}case l.KeyboardKeys.END:{s.preventDefault(),s.ctrlKey&&c(a-1),n(e-1);break}case l.KeyboardKeys.PAGE_DOWN:{s.preventDefault(),c(t=>t+r<a?t+r:a-1);break}case l.KeyboardKeys.PAGE_UP:{s.preventDefault(),c(t=>t-r>0?t-r:0);break}}};return m.default.createElement(h.RawTableContext.Provider,{value:{rowIndex:D,colIndex:k,setTableValues:j}},m.default.createElement("table",P({ref:K,"aria-rowcount":a,"aria-colcount":e,onKeyDown:F},w)))};y.defaultProps={jumpStep:3,initialCol:0,initialRow:0};y.propTypes={colCount:b.default.number.isRequired,initialCol:b.default.number,initialRow:b.default.number,jumpStep:b.default.number,rowCount:b.default.number.isRequired};exports.RawTable=y;