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

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

@@ -0,0 +1,542 @@
+A lightweight filter for a list or table toolbar: a 36px trigger that opens a menu and narrows the list by one attribute. Picks apply at once — there is no Apply step. Single mode is for exclusive values and starts with «All …», which is also the reset; multi mode ticks several values that are OR-ed and clears with the ✕. From eight options the menu gains a search, and in multi mode a "Selected" section on top. Reach for `Select` inside forms, and for `FilterInput` when the query combines several attributes and operators.
+
+## 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 |
+| --- | --- | --- | --- | --- |
+| `title` | `string \| undefined` | no | — |  |
+| `default-checked` | `boolean \| undefined` | no | — |  |
+| `auto-focus` | `boolean \| undefined` | no | — |  |
+| `id` | `string` | no | — | The unique identifier of the machine. |
+| `tab-index` | `number \| undefined` | no | — |  |
+| `rel` | `string \| undefined` | no | — |  |
+| `on-change` | `ChangeEventHandler<T, Element> \| undefined` | no | — |  |
+| `disabled` | `boolean \| undefined` | no | `false` | Whether the select is disabled |
+| `as-child` | `boolean \| undefined` | no | — | Use the provided child element as the default rendered element, combining their props and behavior. |
+| `data-testid` | `string \| undefined` | no | — |  |
+| `positioning` | `complex` | no | — | Override default floating positioning (merged with DS defaults). |
+| `ids` | `complex` | no | — | The ids of the elements in the select. Useful for composition. |
+| `loop-focus` | `boolean \| undefined` | no | — | Whether to loop the keyboard navigation through the options |
+| `close-on-select` | `boolean \| undefined` | no | — | Whether the select should close after an item is selected |
+| `open` | `boolean \| undefined` | no | — | Whether the select menu is open |
+| `default-open` | `boolean \| undefined` | no | — | Whether the select's open state is controlled by the user |
+| `composite` | `boolean \| undefined` | no | — | Whether the select is a composed with other composite widgets like tabs or combobox |
+| `on-pointer-down-outside` | `complex` | no | — | Function called when the pointer is pressed down outside the component |
+| `on-focus-outside` | `complex` | no | — | Function called when the focus is moved outside the component |
+| `on-interact-outside` | `complex` | no | — | Function called when an interaction happens outside the component |
+| `present` | `boolean \| undefined` | no | — | Whether the node is present (controlled by the user) |
+| `on-exit-complete` | `VoidFunction \| undefined` | no | — | Function called when the animation ends in the closed state |
+| `on-enter-complete` | `VoidFunction \| undefined` | no | — | Function called when the animation ends in the open state |
+| `immediate` | `boolean \| undefined` | no | — | Whether to synchronize the present change immediately or defer it to the next frame |
+| `auto-complete` | `string \| undefined` | no | — | The autocomplete attribute for the hidden select. Enables browser autofill (e.g. "address-level1" for state). |
+| `read-only` | `boolean \| undefined` | no | — | Whether the select is read-only |
+| `required` | `boolean \| undefined` | no | — | Whether the select is required |
+| `invalid` | `boolean \| undefined` | no | — | Whether the select is invalid |
+| `translations` | `complex` | no | — | Specifies the localized strings that identifies the accessibility elements and their states |
+| `scroll-to-index-fn` | `complex` | no | — | Function to scroll to a specific index |
+| `skip-animation-on-mount` | `boolean \| undefined` | no | — | Whether to allow the initial presence animation. |
+| `hide-mode` | `"display-none" \| "activity"` | no | — | How to hide content when mounted but not present. - `'display-none'`: HTML `hidden` attribute. Effects stay alive. - `'activity'`: React 19 `<Activity mode="hidden">`. Effects pause. Requires React 19+. |
+| `label` | `string` | yes | — | Attribute name: trigger text in multi mode, the trigger's aria-label, «Clear {label}». |
+| `all-label` | `string \| undefined` | no | `All` | Single mode: trigger text while unset and the default text of `FilterDropdownAllOption`. |
+| `collection` | `complex` | yes | — | Items to pick from. `groupBy` is supported. |
+| `multiple` | `boolean \| undefined` | no | `false` | Checkbox mode: several values, OR-ed, the menu stays open. |
+| `value` | `string[] \| undefined` | no | — | Controlled picked values; `[]` = unset. |
+| `default-value` | `string[] \| undefined` | no | — |  |
+| `on-value-change` | `complex` | no | — |  |
+| `on-open-change` | `complex` | no | — |  |
+| `search-threshold` | `number \| undefined` | no | `8` | Item count from which the search field and (multi) the "Selected" section appear. Counts the collection's own items only. |
+| `filter-fn` | `((itemString: string, item: T, query: string) => boolean) \| undefined` | no | — | Overrides the default case-insensitive match on the item label. |
+| `selected-on-top` | `boolean \| undefined` | no | `true` | Multi mode: pin the picked values under «Selected» on top of the list (from `searchThreshold` items, hidden while searching). Render `FilterDropdownSelected` for it. |
+
+## Sub-components
+
+- `WallarmDS.FilterDropdownAllOption` — `FilterDropdownAllOptionProps` in the declaration bundle.
+- `WallarmDS.FilterDropdownClear` — `FilterDropdownClearProps` in the declaration bundle.
+- `WallarmDS.FilterDropdownContent` — `FilterDropdownContentProps` in the declaration bundle.
+- `WallarmDS.FilterDropdownEmpty` — `FilterDropdownEmptyProps` in the declaration bundle.
+- `WallarmDS.FilterDropdownFooter` — `FilterDropdownFooterProps` in the declaration bundle.
+- `WallarmDS.FilterDropdownFooterClear` — `FilterDropdownFooterClearProps` in the declaration bundle.
+- `WallarmDS.FilterDropdownGroup` — `FilterDropdownGroupProps` in the declaration bundle.
+- `WallarmDS.FilterDropdownGroupLabel` — `FilterDropdownGroupLabelProps` in the declaration bundle.
+- `WallarmDS.FilterDropdownOption` — `FilterDropdownOptionProps` in the declaration bundle.
+- `WallarmDS.FilterDropdownSearch` — `FilterDropdownSearchProps` in the declaration bundle.
+- `WallarmDS.FilterDropdownSelected` — `FilterDropdownSelectedProps` in the declaration bundle.
+- `WallarmDS.FilterDropdownTrigger` — `FilterDropdownTriggerProps` in the declaration bundle.
+
+## Stories
+
+### Default
+
+Single mode: the trigger reads «All …» while unset and the picked value once set; picking closes
+the menu. Analytics ids go on the parts that render the real targets — here the trigger.
+
+Source: FilterDropdown/FilterDropdown.stories.tsx#Default
+
+### Multi
+
+Multi mode: checkboxes, OR-ed, the menu stays open. The trigger shows the name with the value or
+a count, and the ✕ (or Backspace on the trigger) clears. Pass your own `FilterDropdownClear` as
+the trigger's child to put an analytics id on the ✕.
+
+Source: FilterDropdown/FilterDropdown.stories.tsx#Multi
+
+### LabelForms
+
+Every form the trigger takes: dashed while unset, solid with a shadow once set.
+
+Source: FilterDropdown/FilterDropdown.stories.tsx#LabelForms
+
+### States
+
+Disabled keeps the value readable — the ✕ and the count stay visible, just inert.
+
+Source: FilterDropdown/FilterDropdown.stories.tsx#States
+
+### WithSearch
+
+From `searchThreshold` options (8 by default) the menu gains a search that takes focus on open,
+and multi mode repeats what was picked in a "Selected" section on top. It is a snapshot: rows
+stay put while you tick, and it hides while a query is active.
+
+Source: FilterDropdown/FilterDropdown.stories.tsx#WithSearch
+
+### Groups
+
+A `groupBy` collection renders one labelled group per entry of `useFilterDropdown().groups`.
+
+Source: FilterDropdown/FilterDropdown.stories.tsx#Groups
+
+### Hint
+
+`hint` puts secondary text, such as a count, at the right end of a row, before the check.
+
+Source: FilterDropdown/FilterDropdown.stories.tsx#Hint
+
+### LongLabels
+
+The trigger stops at 180px and ellipsises, with the full value on hover; the menu hugs its
+options up to 360px and wraps longer ones.
+
+Source: FilterDropdown/FilterDropdown.stories.tsx#LongLabels
+
+### FilterRow
+
+The toolbar it is made for: a search, scoped views, then one filter per attribute.
+
+Source: FilterDropdown/FilterDropdown.stories.tsx#FilterRow
+
+### Controlled
+
+Controlled with `value` / `onValueChange`. The handler only ever receives your own values —
+`[]` for unset — never the internal «All» or "Selected" ones.
+
+Source: FilterDropdown/FilterDropdown.stories.tsx#Controlled
+
+## Story sources
+
+### FilterDropdown/FilterDropdown.stories.tsx
+
+```tsx
+import { useState } from 'react';
+import { createListCollection } from '@ark-ui/react/collection';
+import type { Meta, StoryFn } from 'storybook-react-rsbuild';
+import { Button } from '../Button';
+import { SearchInput } from '../SearchInput';
+import { SegmentedTabs, SegmentedTabsList, SegmentedTabsTrigger } from '../SegmentedTabs';
+import { FilterDropdown } from './FilterDropdown';
+import { FilterDropdownAllOption } from './FilterDropdownAllOption';
+import { FilterDropdownClear } from './FilterDropdownClear';
+import { FilterDropdownContent } from './FilterDropdownContent';
+import { useFilterDropdown } from './FilterDropdownContext';
+import { FilterDropdownEmpty } from './FilterDropdownEmpty';
+import { FilterDropdownFooter } from './FilterDropdownFooter';
+import { FilterDropdownGroup } from './FilterDropdownGroup';
+import { FilterDropdownGroupLabel } from './FilterDropdownGroupLabel';
+import { FilterDropdownOption } from './FilterDropdownOption';
+import { FilterDropdownSearch } from './FilterDropdownSearch';
+import { FilterDropdownSelected } from './FilterDropdownSelected';
+import { FilterDropdownTrigger } from './FilterDropdownTrigger';
+
+const DESCRIPTION = [
+  'A lightweight filter for a list or table toolbar: a 36px trigger that opens a menu and narrows the list by one attribute. Picks apply at once — there is no Apply step.',
+  'Single mode is for exclusive values and starts with «All …», which is also the reset; multi mode ticks several values that are OR-ed and clears with the ✕. From eight options the menu gains a search, and in multi mode a "Selected" section on top.',
+  'Reach for `Select` inside forms, and for `FilterInput` when the query combines several attributes and operators.',
+].join(' ');
+
+interface Item {
+  value: string;
+  label: string;
+  count?: number;
+  category?: string;
+}
+
+const environments: Item[] = [
+  { value: 'production', label: 'Production' },
+  { value: 'pre-production', label: 'Pre-production' },
+  { value: 'staging', label: 'Staging' },
+  { value: 'development', label: 'Development' },
+];
+
+const types: Item[] = [
+  { value: 'lua', label: 'Lua', count: 12 },
+  { value: 'wasm', label: 'WASM', count: 4 },
+  { value: 'plugin', label: 'Plugin', count: 7 },
+];
+
+const letters: Item[] = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L'].map(
+  (letter, index) => ({
+    value: letter.toLowerCase(),
+    label: `Scope ${letter}`,
+    count: (index * 7) % 23,
+    category: index < 6 ? 'Group 1' : 'Group 2',
+  }),
+);
+
+const longLabels: Item[] = [
+  { value: 'eu', label: 'Europe — Frankfurt (eu-central-1) primary cluster' },
+  { value: 'us', label: 'United States — North Virginia (us-east-1) failover cluster' },
+  { value: 'ap', label: 'Asia Pacific — Singapore (ap-southeast-1)' },
+];
+
+/** The standard menu: every part in the order the spec renders them. */
+const Menu = ({ withHint = false }: { withHint?: boolean }) => {
+  const { groups } = useFilterDropdown<Item>();
+
+  return (
+    <FilterDropdownContent>
+      <FilterDropdownSearch />
+      <FilterDropdownAllOption />
+      <FilterDropdownSelected<Item>>
+        {item => (
+          <FilterDropdownOption item={item} hint={withHint ? item.count : undefined}>
+            {item.label}
+          </FilterDropdownOption>
+        )}
+      </FilterDropdownSelected>
+      {groups.map(([group, items]) => (
+        <FilterDropdownGroup key={group}>
+          {group && <FilterDropdownGroupLabel>{group}</FilterDropdownGroupLabel>}
+          {items.map(item => (
+            <FilterDropdownOption
+              key={item.value}
+              item={item}
+              hint={withHint ? item.count : undefined}
+            >
+              {item.label}
+            </FilterDropdownOption>
+          ))}
+        </FilterDropdownGroup>
+      ))}
+      <FilterDropdownEmpty />
+      <FilterDropdownFooter />
+    </FilterDropdownContent>
+  );
+};
+
+const meta = {
+  title: 'Inputs/FilterDropdown',
+  component: FilterDropdown,
+  subcomponents: {
+    FilterDropdownTrigger,
+    FilterDropdownClear,
+    FilterDropdownContent,
+    FilterDropdownSearch,
+    FilterDropdownAllOption,
+    FilterDropdownSelected,
+    FilterDropdownGroup,
+    FilterDropdownGroupLabel,
+    FilterDropdownOption,
+    FilterDropdownEmpty,
+    FilterDropdownFooter,
+  },
+  parameters: {
+    layout: 'centered',
+    docs: { description: { component: DESCRIPTION } },
+  },
+  argTypes: {
+    collection: { control: false },
+    value: { control: false },
+    defaultValue: { control: false },
+    onValueChange: { control: false },
+    filterFn: { control: false },
+    label: { control: 'text' },
+    allLabel: { control: 'text' },
+    multiple: { control: 'boolean' },
+    searchThreshold: { control: 'number' },
+  },
+} satisfies Meta<typeof FilterDropdown>;
+
+export default meta;
+
+/**
+ * Single mode: the trigger reads «All …» while unset and the picked value once set; picking closes
+ * the menu. Analytics ids go on the parts that render the real targets — here the trigger.
+ */
+export const Default: StoryFn<typeof FilterDropdown> = () => (
+  <FilterDropdown
+    label='Environment'
+    allLabel='All environments'
+    collection={createListCollection({ items: environments })}
+    data-testid='filter-dropdown'
+  >
+    <FilterDropdownTrigger data-analytics-id='ENV_FILTER' />
+    <Menu />
+  </FilterDropdown>
+);
+
+/**
+ * Multi mode: checkboxes, OR-ed, the menu stays open. The trigger shows the name with the value or
+ * a count, and the ✕ (or Backspace on the trigger) clears. Pass your own `FilterDropdownClear` as
+ * the trigger's child to put an analytics id on the ✕.
+ */
+export const Multi: StoryFn<typeof FilterDropdown> = () => (
+  <FilterDropdown
+    label='Type'
+    multiple
+    collection={createListCollection({ items: types })}
+    defaultValue={['lua']}
+    data-testid='filter-dropdown'
+  >
+    <FilterDropdownTrigger data-analytics-id='TYPE_FILTER'>
+      <FilterDropdownClear data-analytics-id='TYPE_FILTER_CLEAR' />
+    </FilterDropdownTrigger>
+    <Menu />
+  </FilterDropdown>
+);
+
+const LabelFormRow = ({
+  caption,
+  multiple = false,
+  value,
+  testId,
+}: {
+  caption: string;
+  multiple?: boolean;
+  value: string[];
+  testId: string;
+}) => (
+  <div className='flex items-center gap-16'>
+    <p className='sb-annotation w-160'>{caption}</p>
+    <FilterDropdown
+      label='Type'
+      allLabel='All types'
+      multiple={multiple}
+      collection={createListCollection({ items: types })}
+      defaultValue={value}
+      data-testid={testId}
+    >
+      <FilterDropdownTrigger />
+      <Menu />
+    </FilterDropdown>
+  </div>
+);
+
+/** Every form the trigger takes: dashed while unset, solid with a shadow once set. */
+export const LabelForms: StoryFn<typeof FilterDropdown> = () => (
+  <div className='flex flex-col gap-12'>
+    <LabelFormRow caption='single, unset' value={[]} testId='single-unset' />
+    <LabelFormRow caption='single, set' value={['wasm']} testId='single-set' />
+    <LabelFormRow caption='multi, unset' multiple value={[]} testId='multi-unset' />
+    <LabelFormRow caption='multi, one value' multiple value={['lua']} testId='multi-one' />
+    <LabelFormRow
+      caption='multi, several values'
+      multiple
+      value={['lua', 'wasm', 'plugin']}
+      testId='multi-many'
+    />
+  </div>
+);
+
+/** Disabled keeps the value readable — the ✕ and the count stay visible, just inert. */
+export const States: StoryFn<typeof FilterDropdown> = () => (
+  <div className='flex flex-col gap-12'>
+    {(
+      [
+        ['disabled, unset', false, []],
+        ['disabled, single set', false, ['wasm']],
+        ['disabled, multi set', true, ['lua', 'wasm']],
+      ] as const
+    ).map(([caption, multiple, value]) => (
+      <div key={caption} className='flex items-center gap-16'>
+        <p className='sb-annotation w-160'>{caption}</p>
+        <FilterDropdown
+          label='Type'
+          allLabel='All types'
+          multiple={multiple}
+          disabled
+          collection={createListCollection({ items: types })}
+          defaultValue={[...value]}
+          data-testid={`disabled-${caption.replace(/\W+/g, '-')}`}
+        >
+          <FilterDropdownTrigger />
+          <Menu />
+        </FilterDropdown>
+      </div>
+    ))}
+  </div>
+);
+
+/**
+ * From `searchThreshold` options (8 by default) the menu gains a search that takes focus on open,
+ * and multi mode repeats what was picked in a "Selected" section on top. It is a snapshot: rows
+ * stay put while you tick, and it hides while a query is active.
+ */
+export const WithSearch: StoryFn<typeof FilterDropdown> = () => (
+  <div className='flex gap-8'>
+    <FilterDropdown
+      label='Scope'
+      multiple
+      collection={createListCollection({ items: letters })}
+      defaultValue={['f', 'c']}
+      data-testid='filter-dropdown-multi'
+    >
+      <FilterDropdownTrigger />
+      <Menu />
+    </FilterDropdown>
+    <FilterDropdown
+      label='Scope'
+      allLabel='All scopes'
+      collection={createListCollection({ items: letters })}
+      data-testid='filter-dropdown-single'
+    >
+      <FilterDropdownTrigger />
+      <Menu />
+    </FilterDropdown>
+  </div>
+);
+
+/** A `groupBy` collection renders one labelled group per entry of `useFilterDropdown().groups`. */
+export const Groups: StoryFn<typeof FilterDropdown> = () => (
+  <FilterDropdown
+    label='Scope'
+    multiple
+    collection={createListCollection({ items: letters, groupBy: item => item.category ?? '' })}
+    data-testid='filter-dropdown'
+  >
+    <FilterDropdownTrigger />
+    <Menu />
+  </FilterDropdown>
+);
+
+/** `hint` puts secondary text, such as a count, at the right end of a row, before the check. */
+export const Hint: StoryFn<typeof FilterDropdown> = () => (
+  <FilterDropdown
+    label='Type'
+    multiple
+    collection={createListCollection({ items: types })}
+    data-testid='filter-dropdown'
+  >
+    <FilterDropdownTrigger />
+    <Menu withHint />
+  </FilterDropdown>
+);
+
+/**
+ * The trigger stops at 180px and ellipsises, with the full value on hover; the menu hugs its
+ * options up to 360px and wraps longer ones.
+ */
+export const LongLabels: StoryFn<typeof FilterDropdown> = () => (
+  <div className='flex gap-8'>
+    <FilterDropdown
+      label='Region'
+      allLabel='All regions'
+      collection={createListCollection({ items: longLabels })}
+      defaultValue={['us']}
+      data-testid='filter-dropdown-single'
+    >
+      <FilterDropdownTrigger />
+      <Menu />
+    </FilterDropdown>
+    <FilterDropdown
+      label='Deployment region'
+      multiple
+      collection={createListCollection({ items: longLabels })}
+      defaultValue={['eu']}
+      data-testid='filter-dropdown-multi'
+    >
+      <FilterDropdownTrigger />
+      <Menu />
+    </FilterDropdown>
+  </div>
+);
+
+/** The toolbar it is made for: a search, scoped views, then one filter per attribute. */
+export const FilterRow: StoryFn<typeof FilterDropdown> = () => {
+  const [query, setQuery] = useState('');
+
+  return (
+    <div className='flex flex-wrap items-center gap-8'>
+      <div className='w-240'>
+        <SearchInput value={query} onChange={setQuery} placeholder='Search rules' />
+      </div>
+      <SegmentedTabs defaultValue='all'>
+        <SegmentedTabsList>
+          <SegmentedTabsTrigger value='all'>All</SegmentedTabsTrigger>
+          <SegmentedTabsTrigger value='active'>Active</SegmentedTabsTrigger>
+          <SegmentedTabsTrigger value='blocked'>Blocked</SegmentedTabsTrigger>
+        </SegmentedTabsList>
+      </SegmentedTabs>
+      <FilterDropdown
+        label='Environment'
+        allLabel='All environments'
+        collection={createListCollection({ items: environments })}
+        data-testid='filter-environment'
+      >
+        <FilterDropdownTrigger data-analytics-id='RULES_ENV_FILTER' />
+        <Menu />
+      </FilterDropdown>
+      <FilterDropdown
+        label='Type'
+        multiple
+        collection={createListCollection({ items: types })}
+        data-testid='filter-type'
+      >
+        <FilterDropdownTrigger data-analytics-id='RULES_TYPE_FILTER' />
+        <Menu withHint />
+      </FilterDropdown>
+      <FilterDropdown
+        label='Scope'
+        multiple
+        collection={createListCollection({ items: letters })}
+        data-testid='filter-scope'
+      >
+        <FilterDropdownTrigger data-analytics-id='RULES_SCOPE_FILTER' />
+        <Menu />
+      </FilterDropdown>
+    </div>
+  );
+};
+
+/**
+ * Controlled with `value` / `onValueChange`. The handler only ever receives your own values —
+ * `[]` for unset — never the internal «All» or "Selected" ones.
+ */
+export const Controlled: StoryFn<typeof FilterDropdown> = () => {
+  const [value, setValue] = useState<string[]>(['pre-production']);
+  const collection = createListCollection({ items: environments });
+
+  return (
+    <div className='flex flex-col items-start gap-12'>
+      <FilterDropdown
+        label='Environment'
+        allLabel='All environments'
+        collection={collection}
+        value={value}
+        onValueChange={details => setValue(details.value)}
+        data-testid='filter-dropdown'
+      >
+        <FilterDropdownTrigger />
+        <Menu />
+      </FilterDropdown>
+      <p className='sb-annotation' data-testid='filter-dropdown-value'>
+        value: {JSON.stringify(value)}
+      </p>
+      <Button variant='outline' color='neutral' size='small' onClick={() => setValue([])}>
+        Reset
+      </Button>
+    </div>
+  );
+};
+```

