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

package/tabs/moderncssm/desktop/index.js

@@ -0,0 +1,30 @@
+export { PrimaryTabListDesktop } from '../components/primary-tablist/Component.desktop.js';
+export { SecondaryTabListDesktop } from '../components/secondary-tablist/Component.desktop.js';
+export { Tab } from '../components/tab/Component.js';
+export { TabsDesktop } from '../components/tabs/Component.desktop.js';
+import 'react';
+import '../components/primary-tablist/Component.js';
+import '@juggle/resize-observer';
+import 'classnames';
+import '../../../keyboard-focusable/moderncssm';
+import '../../../shared/moderncssm';
+import '../hooks/use-tabs.js';
+import 'react-merge-refs';
+import '../components/scrollable-container/Component.js';
+import 'compute-scroll-into-view';
+import '../components/scroll-controls/Component.js';
+import 'lodash.debounce';
+import '../../../icon-button/moderncssm';
+import '@alfalab/icons-glyph/ChevronLeftCompactSIcon';
+import '@alfalab/icons-glyph/ChevronRightCompactSIcon';
+import '../components/scroll-controls/utils.js';
+import '../components/scroll-controls/index.module.css';
+import '../components/scrollable-container/index.module.css';
+import '../components/title/Component.js';
+import '../../../skeleton/moderncssm';
+import '../components/primary-tablist/index.module.css';
+import '../../../tag/moderncssm/desktop';
+import '../components/secondary-tablist/Component.js';
+import '../components/secondary-tablist/index.module.css';
+import '../components/tab/index.module.css';
+import '../components/tabs/Component.js';

package/tabs/moderncssm/hooks/use-collapsible-elements.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { DependencyList } from 'react';
+declare const useCollapsibleElements: <ContainerType extends HTMLElement, AddonType extends HTMLElement>(selectors: string, deps?: DependencyList) => {
+    containerRef: import("react").RefObject<ContainerType>;
+    addonRef: import("react").RefObject<AddonType>;
+    idsCollapsedElements: string[];
+};
+export { useCollapsibleElements };

package/tabs/moderncssm/hooks/use-collapsible-elements.js

@@ -0,0 +1,56 @@
+import { useState, useRef } from 'react';
+import { ResizeObserver } from '@juggle/resize-observer';
+import { useLayoutEffect_SAFE_FOR_SSR } from '@alfalab/hooks';
+
+const useCollapsibleElements = (selectors, deps = []) => {
+    const [idsCollapsedElements, setIdsCollapsedElements] = useState([]);
+    const containerRef = useRef(null);
+    const addonRef = useRef(null);
+    useLayoutEffect_SAFE_FOR_SSR(() => {
+        const collapseElements = (inlineSize) => {
+            const container = containerRef.current;
+            if (!container)
+                return;
+            const addon = addonRef.current;
+            const containerWidth = (inlineSize || container.clientWidth) - (addon?.scrollWidth || 0) * 1.5; // при расчётах, даём кнопке "Ещё" чуть больше места, чтобы точно влезла
+            const elements = Array.from(container.querySelectorAll(selectors));
+            const collapsedIds = elements.reduce((acc, element) => {
+                const { offsetLeft, scrollWidth, id } = element;
+                const elementOffset = offsetLeft + scrollWidth;
+                const isCollapsedElement = getComputedStyle(element).visibility === 'collapse';
+                const maxWidth = addon && !isCollapsedElement
+                    ? containerWidth -
+                        (addon.scrollWidth + parseFloat(getComputedStyle(addon).marginLeft))
+                    : containerWidth;
+                if (elementOffset >= maxWidth)
+                    acc.push(id);
+                return acc;
+            }, []);
+            setIdsCollapsedElements(collapsedIds);
+        };
+        const handleElementsResize = (entries) => {
+            if (Array.isArray(entries[0].contentBoxSize)) {
+                const [{ inlineSize }] = entries[0].contentBoxSize;
+                collapseElements(inlineSize);
+            }
+            else {
+                // old browser compatibility. See https://caniuse.com/mdn-api_resizeobserverentry_contentboxsize
+                collapseElements(entries[0].contentRect.width);
+            }
+        };
+        const ResizeObserver$1 = window.ResizeObserver || ResizeObserver;
+        const observer = new ResizeObserver$1(handleElementsResize);
+        if (containerRef.current) {
+            collapseElements();
+            observer.observe(containerRef.current);
+        }
+        return () => observer.disconnect();
+    }, [selectors, ...deps]);
+    return {
+        containerRef,
+        addonRef,
+        idsCollapsedElements,
+    };
+};
+
+export { useCollapsibleElements };

