@availity/mui-tabs 0.1.9 → 0.1.10

package/CHANGELOG.md

@@ -2,6 +2,11 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [0.1.10](https://github.com/Availity/element/compare/@availity/mui-tabs@0.1.9...@availity/mui-tabs@0.1.10) (2024-10-31)
+
+### Dependency Updates
+
+* `mui-divider` updated to version `0.1.9`
 ## [0.1.9](https://github.com/Availity/element/compare/@availity/mui-tabs@0.1.8...@availity/mui-tabs@0.1.9) (2024-04-19)
 
 ### Dependency Updates

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-tabs",
-  "version": "0.1.9",
+  "version": "0.1.10",
   "description": "Availity MUI Tabs Component - part of the @availity/element design system",
   "keywords": [
     "react",
@@ -35,7 +35,7 @@
     "@mui/lab": "^5.0.0-alpha.147"
   },
   "devDependencies": {
-    "@availity/mui-divider": "^0.3.7",
+    "@availity/mui-divider": "^0.4.0",
     "@mui/material": "^5.15.15",
     "react": "18.2.0",
     "react-dom": "18.2.0",

package/src/lib/Tab.stories.tsx

@@ -7,9 +7,9 @@ import Typography from '@mui/material/Typography';
 import { Tabs } from './Tabs';
 import { Tab, TabProps } from './Tab';
 
-const meta: Meta<typeof Tabs> = {
+const meta: Meta<typeof Tab> = {
   title: 'Components/Tabs/Tab',
-  component: Tabs,
+  component: Tab,
   tags: ['autodocs'],
 };
 

package/src/lib/TabContext.stories.tsx

@@ -1,6 +1,6 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
 // Each exported component in the package should have its own stories file
 
-import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { TabContext, TabContextProps } from './TabContext';
 import { Divider } from '@availity/mui-divider';
@@ -18,14 +18,9 @@ export default meta;
 
 export const _TabContext: StoryObj<typeof TabContext> = {
   render: (args: TabContextProps) => {
-    const [value, setValue] = useState('1');
-
-    const handleChange = (event: React.SyntheticEvent, newValue: string) => {
-      setValue(newValue);
-    };
     return (
-      <TabContext {...args} value={value}>
-        <TabList onChange={handleChange} aria-label="lab API tabs example">
+      <TabContext {...args}>
+        <TabList onChange={() => {}} aria-label="lab API tabs example">
           <Tab label="Item One" value="1" />
           <Tab label="Item Two" value="2" />
           <Tab label="Item Three" value="3" />
@@ -37,5 +32,7 @@ export const _TabContext: StoryObj<typeof TabContext> = {
       </TabContext>
     );
   },
-  args: {},
+  args: {
+    value: '1',
+  },
 };

package/src/lib/Tabs.stories.tsx

@@ -1,6 +1,6 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
 // Each exported component in the package should have its own stories file
 
-import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
@@ -22,48 +22,75 @@ function a11yProps(index: number) {
   };
 }
 
+interface TabPanelProps {
+  children?: React.ReactNode;
+  index: number;
+  value: number;
+}
+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>
+  );
+}
+
 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 (
+      <>
+        <Tabs value={args.value} onChange={() => {}} {...args}>
+          <Tab label="Item One" {...a11yProps(0)} />
+          <Tab label="Item Two" {...a11yProps(1)} />
+          <Tab label="Item Three" {...a11yProps(2)} disabled />
+        </Tabs>
+        <CustomTabPanel value={args.value} index={0} />
+        <CustomTabPanel value={args.value} index={1} />
+        <CustomTabPanel value={args.value} index={2} />
+      </>
+    );
+  },
+  args: {
+    value: 0,
+  },
+};
 
-      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>
-      );
-    }
+export const _TabsScrollable: StoryObj<typeof Tabs> = {
+  render: (args: TabsProps) => {
     return (
       <>
-        <Tabs value={value} onChange={handleChange} {...args}>
+        <Tabs value={args.value} onChange={() => {}} {...args}>
           <Tab label="Item One" {...a11yProps(0)} />
           <Tab label="Item Two" {...a11yProps(1)} />
           <Tab label="Item Three" {...a11yProps(2)} disabled />
+          <Tab label="Item Four" {...a11yProps(3)} disabled />
+          <Tab label="Item Five" {...a11yProps(4)} disabled />
+          <Tab label="Item Six" {...a11yProps(5)} disabled />
+          <Tab label="Item Seven" {...a11yProps(6)} disabled />
+          <Tab label="Item Eight" {...a11yProps(7)} disabled />
+          <Tab label="Item Nine" {...a11yProps(8)} disabled />
+          <Tab label="Item Ten" {...a11yProps(9)} disabled />
         </Tabs>
-        <CustomTabPanel value={value} index={0} />
-        <CustomTabPanel value={value} index={1} />
-        <CustomTabPanel value={value} index={2} />
+        <CustomTabPanel value={args.value} index={0} />
+        <CustomTabPanel value={args.value} index={1} />
+        <CustomTabPanel value={args.value} index={2} />
       </>
     );
   },
+  args: {
+    value: 0,
+    variant: 'scrollable',
+  },
 };