carbon-react 162.12.0-beta.1 → 162.13.0

package/esm/components/select/__internal__/select-textbox/select-textbox.component.d.ts

@@ -0,0 +1,88 @@
+import React from "react";
+import { CommonTextboxProps } from "../../../textbox";
+import { ValidationProps } from "../../../../__internal__/validations";
+export interface FormInputPropTypes extends ValidationProps, Omit<CommonTextboxProps, "onClick" | "onChange" | "data-component"> {
+    /**
+     * @deprecated `adaptiveLabelBreakpoint` has been deprecated.
+     * It is recommended to use `useMediaQuery` hook to implement adaptive behaviour.
+     * Breakpoint for adaptive label (inline labels change to top aligned). Enables the adaptive behaviour when set
+     **/
+    adaptiveLabelBreakpoint?: number;
+    /** Prop to specify the aria-label attribute of the component input */
+    ariaLabel?: string;
+    /** Prop to specify the aria-labelledby property of the component input */
+    ariaLabelledby?: string;
+    /** If true the Component will be focused when rendered */
+    autoFocus?: boolean;
+    /** If true, the component will be disabled */
+    disabled?: boolean;
+    /** Id attribute of the input element */
+    id?: string;
+    /** The width of the input as a percentage */
+    inputWidth?: number;
+    /** Label content */
+    label?: string;
+    /** [Legacy] A message that the Help component will display */
+    labelHelp?: React.ReactNode;
+    /** [Legacy] When true label is inline */
+    labelInline?: boolean;
+    /** [Legacy] Label width */
+    labelWidth?: number;
+    /** Name attribute of the input element */
+    name?: string;
+    /** Specify a callback triggered on blur */
+    onBlur?: (ev: React.FocusEvent<HTMLInputElement>) => void;
+    /** Specify a callback triggered on click */
+    onClick?: (ev: React.MouseEvent<HTMLInputElement>) => void;
+    /** Specify a callback triggered on focus */
+    onFocus?: (ev: React.FocusEvent<HTMLInputElement>) => void;
+    /** Specify a callback triggered onKeyDown */
+    onKeyDown?: (ev: React.KeyboardEvent<HTMLInputElement>) => void;
+    /** Placeholder string to be displayed in input */
+    placeholder?: string;
+    /** Flag to configure component as mandatory */
+    required?: boolean;
+    /** If true, the component will be read-only */
+    readOnly?: boolean;
+    /** Size of an input */
+    size?: "small" | "medium" | "large";
+    /**
+     * Id of the element containing the currently displayed value
+     * to be read by voice readers
+     * @private
+     * @ignore
+     */
+    accessibilityLabelId?: string;
+    /**
+     * Label id passed from Select component
+     * @private
+     * @ignore
+     *
+     */
+    labelId?: string;
+}
+export interface SelectTextboxProps extends FormInputPropTypes {
+    /** Id attribute of the select list */
+    "aria-controls"?: string;
+    /** Value to be displayed in the Textbox */
+    formattedValue?: string;
+    /** If true, the list is displayed */
+    isOpen?: boolean;
+    /** Value of the Select Input */
+    selectedValue?: string | Record<string, unknown> | (string | Record<string, unknown>)[];
+    /** @private @ignore */
+    transparent?: boolean;
+    /** @private @ignore */
+    activeDescendantId?: string;
+    /** Specify a callback triggered on change */
+    onChange: (ev: React.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Sets the type of select, which determines the behaviour of the textbox.
+     * If "simple", the textbox does not allow typing and functions as a standard select.
+     * If "filterable", the textbox allows typing and filters the options based on the input value.
+     * If "multi", the textbox allows typing and is used for multi-selects, displaying selected options as comma-separated values.
+     */
+    selectType?: "simple" | "filterable" | "multi";
+}
+declare const SelectTextbox: React.ForwardRefExoticComponent<SelectTextboxProps & React.RefAttributes<HTMLInputElement>>;
+export default SelectTextbox;

package/esm/components/select/__internal__/select-textbox/select-textbox.component.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import r,{useRef as n}from"react";import{StyledSelectText as l,StyledSelectTextChildrenWrapper as a}from"./select-textbox.style.js";import{Textbox as o}from"../../../textbox/textbox.component.js";import i from"../../../../hooks/__internal__/useLocale/useLocale.js";import c from"../../../../__internal__/utils/helpers/combine-refs/index.js";import s from"./__internal__/select-textbox.context.js";import d from"../../../../__internal__/utils/helpers/guid/index.js";function u(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function p(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(t){u(e,t,r[t])}))}return e}function b(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})),e}function f(e,t){if(null==e)return{};var r,n,l=function(e,t){if(null==e)return{};var r,n,l={},a=Object.keys(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||(l[r]=e[r]);return l}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(l[r]=e[r])}return l}const y=r.forwardRef(((r,u)=>{var{ariaLabel:y,ariaLabelledby:m,accessibilityLabelId:O,labelId:x,"aria-controls":h,disabled:j=!1,isOpen:v,id:g,readOnly:w=!1,placeholder:_,size:P="medium",onClick:$,onFocus:C,onBlur:D,formattedValue:I="",selectedValue:k,required:L,selectType:S,transparent:V=!1,activeDescendantId:z,onKeyDown:B,onChange:E,prefix:T}=r,q=f(r,["ariaLabel","ariaLabelledby","accessibilityLabelId","labelId","aria-controls","disabled","isOpen","id","readOnly","placeholder","size","onClick","onFocus","onBlur","formattedValue","selectedValue","required","selectType","transparent","activeDescendantId","onKeyDown","onChange","prefix"]);const F=i(),K=n(null),N=_||F.select.placeholder(),A=!j&&!w&&!I,M="filterable"===S||"multi"===S,R=c(u,K);function G(e){j||(K.current&&document.activeElement!==K.current&&K.current.focus(),w||null==$||$(e))}const H=p({disabled:j,id:g,readOnly:w,required:L,onClick:G,onFocus:function(e){j||w||null==C||C(e)},onBlur:D,labelId:x,type:"text",ref:R,onKeyDown:B},q),{"aria-describedby":J,leftChildren:Q}=q,U=f(q,["aria-describedby","leftChildren"]),W={"aria-expanded":w?void 0:v,"aria-labelledby":O?`${m||x} ${O}`:m,"aria-activedescendant":z,"aria-controls":h,"aria-autocomplete":"filterable"===S||"multi"===S?"both":void 0,role:w?void 0:"combobox"},X="string"==typeof k||Array.isArray(k)&&"string"==typeof k[0],Y=[M?"select-allows-typing":void 0].filter(Boolean).join(" "),Z=n(d()),ee="simple"===S&&T?Z.current:void 0;return e(s.Provider,{value:{prefixId:ee,selectType:S},children:e(o,b(p(b(p(b(p({"aria-describedby":J,"aria-label":y,"data-element":`${null!=S?S:""}-select-input`,"data-role":"select-textbox",inputIcon:"dropdown"},"simple"===S&&{inputMode:"none"}),{autoComplete:"off",size:P,formattedValue:I,placeholder:M?N:void 0}),W,H),{className:Y,"data-is-transparent":V,"data-is-open":v,onChange:E,value:X?k:void 0,my:0}),"simple"!==S&&{prefix:T}),{leftChildren:M?Q:t(l,b(p({"aria-hidden":!0,"aria-disabled":j||void 0,"data-element":"select-text","data-role":"select-text",$disabled:j,$hasPlaceholder:A,onClick:G,$readOnly:w,$size:P,$transparent:V,className:`select-text ${j?"disabled":""} ${w?"read-only":""}`},U),{children:[T&&e("span",{id:Z.current,"data-element":"textbox-prefix",children:T}),e(a,{$isDisabled:j,$readOnly:w,children:A?N:I})]}))}))})}));y.displayName="SelectTextbox";export{y as default};

