@bbl-digital/snorre 4.2.74 → 4.2.76

package/lib/core/TabNav/TabNav.stories.js

@@ -1,312 +1,173 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.TabNavWithSelectAndLoadsItems = exports.TabNavWithSelect = exports.TabNavWithOneDisabledValue = exports.TabNavWithManyOptions = exports.TabNavWithButton = exports.TabNavWithBreakpoint = exports.TabNavVerticalWithButton = exports.TabNavVertical = exports.TabNavValue = exports.TabNavDefault = exports.TabNavColors = void 0;
-var _ = _interopRequireDefault(require("."));
-var _TabNavItem = _interopRequireDefault(require("./TabNavItem"));
-var _Button = _interopRequireDefault(require("../Button"));
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-var _default = exports.default = {
-  title: 'Core/TabNav',
-  component: _.default
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import TabNav from '.';
+import TabNavItem from './TabNavItem';
+import Button from '../Button';
+export default {
+    title: 'Core/TabNav',
+    component: TabNav,
 };
-const TabNavDefault = exports.TabNavDefault = {
-  render: () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.default, {
-    onChange: e => console.log('changed to', e),
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TabNavItem.default, {
-      value: "D\xF8rer"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabNavItem.default, {
-      value: "Eiere"
-    })]
-  }),
-  name: 'TabNav Default'
+export const TabNavDefault = {
+    render: () => (_jsxs(TabNav, { onChange: (e) => console.log('changed to', e), children: [_jsx(TabNavItem, { value: "D\u00F8rer" }), _jsx(TabNavItem, { value: "Eiere" })] })),
+    name: 'TabNav Default',
 };
-const TabNavColors = exports.TabNavColors = {
-  render: () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.default, {
-    onChange: e => console.log('changed to', e),
-    underlineColor: "red",
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TabNavItem.default, {
-      value: "D\xF8rer"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabNavItem.default, {
-      value: "Eiere"
-    })]
-  }),
-  name: 'TabNav colors'
+export const TabNavColors = {
+    render: () => (_jsxs(TabNav, { onChange: (e) => console.log('changed to', e), underlineColor: "red", children: [_jsx(TabNavItem, { value: "D\u00F8rer" }), _jsx(TabNavItem, { value: "Eiere" })] })),
+    name: 'TabNav colors',
 };
-const TabNavVertical = exports.TabNavVertical = {
-  render: () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.default, {
-    onChange: e => console.log('changed to', e),
-    vertical: true,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TabNavItem.default, {
-      value: "D\xF8rer"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabNavItem.default, {
-      value: "Eiere"
-    })]
-  }),
-  name: 'TabNav vertical'
+export const TabNavVertical = {
+    render: () => (_jsxs(TabNav, { onChange: (e) => console.log('changed to', e), vertical: true, children: [_jsx(TabNavItem, { value: "D\u00F8rer" }), _jsx(TabNavItem, { value: "Eiere" })] })),
+    name: 'TabNav vertical',
 };
-const TabNavValue = exports.TabNavValue = {
-  render: () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.default, {
-    onChange: e => console.log('changed to', e),
-    value: "Eiere",
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TabNavItem.default, {
-      value: "D\xF8rer"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabNavItem.default, {
-      value: "Eiere",
-      displayText: "Bare for visning"
-    })]
-  }),
-  name: 'TabNav value'
+export const TabNavValue = {
+    render: () => (_jsxs(TabNav, { onChange: (e) => console.log('changed to', e), value: "Eiere", children: [_jsx(TabNavItem, { value: "D\u00F8rer" }), _jsx(TabNavItem, { value: "Eiere", displayText: "Bare for visning" })] })),
+    name: 'TabNav value',
 };
