draft-components 1.13.0 → 2.0.0

package/cjs/components/date-range-picker-popover/date-range-picker-popover-presets.cjs

@@ -1,35 +0,0 @@
-'use strict';
-
-const jsxRuntime = require('react/jsx-runtime');
-const react = require('react');
-const helpers = require('./helpers.cjs');
-const select = require('../select/select.cjs');
-const radio = require('../radio/radio.cjs');
-const selectionControl = require('../selection-control/selection-control.cjs');
-
-function DateRangePickerPopoverPresets({ isCompactView, customPresetLabel, options, value, onChangeValue, }) {
-    const id = react.useId();
-    const name = `${id}-date-preset`;
-    const selectedOption = helpers.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 (jsxRuntime.jsx("div", { className: "dc-date-range-picker-popover__presets", children: jsxRuntime.jsxs(select.Select, { size: "md", isBlock: true, value: selectedPreset, onChange: handleChange, children: [jsxRuntime.jsx("option", { value: "", disabled: true, children: customPresetLabel }), options.map((option) => (jsxRuntime.jsx("option", { value: option.preset, children: option.label }, option.preset)))] }) }));
-    }
-    return (jsxRuntime.jsx("ul", { className: "dc-date-range-picker-popover__presets", children: options.map((option) => {
-            const preset = option.preset;
-            const id = `${name}-${preset}`;
-            return (jsxRuntime.jsx("li", { children: jsxRuntime.jsx(selectionControl.SelectionControl, { label: option.label, labelFor: id, children: jsxRuntime.jsx(radio.Radio, { icon: "check", id: id, name: name, value: preset, checked: preset === selectedPreset, onChange: handleChange }) }) }, option.preset));
-        }) }));
-}
-
-exports.DateRangePickerPopoverPresets = DateRangePickerPopoverPresets;

package/cjs/components/date-range-picker-popover/date-range-picker-popover.cjs

@@ -1,59 +0,0 @@
-'use strict';
-
-const jsxRuntime = require('react/jsx-runtime');
-const reactHelpers = require('../../lib/react-helpers.cjs');
-const helpers$1 = require('../../lib/helpers.cjs');
-const helpers = require('./helpers.cjs');
-const react = require('react');
-const useIsCompactView = require('./use-is-compact-view.cjs');
-const popover = require('../popover/popover.cjs');
-require('../button/button.cjs');
-require('../button/icon-button.cjs');
-require('../select/select.cjs');
-require('../text-input/text-input.cjs');
-const dateRangePicker = require('../date-picker/date-range-picker.cjs');
-const dateRangePickerPopoverFooter = require('./date-range-picker-popover-footer.cjs');
-const dateRangePickerPopoverPresets = require('./date-range-picker-popover-presets.cjs');
-
-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] = react.useState(value);
-    const popoverRef = react.useRef(null);
-    const isCompactView = useIsCompactView.useIsCompactView(compactViewBreakpoint);
-    function getPopover() {
-        const popover = popoverRef.current;
-        helpers$1.assertIfNullable(popover, 'Popover ref was not set');
-        return popover;
-    }
-    function handleClickCancelButton() {
-        getPopover().close();
-    }
-    function handleClickConfirmButton() {
-        if (selection) {
-            onChangeValue(selection);
-        }
-        getPopover().close();
-    }
-    function handleChangeDateRange(range) {
-        const selection = { range, preset: customPreset };
-        const selectedOption = helpers.findSelectedOption(selection, options);
-        if (selectedOption) {
-            setSelection({
-                preset: selectedOption.preset,
-                range: selectedOption.range,
-            });
-        }
-        else {
-            setSelection(selection);
-        }
-    }
-    return (jsxRuntime.jsxs(popover.Popover, { className: reactHelpers.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 && (jsxRuntime.jsx(dateRangePickerPopoverPresets.DateRangePickerPopoverPresets, { isCompactView: isCompactView, customPresetLabel: customPresetLabel, options: options, value: selection, onChangeValue: setSelection })), jsxRuntime.jsx(dateRangePicker.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 }), jsxRuntime.jsx(dateRangePickerPopoverFooter.DateRangePickerPopoverFooter, { cancelButtonLabel: cancelButtonLabel, confirmButtonLabel: confirmButtonLabel, onClickCancelButton: handleClickCancelButton, onClickConfirmButton: handleClickConfirmButton, children: typeof footer === 'function'
-                    ? footer({ selection })
-                    : footer })] }));
-}
-
-exports.DateRangePickerPopover = DateRangePickerPopover;

