@transferwise/components 46.52.2 → 46.53.0

package/build/tabs/Tab.mjs

@@ -1,9 +1,10 @@
 import { clsx } from 'clsx';
-import PropTypes from 'prop-types';
 import { forwardRef, useRef, useEffect } from 'react';
+import { useEffectEvent } from '../common/hooks/useEffectEvent.mjs';
 import { jsx } from 'react/jsx-runtime';
 
-const Tab = /*#__PURE__*/forwardRef(({
+const noop = () => {};
+const Tab = /*#__PURE__*/forwardRef(function Tab({
   children,
   id,
   disabled,
@@ -12,21 +13,19 @@ const Tab = /*#__PURE__*/forwardRef(({
   onKeyDown,
   onClick,
   style,
-  focusTab
-}, reference) => {
+  focusTab = noop
+}, reference) {
+  const handleFocusTab = useEffectEvent(focusTab);
   const firstUpdate = useRef(true);
-  const checkFocus = () => {
+  useEffect(function checkFocus() {
     if (firstUpdate.current) {
       firstUpdate.current = false;
       return;
     }
-    if (selected && focusTab) {
-      focusTab();
+    if (selected) {
+      handleFocusTab();
     }
-  };
-  useEffect(() => {
-    checkFocus();
-  }, [selected]);
+  }, [handleFocusTab, selected]);
   return /*#__PURE__*/jsx("li", {
     ref: reference,
     className: clsx('tabs__tab', selected ? 'np-text-body-large-bold' : 'np-text-body-large', {
@@ -38,10 +37,10 @@ const Tab = /*#__PURE__*/forwardRef(({
     id: id,
     "aria-selected": selected ? 'true' : 'false',
     "aria-disabled": disabled ? 'true' : 'false',
-    "aria-controls": disabled ? null : panelId,
-    tabIndex: "0",
+    "aria-controls": disabled ? undefined : panelId,
+    tabIndex: 0,
     style: style,
-    onKeyDown: disabled ? null : onKeyDown,
+    onKeyDown: disabled ? undefined : onKeyDown,
     onClick: onClick,
     children: /*#__PURE__*/jsx("span", {
       className: "tabs__tab__content",
@@ -49,26 +48,6 @@ const Tab = /*#__PURE__*/forwardRef(({
     })
   });
 });
-Tab.defaultProps = {
-  disabled: false,
-  selected: false,
-  onClick: null,
-  style: null,
-  focusTab: null
-};
-Tab.propTypes = {
-  children: PropTypes.node.isRequired,
-  disabled: PropTypes.bool,
-  selected: PropTypes.bool,
-  id: PropTypes.string.isRequired,
-  panelId: PropTypes.string.isRequired,
-  style: PropTypes.shape({
-    width: PropTypes.string
-  }),
-  focusTab: PropTypes.func,
-  onKeyDown: PropTypes.func.isRequired,
-  onClick: PropTypes.func
-};
 
 export { Tab as default };
 //# sourceMappingURL=Tab.mjs.map

package/build/tabs/Tab.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tab.mjs","sources":["../../src/tabs/Tab.js"],"sourcesContent":["import { clsx } from 'clsx';\nimport PropTypes from 'prop-types';\nimport { forwardRef, useEffect, useRef } from 'react';\n\nconst Tab = forwardRef(\n  (\n    { children, id, disabled, panelId, selected, onKeyDown, onClick, style, focusTab },\n    reference,\n  ) => {\n    const firstUpdate = useRef(true);\n\n    const checkFocus = () => {\n      if (firstUpdate.current) {\n        firstUpdate.current = false;\n        return;\n      }\n\n      if (selected && focusTab) {\n        focusTab();\n      }\n    };\n\n    useEffect(() => {\n      checkFocus();\n    }, [selected]);\n\n    return (\n      <li\n        ref={reference}\n        className={clsx('tabs__tab', selected ? 'np-text-body-large-bold' : 'np-text-body-large', {\n          'tabs__tab--selected': selected,\n          clickable: !disabled,\n          disabled,\n        })}\n        role=\"tab\"\n        id={id}\n        aria-selected={selected ? 'true' : 'false'}\n        aria-disabled={disabled ? 'true' : 'false'}\n        aria-controls={disabled ? null : panelId}\n        tabIndex=\"0\"\n        style={style}\n        onKeyDown={disabled ? null : onKeyDown}\n        onClick={onClick}\n      >\n        <span className=\"tabs__tab__content\">{children}</span>\n      </li>\n    );\n  },\n);\n\nTab.defaultProps = {\n  disabled: false,\n  selected: false,\n  onClick: null,\n  style: null,\n  focusTab: null,\n};\n\nTab.propTypes = {\n  children: PropTypes.node.isRequired,\n  disabled: PropTypes.bool,\n  selected: PropTypes.bool,\n  id: PropTypes.string.isRequired,\n  panelId: PropTypes.string.isRequired,\n  style: PropTypes.shape({ width: PropTypes.string }),\n  focusTab: PropTypes.func,\n  onKeyDown: PropTypes.func.isRequired,\n  onClick: PropTypes.func,\n};\n\nexport default Tab;\n"],"names":["Tab","forwardRef","children","id","disabled","panelId","selected","onKeyDown","onClick","style","focusTab","reference","firstUpdate","useRef","checkFocus","current","useEffect","_jsx","ref","className","clsx","clickable","role","tabIndex","defaultProps","propTypes","PropTypes","node","isRequired","bool","string","shape","width","func"],"mappings":";;;;;AAIA,MAAMA,GAAG,gBAAGC,UAAU,CACpB,CACE;EAAEC,QAAQ;EAAEC,EAAE;EAAEC,QAAQ;EAAEC,OAAO;EAAEC,QAAQ;EAAEC,SAAS;EAAEC,OAAO;EAAEC,KAAK;AAAEC,EAAAA,QAAAA;AAAS,CAAC,EAClFC,SAAS,KACN;AACH,EAAA,MAAMC,WAAW,GAAGC,MAAM,CAAC,IAAI,CAAC,CAAA;EAEhC,MAAMC,UAAU,GAAGA,MAAM;IACvB,IAAIF,WAAW,CAACG,OAAO,EAAE;MACvBH,WAAW,CAACG,OAAO,GAAG,KAAK,CAAA;AAC3B,MAAA,OAAA;AACF,KAAA;IAEA,IAAIT,QAAQ,IAAII,QAAQ,EAAE;AACxBA,MAAAA,QAAQ,EAAE,CAAA;AACZ,KAAA;GACD,CAAA;AAEDM,EAAAA,SAAS,CAAC,MAAM;AACdF,IAAAA,UAAU,EAAE,CAAA;AACd,GAAC,EAAE,CAACR,QAAQ,CAAC,CAAC,CAAA;AAEd,EAAA,oBACEW,GAAA,CAAA,IAAA,EAAA;AACEC,IAAAA,GAAG,EAAEP,SAAU;IACfQ,SAAS,EAAEC,IAAI,CAAC,WAAW,EAAEd,QAAQ,GAAG,yBAAyB,GAAG,oBAAoB,EAAE;AACxF,MAAA,qBAAqB,EAAEA,QAAQ;MAC/Be,SAAS,EAAE,CAACjB,QAAQ;AACpBA,MAAAA,QAAAA;AACF,KAAC,CAAE;AACHkB,IAAAA,IAAI,EAAC,KAAK;AACVnB,IAAAA,EAAE,EAAEA,EAAG;AACP,IAAA,eAAA,EAAeG,QAAQ,GAAG,MAAM,GAAG,OAAQ;AAC3C,IAAA,eAAA,EAAeF,QAAQ,GAAG,MAAM,GAAG,OAAQ;AAC3C,IAAA,eAAA,EAAeA,QAAQ,GAAG,IAAI,GAAGC,OAAQ;AACzCkB,IAAAA,QAAQ,EAAC,GAAG;AACZd,IAAAA,KAAK,EAAEA,KAAM;AACbF,IAAAA,SAAS,EAAEH,QAAQ,GAAG,IAAI,GAAGG,SAAU;AACvCC,IAAAA,OAAO,EAAEA,OAAQ;AAAAN,IAAAA,QAAA,eAEjBe,GAAA,CAAA,MAAA,EAAA;AAAME,MAAAA,SAAS,EAAC,oBAAoB;AAAAjB,MAAAA,QAAA,EAAEA,QAAAA;KAAe,CAAA;AAAC,GACpD,CAAC,CAAA;AAET,CACF,EAAC;AAEDF,GAAG,CAACwB,YAAY,GAAG;AACjBpB,EAAAA,QAAQ,EAAE,KAAK;AACfE,EAAAA,QAAQ,EAAE,KAAK;AACfE,EAAAA,OAAO,EAAE,IAAI;AACbC,EAAAA,KAAK,EAAE,IAAI;AACXC,EAAAA,QAAQ,EAAE,IAAA;AACZ,CAAC,CAAA;AAEDV,GAAG,CAACyB,SAAS,GAAG;AACdvB,EAAAA,QAAQ,EAAEwB,SAAS,CAACC,IAAI,CAACC,UAAU;EACnCxB,QAAQ,EAAEsB,SAAS,CAACG,IAAI;EACxBvB,QAAQ,EAAEoB,SAAS,CAACG,IAAI;AACxB1B,EAAAA,EAAE,EAAEuB,SAAS,CAACI,MAAM,CAACF,UAAU;AAC/BvB,EAAAA,OAAO,EAAEqB,SAAS,CAACI,MAAM,CAACF,UAAU;AACpCnB,EAAAA,KAAK,EAAEiB,SAAS,CAACK,KAAK,CAAC;IAAEC,KAAK,EAAEN,SAAS,CAACI,MAAAA;AAAO,GAAC,CAAC;EACnDpB,QAAQ,EAAEgB,SAAS,CAACO,IAAI;AACxB1B,EAAAA,SAAS,EAAEmB,SAAS,CAACO,IAAI,CAACL,UAAU;EACpCpB,OAAO,EAAEkB,SAAS,CAACO,IAAAA;AACrB,CAAC;;;;"}
+{"version":3,"file":"Tab.mjs","sources":["../../src/tabs/Tab.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef, useEffect, useRef } from 'react';\nimport { useEffectEvent } from '../common/hooks/useEffectEvent';\n\nexport interface TabProps {\n  children?: React.ReactNode;\n  disabled?: boolean;\n  selected?: boolean;\n  id: string;\n  panelId: string;\n  style?: React.CSSProperties;\n  focusTab?: () => void;\n  onKeyDown: React.KeyboardEventHandler<HTMLLIElement>;\n  onClick?: React.MouseEventHandler<HTMLLIElement>;\n}\n\nconst noop = () => {};\n\nconst Tab = forwardRef(function Tab(\n  {\n    children,\n    id,\n    disabled,\n    panelId,\n    selected,\n    onKeyDown,\n    onClick,\n    style,\n    focusTab = noop,\n  }: TabProps,\n  reference: React.ForwardedRef<HTMLLIElement>,\n) {\n  const handleFocusTab = useEffectEvent(focusTab);\n  const firstUpdate = useRef(true);\n  useEffect(\n    function checkFocus() {\n      if (firstUpdate.current) {\n        firstUpdate.current = false;\n        return;\n      }\n\n      if (selected) {\n        handleFocusTab();\n      }\n    },\n    [handleFocusTab, selected],\n  );\n\n  return (\n    <li\n      ref={reference}\n      className={clsx('tabs__tab', selected ? 'np-text-body-large-bold' : 'np-text-body-large', {\n        'tabs__tab--selected': selected,\n        clickable: !disabled,\n        disabled,\n      })}\n      role=\"tab\"\n      id={id}\n      aria-selected={selected ? 'true' : 'false'}\n      aria-disabled={disabled ? 'true' : 'false'}\n      aria-controls={disabled ? undefined : panelId}\n      tabIndex={0}\n      style={style}\n      onKeyDown={disabled ? undefined : onKeyDown}\n      onClick={onClick}\n    >\n      <span className=\"tabs__tab__content\">{children}</span>\n    </li>\n  );\n});\n\nexport default Tab;\n"],"names":["noop","Tab","forwardRef","children","id","disabled","panelId","selected","onKeyDown","onClick","style","focusTab","reference","handleFocusTab","useEffectEvent","firstUpdate","useRef","useEffect","checkFocus","current","_jsx","ref","className","clsx","clickable","role","undefined","tabIndex"],"mappings":";;;;;AAgBA,MAAMA,IAAI,GAAGA,MAAK,EAAG,CAAA;AAErB,MAAMC,GAAG,gBAAGC,UAAU,CAAC,SAASD,GAAGA,CACjC;EACEE,QAAQ;EACRC,EAAE;EACFC,QAAQ;EACRC,OAAO;EACPC,QAAQ;EACRC,SAAS;EACTC,OAAO;EACPC,KAAK;AACLC,EAAAA,QAAQ,GAAGX,IAAAA;AAAI,CACN,EACXY,SAA4C,EAAA;AAE5C,EAAA,MAAMC,cAAc,GAAGC,cAAc,CAACH,QAAQ,CAAC,CAAA;AAC/C,EAAA,MAAMI,WAAW,GAAGC,MAAM,CAAC,IAAI,CAAC,CAAA;AAChCC,EAAAA,SAAS,CACP,SAASC,UAAUA,GAAA;IACjB,IAAIH,WAAW,CAACI,OAAO,EAAE;MACvBJ,WAAW,CAACI,OAAO,GAAG,KAAK,CAAA;AAC3B,MAAA,OAAA;AACF,KAAA;AAEA,IAAA,IAAIZ,QAAQ,EAAE;AACZM,MAAAA,cAAc,EAAE,CAAA;AAClB,KAAA;AACF,GAAC,EACD,CAACA,cAAc,EAAEN,QAAQ,CAAC,CAC3B,CAAA;AAED,EAAA,oBACEa,GAAA,CAAA,IAAA,EAAA;AACEC,IAAAA,GAAG,EAAET,SAAU;IACfU,SAAS,EAAEC,IAAI,CAAC,WAAW,EAAEhB,QAAQ,GAAG,yBAAyB,GAAG,oBAAoB,EAAE;AACxF,MAAA,qBAAqB,EAAEA,QAAQ;MAC/BiB,SAAS,EAAE,CAACnB,QAAQ;AACpBA,MAAAA,QAAAA;AACD,KAAA,CAAE;AACHoB,IAAAA,IAAI,EAAC,KAAK;AACVrB,IAAAA,EAAE,EAAEA,EAAG;AACP,IAAA,eAAA,EAAeG,QAAQ,GAAG,MAAM,GAAG,OAAQ;AAC3C,IAAA,eAAA,EAAeF,QAAQ,GAAG,MAAM,GAAG,OAAQ;AAC3C,IAAA,eAAA,EAAeA,QAAQ,GAAGqB,SAAS,GAAGpB,OAAQ;AAC9CqB,IAAAA,QAAQ,EAAE,CAAE;AACZjB,IAAAA,KAAK,EAAEA,KAAM;AACbF,IAAAA,SAAS,EAAEH,QAAQ,GAAGqB,SAAS,GAAGlB,SAAU;AAC5CC,IAAAA,OAAO,EAAEA,OAAQ;AAAAN,IAAAA,QAAA,eAEjBiB,GAAA,CAAA,MAAA,EAAA;AAAME,MAAAA,SAAS,EAAC,oBAAoB;AAAAnB,MAAAA,QAAA,EAAEA,QAAAA;KAAe,CAAA;AACvD,GAAI,CAAC,CAAA;AAET,CAAC;;;;"}

package/build/tabs/TabList.js

@@ -1,24 +1,16 @@
 'use strict';
 
-var PropTypes = require('prop-types');
 var jsxRuntime = require('react/jsx-runtime');
 
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
-
-const TabList = ({
+function TabList({
   children
-}) => {
+}) {
   return /*#__PURE__*/jsxRuntime.jsx("ul", {
     className: "tabs__tab-list",
     role: "tablist",
     children: children
   });
-};
-TabList.propTypes = {
-  children: PropTypes__default.default.oneOfType([PropTypes__default.default.object, PropTypes__default.default.array]).isRequired
-};
+}
 
 module.exports = TabList;
 //# sourceMappingURL=TabList.js.map

package/build/tabs/TabList.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabList.js","sources":["../../src/tabs/TabList.js"],"sourcesContent":["import PropTypes from 'prop-types';\n\nconst TabList = ({ children }) => {\n  return (\n    <ul className=\"tabs__tab-list\" role=\"tablist\">\n      {children}\n    </ul>\n  );\n};\n\nTabList.propTypes = {\n  children: PropTypes.oneOfType([PropTypes.object, PropTypes.array]).isRequired,\n};\n\nexport default TabList;\n"],"names":["TabList","children","_jsx","className","role","propTypes","PropTypes","oneOfType","object","array","isRequired"],"mappings":";;;;;;;;;AAEMA,MAAAA,OAAO,GAAGA,CAAC;AAAEC,EAAAA,QAAAA;AAAS,CAAC,KAAK;AAChC,EAAA,oBACEC,cAAA,CAAA,IAAA,EAAA;AAAIC,IAAAA,SAAS,EAAC,gBAAgB;AAACC,IAAAA,IAAI,EAAC,SAAS;AAAAH,IAAAA,QAAA,EAC1CA,QAAAA;AAAQ,GACP,CAAC,CAAA;AAET,EAAC;AAEDD,OAAO,CAACK,SAAS,GAAG;AAClBJ,EAAAA,QAAQ,EAAEK,0BAAS,CAACC,SAAS,CAAC,CAACD,0BAAS,CAACE,MAAM,EAAEF,0BAAS,CAACG,KAAK,CAAC,CAAC,CAACC,UAAAA;AACrE,CAAC;;;;"}
+{"version":3,"file":"TabList.js","sources":["../../src/tabs/TabList.tsx"],"sourcesContent":["export interface TabListProps {\n  children?: React.ReactNode;\n}\n\nexport default function TabList({ children }: TabListProps) {\n  return (\n    <ul className=\"tabs__tab-list\" role=\"tablist\">\n      {children}\n    </ul>\n  );\n}\n"],"names":["TabList","children","_jsx","className","role"],"mappings":";;;;AAIc,SAAUA,OAAOA,CAAC;AAAEC,EAAAA,QAAAA;AAAwB,CAAA,EAAA;AACxD,EAAA,oBACEC,cAAA,CAAA,IAAA,EAAA;AAAIC,IAAAA,SAAS,EAAC,gBAAgB;AAACC,IAAAA,IAAI,EAAC,SAAS;AAAAH,IAAAA,QAAA,EAC1CA,QAAAA;AAAQ,GACP,CAAC,CAAA;AAET;;;;"}

package/build/tabs/TabList.mjs

@@ -1,18 +1,14 @@
-import PropTypes from 'prop-types';
 import { jsx } from 'react/jsx-runtime';
 
-const TabList = ({
+function TabList({
   children
-}) => {
+}) {
   return /*#__PURE__*/jsx("ul", {
     className: "tabs__tab-list",
     role: "tablist",
     children: children
   });
-};
-TabList.propTypes = {
-  children: PropTypes.oneOfType([PropTypes.object, PropTypes.array]).isRequired
-};
+}
 
 export { TabList as default };
 //# sourceMappingURL=TabList.mjs.map

package/build/tabs/TabList.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TabList.mjs","sources":["../../src/tabs/TabList.js"],"sourcesContent":["import PropTypes from 'prop-types';\n\nconst TabList = ({ children }) => {\n  return (\n    <ul className=\"tabs__tab-list\" role=\"tablist\">\n      {children}\n    </ul>\n  );\n};\n\nTabList.propTypes = {\n  children: PropTypes.oneOfType([PropTypes.object, PropTypes.array]).isRequired,\n};\n\nexport default TabList;\n"],"names":["TabList","children","_jsx","className","role","propTypes","PropTypes","oneOfType","object","array","isRequired"],"mappings":";;;AAEMA,MAAAA,OAAO,GAAGA,CAAC;AAAEC,EAAAA,QAAAA;AAAS,CAAC,KAAK;AAChC,EAAA,oBACEC,GAAA,CAAA,IAAA,EAAA;AAAIC,IAAAA,SAAS,EAAC,gBAAgB;AAACC,IAAAA,IAAI,EAAC,SAAS;AAAAH,IAAAA,QAAA,EAC1CA,QAAAA;AAAQ,GACP,CAAC,CAAA;AAET,EAAC;AAEDD,OAAO,CAACK,SAAS,GAAG;AAClBJ,EAAAA,QAAQ,EAAEK,SAAS,CAACC,SAAS,CAAC,CAACD,SAAS,CAACE,MAAM,EAAEF,SAAS,CAACG,KAAK,CAAC,CAAC,CAACC,UAAAA;AACrE,CAAC;;;;"}
+{"version":3,"file":"TabList.mjs","sources":["../../src/tabs/TabList.tsx"],"sourcesContent":["export interface TabListProps {\n  children?: React.ReactNode;\n}\n\nexport default function TabList({ children }: TabListProps) {\n  return (\n    <ul className=\"tabs__tab-list\" role=\"tablist\">\n      {children}\n    </ul>\n  );\n}\n"],"names":["TabList","children","_jsx","className","role"],"mappings":";;AAIc,SAAUA,OAAOA,CAAC;AAAEC,EAAAA,QAAAA;AAAwB,CAAA,EAAA;AACxD,EAAA,oBACEC,GAAA,CAAA,IAAA,EAAA;AAAIC,IAAAA,SAAS,EAAC,gBAAgB;AAACC,IAAAA,IAAI,EAAC,SAAS;AAAAH,IAAAA,QAAA,EAC1CA,QAAAA;AAAQ,GACP,CAAC,CAAA;AAET;;;;"}

package/build/tabs/TabPanel.js

@@ -1,18 +1,13 @@
 'use strict';
 
-var PropTypes = require('prop-types');
 var jsxRuntime = require('react/jsx-runtime');
 
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
-
-const TabPanel = ({
+function TabPanel({
   children,
   id,
   tabId,
   style
-}) => {
+}) {
   return /*#__PURE__*/jsxRuntime.jsx("div", {
     className: "tabs__panel",
     role: "tabpanel",
@@ -21,15 +16,7 @@ const TabPanel = ({
     style: style,
     children: children
   });
-};
-TabPanel.propTypes = {
-  children: PropTypes__default.default.node.isRequired,
-  id: PropTypes__default.default.string.isRequired,
-  tabId: PropTypes__default.default.string.isRequired,
-  style: PropTypes__default.default.shape({
-    width: PropTypes__default.default.string.isRequired
-  }).isRequired
-};
+}
 
 module.exports = TabPanel;
 //# sourceMappingURL=TabPanel.js.map

package/build/tabs/TabPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabPanel.js","sources":["../../src/tabs/TabPanel.js"],"sourcesContent":["import PropTypes from 'prop-types';\n\nconst TabPanel = ({ children, id, tabId, style }) => {\n  return (\n    <div className=\"tabs__panel\" role=\"tabpanel\" id={id} aria-labelledby={tabId} style={style}>\n      {children}\n    </div>\n  );\n};\n\nTabPanel.propTypes = {\n  children: PropTypes.node.isRequired,\n  id: PropTypes.string.isRequired,\n  tabId: PropTypes.string.isRequired,\n  style: PropTypes.shape({\n    width: PropTypes.string.isRequired,\n  }).isRequired,\n};\n\nexport default TabPanel;\n"],"names":["TabPanel","children","id","tabId","style","_jsx","className","role","propTypes","PropTypes","node","isRequired","string","shape","width"],"mappings":";;;;;;;;;AAEMA,MAAAA,QAAQ,GAAGA,CAAC;EAAEC,QAAQ;EAAEC,EAAE;EAAEC,KAAK;AAAEC,EAAAA,KAAAA;AAAM,CAAC,KAAK;AACnD,EAAA,oBACEC,cAAA,CAAA,KAAA,EAAA;AAAKC,IAAAA,SAAS,EAAC,aAAa;AAACC,IAAAA,IAAI,EAAC,UAAU;AAACL,IAAAA,EAAE,EAAEA,EAAG;AAAC,IAAA,iBAAA,EAAiBC,KAAM;AAACC,IAAAA,KAAK,EAAEA,KAAM;AAAAH,IAAAA,QAAA,EACvFA,QAAAA;AAAQ,GACN,CAAC,CAAA;AAEV,EAAC;AAEDD,QAAQ,CAACQ,SAAS,GAAG;AACnBP,EAAAA,QAAQ,EAAEQ,0BAAS,CAACC,IAAI,CAACC,UAAU;AACnCT,EAAAA,EAAE,EAAEO,0BAAS,CAACG,MAAM,CAACD,UAAU;AAC/BR,EAAAA,KAAK,EAAEM,0BAAS,CAACG,MAAM,CAACD,UAAU;AAClCP,EAAAA,KAAK,EAAEK,0BAAS,CAACI,KAAK,CAAC;AACrBC,IAAAA,KAAK,EAAEL,0BAAS,CAACG,MAAM,CAACD,UAAAA;AAC1B,GAAC,CAAC,CAACA,UAAAA;AACL,CAAC;;;;"}
+{"version":3,"file":"TabPanel.js","sources":["../../src/tabs/TabPanel.tsx"],"sourcesContent":["export interface TabPanelProps {\n  children?: React.ReactNode;\n  id: string;\n  tabId: string;\n  style: React.CSSProperties;\n}\n\nexport default function TabPanel({ children, id, tabId, style }: TabPanelProps) {\n  return (\n    <div className=\"tabs__panel\" role=\"tabpanel\" id={id} aria-labelledby={tabId} style={style}>\n      {children}\n    </div>\n  );\n}\n"],"names":["TabPanel","children","id","tabId","style","_jsx","className","role"],"mappings":";;;;AAOwB,SAAAA,QAAQA,CAAC;EAAEC,QAAQ;EAAEC,EAAE;EAAEC,KAAK;AAAEC,EAAAA,KAAAA;AAAsB,CAAA,EAAA;AAC5E,EAAA,oBACEC,cAAA,CAAA,KAAA,EAAA;AAAKC,IAAAA,SAAS,EAAC,aAAa;AAACC,IAAAA,IAAI,EAAC,UAAU;AAACL,IAAAA,EAAE,EAAEA,EAAG;AAAC,IAAA,iBAAA,EAAiBC,KAAM;AAACC,IAAAA,KAAK,EAAEA,KAAM;AAAAH,IAAAA,QAAA,EACvFA,QAAAA;AAAQ,GACN,CAAC,CAAA;AAEV;;;;"}

package/build/tabs/TabPanel.mjs

@@ -1,12 +1,11 @@
-import PropTypes from 'prop-types';
 import { jsx } from 'react/jsx-runtime';
 
-const TabPanel = ({
+function TabPanel({
   children,
   id,
   tabId,
   style
-}) => {
+}) {
   return /*#__PURE__*/jsx("div", {
     className: "tabs__panel",
     role: "tabpanel",
@@ -15,15 +14,7 @@ const TabPanel = ({
     style: style,
     children: children
   });
-};
-TabPanel.propTypes = {
-  children: PropTypes.node.isRequired,
-  id: PropTypes.string.isRequired,
-  tabId: PropTypes.string.isRequired,
-  style: PropTypes.shape({
-    width: PropTypes.string.isRequired
-  }).isRequired
-};
+}
 
 export { TabPanel as default };
 //# sourceMappingURL=TabPanel.mjs.map

package/build/tabs/TabPanel.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TabPanel.mjs","sources":["../../src/tabs/TabPanel.js"],"sourcesContent":["import PropTypes from 'prop-types';\n\nconst TabPanel = ({ children, id, tabId, style }) => {\n  return (\n    <div className=\"tabs__panel\" role=\"tabpanel\" id={id} aria-labelledby={tabId} style={style}>\n      {children}\n    </div>\n  );\n};\n\nTabPanel.propTypes = {\n  children: PropTypes.node.isRequired,\n  id: PropTypes.string.isRequired,\n  tabId: PropTypes.string.isRequired,\n  style: PropTypes.shape({\n    width: PropTypes.string.isRequired,\n  }).isRequired,\n};\n\nexport default TabPanel;\n"],"names":["TabPanel","children","id","tabId","style","_jsx","className","role","propTypes","PropTypes","node","isRequired","string","shape","width"],"mappings":";;;AAEMA,MAAAA,QAAQ,GAAGA,CAAC;EAAEC,QAAQ;EAAEC,EAAE;EAAEC,KAAK;AAAEC,EAAAA,KAAAA;AAAM,CAAC,KAAK;AACnD,EAAA,oBACEC,GAAA,CAAA,KAAA,EAAA;AAAKC,IAAAA,SAAS,EAAC,aAAa;AAACC,IAAAA,IAAI,EAAC,UAAU;AAACL,IAAAA,EAAE,EAAEA,EAAG;AAAC,IAAA,iBAAA,EAAiBC,KAAM;AAACC,IAAAA,KAAK,EAAEA,KAAM;AAAAH,IAAAA,QAAA,EACvFA,QAAAA;AAAQ,GACN,CAAC,CAAA;AAEV,EAAC;AAEDD,QAAQ,CAACQ,SAAS,GAAG;AACnBP,EAAAA,QAAQ,EAAEQ,SAAS,CAACC,IAAI,CAACC,UAAU;AACnCT,EAAAA,EAAE,EAAEO,SAAS,CAACG,MAAM,CAACD,UAAU;AAC/BR,EAAAA,KAAK,EAAEM,SAAS,CAACG,MAAM,CAACD,UAAU;AAClCP,EAAAA,KAAK,EAAEK,SAAS,CAACI,KAAK,CAAC;AACrBC,IAAAA,KAAK,EAAEL,SAAS,CAACG,MAAM,CAACD,UAAAA;AAC1B,GAAC,CAAC,CAACA,UAAAA;AACL,CAAC;;;;"}
+{"version":3,"file":"TabPanel.mjs","sources":["../../src/tabs/TabPanel.tsx"],"sourcesContent":["export interface TabPanelProps {\n  children?: React.ReactNode;\n  id: string;\n  tabId: string;\n  style: React.CSSProperties;\n}\n\nexport default function TabPanel({ children, id, tabId, style }: TabPanelProps) {\n  return (\n    <div className=\"tabs__panel\" role=\"tabpanel\" id={id} aria-labelledby={tabId} style={style}>\n      {children}\n    </div>\n  );\n}\n"],"names":["TabPanel","children","id","tabId","style","_jsx","className","role"],"mappings":";;AAOwB,SAAAA,QAAQA,CAAC;EAAEC,QAAQ;EAAEC,EAAE;EAAEC,KAAK;AAAEC,EAAAA,KAAAA;AAAsB,CAAA,EAAA;AAC5E,EAAA,oBACEC,GAAA,CAAA,KAAA,EAAA;AAAKC,IAAAA,SAAS,EAAC,aAAa;AAACC,IAAAA,IAAI,EAAC,UAAU;AAACL,IAAAA,EAAE,EAAEA,EAAG;AAAC,IAAA,iBAAA,EAAiBC,KAAM;AAACC,IAAAA,KAAK,EAAEA,KAAM;AAAAH,IAAAA,QAAA,EACvFA,QAAAA;AAAQ,GACN,CAAC,CAAA;AAEV;;;;"}

package/build/tabs/Tabs.js

@@ -3,7 +3,6 @@
 var web = require('@react-spring/web');
 var clsx = require('clsx');
 var clamp = require('lodash.clamp');
-var PropTypes = require('prop-types');
 var React = require('react');
 var DirectionProvider = require('../provider/direction/DirectionProvider.js');
 var Tab = require('./Tab.js');
@@ -13,16 +12,12 @@ var utils = require('./utils.js');
 var jsxRuntime = require('react/jsx-runtime');
 var width = require('../common/propsValues/width.js');
 var direction = require('../common/direction.js');
-var size = require('../common/propsValues/size.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var clamp__default = /*#__PURE__*/_interopDefault(clamp);
-var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 
-/* eslint-disable react/forbid-dom-props */
 const MIN_INDEX = 0;
-const enabledTabsFilter = tab => !tab.disabled;
 const SpacerWidth = {
   default: 0,
   xs: 8,
@@ -31,7 +26,11 @@ const SpacerWidth = {
   lg: 32
 };
 class Tabs extends React.Component {
-  /** @type {React.RefObject<HTMLDivElement | null>} */
+  static defaultProps = {
+    changeTabOnSwipe: true,
+    transitionSpacing: 'default',
+    headerWidth: width.Width.BLOCK
+  };
   containerReference = /*#__PURE__*/React.createRef();
   constructor(props) {
     super(props);
@@ -45,14 +44,16 @@ class Tabs extends React.Component {
       isSwiping: false,
       isScrolling: false,
       lastSwipeVelocity: 0,
-      fullWidthTabs: props.headerWidth === width.Width.BLOCK
+      fullWidthTabs: props.headerWidth === width.Width.BLOCK,
+      currentSwipe: [],
+      selectedTabIndex: props.selected
     };
   }
   container = null;
   containerWidth = 0;
   tabRefs = [];
   get filteredTabsLength() {
-    return this.props.tabs.filter(enabledTabsFilter).length;
+    return this.props.tabs.filter(tab => !tab.disabled).length;
   }
   get MAX_INDEX() {
     return this.props.tabs.length - 1;
@@ -76,13 +77,13 @@ class Tabs extends React.Component {
     const currentSelected = this.props.selected;
     const previousSelected = previousProps.selected;
     const currentSelectedTab = this.props.tabs[currentSelected];
-    const currentSelectedTabIsDisabled = currentSelectedTab && currentSelectedTab.disabled;
+    const currentSelectedTabIsDisabled = currentSelectedTab?.disabled;
     const previousSelectedTab = previousProps.tabs[previousSelected];
-    const previousSelectedTabIsDisabled = previousSelectedTab && previousSelectedTab.disabled;
+    const previousSelectedTabIsDisabled = previousSelectedTab?.disabled;
     const currentTabsLength = this.props.tabs.length;
     const previousTabsLength = previousProps.tabs.length;
-    const currentDisabledTabsLength = this.props.tabs.filter(enabledTabsFilter).length;
-    const previousDisabledTabsLength = previousProps.tabs.filter(enabledTabsFilter).length;
+    const currentDisabledTabsLength = this.props.tabs.filter(tab => !tab.disabled).length;
+    const previousDisabledTabsLength = previousProps.tabs.filter(tab => !tab.disabled).length;
     const currentHeaderWidth = this.props.headerWidth;
     const previousFullHeaderWidth = previousProps.headerWidth;
     const {
@@ -126,7 +127,7 @@ class Tabs extends React.Component {
     const {
       tabs
     } = this.props;
-    return tabs[index] && tabs[index].disabled;
+    return tabs[index]?.disabled ?? false;
   };
   getAllTabsWidth = () => {
     return this.tabRefs.map(reference => {
@@ -173,7 +174,6 @@ class Tabs extends React.Component {
     const width = reference ? reference.getBoundingClientRect().width : 0;
     return `${width}px`;
   };
-
   /*
    * Gets the next tab that should be selected based on the swipe direction
    * and the current selected tab (is called recursively to account for disabled tabs).
@@ -227,7 +227,7 @@ class Tabs extends React.Component {
     onTabSelect(index);
   };
   getTabIndexWithoutDisabledTabs(index) {
-    return index - this.props.tabs.slice(0, index).filter(tab => !enabledTabsFilter(tab)).length;
+    return index - this.props.tabs.slice(0, index).filter(tab => tab.disabled).length;
   }
   animateToTab = (index, instant) => {
     this.animateLine(index);
@@ -238,7 +238,6 @@ class Tabs extends React.Component {
       translateLineX: previousState.fullWidthTabs ? `${index * 100}%` : `${this.getDistanceToSelectedTab(index)}px`
     }));
   };
-
   // Pass `instant` to set the `translateX` to the new panel with no transition
   animatePanel = (index, instant = false) => {
     const {
@@ -285,6 +284,9 @@ class Tabs extends React.Component {
     const {
       start
     } = this.state;
+    if (start == null) {
+      return;
+    }
     const {
       selected: currentSelectedFromProps
     } = this.props;
@@ -334,6 +336,9 @@ class Tabs extends React.Component {
       start,
       isSwiping
     } = this.state;
+    if (start == null) {
+      return;
+    }
     const {
       selected
     } = this.props;
@@ -393,7 +398,6 @@ class Tabs extends React.Component {
     const restrictedVelocity = (Number.isNaN(remainingContainerToTravel) ? 0 : remainingContainerToTravel) * Math.min(10 * Math.E, lastSwipeVelocity * 10 * Math.E);
     const hidePanelOverflow = isAnimating || isSwiping;
     const sliderWidth = tabsLength * this.containerWidth + spacer * 2;
-
     // Uses `props.panelTransitionSpacing` to add a spacer in-between the `TabPanel` you're transitioning to/from
     const Spacer = ({
       id
@@ -429,10 +433,10 @@ class Tabs extends React.Component {
                 disabled: disabled,
                 focusTab: () => {
                   if (this.containerReference.current?.contains(document.activeElement)) {
-                    this.tabRefs[index].focus();
+                    this.tabRefs[index]?.focus();
                   }
                 },
-                onClick: disabled ? null : this.handleTabClick(index),
+                onClick: disabled ? undefined : this.handleTabClick(index),
                 onKeyDown: this.onKeyDown(index),
                 ...(fullWidthTabs ? {
                   style: {
@@ -507,34 +511,6 @@ class Tabs extends React.Component {
     });
   }
 }
-const SpacerSizes = {
-  ...size.Size,
-  NONE: 'default'
-};
-Tabs.propTypes = {
-  tabs: PropTypes__default.default.arrayOf(PropTypes__default.default.shape({
-    title: PropTypes__default.default.string.isRequired,
-    content: PropTypes__default.default.node.isRequired,
-    disabled: PropTypes__default.default.bool.isRequired
-  })).isRequired,
-  selected: PropTypes__default.default.number.isRequired,
-  name: PropTypes__default.default.string.isRequired,
-  animatePanelsOnClick: PropTypes__default.default.bool,
-  changeTabOnSwipe: PropTypes__default.default.bool,
-  className: PropTypes__default.default.string,
-  transitionSpacing: PropTypes__default.default.oneOf(['default', 'xs', 'sm', 'md', 'lg']),
-  headerWidth: PropTypes__default.default.oneOf(['auto', 'block']),
-  id: PropTypes__default.default.string,
-  onTabSelect: PropTypes__default.default.func.isRequired
-};
-Tabs.defaultProps = {
-  animatePanelsOnClick: false,
-  changeTabOnSwipe: true,
-  className: '',
-  transitionSpacing: SpacerSizes.NONE,
-  headerWidth: width.Width.BLOCK
-};
-var Tabs$1 = Tabs;
 
-module.exports = Tabs$1;
+module.exports = Tabs;
 //# sourceMappingURL=Tabs.js.map