@sprinklrjs/spaceweb 10.1.0

package/switch/__test__/switch.spec.js

@@ -0,0 +1,96 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("@testing-library/react");
+require("@testing-library/jest-dom/extend-expect");
+var index_1 = require("../index");
+var test_provider_1 = require("../../test-utils/test-provider");
+var enzyme_1 = require("enzyme");
+var renderSwitch = function (_a) {
+    var _b = _a.size, size = _b === void 0 ? 'md' : _b, _c = _a.intent, intent = _c === void 0 ? 'default' : _c, rest = (0, tslib_1.__rest)(_a, ["size", "intent"]);
+    return (0, react_1.render)((0, jsx_runtime_1.jsx)(test_provider_1.TestProvider, { children: (0, jsx_runtime_1.jsx)(index_1.Switch, (0, tslib_1.__assign)({ size: size, intent: intent }, rest, { children: "Switch Label" }), void 0) }, void 0));
+};
+var getRenderedSwitch = function () { return window.document.body.querySelectorAll('[data-baseweb="checkbox"]')[0]; };
+describe('Switch', function () {
+    beforeAll(test_provider_1.setupBreakpoints);
+    afterEach(react_1.cleanup);
+    test('attached on click', function () {
+        var mockFn = jest.fn();
+        var getAllByRole = renderSwitch({ onChange: mockFn }).getAllByRole;
+        var checkboxElement = getAllByRole('checkbox')[0];
+        react_1.fireEvent.click(checkboxElement);
+        expect(mockFn).toHaveBeenCalled();
+    });
+    test('on click, aria-checked sets to false when checked', function () { return (0, tslib_1.__awaiter)(void 0, void 0, void 0, function () {
+        var mockFn, getAllByRole, checkboxElement;
+        return (0, tslib_1.__generator)(this, function (_a) {
+            mockFn = jest.fn();
+            getAllByRole = renderSwitch({ onChange: mockFn, checked: false }).getAllByRole;
+            checkboxElement = getAllByRole('checkbox')[0];
+            expect(checkboxElement.getAttribute('aria-checked')).toBe('false');
+            return [2 /*return*/];
+        });
+    }); });
+    test('on click, aria-checked sets to true when not checked', function () { return (0, tslib_1.__awaiter)(void 0, void 0, void 0, function () {
+        var mockFn, getAllByRole, checkboxElement;
+        return (0, tslib_1.__generator)(this, function (_a) {
+            mockFn = jest.fn();
+            getAllByRole = renderSwitch({ onChange: mockFn, checked: true }).getAllByRole;
+            checkboxElement = getAllByRole('checkbox')[0];
+            expect(checkboxElement.getAttribute('aria-checked')).toBe('true');
+            return [2 /*return*/];
+        });
+    }); });
+    describe('different sizes', function () {
+        var mockFn = jest.fn();
+        afterEach(react_1.cleanup);
+        var px2rem = (0, test_provider_1.getTestStyleUtils)().px2rem;
+        test('ToggleTrack correct dimensions in "sm" size, ', function () {
+            renderSwitch({ size: 'sm', onChange: mockFn });
+            var element = getRenderedSwitch();
+            //first element always be toggleTrack
+            var css1 = (0, test_provider_1.getCSSFromEl)(element.firstChild);
+            expect(css1.height).toEqual(px2rem(14));
+            expect(css1.width).toEqual(px2rem(24));
+        });
+        test('ToggleTrack correct dimensions in "md" size', function () {
+            renderSwitch({ size: 'md' });
+            var element = getRenderedSwitch();
+            var css1 = (0, test_provider_1.getCSSFromEl)(element.firstChild);
+            expect(css1.height).toEqual(px2rem(16));
+            expect(css1.width).toEqual(px2rem(28));
+            expect(css1.borderLeftWidth).toEqual(px2rem(1));
+            expect(css1.borderTopWidth).toEqual(px2rem(1));
+            expect(css1.borderRightWidth).toEqual(px2rem(1));
+            expect(css1.borderBottomWidth).toEqual(px2rem(1));
+        });
+        test('ToggleTrack correct dimensions in "lg" size', function () {
+            renderSwitch({ size: 'lg' });
+            var element = getRenderedSwitch();
+            var css1 = (0, test_provider_1.getCSSFromEl)(element.firstChild);
+            expect(css1.height).toEqual(px2rem(20));
+            expect(css1.width).toEqual(px2rem(36));
+            expect(css1.borderTopLeftRadius).toEqual(px2rem(27));
+            expect(css1.borderTopRightRadius).toEqual(px2rem(27));
+            expect(css1.borderBottomLeftRadius).toEqual(px2rem(27));
+            expect(css1.borderBottomRightRadius).toEqual(px2rem(27));
+        });
+    });
+    describe('Props', function () {
+        jest.mock('../index');
+        var forwardProps = [
+            ['checked', true],
+            ['disabled', true],
+            ['intent', true],
+            ['size', 'lg'],
+        ];
+        describe.each(forwardProps)('when `%s` prop is set', function (prop, exp) {
+            test('prop gets passed down', function () {
+                var _a;
+                var wrapper = (0, enzyme_1.mount)((0, jsx_runtime_1.jsx)(test_provider_1.TestProvider, { children: (0, jsx_runtime_1.jsx)(index_1.Switch, (0, tslib_1.__assign)({}, (_a = {}, _a[prop] = exp, _a)), void 0) }, void 0));
+                expect(wrapper.find('Switch').prop(prop)).toEqual(exp);
+            });
+        });
+    });
+});

