@alfalab/core-components 45.9.0-beta.1 → 45.9.0-beta.2

package/side-panel/modern/components/footer/Component.js

@@ -3,7 +3,7 @@ import cn from 'classnames';
 import { getDataTestId } from '../../../../shared/modern';
 import { ModalContext } from '../../Context.js';
 import { ResponsiveContext } from '../../ResponsiveContext.js';
-import { l as layoutStyles } from '../../layout.module-9d97095e.js';
+import { l as layoutStyles } from '../../layout.module-71f1888e.js';
 import '../../../../base-modal/modern';
 
 const styles = {"footer":"side-panel__footer_1cn7q","sticky":"side-panel__sticky_1cn7q","highlighted":"side-panel__highlighted_1cn7q"};

package/side-panel/modern/components/footer/Component.mobile.js

@@ -5,7 +5,7 @@ import '../../../../shared/modern';
 import '../../Context.js';
 import '../../../../base-modal/modern';
 import '../../ResponsiveContext.js';
-import '../../layout.module-9d97095e.js';
+import '../../layout.module-71f1888e.js';
 
 const styles = {"footer":"side-panel__footer_171n6","sticky":"side-panel__sticky_171n6"};
 require('./mobile.css');

package/side-panel/modern/desktop/Component.desktop.js

@@ -12,7 +12,7 @@ import '../components/content/Component.js';
 import '../../../shared/modern';
 import '../Context.js';
 import '../../../base-modal/modern';
-import '../layout.module-9d97095e.js';
+import '../layout.module-71f1888e.js';
 import '../components/footer/Component.js';
 import '../../../navigation-bar/modern';
 

package/side-panel/modern/desktop/index.js

@@ -11,7 +11,7 @@ import '../Context.js';
 import '../../../base-modal/modern';
 import '../ResponsiveContext.js';
 import '../components/controls/Component.js';
-import '../layout.module-9d97095e.js';
+import '../layout.module-71f1888e.js';
 import '../components/footer/Component.desktop.js';
 import '../components/footer/Component.js';
 import '../components/header/Component.js';

package/side-panel/modern/index.js

@@ -5,7 +5,7 @@ import '../../shared/modern';
 import './components/controls/Component.js';
 import 'classnames';
 import './ResponsiveContext.js';
-import './layout.module-9d97095e.js';
+import './layout.module-71f1888e.js';
 import './components/header/Component.js';
 import '../../navigation-bar/modern';
 import './consts.js';

package/side-panel/modern/mobile/Component.mobile.js

@@ -9,7 +9,7 @@ import { ResponsiveContext } from '../ResponsiveContext.js';
 import '../components/content/Component.js';
 import '../../../shared/modern';
 import '../Context.js';
-import '../layout.module-9d97095e.js';
+import '../layout.module-71f1888e.js';
 import '../components/footer/Component.js';
 import '../../../navigation-bar/modern';
 import '../consts.js';

package/side-panel/modern/mobile/index.js

@@ -8,7 +8,7 @@ import '../../../shared/modern';
 import '../Context.js';
 import '../ResponsiveContext.js';
 import '../components/controls/Component.js';
-import '../layout.module-9d97095e.js';
+import '../layout.module-71f1888e.js';
 import '../components/footer/Component.mobile.js';
 import '../components/footer/Component.js';
 import '../components/header/Component.js';

package/stack/component.js

@@ -1,18 +1,18 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var stackContext = require('@alfalab/stack-context');
+var context = require('./context.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 var Stack = function (_a) {
-    var children = _a.children, _b = _a.value, value = _b === void 0 ? stackContext.stackingOrder.DEFAULT : _b;
-    var previousValue = React.useContext(stackContext.StackingContext);
+    var children = _a.children, _b = _a.value, value = _b === void 0 ? context.stackingOrder.DEFAULT : _b;
+    var previousValue = React.useContext(context.StackingContext);
     var currentValue = Math.max(value, previousValue);
     var nextValue = currentValue + 1;
-    return (React__default.default.createElement(stackContext.StackingContext.Provider, { value: nextValue }, children(currentValue)));
+    return (React__default.default.createElement(context.StackingContext.Provider, { value: nextValue }, children(currentValue)));
 };
 
 exports.Stack = Stack;

package/stack/context.d.ts

