@ukic/canary-web-components 2.0.0-canary.7 → 2.0.0-canary.8

package/dist/types/components/ic-menu-with-multi/ic-menu.d.ts

@@ -0,0 +1,208 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { IcActivationTypes, IcMenuOption, IcSizes } from "@ukic/web-components/dist/types/utils/types";
+import { IcOptionSelectEventDetail, IcMenuChangeEventDetail, IcMenuOptionIdEventDetail, IcSearchBarSearchModes } from "@ukic/web-components/dist/types/components";
+import { IcValueEventDetail } from "../../utils/types";
+export declare class Menu {
+    private activeDescendantAttr;
+    private clearButtonId;
+    private disabledOptionSelected;
+    private hasPreviouslyBlurred;
+    private hasTimedOut;
+    private isLoading;
+    private isMultiSelect;
+    private isSearchBar;
+    private isSearchableSelect;
+    private menu;
+    private multiOptionClicked;
+    private popperInstance;
+    private preventClickOpen;
+    private preventMenuFocus;
+    private selectAllButton;
+    private ungroupedOptions;
+    el: HTMLIcMenuWithMultiElement;
+    focusFromSearchKeypress: boolean;
+    initialOptionsListRender: boolean;
+    keyboardNav: boolean;
+    optionHighlighted: string;
+    preventIncorrectTabOrder: boolean;
+    menuOptions: IcMenuOption[];
+    /**
+     * Determines whether options manually set as values (by pressing 'Enter') when they receive focus using keyboard navigation.
+     */
+    activationType?: IcActivationTypes;
+    /**
+     * The reference to an anchor element the menu will position itself from when rendered.
+     */
+    anchorEl: HTMLElement;
+    /**
+     * @internal If `true`, autofocus will be applied on selected item when menu is open.
+     */
+    autoFocusOnSelected: boolean;
+    /**
+     *  If `true`, the menu will close when an option is selected.
+     */
+    closeOnSelect: boolean;
+    /**
+     *  If `true`, the menu will fill the width of the container.
+     */
+    fullWidth: boolean;
+    /**
+     * The reference to the input element.
+     */
+    inputEl: HTMLElement;
+    /**
+     * The label for the input element.
+     */
+    inputLabel: string;
+    /**
+     * The custom name for the label field for IcMenuOption.
+     */
+    labelField: string;
+    /**
+     * The ID of the menu.
+     */
+    menuId: string;
+    /**
+     * If `true`, the menu will be displayed open.
+     */
+    open: boolean;
+    watchOpenHandler(): void;
+    /**
+     * @internal - The parent element if ic-menu is nested inside another component.
+     */
+    parentEl?: HTMLElement;
+    /**
+     * Specify the mode search bar uses to search. `navigation` allows for quick lookups of a set of values, `query` allows for more general searches.
+     */
+    searchMode?: IcSearchBarSearchModes;
+    /**
+     * @internal If `true`, the icOptionSelect event will be fired on enter instead of ArrowUp and ArrowDown.
+     */
+    selectOnEnter?: boolean;
+    /**
+     * The size of the menu.
+     */
+    size?: IcSizes;
+    /**
+     * @deprecated This prop should not be used anymore. Set prop `size` to "small" instead.
+     */
+    small?: boolean;
+    /**
+     * The possible menu selection options.
+     */
+    options: IcMenuOption[];
+    watchOptionsHandler(newOptions: IcMenuOption[]): void;
+    /**
+     * The value of the currently selected option - or array of values (if multiple options allowed).
+     */
+    value: string | string[];
+    /**
+     * The custom name for the value field for IcMenuOption.
+     */
+    valueField: string;
+    /**
+     * @internal Emitted when key is pressed while menu is open.
+     */
+    menuKeyPress: EventEmitter<{
+        isNavKey: boolean;
+        key: string;
+    }>;
+    /**
+     * @internal Emitted when an option has been highlighted.
+     */
+    menuOptionId: EventEmitter<IcMenuOptionIdEventDetail>;
+    /**
+     * @internal Emitted when an option is selected.
+     */
+    menuOptionSelect: EventEmitter<IcOptionSelectEventDetail>;
+    /**
+     * @internal Emitted when all options are selected or deselected.
+     */
+    menuOptionSelectAll: EventEmitter<{
+        select: boolean;
+    }>;
+    /**
+     * @internal Emitted when state of menu changes (i.e. open or close).
+     */
+    menuStateChange: EventEmitter<IcMenuChangeEventDetail>;
+    /**
+     * @internal Emitted when the retry button is clicked.
+     */
+    retryButtonClicked: EventEmitter<IcValueEventDetail>;
+    /**
+     * @internal Emitted when the timeout menu loses focus.
+     */
+    timeoutBlur: EventEmitter<{
+        ev: FocusEvent;
+    }>;
+    /**
+     * @internal Emitted when the ungrouped options have been set.
+     */
+    ungroupedOptionsSet: EventEmitter<{
+        options: IcMenuOption[];
+    }>;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    componentDidUpdate(): void;
+    componentDidRender(): void;
+    /**
+     * @internal If menu is opened with the mouse, emit menuStateChange custom event.
+     */
+    handleClickOpen(): Promise<void>;
+    /**
+     * Used alongside activationType
+     * If menu is opened via keyboard navigation (i.e. Enter, ArrowUp or ArrowDown), emit optionSelect custom event.
+     * @param {KeyboardEvent} event - keyboard event
+     */
+    handleKeyboardOpen(event: KeyboardEvent): Promise<void>;
+    /**
+     * @internal Used to highlight the first option in the menu.
+     */
+    handleSetFirstOption(): Promise<void>;
+    /**
+     * @internal Used to initialize popperJS with an anchor element.
+     * 5/12/2023: Tested with Floating UI, however, discovered inconsistent
+     * boundary behaviour so sticking with PopperJS.
+     */
+    initPopperJs(anchor: HTMLElement): Promise<void>;
+    private handleClearListener;
+    private handleSubmitSearch;
+    private handleMenuChange;
+    private setNextOptionValue;
+    private setPreviousOptionValue;
+    private getParentEl;
+    private arrowBehaviour;
+    private getMenuOptions;
+    private setHighlightedOption;
+    private autoSetInputValueKeyboardOpen;
+    private selectHighlightedOption;
+    private manualSetInputValueKeyboardOpen;
+    private setInputValue;
+    private handleOptionClick;
+    private handleRetry;
+    private handleRetryKeyDown;
+    private handleBlur;
+    private handleMouseDown;
+    private handleMenuKeyDown;
+    private handleMenuKeyUp;
+    private handleSelectAllClick;
+    private handleSelectAllBlur;
+    private handleSelectAllFocus;
+    private handleSelectAllMouseDown;
+    private emitSelectAll;
+    private emitMenuKeyPress;
+    private autoSetValueOnMenuKeyDown;
+    private getOptionId;
+    private getOptionAriaLabel;
+    private getSortedOptions;
+    private isManualMode;
+    private scrollToSelected;
+    private loadUngroupedOptions;
+    private setMenuScrollbar;
+    private handleTimeoutBlur;
+    private optionContent;
+    private displayOption;
+    render(): any;
+}

