@strapi/design-system 1.18.0 → 2.0.0-beta.0

package/dist/v2/Pagination/index.js

@@ -1,14 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const Pagination = require('./Pagination.js');
-const components = require('./components.js');
-
-
-
-exports.Pagination = Pagination.Pagination;
-exports.Dots = components.Dots;
-exports.NextLink = components.NextLink;
-exports.PageLink = components.PageLink;
-exports.PreviousLink = components.PreviousLink;

package/dist/v2/Pagination/index.mjs

@@ -1,2 +0,0 @@
-export { Pagination } from './Pagination.mjs';
-export { Dots, NextLink, PageLink, PreviousLink } from './components.mjs';

package/dist/v2/SimpleMenu/Menu.js

@@ -1,146 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const jsxRuntime = require('react/jsx-runtime');
-const React = require('react');
-const DropdownMenu = require('@radix-ui/react-dropdown-menu');
-const icons = require('@strapi/icons');
-const styled = require('styled-components');
-const theme = require('../../helpers/theme.js');
-const Link = require('../Link/Link.js');
-const Button = require('../../Button/Button.js');
-const Box = require('../../Box/Box.js');
-const Flex = require('../../Flex/Flex.js');
-const Typography = require('../../Typography/Typography.js');
-
-const _interopDefault = e => e && e.__esModule ? e : { default: e };
-
-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 DropdownMenu__namespace = /*#__PURE__*/_interopNamespace(DropdownMenu);
-const styled__default = /*#__PURE__*/_interopDefault(styled);
-
-const MenuRoot = DropdownMenu__namespace.Root;
-const MenuTrigger = React.forwardRef(({ size, endIcon = jsxRuntime.jsx(icons.CarretDown, { width: `${6 / 16}rem`, height: `${4 / 16}rem`, "aria-hidden": true }), ...props }, ref) => {
-    return (jsxRuntime.jsx(DropdownMenu__namespace.Trigger, { asChild: true, children: jsxRuntime.jsx(Button.Button, { ref: ref, type: "button", variant: "ghost", endIcon: endIcon, paddingTop: size === 'S' ? 1 : 2, paddingBottom: size === 'S' ? 1 : 2, paddingLeft: size === 'S' ? 3 : 4, paddingRight: size === 'S' ? 3 : 4, ...props }) }));
-});
-const MenuContent = React.forwardRef(({ children, intersectionId, popoverPlacement = 'bottom-start', ...props }, ref) => {
-    const [side, align] = popoverPlacement.split('-');
-    return (jsxRuntime.jsx(DropdownMenu__namespace.Portal, { children: jsxRuntime.jsx(DropdownMenu__namespace.Content, { align: align, side: side, loop: true, asChild: true, children: jsxRuntime.jsxs(Viewport, { ref: ref, direction: "column", borderStyle: "solid", borderWidth: "1px", borderColor: "neutral150", hasRadius: true, background: "neutral0", shadow: "filterShadow", maxHeight: "15rem", padding: 1, alignItems: "flex-start", position: "relative", overflow: "auto", ...props, children: [children, jsxRuntime.jsx(Box.Box, { id: intersectionId, width: "100%", height: "1px" })] }) }) }));
-});
-const Viewport = styled__default.default(Flex.Flex) `
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-  -webkit-overflow-scrolling: touch;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
-`;
-const MenuItem = ({ onSelect, disabled = false, ...props }) => {
-    return (jsxRuntime.jsx(DropdownMenu__namespace.Item, { asChild: true, onSelect: onSelect, disabled: disabled, children: props.isLink || props.isExternal ? (jsxRuntime.jsx(OptionLink, { color: "neutral800", ...props, isExternal: props.isExternal ?? false, children: jsxRuntime.jsx(Typography.Typography, { children: props.children }) })) : (jsxRuntime.jsx(OptionButton, { cursor: "pointer", color: "neutral800", background: "transparent", borderStyle: "none", ...props, children: jsxRuntime.jsx(Typography.Typography, { children: props.children }) })) }));
-};
-const getOptionStyle = ({ theme }) => styled.css `
-  text-align: left;
-  width: 100%;
-  border-radius: ${theme.borderRadius};
-  padding: ${theme.spaces[2]} ${theme.spaces[4]};
-
-  ${Typography.Typography} {
-    color: inherit;
-  }
-
-  &[aria-disabled] {
-    cursor: not-allowed;
-
-    ${Typography.Typography} {
-      color: ${theme.colors.neutral500};
-    }
-  }
-
-  &[data-highlighted] {
-    background-color: ${theme.colors.primary100};
-  }
-
-  &:focus-visible {
-    outline: none;
-
-    &:after {
-      content: none;
-    }
-  }
-`;
-const OptionButton = styled__default.default(Flex.Flex) `
-  ${getOptionStyle}
-`;
-const OptionLink = styled__default.default(Link.Link) `
-  /* We include this here again because typically when people use OptionLink they provide an as prop which cancels the Box props */
-  color: ${({ theme: theme$1, color }) => theme.extractStyleFromTheme(theme$1.colors, color, undefined)};
-  text-decoration: none;
-
-  &:hover {
-    color: unset;
-  }
-
-  svg > path,
-  &:focus-visible svg > path {
-    fill: currentColor;
-  }
-
-  ${getOptionStyle}
-`;
-const MenuLabel = React.forwardRef((props, ref) => (jsxRuntime.jsx(DropdownMenu__namespace.Label, { asChild: true, children: jsxRuntime.jsx(StyledLabel, { ref: ref, variant: "sigma", textColor: "neutral600", ...props }) })));
-const StyledLabel = styled__default.default(Typography.Typography) `
-  padding: ${({ theme }) => theme.spaces[2]} ${({ theme }) => theme.spaces[4]};
-`;
-const MenuSubRoot = DropdownMenu__namespace.Sub;
-const MenuSubTrigger = React.forwardRef(({ disabled = false, ...props }, ref) => {
-    return (jsxRuntime.jsx(DropdownMenu__namespace.SubTrigger, { asChild: true, disabled: disabled, children: jsxRuntime.jsxs(SubmenuTrigger, { ref: ref, color: "neutral800", as: "button", type: "button", background: "transparent", borderStyle: "none", gap: 5, ...props, children: [jsxRuntime.jsx(Typography.Typography, { children: props.children }), jsxRuntime.jsx(TriggerArrow, { height: 12, width: 12 })] }) }));
-});
-const SubmenuTrigger = styled__default.default(OptionButton) `
-  &[data-state='open'] {
-    background-color: ${({ theme }) => theme.colors.primary100};
-  }
-`;
-const TriggerArrow = styled__default.default(icons.ChevronRight) `
-  path {
-    fill: ${({ theme }) => theme.colors.neutral500};
-  }
-`;
-const MenuSubContent = React.forwardRef((props, ref) => {
-    return (jsxRuntime.jsx(DropdownMenu__namespace.Portal, { children: jsxRuntime.jsx(DropdownMenu__namespace.SubContent, { sideOffset: 8, asChild: true, children: jsxRuntime.jsx(Viewport, { ref: ref, direction: "column", borderStyle: "solid", borderWidth: "1px", borderColor: "neutral150", hasRadius: true, background: "neutral0", shadow: "filterShadow", maxHeight: "15rem", padding: 1, alignItems: "flex-start", overflow: "auto", ...props }) }) }));
-});
-const Root = MenuRoot;
-const Trigger = MenuTrigger;
-const Content = MenuContent;
-const Item = MenuItem;
-const Label = MenuLabel;
-const SubRoot = MenuSubRoot;
-const SubTrigger = MenuSubTrigger;
-const SubContent = MenuSubContent;
-
-exports.Content = Content;
-exports.Item = Item;
-exports.Label = Label;
-exports.Root = Root;
-exports.SubContent = SubContent;
-exports.SubRoot = SubRoot;
-exports.SubTrigger = SubTrigger;
-exports.Trigger = Trigger;