package/cjs/components/date-range-picker-popover/helpers.cjs

@@ -1,15 +0,0 @@
-'use strict';
-
-function findSelectedOption(selection, options) {
-    if (!selection) {
-        return null;
-    }
-    const selectedOption = options.find((option) => {
-        const range = option.range;
-        return (range.start === selection.range.start &&
-            range.end === selection.range.end);
-    });
-    return selectedOption || null;
-}
-
-exports.findSelectedOption = findSelectedOption;

package/cjs/components/date-range-picker-popover/use-is-compact-view.cjs

@@ -1,27 +0,0 @@
-'use strict';
-
-const react = require('react');
-
-function useIsCompactView(breakpoint) {
-    const compactViewMediaQuery = react.useMemo(() => {
-        if (typeof document !== 'undefined') {
-            return window.matchMedia(breakpoint);
-        }
-        return null;
-    }, [breakpoint]);
-    const [isCompactView, setIsCompactView] = react.useState(() => compactViewMediaQuery?.matches || false);
-    react.useEffect(() => {
-        if (compactViewMediaQuery) {
-            const handleChange = () => {
-                setIsCompactView(compactViewMediaQuery.matches);
-            };
-            compactViewMediaQuery.addEventListener('change', handleChange);
-            return () => {
-                compactViewMediaQuery.removeEventListener('change', handleChange);
-            };
-        }
-    }, [compactViewMediaQuery]);
-    return isCompactView;
-}
-
-exports.useIsCompactView = useIsCompactView;

package/cjs/components/dialog/dialog-body.cjs

@@ -1,12 +0,0 @@
-'use strict';
-
-const jsxRuntime = require('react/jsx-runtime');
-const react = require('react');
-const reactHelpers = require('../../lib/react-helpers.cjs');
-
-function DialogBody({ className, children, }) {
-    const ref = react.useRef(null);
-    return (jsxRuntime.jsx("div", { ref: ref, className: reactHelpers.classNames('dc-dialog-body', className), children: children }));
-}
-
-exports.DialogBody = DialogBody;

package/cjs/components/dialog/dialog-context.cjs

@@ -1,24 +0,0 @@
-'use strict';
-
-const jsxRuntime = require('react/jsx-runtime');
-const react = require('react');
-
-const DialogContext = react.createContext(null);
-function useDialogContext() {
-    const context = react.useContext(DialogContext);
-    if (!context) {
-        throw new Error('useDialogContext must be used within DialogProvider');
-    }
-    return context;
-}
-function DialogContextProvider(props) {
-    return (jsxRuntime.jsx(DialogContext.Provider, { value: {
-            titleId: props.titleId,
-            descriptionId: props.descriptionId,
-            isOpen: props.isOpen,
-            onClose: props.onClose,
-        }, children: props.children }));
-}
-
-exports.DialogContextProvider = DialogContextProvider;
-exports.useDialogContext = useDialogContext;

package/cjs/components/dialog/dialog-footer.cjs

@@ -1,13 +0,0 @@
-'use strict';
-
-const jsxRuntime = require('react/jsx-runtime');
-const reactHelpers = require('../../lib/react-helpers.cjs');
-
-function DialogFooter({ hasBorder, className, children, }) {
-    return (jsxRuntime.jsx("div", { className: reactHelpers.classNames(className, {
-            'dc-dialog-footer': true,
-            'dc-dialog-footer_has_border': hasBorder,
-        }), children: children }));
-}
-
-exports.DialogFooter = DialogFooter;

