@wix/design-system 1.0.0

package/dist/esm/TableToolbar/TableToolbar.st.css.js

@@ -0,0 +1,25 @@
+
+import "../Foundation/stylable/colors.st.css.js";
+import "../Heading/Heading.st.css.js";
+import { classesRuntime, statesRuntime } from "./../stylable-esm-runtime.js";
+
+
+
+var _namespace_ = "wds_1_0_0_TableToolbar";
+var _style_ = /*#__PURE__*/ classesRuntime.bind(null, _namespace_);
+
+export var cssStates = /*#__PURE__*/ statesRuntime.bind(null, _namespace_);
+export var style = /*#__PURE__*/ _style_;
+export var st = /*#__PURE__*/ _style_;
+
+export var namespace = _namespace_;
+export var classes = {"root":"wds_1_0_0_TableToolbar__root","item":"wds_1_0_0_TableToolbar__item","itemLabel":"wds_1_0_0_TableToolbar__itemLabel","itemGroup":"wds_1_0_0_TableToolbar__itemGroup","title":"wds_1_0_0_TableToolbar__title","divider":"wds_1_0_0_TableToolbar__divider"};
+export var keyframes = {}; 
+export var layers = {};
+export var containers = {};
+export var stVars = {}; 
+export var vars = {}; 
+
+
+
+

package/dist/esm/TableToolbar/index.js

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

package/dist/esm/TableToolbar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/TableToolbar/index.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/esm/Tabs/Tabs.driver.js

@@ -0,0 +1,23 @@
+import ReactTestUtils from 'react-dom/test-utils';
+const tabsDriverFactory = ({ element }) => {
+    const findFirst = query => element.querySelector(query);
+    const getItemsContainer = () => findFirst('div[role="tablist"]');
+    const getItems = () => [...getItemsContainer().childNodes];
+    const getItemsContainerType = () => getItemsContainer().getAttribute('data-type');
+    return {
+        exists: () => !!element,
+        getTitles: () => getItems().map(item => item.textContent),
+        clickTabAt: index => ReactTestUtils.Simulate.click(getItems()[index]),
+        getActiveTabIndex: () => getItems().findIndex(item => item.getAttribute('data-active') === 'true'),
+        isDefaultType: () => !getItemsContainerType(),
+        getItemsContainerType,
+        getDataHook: index => getItems()[index].getAttribute('data-hook'),
+        getItemsWidth: () => new Set(getItems().map(item => item.style.width)),
+        hasDivider: () => element.getAttribute('data-divider') === 'true',
+        getSideContent: () => findFirst(`[data-content="true"]`),
+        getItemsMaxWidths: () => getItems().map(item => item.style.maxWidth),
+        getItemsMinWidths: () => getItems().map(item => item.style.minWidth),
+    };
+};
+export default tabsDriverFactory;
+//# sourceMappingURL=Tabs.driver.js.map

package/dist/esm/Tabs/Tabs.driver.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.driver.js","sourceRoot":"","sources":["../../../src/Tabs/Tabs.driver.js"],"names":[],"mappings":"AAAA,OAAO,cAAc,MAAM,sBAAsB,CAAC;AAElD,MAAM,iBAAiB,GAAG,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE;IACxC,MAAM,SAAS,GAAG,KAAK,CAAC,EAAE,CAAC,OAAO,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IACxD,MAAM,iBAAiB,GAAG,GAAG,EAAE,CAAC,SAAS,CAAC,qBAAqB,CAAC,CAAC;IACjE,MAAM,QAAQ,GAAG,GAAG,EAAE,CAAC,CAAC,GAAG,iBAAiB,EAAE,CAAC,UAAU,CAAC,CAAC;IAC3D,MAAM,qBAAqB,GAAG,GAAG,EAAE,CACjC,iBAAiB,EAAE,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC;IAEhD,OAAO;QACL,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC,OAAO;QACvB,SAAS,EAAE,GAAG,EAAE,CAAC,QAAQ,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC;QACzD,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,KAAK,CAAC,CAAC;QACrE,iBAAiB,EAAE,GAAG,EAAE,CACtB,QAAQ,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,KAAK,MAAM,CAAC;QAC3E,aAAa,EAAE,GAAG,EAAE,CAAC,CAAC,qBAAqB,EAAE;QAC7C,qBAAqB;QACrB,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,QAAQ,EAAE,CAAC,KAAK,CAAC,CAAC,YAAY,CAAC,WAAW,CAAC;QACjE,aAAa,EAAE,GAAG,EAAE,CAAC,IAAI,GAAG,CAAC,QAAQ,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QACtE,UAAU,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,YAAY,CAAC,cAAc,CAAC,KAAK,MAAM;QACjE,cAAc,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,uBAAuB,CAAC;QACxD,iBAAiB,EAAE,GAAG,EAAE,CAAC,QAAQ,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;QACpE,iBAAiB,EAAE,GAAG,EAAE,CAAC,QAAQ,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;KACrE,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/esm/Tabs/Tabs.js

