@warp-ds/elements 2.2.0-next.29 → 2.2.0-next.30

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@warp-ds/elements",
   "type": "module",
-  "version": "2.2.0-next.29",
+  "version": "2.2.0-next.30",
   "packageManager": "pnpm@10.19.0",
   "description": "Custom elements for Warp",
   "exports": {

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

@@ -1,28 +0,0 @@
-import React from 'react';
-import { StoryObj } from '@storybook/react';
-import { Combobox } from './react';
-declare const _default: {
-    title: string;
-    component: import("@lit/react").ReactWebComponent<import(".").WarpCombobox, {
-        onSelect: string;
-        onselect: string;
-        onChange: string;
-        onchange: string;
-    }>;
-    render(args: Omit<React.HTMLAttributes<import(".").WarpCombobox>, "label" | "onchange" | "onselect" | "onChange" | "onSelect" | "render" | "renderOptions" | "connectedCallback" | "disconnectedCallback" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "disabled" | "name" | "value" | "invalid" | "options" | "placeholder" | "openOnFocus" | "selectOnBlur" | "matchTextSegments" | "disableStaticFiltering" | "helpText" | "required" | "optional" | "containerClassName" | "listClassName"> & {
-        onSelect?: (e: Event) => void;
-        onselect?: (e: Event) => void;
-        onChange?: (e: Event) => void;
-        onchange?: (e: Event) => void;
-    } & Partial<Omit<import(".").WarpCombobox, keyof HTMLElement>> & React.RefAttributes<import(".").WarpCombobox>): React.JSX.Element;
-};
-export default _default;
-export type Story = StoryObj<typeof Combobox>;
-export declare const Default: Story;
-export declare const WithValue: Story;
-export declare const OpenOnFocus: Story;
-export declare const WithTextMatching: Story;
-export declare const Invalid: Story;
-export declare const Disabled: Story;
-export declare const Optional: Story;
-export declare const DisableStaticFiltering: Story;

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

@@ -1,90 +0,0 @@
-import React from 'react';
-import { Combobox } from './react';
-export default {
-    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' },
-];
-export const Default = {
-    args: {
-        options: sampleOptions,
-        label: 'Select a fruit',
-        placeholder: 'Type to search...',
-    },
-};
-export const WithValue = {
-    args: {
-        options: sampleOptions,
-        label: 'Select a fruit',
-        placeholder: 'Type to search...',
-        value: 'Apple',
-    },
-};
-export const OpenOnFocus = {
-    args: {
-        options: sampleOptions,
-        label: 'Select a fruit',
-        placeholder: 'Type to search...',
-        openOnFocus: true,
-    },
-};
-export const WithTextMatching = {
-    args: {
-        options: sampleOptions,
-        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',
-        invalid: true,
-    },
-};
-export const Disabled = {
-    args: {
-        options: sampleOptions,
-        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...',
-        optional: true,
-    },
-};
-export const DisableStaticFiltering = {
-    render: () => {
-        const [options, setOptions] = React.useState(sampleOptions);
-        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
-                const filteredOptions = sampleOptions.filter((option) => option.value.toLowerCase().includes(e.detail.value.toLowerCase()));
-                setOptions(filteredOptions);
-            }, onSelect: (e) => {
-                setVal(e.detail.value);
-            } }));
-    },
-};

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

@@ -1,18 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/web-components';
-import './index.js';
-import '../textfield/index.js';
-import type { WarpCombobox } from './index.js';
-declare const args: Partial<WarpCombobox> & {
-    [key: string]: any;
-};
-declare const meta: Meta<typeof args>;
-export default meta;
-type Story = StoryObj<WarpCombobox>;
-export declare const Default: Story;
-export declare const WithValue: Story;
-export declare const OpenOnFocus: Story;
-export declare const WithTextMatching: Story;
-export declare const Invalid: Story;
-export declare const Disabled: Story;
-export declare const Optional: Story;
-export declare const DisableStaticFiltering: Story;

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