package/cjs/components/dialog/dialog-header.cjs

@@ -1,21 +0,0 @@
-'use strict';
-
-const jsxRuntime = require('react/jsx-runtime');
-const reactHelpers = require('../../lib/react-helpers.cjs');
-const dialogContext = require('./dialog-context.cjs');
-require('../button/button.cjs');
-const iconButton = require('../button/icon-button.cjs');
-const xMarkIcon = require('./x-mark-icon.cjs');
-
-function DialogHeader({ hasBorder, heading, subheading, className, children, }) {
-    const { titleId, descriptionId, onClose, } = dialogContext.useDialogContext();
-    const shouldRenderHeading = Boolean(heading);
-    const shouldRenderDescription = Boolean(subheading);
-    const shouldRenderChildren = Boolean(children);
-    return (jsxRuntime.jsxs("div", { className: reactHelpers.classNames(className, {
-            'dc-dialog-header': true,
-            'dc-dialog-header_has_border': hasBorder,
-        }), children: [jsxRuntime.jsxs("div", { className: "dc-dialog-header__title-bar", children: [shouldRenderHeading && (jsxRuntime.jsx("h2", { id: titleId, className: "dc-dialog-header__heading", children: heading })), jsxRuntime.jsx(iconButton.IconButton, { icon: jsxRuntime.jsx(xMarkIcon.XMarkIcon, { width: 18, height: 18, strokeWidth: 2 }), variant: "plain", className: "dc-dialog-header__close-btn", onClick: () => onClose() })] }), shouldRenderDescription && (jsxRuntime.jsx("div", { id: descriptionId, className: "dc-dialog-header__subheading", children: subheading })), shouldRenderChildren && (jsxRuntime.jsx("div", { className: "dc-dialog-header__body", children: children }))] }));
-}
-
-exports.DialogHeader = DialogHeader;

package/cjs/components/dialog/dialog.cjs

@@ -1,50 +0,0 @@
-'use strict';
-
-const jsxRuntime = require('react/jsx-runtime');
-const react = require('react');
-const reactHelpers = require('../../lib/react-helpers.cjs');
-const useDisableBodyScroll = require('../../hooks/use-disable-body-scroll.cjs');
-const useEscKeyDown = require('../../hooks/use-esc-key-down.cjs');
-const useFocusTrap = require('../../hooks/use-focus-trap.cjs');
-const useMountTransition = require('../../hooks/use-mount-transition.cjs');
-const portal = require('../portal/portal.cjs');
-const dialogContext = require('./dialog-context.cjs');
-
-function Dialog({ width = 'md', isOpen = false, openFocusRef, closeFocusRef, onClose, className, children, ...props }) {
-    const defaultId = react.useId();
-    const dialogRef = react.useRef(null);
-    const durationMs = 200;
-    const { isMounted, className: transitionClass } = useMountTransition.useMountTransition({
-        durationMs,
-        isShown: isOpen,
-        enterFrom: 'dc-dialog_closed',
-        enterTo: 'dc-dialog_opened',
-    });
-    react.useEffect(() => {
-        if (isOpen) {
-            const openFocus = openFocusRef?.current;
-            const closeFocus = closeFocusRef?.current;
-            reactHelpers.focusElement(openFocus);
-            return () => reactHelpers.focusElement(closeFocus);
-        }
-    }, [isOpen, openFocusRef, closeFocusRef]);
-    useEscKeyDown.useEscKeyDown(() => {
-        onClose();
-    }, { isEnabled: isOpen });
-    useFocusTrap.useFocusTrap(dialogRef, { isEnabled: isOpen });
-    useDisableBodyScroll.useDisableBodyScroll({ isEnabled: isOpen });
-    if (!isOpen && !isMounted) {
-        return null;
-    }
-    const id = props.id || defaultId;
-    const titleId = `dialog-title-${id}`;
-    const descriptionId = `dialog-description-${id}`;
-    return (jsxRuntime.jsx(portal.Portal, { children: jsxRuntime.jsxs("div", { style: {
-                '--dc-dialog-transition-duration': `${durationMs}ms`,
-            }, className: reactHelpers.classNames('dc-dialog', transitionClass), children: [jsxRuntime.jsx("div", { className: "dc-dialog-backdrop" }), jsxRuntime.jsx("div", { ...props, ref: dialogRef, className: reactHelpers.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: jsxRuntime.jsx(dialogContext.DialogContextProvider, { titleId: titleId, descriptionId: descriptionId, isOpen: isOpen, onClose: onClose, children: children }) })] }) }));
-}
-
-exports.Dialog = Dialog;