package/esm/components/select/__internal__/select-textbox/select-textbox.style.d.ts

@@ -0,0 +1,14 @@
+import { SelectTextboxProps } from "./select-textbox.component";
+interface StyledSelectTextProps {
+    $hasPlaceholder: boolean;
+    $disabled: boolean;
+    $readOnly: boolean;
+    $transparent: boolean;
+    $size: NonNullable<SelectTextboxProps["size"]>;
+}
+declare const StyledSelectText: import("styled-components").StyledComponent<"span", any, StyledSelectTextProps, never>;
+declare const StyledSelectTextChildrenWrapper: import("styled-components").StyledComponent<"span", any, {
+    $isDisabled: boolean;
+    $readOnly: boolean;
+}, never>;
+export { StyledSelectText, StyledSelectTextChildrenWrapper };

package/esm/components/select/__internal__/select-textbox/select-textbox.style.js

@@ -0,0 +1 @@
+import e,{css as t}from"styled-components";import o from"../../../../__internal__/legacy-input/input-sizes.style.js";const l=e.span.withConfig({displayName:"select-textbox.style__StyledSelectText",componentId:"carbon_v162_12_0__sc-216771d5-0"})(["",""],(({$disabled:e,$hasPlaceholder:l,$readOnly:n,$transparent:i,$size:r})=>t(["align-items:center;align-self:stretch;display:inline-flex;flex-grow:1;font-size:14px;height:auto;outline:none;width:30px;z-index:1;padding-left:",";"," "," "," ",""],o[r].horizontalPadding,i&&t(["font-weight:500;text-align:right;"]),l&&t(['& > *:not([data-element="textbox-prefix"]){color:',";font-weight:",";user-select:none;}"],i?"var(--colorsUtilityYin100)":"var(--colorsUtilityYin055)",i?500:"normal"),e&&t(["cursor:not-allowed;color:var(--colorsUtilityYin030);text-shadow:none;"]),n&&t(["cursor:default;color:var(--colorsUtilityYin065);text-shadow:none;"])))),n=e.span.withConfig({displayName:"select-textbox.style__StyledSelectTextChildrenWrapper",componentId:"carbon_v162_12_0__sc-216771d5-1"})(["display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"," ",""],(({$isDisabled:e})=>e&&t(["cursor:not-allowed;"])),(({$readOnly:e})=>e&&t(["cursor:default;"])));export{l as StyledSelectText,n as StyledSelectTextChildrenWrapper};

package/esm/components/select/__internal__/utils/are-objects-equal.d.ts

@@ -0,0 +1 @@
+export default function areObjectsEqual(obj1: Record<string, unknown>, obj2: Record<string, unknown>): boolean;

package/esm/components/select/__internal__/utils/are-objects-equal.js

@@ -0,0 +1 @@
+function t(t,e){if("object"!=typeof t||"object"!=typeof e||null===t||null===e)return!1;const n=Object.keys(t),o=Object.keys(e);if(n.length!==o.length)return!1;for(const o of n)if(!Object.prototype.hasOwnProperty.call(e,o)||t[o]!==e[o])return!1;return!0}export{t as default};

package/esm/components/select/__internal__/utils/get-next-child-by-text.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+/**
+ * Recreates HTML Select element functionality of finding first match based on typed characters
+ * */
+export default function getNextChildByText(textToMatch: string, arrayOfChildren: React.ReactElement[], previousIndex?: number): React.ReactElement<any, string | React.JSXElementConstructor<any>>;

package/esm/components/select/__internal__/utils/get-next-child-by-text.js

@@ -0,0 +1 @@
+import"react";function t(t,e,r=-1){const n=t.slice(-1),o=t.split("").every((t=>t===n));let s=function(t,e){return e.findIndex((e=>{var r;return null===(r=e.props.text)||void 0===r?void 0:r.toLowerCase().startsWith(t.toLowerCase())}))}(t,e);const i=function(t,e){return t.reduce(((t,r,n)=>(r.props.text&&r.props.text.toLowerCase().startsWith(e.toLowerCase())&&t.push(n),t)),[])}(e,n);return o&&i.length>1&&(s=function(t,e){return e===t[t.length-1]?t[0]:t[t.indexOf(e)+1]}(i,r)),e[s]}export{t as default};

package/esm/components/select/__internal__/utils/get-next-index-by-key.d.ts

@@ -0,0 +1,2 @@
+export declare const PAGE_SIZE = 4;
+export default function getNextIndexByKey(key: string, currentIndex: number, lastIndex: number, isLoading?: boolean): number;

package/esm/components/select/__internal__/utils/get-next-index-by-key.js

@@ -0,0 +1 @@
+const a=4;function e(a,e,r,t){const n=-1===e;let c=e;switch(a){case"Home":c=0;break;case"End":c=r;break;case"ArrowDown":if(t&&e===r)return r;c=e===r||n?0:e+1;break;case"ArrowUp":c=0===e||n?r:e-1;break;case"PageDown":c=n?Math.min(3,r):Math.min(e+4,r);break;case"PageUp":c=n?Math.max(r+1-4,0):Math.max(e-4,0)}return c}export{a as PAGE_SIZE,e as default};

package/esm/components/select/__internal__/utils/highlight-part-of-text.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export default function highlightPartOfTextRecursive(child: React.ReactNode, partToHighlight: string): React.ReactNode;

package/esm/components/select/__internal__/utils/highlight-part-of-text.js

@@ -0,0 +1 @@
+import{jsx as e}from"react/jsx-runtime";import t from"react";import n from"./matching-text.style.js";function r(t,i){if(!i||!i.length||!t)return t;const l=t.toLowerCase(),o=i.toLowerCase(),c=l.indexOf(o);if(-1===c)return t;const s=t.slice(0,c),a=t.slice(c,c+i.length),h=t.slice(c+i.length,t.length);let f=h;return h.length>=i.length&&(f=r(h,i)),[e("span",{children:s},"preceding"),e(n,{"data-role":"matching-text",children:a},"match"),e("span",{children:f},"following")]}function i(e,n){if("string"==typeof e)return r(e,n);if(!t.isValidElement(e))return e;const l=t.Children.map(e.props.children,(e=>i(e,n)));return t.cloneElement(e,{children:l})}export{i as default};

package/esm/components/select/__internal__/utils/is-expected-option.d.ts

@@ -0,0 +1 @@
+export default function isExpectedOption(element: React.ReactElement, expectedValue?: string | Record<string, unknown> | null): boolean;

package/esm/components/select/__internal__/utils/is-expected-option.js

@@ -0,0 +1 @@
+import o from"../../option/option.component.js";import t from"../../option-row/option-row.component.js";import e from"./is-expected-value.js";function n(n,r){if(n.type!==o&&n.type!==t)return!1;if(null==r)return!1;const{length:p}="string"==typeof r?r:Object.keys(r);return!!p&&e(n.props.value,r)}export{n as default};

package/esm/components/select/__internal__/utils/is-expected-value.d.ts

