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

package/dist/Select/SelectParts.mjs

@@ -1,133 +0,0 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import * as React from 'react';
-import { Cross, CarretDown } from '@strapi/icons';
-import { Select } from '@strapi/ui-primitives';
-import styled, { css } from 'styled-components';
-import { useComposedRefs } from '../hooks/useComposeRefs.mjs';
-import { Flex } from '../Flex/Flex.mjs';
-import { Box } from '../Box/Box.mjs';
-import { getThemeSize, inputFocusStyle } from '../themes/utils.mjs';
-import { Typography } from '../Typography/Typography.mjs';
-
-const SelectTrigger = React.forwardRef(({ onClear, clearLabel = 'Clear', startIcon, disabled, hasError, size = 'M', children, ...restProps }, ref) => {
-    const triggerRef = React.useRef(null);
-    const handleClearClick = (e) => {
-        if (onClear && !disabled) {
-            onClear(e);
-            triggerRef.current.focus();
-        }
-    };
-    const composedRefs = useComposedRefs(triggerRef, ref);
-    return (jsx(Select.Trigger, { asChild: true, children: jsxs(StyledTrigger, { "aria-disabled": disabled, "$hasError": hasError, "$size": size, ref: composedRefs, alignItems: "center", justifyContent: "space-between", position: "relative", overflow: "hidden", hasRadius: true, background: disabled ? 'neutral150' : 'neutral0', paddingLeft: 3, paddingRight: 3, paddingTop: 1, paddingBottom: 1, gap: 4, cursor: "default", width: "100%", ...restProps, children: [jsxs(Flex, { flex: "1", as: "span", gap: 3, children: [startIcon && (jsx(Box, { as: "span", "aria-hidden": true, children: startIcon })), children] }), jsxs(Flex, { as: "span", gap: 3, children: [onClear ? (jsx(IconBox, { as: "button", hasRadius: true, background: "transparent", role: "button", tabIndex: 0, onClick: handleClearClick, "aria-disabled": disabled, "aria-label": clearLabel, title: clearLabel, cursor: "pointer", children: jsx(Cross, {}) })) : null, jsx(DownIcon, { children: jsx(CarretDown, {}) })] })] }) }));
-});
-const IconBox = styled(Box) `
-  border: none;
-
-  svg {
-    height: ${11 / 16}rem;
-    width: ${11 / 16}rem;
-  }
-
-  svg path {
-    fill: ${({ theme }) => theme.colors.neutral600};
-  }
-`;
-const StyledTrigger = styled(Flex) `
-  border: 1px solid ${({ theme, $hasError }) => ($hasError ? theme.colors.danger600 : theme.colors.neutral200)};
-  min-height: ${({ theme, $size }) => getThemeSize('input')({ theme, size: $size })};
-
-  &[aria-disabled='true'] {
-    color: ${(props) => props.theme.colors.neutral600};
-  }
-
-  /* Required to ensure the below inputFocusStyles are adhered too */
-  &:focus-visible {
-    outline: none;
-  }
-
-  ${({ theme, $hasError }) => inputFocusStyle()({ theme, hasError: $hasError })};
-`;
-const DownIcon = styled(Select.Icon) `
-  & > svg {
-    width: ${6 / 16}rem;
-
-    & > path {
-      fill: ${({ theme }) => theme.colors.neutral600};
-    }
-  }
-`;
-const SelectValue = React.forwardRef(({ children, placeholder, ...restProps }, ref) => (jsx(ValueType, { ref: ref, ellipsis: true, ...restProps, children: jsx(StyledValue, { placeholder: placeholder, children: children }) })));
-const ValueType = styled(Typography) `
-  flex: 1;
-`;
-const StyledValue = styled(Select.Value) `
-  display: flex;
-  gap: ${({ theme }) => theme.spaces[1]};
-  flex-wrap: wrap;
-`;
-/* -------------------------------------------------------------------------------------------------
- * SelectContent
- * -----------------------------------------------------------------------------------------------*/
-const SelectContent = styled(Select.Content) `
-  background: ${({ theme }) => theme.colors.neutral0};
-  box-shadow: ${({ theme }) => theme.shadows.filterShadow};
-  border: 1px solid ${({ theme }) => theme.colors.neutral150};
-  border-radius: ${({ theme }) => theme.borderRadius};
-  min-width: var(--radix-select-trigger-width);
-  /* This is from the design-system figma file. */
-  max-height: 15rem;
-  z-index: ${({ theme }) => theme.zIndices[1]};
-`;
-/* -------------------------------------------------------------------------------------------------
- * SelectViewport
- * -----------------------------------------------------------------------------------------------*/
-const SelectViewport = styled(Select.Viewport) `
-  padding: ${({ theme }) => theme.spaces[1]};
-`;
-const SelectItem = React.forwardRef((props, ref) => (jsx(StyledSelectItem, { ref: ref, ...props })));
-const itemStyles = css `
-  width: 100%;
-  border: none;
-  text-align: left;
-  outline-offset: -3px;
-  border-radius: ${(props) => props.theme.borderRadius};
-  padding: ${(props) => `${props.theme.spaces[2]} ${props.theme.spaces[4]}`};
-  padding-left: ${({ theme }) => theme.spaces[4]};
-  background-color: ${({ theme }) => theme.colors.neutral0};
-  display: flex;
-  align-items: center;
-  gap: ${({ theme }) => theme.spaces[2]};
-  white-space: nowrap;
-  user-select: none;
-
-  &:focus-visible {
-    outline: none;
-    background-color: ${({ theme }) => theme.colors.primary100};
-  }
-`;
-const StyledSelectItem = styled(Select.Item) `
-  ${itemStyles}
-
-  &:hover {
-    background-color: ${({ theme }) => theme.colors.primary100};
-  }
-
-  &[data-state='checked'] {
-    ${Typography} {
-      font-weight: bold;
-      color: ${({ theme }) => theme.colors.primary600};
-    }
-  }
-`;
-const Root = Select.Root;
-const Trigger = SelectTrigger;
-const Value = SelectValue;
-const Portal = Select.Portal;
-const Content = SelectContent;
-const Viewport = SelectViewport;
-const Item = SelectItem;
-const ItemIndicator = Select.ItemIndicator;
-const ItemText = Select.ItemText;
-const Group = Select.Group;
-
-export { Content, Group, Item, ItemIndicator, ItemText, Portal, Root, Trigger, Value, Viewport };