package/cjs/components/dialog/x-mark-icon.cjs

@@ -1,9 +0,0 @@
-'use strict';
-
-const jsxRuntime = require('react/jsx-runtime');
-
-function XMarkIcon(props) {
-    return (jsxRuntime.jsx("svg", { width: 24, height: 24, fill: "none", stroke: "currentColor", strokeWidth: 1.5, ...props, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", children: jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" }) }));
-}
-
-exports.XMarkIcon = XMarkIcon;

package/cjs/components/empty-state/empty-state.cjs

@@ -1,10 +0,0 @@
-'use strict';
-
-const jsxRuntime = require('react/jsx-runtime');
-const reactHelpers = require('../../lib/react-helpers.cjs');
-
-function EmptyState({ className, image, heading, description, primaryAction, secondaryAction, children, }) {
-    return (jsxRuntime.jsxs("section", { className: reactHelpers.classNames('dc-empty-state', className), children: [Boolean(image) && (jsxRuntime.jsx("div", { className: "dc-empty-state__image", children: image })), Boolean(heading) && (jsxRuntime.jsx("h1", { className: "dc-empty-state__heading", children: heading })), Boolean(description) && (jsxRuntime.jsx("div", { className: "dc-empty-state__description", children: description })), Boolean(primaryAction) && (jsxRuntime.jsx("div", { className: "dc-empty-state__primary-action", children: primaryAction })), Boolean(secondaryAction) && (jsxRuntime.jsx("div", { className: "dc-empty-state__secondary-action", children: secondaryAction })), Boolean(children) && (jsxRuntime.jsx("div", { className: "dc-empty-state__content", children: children }))] }));
-}
-
-exports.EmptyState = EmptyState;

package/cjs/components/file-picker/file-picker.cjs

@@ -1,47 +0,0 @@
-'use strict';
-
-const jsxRuntime = require('react/jsx-runtime');
-const react = require('react');
-const reactHelpers = require('../../lib/react-helpers.cjs');
-const button = require('../button/button.cjs');
-require('../button/icon-button.cjs');
-
-const FilePicker = react.forwardRef(function FilePicker({ label, icon, caption, buttonLabel = 'Browse', id, style, className, disabled, onSelectFiles, ...props }, ref) {
-    const defaultId = react.useId();
-    const inputId = id || defaultId;
-    const inputRef = react.useRef(null);
-    const [draggingOver, setDraggingOver] = react.useState(false);
-    const handleChange = (event) => {
-        const fileList = event.target.files;
-        onSelectFiles?.(fileList ? Array.from(fileList) : []);
-    };
-    const handleDragOver = (event) => {
-        event.preventDefault();
-        event.stopPropagation();
-        if (!disabled) {
-            setDraggingOver(true);
-        }
-    };
-    const handleDragEnd = (event) => {
-        event.preventDefault();
-        event.stopPropagation();
-        if (!disabled) {
-            setDraggingOver(false);
-        }
-    };
-    const handleDrop = (event) => {
-        event.preventDefault();
-        event.stopPropagation();
-        if (!disabled) {
-            setDraggingOver(false);
-            const fileList = event.dataTransfer.files;
-            onSelectFiles?.(fileList ? Array.from(fileList) : []);
-        }
-    };
-    return (jsxRuntime.jsxs("div", { style: style, className: reactHelpers.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: [jsxRuntime.jsx("input", { ...props, id: inputId, ref: reactHelpers.mergeRefs(ref, inputRef), className: "dc-file-picker__input", type: "file", disabled: disabled, onChange: handleChange }), jsxRuntime.jsxs("div", { className: "dc-file-picker__body", children: [Boolean(icon) && (jsxRuntime.jsx("div", { className: "dc-file-picker__icon", children: icon })), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("label", { className: "dc-file-picker__label", htmlFor: inputId, children: label }), Boolean(caption) && (jsxRuntime.jsx("div", { className: "dc-file-picker__caption", children: caption }))] })] }), jsxRuntime.jsx(button.Button, { className: "dc-file-picker__button", onClick: () => inputRef.current?.click(), children: buttonLabel })] }));
-});
-
-exports.FilePicker = FilePicker;