@@ -0,0 +1,71 @@
+import { __rest } from "tslib";
+import React from 'react';
+import PropTypes from 'prop-types';
+import SideContent from './core/SideContent';
+import TabItems from './core/TabItems';
+import { classes, st } from './Tabs.st.css.js';
+class Tabs extends React.Component {
+    constructor() {
+        super(...arguments);
+        this._getTabItemsProps = () => {
+            /* eslint-disable no-unused-vars */
+            const _a = this.props, { sideContent, dataHook } = _a, tabItemsProps = __rest(_a, ["sideContent", "dataHook"]);
+            return tabItemsProps;
+        };
+    }
+    render() {
+        const { sideContent, hasDivider, dataHook, size, className } = this.props;
+        const tabItemsProps = this._getTabItemsProps();
+        return (React.createElement("div", { "data-divider": hasDivider, "data-hook": dataHook, className: st(classes.container, {
+                hasDivider,
+                size,
+            }, className) },
+            React.createElement(TabItems, Object.assign({}, tabItemsProps)),
+            React.createElement(SideContent, { content: sideContent })));
+    }
+}
+Tabs.displayName = 'Tabs';
+Tabs.defaultProps = {
+    hasDivider: true,
+    size: 'medium',
+};
+Tabs.propTypes = {
+    /** Applied as data-hook HTML attribute that can be used in the tests */
+    dataHook: PropTypes.string,
+    /** A css class to be applied to the component's root element */
+    className: PropTypes.string,
+    /** A selected tab id */
+    activeId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    /** Places a divider on bottom */
+    hasDivider: PropTypes.bool,
+    /** An array of tabs */
+    items: PropTypes.arrayOf(PropTypes.shape({
+        id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+        title: PropTypes.node,
+        minWidth: PropTypes.number,
+        maxWidth: PropTypes.number,
+        dataHook: PropTypes.string,
+    })).isRequired,
+    /** A minimum width of the container */
+    minWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    /** One of: '', compact, compactSide, uniformSide, uniformFull */
+    type: PropTypes.oneOf([
+        '',
+        'compact',
+        'compactSide',
+        'uniformSide',
+        'uniformFull',
+    ]),
+    /** One of: medium, small*/
+    size: PropTypes.oneOf(['medium', 'small']),
+    /** Can be either string or renderable node */
+    sideContent: PropTypes.node,
+    /** A specific width of a tab (only for uniformSide type) */
+    width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    /** Control text alignment in tab item */
+    alignment: PropTypes.oneOf(['start', 'center', 'end']),
+    /** Click event handler  */
+    onClick: PropTypes.func,
+};
+export default Tabs;
+//# sourceMappingURL=Tabs.js.map

package/dist/esm/Tabs/Tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../src/Tabs/Tabs.js"],"names":[],"mappings":"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"}

package/dist/esm/Tabs/Tabs.meta.js

@@ -0,0 +1,18 @@
+// This object should contain a mock value for each required prop of this component
+export const requiredProps = {
+    items: [
+        { id: 1, title: 'item 1' },
+        { id: 2, title: 'item 2' },
+    ],
+};
+// This array should contain an object only for tests you wish to run on all compliance tests
+const sharedTests = [
+    {
+        title: 'render',
+        props: Object.assign({}, requiredProps),
+    },
+];
+export const testkitTests = [...sharedTests];
+export const ssrTests = [...sharedTests];
+export const a11yTests = [...sharedTests];
+//# sourceMappingURL=Tabs.meta.js.map

