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

package/dist/components/rich-text-input/rich-text-input.d.ts

@@ -0,0 +1,10 @@
+import React, { ReactNode } from 'react';
+import 'remirror/styles/all.css';
+export interface IRichTextInputProps {
+    disabled?: boolean;
+    onChange?: (markdown: string) => void;
+    placeholder?: string;
+    value?: string;
+    toolbarComponent?: ReactNode;
+}
+export declare const RichTextInput: React.ForwardRefExoticComponent<IRichTextInputProps & React.RefAttributes<any>>;

package/dist/components/rich-text-input/rich-text-input.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useContext, useImperativeHandle, } from 'react';
+import { BoldExtension, BulletListExtension, CodeExtension, ItalicExtension, MarkdownExtension, OrderedListExtension, PlaceholderExtension, } from 'remirror/extensions';
+import { EditorComponent, Remirror, useRemirror } from '@remirror/react';
+import 'remirror/styles/all.css';
+import { DisabledContext } from '../../helpers/disabled-context';
+import { RichTextToolbar } from './rich-text-toolbar/rich-text-toolbar';
+import styles from './rich-text-input.module.less';
+export const RichTextInput = forwardRef(({ placeholder, onChange, value, disabled: disabledProp, toolbarComponent }, ref) => {
+    const disabledContext = useContext(DisabledContext);
+    const disabled = disabledProp || disabledContext;
+    const { manager, state, setState, getContext } = useRemirror({
+        extensions: () => [
+            new BoldExtension(),
+            new BulletListExtension(),
+            new CodeExtension(),
+            new ItalicExtension(),
+            new MarkdownExtension(),
+            new OrderedListExtension(),
+            new PlaceholderExtension({ placeholder }),
+        ],
+        content: value,
+        selection: 'start',
+        stringHandler: 'markdown',
+    });
+    useImperativeHandle(ref, () => getContext(), [getContext]);
+    const handleChange = ({ helpers, state }) => {
+        const markdown = helpers.getMarkdown(state);
+        if (onChange) {
+            onChange(markdown);
+        }
+        setState(state);
+    };
+    return (_jsx("div", { className: styles.richTextInput, children: _jsxs(Remirror, { manager: manager, state: state, placeholder: placeholder, onChange: handleChange, editable: !disabled, children: [_jsx(RichTextToolbar, { disabled: disabled, toolbarComponent: toolbarComponent }), _jsx(EditorComponent, {})] }) }));
+});

package/dist/components/rich-text-input/rich-text-input.stories.d.ts

@@ -0,0 +1,9 @@
+import { IRichTextInputProps } from './rich-text-input';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IRichTextInputProps>;
+export declare const Filled: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IRichTextInputProps>;
+export declare const Placeholder: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IRichTextInputProps>;
+export declare const Disabled: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IRichTextInputProps>;
+export declare const HandlingStateExternallyWithRef: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithToolbarComponent: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IRichTextInputProps>;

package/dist/components/rich-text-input/rich-text-input.stories.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { RichTextInput } from './rich-text-input';
+import { Button } from '../button/button';
+import { Select } from '../select/select';
+export default {
+    title: 'Forms/RichTextInput',
+    component: RichTextInput,
+    args: {},
+};
+const Template = (args) => {
+    const [value, setValue] = React.useState(args.value);
+    return (_jsxs(_Fragment, { children: [_jsx(RichTextInput
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            , { ...args, value: value, onChange: setValue }), _jsx("pre", { children: _jsx("strong", { children: "Markdown output:" }) }), _jsx("pre", { children: value })] }));
+};
+export const Default = Template.bind({});
+export const Filled = Template.bind({});
+Filled.args = {
+    value: 'Paragraph goes here lorem ipsum dolor.\n1. Item (*italic*)\n2. Item (**bold**)\n3. Item (`code`)\n* Item\n* Item',
+};
+export const Placeholder = Template.bind({});
+Placeholder.args = {
+    placeholder: 'Enter message...',
+};
+export const Disabled = Template.bind({});
+Disabled.args = {
+    disabled: true,
+};
+export const HandlingStateExternallyWithRef = () => {
+    const [value, setValue] = React.useState('starting value');
+    const editorRef = React.useRef(null);
+    const handleClick = (ref) => {
+        setValue('');
+        ref.current.clearContent();
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { label: "Clear input!", colored: "red", onClick: () => handleClick(editorRef) }), _jsx(RichTextInput, { value: value, onChange: setValue, ref: editorRef }), _jsx("pre", { children: _jsx("strong", { children: "Markdown output:" }) }), _jsx("pre", { children: value })] }));
+};
+const SelectorComponent = (_jsx(Select, { options: [
+        {
+            label: 'Aardvarks',
+            value: 'termites',
+        },
+        {
+            label: 'Kangaroos',
+            value: 'grass',
+        },
+        {
+            label: 'Koalas',
+            value: 'leaves',
+        },
+        {
+            label: 'Wombats',
+            value: 'bark',
+        },
+    ], width: "auto", value: "termites", small: true }));
+export const WithToolbarComponent = Template.bind({});
+WithToolbarComponent.args = {
+    toolbarComponent: SelectorComponent,
+};

