@alfalab/core-components 47.15.0-beta.0 → 47.15.0

package/select-with-tags/moderncssm/components/tag/index.module.css

@@ -0,0 +1,79 @@
+/* */
+:root {
+    /* border */
+
+    /* background-color outlined */
+
+    /* background-color filled */
+
+    /* background-color checked */
+    --tag-background-color-checked: var(--color-light-accent-secondary);
+
+    /* text color */
+    --tag-text-color-checked: var(--color-light-text-primary-inverted);
+
+    /* inverted */
+
+    /* border */
+
+    /* background-color outlined */
+
+    /* background-color filled */
+
+    /* background-color checked */
+
+    /* text color */
+
+    /* mobile */
+
+    /* mobile inverted */
+}
+.tag {
+    padding: 0 0 0 var(--gap-8);
+    margin: var(--gap-2);
+    cursor: default
+}
+.tag:not(.tagNoClose):active:not(:disabled) {
+        background-color: var(--tag-background-color-checked);
+        color: var(--tag-text-color-checked);
+    }
+.tag:not(.tagNoClose):hover:not(:disabled):not(:active) {
+        background-color: var(--tag-background-color-checked);
+        color: var(--tag-text-color-checked);
+    }
+.tag > span {
+        width: 100%;
+        height: 100%;
+    }
+.tag.tag {
+    min-width: unset;
+}
+.tagNoClose {
+    padding-right: var(--gap-8);
+    padding-left: var(--gap-8);
+}
+.tagContentWrap {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 100%;
+}
+.cursorPointer {
+    cursor: pointer;
+}
+.tagCross {
+    padding: 0 6px;
+    height: 100%
+}
+.tagCross > svg {
+        fill: var(--color-light-neutral-translucent-700-inverted);
+    }
+.tagCross:hover > svg {
+        fill: var(--color-light-neutral-translucent-700-inverted-hover);
+    }
+.tagCross:active > svg {
+        fill: var(--color-light-neutral-translucent-700-inverted-press);
+    }
+.tagCross svg {
+        height: 100%;
+    }

package/select-with-tags/moderncssm/components/tag-list/component.d.ts

@@ -0,0 +1,21 @@
+import { ChangeEvent, FC, ForwardRefExoticComponent, ReactNode, RefAttributes, RefObject } from 'react';
+import { FormControlProps } from "../../../../form-control";
+import { FieldProps } from "../../../../select/shared";
+import { TagComponent } from "../../types";
+type TagListOwnProps = {
+    value?: string;
+    handleDeleteTag?: (key: string) => void;
+    onInput?: (event: ChangeEvent<HTMLInputElement>) => void;
+    inputRef?: RefObject<HTMLInputElement>;
+    autocomplete?: boolean;
+    isOpen?: boolean;
+    collapseTagList?: boolean;
+    moveInputToNewLine?: boolean;
+    transformCollapsedTagText?: (collapsedCount: number) => string;
+    transformTagText?: (tagText?: ReactNode) => ReactNode;
+    Tag?: TagComponent;
+    handleUpdatePopover?: () => void;
+    FormControlComponent: ForwardRefExoticComponent<FormControlProps & RefAttributes<HTMLDivElement>>;
+};
+declare const TagList: FC<Partial<FieldProps> & FormControlProps & TagListOwnProps>;
+export { TagList };

package/select-with-tags/moderncssm/components/tag-list/component.js

