draft-components 1.13.0 → 2.0.0

package/cjs/components/index.cjs

@@ -1,141 +0,0 @@
-'use strict';
-
-const alert = require('./alert/alert.cjs');
-const avatar = require('./avatar/avatar.cjs');
-const avatarGroup = require('./avatar-group/avatar-group.cjs');
-const badge = require('./badge/badge.cjs');
-const breadcrumbs = require('./breadcrumbs/breadcrumbs.cjs');
-const breadcrumbsItem = require('./breadcrumbs/breadcrumbs-item.cjs');
-const button = require('./button/button.cjs');
-const iconButton = require('./button/icon-button.cjs');
-const buttonGroup = require('./button-group/button-group.cjs');
-const caption = require('./caption/caption.cjs');
-const checkbox = require('./checkbox/checkbox.cjs');
-const colorPicker = require('./color-picker/color-picker.cjs');
-const datePicker = require('./date-picker/date-picker.cjs');
-const dateRangePicker = require('./date-picker/date-range-picker.cjs');
-const datePickerPopover = require('./date-picker-popover/date-picker-popover.cjs');
-const dateRangePickerPopover = require('./date-range-picker-popover/date-range-picker-popover.cjs');
-const dialog = require('./dialog/dialog.cjs');
-const dialogHeader = require('./dialog/dialog-header.cjs');
-const dialogBody = require('./dialog/dialog-body.cjs');
-const dialogFooter = require('./dialog/dialog-footer.cjs');
-const emptyState = require('./empty-state/empty-state.cjs');
-const filePicker = require('./file-picker/file-picker.cjs');
-const filterButtons = require('./filter-buttons/filter-buttons.cjs');
-const filterButton = require('./filter-buttons/filter-button.cjs');
-const filteredSearch = require('./filtered-search/filtered-search.cjs');
-const stringFilter = require('./filtered-search/model/string-filter.cjs');
-const stringSetFilter = require('./filtered-search/model/string-set-filter.cjs');
-const formField = require('./form-field/form-field.cjs');
-const label = require('./label/label.cjs');
-const menu = require('./menu/menu.cjs');
-const menuItem = require('./menu/menu-item.cjs');
-const menuSeparator = require('./menu/menu-separator.cjs');
-const navList = require('./nav-list/nav-list.cjs');
-const navListItem = require('./nav-list/nav-list-item.cjs');
-const navListTitle = require('./nav-list/nav-list-title.cjs');
-const passwordInput = require('./password-input/password-input.cjs');
-const popover = require('./popover/popover.cjs');
-const portal = require('./portal/portal.cjs');
-const positioner = require('./positioner/positioner.cjs');
-const radio = require('./radio/radio.cjs');
-const segmentedControl = require('./segmented-control/segmented-control.cjs');
-const select = require('./select/select.cjs');
-const selectionControl = require('./selection-control/selection-control.cjs');
-const slideOver = require('./slide-over/slide-over.cjs');
-const slideOverHeader = require('./slide-over/slide-over-header.cjs');
-const slideOverBody = require('./slide-over/slide-over-body.cjs');
-const slider = require('./slider/slider.cjs');
-const sliderTickMarks = require('./slider/slider-tick-marks.cjs');
-const spinner = require('./spinner/spinner.cjs');
-const _switch = require('./switch/switch.cjs');
-const tableContainer = require('./table/table-container.cjs');
-const table = require('./table/table.cjs');
-const tableHead = require('./table/table-head.cjs');
-const tableBody = require('./table/table-body.cjs');
-const tableRow = require('./table/table-row.cjs');
-const tableHeadCell = require('./table/table-head-cell.cjs');
-const tableCell = require('./table/table-cell.cjs');
-const tabs = require('./tabs/tabs.cjs');
-const tabList = require('./tabs/tab-list.cjs');
-const tab = require('./tabs/tab.cjs');
-const tabPanel = require('./tabs/tab-panel.cjs');
-const tag = require('./tag/tag.cjs');
-const textInput = require('./text-input/text-input.cjs');
-const textarea = require('./textarea/textarea.cjs');
-const toast = require('./toast/toast.cjs');
-const toastButton = require('./toast/toast-button.cjs');
-const toaster = require('./toaster/toaster.cjs');
-const tooltip = require('./tooltip/tooltip.cjs');
-
-
-
-exports.Alert = alert.Alert;
-exports.Avatar = avatar.Avatar;
-exports.AvatarGroup = avatarGroup.AvatarGroup;
-exports.Badge = badge.Badge;
-exports.Breadcrumbs = breadcrumbs.Breadcrumbs;
-exports.BreadcrumbsItem = breadcrumbsItem.BreadcrumbsItem;
-exports.Button = button.Button;
-exports.IconButton = iconButton.IconButton;
-exports.ButtonGroup = buttonGroup.ButtonGroup;
-exports.Caption = caption.Caption;
-exports.Checkbox = checkbox.Checkbox;
-exports.ColorPicker = colorPicker.ColorPicker;
-exports.DatePicker = datePicker.DatePicker;
-exports.DateRangePicker = dateRangePicker.DateRangePicker;
-exports.DatePickerPopover = datePickerPopover.DatePickerPopover;
-exports.DateRangePickerPopover = dateRangePickerPopover.DateRangePickerPopover;
-exports.Dialog = dialog.Dialog;
-exports.DialogHeader = dialogHeader.DialogHeader;
-exports.DialogBody = dialogBody.DialogBody;
-exports.DialogFooter = dialogFooter.DialogFooter;
-exports.EmptyState = emptyState.EmptyState;
-exports.FilePicker = filePicker.FilePicker;
-exports.FilterButtons = filterButtons.FilterButtons;
-exports.FilterButton = filterButton.FilterButton;
-exports.FilteredSearch = filteredSearch.FilteredSearch;
-exports.StringFilter = stringFilter.StringFilter;
-exports.StringSetFilter = stringSetFilter.StringSetFilter;
-exports.FormField = formField.FormField;
-exports.Label = label.Label;
-exports.Menu = menu.Menu;
-exports.MenuItem = menuItem.MenuItem;
-exports.MenuSeparator = menuSeparator.MenuSeparator;
-exports.NavList = navList.NavList;
-exports.NavListItem = navListItem.NavListItem;
-exports.NavListTitle = navListTitle.NavListTitle;
-exports.PasswordInput = passwordInput.PasswordInput;
-exports.Popover = popover.Popover;
-exports.Portal = portal.Portal;
-exports.Positioner = positioner.Positioner;
-exports.Radio = radio.Radio;
-exports.SegmentedControl = segmentedControl.SegmentedControl;
-exports.Select = select.Select;
-exports.SelectionControl = selectionControl.SelectionControl;
-exports.SlideOver = slideOver.SlideOver;
-exports.SlideOverHeader = slideOverHeader.SlideOverHeader;
-exports.SlideOverBody = slideOverBody.SlideOverBody;
-exports.Slider = slider.Slider;
-exports.SliderTickMarks = sliderTickMarks.SliderTickMarks;
-exports.Spinner = spinner.Spinner;
-exports.Switch = _switch.Switch;
-exports.TableContainer = tableContainer.TableContainer;
-exports.Table = table.Table;
-exports.TableHead = tableHead.TableHead;
-exports.TableBody = tableBody.TableBody;
-exports.TableRow = tableRow.TableRow;
-exports.TableHeadCell = tableHeadCell.TableHeadCell;
-exports.TableCell = tableCell.TableCell;
-exports.Tabs = tabs.Tabs;
-exports.TabList = tabList.TabList;
-exports.Tab = tab.Tab;
-exports.TabPanel = tabPanel.TabPanel;
-exports.Tag = tag.Tag;
-exports.TextInput = textInput.TextInput;
-exports.Textarea = textarea.Textarea;
-exports.Toast = toast.Toast;
-exports.ToastButton = toastButton.ToastButton;
-exports.Toaster = toaster.Toaster;
-exports.Tooltip = tooltip.Tooltip;

