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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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