@expofp/ui 0.0.0-experimental.cf063fc

package/dist/components/HeatmapLegend/HeatmapLegend.d.ts

@@ -0,0 +1,15 @@
+import './HeatmapLegend.scss';
+import React from 'react';
+export interface HeatmapLegendTick {
+    value: number;
+    color: string;
+}
+export interface HeatmapLegendProps {
+    ticks: HeatmapLegendTick[];
+    ariaLabel: string;
+    className?: string;
+    style?: React.CSSProperties;
+}
+declare const HeatmapLegend: ({ ticks, ariaLabel, className, style }: HeatmapLegendProps) => React.JSX.Element | null;
+export default HeatmapLegend;
+//# sourceMappingURL=HeatmapLegend.d.ts.map

package/dist/components/HeatmapLegend/HeatmapLegend.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './HeatmapLegend.scss';
+import classNames from 'classnames';
+const HeatmapLegend = ({ ticks, ariaLabel, className, style }) => {
+    if (ticks.length === 0)
+        return null;
+    const colors = ticks.map((tick) => tick.color);
+    const background = colors.length === 1 ? colors[0] : `linear-gradient(to right, ${colors.join(', ')})`;
+    return (_jsxs("div", { className: classNames('efp-heatmap-legend', className), style: style, role: "img", "aria-label": ariaLabel, children: [_jsx("div", { className: "efp-heatmap-legend__colors", style: { background }, "aria-hidden": "true" }), _jsx("div", { className: "efp-heatmap-legend__values", children: ticks.map(({ value }, index) => (_jsx("span", { "aria-hidden": "true", children: value }, index))) })] }));
+};
+export default HeatmapLegend;

package/dist/components/HeatmapLegend/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './HeatmapLegend';
+export type { HeatmapLegendProps, HeatmapLegendTick } from './HeatmapLegend';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/HeatmapLegend/index.js

@@ -0,0 +1,2 @@
+/* eslint-disable simple-import-sort/exports */
+export { default } from './HeatmapLegend';

package/dist/components/HighlightText/HighlightText.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+declare const HighlightText: ({ text, highlight }: {
+    text: string;
+    highlight?: string;
+}) => React.JSX.Element;
+export default HighlightText;
+//# sourceMappingURL=HighlightText.d.ts.map

package/dist/components/HighlightText/HighlightText.js

@@ -0,0 +1,14 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const HIGHLIGHT_COLOR = '#FFFF99';
+const HighlightText = ({ text, highlight }) => {
+    if (!highlight || !text) {
+        return _jsx(_Fragment, { children: text });
+    }
+    const startIndex = text.toLowerCase().indexOf(highlight.toLowerCase());
+    if (startIndex === -1) {
+        return _jsx(_Fragment, { children: text });
+    }
+    const endIndex = startIndex + highlight.length;
+    return (_jsxs(_Fragment, { children: [text.slice(0, startIndex), _jsx("mark", { style: { background: `linear-gradient(to top, ${HIGHLIGHT_COLOR}, transparent)` }, children: text.slice(startIndex, endIndex) }), text.slice(endIndex)] }));
+};
+export default HighlightText;

package/dist/components/HighlightText/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './HighlightText';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/HighlightText/index.js

@@ -0,0 +1 @@
+export { default } from './HighlightText';

package/dist/components/LevelBadge/LevelBadge.d.ts

@@ -0,0 +1,9 @@
+import './LevelBadge.scss';
+import React from 'react';
+export interface LevelBadgeProps {
+    level: string;
+    levelLabel: string;
+}
+declare const LevelBadge: ({ level, levelLabel }: LevelBadgeProps) => React.JSX.Element | null;
+export default LevelBadge;
+//# sourceMappingURL=LevelBadge.d.ts.map

package/dist/components/LevelBadge/LevelBadge.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// @ts-nocheck
+import './LevelBadge.scss';
+const isNumeric = (input) => /^\d+$/.test(input);
+const LevelBadge = ({ level, levelLabel }) => {
+    if (!level)
+        return null;
+    return (_jsx("div", { className: "efp-level-badge", children: _jsx("span", { children: isNumeric(level) ? `${levelLabel} ${level}` : level }) }));
+};
+export default LevelBadge;

package/dist/components/LevelBadge/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './LevelBadge';
+export type { LevelBadgeProps } from './LevelBadge';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/LevelBadge/index.js

@@ -0,0 +1,2 @@
+/* eslint-disable simple-import-sort/exports */
+export { default } from './LevelBadge';

package/dist/components/LevelSelector/LevelSelector.d.ts