@@ -0,0 +1,29 @@
+/// <reference types="react" />
+/**
+ * Набор констант для z-index соответствующих классов компонентов.
+ * Значения выбраны по приоритету.
+ */
+declare const stackingOrder: {
+    /**
+     * Для компонентов с возможностью фокуса: кнопки, поля ввода
+     */
+    FOCUSED: number;
+    /**
+     * Значение по-умолчанию
+     */
+    DEFAULT: number;
+    /**
+     * Компоненты, которые управляют своей позицией, например, поповер, тултип
+     */
+    POPOVER: number;
+    /**
+     * Для модальных окон с оверлеем
+     */
+    MODAL: number;
+    /**
+     * Для тостов и нотификаций
+     */
+    TOAST: number;
+};
+declare const StackingContext: import("react").Context<number>;
+export { stackingOrder, StackingContext };

package/stack/context.js

@@ -0,0 +1,34 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+/**
+ * Набор констант для z-index соответствующих классов компонентов.
+ * Значения выбраны по приоритету.
+ */
+var stackingOrder = {
+    /**
+     * Для компонентов с возможностью фокуса: кнопки, поля ввода
+     */
+    FOCUSED: 2,
+    /**
+     * Значение по-умолчанию
+     */
+    DEFAULT: 10,
+    /**
+     * Компоненты, которые управляют своей позицией, например, поповер, тултип
+     */
+    POPOVER: 50,
+    /**
+     * Для модальных окон с оверлеем
+     */
+    MODAL: 100,
+    /**
+     * Для тостов и нотификаций
+     */
+    TOAST: 1000,
+};
+var StackingContext = React.createContext(stackingOrder.DEFAULT);
+
+exports.StackingContext = StackingContext;
+exports.stackingOrder = stackingOrder;

package/stack/cssm/component.js

@@ -1,18 +1,18 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var stackContext = require('@alfalab/stack-context');
+var context = require('./context.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 var Stack = function (_a) {
-    var children = _a.children, _b = _a.value, value = _b === void 0 ? stackContext.stackingOrder.DEFAULT : _b;
-    var previousValue = React.useContext(stackContext.StackingContext);
+    var children = _a.children, _b = _a.value, value = _b === void 0 ? context.stackingOrder.DEFAULT : _b;
+    var previousValue = React.useContext(context.StackingContext);
     var currentValue = Math.max(value, previousValue);
     var nextValue = currentValue + 1;
-    return (React__default.default.createElement(stackContext.StackingContext.Provider, { value: nextValue }, children(currentValue)));
+    return (React__default.default.createElement(context.StackingContext.Provider, { value: nextValue }, children(currentValue)));
 };
 
 exports.Stack = Stack;

package/stack/cssm/context.d.ts

@@ -0,0 +1,29 @@
+/// <reference types="react" />
+/**
+ * Набор констант для z-index соответствующих классов компонентов.
+ * Значения выбраны по приоритету.
+ */
+declare const stackingOrder: {
+    /**
+     * Для компонентов с возможностью фокуса: кнопки, поля ввода
+     */
+    FOCUSED: number;
+    /**
+     * Значение по-умолчанию
+     */
+    DEFAULT: number;
+    /**
+     * Компоненты, которые управляют своей позицией, например, поповер, тултип
+     */
+    POPOVER: number;
+    /**
+     * Для модальных окон с оверлеем
+     */
+    MODAL: number;
+    /**
+     * Для тостов и нотификаций
+     */
+    TOAST: number;
+};
+declare const StackingContext: import("react").Context<number>;
+export { stackingOrder, StackingContext };

package/stack/cssm/context.js

@@ -0,0 +1,34 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+/**
+ * Набор констант для z-index соответствующих классов компонентов.
+ * Значения выбраны по приоритету.
+ */
+var stackingOrder = {
+    /**
+     * Для компонентов с возможностью фокуса: кнопки, поля ввода
+     */
+    FOCUSED: 2,
+    /**
+     * Значение по-умолчанию
+     */
+    DEFAULT: 10,
+    /**
+     * Компоненты, которые управляют своей позицией, например, поповер, тултип
+     */
+    POPOVER: 50,
+    /**
+     * Для модальных окон с оверлеем
+     */
+    MODAL: 100,
+    /**
+     * Для тостов и нотификаций
+     */
+    TOAST: 1000,
+};
+var StackingContext = React.createContext(stackingOrder.DEFAULT);
+
+exports.StackingContext = StackingContext;
+exports.stackingOrder = stackingOrder;