package/cjs/components/filter-buttons/filter-button.cjs

@@ -1,11 +0,0 @@
-'use strict';
-
-const jsxRuntime = require('react/jsx-runtime');
-const react = require('react');
-const reactHelpers = require('../../lib/react-helpers.cjs');
-
-const FilterButton = react.forwardRef(function FilterButton({ isActive = false, 'aria-pressed': ariaPressed = isActive, className, children, ...props }, ref) {
-    return (jsxRuntime.jsx("button", { ...props, ref: ref, className: reactHelpers.classNames('dc-filter-button', isActive && 'active', className), "data-active": isActive, "aria-pressed": ariaPressed, children: children }));
-});
-
-exports.FilterButton = FilterButton;

package/cjs/components/filter-buttons/filter-buttons.cjs

@@ -1,27 +0,0 @@
-'use strict';
-
-const jsxRuntime = require('react/jsx-runtime');
-const react = require('react');
-const helpers = require('../../lib/helpers.cjs');
-const reactHelpers = require('../../lib/react-helpers.cjs');
-
-function FilterButtons({ className, children, ...props }) {
-    const ref = react.useRef(null);
-    react.useLayoutEffect(() => {
-        const el = ref.current;
-        helpers.assertIfNullable(el, 'FilterButtons ref was not set');
-        for (const child of el.children) {
-            if (child instanceof HTMLButtonElement &&
-                child.dataset.active === 'true') {
-                const offset = el.offsetWidth - child.offsetWidth - child.offsetLeft;
-                if (offset < 0) {
-                    el.scrollTo(Math.abs(offset), 0);
-                }
-                break;
-            }
-        }
-    }, []);
-    return (jsxRuntime.jsx("div", { ...props, ref: ref, role: "group", className: reactHelpers.classNames(className, 'dc-filter-buttons'), children: children }));
-}
-
-exports.FilterButtons = FilterButtons;

package/cjs/components/filtered-search/filter-item.cjs

@@ -1,23 +0,0 @@
-'use strict';
-
-const jsxRuntime = require('react/jsx-runtime');
-const stringFilter = require('./model/string-filter.cjs');
-const stringSetFilter = require('./model/string-set-filter.cjs');
-const helpers = require('../../lib/helpers.cjs');
-require('react');
-const stringFilterItem = require('./string-filter-item.cjs');
-const stringSetFilterItem = require('./string-set-filter-item.cjs');
-
-function FilterItem({ filter, isEditing, onEditStart, onEditCancel, onRemove, onChange, }) {
-    const filterType = filter.type;
-    switch (filterType) {
-        case stringFilter.StringFilter.Type:
-            return (jsxRuntime.jsx(stringFilterItem.StringFilterItem, { filter: filter, isEditing: isEditing, onEditStart: onEditStart, onEditCancel: onEditCancel, onRemove: onRemove, onChange: onChange }));
-        case stringSetFilter.StringSetFilter.Type:
-            return (jsxRuntime.jsx(stringSetFilterItem.StringSetFilterItem, { filter: filter, isEditing: isEditing, onEditStart: onEditStart, onEditCancel: onEditCancel, onRemove: onRemove, onChange: onChange }));
-        default:
-            helpers.exhaustiveCheck(filterType, `Unable to render filter type ${filterType}.`);
-    }
-}
-
-exports.FilterItem = FilterItem;