package/dist/Select/SingleSelect.js

@@ -1,111 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const jsxRuntime = require('react/jsx-runtime');
-const React = require('react');
-const SelectParts = require('./SelectParts.js');
-const strings = require('../helpers/strings.js');
-const useComposeRefs = require('../hooks/useComposeRefs.js');
-const useId = require('../hooks/useId.js');
-const useIntersection = require('../hooks/useIntersection.js');
-const Field = require('../Field/Field.js');
-const Flex = require('../Flex/Flex.js');
-const FieldLabel = require('../Field/FieldLabel.js');
-const FieldHint = require('../Field/FieldHint.js');
-const FieldError = require('../Field/FieldError.js');
-const Box = require('../Box/Box.js');
-const Typography = require('../Typography/Typography.js');
-
-function _interopNamespace(e) {
-    if (e && e.__esModule) return e;
-    const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
-    if (e) {
-        for (const k in e) {
-            if (k !== 'default') {
-                const d = Object.getOwnPropertyDescriptor(e, k);
-                Object.defineProperty(n, k, d.get ? d : {
-                    enumerable: true,
-                    get: () => e[k]
-                });
-            }
-        }
-    }
-    n.default = e;
-    return Object.freeze(n);
-}
-
-const React__namespace = /*#__PURE__*/_interopNamespace(React);
-
-const SingleSelect = React__namespace.forwardRef(({ error, hint, id, label, labelAction, required, selectButtonTitle: _deprecatedSelectButtonTitle, ...restProps }, forwardedRef) => {
-    const generatedId = useId.useId(id);
-    /**
-     * Because the trigger needs to be a `div` to allow the clear
-     * button & tags to be clickable, we need to manually focus it.
-     */
-    const triggerRef = React__namespace.useRef(null);
-    const handleFieldLabelClick = () => {
-        triggerRef.current.focus();
-    };
-    const composedTriggerRefs = useComposeRefs.useComposedRefs(forwardedRef, triggerRef);
-    return (jsxRuntime.jsx(Field.Field, { hint: hint, error: error, id: generatedId, required: required, children: jsxRuntime.jsxs(Flex.Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [label ? (jsxRuntime.jsx(FieldLabel.FieldLabel, { onClick: handleFieldLabelClick, action: labelAction, children: label })) : null, jsxRuntime.jsx(SingleSelectInput, { label: label, id: generatedId, ref: composedTriggerRefs, required: required, ...restProps }), jsxRuntime.jsx(FieldHint.FieldHint, {}), jsxRuntime.jsx(FieldError.FieldError, {})] }) }));
-});
-const SingleSelectInput = React__namespace.forwardRef(({ 'aria-label': ariaLabel, id, children, clearLabel = 'Clear', customizeContent, disabled, error, label, onChange, onClear, onCloseAutoFocus, onReachEnd, placeholder, required, selectButtonTitle: _deprecatedSelectButtonTitle, startIcon, size = 'M', value: passedValue, ...restProps }, forwardedRef) => {
-    /**
-     * These values are drawn out from the internals of the Radix component
-     * We can then use them to react to visual changes for the component
-     */
-    const [internalValue, setInternalValue] = React__namespace.useState();
-    const [internalIsOpen, setInternalIsOpen] = React__namespace.useState(false);
-    const handleOpenChange = (open) => {
-        setInternalIsOpen(open);
-    };
-    const handleOnClear = (e) => {
-        if (onClear) {
-            onClear(e);
-        }
-        if (!onChange) {
-            setInternalValue('');
-        }
-    };
-    const hintId = `${id}-hint`;
-    const errorId = `${id}-error`;
-    const handleValueChange = (value) => {
-        /**
-         * If it's being externally managed then we shouldn't
-         * both setting our copy of the internal value.
-         */
-        if (onChange) {
-            const shouldBeNumber = typeof passedValue === 'number';
-            onChange(shouldBeNumber ? Number(value) : value);
-        }
-        else {
-            setInternalValue(value);
-        }
-    };
-    const viewportRef = React__namespace.useRef(null);
-    const generatedIntersectionId = useId.useId();
-    const intersectionId = `intersection-${strings.stripReactIdOfColon(generatedIntersectionId)}`;
-    const handleReachEnd = (entry) => {
-        if (onReachEnd) {
-            onReachEnd(entry);
-        }
-    };
-    useIntersection.useIntersection(viewportRef, 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,
-    });
-    const value = (typeof passedValue !== 'undefined' && passedValue !== null ? passedValue.toString() : internalValue) ?? '';
-    return (jsxRuntime.jsxs(SelectParts.Root, { onOpenChange: handleOpenChange, disabled: disabled, required: required, onValueChange: handleValueChange, value: value, ...restProps, children: [jsxRuntime.jsx(SelectParts.Trigger, { ref: forwardedRef, "aria-label": label ?? ariaLabel, "aria-describedby": id ? `${hintId} ${errorId}` : undefined, id: id, startIcon: startIcon, size: size, hasError: Boolean(error), disabled: disabled, clearLabel: clearLabel, onClear: value && onClear ? handleOnClear : undefined, children: jsxRuntime.jsx(SelectParts.Value, { placeholder: placeholder, textColor: value ? 'neutral800' : 'neutral600', children: value && customizeContent ? customizeContent(value) : undefined }) }), jsxRuntime.jsx(SelectParts.Portal, { children: jsxRuntime.jsx(SelectParts.Content, { position: "popper", sideOffset: 4, onCloseAutoFocus: onCloseAutoFocus, children: jsxRuntime.jsxs(SelectParts.Viewport, { ref: viewportRef, children: [children, jsxRuntime.jsx(Box.Box, { id: intersectionId, width: "100%", height: "1px" })] }) }) })] }));
-});
-const SingleSelectOption = React__namespace.forwardRef(({ value, startIcon, children, ...restProps }, ref) => {
-    return (jsxRuntime.jsxs(SelectParts.Item, { ref: ref, value: value.toString(), ...restProps, children: [startIcon && (jsxRuntime.jsx(Box.Box, { as: "span", "aria-hidden": true, children: startIcon })), jsxRuntime.jsx(Typography.Typography, { textColor: "neutral800", children: jsxRuntime.jsx(SelectParts.ItemText, { children: children }) })] }));
-});
-
-exports.SingleSelect = SingleSelect;
-exports.SingleSelectInput = SingleSelectInput;
-exports.SingleSelectOption = SingleSelectOption;

