draft-components 1.0.0-beta.1 → 1.0.0-beta.11

package/esm/components/empty-state/empty-state.js

@@ -1,5 +1,8 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { classNames } from '../../shared/react-helpers';
-export function EmptyState({ className, image, heading, description, primaryAction, secondaryAction, children, }) {
-    return (_jsxs("section", { className: classNames('dc-empty-state', className), children: [Boolean(image) && (_jsx("div", { className: "dc-empty-state__image", children: image })), Boolean(heading) && (_jsx("h1", { className: "dc-empty-state__heading", children: heading })), Boolean(description) && (_jsx("div", { className: "dc-empty-state__description", children: description })), Boolean(primaryAction) && (_jsx("div", { className: "dc-empty-state__primary-action", children: primaryAction })), Boolean(secondaryAction) && (_jsx("div", { className: "dc-empty-state__secondary-action", children: secondaryAction })), Boolean(children) && (_jsx("div", { className: "dc-empty-state__content", children: children }))] }));
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { classNames } from '../../lib/react-helpers.js';
+
+function EmptyState({ className, image, heading, description, primaryAction, secondaryAction, children, }) {
+    return (jsxs("section", { className: classNames('dc-empty-state', className), children: [Boolean(image) && (jsx("div", { className: "dc-empty-state__image", children: image })), Boolean(heading) && (jsx("h1", { className: "dc-empty-state__heading", children: heading })), Boolean(description) && (jsx("div", { className: "dc-empty-state__description", children: description })), Boolean(primaryAction) && (jsx("div", { className: "dc-empty-state__primary-action", children: primaryAction })), Boolean(secondaryAction) && (jsx("div", { className: "dc-empty-state__secondary-action", children: secondaryAction })), Boolean(children) && (jsx("div", { className: "dc-empty-state__content", children: children }))] }));
 }
+
+export { EmptyState };

package/esm/components/file-picker/file-picker.js

@@ -1,15 +1,17 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useId, useRef, useState, } from 'react';
-import { classNames, mergeRefs } from '../../shared/react-helpers';
-import { Button } from '../button';
-export const FilePicker = forwardRef(function FilePicker({ label, icon, caption, buttonLabel = 'Browse', id, style, className, disabled, onSelectFiles, ...props }, ref) {
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useId, useRef, useState } from 'react';
+import { classNames, mergeRefs } from '../../lib/react-helpers.js';
+import { Button } from '../button/button.js';
+import '../button/icon-button.js';
+
+const FilePicker = forwardRef(function FilePicker({ label, icon, caption, buttonLabel = 'Browse', id, style, className, disabled, onSelectFiles, ...props }, ref) {
     const defaultId = useId();
     const inputId = id || defaultId;
     const inputRef = useRef(null);
     const [draggingOver, setDraggingOver] = useState(false);
     const handleChange = (event) => {
         const fileList = event.target.files;
-        onSelectFiles === null || onSelectFiles === void 0 ? void 0 : onSelectFiles(fileList ? Array.from(fileList) : []);
+        onSelectFiles?.(fileList ? Array.from(fileList) : []);
     };
     const handleDragOver = (event) => {
         event.preventDefault();
@@ -31,11 +33,13 @@ export const FilePicker = forwardRef(function FilePicker({ label, icon, caption,
         if (!disabled) {
             setDraggingOver(false);
             const fileList = event.dataTransfer.files;
-            onSelectFiles === null || onSelectFiles === void 0 ? void 0 : onSelectFiles(fileList ? Array.from(fileList) : []);
+            onSelectFiles?.(fileList ? Array.from(fileList) : []);
         }
     };
-    return (_jsxs("div", { style: style, className: classNames(className, 'dc-file-picker', {
+    return (jsxs("div", { style: style, className: classNames(className, 'dc-file-picker', {
             'dc-file-picker_disabled': disabled,
             'dc-file-picker_dragging-over': draggingOver,
-        }), onDragOver: handleDragOver, onDragLeave: handleDragEnd, onDrop: handleDrop, "data-testid": "file-picker", children: [_jsx("input", { ...props, id: inputId, ref: mergeRefs(ref, inputRef), className: "dc-file-picker__input", type: "file", disabled: disabled, onChange: handleChange }), _jsxs("div", { className: "dc-file-picker__body", children: [Boolean(icon) && (_jsx("div", { className: "dc-file-picker__icon", children: icon })), _jsxs("div", { children: [_jsx("label", { className: "dc-file-picker__label", htmlFor: inputId, children: label }), Boolean(caption) && (_jsx("div", { className: "dc-file-picker__caption", children: caption }))] })] }), _jsx(Button, { className: "dc-file-picker__button", onClick: () => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, children: buttonLabel })] }));
+        }), onDragOver: handleDragOver, onDragLeave: handleDragEnd, onDrop: handleDrop, "data-testid": "file-picker", children: [jsx("input", { ...props, id: inputId, ref: mergeRefs(ref, inputRef), className: "dc-file-picker__input", type: "file", disabled: disabled, onChange: handleChange }), jsxs("div", { className: "dc-file-picker__body", children: [Boolean(icon) && (jsx("div", { className: "dc-file-picker__icon", children: icon })), jsxs("div", { children: [jsx("label", { className: "dc-file-picker__label", htmlFor: inputId, children: label }), Boolean(caption) && (jsx("div", { className: "dc-file-picker__caption", children: caption }))] })] }), jsx(Button, { className: "dc-file-picker__button", onClick: () => inputRef.current?.click(), children: buttonLabel })] }));
 });
+
+export { FilePicker };

package/esm/components/filter-buttons/filter-button.js

@@ -1,6 +1,9 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { classNames } from '../../shared/react-helpers';
-export const FilterButton = forwardRef(function FilterButton({ isActive = false, 'aria-pressed': ariaPressed = isActive, className, children, ...props }, ref) {
-    return (_jsx("button", { ...props, ref: ref, className: classNames('dc-filter-button', isActive && 'active', className), "data-active": isActive, "aria-pressed": ariaPressed, children: children }));
+import { classNames } from '../../lib/react-helpers.js';
+
+const FilterButton = forwardRef(function FilterButton({ isActive = false, 'aria-pressed': ariaPressed = isActive, className, children, ...props }, ref) {
+    return (jsx("button", { ...props, ref: ref, className: classNames('dc-filter-button', isActive && 'active', className), "data-active": isActive, "aria-pressed": ariaPressed, children: children }));
 });
+
+export { FilterButton };

package/esm/components/filter-buttons/filter-buttons.js

@@ -1,8 +1,9 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useRef, useLayoutEffect, } from 'react';
-import { assertIfNullable } from '../../shared/util';
-import { classNames } from '../../shared/react-helpers';
-export function FilterButtons({ className, children, ...props }) {
+import { jsx } from 'react/jsx-runtime';
+import { useRef, useLayoutEffect } from 'react';
+import { assertIfNullable } from '../../lib/helpers.js';
+import { classNames } from '../../lib/react-helpers.js';
+
+function FilterButtons({ className, children, ...props }) {
     const ref = useRef(null);
     useLayoutEffect(() => {
         const el = ref.current;
@@ -18,5 +19,7 @@ export function FilterButtons({ className, children, ...props }) {
             }
         }
     }, []);
-    return (_jsx("div", { ...props, ref: ref, role: "group", className: classNames(className, 'dc-filter-buttons'), children: children }));
+    return (jsx("div", { ...props, ref: ref, role: "group", className: classNames(className, 'dc-filter-buttons'), children: children }));
 }
+
+export { FilterButtons };

package/esm/components/form-field/form-field.js

@@ -1,21 +1,24 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { useId } from 'react';
-import { classNames } from '../../shared/react-helpers';
-import { Label } from '../label';
-import { Caption } from '../caption';
-export function FormField({ required = false, labelFor = '', label, caption, error, className = '', children, ...props }) {
+import { classNames } from '../../lib/react-helpers.js';
+import { Label } from '../label/label.js';
+import { Caption } from '../caption/caption.js';
+
+function FormField({ required = false, labelFor = '', label, caption, error, className = '', children, ...props }) {
     const defaultId = useId();
     const id = labelFor || defaultId;
     const hasError = Boolean(error);
     const shouldRenderLabel = Boolean(label);
     let captionEl = null;
     if (hasError) {
-        captionEl = (_jsx(Caption, { className: "dc-form-field__error", appearance: "error", showIcon: true, children: error }));
+        captionEl = (jsx(Caption, { className: "dc-form-field__error", appearance: "error", showIcon: true, children: error }));
     }
     else if (caption) {
-        captionEl = _jsx(Caption, { className: "dc-form-field__caption", children: caption });
+        captionEl = jsx(Caption, { className: "dc-form-field__caption", children: caption });
     }
-    return (_jsxs("div", { ...props, className: classNames('dc-form-field', className), children: [shouldRenderLabel && (_jsx(Label, { className: "dc-form-field__label", htmlFor: id, required: required, children: label })), _jsx("div", { className: "dc-form-field__input", children: typeof children === 'function'
+    return (jsxs("div", { ...props, className: classNames('dc-form-field', className), children: [shouldRenderLabel && (jsx(Label, { className: "dc-form-field__label", htmlFor: id, required: required, children: label })), jsx("div", { className: "dc-form-field__input", children: typeof children === 'function'
                     ? children({ id, required, hasError })
                     : children }), captionEl] }));
 }
+
+export { FormField };

package/esm/components/index.js

@@ -0,0 +1,62 @@
+export { Alert } from './alert/alert.js';
+export { Avatar } from './avatar/avatar.js';
+export { AvatarGroup } from './avatar-group/avatar-group.js';
+export { Badge } from './badge/badge.js';
+export { Breadcrumbs } from './breadcrumbs/breadcrumbs.js';
+export { BreadcrumbsItem } from './breadcrumbs/breadcrumbs-item.js';
+export { Button } from './button/button.js';
+export { IconButton } from './button/icon-button.js';
+export { ButtonGroup } from './button-group/button-group.js';
+export { Caption } from './caption/caption.js';
+export { Checkbox } from './checkbox/checkbox.js';
+export { ColorPicker } from './color-picker/color-picker.js';
+export { DatePicker } from './date-picker/date-picker.js';
+export { DateRangePicker } from './date-picker/date-range-picker.js';
+export { DatePickerPopover } from './date-picker-popover/date-picker-popover.js';
+export { DateRangePickerPopover } from './date-range-picker-popover/date-range-picker-popover.js';
+export { Dialog } from './dialog/dialog.js';
+export { DialogHeader } from './dialog/dialog-header.js';
+export { DialogBody } from './dialog/dialog-body.js';
+export { DialogFooter } from './dialog/dialog-footer.js';
+export { EmptyState } from './empty-state/empty-state.js';
+export { FilePicker } from './file-picker/file-picker.js';
+export { FilterButtons } from './filter-buttons/filter-buttons.js';
+export { FilterButton } from './filter-buttons/filter-button.js';
+export { FormField } from './form-field/form-field.js';
+export { Label } from './label/label.js';
+export { Menu } from './menu/menu.js';
+export { MenuItem } from './menu/menu-item.js';
+export { MenuSeparator } from './menu/menu-separator.js';
+export { NavList } from './nav-list/nav-list.js';
+export { NavListItem } from './nav-list/nav-list-item.js';
+export { NavListTitle } from './nav-list/nav-list-title.js';
+export { PasswordInput } from './password-input/password-input.js';
+export { Popover } from './popover/popover.js';
+export { Portal } from './portal/portal.js';
+export { Positioner } from './positioner/positioner.js';
+export { Radio } from './radio/radio.js';
+export { SegmentedControl } from './segmented-control/segmented-control.js';
+export { Select } from './select/select.js';
+export { SelectionControl } from './selection-control/selection-control.js';
+export { Slider } from './slider/slider.js';
+export { SliderTickMarks } from './slider/slider-tick-marks.js';
+export { Spinner } from './spinner/spinner.js';
+export { Switch } from './switch/switch.js';
+export { TableContainer } from './table/table-container.js';
+export { Table } from './table/table.js';
+export { TableHead } from './table/table-head.js';
+export { TableBody } from './table/table-body.js';
+export { TableRow } from './table/table-row.js';
+export { TableHeadCell } from './table/table-head-cell.js';
+export { TableCell } from './table/table-cell.js';
+export { Tabs } from './tabs/tabs.js';
+export { TabList } from './tabs/tab-list.js';
+export { Tab } from './tabs/tab.js';
+export { TabPanel } from './tabs/tab-panel.js';
+export { Tag } from './tag/tag.js';
+export { TextInput } from './text-input/text-input.js';
+export { Textarea } from './textarea/textarea.js';
+export { Toast } from './toast/toast.js';
+export { ToastButton } from './toast/toast-button.js';
+export { Toaster } from './toaster/toaster.js';
+export { Tooltip } from './tooltip/tooltip.js';

package/esm/components/label/label.js

@@ -1,8 +1,11 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { classNames } from '../../shared/react-helpers';
-export const Label = forwardRef(function Label({ required = false, className = '', children, ...props }, ref) {
-    return (_jsx("label", { ...props, ref: ref, className: classNames(className, 'dc-label', {
+import { classNames } from '../../lib/react-helpers.js';
+
+const Label = forwardRef(function Label({ required = false, className = '', children, ...props }, ref) {
+    return (jsx("label", { ...props, ref: ref, className: classNames(className, 'dc-label', {
             'dc-label_required': required,
         }), children: children }));
 });
+
+export { Label };

package/esm/components/menu/menu-item.js

@@ -1,9 +1,19 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, } from 'react';
-import { classNames } from '../../shared/react-helpers';
-export const MenuItem = forwardRef(function MenuItem({ icon = null, appearance = 'default', className, children, ...props }, ref) {
-    return (_jsx("li", { role: "presentation", children: _jsxs("button", { ...props, ref: ref, className: classNames(className, {
-                'dc-menu-btn': true,
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { classNames } from '../../lib/react-helpers.js';
+
+const MenuItem = forwardRef(function MenuItem({ role = 'menuitem', appearance = 'default', iconLeft = null, iconRight = null, className, children, ...props }, ref) {
+    let label = children;
+    if (iconLeft || iconRight) {
+        const className = classNames('dc-menu-btn__label', {
+            'dc-menu-btn__label_gap_left': iconLeft,
+            'dc-menu-btn__label_gap_right': iconRight,
+        });
+        label = jsx("span", { className: className, children: label });
+    }
+    return (jsx("li", { role: "presentation", children: jsxs("button", { ...props, ref: ref, className: classNames(className, 'dc-menu-btn', {
                 [`dc-menu-btn_${appearance}`]: appearance,
-            }), type: "button", role: "menuitem", tabIndex: -1, children: [Boolean(icon) && _jsx("span", { className: "dc-menu-btn__icon", children: icon }), _jsx("span", { className: "dc-menu-btn__label", children: children })] }) }));
+            }), type: "button", role: role, tabIndex: -1, children: [iconLeft, label, iconRight] }) }));
 });
+
+export { MenuItem };

package/esm/components/menu/menu-separator.js

@@ -1,5 +1,8 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { classNames } from '../../shared/react-helpers';
-export function MenuSeparator({ className, ...props }) {
-    return (_jsx("li", { ...props, className: classNames('dc-menu__separator', className), role: "separator" }));
+import { jsx } from 'react/jsx-runtime';
+import { classNames } from '../../lib/react-helpers.js';
+
+function MenuSeparator({ className, ...props }) {
+    return (jsx("li", { ...props, className: classNames('dc-menu__separator', className), role: "separator" }));
 }
+
+export { MenuSeparator };

package/esm/components/menu/menu.js

@@ -1,23 +1,25 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { KeyboardKeys } from '../../shared/keyboard-keys';
-import { Children, cloneElement, isValidElement, useId, useState, } from 'react';
-import { classNames, focusElement } from '../../shared/react-helpers';
-import { assertIfNullable } from '../../shared/util';
-import { Button, } from '../button';
-import { Popover, } from '../popover';
-import { MenuItem } from './menu-item';
-export function Menu({ defaultIsOpen = false, placement = 'bottom', alignment = 'start', buttonAppearance = 'default', buttonVariant = 'filled', button, className, children, onOpen, onClose, onKeyDown, ...props }) {
+import { jsx } from 'react/jsx-runtime';
+import { KeyboardKeys } from '../../lib/keyboard-keys.js';
+import { useId, useState, Children, cloneElement, isValidElement } from 'react';
+import { classNames, focusElement } from '../../lib/react-helpers.js';
+import { assertIfNullable } from '../../lib/helpers.js';
+import { Button } from '../button/button.js';
+import '../button/icon-button.js';
+import { Popover } from '../popover/popover.js';
+import { MenuItem } from './menu-item.js';
+
+function Menu({ defaultIsOpen = false, placement = 'bottom', alignment = 'start', buttonClassName = '', buttonAppearance = 'default', buttonVariant = 'filled', button, className, children, onOpen, onClose, onKeyDown, ...props }) {
     const id = useId();
     const menuId = props.id || id;
     const buttonId = `menu-button-${menuId}`;
     const [isOpen, setIsOpen] = useState(defaultIsOpen);
     const openMenu = () => {
         setIsOpen(true);
-        onOpen === null || onOpen === void 0 ? void 0 : onOpen();
+        onOpen?.();
     };
     const closeMenu = () => {
         setIsOpen(false);
-        onClose === null || onClose === void 0 ? void 0 : onClose();
+        onClose?.();
     };
     const focusMenuButton = () => {
         const menuButton = document.getElementById(buttonId);
@@ -63,9 +65,7 @@ export function Menu({ defaultIsOpen = false, placement = 'bottom', alignment =
             if (el.textContent) {
                 return el.textContent[0].toLowerCase();
             }
-            else {
-                return '';
-            }
+            return '';
         });
         const activeMenuItemIndex = menuItems.findIndex((el) => el === document.activeElement);
         let fromIndex = activeMenuItemIndex + 1;
@@ -81,12 +81,11 @@ export function Menu({ defaultIsOpen = false, placement = 'bottom', alignment =
     const handleButtonClick = (event) => {
         if (isOpen) {
             closeMenu();
-            focusMenuButton();
         }
         else {
             openMenu();
-            window.setTimeout(focusFirstMenuItem);
         }
+        focusMenuButton();
         event.preventDefault();
         event.stopPropagation();
     };
@@ -139,38 +138,36 @@ export function Menu({ defaultIsOpen = false, placement = 'bottom', alignment =
             event.preventDefault();
             event.stopPropagation();
         }
-        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
+        onKeyDown?.(event);
     };
     const renderAnchor = ({ ref }) => {
         if (typeof button === 'function') {
             return button({
                 ref,
-                id: buttonId,
+                'id': buttonId,
                 'aria-haspopup': true,
                 'aria-expanded': isOpen,
                 'aria-controls': menuId,
-                onClick: handleButtonClick,
-                onKeyDown: handleButtonKeyDown,
+                'onClick': handleButtonClick,
+                'onKeyDown': handleButtonKeyDown,
             }, {
                 isOpen,
                 openMenu,
                 closeMenu,
             });
         }
-        return (_jsx(Button, { ref: ref, id: buttonId, "aria-haspopup": true, "aria-expanded": isOpen, "aria-controls": menuId, onClick: handleButtonClick, onKeyDown: handleButtonKeyDown, appearance: buttonAppearance, variant: buttonVariant, children: button }));
+        return (jsx(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 }));
     };
-    return (_jsx(Popover, { className: "dc-menu__container", placement: placement, alignment: alignment, anchor: renderAnchor, isOpen: isOpen, onClose: closeMenu, children: _jsx("ul", { ...props, className: classNames('dc-menu', className), role: "menu", id: menuId, "aria-labelledby": buttonId, onKeyDown: handleMenuKeyDown, children: Children.map(children, (child) => {
+    return (jsx(Popover, { className: "dc-menu__container", placement: placement, alignment: alignment, anchor: renderAnchor, isOpen: isOpen, onClose: closeMenu, children: jsx("ul", { ...props, className: classNames('dc-menu', className), role: "menu", id: menuId, "aria-labelledby": buttonId, onKeyDown: handleMenuKeyDown, children: Children.map(children, (child) => {
                 if (isMenuItem(child)) {
                     const props = child.props;
                     const onClick = (event) => {
-                        var _a;
-                        (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, event);
+                        props.onClick?.(event);
                         closeMenu();
                     };
                     const onMouseEnter = (event) => {
-                        var _a;
                         focusElement(event.currentTarget);
-                        (_a = props.onMouseEnter) === null || _a === void 0 ? void 0 : _a.call(props, event);
+                        props.onMouseEnter?.(event);
                     };
                     return cloneElement(child, { onClick, onMouseEnter });
                 }
@@ -185,6 +182,8 @@ function getMenuItems(menuId) {
     if (!menuEl) {
         return [];
     }
-    const nodes = menuEl.querySelectorAll('button[role="menuitem"]');
+    const nodes = menuEl.querySelectorAll('button[role="menuitem"], button[role="menuitemradio"]');
     return Array.from(nodes);
 }
+
+export { Menu };

package/esm/components/nav-list/nav-list-item.js

@@ -1,15 +1,18 @@
-import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { classNames } from '../../shared/react-helpers';
-import { Badge } from '../badge';
-export function NavListItem({ className, icon, badge, children, renderAs, ...props }) {
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { classNames } from '../../lib/react-helpers.js';
+import { Badge } from '../badge/badge.js';
+
+function NavListItem({ className, icon, badge, children, renderAs, ...props }) {
     className = classNames(className, 'dc-nav-link');
-    children = (_jsxs(_Fragment, { children: [icon != null && _jsxs("div", { className: "dc-nav-link__icon", children: [icon, " "] }), _jsx("div", { className: "dc-nav-link__text", children: children }), badge != null && _jsxs(_Fragment, { children: ["\u00A0", _jsx(Badge, { className: "dc-nav-link__badge", children: badge })] })] }));
+    children = (jsxs(Fragment, { children: [icon != null && jsxs("div", { className: "dc-nav-link__icon", children: [icon, " "] }), jsx("div", { className: "dc-nav-link__text", children: children }), badge != null && jsxs(Fragment, { children: ["\u00A0", jsx(Badge, { className: "dc-nav-link__badge", children: badge })] })] }));
     let content;
     if (typeof renderAs === 'function') {
         content = renderAs({ className, children });
     }
     else {
-        content = _jsx("a", { ...props, className: className, children: children });
+        content = jsx("a", { ...props, className: className, children: children });
     }
-    return _jsx("li", { className: "dc-nav-list__item", children: content });
+    return jsx("li", { className: "dc-nav-list__item", children: content });
 }
+
+export { NavListItem };

package/esm/components/nav-list/nav-list-title.js

@@ -1,5 +1,8 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { classNames } from '../../shared/react-helpers';
-export function NavListTitle({ className, children, ...props }) {
-    return (_jsx("li", { ...props, className: classNames('dc-nav-list__title', className), children: children }));
+import { jsx } from 'react/jsx-runtime';
+import { classNames } from '../../lib/react-helpers.js';
+
+function NavListTitle({ className, children, ...props }) {
+    return (jsx("li", { ...props, className: classNames('dc-nav-list__title', className), children: children }));
 }
+
+export { NavListTitle };

package/esm/components/nav-list/nav-list.js

@@ -1,5 +1,8 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { classNames } from '../../shared/react-helpers';
-export function NavList({ className, children, ...props }) {
-    return (_jsx("nav", { ...props, className: classNames('dc-nav-list', className), children: _jsx("ul", { className: "dc-nav-list__items", children: children }) }));
+import { jsx } from 'react/jsx-runtime';
+import { classNames } from '../../lib/react-helpers.js';
+
+function NavList({ className, children, ...props }) {
+    return (jsx("nav", { ...props, className: classNames('dc-nav-list', className), children: jsx("ul", { className: "dc-nav-list__items", children: children }) }));
 }
+
+export { NavList };

package/esm/components/password-input/icons.js

@@ -1,7 +1,10 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export function EyeIcon(props) {
-    return (_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: [_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" }), _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z" })] }));
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function EyeIcon(props) {
+    return (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: [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" }), jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z" })] }));
 }
-export function EyeSlashIcon(props) {
-    return (_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: _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" }) }));
+function EyeSlashIcon(props) {
+    return (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: 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" }) }));
 }
+
+export { EyeIcon, EyeSlashIcon };

package/esm/components/password-input/password-input.js

@@ -1,10 +1,11 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, useState, } from 'react';
-import { classNames } from '../../shared/react-helpers';
-import { TextInput } from '../text-input';
-import { Tooltip } from '../tooltip';
-import { EyeIcon, EyeSlashIcon } from './icons';
-export const PasswordInput = forwardRef(function PasswordInput({ isDefaultVisible = false, showPasswordTitle = 'Show password', hidePasswordTitle = 'Hide password', className, ...props }, ref) {
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useState } from 'react';
+import { classNames } from '../../lib/react-helpers.js';
+import { TextInput } from '../text-input/text-input.js';
+import { Tooltip } from '../tooltip/tooltip.js';
+import { EyeIcon, EyeSlashIcon } from './icons.js';
+
+const PasswordInput = forwardRef(function PasswordInput({ isDefaultVisible = false, showPasswordTitle = 'Show password', hidePasswordTitle = 'Hide password', className, ...props }, ref) {
     const [visible, setVisible] = useState(isDefaultVisible);
     let type;
     let content;
@@ -20,6 +21,8 @@ export const PasswordInput = forwardRef(function PasswordInput({ isDefaultVisibl
         Icon = EyeSlashIcon;
     }
     const handleButtonClick = () => setVisible(!visible);
-    const button = (_jsx(Tooltip, { content: content, children: _jsx("button", { className: "dc-password-input__btn", type: "button", onClick: handleButtonClick, children: _jsx(Icon, { className: "dc-password-input__icon", "aria-hidden": true }) }) }));
-    return (_jsx(TextInput, { ...props, className: classNames('dc-password-input', className), ref: ref, type: type, suffix: button }));
+    const button = (jsx(Tooltip, { content: content, children: jsx("button", { className: "dc-password-input__btn", type: "button", onClick: handleButtonClick, children: jsx(Icon, { className: "dc-password-input__icon", "aria-hidden": true }) }) }));
+    return (jsx(TextInput, { ...props, className: classNames('dc-password-input', className), ref: ref, type: type, suffix: button }));
 });
+
+export { PasswordInput };

package/esm/components/popover/popover.js

@@ -1,17 +1,17 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { cloneElement, forwardRef, useCallback, useImperativeHandle, useRef, useState, } from 'react';
-import { classNames, focusElement, isReactElementWithRef, mergeRefs, } from '../../shared/react-helpers';
-import { useMountTransition } from '../../hooks/use-mount-transition';
-import { useEscKeyDown } from '../../hooks/use-esc-key-down';
-import { useFocusTrap } from '../../hooks/use-focus-trap';
-import { usePageClick } from './use-page-click';
-import { Positioner, } from '../positioner';
-export const Popover = forwardRef(function Popover({ shouldTrapFocus = true, shouldFocusAnchorAfterEscPress = true, placement = 'bottom', alignment = 'start', anchorGap, viewportGap, anchor, className, children, onOpen, onClose, ...props }, ref) {
-    var _a, _b;
-    const [defaultIsOpen, setDefaultIsOpen] = useState((_a = props.defaultIsOpen) !== null && _a !== void 0 ? _a : false);
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useState, useRef, useCallback, useImperativeHandle, cloneElement } from 'react';
+import { focusElement, mergeRefs, isReactElementWithRef, classNames } from '../../lib/react-helpers.js';
+import { useMountTransition } from '../../hooks/use-mount-transition.js';
+import { useEscKeyDown } from '../../hooks/use-esc-key-down.js';
+import { useFocusTrap } from '../../hooks/use-focus-trap.js';
+import { usePageClick } from './use-page-click.js';
+import { Positioner } from '../positioner/positioner.js';
+
+const Popover = forwardRef(function Popover({ shouldTrapFocus = true, shouldFocusAnchorAfterEscPress = true, placement = 'bottom', alignment = 'start', anchorGap, viewportGap, anchor, className, children, onOpen, onClose, ...props }, ref) {
+    const [defaultIsOpen, setDefaultIsOpen] = useState(props.defaultIsOpen ?? false);
     const anchorRef = useRef(null);
     const contentRef = useRef(null);
-    const isOpen = (_b = props.isOpen) !== null && _b !== void 0 ? _b : defaultIsOpen;
+    const isOpen = props.isOpen ?? defaultIsOpen;
     const durationMs = 100;
     const { isMounted, className: transitionClass } = useMountTransition({
         durationMs,
@@ -21,11 +21,11 @@ export const Popover = forwardRef(function Popover({ shouldTrapFocus = true, sho
     });
     const openPopover = useCallback(() => {
         setDefaultIsOpen(true);
-        onOpen === null || onOpen === void 0 ? void 0 : onOpen();
+        onOpen?.();
     }, [onOpen]);
     const closePopover = useCallback(() => {
         setDefaultIsOpen(false);
-        onClose === null || onClose === void 0 ? void 0 : onClose();
+        onClose?.();
     }, [onClose]);
     const togglePopover = useCallback(() => {
         if (isOpen) {
@@ -45,8 +45,8 @@ export const Popover = forwardRef(function Popover({ shouldTrapFocus = true, sho
         const anchor = anchorRef.current;
         const content = contentRef.current;
         if (target instanceof Node &&
-            !(anchor === null || anchor === void 0 ? void 0 : anchor.contains(target)) &&
-            !(content === null || content === void 0 ? void 0 : content.contains(target))) {
+            !anchor?.contains(target) &&
+            !content?.contains(target)) {
             closePopover();
         }
     }, { isEnabled: isOpen });
@@ -72,9 +72,8 @@ export const Popover = forwardRef(function Popover({ shouldTrapFocus = true, sho
             return cloneElement(anchor, {
                 ref: mergeRefs(setRef, anchorRef, anchor.ref),
                 onClick: (event) => {
-                    var _a, _b;
                     togglePopover();
-                    (_b = (_a = anchor.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, event);
+                    anchor.props.onClick?.(event);
                 },
             });
         }
@@ -84,11 +83,13 @@ export const Popover = forwardRef(function Popover({ shouldTrapFocus = true, sho
         if (isOpen || isMounted) {
             delete props.defaultIsOpen;
             delete props.isOpen;
-            return (_jsx("div", { ref: portalRef, style: {
+            return (jsx("div", { ref: portalRef, style: {
                     '--dc-popover-transition-duration': `${durationMs}ms`,
                     ...portalStyle,
-                }, className: classNames('dc-popover', transitionClass), children: _jsx("div", { ...props, ref: contentRef, className: classNames('dc-popover-modal', className), children: children }) }));
+                }, className: classNames('dc-popover', transitionClass), children: jsx("div", { ...props, ref: contentRef, className: classNames('dc-popover-modal', className), children: children }) }));
         }
     };
-    return (_jsx(Positioner, { position: "absolute", placement: placement, alignment: alignment, anchorGap: anchorGap, viewportGap: viewportGap, renderAnchor: renderAnchor, renderContent: renderContent }));
+    return (jsx(Positioner, { position: "absolute", placement: placement, alignment: alignment, anchorGap: anchorGap, viewportGap: viewportGap, renderAnchor: renderAnchor, renderContent: renderContent }));
 });
+
+export { Popover };

package/esm/components/popover/use-page-click.js

@@ -1,4 +1,5 @@
-import { useEffect, useRef } from 'react';
+import { useRef, useEffect } from 'react';
+
 const handlers = [];
 /**
  * Invokes a given handler when the user clicks on any place on the page.
@@ -10,7 +11,7 @@ const handlers = [];
  * @param options.isEnabled - A flag that determines whether to run
  * the passed handler or not.
  */
-export function usePageClick(handler, options) {
+function usePageClick(handler, options) {
     const handlerRef = useRef(handler);
     const isEnabled = options.isEnabled;
     useEffect(() => {
@@ -44,3 +45,5 @@ export function usePageClick(handler, options) {
         };
     }, [isEnabled]);
 }
+
+export { usePageClick };

package/esm/components/portal/portal-context.js

@@ -1,5 +1,6 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import 'react/jsx-runtime';
 import { createContext, useContext } from 'react';
+
 let root = null;
 const getPortalRoot = () => {
     if (root == null) {
@@ -11,11 +12,9 @@ const getPortalRoot = () => {
     return root;
 };
 const PortalContext = createContext(getPortalRoot);
-export function usePortalRoot() {
+function usePortalRoot() {
     const getRoot = useContext(PortalContext);
     return getRoot();
 }
-export function PortalRootProvider(props) {
-    const { getPortalRoot, children } = props;
-    return (_jsx(PortalContext.Provider, { value: getPortalRoot, children: children }));
-}
+
+export { usePortalRoot };