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

package/dist/Field/FieldInput.js

@@ -1,39 +1,59 @@
-import { jsxs as y, jsx as a } from "react/jsx-runtime";
-import { forwardRef as w } from "react";
-import p, { css as R } from "styled-components";
-import { useField as I } from "./FieldContext.js";
-import { inputFocusStyle as k } from "../themes/utils.js";
-import { Box as l } from "../Box/Box.js";
-import { Flex as B } from "../Flex/Flex.js";
-const c = {
-  S: 6.5,
-  M: 10.5
-}, M = w(({ endAction: r, startAction: o, disabled: e = !1, onChange: d, size: u = "M", ...f }, $) => {
-  const { id: i, error: t, hint: h, name: g, required: m } = I();
-  let n;
-  t ? n = `${i}-error` : h && (n = `${i}-hint`);
-  const s = !!t, b = (x) => {
-    !e && d && d(x);
-  };
-  return y(j, { justifyContent: "space-between", hasError: s, disabled: e, children: [o ? a(l, { paddingLeft: 3, paddingRight: 2, children: o }) : null, a(F, { id: i, name: g, ref: $, "aria-describedby": n, "aria-invalid": s, "aria-disabled": e, disabled: e, "data-disabled": e ? "" : void 0, hasLeftAction: !!o, hasRightAction: !!r, onChange: b, "aria-required": m, $size: u, ...f }), r ? a(l, { paddingLeft: 2, paddingRight: 3, children: r }) : null] });
-}), F = p.input`
+'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 FieldContext = require('./FieldContext.js');
+const utils = require('../themes/utils.js');
+const Box = require('../Box/Box.js');
+const Flex = require('../Flex/Flex.js');
+
+const _interopDefault = e => e && e.__esModule ? e : { default: e };
+
+const styled__default = /*#__PURE__*/_interopDefault(styled);
+
+// padding-[top|bottom] must ensure, the input matches the height of getThemeSize('input')
+const PADDING_Y = {
+    S: 6.5,
+    M: 10.5,
+};
+const FieldInput = React.forwardRef(({ endAction, startAction, disabled = false, onChange, size = 'M', ...props }, ref) => {
+    const { id, error, hint, name, required } = FieldContext.useField();
+    let ariaDescription;
+    if (error) {
+        ariaDescription = `${id}-error`;
+    }
+    else if (hint) {
+        ariaDescription = `${id}-hint`;
+    }
+    const hasError = Boolean(error);
+    const handleChange = (e) => {
+        if (!disabled && onChange) {
+            onChange(e);
+        }
+    };
+    return (jsxRuntime.jsxs(InputWrapper, { justifyContent: "space-between", hasError: hasError, disabled: disabled, children: [startAction ? (jsxRuntime.jsx(Box.Box, { paddingLeft: 3, paddingRight: 2, children: startAction })) : null, jsxRuntime.jsx(Input, { id: id, name: name, ref: ref, "aria-describedby": ariaDescription, "aria-invalid": hasError, "aria-disabled": disabled, disabled: disabled, "data-disabled": disabled ? '' : undefined, hasLeftAction: Boolean(startAction), hasRightAction: Boolean(endAction), onChange: handleChange, "aria-required": required, "$size": size, ...props }), endAction ? (jsxRuntime.jsx(Box.Box, { paddingLeft: 2, paddingRight: 3, children: endAction })) : null] }));
+});
+const Input = styled__default.default.input `
   border: none;