package/dist/Select/SingleSelect.mjs

@@ -1,85 +0,0 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import * as React from 'react';
-import { Root, Trigger, Value, Portal, Content, Viewport, Item, ItemText } from './SelectParts.mjs';
-import { stripReactIdOfColon } from '../helpers/strings.mjs';
-import { useComposedRefs } from '../hooks/useComposeRefs.mjs';
-import { useId } from '../hooks/useId.mjs';
-import { useIntersection } from '../hooks/useIntersection.mjs';
-import { Field } from '../Field/Field.mjs';
-import { Flex } from '../Flex/Flex.mjs';
-import { FieldLabel } from '../Field/FieldLabel.mjs';
-import { FieldHint } from '../Field/FieldHint.mjs';
-import { FieldError } from '../Field/FieldError.mjs';
-import { Box } from '../Box/Box.mjs';
-import { Typography } from '../Typography/Typography.mjs';
-
-const SingleSelect = React.forwardRef(({ error, hint, id, label, labelAction, required, selectButtonTitle: _deprecatedSelectButtonTitle, ...restProps }, forwardedRef) => {
-    const generatedId = useId(id);
-    /**
-     * Because the trigger needs to be a `div` to allow the clear
-     * button & tags to be clickable, we need to manually focus it.
-     */
-    const triggerRef = React.useRef(null);
-    const handleFieldLabelClick = () => {
-        triggerRef.current.focus();
-    };
-    const composedTriggerRefs = useComposedRefs(forwardedRef, triggerRef);
-    return (jsx(Field, { hint: hint, error: error, id: generatedId, required: required, children: jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [label ? (jsx(FieldLabel, { onClick: handleFieldLabelClick, action: labelAction, children: label })) : null, jsx(SingleSelectInput, { label: label, id: generatedId, ref: composedTriggerRefs, required: required, ...restProps }), jsx(FieldHint, {}), jsx(FieldError, {})] }) }));
-});
-const SingleSelectInput = React.forwardRef(({ 'aria-label': ariaLabel, id, children, clearLabel = 'Clear', customizeContent, disabled, error, label, onChange, onClear, onCloseAutoFocus, onReachEnd, placeholder, required, selectButtonTitle: _deprecatedSelectButtonTitle, startIcon, size = 'M', value: passedValue, ...restProps }, forwardedRef) => {
-    /**
-     * These values are drawn out from the internals of the Radix component
-     * We can then use them to react to visual changes for the component
-     */
-    const [internalValue, setInternalValue] = React.useState();
-    const [internalIsOpen, setInternalIsOpen] = React.useState(false);
-    const handleOpenChange = (open) => {
-        setInternalIsOpen(open);
-    };
-    const handleOnClear = (e) => {
-        if (onClear) {
-            onClear(e);
-        }
-        if (!onChange) {
-            setInternalValue('');
-        }
-    };
-    const hintId = `${id}-hint`;
-    const errorId = `${id}-error`;
-    const handleValueChange = (value) => {
-        /**
-         * If it's being externally managed then we shouldn't
-         * both setting our copy of the internal value.
-         */
-        if (onChange) {
-            const shouldBeNumber = typeof passedValue === 'number';
-            onChange(shouldBeNumber ? Number(value) : value);
-        }
-        else {
-            setInternalValue(value);
-        }
-    };
-    const viewportRef = React.useRef(null);
-    const generatedIntersectionId = useId();
-    const intersectionId = `intersection-${stripReactIdOfColon(generatedIntersectionId)}`;
-    const handleReachEnd = (entry) => {
-        if (onReachEnd) {
-            onReachEnd(entry);
-        }
-    };
-    useIntersection(viewportRef, 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,
-    });
-    const value = (typeof passedValue !== 'undefined' && passedValue !== null ? passedValue.toString() : internalValue) ?? '';
-    return (jsxs(Root, { onOpenChange: handleOpenChange, disabled: disabled, required: required, onValueChange: handleValueChange, value: value, ...restProps, children: [jsx(Trigger, { ref: forwardedRef, "aria-label": label ?? ariaLabel, "aria-describedby": id ? `${hintId} ${errorId}` : undefined, id: id, startIcon: startIcon, size: size, hasError: Boolean(error), disabled: disabled, clearLabel: clearLabel, onClear: value && onClear ? handleOnClear : undefined, children: jsx(Value, { placeholder: placeholder, textColor: value ? 'neutral800' : 'neutral600', children: value && customizeContent ? customizeContent(value) : undefined }) }), jsx(Portal, { children: jsx(Content, { position: "popper", sideOffset: 4, onCloseAutoFocus: onCloseAutoFocus, children: jsxs(Viewport, { ref: viewportRef, children: [children, jsx(Box, { id: intersectionId, width: "100%", height: "1px" })] }) }) })] }));
-});
-const SingleSelectOption = React.forwardRef(({ value, startIcon, children, ...restProps }, ref) => {
-    return (jsxs(Item, { ref: ref, value: value.toString(), ...restProps, children: [startIcon && (jsx(Box, { as: "span", "aria-hidden": true, children: startIcon })), jsx(Typography, { textColor: "neutral800", children: jsx(ItemText, { children: children }) })] }));
-});
-
-export { SingleSelect, SingleSelectInput, SingleSelectOption };

