@arbor-education/design-system.components 0.22.0 → 0.23.0

package/dist/components/combobox/useVisibleTriggerTags.test.js

@@ -0,0 +1,81 @@
+import { describe, expect, test } from 'vitest';
+import { computeVisibleTriggerTagsLayout } from './useVisibleTriggerTags.js';
+describe('computeVisibleTriggerTagsLayout', () => {
+    test('shows all tags and no ellipsis when there is no overflow', () => {
+        const result = computeVisibleTriggerTagsLayout({
+            containerWidth: 300,
+            tagWidths: [70, 80, 60],
+            tagGap: 4,
+            badgeWidth: 24,
+            ellipsisWidth: 12,
+            showBadge: true,
+        });
+        expect(result).toEqual({
+            visibleTagIndices: [0, 1, 2],
+            hiddenTagCount: 0,
+            showBadge: true,
+            showEllipsis: false,
+            hasOverflow: false,
+        });
+    });
+    test('reserves badge and ellipsis before fitting tags when overflow exists', () => {
+        const result = computeVisibleTriggerTagsLayout({
+            containerWidth: 160,
+            tagWidths: [60, 60, 60],
+            tagGap: 4,
+            badgeWidth: 24,
+            ellipsisWidth: 12,
+            showBadge: true,
+        });
+        expect(result.visibleTagIndices).toEqual([0]);
+        expect(result.hiddenTagCount).toBe(2);
+        expect(result.showEllipsis).toBe(true);
+        expect(result.hasOverflow).toBe(true);
+    });
+    test('allows zero tags when badge and ellipsis take priority in tiny space', () => {
+        const result = computeVisibleTriggerTagsLayout({
+            containerWidth: 36,
+            tagWidths: [80, 80],
+            tagGap: 4,
+            badgeWidth: 24,
+            ellipsisWidth: 12,
+            showBadge: true,
+        });
+        expect(result.visibleTagIndices).toEqual([]);
+        expect(result.hiddenTagCount).toBe(2);
+        expect(result.showEllipsis).toBe(true);
+    });
+    test('reserving badge space reduces visible count', () => {
+        const withBadge = computeVisibleTriggerTagsLayout({
+            containerWidth: 180,
+            tagWidths: [60, 60, 60],
+            tagGap: 4,
+            badgeWidth: 24,
+            ellipsisWidth: 12,
+            showBadge: true,
+        });
+        const withoutBadge = computeVisibleTriggerTagsLayout({
+            containerWidth: 180,
+            tagWidths: [60, 60, 60],
+            tagGap: 4,
+            badgeWidth: 24,
+            ellipsisWidth: 12,
+            showBadge: false,
+        });
+        expect(withoutBadge.visibleTagIndices.length).toBeGreaterThanOrEqual(withBadge.visibleTagIndices.length);
+    });
+    test('uses safety buffer to avoid a clipped final tag on boundary widths', () => {
+        const result = computeVisibleTriggerTagsLayout({
+            containerWidth: 195.5,
+            tagWidths: [73.4, 73.4, 20],
+            tagGap: 4,
+            badgeWidth: 24.2,
+            ellipsisWidth: 11.6,
+            showBadge: true,
+            safetyBuffer: 1,
+        });
+        expect(result.visibleTagIndices).toEqual([0]);
+        expect(result.showEllipsis).toBe(true);
+    });
+});
+//# sourceMappingURL=useVisibleTriggerTags.test.js.map

package/dist/components/combobox/useVisibleTriggerTags.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useVisibleTriggerTags.test.js","sourceRoot":"","sources":["../../../src/components/combobox/useVisibleTriggerTags.test.tsx"],"names":[],"mappings":"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"}

package/dist/components/filterBar/FilterBar.d.ts

