@digdir/designsystemet-react 1.1.2 → 1.1.4

package/dist/cjs/components/tooltip/tooltip.js

@@ -0,0 +1,152 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var dom = require('@floating-ui/dom');
+var reactSlot = require('@radix-ui/react-slot');
+var cl = require('clsx/lite');
+var react = require('react');
+var useMergeRefs = require('../../utilities/hooks/use-merge-refs/use-merge-refs.js');
+
+/**
+ * Tooltip component that displays a small piece of information when hovering or focusing on an element.
+ *
+ * @example
+ * <Tooltip content='This is a tooltip'>
+ *  <button>Hover me</button>
+ * </Tooltip>
+ *
+ * @example
+ * <Tooltip content='This is a tooltip'>
+ *  Hover me
+ * </Tooltip>
+ */
+const Tooltip = react.forwardRef(function Tooltip({ id, children, content, placement = 'top', autoPlacement = true, open, className, ...rest }, ref) {
+    const randomTooltipId = react.useId();
+    const [internalOpen, setInternalOpen] = react.useState(false);
+    const triggerRef = react.useRef(null);
+    const tooltipRef = react.useRef(null);
+    const mergedRefs = useMergeRefs.useMergeRefs([tooltipRef, ref]);
+    const controlledOpen = open ?? internalOpen;
+    const setOpen = () => {
+        setInternalOpen(true);
+    };
+    const setClose = () => {
+        setInternalOpen(false);
+    };
+    // Position with floating-ui
+    react.useEffect(() => {
+        const tooltip = tooltipRef.current;
+        const trigger = triggerRef.current;
+        tooltip?.togglePopover?.(controlledOpen);
+        if (tooltip)
+            tooltip.style.opacity = controlledOpen ? '1' : '0';
+        if (tooltip && trigger && controlledOpen) {
+            return dom.autoUpdate(trigger, tooltip, () => {
+                dom.computePosition(trigger, tooltip, {
+                    placement,
+                    strategy: 'fixed',
+                    middleware: [
+                        dom.offset((data) => {
+                            // get pseudo element arrow size
+                            const styles = getComputedStyle(data.elements.floating, '::before');
+                            return parseFloat(styles.height);
+                        }),
+                        ...(autoPlacement
+                            ? [dom.flip({ fallbackAxisSideDirection: 'start' }), dom.shift()]
+                            : []),
+                        dom.shift(),
+                        arrowPseudoElement,
+                        safeAreaElement,
+                    ],
+                }).then(({ x, y }) => {
+                    tooltip.style.translate = `${x}px ${y}px`;
+                });
+            });
+        }
+    }, [controlledOpen, placement]);
+    /* Add listener for ESC to dismiss */
+    react.useEffect(() => {
+        const handleKeyDown = (event) => {
+            if (event.key === 'Escape') {
+                setInternalOpen(false);
+            }
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        return () => {
+            window.removeEventListener('keydown', handleKeyDown);
+        };
+    }, []);
+    /* If children is only a string, make a span */
+    const ChildContainer = typeof children === 'string' ? 'span' : reactSlot.Slot;
+    /* Make sure it is valid */
+    if (typeof children !== 'string' && children.type === react.Fragment) {
+        console.error('<Tooltip> children needs to be a single ReactElement that can receive a ref and not: <Fragment/> | <></>');
+        return null;
+    }
+    const popoverProps = {
+        [react.version.startsWith('19') ? 'popoverTarget' : 'popovertarget']: id ?? randomTooltipId,
+        [react.version.startsWith('19')
+            ? 'popoverTargetAction'
+            : 'popovertargetaction']: 'show',
+    };
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ChildContainer, { ref: triggerRef, ...popoverProps, onMouseEnter: setOpen, onMouseLeave: setClose, onFocus: setOpen, onBlur: setClose, children: children }), jsxRuntime.jsx("span", { onMouseEnter: setOpen, onMouseLeave: setClose, ref: mergedRefs, role: 'tooltip', className: cl('ds-tooltip', className), id: id ?? randomTooltipId, popover: 'manual', ...rest, children: content })] }));
+});
+const arrowPseudoElement = {
+    name: 'ArrowPseudoElement',
+    fn(data) {
+        const { elements, rects, placement } = data;
+        let arrowX = `${Math.round(rects.reference.width / 2 + rects.reference.x - data.x)}px`;
+        let arrowY = `${Math.round(rects.reference.height / 2 + rects.reference.y - data.y)}px`;
+        switch (placement) {
+            case 'top':
+                arrowY = '100%';
+                break;
+            case 'right':
+                arrowX = '0';
+                break;
+            case 'bottom':
+                arrowY = '0';
+                break;
+            case 'left':
+                arrowX = '100%';
+                break;
+        }
+        elements.floating.style.setProperty('--dsc-tooltip-arrow-x', arrowX);
+        elements.floating.style.setProperty('--dsc-tooltip-arrow-y', arrowY);
+        return data;
+    },
+};
+const safeAreaElement = {
+    name: 'SafeAreaElement',
+    fn(data) {
+        const { elements, placement } = data;
+        let width = '100%';
+        let height = 'var(--dsc-tooltip-arrow-size)';
+        let translate = '0px';
+        switch (placement) {
+            case 'top':
+                translate = `-50% 0%`;
+                break;
+            case 'right':
+                height = '100%';
+                width = 'var(--dsc-tooltip-arrow-size)';
+                translate = '-100% -50%';
+                break;
+            case 'bottom':
+                translate = '-50% -100%';
+                break;
+            case 'left':
+                height = '100%';
+                width = 'var(--dsc-tooltip-arrow-size)';
+                translate = '0 -50%';
+                break;
+        }
+        elements.floating.style.setProperty('--_dsc-tooltip-safearea-height', height);
+        elements.floating.style.setProperty('--_dsc-tooltip-safearea-width', width);
+        elements.floating.style.setProperty('--_dsc-tooltip-safearea-translate', translate);
+        return data;
+    },
+};
+
+exports.Tooltip = Tooltip;

