@wallarm-org/design-system 2.1.3 → 2.2.0-rc-fix-overflow-list-api.1

package/dist/components/OverflowList/OverflowListMoreContent.d.ts

@@ -0,0 +1,7 @@
+import type { FC, ReactNode } from 'react';
+import { type PopoverContentProps } from '../Popover/index.js';
+export interface OverflowListMoreContentProps extends Omit<PopoverContentProps, 'children'> {
+    /** Defaults to `<OverflowListMoreItems />`. */
+    children?: ReactNode;
+}
+export declare const OverflowListMoreContent: FC<OverflowListMoreContentProps>;

package/dist/components/OverflowList/OverflowListMoreContent.js

@@ -0,0 +1,60 @@
+import { jsx } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+import { cn } from "../../utils/cn.js";
+import { PopoverContent } from "../Popover/index.js";
+import { useOverflowListContext } from "./OverflowListContext.js";
+import { OverflowListMoreItems } from "./OverflowListMoreItems.js";
+const DEFAULT_CHILDREN = /*#__PURE__*/ jsx(OverflowListMoreItems, {});
+const OverflowListMoreContent = (t0)=>{
+    const $ = c(14);
+    let className;
+    let props;
+    let t1;
+    let t2;
+    let t3;
+    if ($[0] !== t0) {
+        ({ children: t1, className, minHeight: t2, maxWidth: t3, ...props } = t0);
+        $[0] = t0;
+        $[1] = className;
+        $[2] = props;
+        $[3] = t1;
+        $[4] = t2;
+        $[5] = t3;
+    } else {
+        className = $[1];
+        props = $[2];
+        t1 = $[3];
+        t2 = $[4];
+        t3 = $[5];
+    }
+    const children = void 0 === t1 ? DEFAULT_CHILDREN : t1;
+    const minHeight = void 0 === t2 ? "auto" : t2;
+    const maxWidth = void 0 === t3 ? "360px" : t3;
+    const { measuring } = useOverflowListContext();
+    if (measuring) return null;
+    let t4;
+    if ($[6] !== className) {
+        t4 = cn("gap-8", className);
+        $[6] = className;
+        $[7] = t4;
+    } else t4 = $[7];
+    let t5;
+    if ($[8] !== children || $[9] !== maxWidth || $[10] !== minHeight || $[11] !== props || $[12] !== t4) {
+        t5 = /*#__PURE__*/ jsx(PopoverContent, {
+            ...props,
+            minHeight: minHeight,
+            maxWidth: maxWidth,
+            className: t4,
+            children: children
+        });
+        $[8] = children;
+        $[9] = maxWidth;
+        $[10] = minHeight;
+        $[11] = props;
+        $[12] = t4;
+        $[13] = t5;
+    } else t5 = $[13];
+    return t5;
+};
+OverflowListMoreContent.displayName = "OverflowListMoreContent";
+export { OverflowListMoreContent };

package/dist/components/OverflowList/OverflowListMoreCount.d.ts

@@ -0,0 +1,8 @@
+import type { FC, HTMLAttributes, Ref } from 'react';
+import { type TestableProps } from '../../utils/testId.js';
+export interface OverflowListMoreCountProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'>, TestableProps {
+    /** `hidden` — items folded into the overflow; `total` — every item. */
+    of?: 'hidden' | 'total';
+    ref?: Ref<HTMLSpanElement>;
+}
+export declare const OverflowListMoreCount: FC<OverflowListMoreCountProps>;

package/dist/components/OverflowList/OverflowListMoreCount.js