@@ -0,0 +1,71 @@
+import type { IconName } from '../icon/allowedIcons.js';
+import { type ButtonHTMLAttributes, type HTMLAttributes, type MouseEventHandler, type RefObject } from 'react';
+export type FilterBarType = 'filter' | 'sort' | 'group';
+export type FilterBarTagItem = {
+    id: string;
+    type: FilterBarType;
+    label: string;
+    value: React.ReactNode;
+    fieldId?: string;
+    icon?: IconName;
+    ariaControls?: string;
+    ariaExpanded?: boolean;
+    actionLabel?: string;
+    removeLabel?: string;
+    disabled?: boolean;
+    onClick?: (item: FilterBarTagItem, event: React.MouseEvent<HTMLButtonElement>) => void;
+    onRemove?: (item: FilterBarTagItem) => void;
+};
+export type FilterBarProps = HTMLAttributes<HTMLDivElement>;
+export type FilterBarToolbarProps = HTMLAttributes<HTMLDivElement>;
+export type FilterBarButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'type'> & {
+    type: FilterBarType;
+    label?: string;
+    count?: number | null;
+    icon?: IconName;
+    htmlType?: ButtonHTMLAttributes<HTMLButtonElement>['type'];
+};
+export type FilterBarActiveListProps = {
+    items?: readonly FilterBarTagItem[];
+    children?: React.ReactNode;
+    className?: string;
+    ariaLabel?: string;
+    emptyState?: React.ReactNode;
+    returnFocusRef?: RefObject<HTMLElement | null>;
+    wrap?: boolean;
+    collapseOverflow?: boolean;
+    overflowActionLabel?: string;
+    onOverflowClick?: MouseEventHandler<HTMLButtonElement>;
+    overflowAriaControls?: string;
+    overflowAriaExpanded?: boolean;
+};
+export type FilterBarTagProps = Omit<FilterBarTagItem, 'id' | 'onClick' | 'onRemove'> & {
+    id?: string;
+    className?: string;
+    children?: React.ReactNode;
+    onClick?: (item: FilterBarTagItem, event: React.MouseEvent<HTMLButtonElement>) => void;
+    onRemove?: (item: FilterBarTagItem) => void;
+};
+export declare const FilterBar: {
+    ({ children, className, ...rest }: FilterBarProps): React.JSX.Element;
+    Toolbar: ({ children, className, ...rest }: FilterBarToolbarProps) => React.JSX.Element;
+    Button: import("react").ForwardRefExoticComponent<Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type" | "children"> & {
+        type: FilterBarType;
+        label?: string;
+        count?: number | null;
+        icon?: IconName;
+        htmlType?: ButtonHTMLAttributes<HTMLButtonElement>["type"];
+    } & import("react").RefAttributes<HTMLButtonElement>>;
+    ActiveList: ({ items, children, className, ariaLabel, emptyState, returnFocusRef, wrap, collapseOverflow, overflowActionLabel, onOverflowClick, overflowAriaControls, overflowAriaExpanded, }: FilterBarActiveListProps) => React.JSX.Element | null;
+    Tag: ({ id, type, label, value, fieldId, icon, ariaControls, ariaExpanded, actionLabel, removeLabel, disabled, className, children, onClick, onRemove, }: FilterBarTagProps) => React.JSX.Element;
+};
+export declare namespace FilterBar {
+    type Type = FilterBarType;
+    type Props = FilterBarProps;
+    type ToolbarProps = FilterBarToolbarProps;
+    type ButtonProps = FilterBarButtonProps;
+    type ActiveListProps = FilterBarActiveListProps;
+    type TagProps = FilterBarTagProps;
+    type TagItem = FilterBarTagItem;
+}
+//# sourceMappingURL=FilterBar.d.ts.map

package/dist/components/filterBar/FilterBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterBar.d.ts","sourceRoot":"","sources":["../../../src/components/filterBar/FilterBar.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AAI7D,OAAO,EAAwB,KAAK,oBAAoB,EAAE,KAAK,cAAc,EAAE,KAAK,iBAAiB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAErI,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAExD,MAAM,MAAM,gBAAgB,GAAG;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,aAAa,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACvF,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,gBAAgB,KAAK,IAAI,CAAC;CAC7C,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAE5D,MAAM,MAAM,qBAAqB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAEnE,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC,GAAG;IACtG,IAAI,EAAE,aAAa,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,QAAQ,CAAC,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAC;CAC5D,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG;IACrC,KAAK,CAAC,EAAE,SAAS,gBAAgB,EAAE,CAAC;IACpC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,cAAc,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC/C,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,eAAe,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACvD,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,gBAAgB,EAAE,IAAI,GAAG,SAAS,GAAG,UAAU,CAAC,GAAG;IACtF,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACvF,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,gBAAgB,KAAK,IAAI,CAAC;CAC7C,CAAC;AAuCF,eAAO,MAAM,SAAS;uCAInB,cAAc,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO;gDAUlC,qBAAqB,KAAG,KAAK,CAAC,GAAG,CAAC,OAAO;;cAjFpC,aAAa;gBACX,MAAM;gBACN,MAAM,GAAG,IAAI;eACd,QAAQ;mBACJ,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,MAAM,CAAC;;mMA0MzD,wBAAwB,KAAG,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI;8JA/CnD,iBAAiB,KAAG,KAAK,CAAC,GAAG,CAAC,OAAO;CApFvC,CAAC;AAsLF,yBAAiB,SAAS,CAAC;IACzB,KAAY,IAAI,GAAG,aAAa,CAAC;IACjC,KAAY,KAAK,GAAG,cAAc,CAAC;IACnC,KAAY,YAAY,GAAG,qBAAqB,CAAC;IACjD,KAAY,WAAW,GAAG,oBAAoB,CAAC;IAC/C,KAAY,eAAe,GAAG,wBAAwB,CAAC;IACvD,KAAY,QAAQ,GAAG,iBAAiB,CAAC;IACzC,KAAY,OAAO,GAAG,gBAAgB,CAAC;CACxC"}