package/cjs/components/label/label.cjs

@@ -1,13 +0,0 @@
-'use strict';
-
-const jsxRuntime = require('react/jsx-runtime');
-const react = require('react');
-const reactHelpers = require('../../lib/react-helpers.cjs');
-
-const Label = react.forwardRef(function Label({ required = false, className = '', children, ...props }, ref) {
-    return (jsxRuntime.jsx("label", { ...props, ref: ref, className: reactHelpers.classNames(className, 'dc-label', {
-            'dc-label_required': required,
-        }), children: children }));
-});
-
-exports.Label = Label;

package/cjs/components/menu/menu-item.cjs

@@ -1,21 +0,0 @@
-'use strict';
-
-const jsxRuntime = require('react/jsx-runtime');
-const react = require('react');
-const reactHelpers = require('../../lib/react-helpers.cjs');
-
-const MenuItem = react.forwardRef(function MenuItem({ role = 'menuitem', appearance = 'default', leftIcon = null, rightIcon = null, className, children, ...props }, ref) {
-    let label = children;
-    if (leftIcon || rightIcon) {
-        const className = reactHelpers.classNames('dc-menu-btn__label', {
-            'dc-menu-btn__label_gap_left': leftIcon,
-            'dc-menu-btn__label_gap_right': rightIcon,
-        });
-        label = jsxRuntime.jsx("span", { className: className, children: label });
-    }
-    return (jsxRuntime.jsx("li", { role: "presentation", children: jsxRuntime.jsxs("button", { ...props, ref: ref, className: reactHelpers.classNames(className, 'dc-menu-btn', {
-                [`dc-menu-btn_${appearance}`]: appearance,
-            }), type: "button", role: role, tabIndex: -1, children: [leftIcon, label, rightIcon] }) }));
-});
-
-exports.MenuItem = MenuItem;