package/dist/components/rich-text-input/rich-text-toolbar/enum.d.ts

@@ -0,0 +1,7 @@
+export declare enum RichTextIcon {
+    BOLD = "bold",
+    ITALIC = "italic",
+    CODE = "code",
+    UL = "ul",
+    OL = "ol"
+}

package/dist/components/rich-text-input/rich-text-toolbar/enum.js

@@ -0,0 +1,8 @@
+export var RichTextIcon;
+(function (RichTextIcon) {
+    RichTextIcon["BOLD"] = "bold";
+    RichTextIcon["ITALIC"] = "italic";
+    RichTextIcon["CODE"] = "code";
+    RichTextIcon["UL"] = "ul";
+    RichTextIcon["OL"] = "ol";
+})(RichTextIcon || (RichTextIcon = {}));

package/dist/components/rich-text-input/rich-text-toolbar/rich-text-toolbar.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+import 'remirror/styles/all.css';
+export interface IRichTextToolbarProps {
+    disabled?: boolean;
+    toolbarComponent?: ReactNode;
+}
+export declare const RichTextToolbar: ({ disabled, toolbarComponent, }: IRichTextToolbarProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/rich-text-input/rich-text-toolbar/rich-text-toolbar.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useActive, useCommands } from '@remirror/react';
+import 'remirror/styles/all.css';
+import { Button } from '../../button/button';
+import styles from './rich-text-toolbar.module.less';
+import { RichTextIcon } from './enum';
+import { Color } from '../../../common-enum';
+export const RichTextToolbar = ({ disabled = false, toolbarComponent = null, }) => {
+    const { focus, toggleBold, toggleBulletList, toggleCode, toggleItalic, toggleOrderedList, } = useCommands();
+    const active = useActive();
+    const items = [
+        {
+            icon: RichTextIcon.BOLD,
+            onClick: toggleBold,
+            active: active.bold(),
+        },
+        {
+            icon: RichTextIcon.ITALIC,
+            onClick: toggleItalic,
+            active: active.italic(),
+        },
+        {
+            icon: RichTextIcon.CODE,
+            onClick: toggleCode,
+            active: active.code(),
+        },
+        {
+            icon: RichTextIcon.UL,
+            onClick: toggleBulletList,
+            active: active.bulletList(),
+        },
+        {
+            icon: RichTextIcon.OL,
+            onClick: toggleOrderedList,
+            active: active.orderedList(),
+        },
+    ];
+    return (_jsxs("div", { className: styles.richTextToolbarContainer, children: [_jsx("div", { className: styles.richTextToolbar, children: items.map((item, index) => (_jsx(Button, { small: true, round: true, basic: true, icon: item.icon, colored: Color.MUTED, onClick: () => {
+                        item.onClick();
+                        focus();
+                    }, active: item.active, disabled: disabled }, index))) }), toolbarComponent] }));
+};

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

