@itwin/core-react 3.4.0-dev.9 → 3.5.0-dev.4

package/lib/cjs/core-react/select/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../../src/core-react/select/Select.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module Select\r\n */\r\n\r\n/* eslint-disable deprecation/deprecation */\r\n\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { CommonProps } from \"../utils/Props\";\r\nimport { useRefs } from \"../utils/hooks/useRefs\";\r\n\r\n/** Properties for a Select option\r\n * @public\r\n * @deprecated Use SelectOption in itwinui-react instead\r\n */\r\nexport interface SelectOption {\r\n  /** Label of the option. If `value` is not set when using SelectOption[], also serves as the value. */\r\n  label: string;\r\n  /** Value of the option when using SelectOption[].  */\r\n  value?: string | number | readonly string[];\r\n  /** Indicates whether the option is disabled. */\r\n  disabled?: boolean;\r\n}\r\n\r\n/** Properties for [[Select]] component\r\n * @public\r\n * @deprecated Use SelectProps in itwinui-react instead\r\n */\r\nexport interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement>, CommonProps {\r\n  /** Options for Select dropdown.\r\n   * @example\r\n   * // Example of {[key: string]: (string | SelectOption)} usage:\r\n   * <Select options={{\r\n   *  option1: \"Option 1\",\r\n   *  option2: \"Option 2\",\r\n   *  option3: {label: \"Option 3\", disabled: true},\r\n   * }} />\r\n   *\r\n   * // Example of (string | SelectOption)[] usage:\r\n   * <Select options={[\r\n   *  \"Option 1\",\r\n   *  \"Option 2\",\r\n   *  {label: \"Option 3\", value: \"option3\", disabled: true},\r\n   * ]} />\r\n   * }\r\n   */\r\n  options: (string | SelectOption)[] | { [key: string]: (string | SelectOption) };\r\n  /** Indicates whether to set focus to the select element */\r\n  setFocus?: boolean;\r\n  /** Provides ability to return reference to HTMLSelectElement */\r\n  ref?: React.Ref<HTMLSelectElement>;\r\n}\r\n\r\nfunction getCurrentDefaultValue(defaultValue: string | number | readonly string[] | undefined, placeholderValue: string | undefined) {\r\n  if (defaultValue)\r\n    return defaultValue;\r\n\r\n  return placeholderValue;\r\n}\r\n\r\nfunction getOptionLabel(option: string | SelectOption): string {\r\n  return (typeof option === \"string\") ? option : option.label;\r\n}\r\n\r\nfunction getOptionValue(option: string | SelectOption): string | number | readonly string[] {\r\n  return (typeof option === \"string\") ? option : (undefined !== option.value ? option.value : option.label);\r\n}\r\n\r\nfunction getOptionDisabled(option: string | SelectOption): boolean | undefined {\r\n  return (typeof option === \"string\") ? undefined : option.disabled;\r\n}\r\n\r\nconst ForwardRefSelect = React.forwardRef<HTMLSelectElement, SelectProps>(\r\n  function ForwardRefSelect(props, ref) {\r\n    const selectElement = React.useRef<HTMLSelectElement>(null);\r\n    const placeholderValue = React.useRef(\"placeholder\");\r\n    const isInitialMount = React.useRef(true);\r\n    const refs = useRefs(selectElement, ref);  // combine ref needed for target with the forwardRef needed by the Parent when parent is a Type Editor.\r\n\r\n    React.useEffect(() => {\r\n      if (props.setFocus && selectElement.current)\r\n        selectElement.current.focus();\r\n    }, [props]);\r\n\r\n    React.useEffect(() => {\r\n      isInitialMount.current = false;\r\n    }, []);\r\n\r\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\r\n    const { value: selectValue, required, options, setFocus, className, defaultValue, ...otherProps } = props; // pluck off values that will be explicitly set below\r\n    const showPlaceholder = React.useMemo(() => props.placeholder && (undefined === selectValue || selectValue === placeholderValue.current) && !defaultValue, [defaultValue, selectValue, props.placeholder]);\r\n    const isRequired = React.useMemo(() => showPlaceholder || required, [required, showPlaceholder]);\r\n    const currentDefaultValue = React.useMemo(() => getCurrentDefaultValue(defaultValue, showPlaceholder ? placeholderValue.current : undefined), [defaultValue, showPlaceholder]);\r\n    const value = (!isInitialMount.current && undefined === selectValue) ? currentDefaultValue : selectValue;\r\n    return (\r\n      <select ref={refs} {...otherProps}\r\n        required={isRequired}\r\n        className={classnames(\"uicore-inputs-select\", className)}\r\n        value={value}\r\n        defaultValue={value === undefined ? currentDefaultValue : undefined}>\r\n        {showPlaceholder &&\r\n          <option className=\"placeholder\" disabled key=\"\" value={placeholderValue.current}>{props.placeholder}</option>\r\n        }\r\n        {options instanceof Array ?\r\n          options.map((option, index) => (\r\n            <option key={index} value={getOptionValue(option)} disabled={getOptionDisabled(option)} >\r\n              {getOptionLabel(option)}\r\n            </option>\r\n          ))\r\n          :\r\n          Object.keys(options).map((key) => (\r\n            <option key={key} value={key} disabled={getOptionDisabled(options[key])} >\r\n              {getOptionLabel(options[key])}\r\n            </option>\r\n          ))\r\n        }\r\n      </select>\r\n    );\r\n  }\r\n);\r\n\r\n/** Basic select component is a wrapper for the `<select>` HTML element.\r\n * @public\r\n * @deprecated Use Select in itwinui-react instead\r\n */\r\nexport const Select: (props: SelectProps) => JSX.Element | null = ForwardRefSelect;\r\n"]}
+{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../../src/core-react/select/Select.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,4CAA4C;AAE5C,2CAAoC;AACpC,+BAA+B;AAE/B,oDAAiD;AA4CjD,SAAS,sBAAsB,CAAC,YAA6D,EAAE,gBAAoC;IACjI,IAAI,YAAY;QACd,OAAO,YAAY,CAAC;IAEtB,OAAO,gBAAgB,CAAC;AAC1B,CAAC;AAED,SAAS,cAAc,CAAC,MAA6B;IACnD,OAAO,CAAC,OAAO,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;AAC9D,CAAC;AAED,SAAS,cAAc,CAAC,MAA6B;IACnD,OAAO,CAAC,OAAO,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS,KAAK,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;AAC5G,CAAC;AAED,SAAS,iBAAiB,CAAC,MAA6B;IACtD,OAAO,CAAC,OAAO,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC;AACpE,CAAC;AAED,MAAM,gBAAgB,GAAG,KAAK,CAAC,UAAU,CACvC,SAAS,gBAAgB,CAAC,KAAK,EAAE,GAAG;IAClC,MAAM,aAAa,GAAG,KAAK,CAAC,MAAM,CAAoB,IAAI,CAAC,CAAC;IAC5D,MAAM,gBAAgB,GAAG,KAAK,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC;IACrD,MAAM,cAAc,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IAC1C,MAAM,IAAI,GAAG,IAAA,iBAAO,EAAC,aAAa,EAAE,GAAG,CAAC,CAAC,CAAE,uGAAuG;IAElJ,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,KAAK,CAAC,QAAQ,IAAI,aAAa,CAAC,OAAO;YACzC,aAAa,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;IAClC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,cAAc,CAAC,OAAO,GAAG,KAAK,CAAC;IACjC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,6DAA6D;IAC7D,MAAM,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,YAAY,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAC,CAAC,qDAAqD;IAChK,MAAM,eAAe,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,WAAW,IAAI,CAAC,SAAS,KAAK,WAAW,IAAI,WAAW,KAAK,gBAAgB,CAAC,OAAO,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC,YAAY,EAAE,WAAW,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC;IAC3M,MAAM,UAAU,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,eAAe,IAAI,QAAQ,EAAE,CAAC,QAAQ,EAAE,eAAe,CAAC,CAAC,CAAC;IACjG,MAAM,mBAAmB,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,sBAAsB,CAAC,YAAY,EAAE,eAAe,CAAC,CAAC,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,EAAE,CAAC,YAAY,EAAE,eAAe,CAAC,CAAC,CAAC;IAC/K,MAAM,KAAK,GAAG,CAAC,CAAC,cAAc,CAAC,OAAO,IAAI,SAAS,KAAK,WAAW,CAAC,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,WAAW,CAAC;IACzG,OAAO,CACL,gCAAQ,GAAG,EAAE,IAAI,KAAM,UAAU,EAC/B,QAAQ,EAAE,UAAU,EACpB,SAAS,EAAE,IAAA,oBAAU,EAAC,sBAAsB,EAAE,SAAS,CAAC,EACxD,KAAK,EAAE,KAAK,EACZ,YAAY,EAAE,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,SAAS;QAClE,eAAe;YACd,gCAAQ,SAAS,EAAC,aAAa,EAAC,QAAQ,QAAC,GAAG,EAAC,EAAE,EAAC,KAAK,EAAE,gBAAgB,CAAC,OAAO,IAAG,KAAK,CAAC,WAAW,CAAU;QAE9G,OAAO,YAAY,KAAK,CAAC,CAAC;YACzB,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,CAC7B,gCAAQ,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,cAAc,CAAC,MAAM,CAAC,EAAE,QAAQ,EAAE,iBAAiB,CAAC,MAAM,CAAC,IACnF,cAAc,CAAC,MAAM,CAAC,CAChB,CACV,CAAC;YACF,CAAC;gBACD,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAChC,gCAAQ,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,iBAAiB,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,IACpE,cAAc,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CACtB,CACV,CAAC,CAEG,CACV,CAAC;AACJ,CAAC,CACF,CAAC;AAEF;;;GAGG;AACU,QAAA,MAAM,GAA+C,gBAAgB,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Select\n */\n\n/* eslint-disable deprecation/deprecation */\n\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { CommonProps } from \"../utils/Props\";\nimport { useRefs } from \"../utils/hooks/useRefs\";\n\n/** Properties for a Select option\n * @public\n * @deprecated Use SelectOption in itwinui-react instead\n */\nexport interface SelectOption {\n  /** Label of the option. If `value` is not set when using SelectOption[], also serves as the value. */\n  label: string;\n  /** Value of the option when using SelectOption[].  */\n  value?: string | number | readonly string[];\n  /** Indicates whether the option is disabled. */\n  disabled?: boolean;\n}\n\n/** Properties for [[Select]] component\n * @public\n * @deprecated Use SelectProps in itwinui-react instead\n */\nexport interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement>, CommonProps {\n  /** Options for Select dropdown.\n   * @example\n   * // Example of {[key: string]: (string | SelectOption)} usage:\n   * <Select options={{\n   *  option1: \"Option 1\",\n   *  option2: \"Option 2\",\n   *  option3: {label: \"Option 3\", disabled: true},\n   * }} />\n   *\n   * // Example of (string | SelectOption)[] usage:\n   * <Select options={[\n   *  \"Option 1\",\n   *  \"Option 2\",\n   *  {label: \"Option 3\", value: \"option3\", disabled: true},\n   * ]} />\n   * }\n   */\n  options: (string | SelectOption)[] | { [key: string]: (string | SelectOption) };\n  /** Indicates whether to set focus to the select element */\n  setFocus?: boolean;\n  /** Provides ability to return reference to HTMLSelectElement */\n  ref?: React.Ref<HTMLSelectElement>;\n}\n\nfunction getCurrentDefaultValue(defaultValue: string | number | readonly string[] | undefined, placeholderValue: string | undefined) {\n  if (defaultValue)\n    return defaultValue;\n\n  return placeholderValue;\n}\n\nfunction getOptionLabel(option: string | SelectOption): string {\n  return (typeof option === \"string\") ? option : option.label;\n}\n\nfunction getOptionValue(option: string | SelectOption): string | number | readonly string[] {\n  return (typeof option === \"string\") ? option : (undefined !== option.value ? option.value : option.label);\n}\n\nfunction getOptionDisabled(option: string | SelectOption): boolean | undefined {\n  return (typeof option === \"string\") ? undefined : option.disabled;\n}\n\nconst ForwardRefSelect = React.forwardRef<HTMLSelectElement, SelectProps>(\n  function ForwardRefSelect(props, ref) {\n    const selectElement = React.useRef<HTMLSelectElement>(null);\n    const placeholderValue = React.useRef(\"placeholder\");\n    const isInitialMount = React.useRef(true);\n    const refs = useRefs(selectElement, ref);  // combine ref needed for target with the forwardRef needed by the Parent when parent is a Type Editor.\n\n    React.useEffect(() => {\n      if (props.setFocus && selectElement.current)\n        selectElement.current.focus();\n    }, [props]);\n\n    React.useEffect(() => {\n      isInitialMount.current = false;\n    }, []);\n\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    const { value: selectValue, required, options, setFocus, className, defaultValue, ...otherProps } = props; // pluck off values that will be explicitly set below\n    const showPlaceholder = React.useMemo(() => props.placeholder && (undefined === selectValue || selectValue === placeholderValue.current) && !defaultValue, [defaultValue, selectValue, props.placeholder]);\n    const isRequired = React.useMemo(() => showPlaceholder || required, [required, showPlaceholder]);\n    const currentDefaultValue = React.useMemo(() => getCurrentDefaultValue(defaultValue, showPlaceholder ? placeholderValue.current : undefined), [defaultValue, showPlaceholder]);\n    const value = (!isInitialMount.current && undefined === selectValue) ? currentDefaultValue : selectValue;\n    return (\n      <select ref={refs} {...otherProps}\n        required={isRequired}\n        className={classnames(\"uicore-inputs-select\", className)}\n        value={value}\n        defaultValue={value === undefined ? currentDefaultValue : undefined}>\n        {showPlaceholder &&\n          <option className=\"placeholder\" disabled key=\"\" value={placeholderValue.current}>{props.placeholder}</option>\n        }\n        {options instanceof Array ?\n          options.map((option, index) => (\n            <option key={index} value={getOptionValue(option)} disabled={getOptionDisabled(option)} >\n              {getOptionLabel(option)}\n            </option>\n          ))\n          :\n          Object.keys(options).map((key) => (\n            <option key={key} value={key} disabled={getOptionDisabled(options[key])} >\n              {getOptionLabel(options[key])}\n            </option>\n          ))\n        }\n      </select>\n    );\n  }\n);\n\n/** Basic select component is a wrapper for the `<select>` HTML element.\n * @public\n * @deprecated Use Select in itwinui-react instead\n */\nexport const Select: (props: SelectProps) => JSX.Element | null = ForwardRefSelect;\n"]}