package/dist/esm/Tabs/Tabs.meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.meta.js","sourceRoot":"","sources":["../../../src/Tabs/Tabs.meta.tsx"],"names":[],"mappings":"AAEA,mFAAmF;AACnF,MAAM,CAAC,MAAM,aAAa,GAAc;IACtC,KAAK,EAAE;QACL,EAAE,EAAE,EAAE,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE;QAC1B,EAAE,EAAE,EAAE,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE;KAC3B;CACF,CAAC;AAEF,6FAA6F;AAC7F,MAAM,WAAW,GAAG;IAClB;QACE,KAAK,EAAE,QAAQ;QACf,KAAK,EAAE,kBACF,aAAa,CACJ;KACf;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,GAAG,WAAW,CAAC,CAAC;AAE7C,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,GAAG,WAAW,CAAC,CAAC;AAEzC,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,GAAG,WAAW,CAAC,CAAC"}

package/dist/esm/Tabs/Tabs.st.css

@@ -0,0 +1,121 @@
+:import {
+  -st-from: '../Foundation/stylable/colors.st.css';
+  -st-named: THEME-COLOR-10, D60, F00;
+}
+
+:import {
+  -st-from: '../Foundation/stylable/typography.st.css';
+  -st-named: text-medium-normal, text-small-normal;
+}
+
+:vars {
+  sidePadding: 0;
+  sideMargin: 30px;
+  compactSideMargin: 18px;
+}
+
+.container {
+  -st-states: size(enum(small, medium)), hasDivider;
+
+  display: flex;
+  max-width: 100%;
+  border-bottom: 1px solid transparent;
+}
+
+.container:size(medium) {
+  -st-mixin: text-medium-normal;
+}
+
+.container:size(small) {
+  -st-mixin: text-small-normal;
+}
+
+.itemsContainer {
+  min-width: 628px;
+  display: flex;
+  flex-grow: 1;
+  flex-shrink: 1;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.tab {
+  -st-states: size(enum(small, medium)), active;
+
+  position: relative;
+  margin: 0 0 -1px;
+  border-top: 0;
+  border-right: 0;
+  border-left: 0;
+  border-bottom: 3px solid transparent;
+  white-space: nowrap;
+  text-align: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: pointer;
+  border-color: transparent;
+  background-color: transparent;
+  outline: none;
+  box-sizing: content-box;
+}
+
+.tab:size(small) {
+  padding: 12px 12px 10px;
+}
+
+.tab:size(medium) {
+  padding: 18px 18px 16px;
+}
+
+.tab:focus-visible {
+  box-shadow: 0 0 0 3px value(F00);
+  border-radius: 3px;
+}
+
+.compact .tab {
+  padding-right: 0;
+  padding-left: 0;
+  margin-right: 30px;
+  margin-left: 30px;
+}
+
+.uniformFull .tab {
+  flex: 1;
+}
+
+.compactSide .tab {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.compactSide .tab:not(:first-child) {
+  margin-left: 18px;
+}
+
+.compactSide .tab:not(:last-child) {
+  margin-right: 18px;
+}
+
+.tab span.tabText:hover {
+  color: value(THEME-COLOR-10);
+}
+
+.tab:active {
+  border-color: value(THEME-COLOR-10);
+}
+
+.tab:active span.tabText {
+  color: value(THEME-COLOR-10);
+}
+
+.container:hasDivider {
+  border-color: value(D60);
+}
+
+.sideContent {
+  max-width: 314px;
+  overflow: hidden;
+  margin-left: 24px;
+  flex-shrink: 0;
+}

package/dist/esm/Tabs/Tabs.st.css.js

@@ -0,0 +1,25 @@
+
+import "../Foundation/stylable/colors.st.css.js";
+import "../Foundation/stylable/typography.st.css.js";
+import { classesRuntime, statesRuntime } from "./../stylable-esm-runtime.js";
+
+
+
+var _namespace_ = "wds_1_0_0_Tabs";
+var _style_ = /*#__PURE__*/ classesRuntime.bind(null, _namespace_);
+
+export var cssStates = /*#__PURE__*/ statesRuntime.bind(null, _namespace_);
+export var style = /*#__PURE__*/ _style_;
+export var st = /*#__PURE__*/ _style_;
+
+export var namespace = _namespace_;
+export var classes = {"root":"wds_1_0_0_Tabs__root","text-medium-normal":"wds_1_0_0_StylableTypography__text-medium-normal","text-small-normal":"wds_1_0_0_StylableTypography__text-small-normal","container":"wds_1_0_0_Tabs__container","itemsContainer":"wds_1_0_0_Tabs__itemsContainer","tab":"wds_1_0_0_Tabs__tab","compact":"wds_1_0_0_Tabs__compact","uniformFull":"wds_1_0_0_Tabs__uniformFull","compactSide":"wds_1_0_0_Tabs__compactSide","tabText":"wds_1_0_0_Tabs__tabText","sideContent":"wds_1_0_0_Tabs__sideContent"};
+export var keyframes = {}; 
+export var layers = {};
+export var containers = {};
+export var stVars = {"sidePadding":"0","sideMargin":"30px","compactSideMargin":"18px"}; 
+export var vars = {}; 
+
+
+
+

package/dist/esm/Tabs/Tabs.uni.driver.js

@@ -0,0 +1,84 @@
+import { baseUniDriverFactory } from '../test-utils/utils/unidriver';
+export const tabsUniDriverFactory = base => {
+    const findFirst = async (query) => {
+        const item = base.$$(query).get(0);
+        return (await item.exists()) ? item : null;
+    };
+    const getItemsContainer = async () => findFirst('div[role="tablist"]');
+    const getItems = async () => {
+        const itemsContainer = await getItemsContainer();
+        return itemsContainer.$$('button[role="tab"]').map(child => child);
+    };
+    const getItemsContainerType = async () => {
+        const itemContainer = await getItemsContainer();
+        return await itemContainer.attr('data-type');
+    };
+    return Object.assign(Object.assign({}, baseUniDriverFactory(base)), { 
+        /**
+         * Gets all titles text
+         * @return {Promise<string[]>}
+         */
+        getTitles: async () => Promise.all((await getItems()).map(item => item.text())), 
+        /**
+         * Clicks the tab at index
+         * @param {number} index
+         * @return {Promise<void>}
+         */
+        clickTabAt: async (index) => (await getItems())[index].click(), 
+        /**
+         * Gets active tab index
+         * @return {Promise<number>}
+         */
+        getActiveTabIndex: async () => {
+            const itemsDataActivePromises = (await getItems()).map(item => item.attr('data-active'));
+            const itemsDataActive = await Promise.all(itemsDataActivePromises);
+            return itemsDataActive.findIndex(active => active === 'true');
+        }, 
+        /**
+         * Checks whether tabs type is default
+         * @return {Promise<boolean>}
+         */
+        isDefaultType: async () => !(await getItemsContainerType()), 
+        /**
+         * Checks whether tabs type is container
+         * @return {Promise<boolean>}
+         */
+        getItemsContainerType, 
+        /**
+         * Gets the data-hook
+         * @param {number} index
+         * @return {Promise<string>}
+         */
+        getDataHook: async (index) => (await getItems())[index].attr('data-hook'), 
+        /**
+         * Gets a set of tabs widths
+         * @return {Promise<Set<string>>}
+         */
+        getItemsWidth: async () => {
+            const items = await getItems();
+            const itemsWidthArrayPromise = items.map(item => item._prop('style').then(style => style.width));
+            const itemsWidthArray = await Promise.all(itemsWidthArrayPromise);
+            return new Set(itemsWidthArray);
+        }, 
+        /**
+         * Checks whether tabs has a divider
+         * @return {Promise<boolean>}
+         */
+        hasDivider: async () => (await base.attr('data-divider')) === 'true', 
+        /**
+         * Gets the side content
+         * @return {Promise<UniDriver|null>}
+         */
+        getSideContent: async () => findFirst(`[data-content="true"]`), 
+        /**
+         * Gets tabs max widths
+         * @return {Promise<string[]>}
+         */
+        getItemsMaxWidths: async () => Promise.all((await getItems()).map(item => item._prop('style').then(style => style.maxWidth))), 
+        /**
+         * Gets tabs min widths
+         * @return {Promise<string[]>}
+         */
+        getItemsMinWidths: async () => Promise.all((await getItems()).map(item => item._prop('style').then(style => style.minWidth))) });
+};
+//# sourceMappingURL=Tabs.uni.driver.js.map

package/dist/esm/Tabs/Tabs.uni.driver.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.uni.driver.js","sourceRoot":"","sources":["../../../src/Tabs/Tabs.uni.driver.js"],"names":[],"mappings":"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"}

package/dist/esm/Tabs/core/SideContent/index.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { classes } from '../../Tabs.st.css.js';
+const SideContent = ({ content }) => content ? (React.createElement("div", { "data-content": "true", className: classes.sideContent }, content)) : null;
+SideContent.propTypes = {
+    content: PropTypes.node,
+};
+export default SideContent;
+//# sourceMappingURL=index.js.map

package/dist/esm/Tabs/core/SideContent/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/Tabs/core/SideContent/index.js"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAE5C,MAAM,WAAW,GAAG,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAClC,OAAO,CAAC,CAAC,CAAC,CACR,6CAAkB,MAAM,EAAC,SAAS,EAAE,OAAO,CAAC,WAAW,IACpD,OAAO,CACJ,CACP,CAAC,CAAC,CAAC,IAAI,CAAC;AAEX,WAAW,CAAC,SAAS,GAAG;IACtB,OAAO,EAAE,SAAS,CAAC,IAAI;CACxB,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/esm/Tabs/core/TabItem/index.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import pick from '../../../utils/operators/pick';
+import Text from '../../../Text';
+import * as TabPropTypes from '../constants/tab-prop-types';
+import { classes, st } from '../../Tabs.st.css.js';
+class TabItem extends React.Component {
+    getItemStyle() {
+        const { type, width, itemMaxWidth, item: { minWidth, maxWidth }, alignment, } = this.props;
+        const inlineStyle = {
+            uniformSide: { width },
+            compactSide: itemMaxWidth ? { maxWidth: `${itemMaxWidth}pt` } : {},
+        }[type] || {};
+        if (minWidth) {
+            inlineStyle.minWidth = minWidth;
+        }
+        if (maxWidth) {
+            inlineStyle.maxWidth = maxWidth;
+        }
+        if (alignment) {
+            inlineStyle.textAlign = alignment;
+        }
+        return inlineStyle;
+    }
+    render() {
+        const { item, onItemClick, isActive, dynamicProperties, size } = this.props;
+        const containerProps = Object.assign({ key: item.id, onClick: () => onItemClick(item), className: st(classes.tab, {
+                size,
+                active: isActive,
+            }), style: this.getItemStyle() }, pick(this.props, dynamicProperties));
+        return (React.createElement("button", Object.assign({ role: "tab", "aria-selected": isActive, "data-active": isActive, "data-hook": item.dataHook }, containerProps, { ref: this.createRef }),
+            React.createElement(Text, { size: size, className: classes.tabText, weight: "thin", ellipsis: true }, item.title)));
+    }
+}
+TabItem.propTypes = {
+    itemMaxWidth: PropTypes.number,
+    isActive: PropTypes.bool,
+    item: TabPropTypes.item.isRequired,
+    onItemClick: TabPropTypes.onClick,
+    type: TabPropTypes.type,
+    width: TabPropTypes.width,
+    dynamicProperties: PropTypes.array,
+};
+export default TabItem;
+//# sourceMappingURL=index.js.map

package/dist/esm/Tabs/core/TabItem/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/Tabs/core/TabItem/index.js"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,IAAI,MAAM,+BAA+B,CAAC;AACjD,OAAO,IAAI,MAAM,eAAe,CAAC;AACjC,OAAO,KAAK,YAAY,MAAM,6BAA6B,CAAC;AAC5D,OAAO,EAAE,OAAO,EAAE,EAAE,EAAE,MAAM,mBAAmB,CAAC;AAEhD,MAAM,OAAQ,SAAQ,KAAK,CAAC,SAAS;IACnC,YAAY;QACV,MAAM,EACJ,IAAI,EACJ,KAAK,EACL,YAAY,EACZ,IAAI,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAC5B,SAAS,GACV,GAAG,IAAI,CAAC,KAAK,CAAC;QAEf,MAAM,WAAW,GACf;YACE,WAAW,EAAE,EAAE,KAAK,EAAE;YACtB,WAAW,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,GAAG,YAAY,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE;SACnE,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;QAEhB,IAAI,QAAQ,EAAE;YACZ,WAAW,CAAC,QAAQ,GAAG,QAAQ,CAAC;SACjC;QAED,IAAI,QAAQ,EAAE;YACZ,WAAW,CAAC,QAAQ,GAAG,QAAQ,CAAC;SACjC;QAED,IAAI,SAAS,EAAE;YACb,WAAW,CAAC,SAAS,GAAG,SAAS,CAAC;SACnC;QAED,OAAO,WAAW,CAAC;IACrB,CAAC;IAED,MAAM;QACJ,MAAM,EAAE,IAAI,EAAE,WAAW,EAAE,QAAQ,EAAE,iBAAiB,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QAE5E,MAAM,cAAc,mBAClB,GAAG,EAAE,IAAI,CAAC,EAAE,EACZ,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,EAChC,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,EAAE;gBACzB,IAAI;gBACJ,MAAM,EAAE,QAAQ;aACjB,CAAC,EACF,KAAK,EAAE,IAAI,CAAC,YAAY,EAAE,IACvB,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,iBAAiB,CAAC,CACvC,CAAC;QAEF,OAAO,CACL,8CACE,IAAI,EAAC,KAAK,mBACK,QAAQ,iBACV,QAAQ,eACV,IAAI,CAAC,QAAQ,IACpB,cAAc,IAClB,GAAG,EAAE,IAAI,CAAC,SAAS;YAEnB,oBAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,OAAO,CAAC,OAAO,EAAE,MAAM,EAAC,MAAM,EAAC,QAAQ,UACjE,IAAI,CAAC,KAAK,CACN,CACA,CACV,CAAC;IACJ,CAAC;CACF;AAED,OAAO,CAAC,SAAS,GAAG;IAClB,YAAY,EAAE,SAAS,CAAC,MAAM;IAC9B,QAAQ,EAAE,SAAS,CAAC,IAAI;IACxB,IAAI,EAAE,YAAY,CAAC,IAAI,CAAC,UAAU;IAClC,WAAW,EAAE,YAAY,CAAC,OAAO;IACjC,IAAI,EAAE,YAAY,CAAC,IAAI;IACvB,KAAK,EAAE,YAAY,CAAC,KAAK;IACzB,iBAAiB,EAAE,SAAS,CAAC,KAAK;CACnC,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/esm/Tabs/core/TabItems/index.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import * as TabPropTypes from '../constants/tab-prop-types';
+import TabItem from '../TabItem';
+import withItemMaxWidth from '../withItemMaxWidth';
+import { st, classes } from '../../Tabs.st.css.js';
+class TabItems extends React.Component {
+    renderItem(item) {
+        const { activeId, type, width, onClick, itemMaxWidth, alignment, size } = this.props;
+        return (React.createElement(TabItem, { key: item.id, dataHook: item.dataHook, item: item, itemMaxWidth: itemMaxWidth, alignment: alignment, isActive: activeId === item.id, type: type, width: width, onItemClick: onClick, size: size }));
+    }
+    render() {
+        const { items, type, dataHook } = this.props;
+        return (React.createElement("div", { role: "tablist", "data-type": type, "data-hook": dataHook, className: st(classes.itemsContainer, classes[type]), style: { minWidth: this.props.minWidth } }, items.map(item => this.renderItem(item))));
+    }
+}
+TabItems.propTypes = {
+    activeId: TabPropTypes.activeId,
+    dataHook: PropTypes.string,
+    itemMaxWidth: PropTypes.number,
+    items: TabPropTypes.items.isRequired,
+    minWidth: TabPropTypes.width,
+    type: TabPropTypes.type,
+    width: TabPropTypes.width,
+    onClick: TabPropTypes.onClick,
+};
+export default withItemMaxWidth(TabItems);
+//# sourceMappingURL=index.js.map

package/dist/esm/Tabs/core/TabItems/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/Tabs/core/TabItems/index.js"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,OAAO,KAAK,YAAY,MAAM,6BAA6B,CAAC;AAC5D,OAAO,OAAO,MAAM,YAAY,CAAC;AACjC,OAAO,gBAAgB,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,EAAE,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAEhD,MAAM,QAAS,SAAQ,KAAK,CAAC,SAAS;IACpC,UAAU,CAAC,IAAI;QACb,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,IAAI,EAAE,GACrE,IAAI,CAAC,KAAK,CAAC;QACb,OAAO,CACL,oBAAC,OAAO,IACN,GAAG,EAAE,IAAI,CAAC,EAAE,EACZ,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,KAAK,IAAI,CAAC,EAAE,EAC9B,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,OAAO,EACpB,IAAI,EAAE,IAAI,GACV,CACH,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QAE7C,OAAO,CACL,6BACE,IAAI,EAAC,SAAS,eACH,IAAI,eACJ,QAAQ,EACnB,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,cAAc,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC,EACpD,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,IAEvC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CACrC,CACP,CAAC;IACJ,CAAC;CACF;AAED,QAAQ,CAAC,SAAS,GAAG;IACnB,QAAQ,EAAE,YAAY,CAAC,QAAQ;IAC/B,QAAQ,EAAE,SAAS,CAAC,MAAM;IAC1B,YAAY,EAAE,SAAS,CAAC,MAAM;IAC9B,KAAK,EAAE,YAAY,CAAC,KAAK,CAAC,UAAU;IACpC,QAAQ,EAAE,YAAY,CAAC,KAAK;IAC5B,IAAI,EAAE,YAAY,CAAC,IAAI;IACvB,KAAK,EAAE,YAAY,CAAC,KAAK;IACzB,OAAO,EAAE,YAAY,CAAC,OAAO;CAC9B,CAAC;AAEF,eAAe,gBAAgB,CAAC,QAAQ,CAAC,CAAC"}

package/dist/esm/Tabs/core/constants/tab-prop-types.js

@@ -0,0 +1,21 @@
+import PropTypes from 'prop-types';
+import TabTypes from './tab-types';
+const stringOrNumber = PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+]);
+export const item = PropTypes.shape({
+    id: stringOrNumber,
+    title: PropTypes.node,
+    minWidth: PropTypes.number,
+    maxWidth: PropTypes.number,
+    textAlign: PropTypes.oneOf(['start', 'center', 'end']),
+    dataHook: PropTypes.string,
+});
+export const items = PropTypes.arrayOf(item);
+export const onClick = PropTypes.func;
+export const activeId = stringOrNumber;
+export const width = stringOrNumber;
+export const sideContent = PropTypes.node;
+export const type = PropTypes.oneOf(TabTypes);
+//# sourceMappingURL=tab-prop-types.js.map

