@availity/mui-tabs 1.0.1 → 1.1.0

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [1.1.0](https://github.com/Availity/element/compare/@availity/mui-tabs@1.0.1...@availity/mui-tabs@1.1.0) (2025-03-13)
+
+
+### Features
+
+* **mui-tabs:** add secondary tabs ([8cfca7c](https://github.com/Availity/element/commit/8cfca7ce2d8b1dd6b8ccd7bbed2ddb506b159f38))
+
 ## [1.0.1](https://github.com/Availity/element/compare/@availity/mui-tabs@1.0.0...@availity/mui-tabs@1.0.1) (2025-03-07)
 
 ### Dependency Updates

package/dist/index.d.mts

@@ -1,10 +1,10 @@
 import { TabProps as TabProps$1 } from '@mui/material/Tab';
 import { TabContextProps as TabContextProps$1 } from '@mui/lab/TabContext';
 import { TabListProps as TabListProps$1 } from '@mui/lab/TabList';
-import { TabPanelProps as TabPanelProps$1 } from '@mui/lab/TabPanel';
 import { TabsProps as TabsProps$1 } from '@mui/material/Tabs';
+import { TabPanelProps as TabPanelProps$1 } from '@mui/lab/TabPanel';
 
-type TabProps = Omit<TabProps$1, 'centerRipple' | 'disableFocusRipple' | 'disableRipple' | 'disableTouchRipple' | 'focusRipple' | 'icon' | 'iconPosition' | 'TouchRippleProps'>;
+type TabProps = Omit<TabProps$1, 'centerRipple' | 'disableFocusRipple' | 'disableRipple' | 'disableTouchRipple' | 'focusRipple' | 'icon' | 'iconPosition' | 'touchRippleRef' | 'TouchRippleProps'>;
 declare const Tab: (props: TabProps) => JSX.Element;
 
 interface TabContextProps extends TabContextProps$1 {
@@ -12,19 +12,18 @@ interface TabContextProps extends TabContextProps$1 {
 }
 declare const TabContext: ({ children, ...rest }: TabContextProps) => JSX.Element;
 
-interface TabListProps extends Omit<TabListProps$1, 'centered' | 'centerRipple' | 'focusRipple' | 'orientation' | 'TouchRippleProps' | 'touchRippleRef'> {
-    children?: React.ReactNode;
+interface TabsProps extends Omit<TabsProps$1, 'centered' | 'centerRipple' | 'focusRipple' | 'orientation' | 'TouchRippleProps' | 'touchRippleRef'> {
+    /** The hierarchy level of the tabs, i.e. `primary` for top level tabs, `secondary` for inner tabs. */
+    level?: "primary" | "secondary";
 }
-declare const TabList: ({ children, ...rest }: TabListProps) => JSX.Element;
+declare const Tabs: ({ level, ...rest }: TabsProps) => JSX.Element;
+
+type TabListProps = Omit<TabListProps$1, 'centered' | 'centerRipple' | 'focusRipple' | 'orientation' | 'TouchRippleProps' | 'touchRippleRef'> & Pick<TabsProps, 'level'>;
+declare const TabList: ({ level, ...rest }: TabListProps) => JSX.Element;
 
 interface TabPanelProps extends TabPanelProps$1 {
     children?: React.ReactNode;
 }
 declare const TabPanel: ({ children, ...rest }: TabPanelProps) => JSX.Element;
 
-interface TabsProps extends Omit<TabsProps$1, 'centered' | 'centerRipple' | 'focusRipple' | 'orientation' | 'TouchRippleProps' | 'touchRippleRef'> {
-    children?: React.ReactNode;
-}
-declare const Tabs: ({ children, ...rest }: TabsProps) => JSX.Element;
-
 export { Tab, TabContext, type TabContextProps, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Tabs, type TabsProps };

package/dist/index.d.ts

@@ -1,10 +1,10 @@
 import { TabProps as TabProps$1 } from '@mui/material/Tab';
 import { TabContextProps as TabContextProps$1 } from '@mui/lab/TabContext';
 import { TabListProps as TabListProps$1 } from '@mui/lab/TabList';
-import { TabPanelProps as TabPanelProps$1 } from '@mui/lab/TabPanel';
 import { TabsProps as TabsProps$1 } from '@mui/material/Tabs';
+import { TabPanelProps as TabPanelProps$1 } from '@mui/lab/TabPanel';
 
-type TabProps = Omit<TabProps$1, 'centerRipple' | 'disableFocusRipple' | 'disableRipple' | 'disableTouchRipple' | 'focusRipple' | 'icon' | 'iconPosition' | 'TouchRippleProps'>;
+type TabProps = Omit<TabProps$1, 'centerRipple' | 'disableFocusRipple' | 'disableRipple' | 'disableTouchRipple' | 'focusRipple' | 'icon' | 'iconPosition' | 'touchRippleRef' | 'TouchRippleProps'>;
 declare const Tab: (props: TabProps) => JSX.Element;
 
 interface TabContextProps extends TabContextProps$1 {
@@ -12,19 +12,18 @@ interface TabContextProps extends TabContextProps$1 {
 }
 declare const TabContext: ({ children, ...rest }: TabContextProps) => JSX.Element;
 
-interface TabListProps extends Omit<TabListProps$1, 'centered' | 'centerRipple' | 'focusRipple' | 'orientation' | 'TouchRippleProps' | 'touchRippleRef'> {
-    children?: React.ReactNode;
+interface TabsProps extends Omit<TabsProps$1, 'centered' | 'centerRipple' | 'focusRipple' | 'orientation' | 'TouchRippleProps' | 'touchRippleRef'> {
+    /** The hierarchy level of the tabs, i.e. `primary` for top level tabs, `secondary` for inner tabs. */
+    level?: "primary" | "secondary";
 }
-declare const TabList: ({ children, ...rest }: TabListProps) => JSX.Element;
+declare const Tabs: ({ level, ...rest }: TabsProps) => JSX.Element;
+
+type TabListProps = Omit<TabListProps$1, 'centered' | 'centerRipple' | 'focusRipple' | 'orientation' | 'TouchRippleProps' | 'touchRippleRef'> & Pick<TabsProps, 'level'>;
+declare const TabList: ({ level, ...rest }: TabListProps) => JSX.Element;
 
 interface TabPanelProps extends TabPanelProps$1 {
     children?: React.ReactNode;
 }
 declare const TabPanel: ({ children, ...rest }: TabPanelProps) => JSX.Element;
 
-interface TabsProps extends Omit<TabsProps$1, 'centered' | 'centerRipple' | 'focusRipple' | 'orientation' | 'TouchRippleProps' | 'touchRippleRef'> {
-    children?: React.ReactNode;
-}
-declare const Tabs: ({ children, ...rest }: TabsProps) => JSX.Element;
-
 export { Tab, TabContext, type TabContextProps, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Tabs, type TabsProps };

package/dist/index.js

@@ -84,26 +84,77 @@ var TabContext = (_a) => {
 
 // src/lib/TabList.tsx
 var import_TabList = __toESM(require("@mui/lab/TabList"));
+
+// src/lib/Tabs.tsx
+var import_styles = require("@mui/material/styles");
+var import_Tabs = __toESM(require("@mui/material/Tabs"));
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var TabList = (_a) => {
-  var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_TabList.default, __spreadProps(__spreadValues({}, rest), { orientation: "horizontal", centered: false, children }));
+var secondaryTabStyling = ({ theme }) => ({
+  ".MuiTabs-indicator": {
+    display: "none"
+  },
+  ".MuiTab-root": {
+    borderTopLeftRadius: ".25rem",
+    borderTopRightRadius: ".25rem",
+    border: "1px solid",
+    borderColor: "transparent",
+    marginBottom: "-1px",
+    "&:hover, &:hover.Mui-selected": {
+      backgroundColor: theme.palette.action.hover
+    },
+    "&.Mui-focusVisible": {
+      outline: `2px solid ${theme.palette.primary.main}`,
+      backgroundColor: "inherit",
+      outlineOffset: "-2px"
+    },
+    "&.Mui-selected": {
+      backgroundColor: theme.palette.background.paper,
+      borderColor: theme.palette.divider,
+      borderBottomColor: theme.palette.background.paper
+    }
+  }
+});
+var PrimaryTabs = (0, import_styles.styled)(import_Tabs.default, {
+  name: "MuiTabs",
+  slot: "AvPrimary",
+  overridesResolver: (props, styles) => styles.avPrimary
+})({});
+var SecondaryTabs = (0, import_styles.styled)(import_Tabs.default, {
+  name: "MuiTabs",
+  slot: "AvSecondary",
+  overridesResolver: (props, styles) => styles.avSecondary
+})(secondaryTabStyling);
+var Tabs = (_a) => {
+  var _b = _a, { level = "primary" } = _b, rest = __objRest(_b, ["level"]);
+  const LevelledTabs = level === "primary" ? PrimaryTabs : SecondaryTabs;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(LevelledTabs, __spreadProps(__spreadValues({}, rest), { orientation: "horizontal", centered: false }));
 };
 
-// src/lib/TabPanel.tsx
-var import_TabPanel = __toESM(require("@mui/lab/TabPanel"));
+// src/lib/TabList.tsx
+var import_styles2 = require("@mui/material/styles");
 var import_jsx_runtime4 = require("react/jsx-runtime");
-var TabPanel = (_a) => {
-  var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_TabPanel.default, __spreadProps(__spreadValues({}, rest), { children }));
+var PrimaryTabs2 = (0, import_styles2.styled)(import_TabList.default, {
+  name: "MuiTabs",
+  slot: "AvPrimary",
+  overridesResolver: (props, styles) => styles.avPrimary
+})({});
+var SecondaryTabs2 = (0, import_styles2.styled)(import_TabList.default, {
+  name: "MuiTabs",
+  slot: "AvSecondary",
+  overridesResolver: (props, styles) => styles.avSecondary
+})(secondaryTabStyling);
+var TabList = (_a) => {
+  var _b = _a, { level = "primary" } = _b, rest = __objRest(_b, ["level"]);
+  const LevelledTabs = level === "primary" ? PrimaryTabs2 : SecondaryTabs2;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(LevelledTabs, __spreadProps(__spreadValues({}, rest), { orientation: "horizontal", centered: false }));
 };
 
-// src/lib/Tabs.tsx
-var import_Tabs = __toESM(require("@mui/material/Tabs"));
+// src/lib/TabPanel.tsx
+var import_TabPanel = __toESM(require("@mui/lab/TabPanel"));
 var import_jsx_runtime5 = require("react/jsx-runtime");
-var Tabs = (_a) => {
+var TabPanel = (_a) => {
   var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_Tabs.default, __spreadProps(__spreadValues({}, rest), { orientation: "horizontal", centered: false, children }));
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_TabPanel.default, __spreadProps(__spreadValues({}, rest), { children }));
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/index.mjs

@@ -47,26 +47,77 @@ var TabContext = (_a) => {
 
 // src/lib/TabList.tsx
 import { default as MuiTabList } from "@mui/lab/TabList";
+
+// src/lib/Tabs.tsx
+import { styled } from "@mui/material/styles";
+import { default as MuiTabs } from "@mui/material/Tabs";
 import { jsx as jsx3 } from "react/jsx-runtime";
-var TabList = (_a) => {
-  var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ jsx3(MuiTabList, __spreadProps(__spreadValues({}, rest), { orientation: "horizontal", centered: false, children }));
+var secondaryTabStyling = ({ theme }) => ({
+  ".MuiTabs-indicator": {
+    display: "none"
+  },
+  ".MuiTab-root": {
+    borderTopLeftRadius: ".25rem",
+    borderTopRightRadius: ".25rem",
+    border: "1px solid",
+    borderColor: "transparent",
+    marginBottom: "-1px",
+    "&:hover, &:hover.Mui-selected": {
+      backgroundColor: theme.palette.action.hover
+    },
+    "&.Mui-focusVisible": {
+      outline: `2px solid ${theme.palette.primary.main}`,
+      backgroundColor: "inherit",
+      outlineOffset: "-2px"
+    },
+    "&.Mui-selected": {
+      backgroundColor: theme.palette.background.paper,
+      borderColor: theme.palette.divider,
+      borderBottomColor: theme.palette.background.paper
+    }
+  }
+});
+var PrimaryTabs = styled(MuiTabs, {
+  name: "MuiTabs",
+  slot: "AvPrimary",
+  overridesResolver: (props, styles) => styles.avPrimary
+})({});
+var SecondaryTabs = styled(MuiTabs, {
+  name: "MuiTabs",
+  slot: "AvSecondary",
+  overridesResolver: (props, styles) => styles.avSecondary
+})(secondaryTabStyling);
+var Tabs = (_a) => {
+  var _b = _a, { level = "primary" } = _b, rest = __objRest(_b, ["level"]);
+  const LevelledTabs = level === "primary" ? PrimaryTabs : SecondaryTabs;
+  return /* @__PURE__ */ jsx3(LevelledTabs, __spreadProps(__spreadValues({}, rest), { orientation: "horizontal", centered: false }));
 };
 
-// src/lib/TabPanel.tsx
-import { default as MuiTabPanel } from "@mui/lab/TabPanel";
+// src/lib/TabList.tsx
+import { styled as styled2 } from "@mui/material/styles";
 import { jsx as jsx4 } from "react/jsx-runtime";
-var TabPanel = (_a) => {
-  var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ jsx4(MuiTabPanel, __spreadProps(__spreadValues({}, rest), { children }));
+var PrimaryTabs2 = styled2(MuiTabList, {
+  name: "MuiTabs",
+  slot: "AvPrimary",
+  overridesResolver: (props, styles) => styles.avPrimary
+})({});
+var SecondaryTabs2 = styled2(MuiTabList, {
+  name: "MuiTabs",
+  slot: "AvSecondary",
+  overridesResolver: (props, styles) => styles.avSecondary
+})(secondaryTabStyling);
+var TabList = (_a) => {
+  var _b = _a, { level = "primary" } = _b, rest = __objRest(_b, ["level"]);
+  const LevelledTabs = level === "primary" ? PrimaryTabs2 : SecondaryTabs2;
+  return /* @__PURE__ */ jsx4(LevelledTabs, __spreadProps(__spreadValues({}, rest), { orientation: "horizontal", centered: false }));
 };
 
-// src/lib/Tabs.tsx
-import { default as MuiTabs } from "@mui/material/Tabs";
+// src/lib/TabPanel.tsx
+import { default as MuiTabPanel } from "@mui/lab/TabPanel";
 import { jsx as jsx5 } from "react/jsx-runtime";
-var Tabs = (_a) => {
+var TabPanel = (_a) => {
   var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ jsx5(MuiTabs, __spreadProps(__spreadValues({}, rest), { orientation: "horizontal", centered: false, children }));
+  return /* @__PURE__ */ jsx5(MuiTabPanel, __spreadProps(__spreadValues({}, rest), { children }));
 };
 export {
   Tab,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-tabs",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "Availity MUI Tabs Component - part of the @availity/element design system",
   "keywords": [
     "react",

package/src/index.ts

@@ -2,4 +2,5 @@ export * from './lib/Tab';
 export * from './lib/TabContext';
 export * from './lib/TabList';
 export * from './lib/TabPanel';
-export * from './lib/Tabs';
+export { Tabs } from './lib/Tabs';
+export type { TabsProps } from './lib/Tabs';

package/src/lib/Tab.tsx

@@ -9,6 +9,7 @@ export type TabProps = Omit<
   | 'focusRipple'
   | 'icon'
   | 'iconPosition'
+  | 'touchRippleRef'
   | 'TouchRippleProps'
 >;
 

package/src/lib/TabList.stories.tsx

@@ -10,6 +10,12 @@ import { TabPanel } from './TabPanel';
 const meta: Meta<typeof TabList> = {
   title: 'Components/Tabs/TabList',
   component: TabList,
+  argTypes: {
+    level: {
+      options: ['primary', 'secondary'],
+      control: { type: 'radio' },
+    },
+  },
   tags: ['autodocs'],
 };
 

package/src/lib/TabList.tsx

@@ -1,17 +1,27 @@
 import { default as MuiTabList, TabListProps as MuiTabListProps } from '@mui/lab/TabList';
+import { TabsProps, secondaryTabStyling } from './Tabs';
+import { styled } from '@mui/material/styles';
 
-export interface TabListProps
-  extends Omit<
+export type TabListProps = Omit<
     MuiTabListProps,
     'centered' | 'centerRipple' | 'focusRipple' | 'orientation' | 'TouchRippleProps' | 'touchRippleRef'
-  > {
-  children?: React.ReactNode;
-}
+  > & Pick<TabsProps, 'level'>
 
-export const TabList = ({ children, ...rest }: TabListProps): JSX.Element => {
+const PrimaryTabs = styled(MuiTabList, {
+  name: 'MuiTabs',
+  slot: 'AvPrimary',
+  overridesResolver: (props, styles) => styles.avPrimary,
+})({});
+
+const SecondaryTabs = styled(MuiTabList, {
+  name: 'MuiTabs',
+  slot: 'AvSecondary',
+  overridesResolver: (props, styles) => styles.avSecondary,
+})<{ ownerState: MuiTabListProps }>(secondaryTabStyling);
+
+export const TabList = ({ level = 'primary', ...rest }: TabListProps): JSX.Element => {
+  const LevelledTabs = level === 'primary' ? PrimaryTabs : SecondaryTabs;
   return (
-    <MuiTabList {...rest} orientation="horizontal" centered={false}>
-      {children}
-    </MuiTabList>
+    <LevelledTabs {...rest} orientation="horizontal" centered={false}/>
   );
 };

package/src/lib/Tabs.stories.tsx

@@ -10,6 +10,12 @@ import { Tab } from './Tab';
 const meta: Meta<typeof Tabs> = {
   title: 'Components/Tabs/Tabs',
   component: Tabs,
+  argTypes: {
+    level: {
+      options: ['primary', 'secondary'],
+      control: { type: 'radio' },
+    },
+  },
   tags: ['autodocs'],
 };
 
@@ -40,7 +46,7 @@ function CustomTabPanel(props: TabPanelProps) {
     >
       {value === index && (
         <Box sx={{ p: 3 }}>
-          <Typography>Hello from panel {index}</Typography>
+          <Typography>Hello from panel {index + 1}</Typography>
         </Box>
       )}
     </div>
@@ -94,3 +100,37 @@ export const _TabsScrollable: StoryObj<typeof Tabs> = {
     variant: 'scrollable',
   },
 };
+
+/** There is a hierarchy for tab styling. Most tabs will have the primary level styling while nested tabs have the secondary level styling. */
+export const _Levels: StoryObj<typeof Tabs> = {
+  render: () => {
+    return (
+      <Box sx={{ p: 3, backgroundColor: 'background.paper' }}>
+        <Tabs level="primary" value={0} onChange={() => {}}>
+          <Tab label="Item One" {...a11yProps(0)} />
+          <Tab label="Item Two" {...a11yProps(1)} />
+          <Tab label="Item Three" {...a11yProps(2)} disabled />
+        </Tabs>
+          <div
+            role="tabpanel"
+            id={`simple-tabpanel-0`}
+            aria-labelledby={`simple-tab-0`}
+          >
+            <Box sx={{ p: 3 }}>
+              <Typography sx={{mb: 2}}>Hello from panel 1</Typography>
+              <Tabs level="secondary" value={1} onChange={()=> {}} >
+                <Tab label="Item Four" {...a11yProps(3)} />
+                <Tab label="Item Five" {...a11yProps(4)} />
+                <Tab label="Item Six" {...a11yProps(5)} disabled />
+              </Tabs>
+              <CustomTabPanel value={4} index={3} />
+              <CustomTabPanel value={4} index={4} />
+              <CustomTabPanel value={4} index={5} />
+            </Box>
+          </div>
+          <CustomTabPanel value={0} index={1} />
+          <CustomTabPanel value={0} index={2} />
+      </Box>
+    );
+  },
+};

package/src/lib/Tabs.tsx

@@ -1,3 +1,5 @@
+import { styled } from '@mui/material/styles';
+import type { Theme } from '@mui/material/styles';
 import { default as MuiTabs, TabsProps as MuiTabsProps } from '@mui/material/Tabs';
 
 export interface TabsProps
@@ -5,13 +7,52 @@ export interface TabsProps
     MuiTabsProps,
     'centered' | 'centerRipple' | 'focusRipple' | 'orientation' | 'TouchRippleProps' | 'touchRippleRef'
   > {
-  children?: React.ReactNode;
+  /** The hierarchy level of the tabs, i.e. `primary` for top level tabs, `secondary` for inner tabs. */
+  level?: "primary" | "secondary";
 }
 
-export const Tabs = ({ children, ...rest }: TabsProps): JSX.Element => {
+export const secondaryTabStyling = ({theme}: {theme:Theme} ) => ({
+  '.MuiTabs-indicator': {
+    display: 'none'
+  },
+  '.MuiTab-root': {
+    borderTopLeftRadius: '.25rem',
+    borderTopRightRadius: '.25rem',
+    border: '1px solid',
+    borderColor: 'transparent',
+    marginBottom: '-1px',
+    '&:hover, &:hover.Mui-selected': {
+      backgroundColor: theme.palette.action.hover,
+    },
+    '&.Mui-focusVisible': {
+      outline: `2px solid ${theme.palette.primary.main}`,
+      backgroundColor: 'inherit',
+      outlineOffset: '-2px',
+    },
+    '&.Mui-selected': {
+      backgroundColor: theme.palette.background.paper,
+      borderColor: theme.palette.divider,
+      borderBottomColor: theme.palette.background.paper,
+    },
+  },
+});
+
+const PrimaryTabs = styled(MuiTabs, {
+  name: 'MuiTabs',
+  slot: 'AvPrimary',
+  overridesResolver: (props, styles) => styles.avPrimary,
+})({});
+
+const SecondaryTabs = styled(MuiTabs, {
+  name: 'MuiTabs',
+  slot: 'AvSecondary',
+  overridesResolver: (props, styles) => styles.avSecondary,
+})<{ ownerState: MuiTabsProps }>(secondaryTabStyling);
+
+export const Tabs = ({level = "primary", ...rest}: TabsProps): JSX.Element => {
+  const LevelledTabs = level === 'primary' ? PrimaryTabs : SecondaryTabs;
+
   return (
-    <MuiTabs {...rest} orientation="horizontal" centered={false}>
-      {children}
-    </MuiTabs>
+    <LevelledTabs {...rest} orientation="horizontal" centered={false}/>
   );
 };