package/cjs/components/menu/menu-separator.cjs

@@ -1,10 +0,0 @@
-'use strict';
-
-const jsxRuntime = require('react/jsx-runtime');
-const reactHelpers = require('../../lib/react-helpers.cjs');
-
-function MenuSeparator({ className, ...props }) {
-    return (jsxRuntime.jsx("li", { ...props, className: reactHelpers.classNames('dc-menu__separator', className), role: "separator" }));
-}
-
-exports.MenuSeparator = MenuSeparator;

package/cjs/components/menu/menu.cjs

@@ -1,191 +0,0 @@
-'use strict';
-
-const jsxRuntime = require('react/jsx-runtime');
-const keyboardKeys = require('../../lib/keyboard-keys.cjs');
-const react = require('react');
-const reactHelpers = require('../../lib/react-helpers.cjs');
-const helpers = require('../../lib/helpers.cjs');
-const button = require('../button/button.cjs');
-require('../button/icon-button.cjs');
-const popover = require('../popover/popover.cjs');
-const menuItem = require('./menu-item.cjs');
-
-function Menu({ defaultIsOpen = false, placement = 'bottom', alignment = 'start', buttonClassName = '', buttonAppearance = 'default', buttonVariant = 'filled', button: button$1, className, children, onOpen, onClose, onKeyDown, ...props }) {
-    const id = react.useId();
-    const menuId = props.id || id;
-    const buttonId = `menu-button-${menuId}`;
-    const [isOpen, setIsOpen] = react.useState(defaultIsOpen);
-    const openMenu = () => {
-        setIsOpen(true);
-        onOpen?.();
-    };
-    const closeMenu = () => {
-        setIsOpen(false);
-        onClose?.();
-    };
-    const focusMenuButton = () => {
-        const menuButton = document.getElementById(buttonId);
-        helpers.assertIfNullable(menuButton, `Unable to get DOM element #${buttonId}`);
-        reactHelpers.focusElement(menuButton);
-    };
-    const focusNextMenuItem = () => {
-        const menuItems = getMenuItems(menuId);
-        let index = menuItems.findIndex((el) => el === document.activeElement);
-        index += 1;
-        if (index >= menuItems.length) {
-            index = 0;
-        }
-        reactHelpers.focusElement(menuItems[index]);
-    };
-    const focusPrevMenuItem = () => {
-        const menuItems = getMenuItems(menuId);
-        let index = menuItems.findIndex((el) => el === document.activeElement);
-        index -= 1;
-        if (index < 0) {
-            index = menuItems.length - 1;
-        }
-        reactHelpers.focusElement(menuItems[index]);
-    };
-    const focusFirstMenuItem = () => {
-        const menuItems = getMenuItems(menuId);
-        reactHelpers.focusElement(menuItems[0]);
-    };
-    const focusLastMenuItem = () => {
-        const menuItems = getMenuItems(menuId);
-        reactHelpers.focusElement(menuItems[menuItems.length - 1]);
-    };
-    const focusMenuItemByFirstChar = (char) => {
-        if (char.length > 1) {
-            return;
-        }
-        char = char.toLowerCase();
-        const menuItems = getMenuItems(menuId);
-        if (menuItems.length === 0) {
-            return;
-        }
-        const firstChars = menuItems.map((el) => {
-            if (el.textContent) {
-                return el.textContent[0].toLowerCase();
-            }
-            return '';
-        });
-        const activeMenuItemIndex = menuItems.findIndex((el) => el === document.activeElement);
-        let fromIndex = activeMenuItemIndex + 1;
-        if (fromIndex >= firstChars.length) {
-            fromIndex = 0;
-        }
-        let index = firstChars.indexOf(char, fromIndex);
-        if (index === -1 && fromIndex !== 0) {
-            index = firstChars.indexOf(char);
-        }
-        reactHelpers.focusElement(menuItems[index]);
-    };
-    const handleButtonClick = (event) => {
-        if (isOpen) {
-            closeMenu();
-        }
-        else {
-            openMenu();
-        }
-        focusMenuButton();
-        event.preventDefault();
-        event.stopPropagation();
-    };
-    const handleButtonKeyDown = (event) => {
-        if (event.key === keyboardKeys.KeyboardKeys.ArrowUp ||
-            event.key === keyboardKeys.KeyboardKeys.ArrowDown ||
-            event.key === keyboardKeys.KeyboardKeys.Enter ||
-            event.key === keyboardKeys.KeyboardKeys.Space) {
-            openMenu();
-            window.setTimeout(event.key === keyboardKeys.KeyboardKeys.ArrowUp
-                ? focusLastMenuItem
-                : focusFirstMenuItem);
-            event.preventDefault();
-            event.stopPropagation();
-        }
-    };
-    const handleMenuKeyDown = (event) => {
-        if (event.ctrlKey || event.altKey || event.metaKey) {
-            return;
-        }
-        let handled = false;
-        if (event.key === keyboardKeys.KeyboardKeys.ArrowUp) {
-            focusPrevMenuItem();
-            handled = true;
-        }
-        else if (event.key === keyboardKeys.KeyboardKeys.ArrowDown) {
-            focusNextMenuItem();
-            handled = true;
-        }
-        else if (event.key === keyboardKeys.KeyboardKeys.Home) {
-            focusFirstMenuItem();
-            handled = true;
-        }
-        else if (event.key === keyboardKeys.KeyboardKeys.End) {
-            focusLastMenuItem();
-            handled = true;
-        }
-        else if (event.key === keyboardKeys.KeyboardKeys.Tab) {
-            closeMenu();
-            if (event.shiftKey) {
-                focusMenuButton();
-                handled = true;
-            }
-        }
-        else if (event.key.match(/^\S$/)) {
-            focusMenuItemByFirstChar(event.key);
-            handled = true;
-        }
-        if (handled) {
-            event.preventDefault();
-            event.stopPropagation();
-        }
-        onKeyDown?.(event);
-    };
-    const renderAnchor = ({ ref }) => {
-        if (typeof button$1 === 'function') {
-            return button$1({
-                ref,
-                'id': buttonId,
-                'aria-haspopup': true,
-                'aria-expanded': isOpen,
-                'aria-controls': menuId,
-                'onClick': handleButtonClick,
-                'onKeyDown': handleButtonKeyDown,
-            }, {
-                isOpen,
-                openMenu,
-                closeMenu,
-            });
-        }
-        return (jsxRuntime.jsx(button.Button, { "data-testid": "menu-button", ref: ref, id: buttonId, "aria-haspopup": true, "aria-expanded": isOpen, "aria-controls": menuId, onClick: handleButtonClick, onKeyDown: handleButtonKeyDown, className: buttonClassName, appearance: buttonAppearance, variant: buttonVariant, children: button$1 }));
-    };
-    return (jsxRuntime.jsx(popover.Popover, { className: "dc-menu__container", placement: placement, alignment: alignment, anchor: renderAnchor, isOpen: isOpen, onClose: closeMenu, children: jsxRuntime.jsx("ul", { ...props, className: reactHelpers.classNames('dc-menu', className), role: "menu", id: menuId, "aria-labelledby": buttonId, onKeyDown: handleMenuKeyDown, children: react.Children.map(children, (child) => {
-                if (isMenuItem(child)) {
-                    const props = child.props;
-                    const onClick = (event) => {
-                        props.onClick?.(event);
-                        closeMenu();
-                    };
-                    const onMouseEnter = (event) => {
-                        reactHelpers.focusElement(event.currentTarget);
-                        props.onMouseEnter?.(event);
-                    };
-                    return react.cloneElement(child, { onClick, onMouseEnter });
-                }
-                return child;
-            }) }) }));
-}
-function isMenuItem(el) {
-    return react.isValidElement(el) && el.type === menuItem.MenuItem;
-}
-function getMenuItems(menuId) {
-    const menuEl = window.document.getElementById(menuId);
-    if (!menuEl) {
-        return [];
-    }
-    const nodes = menuEl.querySelectorAll('button[role="menuitem"], button[role="menuitemradio"]');
-    return Array.from(nodes);
-}
-
-exports.Menu = Menu;

