draft-components 1.12.0 → 2.0.0

package/dist/esm/components/date-range-picker-popover/date-range-picker-popover-presets.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import { findSelectedOption } from './helpers.js';
+import { Select } from '../select/index.js';
+import { Radio } from '../radio/index.js';
+import { SelectionControl } from '../selection-control/index.js';
+export function DateRangePickerPopoverPresets({ isCompactView, customPresetLabel, options, value, onChangeValue, }) {
+    const id = useId();
+    const name = `${id}-date-preset`;
+    const selectedOption = findSelectedOption(value, options);
+    const selectedPreset = selectedOption ? selectedOption.preset : '';
+    function handleChange(event) {
+        const value = event.target.value;
+        const option = options.find((option) => option.preset === value);
+        if (option) {
+            onChangeValue({
+                preset: option.preset,
+                range: option.range,
+            });
+        }
+    }
+    if (isCompactView) {
+        return (_jsx("div", { className: "dc-date-range-picker-popover__presets", children: _jsxs(Select, { size: "md", fullWidth: true, value: selectedPreset, onChange: handleChange, children: [_jsx("option", { value: "", disabled: true, children: customPresetLabel }), options.map((option) => (_jsx("option", { value: option.preset, children: option.label }, option.preset)))] }) }));
+    }
+    return (_jsx("ul", { className: "dc-date-range-picker-popover__presets", children: options.map((option) => {
+            const preset = option.preset;
+            const id = `${name}-${preset}`;
+            return (_jsx("li", { children: _jsx(SelectionControl, { label: option.label, labelFor: id, children: _jsx(Radio, { icon: "check", id: id, name: name, value: preset, checked: preset === selectedPreset, onChange: handleChange }) }) }, option.preset));
+        }) }));
+}

package/{types → dist/esm}/components/date-range-picker-popover/date-range-picker-popover.d.ts

@@ -1,7 +1,7 @@
-import { DateRangePickerPopoverOption, DateRangePickerPopoverSelection } from './types';
+import { DateRangePickerPopoverOption, DateRangePickerPopoverSelection } from './types.js';
 import { JSX, ReactNode } from 'react';