package/stack/cssm/index.d.ts

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

package/stack/cssm/index.js

@@ -1,7 +1,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var context = require('./context.js');
 var component = require('./component.js');
 
 
 
+exports.StackingContext = context.StackingContext;
+exports.stackingOrder = context.stackingOrder;
 exports.Stack = component.Stack;

package/stack/esm/component.js

@@ -1,5 +1,5 @@
 import React, { useContext } from 'react';
-import { stackingOrder, StackingContext } from '@alfalab/stack-context';
+import { stackingOrder, StackingContext } from './context.js';
 
 var Stack = function (_a) {
     var children = _a.children, _b = _a.value, value = _b === void 0 ? stackingOrder.DEFAULT : _b;

package/stack/esm/context.d.ts

@@ -0,0 +1,29 @@
+/// <reference types="react" />
+/**
+ * Набор констант для z-index соответствующих классов компонентов.
+ * Значения выбраны по приоритету.
+ */
+declare const stackingOrder: {
+    /**
+     * Для компонентов с возможностью фокуса: кнопки, поля ввода
+     */
+    FOCUSED: number;
+    /**
+     * Значение по-умолчанию
+     */
+    DEFAULT: number;
+    /**
+     * Компоненты, которые управляют своей позицией, например, поповер, тултип
+     */
+    POPOVER: number;
+    /**
+     * Для модальных окон с оверлеем
+     */
+    MODAL: number;
+    /**
+     * Для тостов и нотификаций
+     */
+    TOAST: number;
+};
+declare const StackingContext: import("react").Context<number>;
+export { stackingOrder, StackingContext };

package/stack/esm/context.js

@@ -0,0 +1,31 @@
+import { createContext } from 'react';
+
+/**
+ * Набор констант для z-index соответствующих классов компонентов.
+ * Значения выбраны по приоритету.
+ */
+var stackingOrder = {
+    /**
+     * Для компонентов с возможностью фокуса: кнопки, поля ввода
+     */
+    FOCUSED: 2,
+    /**
+     * Значение по-умолчанию
+     */
+    DEFAULT: 10,
+    /**
+     * Компоненты, которые управляют своей позицией, например, поповер, тултип
+     */
+    POPOVER: 50,
+    /**
+     * Для модальных окон с оверлеем
+     */
+    MODAL: 100,
+    /**
+     * Для тостов и нотификаций
+     */
+    TOAST: 1000,
+};
+var StackingContext = createContext(stackingOrder.DEFAULT);
+
+export { StackingContext, stackingOrder };

package/stack/esm/index.d.ts

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

package/stack/esm/index.js

@@ -1,3 +1,3 @@
+export { StackingContext, stackingOrder } from './context.js';
 export { Stack } from './component.js';
 import 'react';
-import '@alfalab/stack-context';

package/stack/index.d.ts

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

package/stack/index.js

@@ -1,7 +1,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var context = require('./context.js');
 var component = require('./component.js');
 
 
 
+exports.StackingContext = context.StackingContext;
+exports.stackingOrder = context.stackingOrder;
 exports.Stack = component.Stack;

package/stack/modern/component.js

@@ -1,5 +1,5 @@
 import React, { useContext } from 'react';
-import { StackingContext, stackingOrder } from '@alfalab/stack-context';
+import { StackingContext, stackingOrder } from './context.js';
 
 const Stack = ({ children, value = stackingOrder.DEFAULT }) => {
     const previousValue = useContext(StackingContext);

package/stack/modern/context.d.ts

@@ -0,0 +1,29 @@
+/// <reference types="react" />
+/**
+ * Набор констант для z-index соответствующих классов компонентов.
+ * Значения выбраны по приоритету.
+ */
+declare const stackingOrder: {
+    /**
+     * Для компонентов с возможностью фокуса: кнопки, поля ввода
+     */
+    FOCUSED: number;
+    /**
+     * Значение по-умолчанию
+     */
+    DEFAULT: number;
+    /**
+     * Компоненты, которые управляют своей позицией, например, поповер, тултип
+     */
+    POPOVER: number;
+    /**
+     * Для модальных окон с оверлеем
+     */
+    MODAL: number;
+    /**
+     * Для тостов и нотификаций
+     */
+    TOAST: number;
+};
+declare const StackingContext: import("react").Context<number>;
+export { stackingOrder, StackingContext };

package/stack/modern/context.js

@@ -0,0 +1,31 @@
+import { createContext } from 'react';
+
+/**
+ * Набор констант для z-index соответствующих классов компонентов.
+ * Значения выбраны по приоритету.
+ */
+const stackingOrder = {
+    /**
+     * Для компонентов с возможностью фокуса: кнопки, поля ввода
+     */
+    FOCUSED: 2,
+    /**
+     * Значение по-умолчанию
+     */
+    DEFAULT: 10,
+    /**
+     * Компоненты, которые управляют своей позицией, например, поповер, тултип
+     */
+    POPOVER: 50,
+    /**
+     * Для модальных окон с оверлеем
+     */
+    MODAL: 100,
+    /**
+     * Для тостов и нотификаций
+     */
+    TOAST: 1000,
+};
+const StackingContext = createContext(stackingOrder.DEFAULT);
+
+export { StackingContext, stackingOrder };

package/stack/modern/index.d.ts

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

package/stack/modern/index.js

@@ -1,3 +1,3 @@
+export { StackingContext, stackingOrder } from './context.js';
 export { Stack } from './component.js';
 import 'react';
-import '@alfalab/stack-context';

package/system-message/Components.responsive.js

@@ -12,7 +12,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 var SystemMessageResponsiveComponent = function (_a) {
-    var _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, defaultMatchMediaValue = _a.defaultMatchMediaValue, children = _a.children, restProps = tslib.__rest(_a, ["breakpoint", "defaultMatchMediaValue", "children"]);
+    var _b = _a.breakpoint, breakpoint = _b === void 0 ? coreComponentsShared.getComponentBreakpoint() : _b, defaultMatchMediaValue = _a.defaultMatchMediaValue, children = _a.children, restProps = tslib.__rest(_a, ["breakpoint", "defaultMatchMediaValue", "children"]);
     var query = "(min-width: ".concat(breakpoint, "px)");
     var getDefaultValue = function () { return (coreComponentsShared.isClient() ? window.matchMedia(query).matches : false); };
     var isDesktop = coreComponentsMq.useMatchMedia(query, defaultMatchMediaValue !== null && defaultMatchMediaValue !== void 0 ? defaultMatchMediaValue : getDefaultValue)[0];

package/system-message/cssm/Components.responsive.js

@@ -12,7 +12,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 var SystemMessageResponsiveComponent = function (_a) {
-    var _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, defaultMatchMediaValue = _a.defaultMatchMediaValue, children = _a.children, restProps = tslib.__rest(_a, ["breakpoint", "defaultMatchMediaValue", "children"]);
+    var _b = _a.breakpoint, breakpoint = _b === void 0 ? coreComponentsShared.getComponentBreakpoint() : _b, defaultMatchMediaValue = _a.defaultMatchMediaValue, children = _a.children, restProps = tslib.__rest(_a, ["breakpoint", "defaultMatchMediaValue", "children"]);
     var query = "(min-width: ".concat(breakpoint, "px)");
     var getDefaultValue = function () { return (coreComponentsShared.isClient() ? window.matchMedia(query).matches : false); };
     var isDesktop = coreComponentsMq.useMatchMedia(query, defaultMatchMediaValue !== null && defaultMatchMediaValue !== void 0 ? defaultMatchMediaValue : getDefaultValue)[0];

package/system-message/esm/Components.responsive.js

@@ -1,7 +1,7 @@
 import { __rest, __assign } from 'tslib';
 import React from 'react';
 import { useMatchMedia } from '../../mq/esm';
-import { isClient } from '../../shared/esm';
+import { getComponentBreakpoint, isClient } from '../../shared/esm';
 import { SystemMessage } from './Component.js';
 import { createCompound } from './utils.js';
 import 'classnames';
@@ -13,7 +13,7 @@ import './components/subtitle/Component.js';
 import './components/title/Component.js';
 
 var SystemMessageResponsiveComponent = function (_a) {
-    var _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, defaultMatchMediaValue = _a.defaultMatchMediaValue, children = _a.children, restProps = __rest(_a, ["breakpoint", "defaultMatchMediaValue", "children"]);
+    var _b = _a.breakpoint, breakpoint = _b === void 0 ? getComponentBreakpoint() : _b, defaultMatchMediaValue = _a.defaultMatchMediaValue, children = _a.children, restProps = __rest(_a, ["breakpoint", "defaultMatchMediaValue", "children"]);
     var query = "(min-width: ".concat(breakpoint, "px)");
     var getDefaultValue = function () { return (isClient() ? window.matchMedia(query).matches : false); };
     var isDesktop = useMatchMedia(query, defaultMatchMediaValue !== null && defaultMatchMediaValue !== void 0 ? defaultMatchMediaValue : getDefaultValue)[0];

package/system-message/modern/Components.responsive.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useMatchMedia } from '../../mq/modern';
-import { isClient } from '../../shared/modern';
+import { getComponentBreakpoint, isClient } from '../../shared/modern';
 import { SystemMessage } from './Component.js';
 import { createCompound } from './utils.js';
 import 'classnames';
@@ -11,7 +11,7 @@ import './components/graphic/Component.js';
 import './components/subtitle/Component.js';
 import './components/title/Component.js';
 
-const SystemMessageResponsiveComponent = ({ breakpoint = 1024, defaultMatchMediaValue, children, ...restProps }) => {
+const SystemMessageResponsiveComponent = ({ breakpoint = getComponentBreakpoint(), defaultMatchMediaValue, children, ...restProps }) => {
     const query = `(min-width: ${breakpoint}px)`;
     const getDefaultValue = () => (isClient() ? window.matchMedia(query).matches : false);
     const [isDesktop] = useMatchMedia(query, defaultMatchMediaValue ?? getDefaultValue);

package/tabs/components/primary-tablist/Component.collapsible.js

@@ -6,6 +6,7 @@ var cn = require('classnames');
 var coreComponentsBadge = require('../../../badge');
 var coreComponentsKeyboardFocusable = require('../../../keyboard-focusable');
 var desktop = require('../../../picker-button/desktop');
+var coreComponentsShared = require('../../../shared');
 var hooks_useTablistTitles = require('../../hooks/use-tablist-titles.js');
 var syntheticEvents = require('../../synthetic-events.js');
 var components_title_Component = require('../title/Component.js');
@@ -17,7 +18,7 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
 var CollapsiblePrimaryTabList = function (_a) {
-    var _b = _a.size, size = _b === void 0 ? 'm' : _b, className = _a.className, containerClassName = _a.containerClassName, _c = _a.titles, titles = _c === void 0 ? [] : _c, _d = _a.selectedId, selectedId = _d === void 0 ? titles.length ? titles[0].id : undefined : _d, collapsedTabsIds = _a.collapsedTabsIds, fullWidthScroll = _a.fullWidthScroll, onChange = _a.onChange, dataTestId = _a.dataTestId, _e = _a.breakpoint, breakpoint = _e === void 0 ? 1024 : _e, defaultMatchMediaValue = _a.defaultMatchMediaValue, textStyle = _a.textStyle;
+    var _b = _a.size, size = _b === void 0 ? 'm' : _b, className = _a.className, containerClassName = _a.containerClassName, _c = _a.titles, titles = _c === void 0 ? [] : _c, _d = _a.selectedId, selectedId = _d === void 0 ? titles.length ? titles[0].id : undefined : _d, collapsedTabsIds = _a.collapsedTabsIds, fullWidthScroll = _a.fullWidthScroll, onChange = _a.onChange, dataTestId = _a.dataTestId, _e = _a.breakpoint, breakpoint = _e === void 0 ? coreComponentsShared.getComponentBreakpoint() : _e, defaultMatchMediaValue = _a.defaultMatchMediaValue, textStyle = _a.textStyle;
     var lineRef = React.useRef(null);
     var _f = hooks_useTablistTitles.useTablistTitles({
         titles: titles,

package/tabs/components/primary-tablist/Component.responsive.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var React = require('react');
 var coreComponentsMq = require('../../../mq');
+var coreComponentsShared = require('../../../shared');
 var components_primaryTablist_Component_desktop = require('./Component.desktop.js');
 var components_primaryTablist_Component_mobile = require('./Component.mobile.js');
 
@@ -11,7 +12,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 var PrimaryTabListResponsive = function (_a) {
-    var size = _a.size, _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, fullWidthScroll = _a.fullWidthScroll, defaultMatchMediaValue = _a.defaultMatchMediaValue, restProps = tslib.__rest(_a, ["size", "breakpoint", "fullWidthScroll", "defaultMatchMediaValue"]);
+    var size = _a.size, _b = _a.breakpoint, breakpoint = _b === void 0 ? coreComponentsShared.getComponentBreakpoint() : _b, fullWidthScroll = _a.fullWidthScroll, defaultMatchMediaValue = _a.defaultMatchMediaValue, restProps = tslib.__rest(_a, ["size", "breakpoint", "fullWidthScroll", "defaultMatchMediaValue"]);
     var isDesktop = coreComponentsMq.useMatchMedia("(min-width: ".concat(breakpoint, "px)"), defaultMatchMediaValue)[0];
     return isDesktop ? (React__default.default.createElement(components_primaryTablist_Component_desktop.PrimaryTabListDesktop, tslib.__assign({ breakpoint: breakpoint, size: size, defaultMatchMediaValue: defaultMatchMediaValue }, restProps))) : (React__default.default.createElement(components_primaryTablist_Component_mobile.PrimaryTabListMobile, tslib.__assign({ breakpoint: breakpoint, defaultMatchMediaValue: defaultMatchMediaValue, fullWidthScroll: fullWidthScroll }, restProps)));
 };

package/tabs/components/secondary-tablist/Component.responsive.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var React = require('react');
 var coreComponentsMq = require('../../../mq');
+var coreComponentsShared = require('../../../shared');
 var components_secondaryTablist_Component_desktop = require('./Component.desktop.js');
 var components_secondaryTablist_Component_mobile = require('./Component.mobile.js');
 
@@ -11,7 +12,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 var SecondaryTabListResponsive = function (_a) {
-    var defaultMatchMediaValue = _a.defaultMatchMediaValue, fullWidthScroll = _a.fullWidthScroll, _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, restProps = tslib.__rest(_a, ["defaultMatchMediaValue", "fullWidthScroll", "breakpoint"]);
+    var defaultMatchMediaValue = _a.defaultMatchMediaValue, fullWidthScroll = _a.fullWidthScroll, _b = _a.breakpoint, breakpoint = _b === void 0 ? coreComponentsShared.getComponentBreakpoint() : _b, restProps = tslib.__rest(_a, ["defaultMatchMediaValue", "fullWidthScroll", "breakpoint"]);
     var isDesktop = coreComponentsMq.useMatchMedia("(min-width: ".concat(breakpoint, "px)"), defaultMatchMediaValue)[0];
     return isDesktop ? (React__default.default.createElement(components_secondaryTablist_Component_desktop.SecondaryTabListDesktop, tslib.__assign({}, restProps))) : (React__default.default.createElement(components_secondaryTablist_Component_mobile.SecondaryTabListMobile, tslib.__assign({ fullWidthScroll: fullWidthScroll }, restProps)));
 };

package/tabs/components/tabs/Component.js

@@ -1,13 +1,14 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
+var coreComponentsShared = require('../../../shared');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 var Tabs = function (_a) {
-    var TabList = _a.TabList, className = _a.className, containerClassName = _a.containerClassName, size = _a.size, defaultMatchMediaValue = _a.defaultMatchMediaValue, children = _a.children, selectedId = _a.selectedId, scrollable = _a.scrollable, collapsedTabsIds = _a.collapsedTabsIds, _b = _a.fullWidthScroll, fullWidthScroll = _b === void 0 ? false : _b, _c = _a.keepMounted, keepMounted = _c === void 0 ? false : _c, dataTestId = _a.dataTestId, onChange = _a.onChange, _d = _a.breakpoint, breakpoint = _d === void 0 ? 1024 : _d, tagShape = _a.tagShape, tagView = _a.tagView, textStyle = _a.textStyle, style = _a.style;
+    var TabList = _a.TabList, className = _a.className, containerClassName = _a.containerClassName, size = _a.size, defaultMatchMediaValue = _a.defaultMatchMediaValue, children = _a.children, selectedId = _a.selectedId, scrollable = _a.scrollable, collapsedTabsIds = _a.collapsedTabsIds, _b = _a.fullWidthScroll, fullWidthScroll = _b === void 0 ? false : _b, _c = _a.keepMounted, keepMounted = _c === void 0 ? false : _c, dataTestId = _a.dataTestId, onChange = _a.onChange, _d = _a.breakpoint, breakpoint = _d === void 0 ? coreComponentsShared.getComponentBreakpoint() : _d, tagShape = _a.tagShape, tagView = _a.tagView, textStyle = _a.textStyle, style = _a.style;
     var tabsArray = React__default.default.Children.toArray(children);
     var titles = tabsArray.map(function (_a) {
         var _b = _a.props, title = _b.title, id = _b.id, rightAddons = _b.rightAddons, disabled = _b.disabled, hidden = _b.hidden, toggleClassName = _b.toggleClassName, toggleTestId = _b.dataTestId, toggleRef = _b.toggleRef;

package/tabs/cssm/components/primary-tablist/Component.collapsible.js

@@ -6,6 +6,7 @@ var cn = require('classnames');
 var coreComponentsBadge = require('../../../../badge/cssm');
 var coreComponentsKeyboardFocusable = require('../../../../keyboard-focusable/cssm');
 var desktop = require('../../../../picker-button/cssm/desktop');
+var coreComponentsShared = require('../../../../shared/cssm');
 var hooks_useTablistTitles = require('../../hooks/use-tablist-titles.js');
 var syntheticEvents = require('../../synthetic-events.js');
 var components_title_Component = require('../title/Component.js');
@@ -18,7 +19,7 @@ var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
 
 var CollapsiblePrimaryTabList = function (_a) {
-    var _b = _a.size, size = _b === void 0 ? 'm' : _b, className = _a.className, containerClassName = _a.containerClassName, _c = _a.titles, titles = _c === void 0 ? [] : _c, _d = _a.selectedId, selectedId = _d === void 0 ? titles.length ? titles[0].id : undefined : _d, collapsedTabsIds = _a.collapsedTabsIds, fullWidthScroll = _a.fullWidthScroll, onChange = _a.onChange, dataTestId = _a.dataTestId, _e = _a.breakpoint, breakpoint = _e === void 0 ? 1024 : _e, defaultMatchMediaValue = _a.defaultMatchMediaValue, textStyle = _a.textStyle;
+    var _b = _a.size, size = _b === void 0 ? 'm' : _b, className = _a.className, containerClassName = _a.containerClassName, _c = _a.titles, titles = _c === void 0 ? [] : _c, _d = _a.selectedId, selectedId = _d === void 0 ? titles.length ? titles[0].id : undefined : _d, collapsedTabsIds = _a.collapsedTabsIds, fullWidthScroll = _a.fullWidthScroll, onChange = _a.onChange, dataTestId = _a.dataTestId, _e = _a.breakpoint, breakpoint = _e === void 0 ? coreComponentsShared.getComponentBreakpoint() : _e, defaultMatchMediaValue = _a.defaultMatchMediaValue, textStyle = _a.textStyle;
     var lineRef = React.useRef(null);
     var _f = hooks_useTablistTitles.useTablistTitles({
         titles: titles,

package/tabs/cssm/components/primary-tablist/Component.responsive.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var React = require('react');
 var coreComponentsMq = require('../../../../mq/cssm');
+var coreComponentsShared = require('../../../../shared/cssm');
 var components_primaryTablist_Component_desktop = require('./Component.desktop.js');
 var components_primaryTablist_Component_mobile = require('./Component.mobile.js');
 
@@ -11,7 +12,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 var PrimaryTabListResponsive = function (_a) {
-    var size = _a.size, _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, fullWidthScroll = _a.fullWidthScroll, defaultMatchMediaValue = _a.defaultMatchMediaValue, restProps = tslib.__rest(_a, ["size", "breakpoint", "fullWidthScroll", "defaultMatchMediaValue"]);
+    var size = _a.size, _b = _a.breakpoint, breakpoint = _b === void 0 ? coreComponentsShared.getComponentBreakpoint() : _b, fullWidthScroll = _a.fullWidthScroll, defaultMatchMediaValue = _a.defaultMatchMediaValue, restProps = tslib.__rest(_a, ["size", "breakpoint", "fullWidthScroll", "defaultMatchMediaValue"]);
     var isDesktop = coreComponentsMq.useMatchMedia("(min-width: ".concat(breakpoint, "px)"), defaultMatchMediaValue)[0];
     return isDesktop ? (React__default.default.createElement(components_primaryTablist_Component_desktop.PrimaryTabListDesktop, tslib.__assign({ breakpoint: breakpoint, size: size, defaultMatchMediaValue: defaultMatchMediaValue }, restProps))) : (React__default.default.createElement(components_primaryTablist_Component_mobile.PrimaryTabListMobile, tslib.__assign({ breakpoint: breakpoint, defaultMatchMediaValue: defaultMatchMediaValue, fullWidthScroll: fullWidthScroll }, restProps)));
 };