package/dist/cjs/index.js

@@ -1,217 +1,217 @@
 'use client';
 'use strict';
 
-var Alert = require('./components/Alert/Alert.js');
-var Avatar = require('./components/Avatar/Avatar.js');
-var index = require('./components/Badge/index.js');
-var BadgePosition = require('./components/Badge/BadgePosition.js');
-var index$1 = require('./components/Breadcrumbs/index.js');
-var BreadcrumbsList = require('./components/Breadcrumbs/BreadcrumbsList.js');
-var BreadcrumbsItem = require('./components/Breadcrumbs/BreadcrumbsItem.js');
-var BreadcrumbsLink = require('./components/Breadcrumbs/BreadcrumbsLink.js');
-var Button = require('./components/Button/Button.js');
-var index$2 = require('./components/Card/index.js');
-var CardBlock = require('./components/Card/CardBlock.js');
-var Checkbox = require('./components/Checkbox/Checkbox.js');
-var index$3 = require('./components/Chip/index.js');
-var Chips = require('./components/Chip/Chips.js');
-var index$4 = require('./components/Combobox/index.js');
-var Option = require('./components/Combobox/Option/Option.js');
+var alert = require('./components/alert/alert.js');
+var avatar = require('./components/avatar/avatar.js');
+var index = require('./components/badge/index.js');
+var badgePosition = require('./components/badge/badge-position.js');
+var index$1 = require('./components/breadcrumbs/index.js');
+var breadcrumbsItem = require('./components/breadcrumbs/breadcrumbs-item.js');
+var breadcrumbsLink = require('./components/breadcrumbs/breadcrumbs-link.js');
+var breadcrumbsList = require('./components/breadcrumbs/breadcrumbs-list.js');
+var button = require('./components/button/button.js');
+var index$2 = require('./components/Combobox/index.js');
 var Empty = require('./components/Combobox/Empty.js');