@@ -0,0 +1,18 @@
+import './LevelSelector.scss';
+import type { SelectorOption } from '../../shared/selector-option.js';
+/**
+ * A floor, as this selector sees one. The same id/label/active/disabled shape
+ * every plan-scope selector speaks, so kept as an alias of {@link SelectorOption}
+ * rather than a second declaration of it.
+ */
+export type LevelSelectorFloor = SelectorOption;
+export interface LevelSelectorProps {
+    floors: SelectorOption[];
+    layout: 'compact-list' | 'dropdown';
+    onSelect: (id: string) => void;
+    floorSelectionLabel: string;
+    currentFloorLabel: string;
+    floorLabel: string;
+}
+export default function LevelSelector({ floors, layout, onSelect, floorSelectionLabel, currentFloorLabel, floorLabel, }: LevelSelectorProps): import("react").JSX.Element | null;
+//# sourceMappingURL=LevelSelector.d.ts.map

package/dist/components/LevelSelector/LevelSelector.js

@@ -0,0 +1,91 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './LevelSelector.scss';
+import classNames from 'classnames';
+import { useCallback, useLayoutEffect, useRef, useState } from 'react';
+import useOnClickOutside from '../../shared/hooks/useOnClickOutside';
+import useOnEscape from '../../shared/hooks/useOnEscape';
+export default function LevelSelector({ floors, layout, onSelect, floorSelectionLabel, currentFloorLabel, floorLabel, }) {
+    const dropdownRef = useRef(null);
+    const triggerRef = useRef(null);
+    const itemRefs = useRef(new Map());
+    const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+    const [menuPosition, setMenuPosition] = useState('down');
+    const closeAndRefocus = useCallback(() => {
+        setIsDropdownOpen(false);
+        triggerRef.current?.focus();
+    }, []);
+    useOnClickOutside([dropdownRef, triggerRef], () => setIsDropdownOpen(false), isDropdownOpen);
+    useOnEscape(closeAndRefocus, isDropdownOpen);
+    useLayoutEffect(() => {
+        if (isDropdownOpen && triggerRef.current) {
+            const buttonRect = triggerRef.current.getBoundingClientRect();
+            const windowHeight = window.innerHeight;
+            const spaceBelow = windowHeight - buttonRect.bottom;
+            const minSpaceRequired = 200;
+            setMenuPosition(spaceBelow < minSpaceRequired ? 'up' : 'down');
+        }
+    }, [isDropdownOpen]);
+    const handleFloorSelect = useCallback((floor) => {
+        if (floor.disabled)
+            return;
+        onSelect(floor.id);
+        setIsDropdownOpen(false);
+        triggerRef.current?.focus();
+    }, [onSelect]);
+    const focusAdjacentFloor = useCallback((e, floor) => {
+        if (e.key !== 'ArrowDown' && e.key !== 'ArrowUp')
+            return;
+        e.preventDefault();
+        const currentIndex = floors.findIndex((f) => f.id === floor.id);
+        const direction = e.key === 'ArrowDown' ? 1 : -1;
+        let nextIndex = currentIndex + direction;
+        while (nextIndex >= 0 && nextIndex < floors.length) {
+            if (!floors[nextIndex].disabled) {
+                itemRefs.current.get(floors[nextIndex].id)?.focus();
+                return;
+            }
+            nextIndex += direction;
+        }
+    }, [floors]);
+    const handleDropdownItemKeyDown = useCallback((e, floor) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            if (floor.disabled)
+                return;
+            e.preventDefault();
+            handleFloorSelect(floor);
+            return;
+        }
+        focusAdjacentFloor(e, floor);
+    }, [focusAdjacentFloor, handleFloorSelect]);
+    if (floors.length === 0)
+        return null;
+    const activeFloor = floors.find((floor) => floor.active);
+    const tabbableFloor = activeFloor && !activeFloor.disabled ? activeFloor : floors.find((floor) => !floor.disabled);
+    if (layout === 'compact-list') {
+        // Roving tabindex: only the active floor (or the first enabled one as a
+        // fallback) is a tab stop; arrows move focus, Enter/Space select.
+        return (_jsx("div", { className: "efp-level-selector efp-level-selector--compact-list", role: "radiogroup", "aria-label": floorSelectionLabel, tabIndex: -1, children: floors.map((floor) => (_jsx("button", { ref: (el) => {
+                    if (el)
+                        itemRefs.current.set(floor.id, el);
+                    else
+                        itemRefs.current.delete(floor.id);
+                }, type: "button", className: classNames('efp-level-selector__item', {
+                    'efp-level-selector__item--active': floor.active,
+                    'efp-level-selector__item--disabled': floor.disabled,
+                }), role: "radio", title: `${floor.active ? currentFloorLabel : floorLabel} ${floor.label}`, "aria-label": `${floor.active ? currentFloorLabel : floorLabel} ${floor.label}`, "aria-checked": floor.active, "aria-disabled": floor.disabled, tabIndex: floor.id === tabbableFloor?.id ? 0 : -1, onClick: () => handleFloorSelect(floor), onKeyDown: (e) => focusAdjacentFloor(e, floor), children: _jsx("span", { dir: "auto", children: floor.label }) }, floor.id))) }));
+    }
+    return (_jsxs("div", { className: "efp-level-selector efp-level-selector--dropdown", children: [_jsxs("button", { ref: triggerRef, type: "button", className: classNames('efp-level-selector__trigger', {
+                    'efp-level-selector__trigger--open': isDropdownOpen,
+                }), onClick: () => setIsDropdownOpen(!isDropdownOpen), "aria-haspopup": "listbox", "aria-expanded": isDropdownOpen, "aria-label": `${currentFloorLabel}: ${activeFloor?.label ?? ''}`, children: [_jsxs("div", { className: "efp-level-selector__trigger-text", children: [_jsx("i", { className: "icon-layers", "aria-hidden": "true" }), _jsx("span", { dir: "auto", children: activeFloor?.label ?? '' })] }), _jsx("div", { className: "efp-level-selector__trigger-chevron", children: _jsx("i", { className: "icon-chevron-down", "aria-hidden": "true" }) })] }), isDropdownOpen && (_jsx("div", { ref: dropdownRef, className: classNames('efp-level-selector__dropdown', 'efp-level-selector__dropdown--full', {
+                    'efp-level-selector__dropdown--opens-up': menuPosition === 'up',
+                    'efp-level-selector__dropdown--opens-down': menuPosition === 'down',
+                }), role: "listbox", "aria-label": floorSelectionLabel, children: floors.map((floor) => (_jsxs("div", { ref: (el) => {
+                        if (el)
+                            itemRefs.current.set(floor.id, el);
+                        else
+                            itemRefs.current.delete(floor.id);
+                    }, className: classNames('efp-level-selector__dropdown-item', {
+                        'efp-level-selector__dropdown-item--active': floor.active,
+                        'efp-level-selector__dropdown-item--disabled': floor.disabled,
+                    }), role: "option", "aria-selected": floor.active, "aria-disabled": floor.disabled, tabIndex: floor.disabled ? -1 : 0, onClick: () => handleFloorSelect(floor), onKeyDown: (e) => handleDropdownItemKeyDown(e, floor), children: [_jsx("span", { className: "efp-level-selector__dropdown-item-icon", children: floor.active && _jsx("i", { className: "icon-checkmark-solid", "aria-hidden": "true" }) }), _jsx("span", { className: "efp-level-selector__dropdown-item-name", dir: "auto", children: floor.label })] }, floor.id))) }))] }));
+}