@@ -0,0 +1,2 @@
+import { ICustomSelectProps } from "./custom-select.interface";
+export declare const CustomSelect: (props: ICustomSelectProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,47 @@
+import { ChangeEvent, ReactNode } from 'react';
+import { ISelectSelectedOption } from '../select.interface';
+import { GroupOrder } from "../../../common-enum";
+interface Heading {
+    label: string | number;
+    type: string;
+}
+export type TCustomSelectSelectOption = ISelectSelectedOption | Heading;
+export type TSelectedOptionsIndexType = keyof ISelectSelectedOption;
+export type ICustomSelectOptionType = {
+    createAble?: boolean;
+    label?: string;
+    value?: string | number;
+    disabled?: boolean;
+    details?: string;
+};
+export type ICustomSelectScrollableComponent = {
+    scrollToItem: (index: number) => void;
+};
+export interface ICustomSelectProps {
+    multi?: boolean;
+    disabled?: boolean;
+    error?: string | number | ReactNode;
+    warning?: string | number | ReactNode;
+    tooltip?: string | number | ReactNode;
+    options: TCustomSelectSelectOption[];
+    selectedOptions: ISelectSelectedOption | ISelectSelectedOption[];
+    onChange?: (event: ChangeEvent<HTMLInputElement>, newSelectedOptions: ISelectSelectedOption) => void;
+    onCreate?: (value: string) => void;
+    placeholder?: string;
+    small?: boolean;
+    tabIndex?: number;
+    width?: string | number | null;
+    autoLayerWidth?: boolean;
+    onFocus?: () => void;
+    onBlur?: () => void;
+    searchable?: boolean;
+    clearable?: boolean;
+    isInTable?: boolean;
+    groupOrder?: GroupOrder;
+    firstSelectedOptionIndex: number | null;
+    right?: boolean;
+    maxTooltipWidth?: string | number;
+    closeOnOptionActionClick?: boolean;
+    testId?: string | undefined;
+}
+export {};

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

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

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

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext, useReducer, useRef } from "react";
+import { mergeRefs } from "react-laag";
+import KeyboardEventHandler from "@infinium/react-keyboard-event-handler";
+import { useFocus, useFontsReady } from "../../../hooks";
+import { Layer } from "./layer/layer";
+import { Trigger } from "./trigger/trigger";
+import { initialLayerFocus, initialTriggerFocus, reducer } from "./custom-select.reducer";
+import styles from "./custom-select.module.less";
+import { DisabledContext } from "../../../helpers/disabled-context";
+import { useCustomSelectLogic } from "./hooks/use-custom-select-logic";
+import { EventKey } from "./hooks/enum";
+// TODO - @Oleg & @Jack - revisit and fix types
+export const CustomSelect = (props) => {
+    const { multi: isMulti = false, disabled = false, error = null, warning = null, tooltip = null, options, selectedOptions, onCreate = null, placeholder = '', small = false, tabIndex = 0, onFocus = () => { }, onBlur = () => { }, searchable = true, clearable = false, maxTooltipWidth, closeOnOptionActionClick, 
+    //private props (don't use)
+    isInTable = false, groupOrder, firstSelectedOptionIndex = 0, right = false, testId = undefined, } = props;
+    const disabledContext = useContext(DisabledContext);
+    const createAble = onCreate !== null;
+    const listRef = useRef(null);
+    const [triggerRef, setTriggerFocus] = useFocus();
+    const isFontLoaded = useFontsReady();
+    const [state, dispatch] = useReducer(reducer, 
+    // @ts-ignore: write explicit reason: write explicit reason
+    { options, firstSelectedOptionIndex }, ({ options }) => ({
+        searchValue: '',
+        visibleOptions: options,
+        layerFocus: initialLayerFocus(options, firstSelectedOptionIndex ?? 0),
+        triggerFocus: initialTriggerFocus,
+        isLayerOpen: false,
+    }));
+    const { getTriggerWidth, onKeyEvent, clearAllIsFocused, triggerProps, onClickTrigger, onChangeSearch, onClickDeselectOption, onClickClearAll, renderLayer, layerProps, closeLayer, onSelectOption, getLayerWidth, triggerBounds, } = useCustomSelectLogic({
+        ...props,
+        state,
+        dispatch,
+        setTriggerFocus,
+        disabledContext,
+        isFontLoaded,
+        createAble,
+        listRef,
+    });
+    return (_jsx("div", { style: { width: getTriggerWidth() }, children: _jsxs(KeyboardEventHandler, { handleKeys: Object.values(EventKey), onKeyEvent: onKeyEvent, children: [_jsx(Trigger, { selectedOptions: selectedOptions, searchValue: state.searchValue, isOpen: state.isLayerOpen, focusedSelectedOptionIndex: state.triggerFocus.currentOption, clearAllIsFocused: clearAllIsFocused, searchable: searchable, triggerRef: mergeRefs(triggerRef, triggerProps.ref), error: error, warning: warning, tooltip: tooltip, small: small, isInTable: isInTable, disabled: disabled || disabledContext, clearable: clearable, tabIndex: tabIndex, onClickTrigger: onClickTrigger, onChangeSearch: onChangeSearch, onClickDeselect: onClickDeselectOption, onClickClear: onClickClearAll, onFocus: onFocus, onBlur: onBlur, groupOrder: groupOrder, maxTooltipWidth: maxTooltipWidth, placeholder: placeholder, right: right, testId: testId }), state.isLayerOpen &&
+                    renderLayer(_jsx("div", { ...layerProps, className: styles.layerContainer, children: _jsx(Layer, { listRef: listRef, isMulti: isMulti, sections: state.visibleOptions, selectedOptions: selectedOptions, onSelectOption: (evt, option) => {
+                                const close = !isMulti ? closeLayer : undefined;
+                                onSelectOption(evt, option, close);
+                            }, closeLayer: () => {
+                                if (closeOnOptionActionClick) {
+                                    closeLayer();
+                                }
+                            }, width: getLayerWidth(triggerBounds), small: small, focusedOptionIndex: state.layerFocus.current, firstSelectedOptionIndex: firstSelectedOptionIndex ?? 0, testId: testId && `${testId}-layer` }) }))] }) }));
+};

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