-var index$5 = require('./components/Details/index.js');
-var DetailsContent = require('./components/Details/DetailsContent.js');
-var DetailsSummary = require('./components/Details/DetailsSummary.js');
-var index$6 = require('./components/Dialog/index.js');
-var DialogBlock = require('./components/Dialog/DialogBlock.js');
-var DialogTriggerContext = require('./components/Dialog/DialogTriggerContext.js');
-var DialogTrigger = require('./components/Dialog/DialogTrigger.js');
-var Divider = require('./components/Divider/Divider.js');
-var index$7 = require('./components/Dropdown/index.js');
-var DropdownTriggerContext = require('./components/Dropdown/DropdownTriggerContext.js');
-var DropdownList = require('./components/Dropdown/DropdownList.js');
-var DropdownHeading = require('./components/Dropdown/DropdownHeading.js');
-var DropdownItem = require('./components/Dropdown/DropdownItem.js');
-var DropdownButton = require('./components/Dropdown/DropdownButton.js');
-var DropdownTrigger = require('./components/Dropdown/DropdownTrigger.js');
-var index$8 = require('./components/ErrorSummary/index.js');
-var ErrorSummaryItem = require('./components/ErrorSummary/ErrorSummaryItem.js');
-var ErrorSummaryHeading = require('./components/ErrorSummary/ErrorSummaryHeading.js');
-var ErrorSummaryList = require('./components/ErrorSummary/ErrorSummaryList.js');
-var ErrorSummaryLink = require('./components/ErrorSummary/ErrorSummaryLink.js');
-var index$9 = require('./components/Field/index.js');
-var FieldDescription = require('./components/Field/FieldDescription.js');
-var FieldAffix = require('./components/Field/FieldAffix.js');
-var FieldCounter = require('./components/Field/FieldCounter.js');
-var index$a = require('./components/Fieldset/index.js');
-var FieldsetLegend = require('./components/Fieldset/FieldsetLegend.js');
-var FieldsetDescription = require('./components/Fieldset/FieldsetDescription.js');
-var Heading = require('./components/Heading/Heading.js');
-var Input = require('./components/Input/Input.js');
-var Label = require('./components/Label/Label.js');
-var Link = require('./components/Link/Link.js');
-var index$b = require('./components/List/index.js');
-var Lists = require('./components/List/Lists.js');
-var ListItem = require('./components/List/ListItem.js');
-var index$c = require('./components/Pagination/index.js');
-var PaginationList = require('./components/Pagination/PaginationList.js');
-var PaginationItem = require('./components/Pagination/PaginationItem.js');
-var PaginationButton = require('./components/Pagination/PaginationButton.js');
-var Paragraph = require('./components/Paragraph/Paragraph.js');
-var index$d = require('./components/Popover/index.js');
-var PopoverTriggerContext = require('./components/Popover/PopoverTriggerContext.js');
-var PopoverTrigger = require('./components/Popover/PopoverTrigger.js');
-var Radio = require('./components/Radio/Radio.js');
-var SearchClear = require('./components/Search/SearchClear.js');
-var SearchButton = require('./components/Search/SearchButton.js');
-var SearchInput = require('./components/Search/SearchInput.js');
-var index$e = require('./components/Search/index.js');
-var index$f = require('./components/Select/index.js');
-var SelectOption = require('./components/Select/SelectOption.js');
-var SelectOptgroup = require('./components/Select/SelectOptgroup.js');
-var Skeleton = require('./components/Skeleton/Skeleton.js');
-var SkipLink = require('./components/SkipLink/SkipLink.js');
-var Spinner = require('./components/Spinner/Spinner.js');
-var index$g = require('./components/Suggestion/index.js');
-var SuggestionChips = require('./components/Suggestion/SuggestionChips.js');
-var SuggestionList = require('./components/Suggestion/SuggestionList.js');
-var SuggestionInput = require('./components/Suggestion/SuggestionInput.js');
-var SuggestionEmpty = require('./components/Suggestion/SuggestionEmpty.js');
-var SuggestionOption = require('./components/Suggestion/SuggestionOption.js');
-var SuggestionClear = require('./components/Suggestion/SuggestionClear.js');
-var Switch = require('./components/Switch/Switch.js');
-var index$h = require('./components/Table/index.js');
-var TableHead = require('./components/Table/TableHead.js');
-var TableBody = require('./components/Table/TableBody.js');
-var TableRow = require('./components/Table/TableRow.js');
-var TableCell = require('./components/Table/TableCell.js');
-var TableHeaderCell = require('./components/Table/TableHeaderCell.js');
-var TableFoot = require('./components/Table/TableFoot.js');
-var index$i = require('./components/Tabs/index.js');
-var TabsTab = require('./components/Tabs/TabsTab.js');
-var TabsList = require('./components/Tabs/TabsList.js');
-var TabsPanel = require('./components/Tabs/TabsPanel.js');
-var Tag = require('./components/Tag/Tag.js');
-var Textarea = require('./components/Textarea/Textarea.js');
-var Textfield = require('./components/Textfield/Textfield.js');
-var index$j = require('./components/ToggleGroup/index.js');
-var ToggleGroupItem = require('./components/ToggleGroup/ToggleGroupItem.js');
-var Tooltip = require('./components/Tooltip/Tooltip.js');
-var ValidationMessage = require('./components/ValidationMessage/ValidationMessage.js');
-var useCheckboxGroup = require('./utilities/hooks/useCheckboxGroup/useCheckboxGroup.js');
-var useDebounceCallback = require('./utilities/hooks/useDebounceCallback/useDebounceCallback.js');
-var useIsomorphicLayoutEffect = require('./utilities/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js');
-var useMediaQuery = require('./utilities/hooks/useMediaQuery/useMediaQuery.js');
-var usePagination = require('./utilities/hooks/usePagination/usePagination.js');
-var useRadioGroup = require('./utilities/hooks/useRadioGroup/useRadioGroup.js');
-var useSynchronizedAnimation = require('./utilities/hooks/useSynchronizedAnimation/useSynchronizedAnimation.js');
+var Option = require('./components/Combobox/Option/Option.js');
+var index$3 = require('./components/card/index.js');
+var cardBlock = require('./components/card/card-block.js');
+var checkbox = require('./components/checkbox/checkbox.js');
+var index$4 = require('./components/chip/index.js');
+var chips = require('./components/chip/chips.js');
+var index$5 = require('./components/details/index.js');
+var detailsContent = require('./components/details/details-content.js');
+var detailsSummary = require('./components/details/details-summary.js');
+var index$6 = require('./components/dialog/index.js');
+var dialogBlock = require('./components/dialog/dialog-block.js');
+var dialogTrigger = require('./components/dialog/dialog-trigger.js');
+var dialogTriggerContext = require('./components/dialog/dialog-trigger-context.js');
+var divider = require('./components/divider/divider.js');
+var index$7 = require('./components/dropdown/index.js');
+var dropdownButton = require('./components/dropdown/dropdown-button.js');
+var dropdownHeading = require('./components/dropdown/dropdown-heading.js');
+var dropdownItem = require('./components/dropdown/dropdown-item.js');
+var dropdownList = require('./components/dropdown/dropdown-list.js');
+var dropdownTrigger = require('./components/dropdown/dropdown-trigger.js');
+var dropdownTriggerContext = require('./components/dropdown/dropdown-trigger-context.js');
+var index$8 = require('./components/error-summary/index.js');
+var errorSummaryHeading = require('./components/error-summary/error-summary-heading.js');
+var errorSummaryItem = require('./components/error-summary/error-summary-item.js');
+var errorSummaryLink = require('./components/error-summary/error-summary-link.js');
+var errorSummaryList = require('./components/error-summary/error-summary-list.js');
+var index$9 = require('./components/field/index.js');
+var fieldAffix = require('./components/field/field-affix.js');
+var fieldCounter = require('./components/field/field-counter.js');
+var fieldDescription = require('./components/field/field-description.js');
+var index$a = require('./components/fieldset/index.js');
+var fieldsetDescription = require('./components/fieldset/fieldset-description.js');
+var fieldsetLegend = require('./components/fieldset/fieldset-legend.js');
+var heading = require('./components/heading/heading.js');
+var input = require('./components/input/input.js');
+var label = require('./components/label/label.js');
+var link = require('./components/link/link.js');
+var index$b = require('./components/list/index.js');
+var listItem = require('./components/list/list-item.js');
+var lists = require('./components/list/lists.js');
+var index$c = require('./components/pagination/index.js');
+var paginationButton = require('./components/pagination/pagination-button.js');
+var paginationItem = require('./components/pagination/pagination-item.js');
+var paginationList = require('./components/pagination/pagination-list.js');
+var paragraph = require('./components/paragraph/paragraph.js');
+var index$d = require('./components/popover/index.js');
+var popoverTrigger = require('./components/popover/popover-trigger.js');
+var popoverTriggerContext = require('./components/popover/popover-trigger-context.js');
+var radio = require('./components/radio/radio.js');
+var index$e = require('./components/search/index.js');
+var searchButton = require('./components/search/search-button.js');
+var searchClear = require('./components/search/search-clear.js');
+var searchInput = require('./components/search/search-input.js');
+var index$f = require('./components/select/index.js');
+var selectOptgroup = require('./components/select/select-optgroup.js');
+var selectOption = require('./components/select/select-option.js');
+var skeleton = require('./components/skeleton/skeleton.js');
+var skipLink = require('./components/skip-link/skip-link.js');
+var spinner = require('./components/spinner/spinner.js');
+var index$g = require('./components/suggestion/index.js');
+var suggestionChips = require('./components/suggestion/suggestion-chips.js');
+var suggestionClear = require('./components/suggestion/suggestion-clear.js');
+var suggestionEmpty = require('./components/suggestion/suggestion-empty.js');
+var suggestionInput = require('./components/suggestion/suggestion-input.js');
+var suggestionList = require('./components/suggestion/suggestion-list.js');
+var suggestionOption = require('./components/suggestion/suggestion-option.js');
+var _switch = require('./components/switch/switch.js');
+var index$h = require('./components/table/index.js');
+var tableBody = require('./components/table/table-body.js');
+var tableCell = require('./components/table/table-cell.js');
+var tableFoot = require('./components/table/table-foot.js');
+var tableHead = require('./components/table/table-head.js');
+var tableHeaderCell = require('./components/table/table-header-cell.js');
+var tableRow = require('./components/table/table-row.js');
+var index$i = require('./components/tabs/index.js');
+var tabsList = require('./components/tabs/tabs-list.js');
+var tabsPanel = require('./components/tabs/tabs-panel.js');
+var tabsTab = require('./components/tabs/tabs-tab.js');
+var tag = require('./components/tag/tag.js');
+var textarea = require('./components/textarea/textarea.js');
+var textfield = require('./components/textfield/textfield.js');
+var index$j = require('./components/toggle-group/index.js');
+var toggleGroupItem = require('./components/toggle-group/toggle-group-item.js');
+var tooltip = require('./components/tooltip/tooltip.js');
+var validationMessage = require('./components/validation-message/validation-message.js');
+var useCheckboxGroup = require('./utilities/hooks/use-checkbox-group/use-checkbox-group.js');
+var useDebounceCallback = require('./utilities/hooks/use-debounce-callback/use-debounce-callback.js');
+var useIsomorphicLayoutEffect = require('./utilities/hooks/use-isomorphic-layout-effect/use-isomorphic-layout-effect.js');
+var useMediaQuery = require('./utilities/hooks/use-media-query/use-media-query.js');
+var usePagination = require('./utilities/hooks/use-pagination/use-pagination.js');
+var useRadioGroup = require('./utilities/hooks/use-radio-group/use-radio-group.js');
+var useSynchronizedAnimation = require('./utilities/hooks/use-synchronized-animation/use-synchronized-animation.js');
 var omit = require('./utilities/omit/omit.js');