@@ -0,0 +1 @@
+export default function isExpectedValue(currentValue: string | Record<string, unknown>, expectedValue: string | Record<string, unknown>): boolean;

package/esm/components/select/__internal__/utils/is-expected-value.js

@@ -0,0 +1 @@
+function t(t,e){return"object"==typeof t&&null!==t.id&&void 0!==t.id&&"object"==typeof e?t.id===e.id:t===e}export{t as default};

package/esm/components/select/__internal__/utils/is-navigation-key.d.ts

@@ -0,0 +1 @@
+export default function isNavigationKey(key: string): boolean;

package/esm/components/select/__internal__/utils/is-navigation-key.js

@@ -0,0 +1 @@
+function e(e){return["ArrowDown","ArrowUp","Home","End","PageUp","PageDown"].includes(e)}export{e as default};

package/esm/components/select/__internal__/utils/matching-text.style.d.ts

@@ -0,0 +1,2 @@
+declare const MatchingText: import("styled-components").StyledComponent<"span", any, {}, never>;
+export default MatchingText;

package/esm/components/select/__internal__/utils/matching-text.style.js

@@ -0,0 +1 @@
+import t from"styled-components";const e=t.span.withConfig({displayName:"matching-text.style__MatchingText",componentId:"carbon_v162_12_0__sc-cf2d1a9f-0"})(["font-weight:500;text-decoration:underline;"]);export{e as default};

package/esm/components/select/__internal__/utils/with-filter.hoc.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+interface WrappedComponentProps {
+    filterText?: string;
+    isLoading?: boolean;
+    multiColumn?: boolean;
+    tableHeader?: React.ReactNode;
+    children?: React.ReactNode;
+}
+export interface FilteredComponentProps extends WrappedComponentProps {
+    noResultsMessage?: string;
+}
+/** Filters wrapped component children based on provided filter text and highlights matching content */
+declare const withFilter: <T extends WrappedComponentProps>(WrappedComponent: React.ComponentType<T>) => React.ForwardRefExoticComponent<React.PropsWithoutRef<FilteredComponentProps & T> & React.RefAttributes<HTMLDivElement>>;
+export default withFilter;

package/esm/components/select/__internal__/utils/with-filter.hoc.js

@@ -0,0 +1 @@
+import{jsx as e}from"react/jsx-runtime";import r,{useCallback as t}from"react";import n from"../../../../hooks/__internal__/useLocale/useLocale.js";import o from"../../option-row/option-row.style.js";import l from"../../option/option.style.js";import i from"../../option/option.component.js";import s from"../../option-row/option-row.component.js";import c from"./highlight-part-of-text.js";function p(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function u(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},n=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),n.forEach((function(r){p(e,r,t[r])}))}return e}const a=(e,t)=>r.Children.toArray(e.props.children).find((e=>{if(!r.isValidElement(e))return!1;if("string"==typeof e.props.children){const r=e.props.children.toLowerCase(),n=t.toLowerCase();return r.includes(n)}return a(e,t)}))?e:null,f=p=>{const f=r.forwardRef(((f,d)=>{var{children:m,filterText:y,noResultsMessage:b,isLoading:h,multiColumn:O,tableHeader:j}=f,g=function(e,r){if(null==e)return{};var t,n,o=function(e,r){if(null==e)return{};var t,n,o={},l=Object.keys(e);for(n=0;n<l.length;n++)t=l[n],r.indexOf(t)>=0||(o[t]=e[t]);return o}(e,r);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(n=0;n<l.length;n++)t=l[n],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}(f,["children","filterText","noResultsMessage","isLoading","multiColumn","tableHeader"]);const w=n(),v=t((()=>{let t=m;if(y&&!h){if(t=(e=>t=>{const n=r.Children.map(t,(t=>r.isValidElement(t)?t.type===i?((e,r)=>{var t;const n=null===(t=e.props.text)||void 0===t?void 0:t.toLowerCase(),o=r.toLowerCase();return n.includes(o)?e:null})(t,e):t.type===s?a(t,e):null:null));return r.Children.count(n)?n:null})(y)(m),!t){const t=w.select.noResultsForTerm(y);if(O){var n;const l=r.isValidElement(j)?r.Children.count(null==j||null===(n=j.props)||void 0===n?void 0:n.children):1;return e(o,{children:e("td",{style:{fontWeight:"normal"},colSpan:l,children:b||t})})}return e(l,{isInteractive:!0,children:b||t})}return function(e,t){return r.Children.map(e,(e=>{let n;return r.isValidElement(e)?(e.type===i&&(n=c(e.props.text,t)),e.type===s&&(n=r.Children.map(e.props.children,(e=>r.isValidElement(e)?r.cloneElement(e,{children:c(e.props.children,t)}):e))),r.cloneElement(e,{children:n})):e}))}(t,y)}return m}),[m,y,h,O,b,j,w]),C=u({filterText:y,isLoading:h,multiColumn:O,tableHeader:j},g);return e(p,(P=u({},C),x=null!=(x={ref:d,children:v()})?x:{},Object.getOwnPropertyDescriptors?Object.defineProperties(P,Object.getOwnPropertyDescriptors(x)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(x)).forEach((function(e){Object.defineProperty(P,e,Object.getOwnPropertyDescriptor(x,e))})),P));var P,x}));return f.displayName="FilteredComponent",f};export{f as default};

package/esm/components/select/filterable-select/filterable-select.component.d.ts

@@ -0,0 +1,65 @@
+import React from "react";
+import { ButtonProps } from "../../button";
+import { FormInputPropTypes } from "../__internal__/select-textbox";
+import { ListPlacement } from "../__internal__/select-list/select-list.component";
+import { CustomSelectChangeEvent } from "../simple-select";
+export interface FilterableSelectProps extends Omit<FormInputPropTypes, "defaultValue" | "value"> {
+    /** Prop to specify the aria-label attribute of the component input */
+    "aria-label"?: string;
+    /** Prop to specify the aria-labelledby property of the component input */
+    "aria-labelledby"?: string;
+    /** Child components (such as Option or OptionRow) for the SelectList */
+    children: React.ReactNode;
+    /** If true the loader animation is displayed in the option list */
+    isLoading?: boolean;
+    /** True for default text button or a Button Component to be rendered */
+    listActionButton?: boolean | React.ReactElement<ButtonProps>;
+    /** When true component will work in multi column mode.
+     * Children should consist of OptionRow components in this mode
+     */
+    multiColumn?: boolean;
+    /** A custom message to be displayed when any option does not match the filter text */
+    noResultsMessage?: string;
+    /** A custom callback for when the input text changes */
+    onFilterChange?: (filterText: string) => void;
+    /** A custom callback for when the dropdown menu opens */
+    onOpen?: () => void;
+    /** A callback for when the Action Button is triggered */
+    onListAction?: () => void;
+    /** A callback that is triggered when a user scrolls to the bottom of the list */
+    onListScrollBottom?: () => void;
+    /** If true the Component opens on focus */
+    openOnFocus?: boolean;
+    /** SelectList table header, should consist of multiple th elements.
+     * Works only in multiColumn mode
+     */
+    tableHeader?: React.ReactNode;
+    /** The selected value(s) */
+    value: string | Record<string, unknown>;
+    /** [Legacy] Overrides the default tooltip position */
+    tooltipPosition?: "top" | "bottom" | "left" | "right";
+    /** Maximum list height - defaults to 180 */
+    listMaxHeight?: number;
+    /** Placement of the select list in relation to the input element */
+    listPlacement?: ListPlacement;
+    /** Use the opposite list placement if the set placement does not fit */
+    flipEnabled?: boolean;
+    /** Set this prop to enable a virtualised list of options. If it is not used then all options will be in the
+     * DOM at all times, which may cause performance problems on very large lists */
+    enableVirtualScroll?: boolean;
+    /** The number of options to render into the DOM at once, either side of the currently-visible ones.
+     * Higher values make for smoother scrolling but may impact performance.
+     * Only used if the `enableVirtualScroll` prop is set. */
+    virtualScrollOverscan?: number;
+    /** Boolean to disable automatic filtering and highlighting of options.
+     * This allows custom filtering and option styling to be performed outside of the component when the filter text changes. */
+    disableDefaultFiltering?: boolean;
+    /** Flag to configure component as mandatory */
+    required?: boolean;
+    /** Specify a callback triggered on change */
+    onChange: (ev: CustomSelectChangeEvent | React.ChangeEvent<HTMLInputElement>) => void;
+    /** Override the default width of the list element. Number passed is converted into pixel value */
+    listWidth?: number;
+}
+export declare const FilterableSelect: React.ForwardRefExoticComponent<FilterableSelectProps & React.RefAttributes<HTMLInputElement>>;
+export default FilterableSelect;

