@mackin.com/styleguide 8.5.1 → 8.5.2

package/index.d.ts

@@ -1079,4 +1079,26 @@ interface ThemeRendererProps extends MackinTheme {
 }
 declare const ThemeRenderer: (p: ThemeRendererProps) => JSX.Element;
 
-export { Accordian, AccordianProps, Alignment, Autocomplete, AutocompleteProps, AutocompleteValue, Backdrop$1 as Backdrop, Backdrop as Backdrop2, BoundMemoryPager, BoundStaticPager, Button, ButtonProps, Calendar, CalendarProps, Checkbox, CheckboxProps, ConfirmModal, ConfirmModalProps, CopyButton, DateInput, DateInputProps, Divider, ErrorModal, FileUploader, Form, FormColumnRow, FormFlexRow, FormProps, GlobalStyles, Header, Highlight, ICONS, Icon, Image, ImageProps, InfoPanel, InfoTip, InfoTipProps, Input, InputProps, ItemPager, Label, LabelProps, Link, LinkProps, List, ListItem, ListItemProps, ListProps, MackinTheme, Modal, ModalProps, Nav, NormalizeCss, NumberInput, NumberInputProps, OmniLink, OmniLinkProps, PagedResult, Pager, PagerProps, Picker, PickerOption, PickerProps, PickerValue, Popover, ProgressBar, ProgressBarProps, SearchBox, SearchBoxProps, Slider, TabHeader, TabHeaderProps, TabLocker, Table, Td, TdCurrency, TdNumber, Text, TextArea, TextAreaProps, TextInput, TextInputProps, TextProps, Th, ThSort, ThemeProvider, ThemeRenderer, ToggleButton, ToggleButtonGroup, ToggleButtonGroupProps, ToggleButtonProps, TogglePasswordInput, Tr, WaitingIndicator, calcDynamicThemeProps, defaultTheme, enumToEntities, getCurrencyDisplay, getFileSizeDisplay, useAccordianState, useBooleanChanged, useIgnoreMount, useMediaQuery, useScrollbarSize, useThemeSafely, useWaiting };
+interface TabContainerProps {
+    tabs: {
+        name: string;
+        getContent: () => JSX.Element;
+    }[];
+    id?: string;
+    /** Defaults to 10rem. */
+    maxTabWidth?: string;
+    /** Defaults to 'tab'. */
+    variant?: 'tab' | 'button';
+    contentClassName?: string;
+    tabHeaderClassName?: string;
+    tabClassName?: string;
+    tabHeaderDividerClassName?: string;
+    /** Defaults to 0. */
+    startingIndex?: number;
+    onTabChanged?: (tabIndex: number) => void;
+    /** If present, tab change will be delayed until this method resolves. */
+    onBeforeTabChanged?: (tabIndex: number) => Promise<void>;
+}
+declare const TabContainer: (p: TabContainerProps) => JSX.Element;
+
+export { Accordian, AccordianProps, Alignment, Autocomplete, AutocompleteProps, AutocompleteValue, Backdrop$1 as Backdrop, Backdrop as Backdrop2, BoundMemoryPager, BoundStaticPager, Button, ButtonProps, Calendar, CalendarProps, Checkbox, CheckboxProps, ConfirmModal, ConfirmModalProps, CopyButton, DateInput, DateInputProps, Divider, ErrorModal, FileUploader, Form, FormColumnRow, FormFlexRow, FormProps, GlobalStyles, Header, Highlight, ICONS, Icon, Image, ImageProps, InfoPanel, InfoTip, InfoTipProps, Input, InputProps, ItemPager, Label, LabelProps, Link, LinkProps, List, ListItem, ListItemProps, ListProps, MackinTheme, Modal, ModalProps, Nav, NormalizeCss, NumberInput, NumberInputProps, OmniLink, OmniLinkProps, PagedResult, Pager, PagerProps, Picker, PickerOption, PickerProps, PickerValue, Popover, ProgressBar, ProgressBarProps, SearchBox, SearchBoxProps, Slider, TabContainer, TabContainerProps, TabHeader, TabHeaderProps, TabLocker, Table, Td, TdCurrency, TdNumber, Text, TextArea, TextAreaProps, TextInput, TextInputProps, TextProps, Th, ThSort, ThemeProvider, ThemeRenderer, ToggleButton, ToggleButtonGroup, ToggleButtonGroupProps, ToggleButtonProps, TogglePasswordInput, Tr, WaitingIndicator, calcDynamicThemeProps, defaultTheme, enumToEntities, getCurrencyDisplay, getFileSizeDisplay, useAccordianState, useBooleanChanged, useIgnoreMount, useMediaQuery, useScrollbarSize, useThemeSafely, useWaiting };

package/index.js

@@ -4732,6 +4732,27 @@ const flatten = (obj, parent, path = 'theme') => {
     return flatObj;
 };
 
+const TabContainer = (p) => {
+    var _a;
+    const [tabIndex, setTabIndex] = React__namespace.useState((_a = p.startingIndex) !== null && _a !== void 0 ? _a : 0);
+    const theme = useThemeSafely();
+    return (React__namespace.createElement("div", { className: css.css({
+            label: 'TabContainer'
+        }) },
+        React__namespace.createElement(TabHeader, { tabs: p.tabs, maxTabWidth: p.maxTabWidth, variant: p.variant, containerClassName: p.tabHeaderClassName, tabClassName: p.tabClassName, tabHeaderDividerClassName: p.tabHeaderDividerClassName, startingIndex: tabIndex, onBeforeTabChanged: p.onBeforeTabChanged, onTabChanged: newIndex => {
+                var _a;
+                setTabIndex(newIndex);
+                (_a = p.onTabChanged) === null || _a === void 0 ? void 0 : _a.call(p, newIndex);
+            } }),
+        React__namespace.createElement("div", { className: css.cx(css.css({
+                label: 'TabContainerContent',
+                padding: '1rem',
+                borderLeft: theme.controls.border,
+                borderRight: theme.controls.border,
+                borderBottom: theme.controls.border,
+            }), p.contentClassName) }, p.tabs[tabIndex].getContent())));
+};
+
 exports.Accordian = Accordian;
 exports.Autocomplete = Autocomplete;
 exports.Backdrop = Backdrop$1;
@@ -4776,6 +4797,7 @@ exports.Popover = Popover;
 exports.ProgressBar = ProgressBar;
 exports.SearchBox = SearchBox;
 exports.Slider = Slider;
+exports.TabContainer = TabContainer;
 exports.TabHeader = TabHeader;
 exports.TabLocker = TabLocker;
 exports.Table = Table;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@mackin.com/styleguide",
-    "version": "8.5.1",
+    "version": "8.5.2",
     "description": "",
     "main": "./index.js",
     "types": "./index.d.ts",