package/dist/components/filterBar/FilterBar.js

@@ -0,0 +1,89 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Badge } from '../badge/Badge.js';
+import { Button } from '../button/Button.js';
+import { Icon } from '../icon/Icon.js';
+import { Tag } from '../tag/Tag.js';
+import { TagList } from '../tagList/TagList.js';
+import classNames from 'classnames';
+import { Children, forwardRef } from 'react';
+const FILTER_BAR_TYPE_LABELS = {
+    filter: 'Filter',
+    sort: 'Sort',
+    group: 'Group',
+};
+const FILTER_BAR_TYPE_ICONS = {
+    filter: 'sliders-horizontal',
+    sort: 'sorting',
+    group: 'list-tree',
+};
+const getVisibleCount = (count) => {
+    if (typeof count !== 'number' || count <= 0)
+        return null;
+    return count > 99 ? '99+' : `${count}`;
+};
+const getButtonA11yLabel = (type, label, count) => {
+    if (typeof count !== 'number' || count <= 0) {
+        return `Open ${label.toLowerCase()}`;
+    }
+    return `Open ${label.toLowerCase()}. ${count} ${type} item${count === 1 ? '' : 's'} applied`;
+};
+const getTagActionLabel = (item) => `Open ${item.type} ${item.label}: ${item.value}`;
+const FilterBarTagContent = ({ label, value }) => (_jsxs("span", { className: "ds-filter-bar__tag-content", children: [_jsxs("span", { className: "ds-filter-bar__tag-label", children: [label, ":"] }), _jsx("span", { className: "ds-filter-bar__tag-value", children: value })] }));
+export const FilterBar = ({ children, className, ...rest }) => (_jsx("div", { className: classNames('ds-filter-bar', className), ...rest, children: children }));
+const FilterBarToolbar = ({ children, className, ...rest }) => (_jsx("div", { className: classNames('ds-filter-bar__toolbar', className), role: "toolbar", ...rest, children: children }));
+const FilterBarButton = forwardRef(({ type, label, count, icon, htmlType = 'button', className, 'aria-label': ariaLabel, 'aria-expanded': ariaExpanded, ...rest }, ref) => {
+    const resolvedLabel = label ?? FILTER_BAR_TYPE_LABELS[type];
+    const resolvedIcon = icon ?? FILTER_BAR_TYPE_ICONS[type];
+    const visibleCount = getVisibleCount(count);
+    const hasAppliedItems = Boolean(visibleCount);
+    const isExpanded = ariaExpanded === true || ariaExpanded === 'true';
+    return (_jsx(Button, { ref: ref, type: htmlType, variant: "tertiary", size: "M", className: classNames('ds-filter-bar__button', {
+            'ds-filter-bar__button--has-applied': hasAppliedItems,
+            'ds-filter-bar__button--expanded': isExpanded,
+        }, className), "aria-label": ariaLabel ?? getButtonA11yLabel(type, resolvedLabel, count), "aria-expanded": ariaExpanded, ...rest, children: _jsxs("span", { className: "ds-filter-bar__button-content", children: [_jsx("span", { className: "ds-filter-bar__button-icon", "aria-hidden": "true", children: _jsx(Icon, { name: resolvedIcon, size: 16 }) }), _jsx("span", { className: "ds-filter-bar__button-label", children: resolvedLabel }), visibleCount && (_jsx(Badge, { colour: "green", className: "ds-filter-bar__button-badge", a11yLabel: `${count} applied ${resolvedLabel.toLowerCase()} item${count === 1 ? '' : 's'}`, children: visibleCount }))] }) }));
+});
+FilterBarButton.displayName = 'FilterBar.Button';
+const FilterBarTag = ({ id, type, label, value, fieldId, icon, ariaControls, ariaExpanded, actionLabel, removeLabel, disabled, className, children, onClick, onRemove, }) => {
+    const item = {
+        id: id ?? fieldId ?? `${type}-${label}`,
+        type,
+        label,
+        value,
+        fieldId,
+        icon,
+        ariaControls,
+        ariaExpanded,
+        actionLabel,
+        removeLabel,
+        disabled,
+    };
+    const resolvedIcon = icon ?? FILTER_BAR_TYPE_ICONS[type];
+    return (_jsx(Tag, { slotStart: _jsx(Icon, { name: resolvedIcon, size: 16 }), onClick: onClick ? event => onClick(item, event) : undefined, onRemove: onRemove ? () => onRemove(item) : undefined, actionLabel: actionLabel ?? getTagActionLabel(item), removeLabel: removeLabel, disabled: disabled, ariaControls: ariaControls, ariaExpanded: ariaExpanded, children: _jsx("span", { className: classNames('ds-filter-bar__tag', className), children: children ?? _jsx(FilterBarTagContent, { label: label, value: value }) }) }));
+};
+const FilterBarActiveList = ({ items, children, className, ariaLabel = 'Active filters, sorting, and grouping', emptyState, returnFocusRef, wrap = false, collapseOverflow = true, overflowActionLabel = 'Show more applied items', onOverflowClick, overflowAriaControls, overflowAriaExpanded, }) => {
+    if (items) {
+        return (_jsx(TagList, { items: items.map(item => ({
+                id: item.id,
+                slotStart: _jsx(Icon, { name: item.icon ?? FILTER_BAR_TYPE_ICONS[item.type], size: 16 }),
+                children: _jsx(FilterBarTagContent, { label: item.label, value: item.value }),
+                onClick: item.onClick ? event => item.onClick?.(item, event) : undefined,
+                onRemove: item.onRemove ? () => item.onRemove?.(item) : undefined,
+                ariaControls: item.ariaControls,
+                ariaExpanded: item.ariaExpanded,
+                actionLabel: item.actionLabel ?? getTagActionLabel(item),
+                removeLabel: item.removeLabel,
+                disabled: item.disabled,
+            })), className: classNames('ds-filter-bar__active-list', className), ariaLabel: ariaLabel, emptyState: emptyState, returnFocusRef: returnFocusRef, wrap: wrap, collapseOverflow: collapseOverflow, overflowOnClick: onOverflowClick, overflowActionLabel: overflowActionLabel, overflowAriaControls: overflowAriaControls, overflowAriaExpanded: overflowAriaExpanded }));
+    }
+    if (!children) {
+        if (!emptyState)
+            return null;
+        return _jsx("div", { className: classNames('ds-filter-bar__empty-state', className), children: emptyState });
+    }
+    return (_jsx("ul", { className: classNames('ds-filter-bar__manual-list', className), "aria-label": ariaLabel, children: Children.toArray(children).map((child, index) => (_jsx("li", { className: "ds-filter-bar__manual-list-item", children: child }, index))) }));
+};
+FilterBar.Toolbar = FilterBarToolbar;
+FilterBar.Button = FilterBarButton;
+FilterBar.ActiveList = FilterBarActiveList;
+FilterBar.Tag = FilterBarTag;
+//# sourceMappingURL=FilterBar.js.map