package/dist/v2/SimpleMenu/Menu.mjs

@@ -1,112 +0,0 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
-import { CarretDown, ChevronRight } from '@strapi/icons';
-import styled, { css } from 'styled-components';
-import { extractStyleFromTheme } from '../../helpers/theme.mjs';
-import { Link } from '../Link/Link.mjs';
-import { Button } from '../../Button/Button.mjs';
-import { Box } from '../../Box/Box.mjs';
-import { Flex } from '../../Flex/Flex.mjs';
-import { Typography } from '../../Typography/Typography.mjs';
-
-const MenuRoot = DropdownMenu.Root;
-const MenuTrigger = forwardRef(({ size, endIcon = jsx(CarretDown, { width: `${6 / 16}rem`, height: `${4 / 16}rem`, "aria-hidden": true }), ...props }, ref) => {
-    return (jsx(DropdownMenu.Trigger, { asChild: true, children: jsx(Button, { ref: ref, type: "button", variant: "ghost", endIcon: endIcon, paddingTop: size === 'S' ? 1 : 2, paddingBottom: size === 'S' ? 1 : 2, paddingLeft: size === 'S' ? 3 : 4, paddingRight: size === 'S' ? 3 : 4, ...props }) }));
-});
-const MenuContent = forwardRef(({ children, intersectionId, popoverPlacement = 'bottom-start', ...props }, ref) => {
-    const [side, align] = popoverPlacement.split('-');
-    return (jsx(DropdownMenu.Portal, { children: jsx(DropdownMenu.Content, { align: align, side: side, loop: true, asChild: true, children: jsxs(Viewport, { ref: ref, direction: "column", borderStyle: "solid", borderWidth: "1px", borderColor: "neutral150", hasRadius: true, background: "neutral0", shadow: "filterShadow", maxHeight: "15rem", padding: 1, alignItems: "flex-start", position: "relative", overflow: "auto", ...props, children: [children, jsx(Box, { id: intersectionId, width: "100%", height: "1px" })] }) }) }));
-});
-const Viewport = styled(Flex) `
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-  -webkit-overflow-scrolling: touch;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
-`;
-const MenuItem = ({ onSelect, disabled = false, ...props }) => {
-    return (jsx(DropdownMenu.Item, { asChild: true, onSelect: onSelect, disabled: disabled, children: props.isLink || props.isExternal ? (jsx(OptionLink, { color: "neutral800", ...props, isExternal: props.isExternal ?? false, children: jsx(Typography, { children: props.children }) })) : (jsx(OptionButton, { cursor: "pointer", color: "neutral800", background: "transparent", borderStyle: "none", ...props, children: jsx(Typography, { children: props.children }) })) }));
-};
-const getOptionStyle = ({ theme }) => css `
-  text-align: left;
-  width: 100%;
-  border-radius: ${theme.borderRadius};
-  padding: ${theme.spaces[2]} ${theme.spaces[4]};
-
-  ${Typography} {
-    color: inherit;
-  }
-
-  &[aria-disabled] {
-    cursor: not-allowed;
-
-    ${Typography} {
-      color: ${theme.colors.neutral500};
-    }
-  }
-
-  &[data-highlighted] {
-    background-color: ${theme.colors.primary100};
-  }
-
-  &:focus-visible {
-    outline: none;
-
-    &:after {
-      content: none;
-    }
-  }
-`;
-const OptionButton = styled(Flex) `
-  ${getOptionStyle}
-`;
-const OptionLink = styled(Link) `
-  /* We include this here again because typically when people use OptionLink they provide an as prop which cancels the Box props */
-  color: ${({ theme, color }) => extractStyleFromTheme(theme.colors, color, undefined)};
-  text-decoration: none;
-
-  &:hover {
-    color: unset;
-  }
-
-  svg > path,
-  &:focus-visible svg > path {
-    fill: currentColor;
-  }
-
-  ${getOptionStyle}
-`;
-const MenuLabel = forwardRef((props, ref) => (jsx(DropdownMenu.Label, { asChild: true, children: jsx(StyledLabel, { ref: ref, variant: "sigma", textColor: "neutral600", ...props }) })));
-const StyledLabel = styled(Typography) `
-  padding: ${({ theme }) => theme.spaces[2]} ${({ theme }) => theme.spaces[4]};
-`;
-const MenuSubRoot = DropdownMenu.Sub;
-const MenuSubTrigger = forwardRef(({ disabled = false, ...props }, ref) => {
-    return (jsx(DropdownMenu.SubTrigger, { asChild: true, disabled: disabled, children: jsxs(SubmenuTrigger, { ref: ref, color: "neutral800", as: "button", type: "button", background: "transparent", borderStyle: "none", gap: 5, ...props, children: [jsx(Typography, { children: props.children }), jsx(TriggerArrow, { height: 12, width: 12 })] }) }));
-});
-const SubmenuTrigger = styled(OptionButton) `
-  &[data-state='open'] {
-    background-color: ${({ theme }) => theme.colors.primary100};
-  }
-`;
-const TriggerArrow = styled(ChevronRight) `
-  path {
-    fill: ${({ theme }) => theme.colors.neutral500};
-  }
-`;
-const MenuSubContent = forwardRef((props, ref) => {
-    return (jsx(DropdownMenu.Portal, { children: jsx(DropdownMenu.SubContent, { sideOffset: 8, asChild: true, children: jsx(Viewport, { ref: ref, direction: "column", borderStyle: "solid", borderWidth: "1px", borderColor: "neutral150", hasRadius: true, background: "neutral0", shadow: "filterShadow", maxHeight: "15rem", padding: 1, alignItems: "flex-start", overflow: "auto", ...props }) }) }));
-});
-const Root = MenuRoot;
-const Trigger = MenuTrigger;
-const Content = MenuContent;
-const Item = MenuItem;
-const Label = MenuLabel;
-const SubRoot = MenuSubRoot;
-const SubTrigger = MenuSubTrigger;
-const SubContent = MenuSubContent;
-
-export { Content, Item, Label, Root, SubContent, SubRoot, SubTrigger, Trigger };