package/switch/basewebAdapter.d.ts

@@ -0,0 +1,5 @@
+import { OutlineProps } from '../helpers/commonStyles';
+import { StatefulSwitchProps, SwitchProps } from './types';
+declare type AdaptProps = SwitchProps | StatefulSwitchProps;
+export declare const useSwitchAdapter: (props: AdaptProps) => Omit<AdaptProps, keyof OutlineProps>;
+export {};

package/switch/basewebAdapter.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSwitchAdapter = void 0;
+var tslib_1 = require("tslib");
+var overrides_1 = require("../overrides");
+var styled_components_1 = require("./styled-components");
+var useSwitchAdapter = function (props) {
+    var overrides = props.overrides, $outlineStyle = props.$outlineStyle, $outlineColor = props.$outlineColor, $outlineOffset = props.$outlineOffset, $outlineWidth = props.$outlineWidth, restProps = (0, tslib_1.__rest)(props, ["overrides", "$outlineStyle", "$outlineColor", "$outlineOffset", "$outlineWidth"]);
+    var mergedOverrides = (0, overrides_1.mergeOverrides)({
+        Toggle: {
+            style: styled_components_1.getToggleOverrides,
+        },
+        ToggleTrack: {
+            style: styled_components_1.getToggleTrackOverrides,
+        },
+        Label: {
+            style: styled_components_1.getLabelOverrides,
+        },
+    }, overrides);
+    return (0, tslib_1.__assign)((0, tslib_1.__assign)({}, restProps), { overrides: mergedOverrides });
+};
+exports.useSwitchAdapter = useSwitchAdapter;

package/switch/index.d.ts

@@ -0,0 +1,3 @@
+export { Switch, StatefulSwitch } from './switch';
+export { StatefulContainer, StyledRoot, StyledLabel, StyledInput, StyledToggle, StyledToggleTrack, } from 'baseui/checkbox';
+export * from './types';

package/switch/index.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledToggleTrack = exports.StyledToggle = exports.StyledInput = exports.StyledLabel = exports.StyledRoot = exports.StatefulContainer = exports.StatefulSwitch = exports.Switch = void 0;
+var tslib_1 = require("tslib");
+var switch_1 = require("./switch");
+Object.defineProperty(exports, "Switch", { enumerable: true, get: function () { return switch_1.Switch; } });
+Object.defineProperty(exports, "StatefulSwitch", { enumerable: true, get: function () { return switch_1.StatefulSwitch; } });
+var checkbox_1 = require("baseui/checkbox");
+Object.defineProperty(exports, "StatefulContainer", { enumerable: true, get: function () { return checkbox_1.StatefulContainer; } });
+Object.defineProperty(exports, "StyledRoot", { enumerable: true, get: function () { return checkbox_1.StyledRoot; } });
+Object.defineProperty(exports, "StyledLabel", { enumerable: true, get: function () { return checkbox_1.StyledLabel; } });
+Object.defineProperty(exports, "StyledInput", { enumerable: true, get: function () { return checkbox_1.StyledInput; } });
+Object.defineProperty(exports, "StyledToggle", { enumerable: true, get: function () { return checkbox_1.StyledToggle; } });
+Object.defineProperty(exports, "StyledToggleTrack", { enumerable: true, get: function () { return checkbox_1.StyledToggleTrack; } });
+(0, tslib_1.__exportStar)(require("./types"), exports);