package/esm/components/select/filterable-select/filterable-select.component.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import n,{useState as r,useRef as o,useCallback as l,useEffect as i}from"react";import a from"invariant";import"../../../style/utils/filter-styled-system-padding-props.js";import s from"../../../style/utils/filter-styled-system-margin-props.js";import c from"../../../style/utils/filter-out-styled-system-spacing-props.js";import u from"../__internal__/select-textbox/select-textbox.component.js";import d from"../../../__internal__/utils/helpers/guid/index.js";import p from"../__internal__/utils/with-filter.hoc.js";import m from"../select.style.js";import f from"../__internal__/select-list/select-list.component.js";import b from"../__internal__/utils/is-expected-option.js";import v from"../__internal__/utils/are-objects-equal.js";import y from"../__internal__/utils/is-navigation-key.js";import g from"../../../hooks/__internal__/useStableCallback/useStableCallback.js";import h from"../../../hooks/__internal__/useInputAccessibility/useInputAccessibility.js";import O from"../../../hooks/__internal__/useAdaptiveSidebarModalFocus/useAdaptiveSidebarModalFocus.js";function _(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function j(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},r=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})))),r.forEach((function(t){_(e,t,n[t])}))}return e}function w(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t.push.apply(t,n)}return t}(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))})),e}const C=p(f),S=n.forwardRef(((p,_)=>{var{"aria-label":S,"aria-labelledby":x,value:L,id:P,name:k,label:D,children:A,onOpen:E,onChange:F,onFilterChange:B,onClick:M,onKeyDown:T,onFocus:I,onBlur:V,openOnFocus:H,noResultsMessage:W,listActionButton:q,listMaxHeight:K,onListAction:R,isLoading:N,disabled:z,readOnly:G,onListScrollBottom:J,tableHeader:Q,multiColumn:U,"data-element":X,"data-role":Y,tooltipPosition:Z,listPlacement:$="bottom",flipEnabled:ee=!0,enableVirtualScroll:te,virtualScrollOverscan:ne,disableDefaultFiltering:re=!1,required:oe,listWidth:le}=p,ie=function(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},l=Object.keys(e);for(r=0;r<l.length;r++)n=l[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(r=0;r<l.length;r++)n=l[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}(p,["aria-label","aria-labelledby","value","id","name","label","children","onOpen","onChange","onFilterChange","onClick","onKeyDown","onFocus","onBlur","openOnFocus","noResultsMessage","listActionButton","listMaxHeight","onListAction","isLoading","disabled","readOnly","onListScrollBottom","tableHeader","multiColumn","data-element","data-role","tooltipPosition","listPlacement","flipEnabled","enableVirtualScroll","virtualScrollOverscan","disableDefaultFiltering","required","listWidth"]);const[ae,se]=r(""),ce=o(d()),ue=o(null),de=o(null),pe=o(!1),me=o(!1),[fe,be]=r(),[ve,ye]=r(!1),[ge,he]=r(""),[Oe,_e]=r(L||""),je=o(L),[we,Ce]=r(""),[Se,xe]=r(""),Le=o(P||d()),{labelId:Pe}=h({id:Le.current,label:D}),ke=o(null),De=o(!1),Ae=l(((e,t)=>({target:w(j({},k&&{name:k},P&&{id:P}),{value:e}),selectionConfirmed:t})),[k,P]),Ee=l(((e,t)=>{F&&F(Ae(e,t))}),[F,Ae]),Fe=l(((e,t)=>{_e((()=>{var r;const o=e.trimStart(),l=(i=o,a=A,n.Children.toArray(a).find((e=>{const{text:t}=e.props;return-1!==(null==t?void 0:t.toLowerCase().indexOf(null==i?void 0:i.toLowerCase()))})));var i,a;const s=t&&!e.length;return!l||s||l.props.disabled?(he(e),Ee("",!1),""):(o.length&&Ee(l.props.value,!1),t?(he(e),l.props.value):(o.length&&(null===(r=l.props.text)||void 0===r?void 0:r.toLowerCase().startsWith(o.toLowerCase()))?he(l.props.text):he(e),Ce(l.props.value),l.props.value))}))}),[A,Ee]),Be=l(((e,t=!1)=>{var r;const o=n.Children.toArray(A).find((t=>n.isValidElement(t)&&b(t,e)));o&&void 0!==o.props.text?(t||(null===(r=o.props.text)||void 0===r?void 0:r.toLowerCase().startsWith(null==Se?void 0:Se.toLowerCase().trim())))&&he(o.props.text):he(Se||"")}),[A,Se]),Me=l((e=>{const t=e.target.value,{inputType:n}=e.nativeEvent;Fe(t,"deleteContentBackward"===n||"deleteContentForward"===n||"delete"===n),xe(t),ye(!0)}),[Fe]),Te=l((e=>{xe((t=>(null==t?void 0:t.length)===(null==ge?void 0:ge.length)-1&&e===ge.slice(-1)?ge:t))}),[ge]),Ie=l((e=>{const{key:t}=e;T&&T(e),G||(!e.defaultPrevented&&y(t)&&(e.preventDefault(),ye(!0)),Te(t))}),[Te,T,G]),Ve=l((e=>{const t=ue.current&&!ue.current.contains(e.target),n=de.current&&!de.current.contains(e.target);pe.current=!1,t&&n&&(Be(L,!0),ye(!1))}),[Be,L]);i((()=>{_e((e=>(L&&e!==L&&Be(L),L))),Ce(L)}),[L,F,A]);const He=g(E);i((()=>{ve?He&&He():xe("")}),[He,ve]),i((()=>{const e=void 0!==q;a(!e||e&&R,"onListAction prop required when using listActionButton prop")}),[q,R]);const We=o(!0);i((()=>{We.current&&Be(Oe),"object"==typeof L&&"object"==typeof je.current?v(L,je.current)||(Be(L),je.current=L):Be(L)}),[L,A]);const qe=g(B);i((()=>{qe&&!We.current&&qe(Se)}),[qe,Se]),i((()=>{We.current=!1}),[]),i((()=>{const e="click";return window.addEventListener(e,Ve),function(){window.removeEventListener(e,Ve)}}),[Ve]),i((()=>{const e=null==Se?void 0:Se.trimStart(),t=null==ge?void 0:ge.toLowerCase().startsWith(e.toLowerCase());!z&&!G&&fe&&e.length&&(null==ge?void 0:ge.length)>e.length&&t&&(fe.selectionStart=e.length)}),[ge,Se,fe,z,G]);const Ke=l((e=>{const{id:t,text:n,value:r,selectionType:o,selectionConfirmed:l}=e;he(n),Ee(r,!!l),se(t),"navigationKey"!==o&&(De.current=!!H,ye(!1),null==fe||fe.focus(),null==fe||fe.select(),De.current=!1)}),[fe,Ee,H]),Re=l((()=>{ye(!1),Be(Oe,!0)}),[Oe,Be]);function Ne(e){var t;pe.current=!0,"input"!==(null===(t=e.target.dataset)||void 0===t?void 0:t.element)&&e.preventDefault()}i((()=>()=>{ke.current&&clearTimeout(ke.current)}),[]),O((()=>ye(!1)));const ze=l((e=>{e&&(be(e),_&&("function"==typeof _?_(e):_.current=e))}),[_]);let Ge;switch($){case"top":Ge="top-end";break;case"bottom":Ge="bottom-end";break;default:Ge=$}const Je={ref:de,id:ce.current,labelId:Pe,anchorElement:(null==fe?void 0:fe.parentElement)||void 0,onSelect:Ke,onSelectListClose:Re,onMouseDown:function(){pe.current=!0},filterText:Se.trim(),highlightedValue:we,noResultsMessage:W,listActionButton:q,listMaxHeight:K,onListAction:function(){ye(!1),null==R||R()},isLoading:N,onListScrollBottom:J,tableHeader:Q,multiColumn:U,listPlacement:void 0!==le?Ge:$,flipEnabled:ee,isOpen:ve,enableVirtualScroll:te,virtualScrollOverscan:ne,listWidth:le},Qe=e(re?f:C,w(j({},Je),{children:A})),Ue=s(ie);return t(m,w(j({hasTextCursor:!0,readOnly:G,disabled:z,"data-component":"filterable-select","data-role":Y,"data-element":X,isOpen:ve,className:"filterable-select"},Ue),{children:[e("div",{ref:ue,children:e(u,w(j({ref:ze,activeDescendantId:ae,ariaLabel:S,ariaLabelledby:x,labelId:D?Pe:void 0,"aria-controls":ce.current,isOpen:ve,selectType:"filterable"},w(j({id:Le.current,name:k,label:D,disabled:z,readOnly:G,selectedValue:Oe,formattedValue:ge,onClick:function(e){pe.current=!1,M&&M(e),ye(!0)},iconOnClick:function(e){pe.current=!1,M&&M(e),ye((e=>(De.current=e,!e)))},iconOnMouseDown:Ne,onFocus:function(e){const t=()=>null==I?void 0:I(e);if(H){if(ke.current&&clearTimeout(ke.current),De.current)return;ke.current=setTimeout((()=>{ye((e=>(e||I&&!me.current&&(t(),me.current=!0),!0)))}))}else I&&!me.current&&(t(),me.current=!0)},onBlur:function(e){pe.current||(me.current=!1,V&&V(e))},onKeyDown:Ie,onChange:Me,onMouseDown:Ne,tooltipPosition:Z,required:oe},c(ie)),{"data-component":void 0})),{onChange:Me,value:ge}))}),Qe]}))}));export{S as FilterableSelect,S as default};

package/esm/components/select/filterable-select/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./filterable-select.component";
+export type { FilterableSelectProps } from "./filterable-select.component";

package/esm/components/select/filterable-select/index.js

@@ -0,0 +1 @@
+export{FilterableSelect as default}from"./filterable-select.component.js";

package/esm/components/select/index.d.ts

@@ -0,0 +1,13 @@
+export { default as Option } from "./option";
+export type { OptionProps } from "./option";
+export { default as OptionRow } from "./option-row";
+export type { OptionRowProps } from "./option-row";
+export { default as OptionGroupHeader } from "./option-group-header";
+export type { OptionGroupHeaderProps } from "./option-group-header";
+export { default as Select } from "./simple-select";
+export type { SimpleSelectProps, CustomSelectChangeEvent, } from "./simple-select";
+export { default as FilterableSelect } from "./filterable-select";
+export type { FilterableSelectProps } from "./filterable-select";
+export { default as MultiSelect } from "./multi-select";
+export type { MultiSelectProps } from "./multi-select";
+export { default as setupSelectMocks } from "./setup-select-mocks";

package/esm/components/select/index.js

@@ -0,0 +1 @@
+export{default as Option}from"./option/option.component.js";export{default as OptionRow}from"./option-row/option-row.component.js";export{default as OptionGroupHeader}from"./option-group-header/option-group-header.component.js";export{SimpleSelect as Select}from"./simple-select/simple-select.component.js";export{FilterableSelect}from"./filterable-select/filterable-select.component.js";export{MultiSelect}from"./multi-select/multi-select.component.js";export{default as setupSelectMocks}from"./setup-select-mocks.js";

package/esm/components/select/multi-select/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./multi-select.component";
+export type { MultiSelectProps } from "./multi-select.component";

package/esm/components/select/multi-select/index.js

@@ -0,0 +1 @@
+export{MultiSelect as default}from"./multi-select.component.js";

package/esm/components/select/multi-select/multi-select.component.d.ts

@@ -0,0 +1,59 @@
+import React from "react";
+import { FormInputPropTypes } from "../__internal__/select-textbox";
+import { ListPlacement } from "../__internal__/select-list/select-list.component";
+import { CustomSelectChangeEvent } from "../simple-select";
+export interface MultiSelectProps extends Omit<FormInputPropTypes, "defaultValue" | "value"> {
+    /** Prop to specify the aria-label attribute of the component input */
+    "aria-label"?: string;
+    /** Prop to specify the aria-labelledby property of the component input */
+    "aria-labelledby"?: string;
+    /** Size of an input */
+    size?: "small" | "medium" | "large";
+    /** Child components (such as Option or OptionRow) for the SelectList */
+    children: React.ReactNode;
+    /** If true the loader animation is displayed in the option list */
+    isLoading?: boolean;
+    /** When true component will work in multi column mode.
+     * Children should consist of OptionRow components in this mode
+     */
+    multiColumn?: boolean;
+    /** A custom message to be displayed when any option does not match the filter text */
+    noResultsMessage?: string;
+    /** A custom callback for when the input text changes */
+    onFilterChange?: (filterText: string) => void;
+    /** A custom callback for when the dropdown menu opens */
+    onOpen?: () => void;
+    /** A callback that is triggered when a user scrolls to the bottom of the list */
+    onListScrollBottom?: () => void;
+    /** If true the Component opens on focus */
+    openOnFocus?: boolean;
+    /** SelectList table header, should consist of multiple th elements.
+     * Works only in multiColumn mode
+     */
+    tableHeader?: React.ReactNode;
+    /** The selected value(s) */
+    value: string[] | Record<string, unknown>[];
+    /** [Legacy] Overrides the default tooltip position */
+    tooltipPosition?: "top" | "bottom" | "left" | "right";
+    /** Maximum list height - defaults to 180 */
+    listMaxHeight?: number;
+    /** Placement of the select list in relation to the input element */
+    listPlacement?: ListPlacement;
+    /** Use the opposite list placement if the set placement does not fit */
+    flipEnabled?: boolean;
+    /** Wraps the pill text when it would overflow the input width */
+    wrapPillText?: boolean;
+    /** Set this prop to enable a virtualised list of options. If it is not used then all options will be in the
+     * DOM at all times, which may cause performance problems on very large lists */
+    enableVirtualScroll?: boolean;
+    /** The number of options to render into the DOM at once, either side of the currently-visible ones.
+     * Higher values make for smoother scrolling but may impact performance.
+     * Only used if the `enableVirtualScroll` prop is set. */
+    virtualScrollOverscan?: number;
+    /** Specify a callback triggered on change */
+    onChange: (ev: CustomSelectChangeEvent | React.ChangeEvent<HTMLInputElement>) => void;
+    /** Override the default width of the list element. Number passed is converted into pixel value */
+    listWidth?: number;
+}
+export declare const MultiSelect: React.ForwardRefExoticComponent<MultiSelectProps & React.RefAttributes<HTMLInputElement>>;
+export default MultiSelect;

package/esm/components/select/multi-select/multi-select.component.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import r,{useState as n,useRef as l,useCallback as o,useMemo as i,useEffect as a}from"react";import"../../../style/utils/filter-styled-system-padding-props.js";import s from"../../../style/utils/filter-styled-system-margin-props.js";import c from"../../../style/utils/filter-out-styled-system-spacing-props.js";import u from"../__internal__/select-textbox/select-textbox.component.js";import d from"../../../__internal__/utils/helpers/guid/index.js";import p from"../__internal__/utils/with-filter.hoc.js";import m from"../__internal__/select-list/select-list.component.js";import{StyledSelectPillContainer as f,StyledSelectMultiSelect as b,StyledAccessibilityLabelContainer as v}from"./multi-select.style.js";import{Pill as y}from"../../pill/pill.component.js";import h from"../__internal__/utils/is-expected-option.js";import g from"../__internal__/utils/is-expected-value.js";import O from"../__internal__/utils/is-navigation-key.js";import _ from"../../../hooks/__internal__/useStableCallback/useStableCallback.js";import j from"../../../hooks/__internal__/useInputAccessibility/useInputAccessibility.js";import w from"../../../hooks/__internal__/useAdaptiveSidebarModalFocus/useAdaptiveSidebarModalFocus.js";function C(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function x(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(t){C(e,t,r[t])}))}return e}function P(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})),e}const S=p(m),k=r.forwardRef(((p,m)=>{var{"aria-label":C,"aria-labelledby":k,value:D,id:L,label:E,name:M,disabled:V,readOnly:F,children:I,onOpen:T,onFilterChange:B,onChange:A,onClick:H,onFocus:z,onBlur:K,onKeyDown:R,openOnFocus:q=!1,noResultsMessage:W,placeholder:$,isLoading:N,onListScrollBottom:G,tableHeader:J,multiColumn:Q,tooltipPosition:U,size:X="medium","data-element":Y,"data-role":Z,listPlacement:ee="bottom",listMaxHeight:te,flipEnabled:re=!0,wrapPillText:ne=!0,enableVirtualScroll:le,virtualScrollOverscan:oe,required:ie,listWidth:ae}=p,se=function(e,t){if(null==e)return{};var r,n,l=function(e,t){if(null==e)return{};var r,n,l={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(l[r]=e[r]);return l}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(l[r]=e[r])}return l}(p,["aria-label","aria-labelledby","value","id","label","name","disabled","readOnly","children","onOpen","onFilterChange","onChange","onClick","onFocus","onBlur","onKeyDown","openOnFocus","noResultsMessage","placeholder","isLoading","onListScrollBottom","tableHeader","multiColumn","tooltipPosition","size","data-element","data-role","listPlacement","listMaxHeight","flipEnabled","wrapPillText","enableVirtualScroll","virtualScrollOverscan","required","listWidth"]);const[ce,ue]=n(""),de=l(d()),pe=l(d()),me=l(null),fe=l(null),be=l(!1),ve=l(!1),ye=l(!1),he=l(!1),ge=l(!1),[Oe,_e]=n(),[je,we]=n(!1),[Ce,xe]=n(""),[Pe,Se]=n(""),[ke,De]=n(""),[Le,Ee]=n(),Me=l(L||d()),{labelId:Ve}=j({id:Me.current,label:E}),Fe=l(null),Ie=o((()=>{we((e=>(!e&&T&&T(),!0)))}),[T]),Te=o(((e,t)=>({target:P(x({},M&&{name:M},L&&{id:L}),{value:e}),selectionConfirmed:t})),[M,L]),Be=o(((e,t)=>{const r=e(D).filter((e=>""!==e));r.length!==(null==D?void 0:D.length)&&A(Te(r,t))}),[Te,A,D]),Ae=o((e=>{const t=e.target.value,n=(l=t,o=I,r.Children.toArray(o).find((e=>{const{text:t}=e.props;return-1!==(null==t?void 0:t.toLowerCase().indexOf(null==l?void 0:l.toLowerCase()))})));var l,o;n&&Se(n.props.value),De(t),xe(t),Ie()}),[I,Ie]),He=o((e=>{ve.current=!0,Be((t=>{if(!t.length)return t;const r=t.slice();return r.splice(e,1),r}),!0)}),[Be]),ze=o((e=>{const{key:t}=e,r="Backspace"===t||"Delete"===t;R&&R(e),F||(!e.defaultPrevented&&O(t)&&(e.preventDefault(),Ie()),!r||""!==ke&&""!==Ce||He(-1))}),[R,F,ke,Ce,Ie,He]),Ke=i((()=>{var e;return D&&D.length?null===(e=r.Children.map(I,(e=>!(!r.isValidElement(e)||!D.includes(e.props.value))&&e.props.text)))||void 0===e?void 0:e.filter((e=>e)).reduce(((e,t)=>e?`${e}, ${t}`:t),""):null}),[I,D]),Re=o((e=>{if(ye.current=!1,!je)return;const t=me.current&&!me.current.contains(e.target),r=fe.current&&!fe.current.contains(e.target);t&&r&&!ve.current&&(xe(""),De(""),Se(""),we(!1)),ve.current=!1}),[je]),qe=i((()=>{const t=!V&&!F;let n;return(null==D?void 0:D.length)?D.map(((l,o)=>{const i=r.Children.toArray(I).find((e=>r.isValidElement(e)&&h(e,l)));let a={};if(!i)return null;var s,c;r.isValidElement(i)&&(n=void 0!==(null==i||null===(s=i.props.value)||void 0===s?void 0:s.value)?null==i||null===(c=i.props.value)||void 0===c?void 0:c.value:null==i?void 0:i.props.value,a={title:i.props.text,borderColor:i.props.borderColor,variant:i.props.variant,fill:i.props.fill});const u=a.title||"",d=u+n||o;return e(f,{children:e(y,P(x({onDelete:t?()=>He(o):void 0,wrapText:ne},a),{children:u}))},d)})):""}),[I,V,F,D]);a((()=>{const e=null==D?void 0:D.length;Ee(e?" ":$)}),[D,$]),a((()=>{const e="click";return window.addEventListener(e,Re),function(){window.removeEventListener(e,Re)}}),[Re]);const We=_(B),$e=l(!0);function Ne(e){if(ye.current=!1,H&&H(e),!q||q&&!ge.current){if(je)return De(""),void we(!1);null==T||T(),we(!0)}else ge.current=!1}function Ge(e){ye.current=!1,H&&H(e),we((e=>e?(De(""),!1):(T&&T(),!0)))}function Je(e){he.current=!1,ye.current||(be.current=!1,K&&K(e))}function Qe(e){var t;ye.current=!0;const r=e.target;"input"!==(null===(t=r.dataset)||void 0===t?void 0:t.element)&&e.preventDefault(),"input"===r.dataset.element&&(he.current=!0)}function Ue(e){const t=()=>null==z?void 0:z(e);q?(Fe.current&&clearTimeout(Fe.current),Fe.current=setTimeout((()=>{we((e=>(e||(T&&T(),z&&!be.current&&(t(),be.current=!0),ge.current=he.current),!0)))}))):z&&!be.current&&(t(),be.current=!0)}a((()=>{We&&!$e.current&&We(ke)}),[We,ke]),a((()=>{$e.current=!1}),[]),w((()=>we(!1)));const Xe=o((e=>{const{value:t,selectionType:r,id:n,selectionConfirmed:l}=e;if("navigationKey"===r)return Se(t),void ue(n);"click"===r&&(ve.current=!0),xe("");const o=-1!==(null==D?void 0:D.findIndex((e=>g(e,t))));null==Oe||Oe.focus(),ye.current=!1,Be((e=>o?e:[...e,t]),l)}),[Oe,D,Be]),Ye=o((()=>{we(!1),De("")}),[]),Ze=o((e=>{e&&(_e(e),m&&("function"==typeof m?m(e):m.current=e))}),[m]);function et(){return P(x({id:Me.current,name:M,disabled:V,label:E,readOnly:F,placeholder:Le,leftChildren:qe,formattedValue:Ce,selectedValue:D,onClick:Ne,onMouseDown:Qe,onFocus:Ue,onBlur:Je,iconOnClick:Ge,iconOnMouseDown:Qe,onKeyDown:ze,onChange:Ae,tooltipPosition:U,size:X,required:ie},c(se)),{"data-component":void 0})}let tt;switch(ee){case"top":tt="top-end";break;case"bottom":tt="bottom-end";break;default:tt=ee}const rt=e(S,{ref:fe,id:de.current,labelId:Ve,anchorElement:(null==Oe?void 0:Oe.parentElement)||void 0,onSelect:Xe,onSelectListClose:Ye,onMouseDown:function(){ye.current=!0},filterText:ke.trim(),highlightedValue:Pe,noResultsMessage:W,isLoading:N,onListScrollBottom:G,tableHeader:J,multiColumn:Q,listPlacement:void 0!==ae?tt:ee,listMaxHeight:te,flipEnabled:re,multiselectValues:D,isOpen:je,enableVirtualScroll:le,virtualScrollOverscan:oe,listWidth:ae,children:I}),nt=s(se);return t(b,P(x({disabled:V,readOnly:F,hasTextCursor:!0,size:X,"data-component":"multiselect","data-role":Z,"data-element":Y,isOpen:je,className:"multi-select"},nt),{children:[t("div",{ref:me,children:[e(v,{"data-element":"accessibility-label",id:pe.current,children:Ke}),e(u,x({ref:Ze,accessibilityLabelId:pe.current,activeDescendantId:ce,"aria-controls":de.current,ariaLabel:C,ariaLabelledby:k,isOpen:je,labelId:Ve,value:et().formattedValue,selectType:"multi"},et()))]}),rt]}))}));export{k as MultiSelect,k as default};