package/dist/v2/SimpleMenu/SimpleMenu.js

@@ -1,48 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const jsxRuntime = require('react/jsx-runtime');
-const React = require('react');
-const Menu = require('./Menu.js');
-const strings = require('../../helpers/strings.js');
-const useId = require('../../hooks/useId.js');
-const useIntersection = require('../../hooks/useIntersection.js');
-
-const SimpleMenu = ({ children, onOpen, onClose, popoverPlacement, onReachEnd, ...props }) => {
-    /**
-     * Used for the intersection observer
-     */
-    const contentRef = React.useRef(null);
-    const [internalIsOpen, setInternalIsOpen] = React.useState(false);
-    const handleReachEnd = (entry) => {
-        if (onReachEnd) {
-            onReachEnd(entry);
-        }
-    };
-    const handleOpenChange = (isOpen) => {
-        if (isOpen && typeof onOpen === 'function') {
-            onOpen();
-        }
-        else if (!isOpen && typeof onClose === 'function') {
-            onClose();
-        }
-        setInternalIsOpen(isOpen);
-    };
-    const generatedId = useId.useId();
-    const intersectionId = `intersection-${strings.stripReactIdOfColon(generatedId)}`;
-    useIntersection.useIntersection(contentRef, handleReachEnd, {
-        selectorToWatch: `#${intersectionId}`,
-        /**
-         * We need to know when the select is open because only then will viewportRef
-         * not be null. Because it uses a portal that (sensibly) is not mounted 24/7.
-         */
-        skipWhen: !internalIsOpen,
-    });
-    return (jsxRuntime.jsxs(Menu.Root, { onOpenChange: handleOpenChange, children: [jsxRuntime.jsx(Menu.Trigger, { ...props, children: props.label }), jsxRuntime.jsx(Menu.Content, { intersectionId: intersectionId, popoverPlacement: popoverPlacement, children: children })] }));
-};
-const MenuItem = Menu.Item;
-
-exports.Menu = Menu;
-exports.MenuItem = MenuItem;
-exports.SimpleMenu = SimpleMenu;