-var RovingFocusItem = require('./utilities/RovingFocus/RovingFocusItem.js');
-var RovingFocusRoot = require('./utilities/RovingFocus/RovingFocusRoot.js');
-var useRovingFocus = require('./utilities/RovingFocus/useRovingFocus.js');
+var rovingFocusItem = require('./utilities/roving-focus/roving-focus-item.js');
+var rovingFocusRoot = require('./utilities/roving-focus/roving-focus-root.js');
+var useRovingFocus = require('./utilities/roving-focus/use-roving-focus.js');
 
 
 
-exports.Alert = Alert.Alert;
-exports.Avatar = Avatar.Avatar;
+exports.Alert = alert.Alert;
+exports.Avatar = avatar.Avatar;
 exports.Badge = index.Badge;
-exports.BadgePosition = BadgePosition.BadgePosition;
+exports.BadgePosition = badgePosition.BadgePosition;
 exports.Breadcrumbs = index$1.Breadcrumbs;
-exports.BreadcrumbsList = BreadcrumbsList.BreadcrumbsList;
-exports.BreadcrumbsItem = BreadcrumbsItem.BreadcrumbsItem;
-exports.BreadcrumbsLink = BreadcrumbsLink.BreadcrumbsLink;
-exports.Button = Button.Button;
-exports.Card = index$2.Card;
-exports.CardBlock = CardBlock.CardBlock;
-exports.Checkbox = Checkbox.Checkbox;
-exports.Chip = index$3.Chip;
-exports.ChipButton = Chips.ChipButton;
-exports.ChipCheckbox = Chips.ChipCheckbox;
-exports.ChipRadio = Chips.ChipRadio;
-exports.ChipRemovable = Chips.ChipRemovable;
-exports.Combobox = index$4.Combobox;
-exports.ComboboxOption = Option.ComboboxOption;
+exports.BreadcrumbsItem = breadcrumbsItem.BreadcrumbsItem;
+exports.BreadcrumbsLink = breadcrumbsLink.BreadcrumbsLink;
+exports.BreadcrumbsList = breadcrumbsList.BreadcrumbsList;
+exports.Button = button.Button;
+exports.Combobox = index$2.Combobox;
 exports.ComboboxEmpty = Empty.ComboboxEmpty;