package/dist/components/filterBar/FilterBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterBar.js","sourceRoot":"","sources":["../../../src/components/filterBar/FilterBar.tsx"],"names":[],"mappings":"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"}

package/dist/components/filterBar/FilterBar.stories.d.ts

@@ -0,0 +1,170 @@
+import type { StoryObj } from '@storybook/react-vite';
+import { FilterBar } from './FilterBar.js';
+type FilterBarStoryArgs = FilterBar.Props & {
+    toolbarLabel: string;
+    activeListLabel: string;
+    filterCount: number;
+    sortCount: number;
+    groupCount: number;
+    wrap: boolean;
+    collapseOverflow: boolean;
+    overflowActionLabel: string;
+};
+declare function FilterBarDocsPage(): import("react/jsx-runtime").JSX.Element;
+declare const meta: {
+    title: string;
+    component: {
+        ({ children, className, ...rest }: import("./FilterBar.js").FilterBarProps): React.JSX.Element;
+        Toolbar: ({ children, className, ...rest }: import("./FilterBar.js").FilterBarToolbarProps) => React.JSX.Element;
+        Button: import("react").ForwardRefExoticComponent<Omit<import("react").ButtonHTMLAttributes<HTMLButtonElement>, "type" | "children"> & {
+            type: import("./FilterBar.js").FilterBarType;
+            label?: string;
+            count?: number | null;
+            icon?: import("../icon/allowedIcons.js").IconName;
+            htmlType?: import("react").ButtonHTMLAttributes<HTMLButtonElement>["type"];
+        } & import("react").RefAttributes<HTMLButtonElement>>;
+        ActiveList: ({ items, children, className, ariaLabel, emptyState, returnFocusRef, wrap, collapseOverflow, overflowActionLabel, onOverflowClick, overflowAriaControls, overflowAriaExpanded, }: import("./FilterBar.js").FilterBarActiveListProps) => React.JSX.Element | null;
+        Tag: ({ id, type, label, value, fieldId, icon, ariaControls, ariaExpanded, actionLabel, removeLabel, disabled, className, children, onClick, onRemove, }: import("./FilterBar.js").FilterBarTagProps) => React.JSX.Element;
+    };
+    tags: string[];
+    parameters: {
+        layout: string;
+        docs: {
+            page: typeof FilterBarDocsPage;
+        };
+    };
+    argTypes: {
+        'aria-label': {
+            control: "text";
+            description: string;
+            table: {
+                category: string;
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        className: {
+            control: false;
+            description: string;
+            table: {
+                category: string;
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        children: {
+            control: false;
+            table: {
+                disable: true;
+            };
+        };
+        toolbarLabel: {
+            control: "text";
+            description: string;
+            table: {
+                category: string;
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        activeListLabel: {
+            control: "text";
+            description: string;
+            table: {
+                category: string;
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        filterCount: {
+            control: {
+                type: "number";
+                min: number;
+                max: number;
+            };
+            description: string;
+            table: {
+                category: string;
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        sortCount: {
+            control: {
+                type: "number";
+                min: number;
+                max: number;
+            };
+            description: string;
+            table: {
+                category: string;
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        groupCount: {
+            control: {
+                type: "number";
+                min: number;
+                max: number;
+            };
+            description: string;
+            table: {
+                category: string;
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        wrap: {
+            control: "boolean";
+            description: string;
+            table: {
+                category: string;
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        collapseOverflow: {
+            control: "boolean";
+            description: string;
+            table: {
+                category: string;
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        overflowActionLabel: {
+            control: "text";
+            description: string;
+            table: {
+                category: string;
+                type: {
+                    summary: string;
+                };
+            };
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<FilterBarStoryArgs>;
+export declare const Default: Story;
+export declare const HighCounts: Story;
+export declare const ModalWiring: Story;
+export declare const Overflow: Story;
+export declare const Empty: Story;
+//# sourceMappingURL=FilterBar.stories.d.ts.map

package/dist/components/filterBar/FilterBar.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterBar.stories.d.ts","sourceRoot":"","sources":["../../../src/components/filterBar/FilterBar.stories.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAM5D,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAyK3C,KAAK,kBAAkB,GAAG,SAAS,CAAC,KAAK,GAAG;IAC1C,YAAY,EAAE,MAAM,CAAC;IACrB,eAAe,EAAE,MAAM,CAAC;IACxB,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,OAAO,CAAC;IACd,gBAAgB,EAAE,OAAO,CAAC;IAC1B,mBAAmB,EAAE,MAAM,CAAC;CAC7B,CAAC;AA8JF,iBAAS,iBAAiB,4CA2BzB;AAMD,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoG0B,CAAC;AAErC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,kBAAkB,CAAC,CAAC;AAoP1C,eAAO,MAAM,OAAO,EAAE,KAoBrB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KA0DxB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAyQzB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAsEtB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KA8CnB,CAAC"}