@@ -0,0 +1,130 @@
+import React, { useState, useRef, useEffect, useCallback, useMemo } from 'react';
+import mergeRefs from 'react-merge-refs';
+import cn from 'classnames';
+import { useFocus, useLayoutEffect_SAFE_FOR_SSR } from '@alfalab/hooks';
+import { calculateTotalElementsPerRow } from '../../utils/calculate-collapse-size.js';
+import { Tag } from '../tag/component.js';
+import styles from './index.module.css';
+import '../../../../tag/moderncssm/desktop';
+import '@alfalab/icons-glyph/CrossCircleMIcon';
+import '../tag/index.module.css';
+
+const SIZE_TO_CLASSNAME_MAP = {
+    s: 'size-48',
+    m: 'size-56',
+    l: 'size-64',
+    xl: 'size-72',
+    48: 'size-48',
+    56: 'size-56',
+    64: 'size-64',
+    72: 'size-72',
+};
+const TagList = ({ size = 72, open, disabled, placeholder, selectedMultiple = [], Arrow, innerProps, className, fieldClassName, value = '', autocomplete, label, valueRenderer, onInput, handleDeleteTag, collapseTagList, moveInputToNewLine, transformCollapsedTagText, transformTagText, isOpen, handleUpdatePopover, Tag: Tag$1 = Tag, setSelectedItems, toggleMenu, labelView, inputRef: inputRefProp = null, FormControlComponent, ...restProps }) => {
+    const [focused, setFocused] = useState(false);
+    const [isShowMoreEnabled, setShowMoreEnabled] = useState(false);
+    const [visibleElements, setVisibleElements] = useState(1);
+    const [inputOnNewLine, setInputOnNewLine] = useState(false);
+    const wrapperRef = useRef(null);
+    const inputRef = useRef(null);
+    const contentWrapperRef = useRef(null);
+    const [focusVisible] = useFocus(wrapperRef, 'keyboard');
+    const [inputFocusVisible] = useFocus(inputRef, 'keyboard');
+    useLayoutEffect_SAFE_FOR_SSR(() => {
+        setShowMoreEnabled(isOpen);
+    }, [isOpen]);
+    useEffect(() => {
+        setVisibleElements(selectedMultiple.length);
+    }, [selectedMultiple.length]);
+    useLayoutEffect_SAFE_FOR_SSR(() => {
+        if (collapseTagList && contentWrapperRef.current) {
+            const totalVisibleElements = calculateTotalElementsPerRow(contentWrapperRef.current, autocomplete && inputRef.current ? inputRef.current : null);
+            setVisibleElements(totalVisibleElements);
+        }
+        handleUpdatePopover?.();
+    }, [collapseTagList, visibleElements, autocomplete]);
+    const handleFocus = useCallback(() => setFocused(true), []);
+    const handleBlur = useCallback(() => setFocused(false), []);
+    const inputTextIsOverflow = useCallback(() => inputRef.current && inputRef.current.scrollWidth > inputRef.current.clientWidth, []);
+    const handleMouseDown = useCallback((event) => {
+        event.preventDefault();
+    }, []);
+    const { onClick, ...restInnerProps } = (innerProps || {});
+    const handleClick = useCallback((event) => {
+        if (onClick && contentWrapperRef.current) {
+            const eventTarget = event.target;
+            const clickedInsideContent = eventTarget !== contentWrapperRef.current &&
+                contentWrapperRef.current.contains(eventTarget);
+            if (!clickedInsideContent) {
+                onClick(event);
+            }
+        }
+        if (inputRef.current) {
+            inputRef.current.focus();
+        }
+    }, [onClick]);
+    const handleKeyDown = useCallback((event) => {
+        const lastSelectedTag = selectedMultiple[selectedMultiple.length - 1];
+        if (event.key === 'Backspace' && !value && handleDeleteTag && lastSelectedTag) {
+            handleDeleteTag(lastSelectedTag.key);
+        }
+    }, [handleDeleteTag, selectedMultiple, value]);
+    const toggleShowMoreLessButton = useCallback((event) => {
+        if (event) {
+            event.stopPropagation();
+            setShowMoreEnabled((v) => !v);
+            if (handleUpdatePopover) {
+                handleUpdatePopover();
+            }
+        }
+    }, [handleUpdatePopover]);
+    useEffect(() => {
+        /**
+         * Если текст не помещается в инпут, то нужно перенести инпут на новую строку.
+         */
+        if (moveInputToNewLine) {
+            if (inputTextIsOverflow() && !inputOnNewLine) {
+                setInputOnNewLine(true);
+            }
+            else if (value.length === 0) {
+                setInputOnNewLine(false);
+            }
+        }
+    }, [value, inputOnNewLine, inputTextIsOverflow, moveInputToNewLine]);
+    const collapseTagTitle = useMemo(() => {
+        if (isShowMoreEnabled) {
+            return 'Свернуть';
+        }
+        if (transformCollapsedTagText) {
+            return transformCollapsedTagText(selectedMultiple.length - visibleElements);
+        }
+        return `Ещё ${selectedMultiple.length - visibleElements}`;
+    }, [transformCollapsedTagText, isShowMoreEnabled, selectedMultiple.length, visibleElements]);
+    const filled = Boolean(selectedMultiple.length > 0) || Boolean(value);
+    const hasInnerLabel = Boolean(label) && labelView !== 'outer';
+    return (React.createElement("div", { ref: wrapperRef, onFocus: handleFocus, onBlur: handleBlur, className: cn(className, styles.component, styles[SIZE_TO_CLASSNAME_MAP[size]]) },
+        React.createElement(FormControlComponent, { ...restProps, ref: innerProps?.ref, fieldClassName: cn(fieldClassName, styles.field, {
+                [styles.focusVisible]: focusVisible,
+                [styles.disabled]: disabled,
+            }), block: true, size: size, focused: open || focused, disabled: disabled, filled: filled || !!placeholder, onMouseDown: handleMouseDown, rightAddons: Arrow, onClick: handleClick, addonsClassName: cn(styles.addons, styles[`addons-${SIZE_TO_CLASSNAME_MAP[size]}`]), label: label, labelClassName: styles.label, labelView: labelView },
+            React.createElement("div", { className: cn(styles.contentWrapper, {
+                    [styles.hasInnerLabel]: hasInnerLabel,
+                    [styles.hasTags]: selectedMultiple.length > 0,
+                }), ref: contentWrapperRef },
+                selectedMultiple.map((option, index) => (collapseTagList && isShowMoreEnabled) || index + 1 <= visibleElements ? (React.createElement(Tag$1, { checked: true, disabled: disabled, option: {
+                        ...option,
+                        content: transformTagText
+                            ? transformTagText(option.content)
+                            : option.content,
+                    }, key: option.key, handleDeleteTag: disabled ? undefined : handleDeleteTag })) : null),
+                collapseTagList && visibleElements < selectedMultiple.length && (React.createElement(Tag$1, { disabled: disabled, "data-collapse": 'collapse-last-tag-element', onClick: toggleShowMoreLessButton, view: 'filled', option: {
+                        key: 'collapse',
+                        content: collapseTagTitle,
+                    } })),
+                autocomplete && (React.createElement("input", { ...restInnerProps, autoComplete: 'off', ref: mergeRefs([inputRef, inputRefProp]), value: value, onChange: onInput, className: cn(styles.input, {
+                        [styles.focusVisible]: inputFocusVisible,
+                        [styles.hidden]: !isOpen && selectedMultiple.length > 0,
+                    }), disabled: disabled, onKeyDown: handleKeyDown, placeholder: filled ? '' : placeholder })),
+                placeholder && !filled && !autocomplete && (React.createElement("span", { className: styles.placeholder }, placeholder))))));
+};
+
+export { TagList };