package/dist/types/components/ic-select-with-multi/ic-select.d.ts

@@ -0,0 +1,289 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { IcOptionSelectEventDetail } from "@ukic/web-components/dist/types/components";
+import { IcMenuOption, IcSizes } from "@ukic/web-components/dist/types/utils/types";
+import { IcInformationStatusOrEmpty, IcSearchMatchPositions, IcValueEventDetail } from "../../utils/types";
+export declare class Select {
+    private anchorEl;
+    private blurredBecauseButtonPressed;
+    private characterKeyPressTimer;
+    private clearButton;
+    private customSelectElement;
+    private debounceAria;
+    private hasSetDefaultValue;
+    private hasTimedOut;
+    private inheritedAttributes;
+    private initialOptionsEmpty;
+    private inputId;
+    private menu;
+    private menuId;
+    private nativeSelectElement;
+    private retryButtonClick;
+    private searchableMenuItemSelected;
+    private searchableSelectElement;
+    private timeoutTimer;
+    private ungroupedOptions;
+    el: HTMLIcSelectWithMultiElement;
+    ariaActiveDescendant: string;
+    clearButtonFocused: boolean;
+    debounceIcChange: number;
+    hiddenInputValue: string;
+    noOptions: IcMenuOption[];
+    open: boolean;
+    pressedCharacters: string;
+    searchableSelectInputValue: string;
+    /**
+     * **[DEPRECATED]** This prop should not be used anymore.
+     */
+    charactersUntilSuggestions?: number;
+    /**
+     * If `true`, the disabled state will be set.
+     */
+    disabled?: boolean;
+    /**
+     * If `true`, the built in filtering will be disabled for a searchable variant. For example, if options will already be filtered from external source.
+     */
+    disableFilter?: boolean;
+    /**
+     * The text displayed when there are no options in the option list.
+     */
+    emptyOptionListText: string;
+    /**
+     * The <form> element to associate the select with.
+     */
+    form?: string;
+    /**
+     * The URL that processes the information submitted by the select. It overrides the action attribute of the select's form owner. Does nothing if there is no form owner.
+     * This prop should only be used with searchable select and will only be applied if searchable is true.
+     */
+    formaction?: string;
+    /**
+     * The way the submitted form data is encoded. This prop should only be used with searchable select and will only be applied if searchable is true.
+     */
+    formenctype?: string;
+    /**
+     * The HTTP method used to submit the form. This prop should only be used with searchable select and will only be applied if searchable is true.
+     */
+    formmethod?: string;
+    /**
+     * If `true`, the form will not be validated when submitted. This prop should only be used with searchable select and will only be applied if searchable is true.
+     */
+    formnovalidate?: boolean;
+    /**
+     * The place to display the response from submitting the form. It overrides the target attribute of the select's form owner.
+     * This prop should only be used with searchable select and will only be applied if searchable is true.
+     */
+    formtarget?: string;
+    /**
+     * If `true`, the select element will fill the width of the container. This prop should only be used with searchable select and will only be applied if searchable is true.
+     */
+    fullWidth: boolean;
+    /**
+     * The helper text that will be displayed for additional field guidance.
+     */
+    helperText?: string;
+    /**
+     * If `true`, the label will be hidden and the required label value will be applied as an aria-label.
+     */
+    hideLabel?: boolean;
+    /**
+     * If `true`, descriptions of options will be included when filtering options in a searchable select. Only applies to built in filtering.
+     */
+    includeDescriptionsInSearch?: boolean;
+    /**
+     * If `true`, group titles of grouped options will be included when filtering options in a searchable select. Only applies to built in filtering.
+     */
+    includeGroupTitlesInSearch?: boolean;
+    /**
+     * The label for the select.
+     */
+    label: string;
+    /**
+     * The message displayed when external loading times out.
+     */
+    loadingErrorLabel?: string;
+    /**
+     * The message displayed whilst the options are being loaded externally.
+     */
+    loadingLabel?: string;
+    /**
+     * If `true`, multiple options can be selected.
+     */
+    multiple?: boolean;
+    /**
+     * The name of the control, which is submitted with the form data.
+     */
+    name?: string;
+    /**
+     * The placeholder value to be displayed.
+     */
+    placeholder?: string;
+    /**
+     * If `true`, the readonly state will be set.
+     */
+    readonly?: boolean;
+    /**
+     * If `true`, the select will require a value.
+     */
+    required?: boolean;
+    /**
+     * If `true`, a searchable variant of the select will be displayed which can be typed in to filter options.
+     */
+    searchable?: boolean;
+    /**
+     * Whether the search string of the searchable select should match the start of or anywhere in the options. Only applies to built in filtering.
+     */
+    searchMatchPosition?: IcSearchMatchPositions;
+    /**
+     * If `true`, the icOptionSelect event will be fired on enter instead of ArrowUp and ArrowDown.
+     */
+    selectOnEnter?: boolean;
+    /**
+     * If `true`, a button which clears the select input when clicked will be displayed. The button will always appear on the searchable select.
+     */
+    showClearButton?: boolean;
+    /**
+     * The size of the select.
+     */
+    size?: IcSizes;
+    /**
+     * **[DEPRECATED]** This prop should not be used anymore. Set prop `size` to "small" instead.
+     */
+    small?: boolean;
+    /**
+     * If using external filtering, set a timeout for when loading takes too long.
+     */
+    timeout?: number;
+    /**
+     * The validation status - e.g. 'error' | 'warning' | 'success'.
+     */
+    validationStatus?: IcInformationStatusOrEmpty;
+    /**
+     * The text to display as the validation message.
+     */
+    validationText?: string;
+    /**
+     * If `true`, the loading state will be triggered when fetching options asynchronously.
+     */
+    loading?: boolean;
+    loadingHandler(newValue: boolean): void;
+    /**
+     * The possible selection options.
+     */
+    options?: IcMenuOption[];
+    filteredOptions: IcMenuOption[];
+    uniqueOptions: IcMenuOption[];
+    watchOptionsHandler(): void;
+    /**
+     * The amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke.
+     */
+    debounce?: number;
+    currDebounce: number;
+    debounceChangedHandler(newValue: number): void;
+    /**
+     * The value of the select, reflected by the value of the currently selected option.
+     * For the searchable variant, the value is also reflected by the user input.
+     * For the multi-select variant, the value must be an array of option values.
+     */
+    value?: string | string[];
+    initialValue: string | string[];
+    inputValueToFilter: string;
+    currValue: string | string[];
+    valueChangedHandler(): void;
+    /**
+     * Emitted when the select loses focus.
+     */
+    icBlur: EventEmitter<void>;
+    /**
+     * Emitted when the value changes.
+     */
+    icChange: EventEmitter<IcValueEventDetail>;
+    /**
+     * Emitted when the clear button is clicked.
+     */
+    icClear: EventEmitter<void>;
+    /**
+     * Emitted when the select gains focus.
+     */
+    icFocus: EventEmitter<void>;
+    /**
+     * Emitted when a keyboard input occurred.
+     */
+    icInput: EventEmitter<IcValueEventDetail>;
+    /**
+     * Emitted when an option is selected.
+     * Selecting an option will also trigger an `icChange/onIcChange` due to the value being updated.
+     */
+    icOptionSelect: EventEmitter<IcOptionSelectEventDetail>;
+    /**
+     * Emitted when `multiple` is `true` and an option is deselected.
+     */
+    icOptionDeselect: EventEmitter<IcOptionSelectEventDetail>;
+    /**
+     * Emitted when the 'retry loading' button is clicked for a searchable variant.
+     */
+    icRetryLoad: EventEmitter<IcValueEventDetail>;
+    disconnectedCallback(): void;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    componentDidRender(): void;
+    /**
+     * Sets focus on the input box.
+     */
+    setFocus(): Promise<void>;
+    private handleRetry;
+    private updateOnChangeDebounce;
+    private emitIcChange;
+    private emitImmediateIcChange;
+    /**
+     * Processes the provided array of IcMenuOptions, removing duplicates and reporting them with a console.warn
+     * @param options array of IcMenuOptions
+     * @returns a new options object, with all entries possessing a duplicate 'value' field removed
+     */
+    private deduplicateOptions;
+    /**
+     * Loop through options array and for all options with no value, infer it from the label
+     */
+    private setOptionsValuesFromLabels;
+    private setUngroupedOptions;
+    private setTextColor;
+    private setMenuChange;
+    private getLabelFromValue;
+    private getMultipleOptionsString;
+    private getFilteredChildMenuOptions;
+    private getValueSortedByOptions;
+    private handleNativeSelectChange;
+    private handleCustomSelectChange;
+    private handleMultipleSelectChange;
+    private handleSelectAllChange;
+    private handleMenuChange;
+    private handleMenuKeyPress;
+    private handleFocusIndicatorDisplay;
+    private handleMouseDown;
+    private isExternalFiltering;
+    private handleClick;
+    private handleExpandIconMouseDown;
+    private handleClear;
+    private handleCharacterKeyDown;
+    private handleNativeSelectKeyDown;
+    private handleKeyDown;
+    private handleClearButtonFocus;
+    private handleClearButtonBlur;
+    private handleFilter;
+    /**
+     * Put the select component into loading state.
+     * Replace options with the loading message. If timeout is enabled, set the timeout and once passed, replace options with the loading error message
+     */
+    private triggerLoading;
+    private getValueFromLabel;
+    private handleSearchableSelectInput;
+    private updateSearchableSelectResultAriaLive;
+    private debounceAriaLiveUpdate;
+    private updateMultiSelectedCountAriaLive;
+    private getDefaultValue;
+    private setDefaultValue;
+    private onFocus;
+    private onBlur;
+    private onTimeoutBlur;
+    private handleFormReset;
+    render(): any;
+}

