@wallarm-org/design-system 0.49.0 → 0.50.0

package/dist/components/Drawer/DrawerResizeHandle.js

@@ -73,6 +73,8 @@ const DrawerResizeHandle = ({ ref })=>{
         children: [
             /*#__PURE__*/ jsx(TooltipTrigger, {
                 ref: ref,
+                "data-slot": "resize-handle",
+                "data-resizing": isDragging || void 0,
                 className: cn(drawerResizeHandleVariants({
                     barIsVisible
                 })),

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

@@ -0,0 +1,30 @@
+/** Fallback width (px) reserved for the "+N" overflow indicator until the real
+ * indicator has been measured. Passed to `useOverflowItems.reserveSpace`. */
+export declare const OVERFLOW_RESERVE_SPACE = 80;
+/**
+ * Shallow item-by-item equality for two lists. Order-sensitive — items must
+ * match at the same index. Used to guard `onOverflow` from re-firing when the
+ * hidden set keeps a fresh array identity but the same contents. A `null`
+ * previous list is treated as "not equal".
+ */
+export declare function areItemsShallowEqual<T>(prev: T[] | null, next: T[]): boolean;
+export interface ResolveVisibleItemsParams<T> {
+    /** Full source list, in order. */
+    items: T[];
+    /** Items the overflow engine decided are visible. */
+    visibleItems: T[];
+    /** Items the overflow engine collapsed into the indicator. */
+    hiddenItems: T[];
+    /** Minimum number of items to keep visible regardless of available space. */
+    minVisibleItems: number;
+}
+/**
+ * Applies the `minVisibleItems` floor to the overflow engine's output. When the
+ * engine collapses below the floor (and the list is long enough), force the
+ * first `minVisibleItems` to stay visible and recompute the hidden tail.
+ * Otherwise the engine's split is returned untouched (same references).
+ */
+export declare function resolveVisibleItems<T>({ items, visibleItems, hiddenItems, minVisibleItems, }: ResolveVisibleItemsParams<T>): {
+    visibleItems: T[];
+    hiddenItems: T[];
+};

package/dist/components/OverflowList/OverflowList.helpers.js

@@ -0,0 +1,16 @@
+const OVERFLOW_RESERVE_SPACE = 80;
+function areItemsShallowEqual(prev, next) {
+    if (!prev || prev.length !== next.length) return false;
+    return next.every((item, index)=>item === prev[index]);
+}
+function resolveVisibleItems({ items, visibleItems, hiddenItems, minVisibleItems }) {
+    if (visibleItems.length < minVisibleItems && items.length >= minVisibleItems) return {
+        visibleItems: items.slice(0, minVisibleItems),
+        hiddenItems: items.slice(minVisibleItems)
+    };
+    return {
+        visibleItems,
+        hiddenItems
+    };
+}
+export { OVERFLOW_RESERVE_SPACE, areItemsShallowEqual, resolveVisibleItems };

package/dist/components/OverflowList/OverflowList.js

@@ -1,48 +1,52 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { memo, useCallback, useMemo } from "react";
+import { memo, useCallback, useEffect, useMemo, useRef } from "react";
 import { useOverflowItems } from "../../hooks/index.js";
 import { cn } from "../../utils/cn.js";
+import { OVERFLOW_RESERVE_SPACE, areItemsShallowEqual, resolveVisibleItems } from "./OverflowList.helpers.js";
 const OverflowListComponent = ({ items, itemRenderer, overflowRenderer, className, collapseFrom = 'end', minVisibleItems = 0, alwaysRenderOverflow = false, onOverflow, ...props })=>{
-    const memoizedItemRenderer = useCallback((item)=>{
-        const index = items.indexOf(item);
-        return itemRenderer(item, index);
+    const indexMap = useMemo(()=>{
+        const map = new Map();
+        items.forEach((item, index)=>{
+            if (!map.has(item)) map.set(item, index);
+        });
+        return map;
     }, [
-        items,
+        items
+    ]);
+    const memoizedItemRenderer = useCallback((item)=>itemRenderer(item, indexMap.get(item) ?? 0), [
+        indexMap,
         itemRenderer
     ]);
-    const memoizedMeasurementRenderer = useCallback((item)=>{
-        const index = items.indexOf(item);
-        return itemRenderer(item, index);
-    }, [
-        items,
+    const memoizedMeasurementRenderer = useCallback((item)=>itemRenderer(item, indexMap.get(item) ?? 0), [
+        indexMap,
         itemRenderer
     ]);
     const { containerRef, visibleItems, hiddenItems, MeasurementContainer } = useOverflowItems({
         items,
         renderItem: memoizedMeasurementRenderer,
         overflowRenderer: (items)=>overflowRenderer(items),
-        reserveSpace: 80
+        reserveSpace: OVERFLOW_RESERVE_SPACE
     });
-    const finalVisibleItems = useMemo(()=>{
-        if (visibleItems.length < minVisibleItems && items.length >= minVisibleItems) return items.slice(0, minVisibleItems);
-        return visibleItems;
-    }, [
-        visibleItems,
-        minVisibleItems,
-        items
-    ]);
-    const finalHiddenItems = useMemo(()=>{
-        if (finalVisibleItems.length !== visibleItems.length) return items.slice(finalVisibleItems.length);
-        return hiddenItems;
-    }, [
-        finalVisibleItems.length,
-        visibleItems.length,
+    const { visibleItems: finalVisibleItems, hiddenItems: finalHiddenItems } = useMemo(()=>resolveVisibleItems({
+            items,
+            visibleItems,
+            hiddenItems,
+            minVisibleItems
+        }), [
         items,
-        hiddenItems
+        visibleItems,
+        hiddenItems,
+        minVisibleItems
     ]);
     const finalHiddenCount = finalHiddenItems.length;
-    useMemo(()=>{
-        if (onOverflow && finalHiddenItems.length > 0) onOverflow(finalHiddenItems);
+    const prevHiddenRef = useRef(null);
+    useEffect(()=>{
+        if (!onOverflow || 0 === finalHiddenItems.length) {
+            prevHiddenRef.current = finalHiddenItems;
+            return;
+        }
+        if (!areItemsShallowEqual(prevHiddenRef.current, finalHiddenItems)) onOverflow(finalHiddenItems);
+        prevHiddenRef.current = finalHiddenItems;
     }, [
         finalHiddenItems,
         onOverflow
@@ -65,6 +69,7 @@ const OverflowListComponent = ({ items, itemRenderer, overflowRenderer, classNam
             /*#__PURE__*/ jsx(MeasurementContainer, {}),
             /*#__PURE__*/ jsxs("div", {
                 ref: containerRef,
+                "data-slot": "overflow-list",
                 className: cn('flex w-full min-w-0', className),
                 ...props,
                 children: [

package/dist/components/Select/SelectSeparator.d.ts

@@ -1,2 +1,5 @@
-import type { FC } from 'react';
-export declare const SelectSeparator: FC;
+import type { FC, HTMLAttributes, Ref } from 'react';
+export type SelectSeparatorProps = HTMLAttributes<HTMLHRElement> & {
+    ref?: Ref<HTMLHRElement>;
+};
+export declare const SelectSeparator: FC<SelectSeparatorProps>;

package/dist/components/Select/SelectSeparator.js

@@ -1,10 +1,15 @@
 import { jsx } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
 import { useTestId } from "../../utils/testId.js";
-import { DropdownMenuSeparator } from "../DropdownMenu/index.js";
-const SelectSeparator = ()=>{
+const SelectSeparator = ({ className, ref, ...props })=>{
     const testId = useTestId('separator');
-    return /*#__PURE__*/ jsx(DropdownMenuSeparator, {
-        "data-testid": testId
+    return /*#__PURE__*/ jsx("hr", {
+        ref: ref,
+        "data-slot": "select-separator",
+        "data-testid": testId,
+        "aria-orientation": "horizontal",
+        className: cn('mx-8 my-4 h-px bg-border-primary border-none', className),
+        ...props
     });
 };
 SelectSeparator.displayName = 'SelectSeparator';

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

@@ -15,5 +15,5 @@ export { SelectOptionIndicator } from './SelectOptionIndicator';
 export { SelectOptionText } from './SelectOptionText';
 export { SelectPositioner } from './SelectPositioner';
 export { SelectSearchInput } from './SelectSearchInput';
-export { SelectSeparator } from './SelectSeparator';
+export { SelectSeparator, type SelectSeparatorProps } from './SelectSeparator';
 export type { SelectDataItem } from './types';

package/dist/components/Table/TableResizeHandler.js

@@ -9,6 +9,7 @@ const TableResizeHandler = ({ header })=>{
         onMouseDown: header.getResizeHandler(),
         onTouchStart: header.getResizeHandler(),
         className: cn(tableResizeHandlerVariants()),
+        "data-slot": "resize-handle",
         "data-testid": testId,
         "data-resizing": header.column.getIsResizing() || void 0,
         tabIndex: -1

package/dist/components/Table/mocks.js

@@ -20,7 +20,10 @@ const securityEvents = [
         objectName: 'Rate limiting abuse on the payment endpoint',
         tags: [
             'api-abuse',
-            'account-takeover'
+            'account-takeover',
+            'credential-stuffing',
+            'scanner',
+            'brute-force'
         ],
         isActive: false,
         requests: 22000,
@@ -40,7 +43,10 @@ const securityEvents = [
         objectName: 'Mass assignment vulnerability in user profile',
         tags: [
             'api-abuse',
-            'account-takeover'
+            'account-takeover',
+            'credential-stuffing',
+            'scanner',
+            'brute-force'
         ],
         isActive: false,
         requests: 25000,
@@ -60,7 +66,10 @@ const securityEvents = [
         objectName: 'Insecure direct object reference in user data',
         tags: [
             'api-abuse',
-            'account-takeover'
+            'account-takeover',
+            'credential-stuffing',
+            'scanner',
+            'brute-force'
         ],
         isActive: true,
         requests: 30000,
@@ -80,7 +89,10 @@ const securityEvents = [
         objectName: 'Improper error handling leading to info leak',
         tags: [
             'api-abuse',
-            'account-takeover'
+            'account-takeover',
+            'credential-stuffing',
+            'scanner',
+            'brute-force'
         ],
         isActive: true,
         requests: 35000,
@@ -100,7 +112,10 @@ const securityEvents = [
         objectName: 'Broken authentication in the login API',
         tags: [
             'api-abuse',
-            'account-takeover'
+            'account-takeover',
+            'credential-stuffing',
+            'scanner',
+            'brute-force'
         ],
         isActive: true,
         requests: 20000,
@@ -120,7 +135,10 @@ const securityEvents = [
         objectName: 'Lack of resource validation in file upload',
         tags: [
             'api-abuse',
-            'account-takeover'
+            'account-takeover',
+            'credential-stuffing',
+            'scanner',
+            'brute-force'
         ],
         isActive: false,
         requests: 40000,
@@ -140,7 +158,10 @@ const securityEvents = [
         objectName: 'Server-side request forgery in image proxy',
         tags: [
             'api-abuse',
-            'account-takeover'
+            'account-takeover',
+            'credential-stuffing',
+            'scanner',
+            'brute-force'
         ],
         isActive: false,
         requests: 50000,
@@ -160,7 +181,10 @@ const securityEvents = [
         objectName: 'Unvalidated redirects and forwards in auth flow',
         tags: [
             'api-abuse',
-            'account-takeover'
+            'account-takeover',
+            'credential-stuffing',
+            'scanner',
+            'brute-force'
         ],
         isActive: true,
         requests: 75000,
@@ -180,7 +204,10 @@ const securityEvents = [
         objectName: 'SQL injection in the user ID',
         tags: [
             'api-abuse',
-            'account-takeover'
+            'account-takeover',
+            'credential-stuffing',
+            'scanner',
+            'brute-force'
         ],
         isActive: false,
         requests: 15000,
@@ -200,7 +227,10 @@ const securityEvents = [
         objectName: "Cross-site scripting in the API endpoint",
         tags: [
             'api-abuse',
-            'account-takeover'
+            'account-takeover',
+            'credential-stuffing',
+            'scanner',
+            'brute-force'
         ],
         isActive: false,
         requests: 18000,

package/dist/hooks/useOverflowItems.helpers.d.ts

@@ -0,0 +1,15 @@
+export interface CalculateVisibleCountParams {
+    /** Width of each item in source order (px). */
+    itemWidths: number[];
+    /** Gap between flex children of the container (px). */
+    gap: number;
+    /** Available width of the container (px). */
+    availableWidth: number;
+    /** Measured width of the '+N' indicator (px); fallback — reserveSpace. */
+    indicatorWidth: number;
+}
+/**
+ * Pure arithmetic: how many leading items fit before an overflow indicator
+ * is required. Does not touch the DOM — safe to call on every resize frame.
+ */
+export declare function calculateVisibleCount({ itemWidths, gap, availableWidth, indicatorWidth, }: CalculateVisibleCountParams): number;

package/dist/hooks/useOverflowItems.helpers.js

@@ -0,0 +1,19 @@
+function calculateVisibleCount({ itemWidths, gap, availableWidth, indicatorWidth }) {
+    if (0 === itemWidths.length) return 0;
+    if (availableWidth <= 0) return itemWidths.length;
+    let total = 0;
+    for(let i = 0; i < itemWidths.length; i++)total += (itemWidths[i] ?? 0) + (i > 0 ? gap : 0);
+    if (total <= availableWidth) return itemWidths.length;
+    const maxWidth = availableWidth - indicatorWidth - gap;
+    let accumulated = 0;
+    let count = 0;
+    for(let i = 0; i < itemWidths.length; i++){
+        const widthWithGap = (itemWidths[i] ?? 0) + (i > 0 ? gap : 0);
+        if (accumulated + widthWithGap <= maxWidth || 0 === i) {
+            accumulated += widthWithGap;
+            count++;
+        } else break;
+    }
+    return Math.max(count, 1);
+}
+export { calculateVisibleCount };

package/dist/hooks/useOverflowItems.js

@@ -1,93 +1,109 @@
-import { jsx } from "react/jsx-runtime";
-import { useLayoutEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useLayoutEffect, useRef, useState } from "react";
+import { calculateVisibleCount } from "./useOverflowItems.helpers.js";
 function useOverflowItems({ items, renderItem, renderMeasurementItem, overflowRenderer, reserveSpace = 60 }) {
     const containerRef = useRef(null);
     const [visibleCount, setVisibleCount] = useState(items.length);
-    const [measurements, setMeasurements] = useState([]);
     const measurementRefs = useRef([]);
+    const indicatorRef = useRef(null);
+    const cacheRef = useRef({
+        widths: [],
+        gap: 0,
+        indicatorWidth: reserveSpace
+    });
+    const recompute = useCallback(()=>{
+        const container = containerRef.current;
+        if (!container) return;
+        const { widths, gap, indicatorWidth } = cacheRef.current;
+        if (0 === widths.length) return;
+        const next = calculateVisibleCount({
+            itemWidths: widths,
+            gap,
+            availableWidth: container.offsetWidth,
+            indicatorWidth
+        });
+        setVisibleCount((prev)=>prev === next ? prev : next);
+    }, []);
     useLayoutEffect(()=>{
+        const container = containerRef.current;
         if (0 === items.length) {
+            cacheRef.current = {
+                widths: [],
+                gap: 0,
+                indicatorWidth: reserveSpace
+            };
             setVisibleCount(0);
-            setMeasurements([]);
             return;
         }
-        const widths = measurementRefs.current.slice(0, items.length).map((ref)=>ref?.offsetWidth || 0);
-        setMeasurements(widths);
+        const gap = container ? Number.parseFloat(getComputedStyle(container).gap || '0') || 0 : 0;
+        const widths = measurementRefs.current.slice(0, items.length).map((ref)=>ref?.offsetWidth ?? 0);
+        const indicatorWidth = indicatorRef.current?.offsetWidth || reserveSpace;
+        cacheRef.current = {
+            widths,
+            gap,
+            indicatorWidth
+        };
+        recompute();
     }, [
-        items
+        items,
+        renderItem,
+        renderMeasurementItem,
+        overflowRenderer,
+        reserveSpace,
+        recompute
     ]);
     useLayoutEffect(()=>{
         const container = containerRef.current;
-        if (!container || 0 === measurements.length) return void setVisibleCount(items.length);
-        const calculateVisibleItems = ()=>{
-            const availableWidth = container.offsetWidth;
-            if (availableWidth <= 0) return void setVisibleCount(items.length);
-            const computedStyles = window.getComputedStyle(container);
-            const gap = parseFloat(computedStyles.gap || '0');
-            let accumulatedWidth = 0;
-            let count = 0;
-            for(let i = 0; i < measurements.length; i++){
-                const itemWidth = measurements[i];
-                if (!itemWidth) continue;
-                const widthWithGap = itemWidth + (i > 0 ? gap : 0);
-                const needsIndicator = i < measurements.length - 1;
-                let dynamicReserveSpace = reserveSpace;
-                if (needsIndicator && overflowRenderer) try {
-                    const tempDiv = document.createElement('div');
-                    tempDiv.style.cssText = 'position: absolute; visibility: hidden; top: -9999px;';
-                    tempDiv.style.font = computedStyles.font;
-                    document.body.appendChild(tempDiv);
-                    const overflowItem = items[0];
-                    if (overflowItem) {
-                        const overflowElement = overflowRenderer([
-                            overflowItem
-                        ]);
-                        if (overflowElement && 'object' == typeof overflowElement) tempDiv.textContent = '+1';
-                    }
-                    dynamicReserveSpace = Math.max(reserveSpace, tempDiv.offsetWidth + gap);
-                    document.body.removeChild(tempDiv);
-                } catch  {}
-                const maxWidth = availableWidth - (needsIndicator ? dynamicReserveSpace : 0);
-                if (accumulatedWidth + widthWithGap <= maxWidth || 0 === i) {
-                    count++;
-                    accumulatedWidth += widthWithGap;
-                } else break;
-            }
-            setVisibleCount(count || 1);
-        };
-        calculateVisibleItems();
-        const resizeObserver = new ResizeObserver(calculateVisibleItems);
-        resizeObserver.observe(container);
+        if (!container) return;
+        let frame = 0;
+        const observer = new ResizeObserver(()=>{
+            if (frame) return;
+            frame = requestAnimationFrame(()=>{
+                frame = 0;
+                recompute();
+            });
+        });
+        observer.observe(container);
         return ()=>{
-            resizeObserver.disconnect();
+            if (frame) cancelAnimationFrame(frame);
+            observer.disconnect();
         };
     }, [
-        measurements,
-        items,
-        reserveSpace,
-        overflowRenderer
+        recompute
     ]);
     const visibleItems = items.slice(0, visibleCount);
     const hiddenItems = items.slice(visibleCount);
     const hiddenCount = hiddenItems.length;
-    const MeasurementContainer = ()=>{
+    const MeasurementContainer = useCallback(()=>{
         if (0 === items.length) return null;
         const renderMeasure = renderMeasurementItem || renderItem;
-        return /*#__PURE__*/ jsx("div", {
+        return /*#__PURE__*/ jsxs("div", {
             className: "absolute invisible pointer-events-none",
             "aria-hidden": "true",
-            children: items.map((item, index)=>{
-                const key = `${index}`;
-                return /*#__PURE__*/ jsx("div", {
-                    ref: (el)=>{
-                        measurementRefs.current[index] = el;
-                    },
+            children: [
+                items.map((item, index)=>{
+                    const key = `${index}`;
+                    return /*#__PURE__*/ jsx("div", {
+                        ref: (el)=>{
+                            measurementRefs.current[index] = el;
+                        },
+                        className: "inline-flex",
+                        children: renderMeasure(item)
+                    }, key);
+                }),
+                overflowRenderer && /*#__PURE__*/ jsx("div", {
+                    ref: indicatorRef,
                     className: "inline-flex",
-                    children: renderMeasure(item)
-                }, key);
-            })
+                    children: overflowRenderer(items)
+                })
+            ]
         });
-    };
+    }, [
+        items,
+        renderItem,
+        renderMeasurementItem,
+        overflowRenderer
+    ]);
     return {
         containerRef,
         visibleItems,

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.48.0",
-  "generatedAt": "2026-05-28T00:36:49.945Z",
+  "version": "0.49.0",
+  "generatedAt": "2026-05-28T10:44:10.989Z",
   "components": [
     {
       "name": "Accordion",
@@ -18174,6 +18174,11 @@
           "code": "() => {\n  return (\n    <VStack gap={12}>\n      <Drawer width={800}>\n        <DrawerTrigger asChild>\n          <Button>Open Resizable Drawer (as number)</Button>\n        </DrawerTrigger>\n\n        <DrawerContent>\n          <DrawerResizeHandle />\n          <DrawerHeader>\n            <DrawerTitle>Resizable Drawer</DrawerTitle>\n          </DrawerHeader>\n\n          <DrawerBody>\n            <div className='py-12'>\n              <p className='mb-16'>Drag the left edge to resize this drawer.</p>\n              <ContentPlaceholder height={300} />\n            </div>\n          </DrawerBody>\n        </DrawerContent>\n      </Drawer>\n\n      <Drawer width='900px'>\n        <DrawerTrigger asChild>\n          <Button>Open Resizable Drawer (900px)</Button>\n        </DrawerTrigger>\n\n        <DrawerContent>\n          <DrawerResizeHandle />\n          <DrawerHeader>\n            <DrawerTitle>Resizable Drawer with \"900px\" width</DrawerTitle>\n          </DrawerHeader>\n\n          <DrawerBody>\n            <div className='py-12'>\n              <p className='mb-16'>Width is set as \"900px\" string. Drag the left edge to resize.</p>\n              <ContentPlaceholder height={300} />\n            </div>\n          </DrawerBody>\n        </DrawerContent>\n      </Drawer>\n\n      <Drawer width='50%'>\n        <DrawerTrigger asChild>\n          <Button>Open Resizable Drawer (50%)</Button>\n        </DrawerTrigger>\n\n        <DrawerContent>\n          <DrawerResizeHandle />\n          <DrawerHeader>\n            <DrawerTitle>Resizable Drawer with 50% width</DrawerTitle>\n          </DrawerHeader>\n\n          <DrawerBody>\n            <div className='py-12'>\n              <p className='mb-16'>\n                Width is set as \"50%\". Drag the left edge to resize - it will convert to pixels.\n              </p>\n              <ContentPlaceholder height={300} />\n            </div>\n          </DrawerBody>\n        </DrawerContent>\n      </Drawer>\n    </VStack>\n  );\n}",
           "description": "Resizable drawer"
         },
+        {
+          "name": "ResizableWithOverflowList",
+          "code": "() => {\n  const [open, setOpen] = useState(true);\n\n  return (\n    <Drawer width={480} open={open} onOpenChange={setOpen}>\n      <DrawerTrigger asChild>\n        <Button>Open Resizable Drawer with OverflowList</Button>\n      </DrawerTrigger>\n      <DrawerContent>\n        <DrawerResizeHandle />\n        <DrawerHeader>\n          <DrawerTitle>Resizable Drawer with OverflowList</DrawerTitle>\n        </DrawerHeader>\n        <DrawerBody>\n          <p className='mb-16'>Drag the left edge — the tag list reflows live.</p>\n          <Attribute>\n            <AttributeLabel>Attack types</AttributeLabel>\n            <AttributeValue>\n              <OverflowList\n                className='gap-4'\n                items={DRAWER_TAGS}\n                itemRenderer={item => <Tag key={item}>{item}</Tag>}\n                overflowRenderer={renderDrawerOverflow}\n              />\n            </AttributeValue>\n          </Attribute>\n        </DrawerBody>\n      </DrawerContent>\n    </Drawer>\n  );\n}",
+          "description": "Resizable drawer with an OverflowList — drag the left edge to reflow tags."
+        },
         {
           "name": "Scrollable",
           "code": "() => {\n  return (\n    <Drawer>\n      <DrawerTrigger asChild>\n        <Button>Open Drawer with Scroll</Button>\n      </DrawerTrigger>\n\n      <DrawerContent>\n        <DrawerHeader>\n          <DrawerTitle>Scrollable Content</DrawerTitle>\n        </DrawerHeader>\n\n        <DrawerBody>\n          <div className='flex flex-col gap-16 py-12'>\n            {Array.from({ length: 20 }).map((_, i) => (\n              <ContentPlaceholder key={i} height={100} />\n            ))}\n          </div>\n        </DrawerBody>\n\n        <DrawerFooter>\n          <DrawerClose asChild>\n            <Button variant='ghost' color='neutral' size='large'>\n              Close\n            </Button>\n          </DrawerClose>\n          <Button variant='primary' color='brand' size='large'>\n            Confirm\n          </Button>\n        </DrawerFooter>\n      </DrawerContent>\n    </Drawer>\n  );\n}",
@@ -30600,7 +30605,33 @@
       ],
       "variants": [],
       "subComponents": [],
-      "examples": []
+      "examples": [
+        {
+          "name": "Basic",
+          "code": "() => (\n  <div className='w-640'>\n    <OverflowList\n      className='gap-4'\n      items={TAGS}\n      itemRenderer={item => <Tag key={item}>{item}</Tag>}\n      overflowRenderer={renderOverflowPopover}\n    />\n  </div>\n)",
+          "description": "Basic list — all items fit in a wide container."
+        },
+        {
+          "name": "Collapsed",
+          "code": "() => (\n  <div className='w-200'>\n    <OverflowList\n      className='gap-4'\n      items={TAGS}\n      itemRenderer={item => <Tag key={item}>{item}</Tag>}\n      overflowRenderer={renderOverflowPopover}\n    />\n  </div>\n)",
+          "description": "Narrow container — most items collapse into \"+N\"."
+        },
+        {
+          "name": "CollapseFromStart",
+          "code": "() => (\n  <div className='w-240'>\n    <OverflowList\n      className='gap-4'\n      collapseFrom='start'\n      items={TAGS}\n      itemRenderer={item => <Tag key={item}>{item}</Tag>}\n      overflowRenderer={renderOverflowPopover}\n    />\n  </div>\n)",
+          "description": "Collapse from the start of the list."
+        },
+        {
+          "name": "MinVisibleItems",
+          "code": "() => (\n  <div className='w-160 overflow-hidden rounded-2 border border-border-primary p-12'>\n    <OverflowList\n      className='gap-4'\n      minVisibleItems={1}\n      items={TAGS}\n      itemRenderer={item => (\n        <Tag key={item} className='shrink-0 whitespace-nowrap'>\n          {item}\n        </Tag>\n      )}\n      overflowRenderer={renderOverflowPopoverInline}\n    />\n  </div>\n)",
+          "description": "Guaranteed minimum number of visible items. The container is deliberately\nnarrow: `minVisibleItems={1}` keeps at least one tag visible (the rest\ncollapse into \"+N\") even when the space is tight."
+        },
+        {
+          "name": "ResizableContainer",
+          "code": "() => (\n  <div\n    data-testid='resizable-wrapper'\n    className='overflow-hidden rounded-2 border border-border-primary p-12'\n    style={{ width: 500, minWidth: 80, maxWidth: 800, resize: 'horizontal' }}\n  >\n    <OverflowList\n      className='gap-4'\n      items={TAGS}\n      itemRenderer={item => <Tag key={item}>{item}</Tag>}\n      overflowRenderer={renderOverflowPopover}\n    />\n  </div>\n)",
+          "description": "Resizable container: drag the bottom-right corner of the box to see the list\nreflow live. The data-testid is used by E2E to resize programmatically."
+        }
+      ]
     },
     {
       "name": "OverflowTooltip",
@@ -37765,7 +37796,283 @@
       "importPath": "@wallarm-org/design-system/Select",
       "props": [],
       "variants": [],
-      "subComponents": [],
+      "subComponents": [
+        {
+          "name": "SelectSeparator",
+          "props": [
+            {
+              "name": "defaultChecked",
+              "type": "boolean | undefined",
+              "required": false
+            },
+            {
+              "name": "defaultValue",
+              "type": "string | number | readonly string[] | undefined",
+              "required": false
+            },
+            {
+              "name": "suppressContentEditableWarning",
+              "type": "boolean | undefined",
+              "required": false
+            },
+            {
+              "name": "suppressHydrationWarning",
+              "type": "boolean | undefined",
+              "required": false
+            },
+            {
+              "name": "accessKey",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "autoCapitalize",
+              "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined",
+              "required": false
+            },
+            {
+              "name": "autoFocus",
+              "type": "boolean | undefined",
+              "required": false
+            },
+            {
+              "name": "contentEditable",
+              "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined",
+              "required": false
+            },
+            {
+              "name": "contextMenu",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "dir",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "draggable",
+              "type": "Booleanish | undefined",
+              "required": false
+            },
+            {
+              "name": "enterKeyHint",
+              "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined",
+              "required": false
+            },
+            {
+              "name": "hidden",
+              "type": "boolean | undefined",
+              "required": false
+            },
+            {
+              "name": "id",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "lang",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "nonce",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "slot",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "spellCheck",
+              "type": "Booleanish | undefined",
+              "required": false
+            },
+            {
+              "name": "tabIndex",
+              "type": "number | undefined",
+              "required": false
+            },
+            {
+              "name": "title",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "translate",
+              "type": "\"yes\" | \"no\" | undefined",
+              "required": false
+            },
+            {
+              "name": "radioGroup",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "role",
+              "type": "AriaRole | undefined",
+              "required": false
+            },
+            {
+              "name": "about",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "content",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "datatype",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "inlist",
+              "type": "any",
+              "required": false
+            },
+            {
+              "name": "prefix",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "property",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "rel",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "resource",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "rev",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "typeof",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "vocab",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "autoCorrect",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "autoSave",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "color",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "itemProp",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "itemScope",
+              "type": "boolean | undefined",
+              "required": false
+            },
+            {
+              "name": "itemType",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "itemID",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "itemRef",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "results",
+              "type": "number | undefined",
+              "required": false
+            },
+            {
+              "name": "security",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "unselectable",
+              "type": "\"off\" | \"on\" | undefined",
+              "required": false
+            },
+            {
+              "name": "popover",
+              "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined",
+              "required": false
+            },
+            {
+              "name": "popoverTargetAction",
+              "type": "\"toggle\" | \"show\" | \"hide\" | undefined",
+              "required": false
+            },
+            {
+              "name": "popoverTarget",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "inert",
+              "type": "boolean | undefined",
+              "required": false,
+              "description": "@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert"
+            },
+            {
+              "name": "inputMode",
+              "type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined",
+              "required": false,
+              "description": "Hints at the type of data that might be entered by the user while editing the element or its contents"
+            },
+            {
+              "name": "is",
+              "type": "string | undefined",
+              "required": false,
+              "description": "Specify that a standard HTML element should behave like a defined custom built-in element"
+            },
+            {
+              "name": "exportparts",
+              "type": "string | undefined",
+              "required": false,
+              "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}"
+            },
+            {
+              "name": "part",
+              "type": "string | undefined",
+              "required": false,
+              "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}"
+            }
+          ]
+        }
+      ],
       "examples": [
         {
           "name": "Basic",
@@ -51627,6 +51934,11 @@
           "name": "ColumnResizing",
           "code": "() => {\n  const [columnSizing, setColumnSizing] = useState<TableColumnSizingState>({});\n\n  return (\n    <Table\n      data={securityEvents}\n      columns={securityColumns}\n      getRowId={row => row.id}\n      columnSizing={columnSizing}\n      onColumnSizingChange={setColumnSizing}\n    />\n  );\n}"
         },
+        {
+          "name": "ColumnResizingWithOverflowList",
+          "code": "() => {\n  const [columnSizing, setColumnSizing] = useState<TableColumnSizingState>({});\n\n  const columns = useMemo<TableColumnDef<SecurityEvent>[]>(\n    () => [\n      ...securityColumns.slice(0, 1),\n      securityColumnHelper.display({\n        id: 'tags',\n        header: 'Tags',\n        size: 240,\n        cell: ({ row }) => (\n          <OverflowList\n            className='gap-4'\n            items={row.original.tags}\n            itemRenderer={(item: string) => <Tag key={item}>{item}</Tag>}\n            overflowRenderer={renderTableTagsOverflow}\n          />\n        ),\n      }),\n      ...securityColumns.slice(1),\n    ],\n    [],\n  );\n\n  return (\n    <Table\n      data={securityEvents}\n      columns={columns}\n      getRowId={row => row.id}\n      columnSizing={columnSizing}\n      onColumnSizingChange={setColumnSizing}\n    />\n  );\n}",
+          "description": "Resizable column whose cell hosts an OverflowList — resize it to reflow tags."
+        },
         {
           "name": "ColumnResizingWithPinning",
           "code": "() => {\n  const [columnSizing, setColumnSizing] = useState<TableColumnSizingState>({});\n  const [columnPinning, setColumnPinning] = useState<TableColumnPinningState>({\n    left: ['objectName'],\n  });\n\n  return (\n    <Table\n      className='max-w-920'\n      data={securityEvents}\n      columns={securityColumns}\n      getRowId={row => row.id}\n      columnSizing={columnSizing}\n      onColumnSizingChange={setColumnSizing}\n      columnPinning={columnPinning}\n      onColumnPinningChange={setColumnPinning}\n    />\n  );\n}"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wallarm-org/design-system",
-  "version": "0.49.0",
+  "version": "0.50.0",
   "description": "Core design system library with React components and Storybook documentation",
   "publishConfig": {
     "access": "public",