package/select-with-tags/moderncssm/components/tag-list/index.d.ts

@@ -0,0 +1 @@
+export * from "./component";

package/select-with-tags/moderncssm/components/tag-list/index.js

@@ -0,0 +1,11 @@
+export { TagList } from './component.js';
+import 'react';
+import 'react-merge-refs';
+import 'classnames';
+import '@alfalab/hooks';
+import '../../utils/calculate-collapse-size.js';
+import '../tag/component.js';
+import '../../../../tag/moderncssm/desktop';
+import '@alfalab/icons-glyph/CrossCircleMIcon';
+import '../tag/index.module.css';
+import './index.module.css';

package/select-with-tags/moderncssm/components/tag-list/index.module.css

@@ -0,0 +1,170 @@
+/* */
+
+.component.size-72 .contentWrapper {
+        padding: 18px 14px;
+    }
+
+.component.size-72 .placeholder {
+        padding-left: var(--gap-2);
+    }
+
+.component.size-72 .input {
+        margin-left: var(--gap-2);
+    }
+
+.component.size-64 .contentWrapper {
+        padding: 14px 10px;
+    }
+
+.component.size-64 .placeholder {
+        padding-left: var(--gap-2);
+    }
+
+.component.size-64 .input {
+        margin-left: var(--gap-2);
+    }
+
+.component.size-56 .contentWrapper {
+        padding: 10px;
+    }
+
+.component.size-56 .placeholder {
+        padding-left: var(--gap-2);
+    }
+
+.component.size-56 .input {
+        margin-left: var(--gap-2);
+    }
+
+.component.size-48 .contentWrapper {
+        padding: 6px;
+    }
+
+.component.size-48 .placeholder {
+        padding-left: 6px;
+    }
+
+.component.size-48 .input {
+        margin-left: 6px;
+    }
+
+.component .contentWrapper {
+    display: flex;
+    flex-wrap: wrap;
+    width: 100%
+}
+
+.component .contentWrapper.hasInnerLabel {
+        margin-top: var(--gap-8);
+        padding-bottom: var(--gap-8);
+    }
+
+.component .contentWrapper.hasTags.hasInnerLabel {
+        margin-top: var(--gap-16);
+        padding-bottom: var(--gap-12);
+    }
+
+.component:hover .addons {
+    opacity: 0.7;
+}
+
+.field {
+    cursor: pointer;
+}
+
+.disabled {
+    cursor: not-allowed;
+}
+
+.input {
+    font-size: 16px;
+    line-height: 20px;
+    font-weight: 400;
+    flex-grow: 1;
+    flex-basis: 50px;
+    min-width: 50px;
+    padding: 0;
+    margin: var(--gap-4);
+    background-color: transparent;
+    outline: none;
+    border: none;
+    font-family: var(--font-family);
+    color: var(--color-light-text-primary)
+}
+
+.input:disabled,
+    .input:disabled::placeholder {
+        color: var(--color-light-text-tertiary);
+    }
+
+.input::placeholder {
+        color: var(--color-light-text-secondary);
+    }
+
+.input:focus::placeholder {
+        color: var(--color-light-text-tertiary);
+    }
+
+.hidden {
+    max-height: 0;
+    margin: 0;
+}
+
+.focusVisible {
+    outline: 2px solid var(--focus-color);
+    outline-offset: 2px;
+}
+
+.placeholder {
+    display: flex;
+    align-items: center;
+    min-height: 28px;
+    padding-left: var(--gap-4);
+    color: var(--color-light-text-secondary);
+    pointer-events: none;
+}
+
+.addons {
+    align-self: flex-start;
+    padding-top: var(--gap-12);
+}
+
+.addons-size-56 {
+    padding-top: var(--gap-16);
+}
+
+.addons-size-64 {
+    padding-top: var(--gap-20);
+}
+
+.addons-size-72 {
+    padding-top: var(--gap-24);
+}
+
+.component.size-48 .label {
+    top: 5px;
+    left: 12px;
+}
+
+.component.size-56 .label {
+    top: 8px;
+    left: 12px;
+}
+
+.component.size-64.label {
+    top: 10px;
+    left: 16px;
+}
+
+.component.size-72 .label {
+    top: 14px;
+    left: 16px;
+}
+
+.component .label {
+    top: 14px;
+    align-items: flex-start;
+    height: auto;
+    transform: none;
+    font-size: 14px;
+}