package/tabs/moderncssm/hooks/use-tablist-titles.d.ts

@@ -0,0 +1,32 @@
+/// <reference types="react" />
+import { TabListProps } from "../typings";
+declare const useTablistTitles: ({ titles, selectedId, collapsedTabsIds, breakpoint, onChange, defaultMatchMediaValue, }: Pick<TabListProps, 'titles' | 'selectedId' | 'collapsedTabsIds' | 'onChange' | 'defaultMatchMediaValue'> & Required<Pick<TabListProps, 'breakpoint'>>) => {
+    containerRef: import("react").RefObject<HTMLDivElement>;
+    addonRef: import("react").RefObject<HTMLInputElement>;
+    tablistTitles: {
+        collapsed: boolean;
+        selected: boolean;
+        title: string | number | boolean | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactFragment | import("react").ReactPortal;
+        id: import("../typings").SelectedId;
+        disabled?: boolean | undefined;
+        rightAddons?: import("react").ReactNode;
+        hidden?: boolean | undefined;
+        toggleClassName?: string | undefined;
+        dataTestId?: string | undefined;
+        toggleRef?: import("react").Ref<HTMLDivElement> | undefined;
+    }[];
+    selectedTab: HTMLButtonElement | null;
+    focusedTab: HTMLButtonElement | null;
+    getTabListItemProps: (index: number, outerRef?: import("react").MutableRefObject<HTMLElement> | undefined) => {
+        role: string;
+        tabIndex: number;
+        'aria-selected': boolean;
+        selected: boolean;
+        'data-test-id': string | undefined;
+        disabled: boolean | undefined;
+        ref: (instance: HTMLElement | null) => void;
+        onKeyDown: (event: import("react").KeyboardEvent<HTMLButtonElement>) => void;
+        onClick: (event?: import("react").MouseEvent<Element, MouseEvent> | undefined) => void;
+    };
+};
+export { useTablistTitles };

package/tabs/moderncssm/hooks/use-tablist-titles.js

@@ -0,0 +1,67 @@
+import { useMemo } from 'react';
+import { useMatchMedia } from '../../../mq/moderncssm';
+import { useCollapsibleElements } from './use-collapsible-elements.js';
+import { useTabs } from './use-tabs.js';
+import '@juggle/resize-observer';
+import '@alfalab/hooks';
+import 'react-merge-refs';
+import '../../../shared/moderncssm';
+
+const useTablistTitles = ({ titles = [], selectedId, collapsedTabsIds, breakpoint, onChange, defaultMatchMediaValue, }) => {
+    const { containerRef, addonRef, idsCollapsedElements } = useCollapsibleElements('[role=tab]', [titles, collapsedTabsIds]);
+    const [isDesktop] = useMatchMedia(`(min-width: ${breakpoint}px)`, defaultMatchMediaValue);
+    const tablistTitles = useMemo(() => {
+        const idsCollapsedTitles = [];
+        const idsCollapsed = idsCollapsedElements.concat(collapsedTabsIds || []);
+        if (isDesktop) {
+            const visibleTitles = titles.filter(({ id }) => !idsCollapsed.includes(String(id)));
+            const lastVisibleTitle = collapsedTabsIds
+                ? null
+                : visibleTitles[visibleTitles.length - 1];
+            idsCollapsed.forEach((id) => {
+                if (selectedId === id && lastVisibleTitle) {
+                    idsCollapsedTitles.push(String(lastVisibleTitle.id));
+                }
+                if (selectedId !== id) {
+                    idsCollapsedTitles.push(id);
+                }
+            });
+        }
+        const titlesMapped = titles.map((title) => ({
+            ...title,
+            collapsed: idsCollapsedTitles.includes(String(title.id)),
+            selected: title.id === selectedId,
+        }));
+        if (collapsedTabsIds?.length) {
+            titlesMapped.sort((a, b) => {
+                const hasA = collapsedTabsIds.includes(String(a.id));
+                const hasB = collapsedTabsIds.includes(String(b.id));
+                if (hasA === hasB) {
+                    return 0;
+                }
+                return hasA ? 1 : -1;
+            });
+        }
+        return titlesMapped.sort((a, b) => {
+            if (a.collapsed === b.collapsed) {
+                return 0;
+            }
+            return a.collapsed ? 1 : -1;
+        });
+    }, [collapsedTabsIds, idsCollapsedElements, isDesktop, titles, selectedId]);
+    const { selectedTab, focusedTab, getTabListItemProps } = useTabs({
+        titles: tablistTitles,
+        selectedId,
+        onChange,
+    });
+    return {
+        containerRef,
+        addonRef,
+        tablistTitles,
+        selectedTab,
+        focusedTab,
+        getTabListItemProps,
+    };
+};
+
+export { useTablistTitles };

