@strapi/design-system 1.19.0-typescript.0 → 2.0.0-beta.1

package/dist/SimpleMenu/SimpleMenu.mjs

@@ -1,178 +0,0 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import React__default, { useRef, useEffect, useState, Children, cloneElement } from 'react';
-import { CarretDown } from '@strapi/icons';
-import { useCallbackRef } from '@strapi/ui-primitives';
-import { NavLink } from 'react-router-dom';
-import styled from 'styled-components';
-import { getOptionStyle } from './utils.mjs';
-import { KeyboardKeys } from '../helpers/keyboardKeys.mjs';
-import { useId } from '../hooks/useId.mjs';
-import { Link } from '../Link/Link.mjs';
-import { Button } from '../Button/Button.mjs';
-import { Popover } from '../Popover/Popover.mjs';
-import { Box } from '../Box/Box.mjs';
-import { Typography } from '../Typography/Typography.mjs';
-import { Flex } from '../Flex/Flex.mjs';
-
-const OptionButton = styled.button `
-  border: none;
-  padding: 0;
-  background: transparent;
-  cursor: pointer;
-  ${getOptionStyle}
-`;
-const OptionLink = styled(NavLink) `
-  text-decoration: none;
-  ${getOptionStyle}
-`;
-const OptionExternalLink = styled(Link) `
-  /* Removing Link hover effect */
-  &:hover {
-    color: currentColor;
-  }
-
-  &:focus-visible {
-    /* Removing Link focus-visible after properties and reset to global outline */
-    outline: 2px solid ${({ theme }) => theme.colors.primary600};
-    outline-offset: 2px;
-    &:after {
-      content: none;
-    }
-  }
-
-  ${getOptionStyle}
-`;
-const IconWrapper = styled.span `
-  display: flex;
-  align-items: center;
-  svg {
-    height: 4px;
-    width: 6px;
-  }
-`;
-const StyledButtonSmall = styled(Button) `
-  padding: ${({ theme }) => `${theme.spaces[1]} ${theme.spaces[3]}`};
-`;
-const MenuItem = ({ children, onClick = () => { }, to, isFocused = false, href, ...props }) => {
-    const menuItemRef = useRef();
-    useEffect(() => {
-        if (isFocused && menuItemRef.current) {
-            menuItemRef.current.focus();
-        }
-    }, [isFocused]);
-    const menuItemProps = {
-        tabIndex: isFocused ? 0 : -1,
-        ref: menuItemRef,
-        role: 'menuitem',
-        ...props,
-    };
-    const handleKeyDown = (e) => {
-        if (e.key === KeyboardKeys.SPACE || e.key === KeyboardKeys.ENTER) {
-            onClick();
-        }
-    };
-    if (to && !href) {
-        return (jsx(OptionLink, { to: to, ...menuItemProps, children: jsx(Box, { padding: 2, children: jsx(Typography, { children: children }) }) }));
-    }
-    if (href && !to) {
-        return (jsx(OptionExternalLink, { isExternal: true, href: href, ...menuItemProps, children: jsx(Box, { padding: 2, children: jsx(Typography, { children: children }) }) }));
-    }
-    return (jsx(OptionButton, { onKeyDown: handleKeyDown, onMouseDown: onClick, type: "button", ...menuItemProps, children: jsx(Box, { padding: 2, children: jsx(Typography, { children: children }) }) }));
-};
-const SimpleMenu = ({ label, children, id, as: asComp, onOpen = () => { }, onClose = () => { }, size = 'M', popoverPlacement = 'bottom-start', onReachEnd, ...props }) => {
-    const menuButtonRef = useRef(undefined);
-    const menuId = useId(id);
-    const didMount = useRef(false);
-    const [visible, setVisible] = useState(false);
-    const [focusedItemIndex, setFocusItem] = useState(0);
-    const childrenArray = Children.toArray(children);
-    const DefaultComponent = size === 'S' ? StyledButtonSmall : Button;
-    const Component = asComp || DefaultComponent;
-    const shouldHandleReachEnd = !!onReachEnd && typeof onReachEnd === 'function';
-    useEffect(() => {
-        if (['string', 'number'].includes(typeof label)) {
-            // Useful to focus the selected item in the list
-            const defaultItemIndexToFocus = childrenArray.findIndex((c) => (React__default.isValidElement(c) && c.props.children === label) || c === label);
-            if (defaultItemIndexToFocus !== -1) {
-                setFocusItem(defaultItemIndexToFocus);
-            }
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [label]);
-    const handleOpen = useCallbackRef(onOpen);
-    const handleClose = useCallbackRef(onClose);
-    useEffect(() => {
-        if (didMount?.current) {
-            if (visible) {
-                handleOpen();
-            }
-            else {
-                handleClose();
-            }
-        }
-        else {
-            didMount.current = true;
-        }
-    }, [didMount, handleClose, handleOpen, visible]);
-    /* in case `label` is a custom react component, we know it is going to be
-        a child of the menu button.
-    */
-    useEffect(() => {
-        if (React__default.isValidElement(label) && focusedItemIndex === -1) {
-            menuButtonRef.current.focus();
-        }
-    }, [label, focusedItemIndex]);
-    const handleWrapperKeyDown = (e) => {
-        if (visible) {
-            if (e.key === KeyboardKeys.ESCAPE) {
-                e.stopPropagation();
-                setVisible(false);
-                menuButtonRef.current.focus();
-            }
-            if (e.key === KeyboardKeys.DOWN) {
-                setFocusItem((prev) => (prev === childrenArray.length - 1 ? 0 : prev + 1));
-            }
-            if (e.key === KeyboardKeys.UP) {
-                setFocusItem((prev) => (prev === 0 ? childrenArray.length - 1 : prev - 1));
-            }
-        }
-    };
-    const handleKeyDown = (e) => {
-        if (e.key === KeyboardKeys.ENTER || e.key === KeyboardKeys.SPACE) {
-            setVisible((prevVisible) => !prevVisible);
-        }
-    };
-    const handleBlur = (e) => {
-        e.preventDefault();
-        if (!e.currentTarget.contains(e.relatedTarget)) {
-            setVisible(false);
-        }
-    };
-    const handleMenuButtonMouseDown = (e) => {
-        e.preventDefault();
-        setVisible((prevVisible) => !prevVisible);
-    };
-    const handleReachEnd = () => {
-        if (shouldHandleReachEnd) {
-            onReachEnd();
-        }
-    };
-    const childrenClone = childrenArray.map((child, index) => (
-    // eslint-disable-next-line react/no-array-index-key
-    jsx(Flex, { as: "li", justifyContent: "center", role: "menuitem", children: React__default.isValidElement(child)
-            ? cloneElement(child, {
-                onClick() {
-                    child.props.onClick();
-                    setVisible(false);
-                    menuButtonRef.current.focus();
-                },
-                isFocused: focusedItemIndex === index,
-            })
-            : child }, index)));
-    return (
-    // TODO: review why we need to eslint it and how to solve this issue.
-    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-    jsxs("div", { onKeyDown: handleWrapperKeyDown, children: [jsx(Component, { label: React__default.isValidElement(label) ? null : label, "aria-haspopup": true, "aria-expanded": visible, "aria-controls": menuId, onKeyDown: handleKeyDown, onMouseDown: handleMenuButtonMouseDown, ref: menuButtonRef, type: "button", variant: "ghost", endIcon: jsx(IconWrapper, { children: jsx(CarretDown, { "aria-hidden": true }) }), ...props, children: label }), visible && (jsx(Popover, { onBlur: handleBlur, placement: popoverPlacement, source: menuButtonRef, onReachEnd: handleReachEnd, intersectionId: shouldHandleReachEnd ? `popover-${menuId}` : undefined, spacing: 4, children: jsx(Box, { role: "menu", as: "ul", padding: 1, id: menuId, children: childrenClone }) }))] }));
-};
-
-export { MenuItem, SimpleMenu };

package/dist/SimpleMenu/__tests__/SimpleMenu.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/SimpleMenu/index.js

@@ -1,10 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const SimpleMenu = require('./SimpleMenu.js');
-
-
-
-exports.MenuItem = SimpleMenu.MenuItem;
-exports.SimpleMenu = SimpleMenu.SimpleMenu;

package/dist/SimpleMenu/index.mjs

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

package/dist/SimpleMenu/utils.d.ts

@@ -1,3 +0,0 @@
-export declare const getOptionStyle: ({ theme }: {
-    theme: any;
-}) => string;

package/dist/SimpleMenu/utils.js

@@ -1,18 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const getOptionStyle = ({ theme }) => `
-    text-align: left;
-    width: 100%;
-    color: ${theme.colors.neutral800};
-    border-radius: ${theme.borderRadius};
-    &:focus {
-        background-color: ${theme.colors.primary100};
-    }
-    &:not([aria-disabled]):hover {
-        background-color: ${theme.colors.primary100};
-    }
-`;
-
-exports.getOptionStyle = getOptionStyle;

package/dist/SimpleMenu/utils.mjs

@@ -1,14 +0,0 @@
-const getOptionStyle = ({ theme }) => `
-    text-align: left;
-    width: 100%;
-    color: ${theme.colors.neutral800};
-    border-radius: ${theme.borderRadius};
-    &:focus {
-        background-color: ${theme.colors.primary100};
-    }
-    &:not([aria-disabled]):hover {
-        background-color: ${theme.colors.primary100};
-    }
-`;
-
-export { getOptionStyle };

package/dist/Stack/Stack.d.ts

@@ -1,20 +0,0 @@
-import { DefaultTheme } from 'styled-components';
-import { FlexProps } from '../Flex';
-export interface StackProps extends FlexProps {
-    /**
-     * If `true`, align the `Stack` item horizontally.
-     */
-    horizontal?: boolean;
-    /**
-     * @preserve
-     * @deprecated use `spacing` instead
-     * The space between stack item.
-     */
-    size?: keyof DefaultTheme['spaces'];
-    /**
-     * The space between stack item.
-     * See [theme.spaces](https://design-system-git-main-strapijs.vercel.app/?path=/story/design-system-components-theme--spaces)
-     */
-    spacing?: keyof DefaultTheme['spaces'];
-}
-export declare const Stack: import("react").ForwardRefExoticComponent<StackProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/Stack/Stack.js

@@ -1,57 +0,0 @@
-'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 theme = require('../helpers/theme.js');
-const Flex = require('../Flex/Flex.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 = {
-    size: true,
-    spacing: true,
-};
-const StackV = styled__default.default(Flex.Flex).withConfig({
-    shouldForwardProp: (prop, defPropValFN) => !transientProps[prop] && defPropValFN(prop),
-}) `
-  & > * {
-    margin-top: 0;
-    margin-bottom: 0;
-  }
-
-  & > * + * {
-    margin-top: ${({ theme: theme$1, spacing }) => theme.extractStyleFromTheme(theme$1.spaces, spacing, undefined)};
-  }
-`;
-const StackH = styled__default.default(Flex.Flex).withConfig({
-    shouldForwardProp: (prop, defPropValFN) => !transientProps[prop] && defPropValFN(prop),
-}) `
-  & > * {
-    margin-left: 0;
-    margin-right: 0;
-  }
-
-  & > * + * {
-    margin-left: ${({ theme: theme$1, spacing }) => theme.extractStyleFromTheme(theme$1.spaces, spacing, undefined)};
-  }
-`;
-const Stack = React.forwardRef(({ horizontal = false, spacing, size, ...props }, ref) => {
-    if (size) {
-        console.warn('Deprecation warning: Usage of "size" prop in Stack component is deprecated. This is discouraged and will be removed in the next major release. Please use "spacing" instead');
-    }
-    if (horizontal) {
-        return jsxRuntime.jsx(StackH, { ref: ref, spacing: spacing || size, ...props });
-    }
-    return jsxRuntime.jsx(StackV, { direction: "column", alignItems: "stretch", ref: ref, spacing: spacing || size, ...props });
-});
-Stack.displayName = 'Stack';
-
-exports.Stack = Stack;

package/dist/Stack/Stack.mjs

@@ -1,49 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import styled from 'styled-components';
-import { extractStyleFromTheme } from '../helpers/theme.mjs';
-import { Flex } from '../Flex/Flex.mjs';
-
-/**
- * Prevents these attributes from being spread on the DOM node
- */
-const transientProps = {
-    size: true,
-    spacing: true,
-};
-const StackV = styled(Flex).withConfig({
-    shouldForwardProp: (prop, defPropValFN) => !transientProps[prop] && defPropValFN(prop),
-}) `
-  & > * {
-    margin-top: 0;
-    margin-bottom: 0;
-  }
-
-  & > * + * {
-    margin-top: ${({ theme, spacing }) => extractStyleFromTheme(theme.spaces, spacing, undefined)};
-  }
-`;
-const StackH = styled(Flex).withConfig({
-    shouldForwardProp: (prop, defPropValFN) => !transientProps[prop] && defPropValFN(prop),
-}) `
-  & > * {
-    margin-left: 0;
-    margin-right: 0;
-  }
-
-  & > * + * {
-    margin-left: ${({ theme, spacing }) => extractStyleFromTheme(theme.spaces, spacing, undefined)};
-  }
-`;
-const Stack = forwardRef(({ horizontal = false, spacing, size, ...props }, ref) => {
-    if (size) {
-        console.warn('Deprecation warning: Usage of "size" prop in Stack component is deprecated. This is discouraged and will be removed in the next major release. Please use "spacing" instead');
-    }
-    if (horizontal) {
-        return jsx(StackH, { ref: ref, spacing: spacing || size, ...props });
-    }
-    return jsx(StackV, { direction: "column", alignItems: "stretch", ref: ref, spacing: spacing || size, ...props });
-});
-Stack.displayName = 'Stack';
-
-export { Stack };

package/dist/Stack/index.d.ts

@@ -1 +0,0 @@
-export * from './Stack';

package/dist/Stack/index.js

@@ -1,9 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const Stack = require('./Stack.js');
-
-
-
-exports.Stack = Stack.Stack;

package/dist/Stack/index.mjs

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

package/dist/Status/Status.js

@@ -1,37 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const jsxRuntime = require('react/jsx-runtime');
-const styled = require('styled-components');
-const Box = require('../Box/Box.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 Bullet = styled__default.default.div `
-  margin-right: ${({ theme }) => theme.spaces[3]};
-  width: ${6 / 16}rem;
-  height: ${6 / 16}rem;
-  border-radius: 50%;
-  background: ${({ theme, backgroundColor }) => theme.colors[backgroundColor]};
-`;
-const StatusWrapper = styled__default.default(Box.Box) `
-  ${Typography.Typography} {
-    color: ${({ theme, textColor }) => theme.colors[textColor]};
-  }
-`;
-const Status = ({ variant = 'primary', showBullet = true, size = 'M', children, ...props }) => {
-    const backgroundColor = `${variant}100`;
-    const borderColor = `${variant}200`;
-    const bulletColor = `${variant}600`;
-    const textColor = `${variant}600`;
-    const paddingX = size === 'S' ? 2 : 5;
-    const paddingY = size === 'S' ? 1 : 4;
-    return (jsxRuntime.jsx(StatusWrapper, { borderColor: borderColor, textColor: textColor, background: backgroundColor, hasRadius: true, paddingTop: paddingY, paddingBottom: paddingY, paddingLeft: paddingX, paddingRight: paddingX, ...props, children: showBullet ? (jsxRuntime.jsxs(Flex.Flex, { children: [jsxRuntime.jsx(Bullet, { backgroundColor: bulletColor }), children] })) : (children) }));
-};
-
-exports.Status = Status;

package/dist/Status/Status.mjs

@@ -1,29 +0,0 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import styled from 'styled-components';
-import { Box } from '../Box/Box.mjs';
-import { Typography } from '../Typography/Typography.mjs';
-import { Flex } from '../Flex/Flex.mjs';
-
-const Bullet = styled.div `
-  margin-right: ${({ theme }) => theme.spaces[3]};
-  width: ${6 / 16}rem;
-  height: ${6 / 16}rem;
-  border-radius: 50%;
-  background: ${({ theme, backgroundColor }) => theme.colors[backgroundColor]};
-`;
-const StatusWrapper = styled(Box) `
-  ${Typography} {
-    color: ${({ theme, textColor }) => theme.colors[textColor]};
-  }
-`;
-const Status = ({ variant = 'primary', showBullet = true, size = 'M', children, ...props }) => {
-    const backgroundColor = `${variant}100`;
-    const borderColor = `${variant}200`;
-    const bulletColor = `${variant}600`;
-    const textColor = `${variant}600`;
-    const paddingX = size === 'S' ? 2 : 5;
-    const paddingY = size === 'S' ? 1 : 4;
-    return (jsx(StatusWrapper, { borderColor: borderColor, textColor: textColor, background: backgroundColor, hasRadius: true, paddingTop: paddingY, paddingBottom: paddingY, paddingLeft: paddingX, paddingRight: paddingX, ...props, children: showBullet ? (jsxs(Flex, { children: [jsx(Bullet, { backgroundColor: bulletColor }), children] })) : (children) }));
-};
-
-export { Status };

package/dist/Status/__tests__/Status.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/Status/index.js

@@ -1,9 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const Status = require('./Status.js');
-
-
-
-exports.Status = Status.Status;

package/dist/Status/index.mjs

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

package/dist/SubNav/SubNav.js

@@ -1,29 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const jsxRuntime = require('react/jsx-runtime');
-const styled = require('styled-components');
-const Grid = require('../Grid/Grid.js');
-
-const _interopDefault = e => e && e.__esModule ? e : { default: e };
-
-const styled__default = /*#__PURE__*/_interopDefault(styled);
-
-const subNavWidth = `${232 / 16}rem`;
-const SubNavWrapper = styled__default.default(Grid.Grid) `
-  width: ${subNavWidth};
-  background: ${({ theme }) => theme.colors.neutral100};
-  position: sticky;
-  top: 0;
-  height: 100vh;
-  overflow-y: auto;
-  border-right: 1px solid ${({ theme }) => theme.colors.neutral200};
-  z-index: 1;
-`;
-const SubNav = ({ ariaLabel, ...props }) => {
-    return jsxRuntime.jsx(SubNavWrapper, { "aria-label": ariaLabel, as: "nav", ...props });
-};
-
-exports.SubNav = SubNav;
-exports.subNavWidth = subNavWidth;

package/dist/SubNav/SubNav.mjs

@@ -1,20 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import styled from 'styled-components';
-import { Grid } from '../Grid/Grid.mjs';
-
-const subNavWidth = `${232 / 16}rem`;
-const SubNavWrapper = styled(Grid) `
-  width: ${subNavWidth};
-  background: ${({ theme }) => theme.colors.neutral100};
-  position: sticky;
-  top: 0;
-  height: 100vh;
-  overflow-y: auto;
-  border-right: 1px solid ${({ theme }) => theme.colors.neutral200};
-  z-index: 1;
-`;
-const SubNav = ({ ariaLabel, ...props }) => {
-    return jsx(SubNavWrapper, { "aria-label": ariaLabel, as: "nav", ...props });
-};
-
-export { SubNav, subNavWidth };

package/dist/SubNav/SubNavHeader.js

@@ -1,67 +0,0 @@
-'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 keyboardKeys = require('../helpers/keyboardKeys.js');
-const useId = require('../hooks/useId.js');
-const usePrevious = require('../hooks/usePrevious.js');
-const SearchForm = require('../Searchbar/SearchForm.js');
-const Searchbar = require('../Searchbar/Searchbar.js');
-const Divider = require('../Divider/Divider.js');
-const Box = require('../Box/Box.js');
-const Flex = require('../Flex/Flex.js');
-const Typography = require('../Typography/Typography.js');
-const IconButton = require('../IconButton/IconButton.js');
-
-const _interopDefault = e => e && e.__esModule ? e : { default: e };
-
-const styled__default = /*#__PURE__*/_interopDefault(styled);
-
-const CustomDivider = styled__default.default(Divider.Divider) `
-  width: ${24 / 16}rem;
-  background-color: ${({ theme }) => theme.colors.neutral200};
-`;
-const SubNavHeader = ({ as = 'h2', label, searchLabel = '', searchable, onChange = () => { }, value = '', onClear = () => { }, onSubmit = () => { }, id, }) => {
-    const [isSearchOpen, setSearchOpen] = React.useState(false);
-    const previousSearchOpenValue = usePrevious.usePrevious(isSearchOpen);
-    const clearButtonId = useId.useId(id);
-    const searchRef = React.useRef(null);
-    const searchButtonRef = React.useRef(null);
-    React.useEffect(() => {
-        if (isSearchOpen && searchRef.current) {
-            searchRef.current.focus();
-        }
-        if (previousSearchOpenValue && !isSearchOpen && searchButtonRef.current) {
-            searchButtonRef.current.focus();
-        }
-    }, [isSearchOpen, previousSearchOpenValue]);
-    const toggleSearch = () => {
-        setSearchOpen((isOpen) => !isOpen);
-    };
-    const handleClear = (e) => {
-        onClear(e);
-        if (searchRef?.current) {
-            searchRef.current.focus();
-        }
-    };
-    const handleBlur = (e) => {
-        if (e.relatedTarget?.id !== clearButtonId) {
-            setSearchOpen(false);
-        }
-    };
-    const handleKeyDown = (e) => {
-        if (e.key === keyboardKeys.KeyboardKeys.ESCAPE) {
-            setSearchOpen(false);
-        }
-    };
-    if (isSearchOpen) {
-        return (jsxRuntime.jsxs(Box.Box, { paddingLeft: 4, paddingTop: 5, paddingBottom: 2, paddingRight: 4, children: [jsxRuntime.jsx(SearchForm.SearchForm, { children: jsxRuntime.jsx(Searchbar.Searchbar, { name: "searchbar", value: value, onChange: onChange, placeholder: "e.g: strapi-plugin-abcd", onKeyDown: handleKeyDown, ref: searchRef, onBlur: handleBlur, onClear: handleClear, onSubmit: onSubmit, clearLabel: "Clear", size: "S", children: searchLabel }) }), jsxRuntime.jsx(Box.Box, { paddingLeft: 2, paddingTop: 4, children: jsxRuntime.jsx(CustomDivider, {}) })] }));
-    }
-    return (jsxRuntime.jsxs(Box.Box, { paddingLeft: 6, paddingTop: 6, paddingBottom: 2, paddingRight: 4, children: [jsxRuntime.jsxs(Flex.Flex, { justifyContent: "space-between", alignItems: "flex-start", children: [jsxRuntime.jsx(Typography.Typography, { variant: "beta", as: as, children: label }), searchable && (jsxRuntime.jsx(IconButton.IconButton, { ref: searchButtonRef, onClick: toggleSearch, label: searchLabel, icon: jsxRuntime.jsx(icons.Search, {}) }))] }), jsxRuntime.jsx(Box.Box, { paddingTop: 4, children: jsxRuntime.jsx(CustomDivider, {}) })] }));
-};
-
-exports.SubNavHeader = SubNavHeader;

package/dist/SubNav/SubNavHeader.mjs

@@ -1,59 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState, useRef, useEffect } from 'react';
-import { Search } from '@strapi/icons';
-import styled from 'styled-components';
-import { KeyboardKeys } from '../helpers/keyboardKeys.mjs';
-import { useId } from '../hooks/useId.mjs';
-import { usePrevious } from '../hooks/usePrevious.mjs';
-import { SearchForm } from '../Searchbar/SearchForm.mjs';
-import { Searchbar } from '../Searchbar/Searchbar.mjs';
-import { Divider } from '../Divider/Divider.mjs';
-import { Box } from '../Box/Box.mjs';
-import { Flex } from '../Flex/Flex.mjs';
-import { Typography } from '../Typography/Typography.mjs';
-import { IconButton } from '../IconButton/IconButton.mjs';
-
-const CustomDivider = styled(Divider) `
-  width: ${24 / 16}rem;
-  background-color: ${({ theme }) => theme.colors.neutral200};
-`;
-const SubNavHeader = ({ as = 'h2', label, searchLabel = '', searchable, onChange = () => { }, value = '', onClear = () => { }, onSubmit = () => { }, id, }) => {
-    const [isSearchOpen, setSearchOpen] = useState(false);
-    const previousSearchOpenValue = usePrevious(isSearchOpen);
-    const clearButtonId = useId(id);
-    const searchRef = useRef(null);
-    const searchButtonRef = useRef(null);
-    useEffect(() => {
-        if (isSearchOpen && searchRef.current) {
-            searchRef.current.focus();
-        }
-        if (previousSearchOpenValue && !isSearchOpen && searchButtonRef.current) {
-            searchButtonRef.current.focus();
-        }
-    }, [isSearchOpen, previousSearchOpenValue]);
-    const toggleSearch = () => {
-        setSearchOpen((isOpen) => !isOpen);
-    };
-    const handleClear = (e) => {
-        onClear(e);
-        if (searchRef?.current) {
-            searchRef.current.focus();
-        }
-    };
-    const handleBlur = (e) => {
-        if (e.relatedTarget?.id !== clearButtonId) {
-            setSearchOpen(false);
-        }
-    };
-    const handleKeyDown = (e) => {
-        if (e.key === KeyboardKeys.ESCAPE) {
-            setSearchOpen(false);
-        }
-    };
-    if (isSearchOpen) {
-        return (jsxs(Box, { paddingLeft: 4, paddingTop: 5, paddingBottom: 2, paddingRight: 4, children: [jsx(SearchForm, { children: jsx(Searchbar, { name: "searchbar", value: value, onChange: onChange, placeholder: "e.g: strapi-plugin-abcd", onKeyDown: handleKeyDown, ref: searchRef, onBlur: handleBlur, onClear: handleClear, onSubmit: onSubmit, clearLabel: "Clear", size: "S", children: searchLabel }) }), jsx(Box, { paddingLeft: 2, paddingTop: 4, children: jsx(CustomDivider, {}) })] }));
-    }
-    return (jsxs(Box, { paddingLeft: 6, paddingTop: 6, paddingBottom: 2, paddingRight: 4, children: [jsxs(Flex, { justifyContent: "space-between", alignItems: "flex-start", children: [jsx(Typography, { variant: "beta", as: as, children: label }), searchable && (jsx(IconButton, { ref: searchButtonRef, onClick: toggleSearch, label: searchLabel, icon: jsx(Search, {}) }))] }), jsx(Box, { paddingTop: 4, children: jsx(CustomDivider, {}) })] }));
-};
-
-export { SubNavHeader };