package/cjs/components/nav-list/nav-list-item.cjs

@@ -1,20 +0,0 @@
-'use strict';
-
-const jsxRuntime = require('react/jsx-runtime');
-const reactHelpers = require('../../lib/react-helpers.cjs');
-const badge = require('../badge/badge.cjs');
-
-function NavListItem({ className, icon, badge: badge$1, children, renderAs, ...props }) {
-    className = reactHelpers.classNames(className, 'dc-nav-link');
-    children = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [icon != null && jsxRuntime.jsxs("div", { className: "dc-nav-link__icon", children: [icon, " "] }), jsxRuntime.jsx("div", { className: "dc-nav-link__text", children: children }), badge$1 != null && jsxRuntime.jsxs(jsxRuntime.Fragment, { children: ["\u00A0", jsxRuntime.jsx(badge.Badge, { className: "dc-nav-link__badge", children: badge$1 })] })] }));
-    let content;
-    if (typeof renderAs === 'function') {
-        content = renderAs({ className, children });
-    }
-    else {
-        content = jsxRuntime.jsx("a", { ...props, className: className, children: children });
-    }
-    return jsxRuntime.jsx("li", { className: "dc-nav-list__item", children: content });
-}
-
-exports.NavListItem = NavListItem;

package/cjs/components/nav-list/nav-list-title.cjs