package/dist/Select/__tests__/MultiSelect.spec.d.ts

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

package/dist/Select/__tests__/MultiSelectNested.spec.d.ts

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

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

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

package/dist/Select/__tests__/SingleSelect.spec.d.ts

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

package/dist/Select/index.js

@@ -1,24 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const MultiSelectNested = require('./MultiSelectNested.js');
-const MultiSelect = require('./MultiSelect.js');
-const SingleSelect = require('./SingleSelect.js');
-const Select = require('./Select.js');
-const Option = require('./Option.js');
-const OptGroup = require('./OptGroup.js');
-const SelectList = require('./SelectList.js');
-
-
-
-exports.MultiSelectNested = MultiSelectNested.MultiSelectNested;
-exports.MultiSelect = MultiSelect.MultiSelect;
-exports.MultiSelectGroup = MultiSelect.MultiSelectGroup;
-exports.MultiSelectOption = MultiSelect.MultiSelectOption;
-exports.SingleSelect = SingleSelect.SingleSelect;
-exports.SingleSelectOption = SingleSelect.SingleSelectOption;
-exports.Select = Select.Select;
-exports.Option = Option.Option;
-exports.OptGroup = OptGroup.OptGroup;
-exports.SelectList = SelectList.SelectList;

package/dist/Select/index.mjs