+exports.ComboboxOption = Option.ComboboxOption;
+exports.Card = index$3.Card;
+exports.CardBlock = cardBlock.CardBlock;
+exports.Checkbox = checkbox.Checkbox;
+exports.Chip = index$4.Chip;
+exports.ChipButton = chips.ChipButton;
+exports.ChipCheckbox = chips.ChipCheckbox;
+exports.ChipRadio = chips.ChipRadio;
+exports.ChipRemovable = chips.ChipRemovable;
 exports.Details = index$5.Details;
-exports.DetailsContent = DetailsContent.DetailsContent;
-exports.DetailsSummary = DetailsSummary.DetailsSummary;
+exports.DetailsContent = detailsContent.DetailsContent;
+exports.DetailsSummary = detailsSummary.DetailsSummary;
 exports.Dialog = index$6.Dialog;
-exports.DialogBlock = DialogBlock.DialogBlock;
-exports.DialogTriggerContext = DialogTriggerContext.DialogTriggerContext;
-exports.DialogTrigger = DialogTrigger.DialogTrigger;
-exports.Divider = Divider.Divider;
+exports.DialogBlock = dialogBlock.DialogBlock;
+exports.DialogTrigger = dialogTrigger.DialogTrigger;
+exports.DialogTriggerContext = dialogTriggerContext.DialogTriggerContext;
+exports.Divider = divider.Divider;
 exports.Dropdown = index$7.Dropdown;
