@mackin.com/styleguide 8.5.0 → 8.6.0

package/index.d.ts

@@ -484,7 +484,7 @@ declare const OmniLink: (props: OmniLinkProps) => JSX.Element;
 
 declare type SortDirection = 'asc' | 'desc';
 interface PagerSortOption<TItem> {
-    id: string;
+    id: string | number;
     name?: string;
     sort: (items: TItem[]) => TItem[];
 }
@@ -495,6 +495,7 @@ interface PagerOptions<TItem> {
     limitOptions?: number[];
     sort?: string;
     sortOptions?: PagerSortOption<TItem>[];
+    /** Will copy over this pagers options, filters, and state. */
     previous?: ItemPager<TItem>;
 }
 /** In-memory pager. */
@@ -1079,4 +1080,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

@@ -4113,7 +4113,7 @@ const TextArea = React__namespace.forwardRef((props, ref) => {
     const [localValue, setLocalValue] = React__namespace.useState(props.value);
     const inputRef = (ref !== null && ref !== void 0 ? ref : React__namespace.useRef(null));
     const [validationError, updateErrorMessage] = useInputValidationMessage(inputRef, props);
-    const nativeProps = __rest(props, ["onValueChange", "customError", "reportValueOnError"]);
+    const nativeProps = __rest(props, ["onValueChange", "customError", "reportValueOnError", "showErrorDisplay"]);
     const theme = useThemeSafely();
     React__namespace.useEffect(() => {
         updateErrorMessage();
@@ -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,29 +1,29 @@
-{
-	"name": "@mackin.com/styleguide",
-	"version": "8.5.0",
-	"description": "",
-	"main": "./index.js",
-	"types": "./index.d.ts",
-	"scripts": {},
-	"author": "Mackin",
-	"license": "ISC",
-	"devDependencies": {},
-	"dependencies": {},
-	"optionalDependencies": {
-		"react-router-dom": "^5.3.0",
-		"react-tiny-popover": "^7.0.1",
-		"react-slider": "^1.3.1"
-	},
-	"peerDependencies": {
-		"nanoid": "^3.1.23",
-		"date-fns": "^2.13.0",
-		"lodash": "^4.17.15",
-		"react": "^17.0.2",
-		"@emotion/css": "^11.1.3",
-		"@fortawesome/fontawesome-svg-core": "^1.2.35",
-		"@fortawesome/pro-light-svg-icons": "^5.15.3",
-		"@fortawesome/pro-regular-svg-icons": "^5.15.3",
-		"@fortawesome/pro-solid-svg-icons": "^5.15.3",
-		"@fortawesome/react-fontawesome": "^0.1.14"
-	}
+{
+    "name": "@mackin.com/styleguide",
+    "version": "8.6.0",
+    "description": "",
+    "main": "./index.js",
+    "types": "./index.d.ts",
+    "scripts": {},
+    "author": "Mackin",
+    "license": "ISC",
+    "devDependencies": {},
+    "dependencies": {},
+    "optionalDependencies": {
+        "react-router-dom": "^5.3.0",
+        "react-tiny-popover": "^7.0.1",
+        "react-slider": "^1.3.1"
+    },
+    "peerDependencies": {
+        "nanoid": "^3.1.23",
+        "date-fns": "^2.13.0",
+        "lodash": "^4.17.15",
+        "react": "^17.0.2",
+        "@emotion/css": "^11.1.3",
+        "@fortawesome/fontawesome-svg-core": "^1.2.35",
+        "@fortawesome/pro-light-svg-icons": "^5.15.3",
+        "@fortawesome/pro-regular-svg-icons": "^5.15.3",
+        "@fortawesome/pro-solid-svg-icons": "^5.15.3",
+        "@fortawesome/react-fontawesome": "^0.1.14"
+    }
 }