package/tabs/moderncssm/hooks/use-tabs.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import { KeyboardEvent, MouseEvent, MutableRefObject } from 'react';
+import { UseTabsProps } from "../typings";
+declare function useTabs({ titles, selectedId, onChange }: UseTabsProps): {
+    getTabListItemProps: (index: number, outerRef?: MutableRefObject<HTMLElement>) => {
+        role: string;
+        tabIndex: number;
+        'aria-selected': boolean;
+        selected: boolean;
+        'data-test-id': string | undefined;
+        disabled: boolean | undefined;
+        ref: (instance: HTMLElement | null) => void;
+        onKeyDown: (event: KeyboardEvent<HTMLButtonElement>) => void;
+        onClick: (event?: MouseEvent) => void;
+    };
+    selectedTab: HTMLButtonElement | null;
+    focusedTab: HTMLButtonElement | null;
+};
+export { useTabs };

package/tabs/moderncssm/hooks/use-tabs.js

@@ -0,0 +1,103 @@
+import { useState, useRef, useCallback } from 'react';
+import mergeRefs from 'react-merge-refs';
+import { getDataTestId } from '../../../shared/moderncssm';
+
+function useTabs({ titles = [], selectedId, onChange }) {
+    const [selectedTab, setSelectedTab] = useState(null);
+    const [focusedTab, setFocusedTab] = useState(null);
+    const itemRefs = useRef([]);
+    const handleItemRef = useCallback((node, item, index) => {
+        if (node && item.id === selectedId)
+            setSelectedTab(node);
+        itemRefs.current[index] = node;
+    }, [selectedId]);
+    const handleItemClick = useCallback((event, item) => {
+        if (onChange && item.id !== selectedId) {
+            onChange(event, { selectedId: item.id });
+        }
+    }, [onChange, selectedId]);
+    const focusTab = useCallback((position) => {
+        const refs = itemRefs.current;
+        const tabAvailable = (ref) => ref && !ref.disabled;
+        if (refs.every((ref) => !tabAvailable(ref)))
+            return;
+        let focusedTabIndex = refs.findIndex((node) => document.activeElement === node);
+        if (focusedTabIndex === -1) {
+            focusedTabIndex = refs.findIndex((node) => node === selectedTab);
+        }
+        let newFocusIndex;
+        switch (position) {
+            case 'prev':
+                newFocusIndex = focusedTabIndex === 0 ? refs.length - 1 : focusedTabIndex - 1;
+                break;
+            case 'next':
+                newFocusIndex = focusedTabIndex === refs.length - 1 ? 0 : focusedTabIndex + 1;
+                break;
+            case 'start':
+                newFocusIndex = 0;
+                break;
+            case 'end':
+                newFocusIndex = refs.length - 1;
+                break;
+        }
+        const shift = ['prev', 'end'].includes(position) ? -1 : 1;
+        while (!tabAvailable(refs[newFocusIndex])) {
+            newFocusIndex = (refs.length + newFocusIndex + shift) % refs.length;
+        }
+        refs[newFocusIndex].focus();
+        setFocusedTab(refs[newFocusIndex]);
+    }, [selectedTab, itemRefs]);
+    const handleKeyDown = useCallback((event) => {
+        switch (event.key) {
+            case 'ArrowLeft':
+                focusTab('prev');
+                event.preventDefault();
+                break;
+            case 'ArrowRight':
+                focusTab('next');
+                event.preventDefault();
+                break;
+            case 'Home':
+                focusTab('start');
+                event.preventDefault();
+                break;
+            case 'End':
+                focusTab('end');
+                event.preventDefault();
+                break;
+        }
+    }, [focusTab]);
+    const getTabListItemProps = (index, outerRef) => {
+        const item = titles[index];
+        const itemSelected = item.id === selectedId;
+        const refs = [
+            (node) => {
+                // eslint-disable-next-line no-param-reassign
+                if (outerRef)
+                    outerRef.current = node;
+                handleItemRef(node, item, index);
+            },
+        ];
+        if (item.toggleRef) {
+            refs.push(item.toggleRef);
+        }
+        return {
+            role: 'tab',
+            tabIndex: itemSelected ? 0 : -1,
+            'aria-selected': itemSelected,
+            selected: itemSelected,
+            'data-test-id': getDataTestId(item.dataTestId, 'toggle'),
+            disabled: item.disabled,
+            ref: mergeRefs(refs),
+            onKeyDown: handleKeyDown,
+            onClick: (event) => handleItemClick(event, item),
+        };
+    };
+    return {
+        getTabListItemProps,
+        selectedTab,
+        focusedTab,
+    };
+}
+
+export { useTabs };

