@wallarm-org/claude-design 0.0.0-stage → 4.8.0

package/dist/project/components/OverflowList/README.md

@@ -0,0 +1,324 @@
+Lays a set of items out in one row and folds whatever will not fit into an overflow control — reach for `OverflowTooltip` instead when the thing overrunning is a single run of text rather than a set. By default the overflow is a `+N more` chip opening a popover of every item; compose it yourself from the `OverflowListMore` parts (`Trigger`, `Content`, `Header`, `Items`, `Count`), or pass any `overflowRenderer(hiddenItems, { allItems, visibleItems })` of your own. It re-measures whenever the container changes width.
+
+## Props as canvas attributes
+
+Use kebab-case attribute names. Pass non-string values through renderVals holes, including booleans. The full emitted API is in `components/index.d.ts`.
+
+| Attribute | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `items` | `T[]` | yes | — | Measurements are cached by array identity — keep it referentially stable. |
+| `item-renderer` | `(item: T, index: number) => ReactNode` | yes | — |  |
+| `overflow-renderer` | `complex` | no | — | Renders the overflow indicator. Also called once in the hidden measurement layer with every item hidden, so it must be pure. Compose it from the `OverflowListMore` parts; defaults to `<OverflowListMore />`. |
+| `min-visible-items` | `number \| undefined` | no | — | Keep at least this many items visible however narrow the row gets. |
+| `on-overflow` | `((hiddenItems: T[]) => void) \| undefined` | no | — |  |
+| `collapse-from` | `CollapseDirection \| undefined` | no | — |  |
+| `always-render-overflow` | `boolean \| undefined` | no | — | Call `overflowRenderer` even when nothing is hidden. `OverflowListMore` itself renders nothing at zero hidden items. |
+| `default-checked` | `boolean \| undefined` | no | — |  |
+| `default-value` | `string \| number \| readonly string[] \| undefined` | no | — |  |
+| `auto-focus` | `boolean \| undefined` | no | — |  |
+| `id` | `string \| undefined` | no | — |  |
+| `tab-index` | `number \| undefined` | no | — |  |
+| `title` | `string \| undefined` | no | — |  |
+| `rel` | `string \| undefined` | no | — |  |
+| `on-change` | `ChangeEventHandler<T, Element> \| undefined` | no | — |  |
+| `data-testid` | `string \| undefined` | no | — |  |
+
+## Sub-components
+
+- `WallarmDS.OverflowListMore` — `OverflowListMoreProps` in the declaration bundle.
+- `WallarmDS.OverflowListMoreContent` — `OverflowListMoreContentProps` in the declaration bundle.
+- `WallarmDS.OverflowListMoreCount` — `OverflowListMoreCountProps` in the declaration bundle.
+- `WallarmDS.OverflowListMoreHeader` — `OverflowListMoreHeaderProps` in the declaration bundle.
+- `WallarmDS.OverflowListMoreItems` — `OverflowListMoreItemsProps` in the declaration bundle.
+- `WallarmDS.OverflowListMoreTrigger` — `OverflowListMoreTriggerProps` in the declaration bundle.
+
+## Stories
+
+### Basic
+
+All nine tags fit in 640px, so the overflow chip never appears.
+
+Source: OverflowList/OverflowList.stories.tsx#Basic
+
+### Collapsed
+
+The same nine in 200px: two survive and the `+N` takes the rest, which is the whole job.
+
+Source: OverflowList/OverflowList.stories.tsx#Collapsed
+
+### CollapseFromStart
+
+`collapseFrom='start'` hides the beginning and keeps the end in view — for a path or a
+history where the most recent items are the ones that matter.
+
+Source: OverflowList/OverflowList.stories.tsx#CollapseFromStart
+
+### MinVisibleItems
+
+`minVisibleItems` puts a floor under the measurement: however tight the column gets,
+that many items stay and the rest go to the `+N` rather than the row emptying out.
+
+Source: OverflowList/OverflowList.stories.tsx#MinVisibleItems
+
+### ResizableContainer
+
+Drag the box's right edge: the split is re-measured as the width changes rather than at
+breakpoints, which is what makes it safe inside a resizable panel.
+
+Source: OverflowList/OverflowList.stories.tsx#ResizableContainer
+
+### WithHeader
+
+The full composition: a header counting every item over the popover list, built from
+`OverflowListMoreHeader` and `OverflowListMoreCount` in plain JSX. Items already in the
+row are listed first and faded.
+
+Source: OverflowList/OverflowList.stories.tsx#WithHeader
+
+### HiddenOnly
+
+`show='hidden'` lists only what the row folded away — the pattern for editable
+contexts such as a multi-select input, where the visible chips are right there.
+
+Source: OverflowList/OverflowList.stories.tsx#HiddenOnly
+
+### CoverPlacement
+
+`placement='cover'` opens the popover over the row itself, from its left edge.
+
+Source: OverflowList/OverflowList.stories.tsx#CoverPlacement
+
+### PluralizedHeader
+
+When the header needs the number as a value — pluralization, i18n — read it with
+`useOverflowListMore()` inside your own component instead of `OverflowListMoreCount`.
+
+Source: OverflowList/OverflowList.stories.tsx#PluralizedHeader
+
+### CustomRenderer
+
+`overflowRenderer` is just a function of the hidden items — anything goes, no popover
+required.
+
+Source: OverflowList/OverflowList.stories.tsx#CustomRenderer
+
+## Story sources
+
+### OverflowList/OverflowList.stories.tsx
+
+```tsx
+import type { Meta, StoryFn } from 'storybook-react-rsbuild';
+import { Tag } from '../Tag';
+import { OverflowList } from './OverflowList';
+import { OverflowListMore } from './OverflowListMore';
+import { OverflowListMoreContent } from './OverflowListMoreContent';
+import { OverflowListMoreCount } from './OverflowListMoreCount';
+import { OverflowListMoreHeader } from './OverflowListMoreHeader';
+import { OverflowListMoreItems } from './OverflowListMoreItems';
+import { OverflowListMoreTrigger } from './OverflowListMoreTrigger';
+import { useOverflowListMore } from './useOverflowListMore';
+
+const DESCRIPTION = [
+  'Lays a set of items out in one row and folds whatever will not fit into an overflow control — reach for `OverflowTooltip` instead when the thing overrunning is a single run of text rather than a set.',
+  'By default the overflow is a `+N more` chip opening a popover of every item; compose it yourself from the `OverflowListMore` parts (`Trigger`, `Content`, `Header`, `Items`, `Count`), or pass any `overflowRenderer(hiddenItems, { allItems, visibleItems })` of your own.',
+  'It re-measures whenever the container changes width.',
+].join(' ');
+
+const meta = {
+  title: 'Data Display/OverflowList',
+  component: OverflowList,
+  parameters: {
+    layout: 'padded',
+    docs: { description: { component: DESCRIPTION } },
+  },
+} satisfies Meta<typeof OverflowList<string>>;
+
+export default meta;
+
+const TAGS = ['XSS', 'BOLA', 'SQL Injection', 'Scanner', 'CSRF', 'XXE', 'RCE', 'LFI', 'IDOR'];
+
+/** All nine tags fit in 640px, so the overflow chip never appears. */
+export const Basic: StoryFn = () => (
+  <div className='w-640'>
+    <OverflowList
+      className='gap-4'
+      items={TAGS}
+      itemRenderer={item => <Tag key={item}>{item}</Tag>}
+    />
+  </div>
+);
+
+/** The same nine in 200px: two survive and the `+N` takes the rest, which is the whole job. */
+export const Collapsed: StoryFn = () => (
+  <div className='w-200'>
+    <OverflowList
+      className='gap-4'
+      items={TAGS}
+      itemRenderer={item => <Tag key={item}>{item}</Tag>}
+    />
+  </div>
+);
+
+/**
+ * `collapseFrom='start'` hides the beginning and keeps the end in view — for a path or a
+ * history where the most recent items are the ones that matter.
+ */
+export const CollapseFromStart: StoryFn = () => (
+  <div className='w-240'>
+    <OverflowList
+      className='gap-4'
+      collapseFrom='start'
+      items={TAGS}
+      itemRenderer={item => <Tag key={item}>{item}</Tag>}
+    />
+  </div>
+);
+
+/**
+ * `minVisibleItems` puts a floor under the measurement: however tight the column gets,
+ * that many items stay and the rest go to the `+N` rather than the row emptying out.
+ */
+export const MinVisibleItems: StoryFn = () => (
+  <div className='w-160 overflow-hidden rounded-2 border border-border-primary p-12'>
+    <OverflowList
+      className='gap-4'
+      minVisibleItems={1}
+      items={TAGS}
+      itemRenderer={item => <Tag key={item}>{item}</Tag>}
+    />
+  </div>
+);
+
+/**
+ * Drag the box's right edge: the split is re-measured as the width changes rather than at
+ * breakpoints, which is what makes it safe inside a resizable panel.
+ */
+export const ResizableContainer: StoryFn = () => (
+  <div
+    data-testid='resizable-wrapper'
+    className='overflow-hidden rounded-2 border border-border-primary p-12'
+    style={{ width: 500, minWidth: 80, maxWidth: 800, resize: 'horizontal' }}
+  >
+    <OverflowList
+      className='gap-4'
+      data-testid='tags'
+      items={TAGS}
+      itemRenderer={item => <Tag key={item}>{item}</Tag>}
+    />
+  </div>
+);
+
+const ATTACK_TYPES = ['RCE', 'XSS', 'SQL Injection', 'CSRF'];
+
+/**
+ * The full composition: a header counting every item over the popover list, built from
+ * `OverflowListMoreHeader` and `OverflowListMoreCount` in plain JSX. Items already in the
+ * row are listed first and faded.
+ */
+export const WithHeader: StoryFn = () => (
+  <div className='w-120'>
+    <OverflowList
+      className='gap-4'
+      data-testid='attacks'
+      items={ATTACK_TYPES}
+      itemRenderer={item => <Tag key={item}>{item}</Tag>}
+      overflowRenderer={() => (
+        <OverflowListMore>
+          <OverflowListMoreTrigger />
+          <OverflowListMoreContent>
+            <OverflowListMoreHeader>
+              <OverflowListMoreCount of='total' /> attack types
+            </OverflowListMoreHeader>
+            <OverflowListMoreItems />
+          </OverflowListMoreContent>
+        </OverflowListMore>
+      )}
+    />
+  </div>
+);
+
+/**
+ * `show='hidden'` lists only what the row folded away — the pattern for editable
+ * contexts such as a multi-select input, where the visible chips are right there.
+ */
+export const HiddenOnly: StoryFn = () => (
+  <div className='w-120'>
+    <OverflowList
+      className='gap-4'
+      data-testid='attacks'
+      items={ATTACK_TYPES}
+      itemRenderer={item => <Tag key={item}>{item}</Tag>}
+      overflowRenderer={() => (
+        <OverflowListMore>
+          <OverflowListMoreTrigger>
+            +<OverflowListMoreCount />
+          </OverflowListMoreTrigger>
+          <OverflowListMoreContent>
+            <OverflowListMoreItems show='hidden' />
+          </OverflowListMoreContent>
+        </OverflowListMore>
+      )}
+    />
+  </div>
+);
+
+/** `placement='cover'` opens the popover over the row itself, from its left edge. */
+export const CoverPlacement: StoryFn = () => (
+  <div className='w-120'>
+    <OverflowList
+      className='gap-4'
+      data-testid='attacks'
+      items={ATTACK_TYPES}
+      itemRenderer={item => <Tag key={item}>{item}</Tag>}
+      overflowRenderer={() => <OverflowListMore placement='cover' />}
+    />
+  </div>
+);
+
+const PluralHeader = () => {
+  const { totalCount } = useOverflowListMore();
+  return (
+    <OverflowListMoreHeader>
+      {totalCount} {totalCount === 1 ? 'attack type' : 'attack types'}
+    </OverflowListMoreHeader>
+  );
+};
+
+/**
+ * When the header needs the number as a value — pluralization, i18n — read it with
+ * `useOverflowListMore()` inside your own component instead of `OverflowListMoreCount`.
+ */
+export const PluralizedHeader: StoryFn = () => (
+  <div className='w-120'>
+    <OverflowList
+      className='gap-4'
+      items={ATTACK_TYPES}
+      itemRenderer={item => <Tag key={item}>{item}</Tag>}
+      overflowRenderer={() => (
+        <OverflowListMore>
+          <OverflowListMoreTrigger />
+          <OverflowListMoreContent>
+            <PluralHeader />
+            <OverflowListMoreItems />
+          </OverflowListMoreContent>
+        </OverflowListMore>
+      )}
+    />
+  </div>
+);
+
+/**
+ * `overflowRenderer` is just a function of the hidden items — anything goes, no popover
+ * required.
+ */
+export const CustomRenderer: StoryFn = () => (
+  <div className='w-120'>
+    <OverflowList
+      className='gap-4'
+      items={ATTACK_TYPES}
+      itemRenderer={item => <Tag key={item}>{item}</Tag>}
+      overflowRenderer={hidden => <Tag>and {hidden.length} others</Tag>}
+    />
+  </div>
+);
+```