package/dist/esm/Tabs/core/constants/tab-prop-types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-prop-types.js","sourceRoot":"","sources":["../../../../../src/Tabs/core/constants/tab-prop-types.js"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,OAAO,QAAQ,MAAM,aAAa,CAAC;AAEnC,MAAM,cAAc,GAAG,SAAS,CAAC,SAAS,CAAC;IACzC,SAAS,CAAC,MAAM;IAChB,SAAS,CAAC,MAAM;CACjB,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,IAAI,GAAG,SAAS,CAAC,KAAK,CAAC;IAClC,EAAE,EAAE,cAAc;IAClB,KAAK,EAAE,SAAS,CAAC,IAAI;IACrB,QAAQ,EAAE,SAAS,CAAC,MAAM;IAC1B,QAAQ,EAAE,SAAS,CAAC,MAAM;IAC1B,SAAS,EAAE,SAAS,CAAC,KAAK,CAAC,CAAC,OAAO,EAAE,QAAQ,EAAE,KAAK,CAAC,CAAC;IACtD,QAAQ,EAAE,SAAS,CAAC,MAAM;CAC3B,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,KAAK,GAAG,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;AAE7C,MAAM,CAAC,MAAM,OAAO,GAAG,SAAS,CAAC,IAAI,CAAC;AAEtC,MAAM,CAAC,MAAM,QAAQ,GAAG,cAAc,CAAC;AAEvC,MAAM,CAAC,MAAM,KAAK,GAAG,cAAc,CAAC;AAEpC,MAAM,CAAC,MAAM,WAAW,GAAG,SAAS,CAAC,IAAI,CAAC;AAE1C,MAAM,CAAC,MAAM,IAAI,GAAG,SAAS,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC"}

