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

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

@@ -1,222 +0,0 @@
-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

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

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

@@ -1,5 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,34 +0,0 @@
-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

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

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

@@ -1,14 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

@@ -1,41 +0,0 @@
-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

@@ -1,34 +0,0 @@
-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

@@ -1,53 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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 {};