@astral/ui 4.67.0 → 4.68.0

package/components/Tabs/Tab/Tab.d.ts

@@ -1,15 +1,3 @@
-import type { TabProps as MuiTabProps } from '@mui/material/Tab';
 import { type ElementType } from 'react';
-import { type WithoutEmotionSpecific } from '../../types/WithoutEmotionSpecific';
-export type TabProps<TComponent extends ElementType, TComponentProps = {}> = WithoutEmotionSpecific<MuiTabProps<TComponent, TComponentProps>> & {
-    component?: TComponent;
-    /**
-     * Число счетчика
-     */
-    count?: number;
-    /**
-     * Максимальное число которое отобразится в счетчике
-     */
-    max?: number;
-};
+import { type TabProps } from './types';
 export declare const Tab: <TComponent extends ElementType = "div", TComponentProps = {}>({ label, count, max, ...rest }: TabProps<TComponent, TComponentProps>) => import("react/jsx-runtime").JSX.Element;

package/components/Tabs/Tab/index.d.ts

@@ -1 +1,2 @@
 export * from './Tab';
+export type { TabProps } from './types';

package/components/Tabs/Tab/types.d.ts

@@ -0,0 +1,14 @@
+import type { TabProps as MuiTabProps } from '@mui/material/Tab';
+import { type ElementType } from 'react';
+import { type WithoutEmotionSpecific } from '../../types/WithoutEmotionSpecific';
+export type TabProps<TComponent extends ElementType, TComponentProps = {}> = WithoutEmotionSpecific<MuiTabProps<TComponent, TComponentProps>> & {
+    component?: TComponent;
+    /**
+     * Число счетчика
+     */
+    count?: number;
+    /**
+     * Максимальное число которое отобразится в счетчике
+     */
+    max?: number;
+};

package/components/Tabs/Tab/types.js

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

package/components/Tabs/Tabs.js

@@ -1,5 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useScrollToActiveTab } from './hooks';
 import { Container, Divider, StyledTabs, Wrapper } from './styles';
 export const Tabs = ({ ...tabsProps }) => {
-    return (_jsx(Container, { children: _jsxs(Wrapper, { children: [_jsx(StyledTabs, { ...tabsProps }), _jsx(Divider, {})] }) }));
+    const { containerRef } = useScrollToActiveTab();
+    return (_jsx(Container, { children: _jsxs(Wrapper, { children: [_jsx(StyledTabs, { ...tabsProps, ref: containerRef }), _jsx(Divider, {})] }) }));
 };

package/components/Tabs/hooks/index.d.ts

@@ -0,0 +1 @@
+export * from './useScrollToActiveTab';

package/components/Tabs/hooks/index.js

@@ -0,0 +1 @@
+export * from './useScrollToActiveTab';

package/components/Tabs/hooks/useScrollToActiveTab/index.d.ts

@@ -0,0 +1 @@
+export * from './useScrollToActiveTab';

package/components/Tabs/hooks/useScrollToActiveTab/index.js

@@ -0,0 +1 @@
+export * from './useScrollToActiveTab';

package/components/Tabs/hooks/useScrollToActiveTab/useScrollToActiveTab.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const useScrollToActiveTab: () => {
+    containerRef: import("react").RefObject<HTMLDivElement | null>;
+};

package/components/Tabs/hooks/useScrollToActiveTab/useScrollToActiveTab.js

@@ -0,0 +1,24 @@
+import { useEffect, useRef } from 'react';
+import { useViewportType } from '../../../useViewportType';
+export const useScrollToActiveTab = () => {
+    const containerRef = useRef(null);
+    const { isMobile } = useViewportType();
+    useEffect(() => {
+        if (!containerRef.current || !isMobile) {
+            return;
+        }
+        const selectedTab = containerRef.current.querySelector('[aria-selected="true"]');
+        const runScroll = () => {
+            if (selectedTab) {
+                selectedTab.scrollIntoView({
+                    behavior: 'smooth',
+                });
+            }
+        };
+        // TODO: Убрать setTimeout после отказа от MUI в компоненте
+        setTimeout(() => {
+            runScroll();
+        }, 200);
+    }, []);
+    return { containerRef };
+};

package/components/Tabs/styles.js