package/dist/v2/SimpleMenu/SimpleMenu.mjs

@@ -1,44 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { useRef, useState } from 'react';
-import { Root, Trigger, Content, Item } from './Menu.mjs';
-import * as Menu from './Menu.mjs';
-export { Menu };
-import { stripReactIdOfColon } from '../../helpers/strings.mjs';
-import { useId } from '../../hooks/useId.mjs';
-import { useIntersection } from '../../hooks/useIntersection.mjs';
-
-const SimpleMenu = ({ children, onOpen, onClose, popoverPlacement, onReachEnd, ...props }) => {
-    /**
-     * Used for the intersection observer
-     */
-    const contentRef = useRef(null);
-    const [internalIsOpen, setInternalIsOpen] = useState(false);
-    const handleReachEnd = (entry) => {
-        if (onReachEnd) {
-            onReachEnd(entry);
-        }
-    };
-    const handleOpenChange = (isOpen) => {
-        if (isOpen && typeof onOpen === 'function') {
-            onOpen();
-        }
-        else if (!isOpen && typeof onClose === 'function') {
-            onClose();
-        }
-        setInternalIsOpen(isOpen);
-    };
-    const generatedId = useId();
-    const intersectionId = `intersection-${stripReactIdOfColon(generatedId)}`;
-    useIntersection(contentRef, handleReachEnd, {
-        selectorToWatch: `#${intersectionId}`,
-        /**
-         * We need to know when the select is open because only then will viewportRef
-         * not be null. Because it uses a portal that (sensibly) is not mounted 24/7.
-         */
-        skipWhen: !internalIsOpen,
-    });
-    return (jsxs(Root, { onOpenChange: handleOpenChange, children: [jsx(Trigger, { ...props, children: props.label }), jsx(Content, { intersectionId: intersectionId, popoverPlacement: popoverPlacement, children: children })] }));
-};
-const MenuItem = Item;
-
-export { MenuItem, SimpleMenu };

