@availity/mui-tabs 0.1.0 → 0.1.2

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [0.1.2](https://github.com/Availity/element/compare/@availity/mui-tabs@0.1.1...@availity/mui-tabs@0.1.2) (2023-08-22)
+
+
+### Bug Fixes
+
+* **mui-tabs:** export subcomponents ([f06759f](https://github.com/Availity/element/commit/f06759fa83a32aa8f7f549fa0011ab4fe183e77a))
+
+## [0.1.1](https://github.com/Availity/element/compare/@availity/mui-tabs@0.1.0...@availity/mui-tabs@0.1.1) (2023-08-16)
+
+
+### Bug Fixes
+
+* **mui-tabs:** fix invalid ARIA attributes in Tab stories ([483b1ad](https://github.com/Availity/element/commit/483b1ad0fd30025cbce96e03dec0e496467f75ef))
+
 ## 0.1.0 (2023-07-14)
 
 

package/dist/index.d.ts

@@ -1,8 +1,27 @@
-import { TabsProps as TabsProps$1 } from '@mui/material';
+import { TabProps as TabProps$1, TabsProps as TabsProps$1 } from '@mui/material';
+import { TabContextProps as TabContextProps$1, TabListProps as TabListProps$1, TabPanelProps as TabPanelProps$1 } from '@mui/lab';
+
+type TabProps = Omit<TabProps$1, 'centerRipple' | 'disableFocusRipple' | 'disableRipple' | 'disableTouchRipple' | 'focusRipple' | 'icon' | 'iconPosition' | 'TouchRippleProps'>;
+declare const Tab: (props: TabProps) => JSX.Element;
+
+interface TabContextProps extends TabContextProps$1 {
+    children?: React.ReactNode;
+}
+declare const TabContext: ({ children, ...rest }: TabContextProps) => JSX.Element;
+
+interface TabListProps extends Omit<TabListProps$1, 'centered' | 'centerRipple' | 'disableRipple' | 'disableTouchRipple' | 'focusRipple' | 'orientation' | 'TouchRippleProps' | 'touchRippleRef'> {
+    children?: React.ReactNode;
+}
+declare const TabList: ({ children, ...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' | 'disableFocusRipple' | 'disableRipple' | 'disableTouchRipple' | 'focusRipple' | 'orientation' | 'TouchRippleProps' | 'touchRippleRef'> {
     children?: React.ReactNode;
 }
 declare const Tabs: ({ children, ...rest }: TabsProps) => JSX.Element;
 
-export { Tabs, TabsProps };
+export { Tab, TabContext, TabContextProps, TabList, TabListProps, TabPanel, TabPanelProps, TabProps, Tabs, TabsProps };

package/dist/index.js

@@ -20,15 +20,65 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
+  Tab: () => Tab,
+  TabContext: () => TabContext,
+  TabList: () => TabList,
+  TabPanel: () => TabPanel,
   Tabs: () => Tabs
 });
 module.exports = __toCommonJS(src_exports);
 
-// src/lib/Tabs.tsx
+// src/lib/Tab.tsx
 var import_material = require("@mui/material");
 var import_jsx_runtime = require("react/jsx-runtime");
+var Tab = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Tab, {
+    ...props,
+    disableRipple: true,
+    disableFocusRipple: true,
+    disableTouchRipple: true
+  });
+};
+
+// src/lib/TabContext.tsx
+var import_lab = require("@mui/lab");
+var import_jsx_runtime = require("react/jsx-runtime");
+var TabContext = ({ children, ...rest }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lab.TabContext, {
+    ...rest,
+    children
+  });
+};
+
+// src/lib/TabList.tsx
+var import_lab2 = require("@mui/lab");
+var import_jsx_runtime = require("react/jsx-runtime");
+var TabList = ({ children, ...rest }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lab2.TabList, {
+    ...rest,
+    disableRipple: true,
+    disableTouchRipple: true,
+    orientation: "horizontal",
+    centered: false,
+    children
+  });
+};
+
+// src/lib/TabPanel.tsx
+var import_lab3 = require("@mui/lab");
+var import_jsx_runtime = require("react/jsx-runtime");
+var TabPanel = ({ children, ...rest }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lab3.TabPanel, {
+    ...rest,
+    children
+  });
+};
+
+// src/lib/Tabs.tsx
+var import_material2 = require("@mui/material");
+var import_jsx_runtime = require("react/jsx-runtime");
 var Tabs = ({ children, ...rest }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Tabs, {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material2.Tabs, {
     ...rest,
     disableRipple: true,
     disableTouchRipple: true,
@@ -39,5 +89,9 @@ var Tabs = ({ children, ...rest }) => {
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  Tab,
+  TabContext,
+  TabList,
+  TabPanel,
   Tabs
 });

package/dist/index.mjs

@@ -1,8 +1,54 @@
+// src/lib/Tab.tsx
+import { Tab as MuiTab } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+var Tab = (props) => {
+  return /* @__PURE__ */ jsx(MuiTab, {
+    ...props,
+    disableRipple: true,
+    disableFocusRipple: true,
+    disableTouchRipple: true
+  });
+};
+
+// src/lib/TabContext.tsx
+import { TabContext as MuiTabContext } from "@mui/lab";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var TabContext = ({ children, ...rest }) => {
+  return /* @__PURE__ */ jsx2(MuiTabContext, {
+    ...rest,
+    children
+  });
+};
+
+// src/lib/TabList.tsx
+import { TabList as MuiTabList } from "@mui/lab";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var TabList = ({ children, ...rest }) => {
+  return /* @__PURE__ */ jsx3(MuiTabList, {
+    ...rest,
+    disableRipple: true,
+    disableTouchRipple: true,
+    orientation: "horizontal",
+    centered: false,
+    children
+  });
+};
+
+// src/lib/TabPanel.tsx
+import { TabPanel as MuiTabPanel } from "@mui/lab";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var TabPanel = ({ children, ...rest }) => {
+  return /* @__PURE__ */ jsx4(MuiTabPanel, {
+    ...rest,
+    children
+  });
+};
+
 // src/lib/Tabs.tsx
 import { Tabs as MuiTabs } from "@mui/material";
-import { jsx } from "react/jsx-runtime";
+import { jsx as jsx5 } from "react/jsx-runtime";
 var Tabs = ({ children, ...rest }) => {
-  return /* @__PURE__ */ jsx(MuiTabs, {
+  return /* @__PURE__ */ jsx5(MuiTabs, {
     ...rest,
     disableRipple: true,
     disableTouchRipple: true,
@@ -12,5 +58,9 @@ var Tabs = ({ children, ...rest }) => {
   });
 };
 export {
+  Tab,
+  TabContext,
+  TabList,
+  TabPanel,
   Tabs
 };

package/package.json

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

package/src/index.ts

@@ -1 +1,5 @@
+export * from './lib/Tab';
+export * from './lib/TabContext';
+export * from './lib/TabList';
+export * from './lib/TabPanel';
 export * from './lib/Tabs';

package/src/lib/Tab.stories.tsx

@@ -2,6 +2,7 @@
 
 import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
+import { Box, Typography } from '@mui/material';
 import { Tabs } from './Tabs';
 import { Tab, TabProps } from './Tab';
 
@@ -22,17 +23,46 @@ function a11yProps(index: number) {
 
 export const _Tab: StoryObj<typeof Tab> = {
   render: (args: TabProps) => {
+    interface TabPanelProps {
+      children?: React.ReactNode;
+      index: number;
+      value: number;
+    }
     const [value, setValue] = useState(0);
 
     const handleChange = (event: React.SyntheticEvent, newValue: number) => {
       setValue(newValue);
     };
+    function CustomTabPanel(props: TabPanelProps) {
+      const { value, index, ...other } = props;
+
+      return (
+        <div
+          role="tabpanel"
+          hidden={value !== index}
+          id={`simple-tabpanel-${index}`}
+          aria-labelledby={`simple-tab-${index}`}
+          {...other}
+        >
+          {value === index && (
+            <Box sx={{ p: 3 }}>
+              <Typography>Hello from panel {index}</Typography>
+            </Box>
+          )}
+        </div>
+      );
+    }
     return (
-      <Tabs value={value} onChange={handleChange}>
-        <Tab label="Item One" {...args} {...a11yProps(0)} />
-        <Tab label="Item Two" {...args} {...a11yProps(1)} />
-        <Tab label="Item Three" {...args} {...a11yProps(2)} disabled />
-      </Tabs>
+      <>
+        <Tabs value={value} onChange={handleChange}>
+          <Tab label="Item One" {...args} {...a11yProps(0)} />
+          <Tab label="Item Two" {...args} {...a11yProps(1)} />
+          <Tab label="Item Three" {...args} {...a11yProps(2)} disabled />
+        </Tabs>
+        <CustomTabPanel value={value} index={0} />
+        <CustomTabPanel value={value} index={1} />
+        <CustomTabPanel value={value} index={2} />
+      </>
     );
   },
   args: {},

package/src/lib/TabList.stories.tsx

@@ -5,6 +5,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { TabList, TabListProps } from './TabList';
 import { Tab } from './Tab';
 import { TabContext } from './TabContext';
+import { TabPanel } from './TabPanel';
 
 const meta: Meta<typeof TabList> = {
   title: 'Components/Tabs/TabList',
@@ -28,6 +29,9 @@ export const _TabList: StoryObj<typeof TabList> = {
           <Tab label="Item Two" value="2" />
           <Tab label="Item Three" value="3" />
         </TabList>
+        <TabPanel value="1" children={`Hello from Panel ${value}`} />
+        <TabPanel value="2" children={`Hello from Panel ${value}`} />
+        <TabPanel value="3" children={`Hello from Panel ${value}`} />
       </TabContext>
     );
   },

package/src/lib/Tabs.stories.tsx

@@ -2,6 +2,7 @@
 
 import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
+import { Box, Typography } from '@mui/material';
 import { Tabs, TabsProps } from './Tabs';
 import { Tab } from './Tab';
 
@@ -22,17 +23,46 @@ function a11yProps(index: number) {
 
 export const _Tabs: StoryObj<typeof Tabs> = {
   render: (args: TabsProps) => {
+    interface TabPanelProps {
+      children?: React.ReactNode;
+      index: number;
+      value: number;
+    }
     const [value, setValue] = useState(0);
 
     const handleChange = (event: React.SyntheticEvent, newValue: number) => {
       setValue(newValue);
     };
+    function CustomTabPanel(props: TabPanelProps) {
+      const { value, index, ...other } = props;
+
+      return (
+        <div
+          role="tabpanel"
+          hidden={value !== index}
+          id={`simple-tabpanel-${index}`}
+          aria-labelledby={`simple-tab-${index}`}
+          {...other}
+        >
+          {value === index && (
+            <Box sx={{ p: 3 }}>
+              <Typography>Hello from panel {index}</Typography>
+            </Box>
+          )}
+        </div>
+      );
+    }
     return (
-      <Tabs {...args} value={value} onChange={handleChange}>
-        <Tab label="Item One" {...a11yProps(0)} />
-        <Tab label="Item Two" {...a11yProps(1)} />
-        <Tab label="Item Three" {...a11yProps(2)} />
-      </Tabs>
+      <>
+        <Tabs value={value} onChange={handleChange} {...args}>
+          <Tab label="Item One" {...a11yProps(0)} />
+          <Tab label="Item Two" {...a11yProps(1)} />
+          <Tab label="Item Three" {...a11yProps(2)} disabled />
+        </Tabs>
+        <CustomTabPanel value={value} index={0} />
+        <CustomTabPanel value={value} index={1} />
+        <CustomTabPanel value={value} index={2} />
+      </>
     );
   },
 };