draft-components 1.6.0 → 1.7.0

package/esm/components/slide-over/slide-over.js

@@ -0,0 +1,104 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useId, useRef, useCallback, useMemo, useEffect } from 'react';
+import { SlideOverContextProvider } from './slide-over-context.js';
+import { getRefElement, 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 { Portal } from '../portal/portal.js';
+import { SlideOverHeader } from './slide-over-header.js';
+import { SlideOverBody } from './slide-over-body.js';
+
+const panelSlideIn = [
+    { transform: 'translateX(100%)' },
+    { transform: 'translateX(0%)' },
+];
+const backdropFade = [
+    { opacity: 0 },
+    { opacity: 1 },
+];
+function SlideOver({ 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, animationDurationMs = 350, animationDisabled = false, className, children, onClose, ...props }) {
+    const id = useId();
+    const titleId = ariaLabelledby || `${id}dialogTitle`;
+    const descriptionId = ariaDescribedby || `${id}dialogDescription`;
+    const backdropRef = useRef(null);
+    const panelRef = useRef(null);
+    const isAnimationDisabled = useRef(animationDisabled);
+    const shouldPlayAnimations = useCallback(() => {
+        const mediaQueryList = window.matchMedia('(prefers-reduced-motion)');
+        return !isAnimationDisabled.current && !mediaQueryList.matches;
+    }, []);
+    const closePanel = useMemo(() => {
+        let isClosing = false;
+        return (source) => {
+            if (isClosing) {
+                return;
+            }
+            if (!shouldPlayAnimations()) {
+                onClose(source);
+            }
+            isClosing = true;
+            const backdrop = getRefElement(backdropRef);
+            const backdropAnimations = backdrop.getAnimations();
+            if (backdropAnimations.length === 0) {
+                backdropAnimations.push(backdrop.animate(backdropFade, {
+                    direction: 'reverse',
+                    fill: 'both',
+                    easing: 'ease-in-out',
+                    duration: animationDurationMs,
+                }));
+            }
+            else {
+                backdropAnimations.forEach((animation) => animation.reverse());
+            }
+            const panel = getRefElement(panelRef);
+            const panelAnimations = panel.getAnimations();
+            if (panelAnimations.length === 0) {
+                backdropAnimations.push(panel.animate(panelSlideIn, {
+                    direction: 'reverse',
+                    fill: 'both',
+                    easing: 'ease-in-out',
+                    duration: animationDurationMs,
+                }));
+            }
+            else {
+                panelAnimations.forEach((animation) => animation.reverse());
+            }
+            const animations = [...backdropAnimations, ...panelAnimations];
+            Promise.all(animations.map((animation) => animation.finished)).then(() => {
+                onClose(source);
+                isClosing = false;
+            });
+        };
+    }, [animationDurationMs, onClose, shouldPlayAnimations]);
+    useEffect(() => {
+        isAnimationDisabled.current = animationDisabled;
+    }, [animationDisabled]);
+    useEffect(() => {
+        if (shouldPlayAnimations()) {
+            const backdrop = getRefElement(backdropRef);
+            backdrop.animate(backdropFade, {
+                fill: 'both',
+                easing: 'ease-in-out',
+                duration: animationDurationMs,
+            });
+            const panel = getRefElement(panelRef);
+            panel.animate(panelSlideIn, {
+                fill: 'both',
+                easing: 'ease-in-out',
+                duration: animationDurationMs,
+            });
+        }
+    }, [shouldPlayAnimations, animationDurationMs]);
+    useEscKeyDown(() => closePanel('escape'));
+    useFocusTrap(panelRef);
+    useDisableBodyScroll();
+    const onClickBackdrop = () => {
+        closePanel('backdrop');
+    };
+    return (jsx(Portal, { children: jsxs("div", { className: "dc-slide-over", children: [jsx("div", { "data-testid": "slide-over-backdrop", className: "dc-slide-over__backdrop", ref: backdropRef, onClick: onClickBackdrop }), jsx("div", { ...props, className: classNames('dc-slide-over__panel', className), role: "dialog", ref: panelRef, "aria-modal": true, "aria-labelledby": titleId, "aria-describedby": descriptionId, children: jsx(SlideOverContextProvider, { titleId: titleId, descriptionId: descriptionId, closePanel: closePanel, children: children }) })] }) }));
+}
+SlideOver.Header = SlideOverHeader;
+SlideOver.Body = SlideOverBody;
+
+export { SlideOver };

package/esm/hooks/index.js

@@ -1,4 +1,4 @@
-export { useMountTransition } from './use-mount-transition.js';
 export { useDisableBodyScroll } from './use-disable-body-scroll.js';
 export { useEscKeyDown } from './use-esc-key-down.js';
 export { useFocusTrap } from './use-focus-trap.js';
+export { useMountTransition } from './use-mount-transition.js';

package/esm/hooks/use-disable-body-scroll.js

@@ -1,7 +1,9 @@
 import { useEffect } from 'react';
 import { once } from '../lib/helpers.js';
 
-function useDisableBodyScroll(options) {
+function useDisableBodyScroll(options = {
+    isEnabled: true,
+}) {
     useEffect(() => {
         if (options.isEnabled) {
             return disableBodyScroll();

package/esm/hooks/use-esc-key-down.js

@@ -13,7 +13,9 @@ const handlers = [];
  * @param options.isEnabled A flag that determines whether to run
  * the passed handler or not.
  */
-function useEscKeyDown(handler, options) {
+function useEscKeyDown(handler, options = {
+    isEnabled: true,
+}) {
     const handlerRef = useRef(handler);
     const isEnabled = options.isEnabled;
     useEffect(() => {

package/esm/hooks/use-focus-trap.js

@@ -24,7 +24,9 @@ const focusableElementsSelector = [
  * @param {boolean} options.isEnabled - A flag that determines whether
  * to trap focus or not.
  */
-function useFocusTrap(modalRef, options) {
+function useFocusTrap(modalRef, options = {
+    isEnabled: true,
+}) {
     const isEnabled = options.isEnabled;
     useEffect(() => {
         if (!isEnabled) {

package/esm/index.js

@@ -1,10 +1,10 @@
 export { KeyboardKeys } from './lib/keyboard-keys.js';
-export { assertIfNullable, once } from './lib/helpers.js';
-export { classNames, focusElement, isReactElementWithRef, mergeRefs } from './lib/react-helpers.js';
-export { useMountTransition } from './hooks/use-mount-transition.js';
+export { assertIfNullable, exhaustiveCheck, once } from './lib/helpers.js';
+export { classNames, focusElement, getRefElement, isReactElementWithRef, mergeRefs } from './lib/react-helpers.js';
 export { useDisableBodyScroll } from './hooks/use-disable-body-scroll.js';
 export { useEscKeyDown } from './hooks/use-esc-key-down.js';
 export { useFocusTrap } from './hooks/use-focus-trap.js';
+export { useMountTransition } from './hooks/use-mount-transition.js';
 export { Alert } from './components/alert/alert.js';
 export { Avatar } from './components/avatar/avatar.js';
 export { AvatarGroup } from './components/avatar-group/avatar-group.js';
@@ -29,6 +29,9 @@ export { EmptyState } from './components/empty-state/empty-state.js';
 export { FilePicker } from './components/file-picker/file-picker.js';
 export { FilterButtons } from './components/filter-buttons/filter-buttons.js';
 export { FilterButton } from './components/filter-buttons/filter-button.js';
+export { StringFilter } from './components/filtered-search/model/string-filter.js';
+export { StringSetFilter } from './components/filtered-search/model/string-set-filter.js';
+export { FilteredSearch } from './components/filtered-search/filtered-search.js';
 export { FormField } from './components/form-field/form-field.js';
 export { Label } from './components/label/label.js';
 export { Menu } from './components/menu/menu.js';
@@ -45,6 +48,9 @@ export { Radio } from './components/radio/radio.js';
 export { SegmentedControl } from './components/segmented-control/segmented-control.js';
 export { Select } from './components/select/select.js';
 export { SelectionControl } from './components/selection-control/selection-control.js';
+export { SlideOver } from './components/slide-over/slide-over.js';
+export { SlideOverHeader } from './components/slide-over/slide-over-header.js';
+export { SlideOverBody } from './components/slide-over/slide-over-body.js';
 export { Slider } from './components/slider/slider.js';
 export { SliderTickMarks } from './components/slider/slider-tick-marks.js';
 export { Spinner } from './components/spinner/spinner.js';

package/esm/lib/helpers.js

@@ -9,10 +9,13 @@ function once(fn) {
         return result;
     };
 }
-function assertIfNullable(value, message = 'value is null or undefined') {
+function exhaustiveCheck(value, message) {
+    throw new Error(message);
+}
+function assertIfNullable(value, message = 'assertIfNullable: value is null or undefined.') {
     if (value == null) {
         throw Error(message);
     }
 }
 
-export { assertIfNullable, once };
+export { assertIfNullable, exhaustiveCheck, once };

package/esm/lib/index.js

@@ -1,3 +1,3 @@
 export { KeyboardKeys } from './keyboard-keys.js';
-export { assertIfNullable, once } from './helpers.js';
-export { classNames, focusElement, isReactElementWithRef, mergeRefs } from './react-helpers.js';
+export { assertIfNullable, exhaustiveCheck, once } from './helpers.js';
+export { classNames, focusElement, getRefElement, isReactElementWithRef, mergeRefs } from './react-helpers.js';

package/esm/lib/keyboard-keys.js

@@ -10,6 +10,7 @@ const KeyboardKeys = {
     PageDown: 'PageDown',
     Enter: 'Enter',
     Escape: 'Escape',
+    Backspace: 'Backspace',
     Space: ' ',
 };
 

package/esm/lib/react-helpers.js

@@ -41,5 +41,12 @@ function focusElement(element) {
         element.focus();
     }
 }
+function getRefElement(ref, message = 'getElementFromRef: ref value is null.') {
+    const value = ref.current;
+    if (value == null) {
+        throw new Error(message);
+    }
+    return value;
+}
 
-export { classNames, focusElement, isReactElementWithRef, mergeRefs };
+export { classNames, focusElement, getRefElement, isReactElementWithRef, mergeRefs };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "draft-components",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "description": "The React based UI components library.",
   "type": "module",
   "exports": {

package/types/components/alert/alert.d.ts

@@ -1,4 +1,4 @@
-import { type ComponentPropsWithRef, type JSX, type ReactNode } from 'react';
+import { ComponentPropsWithRef, JSX, ReactNode } from 'react';
 type AlertHTMLProps = ComponentPropsWithRef<'div'>;
 export type AlertAppearance = 'default' | 'info' | 'success' | 'warning' | 'error';
 export type AlertVariant = 'default' | 'full-width' | 'accent-border';

package/types/components/avatar/avatar.d.ts

@@ -1,4 +1,4 @@
-import { type ComponentPropsWithRef, type ReactNode } from 'react';
+import { ComponentPropsWithRef, ReactNode } from 'react';
 export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export type AvatarFill = 'gray' | 'pink' | 'red' | 'orange' | 'yellow' | 'green' | 'blue' | 'violet';
 export type AvatarProps = ComponentPropsWithRef<'div'> & {

package/types/components/avatar-group/avatar-group.d.ts

@@ -1,4 +1,4 @@
-import { type ComponentPropsWithoutRef, type JSX } from 'react';
+import { ComponentPropsWithoutRef, JSX } from 'react';
 type AvatarGroupBaseProps = Omit<ComponentPropsWithoutRef<'div'>, 'children'>;
 export type AvatarGroupProps = AvatarGroupBaseProps & {
     children: JSX.Element | JSX.Element[];

package/types/components/badge/badge.d.ts

@@ -1,4 +1,4 @@
-import { type ComponentPropsWithoutRef } from 'react';
+import { ComponentPropsWithoutRef } from 'react';
 type BadgeHTMLProps = ComponentPropsWithoutRef<'span'>;
 type BadgeBaseProps = Omit<BadgeHTMLProps, 'children'>;
 export type BadgeProps = {

package/types/components/breadcrumbs/breadcrumbs-context.d.ts

@@ -1,4 +1,4 @@
-import { type ReactNode } from 'react';
+import { ReactNode } from 'react';
 export type BreadcrumbsContextValue = {
     separator: ReactNode;
 };

package/types/components/breadcrumbs/breadcrumbs-item.d.ts

@@ -1,4 +1,4 @@
-import { type ComponentPropsWithoutRef, type JSX, type ReactNode } from 'react';
+import { ComponentPropsWithoutRef, JSX, ReactNode } from 'react';
 type BreadcrumbsItemHTMLProps = ComponentPropsWithoutRef<'a'>;
 export type BreadcrumbsItemRenderFn = (props: {
     className: string;

package/types/components/breadcrumbs/breadcrumbs.d.ts

@@ -1,4 +1,4 @@
-import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
 type BreadcrumbsHTMLProps = ComponentPropsWithoutRef<'nav'>;
 export type BreadcrumbsProps = {
     separator?: ReactNode;

package/types/components/button/button.d.ts

@@ -1,4 +1,4 @@
-import { type ComponentPropsWithRef, type JSX, type ReactNode } from 'react';
+import { ComponentPropsWithRef, JSX, ReactNode } from 'react';
 export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export type ButtonAppearance = 'default' | 'primary' | 'danger' | 'success';
 export type ButtonVariant = 'filled' | 'tinted' | 'plain';

package/types/components/button/icon-button.d.ts

@@ -1,5 +1,5 @@
-import { type ReactNode } from 'react';
-import { type ButtonProps } from './button';
+import { ReactNode } from 'react';
+import { ButtonProps } from './button';
 export type IconButtonBaseProps = Omit<ButtonProps, 'children' | 'caption' | 'leftIcon' | 'rightIcon'>;
 export type IconButtonProps = {
     icon: ReactNode;

package/types/components/button-group/button-group.d.ts

@@ -1,4 +1,4 @@
-import { type ComponentPropsWithoutRef, type JSX } from 'react';
+import { ComponentPropsWithoutRef, JSX } from 'react';
 type ButtonGroupBaseProps = Omit<ComponentPropsWithoutRef<'div'>, 'children'>;
 export type ButtonGroupProps = ButtonGroupBaseProps & {
     children: JSX.Element | JSX.Element[];

package/types/components/caption/caption.d.ts

@@ -1,4 +1,4 @@
-import { type ComponentPropsWithRef } from 'react';
+import { ComponentPropsWithRef } from 'react';
 export type CaptionAppearance = 'default' | 'info' | 'success' | 'error' | 'warning';
 export type CaptionProps = ComponentPropsWithRef<'div'> & {
     showIcon?: boolean;

package/types/components/caption/icons.d.ts

@@ -1,4 +1,4 @@
-import { type ComponentPropsWithoutRef } from 'react';
+import { ComponentPropsWithoutRef } from 'react';
 export declare function InfoIcon(props: ComponentPropsWithoutRef<'svg'>): import("react/jsx-runtime").JSX.Element;
 export declare function SuccessIcon(props: ComponentPropsWithoutRef<'svg'>): import("react/jsx-runtime").JSX.Element;
 export declare function ErrorIcon(props: ComponentPropsWithoutRef<'svg'>): import("react/jsx-runtime").JSX.Element;

package/types/components/checkbox/checkbox.d.ts

@@ -1,4 +1,4 @@
-import { type ComponentPropsWithRef } from 'react';
+import { ComponentPropsWithRef } from 'react';
 type CheckboxHTMLProps = ComponentPropsWithRef<'input'>;
 type CheckboxBaseProps = Omit<CheckboxHTMLProps, 'type'>;
 export type CheckboxToggleHandler = (checked: boolean) => void;

package/types/components/color-picker/color-picker-button.d.ts

@@ -1,4 +1,4 @@
-import { type CSSProperties, type ChangeEventHandler, type ReactNode } from 'react';
+import { CSSProperties, ChangeEventHandler, ReactNode } from 'react';
 export type ColorPickerButtonProps<T extends string | number> = {
     style?: CSSProperties;
     className?: string;

package/types/components/color-picker/color-picker.d.ts

@@ -1,4 +1,4 @@
-import { type ChangeEventHandler, type ComponentPropsWithoutRef, type ReactNode } from 'react';
+import { ChangeEventHandler, ComponentPropsWithoutRef, ReactNode } from 'react';
 export type ColorPickerOption<T extends string | number> = {
     value: T;
     color: string;

package/types/components/date-picker/calendar-day.d.ts

@@ -1,4 +1,4 @@
-import { type ComponentPropsWithoutRef } from 'react';
+import { ComponentPropsWithoutRef } from 'react';
 type CalendarDayHTMLProps = ComponentPropsWithoutRef<'button'>;
 export type CalendarDayProps = {
     date: Date;

package/types/components/date-picker/calendar-grid-head.d.ts

@@ -1,4 +1,4 @@
-import { type Weekday } from './date-helpers';
+import { Weekday } from './date-helpers';
 export type CalendarGridHeadProps = {
     locale?: string;
     weekStartsOn?: Weekday;

package/types/components/date-picker/calendar-grid.d.ts

@@ -1,5 +1,5 @@
 import { type Weekday } from './date-helpers';
-import { type CalendarDayProps } from './calendar-day';
+import { CalendarDayProps } from './calendar-day';
 export type GetCalendarDayProps = (date: Date) => Pick<CalendarDayProps, 'isSelected' | 'inRange' | 'isRangeStart' | 'isRangeEnd'>;
 export type CalendarGridProps = {
     focusDay: Date;

package/types/components/date-picker/calendar.d.ts

@@ -1,6 +1,6 @@
-import { type Weekday } from './date-helpers';
-import { type CalendarHeaderProps } from './calendar-header';
-import { type CalendarGridProps } from './calendar-grid';
+import { Weekday } from './date-helpers';
+import { CalendarHeaderProps } from './calendar-header';
+import { CalendarGridProps } from './calendar-grid';
 export type CalendarProps = {
     className?: string;
     defaultFocusDay?: Date | null;

package/types/components/date-picker/date-picker.d.ts

@@ -1,6 +1,6 @@
-import { type DateISO, type Weekday } from './date-helpers';
-import { type ComponentPropsWithoutRef } from 'react';
-import { type CalendarProps } from './calendar';
+import { DateISO, Weekday } from './date-helpers';
+import { ComponentPropsWithoutRef } from 'react';
+import { CalendarProps } from './calendar';
 type DatePickerHTMLProps = ComponentPropsWithoutRef<'div'>;
 export type DatePickerProps = {
     value: DateISO | null;

package/types/components/date-picker/date-range-picker.d.ts

@@ -1,7 +1,7 @@
-import { type DateISORange } from './date-range';
-import { type DateISO, type Weekday } from './date-helpers';
-import { type ComponentPropsWithoutRef } from 'react';
-import { type CalendarProps } from './calendar';
+import { DateISORange } from './date-range';
+import { DateISO, Weekday } from './date-helpers';
+import { ComponentPropsWithoutRef } from 'react';
+import { CalendarProps } from './calendar';
 type DateRangePickerHTMLProps = ComponentPropsWithoutRef<'div'>;
 export type DateRangePickerProps = {
     value: DateISORange | null;

package/types/components/date-picker/date-range.d.ts

@@ -1,4 +1,4 @@
-import { type DateISO } from './date-helpers';
+import { DateISO } from './date-helpers';
 export type DateISORange = {
     start: DateISO;
     end: DateISO;

package/types/components/date-picker/icons.d.ts

@@ -1,3 +1,3 @@
-import { type ComponentPropsWithoutRef } from 'react';
+import { ComponentPropsWithoutRef } from 'react';
 export declare function ChevronLeftIcon(props: ComponentPropsWithoutRef<'svg'>): import("react/jsx-runtime").JSX.Element;
 export declare function ChevronRightIcon(props: ComponentPropsWithoutRef<'svg'>): import("react/jsx-runtime").JSX.Element;

package/types/components/date-picker-popover/date-picker-popover.d.ts

@@ -1,6 +1,6 @@
-import { type DateISO } from '../date-picker/date-helpers';
-import { type JSX, type ReactNode } from 'react';
-import { type DatePickerProps } from '../date-picker';
+import { DateISO } from '../date-picker/date-helpers';
+import { JSX, ReactNode } from 'react';
+import { DatePickerProps } from '../date-picker';
 export type DatePickerChangeValueFn = (value: DateISO) => void;
 export type DatePickerPopoverProps = {
     className?: string;

package/types/components/date-range-picker-popover/date-range-picker-popover-footer.d.ts

@@ -1,4 +1,4 @@
-import { type MouseEventHandler, type ReactNode } from 'react';
+import { MouseEventHandler, ReactNode } from 'react';
 export type DateRangePickerPopoverFooterProps = {
     children?: ReactNode;
     cancelButtonLabel: ReactNode;

package/types/components/date-range-picker-popover/date-range-picker-popover-presets.d.ts

@@ -1,4 +1,4 @@
-import { type DateRangePickerPopoverOption, type DateRangePickerPopoverSelection } from './types';
+import { DateRangePickerPopoverOption, DateRangePickerPopoverSelection } from './types';
 export type DateRangePickerPopoverPresetsProps = {
     isCompactView: boolean;
     customPresetLabel: string;

package/types/components/date-range-picker-popover/date-range-picker-popover.d.ts

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

package/types/components/date-range-picker-popover/types.d.ts

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

package/types/components/dialog/dialog-body.d.ts

@@ -1,4 +1,4 @@
-import { type ComponentPropsWithoutRef } from 'react';
+import { ComponentPropsWithoutRef } from 'react';
 type DialogBodyHTMLProps = ComponentPropsWithoutRef<'div'>;
 export type DialogBodyProps = DialogBodyHTMLProps;
 export declare function DialogBody({ className, children, }: DialogBodyProps): import("react/jsx-runtime").JSX.Element;

package/types/components/dialog/dialog-context.d.ts

@@ -1,4 +1,4 @@
-import { type ReactNode } from 'react';
+import { ReactNode } from 'react';
 export type DialogContextValue = {
     titleId: string;
     descriptionId: string;

package/types/components/dialog/dialog-footer.d.ts

@@ -1,4 +1,4 @@
-import { type ComponentPropsWithoutRef } from 'react';
+import { ComponentPropsWithoutRef } from 'react';
 type DialogFooterHTMLProps = ComponentPropsWithoutRef<'div'>;
 export type DialogFooterProps = {
     hasBorder?: boolean;

package/types/components/dialog/dialog-header.d.ts

@@ -1,4 +1,4 @@
-import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
 type DialogHeaderHTMLProps = ComponentPropsWithoutRef<'div'>;
 export type DialogHeaderProps = {
     hasBorder?: boolean;

package/types/components/dialog/dialog.d.ts

@@ -1,4 +1,4 @@
-import { type ComponentPropsWithoutRef, type RefObject } from 'react';
+import { ComponentPropsWithoutRef, RefObject } from 'react';
 type DialogHTMLProps = ComponentPropsWithoutRef<'section'>;
 export type DialogWidth = 'sm' | 'md' | 'lg';
 export type DialogProps = {

package/types/components/dialog/x-mark-icon.d.ts

@@ -1,2 +1,2 @@
-import { type ComponentPropsWithoutRef } from 'react';
+import { ComponentPropsWithoutRef } from 'react';
 export declare function XMarkIcon(props: ComponentPropsWithoutRef<'svg'>): import("react/jsx-runtime").JSX.Element;

package/types/components/empty-state/empty-state.d.ts

@@ -1,4 +1,4 @@
-import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
 type EmptyStateHTMLProps = ComponentPropsWithoutRef<'div'>;
 export type EmptyStateProps = {
     image?: ReactNode;

package/types/components/filter-buttons/filter-button.d.ts

@@ -1,4 +1,4 @@
-import { type ComponentPropsWithRef } from 'react';
+import { ComponentPropsWithRef } from 'react';
 type FilterButtonHTMLProps = ComponentPropsWithRef<'button'>;
 export type FilterButtonProps = {
     isActive?: boolean;

package/types/components/filter-buttons/filter-buttons.d.ts

@@ -1,4 +1,4 @@
-import { type ComponentPropsWithoutRef } from 'react';
+import { ComponentPropsWithoutRef } from 'react';
 type FilterButtonsHTMLProps = ComponentPropsWithoutRef<'div'>;
 export type FilterButtonsProps = FilterButtonsHTMLProps;
 export declare function FilterButtons({ className, children, ...props }: FilterButtonsProps): import("react/jsx-runtime").JSX.Element;

package/types/components/filtered-search/filter-item.d.ts

@@ -0,0 +1,10 @@
+import { Filter } from './types';
+export type FilterItemProps = {
+    filter: Filter;
+    isEditing: boolean;
+    onEditStart: (filter: Filter) => void;
+    onEditCancel: (filter: Filter) => void;
+    onRemove: (filter: Filter) => void;
+    onChange: (filter: Filter) => void;
+};
+export declare function FilterItem({ filter, isEditing, onEditStart, onEditCancel, onRemove, onChange, }: FilterItemProps): import("react/jsx-runtime").JSX.Element;

package/types/components/filtered-search/filter-operator-select.d.ts

@@ -0,0 +1,10 @@
+export type FilterOperatorSelectProps<T extends string> = {
+    className?: string;
+    accessibleName?: string;
+    label: string;
+    values: T[];
+    value: T;
+    onChange: (value: T) => void;
+    formatValue: (value: T) => string;
+};
+export declare function FilterOperatorSelect<T extends string>({ accessibleName, className, label, values, value, onChange, formatValue, }: FilterOperatorSelectProps<T>): import("react/jsx-runtime").JSX.Element;

package/types/components/filtered-search/filter-token.d.ts

@@ -0,0 +1,9 @@
+import { MouseEventHandler, ReactNode } from 'react';
+export type FilterTokenProps = {
+    className?: string;
+    isHighlighted?: boolean;
+    children: ReactNode;
+    onClickLabel?: MouseEventHandler<HTMLSpanElement>;
+    onClickCloseButton?: MouseEventHandler<HTMLButtonElement>;
+};
+export declare const FilterToken: import("react").ForwardRefExoticComponent<FilterTokenProps & import("react").RefAttributes<HTMLDivElement>>;

package/types/components/filtered-search/filter-value-list.d.ts

@@ -0,0 +1,8 @@
+export type FilterValueListProps = {
+    className?: string;
+    values: string[];
+    checkedValues: string[];
+    onChangeCheckedValues: (values: string[]) => void;
+    formatValue: (value: string) => string;
+};
+export declare function FilterValueList({ className, values, checkedValues, onChangeCheckedValues, formatValue, }: FilterValueListProps): import("react/jsx-runtime").JSX.Element;

package/types/components/filtered-search/filtered-search.d.ts

@@ -0,0 +1,15 @@
+import { ComponentPropsWithoutRef } from 'react';
+import { Filter, FilterConfig } from './types';
+export type FilteredSearchHTMLProps = ComponentPropsWithoutRef<'div'>;
+export type FilteredSearchBaseProps = Omit<FilteredSearchHTMLProps, 'children' | 'placeholder'>;
+export type FilteredSearchProps = FilteredSearchBaseProps & {
+    placeholder?: string;
+    applyButtonLabel?: string;
+    cancelButtonLabel?: string;
+    clearButtonAccessibleName?: string;
+    removeFilterButtonAccessibleName?: string;
+    filtersConfig: FilterConfig[];
+    filters: Filter[];
+    onChange: (filters: Filter[]) => void;
+};
+export declare function FilteredSearch({ className, placeholder, applyButtonLabel, cancelButtonLabel, clearButtonAccessibleName, removeFilterButtonAccessibleName, filtersConfig, filters, onChange, onMouseDown, ...props }: FilteredSearchProps): import("react/jsx-runtime").JSX.Element;

package/types/components/filtered-search/icons.d.ts

@@ -0,0 +1,5 @@
+import { ComponentPropsWithoutRef } from 'react';
+export declare function MagnifyingGlassIcon(props: ComponentPropsWithoutRef<'svg'>): import("react/jsx-runtime").JSX.Element;
+export declare function TrashIcon(props: ComponentPropsWithoutRef<'svg'>): import("react/jsx-runtime").JSX.Element;
+export declare function XMarkIcon(props: ComponentPropsWithoutRef<'svg'>): import("react/jsx-runtime").JSX.Element;
+export declare function ArrowReturnRight(props: ComponentPropsWithoutRef<'svg'>): import("react/jsx-runtime").JSX.Element;

package/types/components/filtered-search/index.d.ts

@@ -0,0 +1,4 @@
+export { StringFilter } from './model/string-filter';
+export { StringSetFilter } from './model/string-set-filter';
+export { FilteredSearch, type FilteredSearchProps, type FilteredSearchBaseProps, type FilteredSearchHTMLProps, } from './filtered-search';
+export { type Filter, type FilterConfig, } from './types';

package/types/components/filtered-search/model/abstract-filter.d.ts

@@ -0,0 +1,6 @@
+export declare abstract class AbstractFilter {
+    abstract type: string;
+    abstract field: string;
+    abstract label: string;
+    abstract isEmpty(): boolean;
+}