-exports.DropdownTriggerContext = DropdownTriggerContext.DropdownTriggerContext;
-exports.DropdownList = DropdownList.DropdownList;
-exports.DropdownHeading = DropdownHeading.DropdownHeading;
-exports.DropdownItem = DropdownItem.DropdownItem;
-exports.DropdownButton = DropdownButton.DropdownButton;
-exports.DropdownTrigger = DropdownTrigger.DropdownTrigger;
+exports.DropdownButton = dropdownButton.DropdownButton;
+exports.DropdownHeading = dropdownHeading.DropdownHeading;
+exports.DropdownItem = dropdownItem.DropdownItem;
+exports.DropdownList = dropdownList.DropdownList;
+exports.DropdownTrigger = dropdownTrigger.DropdownTrigger;
+exports.DropdownTriggerContext = dropdownTriggerContext.DropdownTriggerContext;
 exports.ErrorSummary = index$8.ErrorSummary;
-exports.ErrorSummaryItem = ErrorSummaryItem.ErrorSummaryItem;
-exports.ErrorSummaryHeading = ErrorSummaryHeading.ErrorSummaryHeading;
-exports.ErrorSummaryList = ErrorSummaryList.ErrorSummaryList;
-exports.ErrorSummaryLink = ErrorSummaryLink.ErrorSummaryLink;
+exports.ErrorSummaryHeading = errorSummaryHeading.ErrorSummaryHeading;
+exports.ErrorSummaryItem = errorSummaryItem.ErrorSummaryItem;
+exports.ErrorSummaryLink = errorSummaryLink.ErrorSummaryLink;
+exports.ErrorSummaryList = errorSummaryList.ErrorSummaryList;
 exports.Field = index$9.Field;
-exports.FieldDescription = FieldDescription.FieldDescription;
-exports.FieldAffix = FieldAffix.FieldAffix;
-exports.FieldAffixes = FieldAffix.FieldAffixes;
-exports.FieldCounter = FieldCounter.FieldCounter;
+exports.FieldAffix = fieldAffix.FieldAffix;
+exports.FieldAffixes = fieldAffix.FieldAffixes;
+exports.FieldCounter = fieldCounter.FieldCounter;
+exports.FieldDescription = fieldDescription.FieldDescription;
 exports.Fieldset = index$a.Fieldset;
-exports.FieldsetLegend = FieldsetLegend.FieldsetLegend;
-exports.FieldsetDescription = FieldsetDescription.FieldsetDescription;
-exports.Heading = Heading.Heading;
-exports.Input = Input.Input;
-exports.Label = Label.Label;
-exports.Link = Link.Link;
+exports.FieldsetDescription = fieldsetDescription.FieldsetDescription;
+exports.FieldsetLegend = fieldsetLegend.FieldsetLegend;
+exports.Heading = heading.Heading;
+exports.Input = input.Input;
+exports.Label = label.Label;
+exports.Link = link.Link;
 exports.List = index$b.List;