package/lib/cjs/core-react/select/ThemedSelect.d.ts

@@ -1,104 +1,104 @@
-/** @packageDocumentation
- * @module Select
- */
-import "./themed-select.scss";
-import * as React from "react";
-import Component from "react-select";
-import { formatGroupLabel, getOptionLabel, getOptionValue } from "react-select/src/builtins";
-import { SelectComponentsConfig } from "react-select/src/components/index";
-import { ActionMeta, FocusEventHandler, InputActionMeta, KeyboardEventHandler, ValueType } from "react-select/src/types";
-declare type FormatOptionLabelContext = "menu" | "value";
-declare type FormatOptionLabelMeta = {
-    context: FormatOptionLabelContext;
-    inputValue: string;
-    selectValue: ValueType<OptionType>;
-};
-/** OptionType for react-select 2.0 and above. which only accepts pairs of value & label strings
- * @beta
- * @deprecated use Select from @itwin/itwinui-react
- */
-export interface OptionType {
-    value: any;
-    label: string;
-}
-/** OptionsType to match label/value pair OptionType
- * @beta
- * @deprecated use Select from @itwin/itwinui-react
-*/
-export declare type OptionsType = Array<OptionType>;
-/** ThemedSelectProps to control specific features of ThemedSelect
- * @beta
- * @deprecated use Select from @itwin/itwinui-react
- */
-export declare type ThemedSelectProps = {
-    "aria-label"?: string;
-    "aria-labelledby"?: string;
-    autoFocus?: boolean;
-    backspaceRemovesValue?: boolean;
-    blurInputOnSelect?: boolean;
-    captureMenuScroll?: boolean;
-    className?: string;
-    closeMenuOnSelect?: boolean;
-    closeMenuOnScroll?: boolean | EventListener;
-    components?: SelectComponentsConfig<OptionType>;
-    controlShouldRenderValue?: boolean;
-    defaultMenuIsOpen?: boolean;
-    defaultValue?: ValueType<OptionType>;
-    /** Provides ability to return reference to the outer HTMLDivElement */
-    divRef?: React.Ref<HTMLDivElement>;
-    escapeClearsValue?: boolean;
-    filterOption?: ((option: OptionType, rawInput: string) => boolean) | null;
-    formatGroupLabel?: typeof formatGroupLabel;
-    formatOptionLabel?: (optionType: OptionType, formatLabelMeta: FormatOptionLabelMeta) => React.ReactNode;
-    getOptionLabel?: typeof getOptionLabel;
-    getOptionValue?: typeof getOptionValue;
-    hideSelectedOptions?: boolean;
-    id?: string;
-    inputValue?: string;
-    inputId?: string;
-    instanceId?: number | string;
-    isClearable?: boolean;
-    isDisabled?: boolean;
-    isLoading?: boolean;
-    isOptionDisabled?: (option: OptionType, options: OptionsType) => boolean | false;
-    isMulti?: boolean;
-    isMenuFixed?: boolean;
-    isRtl?: boolean;
-    isSearchable?: boolean;
-    minMenuHeight?: number;
-    maxMenuHeight?: number;
-    menuIsOpen?: boolean;
-    menuShouldBlockScroll?: boolean;
-    menuShouldScrollIntoView?: boolean;
-    name?: string;
-    noOptionsMessage?: (obj: {
-        inputValue: string;
-    }) => string | null;
-    onBlur?: FocusEventHandler;
-    onChange?: (value: ValueType<OptionType>, action: ActionMeta<OptionType>) => void;
-    onFocus?: FocusEventHandler;
-    onInputChange?: (newValue: string, actionMeta?: InputActionMeta) => void;
-    onKeyDown?: KeyboardEventHandler;
-    onMenuOpen?: () => void;
-    onMenuClose?: () => void;
-    onMenuScrollToTop?: (e: React.SyntheticEvent<HTMLElement>) => void;
-    onMenuScrollToBottom?: (e: React.SyntheticEvent<HTMLElement>) => void;
-    openMenuOnFocus?: boolean;
-    openMenuOnClick?: boolean;
-    options: OptionsType;
-    pageSize?: number;
-    placeholder?: string;
-    /** Provides ability to return reference to the ThemedSelect */
-    ref?: React.Ref<Component>;
-    styles?: React.CSSProperties;
-    tabIndex?: string;
-    tabSelectsValue?: boolean;
-    value?: ValueType<OptionType>;
-};
-/** ThemedSelect is a wrapper for react-select with iTwin.js UI theming applied
- * @beta
- * @deprecated use Select from @itwin/itwinui-react
- */
-export declare function ThemedSelect(props: ThemedSelectProps): JSX.Element;
-export {};
+/** @packageDocumentation
+ * @module Select
+ */
+import "./themed-select.scss";
+import * as React from "react";
+import Component from "react-select";
+import { formatGroupLabel, getOptionLabel, getOptionValue } from "react-select/src/builtins";
+import { SelectComponentsConfig } from "react-select/src/components/index";
+import { ActionMeta, FocusEventHandler, InputActionMeta, KeyboardEventHandler, ValueType } from "react-select/src/types";
+declare type FormatOptionLabelContext = "menu" | "value";
+declare type FormatOptionLabelMeta = {
+    context: FormatOptionLabelContext;
+    inputValue: string;
+    selectValue: ValueType<OptionType>;
+};
+/** OptionType for react-select 2.0 and above. which only accepts pairs of value & label strings
+ * @beta
+ * @deprecated use Select from @itwin/itwinui-react
+ */
+export interface OptionType {
+    value: any;
+    label: string;
+}
+/** OptionsType to match label/value pair OptionType
+ * @beta
+ * @deprecated use Select from @itwin/itwinui-react
+*/
+export declare type OptionsType = Array<OptionType>;
+/** ThemedSelectProps to control specific features of ThemedSelect
+ * @beta
+ * @deprecated use Select from @itwin/itwinui-react
+ */
+export declare type ThemedSelectProps = {
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    autoFocus?: boolean;
+    backspaceRemovesValue?: boolean;
+    blurInputOnSelect?: boolean;
+    captureMenuScroll?: boolean;
+    className?: string;
+    closeMenuOnSelect?: boolean;
+    closeMenuOnScroll?: boolean | EventListener;
+    components?: SelectComponentsConfig<OptionType>;
+    controlShouldRenderValue?: boolean;
+    defaultMenuIsOpen?: boolean;
+    defaultValue?: ValueType<OptionType>;
+    /** Provides ability to return reference to the outer HTMLDivElement */
+    divRef?: React.Ref<HTMLDivElement>;
+    escapeClearsValue?: boolean;
+    filterOption?: ((option: OptionType, rawInput: string) => boolean) | null;
+    formatGroupLabel?: typeof formatGroupLabel;
+    formatOptionLabel?: (optionType: OptionType, formatLabelMeta: FormatOptionLabelMeta) => React.ReactNode;
+    getOptionLabel?: typeof getOptionLabel;
+    getOptionValue?: typeof getOptionValue;
+    hideSelectedOptions?: boolean;
+    id?: string;
+    inputValue?: string;
+    inputId?: string;
+    instanceId?: number | string;
+    isClearable?: boolean;
+    isDisabled?: boolean;
+    isLoading?: boolean;
+    isOptionDisabled?: (option: OptionType, options: OptionsType) => boolean | false;
+    isMulti?: boolean;
+    isMenuFixed?: boolean;
+    isRtl?: boolean;
+    isSearchable?: boolean;
+    minMenuHeight?: number;
+    maxMenuHeight?: number;
+    menuIsOpen?: boolean;
+    menuShouldBlockScroll?: boolean;
+    menuShouldScrollIntoView?: boolean;
+    name?: string;
+    noOptionsMessage?: (obj: {
+        inputValue: string;
+    }) => string | null;
+    onBlur?: FocusEventHandler;
+    onChange?: (value: ValueType<OptionType>, action: ActionMeta<OptionType>) => void;
+    onFocus?: FocusEventHandler;
+    onInputChange?: (newValue: string, actionMeta?: InputActionMeta) => void;
+    onKeyDown?: KeyboardEventHandler;
+    onMenuOpen?: () => void;
+    onMenuClose?: () => void;
+    onMenuScrollToTop?: (e: React.SyntheticEvent<HTMLElement>) => void;
+    onMenuScrollToBottom?: (e: React.SyntheticEvent<HTMLElement>) => void;
+    openMenuOnFocus?: boolean;
+    openMenuOnClick?: boolean;
+    options: OptionsType;
+    pageSize?: number;
+    placeholder?: string;
+    /** Provides ability to return reference to the ThemedSelect */
+    ref?: React.Ref<Component>;
+    styles?: React.CSSProperties;
+    tabIndex?: string;
+    tabSelectsValue?: boolean;
+    value?: ValueType<OptionType>;
+};
+/** ThemedSelect is a wrapper for react-select with iTwin.js UI theming applied
+ * @beta
+ * @deprecated use Select from @itwin/itwinui-react
+ */
+export declare function ThemedSelect(props: ThemedSelectProps): JSX.Element;
+export {};
 //# sourceMappingURL=ThemedSelect.d.ts.map