package/esm/components/select/multi-select/multi-select.style.d.ts

@@ -0,0 +1,12 @@
+import { type StyledSelectProps } from "../select.style";
+declare const StyledSelectPillContainer: import("styled-components").StyledComponent<"div", any, {
+    theme: object;
+}, "theme">;
+interface StyledSelectMultiSelectProps extends StyledSelectProps {
+    size: string;
+}
+declare const StyledSelectMultiSelect: import("styled-components").StyledComponent<"div", any, {
+    theme: object;
+} & StyledSelectProps & StyledSelectMultiSelectProps, "theme">;
+declare const StyledAccessibilityLabelContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export { StyledSelectPillContainer, StyledSelectMultiSelect, StyledAccessibilityLabelContainer, };

package/esm/components/select/multi-select/multi-select.style.js

@@ -0,0 +1 @@
+import e from"styled-components";import t from"../../pill/pill.style.js";import i from"../../../style/themes/apply-base-theme.js";import l from"../../../__internal__/input-icon-toggle/input-icon-toggle.style.js";import o from"../select.style.js";const s=e.div.attrs(i).withConfig({displayName:"multi-select.style__StyledSelectPillContainer",componentId:"carbon_v162_12_0__sc-4d4e5df5-0"})(["display:flex;flex-direction:column;justify-content:center;margin:3px 2px 3px 0;max-width:100%;&& ","{text-overflow:ellipsis;}"],t),n=e(o).withConfig({displayName:"multi-select.style__StyledSelectMultiSelect",componentId:"carbon_v162_12_0__sc-4d4e5df5-1"})(["","{position:absolute;right:0;height:100%;}"],l),c=e.div.withConfig({displayName:"multi-select.style__StyledAccessibilityLabelContainer",componentId:"carbon_v162_12_0__sc-4d4e5df5-2"})(["display:none;"]);export{c as StyledAccessibilityLabelContainer,n as StyledSelectMultiSelect,s as StyledSelectPillContainer};