@@ -1,10 +0,0 @@
-'use strict';
-
-const jsxRuntime = require('react/jsx-runtime');
-const reactHelpers = require('../../lib/react-helpers.cjs');
-
-function NavListTitle({ className, children, ...props }) {
-    return (jsxRuntime.jsx("li", { ...props, className: reactHelpers.classNames('dc-nav-list__title', className), children: children }));
-}
-
-exports.NavListTitle = NavListTitle;

package/cjs/components/nav-list/nav-list.cjs

@@ -1,10 +0,0 @@
-'use strict';
-
-const jsxRuntime = require('react/jsx-runtime');
-const reactHelpers = require('../../lib/react-helpers.cjs');
-
-function NavList({ className, children, ...props }) {
-    return (jsxRuntime.jsx("nav", { ...props, className: reactHelpers.classNames('dc-nav-list', className), children: jsxRuntime.jsx("ul", { className: "dc-nav-list__items", children: children }) }));
-}
-
-exports.NavList = NavList;

package/cjs/components/password-input/icons.cjs

@@ -1,13 +0,0 @@
-'use strict';
-
-const jsxRuntime = require('react/jsx-runtime');
-
-function EyeIcon(props) {
-    return (jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: 24, height: 24, fill: "none", strokeWidth: 1.5, stroke: "currentColor", ...props, children: [jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" }), jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z" })] }));
-}
-function EyeSlashIcon(props) {
-    return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: 24, height: 24, fill: "none", strokeWidth: 1.5, stroke: "currentColor", ...props, children: jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88" }) }));
-}
-
-exports.EyeIcon = EyeIcon;
-exports.EyeSlashIcon = EyeSlashIcon;

package/cjs/components/password-input/password-input.cjs