package/dist/project/components/OverflowList/preview.html

@@ -0,0 +1,2 @@
+<!-- @dsCard group="Data Display" height=480 -->
+<!doctype html><html><head><meta charset="utf-8"></head><body><div id="preview"></div><script src="./stories.js"></script><script>window.WallarmPreview.mount(document.getElementById('preview'));</script></body></html>

package/dist/project/components/OverflowList/stories.js

@@ -0,0 +1,12 @@
+var e={vD(e,t,r){let n,a;/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @lightSyntaxTransform
+ * @noflow
+ * @nolint
+ * @preventMunge
+ * @preserve-invariant-messages
+ */var o,l,i=Object.create,c=Object.defineProperty,s=Object.getOwnPropertyDescriptor,u=Object.getOwnPropertyNames,f=Object.getPrototypeOf,d=Object.prototype.hasOwnProperty,m=(e,t,r,n)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let a of u(t))d.call(e,a)||a===r||c(e,a,{get:()=>t[a],enumerable:!(n=s(t,a))||n.enumerable});return e},p={},y={$dispatcherGuard:()=>O,$makeReadOnly:()=>k,$reset:()=>M,$structuralCheck:()=>T,c:()=>b,clearRenderCounterRegistry:()=>I,renderCounterRegistry:()=>D,useRenderCounter:()=>L};for(var h in y)c(p,h,{get:y[h],enumerable:!0});e.exports=m(c({},"__esModule",{value:!0}),p);var w=(a=null!=(n=r("C"))?i(f(n)):{},m(n&&n.__esModule?a:c(a,"default",{value:n,enumerable:!0}),n)),{useRef:v,useEffect:R,isValidElement:g}=w,_=null!=(o=w.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE)?o:w.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,S=Symbol.for("react.memo_cache_sentinel"),b="function"==typeof(null==(l=w.__COMPILER_RUNTIME)?void 0:l.c)?w.__COMPILER_RUNTIME.c:function(e){return w.useMemo(()=>{let t=Array(e);for(let r=0;r<e;r++)t[r]=S;return t[S]=!0,t},[])},N={};["readContext","useCallback","useContext","useEffect","useImperativeHandle","useInsertionEffect","useLayoutEffect","useMemo","useReducer","useRef","useState","useDebugValue","useDeferredValue","useTransition","useMutableSource","useSyncExternalStore","useId","unstable_isNewReconciler","getCacheSignal","getCacheForType","useCacheRefresh"].forEach(e=>{N[e]=()=>{throw Error(`[React] Unexpected React hook call (${e}) from a React compiled function. Check that all hooks are called directly and named according to convention ('use[A-Z]') `)}});var E=null;function $(e){return _.ReactCurrentDispatcher.current=e,_.ReactCurrentDispatcher.current}N.useMemoCache=e=>{if(null!=E)return E.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var C=[];function O(e){let t=_.ReactCurrentDispatcher.current;if(0===e){if(C.push(t),1===C.length&&(E=t),t===N)throw Error("[React] Unexpected call to custom hook or component from a React compiled function. Check that (1) all hooks are called directly and named according to convention ('use[A-Z]') and (2) components are returned as JSX instead of being directly invoked.");$(N)}else if(1===e){let e=C.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");0===C.length&&(E=null),$(e)}else if(2===e)C.push(t),$(E);else if(3===e){let e=C.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");$(e)}else throw Error("React Compiler internal error: unreachable block"+e)}function M(e){for(let t=0;t<e.length;t++)e[t]=S}function k(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var D=new Map;function I(){for(let e of D.values())e.forEach(e=>{e.count=0})}function L(e){let t=v(null);null!=t.current&&(t.current.count+=1),R(()=>{if(null==t.current){let r,n={count:0};null==(r=D.get(e))&&(r=new Set,D.set(e,r)),r.add(n),t.current=n}return()=>{var r;let n;null!==t.current&&(r=t.current,null!=(n=D.get(e))&&n.delete(r))}})}var j=new Set;function T(e,t,r,n,a,o){function l(e,t,l,i){let c=`${n}:${o} [${a}] ${r}${l} changed from ${e} to ${t} at depth ${i}`;j.has(c)||(j.add(c),console.error(c))}!function e(t,r,n,a){if(!(a>2)){if(t!==r)if(typeof t!=typeof r)l(`type ${typeof t}`,`type ${typeof r}`,n,a);else if("object"==typeof t){let o=Array.isArray(t),i=Array.isArray(r);if(null===t&&null!==r)l("null",`type ${typeof r}`,n,a);else if(null===r)l(`type ${typeof t}`,"null",n,a);else if(t instanceof Map)if(r instanceof Map)if(t.size!==r.size)l(`Map instance with size ${t.size}`,`Map instance with size ${r.size}`,n,a);else for(let[o,i]of t)r.has(o)?e(i,r.get(o),`${n}.get(${o})`,a+1):l(`Map instance with key ${o}`,`Map instance without key ${o}`,n,a);else l("Map instance","other value",n,a);else if(r instanceof Map)l("other value","Map instance",n,a);else if(t instanceof Set)if(r instanceof Set)if(t.size!==r.size)l(`Set instance with size ${t.size}`,`Set instance with size ${r.size}`,n,a);else for(let e of r)t.has(e)||l(`Set instance without element ${e}`,`Set instance with element ${e}`,n,a);else l("Set instance","other value",n,a);else if(r instanceof Set)l("other value","Set instance",n,a);else if(o||i)if(o!==i)l(`type ${o?"array":"object"}`,`type ${i?"array":"object"}`,n,a);else if(t.length!==r.length)l(`array with length ${t.length}`,`array with length ${r.length}`,n,a);else for(let o=0;o<t.length;o++)e(t[o],r[o],`${n}[${o}]`,a+1);else if(g(t)||g(r))g(t)!==g(r)?l(`type ${g(t)?"React element":"object"}`,`type ${g(r)?"React element":"object"}`,n,a):t.type!==r.type?l(`React element of type ${t.type}`,`React element of type ${r.type}`,n,a):e(t.props,r.props,`[props of ${n}]`,a+1);else{for(let e in r)e in t||l(`object without key ${e}`,`object with key ${e}`,n,a);for(let o in t)o in r?e(t[o],r[o],`${n}.${o}`,a+1):l(`object with key ${o}`,`object without key ${o}`,n,a)}}else{if("function"==typeof t)return;isNaN(t)||isNaN(r)?isNaN(t)!==isNaN(r)&&l(`${isNaN(t)?"NaN":"non-NaN value"}`,`${isNaN(r)?"NaN":"non-NaN value"}`,n,a):t!==r&&l(t,r,n,a)}}}(e,t,"",0)}},p(e,t,r){let n=new WeakMap,a=new WeakMap;function o(e,t,r){let o=t,l=r;if("object"==typeof o&&null!==o&&"$$typeof"in o&&o.$$typeof===Symbol.for("react.context")&&"Provider"in o&&(o=o.Provider),"function"==typeof o&&null!=l.ref&&!o.prototype?.isReactComponent){let t=o,r=n.get(e);r||(r=new WeakMap,n.set(e,r));let a=r.get(t);a||((a=e.forwardRef((e,r)=>t({...e,ref:r}))).displayName=t.displayName??t.name,r.set(t,a)),o=a}if("string"==typeof o&&"boolean"==typeof l.inert&&((l={...l}).inert?l.inert="":delete l.inert),"string"==typeof o)for(let[e,t]of[["fill-rule","fillRule"],["clip-rule","clipRule"]])e in l&&(l={...l,[t]:l[e]},delete l[e]);return"string"==typeof o&&null!=l.ref&&(o=function(e,t){let r=a.get(e);r||(r=new Map,a.set(e,r));let n=r.get(t);if(n)return n;let o=e.forwardRef((r,n)=>{let a=e.useRef(null);if(!a.current||a.current.original!==n){let e;a.current={original:n,callback:t=>{if(null==t&&e){let t=e;e=void 0,t();return}if("function"==typeof n){let r=n(t);e="function"==typeof r?r:void 0}else n&&(n.current=t)}}}return e.createElement(t,{...r,ref:a.current.callback})});return o.displayName=`CanvasHost(${t})`,r.set(t,o),o}(e,o)),{type:o,props:l}}function l(e){let t=(t,r,n)=>{let a=o(e,t,r??{});return e.createElement(a.type,void 0===n?a.props:{...a.props,key:n})};return{jsx:t,jsxs:(t,r,n)=>{let a=o(e,t,r??{}),{children:l,...i}=a.props;return e.createElement(a.type,void 0===n?i:{...i,key:n},...Array.isArray(l)?l:[l])},jsxDEV:t,Fragment:e.Fragment}}function i(e){return{...e,createElement:(t,r,...n)=>{let a=o(e,t,r??{});return e.createElement(a.type,a.props,...n)},cloneElement:(t,r,...n)=>{let a=e.cloneElement(t,r??void 0,...n),l=a.ref,i=o(e,a.type,{...a.props,ref:l});return i.type===a.type&&"string"!=typeof a.type?a:e.createElement(i.type,{...i.props,key:a.key})}}}r.d(t,{MA:()=>l,YJ:()=>i})},C(e,t,r){r.r(t);let n=(0,r("p").YJ)(window.React),{Children:a,Component:o,Fragment:l,Profiler:i,PureComponent:c,StrictMode:s,Suspense:u,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:f,act:d,cloneElement:m,createContext:p,createElement:y,createFactory:h,createRef:w,forwardRef:v,isValidElement:R,lazy:g,memo:_,startTransition:S,unstable_act:b,useCallback:N,useContext:E,useDebugValue:$,useDeferredValue:C,useEffect:O,useId:M,useImperativeHandle:k,useInsertionEffect:D,useLayoutEffect:I,useMemo:L,useReducer:j,useRef:T,useState:x,useSyncExternalStore:W,useTransition:P,version:z,use:A}=n;r.d(t,{},{Children:a,Component:o,Fragment:l,Profiler:i,PureComponent:c,StrictMode:s,Suspense:u,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:f,act:d,cloneElement:m,createContext:p,createElement:y,createFactory:h,createRef:w,default:n,forwardRef:v,isValidElement:R,lazy:g,memo:_,startTransition:S,unstable_act:b,use:A,useCallback:N,useContext:E,useDebugValue:$,useDeferredValue:C,useEffect:O,useId:M,useImperativeHandle:k,useInsertionEffect:D,useLayoutEffect:I,useMemo:L,useReducer:j,useRef:T,useState:x,useSyncExternalStore:W,useTransition:P,version:z})}},t={};function r(n){var a=t[n];if(void 0!==a)return a.exports;var o=t[n]={exports:{}};return e[n](o,o.exports,r),o.exports}r.d=(e,t,n)=>{var a=(t,n)=>{for(var a in t)r.o(t,a)&&!r.o(e,a)&&Object.defineProperty(e,a,{enumerable:!0,[n]:t[a]})};a(t,"get"),a(n,"value")},r.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r.r=e=>{"u">typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},(()=>{let{jsx:e,jsxs:t,jsxDEV:n,Fragment:a}=(0,r("p").MA)(window.React);var o=r("vD");let l=window.WallarmDS.Tag,i=window.WallarmDS.OverflowList,c=window.WallarmDS.OverflowListMore,s=window.WallarmDS.OverflowListMoreContent,u=window.WallarmDS.OverflowListMoreCount,f=window.WallarmDS.OverflowListMoreHeader,d=window.WallarmDS.OverflowListMoreItems,m=window.WallarmDS.OverflowListMoreTrigger,p=window.WallarmDS.useOverflowListMore,y={title:"Data Display/OverflowList",component:i,parameters:{layout:"padded",docs:{description:{component:"Lays a set of items out in one row and folds whatever will not fit into an overflow control — reach for `OverflowTooltip` instead when the thing overrunning is a single run of text rather than a set. By default the overflow is a `+N more` chip opening a popover of every item; compose it yourself from the `OverflowListMore` parts (`Trigger`, `Content`, `Header`, `Items`, `Count`), or pass any `overflowRenderer(hiddenItems, { allItems, visibleItems })` of your own. It re-measures whenever the container changes width."}}}},h=["XSS","BOLA","SQL Injection","Scanner","CSRF","XXE","RCE","LFI","IDOR"],w=["RCE","XSS","SQL Injection","CSRF"],v=()=>{let e,r=(0,o.c)(3),{totalCount:n}=p(),a=1===n?"attack type":"attack types";return r[0]!==a||r[1]!==n?(e=t(f,{children:[n," ",a]}),r[0]=a,r[1]=n,r[2]=e):e=r[2],e};function R(t){return e(l,{children:t},t)}function g(t){return e(l,{children:t},t)}function _(t){return e(l,{children:t},t)}function S(t){return e(l,{children:t},t)}function b(t){return e(l,{children:t},t)}function N(t){return e(l,{children:t},t)}function E(){return t(c,{children:[e(m,{}),t(s,{children:[t(f,{children:[e(u,{of:"total"})," attack types"]}),e(d,{})]})]})}function $(t){return e(l,{children:t},t)}function C(){return t(c,{children:[t(m,{children:["+",e(u,{})]}),e(s,{children:e(d,{show:"hidden"})})]})}function O(t){return e(l,{children:t},t)}function M(){return e(c,{placement:"cover"})}function k(t){return e(l,{children:t},t)}function D(){return t(c,{children:[e(m,{}),t(s,{children:[e(v,{}),e(d,{})]})]})}function I(t){return e(l,{children:t},t)}function L(e){return t(l,{children:["and ",e.length," others"]})}var j=r("C");let T=[{name:"Basic",story:()=>{let t,r=(0,o.c)(1);return r[0]===Symbol.for("react.memo_cache_sentinel")?(t=e("div",{className:"w-640",children:e(i,{className:"gap-4",items:h,itemRenderer:R})}),r[0]=t):t=r[0],t},meta:y},{name:"Collapsed",story:()=>{let t,r=(0,o.c)(1);return r[0]===Symbol.for("react.memo_cache_sentinel")?(t=e("div",{className:"w-200",children:e(i,{className:"gap-4",items:h,itemRenderer:g})}),r[0]=t):t=r[0],t},meta:y},{name:"CollapseFromStart",story:()=>{let t,r=(0,o.c)(1);return r[0]===Symbol.for("react.memo_cache_sentinel")?(t=e("div",{className:"w-240",children:e(i,{className:"gap-4",collapseFrom:"start",items:h,itemRenderer:_})}),r[0]=t):t=r[0],t},meta:y},{name:"MinVisibleItems",story:()=>{let t,r=(0,o.c)(1);return r[0]===Symbol.for("react.memo_cache_sentinel")?(t=e("div",{className:"w-160 overflow-hidden rounded-2 border border-border-primary p-12",children:e(i,{className:"gap-4",minVisibleItems:1,items:h,itemRenderer:S})}),r[0]=t):t=r[0],t},meta:y},{name:"ResizableContainer",story:()=>{let t,r=(0,o.c)(1);return r[0]===Symbol.for("react.memo_cache_sentinel")?(t=e("div",{"data-testid":"resizable-wrapper",className:"overflow-hidden rounded-2 border border-border-primary p-12",style:{width:500,minWidth:80,maxWidth:800,resize:"horizontal"},children:e(i,{className:"gap-4","data-testid":"tags",items:h,itemRenderer:b})}),r[0]=t):t=r[0],t},meta:y},{name:"WithHeader",story:()=>{let t,r=(0,o.c)(1);return r[0]===Symbol.for("react.memo_cache_sentinel")?(t=e("div",{className:"w-120",children:e(i,{className:"gap-4","data-testid":"attacks",items:w,itemRenderer:N,overflowRenderer:E})}),r[0]=t):t=r[0],t},meta:y},{name:"HiddenOnly",story:()=>{let t,r=(0,o.c)(1);return r[0]===Symbol.for("react.memo_cache_sentinel")?(t=e("div",{className:"w-120",children:e(i,{className:"gap-4","data-testid":"attacks",items:w,itemRenderer:$,overflowRenderer:C})}),r[0]=t):t=r[0],t},meta:y},{name:"CoverPlacement",story:()=>{let t,r=(0,o.c)(1);return r[0]===Symbol.for("react.memo_cache_sentinel")?(t=e("div",{className:"w-120",children:e(i,{className:"gap-4","data-testid":"attacks",items:w,itemRenderer:O,overflowRenderer:M})}),r[0]=t):t=r[0],t},meta:y},{name:"PluralizedHeader",story:()=>{let t,r=(0,o.c)(1);return r[0]===Symbol.for("react.memo_cache_sentinel")?(t=e("div",{className:"w-120",children:e(i,{className:"gap-4",items:w,itemRenderer:k,overflowRenderer:D})}),r[0]=t):t=r[0],t},meta:y},{name:"CustomRenderer",story:()=>{let t,r=(0,o.c)(1);return r[0]===Symbol.for("react.memo_cache_sentinel")?(t=e("div",{className:"w-120",children:e(i,{className:"gap-4",items:w,itemRenderer:I,overflowRenderer:L})}),r[0]=t):t=r[0],t},meta:y}];function x({entry:e}){let{story:t,meta:r}=e,n={...r.args,...t.args},a="function"==typeof t||t.$$typeof?t:t.render||r.render||r.component,o=()=>j.default.createElement(a,n),l={args:n,globals:{theme:"light"},parameters:{...r.parameters,...t.parameters},viewMode:"story"};for(let e of[...r.decorators||[],...t.decorators||[]].reverse()){let t=o;o=()=>e(t,l)}return j.default.createElement("section",{"data-preview-story":e.name,className:"p-16"},j.default.createElement("h2",{className:"text-sm mb-12"},e.name),j.default.createElement(o))}window.WallarmPreview={mount(e){let t=window.ReactDOM.createRoot(e);return t.render(j.default.createElement(window.WallarmDS.Root,null,T.map((e,t)=>j.default.createElement(x,{key:t,entry:e})))),t}}})();