@oliasoft-open-source/react-ui-library 3.12.0-beta-19 → 3.12.0-beta-21

package/dist/components/select/custom-select/hooks/use-custom-select-logic.js

@@ -0,0 +1,222 @@
+import { useCallback, useEffect, useRef } from "react";
+import { isEqual, uniqWith } from "lodash";
+import { useLayer } from "react-laag";
+import { getWidestOptionWidth } from "../helper";
+import { placementOptions } from "../layer/placementOptions";
+import { nextLayerFocus } from "../custom-select.reducer";
+import { ActionTypes, EventKey } from "./enum";
+// TODO - @Oleg & @Jack - revisit and fix types
+export const useCustomSelectLogic = ({ state, dispatch, options, setTriggerFocus, disabled, disabledContext, onCreate, onChange, selectedOptions, width, small, isFontLoaded, placeholder, firstSelectedOptionIndex, createAble, listRef, autoLayerWidth, }) => {
+    const closeLayer = () => {
+        if (state.isLayerOpen) {
+            dispatch({ type: ActionTypes.CLOSE_LAYER });
+        }
+        setTriggerFocus();
+    };
+    const openLayer = () => dispatch({ type: ActionTypes.OPEN_LAYER });
+    //Update visible options upon external changes to the options prop
+    const isFirstRun = useRef(true);
+    useEffect(() => {
+        if (isFirstRun.current) {
+            isFirstRun.current = false;
+        }
+        else {
+            dispatch({ type: ActionTypes.SET_VISIBLE_OPTIONS, options });
+        }
+    }, [options]);
+    const onSelectOption = (evt, option, close) => {
+        if (!(disabled || disabledContext)) {
+            if (close) {
+                close();
+            }
+            if (option) {
+                if (option.createAble && onCreate) {
+                    onCreate(option.value);
+                }
+                else {
+                    if (!option.disabled) {
+                        if (Array.isArray(selectedOptions)) {
+                            const alreadySelected = selectedOptions.find((selectedOption) => isEqual(selectedOption, option));
+                            if (!alreadySelected) {
+                                const newSelectedOptions = uniqWith([...selectedOptions, option], isEqual);
+                                if (onChange) {
+                                    onChange(evt, newSelectedOptions);
+                                }
+                            }
+                            else {
+                                const newSelectedOptions = selectedOptions.filter((opt) => !isEqual(opt, option));
+                                if (onChange) {
+                                    onChange(evt, newSelectedOptions);
+                                }
+                            }
+                        }
+                        else {
+                            if (onChange) {
+                                onChange(evt, option);
+                            }
+                        }
+                    }
+                }
+            }
+            dispatch({ type: ActionTypes.CLEAR_SEARCH, options });
+            setTriggerFocus();
+        }
+    };
+    const getTriggerWidth = useCallback(() => {
+        if (!width)
+            return '100%';
+        if (width !== 'auto')
+            return width;
+        return getWidestOptionWidth(options, small, isFontLoaded, placeholder);
+    }, [options, isFontLoaded]);
+    const getLayerWidth = useCallback((triggerBounds) => {
+        if (!autoLayerWidth)
+            return triggerBounds?.width;
+        const layerWidth = Math.max(getWidestOptionWidth(options, small, isFontLoaded, placeholder), triggerBounds?.width);
+        return layerWidth;
+    }, [options, isFontLoaded]);
+    const { renderLayer, layerProps, triggerProps, triggerBounds } = useLayer({
+        isOpen: state?.isLayerOpen ?? false,
+        overflowContainer: true,
+        ...placementOptions,
+        ResizeObserver,
+        onOutsideClick: closeLayer,
+        onParentClose: closeLayer,
+    });
+    const onClickTrigger = () => {
+        if (disabled || disabledContext) {
+            return;
+        }
+        if (state.isLayerOpen) {
+            closeLayer();
+            return;
+        }
+        dispatch({
+            type: ActionTypes.RESET_LAYER_FOCUS,
+            options,
+            firstSelectedOptionIndex,
+        });
+        openLayer();
+    };
+    // reset search filter when layer closes
+    const isFirstRender = useRef(true);
+    useEffect(() => {
+        if (isFirstRender.current) {
+            isFirstRender.current = false;
+        }
+        else {
+            if (!state.isLayerOpen) {
+                dispatch({ type: ActionTypes.CLEAR_SEARCH, options });
+            }
+        }
+    }, [state.isLayerOpen]);
+    const onClickDeselectOption = (evt, options) => {
+        const newSelectedOptions = selectedOptions instanceof Array
+            ? selectedOptions.filter((option) => option.value !== options.value)
+            : null;
+        if (onChange) {
+            onChange(evt, newSelectedOptions);
+        }
+    };
+    const onClickClearAll = (evt) => {
+        const newSelectedOptions = selectedOptions instanceof Array ? [] : { value: null };
+        if (onChange) {
+            onChange(evt, newSelectedOptions);
+        }
+    };
+    const onChangeSearch = (value) => dispatch({
+        type: ActionTypes.ON_CHANGE_SEARCH,
+        options,
+        value,
+        createAble,
+    });
+    /*
+       Keyboard actions
+     */
+    const clickTrigger = () => {
+        openLayer();
+        dispatch({ type: ActionTypes.BLUR_TRIGGER_INPUTS });
+    };
+    const scrollToItem = (index) => {
+        if (listRef.current && Number.isInteger(index)) {
+            listRef.current.scrollToItem(index);
+        }
+    };
+    const focusNextLayerOption = (ICustomSelectDirection) => {
+        const next = nextLayerFocus(ICustomSelectDirection, state.layerFocus);
+        dispatch({ type: ActionTypes.FOCUS_LAYER_OPTIONS, nextLayerFocus: next });
+        scrollToItem(next.current);
+    };
+    const focusTriggerInputs = (ICustomSelectDirection) => {
+        dispatch({
+            type: ActionTypes.FOCUS_TRIGGER_INPUTS,
+            ICustomSelectDirection,
+            selectedOptions,
+        });
+    };
+    const clearAll = (evt) => onClickClearAll(evt);
+    const deselectIsFocused = selectedOptions &&
+        selectedOptions[state.triggerFocus.currentOption];
+    const deselectOption = (evt) => {
+        onClickDeselectOption(evt, selectedOptions[state.triggerFocus.currentOption]);
+    };
+    const selectOption = (evt) => {
+        onSelectOption(evt, state?.visibleOptions?.[state.layerFocus.current], closeLayer);
+    };
+    const clearAllIsFocused = state.triggerFocus.clearAll;
+    const onKeyEvent = (key, evt) => {
+        switch (key) {
+            case EventKey.UP: {
+                focusNextLayerOption(key);
+                break;
+            }
+            case EventKey.DOWN: {
+                if (state.isLayerOpen) {
+                    focusNextLayerOption(key);
+                }
+                else {
+                    clickTrigger();
+                }
+                break;
+            }
+            case EventKey.LEFT:
+            case EventKey.RIGHT: {
+                focusTriggerInputs(key);
+                break;
+            }
+            case EventKey.ENTER: {
+                if (clearAllIsFocused) {
+                    clearAll(evt);
+                }
+                else if (deselectIsFocused) {
+                    deselectOption(evt);
+                }
+                else {
+                    selectOption(evt);
+                }
+                break;
+            }
+            case EventKey.ESC: {
+                closeLayer();
+                break;
+            }
+            default:
+        }
+    };
+    return {
+        getTriggerWidth,
+        onKeyEvent,
+        clearAllIsFocused,
+        triggerProps,
+        onClickTrigger,
+        onChangeSearch,
+        onClickDeselectOption,
+        onClickClearAll,
+        renderLayer,
+        layerProps,
+        closeLayer,
+        onSelectOption,
+        getLayerWidth,
+        triggerBounds,
+    };
+};