@@ -0,0 +1,6 @@
+import { ICustomSelectAction, ICustomSelectDirection, ICustomSelectLayerFocus, ICustomSelectState, ICustomSelectTriggerFocus } from "./reducer.interface";
+import { TCustomSelectSelectOption } from "./custom-select.interface";
+export declare const initialTriggerFocus: ICustomSelectTriggerFocus;
+export declare const initialLayerFocus: (options: TCustomSelectSelectOption[], firstSelectedOptionIndex: number) => ICustomSelectLayerFocus;
+export declare const nextLayerFocus: (direction: ICustomSelectDirection, layerFocus: ICustomSelectLayerFocus) => ICustomSelectLayerFocus;
+export declare const reducer: (state: ICustomSelectState, action: ICustomSelectAction) => ICustomSelectState;

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

@@ -0,0 +1,140 @@
+import { MenuType } from "../../menu/enum";
+import { ReducerAction } from "./enum";
+export const initialTriggerFocus = {
+    options: ['none', 'clearAll'],
+    currentIndex: 0,
+    currentOption: false,
+    clearAll: false,
+};
+const initialLayerFocusIndex = (firstSelectedOptionIndex) => firstSelectedOptionIndex !== null ? firstSelectedOptionIndex + 1 : 0;
+export const initialLayerFocus = (options, firstSelectedOptionIndex) => {
+    const layerFocusOptions = [
+        'none',
+        ...options
+            .map((o, i) => (o.type !== MenuType.HEADING ? i : null))
+            .filter((o) => o !== null),
+    ];
+    const layerFocusIndex = initialLayerFocusIndex(firstSelectedOptionIndex);
+    return {
+        options: layerFocusOptions,
+        currentIndex: layerFocusIndex,
+        current: layerFocusOptions[layerFocusIndex],
+    };
+};
+export const nextLayerFocus = (direction, layerFocus) => {
+    const sign = direction === 'up' ? -1 : 1;
+    const increment = layerFocus.currentIndex + sign;
+    const nextIndex = (increment < 0 ? layerFocus.options.length - 1 : increment) %
+        layerFocus.options.length;
+    const next = layerFocus.options[nextIndex];
+    return {
+        ...layerFocus,
+        currentIndex: nextIndex,
+        current: next,
+    };
+};
+const nextTriggerFocus = (direction, selectedOptions, triggerFocus) => {
+    const sign = direction === 'left' ? -1 : 1;
+    const nextOptions = selectedOptions && selectedOptions.length
+        ? [
+            'none',
+            ...Array.from({ length: selectedOptions.length }, (_, i) => i),
+            'clearAll',
+        ]
+        : ['none', 'clearAll'];
+    const increment = triggerFocus.currentIndex + sign;
+    const nextIndex = (increment < 0 ? nextOptions.length - 1 : increment) % nextOptions.length;
+    const next = nextOptions[nextIndex];
+    const clearAll = next === 'clearAll';
+    return {
+        options: nextOptions,
+        currentIndex: nextIndex,
+        currentOption: next,
+        clearAll,
+    };
+};
+const blurTriggerFocus = () => initialTriggerFocus;
+const blurLayerFocus = (layerFocus) => ({
+    ...layerFocus,
+    currentIndex: 0,
+    current: 'none',
+});
+export const reducer = (state, action) => {
+    switch (action.type) {
+        case ReducerAction.SET_VISIBLE_OPTIONS: {
+            return {
+                ...state,
+                visibleOptions: action.options || [],
+            };
+        }
+        case ReducerAction.RESET_LAYER_FOCUS: {
+            return {
+                ...state,
+                layerFocus: initialLayerFocus(action.options || [], action.firstSelectedOptionIndex || 0),
+            };
+        }
+        case ReducerAction.CLEAR_SEARCH: {
+            return {
+                ...state,
+                visibleOptions: action.options || [],
+                searchValue: '',
+            };
+        }
+        case ReducerAction.ON_CHANGE_SEARCH: {
+            const visibleOptions = (action.options || []).filter((o) => (String(o.label) + (o.details ? String(o.details) : ''))
+                .toLowerCase()
+                .includes(String(action.value || '').toLowerCase()));
+            let newVisibleOptions = [...visibleOptions];
+            if (action.createAble && action.value && action.value !== '') {
+                newVisibleOptions.push({
+                    label: `Create "${action.value}"`,
+                    value: action.value,
+                    createAble: true,
+                });
+            }
+            return {
+                ...state,
+                searchValue: action.value,
+                visibleOptions: newVisibleOptions,
+                layerFocus: blurLayerFocus(state.layerFocus),
+            };
+        }
+        case ReducerAction.FOCUS_TRIGGER_INPUTS: {
+            return {
+                ...state,
+                triggerFocus: nextTriggerFocus(action.direction || 'right', action.selectedOptions || [], state.triggerFocus),
+                layerFocus: blurLayerFocus(state.layerFocus),
+            };
+        }
+        case ReducerAction.BLUR_TRIGGER_INPUTS: {
+            return {
+                ...state,
+                triggerFocus: blurTriggerFocus(),
+            };
+        }
+        case ReducerAction.FOCUS_LAYER_OPTIONS: {
+            if (!action.nextLayerFocus) {
+                return state;
+            }
+            return {
+                ...state,
+                layerFocus: action.nextLayerFocus,
+                triggerFocus: blurTriggerFocus(),
+            };
+        }
+        case ReducerAction.OPEN_LAYER: {
+            return {
+                ...state,
+                isLayerOpen: true,
+            };
+        }
+        case ReducerAction.CLOSE_LAYER: {
+            return {
+                ...state,
+                isLayerOpen: false,
+            };
+        }
+        default:
+            return state;
+    }
+};

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