package/switch/package.json

@@ -0,0 +1,4 @@
+{
+  "sideEffects": false,
+  "module": "../esm/switch/index.js"
+}

package/switch/styled-components.d.ts

@@ -0,0 +1,5 @@
+import { StyleFn } from '../types';
+import { SharedProps } from './types';
+export declare const getToggleTrackOverrides: StyleFn<SharedProps>;
+export declare const getToggleOverrides: StyleFn<SharedProps>;
+export declare const getLabelOverrides: StyleFn<SharedProps>;

package/switch/styled-components.js

@@ -0,0 +1,88 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getLabelOverrides = exports.getToggleOverrides = exports.getToggleTrackOverrides = void 0;
+var tslib_1 = require("tslib");
+var helpers_1 = require("../helpers");
+var longHandHelpers_1 = require("../helpers/longHandHelpers");
+var intentHelper_1 = require("../helpers/intentHelper");
+var commonStyles_1 = require("../helpers/commonStyles");
+var getTrackBackgroundColor = function (utils, props) {
+    var theme = utils.theme;
+    var $disabled = props.$disabled, $checked = props.$checked, $isFocusVisible = props.$isFocusVisible, $isHovered = props.$isHovered;
+    if ($disabled) {
+        if ($checked) {
+            return (0, helpers_1.hex2rgb)((0, intentHelper_1.intentColor)(utils, props), '0.5');
+        }
+        return theme.spr.ui05;
+    }
+    if ($checked) {
+        return (0, intentHelper_1.intentColor)(utils, props);
+    }
+    if ($isHovered || $isFocusVisible) {
+        return (0, helpers_1.hex2rgb)(theme.spr.interactive01, '0.2');
+    }
+    return theme.spr.ui03;
+};
+var getToggleTrackOverrides = function (utils, props) {
+    var px2rem = utils.px2rem;
+    var $size = props.$size, $isFocusVisible = props.$isFocusVisible;
+    var styles = (0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({ boxSizing: 'border-box', height: px2rem(16), width: px2rem(28), backgroundColor: getTrackBackgroundColor(utils, props) }, (0, longHandHelpers_1.borderRadius)(px2rem(27))), (0, longHandHelpers_1.margin)(0)), ($isFocusVisible
+        ? (0, tslib_1.__assign)({}, (0, commonStyles_1.getOutlineStyles)(utils, {
+            $outlineOffset: '2px',
+            $outlineWidth: '2px',
+        })) : {}));
+    switch ($size) {
+        case 'lg':
+            styles.height = px2rem(20);
+            styles.width = px2rem(36);
+            break;
+        case 'sm':
+            styles.height = px2rem(14);
+            styles.width = px2rem(24);
+            break;
+        default:
+            break;
+    }
+    return styles;
+};
+exports.getToggleTrackOverrides = getToggleTrackOverrides;
+var getToggleOverrides = function (utils, props) {
+    var px2rem = utils.px2rem, direction = utils.direction, theme = utils.theme;
+    var $size = props.$size, $checked = props.$checked, $disabled = props.$disabled, $isFocusVisible = props.$isFocusVisible;
+    var styles = (0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({ boxSizing: 'border-box', backgroundColor: $disabled ? theme.spr.ui03 : theme.spr.ui01, alignItems: 'center', display: 'flex', height: px2rem(12), width: px2rem(12) }, (0, longHandHelpers_1.margin)(px2rem(2))), (0, longHandHelpers_1.borderRadius)('50%')), { transform: $checked ? "translateX(".concat(direction === 'rtl' ? '-100%' : '100%', ")") : '', transition: 'transform 200ms' }), ($isFocusVisible
+        ? {
+            boxShadow: 'none',
+        }
+        : {}));
+    switch ($size) {
+        case 'lg':
+            styles.height = styles.width = px2rem(16);
+            break;
+        case 'sm':
+            styles.height = styles.width = px2rem(10);
+            break;
+        default:
+            break;
+    }
+    return styles;
+};
+exports.getToggleOverrides = getToggleOverrides;
+var getLabelOverrides = function (_a, _b) {
+    var px2rem = _a.px2rem, theme = _a.theme;
+    var $disabled = _b.$disabled, $size = _b.$size;
+    var styles = {
+        fontSize: px2rem(13),
+        color: $disabled ? theme.spr.text02 : theme.spr.text01,
+        paddingLeft: px2rem(8),
+        wordBreak: 'break-word',
+    };
+    if ($size === 'lg') {
+        styles.fontSize = px2rem(14);
+        styles.paddingLeft = px2rem(10);
+    }
+    if ($size === 'sm') {
+        styles.fontSize = px2rem(12);
+    }
+    return styles;
+};
+exports.getLabelOverrides = getLabelOverrides;

