@infineon/infineon-design-system-stencil 36.0.0--canary.1926.3384b08beedd4bd0bf0894c709a0e3eb8096602d.0 → 36.0.0--canary.1941.7599a6785f62cbeb62b2525db0089aa1d1f9fc08.0

package/dist/collection/components/select/multi-select/multiselect.stories.js

@@ -1,47 +1,97 @@
 import { action } from "@storybook/addon-actions";
+const options = [
+    {
+        value: 'a',
+        label: 'Option a',
+        selected: false,
+    },
+    {
+        value: 'b',
+        label: 'Option b',
+        selected: false,
+    },
+    {
+        value: 'c',
+        label: 'Option c',
+        selected: false,
+        children: [
+            {
+                value: 'z1',
+                label: 'Option c1',
+                selected: false,
+            },
+            {
+                value: 'z2',
+                label: 'Option c2',
+                selected: false,
+            },
+        ],
+    },
+];
+const longOptions = [];
+for (let i = 1; i <= 50; i++) {
+    let children = undefined;
+    if (i % 3 == 0) {
+        children = [{
+                "value": `${i}.1`,
+                "label": `Option ${i}.1`,
+                "selected": i % 2 == 0 ? true : false
+            }, {
+                "value": `${i}.2`,
+                "label": `Option ${i}.2`,
+                "selected": i % 4 == 0 ? true : false
+            }];
+    }
+    longOptions.push({
+        "value": i,
+        "label": `Option ${i}`,
+        "selected": i % 2 == 0 ? true : false,
+        "children": children
+    });
+}
 export default {
     title: 'Components/Select/Multi Select',
-    parameters: {
-        controls: {
-            expanded: true,
-            sort: 'alpha'
-        }
-    },
+    // tags: ['autodocs'],
     args: {
         name: 'multiselect',
+        size: 'm',
         disabled: false,
+        batchSize: 10,
+        maxItemCount: 10,
         showSearch: true,
         showSelectAll: true,
-        showExpandCollapse: true,
         error: false,
         errorMessage: 'Some error',
         label: '',
         placeholder: 'Placeholder',
-        showClearButton: true,
-        noResultsMessage: 'No results found.',
-        showNoResultsMessage: true,
-        searchPlaceholder: 'Search',
-        selectAllLabel: 'Select all',
-        expandLabel: 'Expand',
-        collapseLabel: 'Collapse',
-        ariaMultiSelectLabel: 'Multi-select dropdown',
-        ariaMultiSelectLabelledBy: '',
-        ariaMultiSelectDescribedBy: '',
-        ariaSearchLabel: 'Search options',
-        ariaClearLabel: 'Clear all selections',
-        ariaToggleLabel: 'Toggle dropdown',
-        ariaSelectAllLabel: 'Select all options',
-        ariaExpandAllLabel: 'Expand all categories',
-        ariaCollapseAllLabel: 'Collapse all categories'
+        showClearButton: true
     },
     argTypes: {
-        // Function
+        size: {
+            description: 'Size of the input field.',
+            options: {
+                'small (36px)': 's',
+                'medium (40px)': 'm',
+            },
+            control: {
+                type: 'radio',
+            },
+            table: {
+                category: 'ifx-multiselect props',
+                defaultValue: {
+                    summary: 'medium (40px)',
+                },
+                type: {
+                    summary: '36px | 40px',
+                },
+            },
+        },
         disabled: {
             description: 'Disable the input field.',
             options: [true, false],
             control: { type: 'boolean' },
             table: {
-                category: 'Function',
+                category: 'ifx-multiselect props',
                 defaultValue: {
                     summary: 'false',
                 },
@@ -54,35 +104,43 @@ export default {
             description: `For a <*form*> element, the name attribute is  used as a reference when the data is submitted.`,
             control: 'text',
             table: {
-                category: 'Function',
-                defaultValue: {
-                    summary: 'undefined',
-                },
+                category: 'ifx-multiselect props',
                 type: {
                     summary: 'string',
                 },
             },
         },
-        showSearch: {
-            description: 'Show a search input.',
-            options: [true, false],
-            control: { type: 'boolean' },
+        batchSize: {
+            description: 'Batch size used during lazy loading options.',
+            control: {
+                type: 'number',
+            },
             table: {
-                category: 'Function',
+                category: 'ifx-multiselect props',
                 defaultValue: {
-                    summary: 'true',
+                    summary: '50',
                 },
                 type: {
-                    summary: 'boolean',
+                    summary: 'number',
                 },
             },
         },
-        showSelectAll: {
-            description: 'Show a checkbox to select all options.',
+        maxItemCount: {
+            control: { type: 'number' },
+            description: 'Number of maximum selectable items.',
+            table: {
+                category: 'ifx-multiselect props',
+                type: {
+                    summary: 'number'
+                }
+            }
+        },
+        showSearch: {
+            description: 'Show a search input.',
             options: [true, false],
-            control: { type: 'boolean' },
+            control: { type: 'radio' },
             table: {
-                category: 'Function',
+                category: 'ifx-multiselect props',
                 defaultValue: {
                     summary: 'true',
                 },
@@ -91,12 +149,12 @@ export default {
                 },
             },
         },
-        showExpandCollapse: {
-            description: 'Show expand/collapse controls for nested options.',
+        showSelectAll: {
+            description: 'Show a checkbox to select all options.',
             options: [true, false],
-            control: { type: 'boolean' },
+            control: { type: 'radio' },
             table: {
-                category: 'Function',
+                category: 'ifx-multiselect props',
                 defaultValue: {
                     summary: 'true',
                 },
@@ -109,35 +167,18 @@ export default {
             description: 'Shows the clear icon button.',
             control: 'boolean',
             table: {
-                category: 'Function',
+                category: 'ifx-multiselect props',
                 defaultValue: {
-                    summary: 'true',
-                },
-                type: {
-                    summary: 'boolean',
-                },
+                    summary: true
+                }
             }
         },
-        showNoResultsMessage: {
-            description: 'Show/hide the no results message when search has no matches.',
-            options: [true, false],
-            control: { type: 'boolean' },
-            table: {
-                category: 'Function',
-                defaultValue: {
-                    summary: 'true',
-                },
-                type: {
-                    summary: 'boolean',
-                },
-            },
-        },
         error: {
             description: 'Show error state.',
             options: [true, false],
-            control: { type: 'boolean' },
+            control: { type: 'radio' },
             table: {
-                category: 'Function',
+                category: 'ifx-multiselect props',
                 defaultValue: {
                     summary: 'false',
                 },
@@ -146,38 +187,11 @@ export default {
                 },
             },
         },
-        // Label
-        label: {
-            description: 'Label over the input field.',
-            control: 'text',
-            table: {
-                category: 'Label',
-                defaultValue: {
-                    summary: '""',
-                },
-                type: {
-                    summary: 'string',
-                },
-            },
-        },
-        placeholder: {
-            description: 'Label inside the input field.',
-            control: 'text',
-            table: {
-                category: 'Label',
-                defaultValue: {
-                    summary: '""',
-                },
-                type: {
-                    summary: 'string',
-                },
-            },
-        },
         errorMessage: {
             control: 'text',
             description: 'Error message to display.',
             table: {
-                category: 'Label',
+                category: 'ifx-multiselect props',
                 defaultValue: {
                     summary: 'Error',
                 },
@@ -186,195 +200,41 @@ export default {
                 },
             },
         },
-        noResultsMessage: {
-            description: 'Custom message to display when search has no results.',
-            control: 'text',
-            table: {
-                category: 'Label',
-                defaultValue: {
-                    summary: 'No results found.',
-                },
-                type: {
-                    summary: 'string',
-                },
-            },
-        },
-        searchPlaceholder: {
-            description: 'Placeholder text for the search input field.',
-            control: 'text',
-            table: {
-                category: 'Label',
-                defaultValue: {
-                    summary: 'Search',
-                },
-                type: {
-                    summary: 'string',
-                },
-            },
-        },
-        selectAllLabel: {
-            description: 'Label text for the select all checkbox.',
-            control: 'text',
-            table: {
-                category: 'Label',
-                defaultValue: {
-                    summary: 'Select all',
-                },
-                type: {
-                    summary: 'string',
-                },
-            },
-        },
-        expandLabel: {
-            description: 'Label text for the expand all control.',
-            control: 'text',
-            table: {
-                category: 'Label',
-                defaultValue: {
-                    summary: 'Expand',
-                },
-                type: {
-                    summary: 'string',
-                },
-            },
-        },
-        collapseLabel: {
-            description: 'Label text for the collapse all control.',
-            control: 'text',
-            table: {
-                category: 'Label',
-                defaultValue: {
-                    summary: 'Collapse',
-                },
-                type: {
-                    summary: 'string',
-                },
-            },
-        },
-        // ARIA Labels
-        ariaMultiSelectLabel: {
-            description: 'ARIA label for the multiselect component.',
-            control: 'text',
-            table: {
-                category: 'ARIA Labels',
-                defaultValue: {
-                    summary: 'Multi-select dropdown',
-                },
-                type: {
-                    summary: 'string',
-                },
-            },
-        },
-        ariaMultiSelectLabelledBy: {
-            description: 'ID of element that labels the multiselect.',
-            control: 'text',
-            table: {
-                category: 'ARIA Labels',
-                defaultValue: {
-                    summary: '""',
-                },
-                type: {
-                    summary: 'string',
-                },
-            },
-        },
-        ariaMultiSelectDescribedBy: {
-            description: 'ID of element that describes the multiselect.',
-            control: 'text',
-            table: {
-                category: 'ARIA Labels',
-                defaultValue: {
-                    summary: '""',
-                },
-                type: {
-                    summary: 'string',
-                },
-            },
-        },
-        ariaSearchLabel: {
-            description: 'ARIA label for the search input field.',
-            control: 'text',
-            table: {
-                category: 'ARIA Labels',
-                defaultValue: {
-                    summary: 'Search options',
-                },
-                type: {
-                    summary: 'string',
-                },
-            },
-        },
-        ariaClearLabel: {
-            description: 'ARIA label for the clear all button.',
-            control: 'text',
-            table: {
-                category: 'ARIA Labels',
-                defaultValue: {
-                    summary: 'Clear all selections',
-                },
-                type: {
-                    summary: 'string',
-                },
-            },
-        },
-        ariaToggleLabel: {
-            description: 'ARIA label for the dropdown toggle button.',
+        label: {
+            description: 'Label over the input field.',
             control: 'text',
             table: {
-                category: 'ARIA Labels',
-                defaultValue: {
-                    summary: 'Toggle dropdown',
-                },
+                category: 'ifx-multiselect props',
                 type: {
                     summary: 'string',
                 },
             },
         },
-        ariaSelectAllLabel: {
-            description: 'ARIA label for the select all checkbox.',
+        placeholder: {
+            description: 'Label inside the input field.',
             control: 'text',
             table: {
-                category: 'ARIA Labels',
-                defaultValue: {
-                    summary: 'Select all options',
-                },
+                category: 'ifx-multiselect props',
                 type: {
                     summary: 'string',
                 },
             },
         },
-        ariaExpandAllLabel: {
-            description: 'ARIA label for the expand all control.',
-            control: 'text',
+        options: {
+            description: 'Takes an array of objects in the following format.',
             table: {
-                category: 'ARIA Labels',
-                defaultValue: {
-                    summary: 'Expand all categories',
-                },
+                category: 'ifx-multiselect props',
                 type: {
-                    summary: 'string',
+                    summary: 'Details',
+                    detail: `'Array<{ value: string, label: string, selected: boolean, children?: Array<{ value: string, label: string, selected: boolean }> }>'`,
                 },
             },
         },
-        ariaCollapseAllLabel: {
-            description: 'ARIA label for the collapse all control.',
-            control: 'text',
-            table: {
-                category: 'ARIA Labels',
-                defaultValue: {
-                    summary: 'Collapse all categories',
-                },
-                type: {
-                    summary: 'string',
-                },
-            },
-        },
-        // Custom Events
         ifxSelect: {
             action: 'ifxSelect',
             description: 'Custom event emitted when item is selected or unselected.',
             table: {
-                category: 'Custom Events',
+                category: 'custom events',
                 type: {
                     summary: 'Framework integration',
                     detail: 'React: onIfxSelect={handleInput}\nVue:@ifxSelect="handleInput"\nAngular:(ifxSelect)="handleInput()"\nVanillaJs:.addEventListener("ifxSelect", (event) => {//handle input});',
@@ -385,7 +245,7 @@ export default {
             action: 'ifxOpen',
             description: 'Custom event emitted when multiselect is opened.',
             table: {
-                category: 'Custom Events',
+                category: 'custom events',
                 type: {
                     summary: 'Framework integration',
                     detail: 'React: onIfxOpen={handleChange}\nVue:@ifxOpen="handleChange"\nAngular:(ifxOpen)="handleChange()"\nVanillaJs:.addEventListener("ifxOpen", (event) => {//handle change});',
@@ -394,125 +254,21 @@ export default {
         }
     },
 };
-const SlotBasedTemplate = args => {
-    const template = `<ifx-multiselect
+const Template = args => {
+    const template = `<ifx-multiselect 
   name='${args.name}'
+  options='${JSON.stringify(args.options)}' 
+  batch-size='${args.batchSize}'
+  size='${args.size}'
   disabled='${args.disabled}'
+  max-item-count='${args.maxItemCount}'
   error='${args.error}'
   error-message='${args.errorMessage}'
   label='${args.label}'
   placeholder='${args.placeholder}'
   show-search='${args.showSearch}'
   show-select-all='${args.showSelectAll}'
-  show-expand-collapse='${args.showExpandCollapse}'
-  show-clear-button='${args.showClearButton}'
-  no-results-message='${args.noResultsMessage}'
-  show-no-results-message='${args.showNoResultsMessage}'
-  search-placeholder='${args.searchPlaceholder}'
-  select-all-label='${args.selectAllLabel}'
-  expand-label='${args.expandLabel}'
-  collapse-label='${args.collapseLabel}'
-  aria-multi-select-label='${args.ariaMultiSelectLabel}'
-  aria-multi-select-labelled-by='${args.ariaMultiSelectLabelledBy}'
-  aria-multi-select-described-by='${args.ariaMultiSelectDescribedBy}'
-  aria-search-label='${args.ariaSearchLabel}'
-  aria-clear-label='${args.ariaClearLabel}'
-  aria-toggle-label='${args.ariaToggleLabel}'
-  aria-select-all-label='${args.ariaSelectAllLabel}'
-  aria-expand-all-label='${args.ariaExpandAllLabel}'
-  aria-collapse-all-label='${args.ariaCollapseAllLabel}'>
-
-  <ifx-multiselect-option value="category-a">
-    Category A - Main Section
-
-    <ifx-multiselect-option value="category-a-1" slot="children">
-      Category A.1 - First Subsection
-      <ifx-multiselect-option value="option-a-1-1" slot="children">Option A.1.1 - Basic Item</ifx-multiselect-option>
-      <ifx-multiselect-option value="option-a-1-2" selected slot="children">Option A.1.2 - Preselected Item</ifx-multiselect-option>
-      <ifx-multiselect-option value="option-a-1-3" slot="children">Option A.1.3 - Another Item</ifx-multiselect-option>
-    </ifx-multiselect-option>
-
-    <ifx-multiselect-option value="category-a-2" slot="children">
-      Category A.2 - Second Subsection
-      <ifx-multiselect-option value="option-a-2-1" slot="children">Option A.2.1 - Nested Item</ifx-multiselect-option>
-      <ifx-multiselect-option value="option-a-2-2" slot="children">
-        Option A.2.2 - Deep Nested Parent
-        <ifx-multiselect-option value="option-a-2-2-1" slot="children">Option A.2.2.1 - Level 4 Item</ifx-multiselect-option>
-        <ifx-multiselect-option value="option-a-2-2-2" slot="children">Option A.2.2.2 - Level 4 Item</ifx-multiselect-option>
-        <ifx-multiselect-option value="option-a-2-2-3" slot="children">
-          Option A.2.2.3 - Even Deeper
-          <ifx-multiselect-option value="option-a-2-2-3-1" slot="children">Option A.2.2.3.1 - Level 5 Item</ifx-multiselect-option>
-          <ifx-multiselect-option value="option-a-2-2-3-2" slot="children">Option A.2.2.3.2 - Level 5 Item</ifx-multiselect-option>
-        </ifx-multiselect-option>
-      </ifx-multiselect-option>
-      <ifx-multiselect-option value="option-a-2-3" slot="children">Option A.2.3 - Final Nested</ifx-multiselect-option>
-    </ifx-multiselect-option>
-
-    <ifx-multiselect-option value="option-a-3" slot="children">Option A.3 - Direct Child</ifx-multiselect-option>
-    <ifx-multiselect-option value="option-a-4" slot="children">Option A.4 - Another Direct Child</ifx-multiselect-option>
-  </ifx-multiselect-option>
-
-  <ifx-multiselect-option value="category-b">
-    Category B - Secondary Section
-
-    <ifx-multiselect-option value="category-b-1" slot="children">
-      Category B.1 - Mixed Content
-      <ifx-multiselect-option value="option-b-1-1" slot="children">Option B.1.1 - Standard Item</ifx-multiselect-option>
-      <ifx-multiselect-option value="category-b-1-2" slot="children">
-        Category B.1.2 - Sub-Category
-        <ifx-multiselect-option value="option-b-1-2-1" slot="children">Option B.1.2.1 - Nested Choice</ifx-multiselect-option>
-        <ifx-multiselect-option value="option-b-1-2-2" slot="children">Option B.1.2.2 - Nested Choice</ifx-multiselect-option>
-        <ifx-multiselect-option value="option-b-1-2-3" slot="children">Option B.1.2.3 - Nested Choice</ifx-multiselect-option>
-      </ifx-multiselect-option>
-      <ifx-multiselect-option value="option-b-1-3" slot="children">Option B.1.3 - Standard Item</ifx-multiselect-option>
-    </ifx-multiselect-option>
-
-    <ifx-multiselect-option value="option-b-2" slot="children">Option B.2 - Standalone Item</ifx-multiselect-option>
-    <ifx-multiselect-option value="option-b-3" slot="children">Option B.3 - Standalone Item</ifx-multiselect-option>
-  </ifx-multiselect-option>
-
-  <ifx-multiselect-option value="category-c">
-    Category C - Complex Structure
-
-    <ifx-multiselect-option value="category-c-1" slot="children">
-      Category C.1 - Multi-Level Group
-      <ifx-multiselect-option value="category-c-1-1" slot="children">
-        Category C.1.1 - Sub-Group Alpha
-        <ifx-multiselect-option value="option-c-1-1-1" slot="children">Option C.1.1.1 - Alpha Item 1</ifx-multiselect-option>
-        <ifx-multiselect-option value="option-c-1-1-2" slot="children">Option C.1.1.2 - Alpha Item 2</ifx-multiselect-option>
-      </ifx-multiselect-option>
-      <ifx-multiselect-option value="category-c-1-2" slot="children">
-        Category C.1.2 - Sub-Group Beta
-        <ifx-multiselect-option value="option-c-1-2-1" slot="children">Option C.1.2.1 - Beta Item 1</ifx-multiselect-option>
-        <ifx-multiselect-option value="option-c-1-2-2" slot="children">Option C.1.2.2 - Beta Item 2</ifx-multiselect-option>
-        <ifx-multiselect-option value="option-c-1-2-3" slot="children">Option C.1.2.3 - Beta Item 3</ifx-multiselect-option>
-      </ifx-multiselect-option>
-      <ifx-multiselect-option value="option-c-1-3" slot="children">Option C.1.3 - Direct Item</ifx-multiselect-option>
-    </ifx-multiselect-option>
-
-    <ifx-multiselect-option value="category-c-2" slot="children">
-      Category C.2 - Another Group
-      <ifx-multiselect-option value="option-c-2-1" slot="children">Option C.2.1 - Group Item</ifx-multiselect-option>
-      <ifx-multiselect-option value="option-c-2-2" slot="children">Option C.2.2 - Group Item</ifx-multiselect-option>
-    </ifx-multiselect-option>
-  </ifx-multiselect-option>
-
-  <ifx-multiselect-option value="option-d">Option D - Top-Level Standalone</ifx-multiselect-option>
-
-  <ifx-multiselect-option value="option-e">Option E - Top-Level Standalone</ifx-multiselect-option>
-
-  <ifx-multiselect-option value="category-f">
-    Category F - Final Section
-
-    <ifx-multiselect-option value="option-f-1" slot="children">Option F.1 - Simple Item</ifx-multiselect-option>
-    <ifx-multiselect-option value="option-f-2" slot="children">Option F.2 - Simple Item</ifx-multiselect-option>
-    <ifx-multiselect-option value="category-f-3" slot="children">
-      Category F.3 - Last Group
-      <ifx-multiselect-option value="option-f-3-1" slot="children">Option F.3.1 - Final Nested</ifx-multiselect-option>
-      <ifx-multiselect-option value="option-f-3-2" slot="children">Option F.3.2 - Final Nested</ifx-multiselect-option>
-      <ifx-multiselect-option value="option-f-3-3" slot="children">Option F.3.3 - Final Nested</ifx-multiselect-option>
-    </ifx-multiselect-option>
-  </ifx-multiselect-option>
+  show-clear-button='${args.showClearButton}'>
 </ifx-multiselect>`;
     setTimeout(() => {
         document.querySelector('ifx-multiselect').addEventListener('ifxSelect', action('ifxSelect'));
@@ -520,74 +276,14 @@ const SlotBasedTemplate = args => {
     }, 0);
     return template;
 };
-export const Default = SlotBasedTemplate.bind({});
+export const Default = Template.bind({});
 Default.args = {
-    label: 'Generic Multi-Level Selection',
-    placeholder: 'Select options...',
+    options: options,
 };
-Default.parameters = {
-    docs: {
-        description: {
-            story: 'The multiselect component supports nested hierarchical options with search, select all, and expand/collapse functionality. Use slot-based syntax for defining options and their nested structure.'
-        }
-    }
-};
-const FlatTemplate = args => {
-    const template = `<ifx-multiselect
-  name='${args.name}'
-  disabled='${args.disabled}'
-  error='${args.error}'
-  error-message='${args.errorMessage}'
-  label='${args.label}'
-  placeholder='${args.placeholder}'
-  show-search='${args.showSearch}'
-  show-select-all='${args.showSelectAll}'
-  show-expand-collapse='${args.showExpandCollapse}'
-  show-clear-button='${args.showClearButton}'
-  no-results-message='${args.noResultsMessage}'
-  show-no-results-message='${args.showNoResultsMessage}'
-  search-placeholder='${args.searchPlaceholder}'
-  select-all-label='${args.selectAllLabel}'
-  expand-label='${args.expandLabel}'
-  collapse-label='${args.collapseLabel}'
-  aria-multi-select-label='${args.ariaMultiSelectLabel}'
-  aria-multi-select-labelled-by='${args.ariaMultiSelectLabelledBy}'
-  aria-multi-select-described-by='${args.ariaMultiSelectDescribedBy}'
-  aria-search-label='${args.ariaSearchLabel}'
-  aria-clear-label='${args.ariaClearLabel}'
-  aria-toggle-label='${args.ariaToggleLabel}'
-  aria-select-all-label='${args.ariaSelectAllLabel}'
-  aria-expand-all-label='${args.ariaExpandAllLabel}'
-  aria-collapse-all-label='${args.ariaCollapseAllLabel}'>
-
-  <ifx-multiselect-option value="option-1">Option 1</ifx-multiselect-option>
-  <ifx-multiselect-option value="option-2">Option 2</ifx-multiselect-option>
-  <ifx-multiselect-option value="option-3">Option 3</ifx-multiselect-option>
-  <ifx-multiselect-option value="option-4">Option 4</ifx-multiselect-option>
-  <ifx-multiselect-option value="option-5">Option 5</ifx-multiselect-option>
-  <ifx-multiselect-option value="option-6">Option 6</ifx-multiselect-option>
-  <ifx-multiselect-option value="option-7">Option 7</ifx-multiselect-option>
-  <ifx-multiselect-option value="option-8">Option 8</ifx-multiselect-option>
-  <ifx-multiselect-option value="option-9">Option 9</ifx-multiselect-option>
-  <ifx-multiselect-option value="option-10">Option 10</ifx-multiselect-option>
-</ifx-multiselect>`;
-    setTimeout(() => {
-        const multiselect = document.querySelectorAll('ifx-multiselect')[document.querySelectorAll('ifx-multiselect').length - 1];
-        multiselect.addEventListener('ifxSelect', action('ifxSelect'));
-        multiselect.addEventListener('ifxOpen', action('ifxOpen'));
-    }, 0);
-    return template;
-};
-export const SingleLevel = FlatTemplate.bind({});
-SingleLevel.args = {
-    label: 'Single Level Selection',
-    placeholder: 'Select options...',
-};
-SingleLevel.parameters = {
-    docs: {
-        description: {
-            story: 'A simple multiselect with single-level options - no nesting or hierarchical structure. Expand/Collapse controls are automatically hidden for single-level option lists.'
-        }
-    }
+export const WithLazyLoading = Template.bind({});
+WithLazyLoading.args = {
+    options: longOptions,
+    batchSize: 5,
+    maxItemCount: undefined
 };
 //# sourceMappingURL=multiselect.stories.js.map