-exports.ListOrdered = Lists.ListOrdered;
-exports.ListUnordered = Lists.ListUnordered;
-exports.ListItem = ListItem.ListItem;
+exports.ListItem = listItem.ListItem;
+exports.ListOrdered = lists.ListOrdered;
+exports.ListUnordered = lists.ListUnordered;
 exports.Pagination = index$c.Pagination;
-exports.PaginationList = PaginationList.PaginationList;
-exports.PaginationItem = PaginationItem.PaginationItem;
-exports.PaginationButton = PaginationButton.PaginationButton;
-exports.Paragraph = Paragraph.Paragraph;
+exports.PaginationButton = paginationButton.PaginationButton;
+exports.PaginationItem = paginationItem.PaginationItem;
+exports.PaginationList = paginationList.PaginationList;
+exports.Paragraph = paragraph.Paragraph;
 exports.Popover = index$d.Popover;
-exports.PopoverTriggerContext = PopoverTriggerContext.PopoverTriggerContext;
-exports.PopoverTrigger = PopoverTrigger.PopoverTrigger;
-exports.Radio = Radio.Radio;
-exports.SearchClear = SearchClear.SearchClear;
-exports.SearchButton = SearchButton.SearchButton;
-exports.SearchInput = SearchInput.SearchInput;
+exports.PopoverTrigger = popoverTrigger.PopoverTrigger;
+exports.PopoverTriggerContext = popoverTriggerContext.PopoverTriggerContext;
+exports.Radio = radio.Radio;
 exports.Search = index$e.Search;
+exports.SearchButton = searchButton.SearchButton;
+exports.SearchClear = searchClear.SearchClear;
+exports.SearchInput = searchInput.SearchInput;
 exports.Select = index$f.Select;
-exports.SelectOption = SelectOption.SelectOption;
-exports.SelectOptgroup = SelectOptgroup.SelectOptgroup;
-exports.Skeleton = Skeleton.Skeleton;
-exports.SkipLink = SkipLink.SkipLink;
-exports.Spinner = Spinner.Spinner;
+exports.SelectOptgroup = selectOptgroup.SelectOptgroup;
+exports.SelectOption = selectOption.SelectOption;
+exports.Skeleton = skeleton.Skeleton;
+exports.SkipLink = skipLink.SkipLink;
+exports.Spinner = spinner.Spinner;
 exports.EXPERIMENTAL_Suggestion = index$g.EXPERIMENTAL_Suggestion;
-exports.EXPERIMENTAL_SuggestionChips = SuggestionChips.SuggestionChips;
-exports.EXPERIMENTAL_SuggestionList = SuggestionList.SuggestionList;
-exports.EXPERIMENTAL_SuggestionInput = SuggestionInput.SuggestionInput;
-exports.EXPERIMENTAL_SuggestionEmpty = SuggestionEmpty.SuggestionEmpty;
-exports.EXPERIMENTAL_SuggestionOption = SuggestionOption.SuggestionOption;
-exports.EXPERIMENTAL_SuggestionClear = SuggestionClear.SuggestionClear;
-exports.Switch = Switch.Switch;
+exports.EXPERIMENTAL_SuggestionChips = suggestionChips.SuggestionChips;
+exports.EXPERIMENTAL_SuggestionClear = suggestionClear.SuggestionClear;
+exports.EXPERIMENTAL_SuggestionEmpty = suggestionEmpty.SuggestionEmpty;
+exports.EXPERIMENTAL_SuggestionInput = suggestionInput.SuggestionInput;
+exports.EXPERIMENTAL_SuggestionList = suggestionList.SuggestionList;
+exports.EXPERIMENTAL_SuggestionOption = suggestionOption.SuggestionOption;
+exports.Switch = _switch.Switch;
 exports.Table = index$h.Table;
-exports.TableHead = TableHead.TableHead;
-exports.TableBody = TableBody.TableBody;
-exports.TableRow = TableRow.TableRow;
-exports.TableCell = TableCell.TableCell;
-exports.TableHeaderCell = TableHeaderCell.TableHeaderCell;
-exports.TableFoot = TableFoot.TableFoot;
+exports.TableBody = tableBody.TableBody;
+exports.TableCell = tableCell.TableCell;
+exports.TableFoot = tableFoot.TableFoot;
+exports.TableHead = tableHead.TableHead;
+exports.TableHeaderCell = tableHeaderCell.TableHeaderCell;
+exports.TableRow = tableRow.TableRow;
 exports.Tabs = index$i.Tabs;