package/lib/cjs/core-react/select/ThemedSelect.js

@@ -1,57 +1,57 @@
-"use strict";
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/* eslint-disable deprecation/deprecation */
-/** @packageDocumentation
- * @module Select
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ThemedSelect = void 0;
-require("./themed-select.scss");
-const classnames_1 = require("classnames");
-const React = require("react");
-const react_select_1 = require("react-select");
-const UiCore_1 = require("../UiCore");
-const getCssVariable_1 = require("../utils/getCssVariable");
-const modalHelper_1 = require("./modalHelper");
-const ThemedMenu = (props) => {
-    return (React.createElement("div", { className: "uicore-reactSelectTop" },
-        React.createElement(react_select_1.components.Menu, { ...props })));
-};
-/** ThemedSelect is a wrapper for react-select with iTwin.js UI theming applied
- * @beta
- * @deprecated use Select from @itwin/itwinui-react
- */
-// eslint-disable-next-line @typescript-eslint/naming-convention
-function ThemedSelect(props) {
-    var _a;
-    const noOptionLabel = React.useRef();
-    const defaultOptionMessage = React.useCallback(() => {
-        if (!noOptionLabel.current) {
-            noOptionLabel.current = UiCore_1.UiCore.translate("reactelect.noSelectOption");
-        }
-        return noOptionLabel.current;
-    }, [noOptionLabel]);
-    const noOptionFunction = (_a = props.noOptionsMessage) !== null && _a !== void 0 ? _a : defaultOptionMessage;
-    const selectClassName = (0, classnames_1.default)("uicore-reactSelectTop", props.className);
-    const portalTarget = !!props.isMenuFixed ? undefined : (0, modalHelper_1.getParentSelector)();
-    const { 
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    classNamePrefix, className, noOptionsMessage, menuPortalTarget, isMenuFixed, styles, components, divRef, ref, 
-    // eslint-disable-next-line comma-dangle
-    ...otherProps // pass-through props
-     } = props;
-    const selectStyles = {
-        ...props.styles,
-        menuPortal: (base) => ({ ...base, zIndex }),
-    };
-    const zIndex = (0, getCssVariable_1.getCssVariableAsNumber)("--uicore-z-index-dialog-popup");
-    return (React.createElement("div", { className: selectClassName, ref: divRef },
-        React.createElement(react_select_1.default, { ref: ref, classNamePrefix: "react-select", noOptionsMessage: noOptionFunction, menuPortalTarget: portalTarget, styles: selectStyles, 
-            // eslint-disable-next-line @typescript-eslint/naming-convention
-            components: { Menu: ThemedMenu, ...props.components }, ...otherProps })));
-}
-exports.ThemedSelect = ThemedSelect;
+"use strict";
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/* eslint-disable deprecation/deprecation */
+/** @packageDocumentation
+ * @module Select
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ThemedSelect = void 0;
+require("./themed-select.scss");
+const classnames_1 = require("classnames");
+const React = require("react");
+const react_select_1 = require("react-select");
+const UiCore_1 = require("../UiCore");
+const getCssVariable_1 = require("../utils/getCssVariable");
+const modalHelper_1 = require("./modalHelper");
+const ThemedMenu = (props) => {
+    return (React.createElement("div", { className: "uicore-reactSelectTop" },
+        React.createElement(react_select_1.components.Menu, { ...props })));
+};
+/** ThemedSelect is a wrapper for react-select with iTwin.js UI theming applied
+ * @beta
+ * @deprecated use Select from @itwin/itwinui-react
+ */
+// eslint-disable-next-line @typescript-eslint/naming-convention
+function ThemedSelect(props) {
+    var _a;
+    const noOptionLabel = React.useRef();
+    const defaultOptionMessage = React.useCallback(() => {
+        if (!noOptionLabel.current) {
+            noOptionLabel.current = UiCore_1.UiCore.translate("reactselect.noSelectOption");
+        }
+        return noOptionLabel.current;
+    }, [noOptionLabel]);
+    const noOptionFunction = (_a = props.noOptionsMessage) !== null && _a !== void 0 ? _a : defaultOptionMessage;
+    const selectClassName = (0, classnames_1.default)("uicore-reactSelectTop", props.className);
+    const portalTarget = !!props.isMenuFixed ? undefined : (0, modalHelper_1.getParentSelector)();
+    const { 
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    classNamePrefix, className, noOptionsMessage, menuPortalTarget, isMenuFixed, styles, components, divRef, ref, 
+    // eslint-disable-next-line comma-dangle
+    ...otherProps // pass-through props
+     } = props;
+    const selectStyles = {
+        ...props.styles,
+        menuPortal: (base) => ({ ...base, zIndex }),
+    };
+    const zIndex = (0, getCssVariable_1.getCssVariableAsNumber)("--uicore-z-index-dialog-popup");
+    return (React.createElement("div", { className: selectClassName, ref: divRef },
+        React.createElement(react_select_1.default, { ref: ref, classNamePrefix: "react-select", noOptionsMessage: noOptionFunction, menuPortalTarget: portalTarget, styles: selectStyles, 
+            // eslint-disable-next-line @typescript-eslint/naming-convention
+            components: { Menu: ThemedMenu, ...props.components }, ...otherProps })));
+}
+exports.ThemedSelect = ThemedSelect;
 //# sourceMappingURL=ThemedSelect.js.map

