@strapi/design-system 1.9.0 → 1.10.0-alpha.0

package/dist/Table/Table.js

@@ -1,24 +1,35 @@
-import { jsxs as f, jsx as i } from "react/jsx-runtime";
-import { useRef as h, useState as u, useEffect as g } from "react";
-import r from "styled-components";
-import { RawTable as b } from "../RawTable/RawTable.js";
-import { Box as n } from "../Box/Box.js";
-const p = r(n)`
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const styled = require('styled-components');
+const RawTable = require('../RawTable/RawTable.js');
+const Box = require('../Box/Box.js');
+
+const _interopDefault = e => e && e.__esModule ? e : { default: e };
+
+const styled__default = /*#__PURE__*/_interopDefault(styled);
+
+const TableContainer = styled__default.default(Box.Box) `
   overflow: hidden;
-  border: 1px solid ${({ theme: t }) => t.colors.neutral150};
-`, w = r(b)`
+  border: 1px solid ${({ theme }) => theme.colors.neutral150};
+`;
+const TableWrapper = styled__default.default(RawTable.RawTable) `
   width: 100%;
   white-space: nowrap;
-`, m = r(n)`
+`;
+const TableBox = styled__default.default(Box.Box) `
   &:before {
     // TODO: make sure to add a token for this weird stuff
     background: linear-gradient(90deg, #c0c0cf 0%, rgba(0, 0, 0, 0) 100%);
     opacity: 0.2;
     position: absolute;
     height: 100%;
-    content: ${({ overflowing: t }) => t === "both" || t === "left" ? "''" : void 0};
-    box-shadow: ${({ theme: t }) => t.shadows.tableShadow};
-    width: ${({ theme: t }) => t.spaces[2]};
+    content: ${({ overflowing }) => (overflowing === 'both' || overflowing === 'left' ? "''" : undefined)};
+    box-shadow: ${({ theme }) => theme.shadows.tableShadow};
+    width: ${({ theme }) => theme.spaces[2]};
     left: 0;
   }
 
@@ -28,31 +39,39 @@ const p = r(n)`
     opacity: 0.2;
     position: absolute;
     height: 100%;
-    content: ${({ overflowing: t }) => t === "both" || t === "right" ? "''" : void 0};
-    box-shadow: ${({ theme: t }) => t.shadows.tableShadow};
-    width: ${({ theme: t }) => t.spaces[2]};
+    content: ${({ overflowing }) => (overflowing === 'both' || overflowing === 'right' ? "''" : undefined)};
+    box-shadow: ${({ theme }) => theme.shadows.tableShadow};
+    width: ${({ theme }) => theme.spaces[2]};
     right: 0;
     top: 0;
   }
-`, x = r(n)`
+`;
+const ScrollContainer = styled__default.default(Box.Box) `
   overflow-x: auto;
-`, O = ({ footer: t, ...l }) => {
-  const a = h(null), [s, o] = u(), d = (e) => {
-    const c = e.target.scrollWidth - e.target.clientWidth;
-    if (e.target.scrollLeft === 0) {
-      o("right");
-      return;
-    }
-    if (e.target.scrollLeft === c) {
-      o("left");
-      return;
-    }
-    e.target.scrollLeft > 0 && o("both");
-  };
-  return g(() => {
-    a.current.scrollWidth > a.current.clientWidth && o("right");
-  }, []), f(p, { shadow: "tableShadow", hasRadius: !0, background: "neutral0", children: [i(m, { overflowing: s, position: "relative", children: i(x, { ref: a, onScroll: d, paddingLeft: 6, paddingRight: 6, children: i(w, { ...l }) }) }), t] });
-};
-export {
-  O as Table
+`;
+const Table = ({ footer, ...props }) => {
+    const tableRef = React.useRef(null);
+    const [overflowing, setOverflowing] = React.useState();
+    const handleScroll = (e) => {
+        const maxScrollLeft = e.target.scrollWidth - e.target.clientWidth;
+        if (e.target.scrollLeft === 0) {
+            setOverflowing('right');
+            return;
+        }
+        if (e.target.scrollLeft === maxScrollLeft) {
+            setOverflowing('left');
+            return;
+        }
+        if (e.target.scrollLeft > 0) {
+            setOverflowing('both');
+        }
+    };
+    React.useEffect(() => {
+        if (tableRef.current.scrollWidth > tableRef.current.clientWidth) {
+            setOverflowing('right');
+        }
+    }, []);
+    return (jsxRuntime.jsxs(TableContainer, { shadow: "tableShadow", hasRadius: true, background: "neutral0", children: [jsxRuntime.jsx(TableBox, { overflowing: overflowing, position: "relative", children: jsxRuntime.jsx(ScrollContainer, { ref: tableRef, onScroll: handleScroll, paddingLeft: 6, paddingRight: 6, children: jsxRuntime.jsx(TableWrapper, { ...props }) }) }), footer] }));
 };
+
+exports.Table = Table;

package/dist/Table/Table.mjs

@@ -0,0 +1,69 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef, useState, useEffect } from 'react';
+import styled from 'styled-components';
+import { RawTable } from '../RawTable/RawTable.mjs';
+import { Box } from '../Box/Box.mjs';
+
+const TableContainer = styled(Box) `
+  overflow: hidden;
+  border: 1px solid ${({ theme }) => theme.colors.neutral150};
+`;
+const TableWrapper = styled(RawTable) `
+  width: 100%;
+  white-space: nowrap;
+`;
+const TableBox = styled(Box) `
+  &:before {
+    // TODO: make sure to add a token for this weird stuff
+    background: linear-gradient(90deg, #c0c0cf 0%, rgba(0, 0, 0, 0) 100%);
+    opacity: 0.2;
+    position: absolute;
+    height: 100%;
+    content: ${({ overflowing }) => (overflowing === 'both' || overflowing === 'left' ? "''" : undefined)};
+    box-shadow: ${({ theme }) => theme.shadows.tableShadow};
+    width: ${({ theme }) => theme.spaces[2]};
+    left: 0;
+  }
+
+  &:after {
+    // TODO: make sure to add a token for this weird stuff
+    background: linear-gradient(270deg, #c0c0cf 0%, rgba(0, 0, 0, 0) 100%);
+    opacity: 0.2;
+    position: absolute;
+    height: 100%;
+    content: ${({ overflowing }) => (overflowing === 'both' || overflowing === 'right' ? "''" : undefined)};
+    box-shadow: ${({ theme }) => theme.shadows.tableShadow};
+    width: ${({ theme }) => theme.spaces[2]};
+    right: 0;
+    top: 0;
+  }
+`;
+const ScrollContainer = styled(Box) `
+  overflow-x: auto;
+`;
+const Table = ({ footer, ...props }) => {
+    const tableRef = useRef(null);
+    const [overflowing, setOverflowing] = useState();
+    const handleScroll = (e) => {
+        const maxScrollLeft = e.target.scrollWidth - e.target.clientWidth;
+        if (e.target.scrollLeft === 0) {
+            setOverflowing('right');
+            return;
+        }
+        if (e.target.scrollLeft === maxScrollLeft) {
+            setOverflowing('left');
+            return;
+        }
+        if (e.target.scrollLeft > 0) {
+            setOverflowing('both');
+        }
+    };
+    useEffect(() => {
+        if (tableRef.current.scrollWidth > tableRef.current.clientWidth) {
+            setOverflowing('right');
+        }
+    }, []);
+    return (jsxs(TableContainer, { shadow: "tableShadow", hasRadius: true, background: "neutral0", children: [jsx(TableBox, { overflowing: overflowing, position: "relative", children: jsx(ScrollContainer, { ref: tableRef, onScroll: handleScroll, paddingLeft: 6, paddingRight: 6, children: jsx(TableWrapper, { ...props }) }) }), footer] }));
+};
+
+export { Table };

package/dist/Table/Tbody.js

@@ -1,11 +1,22 @@
-import { jsx as t } from "react/jsx-runtime";
-import e from "styled-components";
-import { RawTbody as m } from "../RawTable/RawTbody.js";
-const p = e(m)`
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const styled = require('styled-components');
+const RawTbody = require('../RawTable/RawTbody.js');
+
+const _interopDefault = e => e && e.__esModule ? e : { default: e };
+
+const styled__default = /*#__PURE__*/_interopDefault(styled);
+
+const TbodyWrapper = styled__default.default(RawTbody.RawTbody) `
   & tr:last-of-type {
     border-bottom: none;
   }
-`, s = ({ children: o, ...r }) => t(p, { ...r, children: o });
-export {
-  s as Tbody
+`;
+const Tbody = ({ children, ...props }) => {
+    return jsxRuntime.jsx(TbodyWrapper, { ...props, children: children });
 };
+
+exports.Tbody = Tbody;

package/dist/Table/Tbody.mjs

@@ -0,0 +1,14 @@
+import { jsx } from 'react/jsx-runtime';
+import styled from 'styled-components';
+import { RawTbody } from '../RawTable/RawTbody.mjs';
+
+const TbodyWrapper = styled(RawTbody) `
+  & tr:last-of-type {
+    border-bottom: none;
+  }
+`;
+const Tbody = ({ children, ...props }) => {
+    return jsx(TbodyWrapper, { ...props, children: children });
+};
+
+export { Tbody };

package/dist/Table/Thead.js

@@ -1,9 +1,20 @@
-import { jsx as t } from "react/jsx-runtime";
-import e from "styled-components";
-import { RawThead as d } from "../RawTable/RawThead.js";
-const m = e(d)`
-  border-bottom: 1px solid ${({ theme: r }) => r.colors.neutral150};
-`, i = ({ children: r, ...o }) => t(m, { ...o, children: r });
-export {
-  i as Thead
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const styled = require('styled-components');
+const RawThead = require('../RawTable/RawThead.js');
+
+const _interopDefault = e => e && e.__esModule ? e : { default: e };
+
+const styled__default = /*#__PURE__*/_interopDefault(styled);
+
+const TheadWrapper = styled__default.default(RawThead.RawThead) `
+  border-bottom: 1px solid ${({ theme }) => theme.colors.neutral150};
+`;
+const Thead = ({ children, ...props }) => {
+    return jsxRuntime.jsx(TheadWrapper, { ...props, children: children });
 };
+
+exports.Thead = Thead;

package/dist/Table/Thead.mjs

@@ -0,0 +1,12 @@
+import { jsx } from 'react/jsx-runtime';
+import styled from 'styled-components';
+import { RawThead } from '../RawTable/RawThead.mjs';
+
+const TheadWrapper = styled(RawThead) `
+  border-bottom: 1px solid ${({ theme }) => theme.colors.neutral150};
+`;
+const Thead = ({ children, ...props }) => {
+    return jsx(TheadWrapper, { ...props, children: children });
+};
+
+export { Thead };

package/dist/Table/Tr.js

@@ -1,17 +1,26 @@
-import { jsx as r } from "react/jsx-runtime";
-import o from "styled-components";
-import { RawTr as p } from "../RawTable/RawTr.js";
-const d = o(p)`
-  border-bottom: 1px solid ${({ theme: t }) => t.colors.neutral150};
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const styled = require('styled-components');
+const RawTr = require('../RawTable/RawTr.js');
+
+const _interopDefault = e => e && e.__esModule ? e : { default: e };
+
+const styled__default = /*#__PURE__*/_interopDefault(styled);
+
+const TrWrapper = styled__default.default(RawTr.RawTr) `
+  border-bottom: 1px solid ${({ theme }) => theme.colors.neutral150};
 
   & td,
   & th {
-    padding: ${({ theme: t }) => t.spaces[4]};
+    padding: ${({ theme }) => theme.spaces[4]};
   }
 
   & td:first-of-type,
   & th:first-of-type {
-    padding: 0 ${({ theme: t }) => t.spaces[1]};
+    padding: 0 ${({ theme }) => theme.spaces[1]};
   }
 
   // Resetting padding values and fixing a height
@@ -20,7 +29,9 @@ const d = o(p)`
     padding-bottom: 0;
     height: ${56 / 16}rem;
   }
-`, a = (t) => r(d, { ...t });
-export {
-  a as Tr
+`;
+const Tr = (props) => {
+    return jsxRuntime.jsx(TrWrapper, { ...props });
 };
+
+exports.Tr = Tr;

package/dist/Table/Tr.mjs

@@ -0,0 +1,29 @@
+import { jsx } from 'react/jsx-runtime';
+import styled from 'styled-components';
+import { RawTr } from '../RawTable/RawTr.mjs';
+
+const TrWrapper = styled(RawTr) `
+  border-bottom: 1px solid ${({ theme }) => theme.colors.neutral150};
+
+  & td,
+  & th {
+    padding: ${({ theme }) => theme.spaces[4]};
+  }
+
+  & td:first-of-type,
+  & th:first-of-type {
+    padding: 0 ${({ theme }) => theme.spaces[1]};
+  }
+
+  // Resetting padding values and fixing a height
+  th {
+    padding-top: 0;
+    padding-bottom: 0;
+    height: ${56 / 16}rem;
+  }
+`;
+const Tr = (props) => {
+    return jsx(TrWrapper, { ...props });
+};
+
+export { Tr };

package/dist/Table/index.js

@@ -1,15 +1,20 @@
-import { Table as e } from "./Table.js";
-import { Tbody as T } from "./Tbody.js";
-import { Thead as m } from "./Thead.js";
-import { Tr as x } from "./Tr.js";
-import { Td as a, Th as b } from "./Cell.js";
-import { TFooter as l } from "./TFooter.js";
-export {
-  l as TFooter,
-  e as Table,
-  T as Tbody,
-  a as Td,
-  b as Th,
-  m as Thead,
-  x as Tr
-};
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const Table = require('./Table.js');
+const Tbody = require('./Tbody.js');
+const Thead = require('./Thead.js');
+const Tr = require('./Tr.js');
+const Cell = require('./Cell.js');
+const TFooter = require('./TFooter.js');
+
+
+
+exports.Table = Table.Table;
+exports.Tbody = Tbody.Tbody;
+exports.Thead = Thead.Thead;
+exports.Tr = Tr.Tr;
+exports.Td = Cell.Td;
+exports.Th = Cell.Th;
+exports.TFooter = TFooter.TFooter;

package/dist/Table/index.mjs

@@ -0,0 +1,6 @@
+export { Table } from './Table.mjs';
+export { Tbody } from './Tbody.mjs';
+export { Thead } from './Thead.mjs';
+export { Tr } from './Tr.mjs';
+export { Td, Th } from './Cell.mjs';
+export { TFooter } from './TFooter.mjs';

package/dist/Tabs/TabGroup.js

@@ -1,16 +1,41 @@
-import { jsx as m } from "react/jsx-runtime";
-import * as e from "react";
-import { TabsContext as x } from "./TabsContext.js";
-import { useId as f } from "../hooks/useId.js";
-const l = e.forwardRef(({ id: c, initialSelectedTabIndex: n = 0, label: t, onTabChange: o, variant: r, ...i }, p) => {
-  const s = f(c), [d, a] = e.useState(n);
-  e.useImperativeHandle(p, () => ({
-    _handlers: { setSelectedTabIndex: a }
-  }));
-  const u = e.useMemo(() => ({ id: s, selectedTabIndex: d, selectTabIndex: a, label: t, variant: r, onTabChange: o }), [t, o, d, s, r]);
-  return m(x.Provider, { value: u, children: m("div", { ...i }) });
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const TabsContext = require('./TabsContext.js');
+const useId = require('../hooks/useId.js');
+
+function _interopNamespace(e) {
+    if (e && e.__esModule) return e;
+    const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
+    if (e) {
+        for (const k in e) {
+            if (k !== 'default') {
+                const d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: () => e[k]
+                });
+            }
+        }
+    }
+    n.default = e;
+    return Object.freeze(n);
+}
+
+const React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+const TabGroup = React__namespace.forwardRef(({ id, initialSelectedTabIndex = 0, label, onTabChange, variant, ...props }, ref) => {
+    const tabsId = useId.useId(id);
+    const [selectedTabIndex, setSelectedTabIndex] = React__namespace.useState(initialSelectedTabIndex);
+    React__namespace.useImperativeHandle(ref, () => ({
+        _handlers: { setSelectedTabIndex },
+    }));
+    const context = React__namespace.useMemo(() => ({ id: tabsId, selectedTabIndex, selectTabIndex: setSelectedTabIndex, label, variant, onTabChange }), [label, onTabChange, selectedTabIndex, tabsId, variant]);
+    return (jsxRuntime.jsx(TabsContext.TabsContext.Provider, { value: context, children: jsxRuntime.jsx("div", { ...props }) }));
 });
-l.displayName = "TabGroup";
-export {
-  l as TabGroup
-};
+TabGroup.displayName = 'TabGroup';
+
+exports.TabGroup = TabGroup;

package/dist/Tabs/TabGroup.mjs

@@ -0,0 +1,17 @@
+import { jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { TabsContext } from './TabsContext.mjs';
+import { useId } from '../hooks/useId.mjs';
+
+const TabGroup = React.forwardRef(({ id, initialSelectedTabIndex = 0, label, onTabChange, variant, ...props }, ref) => {
+    const tabsId = useId(id);
+    const [selectedTabIndex, setSelectedTabIndex] = React.useState(initialSelectedTabIndex);
+    React.useImperativeHandle(ref, () => ({
+        _handlers: { setSelectedTabIndex },
+    }));
+    const context = React.useMemo(() => ({ id: tabsId, selectedTabIndex, selectTabIndex: setSelectedTabIndex, label, variant, onTabChange }), [label, onTabChange, selectedTabIndex, tabsId, variant]);
+    return (jsx(TabsContext.Provider, { value: context, children: jsx("div", { ...props }) }));
+});
+TabGroup.displayName = 'TabGroup';
+
+export { TabGroup };

package/dist/Tabs/TabPanels.js

@@ -1,14 +1,23 @@
-import { jsx as o } from "react/jsx-runtime";
-import { Children as b, cloneElement as i } from "react";
-import { useTabs as s } from "./TabsContext.js";
-const f = ({ children: e, ...t }) => {
-  const { id: a, selectedTabIndex: r } = s(), d = b.toArray(e).map((l, n) => i(l, { id: `${a}-${n}` })).filter((l, n) => n === r);
-  return o("div", { ...t, children: d });
-}, x = ({ id: e, ...t }) => {
-  const a = `${e}-tab`, r = `${e}-tabpanel`;
-  return o("div", { id: r, role: "tabpanel", tabIndex: 0, "aria-labelledby": a, ...t });
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const TabsContext = require('./TabsContext.js');
+
+const TabPanels = ({ children, ...props }) => {
+    const { id, selectedTabIndex } = TabsContext.useTabs();
+    const childrenArray = React.Children.toArray(children)
+        .map((node, index) => React.cloneElement(node, { id: `${id}-${index}` }))
+        .filter((_, index) => index === selectedTabIndex);
+    return jsxRuntime.jsx("div", { ...props, children: childrenArray });
 };
-export {
-  x as TabPanel,
-  f as TabPanels
+const TabPanel = ({ id, ...props }) => {
+    const tabId = `${id}-tab`;
+    const tabPanelId = `${id}-tabpanel`;
+    return jsxRuntime.jsx("div", { id: tabPanelId, role: "tabpanel", tabIndex: 0, "aria-labelledby": tabId, ...props });
 };
+
+exports.TabPanel = TabPanel;
+exports.TabPanels = TabPanels;

package/dist/Tabs/TabPanels.mjs

@@ -0,0 +1,18 @@
+import { jsx } from 'react/jsx-runtime';
+import { Children, cloneElement } from 'react';
+import { useTabs } from './TabsContext.mjs';
+
+const TabPanels = ({ children, ...props }) => {
+    const { id, selectedTabIndex } = useTabs();
+    const childrenArray = Children.toArray(children)
+        .map((node, index) => cloneElement(node, { id: `${id}-${index}` }))
+        .filter((_, index) => index === selectedTabIndex);
+    return jsx("div", { ...props, children: childrenArray });
+};
+const TabPanel = ({ id, ...props }) => {
+    const tabId = `${id}-tab`;
+    const tabPanelId = `${id}-tabpanel`;
+    return jsx("div", { id: tabPanelId, role: "tabpanel", tabIndex: 0, "aria-labelledby": tabId, ...props });
+};
+
+export { TabPanel, TabPanels };