-const TabNavWithButton = exports.TabNavWithButton = {
-  render: () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.default, {
-    actions: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
-      highlight: true,
-      children: "Press"
-    }),
-    onChange: e => console.log('changed to', e),
-    value: "Eiere",
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TabNavItem.default, {
-      value: "D\xF8rer"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabNavItem.default, {
-      value: "Eiere",
-      displayText: "Bare for visning"
-    })]
-  }),
-  name: 'TabNav with button'
+export const TabNavWithButton = {
+    render: () => (_jsxs(TabNav, { actions: _jsx(Button, { highlight: true, children: "Press" }), onChange: (e) => console.log('changed to', e), value: "Eiere", children: [_jsx(TabNavItem, { value: "D\u00F8rer" }), _jsx(TabNavItem, { value: "Eiere", displayText: "Bare for visning" })] })),
+    name: 'TabNav with button',
 };
-const TabNavWithSelect = exports.TabNavWithSelect = {
-  render: () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.default, {
-    onChange: e => console.log('changed to', e),
-    value: "Eiere",
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TabNavItem.default, {
-      value: "D\xF8rer"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabNavItem.default, {
-      value: "Eiere"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabNavItem.default, {
-      value: "Alla"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabNavItem.default, {
-      value: "Kosedyr"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabNavItem.default, {
-      value: "Bakd\xF8r"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabNavItem.default, {
-      value: "Alle",
-      isSelect: true,
-      displayText: "Select open",
-      selectItems: [{
-        displayText: 'hello',
-        value: '1'
-      }, {
-        indent: 1,
-        displayText: 'very long text to test how it breaks',
-        value: '24'
-      }, {
-        indent: 2,
-        displayText: 'yo',
-        value: '2'
-      }, {
-        displayText: 'link somewhere',
-        value: '251',
-        onClick: () => console.log('clicked')
-      }]
-    })]
-  }),
-  name: 'TabNav with select'
+export const TabNavWithSelect = {
+    render: () => (_jsxs(TabNav, { onChange: (e) => console.log('changed to', e), value: "Eiere", children: [_jsx(TabNavItem, { value: "D\u00F8rer" }), _jsx(TabNavItem, { value: "Eiere" }), _jsx(TabNavItem, { value: "Alla" }), _jsx(TabNavItem, { value: "Kosedyr" }), _jsx(TabNavItem, { value: "Bakd\u00F8r" }), _jsx(TabNavItem, { value: "Alle", isSelect: true, displayText: "Select open", selectItems: [
+                    {
+                        displayText: 'hello',
+                        value: '1',
+                    },
+                    {
+                        indent: 1,
+                        displayText: 'very long text to test how it breaks',
+                        value: '24',
+                    },
+                    {
+                        indent: 2,
+                        displayText: 'yo',
+                        value: '2',
+                    },
+                    {
+                        displayText: 'link somewhere',
+                        value: '251',
+                        onClick: () => console.log('clicked'),
+                    },
+                ] })] })),
+    name: 'TabNav with select',
 };
-const TabNavWithOneDisabledValue = exports.TabNavWithOneDisabledValue = {
-  render: () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.default, {
-    onChange: e => console.log('changed to', e),
-    value: "Eiere",
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TabNavItem.default, {
-      value: "D\xF8rer"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabNavItem.default, {
-      value: "Eiere"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabNavItem.default, {
-      value: "Alla"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabNavItem.default, {
-      value: "Kosedyr"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabNavItem.default, {
-      value: "Bakd\xF8r"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabNavItem.default, {
-      value: "Alle",
-      isSelect: true,
-      displayText: "Select open",
-      selectItems: [{
-        displayText: 'No values here',
-        value: '1',
-        disabled: true
-      }, {
-        displayText: 'Link somewhere',
-        value: '2',
-        onClick: () => console.log('clicked')
-      }]
-    })]
-  }),
-  name: 'TabNav with one disabled value'
+export const TabNavWithOneDisabledValue = {
+    render: () => (_jsxs(TabNav, { onChange: (e) => console.log('changed to', e), value: "Eiere", children: [_jsx(TabNavItem, { value: "D\u00F8rer" }), _jsx(TabNavItem, { value: "Eiere" }), _jsx(TabNavItem, { value: "Alla" }), _jsx(TabNavItem, { value: "Kosedyr" }), _jsx(TabNavItem, { value: "Bakd\u00F8r" }), _jsx(TabNavItem, { value: "Alle", isSelect: true, displayText: "Select open", selectItems: [
+                    {
+                        displayText: 'No values here',
+                        value: '1',
+                        disabled: true,
+                    },
+                    {
+                        displayText: 'Link somewhere',
+                        value: '2',
+                        onClick: () => console.log('clicked'),
+                    },
+                ] })] })),
+    name: 'TabNav with one disabled value',
 };
-const TabNavWithBreakpoint = exports.TabNavWithBreakpoint = {
-  render: () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.default, {
-    breakpoint: 4000,
-    onChange: e => console.log('changed to', e),
-    value: "Eiere",
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TabNavItem.default, {
-      value: "D\xF8rer"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabNavItem.default, {
-      value: "Eiere"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabNavItem.default, {
-      value: "Alla"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabNavItem.default, {
-      value: "Kosedyr"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabNavItem.default, {
-      value: "Bakd\xF8r"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabNavItem.default, {
-      value: "Alle"
-    })]
-  }),
-  name: 'TabNav with breakpoint'
+export const TabNavWithBreakpoint = {
+    render: () => (_jsxs(TabNav, { breakpoint: 4000, onChange: (e) => console.log('changed to', e), value: "Eiere", children: [_jsx(TabNavItem, { value: "D\u00F8rer" }), _jsx(TabNavItem, { value: "Eiere" }), _jsx(TabNavItem, { value: "Alla" }), _jsx(TabNavItem, { value: "Kosedyr" }), _jsx(TabNavItem, { value: "Bakd\u00F8r" }), _jsx(TabNavItem, { value: "Alle" })] })),
+    name: 'TabNav with breakpoint',
 };
-const TabNavWithSelectAndLoadsItems = exports.TabNavWithSelectAndLoadsItems = {
-  render: () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.default, {
-    onChange: e => console.log('changed to', e),
-    value: "Eiere",
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TabNavItem.default, {
-      value: "D\xF8rer"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabNavItem.default, {
-      value: "Eiere"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabNavItem.default, {
-      value: "Alla"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabNavItem.default, {
-      value: "Kosedyr"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabNavItem.default, {
-      value: "Bakd\xF8r"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabNavItem.default, {
-      value: "Alle",
-      isSelect: true,
-      displayText: "Select open",
-      selectItems: [{
-        displayText: 'hello',
-        value: '1'
-      }, {
-        displayText: 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa',
-        value: '31'
-      }, {
-        displayText: 'hello1',
-        value: '11'
-      }, {
-        displayText: 'hello2',
-        value: '12'
-      }, {
-        displayText: 'hello3',
-        value: '13'
-      }, {
-        displayText: 'hello4',
-        value: '14'
-      }, {
-        displayText: 'hello5',
-        value: '15'
-      }, {
-        displayText: 'hello6',
-        value: '16'
-      }, {
-        displayText: 'hello7',
-        value: '17'
-      }, {
-        displayText: 'hello8',
-        value: '18'
-      }, {
-        displayText: 'yo',
-        value: '2'
-      }, {
-        displayText: 'yo1',
-        value: '21'
-      }, {
-        displayText: 'yo2',
-        value: '22'
-      }, {
-        displayText: 'yo3',
-        value: '23'
-      }, {
-        displayText: 'yo4',
-        value: '24'
-      }, {
-        displayText: 'yo5',
-        value: '25'
-      }, {
-        displayText: 'yo6',
-        value: '26'
-      }, {
-        displayText: 'yo7',
-        value: '27'
-      }, {
-        displayText: 'yo8',
-        value: '28'
-      }, {
-        displayText: 'yo9',
-        value: '29'
-      }, {
-        displayText: 'very long text to test how it breaks should lorem ipsum whatever dont know how it goes',
-        value: '34'
-      }, {
-        displayText: 'link somewhere',
-        value: '299',
-        onClick: () => console.log('clicked')
-      }]
-    })]
-  }),
-  name: 'TabNav with select and loads items'
+export const TabNavWithSelectAndLoadsItems = {
+    render: () => (_jsxs(TabNav, { onChange: (e) => console.log('changed to', e), value: "Eiere", children: [_jsx(TabNavItem, { value: "D\u00F8rer" }), _jsx(TabNavItem, { value: "Eiere" }), _jsx(TabNavItem, { value: "Alla" }), _jsx(TabNavItem, { value: "Kosedyr" }), _jsx(TabNavItem, { value: "Bakd\u00F8r" }), _jsx(TabNavItem, { value: "Alle", isSelect: true, displayText: "Select open", selectItems: [
+                    {
+                        displayText: 'hello',
+                        value: '1',
+                    },
+                    {
+                        displayText: 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa',
+                        value: '31',
+                    },
+                    {
+                        displayText: 'hello1',
+                        value: '11',
+                    },
+                    {
+                        displayText: 'hello2',
+                        value: '12',
+                    },
+                    {
+                        displayText: 'hello3',
+                        value: '13',
+                    },
+                    {
+                        displayText: 'hello4',
+                        value: '14',
+                    },
+                    {
+                        displayText: 'hello5',
+                        value: '15',
+                    },
+                    {
+                        displayText: 'hello6',
+                        value: '16',
+                    },
+                    {
+                        displayText: 'hello7',
+                        value: '17',
+                    },
+                    {
+                        displayText: 'hello8',
+                        value: '18',
+                    },
+                    {
+                        displayText: 'yo',
+                        value: '2',
+                    },
+                    {
+                        displayText: 'yo1',
+                        value: '21',
+                    },
+                    {
+                        displayText: 'yo2',
+                        value: '22',
+                    },
+                    {
+                        displayText: 'yo3',
+                        value: '23',
+                    },
+                    {
+                        displayText: 'yo4',
+                        value: '24',
+                    },
+                    {
+                        displayText: 'yo5',
+                        value: '25',
+                    },
+                    {
+                        displayText: 'yo6',
+                        value: '26',
+                    },
+                    {
+                        displayText: 'yo7',
+                        value: '27',
+                    },
+                    {
+                        displayText: 'yo8',
+                        value: '28',
+                    },
+                    {
+                        displayText: 'yo9',
+                        value: '29',
+                    },
+                    {
+                        displayText: 'very long text to test how it breaks should lorem ipsum whatever dont know how it goes',
+                        value: '34',
+                    },
+                    {
+                        displayText: 'link somewhere',
+                        value: '299',
+                        onClick: () => console.log('clicked'),
+                    },
+                ] })] })),
+    name: 'TabNav with select and loads items',
 };
-const TabNavWithManyOptions = exports.TabNavWithManyOptions = {
-  render: () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.default, {
-    actions: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
-      highlight: true,
-      children: "Press"
-    }),
-    onChange: e => console.log('changed to', e),
-    value: "Eiere",
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TabNavItem.default, {
-      value: "D\xF8rer"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabNavItem.default, {
-      value: "Eiere"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabNavItem.default, {
-      value: "Alla"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabNavItem.default, {
-      value: "Kosedyr"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabNavItem.default, {
-      value: "Bakd\xF8r"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabNavItem.default, {
-      value: "Velkomstmatte"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabNavItem.default, {
-      value: "Katteluke"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabNavItem.default, {
-      value: "Vinduer"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabNavItem.default, {
-      value: "Herregud"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabNavItem.default, {
-      value: "Test"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabNavItem.default, {
-      value: "Loft"
-    })]
-  }),
-  name: 'TabNav with many options'
+export const TabNavWithManyOptions = {
+    render: () => (_jsxs(TabNav, { actions: _jsx(Button, { highlight: true, children: "Press" }), onChange: (e) => console.log('changed to', e), value: "Eiere", children: [_jsx(TabNavItem, { value: "D\u00F8rer" }), _jsx(TabNavItem, { value: "Eiere" }), _jsx(TabNavItem, { value: "Alla" }), _jsx(TabNavItem, { value: "Kosedyr" }), _jsx(TabNavItem, { value: "Bakd\u00F8r" }), _jsx(TabNavItem, { value: "Velkomstmatte" }), _jsx(TabNavItem, { value: "Katteluke" }), _jsx(TabNavItem, { value: "Vinduer" }), _jsx(TabNavItem, { value: "Herregud" }), _jsx(TabNavItem, { value: "Test" }), _jsx(TabNavItem, { value: "Loft" })] })),
+    name: 'TabNav with many options',
+};
+export const TabNavVerticalWithButton = {
+    render: () => (_jsxs(TabNav, { actions: _jsx(Button, { highlight: true, children: "Press" }), onChange: (e) => console.log('changed to', e), value: "Eiere", vertical: true, children: [_jsx(TabNavItem, { value: "D\u00F8rer" }), _jsx(TabNavItem, { value: "Eiere", displayText: "Bare for visning" })] })),
+    name: 'TabNav vertical with button',
 };
-const TabNavVerticalWithButton = exports.TabNavVerticalWithButton = {
-  render: () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.default, {
-    actions: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
-      highlight: true,
-      children: "Press"
-    }),
-    onChange: e => console.log('changed to', e),
-    value: "Eiere",
-    vertical: true,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TabNavItem.default, {
-      value: "D\xF8rer"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabNavItem.default, {
-      value: "Eiere",
-      displayText: "Bare for visning"
-    })]
-  }),
-  name: 'TabNav vertical with button'
-};

package/lib/core/TabNav/TabNavItem/index.d.ts

@@ -32,4 +32,3 @@ export interface IProps {
 declare const TabNavItem: React.FC<IProps>;
 export { TabNavItem };
 export default TabNavItem;
-//# sourceMappingURL=index.d.ts.map

package/lib/core/TabNav/TabNavItem/index.js

@@ -1,110 +1,44 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.TabNavItem = void 0;
-var _react = require("@emotion/react");
-var _react2 = _interopRequireWildcard(require("react"));
-var _IconCaretDown = _interopRequireDefault(require("../../../icons/General/IconCaretDown"));
-var _Link = _interopRequireDefault(require("../../Link"));
-var _TabContext = require("../TabContext");
-var _useContainerDimensions = require("../utils/useContainerDimensions");
-var _styles = require("./styles");
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 /** @jsxImportSource @emotion/react */
-
-const TabNavItem = ({
-  value,
-  displayText,
-  trackingEvent,
-  trackingName,
-  className,
-  isSelect,
-  selected,
-  selectItems
-}) => {
-  const theme = (0, _react.useTheme)();
-  const childrenRef = /*#__PURE__*/_react2.default.createRef();
-  const [open, setOpen] = _react2.default.useState(false);
-  const {
-    active,
-    setActive,
-    setWidth
-  } = (0, _react2.useContext)(_TabContext.TabContext);
-  const isActive = selected && selected === value || value === active;
-  const ref = (0, _react2.useRef)(null);
-  const {
-    width,
-    bottom,
-    left
-  } = (0, _useContainerDimensions.useContainerDimensions)(ref);
-  (0, _react2.useEffect)(() => {
-    const handleClickOutside = e => {
-      const node = childrenRef.current;
-      if (node && node.contains(e.target)) return;
-      setOpen(false);
+import { useTheme } from '@emotion/react';
+import React, { Fragment, useContext, useEffect, useRef } from 'react';
+import IconCaretDown from '../../../icons/General/IconCaretDown';
+import Link from '../../Link';
+import { TabContext } from '../TabContext';
+import { useContainerDimensions } from '../utils/useContainerDimensions';
+import { TabNavItemWrapper, styles, SelectChildrenWrapper, SelectOption, } from './styles';
+const TabNavItem = ({ value, displayText, trackingEvent, trackingName, className, isSelect, selected, selectItems, }) => {
+    const theme = useTheme();
+    const childrenRef = React.createRef();
+    const [open, setOpen] = React.useState(false);
+    const { active, setActive, setWidth } = useContext(TabContext);
+    const isActive = (selected && selected === value) || value === active;
+    const ref = useRef(null);
+    const { width, bottom, left } = useContainerDimensions(ref);
+    useEffect(() => {
+        const handleClickOutside = (e) => {
+            const node = childrenRef.current;
+            if (node && node.contains(e.target))
+                return;
+            setOpen(false);
+        };
+        open
+            ? document.addEventListener('mousedown', handleClickOutside)
+            : document.removeEventListener('mousedown', handleClickOutside);
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [open, childrenRef]);
+    useEffect(() => {
+        if (width)
+            setWidth({ [value]: width });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [width]);
+    const onSelectClick = (value) => {
+        setActive(value);
+        setOpen(false);
     };
-    open ? document.addEventListener('mousedown', handleClickOutside) : document.removeEventListener('mousedown', handleClickOutside);
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, [open, childrenRef]);
-  (0, _react2.useEffect)(() => {
-    if (width) setWidth({
-      [value]: width
-    });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [width]);
-  const onSelectClick = value => {
-    setActive(value);
-    setOpen(false);
-  };
-  return (0, _jsxRuntime.jsxs)(_react2.Fragment, {
-    children: [(0, _jsxRuntime.jsxs)(_styles.TabNavItemWrapper, {
-      ref: ref,
-      onClick: () => isSelect ? setOpen(!open) : setActive(value),
-      theme: theme,
-      css: t => [isActive && _styles.styles.active(t)],
-      "data-tracking-name": trackingName,
-      "data-tracking-event": trackingEvent,
-      className: className,
-      children: [displayText ? displayText : value, isSelect && (0, _jsxRuntime.jsx)(_IconCaretDown.default, {
-        flipVertical: open,
-        size: 20
-      })]
-    }), isSelect && open && (0, _jsxRuntime.jsx)(_styles.SelectChildrenWrapper, {
-      left: left,
-      theme: theme,
-      bottom: bottom,
-      ref: childrenRef,
-      minWidth: width,
-      children: selectItems?.map(({
-        displayText,
-        value,
-        onClick,
-        indent,
-        disabled
-      }) => onClick ? (0, _jsxRuntime.jsx)(_styles.SelectOption, {
-        tabIndex: 0,
-        children: (0, _jsxRuntime.jsx)(_Link.default, {
-          nopadding: true,
-          onClick: onClick,
-          children: displayText || value
-        }, value)
-      }, value) : (0, _jsxRuntime.jsx)(_styles.SelectOption, {
-        bold: value === active,
-        tabIndex: 0,
-        indent: indent,
-        disabled: disabled,
-        onClick: !disabled ? () => onSelectClick(value) : undefined,
-        children: displayText
-      }, value))
-    })]
-  });
+    return (_jsxs(Fragment, { children: [_jsxs(TabNavItemWrapper, { ref: ref, onClick: () => (isSelect ? setOpen(!open) : setActive(value)), theme: theme, css: (t) => [isActive && styles.active(t)], "data-tracking-name": trackingName, "data-tracking-event": trackingEvent, className: className, children: [displayText ? displayText : value, isSelect && _jsx(IconCaretDown, { flipVertical: open, size: 20 })] }), isSelect && open && (_jsx(SelectChildrenWrapper, { left: left, theme: theme, bottom: bottom, ref: childrenRef, minWidth: width, children: selectItems?.map(({ displayText, value, onClick, indent, disabled }) => onClick ? (_jsx(SelectOption, { tabIndex: 0, children: _jsx(Link, { nopadding: true, onClick: onClick, children: displayText || value }, value) }, value)) : (_jsx(SelectOption, { bold: value === active, tabIndex: 0, indent: indent, disabled: disabled, onClick: !disabled ? () => onSelectClick(value) : undefined, children: displayText }, value))) }))] }));
 };
-exports.TabNavItem = TabNavItem;
-var _default = exports.default = TabNavItem;
+export { TabNavItem };
+export default TabNavItem;

package/lib/core/TabNav/TabNavItem/styles.d.ts

@@ -23,4 +23,3 @@ export declare const SelectOption: import("@emotion/styled").StyledComponent<{
 export declare const styles: {
     active: (theme: IAppTheme) => import("@emotion/react").SerializedStyles;
 };
-//# sourceMappingURL=styles.d.ts.map