package/dist/project/components/FilterDropdown/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/FilterDropdown/stories.js

@@ -0,0 +1,12 @@
+var e={vD(e,t,l){let i,r;/**
+ * 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,a,o=Object.create,s=Object.defineProperty,c=Object.getOwnPropertyDescriptor,u=Object.getOwnPropertyNames,m=Object.getPrototypeOf,h=Object.prototype.hasOwnProperty,f=(e,t,l,i)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let r of u(t))h.call(e,r)||r===l||s(e,r,{get:()=>t[r],enumerable:!(i=c(t,r))||i.enumerable});return e},d={},p={$dispatcherGuard:()=>O,$makeReadOnly:()=>$,$reset:()=>N,$structuralCheck:()=>A,c:()=>E,clearRenderCounterRegistry:()=>T,renderCounterRegistry:()=>C,useRenderCounter:()=>V};for(var y in p)s(d,y,{get:p[y],enumerable:!0});e.exports=f(s({},"__esModule",{value:!0}),d);var g=(r=null!=(i=l("C"))?o(m(i)):{},f(i&&i.__esModule?r:s(r,"default",{value:i,enumerable:!0}),i)),{useRef:b,useEffect:w,isValidElement:S}=g,_=null!=(n=g.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE)?n:g.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,v=Symbol.for("react.memo_cache_sentinel"),E="function"==typeof(null==(a=g.__COMPILER_RUNTIME)?void 0:a.c)?g.__COMPILER_RUNTIME.c:function(e){return g.useMemo(()=>{let t=Array(e);for(let l=0;l<e;l++)t[l]=v;return t[v]=!0,t},[])},I={};["readContext","useCallback","useContext","useEffect","useImperativeHandle","useInsertionEffect","useLayoutEffect","useMemo","useReducer","useRef","useState","useDebugValue","useDeferredValue","useTransition","useMutableSource","useSyncExternalStore","useId","unstable_isNewReconciler","getCacheSignal","getCacheForType","useCacheRefresh"].forEach(e=>{I[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 x(e){return _.ReactCurrentDispatcher.current=e,_.ReactCurrentDispatcher.current}I.useMemoCache=e=>{if(null!=R)return R.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var D=[];function O(e){let t=_.ReactCurrentDispatcher.current;if(0===e){if(D.push(t),1===D.length&&(R=t),t===I)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.");x(I)}else if(1===e){let e=D.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");0===D.length&&(R=null),x(e)}else if(2===e)D.push(t),x(R);else if(3===e){let e=D.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");x(e)}else throw Error("React Compiler internal error: unreachable block"+e)}function N(e){for(let t=0;t<e.length;t++)e[t]=v}function $(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var C=new Map;function T(){for(let e of C.values())e.forEach(e=>{e.count=0})}function V(e){let t=b(null);null!=t.current&&(t.current.count+=1),w(()=>{if(null==t.current){let l,i={count:0};null==(l=C.get(e))&&(l=new Set,C.set(e,l)),l.add(i),t.current=i}return()=>{var l;let i;null!==t.current&&(l=t.current,null!=(i=C.get(e))&&i.delete(l))}})}var M=new Set;function A(e,t,l,i,r,n){function a(e,t,a,o){let s=`${i}:${n} [${r}] ${l}${a} changed from ${e} to ${t} at depth ${o}`;M.has(s)||(M.add(s),console.error(s))}!function e(t,l,i,r){if(!(r>2)){if(t!==l)if(typeof t!=typeof l)a(`type ${typeof t}`,`type ${typeof l}`,i,r);else if("object"==typeof t){let n=Array.isArray(t),o=Array.isArray(l);if(null===t&&null!==l)a("null",`type ${typeof l}`,i,r);else if(null===l)a(`type ${typeof t}`,"null",i,r);else if(t instanceof Map)if(l instanceof Map)if(t.size!==l.size)a(`Map instance with size ${t.size}`,`Map instance with size ${l.size}`,i,r);else for(let[n,o]of t)l.has(n)?e(o,l.get(n),`${i}.get(${n})`,r+1):a(`Map instance with key ${n}`,`Map instance without key ${n}`,i,r);else a("Map instance","other value",i,r);else if(l instanceof Map)a("other value","Map instance",i,r);else if(t instanceof Set)if(l instanceof Set)if(t.size!==l.size)a(`Set instance with size ${t.size}`,`Set instance with size ${l.size}`,i,r);else for(let e of l)t.has(e)||a(`Set instance without element ${e}`,`Set instance with element ${e}`,i,r);else a("Set instance","other value",i,r);else if(l instanceof Set)a("other value","Set instance",i,r);else if(n||o)if(n!==o)a(`type ${n?"array":"object"}`,`type ${o?"array":"object"}`,i,r);else if(t.length!==l.length)a(`array with length ${t.length}`,`array with length ${l.length}`,i,r);else for(let n=0;n<t.length;n++)e(t[n],l[n],`${i}[${n}]`,r+1);else if(S(t)||S(l))S(t)!==S(l)?a(`type ${S(t)?"React element":"object"}`,`type ${S(l)?"React element":"object"}`,i,r):t.type!==l.type?a(`React element of type ${t.type}`,`React element of type ${l.type}`,i,r):e(t.props,l.props,`[props of ${i}]`,r+1);else{for(let e in l)e in t||a(`object without key ${e}`,`object with key ${e}`,i,r);for(let n in t)n in l?e(t[n],l[n],`${i}.${n}`,r+1):a(`object with key ${n}`,`object without key ${n}`,i,r)}}else{if("function"==typeof t)return;isNaN(t)||isNaN(l)?isNaN(t)!==isNaN(l)&&a(`${isNaN(t)?"NaN":"non-NaN value"}`,`${isNaN(l)?"NaN":"non-NaN value"}`,i,r):t!==l&&a(t,l,i,r)}}}(e,t,"",0)}},p(e,t,l){let i=new WeakMap,r=new WeakMap;function n(e,t,l){let n=t,a=l;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!=a.ref&&!n.prototype?.isReactComponent){let t=n,l=i.get(e);l||(l=new WeakMap,i.set(e,l));let r=l.get(t);r||((r=e.forwardRef((e,l)=>t({...e,ref:l}))).displayName=t.displayName??t.name,l.set(t,r)),n=r}if("string"==typeof n&&"boolean"==typeof a.inert&&((a={...a}).inert?a.inert="":delete a.inert),"string"==typeof n)for(let[e,t]of[["fill-rule","fillRule"],["clip-rule","clipRule"]])e in a&&(a={...a,[t]:a[e]},delete a[e]);return"string"==typeof n&&null!=a.ref&&(n=function(e,t){let l=r.get(e);l||(l=new Map,r.set(e,l));let i=l.get(t);if(i)return i;let n=e.forwardRef((l,i)=>{let r=e.useRef(null);if(!r.current||r.current.original!==i){let e;r.current={original:i,callback:t=>{if(null==t&&e){let t=e;e=void 0,t();return}if("function"==typeof i){let l=i(t);e="function"==typeof l?l:void 0}else i&&(i.current=t)}}}return e.createElement(t,{...l,ref:r.current.callback})});return n.displayName=`CanvasHost(${t})`,l.set(t,n),n}(e,n)),{type:n,props:a}}function a(e){let t=(t,l,i)=>{let r=n(e,t,l??{});return e.createElement(r.type,void 0===i?r.props:{...r.props,key:i})};return{jsx:t,jsxs:(t,l,i)=>{let r=n(e,t,l??{}),{children:a,...o}=r.props;return e.createElement(r.type,void 0===i?o:{...o,key:i},...Array.isArray(a)?a:[a])},jsxDEV:t,Fragment:e.Fragment}}function o(e){return{...e,createElement:(t,l,...i)=>{let r=n(e,t,l??{});return e.createElement(r.type,r.props,...i)},cloneElement:(t,l,...i)=>{let r=e.cloneElement(t,l??void 0,...i),a=r.ref,o=n(e,r.type,{...r.props,ref:a});return o.type===r.type&&"string"!=typeof r.type?r:e.createElement(o.type,{...o.props,key:r.key})}}}l.d(t,{MA:()=>a,YJ:()=>o})},C(e,t,l){l.r(t);let i=(0,l("p").YJ)(window.React),{Children:r,Component:n,Fragment:a,Profiler:o,PureComponent:s,StrictMode:c,Suspense:u,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:m,act:h,cloneElement:f,createContext:d,createElement:p,createFactory:y,createRef:g,forwardRef:b,isValidElement:w,lazy:S,memo:_,startTransition:v,unstable_act:E,useCallback:I,useContext:R,useDebugValue:x,useDeferredValue:D,useEffect:O,useId:N,useImperativeHandle:$,useInsertionEffect:C,useLayoutEffect:T,useMemo:V,useReducer:M,useRef:A,useState:F,useSyncExternalStore:L,useTransition:k,version:j,use:W}=i;l.d(t,{},{Children:r,Component:n,Fragment:a,Profiler:o,PureComponent:s,StrictMode:c,Suspense:u,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:m,act:h,cloneElement:f,createContext:d,createElement:p,createFactory:y,createRef:g,default:i,forwardRef:b,isValidElement:w,lazy:S,memo:_,startTransition:v,unstable_act:E,use:W,useCallback:I,useContext:R,useDebugValue:x,useDeferredValue:D,useEffect:O,useId:N,useImperativeHandle:$,useInsertionEffect:C,useLayoutEffect:T,useMemo:V,useReducer:M,useRef:A,useState:F,useSyncExternalStore:L,useTransition:k,version:j})}},t={};function l(i){var r=t[i];if(void 0!==r)return r.exports;var n=t[i]={exports:{}};return e[i](n,n.exports,l),n.exports}l.d=(e,t,i)=>{var r=(t,i)=>{for(var r in t)l.o(t,r)&&!l.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,[i]:t[r]})};r(t,"get"),r(i,"value")},l.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),l.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:i,Fragment:r}=(0,l("p").MA)(window.React);var n=l("vD"),a=l("C"),o=Object.defineProperty,s=(e,t,l)=>{let i;return(i="symbol"!=typeof t?t+"":t)in e?o(e,i,{enumerable:!0,configurable:!0,writable:!0,value:l}):e[i]=l},c=e=>null!=e&&"object"==typeof e&&!Array.isArray(e),u=(e,t)=>Object.prototype.hasOwnProperty.call(e,t);Function.prototype.toString.call(Object);var m=e=>e?.constructor.name==="Array",h=(e,t)=>{if(Object.is(e,t))return!0;if(null==e&&null!=t||null!=e&&null==t)return!1;if("function"==typeof e?.isEqual&&"function"==typeof t?.isEqual)return e.isEqual(t);if("function"==typeof e&&"function"==typeof t)return e.toString()===t.toString();if(m(e)&&m(t))return((e,t)=>{if(e.length!==t.length)return!1;for(let l=0;l<e.length;l++)if(!h(e[l],t[l]))return!1;return!0})(Array.from(e),Array.from(t));if("object"!=typeof e||"object"!=typeof t)return!1;let l=Object.keys(t??Object.create(null)),i=l.length;for(let t=0;t<i;t++)if(!Reflect.has(e,l[t]))return!1;for(let r=0;r<i;r++){let i=l[r];if(!h(e[i],t[i]))return!1}return!0},f={itemToValue:e=>"string"==typeof e?e:c(e)&&u(e,"value")?e.value:"",itemToString:e=>"string"==typeof e?e:c(e)&&u(e,"label")?e.label:f.itemToValue(e),isItemDisabled:e=>!!(c(e)&&u(e,"disabled"))&&!!e.disabled},d=class e{constructor(t){s(this,"options",t),s(this,"items"),s(this,"indexMap",null),s(this,"copy",t=>new e({...this.options,items:t??[...this.items]})),s(this,"isEqual",e=>h(this.items,e.items)),s(this,"setItems",e=>this.copy(e)),s(this,"getValues",(e=this.items)=>{let t=[];for(let l of e){let e=this.getItemValue(l);null!=e&&t.push(e)}return t}),s(this,"find",e=>{if(null==e)return null;let t=this.indexOf(e);return -1!==t?this.at(t):null}),s(this,"findMany",e=>{let t=[];for(let l of e){let e=this.find(l);null!=e&&t.push(e)}return t}),s(this,"at",e=>{if(!this.options.groupBy&&!this.options.groupSort)return this.items[e]??null;let t=0;for(let[,l]of this.group())for(let i of l){if(t===e)return i;t++}return null}),s(this,"sortFn",(e,t)=>(this.indexOf(e)??0)-(this.indexOf(t)??0)),s(this,"sort",e=>[...e].sort(this.sortFn.bind(this))),s(this,"getItemValue",e=>null==e?null:this.options.itemToValue?.(e)??f.itemToValue(e)),s(this,"getItemDisabled",e=>null!=e&&(this.options.isItemDisabled?.(e)??f.isItemDisabled(e))),s(this,"stringifyItem",e=>null==e?null:this.options.itemToString?.(e)??f.itemToString(e)),s(this,"stringify",e=>null==e?null:this.stringifyItem(this.find(e))),s(this,"stringifyItems",(e,t=", ")=>{let l=[];for(let t of e){let e=this.stringifyItem(t);null!=e&&l.push(e)}return l.join(t)}),s(this,"stringifyMany",(e,t)=>this.stringifyItems(this.findMany(e),t)),s(this,"has",e=>-1!==this.indexOf(e)),s(this,"hasItem",e=>null!=e&&this.has(this.getItemValue(e))),s(this,"group",()=>{let{groupBy:e,groupSort:t}=this.options;if(!e)return[["",[...this.items]]];let l=new Map;this.items.forEach((t,i)=>{let r=e(t,i);l.has(r)||l.set(r,[]),l.get(r).push(t)});let i=Array.from(l.entries());return t&&i.sort(([e],[l])=>{if("function"==typeof t)return t(e,l);if(Array.isArray(t)){let i=t.indexOf(e),r=t.indexOf(l);return -1===i?1:-1===r?-1:i-r}return"asc"===t?e.localeCompare(l):"desc"===t?l.localeCompare(e):0}),i}),s(this,"getNextValue",(e,t=1,l=!1)=>{let i=this.indexOf(e);if(-1===i)return null;for(i=l?Math.min(i+t,this.size-1):i+t;i<=this.size&&this.getItemDisabled(this.at(i));)i++;return this.getItemValue(this.at(i))}),s(this,"getPreviousValue",(e,t=1,l=!1)=>{let i=this.indexOf(e);if(-1===i)return null;for(i=l?Math.max(i-t,0):i-t;i>=0&&this.getItemDisabled(this.at(i));)i--;return this.getItemValue(this.at(i))}),s(this,"indexOf",e=>{if(null==e)return -1;if(!this.options.groupBy&&!this.options.groupSort)return this.items.findIndex(t=>this.getItemValue(t)===e);if(!this.indexMap){this.indexMap=new Map;let e=0;for(let[,t]of this.group())for(let l of t){let t=this.getItemValue(l);null!=t&&this.indexMap.set(t,e),e++}}return this.indexMap.get(e)??-1}),s(this,"getByText",(e,t)=>{let l=null!=t?this.indexOf(t):-1,i=1===e.length;for(let r=0;r<this.items.length;r++){let n=this.items[(l+r+1)%this.items.length];if((!i||this.getItemValue(n)!==t)&&!this.getItemDisabled(n)&&p(this.stringifyItem(n),e))return n}}),s(this,"search",(e,t)=>{let{state:l,currentValue:i,timeout:r=350}=t,n=l.keysSoFar+e,a=n.length>1&&Array.from(n).every(e=>e===n[0])?n[0]:n,o=this.getByText(a,i),s=this.getItemValue(o);function c(){clearTimeout(l.timer),l.timer=-1}return!function e(t){l.keysSoFar=t,c(),""!==t&&(l.timer=+setTimeout(()=>{e(""),c()},r))}(n),s}),s(this,"update",(e,t)=>{let l=this.indexOf(e);return -1===l?this:this.copy([...this.items.slice(0,l),t,...this.items.slice(l+1)])}),s(this,"upsert",(e,t,l="append")=>{let i=this.indexOf(e);return -1===i?("append"===l?this.append:this.prepend)(t):this.copy([...this.items.slice(0,i),t,...this.items.slice(i+1)])}),s(this,"insert",(e,...t)=>this.copy(y(this.items,e,...t))),s(this,"insertBefore",(e,...t)=>{let l=this.indexOf(e);if(-1===l)if(0!==this.items.length)return this;else l=0;return this.copy(y(this.items,l,...t))}),s(this,"insertAfter",(e,...t)=>{let l=this.indexOf(e);if(-1===l)if(0!==this.items.length)return this;else l=0;return this.copy(y(this.items,l+1,...t))}),s(this,"prepend",(...e)=>this.copy(y(this.items,0,...e))),s(this,"append",(...e)=>this.copy(y(this.items,this.items.length,...e))),s(this,"filter",e=>{let t=this.items.filter((t,l)=>e(this.stringifyItem(t),l,t));return this.copy(t)}),s(this,"remove",(...e)=>{let t=e.map(e=>"string"==typeof e?e:this.getItemValue(e));return this.copy(this.items.filter(e=>{let l=this.getItemValue(e);return null!=l&&!t.includes(l)}))}),s(this,"move",(e,t)=>{let l=this.indexOf(e);return -1===l?this:this.copy(g(this.items,[l],t))}),s(this,"moveBefore",(e,...t)=>{let l=this.items.findIndex(t=>this.getItemValue(t)===e);if(-1===l)return this;let i=t.map(e=>this.items.findIndex(t=>this.getItemValue(t)===e)).sort((e,t)=>e-t);return this.copy(g(this.items,i,l))}),s(this,"moveAfter",(e,...t)=>{let l=this.items.findIndex(t=>this.getItemValue(t)===e);if(-1===l)return this;let i=t.map(e=>this.items.findIndex(t=>this.getItemValue(t)===e)).sort((e,t)=>e-t);return this.copy(g(this.items,i,l+1))}),s(this,"reorder",(e,t)=>this.copy(g(this.items,[e],t))),s(this,"compareValue",(e,t)=>{let l=this.indexOf(e),i=this.indexOf(t);return l<i?-1:+(l>i)}),s(this,"range",(e,t)=>{let l=[],i=e;for(;null!=i;){if(this.find(i)&&l.push(i),i===t)return l;i=this.getNextValue(i)}return[]}),s(this,"getValueRange",(e,t)=>e&&t?0>=this.compareValue(e,t)?this.range(e,t):this.range(t,e):[]),s(this,"toString",()=>{let e="";for(let t of this.items)e+=[this.getItemValue(t),this.stringifyItem(t),this.getItemDisabled(t)].filter(Boolean).join(":")+",";return e}),s(this,"toJSON",()=>({size:this.size,first:this.firstValue,last:this.lastValue})),this.items=[...t.items]}get size(){return this.items.length}get firstValue(){let e=0;for(;this.getItemDisabled(this.at(e));)e++;return this.getItemValue(this.at(e))}get lastValue(){let e=this.size-1;for(;this.getItemDisabled(this.at(e));)e--;return this.getItemValue(this.at(e))}*[Symbol.iterator](){yield*this.items}},p=(e,t)=>!!e?.toLowerCase().startsWith(t.toLowerCase());function y(e,t,...l){return[...e.slice(0,t),...l,...e.slice(t)]}function g(e,t,l){let i=(t=[...t].sort((e,t)=>e-t)).map(t=>e[t]);for(let l=t.length-1;l>=0;l--)e=[...e.slice(0,t[l]),...e.slice(t[l]+1)];return l=Math.max(0,l-t.filter(e=>e<l).length),[...e.slice(0,l),...i,...e.slice(l)]}var b=e=>new d(e);let w=window.WallarmDS.Button,S=window.WallarmDS.SearchInput,_=window.WallarmDS.SegmentedTabs,v=window.WallarmDS.SegmentedTabsList,E=window.WallarmDS.SegmentedTabsTrigger,I=window.WallarmDS.FilterDropdown,R=window.WallarmDS.FilterDropdownAllOption,x=window.WallarmDS.FilterDropdownClear,D=window.WallarmDS.FilterDropdownContent,O=window.WallarmDS.useFilterDropdown,N=window.WallarmDS.FilterDropdownEmpty,$=window.WallarmDS.FilterDropdownFooter,C=window.WallarmDS.FilterDropdownGroup,T=window.WallarmDS.FilterDropdownGroupLabel,V=window.WallarmDS.FilterDropdownOption,M=window.WallarmDS.FilterDropdownSearch,A=window.WallarmDS.FilterDropdownSelected,F=window.WallarmDS.FilterDropdownTrigger,L=[{value:"production",label:"Production"},{value:"pre-production",label:"Pre-production"},{value:"staging",label:"Staging"},{value:"development",label:"Development"}],k=[{value:"lua",label:"Lua",count:12},{value:"wasm",label:"WASM",count:4},{value:"plugin",label:"Plugin",count:7}],j=["A","B","C","D","E","F","G","H","I","J","K","L"].map((e,t)=>({value:e.toLowerCase(),label:`Scope ${e}`,count:7*t%23,category:t<6?"Group 1":"Group 2"})),W=[{value:"eu",label:"Europe — Frankfurt (eu-central-1) primary cluster"},{value:"us",label:"United States — North Virginia (us-east-1) failover cluster"},{value:"ap",label:"Asia Pacific — Singapore (ap-southeast-1)"}],P=l=>{let i,r,a,o,s,c,u,m=(0,n.c)(14),{withHint:h}=l,f=void 0!==h&&h,{groups:d}=O();if(m[0]===Symbol.for("react.memo_cache_sentinel")?(i=e(M,{}),r=e(R,{}),m[0]=i,m[1]=r):(i=m[0],r=m[1]),m[2]!==f?(a=e(A,{children:t=>e(V,{item:t,hint:f?t.count:void 0,children:t.label})}),m[2]=f,m[3]=a):a=m[3],m[4]!==d||m[5]!==f){let l;m[7]!==f?(l=l=>{let[i,r]=l;return t(C,{children:[i&&e(T,{children:i}),r.map(t=>e(V,{item:t,hint:f?t.count:void 0,children:t.label},t.value))]},i)},m[7]=f,m[8]=l):l=m[8],o=d.map(l),m[4]=d,m[5]=f,m[6]=o}else o=m[6];return m[9]===Symbol.for("react.memo_cache_sentinel")?(s=e(N,{}),c=e($,{}),m[9]=s,m[10]=c):(s=m[9],c=m[10]),m[11]!==a||m[12]!==o?(u=t(D,{children:[i,r,a,o,s,c]}),m[11]=a,m[12]=o,m[13]=u):u=m[13],u},z={title:"Inputs/FilterDropdown",component:I,subcomponents:{FilterDropdownTrigger:F,FilterDropdownClear:x,FilterDropdownContent:D,FilterDropdownSearch:M,FilterDropdownAllOption:R,FilterDropdownSelected:A,FilterDropdownGroup:C,FilterDropdownGroupLabel:T,FilterDropdownOption:V,FilterDropdownEmpty:N,FilterDropdownFooter:$},parameters:{layout:"centered",docs:{description:{component:'A lightweight filter for a list or table toolbar: a 36px trigger that opens a menu and narrows the list by one attribute. Picks apply at once — there is no Apply step. Single mode is for exclusive values and starts with «All …», which is also the reset; multi mode ticks several values that are OR-ed and clears with the ✕. From eight options the menu gains a search, and in multi mode a "Selected" section on top. Reach for `Select` inside forms, and for `FilterInput` when the query combines several attributes and operators.'}}},argTypes:{collection:{control:!1},value:{control:!1},defaultValue:{control:!1},onValueChange:{control:!1},filterFn:{control:!1},label:{control:"text"},allLabel:{control:"text"},multiple:{control:"boolean"},searchThreshold:{control:"number"}}},U=l=>{let i,r,a,o,s,c,u=(0,n.c)(12),{caption:m,multiple:h,value:f,testId:d}=l,p=void 0!==h&&h;return u[0]!==m?(i=e("p",{className:"sb-annotation w-160",children:m}),u[0]=m,u[1]=i):i=u[1],u[2]===Symbol.for("react.memo_cache_sentinel")?(r=b({items:k}),u[2]=r):r=u[2],u[3]===Symbol.for("react.memo_cache_sentinel")?(a=e(F,{}),o=e(P,{}),u[3]=a,u[4]=o):(a=u[3],o=u[4]),u[5]!==p||u[6]!==d||u[7]!==f?(s=t(I,{label:"Type",allLabel:"All types",multiple:p,collection:r,defaultValue:f,"data-testid":d,children:[a,o]}),u[5]=p,u[6]=d,u[7]=f,u[8]=s):s=u[8],u[9]!==i||u[10]!==s?(c=t("div",{className:"flex items-center gap-16",children:[i,s]}),u[9]=i,u[10]=s,u[11]=c):c=u[11],c};function B(l){let[i,r,n]=l;return t("div",{className:"flex items-center gap-16",children:[e("p",{className:"sb-annotation w-160",children:i}),t(I,{label:"Type",allLabel:"All types",multiple:r,disabled:!0,collection:b({items:k}),defaultValue:[...n],"data-testid":`disabled-${i.replace(/\W+/g,"-")}`,children:[e(F,{}),e(P,{})]})]},i)}function H(e){return e.category??""}let G=[{name:"Default",story:()=>{let l,i,r=(0,n.c)(2);return r[0]===Symbol.for("react.memo_cache_sentinel")?(l=b({items:L}),r[0]=l):l=r[0],r[1]===Symbol.for("react.memo_cache_sentinel")?(i=t(I,{label:"Environment",allLabel:"All environments",collection:l,"data-testid":"filter-dropdown",children:[e(F,{"data-analytics-id":"ENV_FILTER"}),e(P,{})]}),r[1]=i):i=r[1],i},meta:z},{name:"Multi",story:()=>{let l,i,r,a=(0,n.c)(3);return a[0]===Symbol.for("react.memo_cache_sentinel")?(l=b({items:k}),i=["lua"],a[0]=l,a[1]=i):(l=a[0],i=a[1]),a[2]===Symbol.for("react.memo_cache_sentinel")?(r=t(I,{label:"Type",multiple:!0,collection:l,defaultValue:i,"data-testid":"filter-dropdown",children:[e(F,{"data-analytics-id":"TYPE_FILTER",children:e(x,{"data-analytics-id":"TYPE_FILTER_CLEAR"})}),e(P,{})]}),a[2]=r):r=a[2],r},meta:z},{name:"LabelForms",story:()=>{let l,i,r,a,o,s=(0,n.c)(5);return s[0]===Symbol.for("react.memo_cache_sentinel")?(l=e(U,{caption:"single, unset",value:[],testId:"single-unset"}),s[0]=l):l=s[0],s[1]===Symbol.for("react.memo_cache_sentinel")?(i=e(U,{caption:"single, set",value:["wasm"],testId:"single-set"}),s[1]=i):i=s[1],s[2]===Symbol.for("react.memo_cache_sentinel")?(r=e(U,{caption:"multi, unset",multiple:!0,value:[],testId:"multi-unset"}),s[2]=r):r=s[2],s[3]===Symbol.for("react.memo_cache_sentinel")?(a=e(U,{caption:"multi, one value",multiple:!0,value:["lua"],testId:"multi-one"}),s[3]=a):a=s[3],s[4]===Symbol.for("react.memo_cache_sentinel")?(o=t("div",{className:"flex flex-col gap-12",children:[l,i,r,a,e(U,{caption:"multi, several values",multiple:!0,value:["lua","wasm","plugin"],testId:"multi-many"})]}),s[4]=o):o=s[4],o},meta:z},{name:"States",story:()=>{let t,l=(0,n.c)(1);return l[0]===Symbol.for("react.memo_cache_sentinel")?(t=e("div",{className:"flex flex-col gap-12",children:[["disabled, unset",!1,[]],["disabled, single set",!1,["wasm"]],["disabled, multi set",!0,["lua","wasm"]]].map(B)}),l[0]=t):t=l[0],t},meta:z},{name:"WithSearch",story:()=>{let l,i,r,a,o,s=(0,n.c)(5);return s[0]===Symbol.for("react.memo_cache_sentinel")?(l=b({items:j}),i=["f","c"],s[0]=l,s[1]=i):(l=s[0],i=s[1]),s[2]===Symbol.for("react.memo_cache_sentinel")?(r=t(I,{label:"Scope",multiple:!0,collection:l,defaultValue:i,"data-testid":"filter-dropdown-multi",children:[e(F,{}),e(P,{})]}),s[2]=r):r=s[2],s[3]===Symbol.for("react.memo_cache_sentinel")?(a=b({items:j}),s[3]=a):a=s[3],s[4]===Symbol.for("react.memo_cache_sentinel")?(o=t("div",{className:"flex gap-8",children:[r,t(I,{label:"Scope",allLabel:"All scopes",collection:a,"data-testid":"filter-dropdown-single",children:[e(F,{}),e(P,{})]})]}),s[4]=o):o=s[4],o},meta:z},{name:"Groups",story:()=>{let l,i,r=(0,n.c)(2);return r[0]===Symbol.for("react.memo_cache_sentinel")?(l=b({items:j,groupBy:H}),r[0]=l):l=r[0],r[1]===Symbol.for("react.memo_cache_sentinel")?(i=t(I,{label:"Scope",multiple:!0,collection:l,"data-testid":"filter-dropdown",children:[e(F,{}),e(P,{})]}),r[1]=i):i=r[1],i},meta:z},{name:"Hint",story:()=>{let l,i,r=(0,n.c)(2);return r[0]===Symbol.for("react.memo_cache_sentinel")?(l=b({items:k}),r[0]=l):l=r[0],r[1]===Symbol.for("react.memo_cache_sentinel")?(i=t(I,{label:"Type",multiple:!0,collection:l,"data-testid":"filter-dropdown",children:[e(F,{}),e(P,{withHint:!0})]}),r[1]=i):i=r[1],i},meta:z},{name:"LongLabels",story:()=>{let l,i,r,a,o,s,c=(0,n.c)(6);return c[0]===Symbol.for("react.memo_cache_sentinel")?(l=b({items:W}),i=["us"],c[0]=l,c[1]=i):(l=c[0],i=c[1]),c[2]===Symbol.for("react.memo_cache_sentinel")?(r=t(I,{label:"Region",allLabel:"All regions",collection:l,defaultValue:i,"data-testid":"filter-dropdown-single",children:[e(F,{}),e(P,{})]}),c[2]=r):r=c[2],c[3]===Symbol.for("react.memo_cache_sentinel")?(a=b({items:W}),o=["eu"],c[3]=a,c[4]=o):(a=c[3],o=c[4]),c[5]===Symbol.for("react.memo_cache_sentinel")?(s=t("div",{className:"flex gap-8",children:[r,t(I,{label:"Deployment region",multiple:!0,collection:a,defaultValue:o,"data-testid":"filter-dropdown-multi",children:[e(F,{}),e(P,{})]})]}),c[5]=s):s=c[5],s},meta:z},{name:"FilterRow",story:()=>{let l,i,r,o,s,c,u,m,h,f=(0,n.c)(11),[d,p]=(0,a.useState)("");return f[0]!==d?(l=e("div",{className:"w-240",children:e(S,{value:d,onChange:p,placeholder:"Search rules"})}),f[0]=d,f[1]=l):l=f[1],f[2]===Symbol.for("react.memo_cache_sentinel")?(i=e(_,{defaultValue:"all",children:t(v,{children:[e(E,{value:"all",children:"All"}),e(E,{value:"active",children:"Active"}),e(E,{value:"blocked",children:"Blocked"})]})}),f[2]=i):i=f[2],f[3]===Symbol.for("react.memo_cache_sentinel")?(r=b({items:L}),f[3]=r):r=f[3],f[4]===Symbol.for("react.memo_cache_sentinel")?(o=t(I,{label:"Environment",allLabel:"All environments",collection:r,"data-testid":"filter-environment",children:[e(F,{"data-analytics-id":"RULES_ENV_FILTER"}),e(P,{})]}),f[4]=o):o=f[4],f[5]===Symbol.for("react.memo_cache_sentinel")?(s=b({items:k}),f[5]=s):s=f[5],f[6]===Symbol.for("react.memo_cache_sentinel")?(c=t(I,{label:"Type",multiple:!0,collection:s,"data-testid":"filter-type",children:[e(F,{"data-analytics-id":"RULES_TYPE_FILTER"}),e(P,{withHint:!0})]}),f[6]=c):c=f[6],f[7]===Symbol.for("react.memo_cache_sentinel")?(u=b({items:j}),f[7]=u):u=f[7],f[8]===Symbol.for("react.memo_cache_sentinel")?(m=t(I,{label:"Scope",multiple:!0,collection:u,"data-testid":"filter-scope",children:[e(F,{"data-analytics-id":"RULES_SCOPE_FILTER"}),e(P,{})]}),f[8]=m):m=f[8],f[9]!==l?(h=t("div",{className:"flex flex-wrap items-center gap-8",children:[l,i,o,c,m]}),f[9]=l,f[10]=h):h=f[10],h},meta:z},{name:"Controlled",story:()=>{let l,i,r,o,s,c,u,m,h,f,d=(0,n.c)(15);d[0]===Symbol.for("react.memo_cache_sentinel")?(l=["pre-production"],d[0]=l):l=d[0];let[p,y]=(0,a.useState)(l);d[1]===Symbol.for("react.memo_cache_sentinel")?(i=b({items:L}),d[1]=i):i=d[1];let g=i;return d[2]===Symbol.for("react.memo_cache_sentinel")?(r=e=>y(e.value),d[2]=r):r=d[2],d[3]===Symbol.for("react.memo_cache_sentinel")?(o=e(F,{}),s=e(P,{}),d[3]=o,d[4]=s):(o=d[3],s=d[4]),d[5]!==p?(c=t(I,{label:"Environment",allLabel:"All environments",collection:g,value:p,onValueChange:r,"data-testid":"filter-dropdown",children:[o,s]}),d[5]=p,d[6]=c):c=d[6],d[7]!==p?(u=JSON.stringify(p),d[7]=p,d[8]=u):u=d[8],d[9]!==u?(m=t("p",{className:"sb-annotation","data-testid":"filter-dropdown-value",children:["value: ",u]}),d[9]=u,d[10]=m):m=d[10],d[11]===Symbol.for("react.memo_cache_sentinel")?(h=e(w,{variant:"outline",color:"neutral",size:"small",onClick:()=>y([]),children:"Reset"}),d[11]=h):h=d[11],d[12]!==c||d[13]!==m?(f=t("div",{className:"flex flex-col items-start gap-12",children:[c,m,h]}),d[12]=c,d[13]=m,d[14]=f):f=d[14],f},meta:z}];function Y({entry:e}){let{story:t,meta:l}=e,i={...l.args,...t.args},r="function"==typeof t||t.$$typeof?t:t.render||l.render||l.component,n=()=>a.default.createElement(r,i),o={args:i,globals:{theme:"light"},parameters:{...l.parameters,...t.parameters},viewMode:"story"};for(let e of[...l.decorators||[],...t.decorators||[]].reverse()){let t=n;n=()=>e(t,o)}return a.default.createElement("section",{"data-preview-story":e.name,className:"p-16"},a.default.createElement("h2",{className:"text-sm mb-12"},e.name),a.default.createElement(n))}window.WallarmPreview={mount(e){let t=window.ReactDOM.createRoot(e);return t.render(a.default.createElement(window.WallarmDS.Root,null,G.map((e,t)=>a.default.createElement(Y,{key:t,entry:e})))),t}}})();