@@ -0,0 +1,41 @@
+import { jsx } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+import { useTestId } from "../../utils/testId.js";
+import { useOverflowListMore } from "./useOverflowListMore.js";
+const OverflowListMoreCount = (t0)=>{
+    const $ = c(8);
+    let props;
+    let t1;
+    let testIdProp;
+    if ($[0] !== t0) {
+        ({ of: t1, "data-testid": testIdProp, ...props } = t0);
+        $[0] = t0;
+        $[1] = props;
+        $[2] = t1;
+        $[3] = testIdProp;
+    } else {
+        props = $[1];
+        t1 = $[2];
+        testIdProp = $[3];
+    }
+    const of = void 0 === t1 ? "hidden" : t1;
+    const testId = useTestId("count", testIdProp);
+    const { hiddenCount, totalCount } = useOverflowListMore();
+    const t2 = "total" === of ? totalCount : hiddenCount;
+    let t3;
+    if ($[4] !== props || $[5] !== t2 || $[6] !== testId) {
+        t3 = /*#__PURE__*/ jsx("span", {
+            ...props,
+            "data-slot": "overflow-list-more-count",
+            "data-testid": testId,
+            children: t2
+        });
+        $[4] = props;
+        $[5] = t2;
+        $[6] = testId;
+        $[7] = t3;
+    } else t3 = $[7];
+    return t3;
+};
+OverflowListMoreCount.displayName = "OverflowListMoreCount";
+export { OverflowListMoreCount };

package/dist/components/OverflowList/OverflowListMoreHeader.d.ts

@@ -0,0 +1,7 @@
+import type { FC, ReactNode } from 'react';
+import type { TestableProps } from '../../utils/testId.js';
+import { type TextProps } from '../Text/index.js';
+export interface OverflowListMoreHeaderProps extends Omit<TextProps, 'size' | 'weight' | 'color'>, TestableProps {
+    children: ReactNode;
+}
+export declare const OverflowListMoreHeader: FC<OverflowListMoreHeaderProps>;

package/dist/components/OverflowList/OverflowListMoreHeader.js

@@ -0,0 +1,36 @@
+import { jsx } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+import { useTestId } from "../../utils/testId.js";
+import { Text } from "../Text/index.js";
+const OverflowListMoreHeader = (t0)=>{
+    const $ = c(6);
+    let props;
+    let testIdProp;
+    if ($[0] !== t0) {
+        ({ "data-testid": testIdProp, ...props } = t0);
+        $[0] = t0;
+        $[1] = props;
+        $[2] = testIdProp;
+    } else {
+        props = $[1];
+        testIdProp = $[2];
+    }
+    const testId = useTestId("header", testIdProp);
+    let t1;
+    if ($[3] !== props || $[4] !== testId) {
+        t1 = /*#__PURE__*/ jsx(Text, {
+            ...props,
+            size: "sm",
+            weight: "medium",
+            color: "secondary",
+            "data-slot": "overflow-list-more-header",
+            "data-testid": testId
+        });
+        $[3] = props;
+        $[4] = testId;
+        $[5] = t1;
+    } else t1 = $[5];
+    return t1;
+};
+OverflowListMoreHeader.displayName = "OverflowListMoreHeader";
+export { OverflowListMoreHeader };

package/dist/components/OverflowList/OverflowListMoreItems.d.ts