package/cjs/components/filtered-search/filter-operator-select.cjs

@@ -1,17 +0,0 @@
-'use strict';
-
-const jsxRuntime = require('react/jsx-runtime');
-const reactHelpers = require('../../lib/react-helpers.cjs');
-const select = require('../select/select.cjs');
-
-function FilterOperatorSelect({ accessibleName, className, label, values, value, onChange, formatValue, }) {
-    const shouldRenderSelect = values.length > 1;
-    const onValueChanged = (newValue) => {
-        onChange(newValue);
-    };
-    return (jsxRuntime.jsxs("div", { className: reactHelpers.classNames('dc-filter-operator-select', className), children: [jsxRuntime.jsx("span", { children: shouldRenderSelect
-                    ? label
-                    : `${label} ${formatValue(value)}` }), shouldRenderSelect && (jsxRuntime.jsx(select.Select, { size: "sm", "data-testid": "filter-operator-select", "aria-label": accessibleName, value: value, onChangeValue: onValueChanged, children: values.map((value) => (jsxRuntime.jsx("option", { value: value, children: formatValue(value) }, value))) }))] }));
-}
-
-exports.FilterOperatorSelect = FilterOperatorSelect;

package/cjs/components/filtered-search/filter-token.cjs

@@ -1,17 +0,0 @@
-'use strict';
-
-const jsxRuntime = require('react/jsx-runtime');
-const react = require('react');
-const reactHelpers = require('../../lib/react-helpers.cjs');
-const icons = require('./icons.cjs');
-const useTranslations = require('./use-translations.cjs');
-
-const FilterToken = react.forwardRef(function FilterToken({ className, isHighlighted, children, onClickLabel, onClickCloseButton, }, ref) {
-    const { removeFilterButton } = useTranslations.useTranslations();
-    return (jsxRuntime.jsxs("div", { ref: ref, "data-testid": "filter-token", className: reactHelpers.classNames(className, {
-            'dc-filter-token': true,
-            'dc-filter-token_highlighted': isHighlighted,
-        }), children: [jsxRuntime.jsx("button", { className: "dc-filter-token__label", onClick: onClickLabel, children: children }), jsxRuntime.jsx("button", { className: "dc-filter-token__button", type: "button", "aria-label": removeFilterButton, onClick: onClickCloseButton, children: jsxRuntime.jsx(icons.XMarkIcon, {}) })] }));
-});
-
-exports.FilterToken = FilterToken;

package/cjs/components/filtered-search/filter-value-list.cjs

@@ -1,20 +0,0 @@
-'use strict';
-
-const jsxRuntime = require('react/jsx-runtime');
-const reactHelpers = require('../../lib/react-helpers.cjs');
-const selectionControl = require('../selection-control/selection-control.cjs');
-const checkbox = require('../checkbox/checkbox.cjs');
-
-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 (jsxRuntime.jsx("ul", { className: reactHelpers.classNames('dc-filter-value-list', className), children: values.map((value, index) => (jsxRuntime.jsx("li", { children: jsxRuntime.jsx(selectionControl.SelectionControl, { label: formatValue(value), children: jsxRuntime.jsx(checkbox.Checkbox, { autoFocus: index === 0, value: value, checked: checkedValues.includes(value), onChange: onChange }) }) }, value))) }));
-}
-
-exports.FilterValueList = FilterValueList;