@@ -1,30 +0,0 @@
-'use strict';
-
-const jsxRuntime = require('react/jsx-runtime');
-const react = require('react');
-const reactHelpers = require('../../lib/react-helpers.cjs');
-const textInput = require('../text-input/text-input.cjs');
-const tooltip = require('../tooltip/tooltip.cjs');
-const icons = require('./icons.cjs');
-
-const PasswordInput = react.forwardRef(function PasswordInput({ isDefaultVisible = false, showPasswordTitle = 'Show password', hidePasswordTitle = 'Hide password', className, ...props }, ref) {
-    const [visible, setVisible] = react.useState(isDefaultVisible);
-    let type;
-    let content;
-    let Icon;
-    if (visible) {
-        type = 'text';
-        content = hidePasswordTitle;
-        Icon = icons.EyeIcon;
-    }
-    else {
-        type = 'password';
-        content = showPasswordTitle;
-        Icon = icons.EyeSlashIcon;
-    }
-    const handleButtonClick = () => setVisible(!visible);
-    const renderRightAddOn = ({ className }) => (jsxRuntime.jsx("div", { className: reactHelpers.classNames('dc-password-input__right-addon', className), children: jsxRuntime.jsx(tooltip.Tooltip, { content: content, children: jsxRuntime.jsx("button", { className: "dc-password-input__btn", type: "button", onClick: handleButtonClick, children: jsxRuntime.jsx(Icon, { className: "dc-password-input__icon", "aria-hidden": true }) }) }) }));
-    return (jsxRuntime.jsx(textInput.TextInput, { ...props, className: reactHelpers.classNames('dc-password-input', className), ref: ref, type: type, rightAddOn: renderRightAddOn }));
-});
-
-exports.PasswordInput = PasswordInput;

package/cjs/components/popover/popover.cjs

@@ -1,96 +0,0 @@
-'use strict';
-
-const jsxRuntime = require('react/jsx-runtime');
-const react = require('react');
-const reactHelpers = require('../../lib/react-helpers.cjs');
-const useMountTransition = require('../../hooks/use-mount-transition.cjs');
-const useEscKeyDown = require('../../hooks/use-esc-key-down.cjs');
-const useFocusTrap = require('../../hooks/use-focus-trap.cjs');
-const usePageClick = require('./use-page-click.cjs');
-const positioner = require('../positioner/positioner.cjs');
-
-const Popover = react.forwardRef(function Popover({ shouldTrapFocus = true, shouldFocusAnchorAfterEscPress = true, transitionDurationMs = 100, placement = 'bottom', alignment = 'start', anchorGap, viewportGap, anchor, className, children, onOpen, onClose, ...props }, ref) {
-    const [defaultIsOpen, setDefaultIsOpen] = react.useState(props.defaultIsOpen ?? false);
-    const anchorRef = react.useRef(null);
-    const contentRef = react.useRef(null);
-    const isOpen = props.isOpen ?? defaultIsOpen;
-    const { isMounted, className: transitionClass } = useMountTransition.useMountTransition({
-        durationMs: transitionDurationMs,
-        isShown: isOpen,
-        enterFrom: 'dc-popover_closed',
-        enterTo: 'dc-popover_opened',
-    });
-    const openPopover = react.useCallback(() => {
-        setDefaultIsOpen(true);
-        onOpen?.();
-    }, [onOpen]);
-    const closePopover = react.useCallback(() => {
-        setDefaultIsOpen(false);
-        onClose?.();
-    }, [onClose]);
-    const togglePopover = react.useCallback(() => {
-        if (isOpen) {
-            closePopover();
-        }
-        else {
-            openPopover();
-        }
-    }, [isOpen, closePopover, openPopover]);
-    react.useImperativeHandle(ref, () => ({
-        open: openPopover,
-        close: closePopover,
-        toggle: togglePopover,
-    }), [openPopover, closePopover, togglePopover]);
-    usePageClick.usePageClick((event) => {
-        const target = event.target;
-        const anchor = anchorRef.current;
-        const content = contentRef.current;
-        if (target instanceof Node &&
-            !anchor?.contains(target) &&
-            !content?.contains(target)) {
-            closePopover();
-        }
-    }, { isEnabled: isOpen });
-    useEscKeyDown.useEscKeyDown(() => {
-        closePopover();
-        if (shouldFocusAnchorAfterEscPress && anchorRef.current) {
-            reactHelpers.focusElement(anchorRef.current);
-        }
-    }, { isEnabled: isOpen });
-    useFocusTrap.useFocusTrap(contentRef, { isEnabled: shouldTrapFocus && isOpen });
-    const renderAnchor = ({ setRef }) => {
-        if (typeof anchor === 'function') {
-            return anchor({
-                ref: reactHelpers.mergeRefs(setRef, anchorRef),
-            }, {
-                isOpen: isOpen || isMounted,
-                openPopover,
-                closePopover,
-                togglePopover,
-            });
-        }
-        if (reactHelpers.isReactElementWithRef(anchor)) {
-            return react.cloneElement(anchor, {
-                ref: reactHelpers.mergeRefs(setRef, anchorRef, anchor.ref),
-                onClick: (event) => {
-                    togglePopover();
-                    anchor.props.onClick?.(event);
-                },
-            });
-        }
-        return anchor;
-    };
-    const renderContent = ({ setRef: portalRef, style: portalStyle, }) => {
-        if (isOpen || isMounted) {
-            delete props.defaultIsOpen;
-            delete props.isOpen;
-            return (jsxRuntime.jsx("div", { ref: portalRef, style: {
-                    '--dc-popover-transition-duration': `${transitionDurationMs}ms`,
-                    ...portalStyle,
-                }, className: reactHelpers.classNames('dc-popover', transitionClass), children: jsxRuntime.jsx("div", { ...props, ref: contentRef, className: reactHelpers.classNames('dc-popover-modal', className), children: children }) }));
-        }
-    };
-    return (jsxRuntime.jsx(positioner.Positioner, { position: "absolute", placement: placement, alignment: alignment, anchorGap: anchorGap, viewportGap: viewportGap, renderAnchor: renderAnchor, renderContent: renderContent }));
-});
-
-exports.Popover = Popover;