package/dist/components/LevelSelector/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './LevelSelector';
+export type { LevelSelectorFloor, LevelSelectorProps } from './LevelSelector';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/LevelSelector/index.js

@@ -0,0 +1,2 @@
+/* eslint-disable simple-import-sort/exports */
+export { default } from './LevelSelector';

package/dist/components/MapControls/MapControls.d.ts

@@ -0,0 +1,33 @@
+import './MapControls.scss';
+import { type CSSProperties } from 'react';
+export interface MapControlLayersItem {
+    id: string;
+    name: string;
+}
+export interface MapControlsProps {
+    className?: string;
+    style?: CSSProperties;
+    title: string;
+    findLocationLabel: string;
+    zoomInLabel: string;
+    zoomOutLabel: string;
+    viewModeLabel: string;
+    fitToScreenLabel: string;
+    layersLabel: string;
+    showModeSwitch: boolean;
+    showFindLocation: boolean;
+    isMap3d: boolean;
+    defaultLayersOpen?: boolean;
+    layersList?: MapControlLayersItem[];
+    layersActiveItems?: string[];
+    layersWidth?: number;
+    onViewModeSwitch: () => void;
+    onFindLocation: () => void;
+    onZoomIn: () => void;
+    onZoomOut: () => void;
+    onFitToScreen: () => void;
+    onChangeLayers: (value: string) => void;
+}
+declare const MapControls: ({ className, style, title, findLocationLabel, zoomInLabel, zoomOutLabel, viewModeLabel, fitToScreenLabel, layersLabel, isMap3d, showModeSwitch, showFindLocation, defaultLayersOpen, layersList, layersActiveItems, layersWidth, onViewModeSwitch, onFindLocation, onZoomIn, onZoomOut, onFitToScreen, onChangeLayers, }: MapControlsProps) => import("react").JSX.Element;
+export default MapControls;
+//# sourceMappingURL=MapControls.d.ts.map

