@norges-domstoler/dds-components 10.0.1 → 10.0.2

package/dist/cjs/components/Typography/Paragraph/Paragraph.stories.d.ts

@@ -32,4 +32,5 @@ declare const _default: {
     };
 };
 export default _default;
+export declare const Overview: (args: StoryTProps) => JSX.Element;
 export declare const Default: (args: StoryTProps) => JSX.Element;

package/dist/cjs/index.js

@@ -5639,7 +5639,7 @@ var Search$1 = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     type: 'search',
     id: uniqueId,
     'aria-describedby': spaceSeparatedIdListGenerator([tip ? tipId : undefined, context.suggestions ? suggestionsDescriptionId : undefined, ariaDescribedby]),
-    value: context.inputValue !== undefined ? context.inputValue : value ? value : '',
+    value: context.inputValue !== undefined ? context.inputValue : value,
     onChange: handleChange,
     autoComplete: 'off'
   });
@@ -5733,7 +5733,7 @@ var SearchAutocompleteWrapper = function SearchAutocompleteWrapper(props) {
   };
   var handleChange = function handleChange(e) {
     var query = e.target.value;
-    setInputValue(query);
+    handleSetInputValue(query);
     var finalSuggestions = [];
     if (query.length >= queryLength) {
       if (data) {
@@ -5767,10 +5767,13 @@ var SearchAutocompleteWrapper = function SearchAutocompleteWrapper(props) {
   };
   var handleSuggestionClick = function handleSuggestionClick(e) {
     setSuggestions([]);
-    setInputValue(e.target.innerText);
+    handleSetInputValue(e.target.innerText);
     onSuggestionSelection && onSuggestionSelection();
     closeSuggestions();
   };
+  var handleSetInputValue = function handleSetInputValue(value) {
+    setInputValue(value || '');
+  };
   var inputRef = React.useRef(null);
   var suggestionsRef = React.useRef(null);
   useOnClickOutside([inputRef.current, suggestionsRef.current], function () {
@@ -7757,17 +7760,51 @@ var Tooltip = /*#__PURE__*/React.forwardRef(function (props, ref) {
     _useState2 = _slicedToArray(_useState, 2),
     open = _useState2[0],
     setOpen = _useState2[1];
-  var _useState3 = React.useState(null),
+  var _useState3 = React.useState(false),
     _useState4 = _slicedToArray(_useState3, 2),
-    arrowElement = _useState4[0],
-    setArrowElement = _useState4[1];
+    inView = _useState4[0],
+    setInView = _useState4[1];
+  var _useState5 = React.useState(null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    arrowElement = _useState6[0],
+    setArrowElement = _useState6[1];
   var _useFloatPosition = useFloatPosition(arrowElement, {
       placement: placement
     }),
     reference = _useFloatPosition.reference,
     floating = _useFloatPosition.floating,
     styles = _useFloatPosition.styles;
-  var combinedRef = useCombinedRef(ref, floating);
+  var tooltipRef = React.useRef(null);
+  var combinedRef = useCombinedRef(ref, floating, tooltipRef);
+  var closeWhenNotInView = function closeWhenNotInView(entries) {
+    var _entries = _slicedToArray(entries, 1),
+      entry = _entries[0];
+    entry.isIntersecting ? setInView(true) : setInView(false);
+  };
+  React.useEffect(function () {
+    var options = {
+      root: null,
+      rootMargin: '0px'
+    };
+    var ref = tooltipRef.current;
+    var observer = new IntersectionObserver(closeWhenNotInView, options);
+    if (ref) observer.observe(ref);
+    return function () {
+      if (ref) observer.unobserve(ref);
+    };
+  }, [tooltipRef]);
+  React.useEffect(function () {
+    if (tooltipRef.current) {
+      window.addEventListener('scroll', function () {
+        closeTooltip();
+      });
+    }
+    return function () {
+      if (tooltipRef.current) {
+        window.removeEventListener('scroll', function () {});
+      }
+    };
+  }, []);
   var timer;
   React.useEffect(function () {
     return function () {
@@ -7806,7 +7843,7 @@ var Tooltip = /*#__PURE__*/React.forwardRef(function (props, ref) {
     ref: combinedRef,
     role: 'tooltip',
     'aria-hidden': !open,
-    open: open,
+    open: open && inView,
     style: Object.assign({}, styles.floating)
   };
   var arrowWrapperProps = {

package/dist/components/Search/Search.js

@@ -107,7 +107,7 @@ var Search = /*#__PURE__*/forwardRef(function (_a, ref) {
     type: 'search',
     id: uniqueId,
     'aria-describedby': spaceSeparatedIdListGenerator([tip ? tipId : undefined, context.suggestions ? suggestionsDescriptionId : undefined, ariaDescribedby]),
-    value: context.inputValue !== undefined ? context.inputValue : value ? value : '',
+    value: context.inputValue !== undefined ? context.inputValue : value,
     onChange: handleChange,
     autoComplete: 'off'
   });

package/dist/components/Search/SearchAutocompleteWrapper.js

@@ -48,7 +48,7 @@ var SearchAutocompleteWrapper = function SearchAutocompleteWrapper(props) {
   };
   var handleChange = function handleChange(e) {
     var query = e.target.value;
-    setInputValue(query);
+    handleSetInputValue(query);
     var finalSuggestions = [];
     if (query.length >= queryLength) {
       if (data) {
@@ -82,10 +82,13 @@ var SearchAutocompleteWrapper = function SearchAutocompleteWrapper(props) {
   };
   var handleSuggestionClick = function handleSuggestionClick(e) {
     setSuggestions([]);
-    setInputValue(e.target.innerText);
+    handleSetInputValue(e.target.innerText);
     onSuggestionSelection && onSuggestionSelection();
     closeSuggestions();
   };
+  var handleSetInputValue = function handleSetInputValue(value) {
+    setInputValue(value || '');
+  };
   var inputRef = useRef(null);
   var suggestionsRef = useRef(null);
   useOnClickOutside([inputRef.current, suggestionsRef.current], function () {

package/dist/components/Tooltip/Tooltip.js

@@ -1,7 +1,7 @@
 import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { __rest } from 'tslib';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef, useId, useState, useEffect, Children, isValidElement, cloneElement } from 'react';
+import { forwardRef, useId, useState, useRef, useEffect, Children, isValidElement, cloneElement } from 'react';
 import { useCombinedRef } from '../../hooks/useCombinedRefs.js';
 import { useOnKeyDown } from '../../hooks/useOnKeyDown.js';
 import { useFloatPosition } from '../../hooks/useFloatPosition.js';
@@ -34,17 +34,51 @@ var Tooltip = /*#__PURE__*/forwardRef(function (props, ref) {
     _useState2 = _slicedToArray(_useState, 2),
     open = _useState2[0],
     setOpen = _useState2[1];
-  var _useState3 = useState(null),
+  var _useState3 = useState(false),
     _useState4 = _slicedToArray(_useState3, 2),
-    arrowElement = _useState4[0],
-    setArrowElement = _useState4[1];
+    inView = _useState4[0],
+    setInView = _useState4[1];
+  var _useState5 = useState(null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    arrowElement = _useState6[0],
+    setArrowElement = _useState6[1];
   var _useFloatPosition = useFloatPosition(arrowElement, {
       placement: placement
     }),
     reference = _useFloatPosition.reference,
     floating = _useFloatPosition.floating,
     styles = _useFloatPosition.styles;
-  var combinedRef = useCombinedRef(ref, floating);
+  var tooltipRef = useRef(null);
+  var combinedRef = useCombinedRef(ref, floating, tooltipRef);
+  var closeWhenNotInView = function closeWhenNotInView(entries) {
+    var _entries = _slicedToArray(entries, 1),
+      entry = _entries[0];
+    entry.isIntersecting ? setInView(true) : setInView(false);
+  };
+  useEffect(function () {
+    var options = {
+      root: null,
+      rootMargin: '0px'
+    };
+    var ref = tooltipRef.current;
+    var observer = new IntersectionObserver(closeWhenNotInView, options);
+    if (ref) observer.observe(ref);
+    return function () {
+      if (ref) observer.unobserve(ref);
+    };
+  }, [tooltipRef]);
+  useEffect(function () {
+    if (tooltipRef.current) {
+      window.addEventListener('scroll', function () {
+        closeTooltip();
+      });
+    }
+    return function () {
+      if (tooltipRef.current) {
+        window.removeEventListener('scroll', function () {});
+      }
+    };
+  }, []);
   var timer;
   useEffect(function () {
     return function () {
@@ -83,7 +117,7 @@ var Tooltip = /*#__PURE__*/forwardRef(function (props, ref) {
     ref: combinedRef,
     role: 'tooltip',
     'aria-hidden': !open,
-    open: open,
+    open: open && inView,
     style: Object.assign({}, styles.floating)
   };
   var arrowWrapperProps = {

package/dist/components/Typography/Paragraph/Paragraph.stories.d.ts

@@ -32,4 +32,5 @@ declare const _default: {
     };
 };
 export default _default;
+export declare const Overview: (args: StoryTProps) => JSX.Element;
 export declare const Default: (args: StoryTProps) => JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@norges-domstoler/dds-components",
-  "version": "10.0.1",
+  "version": "10.0.2",
   "description": "React components used in Elsa - domstolenes designsystem",
   "author": "Elsa team",
   "license": "MIT",