package/select-with-tags/moderncssm/desktop/Component.desktop.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import React from 'react';
+import { SelectWithTagsDesktopProps } from "../types";
+declare const SelectWithTagsDesktop: React.ForwardRefExoticComponent<SelectWithTagsDesktopProps & React.RefAttributes<HTMLInputElement>>;
+export { SelectWithTagsDesktop };

package/select-with-tags/moderncssm/desktop/Component.desktop.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { FormControlDesktop } from '../../../form-control/moderncssm/desktop';
+import { Popover } from '../../../popover/moderncssm';
+import { BaseSelectWithTags } from '../components/base-select-with-tags/Component.js';
+import 'react-merge-refs';
+import '../../../select/moderncssm/shared';
+import '../utils/match.js';
+import '../components/tag-list/component.js';
+import 'classnames';
+import '@alfalab/hooks';
+import '../utils/calculate-collapse-size.js';
+import '../components/tag/component.js';
+import '../../../tag/moderncssm/desktop';
+import '@alfalab/icons-glyph/CrossCircleMIcon';
+import '../components/tag/index.module.css';
+import '../components/tag-list/index.module.css';
+
+const SelectWithTagsDesktop = React.forwardRef((props, ref) => (React.createElement(BaseSelectWithTags, { ...props, FormControlComponent: FormControlDesktop, Popover: Popover, ref: ref, view: 'desktop' })));
+
+export { SelectWithTagsDesktop };

