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

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

@@ -0,0 +1,12 @@
+var e={vD(e,t,r){let a,l;/**
+ * 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 n,o,i=Object.create,c=Object.defineProperty,s=Object.getOwnPropertyDescriptor,u=Object.getOwnPropertyNames,d=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty,f=(e,t,r,a)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let l of u(t))m.call(e,l)||l===r||c(e,l,{get:()=>t[l],enumerable:!(a=s(t,l))||a.enumerable});return e},p={},h={$dispatcherGuard:()=>C,$makeReadOnly:()=>F,$reset:()=>O,$structuralCheck:()=>I,c:()=>E,clearRenderCounterRegistry:()=>k,renderCounterRegistry:()=>M,useRenderCounter:()=>x};for(var y in h)c(p,y,{get:h[y],enumerable:!0});e.exports=f(c({},"__esModule",{value:!0}),p);var w=(l=null!=(a=r("C"))?i(d(a)):{},f(a&&a.__esModule?l:c(l,"default",{value:a,enumerable:!0}),a)),{useRef:_,useEffect:b,isValidElement:S}=w,g=null!=(n=w.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE)?n:w.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,v=Symbol.for("react.memo_cache_sentinel"),E="function"==typeof(null==(o=w.__COMPILER_RUNTIME)?void 0:o.c)?w.__COMPILER_RUNTIME.c:function(e){return w.useMemo(()=>{let t=Array(e);for(let r=0;r<e;r++)t[r]=v;return t[v]=!0,t},[])},R={};["readContext","useCallback","useContext","useEffect","useImperativeHandle","useInsertionEffect","useLayoutEffect","useMemo","useReducer","useRef","useState","useDebugValue","useDeferredValue","useTransition","useMutableSource","useSyncExternalStore","useId","unstable_isNewReconciler","getCacheSignal","getCacheForType","useCacheRefresh"].forEach(e=>{R[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 $=null;function D(e){return g.ReactCurrentDispatcher.current=e,g.ReactCurrentDispatcher.current}R.useMemoCache=e=>{if(null!=$)return $.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var N=[];function C(e){let t=g.ReactCurrentDispatcher.current;if(0===e){if(N.push(t),1===N.length&&($=t),t===R)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.");D(R)}else if(1===e){let e=N.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");0===N.length&&($=null),D(e)}else if(2===e)N.push(t),D($);else if(3===e){let e=N.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");D(e)}else throw Error("React Compiler internal error: unreachable block"+e)}function O(e){for(let t=0;t<e.length;t++)e[t]=v}function F(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var M=new Map;function k(){for(let e of M.values())e.forEach(e=>{e.count=0})}function x(e){let t=_(null);null!=t.current&&(t.current.count+=1),b(()=>{if(null==t.current){let r,a={count:0};null==(r=M.get(e))&&(r=new Set,M.set(e,r)),r.add(a),t.current=a}return()=>{var r;let a;null!==t.current&&(r=t.current,null!=(a=M.get(e))&&a.delete(r))}})}var T=new Set;function I(e,t,r,a,l,n){function o(e,t,o,i){let c=`${a}:${n} [${l}] ${r}${o} changed from ${e} to ${t} at depth ${i}`;T.has(c)||(T.add(c),console.error(c))}!function e(t,r,a,l){if(!(l>2)){if(t!==r)if(typeof t!=typeof r)o(`type ${typeof t}`,`type ${typeof r}`,a,l);else if("object"==typeof t){let n=Array.isArray(t),i=Array.isArray(r);if(null===t&&null!==r)o("null",`type ${typeof r}`,a,l);else if(null===r)o(`type ${typeof t}`,"null",a,l);else if(t instanceof Map)if(r instanceof Map)if(t.size!==r.size)o(`Map instance with size ${t.size}`,`Map instance with size ${r.size}`,a,l);else for(let[n,i]of t)r.has(n)?e(i,r.get(n),`${a}.get(${n})`,l+1):o(`Map instance with key ${n}`,`Map instance without key ${n}`,a,l);else o("Map instance","other value",a,l);else if(r instanceof Map)o("other value","Map instance",a,l);else if(t instanceof Set)if(r instanceof Set)if(t.size!==r.size)o(`Set instance with size ${t.size}`,`Set instance with size ${r.size}`,a,l);else for(let e of r)t.has(e)||o(`Set instance without element ${e}`,`Set instance with element ${e}`,a,l);else o("Set instance","other value",a,l);else if(r instanceof Set)o("other value","Set instance",a,l);else if(n||i)if(n!==i)o(`type ${n?"array":"object"}`,`type ${i?"array":"object"}`,a,l);else if(t.length!==r.length)o(`array with length ${t.length}`,`array with length ${r.length}`,a,l);else for(let n=0;n<t.length;n++)e(t[n],r[n],`${a}[${n}]`,l+1);else if(S(t)||S(r))S(t)!==S(r)?o(`type ${S(t)?"React element":"object"}`,`type ${S(r)?"React element":"object"}`,a,l):t.type!==r.type?o(`React element of type ${t.type}`,`React element of type ${r.type}`,a,l):e(t.props,r.props,`[props of ${a}]`,l+1);else{for(let e in r)e in t||o(`object without key ${e}`,`object with key ${e}`,a,l);for(let n in t)n in r?e(t[n],r[n],`${a}.${n}`,l+1):o(`object with key ${n}`,`object without key ${n}`,a,l)}}else{if("function"==typeof t)return;isNaN(t)||isNaN(r)?isNaN(t)!==isNaN(r)&&o(`${isNaN(t)?"NaN":"non-NaN value"}`,`${isNaN(r)?"NaN":"non-NaN value"}`,a,l):t!==r&&o(t,r,a,l)}}}(e,t,"",0)}},p(e,t,r){let a=new WeakMap,l=new WeakMap;function n(e,t,r){let n=t,o=r;if("object"==typeof n&&null!==n&&"$$typeof"in n&&n.$$typeof===Symbol.for("react.context")&&"Provider"in n&&(n=n.Provider),"function"==typeof n&&null!=o.ref&&!n.prototype?.isReactComponent){let t=n,r=a.get(e);r||(r=new WeakMap,a.set(e,r));let l=r.get(t);l||((l=e.forwardRef((e,r)=>t({...e,ref:r}))).displayName=t.displayName??t.name,r.set(t,l)),n=l}if("string"==typeof n&&"boolean"==typeof o.inert&&((o={...o}).inert?o.inert="":delete o.inert),"string"==typeof n)for(let[e,t]of[["fill-rule","fillRule"],["clip-rule","clipRule"]])e in o&&(o={...o,[t]:o[e]},delete o[e]);return"string"==typeof n&&null!=o.ref&&(n=function(e,t){let r=l.get(e);r||(r=new Map,l.set(e,r));let a=r.get(t);if(a)return a;let n=e.forwardRef((r,a)=>{let l=e.useRef(null);if(!l.current||l.current.original!==a){let e;l.current={original:a,callback:t=>{if(null==t&&e){let t=e;e=void 0,t();return}if("function"==typeof a){let r=a(t);e="function"==typeof r?r:void 0}else a&&(a.current=t)}}}return e.createElement(t,{...r,ref:l.current.callback})});return n.displayName=`CanvasHost(${t})`,r.set(t,n),n}(e,n)),{type:n,props:o}}function o(e){let t=(t,r,a)=>{let l=n(e,t,r??{});return e.createElement(l.type,void 0===a?l.props:{...l.props,key:a})};return{jsx:t,jsxs:(t,r,a)=>{let l=n(e,t,r??{}),{children:o,...i}=l.props;return e.createElement(l.type,void 0===a?i:{...i,key:a},...Array.isArray(o)?o:[o])},jsxDEV:t,Fragment:e.Fragment}}function i(e){return{...e,createElement:(t,r,...a)=>{let l=n(e,t,r??{});return e.createElement(l.type,l.props,...a)},cloneElement:(t,r,...a)=>{let l=e.cloneElement(t,r??void 0,...a),o=l.ref,i=n(e,l.type,{...l.props,ref:o});return i.type===l.type&&"string"!=typeof l.type?l:e.createElement(i.type,{...i.props,key:l.key})}}}r.d(t,{MA:()=>o,YJ:()=>i})},C(e,t,r){r.r(t);let a=(0,r("p").YJ)(window.React),{Children:l,Component:n,Fragment:o,Profiler:i,PureComponent:c,StrictMode:s,Suspense:u,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:d,act:m,cloneElement:f,createContext:p,createElement:h,createFactory:y,createRef:w,forwardRef:_,isValidElement:b,lazy:S,memo:g,startTransition:v,unstable_act:E,useCallback:R,useContext:$,useDebugValue:D,useDeferredValue:N,useEffect:C,useId:O,useImperativeHandle:F,useInsertionEffect:M,useLayoutEffect:k,useMemo:x,useReducer:T,useRef:I,useState:A,useSyncExternalStore:W,useTransition:U,version:j,use:z}=a;r.d(t,{},{Children:l,Component:n,Fragment:o,Profiler:i,PureComponent:c,StrictMode:s,Suspense:u,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:d,act:m,cloneElement:f,createContext:p,createElement:h,createFactory:y,createRef:w,default:a,forwardRef:_,isValidElement:b,lazy:S,memo:g,startTransition:v,unstable_act:E,use:z,useCallback:R,useContext:$,useDebugValue:D,useDeferredValue:N,useEffect:C,useId:O,useImperativeHandle:F,useInsertionEffect:M,useLayoutEffect:k,useMemo:x,useReducer:T,useRef:I,useState:A,useSyncExternalStore:W,useTransition:U,version:j})}},t={};function r(a){var l=t[a];if(void 0!==l)return l.exports;var n=t[a]={exports:{}};return e[a](n,n.exports,r),n.exports}r.d=(e,t,a)=>{var l=(t,a)=>{for(var l in t)r.o(t,l)&&!r.o(e,l)&&Object.defineProperty(e,l,{enumerable:!0,[a]:t[l]})};l(t,"get"),l(a,"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:a,Fragment:l}=(0,r("p").MA)(window.React);var n=r("vD"),o=r("C");let i=["B","KB","MB","GB","TB"],c=e=>{let t=e,r=0;for(;t>=1024&&r<i.length-1;)t/=1024,r+=1;let a=0===r?t:Math.round(10*t)/10;return a>=1024&&r<i.length-1&&(a=Math.round(a/1024*10)/10,r+=1),`${a} ${i[r]}`},s=window.WallarmDS.Icons.Download,u=window.WallarmDS.Button,d=window.WallarmDS.Field,m=window.WallarmDS.FieldDescription,f=window.WallarmDS.FieldError,p=window.WallarmDS.FieldIndicator,h=window.WallarmDS.FieldLabel,y=window.WallarmDS.FileUpload,w=window.WallarmDS.FileUploadDropzone,_=window.WallarmDS.FileUploadError,b=window.WallarmDS.FileUploadItem,S=window.WallarmDS.FileUploadItemAction,g=window.WallarmDS.FileUploadItemDeleteTrigger,v=window.WallarmDS.FileUploadItemGroup,E=window.WallarmDS.FileUploadItemReplaceTrigger,R=window.WallarmDS.FileUploadTrigger,$=(e,t=49152)=>new File([new Uint8Array(t)],e),D=()=>{let t,r=(0,n.c)(1);return r[0]===Symbol.for("react.memo_cache_sentinel")?(t=e(v,{children:C}),r[0]=t):t=r[0],t},N={title:"Inputs/FileUpload",component:y,parameters:{layout:"centered",docs:{description:{component:'Attaches files to a form and checks their type, size and count before accepting them — the drop Area when attaching is the main task on the screen, the "Select file" button when space is tight. Picking never uploads: files travel with the form when it is saved, and the product marks a row `loading` while it sends one. To pick a photo by clicking an avatar, see Data Display/Avatar → Click To Upload.'}}},args:{maxFiles:1,disabled:!1,readOnly:!1,error:!1},argTypes:{value:{control:!1},defaultValue:{control:!1},onValueChange:{control:!1},onFileReject:{control:!1},validate:{control:!1},ref:{control:!1},maxFiles:{control:"number"},maxFileSize:{control:"number"},accept:{control:"text"}},decorators:[t=>e("div",{style:{width:360},children:e(t,{})})]};function C(r){return t(b,{file:r,children:[e(E,{}),e(g,{})]})}function O(r){return t(b,{file:r,description:`${c(r.size)} \xb7 uploads when you save`,children:[e(E,{}),e(g,{})]})}function F(r){return t(b,{file:r,children:[e(E,{}),e(g,{})]})}function M(r){return t(b,{file:r,children:[e(E,{}),e(S,{"aria-label":`Download ${r.name}`,children:e(s,{})}),e(g,{})]})}let k=[{name:"Basic",story:r=>{let a,l,o,i,c=(0,n.c)(5);return c[0]===Symbol.for("react.memo_cache_sentinel")?(a=e(w,{"data-analytics-id":"FILE_UPLOAD_DROPZONE"}),l=e(_,{}),o=e(D,{}),c[0]=a,c[1]=l,c[2]=o):(a=c[0],l=c[1],o=c[2]),c[3]!==r?(i=t(y,{"data-testid":"file-upload",...r,children:[a,l,o]}),c[3]=r,c[4]=i):i=c[4],i},meta:N},{name:"ButtonTrigger",story:r=>{let a,l,o,i,c=(0,n.c)(5);return c[0]===Symbol.for("react.memo_cache_sentinel")?(a=e(R,{}),l=e(_,{}),o=e(D,{}),c[0]=a,c[1]=l,c[2]=o):(a=c[0],l=c[1],o=c[2]),c[3]!==r?(i=t(y,{"data-testid":"file-upload",...r,children:[a,l,o]}),c[3]=r,c[4]=i):i=c[4],i},meta:N},{name:"InField",story:r=>{let a,l,o,i,c,s,u=(0,n.c)(7);return u[0]===Symbol.for("react.memo_cache_sentinel")?(a=t(h,{children:["WASM module",e(p,{})]}),l=e(m,{children:"Exports memory, spe_alloc, spe_free, spe_init, spe_on_phase · up to 32 MB"}),u[0]=a,u[1]=l):(a=u[0],l=u[1]),u[2]===Symbol.for("react.memo_cache_sentinel")?(o=e(w,{children:"Choose a .wasm module or drop it here"}),i=e(_,{}),c=e(D,{}),u[2]=o,u[3]=i,u[4]=c):(o=u[2],i=u[3],c=u[4]),u[5]!==r?(s=t(d,{required:!0,"data-testid":"field",children:[a,l,t(y,{"data-testid":"file-upload",accept:".wasm",maxFileSize:0x2000000,...r,children:[o,i,c]})]}),u[5]=r,u[6]=s):s=u[6],s},meta:N},{name:"Multiple",story:r=>{let a,l,o,i,c,s=(0,n.c)(6);return s[0]===Symbol.for("react.memo_cache_sentinel")?(a=[$("rules.lua"),$("headers.lua")],l=e(w,{}),o=e(_,{}),i=e(D,{}),s[0]=a,s[1]=l,s[2]=o,s[3]=i):(a=s[0],l=s[1],o=s[2],i=s[3]),s[4]!==r?(c=t(y,{"data-testid":"file-upload",...r,maxFiles:5,defaultValue:a,children:[l,o,i]}),s[4]=r,s[5]=c):c=s[5],c},meta:N},{name:"SingleFileChosen",story:r=>{let a,l,o,i,c,s=(0,n.c)(6);return s[0]===Symbol.for("react.memo_cache_sentinel")?(a=[$("policy.wasm")],l=e(w,{}),o=e(_,{}),i=e(D,{}),s[0]=a,s[1]=l,s[2]=o,s[3]=i):(a=s[0],l=s[1],o=s[2],i=s[3]),s[4]!==r?(c=t(y,{"data-testid":"file-upload",...r,defaultValue:a,children:[l,o,i]}),s[4]=r,s[5]=c):c=s[5],c},meta:N},{name:"WithDescription",story:r=>{let a,l,o,i,c=(0,n.c)(5);return c[0]===Symbol.for("react.memo_cache_sentinel")?(a=[$("policy.wasm")],l=e(w,{}),o=e(v,{children:O}),c[0]=a,c[1]=l,c[2]=o):(a=c[0],l=c[1],o=c[2]),c[3]!==r?(i=t(y,{"data-testid":"file-upload",...r,defaultValue:a,children:[l,o]}),c[3]=r,c[4]=i):i=c[4],i},meta:N},{name:"Uploading",story:r=>{let a,l,o,i,c,s,u=(0,n.c)(7);return u[0]===Symbol.for("react.memo_cache_sentinel")?(a=[$("rules.lua")],l=e(w,{}),o=e(v,{children:F}),u[0]=a,u[1]=l,u[2]=o):(a=u[0],l=u[1],o=u[2]),u[3]===Symbol.for("react.memo_cache_sentinel")?(i={name:"headers.lua"},u[3]=i):i=u[3],u[4]===Symbol.for("react.memo_cache_sentinel")?(c=e(v,{children:e(b,{file:i,loading:!0,children:e(g,{})})}),u[4]=c):c=u[4],u[5]!==r?(s=t(y,{"data-testid":"file-upload",...r,maxFiles:5,defaultValue:a,children:[l,o,c]}),u[5]=r,u[6]=s):s=u[6],s},meta:N},{name:"Validation",story:r=>{let a,l,o,i,c=(0,n.c)(5);return c[0]===Symbol.for("react.memo_cache_sentinel")?(a=e(w,{}),l=e(_,{}),o=e(D,{}),c[0]=a,c[1]=l,c[2]=o):(a=c[0],l=c[1],o=c[2]),c[3]!==r?(i=t(y,{"data-testid":"file-upload",...r,accept:".so,.dylib",maxFileSize:32768,children:[a,l,o]}),c[3]=r,c[4]=i):i=c[4],i},meta:N},{name:"Disabled",story:r=>{let a,l,o,i,c,s,u=(0,n.c)(10);return u[0]===Symbol.for("react.memo_cache_sentinel")?(a=e(w,{}),u[0]=a):a=u[0],u[1]!==r?(l=e(y,{"data-testid":"file-upload",...r,disabled:!0,children:a}),u[1]=r,u[2]=l):l=u[2],u[3]===Symbol.for("react.memo_cache_sentinel")?(o=[$("policy.wasm")],i=e(D,{}),u[3]=o,u[4]=i):(o=u[3],i=u[4]),u[5]!==r?(c=e(y,{...r,disabled:!0,defaultValue:o,children:i}),u[5]=r,u[6]=c):c=u[6],u[7]!==l||u[8]!==c?(s=t("div",{className:"flex flex-col gap-16",children:[l,c]}),u[7]=l,u[8]=c,u[9]=s):s=u[9],s},meta:N},{name:"ReadOnly",story:r=>{let a,l,o,i,c=(0,n.c)(5);return c[0]===Symbol.for("react.memo_cache_sentinel")?(a=[$("policy.wasm")],l=e(w,{}),o=e(v,{children:M}),c[0]=a,c[1]=l,c[2]=o):(a=c[0],l=c[1],o=c[2]),c[3]!==r?(i=t(y,{"data-testid":"file-upload",...r,readOnly:!0,defaultValue:a,children:[l,o]}),c[3]=r,c[4]=i):i=c[4],i},meta:N},{name:"StoredFile",story:()=>{let r,a,l=(0,n.c)(2);return l[0]===Symbol.for("react.memo_cache_sentinel")?(r={name:"policy.wasm",size:49152},l[0]=r):r=l[0],l[1]===Symbol.for("react.memo_cache_sentinel")?(a=e(v,{"data-testid":"stored",children:t(b,{file:r,description:"48 KB · attached",children:[e(S,{"aria-label":"Download policy.wasm",children:e(s,{})}),e(g,{"aria-label":"Detach artifact"})]})}),l[1]=a):a=l[1],a},meta:N},{name:"LongFileName",story:t=>{let r,a,l,o=(0,n.c)(4);return o[0]===Symbol.for("react.memo_cache_sentinel")?(r=[$("flow-policy-artifact-for-the-production-edge-cluster-eu-central-1.wasm")],a=e(D,{}),o[0]=r,o[1]=a):(r=o[0],a=o[1]),o[2]!==t?(l=e(y,{"data-testid":"file-upload",...t,defaultValue:r,children:a}),o[2]=t,o[3]=l):l=o[3],l},meta:N},{name:"FormSubmission",story:r=>{let a,l,i,s,m,w,_,b,S,g,v,E=(0,n.c)(19),[$,N]=(0,o.useState)("");E[0]===Symbol.for("react.memo_cache_sentinel")?(a=e=>{e.preventDefault();let t=new FormData(e.currentTarget).get("artifact");N(t instanceof File&&t.name?`${t.name} (${c(t.size)})`:"nothing")},E[0]=a):a=E[0];let C=a,O="nothing"===$;return E[1]===Symbol.for("react.memo_cache_sentinel")?(l=t(h,{children:["Artifact",e(p,{})]}),E[1]=l):l=E[1],E[2]===Symbol.for("react.memo_cache_sentinel")?(i=()=>N(""),s=e(R,{}),m=e(D,{}),E[2]=i,E[3]=s,E[4]=m):(i=E[2],s=E[3],m=E[4]),E[5]!==r?(w=t(y,{"data-testid":"file-upload",name:"artifact",...r,onValueChange:i,children:[s,m]}),E[5]=r,E[6]=w):w=E[6],E[7]!==$?(_="nothing"===$?e(f,{children:"Attach a file"}):null,E[7]=$,E[8]=_):_=E[8],E[9]!==O||E[10]!==w||E[11]!==_?(b=t(d,{required:!0,invalid:O,children:[l,w,_]}),E[9]=O,E[10]=w,E[11]=_,E[12]=b):b=E[12],E[13]===Symbol.for("react.memo_cache_sentinel")?(S=e(u,{type:"submit",variant:"outline",color:"neutral","data-testid":"submit",children:"Save"}),E[13]=S):S=E[13],E[14]!==$?(g=$&&"nothing"!==$?t("p",{className:"sb-annotation","data-testid":"submitted",children:["Submitted: ",$]}):null,E[14]=$,E[15]=g):g=E[15],E[16]!==g||E[17]!==b?(v=t("form",{onSubmit:C,noValidate:!0,className:"flex flex-col gap-12",children:[b,S,g]}),E[16]=g,E[17]=b,E[18]=v):v=E[18],v},meta:N}];function x({entry:e}){let{story:t,meta:r}=e,a={...r.args,...t.args},l="function"==typeof t||t.$$typeof?t:t.render||r.render||r.component,n=()=>o.default.createElement(l,a),i={args:a,globals:{theme:"light"},parameters:{...r.parameters,...t.parameters},viewMode:"story"};for(let e of[...r.decorators||[],...t.decorators||[]].reverse()){let t=n;n=()=>e(t,i)}return o.default.createElement("section",{"data-preview-story":e.name,className:"p-16"},o.default.createElement("h2",{className:"text-sm mb-12"},e.name),o.default.createElement(n))}window.WallarmPreview={mount(e){let t=window.ReactDOM.createRoot(e);return t.render(o.default.createElement(window.WallarmDS.Root,null,k.map((e,t)=>o.default.createElement(x,{key:t,entry:e})))),t}}})();

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

@@ -0,0 +1,348 @@
+A filter over a hierarchy — organization › deployment › application, region › zone. The same 36px pill as `FilterDropdown`; each level opens as its own panel beside the option that opened it, and an item at any depth can be picked. The trigger reads the path: «Scope ● a › ● b», the tooltip carries it whole. Items are the consumer’s own objects, read through accessors; a level can load when it is first opened (`loadChildren`), and `parentLabel` adds the option that picks the level’s parent — «Deployment level». The search finds items at every depth. Compose the panels with `FilterCascadeLevels` to add group labels and options set apart; with no children, `FilterCascadeContent` renders the levels by itself. Reach for `FilterDropdown` when the values are flat.
+
+## 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 |
+| --- | --- | --- | --- | --- |
+| `label` | `string` | yes | — | Attribute name: the trigger text, its aria-label, «Clear {label}», «Search {label}». |
+| `collection` | `FilterCascadeCollection<T>` | yes | — | From `createFilterCascadeCollection`. |
+| `value` | `string[] \| undefined` | no | — | Controlled path, top level first; `[]` = unset. |
+| `default-value` | `string[] \| undefined` | no | — |  |
+| `on-value-change` | `((details: FilterCascadeValueChangeDetails<T>) => void) \| undefined` | no | — |  |
+| `open` | `boolean \| undefined` | no | — |  |
+| `default-open` | `boolean \| undefined` | no | — |  |
+| `on-open-change` | `((open: boolean) => void) \| undefined` | no | — |  |
+| `load-children` | `((item: T, path: string[]) => Promise<T[]>) \| undefined` | no | — | Loads the next level of an item the collection marks with `hasChildren` — when the item is first highlighted, or when it is on the picked path. |
+| `parent-label` | `string \| ((item: T) => string) \| undefined` | no | — | Puts an option at the top of every next level that picks the item which opened it — «Deployment level». With it, a row that opens a level only opens it; without it, the row itself is picked. |
+| `search-in` | `"all" \| "top" \| undefined` | no | `all` | What the search matches: every loaded level, as one list with each match's path (`'all'`), or the top level only, its levels still opening beside it (`'top'`). |
+| `search-threshold` | `number \| undefined` | no | `8` | Top-level option count from which `FilterCascadeSearch` renders. |
+| `disabled` | `boolean \| undefined` | no | `false` |  |
+| `title` | `string \| undefined` | no | — |  |
+| `default-checked` | `boolean \| undefined` | no | — |  |
+| `auto-focus` | `boolean \| undefined` | no | — |  |
+| `id` | `string \| undefined` | no | — |  |
+| `tab-index` | `number \| undefined` | no | — |  |
+| `rel` | `string \| undefined` | no | — |  |
+| `data-testid` | `string \| undefined` | no | — |  |
+
+## Sub-components
+
+- `WallarmDS.FilterCascadeClear` — `FilterCascadeClearProps` in the declaration bundle.
+- `WallarmDS.FilterCascadeContent` — `FilterCascadeContentProps` in the declaration bundle.
+- `WallarmDS.FilterCascadeItem` — `FilterCascadeItemProps` in the declaration bundle.
+- `WallarmDS.FilterCascadeEmpty` — `FilterCascadeEmptyProps` in the declaration bundle.
+- `WallarmDS.FilterCascadeGroupLabel` — `FilterCascadeGroupLabelProps` in the declaration bundle.
+- `WallarmDS.FilterCascadeItems` — `FilterCascadeItemsProps` in the declaration bundle.
+- `WallarmDS.FilterCascadeLevel` — `FilterCascadeLevelProps` in the declaration bundle.
+- `WallarmDS.FilterCascadeLevels` — `FilterCascadeLevelsProps` in the declaration bundle.
+- `WallarmDS.FilterCascadeParentItem` — `FilterCascadeParentItemProps` in the declaration bundle.
+- `WallarmDS.FilterCascadeSearch` — `FilterCascadeSearchProps` in the declaration bundle.
+- `WallarmDS.FilterCascadeCheckboxItem` — `FilterCascadeCheckboxItemProps` in the declaration bundle.
+- `WallarmDS.FilterCascadeSection` — `FilterCascadeSectionProps` in the declaration bundle.
+- `WallarmDS.FilterCascadeTrigger` — `FilterCascadeTriggerProps` in the declaration bundle.
+- `WallarmDS.FilterCascadeItemDescription` — `FilterCascadeItemDescriptionProps` in the declaration bundle.
+- `WallarmDS.FilterCascadeItemIcon` — `FilterCascadeItemIconProps` in the declaration bundle.
+- `WallarmDS.FilterCascadeItemText` — `FilterCascadeItemTextProps` in the declaration bundle.
+
+## Stories
+
+### Default
+
+The minimal form: plain items, every level rendered by `FilterCascadeContent`.
+
+Source: FilterCascade/FilterCascade.stories.tsx#Default
+
+### ScopeFilter
+
+The Scope filter of Flow management: lazy applications, «Deployment level», search, toggle.
+
+Source: FilterCascade/FilterCascade.stories.tsx#ScopeFilter
+
+### Picked
+
+A picked application: the trigger reads the path; only the deployment segment truncates.
+
+Source: FilterCascade/FilterCascade.stories.tsx#Picked
+
+### ParentPicked
+
+The deployment itself, picked through «Deployment level».
+
+Source: FilterCascade/FilterCascade.stories.tsx#ParentPicked
+
+### LoadError
+
+A level that fails to load offers a retry.
+
+Source: FilterCascade/FilterCascade.stories.tsx#LoadError
+
+### Disabled
+
+Source: FilterCascade/FilterCascade.stories.tsx#Disabled
+
+## Story sources
+
+### FilterCascade/FilterCascade.stories.tsx
+
+```tsx
+import { useState } from 'react';
+import type { Meta, StoryFn } from 'storybook-react-rsbuild';
+import { FilterCascade } from './FilterCascade';
+import { FilterCascadeClear } from './FilterCascadeClear';
+import { FilterCascadeContent } from './FilterCascadeContent';
+import {
+  FilterCascadeGroupLabel,
+  FilterCascadeItems,
+  FilterCascadeLevels,
+  FilterCascadeParentItem,
+} from './FilterCascadeLevel';
+import { FilterCascadeSearch } from './FilterCascadeSearch';
+import { FilterCascadeCheckboxItem, FilterCascadeSection } from './FilterCascadeSection';
+import { FilterCascadeTrigger } from './FilterCascadeTrigger';
+import { createFilterCascadeCollection } from './lib';
+
+const DESCRIPTION = [
+  'A filter over a hierarchy — organization › deployment › application, region › zone. The same 36px pill as `FilterDropdown`; each level opens as its own panel beside the option that opened it, and an item at any depth can be picked. The trigger reads the path: «Scope ● a › ● b», the tooltip carries it whole.',
+  'Items are the consumer’s own objects, read through accessors; a level can load when it is first opened (`loadChildren`), and `parentLabel` adds the option that picks the level’s parent — «Deployment level». The search finds items at every depth.',
+  'Compose the panels with `FilterCascadeLevels` to add group labels and options set apart; with no children, `FilterCascadeContent` renders the levels by itself. Reach for `FilterDropdown` when the values are flat.',
+].join(' ');
+
+type Kind = 'organization' | 'deployment' | 'application';
+
+interface Scope {
+  kind: Kind;
+  uid: string;
+  name: string;
+  policies?: number;
+}
+
+/** The Flow management Scope marker: 6px dots, violet · sky · teal by level. */
+const DOT: Record<Kind, string> = {
+  organization: 'bg-badge-violet-strong',
+  deployment: 'bg-badge-sky-strong',
+  application: 'bg-badge-teal-strong',
+};
+const Dot = ({ kind }: { kind: Kind }) => (
+  <span aria-hidden className={`inline-block size-6 shrink-0 rounded-full ${DOT[kind]}`} />
+);
+
+const policies = (count?: number) =>
+  count === undefined
+    ? undefined
+    : count === 0
+      ? 'No policies'
+      : `${count} ${count === 1 ? 'policy' : 'policies'}`;
+
+const organizationOnly: Scope = { kind: 'organization', uid: 'org', name: 'Organization only' };
+
+const deploymentNames = [
+  'Production US',
+  'Production EU',
+  'Staging US',
+  'Staging EU',
+  'Sandbox',
+  'QA',
+  'Load test',
+  'Canary',
+];
+const deployments: Scope[] = deploymentNames.map((name, index) => ({
+  kind: 'deployment',
+  uid: name.toLowerCase().replace(/ /g, '-'),
+  name,
+  policies: index % 3 === 0 ? index + 2 : 0,
+}));
+
+const applicationsOf = (deployment: Scope): Scope[] =>
+  ['api', 'checkout', 'mobile-gateway'].map((name, index) => ({
+    kind: 'application',
+    uid: `${deployment.uid}-${name}`,
+    name,
+    policies: index === 0 ? 2 : 0,
+  }));
+
+/** The applications arrive a moment after a deployment is first opened. */
+const loadApplications = (deployment: Scope) =>
+  new Promise<Scope[]>(resolve => setTimeout(() => resolve(applicationsOf(deployment)), 400));
+
+const scopeAccessors = {
+  getValue: (scope: Scope) => scope.uid,
+  getLabel: (scope: Scope) => scope.name,
+  hasChildren: (scope: Scope) => scope.kind === 'deployment',
+  getIcon: (scope: Scope) => <Dot kind={scope.kind} />,
+  getDescription: (scope: Scope) => policies(scope.policies),
+};
+
+const scopes = createFilterCascadeCollection<Scope>(
+  [organizationOnly, ...deployments],
+  scopeAccessors,
+);
+
+/** Plain `{ value, label, children }` items need no accessors. */
+const regions = createFilterCascadeCollection([
+  {
+    value: 'eu',
+    label: 'Europe',
+    children: [
+      { value: 'fra', label: 'Frankfurt' },
+      { value: 'ams', label: 'Amsterdam' },
+    ],
+  },
+  {
+    value: 'us',
+    label: 'United States',
+    children: [
+      { value: 'iad', label: 'North Virginia' },
+      { value: 'sfo', label: 'San Francisco' },
+    ],
+  },
+  { value: 'sg', label: 'Singapore' },
+]);
+type Region = (typeof regions.items)[number];
+
+const meta = {
+  title: 'Inputs/FilterCascade',
+  component: FilterCascade,
+  parameters: {
+    layout: 'padded',
+    docs: { description: { component: DESCRIPTION } },
+  },
+  args: { label: 'Region', collection: regions },
+} satisfies Meta<typeof FilterCascade<Region>>;
+
+export default meta;
+
+/** The minimal form: plain items, every level rendered by `FilterCascadeContent`. */
+export const Default: StoryFn<typeof FilterCascade> = () => (
+  <FilterCascade label='Region' collection={regions} data-testid='filter-cascade'>
+    <FilterCascadeTrigger />
+    <FilterCascadeContent />
+  </FilterCascade>
+);
+
+/** The Flow management Scope menu, as in Figma. */
+const ScopeMenu = ({ withToggle = true }: { withToggle?: boolean }) => {
+  const [showOrganization, setShowOrganization] = useState(true);
+  return (
+    <FilterCascadeContent>
+      <FilterCascadeSearch placeholder='Search' />
+      <FilterCascadeLevels>
+        {level =>
+          level.depth === 0 ? (
+            <>
+              <FilterCascadeItems filter={item => item.node.value === organizationOnly.uid} />
+              <FilterCascadeGroupLabel>Deployments</FilterCascadeGroupLabel>
+              <FilterCascadeItems filter={item => item.node.value !== organizationOnly.uid} />
+            </>
+          ) : (
+            <>
+              <FilterCascadeParentItem />
+              <FilterCascadeGroupLabel>Applications</FilterCascadeGroupLabel>
+              <FilterCascadeItems />
+            </>
+          )
+        }
+      </FilterCascadeLevels>
+      {withToggle && (
+        <FilterCascadeSection>
+          <FilterCascadeCheckboxItem
+            icon={<Dot kind='organization' />}
+            checked={showOrganization}
+            onCheckedChange={setShowOrganization}
+          >
+            Show organization policies
+          </FilterCascadeCheckboxItem>
+        </FilterCascadeSection>
+      )}
+    </FilterCascadeContent>
+  );
+};
+
+/** The Scope filter of Flow management: lazy applications, «Deployment level», search, toggle. */
+export const ScopeFilter: StoryFn<typeof FilterCascade> = () => {
+  const [value, setValue] = useState<string[]>([]);
+  return (
+    <div className='flex flex-col gap-12'>
+      <FilterCascade
+        label='Scope'
+        collection={scopes}
+        loadChildren={loadApplications}
+        parentLabel='Deployment level'
+        value={value}
+        onValueChange={details => setValue(details.value)}
+        data-testid='filter-cascade-scope'
+      >
+        <FilterCascadeTrigger>
+          <FilterCascadeClear data-analytics-id='SCOPE_CLEAR' />
+        </FilterCascadeTrigger>
+        <ScopeMenu />
+      </FilterCascade>
+      <code className='text-xs text-text-secondary'>value: {JSON.stringify(value)}</code>
+    </div>
+  );
+};
+
+const longCollection = createFilterCascadeCollection<Scope>(
+  [{ kind: 'deployment', uid: 'eu1', name: 'production-eu-central-1-cluster' }],
+  scopeAccessors,
+);
+
+/** A picked application: the trigger reads the path; only the deployment segment truncates. */
+export const Picked: StoryFn<typeof FilterCascade> = () => (
+  <FilterCascade
+    label='Scope'
+    collection={longCollection}
+    loadChildren={async (): Promise<Scope[]> => [
+      { kind: 'application', uid: 'checkout', name: 'checkout-api' },
+    ]}
+    defaultValue={['eu1', 'checkout']}
+    data-testid='filter-cascade-picked'
+  >
+    <FilterCascadeTrigger />
+    <FilterCascadeContent />
+  </FilterCascade>
+);
+
+/** The deployment itself, picked through «Deployment level». */
+export const ParentPicked: StoryFn<typeof FilterCascade> = () => (
+  <FilterCascade
+    label='Scope'
+    collection={scopes}
+    loadChildren={loadApplications}
+    parentLabel='Deployment level'
+    defaultValue={['staging-us']}
+    data-testid='filter-cascade-parent'
+  >
+    <FilterCascadeTrigger />
+    <ScopeMenu withToggle={false} />
+  </FilterCascade>
+);
+
+/** A level that fails to load offers a retry. */
+export const LoadError: StoryFn<typeof FilterCascade> = () => (
+  <FilterCascade
+    label='Scope'
+    collection={scopes}
+    loadChildren={() => Promise.reject(new Error('Unavailable'))}
+    parentLabel='Deployment level'
+    data-testid='filter-cascade-error'
+  >
+    <FilterCascadeTrigger />
+    <ScopeMenu withToggle={false} />
+  </FilterCascade>
+);
+
+export const Disabled: StoryFn<typeof FilterCascade> = () => (
+  <FilterCascade
+    label='Region'
+    collection={regions}
+    defaultValue={['eu', 'fra']}
+    disabled
+    data-testid='filter-cascade-disabled'
+  >
+    <FilterCascadeTrigger />
+    <FilterCascadeContent />
+  </FilterCascade>
+);
+```

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

@@ -0,0 +1,2 @@
+<!-- @dsCard group="Inputs" 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/FilterCascade/stories.js

@@ -0,0 +1,12 @@
+var e={vD(e,t,a){let r,n;/**
+ * 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 l,o,i=Object.create,c=Object.defineProperty,s=Object.getOwnPropertyDescriptor,u=Object.getOwnPropertyNames,d=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty,f=(e,t,a,r)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let n of u(t))p.call(e,n)||n===a||c(e,n,{get:()=>t[n],enumerable:!(r=s(t,n))||r.enumerable});return e},m={},h={$dispatcherGuard:()=>N,$makeReadOnly:()=>O,$reset:()=>D,$structuralCheck:()=>P,c:()=>C,clearRenderCounterRegistry:()=>x,renderCounterRegistry:()=>M,useRenderCounter:()=>T};for(var y in h)c(m,y,{get:h[y],enumerable:!0});e.exports=f(c({},"__esModule",{value:!0}),m);var g=(n=null!=(r=a("C"))?i(d(r)):{},f(r&&r.__esModule?n:c(n,"default",{value:r,enumerable:!0}),r)),{useRef:b,useEffect:w,isValidElement:S}=g,v=null!=(l=g.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE)?l:g.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,_=Symbol.for("react.memo_cache_sentinel"),C="function"==typeof(null==(o=g.__COMPILER_RUNTIME)?void 0:o.c)?g.__COMPILER_RUNTIME.c:function(e){return g.useMemo(()=>{let t=Array(e);for(let a=0;a<e;a++)t[a]=_;return t[_]=!0,t},[])},E={};["readContext","useCallback","useContext","useEffect","useImperativeHandle","useInsertionEffect","useLayoutEffect","useMemo","useReducer","useRef","useState","useDebugValue","useDeferredValue","useTransition","useMutableSource","useSyncExternalStore","useId","unstable_isNewReconciler","getCacheSignal","getCacheForType","useCacheRefresh"].forEach(e=>{E[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 R=null;function $(e){return v.ReactCurrentDispatcher.current=e,v.ReactCurrentDispatcher.current}E.useMemoCache=e=>{if(null!=R)return R.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var k=[];function N(e){let t=v.ReactCurrentDispatcher.current;if(0===e){if(k.push(t),1===k.length&&(R=t),t===E)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.");$(E)}else if(1===e){let e=k.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");0===k.length&&(R=null),$(e)}else if(2===e)k.push(t),$(R);else if(3===e){let e=k.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 D(e){for(let t=0;t<e.length;t++)e[t]=_}function O(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var M=new Map;function x(){for(let e of M.values())e.forEach(e=>{e.count=0})}function T(e){let t=b(null);null!=t.current&&(t.current.count+=1),w(()=>{if(null==t.current){let a,r={count:0};null==(a=M.get(e))&&(a=new Set,M.set(e,a)),a.add(r),t.current=r}return()=>{var a;let r;null!==t.current&&(a=t.current,null!=(r=M.get(e))&&r.delete(a))}})}var F=new Set;function P(e,t,a,r,n,l){function o(e,t,o,i){let c=`${r}:${l} [${n}] ${a}${o} changed from ${e} to ${t} at depth ${i}`;F.has(c)||(F.add(c),console.error(c))}!function e(t,a,r,n){if(!(n>2)){if(t!==a)if(typeof t!=typeof a)o(`type ${typeof t}`,`type ${typeof a}`,r,n);else if("object"==typeof t){let l=Array.isArray(t),i=Array.isArray(a);if(null===t&&null!==a)o("null",`type ${typeof a}`,r,n);else if(null===a)o(`type ${typeof t}`,"null",r,n);else if(t instanceof Map)if(a instanceof Map)if(t.size!==a.size)o(`Map instance with size ${t.size}`,`Map instance with size ${a.size}`,r,n);else for(let[l,i]of t)a.has(l)?e(i,a.get(l),`${r}.get(${l})`,n+1):o(`Map instance with key ${l}`,`Map instance without key ${l}`,r,n);else o("Map instance","other value",r,n);else if(a instanceof Map)o("other value","Map instance",r,n);else if(t instanceof Set)if(a instanceof Set)if(t.size!==a.size)o(`Set instance with size ${t.size}`,`Set instance with size ${a.size}`,r,n);else for(let e of a)t.has(e)||o(`Set instance without element ${e}`,`Set instance with element ${e}`,r,n);else o("Set instance","other value",r,n);else if(a instanceof Set)o("other value","Set instance",r,n);else if(l||i)if(l!==i)o(`type ${l?"array":"object"}`,`type ${i?"array":"object"}`,r,n);else if(t.length!==a.length)o(`array with length ${t.length}`,`array with length ${a.length}`,r,n);else for(let l=0;l<t.length;l++)e(t[l],a[l],`${r}[${l}]`,n+1);else if(S(t)||S(a))S(t)!==S(a)?o(`type ${S(t)?"React element":"object"}`,`type ${S(a)?"React element":"object"}`,r,n):t.type!==a.type?o(`React element of type ${t.type}`,`React element of type ${a.type}`,r,n):e(t.props,a.props,`[props of ${r}]`,n+1);else{for(let e in a)e in t||o(`object without key ${e}`,`object with key ${e}`,r,n);for(let l in t)l in a?e(t[l],a[l],`${r}.${l}`,n+1):o(`object with key ${l}`,`object without key ${l}`,r,n)}}else{if("function"==typeof t)return;isNaN(t)||isNaN(a)?isNaN(t)!==isNaN(a)&&o(`${isNaN(t)?"NaN":"non-NaN value"}`,`${isNaN(a)?"NaN":"non-NaN value"}`,r,n):t!==a&&o(t,a,r,n)}}}(e,t,"",0)}},p(e,t,a){let r=new WeakMap,n=new WeakMap;function l(e,t,a){let l=t,o=a;if("object"==typeof l&&null!==l&&"$$typeof"in l&&l.$$typeof===Symbol.for("react.context")&&"Provider"in l&&(l=l.Provider),"function"==typeof l&&null!=o.ref&&!l.prototype?.isReactComponent){let t=l,a=r.get(e);a||(a=new WeakMap,r.set(e,a));let n=a.get(t);n||((n=e.forwardRef((e,a)=>t({...e,ref:a}))).displayName=t.displayName??t.name,a.set(t,n)),l=n}if("string"==typeof l&&"boolean"==typeof o.inert&&((o={...o}).inert?o.inert="":delete o.inert),"string"==typeof l)for(let[e,t]of[["fill-rule","fillRule"],["clip-rule","clipRule"]])e in o&&(o={...o,[t]:o[e]},delete o[e]);return"string"==typeof l&&null!=o.ref&&(l=function(e,t){let a=n.get(e);a||(a=new Map,n.set(e,a));let r=a.get(t);if(r)return r;let l=e.forwardRef((a,r)=>{let n=e.useRef(null);if(!n.current||n.current.original!==r){let e;n.current={original:r,callback:t=>{if(null==t&&e){let t=e;e=void 0,t();return}if("function"==typeof r){let a=r(t);e="function"==typeof a?a:void 0}else r&&(r.current=t)}}}return e.createElement(t,{...a,ref:n.current.callback})});return l.displayName=`CanvasHost(${t})`,a.set(t,l),l}(e,l)),{type:l,props:o}}function o(e){let t=(t,a,r)=>{let n=l(e,t,a??{});return e.createElement(n.type,void 0===r?n.props:{...n.props,key:r})};return{jsx:t,jsxs:(t,a,r)=>{let n=l(e,t,a??{}),{children:o,...i}=n.props;return e.createElement(n.type,void 0===r?i:{...i,key:r},...Array.isArray(o)?o:[o])},jsxDEV:t,Fragment:e.Fragment}}function i(e){return{...e,createElement:(t,a,...r)=>{let n=l(e,t,a??{});return e.createElement(n.type,n.props,...r)},cloneElement:(t,a,...r)=>{let n=e.cloneElement(t,a??void 0,...r),o=n.ref,i=l(e,n.type,{...n.props,ref:o});return i.type===n.type&&"string"!=typeof n.type?n:e.createElement(i.type,{...i.props,key:n.key})}}}a.d(t,{MA:()=>o,YJ:()=>i})},C(e,t,a){a.r(t);let r=(0,a("p").YJ)(window.React),{Children:n,Component:l,Fragment:o,Profiler:i,PureComponent:c,StrictMode:s,Suspense:u,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:d,act:p,cloneElement:f,createContext:m,createElement:h,createFactory:y,createRef:g,forwardRef:b,isValidElement:w,lazy:S,memo:v,startTransition:_,unstable_act:C,useCallback:E,useContext:R,useDebugValue:$,useDeferredValue:k,useEffect:N,useId:D,useImperativeHandle:O,useInsertionEffect:M,useLayoutEffect:x,useMemo:T,useReducer:F,useRef:P,useState:j,useSyncExternalStore:I,useTransition:L,version:A,use:z}=r;a.d(t,{},{Children:n,Component:l,Fragment:o,Profiler:i,PureComponent:c,StrictMode:s,Suspense:u,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:d,act:p,cloneElement:f,createContext:m,createElement:h,createFactory:y,createRef:g,default:r,forwardRef:b,isValidElement:w,lazy:S,memo:v,startTransition:_,unstable_act:C,use:z,useCallback:E,useContext:R,useDebugValue:$,useDeferredValue:k,useEffect:N,useId:D,useImperativeHandle:O,useInsertionEffect:M,useLayoutEffect:x,useMemo:T,useReducer:F,useRef:P,useState:j,useSyncExternalStore:I,useTransition:L,version:A})}},t={};function a(r){var n=t[r];if(void 0!==n)return n.exports;var l=t[r]={exports:{}};return e[r](l,l.exports,a),l.exports}a.d=(e,t,r)=>{var n=(t,r)=>{for(var n in t)a.o(t,n)&&!a.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,[r]:t[n]})};n(t,"get"),n(r,"value")},a.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),a.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:r,Fragment:n}=(0,a("p").MA)(window.React);var l=a("vD"),o=a("C");let i=window.WallarmDS.FilterCascade,c=window.WallarmDS.FilterCascadeClear,s=window.WallarmDS.FilterCascadeContent,u=window.WallarmDS.FilterCascadeGroupLabel,d=window.WallarmDS.FilterCascadeItems,p=window.WallarmDS.FilterCascadeLevels,f=window.WallarmDS.FilterCascadeParentItem,m=window.WallarmDS.FilterCascadeSearch,h=window.WallarmDS.FilterCascadeCheckboxItem,y=window.WallarmDS.FilterCascadeSection,g=window.WallarmDS.FilterCascadeTrigger,b=window.WallarmDS.createFilterCascadeCollection,w={organization:"bg-badge-violet-strong",deployment:"bg-badge-sky-strong",application:"bg-badge-teal-strong"},S=t=>{let a,r=(0,l.c)(2),{kind:n}=t,o=`inline-block size-6 shrink-0 rounded-full ${w[n]}`;return r[0]!==o?(a=e("span",{"aria-hidden":!0,className:o}),r[0]=o,r[1]=a):a=r[1],a},v={kind:"organization",uid:"org",name:"Organization only"},_=["Production US","Production EU","Staging US","Staging EU","Sandbox","QA","Load test","Canary"].map((e,t)=>({kind:"deployment",uid:e.toLowerCase().replace(/ /g,"-"),name:e,policies:t%3==0?t+2:0})),C=e=>new Promise(t=>setTimeout(()=>t(["api","checkout","mobile-gateway"].map((t,a)=>({kind:"application",uid:`${e.uid}-${t}`,name:t,policies:2*(0===a)}))),400)),E={getValue:e=>e.uid,getLabel:e=>e.name,hasChildren:e=>"deployment"===e.kind,getIcon:t=>e(S,{kind:t.kind}),getDescription:e=>{let t;return void 0===(t=e.policies)?void 0:0===t?"No policies":`${t} ${1===t?"policy":"policies"}`}},R=b([v,..._],E),$=b([{value:"eu",label:"Europe",children:[{value:"fra",label:"Frankfurt"},{value:"ams",label:"Amsterdam"}]},{value:"us",label:"United States",children:[{value:"iad",label:"North Virginia"},{value:"sfo",label:"San Francisco"}]},{value:"sg",label:"Singapore"}]),k={title:"Inputs/FilterCascade",component:i,parameters:{layout:"padded",docs:{description:{component:"A filter over a hierarchy — organization › deployment › application, region › zone. The same 36px pill as `FilterDropdown`; each level opens as its own panel beside the option that opened it, and an item at any depth can be picked. The trigger reads the path: «Scope ● a › ● b», the tooltip carries it whole. Items are the consumer’s own objects, read through accessors; a level can load when it is first opened (`loadChildren`), and `parentLabel` adds the option that picks the level’s parent — «Deployment level». The search finds items at every depth. Compose the panels with `FilterCascadeLevels` to add group labels and options set apart; with no children, `FilterCascadeContent` renders the levels by itself. Reach for `FilterDropdown` when the values are flat."}}},args:{label:"Region",collection:$}},N=a=>{let r,n,i,c,u=(0,l.c)(7),{withToggle:d}=a,f=void 0===d||d,[g,b]=(0,o.useState)(!0);return u[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(m,{placeholder:"Search"}),n=e(p,{children:x}),u[0]=r,u[1]=n):(r=u[0],n=u[1]),u[2]!==g||u[3]!==f?(i=f&&e(y,{children:e(h,{icon:e(S,{kind:"organization"}),checked:g,onCheckedChange:b,children:"Show organization policies"})}),u[2]=g,u[3]=f,u[4]=i):i=u[4],u[5]!==i?(c=t(s,{children:[r,n,i]}),u[5]=i,u[6]=c):c=u[6],c},D=b([{kind:"deployment",uid:"eu1",name:"production-eu-central-1-cluster"}],E);function O(e){return e.node.value===v.uid}function M(e){return e.node.value!==v.uid}function x(a){return 0===a.depth?t(n,{children:[e(d,{filter:O}),e(u,{children:"Deployments"}),e(d,{filter:M})]}):t(n,{children:[e(f,{}),e(u,{children:"Applications"}),e(d,{})]})}async function T(){return[{kind:"application",uid:"checkout",name:"checkout-api"}]}function F(){return Promise.reject(Error("Unavailable"))}let P=[{name:"Default",story:()=>{let a,r=(0,l.c)(1);return r[0]===Symbol.for("react.memo_cache_sentinel")?(a=t(i,{label:"Region",collection:$,"data-testid":"filter-cascade",children:[e(g,{}),e(s,{})]}),r[0]=a):a=r[0],a},meta:k},{name:"ScopeFilter",story:()=>{let a,r,n,s,u,d,p,f,m=(0,l.c)(13);m[0]===Symbol.for("react.memo_cache_sentinel")?(a=[],m[0]=a):a=m[0];let[h,y]=(0,o.useState)(a);return m[1]===Symbol.for("react.memo_cache_sentinel")?(r=e=>y(e.value),m[1]=r):r=m[1],m[2]===Symbol.for("react.memo_cache_sentinel")?(n=e(g,{children:e(c,{"data-analytics-id":"SCOPE_CLEAR"})}),s=e(N,{}),m[2]=n,m[3]=s):(n=m[2],s=m[3]),m[4]!==h?(u=t(i,{label:"Scope",collection:R,loadChildren:C,parentLabel:"Deployment level",value:h,onValueChange:r,"data-testid":"filter-cascade-scope",children:[n,s]}),m[4]=h,m[5]=u):u=m[5],m[6]!==h?(d=JSON.stringify(h),m[6]=h,m[7]=d):d=m[7],m[8]!==d?(p=t("code",{className:"text-xs text-text-secondary",children:["value: ",d]}),m[8]=d,m[9]=p):p=m[9],m[10]!==u||m[11]!==p?(f=t("div",{className:"flex flex-col gap-12",children:[u,p]}),m[10]=u,m[11]=p,m[12]=f):f=m[12],f},meta:k},{name:"Picked",story:()=>{let a,r,n=(0,l.c)(2);return n[0]===Symbol.for("react.memo_cache_sentinel")?(a=["eu1","checkout"],n[0]=a):a=n[0],n[1]===Symbol.for("react.memo_cache_sentinel")?(r=t(i,{label:"Scope",collection:D,loadChildren:T,defaultValue:a,"data-testid":"filter-cascade-picked",children:[e(g,{}),e(s,{})]}),n[1]=r):r=n[1],r},meta:k},{name:"ParentPicked",story:()=>{let a,r,n=(0,l.c)(2);return n[0]===Symbol.for("react.memo_cache_sentinel")?(a=["staging-us"],n[0]=a):a=n[0],n[1]===Symbol.for("react.memo_cache_sentinel")?(r=t(i,{label:"Scope",collection:R,loadChildren:C,parentLabel:"Deployment level",defaultValue:a,"data-testid":"filter-cascade-parent",children:[e(g,{}),e(N,{withToggle:!1})]}),n[1]=r):r=n[1],r},meta:k},{name:"LoadError",story:()=>{let a,r=(0,l.c)(1);return r[0]===Symbol.for("react.memo_cache_sentinel")?(a=t(i,{label:"Scope",collection:R,loadChildren:F,parentLabel:"Deployment level","data-testid":"filter-cascade-error",children:[e(g,{}),e(N,{withToggle:!1})]}),r[0]=a):a=r[0],a},meta:k},{name:"Disabled",story:()=>{let a,r,n=(0,l.c)(2);return n[0]===Symbol.for("react.memo_cache_sentinel")?(a=["eu","fra"],n[0]=a):a=n[0],n[1]===Symbol.for("react.memo_cache_sentinel")?(r=t(i,{label:"Region",collection:$,defaultValue:a,disabled:!0,"data-testid":"filter-cascade-disabled",children:[e(g,{}),e(s,{})]}),n[1]=r):r=n[1],r},meta:k}];function j({entry:e}){let{story:t,meta:a}=e,r={...a.args,...t.args},n="function"==typeof t||t.$$typeof?t:t.render||a.render||a.component,l=()=>o.default.createElement(n,r),i={args:r,globals:{theme:"light"},parameters:{...a.parameters,...t.parameters},viewMode:"story"};for(let e of[...a.decorators||[],...t.decorators||[]].reverse()){let t=l;l=()=>e(t,i)}return o.default.createElement("section",{"data-preview-story":e.name,className:"p-16"},o.default.createElement("h2",{className:"text-sm mb-12"},e.name),o.default.createElement(l))}window.WallarmPreview={mount(e){let t=window.ReactDOM.createRoot(e);return t.render(o.default.createElement(window.WallarmDS.Root,null,P.map((e,t)=>o.default.createElement(j,{key:t,entry:e})))),t}}})();