package/cjs/components/popover/use-page-click.cjs

@@ -1,51 +0,0 @@
-'use strict';
-
-const react = require('react');
-
-const handlers = [];
-/**
- * Invokes a given handler when the user clicks on any place on the page.
- * When multiple handlers are registered, only the last one will be invoked.
- * This behavior is used to close only top-level popover.
- *
- * @param handler The click handler.
- * @param options An object with hook options.
- * @param options.isEnabled - A flag that determines whether to run
- * the passed handler or not.
- */
-function usePageClick(handler, options) {
-    const handlerRef = react.useRef(handler);
-    const isEnabled = options.isEnabled;
-    react.useEffect(() => {
-        handlerRef.current = handler;
-    }, [handler]);
-    react.useEffect(() => {
-        if (!isEnabled) {
-            return;
-        }
-        const handler = handlerRef.current;
-        handlers.push(handler);
-        const handleBodyClick = (event) => {
-            const handleEvent = handlers[handlers.length - 1];
-            if (handleEvent) {
-                handleEvent(event);
-            }
-        };
-        // Add only one global `body` click handler.
-        if (handlers.length === 1) {
-            document.addEventListener('click', handleBodyClick, true);
-        }
-        return () => {
-            const index = handlers.indexOf(handler);
-            if (index >= 0) {
-                handlers.splice(index, 1);
-            }
-            // Remove the global `body` click handler if there are no active handlers.
-            if (handlers.length === 0) {
-                document.removeEventListener('click', handleBodyClick, true);
-            }
-        };
-    }, [isEnabled]);
-}
-
-exports.usePageClick = usePageClick;

package/cjs/components/portal/portal-context.cjs

@@ -1,22 +0,0 @@
-'use strict';
-
-require('react/jsx-runtime');
-const react = require('react');
-
-let root = null;
-const getPortalRoot = () => {
-    if (root == null) {
-        root = document.createElement('div');
-        root.id = 'portal-root';
-        root.dataset.testid = 'portal-root';
-        document.body.append(root);
-    }
-    return root;
-};
-const PortalContext = react.createContext(getPortalRoot);
-function usePortalRoot() {
-    const getRoot = react.useContext(PortalContext);
-    return getRoot();
-}
-
-exports.usePortalRoot = usePortalRoot;

package/cjs/components/portal/portal.cjs

@@ -1,11 +0,0 @@
-'use strict';
-
-const reactDom = require('react-dom');
-const portalContext = require('./portal-context.cjs');
-
-function Portal({ children }) {
-    const container = portalContext.usePortalRoot();
-    return reactDom.createPortal(children, container);
-}
-
-exports.Portal = Portal;