package/switch/switch.d.ts

@@ -0,0 +1,10 @@
+import { ReactElement } from 'react';
+import { SwitchProps, StatefulSwitchProps } from './types';
+export declare const Switch: {
+    (props: SwitchProps): ReactElement;
+    displayName: string;
+};
+export declare const StatefulSwitch: {
+    (props: StatefulSwitchProps): ReactElement;
+    displayName: string;
+};

package/switch/switch.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StatefulSwitch = exports.Switch = void 0;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var checkbox_1 = require("../checkbox");
+var checkbox_2 = require("baseui/checkbox");
+var basewebAdapter_1 = require("./basewebAdapter");
+var Switch = function (props) {
+    var _a = (0, basewebAdapter_1.useSwitchAdapter)(props), overrides = _a.overrides, restProps = (0, tslib_1.__rest)(_a, ["overrides"]);
+    return ((0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, (0, tslib_1.__assign)({ overrides: overrides, "data-spaceweb": "Switch", checkmarkType: checkbox_2.STYLE_TYPE.toggle_round, labelPlacement: "right" }, restProps), void 0));
+};
+exports.Switch = Switch;
+exports.Switch.displayName = 'Switch';
+var StatefulSwitch = function (props) {
+    var _a = (0, basewebAdapter_1.useSwitchAdapter)(props), overrides = _a.overrides, restProps = (0, tslib_1.__rest)(_a, ["overrides"]);
+    return ((0, jsx_runtime_1.jsx)(checkbox_1.StatefulCheckbox, (0, tslib_1.__assign)({ overrides: overrides, "data-spaceweb": "StatefulSwitch", checkmarkType: checkbox_2.STYLE_TYPE.toggle_round, labelPlacement: "right" }, restProps), void 0));
+};
+exports.StatefulSwitch = StatefulSwitch;
+exports.StatefulSwitch.displayName = 'StatefulSwitch';

package/switch/types.d.ts

@@ -0,0 +1,28 @@
+import { CheckboxProps as BaseSwitchProps, StatefulCheckboxProps as BaseStatefulSwitchProps } from 'baseui/checkbox';
+import { SharedProps as BaseSharedProps } from 'baseui/input';
+import { OutlineProps } from '../helpers/commonStyles';
+import { Override } from '../overrides';
+import { Intent, SpacewebComponentProps } from '../types';
+export declare type SwitchSize = 'sm' | 'md' | 'lg';
+export declare type LabelPlacement = 'left' | 'right' | 'top' | 'bottom';
+export declare type SharedProps = BaseSharedProps & {
+    $checked: boolean;
+    $intent: Intent;
+    $isFocusVisible: boolean;
+    $isHovered: boolean;
+    $size: SwitchSize;
+};
+export declare type SwitchProps = SpacewebComponentProps<Omit<BaseSwitchProps, 'overrides' | 'size' | 'intent'>> & {
+    size?: SwitchSize;
+    intent?: Intent;
+    overrides?: {
+        [key in keyof BaseSwitchProps['overrides']]?: Override<SharedProps>;
+    };
+} & OutlineProps;
+export declare type StatefulSwitchProps = SpacewebComponentProps<Omit<BaseStatefulSwitchProps, 'overrides' | 'size' | 'intent'>> & {
+    size?: SwitchSize;
+    intent?: Intent;
+    overrides?: {
+        [key in keyof BaseStatefulSwitchProps['overrides']]?: Override<SharedProps>;
+    };
+} & OutlineProps;

package/switch/types.js

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

package/tabs/contexts.d.ts