package/dist/esm/Tabs/core/constants/tab-types.js

@@ -0,0 +1,6 @@
+export const SIZES = {
+    small: 'small',
+    medium: 'medium',
+};
+export default ['', 'compact', 'compactSide', 'uniformSide', 'uniformFull'];
+//# sourceMappingURL=tab-types.js.map

package/dist/esm/Tabs/core/constants/tab-types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-types.js","sourceRoot":"","sources":["../../../../../src/Tabs/core/constants/tab-types.js"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,QAAQ;CACjB,CAAC;AAEF,eAAe,CAAC,EAAE,EAAE,SAAS,EAAE,aAAa,EAAE,aAAa,EAAE,aAAa,CAAC,CAAC"}

package/dist/esm/Tabs/core/utils.js

@@ -0,0 +1,2 @@
+export const getWidth = element => element ? element.getBoundingClientRect().width : 0;
+//# sourceMappingURL=utils.js.map

package/dist/esm/Tabs/core/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../src/Tabs/core/utils.js"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,QAAQ,GAAG,OAAO,CAAC,EAAE,CAChC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC"}

package/dist/esm/Tabs/core/withItemMaxWidth/index.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import { getWidth } from '../utils';
+import * as TabPropTypes from '../constants/tab-prop-types';
+const withMaxWidth = WrappedComponent => {
+    var _a;
+    const getMaxWidth = (items, containerWidth) => {
+        const COMPACT_SIDE_MARGIN = 18;
+        const marginsBetweenItems = COMPACT_SIDE_MARGIN * 2 * (items.length - 1);
+        return (containerWidth - marginsBetweenItems) / items.length;
+    };
+    return _a = class Wrapper extends React.Component {
+            constructor() {
+                super(...arguments);
+                this.state = {
+                    itemMaxWidth: undefined,
+                };
+            }
+            initMaxWidth(itemsContainer) {
+                const { type, items } = this.props;
+                if (!itemsContainer || type !== 'compactSide') {
+                    return;
+                }
+                const itemMaxWidth = getMaxWidth(items, getWidth(itemsContainer));
+                if (this.state.itemMaxWidth !== itemMaxWidth) {
+                    this.setState({ itemMaxWidth });
+                }
+            }
+            render() {
+                return (React.createElement("div", { ref: el => this.initMaxWidth(el), style: { width: '100%' } },
+                    React.createElement(WrappedComponent, Object.assign({}, this.props, { itemMaxWidth: this.state.itemMaxWidth }))));
+            }
+        },
+        _a.propTypes = {
+            type: TabPropTypes.type,
+            items: TabPropTypes.items.isRequired,
+        },
+        _a;
+};
+export default withMaxWidth;
+//# sourceMappingURL=index.js.map