@@ -0,0 +1,11 @@
+export declare enum ReducerAction {
+    SET_VISIBLE_OPTIONS = "SET_VISIBLE_OPTIONS",
+    RESET_LAYER_FOCUS = "RESET_LAYER_FOCUS",
+    CLEAR_SEARCH = "CLEAR_SEARCH",
+    ON_CHANGE_SEARCH = "ON_CHANGE_SEARCH",
+    FOCUS_TRIGGER_INPUTS = "FOCUS_TRIGGER_INPUTS",
+    BLUR_TRIGGER_INPUTS = "BLUR_TRIGGER_INPUTS",
+    FOCUS_LAYER_OPTIONS = "FOCUS_LAYER_OPTIONS",
+    OPEN_LAYER = "OPEN_LAYER",
+    CLOSE_LAYER = "CLOSE_LAYER"
+}

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

@@ -0,0 +1,12 @@
+export var ReducerAction;
+(function (ReducerAction) {
+    ReducerAction["SET_VISIBLE_OPTIONS"] = "SET_VISIBLE_OPTIONS";
+    ReducerAction["RESET_LAYER_FOCUS"] = "RESET_LAYER_FOCUS";
+    ReducerAction["CLEAR_SEARCH"] = "CLEAR_SEARCH";
+    ReducerAction["ON_CHANGE_SEARCH"] = "ON_CHANGE_SEARCH";
+    ReducerAction["FOCUS_TRIGGER_INPUTS"] = "FOCUS_TRIGGER_INPUTS";
+    ReducerAction["BLUR_TRIGGER_INPUTS"] = "BLUR_TRIGGER_INPUTS";
+    ReducerAction["FOCUS_LAYER_OPTIONS"] = "FOCUS_LAYER_OPTIONS";
+    ReducerAction["OPEN_LAYER"] = "OPEN_LAYER";
+    ReducerAction["CLOSE_LAYER"] = "CLOSE_LAYER";
+})(ReducerAction || (ReducerAction = {}));

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

