@norges-domstoler/dds-components 10.0.0 → 10.0.2

package/dist/cjs/components/FormGenerator/FormGenerator.styles.d.ts

@@ -7,3 +7,4 @@ export declare const SubContainer: import("styled-components").StyledComponent<"
     length: number;
     breakpoint?: ScreenSize | undefined;
 }, never>;
+export declare const ButtonRow: import("styled-components").StyledComponent<(props: import("../Grid").GridChildProps) => JSX.Element, any, {}, never>;

package/dist/cjs/components/FormGenerator/FormGenerator.tokens.d.ts

@@ -13,4 +13,7 @@ export declare const formGeneratorTokens: {
         lg: string;
         xl: string;
     };
+    buttonRow: {
+        marginTop: string;
+    };
 };

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

@@ -693,7 +693,7 @@ var Typography = /*#__PURE__*/React.forwardRef(function (props, ref) {
 var Backdrop = styled__default["default"].div.withConfig({
   displayName: "Backdrop",
   componentId: "sc-vimg90-0"
-})(["position:fixed;display:flex;align-items:center;justify-content:center;background-color:", ";overflow-y:auto;top:0;right:0;bottom:0;left:0;z-index:50;opacity:", ";@media (prefers-reduced-motion:no-preference){transition:opacity 0.2s;}"], changeRGBAAlpha(ddsDesignTokens.ddsBaseTokens.colors.DdsColorNeutralsGray9, 0.5), function (_ref) {
+})(["position:fixed;display:flex;align-items:center;justify-content:center;background-color:", ";overflow-y:auto;top:0;right:0;bottom:0;left:0;z-index:200;opacity:", ";@media (prefers-reduced-motion:no-preference){transition:opacity 0.2s;}"], changeRGBAAlpha(ddsDesignTokens.ddsBaseTokens.colors.DdsColorNeutralsGray9, 0.5), function (_ref) {
   var isOpen = _ref.isOpen;
   return isOpen ? 1 : 0;
 });
@@ -4166,7 +4166,7 @@ var getCustomStyles = function getCustomStyles() {
     },
     menu: function menu(provided) {
       return Object.assign(Object.assign({}, provided), {
-        zIndex: 3,
+        zIndex: 100,
         transition: '0.2s',
         width: 'calc(100% + 2px)',
         transform: 'translate(-1px)',
@@ -5457,7 +5457,7 @@ var suggestionsContainer = searchTokens.suggestionsContainer,
 var SuggestionsContainer = styled__default["default"](Paper).withConfig({
   displayName: "SearchSuggestions__SuggestionsContainer",
   componentId: "sc-nlwf4s-0"
-})(["", ";position:absolute;top:100%;width:100%;max-height:300px;margin-top:", ";border:", ";box-shadow:", ";z-index:3;overflow-y:scroll;", " ", ""], function (_ref) {
+})(["", ";position:absolute;top:100%;width:100%;max-height:300px;margin-top:", ";border:", ";box-shadow:", ";z-index:100;overflow-y:scroll;", " ", ""], function (_ref) {
   var isHidden = _ref.isHidden;
   return visibilityTransition(!isHidden);
 }, suggestionsContainer.marginTop, suggestionsContainer.border, suggestionsContainer.boxShadow, scrollbarStyling.firefox, scrollbarStyling.webkit);
@@ -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 : undefined,
+    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 () {
@@ -7133,7 +7136,7 @@ var container$7 = overflowMenuTokens.container,
 var Container$a = styled__default["default"].div.withConfig({
   displayName: "OverflowMenu__Container",
   componentId: "sc-kh744b-0"
-})(["box-sizing:border-box;z-index:3;overflow-y:auto;min-width:180px;max-width:300px;", " border:", ";background-color:", ";border-radius:", ";", " ", " *::selection{", "}"], function (_ref) {
+})(["box-sizing:border-box;z-index:100;overflow-y:auto;min-width:180px;max-width:300px;", " border:", ";background-color:", ";border-radius:", ";", " ", " *::selection{", "}"], function (_ref) {
   var isOpen = _ref.isOpen;
   return visibilityTransition(isOpen);
 }, container$7.border, container$7.backgroundColor, container$7.borderRadius, scrollbarStyling.webkit, scrollbarStyling.firefox, selection);
@@ -7730,7 +7733,7 @@ var Container$9 = styled__default["default"].div.withConfig({
 var TooltipWrapper = styled__default["default"](Paper).withConfig({
   displayName: "Tooltipstyles__TooltipWrapper",
   componentId: "sc-1cna5tc-3"
-})(["", " width:fit-content;position:absolute;z-index:20;text-align:center;padding:", ";", ";"], function (_ref) {
+})(["", " width:fit-content;position:absolute;z-index:100;text-align:center;padding:", ";", ";"], function (_ref) {
   var open = _ref.open;
   return visibilityTransition(open);
 }, wrapper$4.padding, getFontStyling(defaultTypographyType));
@@ -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 = {
@@ -8012,7 +8049,7 @@ var getMaxWidth = function getMaxWidth(size) {
 var Container$5 = styled__default["default"](Paper).withConfig({
   displayName: "Drawer__Container",
   componentId: "sc-i9luw3-0"
-})(["position:fixed;top:0;height:100%;display:flex;flex-direction:column-reverse;justify-content:flex-end;min-width:300px;z-index:50;padding:", ";", " ", " ", " @media (prefers-reduced-motion:no-preference){transition:transform 0.5s;}&:focus-visible,&.focus-visible{", "}"], container$3.padding, function (_ref) {
+})(["position:fixed;top:0;height:100%;display:flex;flex-direction:column-reverse;justify-content:flex-end;min-width:300px;z-index:100;padding:", ";", " ", " ", " @media (prefers-reduced-motion:no-preference){transition:transform 0.5s;}&:focus-visible,&.focus-visible{", "}"], container$3.padding, function (_ref) {
   var size = _ref.size;
   return styled.css(["max-width:", ";"], getMaxWidth(size));
 }, function (_ref2) {
@@ -8184,7 +8221,7 @@ var wrapper$2 = popoverTokens.wrapper,
 var Wrapper$1 = styled__default["default"](Paper).withConfig({
   displayName: "Popover__Wrapper",
   componentId: "sc-1fecd7e-0"
-})(["opacity:0;", " position:absolute;width:fit-content;z-index:20;padding:", ";&:focus-visible{", "}", ""], function (_ref) {
+})(["opacity:0;", " position:absolute;width:fit-content;z-index:100;padding:", ";&:focus-visible{", "}", ""], function (_ref) {
   var hasTransitionedIn = _ref.hasTransitionedIn,
     isOpen = _ref.isOpen;
   return hasTransitionedIn && visibilityTransition(hasTransitionedIn && isOpen);

package/dist/components/Drawer/Drawer.js

@@ -43,7 +43,7 @@ var getMaxWidth = function getMaxWidth(size) {
 var Container = styled(Paper).withConfig({
   displayName: "Drawer__Container",
   componentId: "sc-i9luw3-0"
-})(["position:fixed;top:0;height:100%;display:flex;flex-direction:column-reverse;justify-content:flex-end;min-width:300px;z-index:50;padding:", ";", " ", " ", " @media (prefers-reduced-motion:no-preference){transition:transform 0.5s;}&:focus-visible,&.focus-visible{", "}"], container.padding, function (_ref) {
+})(["position:fixed;top:0;height:100%;display:flex;flex-direction:column-reverse;justify-content:flex-end;min-width:300px;z-index:100;padding:", ";", " ", " ", " @media (prefers-reduced-motion:no-preference){transition:transform 0.5s;}&:focus-visible,&.focus-visible{", "}"], container.padding, function (_ref) {
   var size = _ref.size;
   return css(["max-width:", ";"], getMaxWidth(size));
 }, function (_ref2) {

package/dist/components/FormGenerator/FormGenerator.styles.d.ts

@@ -7,3 +7,4 @@ export declare const SubContainer: import("styled-components").StyledComponent<"
     length: number;
     breakpoint?: ScreenSize | undefined;
 }, never>;
+export declare const ButtonRow: import("styled-components").StyledComponent<(props: import("../Grid").GridChildProps) => JSX.Element, any, {}, never>;

package/dist/components/FormGenerator/FormGenerator.tokens.d.ts

@@ -13,4 +13,7 @@ export declare const formGeneratorTokens: {
         lg: string;
         xl: string;
     };
+    buttonRow: {
+        marginTop: string;
+    };
 };

package/dist/components/OverflowMenu/OverflowMenu.js

@@ -31,7 +31,7 @@ var container = overflowMenuTokens.container,
 var Container = styled.div.withConfig({
   displayName: "OverflowMenu__Container",
   componentId: "sc-kh744b-0"
-})(["box-sizing:border-box;z-index:3;overflow-y:auto;min-width:180px;max-width:300px;", " border:", ";background-color:", ";border-radius:", ";", " ", " *::selection{", "}"], function (_ref) {
+})(["box-sizing:border-box;z-index:100;overflow-y:auto;min-width:180px;max-width:300px;", " border:", ";background-color:", ";border-radius:", ";", " ", " *::selection{", "}"], function (_ref) {
   var isOpen = _ref.isOpen;
   return visibilityTransition(isOpen);
 }, container.border, container.backgroundColor, container.borderRadius, scrollbarStyling.webkit, scrollbarStyling.firefox, selection);

package/dist/components/Popover/Popover.js

@@ -40,7 +40,7 @@ var wrapper = popoverTokens.wrapper,
 var Wrapper = styled(Paper).withConfig({
   displayName: "Popover__Wrapper",
   componentId: "sc-1fecd7e-0"
-})(["opacity:0;", " position:absolute;width:fit-content;z-index:20;padding:", ";&:focus-visible{", "}", ""], function (_ref) {
+})(["opacity:0;", " position:absolute;width:fit-content;z-index:100;padding:", ";&:focus-visible{", "}", ""], function (_ref) {
   var hasTransitionedIn = _ref.hasTransitionedIn,
     isOpen = _ref.isOpen;
   return hasTransitionedIn && visibilityTransition(hasTransitionedIn && isOpen);

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 : undefined,
+    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/Search/SearchSuggestions.js

@@ -38,7 +38,7 @@ var suggestionsContainer = searchTokens.suggestionsContainer,
 var SuggestionsContainer = styled(Paper).withConfig({
   displayName: "SearchSuggestions__SuggestionsContainer",
   componentId: "sc-nlwf4s-0"
-})(["", ";position:absolute;top:100%;width:100%;max-height:300px;margin-top:", ";border:", ";box-shadow:", ";z-index:3;overflow-y:scroll;", " ", ""], function (_ref) {
+})(["", ";position:absolute;top:100%;width:100%;max-height:300px;margin-top:", ";border:", ";box-shadow:", ";z-index:100;overflow-y:scroll;", " ", ""], function (_ref) {
   var isHidden = _ref.isHidden;
   return visibilityTransition(!isHidden);
 }, suggestionsContainer.marginTop, suggestionsContainer.border, suggestionsContainer.boxShadow, scrollbarStyling.firefox, scrollbarStyling.webkit);

package/dist/components/Select/Select.styles.js

@@ -149,7 +149,7 @@ var getCustomStyles = function getCustomStyles() {
     },
     menu: function menu(provided) {
       return Object.assign(Object.assign({}, provided), {
-        zIndex: 3,
+        zIndex: 100,
         transition: '0.2s',
         width: 'calc(100% + 2px)',
         transform: 'translate(-1px)',

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/Tooltip/Tooltip.styles.js

@@ -33,7 +33,7 @@ var Container = styled.div.withConfig({
 var TooltipWrapper = styled(Paper).withConfig({
   displayName: "Tooltipstyles__TooltipWrapper",
   componentId: "sc-1cna5tc-3"
-})(["", " width:fit-content;position:absolute;z-index:20;text-align:center;padding:", ";", ";"], function (_ref) {
+})(["", " width:fit-content;position:absolute;z-index:100;text-align:center;padding:", ";", ";"], function (_ref) {
   var open = _ref.open;
   return visibilityTransition(open);
 }, wrapper.padding, getFontStyling(defaultTypographyType));

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/dist/helpers/Backdrop/Backdrop.js

@@ -5,7 +5,7 @@ import { changeRGBAAlpha } from '../../utils/color.js';
 var Backdrop = styled.div.withConfig({
   displayName: "Backdrop",
   componentId: "sc-vimg90-0"
-})(["position:fixed;display:flex;align-items:center;justify-content:center;background-color:", ";overflow-y:auto;top:0;right:0;bottom:0;left:0;z-index:50;opacity:", ";@media (prefers-reduced-motion:no-preference){transition:opacity 0.2s;}"], changeRGBAAlpha(ddsBaseTokens.colors.DdsColorNeutralsGray9, 0.5), function (_ref) {
+})(["position:fixed;display:flex;align-items:center;justify-content:center;background-color:", ";overflow-y:auto;top:0;right:0;bottom:0;left:0;z-index:200;opacity:", ";@media (prefers-reduced-motion:no-preference){transition:opacity 0.2s;}"], changeRGBAAlpha(ddsBaseTokens.colors.DdsColorNeutralsGray9, 0.5), function (_ref) {
   var isOpen = _ref.isOpen;
   return isOpen ? 1 : 0;
 });

package/package.json

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