-  border-radius: ${({ theme: r }) => r.borderRadius};
-  padding-bottom: ${({ $size: r }) => `${c[r] / 16}rem`};
-  padding-left: ${({ theme: r, hasLeftAction: o }) => o ? 0 : r.spaces[4]};
-  padding-right: ${({ theme: r, hasRightAction: o }) => o ? 0 : r.spaces[4]};
-  padding-top: ${({ $size: r }) => `${c[r] / 16}rem`};
-  cursor: ${(r) => r["aria-disabled"] ? "not-allowed" : void 0};
-
-  color: ${({ theme: r }) => r.colors.neutral800};
+  border-radius: ${({ theme }) => theme.borderRadius};
+  padding-bottom: ${({ $size }) => `${PADDING_Y[$size] / 16}rem`};
+  padding-left: ${({ theme, hasLeftAction }) => (hasLeftAction ? 0 : theme.spaces[4])};
+  padding-right: ${({ theme, hasRightAction }) => (hasRightAction ? 0 : theme.spaces[4])};
+  padding-top: ${({ $size }) => `${PADDING_Y[$size] / 16}rem`};
+  cursor: ${(props) => (props['aria-disabled'] ? 'not-allowed' : undefined)};
+
+  color: ${({ theme }) => theme.colors.neutral800};
   font-weight: 400;
-  font-size: ${(r) => r.theme.fontSizes[2]};
+  font-size: ${(props) => props.theme.fontSizes[2]};
   display: block;
   width: 100%;
   background: inherit;
 
   ::placeholder {
-    color: ${({ theme: r }) => r.colors.neutral500};
+    color: ${({ theme }) => theme.colors.neutral500};
     opacity: 1;
   }
 
@@ -46,18 +66,20 @@ const c = {
     outline: none;
     box-shadow: none;
   }