package/dist/types/components/ic-select-with-multi/story-data.d.ts

@@ -0,0 +1,32 @@
+import { IcMenuOption } from "@ukic/web-components";
+export declare const OPTIONS: IcMenuOption[];
+export declare const OPTIONS_WITH_DESCRIPTIONS: IcMenuOption[];
+export declare const OPTIONS_WITH_DISABLED: IcMenuOption[];
+export declare const GROUPED_OPTIONS: IcMenuOption[];
+export declare const OPTIONS_WITH_RECOMMENDED: ({
+    label: string;
+    value: string;
+    recommended?: undefined;
+} | {
+    label: string;
+    value: string;
+    recommended: boolean;
+})[];
+export declare const createMultiSelectElement: (options?: IcMenuOption[]) => HTMLIcSelectWithMultiElement;
+export declare const createContainer: (elementArray: HTMLElement[], height?: string) => HTMLDivElement;
+export declare const Default: () => HTMLDivElement;
+export declare const DefaultValue: () => HTMLDivElement;
+export declare const WithClearButton: () => HTMLDivElement;
+export declare const WithDescriptions: () => HTMLDivElement;
+export declare const HelperText: () => HTMLDivElement;
+export declare const Sizes: () => HTMLDivElement;
+export declare const Disabled: () => HTMLDivElement;
+export declare const DisabledOptions: () => HTMLDivElement;
+export declare const HiddenLabel: () => HTMLDivElement;
+export declare const Required: () => HTMLDivElement;
+export declare const ReadOnly: () => HTMLDivElement;
+export declare const Groups: () => HTMLDivElement;
+export declare const Recommended: () => HTMLDivElement;
+export declare const Validation: () => HTMLDivElement;
+export declare const LoadingWithError: () => HTMLDivElement;
+export declare const InForm: () => HTMLDivElement;

package/dist/types/components/ic-select-with-multi/test/a11y/ic-select.test.a11y.d.ts

@@ -0,0 +1 @@
+export {};