package/select-with-tags/moderncssm/desktop/index.d.ts

@@ -0,0 +1,2 @@
+export { SelectWithTagsDesktop } from "./Component.desktop";
+export { SelectWithTagsDesktopProps } from "../types";

package/select-with-tags/moderncssm/desktop/index.js

@@ -0,0 +1,17 @@
+export { SelectWithTagsDesktop } from './Component.desktop.js';
+import 'react';
+import '../../../form-control/moderncssm/desktop';
+import '../../../popover/moderncssm';
+import '../components/base-select-with-tags/Component.js';
+import 'react-merge-refs';
+import '../../../select/moderncssm/shared';
+import '../utils/match.js';
+import '../components/tag-list/component.js';
+import 'classnames';
+import '@alfalab/hooks';
+import '../utils/calculate-collapse-size.js';
+import '../components/tag/component.js';
+import '../../../tag/moderncssm/desktop';
+import '@alfalab/icons-glyph/CrossCircleMIcon';
+import '../components/tag/index.module.css';
+import '../components/tag-list/index.module.css';

package/select-with-tags/moderncssm/index.d.ts

@@ -0,0 +1,2 @@
+export { SelectWithTags } from "./Component.responsive";
+export type { SelectWithTagsProps } from "./types";

package/select-with-tags/moderncssm/index.js

@@ -0,0 +1,20 @@
+export { SelectWithTags } from './Component.responsive.js';
+import 'react';
+import '../../bottom-sheet/moderncssm';
+import '../../form-control/moderncssm/desktop';
+import '../../form-control/moderncssm/mobile';
+import '../../mq/moderncssm';
+import '../../popover/moderncssm';
+import './components/base-select-with-tags/Component.js';
+import 'react-merge-refs';
+import '../../select/moderncssm/shared';
+import './utils/match.js';
+import './components/tag-list/component.js';
+import 'classnames';
+import '@alfalab/hooks';
+import './utils/calculate-collapse-size.js';
+import './components/tag/component.js';
+import '../../tag/moderncssm/desktop';
+import '@alfalab/icons-glyph/CrossCircleMIcon';
+import './components/tag/index.module.css';
+import './components/tag-list/index.module.css';