package/dist/esm/Tabs/core/withItemMaxWidth/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/Tabs/core/withItemMaxWidth/index.js"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AACpC,OAAO,KAAK,YAAY,MAAM,6BAA6B,CAAC;AAE5D,MAAM,YAAY,GAAG,gBAAgB,CAAC,EAAE;;IACtC,MAAM,WAAW,GAAG,CAAC,KAAK,EAAE,cAAc,EAAE,EAAE;QAC5C,MAAM,mBAAmB,GAAG,EAAE,CAAC;QAC/B,MAAM,mBAAmB,GAAG,mBAAmB,GAAG,CAAC,GAAG,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;QACzE,OAAO,CAAC,cAAc,GAAG,mBAAmB,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC;IAC/D,CAAC,CAAC;IAEF,YAAO,MAAM,OAAQ,SAAQ,KAAK,CAAC,SAAS;YAArC;;gBAKL,UAAK,GAAG;oBACN,YAAY,EAAE,SAAS;iBACxB,CAAC;YAyBJ,CAAC;YAvBC,YAAY,CAAC,cAAc;gBACzB,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;gBAEnC,IAAI,CAAC,cAAc,IAAI,IAAI,KAAK,aAAa,EAAE;oBAC7C,OAAO;iBACR;gBAED,MAAM,YAAY,GAAG,WAAW,CAAC,KAAK,EAAE,QAAQ,CAAC,cAAc,CAAC,CAAC,CAAC;gBAClE,IAAI,IAAI,CAAC,KAAK,CAAC,YAAY,KAAK,YAAY,EAAE;oBAC5C,IAAI,CAAC,QAAQ,CAAC,EAAE,YAAY,EAAE,CAAC,CAAC;iBACjC;YACH,CAAC;YAED,MAAM;gBACJ,OAAO,CACL,6BAAK,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;oBAC7D,oBAAC,gBAAgB,oBACX,IAAI,CAAC,KAAK,IACd,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,YAAY,IACrC,CACE,CACP,CAAC;YACJ,CAAC;SACF;QA/BQ,YAAS,GAAG;YACjB,IAAI,EAAE,YAAY,CAAC,IAAI;YACvB,KAAK,EAAE,YAAY,CAAC,KAAK,CAAC,UAAU;SACpC;WA4BF;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/esm/Tabs/index.js

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

package/dist/esm/Tabs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Tabs/index.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC"}

package/dist/esm/Tabs/test/examples/TabsExample.st.css

@@ -0,0 +1,32 @@
+:import {
+  -st-from: '../../../Foundation/stylable/colors.st.css';
+  -st-named: D50;
+}
+.radioGroup {
+  margin-top: 10px;
+}
+
+.controlGroup + .controlGroup {
+  margin-top: 15px;
+}
+
+.preview {
+  margin-top: 12px;
+  border: 10px solid value(D50);
+  height: 100px;
+}
+
+.sideContentExample {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  height: 100%;
+}
+
+.sideContentExample button {
+  margin-right: 12px;
+}
+
+.sideContentExample button:last-of-type {
+  margin-right: 48px;
+}