@@ -0,0 +1,12 @@
+import { Key } from 'react';
+import { ChangEventHandler, TabListProps } from './types';
+export declare const StatefulTabsContext: import("react").Context<{
+    activeTabId: Key;
+    onChange: ChangEventHandler;
+}>;
+export declare const useStatefulTabsContext: () => {
+    activeTabId: Key;
+    onChange: ChangEventHandler;
+};
+export declare const TabListContext: import("react").Context<Pick<TabListProps, "position" | "overrides" | "onChange" | "variant" | "activeTabId">>;
+export declare const useTabListContext: () => Pick<TabListProps, "position" | "overrides" | "onChange" | "variant" | "activeTabId">;

package/tabs/contexts.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTabListContext = exports.TabListContext = exports.useStatefulTabsContext = exports.StatefulTabsContext = void 0;
+var tslib_1 = require("tslib");
+var noop_1 = (0, tslib_1.__importDefault)(require("lodash/noop"));
+var react_1 = require("react");
+exports.StatefulTabsContext = (0, react_1.createContext)({
+    activeTabId: '0',
+    onChange: noop_1.default,
+});
+exports.StatefulTabsContext.displayName = 'StatefulTabsContext';
+var useStatefulTabsContext = function () { return (0, react_1.useContext)(exports.StatefulTabsContext); };
+exports.useStatefulTabsContext = useStatefulTabsContext;
+exports.TabListContext = (0, react_1.createContext)({});
+exports.TabListContext.displayName = 'TabListContext';
+var useTabListContext = function () { return (0, react_1.useContext)(exports.TabListContext); };
+exports.useTabListContext = useTabListContext;

package/tabs/helpers.d.ts

@@ -0,0 +1,5 @@
+import { StyleObject } from '../types';
+import { position } from './types';
+export declare const resetStyles: () => StyleObject;
+export declare const baseTabClasses = "spr-text-01 cursor-pointer border-solid border-t-0 border-l-0 border-r-0 border-b-0 hover:spr-text-04 focus-visible:spr-text-04 focus-visible:-outline-offset-2";
+export declare const isVertical: ($position?: position | undefined) => boolean;

package/tabs/helpers.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isVertical = exports.baseTabClasses = exports.resetStyles = void 0;
+var resetStyles = function () { return ({
+    borderColor: 'transparent',
+    outlineStyle: 'none',
+}); };
+exports.resetStyles = resetStyles;
+exports.baseTabClasses = 'spr-text-01 cursor-pointer border-solid border-t-0 border-l-0 border-r-0 border-b-0 hover:spr-text-04 focus-visible:spr-text-04 focus-visible:-outline-offset-2';
+var isVertical = function ($position) { return $position === 'left' || $position === 'right'; };
+exports.isVertical = isVertical;

package/tabs/index.d.ts

@@ -0,0 +1,5 @@
+export { TabList } from './tab-list';
+export { default as Tab } from './tab';
+export { default as TabsPanel } from './tabs-panel';
+export { default as StatefulTabs } from './stateful-tabs';
+export * from './types';

package/tabs/index.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StatefulTabs = exports.TabsPanel = exports.Tab = exports.TabList = void 0;
+var tslib_1 = require("tslib");
+var tab_list_1 = require("./tab-list");
+Object.defineProperty(exports, "TabList", { enumerable: true, get: function () { return tab_list_1.TabList; } });
+var tab_1 = require("./tab");
+Object.defineProperty(exports, "Tab", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(tab_1).default; } });
+var tabs_panel_1 = require("./tabs-panel");
+Object.defineProperty(exports, "TabsPanel", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(tabs_panel_1).default; } });
+var stateful_tabs_1 = require("./stateful-tabs");
+Object.defineProperty(exports, "StatefulTabs", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(stateful_tabs_1).default; } });
+(0, tslib_1.__exportStar)(require("./types"), exports);

package/tabs/package.json

@@ -0,0 +1,4 @@
+{
+  "sideEffects": false,
+  "module": "../esm/tabs/index.js"
+}

package/tabs/stateful-tabs.d.ts

@@ -0,0 +1,8 @@
+import { PropsWithChildren, ReactElement } from 'react';
+import { StatefulTabProps } from './types';
+declare const StatefulTabs: {
+    ({ defaultActiveTabId, children, onChange, }: PropsWithChildren<StatefulTabProps>): ReactElement;
+    displayName: string;
+    defaultProps: Partial<StatefulTabProps>;
+};
+export default StatefulTabs;