package/dist/components/select/custom-select/layer/heading.d.ts

@@ -0,0 +1,3 @@
+export declare const Heading: ({ label }: {
+    label: string | number;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/select/custom-select/layer/heading.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styles from '../custom-select.module.less';
+export const Heading = ({ label }) => {
+    return (_jsx("div", { onClick: (evt) => evt.stopPropagation(), className: styles.heading, children: label }));
+};

package/dist/components/select/custom-select/layer/layer.d.ts

@@ -0,0 +1,17 @@
+import React, { RefObject } from 'react';
+import { ISelectSection } from './section';
+import { ISelectSelectedOption } from '../../select.interface';
+export interface ISelectLayerProps {
+    listRef: RefObject<any>;
+    isMulti?: boolean;
+    sections: ISelectSection[];
+    selectedOptions: ISelectSelectedOption | ISelectSelectedOption[];
+    onSelectOption: (event?: React.MouseEvent<HTMLDivElement, MouseEvent>, section?: ISelectSection) => void;
+    focusedOptionIndex?: number;
+    width: number;
+    small?: boolean;
+    firstSelectedOptionIndex?: number;
+    closeLayer: () => void;
+    testId?: string;
+}
+export declare const Layer: ({ listRef, isMulti, sections, selectedOptions, onSelectOption, focusedOptionIndex, width, small, firstSelectedOptionIndex, closeLayer, testId, }: ISelectLayerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/select/custom-select/layer/layer.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import cx from 'classnames';
+import { FixedSizeList as List } from 'react-window';
+import styles from '../custom-select.module.less';
+import { Section } from './section';
+import { MenuType } from "../../../menu/enum";
+export const Layer = ({ listRef, isMulti, sections, selectedOptions, onSelectOption, focusedOptionIndex, width, small, firstSelectedOptionIndex, closeLayer, testId, }) => {
+    useEffect(() => {
+        if (firstSelectedOptionIndex &&
+            firstSelectedOptionIndex !== null &&
+            listRef.current !== null) {
+            listRef.current.scrollToItem(firstSelectedOptionIndex, 'start');
+        }
+    }, [firstSelectedOptionIndex, listRef]);
+    const optionHeight = small ? 24 : 32;
+    return (_jsx("div", { "data-testid": testId, className: cx(styles.layer, small && styles.small), children: !sections.length ? (_jsx("ul", { children: _jsx("li", { children: _jsx("div", { className: styles.message, style: { width }, children: "No matches" }) }) })) : (_jsx(List, { ref: listRef, height: sections.length < 10
+                ? optionHeight * sections.length
+                : optionHeight * 10, itemCount: sections.length, itemSize: optionHeight, width: width, children: ({ index, style }) => (_jsx("div", { style: style, children: _jsx(Section, { closeLayer: closeLayer, section: sections[index], selected: isMulti &&
+                        sections[index].type !== MenuType.HEADING &&
+                        Array.isArray(selectedOptions)
+                        ? selectedOptions.some((v) => v && v?.value === sections?.[index]?.value)
+                        : !Array.isArray(selectedOptions) &&
+                            sections?.[index]?.value === selectedOptions?.value, focused: focusedOptionIndex === index, onSelectOption: (evt) => onSelectOption(evt, sections[index]) }) })) })) }));
+};

package/dist/components/select/custom-select/layer/option.d.ts

@@ -0,0 +1,15 @@
+import React, { ReactNode } from 'react';
+import { ISelectSectionProps } from './section';
+export interface ISelectOptionProps {
+    details?: string;
+    label: string;
+    icon?: ReactNode;
+    disabled?: boolean;
+    selected?: boolean;
+    focused?: boolean;
+    onSelectOption?: (event?: React.MouseEvent<HTMLDivElement, MouseEvent>, section?: ISelectSectionProps) => void;
+    actions?: any[];
+    closeLayer?: () => void;
+    testId?: string;
+}
+export declare const Option: ({ details, label, icon, disabled, selected, focused, onSelectOption, actions, closeLayer, testId, }: ISelectOptionProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/select/custom-select/layer/option.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cx from 'classnames';
+import styles from '../custom-select.module.less';
+import { Text } from '../../../text/text';
+import { Actions } from '../../../actions/actions';
+import { Icon } from '../../../icon/icon';
+import { IconType } from "../../../../common-enum";
+export const Option = ({ details, label, icon, disabled = false, selected = false, focused = false, onSelectOption, actions, closeLayer, testId, }) => {
+    return (_jsxs("div", { className: cx(styles.option, disabled ? styles.disabled : '', selected ? styles.selected : '', focused ? styles.focused : ''), onClick: !disabled && onSelectOption ? onSelectOption : undefined, "data-testid": testId, children: [_jsx("div", { className: styles.optionContent, children: _jsxs("span", { className: styles.label, title: label, children: [label, icon && _jsx("span", { className: styles.icon, children: icon })] }) }), details && (_jsx("div", { className: cx(styles.details), children: _jsx(Text, { faint: true, children: details }) })), !!actions?.length && (_jsx("div", { className: cx(styles.actions), children: _jsx(Actions, { actions: actions, closeLayer: closeLayer }) })), _jsx("span", { className: styles.check, children: selected ? _jsx(Icon, { icon: IconType.CHECK }) : null })] }));
+};

package/dist/components/select/custom-select/layer/placementOptions.d.ts

@@ -0,0 +1,10 @@
+type PlacementType = 'bottom-start' | 'top-start';
+export interface PlacementOptions {
+    auto: boolean;
+    possiblePlacements: PlacementType[];
+    placement: PlacementType;
+    preferX: 'right';
+    preferY: 'bottom';
+}
+export declare const placementOptions: PlacementOptions;
+export {};

package/dist/components/select/custom-select/layer/placementOptions.js

@@ -0,0 +1,7 @@
+export const placementOptions = {
+    auto: true,
+    possiblePlacements: ['bottom-start', 'top-start'],
+    placement: 'bottom-start',
+    preferX: 'right',
+    preferY: 'bottom',
+};

package/dist/components/select/custom-select/layer/section.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { ISelectOptionProps } from './option';
+import { MenuType } from "../../../menu/enum";
+export interface ISelectSection extends ISelectOptionProps {
+    type: MenuType.HEADING | MenuType.OPTION;
+    value?: string | number;
+}
+export type ISelectSectionProps = {
+    section: ISelectSection;
+    selected?: boolean;
+    focused?: boolean;
+    onSelectOption?: (event?: React.MouseEvent<HTMLDivElement, MouseEvent>, section?: ISelectSectionProps) => void;
+    closeLayer?: () => void;
+};
+export declare const Section: ({ section, selected, focused, onSelectOption, closeLayer, }: ISelectSectionProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/select/custom-select/layer/section.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext } from 'react';
+import { DisabledContext } from '../../../../helpers/disabled-context';
+import { Heading } from './heading';
+import { Option } from './option';
+import { MenuType } from "../../../menu/enum";
+export const Section = ({ section, selected, focused, onSelectOption, closeLayer, }) => {
+    const disabledContext = useContext(DisabledContext);
+    switch (section.type) {
+        case MenuType.HEADING:
+            return _jsx(Heading, { label: section.label });
+        case MenuType.OPTION:
+        default:
+            return (_jsx(Option, { closeLayer: closeLayer, actions: section.actions, label: section.label, details: section.details, icon: section.icon, disabled: section.disabled || disabledContext, selected: selected, focused: focused, onSelectOption: onSelectOption, testId: section.testId }));
+    }
+};

package/dist/components/select/custom-select/reducer.interface.d.ts

@@ -0,0 +1,34 @@
+import { ICustomSelectOptionType } from './custom-select.interface';
+import { ReducerAction } from "./enum";
+export type ICustomSelectDirection = 'right' | 'left' | 'up' | 'down';
+export interface ICustomSelectTriggerFocus {
+    options: Array<'none' | 'clearAll' | number>;
+    currentIndex: number;
+    currentOption: boolean | 'none' | 'clearAll' | number;
+    clearAll: boolean;
+}
+export interface ICustomSelectLayerFocus {
+    options: (number | 'none')[];
+    currentIndex: number;
+    current: number | 'none';
+}
+export interface ICustomSelectState {
+    visibleOptions?: ICustomSelectOptionType[];
+    searchValue?: string;
+    layerFocus: ICustomSelectLayerFocus;
+    triggerFocus: ICustomSelectTriggerFocus;
+    isLayerOpen?: boolean;
+}
+export interface ICustomSelectAction {
+    type: ReducerAction;
+    options?: ICustomSelectOptionType[];
+    firstSelectedOptionIndex: number;
+    value?: string;
+    createAble?: boolean;
+    direction?: ICustomSelectDirection;
+    selectedOptions?: Array<string | number | {
+        label: string | number;
+        value: string | number | boolean;
+    }>;
+    nextLayerFocus?: ICustomSelectLayerFocus;
+}

package/dist/components/select/custom-select/reducer.interface.js

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

package/dist/components/select/custom-select/trigger/input.d.ts

@@ -0,0 +1,14 @@
+import { MutableRefObject, ReactNode } from 'react';
+import { ISelectSelectedOption } from '../../select.interface';
+interface ISelectInputProps {
+    selectedOptions?: ISelectSelectedOption | ISelectSelectedOption[];
+    searchable?: boolean;
+    searchValue?: string;
+    inputRef: MutableRefObject<HTMLInputElement | null>;
+    onChange?: (value: string) => void;
+    error?: string | ReactNode;
+    placeholder?: string;
+    small?: boolean;
+}
+export declare const Input: ({ selectedOptions, searchable, searchValue, onChange, inputRef, error, placeholder, small, }: ISelectInputProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/select/custom-select/trigger/input.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from 'react';
+import cx from 'classnames';
+import styles from './trigger.module.less';
+import { MultiSelectedOptions } from './multi-selected-options';
+export const Input = ({ selectedOptions, searchable = false, searchValue, onChange = () => { }, inputRef, error, placeholder = 'Select...', small, }) => {
+    const containerRef = useRef(null);
+    const isMulti = Array.isArray(selectedOptions);
+    const hasSelectedValues = isMulti
+        ? selectedOptions.length > 0
+        : !!selectedOptions;
+    const inputSize = searchValue ? searchValue.length + 1 : 1;
+    const getMultiOptionsWidth = () => {
+        const containerWidth = containerRef.current?.offsetWidth || 0;
+        const inputWidth = (inputRef instanceof Object && inputRef.current?.offsetWidth) || 0;
+        return containerWidth - inputWidth;
+    };
+    return (_jsxs("div", { className: styles.triggerInputContainer, ref: containerRef, children: [!hasSelectedValues ? (_jsx("span", { className: styles.placeHolder, children: !searchValue?.length ? placeholder : '' })) : isMulti ? (_jsx(MultiSelectedOptions, { selectedOptions: selectedOptions, small: small, width: getMultiOptionsWidth() })) : (_jsx("span", { className: styles.selectedSingleValue, children: !searchValue?.length
+                    ? selectedOptions?.label
+                    : '' })), searchable ? (_jsx("input", { tabIndex: -1, ref: inputRef, size: inputSize, className: cx(styles.input, error ? styles.error : ''), value: searchValue, onChange: (evt) => onChange(evt.target.value) })) : null] }));
+};

package/dist/components/select/custom-select/trigger/multi-selected-options.d.ts

@@ -0,0 +1,8 @@
+import { ISelectSelectedOption } from '../../select.interface';
+interface ISelectMultiSelectedOptionsProps {
+    selectedOptions: ISelectSelectedOption[];
+    small?: boolean;
+    width: number;
+}
+export declare const MultiSelectedOptions: ({ selectedOptions, small, width }: ISelectMultiSelectedOptionsProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/select/custom-select/trigger/multi-selected-options.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import styles from './trigger.module.less';
+import { Tooltip } from '../../../tooltip/tooltip';
+import { useFontsReady } from '../../../../hooks';
+import { getMultiOptionWidth } from '../helper';
+export const MultiSelectedOptions = ({ selectedOptions, small, width }) => {
+    const isFontLoaded = useFontsReady();
+    const [displayedOptions, setDisplayedOptions] = useState([]);
+    const [overflowOptions, setOverflowOptions] = useState([]);
+    useEffect(() => {
+        let displayed = [];
+        let overflow = [];
+        let usedWidth = 0;
+        // Calculate how many of the selected options we can display
+        selectedOptions.forEach((option, index) => {
+            usedWidth += getMultiOptionWidth(option, small, isFontLoaded);
+            if (index === selectedOptions.length - 1 && usedWidth < width) {
+                // This is the last option and there's enough space
+                displayed.push(option);
+            }
+            else if (usedWidth < width - 24) {
+                // This is not the last option and there's enough space (including the +X marker)
+                displayed.push(option);
+            }
+            else {
+                // There isn't enough space
+                overflow.push(option);
+            }
+        });
+        setDisplayedOptions(displayed);
+        setOverflowOptions(overflow);
+    }, [selectedOptions, isFontLoaded, width]);
+    return (_jsxs("div", { className: styles.multiOptions, children: [displayedOptions
+                .filter((option) => option && option.label)
+                .map((option, index) => (_jsx("span", { className: styles.multiOption, onClick: (evt) => {
+                    evt.stopPropagation();
+                }, children: option.label }, index))), overflowOptions.length > 0 && (_jsx(Tooltip, { text: overflowOptions.map((option, index) => (_jsx("div", { children: option.label }, index))), display: "inline-flex", children: _jsx("span", { className: styles.multiOption, children: displayedOptions.length
+                        ? `+${overflowOptions.length}`
+                        : `${overflowOptions.length} items` }) }))] }));
+};

package/dist/components/select/custom-select/trigger/trigger.d.ts

@@ -0,0 +1,34 @@
+import React, { ReactNode, RefObject } from "react";
+import { ISelectSelectedOption } from "../../select.interface";
+import { GroupOrder } from "../../../../common-enum";
+interface ISelectTriggerProps {
+    selectedOptions?: ISelectSelectedOption;
+    searchValue?: string;
+    searchable?: boolean;
+    clearable?: boolean;
+    onClickTrigger: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    element?: ReactNode;
+    error?: string | ReactNode;
+    warning?: string | ReactNode;
+    tooltip?: string | ReactNode;
+    small?: boolean;
+    isInTable?: boolean;
+    disabled?: boolean;
+    onChangeSearch?: (value: string) => void;
+    onClickDeselect?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    onClickClear?: (event: React.MouseEvent<HTMLSpanElement, MouseEvent>) => void;
+    tabIndex?: number;
+    isOpen?: boolean;
+    triggerRef?: RefObject<HTMLDivElement>;
+    clearAllIsFocused?: boolean;
+    focusedSelectedOptionIndex?: number;
+    onFocus?: (event: React.FocusEvent<HTMLDivElement>) => void;
+    onBlur?: (event: React.FocusEvent<HTMLDivElement>) => void;
+    groupOrder?: GroupOrder;
+    maxTooltipWidth?: string | number;
+    placeholder?: string;
+    right?: boolean;
+    testId?: string;
+}
+export declare const Trigger: ({ selectedOptions, searchValue, searchable, clearable, onClickTrigger, element, error, warning, tooltip, small, isInTable, disabled, onChangeSearch, onClickDeselect, onClickClear, tabIndex, isOpen, triggerRef, clearAllIsFocused, focusedSelectedOptionIndex, onFocus, onBlur, groupOrder, maxTooltipWidth, placeholder, right, testId, }: ISelectTriggerProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/select/custom-select/trigger/trigger.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import cx from "classnames";
+import { useFocus } from "../../../../hooks/use-focus";
+import { Tooltip } from "../../../tooltip/tooltip";
+import styles from "./trigger.module.less";
+import { isStringNumberOrNode } from "../../../../helpers/types";
+import { Text } from "../../../text/text";
+import { Input } from "./input";
+import { Icon } from "../../../icon/icon";
+import { GroupOrder, IconType } from "../../../../common-enum";
+export const Trigger = ({ selectedOptions, searchValue, searchable, clearable, onClickTrigger, element, error, warning, tooltip, small, isInTable, disabled, onChangeSearch, onClickDeselect, onClickClear, tabIndex, isOpen, triggerRef, clearAllIsFocused, focusedSelectedOptionIndex, onFocus, onBlur, groupOrder, maxTooltipWidth, placeholder, right, testId, }) => {
+    const [inputRef, setInputFocus] = useFocus();
+    const canClear = clearable &&
+        selectedOptions &&
+        selectedOptions.value;
+    const order = (() => {
+        if (groupOrder) {
+            switch (groupOrder) {
+                case GroupOrder.FIRST:
+                    return styles.groupOrderFirst;
+                case GroupOrder.LAST:
+                    return styles.groupOrderLast;
+                default:
+                    return styles.groupOrderMiddle;
+            }
+        }
+        return '';
+    })();
+    const selectedOptionsWithDetails = selectedOptions?.details
+        ? {
+            ...selectedOptions,
+            label: (_jsxs("div", { className: cx(styles.detailedLabel), children: [_jsx(Text, { children: selectedOptions.label }), _jsx(Text, { muted: true, children: selectedOptions.details })] })),
+        }
+        : selectedOptions;
+    const triggerInput = (_jsxs(_Fragment, { children: [element, _jsxs("div", { ref: triggerRef, tabIndex: tabIndex, className: cx(styles.trigger, isOpen ? styles.isOpen : '', error ? styles.error : warning ? styles.warning : '', disabled ? styles.disabled : '', small ? styles.small : '', isInTable ? styles.isInTable : '', right ? styles.right : '', order), onClick: (evt) => {
+                    evt.stopPropagation();
+                    if (typeof setInputFocus === 'function') {
+                        setInputFocus();
+                    }
+                    onClickTrigger(evt);
+                }, onFocus: onFocus, onBlur: onBlur, "data-testid": testId, children: [_jsx(Input, { selectedOptions: selectedOptionsWithDetails, placeholder: placeholder, searchable: searchable, searchValue: searchValue, inputRef: inputRef, onChange: onChangeSearch, error: error, small: small }), _jsx("span", { className: styles.icons, children: canClear ? (_jsx("span", { className: cx(styles.clearAll, clearAllIsFocused ? styles.focus : ''), onClick: (evt) => {
+                                evt.stopPropagation();
+                                if (onClickClear) {
+                                    onClickClear(evt);
+                                }
+                            }, children: _jsx(Icon, { icon: IconType.CLOSE }) })) : (
+                        // TODO: Replace background SVG with standard icon (need to work out how to match it in native select)
+                        _jsx("span", { className: cx(styles.iconOpen) })) })] })] }));
+    return (_jsx(_Fragment, { children: _jsx(Tooltip, { error: !!error, warning: !!warning, text: tooltip || error || warning, enabled: (tooltip && isStringNumberOrNode(tooltip)) ||
+                (error && isStringNumberOrNode(error)) ||
+                (warning && isStringNumberOrNode(warning)) ||
+                false, maxWidth: maxTooltipWidth, placement: "bottom-center", children: triggerInput }) }));
+};

package/dist/components/select/native-select/native-select.d.ts

@@ -0,0 +1,29 @@
+import React, { ChangeEvent } from 'react';
+import { ISelectSelectedOption } from '../select.interface';
+interface NativeSelectProps {
+    borderRadius?: string | number;
+    disabled?: boolean;
+    error?: string | number | React.ReactNode | null;
+    warning?: string | number | React.ReactNode | null;
+    tooltip?: string | number | React.ReactNode | null;
+    options: ISelectSelectedOption[];
+    onChange?: (event: ChangeEvent<HTMLSelectElement>, value: ISelectSelectedOption | {
+        value: null;
+    }) => void;
+    onFocus?: () => void;
+    onBlur?: () => void;
+    right?: boolean;
+    small?: boolean;
+    tabIndex?: number;
+    selectedOption?: ISelectSelectedOption;
+    width?: string | number | null;
+    groupOrder?: string | null;
+    testId?: string | undefined;
+    isInTable?: boolean;
+    clearable?: boolean;
+    placeholder?: string;
+    hasNonExistentValue?: boolean;
+    maxTooltipWidth?: string | number;
+}
+export declare const NativeSelect: ({ disabled, error, warning, tooltip, options, onChange, onFocus, onBlur, right, small, tabIndex, selectedOption, width, groupOrder, testId, isInTable, clearable, placeholder, hasNonExistentValue, maxTooltipWidth, borderRadius, }: NativeSelectProps) => import("react/jsx-runtime").JSX.Element;
+export {};