@@ -0,0 +1,3 @@
+import { ISelectSelectedOption } from '../select.interface';
+export declare const getWidestOptionWidth: (options: ISelectSelectedOption[], small: boolean, isFontLoaded: boolean, placeholder?: string) => number;
+export declare const getMultiOptionWidth: (option: ISelectSelectedOption, small?: boolean, isFontLoaded?: boolean) => number;

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

@@ -0,0 +1,55 @@
+import { getTextWidth } from '../../../helpers/text';
+// TODO: Draw these values from global design tokens shared with stylesheets (e.g. https://amzn.github.io/style-dictionary/)
+const FONT_SIZE = '14px';
+const FONT_SIZE_SMALL = '12px';
+const FONT_FAMILY = 'Lato';
+const FONT_FAMILY_FALLBACK = 'sans-serif';
+// Input padding on left
+const PADDING = 14;
+const PADDING_SMALL = 7;
+// Width of toggle icon on right
+const TOGGLE_SIZE = 38;
+const TOGGLE_SIZE_SMALL = 24;
+// Selected option tags
+const TAG_PADDING = 5;
+const TAG_PADDING_SMALL = 3;
+const TAG_BORDER_WIDTH = 1;
+const TAG_MARGIN = 2;
+const getFont = (small = false, isFontLoaded = false) => {
+    const fontSize = small ? FONT_SIZE_SMALL : FONT_SIZE;
+    const fontFamily = isFontLoaded ? FONT_FAMILY : FONT_FAMILY_FALLBACK;
+    return `${fontSize} ${fontFamily}`;
+};
+const getExtraOptionWidth = (small = false, scrollbar = false) => {
+    // Scrollbar upper limit suggested on https://adminhacks.com/browser-scrollbar-widths.html
+    const SCROLLBAR_WIDTH = 17;
+    return ((small ? PADDING_SMALL : PADDING) +
+        (small ? TOGGLE_SIZE_SMALL : TOGGLE_SIZE) +
+        (scrollbar ? SCROLLBAR_WIDTH : 0));
+};
+export const getWidestOptionWidth = (options, small, isFontLoaded, placeholder) => {
+    const font = getFont(small, isFontLoaded);
+    const placeholderWidth = placeholder
+        ? getTextWidth(placeholder, font)
+        : 0;
+    const widestTextWidth = Math.ceil(options.reduce((acc, option) => {
+        const optionActionsWidth = (option?.actions?.length ?? 0) * 24; // actions width
+        const optionIconWidth = option.icon
+            ? (small ? parseInt(FONT_SIZE_SMALL) : parseInt(FONT_SIZE)) + 7
+            : 0;
+        const optionsText = `${option.label} ${option.details || ''}`;
+        const optionWidth = getTextWidth(optionsText, font) + optionActionsWidth + optionIconWidth;
+        acc = optionWidth > acc ? optionWidth : acc;
+        return acc;
+    }, placeholderWidth));
+    const extraWidth = getExtraOptionWidth(small, true);
+    return widestTextWidth + extraWidth;
+};
+export const getMultiOptionWidth = (option, small, isFontLoaded) => {
+    const font = getFont(true, isFontLoaded);
+    const textWidth = getTextWidth(option.label, font);
+    const extraWidth = (small ? TAG_PADDING_SMALL : TAG_PADDING) * 2 +
+        TAG_BORDER_WIDTH * 2 +
+        TAG_MARGIN;
+    return Math.ceil(textWidth + extraWidth);
+};

package/dist/components/select/custom-select/hooks/enum.d.ts

@@ -0,0 +1,20 @@
+export declare enum ActionTypes {
+    CLOSE_LAYER = "CLOSE_LAYER",
+    OPEN_LAYER = "OPEN_LAYER",
+    SET_VISIBLE_OPTIONS = "SET_VISIBLE_OPTIONS",
+    CLEAR_SEARCH = "CLEAR_SEARCH",
+    RESET_LAYER_FOCUS = "RESET_LAYER_FOCUS",
+    FOCUS_LAYER_OPTIONS = "FOCUS_LAYER_OPTIONS",
+    BLUR_TRIGGER_INPUTS = "BLUR_TRIGGER_INPUTS",
+    FOCUS_TRIGGER_INPUTS = "FOCUS_TRIGGER_INPUTS",
+    ON_CHANGE_SEARCH = "ON_CHANGE_SEARCH"
+}
+export declare enum EventKey {
+    RIGHT = "right",
+    LEFT = "left",
+    UP = "up",
+    DOWN = "down",
+    ENTER = "enter",
+    ESC = "esc",
+    TAB = "tab"
+}