package/tabs/stateful-tabs.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var contexts_1 = require("./contexts");
+var StatefulTabs = function (_a) {
+    var defaultActiveTabId = _a.defaultActiveTabId, children = _a.children, onChange = _a.onChange;
+    var _b = (0, tslib_1.__read)((0, react_1.useState)(defaultActiveTabId || '0'), 2), activeTabId = _b[0], setActiveTabId = _b[1];
+    var handleTabChange = (0, react_1.useCallback)(function (_a) {
+        var updatedActiveTabId = _a.activeTabId;
+        setActiveTabId(updatedActiveTabId);
+        onChange === null || onChange === void 0 ? void 0 : onChange({ activeTabId: updatedActiveTabId });
+    }, [setActiveTabId, onChange]);
+    var memoizedValue = (0, react_1.useMemo)(function () { return ({ activeTabId: activeTabId, onChange: handleTabChange }); }, [activeTabId, handleTabChange]);
+    return (0, jsx_runtime_1.jsx)(contexts_1.StatefulTabsContext.Provider, (0, tslib_1.__assign)({ value: memoizedValue }, { children: children }), void 0);
+};
+StatefulTabs.displayName = 'StatefulTabs';
+StatefulTabs.defaultProps = {
+    defaultActiveTabId: '0',
+};
+exports.default = StatefulTabs;

package/tabs/styled-components.d.ts

@@ -0,0 +1,10 @@
+import { ReactElement, PropsWithChildren } from 'react';
+import { SharedPropsTabs, SharedPropsTab } from './types';
+import { StyleFn } from '../types';
+export declare const Root: (props: PropsWithChildren<SharedPropsTabs>) => ReactElement;
+export declare const tabsStyles: (utils: any, { $variant, $position }: {
+    $variant: any;
+    $position: any;
+}) => string;
+export declare const tabStyle: StyleFn<SharedPropsTab>;
+export declare const StyledTabsPanel: import("../style/styled").StyledComponent;

package/tabs/styled-components.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledTabsPanel = exports.tabStyle = exports.tabsStyles = exports.Root = void 0;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var box_1 = require("../box");
+var classNames_1 = (0, tslib_1.__importDefault)(require("../classNames"));
+var helpers_1 = require("./helpers");
+var style_1 = require("../style");
+var Root = function (props) {
+    var className = (0, classNames_1.default)('flex', {
+        'flex-col': props.$position === 'top',
+        'flex-row-reverse': props.$position === 'right',
+    });
+    return ((0, jsx_runtime_1.jsx)(box_1.Box, (0, tslib_1.__assign)({}, props, { className: className }, { children: props.children }), void 0));
+};
+exports.Root = Root;
+var tabsStyles = function (utils, _a) {
+    var $variant = _a.$variant, $position = _a.$position;
+    return $variant === 'default'
+        ? (0, classNames_1.default)('flex border-t-0 border-l-0 border-r-0 border-b-0', {
+            'flex-col': (0, helpers_1.isVertical)($position),
+        })
+        : (0, classNames_1.default)('flex border-t-0 border-l-0 border-r-0 border-b-0 spr-ui-02 spr-border-03 border-solid', {
+            'border-t border-b': $position === 'top',
+            'flex-col border-l border-r': (0, helpers_1.isVertical)($position),
+        });
+};
+exports.tabsStyles = tabsStyles;
+var tabStyle = function (_a, _b) {
+    var theme = _a.theme, getStyle = _a.getStyle;
+    var $variant = _b.$variant, $selected = _b.$selected, $position = _b.$position;
+    if ($variant === 'default') {
+        var defaultTheme = theme.tab.variantDefault;
+        return (0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({}, getStyle((0, classNames_1.default)(helpers_1.baseTabClasses, 'px-2 py-2 focus-visible:rounded-6', {
+            'spr-text-04': $selected,
+        }))), defaultTheme.fontStyles), ($selected ? defaultTheme.selectedStyles : undefined)), ($position === 'top' ? defaultTheme.positionTopStyles : undefined)), ($position === 'left' ? defaultTheme.positionLeftStyles : undefined)), ($position === 'right' ? defaultTheme.positionRightStyles : undefined));
+    }
+    return (0, classNames_1.default)(helpers_1.baseTabClasses, 'typography-l1 px-8 py-2 spr-border-02', {
+        'spr-text-04 spr-ui-01': $selected,
+        'border-r': $position === 'top',
+        '-mb-px': $selected && $position === 'top',
+        'border-b': (0, helpers_1.isVertical)($position),
+        '-mr-px': $selected && $position === 'left',
+        '-ml-px': $selected && $position === 'right',
+    });
+};
+exports.tabStyle = tabStyle;
+exports.StyledTabsPanel = (0, style_1.styled)('div');