package/select-with-tags/moderncssm/mobile/Component.mobile.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import React from 'react';
+import { SelectWithTagsMobileProps } from "../types";
+declare const SelectWithTagsMobile: React.ForwardRefExoticComponent<SelectWithTagsMobileProps & React.RefAttributes<HTMLInputElement>>;
+export { SelectWithTagsMobile };

package/select-with-tags/moderncssm/mobile/Component.mobile.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { BottomSheet } from '../../../bottom-sheet/moderncssm';
+import { FormControlMobile } from '../../../form-control/moderncssm/mobile';
+import { BaseSelectWithTags } from '../components/base-select-with-tags/Component.js';
+import 'react-merge-refs';
+import '../../../select/moderncssm/shared';
+import '../utils/match.js';
+import '../components/tag-list/component.js';
+import 'classnames';
+import '@alfalab/hooks';
+import '../utils/calculate-collapse-size.js';
+import '../components/tag/component.js';
+import '../../../tag/moderncssm/desktop';
+import '@alfalab/icons-glyph/CrossCircleMIcon';
+import '../components/tag/index.module.css';
+import '../components/tag-list/index.module.css';
+
+const SelectWithTagsMobile = React.forwardRef((props, ref) => (React.createElement(BaseSelectWithTags, { ...props, ref: ref, FormControlComponent: FormControlMobile, view: 'mobile', BottomSheet: BottomSheet })));
+
+export { SelectWithTagsMobile };

package/select-with-tags/moderncssm/mobile/index.d.ts

@@ -0,0 +1,2 @@
+export { SelectWithTagsMobile } from "./Component.mobile";
+export { SelectWithTagsMobileProps } from "../types";

package/select-with-tags/moderncssm/mobile/index.js

@@ -0,0 +1,17 @@
+export { SelectWithTagsMobile } from './Component.mobile.js';
+import 'react';
+import '../../../bottom-sheet/moderncssm';
+import '../../../form-control/moderncssm/mobile';
+import '../components/base-select-with-tags/Component.js';
+import 'react-merge-refs';
+import '../../../select/moderncssm/shared';
+import '../utils/match.js';
+import '../components/tag-list/component.js';
+import 'classnames';
+import '@alfalab/hooks';
+import '../utils/calculate-collapse-size.js';
+import '../components/tag/component.js';
+import '../../../tag/moderncssm/desktop';
+import '@alfalab/icons-glyph/CrossCircleMIcon';
+import '../components/tag/index.module.css';
+import '../components/tag-list/index.module.css';

package/select-with-tags/moderncssm/types.d.ts