@@ -0,0 +1,18 @@
+import type { HTMLAttributes, ReactNode, Ref } from 'react';
+import { type TestableProps } from '../../utils/testId.js';
+export interface OverflowListMoreItemsProps<T> extends Omit<HTMLAttributes<HTMLDivElement>, 'children'>, TestableProps {
+    /** `all` lists every item (visible ones first); `hidden` only the folded ones. */
+    show?: 'all' | 'hidden';
+    /** Fade the items that are already visible in the row. Only with `show='all'`. */
+    dimVisible?: boolean;
+    /**
+     * Item renderer for the popover. Defaults to the list's `itemRenderer`.
+     * `T` is not linked to the list's item type — annotate the parameter.
+     */
+    renderItem?: (item: T, index: number) => ReactNode;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function OverflowListMoreItems<T>({ show, dimVisible, renderItem, className, 'data-testid': testIdProp, ...props }: OverflowListMoreItemsProps<T>): import("react").JSX.Element;
+export declare namespace OverflowListMoreItems {
+    var displayName: string;
+}

package/dist/components/OverflowList/OverflowListMoreItems.js

@@ -0,0 +1,105 @@
+import { jsx } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+import { cn } from "../../utils/cn.js";
+import { TestIdProvider, useTestId } from "../../utils/testId.js";
+import { overflowListMoreItemVariants } from "./classes.js";
+import { useOverflowListContext } from "./OverflowListContext.js";
+const OverflowListMoreItems = (t0)=>{
+    const $ = c(29);
+    let className;
+    let props;
+    let renderItem;
+    let t1;
+    let t2;
+    let testIdProp;
+    if ($[0] !== t0) {
+        ({ show: t1, dimVisible: t2, renderItem, className, "data-testid": testIdProp, ...props } = t0);
+        $[0] = t0;
+        $[1] = className;
+        $[2] = props;
+        $[3] = renderItem;
+        $[4] = t1;
+        $[5] = t2;
+        $[6] = testIdProp;
+    } else {
+        className = $[1];
+        props = $[2];
+        renderItem = $[3];
+        t1 = $[4];
+        t2 = $[5];
+        testIdProp = $[6];
+    }
+    const show = void 0 === t1 ? "all" : t1;
+    const dimVisible = void 0 === t2 ? true : t2;
+    const testId = useTestId("items", testIdProp);
+    const { allItems, hiddenItems, itemRenderer } = useOverflowListContext();
+    const render = renderItem ?? itemRenderer;
+    const firstHidden = allItems.length - hiddenItems.length;
+    const itemTestId = testId && `${testId}--item`;
+    let t3;
+    if ($[7] !== className) {
+        t3 = cn("flex flex-row flex-wrap gap-4", className);
+        $[7] = className;
+        $[8] = t3;
+    } else t3 = $[8];
+    let t4;
+    if ($[9] !== allItems || $[10] !== dimVisible || $[11] !== firstHidden || $[12] !== itemTestId || $[13] !== render || $[14] !== show) {
+        let t5;
+        if ($[16] !== dimVisible || $[17] !== firstHidden || $[18] !== itemTestId || $[19] !== render || $[20] !== show) {
+            t5 = (item, index)=>{
+                const isHidden = index >= firstHidden;
+                if ("hidden" === show && !isHidden) return null;
+                return /*#__PURE__*/ jsx("div", {
+                    "data-slot": "overflow-list-more-item",
+                    "data-testid": itemTestId,
+                    "data-state": isHidden ? "hidden" : "visible",
+                    className: overflowListMoreItemVariants({
+                        dimmed: dimVisible && !isHidden
+                    }),
+                    children: render(item, index)
+                }, index);
+            };
+            $[16] = dimVisible;
+            $[17] = firstHidden;
+            $[18] = itemTestId;
+            $[19] = render;
+            $[20] = show;
+            $[21] = t5;
+        } else t5 = $[21];
+        t4 = allItems.map(t5);
+        $[9] = allItems;
+        $[10] = dimVisible;
+        $[11] = firstHidden;
+        $[12] = itemTestId;
+        $[13] = render;
+        $[14] = show;
+        $[15] = t4;
+    } else t4 = $[15];
+    let t5;
+    if ($[22] !== t4) {
+        t5 = /*#__PURE__*/ jsx(TestIdProvider, {
+            value: void 0,
+            children: t4
+        });
+        $[22] = t4;
+        $[23] = t5;
+    } else t5 = $[23];
+    let t6;
+    if ($[24] !== props || $[25] !== t3 || $[26] !== t5 || $[27] !== testId) {
+        t6 = /*#__PURE__*/ jsx("div", {
+            ...props,
+            "data-slot": "overflow-list-more-items",
+            "data-testid": testId,
+            className: t3,
+            children: t5
+        });
+        $[24] = props;
+        $[25] = t3;
+        $[26] = t5;
+        $[27] = testId;
+        $[28] = t6;
+    } else t6 = $[28];
+    return t6;
+};
+OverflowListMoreItems.displayName = "OverflowListMoreItems";
+export { OverflowListMoreItems };

package/dist/components/OverflowList/OverflowListMoreTrigger.d.ts

@@ -0,0 +1,10 @@
+import type { ButtonHTMLAttributes, FC, ReactNode, Ref } from 'react';
+import type { TestableProps } from '../../utils/testId.js';
+import { type TagProps } from '../Tag/index.js';
+export interface OverflowListMoreTriggerProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color' | 'value'>, TestableProps {
+    /** Defaults to `+<OverflowListMoreCount /> more`. */
+    children?: ReactNode;
+    size?: TagProps['size'];
+    ref?: Ref<HTMLButtonElement>;
+}
+export declare const OverflowListMoreTrigger: FC<OverflowListMoreTriggerProps>;