package/dist/components/MapControls/MapControls.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './MapControls.scss';
+import classNames from 'classnames';
+import { useId, useLayoutEffect, useRef, useState } from 'react';
+import useOnClickOutside from '../../shared/hooks/useOnClickOutside';
+import useOnEscape from '../../shared/hooks/useOnEscape';
+const MapControls = ({ className, style, title, findLocationLabel, zoomInLabel, zoomOutLabel, viewModeLabel, fitToScreenLabel, layersLabel, isMap3d, showModeSwitch, showFindLocation, defaultLayersOpen = false, layersList, layersActiveItems = [], layersWidth, onViewModeSwitch, onFindLocation, onZoomIn, onZoomOut, onFitToScreen, onChangeLayers, }) => {
+    const refLayersWrapper = useRef(null);
+    const refLayersButton = useRef(null);
+    const layerIdPrefix = useId();
+    const [layersIsOpen, setLayersOpen] = useState(defaultLayersOpen);
+    const [menuPosition, setMenuPosition] = useState('down');
+    useOnClickOutside(refLayersWrapper, () => setLayersOpen(false), layersIsOpen);
+    useOnEscape(() => {
+        setLayersOpen(false);
+        refLayersButton.current?.focus();
+    }, layersIsOpen);
+    useLayoutEffect(() => {
+        if (layersIsOpen && refLayersWrapper.current) {
+            const buttonRect = refLayersWrapper.current.getBoundingClientRect();
+            const windowHeight = window.innerHeight;
+            const spaceBelow = windowHeight - buttonRect.bottom;
+            const minSpaceRequired = 250;
+            if (spaceBelow < minSpaceRequired) {
+                setMenuPosition('up');
+            }
+            else {
+                setMenuPosition('down');
+            }
+        }
+    }, [layersIsOpen]);
+    const handleLayersCheck = (id) => onChangeLayers(id);
+    return (_jsxs("div", { className: classNames('efp-map-controls', className), style: style, role: "toolbar", "aria-label": title, children: [showFindLocation && (_jsx("button", { type: "button", className: "efp-map-control", "aria-label": findLocationLabel, title: findLocationLabel, onClick: onFindLocation, children: _jsx("i", { className: "icon-navigation", "aria-hidden": "true" }) })), layersList && (_jsxs("div", { className: "efp-layers-button", ref: refLayersWrapper, children: [_jsx("button", { ref: refLayersButton, type: "button", className: classNames('efp-map-control', { 'efp-map-control--active': layersIsOpen }), "aria-label": layersLabel, title: layersLabel, "aria-haspopup": "true", "aria-expanded": layersIsOpen, onClick: () => setLayersOpen(!layersIsOpen), children: _jsx("i", { className: "icon-layers", "aria-hidden": "true" }) }), layersIsOpen && (_jsx("div", { className: classNames('efp-checked-panel', {
+                            'efp-checked-panel--opens-up': menuPosition === 'up',
+                            'efp-checked-panel--opens-down': menuPosition === 'down',
+                        }), style: { minWidth: layersWidth }, children: _jsx("ul", { className: "efp-checked-panel__list", children: layersList.map((item) => (_jsxs("li", { children: [_jsx("input", { type: "checkbox", className: "efp-checked-panel__checkbox", value: item.id, id: `${layerIdPrefix}-${item.id}`, checked: layersActiveItems.includes(item.id), onChange: () => handleLayersCheck(item.id) }), _jsx("label", { className: "efp-checked-panel__label", htmlFor: `${layerIdPrefix}-${item.id}`, children: _jsx("div", { className: "efp-checked-panel__item-name", children: item.name }) })] }, item.id))) }) }))] })), showModeSwitch && (_jsx("button", { type: "button", className: "efp-map-control", "aria-label": viewModeLabel, title: viewModeLabel, onClick: onViewModeSwitch, children: _jsx("i", { className: isMap3d ? 'icon-two-dim' : 'icon-three-dim', "aria-hidden": "true" }) })), _jsxs("div", { className: "efp-map-control-group", children: [_jsx("button", { type: "button", className: "efp-map-control", "aria-label": zoomInLabel, title: zoomInLabel, onClick: onZoomIn, children: _jsx("i", { className: "icon-plus", "aria-hidden": "true" }) }), _jsx("div", { className: "efp-map-control-divider" }), _jsx("button", { type: "button", className: "efp-map-control", "aria-label": zoomOutLabel, title: zoomOutLabel, onClick: onZoomOut, children: _jsx("i", { className: "icon-minus", "aria-hidden": "true" }) })] }), _jsx("button", { type: "button", className: "efp-map-control", "aria-label": fitToScreenLabel, title: fitToScreenLabel, onClick: onFitToScreen, children: _jsx("i", { className: "icon-maximize", "aria-hidden": "true" }) })] }));
+};
+export default MapControls;