package/esm/components/select/option/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./option.component";
+export type { OptionProps } from "./option.component";

package/esm/components/select/option/index.js

@@ -0,0 +1 @@
+export{default}from"./option.component.js";

package/esm/components/select/option/option.component.d.ts

@@ -0,0 +1,49 @@
+import React from "react";
+import { TagProps } from "../../../__internal__/utils/helpers/tags";
+import type { PillProps } from "../../pill";
+type OptionData = {
+    id?: string;
+    text?: string;
+    value?: string | Record<string, unknown>;
+};
+export interface OptionProps extends Omit<React.InputHTMLAttributes<HTMLLIElement>, "value" | "onSelect" | "onClick">, TagProps {
+    /**
+     * Unique identifier for the component.
+     * Will use a randomly generated GUID if none is provided.
+     */
+    id?: string;
+    /** The option's visible text, displayed within `<Textbox>` of `<Select>`, and used for filtering */
+    text?: string;
+    /** Alternative rendered content, displayed within `<SelectList>` of `<Select>` (eg: an icon, an image, etc) */
+    children?: React.ReactNode;
+    /** The option's invisible internal value, if this is not passed the option will not be treated as interactive or selectable */
+    value?: string | Record<string, unknown>;
+    /**
+     * MultiSelect only - legacy Pill color override retained for backwards compatibility.
+     * @deprecated Use `variant` prop instead.
+     */
+    borderColor?: string;
+    /** MultiSelect only - set Pill color variant */
+    variant?: PillProps["variant"];
+    /** MultiSelect only - fill Pill background with color */
+    fill?: boolean;
+    /** If true, the component will be disabled */
+    disabled?: boolean;
+    /**
+     * @private
+     * @ignore
+     * OnClick callback */
+    onClick?: (value: string | Record<string, unknown>) => void;
+    /**
+     * @private
+     * @ignore
+     * OnSelect callback */
+    onSelect?: (target: OptionData) => void;
+    /**
+     * @private
+     * @ignore
+     */
+    index?: number;
+}
+declare const Option: React.ForwardRefExoticComponent<OptionProps & React.RefAttributes<HTMLLIElement>>;
+export default Option;

