@availity/mui-tabs 0.1.8 → 0.1.10

package/CHANGELOG.md

@@ -2,6 +2,16 @@
 
 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
+
+* `mui-divider` updated to version `0.1.8`
 ## [0.1.8](https://github.com/Availity/element/compare/@availity/mui-tabs@0.1.7...@availity/mui-tabs@0.1.8) (2024-04-04)
 
 ### Dependency Updates

package/dist/index.d.mts

@@ -0,0 +1,30 @@
+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';
+
+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' | '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' | '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

@@ -27,4 +27,4 @@ interface TabsProps extends Omit<TabsProps$1, 'centered' | 'centerRipple' | 'foc
 }
 declare const Tabs: ({ children, ...rest }: TabsProps) => JSX.Element;
 
-export { Tab, TabContext, TabContextProps, TabList, TabListProps, TabPanel, TabPanelProps, TabProps, Tabs, TabsProps };
+export { Tab, TabContext, type TabContextProps, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Tabs, type TabsProps };

package/dist/index.js

@@ -1,10 +1,39 @@
 "use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -18,6 +47,10 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));
@@ -38,56 +71,39 @@ module.exports = __toCommonJS(src_exports);
 var import_Tab = __toESM(require("@mui/material/Tab"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var Tab = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Tab.default, {
-    ...props,
-    disableRipple: true,
-    disableFocusRipple: true,
-    disableTouchRipple: true
-  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Tab.default, __spreadProps(__spreadValues({}, props), { disableRipple: true, disableFocusRipple: true, disableTouchRipple: true }));
 };
 
 // src/lib/TabContext.tsx
 var import_TabContext = __toESM(require("@mui/lab/TabContext"));
-var import_jsx_runtime = require("react/jsx-runtime");
-var TabContext = ({ children, ...rest }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TabContext.default, {
-    ...rest,
-    children
-  });
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var TabContext = (_a) => {
+  var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_TabContext.default, __spreadProps(__spreadValues({}, rest), { children }));
 };
 
 // src/lib/TabList.tsx
 var import_TabList = __toESM(require("@mui/lab/TabList"));
-var import_jsx_runtime = require("react/jsx-runtime");
-var TabList = ({ children, ...rest }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TabList.default, {
-    ...rest,
-    orientation: "horizontal",
-    centered: false,
-    children
-  });
+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 }));
 };
 
 // src/lib/TabPanel.tsx
 var import_TabPanel = __toESM(require("@mui/lab/TabPanel"));
-var import_jsx_runtime = require("react/jsx-runtime");
-var TabPanel = ({ children, ...rest }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TabPanel.default, {
-    ...rest,
-    children
-  });
+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 }));
 };
 
 // src/lib/Tabs.tsx
 var import_Tabs = __toESM(require("@mui/material/Tabs"));
-var import_jsx_runtime = require("react/jsx-runtime");
-var Tabs = ({ children, ...rest }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Tabs.default, {
-    ...rest,
-    orientation: "horizontal",
-    centered: false,
-    children
-  });
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var Tabs = (_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 }));
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/index.mjs

@@ -1,57 +1,72 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+
 // src/lib/Tab.tsx
 import { default as MuiTab } from "@mui/material/Tab";
 import { jsx } from "react/jsx-runtime";
 var Tab = (props) => {
-  return /* @__PURE__ */ jsx(MuiTab, {
-    ...props,
-    disableRipple: true,
-    disableFocusRipple: true,
-    disableTouchRipple: true
-  });
+  return /* @__PURE__ */ jsx(MuiTab, __spreadProps(__spreadValues({}, props), { disableRipple: true, disableFocusRipple: true, disableTouchRipple: true }));
 };
 
 // src/lib/TabContext.tsx
 import { default as MuiTabContext } from "@mui/lab/TabContext";
 import { jsx as jsx2 } from "react/jsx-runtime";