package/dist/components/OverflowList/OverflowListMoreTrigger.js

@@ -0,0 +1,143 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+import { mergeRefs } from "../../utils/mergeRefs.js";
+import { PopoverTrigger } from "../Popover/index.js";
+import { Tag } from "../Tag/index.js";
+import { useOverflowListContext, useOverflowListMoreTriggerRef } from "./OverflowListContext.js";
+import { OverflowListMoreCount } from "./OverflowListMoreCount.js";
+const DEFAULT_LABEL = /*#__PURE__*/ jsxs(Fragment, {
+    children: [
+        "+",
+        /*#__PURE__*/ jsx(OverflowListMoreCount, {}),
+        " more"
+    ]
+});
+const OverflowListMoreTrigger = (t0)=>{
+    const $ = c(35);
+    let className;
+    let props;
+    let ref;
+    let size;
+    let style;
+    let t1;
+    let testId;
+    if ($[0] !== t0) {
+        ({ children: t1, size, className, style, ref, "data-testid": testId, ...props } = t0);
+        $[0] = t0;
+        $[1] = className;
+        $[2] = props;
+        $[3] = ref;
+        $[4] = size;
+        $[5] = style;
+        $[6] = t1;
+        $[7] = testId;
+    } else {
+        className = $[1];
+        props = $[2];
+        ref = $[3];
+        size = $[4];
+        style = $[5];
+        t1 = $[6];
+        testId = $[7];
+    }
+    const children = void 0 === t1 ? DEFAULT_LABEL : t1;
+    const { measuring } = useOverflowListContext();
+    const triggerRef = useOverflowListMoreTriggerRef();
+    if (measuring) {
+        let t2;
+        if ($[8] !== children) {
+            t2 = /*#__PURE__*/ jsx("span", {
+                children: children
+            });
+            $[8] = children;
+            $[9] = t2;
+        } else t2 = $[9];
+        let t3;
+        if ($[10] !== className || $[11] !== props || $[12] !== style || $[13] !== t2) {
+            t3 = /*#__PURE__*/ jsx("button", {
+                ...props,
+                type: "button",
+                tabIndex: -1,
+                className: className,
+                style: style,
+                children: t2
+            });
+            $[10] = className;
+            $[11] = props;
+            $[12] = style;
+            $[13] = t2;
+            $[14] = t3;
+        } else t3 = $[14];
+        let t4;
+        if ($[15] !== size || $[16] !== t3) {
+            t4 = /*#__PURE__*/ jsx(Tag, {
+                size: size,
+                asChild: true,
+                children: t3
+            });
+            $[15] = size;
+            $[16] = t3;
+            $[17] = t4;
+        } else t4 = $[17];
+        return t4;
+    }
+    const t2 = triggerRef ?? void 0;
+    let t3;
+    if ($[18] !== ref || $[19] !== t2) {
+        t3 = mergeRefs(ref, t2);
+        $[18] = ref;
+        $[19] = t2;
+        $[20] = t3;
+    } else t3 = $[20];
+    let t4;
+    if ($[21] !== children) {
+        t4 = /*#__PURE__*/ jsx("span", {
+            children: children
+        });
+        $[21] = children;
+        $[22] = t4;
+    } else t4 = $[22];
+    let t5;
+    if ($[23] !== className || $[24] !== style || $[25] !== t4) {
+        t5 = /*#__PURE__*/ jsx("button", {
+            type: "button",
+            "data-slot": "overflow-list-more-trigger",
+            className: className,
+            style: style,
+            children: t4
+        });
+        $[23] = className;
+        $[24] = style;
+        $[25] = t4;
+        $[26] = t5;
+    } else t5 = $[26];
+    let t6;
+    if ($[27] !== size || $[28] !== t5) {
+        t6 = /*#__PURE__*/ jsx(Tag, {
+            size: size,
+            asChild: true,
+            children: t5
+        });
+        $[27] = size;
+        $[28] = t5;
+        $[29] = t6;
+    } else t6 = $[29];
+    let t7;
+    if ($[30] !== props || $[31] !== t3 || $[32] !== t6 || $[33] !== testId) {
+        t7 = /*#__PURE__*/ jsx(PopoverTrigger, {
+            ...props,
+            ref: t3,
+            "data-testid": testId,
+            asChild: true,
+            children: t6
+        });
+        $[30] = props;
+        $[31] = t3;
+        $[32] = t6;
+        $[33] = testId;
+        $[34] = t7;
+    } else t7 = $[34];
+    return t7;
+};
+OverflowListMoreTrigger.displayName = "OverflowListMoreTrigger";
+export { OverflowListMoreTrigger };

