@warp-ds/elements 2.10.0-next.2 → 2.10.0-next.20

package/dist/packages/combobox/combobox.react.stories.d.ts

@@ -1,13 +1,21 @@
-import { StoryObj } from '@storybook/react';
-import React from 'react';
-import { Combobox } from './react';
+import { StoryObj } from "@storybook/react";
+import React from "react";
+import { Combobox } from "./react";
 declare const _default: {
     title: string;
-    component: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.HTMLAttributes<import("./combobox").WarpCombobox>, "value" | "form" | "label" | "name" | "disabled" | "invalid" | "helpText" | "placeholder" | "required" | "autocomplete" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "onchange" | "onselect" | "updated" | "firstUpdated" | "resetFormControl" | "render" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "renderOptions" | "onChange" | "onSelect" | "optional" | "options" | "openOnFocus" | "selectOnBlur" | "matchTextSegments" | "disableStaticFiltering"> & {
-        onSelect?: (e: Event) => void;
-        onselect?: (e: Event) => void;
-        onChange?: (e: Event) => void;
-        onchange?: (e: Event) => void;
+    component: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.HTMLAttributes<import("./combobox").WarpCombobox>, "value" | "form" | "label" | "autocomplete" | "name" | "disabled" | "invalid" | "helpText" | "optional" | "placeholder" | "required" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "onchange" | "onselect" | "updated" | "firstUpdated" | "resetFormControl" | "render" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "renderOptions" | "onChange" | "onSelect" | "options" | "openOnFocus" | "selectOnBlur" | "matchTextSegments" | "disableStaticFiltering"> & {
+        onSelect?: ((e: CustomEvent<{
+            value: string;
+        }>) => void) | undefined;
+        onselect?: ((e: CustomEvent<{
+            value: string;
+        }>) => void) | undefined;
+        onChange?: ((e: CustomEvent<{
+            value: string;
+        }>) => void) | undefined;
+        onchange?: ((e: CustomEvent<{
+            value: string;
+        }>) => void) | undefined;
     } & Partial<Omit<import("./combobox").WarpCombobox, keyof HTMLElement>> & React.RefAttributes<import("./combobox").WarpCombobox>, "ref">, "help-text" | "open-on-focus" | "select-on-blur" | "match-text-segments" | "disable-static-filtering"> & {
         openOnFocus?: boolean;
         selectOnBlur?: boolean;
@@ -15,11 +23,19 @@ declare const _default: {
         disableStaticFiltering?: boolean;
         helpText?: string;
     } & React.RefAttributes<import("./combobox").WarpCombobox>>;
-    render(args: Omit<Omit<Omit<React.HTMLAttributes<import("./combobox").WarpCombobox>, "value" | "form" | "label" | "name" | "disabled" | "invalid" | "helpText" | "placeholder" | "required" | "autocomplete" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "onchange" | "onselect" | "updated" | "firstUpdated" | "resetFormControl" | "render" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "renderOptions" | "onChange" | "onSelect" | "optional" | "options" | "openOnFocus" | "selectOnBlur" | "matchTextSegments" | "disableStaticFiltering"> & {
-        onSelect?: (e: Event) => void;
-        onselect?: (e: Event) => void;
-        onChange?: (e: Event) => void;
-        onchange?: (e: Event) => void;
+    render(args: Omit<Omit<Omit<React.HTMLAttributes<import("./combobox").WarpCombobox>, "value" | "form" | "label" | "autocomplete" | "name" | "disabled" | "invalid" | "helpText" | "optional" | "placeholder" | "required" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "onchange" | "onselect" | "updated" | "firstUpdated" | "resetFormControl" | "render" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "renderOptions" | "onChange" | "onSelect" | "options" | "openOnFocus" | "selectOnBlur" | "matchTextSegments" | "disableStaticFiltering"> & {
+        onSelect?: ((e: CustomEvent<{
+            value: string;
+        }>) => void) | undefined;
+        onselect?: ((e: CustomEvent<{
+            value: string;
+        }>) => void) | undefined;
+        onChange?: ((e: CustomEvent<{
+            value: string;
+        }>) => void) | undefined;
+        onchange?: ((e: CustomEvent<{
+            value: string;
+        }>) => void) | undefined;
     } & Partial<Omit<import("./combobox").WarpCombobox, keyof HTMLElement>> & React.RefAttributes<import("./combobox").WarpCombobox>, "ref">, "help-text" | "open-on-focus" | "select-on-blur" | "match-text-segments" | "disable-static-filtering"> & {
         openOnFocus?: boolean;
         selectOnBlur?: boolean;

package/dist/packages/combobox/combobox.react.stories.js

@@ -1,83 +1,83 @@
-import React from 'react';
-import { Combobox } from './react';
+import React from "react";
+import { Combobox } from "./react";
 export default {
-    title: 'Forms/Combobox',
+    title: "Forms/Combobox",
     component: Combobox,
     render(args) {
         return React.createElement(Combobox, { ...args, options: sampleOptions });
     },
 };
 const sampleOptions = [
-    { value: 'Apple', label: 'Apple' },
-    { value: 'Banana', label: 'Banana' },
-    { value: 'Orange', label: 'Orange' },
-    { value: 'Grape', label: 'Grape' },
-    { value: 'Strawberry', label: 'Strawberry' },
-    { value: 'Pineapple', label: 'Pineapple' },
-    { value: 'Mango', label: 'Mango' },
+    { value: "Apple", label: "Apple" },
+    { value: "Banana", label: "Banana" },
+    { value: "Orange", label: "Orange" },
+    { value: "Grape", label: "Grape" },
+    { value: "Strawberry", label: "Strawberry" },
+    { value: "Pineapple", label: "Pineapple" },
+    { value: "Mango", label: "Mango" },
 ];
 export const Default = {
     args: {
         options: sampleOptions,
-        label: 'Select a fruit',
-        placeholder: 'Type to search...',
+        label: "Select a fruit",
+        placeholder: "Type to search...",
     },
 };
 export const WithValue = {
     args: {
         options: sampleOptions,
-        label: 'Select a fruit',
-        placeholder: 'Type to search...',
-        value: 'Apple',
+        label: "Select a fruit",
+        placeholder: "Type to search...",
+        value: "Apple",
     },
 };
 export const OpenOnFocus = {
     args: {
         options: sampleOptions,
-        label: 'Select a fruit',
-        placeholder: 'Type to search...',
+        label: "Select a fruit",
+        placeholder: "Type to search...",
         openOnFocus: true,
     },
 };
 export const WithTextMatching = {
     args: {
         options: sampleOptions,
-        label: 'Select a fruit',
-        placeholder: 'Type to search...',
+        label: "Select a fruit",
+        placeholder: "Type to search...",
         matchTextSegments: true,
     },
 };
 export const Invalid = {
     args: {
         options: sampleOptions,
-        label: 'Select a fruit',
-        placeholder: 'Type to search...',
-        value: 'Invalid fruit',
-        helpText: 'Please select a valid fruit from the list',
+        label: "Select a fruit",
+        placeholder: "Type to search...",
+        value: "Invalid fruit",
+        helpText: "Please select a valid fruit from the list",
         invalid: true,
     },
 };
 export const Disabled = {
     args: {
         options: sampleOptions,
-        label: 'Select a fruit',
-        placeholder: 'Type to search...',
-        value: 'Apple',
+        label: "Select a fruit",
+        placeholder: "Type to search...",
+        value: "Apple",
         disabled: true,
     },
 };
 export const Optional = {
     args: {
         options: sampleOptions,
-        label: 'Select a fruit',
-        placeholder: 'Type to search...',
+        label: "Select a fruit",
+        placeholder: "Type to search...",
         optional: true,
     },
 };
 export const DisableStaticFiltering = {
     render: () => {
         const [options, setOptions] = React.useState(sampleOptions);
-        const [val, setVal] = React.useState('');
+        const [val, setVal] = React.useState("");
         return (React.createElement(Combobox, { id: "combobox-dynamic", label: "Select a fruit (dynamic)", placeholder: "Type to search...", disableStaticFiltering: true, value: val, options: options, onChange: (e) => {
                 setVal(e.detail.value);
                 // Simulate dynamic filtering

package/dist/packages/combobox/combobox.react.test.js

@@ -1,9 +1,9 @@
-import { describeReactSsrAttributeMapping } from '../../tests/react-ssr-attributes';
-import { Combobox } from './react.js';
-describeReactSsrAttributeMapping('Combobox', Combobox, [
-    { propName: 'openOnFocus', attrName: 'open-on-focus' },
-    { propName: 'selectOnBlur', attrName: 'select-on-blur' },
-    { propName: 'matchTextSegments', attrName: 'match-text-segments' },
-    { propName: 'disableStaticFiltering', attrName: 'disable-static-filtering' },
-    { propName: 'helpText', attrName: 'help-text', value: 'Help text' },
+import { describeReactSsrAttributeMapping } from "../../tests/react-ssr-attributes";
+import { Combobox } from "./react.js";
+describeReactSsrAttributeMapping("Combobox", Combobox, [
+    { propName: "openOnFocus", attrName: "open-on-focus" },
+    { propName: "selectOnBlur", attrName: "select-on-blur" },
+    { propName: "matchTextSegments", attrName: "match-text-segments" },
+    { propName: "disableStaticFiltering", attrName: "disable-static-filtering" },
+    { propName: "helpText", attrName: "help-text", value: "Help text" },
 ]);

package/dist/packages/combobox/combobox.stories.d.ts

@@ -1,7 +1,7 @@
-import type { Meta, StoryObj } from '@storybook/web-components';
-import './combobox.js';
-import '../textfield/textfield.js';
-import type { WarpCombobox } from './combobox.js';
+import type { Meta, StoryObj } from "@storybook/web-components";
+import "./combobox.js";
+import "../textfield/textfield.js";
+import type { WarpCombobox } from "./combobox.js";
 declare const args: Partial<WarpCombobox> & {
     [key: string]: any;
 };

package/dist/packages/combobox/combobox.stories.js

@@ -1,20 +1,24 @@
-import { spread } from '@open-wc/lit-helpers';
-import { getStorybookHelpers } from '@wc-toolkit/storybook-helpers';
-import { html } from 'lit';
-import { prespread } from '../../.storybook/utilities.js';
-import './combobox.js';
-import '../textfield/textfield.js';
-const { events, args, argTypes } = getStorybookHelpers('w-combobox');
+import { spread } from "@open-wc/lit-helpers";
+import { getStorybookHelpers } from "@wc-toolkit/storybook-helpers";
+import { html } from "lit";
+import { prespread } from "../../.storybook/utilities.js";
+import "./combobox.js";
+import "../textfield/textfield.js";
+const { events, args, argTypes } = getStorybookHelpers("w-combobox");
 const meta = {
-    title: 'Forms/Combobox',
-    component: 'w-combobox',
+    title: "Forms/Combobox",
+    component: "w-combobox",
     render(args) {
-        return html ` <w-combobox ${spread(prespread(args))} .options="${sampleOptions}"></w-combobox> `;
+        return html `
+			<w-combobox ${spread(prespread(args))}>
+				${sampleOptionElements}
+			</w-combobox>
+		`;
     },
     parameters: {
         docs: {
             description: {
-                component: 'A combobox element for text input with selectable options.',
+                component: "A combobox element for text input with selectable options.",
             },
         },
         actions: {
@@ -26,118 +30,133 @@ const meta = {
 };
 export default meta;
 const sampleOptions = [
-    { value: 'apple', label: 'Apple' },
-    { value: 'banana', label: 'Banana' },
-    { value: 'orange', label: 'Orange' },
-    { value: 'grape', label: 'Grape' },
-    { value: 'strawberry', label: 'Strawberry' },
-    { value: 'pineapple', label: 'Pineapple' },
-    { value: 'mango', label: 'Mango' },
+    { value: "apple", label: "Apple" },
+    { value: "banana", label: "Banana" },
+    { value: "orange", label: "Orange" },
+    { value: "grape", label: "Grape" },
+    { value: "strawberry", label: "Strawberry" },
+    { value: "pineapple", label: "Pineapple" },
+    { value: "mango", label: "Mango" },
 ];
+const sampleOptionElements = html `
+	<option value="apple">Apple</option>
+	<option value="banana">Banana</option>
+	<option value="orange">Orange</option>
+	<option value="grape">Grape</option>
+	<option value="strawberry">Strawberry</option>
+	<option value="pineapple">Pineapple</option>
+	<option value="mango">Mango</option>
+`;
 export const Default = {
     args: {},
-    render: () => html ` <w-combobox label="Select a fruit" placeholder="Type to search..." .options="${sampleOptions}"></w-combobox> `,
+    render: () => html `
+		<w-combobox label="Select a fruit" placeholder="Type to search...">
+			${sampleOptionElements}
+		</w-combobox>
+	`,
 };
 export const WithValue = {
     args: {
-        options: sampleOptions,
-        label: 'Select a fruit',
-        placeholder: 'Type to search...',
-        value: 'Apple',
+        label: "Select a fruit",
+        placeholder: "Type to search...",
+        value: "apple",
     },
 };
 export const OpenOnFocus = {
     args: {
-        options: sampleOptions,
-        label: 'Select a fruit',
-        placeholder: 'Type to search...',
+        label: "Select a fruit",
+        placeholder: "Type to search...",
         openOnFocus: true,
     },
 };
 export const WithTextMatching = {
     args: {
-        options: sampleOptions,
-        label: 'Select a fruit',
-        placeholder: 'Type to search...',
+        label: "Select a fruit",
+        placeholder: "Type to search...",
         matchTextSegments: true,
     },
 };
 export const Invalid = {
     args: {
-        options: sampleOptions,
-        label: 'Select a fruit',
-        placeholder: 'Type to search...',
-        value: 'Invalid fruit',
-        helpText: 'Please select a valid fruit from the list',
+        label: "Select a fruit",
+        placeholder: "Type to search...",
+        value: "Invalid fruit",
+        helpText: "Please select a valid fruit from the list",
         invalid: true,
     },
 };
 export const Disabled = {
     args: {
-        options: sampleOptions,
-        label: 'Select a fruit',
-        placeholder: 'Type to search...',
-        value: 'Apple',
+        label: "Select a fruit",
+        placeholder: "Type to search...",
+        value: "apple",
         disabled: true,
     },
 };
 export const Optional = {
     args: {
-        options: sampleOptions,
-        label: 'Select a fruit',
-        placeholder: 'Type to search...',
+        label: "Select a fruit",
+        placeholder: "Type to search...",
         optional: true,
     },
 };
 export const DisableStaticFiltering = {
     render: () => html `
-    <w-combobox
-      id="combobox-dynamic"
-      label="Select a fruit (dynamic)"
-      placeholder="Type to search..."
-      disable-static-filtering></w-combobox>
-    <script type="module">
-      const combobox = document.querySelector('#combobox-dynamic');
-      const sampleOptions = ${JSON.stringify(sampleOptions)};
-      combobox.options = sampleOptions;
-      combobox.value = '';
+		<w-combobox
+			id="combobox-dynamic"
+			label="Select a fruit (dynamic)"
+			placeholder="Type to search..."
+			disable-static-filtering
+		></w-combobox>
+		<script type="module">
+			const combobox = document.querySelector("#combobox-dynamic");
+			const sampleOptions = ${JSON.stringify(sampleOptions)};
+			combobox.options = sampleOptions;
+			combobox.value = "";
 
-      combobox.addEventListener('change', (e) => {
-        combobox.value = e?.detail?.value;
-        // Simulate dynamic filtering
-        const filteredOptions = sampleOptions.filter((option) => option.value.toLowerCase().includes(e?.detail?.value.toLowerCase()));
-        combobox.options = filteredOptions;
-      });
+			combobox.addEventListener("change", (e) => {
+				combobox.value = e?.detail?.value;
+				// Simulate dynamic filtering
+				const filteredOptions = sampleOptions.filter((option) =>
+					option.value.toLowerCase().includes(e?.detail?.value.toLowerCase()),
+				);
+				combobox.options = filteredOptions;
+			});
 
-      combobox.addEventListener('select', (e) => {
-        combobox.value = e?.detail?.value;
-      });
-    </script>
-  `,
+			combobox.addEventListener("select", (e) => {
+				combobox.value = e?.detail?.value;
+			});
+		</script>
+	`,
 };
 export const FormSubmission = {
     render: () => html `
-    <p>Resetting the form should return values to the initial values</p>
-    <p>Submitting the form should result in the values being in the resulting pages query parameters</p>
-    <form>
-      <w-combobox
-        id="form-submission"
-        name="warp-combo-1"
-        label="Select a fruit (dynamic)"
-        placeholder="Type to search..."
-        .options="${sampleOptions}"
-      ></w-combobox>
-      <br>
-      <w-combobox
-        id="form-submission"
-        name="warp-combo-2"
-        label="Select a fruit (dynamic)"
-        value="Banana"
-        placeholder="Type to search..."
-        .options="${sampleOptions}"
-      ></w-combobox>
-        <button type="reset">Reset</button>
-        <button type="submit">Submit</button>
-    </form>
-  `,
+		<p>Resetting the form should return values to the initial values</p>
+		<p>
+			Submitting the form should result in the values being in the resulting
+			pages query parameters
+		</p>
+		<form>
+			<w-combobox
+				id="form-submission"
+				name="warp-combo-1"
+				label="Select a fruit (dynamic)"
+				placeholder="Type to search..."
+			>
+				${sampleOptionElements}
+			</w-combobox>
+			<br />
+			<w-combobox
+				id="form-submission"
+				name="warp-combo-2"
+				label="Select a fruit (dynamic)"
+				value="banana"
+				placeholder="Type to search..."
+			>
+				${sampleOptionElements}
+			</w-combobox>
+			<button type="reset">Reset</button>
+			<button type="submit">Submit</button>
+		</form>
+	`,
 };

package/dist/packages/combobox/combobox.test.d.ts

@@ -1,2 +1,2 @@
-import '../textfield/textfield.js';
-import './combobox.js';
+import "../textfield/textfield.js";
+import "./combobox.js";