-exports.TabsTab = TabsTab.TabsTab;
-exports.TabsList = TabsList.TabsList;
-exports.TabsPanel = TabsPanel.TabsPanel;
-exports.Tag = Tag.Tag;
-exports.Textarea = Textarea.Textarea;
-exports.Textfield = Textfield.Textfield;
+exports.TabsList = tabsList.TabsList;
+exports.TabsPanel = tabsPanel.TabsPanel;
+exports.TabsTab = tabsTab.TabsTab;
+exports.Tag = tag.Tag;
+exports.Textarea = textarea.Textarea;
+exports.Textfield = textfield.Textfield;
 exports.ToggleGroup = index$j.ToggleGroup;
-exports.ToggleGroupItem = ToggleGroupItem.ToggleGroupItem;
-exports.Tooltip = Tooltip.Tooltip;
-exports.ValidationMessage = ValidationMessage.ValidationMessage;
+exports.ToggleGroupItem = toggleGroupItem.ToggleGroupItem;
+exports.Tooltip = tooltip.Tooltip;
+exports.ValidationMessage = validationMessage.ValidationMessage;
 exports.useCheckboxGroup = useCheckboxGroup.useCheckboxGroup;
 exports.useDebounceCallback = useDebounceCallback.useDebounceCallback;
 exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect.useIsomorphicLayoutEffect;
@@ -220,8 +220,8 @@ exports.usePagination = usePagination.usePagination;
 exports.useRadioGroup = useRadioGroup.useRadioGroup;
 exports.useSynchronizedAnimation = useSynchronizedAnimation.useSynchronizedAnimation;
 exports.omit = omit.omit;
-exports.RovingFocusItem = RovingFocusItem.RovingFocusItem;
-exports.getNextFocusableValue = RovingFocusItem.getNextFocusableValue;
-exports.getPrevFocusableValue = RovingFocusItem.getPrevFocusableValue;
-exports.RovingFocusRoot = RovingFocusRoot.RovingFocusRoot;
+exports.RovingFocusItem = rovingFocusItem.RovingFocusItem;
+exports.getNextFocusableValue = rovingFocusItem.getNextFocusableValue;
+exports.getPrevFocusableValue = rovingFocusItem.getPrevFocusableValue;
+exports.RovingFocusRoot = rovingFocusRoot.RovingFocusRoot;
 exports.useRovingFocus = useRovingFocus.useRovingFocus;

package/dist/cjs/utilities/hooks/use-media-query/use-media-query.js

@@ -0,0 +1,49 @@
+'use client';
+'use strict';
+
+var react = require('react');
+var useIsomorphicLayoutEffect = require('../use-isomorphic-layout-effect/use-isomorphic-layout-effect.js');
+
+// from https://usehooks-ts.com/react-hook/use-media-query
+const IS_SERVER = typeof window === 'undefined';
+function useMediaQuery(query, { defaultValue = false, initializeWithValue = true, } = {}) {
+    const getMatches = (query) => {
+        if (IS_SERVER) {
+            return defaultValue;
+        }
+        return window.matchMedia(query).matches;
+    };
+    const [matches, setMatches] = react.useState(() => {
+        if (initializeWithValue) {
+            return getMatches(query);
+        }
+        return defaultValue;
+    });
+    // Handles the change event of the media query.
+    function handleChange() {
+        setMatches(getMatches(query));
+    }
+    useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
+        const matchMedia = window.matchMedia(query);
+        // Triggered at the first client-side load and if query changes
+        handleChange();
+        // Use deprecated `addListener` and `removeListener` to support Safari < 14 (#135)
+        if (matchMedia.addListener) {
+            matchMedia.addListener(handleChange);
+        }
+        else {
+            matchMedia.addEventListener('change', handleChange);
+        }
+        return () => {
+            if (matchMedia.removeListener) {
+                matchMedia.removeListener(handleChange);
+            }
+            else {
+                matchMedia.removeEventListener('change', handleChange);
+            }
+        };
+    }, [query]);
+    return matches;
+}
+
+exports.useMediaQuery = useMediaQuery;