@@ -4,6 +4,20 @@ export const Container = styled.div `
   overflow-x: auto;
 
   width: 100%;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    /* Убираем видимую полосу прокрутки в firefox */
+    scrollbar-width: none;
+
+    overflow-x: auto;
+
+    width: 100%;
+
+    /* Убираем видимую полосу прокрутки в chrome */
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
 `;
 export const Divider = styled.div `
   position: relative;

package/node/components/Tabs/Tab/Tab.d.ts

@@ -1,15 +1,3 @@
-import type { TabProps as MuiTabProps } from '@mui/material/Tab';
 import { type ElementType } from 'react';
-import { type WithoutEmotionSpecific } from '../../types/WithoutEmotionSpecific';
-export type TabProps<TComponent extends ElementType, TComponentProps = {}> = WithoutEmotionSpecific<MuiTabProps<TComponent, TComponentProps>> & {
-    component?: TComponent;
-    /**
-     * Число счетчика
-     */
-    count?: number;
-    /**
-     * Максимальное число которое отобразится в счетчике
-     */
-    max?: number;
-};
+import { type TabProps } from './types';
 export declare const Tab: <TComponent extends ElementType = "div", TComponentProps = {}>({ label, count, max, ...rest }: TabProps<TComponent, TComponentProps>) => import("react/jsx-runtime").JSX.Element;

package/node/components/Tabs/Tab/index.d.ts

@@ -1 +1,2 @@
 export * from './Tab';
+export type { TabProps } from './types';

package/node/components/Tabs/Tab/types.d.ts

@@ -0,0 +1,14 @@
+import type { TabProps as MuiTabProps } from '@mui/material/Tab';
+import { type ElementType } from 'react';
+import { type WithoutEmotionSpecific } from '../../types/WithoutEmotionSpecific';
+export type TabProps<TComponent extends ElementType, TComponentProps = {}> = WithoutEmotionSpecific<MuiTabProps<TComponent, TComponentProps>> & {
+    component?: TComponent;
+    /**
+     * Число счетчика
+     */
+    count?: number;
+    /**
+     * Максимальное число которое отобразится в счетчике
+     */
+    max?: number;
+};

package/node/components/Tabs/Tab/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/node/components/Tabs/Tabs.js

@@ -2,8 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tabs = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const hooks_1 = require("./hooks");
 const styles_1 = require("./styles");
 const Tabs = ({ ...tabsProps }) => {
-    return ((0, jsx_runtime_1.jsx)(styles_1.Container, { children: (0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { children: [(0, jsx_runtime_1.jsx)(styles_1.StyledTabs, { ...tabsProps }), (0, jsx_runtime_1.jsx)(styles_1.Divider, {})] }) }));
+    const { containerRef } = (0, hooks_1.useScrollToActiveTab)();
+    return ((0, jsx_runtime_1.jsx)(styles_1.Container, { children: (0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { children: [(0, jsx_runtime_1.jsx)(styles_1.StyledTabs, { ...tabsProps, ref: containerRef }), (0, jsx_runtime_1.jsx)(styles_1.Divider, {})] }) }));
 };
 exports.Tabs = Tabs;

package/node/components/Tabs/hooks/index.d.ts

@@ -0,0 +1 @@
+export * from './useScrollToActiveTab';

package/node/components/Tabs/hooks/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./useScrollToActiveTab"), exports);

package/node/components/Tabs/hooks/useScrollToActiveTab/index.d.ts

@@ -0,0 +1 @@
+export * from './useScrollToActiveTab';

package/node/components/Tabs/hooks/useScrollToActiveTab/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./useScrollToActiveTab"), exports);

package/node/components/Tabs/hooks/useScrollToActiveTab/useScrollToActiveTab.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const useScrollToActiveTab: () => {
+    containerRef: import("react").RefObject<HTMLDivElement | null>;
+};

package/node/components/Tabs/hooks/useScrollToActiveTab/useScrollToActiveTab.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useScrollToActiveTab = void 0;
+const react_1 = require("react");
+const useViewportType_1 = require("../../../useViewportType");
+const useScrollToActiveTab = () => {
+    const containerRef = (0, react_1.useRef)(null);
+    const { isMobile } = (0, useViewportType_1.useViewportType)();
+    (0, react_1.useEffect)(() => {
+        if (!containerRef.current || !isMobile) {
+            return;
+        }
+        const selectedTab = containerRef.current.querySelector('[aria-selected="true"]');
+        const runScroll = () => {
+            if (selectedTab) {
+                selectedTab.scrollIntoView({
+                    behavior: 'smooth',
+                });
+            }
+        };
+        // TODO: Убрать setTimeout после отказа от MUI в компоненте
+        setTimeout(() => {
+            runScroll();
+        }, 200);
+    }, []);
+    return { containerRef };
+};
+exports.useScrollToActiveTab = useScrollToActiveTab;

package/node/components/Tabs/styles.js

@@ -30,6 +30,20 @@ exports.Container = styled_1.styled.div `
   overflow-x: auto;
 
   width: 100%;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    /* Убираем видимую полосу прокрутки в firefox */
+    scrollbar-width: none;
+
+    overflow-x: auto;
+
+    width: 100%;
+
+    /* Убираем видимую полосу прокрутки в chrome */
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
 `;
 exports.Divider = styled_1.styled.div `
   position: relative;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astral/ui",
-  "version": "4.67.0",
+  "version": "4.68.0",
   "browser": "./index.js",
   "main": "./node/index.js",
   "dependencies": {