package/lib/cjs/core-react/select/ThemedSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThemedSelect.js","sourceRoot":"","sources":["../../../../src/core-react/select/ThemedSelect.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F,4CAA4C;AAC5C;;GAEG;;;AAEH,gCAA8B;AAC9B,2CAAoC;AACpC,+BAA+B;AAC/B,+CAAqD;AAKrD,sCAAmC;AACnC,4DAAiE;AACjE,+CAAkD;AAqLlD,MAAM,UAAU,GAAG,CAAC,KAAqB,EAAE,EAAE;IAC3C,OAAO,CACL,6BAAK,SAAS,EAAC,uBAAuB;QACpC,oBAAC,yBAAU,CAAC,IAAI,OAAK,KAAK,GAAI,CAC1B,CACP,CAAC;AACJ,CAAC,CAAC;AACF;;;GAGG;AACH,gEAAgE;AAChE,SAAgB,YAAY,CAAC,KAAwB;;IACnD,MAAM,aAAa,GAAG,KAAK,CAAC,MAAM,EAAsB,CAAC;IACzD,MAAM,oBAAoB,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QAClD,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE;YAC1B,aAAa,CAAC,OAAO,GAAG,eAAM,CAAC,SAAS,CAAC,2BAA2B,CAAC,CAAC;SACvE;QACD,OAAO,aAAa,CAAC,OAAO,CAAC;IAC/B,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IACpB,MAAM,gBAAgB,GAAG,MAAA,KAAK,CAAC,gBAAgB,mCAAI,oBAAoB,CAAC;IACxE,MAAM,eAAe,GAAG,IAAA,oBAAU,EAAC,uBAAuB,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;IAC7E,MAAM,YAAY,GAAG,CAAC,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAA,+BAAiB,GAAE,CAAC;IAC3E,MAAM;IACJ,6DAA6D;IAC7D,eAAe,EAAE,SAAS,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,GAAG;IAC5G,wCAAwC;IACxC,GAAG,UAAU,CAAC,qBAAqB;MACpC,GAAG,KAAY,CAAC;IACjB,MAAM,YAAY,GAAG;QACnB,GAAG,KAAK,CAAC,MAAM;QACf,UAAU,EAAE,CAAC,IAAyB,EAAE,EAAE,CAAC,CAAC,EAAE,GAAG,IAAI,EAAE,MAAM,EAAE,CAAC;KACjE,CAAC;IAEF,MAAM,MAAM,GAAG,IAAA,uCAAsB,EAAC,+BAA+B,CAAC,CAAC;IACvE,OAAO,CACL,6BAAK,SAAS,EAAE,eAAe,EAAE,GAAG,EAAE,MAAM;QAC1C,oBAAC,sBAAS,IACR,GAAG,EAAE,GAAG,EACR,eAAe,EAAC,cAAc,EAC9B,gBAAgB,EAAE,gBAAgB,EAClC,gBAAgB,EAAE,YAAY,EAC9B,MAAM,EAAE,YAAY;YACpB,gEAAgE;YAChE,UAAU,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,KAAK,CAAC,UAAU,EAAE,KACjD,UAAU,GACd,CACE,CACP,CAAC;AACJ,CAAC;AArCD,oCAqCC","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/* eslint-disable deprecation/deprecation */\r\n/** @packageDocumentation\r\n * @module Select\r\n */\r\n\r\nimport \"./themed-select.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport Component, { components } from \"react-select\";\r\nimport { formatGroupLabel, getOptionLabel, getOptionValue } from \"react-select/src/builtins\";\r\nimport { SelectComponentsConfig } from \"react-select/src/components/index\";\r\nimport { MenuProps } from \"react-select/src/components/Menu\";\r\nimport { ActionMeta, FocusEventHandler, InputActionMeta, KeyboardEventHandler, ValueType } from \"react-select/src/types\";\r\nimport { UiCore } from \"../UiCore\";\r\nimport { getCssVariableAsNumber } from \"../utils/getCssVariable\";\r\nimport { getParentSelector } from \"./modalHelper\";\r\n\r\n// cspell:ignore reactselect builtins\r\n\r\n/* eslint-disable @typescript-eslint/no-shadow, @typescript-eslint/consistent-type-definitions, @typescript-eslint/array-type */\r\ntype FormatOptionLabelContext = \"menu\" | \"value\";\r\ntype FormatOptionLabelMeta = {\r\n  context: FormatOptionLabelContext;\r\n  inputValue: string;\r\n  selectValue: ValueType<OptionType>;\r\n};\r\n\r\n/** OptionType for react-select 2.0 and above. which only accepts pairs of value & label strings\r\n * @beta\r\n * @deprecated use Select from @itwin/itwinui-react\r\n */\r\nexport interface OptionType {\r\n  value: any;\r\n  label: string;\r\n}\r\n/** OptionsType to match label/value pair OptionType\r\n * @beta\r\n * @deprecated use Select from @itwin/itwinui-react\r\n*/\r\nexport type OptionsType = Array<OptionType>;\r\n\r\n/** ThemedSelectProps to control specific features of ThemedSelect\r\n * @beta\r\n * @deprecated use Select from @itwin/itwinui-react\r\n */\r\nexport type ThemedSelectProps = {\r\n  /* Aria label (for assistive tech) */\r\n  \"aria-label\"?: string;\r\n  /* HTML ID of an element that should be used as the label (for assistive tech) */\r\n  \"aria-labelledby\"?: string;\r\n  /* Focus the control when it is mounted */\r\n  autoFocus?: boolean;\r\n  /* Remove the currently focused option when the user presses backspace */\r\n  backspaceRemovesValue?: boolean;\r\n  /* Remove focus from the input when the user selects an option (handy for dismissing the keyboard on touch devices) */\r\n  blurInputOnSelect?: boolean;\r\n  /* When the user reaches the top/bottom of the menu, prevent scroll on the scroll-parent  */\r\n  captureMenuScroll?: boolean;\r\n  /* Sets a className attribute on the outer component */\r\n  className?: string;\r\n  /* Close the select menu when the user selects an option */\r\n  closeMenuOnSelect?: boolean;\r\n  /*\r\n    If `true`, close the select menu when the user scrolls the document/body.\r\n\r\n    If a function, takes a standard javascript `ScrollEvent` you return a boolean:\r\n\r\n    `true` => The menu closes\r\n\r\n    `false` => The menu stays open\r\n\r\n    This is useful when you have a scrollable modal and want to portal the menu out,\r\n    but want to avoid graphical issues.\r\n   */\r\n  closeMenuOnScroll?: boolean | EventListener;\r\n  /*\r\n    This complex object includes all the compositional components that are used\r\n    in `react-select`. If you wish to overwrite a component, pass in an object\r\n    with the appropriate namespace.\r\n\r\n    If you only wish to restyle a component, we recommend using the `styles` prop\r\n    instead. For a list of the components that can be passed in, and the shape\r\n    that will be passed to them, see [the components docs](/components)\r\n  */\r\n  components?: SelectComponentsConfig<OptionType>;\r\n  /* Whether the value of the select, e.g. SingleValue, should be displayed in the control. */\r\n  controlShouldRenderValue?: boolean;\r\n  /* Ff true, the menu is open immediately */\r\n  defaultMenuIsOpen?: boolean;\r\n  /* Value set in the control by default */\r\n  defaultValue?: ValueType<OptionType>;\r\n  /** Provides ability to return reference to the outer HTMLDivElement */\r\n  divRef?: React.Ref<HTMLDivElement>;\r\n  /* Clear all values when the user presses escape AND the menu is closed */\r\n  escapeClearsValue?: boolean;\r\n  /* Custom method to filter whether an option should be displayed in the menu */\r\n  filterOption?: ((\r\n    option: OptionType,\r\n    rawInput: string,\r\n  ) => boolean) | null;\r\n  /*\r\n  Formats group labels in the menu as React components\r\n\r\n  An example can be found in the [Replacing builtins](/advanced#replacing-builtins) documentation.\r\n*/\r\n  formatGroupLabel?: typeof formatGroupLabel;\r\n  /* Formats option labels in the menu and control as React components */\r\n  formatOptionLabel?: (optionType: OptionType, formatLabelMeta: FormatOptionLabelMeta) => React.ReactNode;\r\n  /* Resolves option data to a string to be displayed as the label by components */\r\n  getOptionLabel?: typeof getOptionLabel;\r\n  /* Resolves option data to a string to compare options and specify value attributes */\r\n  getOptionValue?: typeof getOptionValue;\r\n  /* Hide the selected option from the menu */\r\n  hideSelectedOptions?: boolean;\r\n  /* The id to set on the SelectContainer component. */\r\n  id?: string;\r\n  /* The value of the search input */\r\n  inputValue?: string;\r\n  /* The id of the search input */\r\n  inputId?: string;\r\n  /* Define an id prefix for the select components e.g. {your-id}-value */\r\n  instanceId?: number | string;\r\n  /* Is the select value clearable */\r\n  isClearable?: boolean;\r\n  /* Is the select disabled */\r\n  isDisabled?: boolean;\r\n  /* Is the select in a state of loading (async) */\r\n  isLoading?: boolean;\r\n  /*\r\n    Override the built-in logic to detect whether an option is disabled\r\n\r\n    An example can be found in the [Replacing builtins](/advanced#replacing-builtins) documentation.\r\n  */\r\n  isOptionDisabled?: (option: OptionType, options: OptionsType) => boolean | false;\r\n  /* Support multiple selected options */\r\n  isMulti?: boolean;\r\n  /* If true, menu will not be opened in a portal */\r\n  isMenuFixed?: boolean;\r\n  /* Is the select direction right-to-left */\r\n  isRtl?: boolean;\r\n  /* Whether to enable search functionality */\r\n  isSearchable?: boolean;\r\n  /* Minimum height of the menu before flipping */\r\n  minMenuHeight?: number;\r\n  /* Maximum height of the menu before scrolling */\r\n  maxMenuHeight?: number;\r\n  /* Whether the menu is open */\r\n  menuIsOpen?: boolean;\r\n  /* Whether to block scroll events when the menu is open */\r\n  menuShouldBlockScroll?: boolean;\r\n  /* Whether the menu should be scrolled into view when it opens */\r\n  menuShouldScrollIntoView?: boolean;\r\n  /* Name of the HTML Input (optional - without this, no input will be rendered) */\r\n  name?: string;\r\n  /* Text to display when there are no options */\r\n  noOptionsMessage?: (obj: { inputValue: string }) => string | null;\r\n  /* Handle blur events on the control */\r\n  onBlur?: FocusEventHandler;\r\n  /* Handle change events on the select */\r\n  onChange?: (value: ValueType<OptionType>, action: ActionMeta<OptionType>) => void;\r\n  /* Handle focus events on the control */\r\n  onFocus?: FocusEventHandler;\r\n  /* Handle change events on the input */\r\n  onInputChange?: (newValue: string, actionMeta?: InputActionMeta) => void;\r\n  /* Handle key down events on the select */\r\n  onKeyDown?: KeyboardEventHandler;\r\n  /* Handle the menu opening */\r\n  onMenuOpen?: () => void;\r\n  /* Handle the menu closing */\r\n  onMenuClose?: () => void;\r\n  /* Fired when the user scrolls to the top of the menu */\r\n  onMenuScrollToTop?: (e: React.SyntheticEvent<HTMLElement>) => void;\r\n  /* Fired when the user scrolls to the bottom of the menu */\r\n  onMenuScrollToBottom?: (e: React.SyntheticEvent<HTMLElement>) => void;\r\n  /* Allows control of whether the menu is opened when the Select is focused */\r\n  openMenuOnFocus?: boolean;\r\n  /* Allows control of whether the menu is opened when the Select is clicked */\r\n  openMenuOnClick?: boolean;\r\n  /* Array of options that populate the select menu */\r\n  options: OptionsType;\r\n  /* Number of options to jump in menu when page{up|down} keys are used */\r\n  pageSize?: number;\r\n  /* Placeholder for the select value */\r\n  placeholder?: string;\r\n  /** Provides ability to return reference to the ThemedSelect */\r\n  ref?: React.Ref<Component>;\r\n  /* Sets additional styling */\r\n  styles?: React.CSSProperties;\r\n  /* Sets the tabIndex attribute on the input */\r\n  tabIndex?: string;\r\n  /* Select the currently focused option when the user presses tab */\r\n  tabSelectsValue?: boolean;\r\n  /* The value of the select; reflected by the selected option */\r\n  value?: ValueType<OptionType>;\r\n};\r\n\r\nconst ThemedMenu = (props: MenuProps<any>) => { // eslint-disable-line @typescript-eslint/naming-convention\r\n  return (\r\n    <div className=\"uicore-reactSelectTop\">\r\n      <components.Menu {...props} />\r\n    </div>\r\n  );\r\n};\r\n/** ThemedSelect is a wrapper for react-select with iTwin.js UI theming applied\r\n * @beta\r\n * @deprecated use Select from @itwin/itwinui-react\r\n */\r\n// eslint-disable-next-line @typescript-eslint/naming-convention\r\nexport function ThemedSelect(props: ThemedSelectProps) {\r\n  const noOptionLabel = React.useRef<string | undefined>();\r\n  const defaultOptionMessage = React.useCallback(() => {\r\n    if (!noOptionLabel.current) {\r\n      noOptionLabel.current = UiCore.translate(\"reactelect.noSelectOption\");\r\n    }\r\n    return noOptionLabel.current;\r\n  }, [noOptionLabel]);\r\n  const noOptionFunction = props.noOptionsMessage ?? defaultOptionMessage;\r\n  const selectClassName = classnames(\"uicore-reactSelectTop\", props.className);\r\n  const portalTarget = !!props.isMenuFixed ? undefined : getParentSelector();\r\n  const {\r\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\r\n    classNamePrefix, className, noOptionsMessage, menuPortalTarget, isMenuFixed, styles, components, divRef, ref,\r\n    // eslint-disable-next-line comma-dangle\r\n    ...otherProps // pass-through props\r\n  } = props as any;\r\n  const selectStyles = {\r\n    ...props.styles,\r\n    menuPortal: (base: React.CSSProperties) => ({ ...base, zIndex }),\r\n  };\r\n\r\n  const zIndex = getCssVariableAsNumber(\"--uicore-z-index-dialog-popup\");\r\n  return (\r\n    <div className={selectClassName} ref={divRef}>\r\n      <Component\r\n        ref={ref}\r\n        classNamePrefix=\"react-select\"\r\n        noOptionsMessage={noOptionFunction}\r\n        menuPortalTarget={portalTarget}\r\n        styles={selectStyles}\r\n        // eslint-disable-next-line @typescript-eslint/naming-convention\r\n        components={{ Menu: ThemedMenu, ...props.components }}\r\n        {...otherProps}\r\n      />\r\n    </div>\r\n  );\r\n}\r\n"]}
+{"version":3,"file":"ThemedSelect.js","sourceRoot":"","sources":["../../../../src/core-react/select/ThemedSelect.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F,4CAA4C;AAC5C;;GAEG;;;AAEH,gCAA8B;AAC9B,2CAAoC;AACpC,+BAA+B;AAC/B,+CAAqD;AAKrD,sCAAmC;AACnC,4DAAiE;AACjE,+CAAkD;AAqLlD,MAAM,UAAU,GAAG,CAAC,KAAqB,EAAE,EAAE;IAC3C,OAAO,CACL,6BAAK,SAAS,EAAC,uBAAuB;QACpC,oBAAC,yBAAU,CAAC,IAAI,OAAK,KAAK,GAAI,CAC1B,CACP,CAAC;AACJ,CAAC,CAAC;AACF;;;GAGG;AACH,gEAAgE;AAChE,SAAgB,YAAY,CAAC,KAAwB;;IACnD,MAAM,aAAa,GAAG,KAAK,CAAC,MAAM,EAAsB,CAAC;IACzD,MAAM,oBAAoB,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QAClD,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE;YAC1B,aAAa,CAAC,OAAO,GAAG,eAAM,CAAC,SAAS,CAAC,4BAA4B,CAAC,CAAC;SACxE;QACD,OAAO,aAAa,CAAC,OAAO,CAAC;IAC/B,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IACpB,MAAM,gBAAgB,GAAG,MAAA,KAAK,CAAC,gBAAgB,mCAAI,oBAAoB,CAAC;IACxE,MAAM,eAAe,GAAG,IAAA,oBAAU,EAAC,uBAAuB,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;IAC7E,MAAM,YAAY,GAAG,CAAC,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAA,+BAAiB,GAAE,CAAC;IAC3E,MAAM;IACJ,6DAA6D;IAC7D,eAAe,EAAE,SAAS,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,GAAG;IAC5G,wCAAwC;IACxC,GAAG,UAAU,CAAC,qBAAqB;MACpC,GAAG,KAAY,CAAC;IACjB,MAAM,YAAY,GAAG;QACnB,GAAG,KAAK,CAAC,MAAM;QACf,UAAU,EAAE,CAAC,IAAyB,EAAE,EAAE,CAAC,CAAC,EAAE,GAAG,IAAI,EAAE,MAAM,EAAE,CAAC;KACjE,CAAC;IAEF,MAAM,MAAM,GAAG,IAAA,uCAAsB,EAAC,+BAA+B,CAAC,CAAC;IACvE,OAAO,CACL,6BAAK,SAAS,EAAE,eAAe,EAAE,GAAG,EAAE,MAAM;QAC1C,oBAAC,sBAAS,IACR,GAAG,EAAE,GAAG,EACR,eAAe,EAAC,cAAc,EAC9B,gBAAgB,EAAE,gBAAgB,EAClC,gBAAgB,EAAE,YAAY,EAC9B,MAAM,EAAE,YAAY;YACpB,gEAAgE;YAChE,UAAU,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,KAAK,CAAC,UAAU,EAAE,KACjD,UAAU,GACd,CACE,CACP,CAAC;AACJ,CAAC;AArCD,oCAqCC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\n/* eslint-disable deprecation/deprecation */\n/** @packageDocumentation\n * @module Select\n */\n\nimport \"./themed-select.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport Component, { components } from \"react-select\";\nimport { formatGroupLabel, getOptionLabel, getOptionValue } from \"react-select/src/builtins\";\nimport { SelectComponentsConfig } from \"react-select/src/components/index\";\nimport { MenuProps } from \"react-select/src/components/Menu\";\nimport { ActionMeta, FocusEventHandler, InputActionMeta, KeyboardEventHandler, ValueType } from \"react-select/src/types\";\nimport { UiCore } from \"../UiCore\";\nimport { getCssVariableAsNumber } from \"../utils/getCssVariable\";\nimport { getParentSelector } from \"./modalHelper\";\n\n// cspell:ignore reactselect builtins\n\n/* eslint-disable @typescript-eslint/no-shadow, @typescript-eslint/consistent-type-definitions, @typescript-eslint/array-type */\ntype FormatOptionLabelContext = \"menu\" | \"value\";\ntype FormatOptionLabelMeta = {\n  context: FormatOptionLabelContext;\n  inputValue: string;\n  selectValue: ValueType<OptionType>;\n};\n\n/** OptionType for react-select 2.0 and above. which only accepts pairs of value & label strings\n * @beta\n * @deprecated use Select from @itwin/itwinui-react\n */\nexport interface OptionType {\n  value: any;\n  label: string;\n}\n/** OptionsType to match label/value pair OptionType\n * @beta\n * @deprecated use Select from @itwin/itwinui-react\n*/\nexport type OptionsType = Array<OptionType>;\n\n/** ThemedSelectProps to control specific features of ThemedSelect\n * @beta\n * @deprecated use Select from @itwin/itwinui-react\n */\nexport type ThemedSelectProps = {\n  /* Aria label (for assistive tech) */\n  \"aria-label\"?: string;\n  /* HTML ID of an element that should be used as the label (for assistive tech) */\n  \"aria-labelledby\"?: string;\n  /* Focus the control when it is mounted */\n  autoFocus?: boolean;\n  /* Remove the currently focused option when the user presses backspace */\n  backspaceRemovesValue?: boolean;\n  /* Remove focus from the input when the user selects an option (handy for dismissing the keyboard on touch devices) */\n  blurInputOnSelect?: boolean;\n  /* When the user reaches the top/bottom of the menu, prevent scroll on the scroll-parent  */\n  captureMenuScroll?: boolean;\n  /* Sets a className attribute on the outer component */\n  className?: string;\n  /* Close the select menu when the user selects an option */\n  closeMenuOnSelect?: boolean;\n  /*\n    If `true`, close the select menu when the user scrolls the document/body.\n\n    If a function, takes a standard javascript `ScrollEvent` you return a boolean:\n\n    `true` => The menu closes\n\n    `false` => The menu stays open\n\n    This is useful when you have a scrollable modal and want to portal the menu out,\n    but want to avoid graphical issues.\n   */\n  closeMenuOnScroll?: boolean | EventListener;\n  /*\n    This complex object includes all the compositional components that are used\n    in `react-select`. If you wish to overwrite a component, pass in an object\n    with the appropriate namespace.\n\n    If you only wish to restyle a component, we recommend using the `styles` prop\n    instead. For a list of the components that can be passed in, and the shape\n    that will be passed to them, see [the components docs](/components)\n  */\n  components?: SelectComponentsConfig<OptionType>;\n  /* Whether the value of the select, e.g. SingleValue, should be displayed in the control. */\n  controlShouldRenderValue?: boolean;\n  /* Ff true, the menu is open immediately */\n  defaultMenuIsOpen?: boolean;\n  /* Value set in the control by default */\n  defaultValue?: ValueType<OptionType>;\n  /** Provides ability to return reference to the outer HTMLDivElement */\n  divRef?: React.Ref<HTMLDivElement>;\n  /* Clear all values when the user presses escape AND the menu is closed */\n  escapeClearsValue?: boolean;\n  /* Custom method to filter whether an option should be displayed in the menu */\n  filterOption?: ((\n    option: OptionType,\n    rawInput: string,\n  ) => boolean) | null;\n  /*\n  Formats group labels in the menu as React components\n\n  An example can be found in the [Replacing builtins](/advanced#replacing-builtins) documentation.\n*/\n  formatGroupLabel?: typeof formatGroupLabel;\n  /* Formats option labels in the menu and control as React components */\n  formatOptionLabel?: (optionType: OptionType, formatLabelMeta: FormatOptionLabelMeta) => React.ReactNode;\n  /* Resolves option data to a string to be displayed as the label by components */\n  getOptionLabel?: typeof getOptionLabel;\n  /* Resolves option data to a string to compare options and specify value attributes */\n  getOptionValue?: typeof getOptionValue;\n  /* Hide the selected option from the menu */\n  hideSelectedOptions?: boolean;\n  /* The id to set on the SelectContainer component. */\n  id?: string;\n  /* The value of the search input */\n  inputValue?: string;\n  /* The id of the search input */\n  inputId?: string;\n  /* Define an id prefix for the select components e.g. {your-id}-value */\n  instanceId?: number | string;\n  /* Is the select value clearable */\n  isClearable?: boolean;\n  /* Is the select disabled */\n  isDisabled?: boolean;\n  /* Is the select in a state of loading (async) */\n  isLoading?: boolean;\n  /*\n    Override the built-in logic to detect whether an option is disabled\n\n    An example can be found in the [Replacing builtins](/advanced#replacing-builtins) documentation.\n  */\n  isOptionDisabled?: (option: OptionType, options: OptionsType) => boolean | false;\n  /* Support multiple selected options */\n  isMulti?: boolean;\n  /* If true, menu will not be opened in a portal */\n  isMenuFixed?: boolean;\n  /* Is the select direction right-to-left */\n  isRtl?: boolean;\n  /* Whether to enable search functionality */\n  isSearchable?: boolean;\n  /* Minimum height of the menu before flipping */\n  minMenuHeight?: number;\n  /* Maximum height of the menu before scrolling */\n  maxMenuHeight?: number;\n  /* Whether the menu is open */\n  menuIsOpen?: boolean;\n  /* Whether to block scroll events when the menu is open */\n  menuShouldBlockScroll?: boolean;\n  /* Whether the menu should be scrolled into view when it opens */\n  menuShouldScrollIntoView?: boolean;\n  /* Name of the HTML Input (optional - without this, no input will be rendered) */\n  name?: string;\n  /* Text to display when there are no options */\n  noOptionsMessage?: (obj: { inputValue: string }) => string | null;\n  /* Handle blur events on the control */\n  onBlur?: FocusEventHandler;\n  /* Handle change events on the select */\n  onChange?: (value: ValueType<OptionType>, action: ActionMeta<OptionType>) => void;\n  /* Handle focus events on the control */\n  onFocus?: FocusEventHandler;\n  /* Handle change events on the input */\n  onInputChange?: (newValue: string, actionMeta?: InputActionMeta) => void;\n  /* Handle key down events on the select */\n  onKeyDown?: KeyboardEventHandler;\n  /* Handle the menu opening */\n  onMenuOpen?: () => void;\n  /* Handle the menu closing */\n  onMenuClose?: () => void;\n  /* Fired when the user scrolls to the top of the menu */\n  onMenuScrollToTop?: (e: React.SyntheticEvent<HTMLElement>) => void;\n  /* Fired when the user scrolls to the bottom of the menu */\n  onMenuScrollToBottom?: (e: React.SyntheticEvent<HTMLElement>) => void;\n  /* Allows control of whether the menu is opened when the Select is focused */\n  openMenuOnFocus?: boolean;\n  /* Allows control of whether the menu is opened when the Select is clicked */\n  openMenuOnClick?: boolean;\n  /* Array of options that populate the select menu */\n  options: OptionsType;\n  /* Number of options to jump in menu when page{up|down} keys are used */\n  pageSize?: number;\n  /* Placeholder for the select value */\n  placeholder?: string;\n  /** Provides ability to return reference to the ThemedSelect */\n  ref?: React.Ref<Component>;\n  /* Sets additional styling */\n  styles?: React.CSSProperties;\n  /* Sets the tabIndex attribute on the input */\n  tabIndex?: string;\n  /* Select the currently focused option when the user presses tab */\n  tabSelectsValue?: boolean;\n  /* The value of the select; reflected by the selected option */\n  value?: ValueType<OptionType>;\n};\n\nconst ThemedMenu = (props: MenuProps<any>) => { // eslint-disable-line @typescript-eslint/naming-convention\n  return (\n    <div className=\"uicore-reactSelectTop\">\n      <components.Menu {...props} />\n    </div>\n  );\n};\n/** ThemedSelect is a wrapper for react-select with iTwin.js UI theming applied\n * @beta\n * @deprecated use Select from @itwin/itwinui-react\n */\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport function ThemedSelect(props: ThemedSelectProps) {\n  const noOptionLabel = React.useRef<string | undefined>();\n  const defaultOptionMessage = React.useCallback(() => {\n    if (!noOptionLabel.current) {\n      noOptionLabel.current = UiCore.translate(\"reactselect.noSelectOption\");\n    }\n    return noOptionLabel.current;\n  }, [noOptionLabel]);\n  const noOptionFunction = props.noOptionsMessage ?? defaultOptionMessage;\n  const selectClassName = classnames(\"uicore-reactSelectTop\", props.className);\n  const portalTarget = !!props.isMenuFixed ? undefined : getParentSelector();\n  const {\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    classNamePrefix, className, noOptionsMessage, menuPortalTarget, isMenuFixed, styles, components, divRef, ref,\n    // eslint-disable-next-line comma-dangle\n    ...otherProps // pass-through props\n  } = props as any;\n  const selectStyles = {\n    ...props.styles,\n    menuPortal: (base: React.CSSProperties) => ({ ...base, zIndex }),\n  };\n\n  const zIndex = getCssVariableAsNumber(\"--uicore-z-index-dialog-popup\");\n  return (\n    <div className={selectClassName} ref={divRef}>\n      <Component\n        ref={ref}\n        classNamePrefix=\"react-select\"\n        noOptionsMessage={noOptionFunction}\n        menuPortalTarget={portalTarget}\n        styles={selectStyles}\n        // eslint-disable-next-line @typescript-eslint/naming-convention\n        components={{ Menu: ThemedMenu, ...props.components }}\n        {...otherProps}\n      />\n    </div>\n  );\n}\n"]}

