@navikt/ds-react 8.6.0 → 8.8.0

package/src/utils/hooks/useScrollLock.ts

@@ -6,6 +6,46 @@ let originalHtmlStyles: Partial<CSSStyleDeclaration> = {};
 let originalBodyStyles: Partial<CSSStyleDeclaration> = {};
 let originalHtmlScrollBehavior = "";
 
+function supportsStableScrollbarGutter(referenceElement: Element | null) {
+  const supported =
+    typeof CSS !== "undefined" &&
+    CSS.supports &&
+    CSS.supports("scrollbar-gutter", "stable");
+
+  if (!supported || typeof document === "undefined") {
+    return false;
+  }
+
+  /*
+   * We need to do aditional checks since the scenario:
+   * - Scrollbar is edited with `::-webkit-scrollbar`
+   * - MacOS setting: Show scroll bars -> Automatically based on mouse or tracked
+   * Causes the calculation of scrollbar width to be incorrect, and thus the scrollbar gutter to not work as intended.
+   */
+
+  const doc = ownerDocument(referenceElement);
+  const html = doc.documentElement;
+  const body = doc.body;
+
+  const scrollContainer = isOverflowElement(html) ? html : body;
+
+  const originalScrollContainerOverflowY = scrollContainer.style.overflowY;
+  const originalHtmlStyleGutter = html.style.scrollbarGutter;
+
+  html.style.scrollbarGutter = "stable";
+
+  scrollContainer.style.overflowY = "scroll";
+  const before = scrollContainer.offsetWidth;
+
+  scrollContainer.style.overflowY = "hidden";
+  const after = scrollContainer.offsetWidth;
+
+  scrollContainer.style.overflowY = originalScrollContainerOverflowY;
+  html.style.scrollbarGutter = originalHtmlStyleGutter;
+
+  return before === after;
+}
+
 function hasInsetScrollbars(referenceElement: Element | null) {
   if (typeof document === "undefined") {
     return false;
@@ -59,6 +99,9 @@ function preventScrollStandard(referenceElement: Element | null) {
 
     const htmlStyles = win.getComputedStyle(html);
     const bodyStyles = win.getComputedStyle(body);
+    const htmlScrollbarGutterValue = htmlStyles.scrollbarGutter || "";
+    const hasBothEdges = htmlScrollbarGutterValue.includes("both-edges");
+    const scrollbarGutterValue = hasBothEdges ? "stable both-edges" : "stable";
 
     scrollTop = html.scrollTop;
     scrollLeft = html.scrollLeft;
@@ -103,26 +146,27 @@ function preventScrollStandard(referenceElement: Element | null) {
     /**
      * Check support for stable scrollbar gutter to avoid layout shift when scrollbars appear/disappear.
      */
-    const supportsStableScrollbarGutter =
-      typeof CSS !== "undefined" &&
-      CSS.supports?.("scrollbar-gutter", "stable");
+    const supportsScrollbarGutter =
+      supportsStableScrollbarGutter(referenceElement);
+
     /*
      * DOM writes:
      * Do not read the DOM past this point!
      */
 
+    if (supportsScrollbarGutter) {
+      const elementToLock = isOverflowElement(html) ? html : body;
+
+      html.style.scrollbarGutter = scrollbarGutterValue;
+      elementToLock.style.overflowY = "hidden";
+      elementToLock.style.overflowX = "hidden";
+      return;
+    }
+
     Object.assign(html.style, {
       scrollbarGutter: "stable",
-      overflowY:
-        !supportsStableScrollbarGutter &&
-        (isScrollableY || hasConstantOverflowY)
-          ? "scroll"
-          : "hidden",
-      overflowX:
-        !supportsStableScrollbarGutter &&
-        (isScrollableX || hasConstantOverflowX)
-          ? "scroll"
-          : "hidden",
+      overflowY: isScrollableY || hasConstantOverflowY ? "scroll" : "hidden",
+      overflowX: isScrollableX || hasConstantOverflowX ? "scroll" : "hidden",
     });
 
     Object.assign(body.style, {

package/cjs/data/table/th/DataTableThSortHandle.d.ts

@@ -1,6 +0,0 @@
-import React from "react";
-declare function DataTableThSortHandle({ sortDirection, onSortChange, }: {
-    sortDirection?: "asc" | "desc" | "none" | false;
-    onSortChange?: (direction: "asc" | "desc" | "none", event: Event) => void;
-}): React.JSX.Element | null;
-export { DataTableThSortHandle };

package/cjs/data/table/th/DataTableThSortHandle.js

@@ -1,82 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DataTableThSortHandle = DataTableThSortHandle;
-const react_1 = __importStar(require("react"));
-const aksel_icons_1 = require("@navikt/aksel-icons");
-const button_1 = require("../../../button");
-const ICON_CONFIG = {
-    desc: {
-        icon: aksel_icons_1.SortDownIcon,
-        title: "Sorter stigende",
-    },
-    asc: {
-        icon: aksel_icons_1.SortUpIcon,
-        title: "Ingen sortering",
-    },
-    none: {
-        icon: aksel_icons_1.ArrowsUpDownIcon,
-        title: "Sorter synkende",
-    },
-};
-function DataTableThSortHandle({ sortDirection = false, onSortChange, }) {
-    const IconConfig = (0, react_1.useMemo)(() => {
-        if (!sortDirection) {
-            return null;
-        }
-        return ICON_CONFIG[sortDirection];
-    }, [sortDirection]);
-    if (!sortDirection || !IconConfig) {
-        return null;
-    }
-    return (react_1.default.createElement(button_1.Button, { "data-color": "neutral", variant: "tertiary", size: "small", icon: react_1.default.createElement(IconConfig.icon, { title: IconConfig.title }), onClick: (event) => {
-            if (!onSortChange)
-                return;
-            /* TODO: This configuration is not a given */
-            let newDirection;
-            if (sortDirection === "none") {
-                newDirection = "asc";
-            }
-            else if (sortDirection === "asc") {
-                newDirection = "desc";
-            }
-            else {
-                newDirection = "none";
-            }
-            /* TODO: Handle types better */
-            onSortChange(newDirection, event);
-        } }));
-}
-//# sourceMappingURL=DataTableThSortHandle.js.map

package/cjs/data/table/th/DataTableThSortHandle.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DataTableThSortHandle.js","sourceRoot":"","sources":["../../../../src/data/table/th/DataTableThSortHandle.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkES,sDAAqB;AAlE9B,+CAAuC;AACvC,qDAI6B;AAC7B,4CAAyC;AAEzC,MAAM,WAAW,GAAG;IAClB,IAAI,EAAE;QACJ,IAAI,EAAE,0BAAY;QAClB,KAAK,EAAE,iBAAiB;KACzB;IACD,GAAG,EAAE;QACH,IAAI,EAAE,wBAAU;QAChB,KAAK,EAAE,iBAAiB;KACzB;IACD,IAAI,EAAE;QACJ,IAAI,EAAE,8BAAgB;QACtB,KAAK,EAAE,iBAAiB;KACzB;CACF,CAAC;AAEF,SAAS,qBAAqB,CAAC,EAC7B,aAAa,GAAG,KAAK,EACrB,YAAY,GAIb;IACC,MAAM,UAAU,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QAC9B,IAAI,CAAC,aAAa,EAAE,CAAC;YACnB,OAAO,IAAI,CAAC;QACd,CAAC;QACD,OAAO,WAAW,CAAC,aAAa,CAAC,CAAC;IACpC,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,IAAI,CAAC,aAAa,IAAI,CAAC,UAAU,EAAE,CAAC;QAClC,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,CACL,8BAAC,eAAM,kBACM,SAAS,EACpB,OAAO,EAAC,UAAU,EAClB,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,8BAAC,UAAU,CAAC,IAAI,IAAC,KAAK,EAAE,UAAU,CAAC,KAAK,GAAI,EAClD,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE;YACjB,IAAI,CAAC,YAAY;gBAAE,OAAO;YAE1B,6CAA6C;YAC7C,IAAI,YAAqC,CAAC;YAC1C,IAAI,aAAa,KAAK,MAAM,EAAE,CAAC;gBAC7B,YAAY,GAAG,KAAK,CAAC;YACvB,CAAC;iBAAM,IAAI,aAAa,KAAK,KAAK,EAAE,CAAC;gBACnC,YAAY,GAAG,MAAM,CAAC;YACxB,CAAC;iBAAM,CAAC;gBACN,YAAY,GAAG,MAAM,CAAC;YACxB,CAAC;YACD,+BAA+B;YAC/B,YAAY,CAAC,YAAY,EAAE,KAAyB,CAAC,CAAC;QACxD,CAAC,GACD,CACH,CAAC;AACJ,CAAC"}

package/esm/data/table/th/DataTableThSortHandle.d.ts

@@ -1,6 +0,0 @@
-import React from "react";
-declare function DataTableThSortHandle({ sortDirection, onSortChange, }: {
-    sortDirection?: "asc" | "desc" | "none" | false;
-    onSortChange?: (direction: "asc" | "desc" | "none", event: Event) => void;
-}): React.JSX.Element | null;
-export { DataTableThSortHandle };

package/esm/data/table/th/DataTableThSortHandle.js

@@ -1,47 +0,0 @@
-import React, { useMemo } from "react";
-import { ArrowsUpDownIcon, SortDownIcon, SortUpIcon, } from "@navikt/aksel-icons";
-import { Button } from "../../../button/index.js";
-const ICON_CONFIG = {
-    desc: {
-        icon: SortDownIcon,
-        title: "Sorter stigende",
-    },
-    asc: {
-        icon: SortUpIcon,
-        title: "Ingen sortering",
-    },
-    none: {
-        icon: ArrowsUpDownIcon,
-        title: "Sorter synkende",
-    },
-};
-function DataTableThSortHandle({ sortDirection = false, onSortChange, }) {
-    const IconConfig = useMemo(() => {
-        if (!sortDirection) {
-            return null;
-        }
-        return ICON_CONFIG[sortDirection];
-    }, [sortDirection]);
-    if (!sortDirection || !IconConfig) {
-        return null;
-    }
-    return (React.createElement(Button, { "data-color": "neutral", variant: "tertiary", size: "small", icon: React.createElement(IconConfig.icon, { title: IconConfig.title }), onClick: (event) => {
-            if (!onSortChange)
-                return;
-            /* TODO: This configuration is not a given */
-            let newDirection;
-            if (sortDirection === "none") {
-                newDirection = "asc";
-            }
-            else if (sortDirection === "asc") {
-                newDirection = "desc";
-            }
-            else {
-                newDirection = "none";
-            }
-            /* TODO: Handle types better */
-            onSortChange(newDirection, event);
-        } }));
-}
-export { DataTableThSortHandle };
-//# sourceMappingURL=DataTableThSortHandle.js.map

package/esm/data/table/th/DataTableThSortHandle.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DataTableThSortHandle.js","sourceRoot":"","sources":["../../../../src/data/table/th/DataTableThSortHandle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EACL,gBAAgB,EAChB,YAAY,EACZ,UAAU,GACX,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAEzC,MAAM,WAAW,GAAG;IAClB,IAAI,EAAE;QACJ,IAAI,EAAE,YAAY;QAClB,KAAK,EAAE,iBAAiB;KACzB;IACD,GAAG,EAAE;QACH,IAAI,EAAE,UAAU;QAChB,KAAK,EAAE,iBAAiB;KACzB;IACD,IAAI,EAAE;QACJ,IAAI,EAAE,gBAAgB;QACtB,KAAK,EAAE,iBAAiB;KACzB;CACF,CAAC;AAEF,SAAS,qBAAqB,CAAC,EAC7B,aAAa,GAAG,KAAK,EACrB,YAAY,GAIb;IACC,MAAM,UAAU,GAAG,OAAO,CAAC,GAAG,EAAE;QAC9B,IAAI,CAAC,aAAa,EAAE,CAAC;YACnB,OAAO,IAAI,CAAC;QACd,CAAC;QACD,OAAO,WAAW,CAAC,aAAa,CAAC,CAAC;IACpC,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,IAAI,CAAC,aAAa,IAAI,CAAC,UAAU,EAAE,CAAC;QAClC,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,CACL,oBAAC,MAAM,kBACM,SAAS,EACpB,OAAO,EAAC,UAAU,EAClB,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,oBAAC,UAAU,CAAC,IAAI,IAAC,KAAK,EAAE,UAAU,CAAC,KAAK,GAAI,EAClD,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE;YACjB,IAAI,CAAC,YAAY;gBAAE,OAAO;YAE1B,6CAA6C;YAC7C,IAAI,YAAqC,CAAC;YAC1C,IAAI,aAAa,KAAK,MAAM,EAAE,CAAC;gBAC7B,YAAY,GAAG,KAAK,CAAC;YACvB,CAAC;iBAAM,IAAI,aAAa,KAAK,KAAK,EAAE,CAAC;gBACnC,YAAY,GAAG,MAAM,CAAC;YACxB,CAAC;iBAAM,CAAC;gBACN,YAAY,GAAG,MAAM,CAAC;YACxB,CAAC;YACD,+BAA+B;YAC/B,YAAY,CAAC,YAAY,EAAE,KAAyB,CAAC,CAAC;QACxD,CAAC,GACD,CACH,CAAC;AACJ,CAAC;AAED,OAAO,EAAE,qBAAqB,EAAE,CAAC"}

package/src/data/table/th/DataTableThSortHandle.tsx

@@ -1,67 +0,0 @@
-import React, { useMemo } from "react";
-import {
-  ArrowsUpDownIcon,
-  SortDownIcon,
-  SortUpIcon,
-} from "@navikt/aksel-icons";
-import { Button } from "../../../button";
-
-const ICON_CONFIG = {
-  desc: {
-    icon: SortDownIcon,
-    title: "Sorter stigende",
-  },
-  asc: {
-    icon: SortUpIcon,
-    title: "Ingen sortering",
-  },
-  none: {
-    icon: ArrowsUpDownIcon,
-    title: "Sorter synkende",
-  },
-};
-
-function DataTableThSortHandle({
-  sortDirection = false,
-  onSortChange,
-}: {
-  sortDirection?: "asc" | "desc" | "none" | false;
-  onSortChange?: (direction: "asc" | "desc" | "none", event: Event) => void;
-}) {
-  const IconConfig = useMemo(() => {
-    if (!sortDirection) {
-      return null;
-    }
-    return ICON_CONFIG[sortDirection];
-  }, [sortDirection]);
-
-  if (!sortDirection || !IconConfig) {
-    return null;
-  }
-
-  return (
-    <Button
-      data-color="neutral"
-      variant="tertiary"
-      size="small"
-      icon={<IconConfig.icon title={IconConfig.title} />}
-      onClick={(event) => {
-        if (!onSortChange) return;
-
-        /* TODO: This configuration is not a given */
-        let newDirection: "asc" | "desc" | "none";
-        if (sortDirection === "none") {
-          newDirection = "asc";
-        } else if (sortDirection === "asc") {
-          newDirection = "desc";
-        } else {
-          newDirection = "none";
-        }
-        /* TODO: Handle types better */
-        onSortChange(newDirection, event as unknown as Event);
-      }}
-    />
-  );
-}
-
-export { DataTableThSortHandle };