@ukic/web-components 3.0.0-alpha.2 → 3.0.0-alpha.3

package/dist/types/components.d.ts

@@ -137,7 +137,7 @@ export namespace Components {
          */
         "message"?: string;
         /**
-          * If `true`, the default icon for the neutral variant will be appear on the left of the alert.
+          * If `true`, the default icon for the neutral variant will appear on the left of the alert.
          */
         "showDefaultIcon": boolean;
         /**
@@ -853,6 +853,10 @@ export namespace Components {
           * The helper text that will be displayed.
          */
         "helperText": string;
+        /**
+          * The label will be visually hidden.
+         */
+        "hideLabel": boolean;
         /**
           * The text content of the label.
          */
@@ -869,6 +873,7 @@ export namespace Components {
           * The status of the label - e.g. 'error'.
          */
         "status": "error" | "";
+        "useLabelTag": boolean;
     }
     interface IcInputValidation {
         /**
@@ -987,6 +992,10 @@ export namespace Components {
          */
         "anchorEl": HTMLElement;
         "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.
          */
@@ -1030,13 +1039,13 @@ export namespace Components {
         "searchMode"?: IcSearchBarSearchModes;
         "selectOnEnter"?: boolean;
         /**
-          * The size of the menu component.
+          * The size of the menu.
          */
         "size"?: IcSizes;
         /**
-          * The value of the currently selected option.
+          * The value of the currently selected option - or array of values (if multiple options allowed).
          */
-        "value": string;
+        "value": string | string[];
         /**
           * The custom name for the value field for IcMenuOption.
          */
@@ -1326,6 +1335,10 @@ export namespace Components {
          */
         "submenuId"?: string;
         "submenuLevel": number;
+        /**
+          * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
+         */
+        "theme"?: IcThemeMode;
     }
     interface IcRadioGroup {
         /**
@@ -1570,7 +1583,7 @@ export namespace Components {
          */
         "form"?: 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.
+          * If `true`, the select will fill the width of the container.
          */
         "fullWidth": boolean;
         /**
@@ -1605,6 +1618,10 @@ export namespace Components {
           * 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.
          */
@@ -1634,7 +1651,7 @@ export namespace Components {
          */
         "searchable"?: boolean;
         /**
-          * If `true`, the icOptionSelect event will be fired on enter instead of ArrowUp and ArrowDown.
+          * If `true`, the icOptionSelect event will be fired on enter instead of ArrowUp and ArrowDown on the single select.
          */
         "selectOnEnter"?: boolean;
         /**
@@ -1646,7 +1663,7 @@ export namespace Components {
          */
         "showClearButton"?: boolean;
         /**
-          * The size of the select component.
+          * The size of the select.
          */
         "size"?: IcSizes;
         /**
@@ -1662,9 +1679,9 @@ export namespace Components {
          */
         "validationText"?: string;
         /**
-          * 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.
+          * 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;
+        "value"?: string | string[];
     }
     interface IcSideNavigation {
         /**
@@ -1831,6 +1848,10 @@ export namespace Components {
           * The size of the switch component.
          */
         "size"?: IcSizesNoLarge;
+        /**
+          * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
+         */
+        "theme"?: IcThemeMode;
         /**
           * The value of the toggle does not mean if it's checked or not, use the `checked` property for that.  The value of a toggle is analogous to the value of a `<input type="checkbox">`, it's only used when the toggle participates in a native `<form>`.
          */
@@ -2672,8 +2693,8 @@ declare global {
         "menuKeyPress": { isNavKey: boolean; key: string };
         "menuOptionId": IcMenuOptionIdEventDetail;
         "menuOptionSelect": IcOptionSelectEventDetail;
+        "menuOptionSelectAll": { select: boolean };
         "menuStateChange": IcMenuChangeEventDetail;
-        "menuValueChange": IcValueEventDetail;
         "retryButtonClicked": IcValueEventDetail;
         "timeoutBlur": { ev: FocusEvent };
         "ungroupedOptionsSet": { options: IcMenuOption[] };
@@ -2901,6 +2922,7 @@ declare global {
         "icInput": IcValueEventDetail;
         "icOpen": void;
         "icOptionSelect": IcOptionSelectEventDetail;
+        "icOptionDeselect": IcOptionSelectEventDetail;
         "icRetryLoad": IcValueEventDetail;
     }
     interface HTMLIcSelectElement extends Components.IcSelect, HTMLStencilElement {
@@ -3320,7 +3342,7 @@ declare namespace LocalJSX {
          */
         "onIcDismiss"?: (event: IcAlertCustomEvent<void>) => void;
         /**
-          * If `true`, the default icon for the neutral variant will be appear on the left of the alert.
+          * If `true`, the default icon for the neutral variant will appear on the left of the alert.
          */
         "showDefaultIcon"?: boolean;
         /**
@@ -4041,6 +4063,10 @@ declare namespace LocalJSX {
           * The helper text that will be displayed.
          */
         "helperText"?: string;
+        /**
+          * The label will be visually hidden.
+         */
+        "hideLabel"?: boolean;
         /**
           * The text content of the label.
          */
@@ -4169,6 +4195,10 @@ declare namespace LocalJSX {
           * The reference to an anchor element the menu will position itself from when rendered.
          */
         "anchorEl": HTMLElement;
+        /**
+          * If `true`, the menu will close when an option is selected.
+         */
+        "closeOnSelect"?: boolean;
         /**
           * If `true`, the menu will fill the width of the container.
          */
@@ -4202,13 +4232,13 @@ declare namespace LocalJSX {
          */
         "searchMode"?: IcSearchBarSearchModes;
         /**
-          * The size of the menu component.
+          * The size of the menu.
          */
         "size"?: IcSizes;
         /**
-          * The value of the currently selected option.
+          * The value of the currently selected option - or array of values (if multiple options allowed).
          */
-        "value": string;
+        "value": string | string[];
         /**
           * The custom name for the value field for IcMenuOption.
          */
@@ -4477,6 +4507,10 @@ declare namespace LocalJSX {
           * The unique identifier for a popover submenu.
          */
         "submenuId"?: string;
+        /**
+          * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
+         */
+        "theme"?: IcThemeMode;
     }
     interface IcRadioGroup {
         /**
@@ -4760,7 +4794,7 @@ declare namespace LocalJSX {
          */
         "form"?: 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.
+          * If `true`, the select will fill the width of the container.
          */
         "fullWidth"?: boolean;
         /**
@@ -4795,6 +4829,10 @@ declare namespace LocalJSX {
           * 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.
          */
@@ -4828,7 +4866,11 @@ declare namespace LocalJSX {
          */
         "onIcOpen"?: (event: IcSelectCustomEvent<void>) => void;
         /**
-          * Emitted when an option is highlighted within the menu. Highlighting a menu item will also trigger an `icChange/onIcChange` due to the value being updated.
+          * Emitted when `multiple` is `true` and an option is deselected.
+         */
+        "onIcOptionDeselect"?: (event: IcSelectCustomEvent<IcOptionSelectEventDetail>) => void;
+        /**
+          * Emitted when an option is selected. Selecting an option will also trigger an `icChange/onIcChange` due to the value being updated.
          */
         "onIcOptionSelect"?: (event: IcSelectCustomEvent<IcOptionSelectEventDetail>) => void;
         /**
@@ -4860,7 +4902,7 @@ declare namespace LocalJSX {
          */
         "searchable"?: boolean;
         /**
-          * If `true`, the icOptionSelect event will be fired on enter instead of ArrowUp and ArrowDown.
+          * If `true`, the icOptionSelect event will be fired on enter instead of ArrowUp and ArrowDown on the single select.
          */
         "selectOnEnter"?: boolean;
         /**
@@ -4868,7 +4910,7 @@ declare namespace LocalJSX {
          */
         "showClearButton"?: boolean;
         /**
-          * The size of the select component.
+          * The size of the select.
          */
         "size"?: IcSizes;
         /**
@@ -4884,9 +4926,9 @@ declare namespace LocalJSX {
          */
         "validationText"?: string;
         /**
-          * 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.
+          * 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;
+        "value"?: string | string[];
     }
     interface IcSideNavigation {
         /**
@@ -5055,6 +5097,10 @@ declare namespace LocalJSX {
           * The size of the switch component.
          */
         "size"?: IcSizesNoLarge;
+        /**
+          * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
+         */
+        "theme"?: IcThemeMode;
         /**
           * The value of the toggle does not mean if it's checked or not, use the `checked` property for that.  The value of a toggle is analogous to the value of a `<input type="checkbox">`, it's only used when the toggle participates in a native `<form>`.
          */

package/dist/types/utils/helpers.d.ts

@@ -94,6 +94,13 @@ export declare const getLabelFromValue: (value: string, options: IcMenuOption[],
  * @returns filtered array of options
  */
 export declare const getFilteredMenuOptions: (options: IcMenuOption[], includeDescriptions: boolean, searchString: string, position: IcSearchMatchPositions, labelField?: string) => IcMenuOption[];
+/**
+ * Gets count of options where only group title "parent" options have been removed.
+ * Disabled options are included in the count.
+ * @param options - array of options
+ * @returns number of options not including group titles
+ */
+export declare const getOptionsWithoutGroupTitlesCount: (options: IcMenuOption[]) => number;
 export declare const deviceSizeMatches: (size: number) => boolean;
 export declare const getCurrentDeviceSize: () => number;
 export declare const getCssProperty: (cssVar: string) => string;

package/dist/types/utils/types.d.ts

@@ -69,7 +69,7 @@ export type IcRelatedTarget = EventTarget | undefined;
 export type IcOrientation = "horizontal" | "vertical";
 export type IcEmphasisType = "filled" | "outlined";
 export interface IcValueEventDetail {
-    value: string;
+    value: string | string[];
     keyPressed?: string;
 }
 export interface IcBlurEventDetail {