@bbl-digital/snorre 4.2.74 → 4.2.76

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

@@ -1,39 +1,102 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.styles = exports.TabNavItemWrapper = exports.SelectOption = exports.SelectChildrenWrapper = void 0;
-var _base = _interopRequireDefault(require("@emotion/styled/base"));
-var _react = require("@emotion/react");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const calculateIndent = indent => {
-  const BASE = 8;
-  const INDENT_PADDING_LI = indent === 1 ? BASE * 3 : (indent + 2) * BASE;
-  return /*#__PURE__*/(0, _react.css)("padding-left:", INDENT_PADDING_LI, "px!important;" + (process.env.NODE_ENV === "production" ? "" : ";label:calculateIndent;"));
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+const calculateIndent = (indent) => {
+    const BASE = 8;
+    const INDENT_PADDING_LI = indent === 1 ? BASE * 3 : (indent + 2) * BASE;
+    return css `
+    padding-left: ${INDENT_PADDING_LI}px !important;
+  `;
+};
+export const TabNavItemWrapper = styled.button((props) => css `
+    display: flex;
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    padding: 1rem;
+    position: relative;
+    font-size: 16px;
+    font-weight: bold;
+    transition: all ease 250ms;
+
+    &:hover {
+      &::after {
+        position: absolute;
+        content: '';
+        width: 100%;
+        height: 4px;
+        bottom: 0;
+        left: 0;
+        background-color: ${props.theme.primary};
+        z-index: 1;
+        opacity: 0.4;
+      }
+    }
+  `);
+export const SelectChildrenWrapper = styled.ul((props) => css `
+    position: absolute;
+    z-index: 3;
+    top: calc(${props.bottom}px - 0.5em);
+    left: ${props.left}px;
+    background: #fff;
+    box-shadow: 0px 10px 15px 0px rgba(0, 0, 0, 0.1);
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    min-width: ${props.minWidth}px;
+    max-width: 350px;
+
+    max-height: 40vh;
+    overflow-y: auto;
+    overflow-x: hidden;
+
+    & > li {
+      word-break: break-all;
+      background: #fff;
+      display: flex;
+      width: calc(100% - 1em);
+      cursor: pointer;
+      list-style: none;
+      padding: 0.5em;
+      padding-left: 1em;
+      border-top: 1px solid ${props.theme.border};
+      transition: background 150ms ease-in-out;
+
+      &:first-of-type {
+        border-top: none;
+      }
+
+      &:hover,
+      &:focus {
+        background: ${props.theme.bgLight};
+      }
+    }
+  `);
+export const SelectOption = styled.li(({ disabled, bold, indent, }) => css `
+    padding: 0;
+    padding-left: 8px;
+    padding-right: 8px;
+    justify-content: flex-start;
+    height: 100%;
+    width: 100%;
+
+    opacity: ${disabled ? 0.5 : 1};
+
+    font-weight: ${bold ? 600 : 400};
+
+    ${indent && calculateIndent(indent)}
+  `);
+export const styles = {
+    active: (theme) => css `
+      &::after {
+        transition: all ease 250ms;
+        position: absolute;
+        content: '';
+        width: 100%;
+        height: 4px;
+        bottom: 0;
+        left: 0;
+        background-color: ${theme.primary};
+        z-index: 1;
+      }
+    `,
 };
-const TabNavItemWrapper = exports.TabNavItemWrapper = /*#__PURE__*/(0, _base.default)("button", process.env.NODE_ENV === "production" ? {
-  target: "e169sb432"
-} : {
-  target: "e169sb432",
-  label: "TabNavItemWrapper"
-})(props => /*#__PURE__*/(0, _react.css)("display:flex;border:none;background:transparent;cursor:pointer;padding:1rem;position:relative;font-size:16px;font-weight:bold;transition:all ease 250ms;&:hover{&::after{position:absolute;content:'';width:100%;height:4px;bottom:0;left:0;background-color:", props.theme.primary, ";z-index:1;opacity:0.4;}}" + (process.env.NODE_ENV === "production" ? "" : ";label:TabNavItemWrapper;")));
-const SelectChildrenWrapper = exports.SelectChildrenWrapper = /*#__PURE__*/(0, _base.default)("ul", process.env.NODE_ENV === "production" ? {
-  target: "e169sb431"
-} : {
-  target: "e169sb431",
-  label: "SelectChildrenWrapper"
-})(props => /*#__PURE__*/(0, _react.css)("position:absolute;z-index:3;top:calc(", props.bottom, "px - 0.5em);left:", props.left, "px;background:#fff;box-shadow:0px 10px 15px 0px rgba(0, 0, 0, 0.1);list-style:none;margin:0;padding:0;min-width:", props.minWidth, "px;max-width:350px;max-height:40vh;overflow-y:auto;overflow-x:hidden;&>li{word-break:break-all;background:#fff;display:flex;width:calc(100% - 1em);cursor:pointer;list-style:none;padding:0.5em;padding-left:1em;border-top:1px solid ", props.theme.border, ";transition:background 150ms ease-in-out;&:first-of-type{border-top:none;}&:hover,&:focus{background:", props.theme.bgLight, ";}}" + (process.env.NODE_ENV === "production" ? "" : ";label:SelectChildrenWrapper;")));
-const SelectOption = exports.SelectOption = /*#__PURE__*/(0, _base.default)("li", process.env.NODE_ENV === "production" ? {
-  target: "e169sb430"
-} : {
-  target: "e169sb430",
-  label: "SelectOption"
-})(({
-  disabled,
-  bold,
-  indent
-}) => /*#__PURE__*/(0, _react.css)("padding:0;padding-left:8px;padding-right:8px;justify-content:flex-start;height:100%;width:100%;opacity:", disabled ? 0.5 : 1, ";font-weight:", bold ? 600 : 400, ";", indent && calculateIndent(indent), ";" + (process.env.NODE_ENV === "production" ? "" : ";label:SelectOption;")));
-const styles = exports.styles = {
-  active: theme => /*#__PURE__*/(0, _react.css)("&::after{transition:all ease 250ms;position:absolute;content:'';width:100%;height:4px;bottom:0;left:0;background-color:", theme.primary, ";z-index:1;}" + (process.env.NODE_ENV === "production" ? "" : ";label:active;"))
-};

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

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

package/lib/core/TabNav/index.js

@@ -1,135 +1,61 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.TabNav = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _react2 = require("@emotion/react");
-var _TabContext = require("./TabContext");
-var _styles = require("./styles");
-var _useContainerDimensions = require("./utils/useContainerDimensions");
-var _Select = _interopRequireWildcard(require("../Select"));
-var _Link = _interopRequireDefault(require("../Link"));
-var _useIsMobile = require("../../hooks/useIsMobile");
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
-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; }
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 /** @jsxImportSource @emotion/react */
-
-const TabNav = ({
-  value,
-  children,
-  onChange,
-  css,
-  maxWidth,
-  color,
-  underlineColor,
-  vertical,
-  actions,
-  className,
-  breakpoint
-}) => {
-  const isMobile = (0, _useIsMobile.useIsMobile)(breakpoint);
-  const theme = (0, _react2.useTheme)();
-
-  // Container dimensions
-  const ref = _react.default.useRef(null);
-  const {
-    width: containerWidth
-  } = (0, _useContainerDimensions.useContainerDimensions)(ref);
-
-  // Button dimensions
-  const buttonRef = _react.default.useRef(null);
-  const {
-    width: actionsWidth
-  } = (0, _useContainerDimensions.useContainerDimensions)(buttonRef);
-  const values = _react.default.Children.map(children, child => child !== null && child.props)?.filter(Boolean) || [];
-  const displayNameFromValue = value => {
-    const item = values.find(item => item.value === value);
-    return item?.displayText || String(value);
-  };
-  const valueWithSelectItemIndex = values.findIndex(item => item.selectItems?.length);
-  const listOfSelectedItems = items => {
-    if (!items) return [];
-    return items.map(prop => ({
-      ...prop
-    }));
-  };
-  if (valueWithSelectItemIndex > -1) {
-    const selectedItems = values[valueWithSelectItemIndex].selectItems;
-
-    // If we have no actual selectedItems, dont show any label while in the mobile/dropdown version
-    const isEverySelectedItemDisabledOrLink = Number(selectedItems?.length) >= 1 && selectedItems?.every(item => item.disabled || item.onClick);
-    if (isEverySelectedItemDisabledOrLink) {
-      const itemsWithOnClick = selectedItems?.filter(item => item.onClick) || [];
-
-      // Remove valueWithSelectItemIndex from the values array, but add on itemsWithOnClick in the list
-      values.splice(valueWithSelectItemIndex, 1, ...listOfSelectedItems(itemsWithOnClick));
-    } else {
-      values.splice(valueWithSelectItemIndex + 1, 0, ...listOfSelectedItems(selectedItems));
-    }
-  }
-  return (0, _jsxRuntime.jsx)(_TabContext.TabContextProvider, {
-    onChange: onChange,
-    value: value || values?.[0].value,
-    children: (0, _jsxRuntime.jsx)(_TabContext.TabContext.Consumer, {
-      children: ({
-        width: childrenTotalWidth,
-        setActive,
-        active
-      }) => {
-        if (breakpoint && isMobile || !breakpoint && actionsWidth + childrenTotalWidth > containerWidth) {
-          // Render dropdown instead of tabs
-
-          return (0, _jsxRuntime.jsxs)(_styles.SelectWrapper, {
-            children: [(0, _jsxRuntime.jsx)(_Select.default, {
-              input: true,
-              width: "auto",
-              text: "Velg",
-              selectedValue: displayNameFromValue(String(active)) || '0',
-              onChange: ({
-                value
-              }) => value && setActive(value),
-              className: className,
-              maxHeight: "40vh",
-              children: values.map(({
-                displayText,
-                value: v,
-                selectItems,
-                onClick,
-                indent,
-                disabled
-              }) => onClick ? (0, _jsxRuntime.jsx)(_styles.SelectLinkWrapper, {
-                children: (0, _jsxRuntime.jsx)(_Link.default, {
-                  nopadding: true,
-                  small: true,
-                  onClick: onClick,
-                  children: displayText || v
-                })
-              }, v) : (0, _jsxRuntime.jsx)(_Select.Option, {
-                value: v,
-                indent: indent,
-                disabled: disabled || Boolean(selectItems?.length),
-                children: displayText || v
-              }, v))
-            }), actions]
-          });
+import React from 'react';
+import { useTheme } from '@emotion/react';
+import { TabContextProvider, TabContext } from './TabContext';
+import { styles, TabNavWrapper, TabNavActions, SelectWrapper, SelectLinkWrapper, } from './styles';
+import { useContainerDimensions } from './utils/useContainerDimensions';
+import Select, { Option } from '../Select';
+import Link from '../Link';
+import { useIsMobile } from '../../hooks/useIsMobile';
+const TabNav = ({ value, children, onChange, css, maxWidth, color, underlineColor, vertical, actions, className, breakpoint, }) => {
+    const isMobile = useIsMobile(breakpoint);
+    const theme = useTheme();
+    // Container dimensions
+    const ref = React.useRef(null);
+    const { width: containerWidth } = useContainerDimensions(ref);
+    // Button dimensions
+    const buttonRef = React.useRef(null);
+    const { width: actionsWidth } = useContainerDimensions(buttonRef);
+    const values = React.Children.map(children, (child) => child !== null && child.props)?.filter(Boolean) || [];
+    const displayNameFromValue = (value) => {
+        const item = values.find((item) => item.value === value);
+        return item?.displayText || String(value);
+    };
+    const valueWithSelectItemIndex = values.findIndex((item) => item.selectItems?.length);
+    const listOfSelectedItems = (items) => {
+        if (!items)
+            return [];
+        return items.map((prop) => ({ ...prop }));
+    };
+    if (valueWithSelectItemIndex > -1) {
+        const selectedItems = values[valueWithSelectItemIndex].selectItems;
+        // If we have no actual selectedItems, dont show any label while in the mobile/dropdown version
+        const isEverySelectedItemDisabledOrLink = Number(selectedItems?.length) >= 1 &&
+            selectedItems?.every((item) => item.disabled || item.onClick);
+        if (isEverySelectedItemDisabledOrLink) {
+            const itemsWithOnClick = selectedItems?.filter((item) => item.onClick) || [];
+            // Remove valueWithSelectItemIndex from the values array, but add on itemsWithOnClick in the list
+            values.splice(valueWithSelectItemIndex, 1, ...listOfSelectedItems(itemsWithOnClick));
+        }
+        else {
+            values.splice(valueWithSelectItemIndex + 1, 0, ...listOfSelectedItems(selectedItems));
         }
-        return (0, _jsxRuntime.jsxs)(_styles.TabNavWrapper, {
-          ref: ref,
-          theme: theme,
-          className: className,
-          css: () => [vertical && _styles.styles.vertical, color && _styles.styles.color(color), maxWidth && _styles.styles.maxWidth(maxWidth), underlineColor && _styles.styles.underlineColor(underlineColor), css],
-          children: [children, actions && (0, _jsxRuntime.jsx)(_styles.TabNavActions, {
-            ref: buttonRef,
-            children: actions
-          })]
-        });
-      }
-    })
-  });
+    }
+    return (_jsx(TabContextProvider, { onChange: onChange, value: value || values?.[0].value, children: _jsx(TabContext.Consumer, { children: ({ width: childrenTotalWidth, setActive, active }) => {
+                if ((breakpoint && isMobile) ||
+                    (!breakpoint && actionsWidth + childrenTotalWidth > containerWidth)) {
+                    // Render dropdown instead of tabs
+                    return (_jsxs(SelectWrapper, { children: [_jsx(Select, { input: true, width: "auto", text: "Velg", selectedValue: displayNameFromValue(String(active)) || '0', onChange: ({ value }) => value && setActive(value), className: className, maxHeight: "40vh", children: values.map(({ displayText, value: v, selectItems, onClick, indent, disabled, }) => onClick ? (_jsx(SelectLinkWrapper, { children: _jsx(Link, { nopadding: true, small: true, onClick: onClick, children: displayText || v }) }, v)) : (_jsx(Option, { value: v, indent: indent, disabled: disabled || Boolean(selectItems?.length), children: displayText || v }, v))) }), actions] }));
+                }
+                return (_jsxs(TabNavWrapper, { ref: ref, theme: theme, className: className, css: () => [
+                        vertical && styles.vertical,
+                        color && styles.color(color),
+                        maxWidth && styles.maxWidth(maxWidth),
+                        underlineColor && styles.underlineColor(underlineColor),
+                        css,
+                    ], children: [children, actions && (_jsx(TabNavActions, { ref: buttonRef, children: actions }))] }));
+            } }) }));
 };
-exports.TabNav = TabNav;
-var _default = exports.default = TabNav;
+export { TabNav };
+export default TabNav;

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

@@ -21,4 +21,3 @@ export declare const styles: {
     vertical: import("@emotion/react").SerializedStyles;
 };
 export default styles;
-//# sourceMappingURL=styles.d.ts.map

package/lib/core/TabNav/styles.js

@@ -1,56 +1,83 @@
-"use strict";
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import bp from '../../globals/styles/breakpoints';
+export const TabNavWrapper = styled.div((props) => css `
+    display: flex;
+    width: 100%;
+    position: relative;
+    padding: 0;
+    margin: 0;
+    align-content: space-between;
+    align-items: flex-end;
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.styles = exports.default = exports.TabNavWrapper = exports.TabNavActions = exports.SelectWrapper = exports.SelectLinkWrapper = void 0;
-var _base = _interopRequireDefault(require("@emotion/styled/base"));
-var _react = require("@emotion/react");
-var _breakpoints = _interopRequireDefault(require("../../globals/styles/breakpoints"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-const TabNavWrapper = exports.TabNavWrapper = /*#__PURE__*/(0, _base.default)("div", process.env.NODE_ENV === "production" ? {
-  target: "evtutk53"
-} : {
-  target: "evtutk53",
-  label: "TabNavWrapper"
-})(props => /*#__PURE__*/(0, _react.css)("display:flex;width:100%;position:relative;padding:0;margin:0;align-content:space-between;align-items:flex-end;&:after{content:'';display:block;width:100%;position:absolute;bottom:0;height:4px;background:", props.theme.border, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:TabNavWrapper;")));
-const TabNavActions = exports.TabNavActions = /*#__PURE__*/(0, _base.default)("span", process.env.NODE_ENV === "production" ? {
-  target: "evtutk52"
-} : {
-  target: "evtutk52",
-  label: "TabNavActions"
-})("position:absolute;right:0;bottom:1em;@media (max-width: ", _breakpoints.default.medium, "){bottom:0;padding:1em;&:after{display:none;}}");
-const SelectLinkWrapper = exports.SelectLinkWrapper = /*#__PURE__*/(0, _base.default)("li", process.env.NODE_ENV === "production" ? {
-  target: "evtutk51"
-} : {
-  target: "evtutk51",
-  label: "SelectLinkWrapper"
-})();
-const SelectWrapper = exports.SelectWrapper = /*#__PURE__*/(0, _base.default)("div", process.env.NODE_ENV === "production" ? {
-  target: "evtutk50"
-} : {
-  target: "evtutk50",
-  label: "SelectWrapper"
-})(process.env.NODE_ENV === "production" ? {
-  name: "1cickod",
-  styles: "display:flex;flex-direction:column;gap:0.5em;&>span>div>ul>li>button{word-break:break-all;text-align:left;}"
-} : {
-  name: "1cickod",
-  styles: "display:flex;flex-direction:column;gap:0.5em;&>span>div>ul>li>button{word-break:break-all;text-align:left;}",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const styles = exports.styles = {
-  maxWidth: width => /*#__PURE__*/(0, _react.css)("max-width:", width, "px;" + (process.env.NODE_ENV === "production" ? "" : ";label:maxWidth;")),
-  color: color => /*#__PURE__*/(0, _react.css)("& button{color:", color, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:color;")),
-  underlineColor: color => /*#__PURE__*/(0, _react.css)("& button::after,& button:hover::after{background:", color, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:underlineColor;")),
-  vertical: process.env.NODE_ENV === "production" ? {
-    name: "1yrkr6r",
-    styles: "flex-direction:column;align-items:flex-start;&:after{left:0;top:0;width:4px;height:100%;}& button::after,& button:hover::after{height:100%;width:4px;top:0;}"
-  } : {
-    name: "qxb6uv-vertical",
-    styles: "flex-direction:column;align-items:flex-start;&:after{left:0;top:0;width:4px;height:100%;}& button::after,& button:hover::after{height:100%;width:4px;top:0;};label:vertical;",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+    &:after {
+      content: '';
+      display: block;
+      width: 100%;
+      position: absolute;
+      bottom: 0;
+      height: 4px;
+      background: ${props.theme.border};
+    }
+  `);
+export const TabNavActions = styled.span `
+  position: absolute;
+  right: 0;
+  bottom: 1em;
+
+  @media (max-width: ${bp.medium}) {
+    bottom: 0;
+    padding: 1em;
+
+    &:after {
+      display: none;
+    }
+  }
+`;
+export const SelectLinkWrapper = styled.li ``;
+export const SelectWrapper = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 0.5em;
+
+  // To make the test align correctly and not overflow.
+  & > span > div > ul > li > button {
+    word-break: break-all;
+    text-align: left;
   }
+`;
+export const styles = {
+    maxWidth: (width) => css `
+    max-width: ${width}px;
+  `,
+    color: (color) => css `
+    & button {
+      color: ${color};
+    }
+  `,
+    underlineColor: (color) => css `
+    & button::after,
+    & button:hover::after {
+      background: ${color};
+    }
+  `,
+    vertical: css `
+    flex-direction: column;
+    align-items: flex-start;
+
+    &:after {
+      left: 0;
+      top: 0;
+      width: 4px;
+      height: 100%;
+    }
+
+    & button::after,
+    & button:hover::after {
+      height: 100%;
+      width: 4px;
+      top: 0;
+    }
+  `,
 };
-var _default = exports.default = styles;
+export default styles;

package/lib/core/TabNav/utils/useContainerDimensions.d.ts

@@ -5,4 +5,3 @@ export declare const useContainerDimensions: (ref: React.RefObject<HTMLButtonEle
     left: number;
     bottom: number;
 };
-//# sourceMappingURL=useContainerDimensions.d.ts.map

package/lib/core/TabNav/utils/useContainerDimensions.js

@@ -1,33 +1,27 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useContainerDimensions = void 0;
-var _react = require("react");
-const useContainerDimensions = ref => {
-  const [dimensions, setDimensions] = (0, _react.useState)({
-    width: 0,
-    height: 0,
-    top: 0,
-    left: 0,
-    bottom: 0
-  });
-  const getDimensions = (0, _react.useCallback)(() => ({
-    width: ref.current?.offsetWidth || 0,
-    height: ref.current?.offsetHeight || 0,
-    top: ref.current?.offsetTop || 0,
-    left: ref.current?.offsetLeft || 0,
-    bottom: Number(ref.current?.offsetTop) + Number(ref.current?.offsetHeight) || 0
-  }), [ref]);
-  (0, _react.useEffect)(() => {
-    const handleResize = () => setDimensions(getDimensions());
-    if (ref.current) setDimensions(getDimensions());
-    window.addEventListener('resize', handleResize);
-    return () => {
-      window.removeEventListener('resize', handleResize);
-    };
-  }, [getDimensions, ref]);
-  return dimensions;
+import { useCallback, useEffect, useState } from 'react';
+export const useContainerDimensions = (ref) => {
+    const [dimensions, setDimensions] = useState({
+        width: 0,
+        height: 0,
+        top: 0,
+        left: 0,
+        bottom: 0,
+    });
+    const getDimensions = useCallback(() => ({
+        width: ref.current?.offsetWidth || 0,
+        height: ref.current?.offsetHeight || 0,
+        top: ref.current?.offsetTop || 0,
+        left: ref.current?.offsetLeft || 0,
+        bottom: Number(ref.current?.offsetTop) + Number(ref.current?.offsetHeight) || 0,
+    }), [ref]);
+    useEffect(() => {
+        const handleResize = () => setDimensions(getDimensions());
+        if (ref.current)
+            setDimensions(getDimensions());
+        window.addEventListener('resize', handleResize);
+        return () => {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, [getDimensions, ref]);
+    return dimensions;
 };
-exports.useContainerDimensions = useContainerDimensions;

package/lib/core/Table/Cell.d.ts

@@ -20,4 +20,3 @@ export type IProps = {
 };
 declare const Cell: React.FC<IProps>;
 export default Cell;
-//# sourceMappingURL=Cell.d.ts.map

package/lib/core/Table/Cell.js

@@ -1,31 +1,14 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _styles = require("./styles");
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-/** @jsxImportSource @emotion/react */
-
-const Cell = ({
-  startAlign,
-  centerAlign,
-  children,
-  colSpan,
-  endAlign,
-  header,
-  truncate,
-  wrap,
-  ...props
-}) => {
-  const Tag = header ? 'th' : 'td';
-  return (0, _jsxRuntime.jsx)(Tag, {
-    ...props,
-    css: () => [_styles.styles.cell_defaults, startAlign && _styles.styles.cell_left, centerAlign && _styles.styles.cell_center, endAlign && _styles.styles.cell_right, truncate && _styles.styles.cell_truncate, wrap && _styles.styles.cell_wrap],
-    children: children
-  });
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { styles } from './styles';
+const Cell = ({ startAlign, centerAlign, children, colSpan, endAlign, header, truncate, wrap, ...props }) => {
+    const Tag = header ? 'th' : 'td';
+    return (_jsx(Tag, { ...props, css: () => [
+            styles.cell_defaults,
+            startAlign && styles.cell_left,
+            centerAlign && styles.cell_center,
+            endAlign && styles.cell_right,
+            truncate && styles.cell_truncate,
+            wrap && styles.cell_wrap,
+        ], children: children }));
 };
-var _default = exports.default = Cell;
+export default Cell;

package/lib/core/Table/Row.d.ts

@@ -19,4 +19,3 @@ export type IProps = {
 };
 declare const Row: React.FC<IProps>;
 export default Row;
-//# sourceMappingURL=Row.d.ts.map