package/tabs/tab-list.d.ts

@@ -0,0 +1,7 @@
+import { ReactElement } from 'react';
+import { TabListProps } from './types';
+export declare const TabList: {
+    (props: TabListProps): ReactElement;
+    displayName: string;
+    defaultProps: Partial<TabListProps>;
+};

package/tabs/tab-list.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TabList = void 0;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var overrides_1 = require("../overrides");
+var useTabsKeyboardNavigation_1 = require("../hooks/useTabsKeyboardNavigation");
+var styled_components_1 = require("./styled-components");
+var helpers_1 = require("../helpers");
+var box_1 = require("../box");
+var contexts_1 = require("./contexts");
+var TabList = function (props) {
+    var _a;
+    var variant = props.variant, position = props.position, activeTabId = props.activeTabId, overrides = props.overrides, onChange = props.onChange, className = props.className, activateOnFocus = props.activateOnFocus, restProps = (0, tslib_1.__rest)(props, ["variant", "position", "activeTabId", "overrides", "onChange", "className", "activateOnFocus"]);
+    var _b = (0, tslib_1.__read)((0, overrides_1.useOverrides)((_a = props.overrides) === null || _a === void 0 ? void 0 : _a.TabList, box_1.Box), 2), TabListComp = _b[0], tabListProps = _b[1];
+    var sharedProps = (0, helpers_1.add$props)({ variant: variant, position: position });
+    var contextValue = (0, react_1.useMemo)(function () { return ({ variant: variant, position: position, activeTabId: activeTabId, overrides: overrides, onChange: onChange }); }, [variant, position, activeTabId, overrides, onChange]);
+    var statefulTabsContext = (0, contexts_1.useStatefulTabsContext)();
+    var _c = (0, useTabsKeyboardNavigation_1.useTabsKeyboardNavigation)({
+        activateOnFocus: activateOnFocus,
+        layout: position === 'left' || position === 'right' ? 'vertical' : 'horizontal',
+    }), parentElementRef = _c.parentElementRef, handleKeyDown = _c.onKeyDown;
+    var renderTabChild = (0, react_1.useCallback)(function (child, index) {
+        // TODO: remove index as tabId fallback and make tabId mandatory in next release
+        var tabId = child.props.tabId || String(index);
+        var onKeyDown = function (event) {
+            var _a, _b;
+            handleKeyDown(event);
+            (_b = (_a = child.props).onKeyDown) === null || _b === void 0 ? void 0 : _b.call(_a, event);
+        };
+        return (0, react_1.isValidElement)(child)
+            ? (0, react_1.cloneElement)(child, {
+                tabId: tabId,
+                onKeyDown: onKeyDown,
+                tabIndex: tabId === (activeTabId !== null && activeTabId !== void 0 ? activeTabId : statefulTabsContext.activeTabId) ? 0 : -1,
+            })
+            : null;
+    }, [handleKeyDown, activeTabId, statefulTabsContext]);
+    return ((0, jsx_runtime_1.jsx)(contexts_1.TabListContext.Provider, (0, tslib_1.__assign)({ value: contextValue }, { children: (0, jsx_runtime_1.jsx)(TabListComp, (0, tslib_1.__assign)({ "data-spaceweb": "tablist", role: "tablist", ref: parentElementRef }, restProps, sharedProps, tabListProps, { className: [styled_components_1.tabsStyles, className] }, { children: react_1.Children.map(props.children, renderTabChild) }), void 0) }), void 0));
+};
+exports.TabList = TabList;
+exports.TabList.displayName = 'TabList';
+exports.TabList.defaultProps = {
+    position: 'top',
+    variant: 'default',
+};

package/tabs/tab.d.ts

@@ -0,0 +1,7 @@
+import { ReactElement } from 'react';
+import { TabProps } from './types';
+declare const _default: import("react").MemoExoticComponent<{
+    (props: TabProps): ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    displayName: string;
+}>;
+export default _default;