package/dist/v2/SimpleMenu/index.js

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

package/dist/v2/SimpleMenu/index.mjs

@@ -1,3 +0,0 @@
-export { MenuItem, SimpleMenu } from './SimpleMenu.mjs';
-import * as Menu from './Menu.mjs';
-export { Menu };

package/dist/v2/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/v2/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/v2/SubNav/SubNavHeader.js

@@ -1,65 +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 Divider = require('../../Divider/Divider.js');
-const Box = require('../../Box/Box.js');
-const SearchForm = require('../../Searchbar/SearchForm.js');
-const Searchbar = require('../../Searchbar/Searchbar.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 = false, 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(undefined);
-    const searchButtonRef = React.useRef(undefined);
-    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);
-        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/v2/SubNav/SubNavHeader.mjs

@@ -1,57 +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 { Divider } from '../../Divider/Divider.mjs';
-import { Box } from '../../Box/Box.mjs';
-import { SearchForm } from '../../Searchbar/SearchForm.mjs';
-import { Searchbar } from '../../Searchbar/Searchbar.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 = false, onChange = () => { }, value = '', onClear = () => { }, onSubmit = () => { }, id, }) => {
-    const [isSearchOpen, setSearchOpen] = useState(false);
-    const previousSearchOpenValue = usePrevious(isSearchOpen);
-    const clearButtonId = useId(id);
-    const searchRef = useRef(undefined);
-    const searchButtonRef = useRef(undefined);
-    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);
-        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 };

package/dist/v2/SubNav/SubNavLink.js

@@ -1,66 +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 Box = require('../../Box/Box.js');
-const Typography = require('../../Typography/Typography.js');
-const Flex = require('../../Flex/Flex.js');
-const BaseLink = require('../../BaseLink/BaseLink.js');
-
-const _interopDefault = e => e && e.__esModule ? e : { default: e };
-
-const React__default = /*#__PURE__*/_interopDefault(React);
-const styled__default = /*#__PURE__*/_interopDefault(styled);
-
-const SubNavLinkWrapper = styled__default.default(Box.Box) `
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  text-decoration: none;
-  color: ${({ theme }) => theme.colors.neutral800};
-  svg > * {
-    fill: ${({ theme }) => theme.colors.neutral600};
-  }
-
-  &.active {
-    ${({ theme }) => {
-    return `
-      background-color: ${theme.colors.primary100};
-      border-right: 2px solid ${theme.colors.primary600};
-      svg > * {
-        fill: ${theme.colors.primary700};
-      }
-      ${Typography.Typography} {
-        color: ${theme.colors.primary700};
-        font-weight: 500;
-      }
-      `;
-}}
-  }
-
-  &:focus-visible {
-    outline-offset: -2px;
-  }
-`;
-const CustomBullet = styled__default.default(icons.Dot) `
-  width: ${12 / 16}rem;
-  height: ${4 / 16}rem;
-  * {
-    fill: ${({ theme, $active }) => ($active ? theme.colors.primary600 : theme.colors.neutral600)};
-  }
-`;
-const IconWrapper = styled__default.default.div `
-  svg {
-    height: ${12 / 16}rem;
-    width: ${12 / 16}rem;
-  }
-`;
-const SubNavLink = React__default.default.forwardRef(({ children, icon = null, withBullet = false, as = BaseLink.BaseLink, isSubSectionChild = false, ...props }, ref) => {
-    return (jsxRuntime.jsxs(SubNavLinkWrapper, { as: as, icon: icon, background: "neutral100", paddingLeft: isSubSectionChild ? 9 : 7, paddingBottom: 2, paddingTop: 2, ref: ref, ...props, children: [jsxRuntime.jsxs(Flex.Flex, { children: [icon ? jsxRuntime.jsx(IconWrapper, { children: icon }) : jsxRuntime.jsx(CustomBullet, {}), jsxRuntime.jsx(Box.Box, { paddingLeft: 2, children: jsxRuntime.jsx(Typography.Typography, { as: "span", children: children }) })] }), withBullet && (jsxRuntime.jsx(Box.Box, { as: Flex.Flex, paddingRight: 4, children: jsxRuntime.jsx(CustomBullet, { "$active": true }) }))] }));
-});
-
-exports.SubNavLink = SubNavLink;