@@ -0,0 +1,71 @@
+import { ChangeEvent, FC, ReactNode } from 'react';
+import { BaseSelectProps, OptionShape } from "../../select/shared";
+import { TagProps as TagPropsBase } from "../../tag";
+type OptionMatcher = (option: OptionShape, inputValue: string) => boolean;
+type TagProps = {
+    option: OptionShape;
+    handleDeleteTag?: (key: string) => void;
+} & Omit<TagPropsBase, 'breakpoint'>;
+type TagComponent = FC<TagProps>;
+type SelectWithTagsProps = Omit<BaseSelectProps, 'Field' | 'nativeSelect' | 'multiple' | 'autocomplete' | 'selected' | 'onChange'> & {
+    /**
+     * Значение поля ввода
+     */
+    value: string;
+    /**
+     * Обработчик ввода
+     */
+    onInput: (event: ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Список выбранных пунктов (controlled-селект)
+     */
+    selected?: Array<OptionShape | string>;
+    /**
+     * Обработчик выбора
+     */
+    onChange?: (payload: {
+        selectedMultiple: Array<OptionShape | string>;
+        initiator?: OptionShape | null;
+        name?: string;
+    }) => void;
+    /**
+     * Режим автокомплита
+     */
+    autocomplete?: boolean;
+    /**
+     * Функция сравнения при поиске
+     */
+    match?: OptionMatcher;
+    /**
+     * Компонент Тэг
+     */
+    Tag?: TagComponent;
+    /**
+     * Показывать тэги только в одном ряду, а если не помещаются в один ряд - схлопнуть в одну кнопку
+     */
+    collapseTagList?: boolean;
+    /**
+     * Если текст не помещается в инпут, то нужно перенести инпут на новую строку.
+     */
+    moveInputToNewLine?: boolean;
+    /**
+     * Трансформировать текст компонента Тэг который отображает общее количество выбранных элементов
+     */
+    transformCollapsedTagText?: (collapsedCount: number) => string;
+    /**
+     * Трансформировать текст компонента Тэг
+     */
+    transformTagText?: (tagText?: ReactNode) => ReactNode;
+    /**
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number;
+    /**
+     * Значение по-умолчанию для хука useMatchMedia
+     */
+    defaultMatchMediaValue?: boolean | (() => boolean);
+};
+type SelectWithTagsDesktopProps = Omit<SelectWithTagsProps, 'breakpoint' | 'defaultMatchMediaValue'>;
+type SelectWithTagsMobileProps = Omit<SelectWithTagsProps, 'breakpoint' | 'defaultMatchMediaValue'>;
+export { OptionMatcher, TagProps, TagComponent, SelectWithTagsProps, SelectWithTagsDesktopProps, SelectWithTagsMobileProps };

package/select-with-tags/moderncssm/types.js

@@ -0,0 +1 @@
+

package/select-with-tags/moderncssm/utils/calculate-collapse-size.d.ts

@@ -0,0 +1,2 @@
+declare const calculateTotalElementsPerRow: (container: HTMLDivElement, input?: HTMLInputElement | null) => number;
+export { calculateTotalElementsPerRow };

package/select-with-tags/moderncssm/utils/calculate-collapse-size.js

@@ -0,0 +1,42 @@
+const getElementSize = (element, property) => {
+    const size = +window.getComputedStyle(element).getPropertyValue(property).replace('px', '');
+    return Number.isNaN(size) ? 0 : size;
+};
+const getTagWidth = (tag) => {
+    const tagMarginLeft = getElementSize(tag, 'margin-left');
+    const tagMarginRight = getElementSize(tag, 'margin-right');
+    return tag.getBoundingClientRect().width + tagMarginRight + tagMarginLeft;
+};
+const calculateTotalElementsPerRow = (container, input) => {
+    let containerWidth = container.getBoundingClientRect().width;
+    const containerPaddingLeft = getElementSize(container, 'padding-left');
+    const containerPaddingRight = getElementSize(container, 'padding-right');
+    containerWidth -= containerPaddingLeft + containerPaddingRight;
+    if (input) {
+        const inputMinWidth = getElementSize(input, 'min-width');
+        const inputMarginLeft = getElementSize(input, 'margin-left');
+        const inputMarginRight = getElementSize(input, 'margin-right');
+        const minInputWidth = inputMarginLeft + inputMarginRight + inputMinWidth;
+        containerWidth -= minInputWidth;
+    }
+    const tags = container.getElementsByTagName('button');
+    const latestTag = tags[tags.length - 1];
+    if (latestTag && latestTag.getAttribute('data-collapse') === 'collapse-last-tag-element') {
+        containerWidth -= getTagWidth(latestTag);
+    }
+    let totalTagsWidth = 0;
+    let totalVisibleElements = 0;
+    for (let i = 0; i < tags.length; i++) {
+        const tag = tags[i];
+        if (tag.getAttribute('data-collapse') === 'collapse-last-tag-element') {
+            break;
+        }
+        totalTagsWidth += getTagWidth(tag);
+        if (totalTagsWidth < containerWidth) {
+            totalVisibleElements += 1;
+        }
+    }
+    return totalVisibleElements;
+};
+
+export { calculateTotalElementsPerRow };

package/select-with-tags/moderncssm/utils/index.d.ts

@@ -0,0 +1 @@
+export * from "./match";