package/tabs/tab.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var base_button_1 = require("../base-button");
+var helpers_1 = require("../helpers");
+var overrides_1 = require("../overrides");
+var styled_components_1 = require("./styled-components");
+var helpers_2 = require("./helpers");
+var contexts_1 = require("./contexts");
+var Tab = function (props) {
+    var _a, _b;
+    var variant = props.variant, position = props.position, selected = props.selected, overrides = props.overrides, _c = props.className, className = _c === void 0 ? '' : _c, tabId = props.tabId, onClick = props.onClick, restProps = (0, tslib_1.__rest)(props, ["variant", "position", "selected", "overrides", "className", "tabId", "onClick"]);
+    var tabListContext = (0, contexts_1.useTabListContext)();
+    var statefulTabsContext = (0, contexts_1.useStatefulTabsContext)();
+    var activeTabId = (_a = tabListContext.activeTabId) !== null && _a !== void 0 ? _a : statefulTabsContext.activeTabId, _selected = selected !== null && selected !== void 0 ? selected : activeTabId === tabId, onChange = (_b = tabListContext.onChange) !== null && _b !== void 0 ? _b : statefulTabsContext.onChange;
+    var sharedProps = (0, helpers_1.add$props)({
+        variant: variant !== null && variant !== void 0 ? variant : tabListContext.variant,
+        position: position !== null && position !== void 0 ? position : tabListContext.position,
+        selected: _selected,
+    });
+    var mergedOverrides = (0, react_1.useMemo)(function () { return (0, overrides_1.mergeOverrides)(tabListContext.overrides || {}, overrides); }, [
+        tabListContext.overrides,
+        overrides,
+    ]);
+    var _d = (0, tslib_1.__read)((0, overrides_1.useOverrides)(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.Tab, base_button_1.BaseButton), 2), TabComp = _d[0], tabProps = _d[1];
+    var handleClick = (0, react_1.useCallback)(function (e) {
+        onChange === null || onChange === void 0 ? void 0 : onChange({ activeTabId: tabId });
+        onClick === null || onClick === void 0 ? void 0 : onClick(e);
+    }, [onChange, onClick, tabId]);
+    var _className = (0, react_1.useMemo)(function () { return [helpers_2.resetStyles, styled_components_1.tabStyle, className]; }, [helpers_2.resetStyles, styled_components_1.tabStyle, className]);
+    return ((0, jsx_runtime_1.jsx)(TabComp, (0, tslib_1.__assign)({ "data-spaceweb": "tab", role: "tab", "aria-selected": _selected, 
+        // id should not be passed to DOM.
+        id: String(tabId) }, restProps, tabProps, sharedProps, { className: _className, onClick: handleClick }), void 0));
+};
+Tab.displayName = 'Tab';
+exports.default = (0, react_1.memo)(Tab);

package/tabs/tabs-panel.d.ts

@@ -0,0 +1,7 @@
+import { ReactElement } from 'react';
+import { TabsPanelProps } from './types';
+declare const TabsPanel: {
+    (props: TabsPanelProps): ReactElement | null;
+    displayName: string;
+};
+export default TabsPanel;

package/tabs/tabs-panel.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var styled_components_1 = require("./styled-components");
+var overrides_1 = require("../overrides");
+var helpers_1 = require("../helpers");
+var contexts_1 = require("./contexts");
+var TabsPanel = function (props) {
+    var overrides = props.overrides, selected = props.selected, tabId = props.tabId, restProps = (0, tslib_1.__rest)(props, ["overrides", "selected", "tabId"]);
+    var sharedProps = (0, helpers_1.add$props)({ selected: selected });
+    var tabsContext = (0, contexts_1.useStatefulTabsContext)();
+    var _a = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.TabsPanel, styled_components_1.StyledTabsPanel), 2), TabsPanelComp = _a[0], tabsPanelProps = _a[1];
+    if (!tabId || tabId === tabsContext.activeTabId) {
+        return ((0, jsx_runtime_1.jsx)(TabsPanelComp, (0, tslib_1.__assign)({ "aria-labelledby": tabsContext.activeTabId, "data-spaceweb": "tabpanel", role: "tabpanel" }, restProps, tabsPanelProps, sharedProps), void 0));
+    }
+    return null;
+};
+TabsPanel.displayName = 'TabsPanel';
+exports.default = TabsPanel;