package/esm/components/select/option/option.component.js

@@ -0,0 +1 @@
+import{jsx as e}from"react/jsx-runtime";import t,{useContext as r,useRef as n}from"react";import i from"../../../__internal__/utils/helpers/guid/index.js";import o from"./option.style.js";import l from"../__internal__/select-list/select-list.context.js";function c(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function s(e,t){if(null==e)return{};var r,n,i=function(e,t){if(null==e)return{};var r,n,i={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(i[r]=e[r]);return i}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(i[r]=e[r])}return i}const a=t.forwardRef(((t,a)=>{var{text:u,children:d,disabled:p,onSelect:f,value:b,id:O,index:y,hidden:m,onClick:j,style:g}=t,v=s(t,["text","children","disabled","onSelect","value","id","index","hidden","onClick","style"]);const h=r(l);let x=h.currentOptionsListIndex===y;const P=n(O||i()),{variant:w,borderColor:S,fill:_}=v,k=s(v,["variant","borderColor","fill"]);return h.multiselectValues&&b&&(x=h.multiselectValues.includes(b)),e(o,(C=function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(t){c(e,t,r[t])}))}return e}({id:P.current,ref:a,"aria-selected":x,"aria-disabled":p,isDisabled:p,onClick:function(){!p&&b&&(j?(null==f||f({}),j(b)):null==f||f({text:u,value:b,id:P.current}))},isHighlighted:h.currentOptionsListIndex===y,role:"option",hidden:m,style:g,isInteractive:!!b},k),D=null!=(D={"data-component":"option",children:d||u})?D:{},Object.getOwnPropertyDescriptors?Object.defineProperties(C,Object.getOwnPropertyDescriptors(D)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(D)).forEach((function(e){Object.defineProperty(C,e,Object.getOwnPropertyDescriptor(D,e))})),C));var C,D}));a.displayName="Option";export{a as default};