package/dist/components/MapControls/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './MapControls';
+export type { MapControlsProps, MapControlLayersItem } from './MapControls';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/MapControls/index.js

@@ -0,0 +1,2 @@
+/* eslint-disable simple-import-sort/exports */
+export { default } from './MapControls';

package/dist/components/MobileToggleButton/MobileToggleButton.d.ts

@@ -0,0 +1,11 @@
+import './MobileToggleButton.scss';
+export type MobileToggleButtonMode = 'list' | 'map';
+export interface MobileToggleButtonProps {
+    mode: MobileToggleButtonMode;
+    label: string;
+    ariaLabel: string;
+    onClick: () => void;
+}
+declare function MobileToggleButton({ mode, label, ariaLabel, onClick }: MobileToggleButtonProps): import("react").JSX.Element;
+export default MobileToggleButton;
+//# sourceMappingURL=MobileToggleButton.d.ts.map

package/dist/components/MobileToggleButton/MobileToggleButton.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './MobileToggleButton.scss';
+import classNames from 'classnames';
+function MobileToggleButton({ mode, label, ariaLabel, onClick }) {
+    const isListMode = mode === 'list';
+    return (_jsxs("button", { className: classNames('efp-mobile-toggle-button', isListMode ? 'efp-mobile-toggle-button--list' : 'efp-mobile-toggle-button--map'), onClick: onClick, type: "button", "aria-label": ariaLabel, children: [_jsx("i", { className: isListMode ? 'icon-list' : 'icon-map', "aria-hidden": "true" }), _jsx("span", { className: "efp-mobile-toggle-button__text", children: label })] }));
+}
+export default MobileToggleButton;

package/dist/components/MobileToggleButton/index.d.ts

@@ -0,0 +1,3 @@
+export type { MobileToggleButtonMode, MobileToggleButtonProps } from './MobileToggleButton';
+export { default } from './MobileToggleButton';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/MobileToggleButton/index.js

@@ -0,0 +1 @@
+export { default } from './MobileToggleButton';

package/dist/components/Modal/Modal.d.ts

@@ -0,0 +1,34 @@
+import './Modal.scss';
+import React from 'react';
+import { type ButtonVariant } from '../Button';
+export type ModalVariant = 'default' | 'share' | 'drawer';
+export interface ModalButton {
+    label: string;
+    variant?: ButtonVariant;
+    disabled?: boolean;
+    withBadge?: boolean;
+    onClick: () => void;
+}
+type ModalFooterButton = Omit<ModalButton, 'withBadge'>;
+type ModalLabel = {
+    title: string;
+    ariaLabel?: string;
+} | {
+    title?: undefined;
+    ariaLabel: string;
+};
+export type ModalProps = ModalLabel & {
+    open: boolean;
+    className?: string;
+    variant?: ModalVariant;
+    maxWidth?: number;
+    children?: React.ReactNode;
+    closeLabel: string;
+    renderTarget?: HTMLElement | null;
+    footerLeft?: ModalFooterButton[];
+    footerRight?: ModalButton[];
+    onClose: () => void;
+};
+declare const Modal: ({ open, className, variant, title, ariaLabel, maxWidth, children, closeLabel, renderTarget, footerLeft, footerRight, onClose, }: ModalProps) => React.ReactPortal | null;
+export default Modal;
+//# sourceMappingURL=Modal.d.ts.map

package/dist/components/Modal/Modal.js