package/tabs/moderncssm/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./components/primary-tablist/Component.responsive";
+export * from "./components/secondary-tablist/Component.responsive";
+export * from "./components/tab/index";
+export { TabsResponsive as Tabs, TabsResponsiveProps as TabsProps } from "./components/tabs/Component.responsive";

package/tabs/moderncssm/index.js

@@ -0,0 +1,38 @@
+export { PrimaryTabListResponsive } from './components/primary-tablist/Component.responsive.js';
+export { SecondaryTabListResponsive } from './components/secondary-tablist/Component.responsive.js';
+export { Tab } from './components/tab/Component.js';
+export { TabsResponsive as Tabs } from './components/tabs/Component.responsive.js';
+import 'react';
+import '../../mq/moderncssm';
+import './components/primary-tablist/Component.desktop.js';
+import './components/primary-tablist/Component.js';
+import '@juggle/resize-observer';
+import 'classnames';
+import '../../keyboard-focusable/moderncssm';
+import '../../shared/moderncssm';
+import './hooks/use-tabs.js';
+import 'react-merge-refs';
+import './components/scrollable-container/Component.js';
+import 'compute-scroll-into-view';
+import './components/scroll-controls/Component.js';
+import 'lodash.debounce';
+import '../../icon-button/moderncssm';
+import '@alfalab/icons-glyph/ChevronLeftCompactSIcon';
+import '@alfalab/icons-glyph/ChevronRightCompactSIcon';
+import './components/scroll-controls/utils.js';
+import './components/scroll-controls/index.module.css';
+import './components/scrollable-container/index.module.css';
+import './components/title/Component.js';
+import '../../skeleton/moderncssm';
+import './components/primary-tablist/index.module.css';
+import './components/primary-tablist/Component.mobile.js';
+import './components/primary-tablist/mobile.module.css';
+import './components/secondary-tablist/Component.desktop.js';
+import '../../tag/moderncssm/desktop';
+import './components/secondary-tablist/Component.js';
+import './components/secondary-tablist/index.module.css';
+import './components/secondary-tablist/Component.mobile.js';
+import '../../tag/moderncssm/mobile';
+import './components/secondary-tablist/mobile.module.css';
+import './components/tab/index.module.css';
+import './components/tabs/Component.js';

package/tabs/moderncssm/mobile/index.d.ts

@@ -0,0 +1,4 @@
+export * from "../components/primary-tablist/Component.mobile";
+export * from "../components/secondary-tablist/Component.mobile";
+export * from "../components/tab/index";
+export * from "../components/tabs/Component.mobile";

package/tabs/moderncssm/mobile/index.js

@@ -0,0 +1,32 @@
+export { PrimaryTabListMobile } from '../components/primary-tablist/Component.mobile.js';
+export { SecondaryTabListMobile } from '../components/secondary-tablist/Component.mobile.js';
+export { Tab } from '../components/tab/Component.js';
+export { TabsMobile } from '../components/tabs/Component.mobile.js';
+import 'react';
+import '../components/primary-tablist/Component.js';
+import '@juggle/resize-observer';
+import 'classnames';
+import '../../../keyboard-focusable/moderncssm';
+import '../../../shared/moderncssm';
+import '../hooks/use-tabs.js';
+import 'react-merge-refs';
+import '../components/scrollable-container/Component.js';
+import 'compute-scroll-into-view';
+import '../components/scroll-controls/Component.js';
+import 'lodash.debounce';
+import '../../../icon-button/moderncssm';
+import '@alfalab/icons-glyph/ChevronLeftCompactSIcon';
+import '@alfalab/icons-glyph/ChevronRightCompactSIcon';
+import '../components/scroll-controls/utils.js';
+import '../components/scroll-controls/index.module.css';
+import '../components/scrollable-container/index.module.css';
+import '../components/title/Component.js';
+import '../../../skeleton/moderncssm';
+import '../components/primary-tablist/index.module.css';
+import '../components/primary-tablist/mobile.module.css';
+import '../../../tag/moderncssm/mobile';
+import '../components/secondary-tablist/Component.js';
+import '../components/secondary-tablist/index.module.css';
+import '../components/secondary-tablist/mobile.module.css';
+import '../components/tab/index.module.css';
+import '../components/tabs/Component.js';