package/esm/components/select/option/option.style.d.ts

@@ -0,0 +1,8 @@
+import { OptionProps } from ".";
+interface StyledOptionProps extends Pick<OptionProps, "id"> {
+    isHighlighted?: boolean;
+    isDisabled?: boolean;
+    isInteractive: boolean;
+}
+declare const StyledOption: import("styled-components").StyledComponent<"li", any, StyledOptionProps, never>;
+export default StyledOption;

package/esm/components/select/option/option.style.js

@@ -0,0 +1 @@
+import o,{css as i}from"styled-components";const t=o.li.withConfig({displayName:"option.style__StyledOption",componentId:"carbon_v162_12_0__sc-f2d82e3a-0"})(["box-sizing:border-box;line-height:16px;padding:12px 16px;width:100%;user-select:none;position:absolute;top:0;left:0;width:100%;"," "," ",""],(({isInteractive:o,isHighlighted:t})=>o&&i(["cursor:pointer;:hover{background-color:var(--colorsUtilityMajor100);}",""],t&&i(["background-color:var(--colorsUtilityMajor200);"]))),(({hidden:o})=>o&&"display: none;"),(({isDisabled:o})=>o&&i(["color:var(--colorsUtilityYin030);cursor:not-allowed;:hover{background-color:var(--colorsUtilityYang100);}"])));export{t as default};

package/esm/components/select/option-group-header/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./option-group-header.component";
+export type { OptionGroupHeaderProps } from "./option-group-header.component";

package/esm/components/select/option-group-header/index.js

@@ -0,0 +1 @@
+export{default}from"./option-group-header.component.js";

package/esm/components/select/option-group-header/option-group-header.component.d.ts

@@ -0,0 +1,27 @@
+import React from "react";
+import { type CSSProperties } from "styled-components";
+import { type TagProps } from "../../../__internal__/utils/helpers/tags";
+import { IconProps } from "../../icon";
+export interface OptionGroupHeaderProps extends TagProps {
+    /**
+     * Unique identifier for the component.
+     * Will use a randomly generated GUID if none is provided.
+     */
+    id?: string;
+    /** Heading text */
+    label?: string;
+    /** Any valid Carbon icon name */
+    icon?: IconProps["type"];
+    /**
+     * @private
+     * @ignore
+     * object containing CSS styles to be passed to the underlying DOM element */
+    style?: CSSProperties;
+    /**
+     * Content to be rendered inside the OptionGroupHeader.
+     * When the `children` prop is passed it will take precedence over the `label` and
+     * `icon` props meaning they will not be rendered */
+    children?: React.ReactNode;
+}
+declare const OptionGroupHeader: React.ForwardRefExoticComponent<OptionGroupHeaderProps & React.RefAttributes<HTMLDivElement>>;
+export default OptionGroupHeader;

package/esm/components/select/option-group-header/option-group-header.component.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as r,Fragment as t}from"react/jsx-runtime";import n,{useRef as o}from"react";import i from"../../../__internal__/utils/helpers/guid/index.js";import c from"../../../__internal__/utils/logger/index.js";import l from"./option-group-header.style.js";import p from"../../icon/icon.component.js";import"../../icon/icon.style.js";function a(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}const u=n.forwardRef(((n,u)=>{var{label:s,icon:f,style:b,id:y,children:O}=n,d=function(e,r){if(null==e)return{};var t,n,o=function(e,r){if(null==e)return{};var t,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)t=i[n],r.indexOf(t)>=0||(o[t]=e[t]);return o}(e,r);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)t=i[n],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}(n,["label","icon","style","id","children"]);const m=o(y||i());return O||s||c.warn("OptionGroupHeader requires either a label or children to be provided"),e(l,(j=function(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},n=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),n.forEach((function(r){a(e,r,t[r])}))}return e}({style:b,id:m.current},d),g=null!=(g={ref:u,"data-component":"option-group-header",children:O||r(t,{children:[f&&e(p,{type:f}),e("span",{"data-role":"option-group-header-label",children:s})]})})?g:{},Object.getOwnPropertyDescriptors?Object.defineProperties(j,Object.getOwnPropertyDescriptors(g)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(g)).forEach((function(e){Object.defineProperty(j,e,Object.getOwnPropertyDescriptor(g,e))})),j));var j,g}));u.displayName="OptionGroupHeader";export{u as default};

package/esm/components/select/option-group-header/option-group-header.style.d.ts

@@ -0,0 +1,2 @@
+declare const StyledOptionGroupHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
+export default StyledOptionGroupHeader;

package/esm/components/select/option-group-header/option-group-header.style.js

@@ -0,0 +1 @@
+import o from"styled-components";import t from"../../icon/icon.style.js";const i=o.div.withConfig({displayName:"option-group-header.style__StyledOptionGroupHeader",componentId:"carbon_v162_12_0__sc-cdd7f97b-0"})(["box-sizing:border-box;position:absolute;height:40px;padding-left:16px;padding-top:16px;display:flex;align-items:center;width:100%;span:not(","){font-weight:500;font-size:12px;text-transform:uppercase;line-height:18px;text-align:left;margin:0;color:var(--colorsUtilityYin055);}","{margin-right:4px;margin-left:-5px;color:var(--colorsUtilityYin055);&:hover{color:var(--colorsUtilityYin055);}}"],t,t);export{i as default};

package/esm/components/select/option-row/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./option-row.component";
+export type { OptionRowProps } from "./option-row.component";

package/esm/components/select/option-row/index.js

@@ -0,0 +1 @@
+export{default}from"./option-row.component.js";