@@ -0,0 +1,103 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './Modal.scss';
+import classNames from 'classnames';
+import { useEffect, useId, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { getActiveElement } from '../../shared/activeElement';
+import Button from '../Button';
+const MODAL_EXIT_TRANSITION_MS = 200;
+const isElementVisible = (el) => el.getClientRects().length > 0 && getComputedStyle(el).visibility !== 'hidden';
+const Modal = ({ open, className, variant = 'default', title, ariaLabel, maxWidth, children, closeLabel, renderTarget, footerLeft = [], footerRight = [], onClose, }) => {
+    const modalRef = useRef(null);
+    const previousFocusRef = useRef(null);
+    const titleId = useId();
+    const [isOpen, setIsOpen] = useState(open);
+    const [isVisible, setIsVisible] = useState(open);
+    // Focus restore + body scroll lock + enter/exit animation. Driven by `open`
+    // and by the portal target, without which nothing is rendered at all.
+    useEffect(() => {
+        if (!open) {
+            const deactivateFrame = requestAnimationFrame(() => setIsOpen(false));
+            const unmountTimer = setTimeout(() => setIsVisible(false), MODAL_EXIT_TRANSITION_MS);
+            if (previousFocusRef.current?.isConnected)
+                previousFocusRef.current.focus();
+            previousFocusRef.current = null;
+            return () => {
+                cancelAnimationFrame(deactivateFrame);
+                clearTimeout(unmountTimer);
+            };
+        }
+        if (!renderTarget)
+            return;
+        previousFocusRef.current ??= getActiveElement(modalRef.current);
+        const previousBodyOverflow = document.body.style.overflow;
+        document.body.style.overflow = 'hidden';
+        let activateFrame = 0;
+        const mountFrame = requestAnimationFrame(() => {
+            setIsVisible(true);
+            activateFrame = requestAnimationFrame(() => setIsOpen(true));
+        });
+        return () => {
+            cancelAnimationFrame(mountFrame);
+            cancelAnimationFrame(activateFrame);
+            document.body.style.overflow = previousBodyOverflow;
+        };
+    }, [open, renderTarget]);
+    // Keydown handling (Escape + focus trap). Kept separate from the lifecycle
+    // effect above so a new `onClose` identity only re-subscribes this listener
+    // and never restarts the enter/exit animation or scroll lock.
+    useEffect(() => {
+        if (!open || !renderTarget)
+            return;
+        const handleKeyDown = (e) => {
+            if (e.key === 'Escape') {
+                e.preventDefault();
+                e.stopImmediatePropagation();
+                onClose();
+                return;
+            }
+            if (e.key !== 'Tab')
+                return;
+            const container = modalRef.current;
+            if (!container)
+                return;
+            const focusable = Array.from(container.querySelectorAll('a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])')).filter(isElementVisible);
+            if (focusable.length === 0) {
+                e.preventDefault();
+                return;
+            }
+            const first = focusable[0];
+            const last = focusable[focusable.length - 1];
+            const active = getActiveElement(container);
+            if (e.shiftKey) {
+                if (active === first || active === container) {
+                    e.preventDefault();
+                    last.focus();
+                }
+            }
+            else if (active === last) {
+                e.preventDefault();
+                first.focus();
+            }
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return () => document.removeEventListener('keydown', handleKeyDown);
+    }, [open, renderTarget, onClose]);
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        let inner = 0;
+        const outer = requestAnimationFrame(() => {
+            inner = requestAnimationFrame(() => modalRef.current?.focus());
+        });
+        return () => {
+            cancelAnimationFrame(outer);
+            cancelAnimationFrame(inner);
+        };
+    }, [isOpen]);
+    if (!isVisible || !renderTarget)
+        return null;
+    const renderButtons = (buttons) => buttons?.map(({ label, onClick, variant = 'primary', disabled, withBadge }, idx) => (_jsx(Button, { onClick: onClick, variant: variant, size: "md", inline: true, disabled: disabled, withBadge: withBadge, children: label }, idx)));
+    return createPortal(_jsx("div", { className: classNames('efp-modal', `efp-modal--${variant}`, { 'efp-modal--open': isOpen }, className), role: "dialog", "aria-modal": "true", "aria-labelledby": title ? titleId : undefined, "aria-label": !title ? ariaLabel : undefined, ref: modalRef, tabIndex: -1, onClick: onClose, children: _jsxs("div", { className: "efp-modal__box", style: maxWidth ? { maxWidth: `${maxWidth}px` } : undefined, onClick: (e) => e.stopPropagation(), children: [_jsxs("div", { className: "efp-modal__header", children: [title && (_jsx("div", { className: "efp-modal__title-container", children: _jsx("h2", { className: "efp-modal__title", id: titleId, children: title }) })), _jsx("button", { type: "button", className: "efp-modal__close", onClick: onClose, "aria-label": closeLabel, title: closeLabel, children: _jsx("i", { className: "icon-close", "aria-hidden": "true" }) })] }), _jsx("div", { className: "efp-modal__body", children: children }), (footerLeft.length > 0 || footerRight.length > 0) && (_jsxs("div", { className: "efp-modal__footer", children: [_jsx("div", { className: "efp-modal__footer-left", children: footerLeft.length > 0 && renderButtons(footerLeft) }), footerRight.length > 0 && (_jsx("div", { className: "efp-modal__footer-right", children: renderButtons(footerRight) }))] }))] }) }), renderTarget);
+};
+export default Modal;