-`, j = p(B)`
-  border: 1px solid ${({ theme: r, hasError: o }) => o ? r.colors.danger600 : r.colors.neutral200};
-  border-radius: ${({ theme: r }) => r.borderRadius};
-  background: ${({ theme: r }) => r.colors.neutral0};
-  ${k()}
-
-  ${({ theme: r, disabled: o }) => o ? R`
-          color: ${r.colors.neutral600};
-          background: ${r.colors.neutral150};
-        ` : void 0}
 `;
-export {
-  M as FieldInput,
-  j as InputWrapper
-};
+const InputWrapper = styled__default.default(Flex.Flex) `
+  border: 1px solid ${({ theme, hasError }) => (hasError ? theme.colors.danger600 : theme.colors.neutral200)};
+  border-radius: ${({ theme }) => theme.borderRadius};
+  background: ${({ theme }) => theme.colors.neutral0};
+  ${utils.inputFocusStyle()}
+
+  ${({ theme, disabled }) => disabled
+    ? styled.css `
+          color: ${theme.colors.neutral600};
+          background: ${theme.colors.neutral150};
+        `
+    : undefined}
+`;
+
+exports.FieldInput = FieldInput;
+exports.InputWrapper = InputWrapper;

package/dist/Field/FieldInput.mjs

@@ -0,0 +1,76 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { useField } from './FieldContext.mjs';
+import { inputFocusStyle } from '../themes/utils.mjs';
+import { Box } from '../Box/Box.mjs';
+import { Flex } from '../Flex/Flex.mjs';
+
+// padding-[top|bottom] must ensure, the input matches the height of getThemeSize('input')
+const PADDING_Y = {
+    S: 6.5,
+    M: 10.5,
+};
+const FieldInput = forwardRef(({ endAction, startAction, disabled = false, onChange, size = 'M', ...props }, ref) => {
+    const { id, error, hint, name, required } = useField();
+    let ariaDescription;
+    if (error) {
+        ariaDescription = `${id}-error`;
+    }
+    else if (hint) {
+        ariaDescription = `${id}-hint`;
+    }
+    const hasError = Boolean(error);
+    const handleChange = (e) => {
+        if (!disabled && onChange) {
+            onChange(e);
+        }
+    };
+    return (jsxs(InputWrapper, { justifyContent: "space-between", hasError: hasError, disabled: disabled, children: [startAction ? (jsx(Box, { paddingLeft: 3, paddingRight: 2, children: startAction })) : null, jsx(Input, { id: id, name: name, ref: ref, "aria-describedby": ariaDescription, "aria-invalid": hasError, "aria-disabled": disabled, disabled: disabled, "data-disabled": disabled ? '' : undefined, hasLeftAction: Boolean(startAction), hasRightAction: Boolean(endAction), onChange: handleChange, "aria-required": required, "$size": size, ...props }), endAction ? (jsx(Box, { paddingLeft: 2, paddingRight: 3, children: endAction })) : null] }));
+});
+const Input = styled.input `
+  border: none;
+  border-radius: ${({ theme }) => theme.borderRadius};
+  padding-bottom: ${({ $size }) => `${PADDING_Y[$size] / 16}rem`};
+  padding-left: ${({ theme, hasLeftAction }) => (hasLeftAction ? 0 : theme.spaces[4])};
+  padding-right: ${({ theme, hasRightAction }) => (hasRightAction ? 0 : theme.spaces[4])};
+  padding-top: ${({ $size }) => `${PADDING_Y[$size] / 16}rem`};
+  cursor: ${(props) => (props['aria-disabled'] ? 'not-allowed' : undefined)};
+
+  color: ${({ theme }) => theme.colors.neutral800};
+  font-weight: 400;
+  font-size: ${(props) => props.theme.fontSizes[2]};
+  display: block;
+  width: 100%;
+  background: inherit;
+
+  ::placeholder {
+    color: ${({ theme }) => theme.colors.neutral500};
+    opacity: 1;
+  }
+
+  &[aria-disabled='true'] {
+    color: inherit;
+  }
+
+  //focus managed by InputWrapper
+  &:focus {
+    outline: none;
+    box-shadow: none;
+  }
+`;
+const InputWrapper = styled(Flex) `
+  border: 1px solid ${({ theme, hasError }) => (hasError ? theme.colors.danger600 : theme.colors.neutral200)};
+  border-radius: ${({ theme }) => theme.borderRadius};
+  background: ${({ theme }) => theme.colors.neutral0};
+  ${inputFocusStyle()}
+
+  ${({ theme, disabled }) => disabled
+    ? css `
+          color: ${theme.colors.neutral600};
+          background: ${theme.colors.neutral150};
+        `
+    : undefined}
+`;
+
+export { FieldInput, InputWrapper };

package/dist/Field/FieldLabel.js

@@ -1,25 +1,48 @@
-import { jsxs as m, jsx as t } from "react/jsx-runtime";
-import { forwardRef as c } from "react";
-import r from "styled-components";
-import { useField as h } from "./FieldContext.js";
-import { once as f } from "../helpers/deprecations.js";
-import { Typography as n } from "../Typography/Typography.js";
-import { Flex as g } from "../Flex/Flex.js";
-const u = f(console.warn), A = c(({ children: e, action: o, required: i, ...l }, s) => {
-  const { id: a, required: d } = h(), p = d || i;
-  return i !== void 0 && u('Deprecation warning: Usage of "required" prop in FieldLabel component is deprecated. This is discouraged and will be removed in the next major release. Please use the Field component to share the required prop.'), m(x, { ref: s, variant: "pi", textColor: "neutral800", htmlFor: a, fontWeight: "bold", as: "label", ...l, children: [e, p && t(y, { textColor: "danger600", children: "*" }), o && t(F, { marginLeft: 1, children: o })] });
-}), x = 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 FieldContext = require('./FieldContext.js');
+const deprecations = require('../helpers/deprecations.js');
+const Typography = require('../Typography/Typography.js');
+const Flex = require('../Flex/Flex.js');
+
+const _interopDefault = e => e && e.__esModule ? e : { default: e };
+
+const styled__default = /*#__PURE__*/_interopDefault(styled);
+
+const warnOnce = deprecations.once(console.warn);
+const FieldLabel = React.forwardRef(({ children, action, required: requiredDeprecatedProp, ...props }, ref) => {
+    const { id, required: requiredField } = FieldContext.useField();
+    const required = requiredField || requiredDeprecatedProp;
+    if (requiredDeprecatedProp !== undefined) {
+        warnOnce('Deprecation warning: Usage of "required" prop in FieldLabel component is deprecated. This is discouraged and will be removed in the next major release. Please use the Field component to share the required prop.');
+    }
+    return (jsxRuntime.jsxs(TypographyFlex, { ref: ref, variant: "pi", textColor: "neutral800", htmlFor: id, fontWeight: "bold", as: "label", ...props, children: [children, required && jsxRuntime.jsx(TypographyAsterisk, { textColor: "danger600", children: "*" }), action && jsxRuntime.jsx(Action, { marginLeft: 1, children: action })] }));
+});
+/**
+ * NOTE!
+ * This is a concious decision to not use the Box component here.
+ * Partially because it must be a span to correctly be picked up,
+ * but also because we don't need to add DOM nesting here when it's
+ * easier to just add a new class.
+ */
+const TypographyFlex = styled__default.default(Typography.Typography) `
   display: flex;
   align-items: center;