-var TabContext = ({ children, ...rest }) => {
-  return /* @__PURE__ */ jsx2(MuiTabContext, {
-    ...rest,
-    children
-  });
+var TabContext = (_a) => {
+  var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
+  return /* @__PURE__ */ jsx2(MuiTabContext, __spreadProps(__spreadValues({}, rest), { children }));
 };
 
 // src/lib/TabList.tsx
 import { default as MuiTabList } from "@mui/lab/TabList";
 import { jsx as jsx3 } from "react/jsx-runtime";
-var TabList = ({ children, ...rest }) => {
-  return /* @__PURE__ */ jsx3(MuiTabList, {
-    ...rest,
-    orientation: "horizontal",
-    centered: false,
-    children
-  });
+var TabList = (_a) => {
+  var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
+  return /* @__PURE__ */ jsx3(MuiTabList, __spreadProps(__spreadValues({}, rest), { orientation: "horizontal", centered: false, children }));
 };
 
 // src/lib/TabPanel.tsx
 import { default as MuiTabPanel } from "@mui/lab/TabPanel";
 import { jsx as jsx4 } from "react/jsx-runtime";
-var TabPanel = ({ children, ...rest }) => {
-  return /* @__PURE__ */ jsx4(MuiTabPanel, {
-    ...rest,
-    children
-  });
+var TabPanel = (_a) => {
+  var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
+  return /* @__PURE__ */ jsx4(MuiTabPanel, __spreadProps(__spreadValues({}, rest), { children }));
 };
 
 // src/lib/Tabs.tsx
 import { default as MuiTabs } from "@mui/material/Tabs";
 import { jsx as jsx5 } from "react/jsx-runtime";
-var Tabs = ({ children, ...rest }) => {
-  return /* @__PURE__ */ jsx5(MuiTabs, {
-    ...rest,
-    orientation: "horizontal",
-    centered: false,
-    children
-  });
+var Tabs = (_a) => {
+  var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
+  return /* @__PURE__ */ jsx5(MuiTabs, __spreadProps(__spreadValues({}, rest), { orientation: "horizontal", centered: false, children }));
 };
 export {
   Tab,

package/jest.config.js

@@ -4,4 +4,14 @@ module.exports = {
   ...global,
   displayName: 'tabs',
   coverageDirectory: '../../coverage/tabs',
+  /* TODO: Update to latest Jest snapshotFormat
+   * By default Nx has kept the older style of Jest Snapshot formats
+   * to prevent breaking of any existing tests with snapshots.
+   * It's recommend you update to the latest format.
+   * You can do this by removing snapshotFormat property
+   * and running tests with --update-snapshot flag.
+   * Example: From within the project directory, run "nx test --update-snapshot"
+   * More info: https://jestjs.io/docs/upgrading-to-jest29#snapshot-format
+   */
+  snapshotFormat: { escapeString: true, printBasicPrototype: true },
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-tabs",
-  "version": "0.1.8",
+  "version": "0.1.10",
   "description": "Availity MUI Tabs Component - part of the @availity/element design system",
   "keywords": [
     "react",
@@ -35,12 +35,12 @@
     "@mui/lab": "^5.0.0-alpha.147"
   },
   "devDependencies": {
-    "@availity/mui-divider": "^0.3.6",
-    "@mui/material": "^5.14.12",
+    "@availity/mui-divider": "^0.4.0",
+    "@mui/material": "^5.15.15",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "tsup": "^5.12.7",
-    "typescript": "^4.6.4"
+    "tsup": "^8.0.2",
+    "typescript": "^5.4.5"
   },
   "peerDependencies": {
     "@mui/material": "^5.11.9",

package/project.json

@@ -6,10 +6,9 @@
   "tags": [],
   "targets": {
     "lint": {
-      "executor": "@nrwl/linter:eslint",
+      "executor": "@nx/eslint:lint",
       "options": {
         "eslintConfig": ".eslintrc.json",
-        "lintFilePatterns": ["packages/tabs/**/*.{js,ts}"],
         "silent": false,
         "fix": false,
         "cache": true,
@@ -22,20 +21,20 @@
       }
     },
     "test": {
-      "executor": "@nrwl/jest:jest",
-      "outputs": ["coverage/tabs"],
+      "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/tabs"],
       "options": {
-        "jestConfig": "packages/tabs/jest.config.js",
-        "passWithNoTests": true
+        "jestConfig": "packages/tabs/jest.config.js"
       }
     },
     "version": {
       "executor": "@jscutlery/semver:version",
       "options": {
         "preset": "conventional",
-        "commitMessageFormat": "chore(${projectName}): release version ${version} [skip ci]",
-        "tagPrefix": "@availity/${projectName}@",
-        "trackDeps": true
+        "commitMessageFormat": "chore({projectName}): release version ${version} [skip ci]",
+        "tagPrefix": "@availity/{projectName}@",
+        "trackDeps": true,
+        "skipCommitTypes": ["docs"]
       }
     }
   }

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',
+  },
 };