package/dist/components/Modal/index.d.ts

@@ -0,0 +1,3 @@
+export type { ModalButton, ModalProps, ModalVariant } from './Modal';
+export { default } from './Modal';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Modal/index.js

@@ -0,0 +1 @@
+export { default } from './Modal';

package/dist/components/MultiSelectGroups/MultiSelectGroups.d.ts

@@ -0,0 +1,37 @@
+import './MultiSelectGroups.scss';
+import React from 'react';
+export interface MultiSelectGroupItem {
+    id: number | string;
+    name: string;
+    count?: number;
+    disabled?: boolean;
+    countProvider?: () => number;
+}
+export interface MultiSelectGroup {
+    groupName: string;
+    items: MultiSelectGroupItem[];
+    showGroupActions?: boolean;
+    customGroupClass?: string;
+    fullWidth?: boolean;
+    id?: string | number;
+}
+export type MultiSelectVariant = 'default' | 'categories';
+export interface MultiSelectGroupsProps {
+    groups: MultiSelectGroup[];
+    selectedIds: (number | string)[];
+    showItemCounts?: boolean;
+    showGroupActions?: boolean;
+    variant?: MultiSelectVariant;
+    maxItemsVisible?: number;
+    selectAllLabel: string;
+    clearAllLabel: string;
+    selectedLabel: string;
+    showMoreLabel: string;
+    showLessLabel: string;
+    onChange: (selectedIds: (number | string)[]) => void;
+    itemCountProvider?: (item: MultiSelectGroupItem) => number;
+    customItemRenderer?: (item: MultiSelectGroupItem, isSelected: boolean) => React.ReactNode;
+}
+declare function MultiSelectGroups({ groups, selectedIds, showItemCounts, showGroupActions, variant, maxItemsVisible, selectAllLabel, clearAllLabel, selectedLabel, showMoreLabel, showLessLabel, itemCountProvider, customItemRenderer, onChange, }: MultiSelectGroupsProps): React.JSX.Element | null;
+export default MultiSelectGroups;
+//# sourceMappingURL=MultiSelectGroups.d.ts.map

package/dist/components/MultiSelectGroups/MultiSelectGroups.js