@@ -1,7 +0,0 @@
-export { MultiSelectNested } from './MultiSelectNested.mjs';
-export { MultiSelect, MultiSelectGroup, MultiSelectOption } from './MultiSelect.mjs';
-export { SingleSelect, SingleSelectOption } from './SingleSelect.mjs';
-export { Select } from './Select.mjs';
-export { Option } from './Option.mjs';
-export { OptGroup } from './OptGroup.mjs';
-export { SelectList } from './SelectList.mjs';

package/dist/SimpleMenu/SimpleMenu.js

@@ -1,188 +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 uiPrimitives = require('@strapi/ui-primitives');
-const reactRouterDom = require('react-router-dom');
-const styled = require('styled-components');
-const utils = require('./utils.js');
-const keyboardKeys = require('../helpers/keyboardKeys.js');
-const useId = require('../hooks/useId.js');
-const Link = require('../Link/Link.js');
-const Button = require('../Button/Button.js');
-const Popover = require('../Popover/Popover.js');
-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 React__default = /*#__PURE__*/_interopDefault(React);
-const styled__default = /*#__PURE__*/_interopDefault(styled);
-
-const OptionButton = styled__default.default.button `
-  border: none;
-  padding: 0;
-  background: transparent;
-  cursor: pointer;
-  ${utils.getOptionStyle}
-`;
-const OptionLink = styled__default.default(reactRouterDom.NavLink) `
-  text-decoration: none;
-  ${utils.getOptionStyle}
-`;
-const OptionExternalLink = styled__default.default(Link.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;
-    }
-  }
-
-  ${utils.getOptionStyle}
-`;
-const IconWrapper = styled__default.default.span `
-  display: flex;
-  align-items: center;
-  svg {
-    height: 4px;
-    width: 6px;
-  }
-`;
-const StyledButtonSmall = styled__default.default(Button.Button) `
-  padding: ${({ theme }) => `${theme.spaces[1]} ${theme.spaces[3]}`};
-`;
-const MenuItem = ({ children, onClick = () => { }, to, isFocused = false, href, ...props }) => {
-    const menuItemRef = React.useRef();
-    React.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.KeyboardKeys.SPACE || e.key === keyboardKeys.KeyboardKeys.ENTER) {
-            onClick();
-        }
-    };
-    if (to && !href) {
-        return (jsxRuntime.jsx(OptionLink, { to: to, ...menuItemProps, children: jsxRuntime.jsx(Box.Box, { padding: 2, children: jsxRuntime.jsx(Typography.Typography, { children: children }) }) }));
-    }
-    if (href && !to) {
-        return (jsxRuntime.jsx(OptionExternalLink, { isExternal: true, href: href, ...menuItemProps, children: jsxRuntime.jsx(Box.Box, { padding: 2, children: jsxRuntime.jsx(Typography.Typography, { children: children }) }) }));
-    }
-    return (jsxRuntime.jsx(OptionButton, { onKeyDown: handleKeyDown, onMouseDown: onClick, type: "button", ...menuItemProps, children: jsxRuntime.jsx(Box.Box, { padding: 2, children: jsxRuntime.jsx(Typography.Typography, { children: children }) }) }));
-};
-const SimpleMenu = ({ label, children, id, as: asComp, onOpen = () => { }, onClose = () => { }, size = 'M', popoverPlacement = 'bottom-start', onReachEnd, ...props }) => {
-    const menuButtonRef = React.useRef(undefined);
-    const menuId = useId.useId(id);
-    const didMount = React.useRef(false);
-    const [visible, setVisible] = React.useState(false);
-    const [focusedItemIndex, setFocusItem] = React.useState(0);
-    const childrenArray = React.Children.toArray(children);
-    const DefaultComponent = size === 'S' ? StyledButtonSmall : Button.Button;
-    const Component = asComp || DefaultComponent;
-    const shouldHandleReachEnd = !!onReachEnd && typeof onReachEnd === 'function';
-    React.useEffect(() => {
-        if (['string', 'number'].includes(typeof label)) {
-            // Useful to focus the selected item in the list
-            const defaultItemIndexToFocus = childrenArray.findIndex((c) => (React__default.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 = uiPrimitives.useCallbackRef(onOpen);
-    const handleClose = uiPrimitives.useCallbackRef(onClose);
-    React.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.
-    */
-    React.useEffect(() => {
-        if (React__default.default.isValidElement(label) && focusedItemIndex === -1) {
-            menuButtonRef.current.focus();
-        }
-    }, [label, focusedItemIndex]);
-    const handleWrapperKeyDown = (e) => {
-        if (visible) {
-            if (e.key === keyboardKeys.KeyboardKeys.ESCAPE) {
-                e.stopPropagation();
-                setVisible(false);
-                menuButtonRef.current.focus();
-            }
-            if (e.key === keyboardKeys.KeyboardKeys.DOWN) {
-                setFocusItem((prev) => (prev === childrenArray.length - 1 ? 0 : prev + 1));
-            }
-            if (e.key === keyboardKeys.KeyboardKeys.UP) {
-                setFocusItem((prev) => (prev === 0 ? childrenArray.length - 1 : prev - 1));
-            }
-        }
-    };
-    const handleKeyDown = (e) => {
-        if (e.key === keyboardKeys.KeyboardKeys.ENTER || e.key === keyboardKeys.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
-    jsxRuntime.jsx(Flex.Flex, { as: "li", justifyContent: "center", role: "menuitem", children: React__default.default.isValidElement(child)
-            ? React.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
-    jsxRuntime.jsxs("div", { onKeyDown: handleWrapperKeyDown, children: [jsxRuntime.jsx(Component, { label: React__default.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: jsxRuntime.jsx(IconWrapper, { children: jsxRuntime.jsx(icons.CarretDown, { "aria-hidden": true }) }), ...props, children: label }), visible && (jsxRuntime.jsx(Popover.Popover, { onBlur: handleBlur, placement: popoverPlacement, source: menuButtonRef, onReachEnd: handleReachEnd, intersectionId: shouldHandleReachEnd ? `popover-${menuId}` : undefined, spacing: 4, children: jsxRuntime.jsx(Box.Box, { role: "menu", as: "ul", padding: 1, id: menuId, children: childrenClone }) }))] }));
-};
-
-exports.MenuItem = MenuItem;
-exports.SimpleMenu = SimpleMenu;