package/dist/components/select/custom-select/hooks/enum.js

@@ -0,0 +1,22 @@
+export var ActionTypes;
+(function (ActionTypes) {
+    ActionTypes["CLOSE_LAYER"] = "CLOSE_LAYER";
+    ActionTypes["OPEN_LAYER"] = "OPEN_LAYER";
+    ActionTypes["SET_VISIBLE_OPTIONS"] = "SET_VISIBLE_OPTIONS";
+    ActionTypes["CLEAR_SEARCH"] = "CLEAR_SEARCH";
+    ActionTypes["RESET_LAYER_FOCUS"] = "RESET_LAYER_FOCUS";
+    ActionTypes["FOCUS_LAYER_OPTIONS"] = "FOCUS_LAYER_OPTIONS";
+    ActionTypes["BLUR_TRIGGER_INPUTS"] = "BLUR_TRIGGER_INPUTS";
+    ActionTypes["FOCUS_TRIGGER_INPUTS"] = "FOCUS_TRIGGER_INPUTS";
+    ActionTypes["ON_CHANGE_SEARCH"] = "ON_CHANGE_SEARCH";
+})(ActionTypes || (ActionTypes = {}));
+export var EventKey;
+(function (EventKey) {
+    EventKey["RIGHT"] = "right";
+    EventKey["LEFT"] = "left";
+    EventKey["UP"] = "up";
+    EventKey["DOWN"] = "down";
+    EventKey["ENTER"] = "enter";
+    EventKey["ESC"] = "esc";
+    EventKey["TAB"] = "tab";
+})(EventKey || (EventKey = {}));

package/dist/components/select/custom-select/hooks/use-custom-select-logic.d.ts

@@ -0,0 +1,39 @@
+import React, { ChangeEvent } from "react";
+import { ISelectSelectedOption } from "../../select.interface";
+import { ICustomSelectDirection, ICustomSelectState } from "../reducer.interface";
+import { TCustomSelectSelectOption } from "../custom-select.interface";
+export interface UseCustomSelectLogicProps {
+    state: ICustomSelectState;
+    dispatch: (action: any) => void;
+    options: TCustomSelectSelectOption[];
+    setTriggerFocus: () => void;
+    disabled: boolean;
+    disabledContext: boolean;
+    onCreate: ((value: string) => void) | null;
+    onChange: ((evt: any, selected: any) => void) | null;
+    selectedOptions: ISelectSelectedOption | ISelectSelectedOption[];
+    width: string | number | null;
+    small: boolean;
+    isFontLoaded: boolean;
+    placeholder: string;
+    firstSelectedOptionIndex: number;
+    createAble: boolean;
+    listRef: React.RefObject<any>;
+    autoLayerWidth: boolean;
+}
+export declare const useCustomSelectLogic: ({ state, dispatch, options, setTriggerFocus, disabled, disabledContext, onCreate, onChange, selectedOptions, width, small, isFontLoaded, placeholder, firstSelectedOptionIndex, createAble, listRef, autoLayerWidth, }: UseCustomSelectLogicProps) => {
+    getTriggerWidth: () => string | number;
+    onKeyEvent: (key: string | ICustomSelectDirection, evt: KeyboardEvent) => void;
+    clearAllIsFocused: boolean;
+    triggerProps: import("react-laag").TriggerProps;
+    onClickTrigger: () => void;
+    onChangeSearch: (value: any) => void;
+    onClickDeselectOption: (evt: any, options?: any) => void;
+    onClickClearAll: (evt: ChangeEvent<any>) => void;
+    renderLayer: (children: React.ReactNode) => React.ReactPortal | null;
+    layerProps: import("react-laag").LayerProps;
+    closeLayer: () => void;
+    onSelectOption: (evt: any, option?: any, close?: () => void) => void;
+    getLayerWidth: (triggerBounds: any) => any;
+    triggerBounds: ClientRect | null;
+};