@bbl-digital/snorre 2.3.24 → 2.3.25

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/bundle.js +4 -2
  2. package/esm/core/TabNav/index.js +5 -2
  3. package/lib/core/TabNav/index.d.ts +2 -0
  4. package/lib/core/TabNav/index.d.ts.map +1 -1
  5. package/lib/core/TabNav/index.js +5 -2
  6. package/package.json +1 -1
package/dist/bundle.js CHANGED
@@ -30997,8 +30997,10 @@
30997
30997
  underlineColor,
30998
30998
  vertical,
30999
30999
  actions,
31000
- className
31000
+ className,
31001
+ breakpoint
31001
31002
  }) => {
31003
+ const isMobile = useIsMobile(breakpoint);
31002
31004
  const theme = react.useTheme(); // Container dimensions
31003
31005
 
31004
31006
  const ref = React__default['default'].useRef(null);
@@ -31048,7 +31050,7 @@
31048
31050
  setActive,
31049
31051
  active
31050
31052
  }) => {
31051
- if (actionsWidth + childrenTotalWidth > containerWidth) {
31053
+ if (breakpoint && isMobile || !breakpoint && actionsWidth + childrenTotalWidth > containerWidth) {
31052
31054
  // Render dropdown instead of tabs
31053
31055
  return jsxRuntime$1.jsxs(SelectWrapper, {
31054
31056
  children: [jsxRuntime$1.jsx(Select, {
package/esm/core/TabNav/index.js CHANGED
@@ -6,6 +6,7 @@ import { styles, TabNavWrapper, TabNavActions, SelectWrapper, SelectLinkWrapper
6
6
  import { useContainerDimensions } from './utils/useContainerDimensions';
7
7
  import Select, { Option } from '../Select';
8
8
  import Link from '../Link';
9
+ import { useIsMobile } from '../../hooks/useIsMobile';
9
10
  import { jsx as _jsx } from "@emotion/react/jsx-runtime";
10
11
  import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
11
12
 
@@ -19,8 +20,10 @@ const TabNav = ({
19
20
  underlineColor,
20
21
  vertical,
21
22
  actions,
22
- className
23
+ className,
24
+ breakpoint
23
25
  }) => {
26
+ const isMobile = useIsMobile(breakpoint);
24
27
  const theme = useTheme(); // Container dimensions
25
28
 
26
29
  const ref = React.useRef(null);
@@ -70,7 +73,7 @@ const TabNav = ({
70
73
  setActive,
71
74
  active
72
75
  }) => {
73
- if (actionsWidth + childrenTotalWidth > containerWidth) {
76
+ if (breakpoint && isMobile || !breakpoint && actionsWidth + childrenTotalWidth > containerWidth) {
74
77
  // Render dropdown instead of tabs
75
78
  return _jsxs(SelectWrapper, {
76
79
  children: [_jsx(Select, {
package/lib/core/TabNav/index.d.ts CHANGED
@@ -20,6 +20,8 @@ interface Props {
20
20
  actions?: ReactNode;
21
21
  /** Add classname */
22
22
  className?: string;
23
+ /** Breakpoint for showing dropdown */
24
+ breakpoint?: number;
23
25
  }
24
26
  declare const TabNav: React.FC<Props>;
25
27
  export { TabNav };
package/lib/core/TabNav/index.d.ts.map CHANGED
@@ -1 +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"}
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;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 CHANGED
@@ -6,6 +6,7 @@ import { styles, TabNavWrapper, TabNavActions, SelectWrapper, SelectLinkWrapper
6
6
  import { useContainerDimensions } from './utils/useContainerDimensions';
7
7
  import Select, { Option } from '../Select';
8
8
  import Link from '../Link';
9
+ import { useIsMobile } from '../../hooks/useIsMobile';
9
10
  import { jsx as _jsx } from "@emotion/react/jsx-runtime";
10
11
  import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
11
12
 
@@ -19,8 +20,10 @@ const TabNav = ({
19
20
  underlineColor,
20
21
  vertical,
21
22
  actions,
22
- className
23
+ className,
24
+ breakpoint
23
25
  }) => {
26
+ const isMobile = useIsMobile(breakpoint);
24
27
  const theme = useTheme(); // Container dimensions
25
28
 
26
29
  const ref = React.useRef(null);
@@ -70,7 +73,7 @@ const TabNav = ({
70
73
  setActive,
71
74
  active
72
75
  }) => {
73
- if (actionsWidth + childrenTotalWidth > containerWidth) {
76
+ if (breakpoint && isMobile || !breakpoint && actionsWidth + childrenTotalWidth > containerWidth) {
74
77
  // Render dropdown instead of tabs
75
78
  return _jsxs(SelectWrapper, {
76
79
  children: [_jsx(Select, {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bbl-digital/snorre",
3
- "version": "2.3.24",
3
+ "version": "2.3.25",
4
4
  "description": "Design library for BBL Digital",
5
5
  "license": "MIT",
6
6
  "main": "./lib/index.js",