package/dist/components/OverflowList/classes.d.ts

@@ -0,0 +1,3 @@
+export declare const overflowListMoreItemVariants: (props?: ({
+    dimmed?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/components/OverflowList/classes.js

@@ -0,0 +1,13 @@
+import { cva } from "class-variance-authority";
+const overflowListMoreItemVariants = cva('flex', {
+    variants: {
+        dimmed: {
+            true: 'opacity-60',
+            false: ''
+        }
+    },
+    defaultVariants: {
+        dimmed: false
+    }
+});
+export { overflowListMoreItemVariants };

package/dist/components/OverflowList/index.d.ts

@@ -1,2 +1,9 @@
-export type { OverflowListProps, ShowAllOverflowData } from './OverflowList.js';
+export type { OverflowListOverflowMeta, OverflowListProps, OverflowListRenderer, } from './OverflowList.js';
 export { OverflowList } from './OverflowList.js';
+export { OverflowListMore, type OverflowListMoreProps } from './OverflowListMore.js';
+export { OverflowListMoreContent, type OverflowListMoreContentProps, } from './OverflowListMoreContent.js';
+export { OverflowListMoreCount, type OverflowListMoreCountProps } from './OverflowListMoreCount.js';
+export { OverflowListMoreHeader, type OverflowListMoreHeaderProps, } from './OverflowListMoreHeader.js';
+export { OverflowListMoreItems, type OverflowListMoreItemsProps } from './OverflowListMoreItems.js';
+export { OverflowListMoreTrigger, type OverflowListMoreTriggerProps, } from './OverflowListMoreTrigger.js';
+export { type OverflowListMoreState, useOverflowListMore } from './useOverflowListMore.js';

package/dist/components/OverflowList/index.js

@@ -1 +1,8 @@
 export { OverflowList } from "./OverflowList.js";
+export { OverflowListMore } from "./OverflowListMore.js";
+export { OverflowListMoreContent } from "./OverflowListMoreContent.js";
+export { OverflowListMoreCount } from "./OverflowListMoreCount.js";
+export { OverflowListMoreHeader } from "./OverflowListMoreHeader.js";
+export { OverflowListMoreItems } from "./OverflowListMoreItems.js";
+export { OverflowListMoreTrigger } from "./OverflowListMoreTrigger.js";
+export { useOverflowListMore } from "./useOverflowListMore.js";

package/dist/components/OverflowList/useOverflowListMore.d.ts

@@ -0,0 +1,12 @@
+export interface OverflowListMoreState<T> {
+    allItems: T[];
+    visibleItems: T[];
+    hiddenItems: T[];
+    hiddenCount: number;
+    totalCount: number;
+}
+/**
+ * Read the list split from inside an `OverflowList` overflow renderer — e.g.
+ * to pluralize a localized header: `t('tags', { count: totalCount })`.
+ */
+export declare const useOverflowListMore: <T = unknown>() => OverflowListMoreState<T>;

package/dist/components/OverflowList/useOverflowListMore.js

@@ -0,0 +1,22 @@
+import { c } from "react/compiler-runtime";
+import { useOverflowListContext } from "./OverflowListContext.js";
+const useOverflowListMore = ()=>{
+    const $ = c(4);
+    const { allItems, visibleItems, hiddenItems } = useOverflowListContext();
+    let t0;
+    if ($[0] !== allItems || $[1] !== hiddenItems || $[2] !== visibleItems) {
+        t0 = {
+            allItems,
+            visibleItems,
+            hiddenItems,
+            hiddenCount: hiddenItems.length,
+            totalCount: allItems.length
+        };
+        $[0] = allItems;
+        $[1] = hiddenItems;
+        $[2] = visibleItems;
+        $[3] = t0;
+    } else t0 = $[3];
+    return t0;
+};
+export { useOverflowListMore };

package/dist/components/Popover/index.d.ts

@@ -1,4 +1,4 @@
-export { Popover } from './Popover.js';
+export { Popover, type PopoverProps } from './Popover.js';
 export { PopoverContent, type PopoverContentProps } from './PopoverContent.js';
 export { PopoverTrigger, type PopoverTriggerProps } from './PopoverTrigger.js';
 export type { PopoverSizeDimension } from './types.js';

package/dist/components/Select/SelectInput/SelectInputOverflowRenderer.d.ts

@@ -1,3 +1 @@
-import type { ShowAllOverflowData } from '../../OverflowList/index.js';
-import type { SelectDataItem } from '../types.js';
-export declare const createSelectInputOverflowRenderer: (size: 'small' | 'medium' | 'default' | 'inline-edit') => (data: ShowAllOverflowData<SelectDataItem>) => import("react").JSX.Element;
+export declare const createSelectInputOverflowRenderer: (size: 'small' | 'medium' | 'default' | 'inline-edit') => () => import("react").JSX.Element;

package/dist/components/Select/SelectInput/SelectInputOverflowRenderer.js

@@ -1,38 +1,28 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { cn } from "../../../utils/cn.js";
-import { Popover, PopoverContent, PopoverTrigger } from "../../Popover/index.js";
-import { HStack } from "../../Stack/index.js";
+import { OverflowListMore, OverflowListMoreContent, OverflowListMoreCount, OverflowListMoreItems, OverflowListMoreTrigger } from "../../OverflowList/index.js";
 import { Tag } from "../../Tag/index.js";
 import { TAG_SIZE_BY_SELECT_SIZE } from "./SelectInputItemRenderer.js";
 const POPOVER_MAX_WIDTH = '256px';
-const createSelectInputOverflowRenderer = (size)=>(data)=>{
-        const hiddenItems = data.allItems.slice(data.visibleCount);
-        return /*#__PURE__*/ jsxs(Popover, {
+const renderPopoverItem = (item)=>/*#__PURE__*/ jsx(Tag, {
+        size: "large",
+        children: item.label
+    });
+const createSelectInputOverflowRenderer = (size)=>()=>/*#__PURE__*/ jsxs(OverflowListMore, {
             children: [
-                /*#__PURE__*/ jsx(PopoverTrigger, {
-                    className: cn('**:data-[slot=tag]:cursor-help'),
-                    asChild: true,
-                    children: /*#__PURE__*/ jsxs(Tag, {
-                        size: TAG_SIZE_BY_SELECT_SIZE[size],
-                        children: [
-                            "+",
-                            data.hiddenCount
-                        ]
-                    })
+                /*#__PURE__*/ jsxs(OverflowListMoreTrigger, {
+                    size: TAG_SIZE_BY_SELECT_SIZE[size],
+                    children: [
+                        "+",
+                        /*#__PURE__*/ jsx(OverflowListMoreCount, {})
+                    ]
                 }),
-                /*#__PURE__*/ jsx(PopoverContent, {
-                    minHeight: "auto",
+                /*#__PURE__*/ jsx(OverflowListMoreContent, {
                     maxWidth: POPOVER_MAX_WIDTH,
-                    children: /*#__PURE__*/ jsx(HStack, {
-                        gap: 4,
-                        wrap: "wrap",
-                        children: hiddenItems.map((item)=>/*#__PURE__*/ jsx(Tag, {
-                                size: "large",
-                                children: item.label
-                            }, item.value))
+                    children: /*#__PURE__*/ jsx(OverflowListMoreItems, {
+                        show: "hidden",
+                        renderItem: renderPopoverItem
                     })
                 })
             ]
         });
-    };
 export { createSelectInputOverflowRenderer };