@@ -1,117 +0,0 @@
-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 './index.js';
-import '../textfield/index.js';
-const { events, args, argTypes } = getStorybookHelpers('w-combobox');
-const meta = {
-    title: 'Forms/Combobox',
-    component: 'w-combobox',
-    render(args) {
-        return html ` <w-combobox ${spread(prespread(args))} .options="${sampleOptions}"></w-combobox> `;
-    },
-    parameters: {
-        docs: {
-            description: {
-                component: 'A combobox element for text input with selectable options.',
-            },
-        },
-        actions: {
-            handles: events,
-        },
-    },
-    args,
-    argTypes,
-};
-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' },
-];
-export const Default = {
-    args: {},
-    render: () => html ` <w-combobox label="Select a fruit" placeholder="Type to search..." .options="${sampleOptions}"></w-combobox> `,
-};
-export const WithValue = {
-    args: {
-        options: sampleOptions,
-        label: 'Select a fruit',
-        placeholder: 'Type to search...',
-        value: 'Apple',
-    },
-};
-export const OpenOnFocus = {
-    args: {
-        options: sampleOptions,
-        label: 'Select a fruit',
-        placeholder: 'Type to search...',
-        openOnFocus: true,
-    },
-};
-export const WithTextMatching = {
-    args: {
-        options: sampleOptions,
-        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',
-        invalid: true,
-    },
-};
-export const Disabled = {
-    args: {
-        options: sampleOptions,
-        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...',
-        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 = '';
-
-      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>
-  `,
-};

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

@@ -1,95 +0,0 @@
-import { LitElement, PropertyValues } from 'lit';
-export declare const ccCombobox: {
-    wrapper: string;
-    base: string;
-    listbox: string;
-    option: string;
-    optionUnselected: string;
-    optionSelected: string;
-    textMatch: string;
-    a11y: string;
-};
-export interface ComboboxOption {
-    value: string;
-    label?: string;
-    key?: string;
-}
-/**
- * A combobox element for text input with selectable options.
- *
- * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-combobox--docs)
- */
-export declare class WarpCombobox extends LitElement {
-    /** The available options to select from */
-    options: ComboboxOption[];
-    /** Label above input */
-    label?: string;
-    /** Input placeholder */
-    placeholder?: string;
-    /** The input value */
-    value: string;
-    /** Whether the popover opens when focus is on the text field */
-    openOnFocus: boolean;
-    /** Select active option on blur */
-    selectOnBlur: boolean;
-    /** Whether the matching text segments in the options should be highlighted */
-    matchTextSegments: boolean;
-    /** Disable client-side static filtering */
-    disableStaticFiltering: boolean;
-    /** Renders the input field in an invalid state */
-    invalid: boolean;
-    /** The content to display as the help text */
-    helpText?: string;
-    /** Whether the element is disabled */
-    disabled: boolean;
-    /** Whether the element is required */
-    required: boolean;
-    /** Whether to show optional text */
-    optional: boolean;
-    /** Additional container styling */
-    containerClassName?: string;
-    /** Additional list styling */
-    listClassName?: string;
-    /** Name attribute for form submission */
-    name?: string;
-    /** @internal Options list open boolean */
-    private _isOpen;
-    /** @internal The option the user has navigated to with their keyboard */
-    private _navigationOption;
-    /** @internal Available options based on user's input value */
-    private _currentOptions;
-    /** @internal Unique identifier counter for options */
-    private _optionIdCounter;
-    static styles: import("lit").CSSResult[];
-    constructor();
-    private get _listboxId();
-    private get _id();
-    private get _helpId();
-    private get _navigationValueOrInputValue();
-    /** Generate options with unique IDs and match information */
-    private _createOptionsWithIdAndMatch;
-    /** Get ARIA text for screen readers */
-    private _getAriaText;
-    /** Get option classes */
-    private _getOptionClasses;
-    /** Handle keyboard navigation */
-    private _handleKeyDown;
-    /** Find and set active option based on keyboard navigation */
-    private _findAndSetActiveOption;
-    /** Handle option selection */
-    private _handleSelect;
-    /** Handle input change */
-    private _handleChange;
-    /** Handle input focus */
-    private _handleFocus;
-    /** Handle input blur */
-    private _handleBlur;
-    /** Handle option click */
-    private _handleOptionClick;
-    /** Handle container blur */
-    private _handleContainerBlur;
-    /** Render highlighted text match */
-    private _renderTextMatch;
-    protected willUpdate(changedProperties: PropertyValues<this>): void;
-    render(): import("lit").TemplateResult<1>;
-}