-`, y = r(n)`
+`;
+const TypographyAsterisk = styled__default.default(Typography.Typography) `
   line-height: 0;
-`, F = r(g)`
+`;
+const Action = styled__default.default(Flex.Flex) `
   line-height: 0;
 
   svg path {
-    fill: ${({ theme: e }) => e.colors.neutral500};
+    fill: ${({ theme }) => theme.colors.neutral500};
   }
 `;
-export {
-  A as FieldLabel
-};
+
+exports.FieldLabel = FieldLabel;

package/dist/Field/FieldLabel.mjs

@@ -0,0 +1,40 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+import { useField } from './FieldContext.mjs';
+import { once } from '../helpers/deprecations.mjs';
+import { Typography } from '../Typography/Typography.mjs';
+import { Flex } from '../Flex/Flex.mjs';
+
+const warnOnce = once(console.warn);
+const FieldLabel = forwardRef(({ children, action, required: requiredDeprecatedProp, ...props }, ref) => {
+    const { id, required: requiredField } = useField();
+    const required = requiredField || requiredDeprecatedProp;
+    if (requiredDeprecatedProp !== undefined) {
+        warnOnce('Deprecation warning: Usage of "required" prop in FieldLabel component is deprecated. This is discouraged and will be removed in the next major release. Please use the Field component to share the required prop.');
+    }
+    return (jsxs(TypographyFlex, { ref: ref, variant: "pi", textColor: "neutral800", htmlFor: id, fontWeight: "bold", as: "label", ...props, children: [children, required && jsx(TypographyAsterisk, { textColor: "danger600", children: "*" }), action && jsx(Action, { marginLeft: 1, children: action })] }));
+});
+/**
+ * NOTE!
+ * This is a concious decision to not use the Box component here.
+ * Partially because it must be a span to correctly be picked up,
+ * but also because we don't need to add DOM nesting here when it's
+ * easier to just add a new class.
+ */
+const TypographyFlex = styled(Typography) `
+  display: flex;
+  align-items: center;
+`;
+const TypographyAsterisk = styled(Typography) `
+  line-height: 0;
+`;
+const Action = styled(Flex) `
+  line-height: 0;
+
+  svg path {
+    fill: ${({ theme }) => theme.colors.neutral500};
+  }
+`;
+
+export { FieldLabel };

package/dist/Field/index.js

@@ -1,18 +1,23 @@
-import { Field as o } from "./Field.js";
-import { FieldLabel as p } from "./FieldLabel.js";
-import { FieldInput as l, InputWrapper as d } from "./FieldInput.js";
-import { FieldHint as F } from "./FieldHint.js";
-import { FieldError as m } from "./FieldError.js";
-import { FieldContext as u, useField as a } from "./FieldContext.js";
-import { FieldAction as b } from "./FieldAction.js";
-export {
-  o as Field,
-  b as FieldAction,
-  u as FieldContext,
-  m as FieldError,
-  F as FieldHint,
-  l as FieldInput,
-  p as FieldLabel,
-  d as InputWrapper,
-  a as useField
-};
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const Field = require('./Field.js');
+const FieldLabel = require('./FieldLabel.js');
+const FieldInput = require('./FieldInput.js');
+const FieldHint = require('./FieldHint.js');
+const FieldError = require('./FieldError.js');
+const FieldContext = require('./FieldContext.js');
+const FieldAction = require('./FieldAction.js');
+
+
+
+exports.Field = Field.Field;
+exports.FieldLabel = FieldLabel.FieldLabel;
+exports.FieldInput = FieldInput.FieldInput;
+exports.InputWrapper = FieldInput.InputWrapper;
+exports.FieldHint = FieldHint.FieldHint;
+exports.FieldError = FieldError.FieldError;
+exports.FieldContext = FieldContext.FieldContext;
+exports.useField = FieldContext.useField;
+exports.FieldAction = FieldAction.FieldAction;

package/dist/Field/index.mjs

@@ -0,0 +1,7 @@
+export { Field } from './Field.mjs';
+export { FieldLabel } from './FieldLabel.mjs';
+export { FieldInput, InputWrapper } from './FieldInput.mjs';
+export { FieldHint } from './FieldHint.mjs';
+export { FieldError } from './FieldError.mjs';
+export { FieldContext, useField } from './FieldContext.mjs';
+export { FieldAction } from './FieldAction.mjs';

package/dist/Flex/Flex.js

@@ -1,19 +1,31 @@
-import i from "styled-components";
-import r from "../helpers/handleResponsiveValues.js";
-import { Box as t } from "../Box/Box.js";
-const n = {
-  direction: !0
-}, a = i(t).withConfig({
-  shouldForwardProp: (e, o) => !n[e] && o(e)
-})`
-  align-items: ${({ alignItems: e = "center" }) => e};
-  display: ${({ display: e = "flex", inline: o }) => o ? "inline-flex" : e};
-  flex-direction: ${({ direction: e = "row" }) => e};
-  flex-shrink: ${({ shrink: e }) => e};
-  flex-wrap: ${({ wrap: e }) => e};
-  ${({ gap: e, theme: o }) => r("gap", e, o)};
-  justify-content: ${({ justifyContent: e }) => e};
-`;
-export {
-  a as Flex
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const styled = require('styled-components');
+const handleResponsiveValues = require('../helpers/handleResponsiveValues.js');
+const Box = require('../Box/Box.js');
+
+const _interopDefault = e => e && e.__esModule ? e : { default: e };
+
+const styled__default = /*#__PURE__*/_interopDefault(styled);
+
+/**
+ * Prevents these attributes from being spread on the DOM node
+ */
+const transientProps = {
+    direction: true,
 };
+const Flex = styled__default.default(Box.Box).withConfig({
+    shouldForwardProp: (prop, defPropValFN) => !transientProps[prop] && defPropValFN(prop),
+}) `
+  align-items: ${({ alignItems = 'center' }) => alignItems};
+  display: ${({ display = 'flex', inline }) => (inline ? 'inline-flex' : display)};
+  flex-direction: ${({ direction = 'row' }) => direction};
+  flex-shrink: ${({ shrink }) => shrink};
+  flex-wrap: ${({ wrap }) => wrap};
+  ${({ gap, theme }) => handleResponsiveValues('gap', gap, theme)};
+  justify-content: ${({ justifyContent }) => justifyContent};
+`;
+
+exports.Flex = Flex;

package/dist/Flex/Flex.mjs

@@ -0,0 +1,23 @@
+import styled from 'styled-components';
+import handleResponsiveValues from '../helpers/handleResponsiveValues.mjs';
+import { Box } from '../Box/Box.mjs';
+
+/**
+ * Prevents these attributes from being spread on the DOM node
+ */
+const transientProps = {
+    direction: true,
+};
+const Flex = styled(Box).withConfig({
+    shouldForwardProp: (prop, defPropValFN) => !transientProps[prop] && defPropValFN(prop),
+}) `
+  align-items: ${({ alignItems = 'center' }) => alignItems};
+  display: ${({ display = 'flex', inline }) => (inline ? 'inline-flex' : display)};
+  flex-direction: ${({ direction = 'row' }) => direction};
+  flex-shrink: ${({ shrink }) => shrink};
+  flex-wrap: ${({ wrap }) => wrap};
+  ${({ gap, theme }) => handleResponsiveValues('gap', gap, theme)};
+  justify-content: ${({ justifyContent }) => justifyContent};
+`;
+
+export { Flex };

package/dist/Flex/index.js

@@ -1,4 +1,9 @@
-import { Flex as r } from "./Flex.js";
-export {
-  r as Flex
-};
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const Flex = require('./Flex.js');
+
+
+
+exports.Flex = Flex.Flex;

package/dist/Flex/index.mjs

@@ -0,0 +1 @@
+export { Flex } from './Flex.mjs';

package/dist/FocusTrap/FocusTrap.js

@@ -1,33 +1,69 @@
-import { jsx as a } from "react/jsx-runtime";
-import { useRef as m, useEffect as l } from "react";
-import { getFocusableNodes as u } from "../helpers/getFocusableNodes.js";
-import { KeyboardKeys as c } from "../helpers/keyboardKeys.js";
-const v = ({ onEscape: r, restoreFocus: o = !0, ...i }) => {
-  const n = m(null);
-  return l(() => {
-    let e = null;
-    return o && (e = document.activeElement), () => {
-      e && e.focus();
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const getFocusableNodes = require('../helpers/getFocusableNodes.js');
+const keyboardKeys = require('../helpers/keyboardKeys.js');
+
+const FocusTrap = ({ onEscape, restoreFocus = true, ...props }) => {
+    const trappedRef = React.useRef(null);
+    /**
+     * Restore the focus to the previously focused element (often, it's the CTA that opened the trap)
+     */
+    React.useEffect(() => {
+        let currentFocus = null;
+        if (restoreFocus) {
+            currentFocus = document.activeElement;
+        }
+        return () => {
+            if (currentFocus) {
+                currentFocus.focus();
+            }
+        };
+    }, [restoreFocus]);
+    /**
+     * Sends the focus to the first element of the focus trap tree
+     */
+    React.useEffect(() => {
+        if (!trappedRef.current)
+            return;
+        const focusableChildren = getFocusableNodes.getFocusableNodes(trappedRef.current);
+        if (focusableChildren.length > 0) {
+            const firstElement = focusableChildren[0];
+            firstElement.focus();
+        }
+        else {
+            console.warn('[FocusTrap]: it seems there are no focusable elements in the focus trap tree. Make sure there s at least one.');
+        }
+    }, []);
+    const handleKeyDown = (e) => {
+        if (e.key === keyboardKeys.KeyboardKeys.ESCAPE && onEscape) {
+            onEscape();
+            return;
+        }
+        if (e.key !== keyboardKeys.KeyboardKeys.TAB)
+            return;
+        const focusableChildren = getFocusableNodes.getFocusableNodes(trappedRef.current);
+        if (focusableChildren.length > 0) {
+            const firstElement = focusableChildren[0];
+            const lastElement = focusableChildren[focusableChildren.length - 1];
+            // e.shiftKey allows to verify reverse tab
+            if (e.shiftKey) {
+                if (firstElement === document.activeElement) {
+                    e.preventDefault();
+                    lastElement.focus();
+                }
+            }
+            else if (lastElement === document.activeElement) {
+                e.preventDefault();
+                firstElement.focus();
+            }
+        }
     };
-  }, [o]), l(() => {
-    if (!n.current)
-      return;
-    const e = u(n.current);
-    e.length > 0 ? e[0].focus() : console.warn("[FocusTrap]: it seems there are no focusable elements in the focus trap tree. Make sure there s at least one.");
-  }, []), a("div", { ref: n, onKeyDown: (e) => {
-    if (e.key === c.ESCAPE && r) {
-      r();
-      return;
-    }
-    if (e.key !== c.TAB)
-      return;
-    const t = u(n.current);
-    if (t.length > 0) {
-      const s = t[0], f = t[t.length - 1];
-      e.shiftKey ? s === document.activeElement && (e.preventDefault(), f.focus()) : f === document.activeElement && (e.preventDefault(), s.focus());
-    }
-  }, ...i });
-};
-export {
-  v as FocusTrap
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    return jsxRuntime.jsx("div", { ref: trappedRef, onKeyDown: handleKeyDown, ...props });
 };
+
+exports.FocusTrap = FocusTrap;

package/dist/FocusTrap/FocusTrap.mjs

@@ -0,0 +1,65 @@
+import { jsx } from 'react/jsx-runtime';
+import { useRef, useEffect } from 'react';
+import { getFocusableNodes } from '../helpers/getFocusableNodes.mjs';
+import { KeyboardKeys } from '../helpers/keyboardKeys.mjs';
+
+const FocusTrap = ({ onEscape, restoreFocus = true, ...props }) => {
+    const trappedRef = useRef(null);
+    /**
+     * Restore the focus to the previously focused element (often, it's the CTA that opened the trap)
+     */
+    useEffect(() => {
+        let currentFocus = null;
+        if (restoreFocus) {
+            currentFocus = document.activeElement;
+        }
+        return () => {
+            if (currentFocus) {
+                currentFocus.focus();
+            }
+        };
+    }, [restoreFocus]);
+    /**
+     * Sends the focus to the first element of the focus trap tree
+     */
+    useEffect(() => {
+        if (!trappedRef.current)
+            return;
+        const focusableChildren = getFocusableNodes(trappedRef.current);
+        if (focusableChildren.length > 0) {
+            const firstElement = focusableChildren[0];
+            firstElement.focus();
+        }
+        else {
+            console.warn('[FocusTrap]: it seems there are no focusable elements in the focus trap tree. Make sure there s at least one.');
+        }
+    }, []);
+    const handleKeyDown = (e) => {
+        if (e.key === KeyboardKeys.ESCAPE && onEscape) {
+            onEscape();
+            return;
+        }
+        if (e.key !== KeyboardKeys.TAB)
+            return;
+        const focusableChildren = getFocusableNodes(trappedRef.current);
+        if (focusableChildren.length > 0) {
+            const firstElement = focusableChildren[0];
+            const lastElement = focusableChildren[focusableChildren.length - 1];
+            // e.shiftKey allows to verify reverse tab
+            if (e.shiftKey) {
+                if (firstElement === document.activeElement) {
+                    e.preventDefault();
+                    lastElement.focus();
+                }
+            }
+            else if (lastElement === document.activeElement) {
+                e.preventDefault();
+                firstElement.focus();
+            }
+        }
+    };
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    return jsx("div", { ref: trappedRef, onKeyDown: handleKeyDown, ...props });
+};
+
+export { FocusTrap };

package/dist/FocusTrap/index.js

@@ -1,4 +1,9 @@
-import { FocusTrap as p } from "./FocusTrap.js";
-export {
-  p as FocusTrap
-};
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const FocusTrap = require('./FocusTrap.js');
+
+
+
+exports.FocusTrap = FocusTrap.FocusTrap;

package/dist/FocusTrap/index.mjs

@@ -0,0 +1 @@
+export { FocusTrap } from './FocusTrap.mjs';