-import { PopoverAlignment, PopoverPlacement } from '../popover';
-import { DateRangePickerProps } from '../date-picker';
+import { PopoverAlignment, PopoverPlacement } from '../popover/index.js';
+import { DateRangePickerProps } from '../date-picker/index.js';
 export type DateRangePickerPopoverPlacement = PopoverPlacement;
 export type DateRangePickerPopoverAlignment = PopoverAlignment;
 export type DateRangePickerPopoverRenderFooter = (context: {

package/{esm → dist/esm}/components/date-range-picker-popover/date-range-picker-popover.js

@@ -1,19 +1,14 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { classNames } from '../../lib/react-helpers.js';
 import { assertIfNullable } from '../../lib/helpers.js';
 import { findSelectedOption } from './helpers.js';
-import { useState, useRef } from 'react';
+import { useRef, useState } from 'react';
 import { useIsCompactView } from './use-is-compact-view.js';
-import { Popover } from '../popover/popover.js';
-import '../button/button.js';
-import '../button/icon-button.js';
-import '../select/select.js';
-import '../text-input/text-input.js';
-import { DateRangePicker } from '../date-picker/date-range-picker.js';
+import { Popover } from '../popover/index.js';
+import { DateRangePicker } from '../date-picker/index.js';
 import { DateRangePickerPopoverFooter } from './date-range-picker-popover-footer.js';
 import { DateRangePickerPopoverPresets } from './date-range-picker-popover-presets.js';
-
-function DateRangePickerPopover({ defaultIsOpen = false, compactViewBreakpoint = '(max-width: 599px)', customPreset = 'custom', customPresetLabel = 'Custom date preset', placement = 'bottom', alignment = 'start', cancelButtonLabel = 'Cancel', confirmButtonLabel = 'Confirm', footer = null, className, options = [], children, value, onChangeValue, 
+export function DateRangePickerPopover({ defaultIsOpen = false, compactViewBreakpoint = '(max-width: 599px)', customPreset = 'custom', customPresetLabel = 'Custom date preset', placement = 'bottom', alignment = 'start', cancelButtonLabel = 'Cancel', confirmButtonLabel = 'Confirm', footer = null, className, options = [], children, value, onChangeValue, 
 // DateRangePickerProps
 min, max, locale, weekStartsOn, prevMonthButtonLabel, nextMonthButtonLabel, monthSelectLabel, yearInputLabel, }) {
     const [selection, setSelection] = useState(value);
@@ -46,12 +41,10 @@ min, max, locale, weekStartsOn, prevMonthButtonLabel, nextMonthButtonLabel, mont
             setSelection(selection);
         }
     }
-    return (jsxs(Popover, { className: classNames(className, {
+    return (_jsxs(Popover, { className: classNames(className, {
             'dc-date-range-picker-popover': true,
             'dc-date-range-picker-popover_compact': isCompactView,
-        }), ref: popoverRef, placement: placement, alignment: alignment, anchor: children, defaultIsOpen: defaultIsOpen, onOpen: () => setSelection(value), children: [options.length > 0 && (jsx(DateRangePickerPopoverPresets, { isCompactView: isCompactView, customPresetLabel: customPresetLabel, options: options, value: selection, onChangeValue: setSelection })), jsx(DateRangePicker, { className: "dc-date-range-picker-popover__calendar", min: min, max: max, locale: locale, weekStartsOn: weekStartsOn, prevMonthButtonLabel: prevMonthButtonLabel, nextMonthButtonLabel: nextMonthButtonLabel, monthSelectLabel: monthSelectLabel, yearInputLabel: yearInputLabel, value: selection && selection.range, onChangeValue: handleChangeDateRange }), jsx(DateRangePickerPopoverFooter, { cancelButtonLabel: cancelButtonLabel, confirmButtonLabel: confirmButtonLabel, onClickCancelButton: handleClickCancelButton, onClickConfirmButton: handleClickConfirmButton, children: typeof footer === 'function'
+        }), ref: popoverRef, placement: placement, alignment: alignment, anchor: children, defaultIsOpen: defaultIsOpen, onOpen: () => setSelection(value), children: [options.length > 0 && (_jsx(DateRangePickerPopoverPresets, { isCompactView: isCompactView, customPresetLabel: customPresetLabel, options: options, value: selection, onChangeValue: setSelection })), _jsx(DateRangePicker, { className: "dc-date-range-picker-popover__calendar", min: min, max: max, locale: locale, weekStartsOn: weekStartsOn, prevMonthButtonLabel: prevMonthButtonLabel, nextMonthButtonLabel: nextMonthButtonLabel, monthSelectLabel: monthSelectLabel, yearInputLabel: yearInputLabel, value: selection && selection.range, onChangeValue: handleChangeDateRange }), _jsx(DateRangePickerPopoverFooter, { cancelButtonLabel: cancelButtonLabel, confirmButtonLabel: confirmButtonLabel, onClickCancelButton: handleClickCancelButton, onClickConfirmButton: handleClickConfirmButton, children: typeof footer === 'function'
                     ? footer({ selection })
                     : footer })] }));
 }
-
-export { DateRangePickerPopover };

package/{types → dist/esm}/components/date-range-picker-popover/helpers.d.ts

@@ -1,2 +1,2 @@
-import { DateRangePickerPopoverOption, DateRangePickerPopoverSelection } from './types';
+import { DateRangePickerPopoverOption, DateRangePickerPopoverSelection } from './types.js';
 export declare function findSelectedOption(selection: DateRangePickerPopoverSelection | null, options: DateRangePickerPopoverOption[]): DateRangePickerPopoverOption | null;

package/{esm → dist/esm}/components/date-range-picker-popover/helpers.js

@@ -1,4 +1,4 @@
-function findSelectedOption(selection, options) {
+export function findSelectedOption(selection, options) {
     if (!selection) {
         return null;
     }
@@ -9,5 +9,3 @@ function findSelectedOption(selection, options) {
     });
     return selectedOption || null;
 }
-
-export { findSelectedOption };

package/dist/esm/components/date-range-picker-popover/index.d.ts

@@ -0,0 +1,2 @@
+export * from './types.js';
+export * from './date-range-picker-popover.js';

package/dist/esm/components/date-range-picker-popover/index.js

@@ -0,0 +1,2 @@
+export * from './types.js';
+export * from './date-range-picker-popover.js';

package/{types → dist/esm}/components/date-range-picker-popover/types.d.ts

@@ -1,4 +1,4 @@
-import { DateISORange } from '../date-picker/date-range';
+import { DateISORange } from '../date-picker/date-range.js';
 export type DateRangePickerPopoverSelection = {
     preset: string;
     range: DateISORange;

package/dist/esm/components/date-range-picker-popover/types.js

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

package/{esm → dist/esm}/components/date-range-picker-popover/use-is-compact-view.js

@@ -1,6 +1,5 @@
-import { useMemo, useState, useEffect } from 'react';
-
-function useIsCompactView(breakpoint) {
+import { useEffect, useMemo, useState } from 'react';
+export function useIsCompactView(breakpoint) {
     const compactViewMediaQuery = useMemo(() => {
         if (typeof document !== 'undefined') {
             return window.matchMedia(breakpoint);
@@ -21,5 +20,3 @@ function useIsCompactView(breakpoint) {
     }, [compactViewMediaQuery]);
     return isCompactView;
 }
-
-export { useIsCompactView };

package/dist/esm/components/dialog/dialog-body.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef } from 'react';
+import { classNames } from '../../lib/react-helpers.js';
+export function DialogBody({ className, children, }) {
+    const ref = useRef(null);
+    return (_jsx("div", { ref: ref, className: classNames('dc-dialog-body', className), children: children }));
+}

package/{esm → dist/esm}/components/dialog/dialog-context.js

@@ -1,21 +1,18 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useContext } from 'react';
-
 const DialogContext = createContext(null);
-function useDialogContext() {
+export function useDialogContext() {
     const context = useContext(DialogContext);
     if (!context) {
         throw new Error('useDialogContext must be used within DialogProvider');
     }
     return context;
 }
-function DialogContextProvider(props) {
-    return (jsx(DialogContext.Provider, { value: {
+export function DialogContextProvider(props) {
+    return (_jsx(DialogContext.Provider, { value: {
             titleId: props.titleId,
             descriptionId: props.descriptionId,
             isOpen: props.isOpen,
             onClose: props.onClose,
         }, children: props.children }));
 }
-
-export { DialogContextProvider, useDialogContext };

package/dist/esm/components/dialog/dialog-footer.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from '../../lib/react-helpers.js';
+export function DialogFooter({ hasBorder, className, children, }) {
+    return (_jsx("div", { className: classNames(className, {
+            'dc-dialog-footer': true,
+            'dc-dialog-footer_has_border': hasBorder,
+        }), children: children }));
+}

package/dist/esm/components/dialog/dialog-header.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { classNames } from '../../lib/react-helpers.js';
+import { useDialogContext } from './dialog-context.js';
+import { IconButton } from '../button/index.js';
+import { XMarkIcon } from '../hero-icons/24/outline/x-mark-icon.js';
+export function DialogHeader({ hasBorder, heading, subheading, className, children, }) {
+    const { titleId, descriptionId, onClose, } = useDialogContext();
+    const shouldRenderHeading = Boolean(heading);
+    const shouldRenderDescription = Boolean(subheading);
+    const shouldRenderChildren = Boolean(children);
+    return (_jsxs("div", { className: classNames(className, {
+            'dc-dialog-header': true,
+            'dc-dialog-header_has_border': hasBorder,
+        }), children: [_jsxs("div", { className: "dc-dialog-header__title-bar", children: [shouldRenderHeading && (_jsx("h2", { id: titleId, className: "dc-dialog-header__heading", children: heading })), _jsx(IconButton, { className: "dc-dialog-header__close-btn", buttonStyle: "plain", onClick: () => onClose(), children: _jsx(XMarkIcon, { width: 18, height: 18, strokeWidth: 2 }) })] }), shouldRenderDescription && (_jsx("div", { id: descriptionId, className: "dc-dialog-header__subheading", children: subheading })), shouldRenderChildren && (_jsx("div", { className: "dc-dialog-header__body", children: children }))] }));
+}

package/{esm → dist/esm}/components/dialog/dialog.js

@@ -1,14 +1,10 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { useId, useRef, useEffect } from 'react';
-import { focusElement, classNames } from '../../lib/react-helpers.js';
-import { useDisableBodyScroll } from '../../hooks/use-disable-body-scroll.js';
-import { useEscKeyDown } from '../../hooks/use-esc-key-down.js';
-import { useFocusTrap } from '../../hooks/use-focus-trap.js';
-import { useMountTransition } from '../../hooks/use-mount-transition.js';
-import { Portal } from '../portal/portal.js';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef } from 'react';
+import { classNames, focusElement } from '../../lib/react-helpers.js';
+import { useDisableBodyScroll, useEscKeyDown, useFocusTrap, useMountTransition } from '../../hooks/index.js';
+import { Portal } from '../portal/index.js';
 import { DialogContextProvider } from './dialog-context.js';
-
-function Dialog({ width = 'md', isOpen = false, openFocusRef, closeFocusRef, onClose, className, children, ...props }) {
+export function Dialog({ width = 'md', isOpen = false, openFocusRef, closeFocusRef, onClose, className, children, ...props }) {
     const defaultId = useId();
     const dialogRef = useRef(null);
     const durationMs = 200;
@@ -37,12 +33,10 @@ function Dialog({ width = 'md', isOpen = false, openFocusRef, closeFocusRef, onC
     const id = props.id || defaultId;
     const titleId = `dialog-title-${id}`;
     const descriptionId = `dialog-description-${id}`;
-    return (jsx(Portal, { children: jsxs("div", { style: {
+    return (_jsx(Portal, { children: _jsxs("div", { style: {
                 '--dc-dialog-transition-duration': `${durationMs}ms`,
-            }, className: classNames('dc-dialog', transitionClass), children: [jsx("div", { className: "dc-dialog-backdrop" }), jsx("div", { ...props, ref: dialogRef, className: classNames(className, {
+            }, className: classNames('dc-dialog', transitionClass), children: [_jsx("div", { className: "dc-dialog-backdrop" }), _jsx("div", { ...props, ref: dialogRef, className: classNames(className, {
                         'dc-dialog-modal': true,
                         [`dc-dialog-modal_${width}`]: width,
-                    }), role: "dialog", id: id, "aria-labelledby": titleId, "aria-describedby": descriptionId, "aria-modal": true, children: jsx(DialogContextProvider, { titleId: titleId, descriptionId: descriptionId, isOpen: isOpen, onClose: onClose, children: children }) })] }) }));
+                    }), role: "dialog", id: id, "aria-labelledby": titleId, "aria-describedby": descriptionId, "aria-modal": true, children: _jsx(DialogContextProvider, { titleId: titleId, descriptionId: descriptionId, isOpen: isOpen, onClose: onClose, children: children }) })] }) }));
 }
-
-export { Dialog };

package/dist/esm/components/dialog/index.d.ts

@@ -0,0 +1,4 @@
+export * from './dialog.js';
+export * from './dialog-header.js';
+export * from './dialog-body.js';
+export * from './dialog-footer.js';

package/dist/esm/components/dialog/index.js

@@ -0,0 +1,4 @@
+export * from './dialog.js';
+export * from './dialog-header.js';
+export * from './dialog-body.js';
+export * from './dialog-footer.js';

package/dist/esm/components/empty-state/empty-state.d.ts

@@ -0,0 +1,12 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+type EmptyStateHTMLProps = ComponentPropsWithoutRef<'div'>;
+type EmptyStateBaseProps = Omit<EmptyStateHTMLProps, 'title'>;
+export type EmptyStateProps = {
+    image?: ReactNode;
+    title?: ReactNode;
+    message?: ReactNode;
+    primaryAction?: ReactNode;
+    secondaryAction?: ReactNode;
+} & EmptyStateBaseProps;
+export declare function EmptyState({ className, image, title, message, primaryAction, secondaryAction, children, }: EmptyStateProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { classNames } from '../../lib/react-helpers.js';
+export function EmptyState({ className, image, title, message, primaryAction, secondaryAction, children, }) {
+    return (_jsxs("section", { className: classNames('dc-empty-state', className), children: [image
+                ? _jsx("div", { className: "dc-empty-state__image", children: image })
+                : null, title
+                ? _jsx("h2", { className: "dc-empty-state__title", children: title })
+                : null, message
+                ? _jsx("div", { className: "dc-empty-state__message", children: message })
+                : null, primaryAction
+                ? _jsx("div", { className: "dc-empty-state__primary-action", children: primaryAction })
+                : null, secondaryAction
+                ? _jsx("div", { className: "dc-empty-state__secondary-action", children: secondaryAction })
+                : null, children
+                ? _jsx("div", { className: "dc-empty-state__content", children: children })
+                : null] }));
+}

package/dist/esm/components/empty-state/index.d.ts

@@ -0,0 +1 @@
+export * from './empty-state.js';

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

@@ -0,0 +1 @@
+export * from './empty-state.js';

package/{esm → dist/esm}/components/file-picker/file-picker.js

@@ -1,10 +1,8 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef, useId, useRef, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } 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) {
+import { Button } from '../button/index.js';
+export 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);
@@ -36,10 +34,8 @@ const FilePicker = forwardRef(function FilePicker({ label, icon, caption, button
             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: () => inputRef.current?.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/dist/esm/components/file-picker/index.d.ts

@@ -0,0 +1 @@
+export * from './file-picker.js';

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

@@ -0,0 +1 @@
+export * from './file-picker.js';

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

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { classNames } from '../../lib/react-helpers.js';
+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 }));
+});

package/{esm → dist/esm}/components/filter-buttons/filter-buttons.js

@@ -1,9 +1,8 @@
-import { jsx } from 'react/jsx-runtime';
-import { useRef, useLayoutEffect } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useLayoutEffect, useRef } from 'react';
 import { assertIfNullable } from '../../lib/helpers.js';
 import { classNames } from '../../lib/react-helpers.js';
-
-function FilterButtons({ className, children, ...props }) {
+export function FilterButtons({ className, children, ...props }) {
     const ref = useRef(null);
     useLayoutEffect(() => {
         const el = ref.current;
@@ -19,7 +18,5 @@ 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/dist/esm/components/filter-buttons/index.d.ts

@@ -0,0 +1,2 @@
+export * from './filter-buttons.js';
+export * from './filter-button.js';

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

@@ -0,0 +1,2 @@
+export * from './filter-buttons.js';
+export * from './filter-button.js';

package/{types → dist/esm}/components/filtered-search/filter-item.d.ts

@@ -1,4 +1,4 @@
-import { Filter } from './types';
+import { Filter } from './types.js';
 export type FilterItemProps = {
     filter: Filter;
     isEditing: boolean;

package/dist/esm/components/filtered-search/filter-item.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { StringFilter } from './model/string-filter.js';
+import { StringSetFilter } from './model/string-set-filter.js';
+import { exhaustiveCheck } from '../../lib/index.js';
+import { StringFilterItem } from './string-filter-item.js';
+import { StringSetFilterItem } from './string-set-filter-item.js';
+export function FilterItem({ filter, isEditing, onEditStart, onEditCancel, onRemove, onChange, }) {
+    const filterType = filter.type;
+    switch (filterType) {
+        case StringFilter.Type:
+            return (_jsx(StringFilterItem, { filter: filter, isEditing: isEditing, onEditStart: onEditStart, onEditCancel: onEditCancel, onRemove: onRemove, onChange: onChange }));
+        case StringSetFilter.Type:
+            return (_jsx(StringSetFilterItem, { filter: filter, isEditing: isEditing, onEditStart: onEditStart, onEditCancel: onEditCancel, onRemove: onRemove, onChange: onChange }));
+        default:
+            exhaustiveCheck(filterType, `Unable to render filter type ${filterType}.`);
+    }
+}

package/dist/esm/components/filtered-search/filter-operator-select.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { classNames } from '../../lib/index.js';
+import { Select } from '../select/index.js';
+export function FilterOperatorSelect({ accessibleName, className, label, values, value, onChange, formatValue, }) {
+    const shouldRenderSelect = values.length > 1;
+    const onValueChanged = (newValue) => {
+        onChange(newValue);
+    };
+    return (_jsxs("div", { className: classNames('dc-filter-operator-select', className), children: [_jsx("span", { children: shouldRenderSelect
+                    ? label
+                    : `${label} ${formatValue(value)}` }), shouldRenderSelect && (_jsx(Select, { size: "sm", "data-testid": "filter-operator-select", "aria-label": accessibleName, value: value, onChangeValue: onValueChanged, children: values.map((value) => (_jsx("option", { value: value, children: formatValue(value) }, value))) }))] }));
+}

package/dist/esm/components/filtered-search/filter-token.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { classNames } from '../../lib/index.js';
+import { useTranslations } from './use-translations.js';
+import { XMarkIcon } from '../hero-icons/24/outline/x-mark-icon.js';
+export const FilterToken = forwardRef(function FilterToken({ className, isHighlighted, children, onClickLabel, onClickCloseButton, }, ref) {
+    const { removeFilterButton } = useTranslations();
+    return (_jsxs("div", { ref: ref, "data-testid": "filter-token", className: classNames(className, {
+            'dc-filter-token': true,
+            'dc-filter-token_highlighted': isHighlighted,
+        }), children: [_jsx("button", { className: "dc-filter-token__label", onClick: onClickLabel, children: children }), _jsx("button", { className: "dc-filter-token__button", type: "button", "aria-label": removeFilterButton, onClick: onClickCloseButton, children: _jsx(XMarkIcon, { width: 16, height: 16 }) })] }));
+});

package/dist/esm/components/filtered-search/filter-value-list.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from '../../lib/index.js';
+import { SelectionControl } from '../selection-control/index.js';
+import { Checkbox } from '../checkbox/index.js';
+export function FilterValueList({ className, values, checkedValues, onChangeCheckedValues, formatValue, }) {
+    const onChange = (event) => {
+        const checkboxElement = event.currentTarget;
+        const value = checkboxElement.value;
+        const checked = checkboxElement.checked;
+        onChangeCheckedValues(checked
+            ? [...checkedValues, value]
+            : checkedValues.filter((prevValue) => prevValue !== value));
+    };
+    return (_jsx("ul", { className: classNames('dc-filter-value-list', className), children: values.map((value) => (_jsx("li", { children: _jsx(SelectionControl, { label: formatValue(value), children: _jsx(Checkbox, { value: value, checked: checkedValues.includes(value), onChange: onChange }) }) }, value))) }));
+}

package/{types → dist/esm}/components/filtered-search/filtered-search.d.ts

@@ -1,5 +1,5 @@
 import { ComponentPropsWithoutRef } from 'react';
-import { Filter, FilterConfig } from './types';
+import { Filter, FilterConfig } from './types.js';
 export type FilteredSearchHTMLProps = ComponentPropsWithoutRef<'div'>;
 export type FilteredSearchBaseProps = Omit<FilteredSearchHTMLProps, 'children' | 'placeholder'>;
 export type FilteredSearchProps = FilteredSearchBaseProps & {

package/{esm → dist/esm}/components/filtered-search/filtered-search.js

@@ -1,18 +1,15 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { useRef, useState, useMemo } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useRef, useState, } from 'react';
 import { StringFilter } from './model/string-filter.js';
 import { StringSetFilter } from './model/string-set-filter.js';
 import { TranslationsProvider } from './use-translations.js';
 import { useComboboxIds } from './use-combobox-ids.js';
-import '../button/button.js';
-import { IconButton } from '../button/icon-button.js';
+import { IconButton } from '../button/index.js';
 import { FilterItem } from './filter-item.js';
-import { MagnifyingGlassIcon, TrashIcon } from './icons.js';
-import { KeyboardKeys } from '../../lib/keyboard-keys.js';
-import { exhaustiveCheck } from '../../lib/helpers.js';
-import { classNames } from '../../lib/react-helpers.js';
-
-function FilteredSearch({ filters: appliedFilters, className, placeholder = 'Search and filter', applyButtonLabel = 'Apply', cancelButtonLabel = 'Cancel', clearButtonAccessibleName = 'Clear', removeFilterButtonAccessibleName = 'Remove filter', filtersConfig, onChangeFilters, onMouseDown, ...props }) {
+import { TrashIcon } from '../hero-icons/24/outline/trash-icon.js';
+import { MagnifyingGlassIcon } from '../hero-icons/24/outline/magnifying-glass-icon.js';
+import { KeyboardKeys, classNames, exhaustiveCheck } from '../../lib/index.js';
+export function FilteredSearch({ filters: appliedFilters, className, placeholder = 'Search and filter', applyButtonLabel = 'Apply', cancelButtonLabel = 'Cancel', clearButtonAccessibleName = 'Clear', removeFilterButtonAccessibleName = 'Remove filter', filtersConfig, onChangeFilters, onMouseDown, ...props }) {
     const containerRef = useRef(null);
     const [newFilter, setNewFilter] = useState(null);
     const [query, setQuery] = useState('');
@@ -84,7 +81,7 @@ function FilteredSearch({ filters: appliedFilters, className, placeholder = 'Sea
     for (const filter of filters) {
         const field = filter.field;
         fieldsWithAppliedFilters.add(field);
-        renderedFilters.push(jsx(FilterItem, { filter: filter, isEditing: activeField === field, onEditStart: onFilterEditStarted, onEditCancel: onFilterEditCanceled, onChange: onFilterChanged, onRemove: removeFilter }, field));
+        renderedFilters.push(_jsx(FilterItem, { filter: filter, isEditing: activeField === field, onEditStart: onFilterEditStarted, onEditCancel: onFilterEditCanceled, onChange: onFilterChanged, onRemove: removeFilter }, field));
     }
     const onOptionSelected = (config) => {
         const filter = createFilter(config);
@@ -116,7 +113,7 @@ function FilteredSearch({ filters: appliedFilters, className, placeholder = 'Sea
         if (!config.label.toLowerCase().includes(search)) {
             continue;
         }
-        renderedOptions.push(jsx("li", { id: id, role: "option", "data-field": config.field, "aria-selected": selectedId === id, onMouseEnter: onOptionHovered, onMouseDown: onOptionPressed, children: config.label }, id));
+        renderedOptions.push(_jsx("li", { id: id, role: "option", "data-field": config.field, "aria-selected": selectedId === id, onMouseEnter: onOptionHovered, onMouseDown: onOptionPressed, children: config.label }, id));
     }
     const onInputFocused = () => {
         setHasFocus(true);
@@ -197,10 +194,10 @@ function FilteredSearch({ filters: appliedFilters, className, placeholder = 'Sea
             onMouseDown(event);
         }
     };
-    return (jsx(TranslationsProvider, { applyButton: applyButtonLabel, cancelButton: cancelButtonLabel, removeFilterButton: removeFilterButtonAccessibleName, children: jsxs("div", { ref: containerRef, "data-testid": "combobox-container", className: classNames(className, {
+    return (_jsx(TranslationsProvider, { applyButton: applyButtonLabel, cancelButton: cancelButtonLabel, removeFilterButton: removeFilterButtonAccessibleName, children: _jsxs("div", { ref: containerRef, "data-testid": "combobox-container", className: classNames(className, {
                 'dc-filtered-search': true,
                 'dc-filtered-search_has_focus': hasFocus,
-            }), onMouseDown: onContainerPressed, ...props, children: [jsx(MagnifyingGlassIcon, { className: "dc-filtered-search__icon" }), jsxs("div", { className: "dc-filtered-search__filters", children: [renderedFilters, jsx("input", { className: "dc-filtered-search__input", id: textBoxId, placeholder: placeholder, type: "text", role: "combobox", "aria-autocomplete": "list", "aria-expanded": expanded, "aria-controls": listBoxId, "aria-activedescendant": selectedId, value: query, onFocus: onInputFocused, onBlur: onInputBlurred, onKeyDown: onInputKeyPressed, onChange: onInputChanged })] }), jsx(IconButton, { className: "dc-filtered-search__clear-button", "aria-label": clearButtonAccessibleName, icon: jsx(TrashIcon, {}), size: "sm", variant: "plain", appearance: "primary", onClick: onClearButtonPressed }), expanded && renderedOptions.length > 0 && (jsx("ul", { className: "dc-filtered-search__list-box", id: listBoxId, role: "listbox", children: renderedOptions }))] }) }));
+            }), role: "presentation", onMouseDown: onContainerPressed, ...props, children: [_jsx(MagnifyingGlassIcon, { className: "dc-filtered-search__icon", width: 18, height: 18 }), _jsxs("div", { className: "dc-filtered-search__filters", children: [renderedFilters, _jsx("input", { className: "dc-filtered-search__input", id: textBoxId, placeholder: placeholder, type: "text", role: "combobox", "aria-autocomplete": "list", "aria-expanded": expanded, "aria-controls": listBoxId, "aria-activedescendant": selectedId, value: query, onFocus: onInputFocused, onBlur: onInputBlurred, onKeyDown: onInputKeyPressed, onChange: onInputChanged })] }), _jsx(IconButton, { className: "dc-filtered-search__clear-button", "aria-label": clearButtonAccessibleName, buttonStyle: "plain", tint: "blue", size: "sm", onClick: onClearButtonPressed, children: _jsx(TrashIcon, { width: 18, height: 18 }) }), expanded && renderedOptions.length > 0 && (_jsx("ul", { className: "dc-filtered-search__list-box", id: listBoxId, role: "listbox", children: renderedOptions }))] }) }));
 }
 function createFilter(config) {
     const filterType = config.type;
@@ -219,5 +216,3 @@ function createFilter(config) {
             exhaustiveCheck(filterType, `Unable to create a filter with ${filterType} type.`);
     }
 }
-
-export { FilteredSearch };

package/{types → dist/esm}/components/filtered-search/index.d.ts

@@ -1,4 +1,4 @@
-export { FilteredSearch, type FilteredSearchProps, type FilteredSearchBaseProps, type FilteredSearchHTMLProps, } from './filtered-search';
-export { type Filter, type FilterConfig, } from './types';
-export { StringFilter, type StringFilterState, type StringFilterConfig, type StringFilterOperator, } from './model/string-filter';
-export { StringSetFilter, type StringSetFilterState, type StringSetFilterConfig, type StringSetFilterOperator, } from './model/string-set-filter';
+export { FilteredSearch, type FilteredSearchProps, type FilteredSearchBaseProps, type FilteredSearchHTMLProps, } from './filtered-search.js';
+export { type Filter, type FilterConfig, } from './types.js';
+export { StringFilter, type StringFilterState, type StringFilterConfig, type StringFilterOperator, } from './model/string-filter.js';
+export { StringSetFilter, type StringSetFilterState, type StringSetFilterConfig, type StringSetFilterOperator, } from './model/string-set-filter.js';

package/dist/esm/components/filtered-search/index.js

@@ -0,0 +1,3 @@
+export { FilteredSearch, } from './filtered-search.js';
+export { StringFilter, } from './model/string-filter.js';
+export { StringSetFilter, } from './model/string-set-filter.js';

package/dist/esm/components/filtered-search/model/abstract-filter.js

@@ -0,0 +1,2 @@
+export class AbstractFilter {
+}

package/{types → dist/esm}/components/filtered-search/model/string-filter.d.ts

@@ -1,5 +1,5 @@
-import { AbstractFilter } from './abstract-filter';
-import { ValidationResult } from './validation-result';
+import { AbstractFilter } from './abstract-filter.js';
+import { ValidationResult } from './validation-result.js';
 declare const TYPE: "STRING";
 declare const OPERATORS: {
     readonly equal: "EQUAL";

package/{esm → dist/esm}/components/filtered-search/model/string-filter.js

@@ -1,5 +1,4 @@
 import { AbstractFilter } from './abstract-filter.js';
-
 const TYPE = 'STRING';
 const OPERATORS = {
     equal: 'EQUAL',
@@ -7,7 +6,7 @@ const OPERATORS = {
     contain: 'CONTAIN',
     notContain: 'NOT_CONTAIN',
 };
-class StringFilter extends AbstractFilter {
+export class StringFilter extends AbstractFilter {
     constructor(config, state) {
         super();
         this.config = config;
@@ -40,5 +39,3 @@ class StringFilter extends AbstractFilter {
 }
 StringFilter.Type = TYPE;
 StringFilter.Operators = OPERATORS;
-
-export { StringFilter };

package/{types → dist/esm}/components/filtered-search/model/string-set-filter.d.ts

@@ -1,4 +1,4 @@
-import { AbstractFilter } from './abstract-filter';
+import { AbstractFilter } from './abstract-filter.js';
 declare const TYPE: "STRING_SET";
 declare const OPERATORS: {
     readonly in: "IN";

package/{esm → dist/esm}/components/filtered-search/model/string-set-filter.js

@@ -1,11 +1,10 @@
 import { AbstractFilter } from './abstract-filter.js';
-
 const TYPE = 'STRING_SET';
 const OPERATORS = {
     in: 'IN',
     notIn: 'NOT_IN',
 };
-class StringSetFilter extends AbstractFilter {
+export class StringSetFilter extends AbstractFilter {
     constructor(config, state) {
         super();
         this.config = config;
@@ -38,5 +37,3 @@ class StringSetFilter extends AbstractFilter {
 }
 StringSetFilter.Type = TYPE;
 StringSetFilter.Operators = OPERATORS;
-
-export { StringSetFilter };

package/dist/esm/components/filtered-search/model/validation-result.js

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