package/lib/cjs/core-react/select/classes.scss

@@ -1,9 +1,9 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@import "./index";
-
-.uicore-inputs-labeled-select { @include uicore-inputs-labeled-select; }
-.uicore-inputs-select { @include uicore-inputs-select; }
-.uicore-inputs-labeled-themed-select { @include uicore-inputs-labeled-themed-select; }
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "./index";
+
+.uicore-inputs-labeled-select { @include uicore-inputs-labeled-select; }
+.uicore-inputs-select { @include uicore-inputs-select; }
+.uicore-inputs-labeled-themed-select { @include uicore-inputs-labeled-themed-select; }

package/lib/cjs/core-react/select/index.scss

@@ -1,10 +1,10 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@import "../style/index";
-
-@import "../inputs/variables";
-@import "./labeled-select";
-@import "./labeled-themed-select";
-@import "./select";
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "../style/index";
+
+@import "../inputs/variables";
+@import "./labeled-select";
+@import "./labeled-themed-select";
+@import "./select";

package/lib/cjs/core-react/select/labeled-select.scss

@@ -1,72 +1,72 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@import "../style/index";
-@import "~@itwin/itwinui-css/scss/style/typography";
-
-@mixin uicore-inputs-labeled-select {
-
-  display:                    block;
-  padding:                    0;
-  margin:                     0 0 $uicore-unbordered-padding;
-  text-align:                 left;
-  font-family:                $iui-font-family;
-  font-size:                  $iui-font-size;
-  font-weight:                $iui-font-weight-normal;
-  cursor:                     pointer;
-
-  > .uicore-label {
-
-    padding:                0;
-    margin:                 0;
-    border:                 0 none transparent;
-    display:                block;
-    font-size:              $iui-font-size;
-    font-weight:            $iui-font-weight-semibold;
-    line-height:            $uicore-line-height;
-    text-align:             left;
-    color:                  $buic-text-color;
-  }
-
-  > .uicore-message {
-
-    display:                block;
-    font-size:              $iui-font-size-small;
-    line-height:            $uicore-line-height;
-    color:                  $buic-text-color-muted;
-  }
-
-
-  /// Status colors ----------------------------------------------------------
-
-  $status-colors: (
-    success:    $buic-foreground-positive-rgb,
-    warning:    $buic-foreground-warning-rgb,
-    error:      $buic-foreground-negative-rgb
-  );
-
-  @each $status, $color in $status-colors {
-
-    &.#{$status},
-    &.#{$status} > .uicore-message {
-
-      color:                rgb($color);
-    }
-
-    &.#{$status} {
-      > select,
-      > .uicore-inputs-select {
-
-        border-color:       rgb($color);
-        box-shadow:         $buic-inputs-boxshadow 0px 1px 1px inset;
-
-        &:focus {
-
-          border-color:     rgb($color);
-          box-shadow:       rgba( $color, $uicore-opacity-boxshadow ) 0px 0px 0px 2px;
-        }
-      }
-    }
-  }
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "../style/index";
+@import "~@itwin/itwinui-css/scss/style/typography";
+
+@mixin uicore-inputs-labeled-select {
+
+  display:                    block;
+  padding:                    0;
+  margin:                     0 0 $uicore-unbordered-padding;
+  text-align:                 left;
+  font-family:                $iui-font-family;
+  font-size:                  $iui-font-size;
+  font-weight:                $iui-font-weight-normal;
+  cursor:                     pointer;
+
+  > .uicore-label {
+
+    padding:                0;
+    margin:                 0;
+    border:                 0 none transparent;
+    display:                block;
+    font-size:              $iui-font-size;
+    font-weight:            $iui-font-weight-semibold;
+    line-height:            $uicore-line-height;
+    text-align:             left;
+    color:                  $buic-text-color;
+  }
+
+  > .uicore-message {
+
+    display:                block;
+    font-size:              $iui-font-size-small;
+    line-height:            $uicore-line-height;
+    color:                  $buic-text-color-muted;
+  }
+
+
+  /// Status colors ----------------------------------------------------------
+
+  $status-colors: (
+    success:    $buic-foreground-positive-rgb,
+    warning:    $buic-foreground-warning-rgb,
+    error:      $buic-foreground-negative-rgb
+  );
+
+  @each $status, $color in $status-colors {
+
+    &.#{$status},
+    &.#{$status} > .uicore-message {
+
+      color:                rgb($color);
+    }
+
+    &.#{$status} {
+      > select,
+      > .uicore-inputs-select {
+
+        border-color:       rgb($color);
+        box-shadow:         $buic-inputs-boxshadow 0px 1px 1px inset;
+
+        &:focus {
+
+          border-color:     rgb($color);
+          box-shadow:       rgba( $color, $uicore-opacity-boxshadow ) 0px 0px 0px 2px;
+        }
+      }
+    }
+  }
+}