package/tabs/moderncssm/shared/index.d.ts

@@ -0,0 +1,4 @@
+export * from "../components/scrollable-container/index";
+export * from "../hooks/use-tabs";
+export * from "../hooks/use-collapsible-elements";
+export * from "../typings";

package/tabs/moderncssm/shared/index.js

@@ -0,0 +1,18 @@
+export { ScrollableContainer } from '../components/scrollable-container/Component.js';
+export { useTabs } from '../hooks/use-tabs.js';
+export { useCollapsibleElements } from '../hooks/use-collapsible-elements.js';
+import 'react';
+import 'classnames';
+import 'compute-scroll-into-view';
+import '../components/scroll-controls/Component.js';
+import 'lodash.debounce';
+import '../../../icon-button/moderncssm';
+import '@alfalab/icons-glyph/ChevronLeftCompactSIcon';
+import '@alfalab/icons-glyph/ChevronRightCompactSIcon';
+import '../components/scroll-controls/utils.js';
+import '../components/scroll-controls/index.module.css';
+import '../components/scrollable-container/index.module.css';
+import 'react-merge-refs';
+import '../../../shared/moderncssm';
+import '@juggle/resize-observer';
+import '@alfalab/hooks';

package/tabs/moderncssm/synthetic-events.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import React from 'react';
+declare const createSyntheticEvent: <T extends Element, E extends Event>(event: E) => React.SyntheticEvent<T, E>;
+declare const createUIEvent: <T extends Element, E extends Event>(event: E) => React.UIEvent<T, E>;
+declare const createSyntheticMouseEvent: <T extends Element>(event: MouseEvent) => React.MouseEvent<T, MouseEvent>;
+export { createSyntheticEvent, createUIEvent, createSyntheticMouseEvent };

package/tabs/moderncssm/synthetic-events.js

@@ -0,0 +1,61 @@
+const createSyntheticEvent = (event) => {
+    let isDefaultPrevented = false;
+    let isPropagationStopped = false;
+    const preventDefault = () => {
+        isDefaultPrevented = true;
+        event.preventDefault();
+    };
+    const stopPropagation = () => {
+        isPropagationStopped = true;
+        event.stopPropagation();
+    };
+    return {
+        nativeEvent: event,
+        currentTarget: event.currentTarget,
+        target: event.target,
+        bubbles: event.bubbles,
+        cancelable: event.cancelable,
+        defaultPrevented: event.defaultPrevented,
+        eventPhase: event.eventPhase,
+        isTrusted: event.isTrusted,
+        preventDefault,
+        isDefaultPrevented: () => isDefaultPrevented,
+        stopPropagation,
+        isPropagationStopped: () => isPropagationStopped,
+        persist: () => { },
+        timeStamp: event.timeStamp,
+        type: event.type,
+    };
+};
+const createUIEvent = (event) => ({
+    ...createSyntheticEvent(event),
+    detail: 0,
+    view: {
+        styleMedia: {
+            type: '',
+            matchMedium: () => false,
+        },
+        document,
+    },
+});
+const createSyntheticMouseEvent = (event) => ({
+    ...createUIEvent(event),
+    altKey: event.altKey,
+    button: event.button,
+    buttons: event.buttons,
+    clientX: event.clientX,
+    clientY: event.clientY,
+    ctrlKey: event.ctrlKey,
+    getModifierState: event.getModifierState,
+    metaKey: event.metaKey,
+    movementX: event.movementX,
+    movementY: event.movementY,
+    pageX: event.pageX,
+    pageY: event.pageY,
+    relatedTarget: event.relatedTarget,
+    screenX: event.screenX,
+    screenY: event.screenY,
+    shiftKey: event.shiftKey,
+});
+
+export { createSyntheticEvent, createSyntheticMouseEvent, createUIEvent };