@@ -0,0 +1,80 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './MultiSelectGroups.scss';
+import cn from 'classnames';
+import React, { useCallback, useMemo, useState } from 'react';
+import ShowMoreButton from '../ShowMoreButton';
+const GroupItem = React.memo(({ item, isSelected, variant, showCount, count, onClick, customRenderer }) => {
+    if (customRenderer) {
+        return _jsx(_Fragment, { children: customRenderer(item, isSelected) });
+    }
+    return (_jsxs("button", { type: "button", className: cn('efp-multi-select-groups__item', {
+            'efp-multi-select-groups__item--selected': isSelected,
+            'efp-multi-select-groups__item--disabled': item.disabled,
+            [`efp-multi-select-groups__item--${variant}`]: variant,
+        }), onClick: () => !item.disabled && onClick(item.id), disabled: item.disabled, "aria-pressed": isSelected, children: [_jsx("div", { className: "efp-multi-select-groups__item-name", children: item.name }), showCount && count > 0 && (_jsx("span", { className: "efp-multi-select-groups__item-count", children: count }))] }));
+});
+function MultiSelectGroups({ groups = [], selectedIds = [], showItemCounts = true, showGroupActions = true, variant = 'default', maxItemsVisible = 20, selectAllLabel, clearAllLabel, selectedLabel, showMoreLabel, showLessLabel, itemCountProvider, customItemRenderer, onChange, }) {
+    const [expandedGroups, setExpandedGroups] = useState(() => new Set());
+    const handleItemToggle = useCallback((id) => {
+        const newSelected = selectedIds.includes(id)
+            ? selectedIds.filter((i) => i !== id)
+            : [...selectedIds, id];
+        onChange(newSelected);
+    }, [selectedIds, onChange]);
+    const selectAllInGroup = useCallback((group) => {
+        const groupItemIds = group.items
+            .filter((item) => item.id && !item.disabled)
+            .map((item) => item.id);
+        const uniqueNewIds = groupItemIds.filter((id) => !selectedIds.includes(id));
+        if (uniqueNewIds.length === 0)
+            return;
+        onChange([...selectedIds, ...uniqueNewIds]);
+    }, [selectedIds, onChange]);
+    const clearAllInGroup = useCallback((group) => {
+        const groupItemIds = new Set(group.items.map((item) => item.id));
+        const newSelected = selectedIds.filter((id) => !groupItemIds.has(id));
+        onChange(newSelected);
+    }, [selectedIds, onChange]);
+    const toggleGroupExpansion = useCallback((groupName) => {
+        setExpandedGroups((prev) => {
+            const newSet = new Set(prev);
+            if (newSet.has(groupName))
+                newSet.delete(groupName);
+            else
+                newSet.add(groupName);
+            return newSet;
+        });
+    }, []);
+    const getItemCount = (item) => {
+        if (item.count !== undefined)
+            return item.count;
+        if (item.countProvider)
+            return item.countProvider();
+        if (itemCountProvider)
+            return itemCountProvider(item);
+        return 0;
+    };
+    const selectedSet = useMemo(() => new Set(selectedIds), [selectedIds]);
+    if (!Array.isArray(groups) || !groups.length) {
+        return null;
+    }
+    return (_jsx("div", { className: "efp-multi-select-groups", children: _jsx("div", { className: "efp-multi-select-groups__list", children: groups.map((group) => {
+                if (!group?.groupName || !Array.isArray(group.items))
+                    return null;
+                const validItems = group.items.filter((i) => i.id);
+                const selectedItemsInGroup = validItems.filter((item) => selectedSet.has(item.id));
+                const isFull = selectedItemsInGroup.length === validItems.length && validItems.length > 0;
+                const isPartial = selectedItemsInGroup.length > 0 && !isFull;
+                const isExpanded = expandedGroups.has(group.groupName);
+                const visibleItems = isExpanded || validItems.length <= maxItemsVisible
+                    ? validItems
+                    : validItems.slice(0, maxItemsVisible);
+                const hiddenCount = validItems.length - visibleItems.length;
+                const hiddenSelectedCount = hiddenCount > 0
+                    ? validItems.slice(maxItemsVisible).filter((item) => selectedSet.has(item.id)).length
+                    : 0;
+                return (_jsxs("div", { className: cn('efp-multi-select-groups__group', { 'efp-multi-select-groups__group--full-width': group.fullWidth }, group.customGroupClass), children: [_jsxs("div", { className: "efp-multi-select-groups__group-header", children: [_jsx("div", { className: "efp-multi-select-groups__group-title", children: group.groupName }), showGroupActions && group.showGroupActions !== false && (_jsxs("div", { className: "efp-multi-select-groups__group-actions", children: [!isFull && (_jsx("button", { type: "button", className: "efp-multi-select-groups__action-btn", onClick: () => selectAllInGroup(group), children: selectAllLabel })), (isPartial || isFull) && (_jsx("button", { type: "button", className: "efp-multi-select-groups__action-btn", onClick: () => clearAllInGroup(group), children: clearAllLabel }))] }))] }), _jsx("div", { className: "efp-multi-select-groups__group-items", children: visibleItems.map((item) => (_jsx(GroupItem, { item: item, isSelected: selectedSet.has(item.id), variant: variant, showCount: showItemCounts, count: getItemCount(item), onClick: handleItemToggle, customRenderer: customItemRenderer }, item.id))) }), validItems.length > maxItemsVisible && (_jsx(ShowMoreButton, { className: "efp-multi-select-groups__show-more", expanded: isExpanded, showMoreLabel: showMoreLabel, showLessLabel: showLessLabel, onClick: () => toggleGroupExpansion(group.groupName), suffix: !isExpanded &&
+                                hiddenSelectedCount > 0 && (_jsxs("span", { className: "efp-multi-select-groups__show-more-badge", children: [hiddenSelectedCount, " ", selectedLabel] })) }))] }, group.groupName));
+            }) }) }));
+}
+export default MultiSelectGroups;

package/dist/components/MultiSelectGroups/index.d.ts

@@ -0,0 +1,3 @@
+export type { MultiSelectGroup, MultiSelectGroupItem, MultiSelectGroupsProps, MultiSelectVariant, } from './MultiSelectGroups';
+export { default } from './MultiSelectGroups';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/MultiSelectGroups/index.js

@@ -0,0 +1 @@
+export { default } from './MultiSelectGroups';