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

package/dist/RawTable/RawTbody.js

@@ -1,9 +1,22 @@
-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 });
-};
-export {
-  s as RawTbody
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+
+const RawTbody = ({ children, ...props }) => {
+    /**
+     * aria-rowindex is 1-based: we have to start from 1
+     * since the <tr><th></th></tr> elements count as 1 row, we have to increment the index by 2 (because of the base 1 AND the th)
+     */
+    const childrenClone = React.Children.toArray(children).map((child, index) => {
+        if (React.isValidElement(child)) {
+            return React.cloneElement(child, { 'aria-rowindex': index + 2 });
+        }
+        return child;
+    });
+    return jsxRuntime.jsx("tbody", { ...props, children: childrenClone });
 };
+
+exports.RawTbody = RawTbody;

package/dist/RawTable/RawTbody.mjs

@@ -0,0 +1,18 @@
+import { jsx } from 'react/jsx-runtime';
+import { Children, isValidElement, cloneElement } from 'react';
+
+const RawTbody = ({ children, ...props }) => {
+    /**
+     * aria-rowindex is 1-based: we have to start from 1
+     * since the <tr><th></th></tr> elements count as 1 row, we have to increment the index by 2 (because of the base 1 AND the th)
+     */
+    const childrenClone = Children.toArray(children).map((child, index) => {
+        if (isValidElement(child)) {
+            return cloneElement(child, { 'aria-rowindex': index + 2 });
+        }
+        return child;
+    });
+    return jsx("tbody", { ...props, children: childrenClone });
+};
+
+export { RawTbody };

package/dist/RawTable/RawThead.js

@@ -1,9 +1,21 @@
-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 });
-};
-export {
-  p as RawThead
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+
+const RawThead = ({ children, ...props }) => {
+    /**
+     * aria-rowindex is 1-based: we have to start from 1
+     */
+    const childrenClone = React.Children.toArray(children).map((child) => {
+        if (React.isValidElement(child)) {
+            return React.cloneElement(child, { 'aria-rowindex': 1 });
+        }
+        return child;
+    });
+    return jsxRuntime.jsx("thead", { ...props, children: childrenClone });
 };
+
+exports.RawThead = RawThead;

package/dist/RawTable/RawThead.mjs

@@ -0,0 +1,17 @@
+import { jsx } from 'react/jsx-runtime';
+import { Children, isValidElement, cloneElement } from 'react';
+
+const RawThead = ({ children, ...props }) => {
+    /**
+     * aria-rowindex is 1-based: we have to start from 1
+     */
+    const childrenClone = Children.toArray(children).map((child) => {
+        if (isValidElement(child)) {
+            return cloneElement(child, { 'aria-rowindex': 1 });
+        }
+        return child;
+    });
+    return jsx("thead", { ...props, children: childrenClone });
+};
+
+export { RawThead };

package/dist/RawTable/RawTr.js

@@ -1,13 +1,22 @@
-import { jsx as i } from "react/jsx-runtime";
-import { Children as a, isValidElement as m, cloneElement as l } from "react";
-import { Box as c } from "../Box/Box.js";
-const x = ({ children: n, ...o }) => {
-  const t = a.toArray(n).map((r, e) => m(r) ? l(r, {
-    "aria-colindex": e + 1,
-    coords: { col: e + 1, row: o["aria-rowindex"] }
-  }) : r);
-  return i(c, { as: "tr", ...o, children: t });
-};
-export {
-  x as RawTr
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const Box = require('../Box/Box.js');
+
+const RawTr = ({ children, ...props }) => {
+    const childrenClone = React.Children.toArray(children).map((child, index) => {
+        if (React.isValidElement(child)) {
+            return React.cloneElement(child, {
+                'aria-colindex': index + 1,
+                coords: { col: index + 1, row: props['aria-rowindex'] },
+            });
+        }
+        return child;
+    });
+    return (jsxRuntime.jsx(Box.Box, { as: "tr", ...props, children: childrenClone }));
 };
+
+exports.RawTr = RawTr;

package/dist/RawTable/RawTr.mjs

@@ -0,0 +1,18 @@
+import { jsx } from 'react/jsx-runtime';
+import { Children, isValidElement, cloneElement } from 'react';
+import { Box } from '../Box/Box.mjs';
+
+const RawTr = ({ children, ...props }) => {
+    const childrenClone = Children.toArray(children).map((child, index) => {
+        if (isValidElement(child)) {
+            return cloneElement(child, {
+                'aria-colindex': index + 1,
+                coords: { col: index + 1, row: props['aria-rowindex'] },
+            });
+        }
+        return child;
+    });
+    return (jsx(Box, { as: "tr", ...props, children: childrenClone }));
+};
+
+export { RawTr };

package/dist/RawTable/focusFocusable.js

@@ -1,7 +1,12 @@
-const c = (o) => {
-  const e = o.querySelector('[tabindex="0"]');
-  e && e.focus();
-};
-export {
-  c as focusFocusable
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const focusFocusable = (node) => {
+    const nextNode = node.querySelector('[tabindex="0"]');
+    if (nextNode) {
+        nextNode.focus();
+    }
 };
+
+exports.focusFocusable = focusFocusable;

package/dist/RawTable/focusFocusable.mjs

@@ -0,0 +1,8 @@
+const focusFocusable = (node) => {
+    const nextNode = node.querySelector('[tabindex="0"]');
+    if (nextNode) {
+        nextNode.focus();
+    }
+};
+
+export { focusFocusable };

package/dist/RawTable/index.js

@@ -1,13 +1,18 @@
-import { RawTable as a } from "./RawTable.js";
-import { RawTd as w, RawTh as R } from "./RawCell.js";
-import { RawThead as f } from "./RawThead.js";
-import { RawTbody as p } from "./RawTbody.js";
-import { RawTr as x } from "./RawTr.js";
-export {
-  a as RawTable,
-  p as RawTbody,
-  w as RawTd,
-  R as RawTh,
-  f as RawThead,
-  x as RawTr
-};
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const RawTable = require('./RawTable.js');
+const RawCell = require('./RawCell.js');
+const RawThead = require('./RawThead.js');
+const RawTbody = require('./RawTbody.js');
+const RawTr = require('./RawTr.js');
+
+
+
+exports.RawTable = RawTable.RawTable;
+exports.RawTd = RawCell.RawTd;
+exports.RawTh = RawCell.RawTh;
+exports.RawThead = RawThead.RawThead;
+exports.RawTbody = RawTbody.RawTbody;
+exports.RawTr = RawTr.RawTr;

package/dist/RawTable/index.mjs

@@ -0,0 +1,5 @@
+export { RawTable } from './RawTable.mjs';
+export { RawTd, RawTh } from './RawCell.mjs';
+export { RawThead } from './RawThead.mjs';
+export { RawTbody } from './RawTbody.mjs';
+export { RawTr } from './RawTr.mjs';

package/dist/Searchbar/SearchForm.js

@@ -1,5 +1,9 @@
-import { jsx as o } from "react/jsx-runtime";
-const m = (r) => o("form", { ...r, role: "search" });
-export {
-  m as SearchForm
-};
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+
+const SearchForm = (props) => jsxRuntime.jsx("form", { ...props, role: "search" });
+
+exports.SearchForm = SearchForm;

package/dist/Searchbar/SearchForm.mjs

@@ -0,0 +1,5 @@
+import { jsx } from 'react/jsx-runtime';
+
+const SearchForm = (props) => jsx("form", { ...props, role: "search" });
+
+export { SearchForm };

package/dist/Searchbar/Searchbar.js

@@ -1,47 +1,62 @@
-import { jsx as o, jsxs as $ } from "react/jsx-runtime";
-import { forwardRef as R, useRef as S } from "react";
-import { Cross as w, Search as x } from "@strapi/icons";
-import e from "styled-components";
-import { composeRefs as C } from "../hooks/useComposeRefs.js";
-import { inputFocusStyle as F } from "../themes/utils.js";
-import { InputWrapper as n, FieldInput as y } from "../Field/FieldInput.js";
-import { FieldAction as I } from "../Field/FieldAction.js";
-import { Field as z } from "../Field/Field.js";
-import { VisuallyHidden as A } from "../VisuallyHidden/VisuallyHidden.js";
-import { FieldLabel as g } from "../Field/FieldLabel.js";
-const j = e(w)`
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const icons = require('@strapi/icons');
+const styled = require('styled-components');
+const useComposeRefs = require('../hooks/useComposeRefs.js');
+const utils = require('../themes/utils.js');
+const FieldInput = require('../Field/FieldInput.js');
+const FieldAction = require('../Field/FieldAction.js');
+const Field = require('../Field/Field.js');
+const VisuallyHidden = require('../VisuallyHidden/VisuallyHidden.js');
+const FieldLabel = require('../Field/FieldLabel.js');
+
+const _interopDefault = e => e && e.__esModule ? e : { default: e };
+
+const styled__default = /*#__PURE__*/_interopDefault(styled);
+
+const CloseIcon = styled__default.default(icons.Cross) `
   font-size: 0.5rem;
   path {
-    fill: ${({ theme: r }) => r.colors.neutral400};
+    fill: ${({ theme }) => theme.colors.neutral400};
   }
-`, l = e(x)`
+`;
+const SearchIcon = styled__default.default(icons.Search) `
   font-size: 0.8rem;
   path {
-    fill: ${({ theme: r }) => r.colors.neutral800};
+    fill: ${({ theme }) => theme.colors.neutral800};
   }
-`, W = e.div`
-  border-radius: ${({ theme: r }) => r.borderRadius};
-  box-shadow: ${({ theme: r }) => r.shadows.filterShadow};
+`;
+const SearchbarWrapper = styled__default.default.div `
+  border-radius: ${({ theme }) => theme.borderRadius};
+  box-shadow: ${({ theme }) => theme.shadows.filterShadow};
 
   &:focus-within {
-    ${l} {
+    ${SearchIcon} {
       path {
-        fill: ${({ theme: r }) => r.colors.primary600};
+        fill: ${({ theme }) => theme.colors.primary600};
       }
     }
   }
 
-  ${n} {
+  ${FieldInput.InputWrapper} {
     border: 1px solid transparent;
   }
 
-  ${F(n)}
-`, J = R(({ name: r, size: s = "M", children: a, value: t = "", onClear: c, clearLabel: d, ...m }, p) => {
-  const i = S(null), f = t.length > 0, h = (b) => {
-    c(b), i.current.focus();
-  }, u = C(p, i);
-  return o(W, { children: $(z, { name: r, children: [o(A, { children: o(g, { children: a }) }), o(y, { ref: u, value: t, startAction: o(l, { "aria-hidden": !0 }), size: s, endAction: f ? o(I, { label: d, onClick: h, children: o(j, {}) }) : void 0, ...m })] }) });
+  ${utils.inputFocusStyle(FieldInput.InputWrapper)}
+`;
+const Searchbar = React.forwardRef(({ name, size = 'M', children, value = '', onClear, clearLabel, ...props }, ref) => {
+    const inputRef = React.useRef(null);
+    const isCompleting = value.length > 0;
+    const handleClear = (e) => {
+        onClear(e);
+        inputRef.current.focus();
+    };
+    const actualRef = useComposeRefs.composeRefs(ref, inputRef);
+    return (jsxRuntime.jsx(SearchbarWrapper, { children: jsxRuntime.jsxs(Field.Field, { name: name, children: [jsxRuntime.jsx(VisuallyHidden.VisuallyHidden, { children: jsxRuntime.jsx(FieldLabel.FieldLabel, { children: children }) }), jsxRuntime.jsx(FieldInput.FieldInput, { ref: actualRef, value: value, startAction: jsxRuntime.jsx(SearchIcon, { "aria-hidden": true }), size: size, endAction: isCompleting ? (jsxRuntime.jsx(FieldAction.FieldAction, { label: clearLabel, onClick: handleClear, children: jsxRuntime.jsx(CloseIcon, {}) })) : undefined, ...props })] }) }));
 });
-export {
-  J as Searchbar
-};
+
+exports.Searchbar = Searchbar;

package/dist/Searchbar/Searchbar.mjs

@@ -0,0 +1,54 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef, useRef } from 'react';
+import { Cross, Search } from '@strapi/icons';
+import styled from 'styled-components';
+import { composeRefs } from '../hooks/useComposeRefs.mjs';
+import { inputFocusStyle } from '../themes/utils.mjs';
+import { InputWrapper, FieldInput } from '../Field/FieldInput.mjs';
+import { FieldAction } from '../Field/FieldAction.mjs';
+import { Field } from '../Field/Field.mjs';
+import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.mjs';
+import { FieldLabel } from '../Field/FieldLabel.mjs';
+
+const CloseIcon = styled(Cross) `
+  font-size: 0.5rem;
+  path {
+    fill: ${({ theme }) => theme.colors.neutral400};
+  }
+`;
+const SearchIcon = styled(Search) `
+  font-size: 0.8rem;
+  path {
+    fill: ${({ theme }) => theme.colors.neutral800};
+  }
+`;
+const SearchbarWrapper = styled.div `
+  border-radius: ${({ theme }) => theme.borderRadius};
+  box-shadow: ${({ theme }) => theme.shadows.filterShadow};
+
+  &:focus-within {
+    ${SearchIcon} {
+      path {
+        fill: ${({ theme }) => theme.colors.primary600};
+      }
+    }
+  }
+
+  ${InputWrapper} {
+    border: 1px solid transparent;
+  }
+
+  ${inputFocusStyle(InputWrapper)}
+`;
+const Searchbar = forwardRef(({ name, size = 'M', children, value = '', onClear, clearLabel, ...props }, ref) => {
+    const inputRef = useRef(null);
+    const isCompleting = value.length > 0;
+    const handleClear = (e) => {
+        onClear(e);
+        inputRef.current.focus();
+    };
+    const actualRef = composeRefs(ref, inputRef);
+    return (jsx(SearchbarWrapper, { children: jsxs(Field, { name: name, children: [jsx(VisuallyHidden, { children: jsx(FieldLabel, { children: children }) }), jsx(FieldInput, { ref: actualRef, value: value, startAction: jsx(SearchIcon, { "aria-hidden": true }), size: size, endAction: isCompleting ? (jsx(FieldAction, { label: clearLabel, onClick: handleClear, children: jsx(CloseIcon, {}) })) : undefined, ...props })] }) }));
+});
+
+export { Searchbar };

package/dist/Searchbar/index.js

@@ -1,6 +1,11 @@
-import { Searchbar as e } from "./Searchbar.js";
-import { SearchForm as m } from "./SearchForm.js";
-export {
-  m as SearchForm,
-  e as Searchbar
-};
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const Searchbar = require('./Searchbar.js');
+const SearchForm = require('./SearchForm.js');
+
+
+
+exports.Searchbar = Searchbar.Searchbar;
+exports.SearchForm = SearchForm.SearchForm;

package/dist/Searchbar/index.mjs

@@ -0,0 +1,2 @@
+export { Searchbar } from './Searchbar.mjs';
+export { SearchForm } from './SearchForm.mjs';