@bbl-digital/snorre 2.3.24 → 2.3.25

package/dist/bundle.js

@@ -30997,8 +30997,10 @@
     underlineColor,
     vertical,
     actions,
-    className
+    className,
+    breakpoint
   }) => {
+    const isMobile = useIsMobile(breakpoint);
     const theme = react.useTheme(); // Container dimensions
 
     const ref = React__default['default'].useRef(null);
@@ -31048,7 +31050,7 @@
           setActive,
           active
         }) => {
-          if (actionsWidth + childrenTotalWidth > containerWidth) {
+          if (breakpoint && isMobile || !breakpoint && actionsWidth + childrenTotalWidth > containerWidth) {
             // Render dropdown instead of tabs
             return jsxRuntime$1.jsxs(SelectWrapper, {
               children: [jsxRuntime$1.jsx(Select, {

package/esm/core/TabNav/index.js

@@ -6,6 +6,7 @@ import { styles, TabNavWrapper, TabNavActions, SelectWrapper, SelectLinkWrapper
 import { useContainerDimensions } from './utils/useContainerDimensions';
 import Select, { Option } from '../Select';
 import Link from '../Link';
+import { useIsMobile } from '../../hooks/useIsMobile';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 
@@ -19,8 +20,10 @@ const TabNav = ({
   underlineColor,
   vertical,
   actions,
-  className
+  className,
+  breakpoint
 }) => {
+  const isMobile = useIsMobile(breakpoint);
   const theme = useTheme(); // Container dimensions
 
   const ref = React.useRef(null);
@@ -70,7 +73,7 @@ const TabNav = ({
         setActive,
         active
       }) => {
-        if (actionsWidth + childrenTotalWidth > containerWidth) {
+        if (breakpoint && isMobile || !breakpoint && actionsWidth + childrenTotalWidth > containerWidth) {
           // Render dropdown instead of tabs
           return _jsxs(SelectWrapper, {
             children: [_jsx(Select, {

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

@@ -20,6 +20,8 @@ interface Props {
     actions?: ReactNode;
     /** Add classname */
     className?: string;
+    /** Breakpoint for showing dropdown */
+    breakpoint?: number;
 }
 declare const TabNav: React.FC<Props>;
 export { TabNav };

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/packages/core/TabNav/index.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACxC,OAAO,EAAE,gBAAgB,EAAY,MAAM,gBAAgB,CAAA;AAc3D,UAAU,KAAK;IACb,iDAAiD;IACjD,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,qEAAqE;IACrE,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAA;IAC1C,gDAAgD;IAChD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,+CAA+C;IAC/C,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,kDAAkD;IAClD,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,iBAAiB;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,sBAAsB;IACtB,GAAG,CAAC,EAAE,gBAAgB,CAAA;IACtB,uEAAuE;IACvE,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,oBAAoB;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAWD,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA+I3B,CAAA;AAED,OAAO,EAAE,MAAM,EAAE,CAAA;AAEjB,eAAe,MAAM,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/packages/core/TabNav/index.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACxC,OAAO,EAAE,gBAAgB,EAAY,MAAM,gBAAgB,CAAA;AAe3D,UAAU,KAAK;IACb,iDAAiD;IACjD,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,qEAAqE;IACrE,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAA;IAC1C,gDAAgD;IAChD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,+CAA+C;IAC/C,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,kDAAkD;IAClD,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,iBAAiB;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,sBAAsB;IACtB,GAAG,CAAC,EAAE,gBAAgB,CAAA;IACtB,uEAAuE;IACvE,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,oBAAoB;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,sCAAsC;IACtC,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB;AAWD,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAoJ3B,CAAA;AAED,OAAO,EAAE,MAAM,EAAE,CAAA;AAEjB,eAAe,MAAM,CAAA"}

package/lib/core/TabNav/index.js

@@ -6,6 +6,7 @@ import { styles, TabNavWrapper, TabNavActions, SelectWrapper, SelectLinkWrapper
 import { useContainerDimensions } from './utils/useContainerDimensions';
 import Select, { Option } from '../Select';
 import Link from '../Link';
+import { useIsMobile } from '../../hooks/useIsMobile';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 
@@ -19,8 +20,10 @@ const TabNav = ({
   underlineColor,
   vertical,
   actions,
-  className
+  className,
+  breakpoint
 }) => {
+  const isMobile = useIsMobile(breakpoint);
   const theme = useTheme(); // Container dimensions
 
   const ref = React.useRef(null);
@@ -70,7 +73,7 @@ const TabNav = ({
         setActive,
         active
       }) => {
-        if (actionsWidth + childrenTotalWidth > containerWidth) {
+        if (breakpoint && isMobile || !breakpoint && actionsWidth + childrenTotalWidth > containerWidth) {
           // Render dropdown instead of tabs
           return _jsxs(SelectWrapper, {
             children: [_jsx(Select, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbl-digital/snorre",
-  "version": "2.3.24",
+  "version": "2.3.25",
   "description": "Design library for BBL Digital",
   "license": "MIT",
   "main": "./lib/index.js",