@norges-domstoler/dds-components 5.2.0-beta.1 → 5.3.0

package/dist/components/ScrollableContainer/Scrollbar.js

@@ -0,0 +1,178 @@
+import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { __rest } from 'tslib';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useRef, useState, useCallback, useEffect } from 'react';
+import styled from 'styled-components';
+import { scrollbarTokens } from './ScrollableContainer.tokens.js';
+import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
+
+var track = scrollbarTokens.track,
+    thumb = scrollbarTokens.thumb,
+    minThumbHeightPx = scrollbarTokens.minThumbHeightPx;
+var ScrollbarOuterWrapper = styled.div.withConfig({
+  displayName: "Scrollbar__ScrollbarOuterWrapper",
+  componentId: "sc-mphi5n-0"
+})([""]);
+var ScrollbarElements = styled.div.withConfig({
+  displayName: "Scrollbar__ScrollbarElements",
+  componentId: "sc-mphi5n-1"
+})(["display:block;height:100%;position:relative;display:grid;justify-items:center;"]);
+var Track = styled.div.withConfig({
+  displayName: "Scrollbar__Track",
+  componentId: "sc-mphi5n-2"
+})(["bottom:0;top:0;position:absolute;background-color:", ";border-radius:", ";width:", ";"], track.backgroundColor, track.borderRadius, track.width);
+var Thumb = styled.div.withConfig({
+  displayName: "Scrollbar__Thumb",
+  componentId: "sc-mphi5n-3"
+})(["position:absolute;background-color:", ";border-radius:", ";width:", ";transition:background-color 0.2s;&:hover{background-color:", ";}"], thumb.base.backgroundColor, thumb.base.borderRadius, thumb.base.width, thumb.hover.backgroundColor);
+var Scrollbar = function Scrollbar(props) {
+  var id = props.id,
+      className = props.className,
+      htmlProps = props.htmlProps,
+      contentRef = props.contentRef,
+      rest = __rest(props, ["id", "className", "htmlProps", "contentRef"]);
+
+  var trackRef = useRef(null);
+  var thumbRef = useRef(null);
+
+  var _useState = useState(minThumbHeightPx),
+      _useState2 = _slicedToArray(_useState, 2),
+      thumbHeight = _useState2[0],
+      setThumbHeight = _useState2[1];
+
+  var _useState3 = useState(true),
+      _useState4 = _slicedToArray(_useState3, 2),
+      isScrollable = _useState4[0],
+      setIsScrollable = _useState4[1];
+
+  var _useState5 = useState(0),
+      _useState6 = _slicedToArray(_useState5, 2),
+      thumbTop = _useState6[0],
+      setThumbTop = _useState6[1];
+
+  var observer = useRef(null);
+
+  var _useState7 = useState(0),
+      _useState8 = _slicedToArray(_useState7, 2),
+      scrollStartPosition = _useState8[0],
+      setScrollStartPosition = _useState8[1];
+
+  var _useState9 = useState(0),
+      _useState10 = _slicedToArray(_useState9, 2),
+      initialScrollTop = _useState10[0],
+      setInitialScrollTop = _useState10[1];
+
+  var _useState11 = useState(false),
+      _useState12 = _slicedToArray(_useState11, 2),
+      isDragging = _useState12[0],
+      setIsDragging = _useState12[1];
+
+  function handleResize(ref, trackSize) {
+    var clientHeight = ref.clientHeight,
+        scrollHeight = ref.scrollHeight;
+    setIsScrollable(clientHeight !== scrollHeight);
+    setThumbHeight(Math.max(clientHeight / scrollHeight * trackSize, minThumbHeightPx));
+  }
+
+  var handleTrackClick = useCallback(function (e) {
+    if (contentRef && contentRef.current) {
+      var trackCurrent = trackRef.current;
+      var contentCurrent = contentRef.current;
+
+      if (trackCurrent && contentCurrent) {
+        var clientY = e.clientY;
+        var target = e.target;
+        var rect = target.getBoundingClientRect();
+        var trackTop = rect.top;
+        var thumbOffset = -(thumbHeight / 2);
+        var clickRatio = (clientY - trackTop + thumbOffset) / trackCurrent.clientHeight;
+        var scrollAmount = Math.floor(clickRatio * contentCurrent.scrollHeight);
+        contentCurrent.scrollTo({
+          top: scrollAmount,
+          behavior: 'smooth'
+        });
+      }
+    }
+  }, [thumbHeight]);
+  var handleThumbPositioning = useCallback(function () {
+    console.log('positioning');
+
+    if (!(contentRef === null || contentRef === void 0 ? void 0 : contentRef.current) || !trackRef.current || !thumbRef.current) {
+      return;
+    }
+
+    var _contentRef$current = contentRef.current,
+        contentTop = _contentRef$current.scrollTop,
+        contentHeight = _contentRef$current.scrollHeight;
+    var clientHeight = trackRef.current.clientHeight;
+    var newTop = +contentTop / +contentHeight * clientHeight;
+    newTop = Math.min(newTop, clientHeight - thumbHeight);
+    setThumbTop(newTop);
+  }, []);
+  useEffect(function () {
+    if (contentRef && contentRef.current && trackRef.current) {
+      var ref = contentRef.current;
+      var clientHeight = trackRef.current.clientHeight;
+      observer.current = new ResizeObserver(function () {
+        handleResize(ref, clientHeight);
+      });
+      observer.current.observe(ref);
+      ref.addEventListener('scroll', handleThumbPositioning);
+      return function () {
+        var _a;
+
+        (_a = observer.current) === null || _a === void 0 ? void 0 : _a.unobserve(ref);
+        ref.removeEventListener('scroll', handleThumbPositioning);
+      };
+    }
+  }, []);
+  var handleThumbMousedown = useCallback(function (e) {
+    setScrollStartPosition(e.clientY);
+    if (contentRef && contentRef.current) setInitialScrollTop(contentRef.current.scrollTop);
+    setIsDragging(true);
+  }, []);
+  var handleThumbMouseup = useCallback(function () {
+    if (isDragging) {
+      setIsDragging(false);
+    }
+  }, [isDragging]);
+  var handleThumbMousemove = useCallback(function (e) {
+    if (contentRef && contentRef.current) {
+      if (isDragging) {
+        var _contentRef$current2 = contentRef.current,
+            contentScrollHeight = _contentRef$current2.scrollHeight,
+            contentOffsetHeight = _contentRef$current2.offsetHeight;
+        var deltaY = (e.clientY - scrollStartPosition) * (contentOffsetHeight / thumbHeight);
+        var newScrollTop = Math.min(initialScrollTop + deltaY, contentScrollHeight - contentOffsetHeight);
+        contentRef.current.scrollTop = newScrollTop;
+      }
+    }
+  }, [isDragging, scrollStartPosition, thumbHeight]);
+  useEffect(function () {
+    document.addEventListener('mousemove', handleThumbMousemove);
+    document.addEventListener('mouseup', handleThumbMouseup);
+    document.addEventListener('mouseleave', handleThumbMouseup);
+    return function () {
+      document.removeEventListener('mousemove', handleThumbMousemove);
+      document.removeEventListener('mouseup', handleThumbMouseup);
+      document.removeEventListener('mouseleave', handleThumbMouseup);
+    };
+  }, [handleThumbMousemove, handleThumbMouseup]);
+  return isScrollable ? jsx(ScrollbarOuterWrapper, Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest), {
+    children: jsxs(ScrollbarElements, {
+      children: [jsx(Track, {
+        ref: trackRef,
+        onClick: handleTrackClick
+      }), jsx(Thumb, {
+        style: {
+          height: thumbHeight,
+          top: thumbTop
+        },
+        ref: thumbRef,
+        onMouseDown: handleThumbMousedown
+      })]
+    })
+  })) : null;
+};
+
+export { Scrollbar };

package/dist/components/ScrollableContainer/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Scrollbar';
+export * from './ScrollableContainer';
+export * from './scrollbarStyling';

package/dist/components/ScrollableContainer/scrollbarStyling.d.ts

@@ -0,0 +1,26 @@
+/**
+ * CSS-in-JS scrollbar styling til bruk der det ikke passer å bruke dedikerte komponenter. Inkluderer styling for webkit pseudo-elementer og for Firefox.
+ */
+export declare const scrollbarStyling: {
+    webkit: {
+        '&::-webkit-scrollbar': {
+            width: string;
+            height: string;
+        };
+        '&::-webkit-scrollbar-track': {
+            background: string;
+            borderRadius: string;
+        };
+        '&::-webkit-scrollbar-thumb': {
+            background: string;
+            borderRadius: string;
+        };
+    };
+    '&::-webkit-scrollbar-thumb:hover': {
+        background: string;
+    };
+    firefox: {
+        scrollbarColor: string;
+        scrollbarWidth: string;
+    };
+};

package/dist/components/ScrollableContainer/scrollbarStyling.js

@@ -0,0 +1,40 @@
+import { scrollbarTokens } from './ScrollableContainer.tokens.js';
+
+var thumb = scrollbarTokens.thumb,
+    track = scrollbarTokens.track;
+/**
+ * CSS-in-JS scrollbar styling til bruk der det ikke passer å bruke dedikerte komponenter. Inkluderer styling for webkit pseudo-elementer og for Firefox.
+ */
+
+var scrollbarStyling = {
+  webkit: {
+    /* width */
+    '&::-webkit-scrollbar': {
+      width: track.width,
+      height: track.width
+    },
+
+    /* Track */
+    '&::-webkit-scrollbar-track': {
+      background: track.backgroundColor,
+      borderRadius: track.borderRadius
+    },
+
+    /* Handle */
+    '&::-webkit-scrollbar-thumb': {
+      background: thumb.base.backgroundColor,
+      borderRadius: thumb.base.borderRadius
+    }
+  },
+
+  /* Handle on hover */
+  '&::-webkit-scrollbar-thumb:hover': {
+    background: thumb.hover.backgroundColor
+  },
+  firefox: {
+    scrollbarColor: thumb.base.backgroundColor + ' ' + track.backgroundColor,
+    scrollbarWidth: 'thin'
+  }
+};
+
+export { scrollbarStyling };

package/dist/components/Select/Select.js

@@ -6,6 +6,8 @@ import ReactSelect, { components } from 'react-select';
 import { prefix, getCustomStyles, Wrapper, Container, Label } from './Select.styles.js';
 import { selectTokens } from './Select.tokens.js';
 import { CheckIcon } from '../../icons/tsx/check.js';
+import { CloseSmallIcon } from '../../icons/tsx/closeSmall.js';
+import { ChevronDownIcon } from '../../icons/tsx/chevronDown.js';
 import { RequiredMarker } from '../../helpers/RequiredMarker/RequiredMarker.js';
 import { InputMessage } from '../InputMessage/InputMessage.js';
 import { Icon } from '../Icon/Icon.js';
@@ -14,7 +16,10 @@ import { derivativeIdGenerator, spaceSeparatedIdListGenerator } from '../../util
 var DdsOption = components.Option,
     NoOptionsMessage = components.NoOptionsMessage,
     Input = components.Input,
-    SingleValue = components.SingleValue;
+    SingleValue = components.SingleValue,
+    ClearIndicator = components.ClearIndicator,
+    DropdownIndicator = components.DropdownIndicator,
+    MultiValueRemove = components.MultiValueRemove;
 var createSelectOptions = function createSelectOptions() {
   for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
     args[_key] = arguments[_key];
@@ -32,7 +37,7 @@ var IconOption = function IconOption(props) {
   return jsxs(DdsOption, Object.assign({}, props, {
     children: [props.isSelected && jsx(Icon, {
       icon: CheckIcon,
-      iconSize: "inherit"
+      iconSize: "medium"
     }), props.children]
   }));
 };
@@ -55,6 +60,33 @@ var NoOptionsMessageCustom = function NoOptionsMessageCustom(props) {
   }));
 };
 
+var CustomClearIndicator = function CustomClearIndicator(props) {
+  return jsx(ClearIndicator, Object.assign({}, props, {
+    children: jsx(Icon, {
+      icon: CloseSmallIcon,
+      iconSize: "medium"
+    })
+  }));
+};
+
+var CustomMultiValueRemove = function CustomMultiValueRemove(props) {
+  return jsx(MultiValueRemove, Object.assign({}, props, {
+    children: jsx(Icon, {
+      icon: CloseSmallIcon,
+      iconSize: "medium"
+    })
+  }));
+};
+
+var CustomDropdownIndicator = function CustomDropdownIndicator(props) {
+  return jsx(DropdownIndicator, Object.assign({}, props, {
+    children: jsx(Icon, {
+      icon: ChevronDownIcon,
+      iconSize: "medium"
+    })
+  }));
+};
+
 function escapeRegexCharacters(text) {
   return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&');
 }
@@ -143,7 +175,10 @@ var SelectInner = function SelectInner(_a, ref) {
       Input: CustomInput,
       SingleValue: customSingleValueElement ? function (props) {
         return CustomSingleValue(props, customSingleValueElement);
-      } : SingleValue
+      } : SingleValue,
+      ClearIndicator: CustomClearIndicator,
+      DropdownIndicator: CustomDropdownIndicator,
+      MultiValueRemove: CustomMultiValueRemove
     },
     'aria-invalid': hasErrorMessage ? true : undefined
   }, rest);

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

@@ -2,7 +2,7 @@ import styled, { css } from 'styled-components';
 import { typographyTokens } from '../Typography/Typography.tokens.js';
 import { selectTokens } from './Select.tokens.js';
 import { Typography } from '../Typography/Typography.js';
-import { scrollbarStyling } from '../../helpers/styling/scrollbarStyling.js';
+import { scrollbarStyling } from '../ScrollableContainer/scrollbarStyling.js';
 
 var prefix = 'dds-select';
 var Label = styled(Typography).withConfig({
@@ -12,14 +12,14 @@ var Label = styled(Typography).withConfig({
 var Container = styled.div.withConfig({
   displayName: "Selectstyles__Container",
   componentId: "sc-19jkd5s-1"
-})(["@media (prefers-reduced-motion:no-preference){transition:box-shadow 0.2s,border-color 0.2s,background-color 0.2s;}position:relative;", " ", " *::selection{", "}", " &:hover{", " ", "{", "}}&:focus-within{", " ", "{", "}}", " .", "__menu-list{", "}&:hover .", "__dropdown-indicator,&:focus-within .", "__dropdown-indicator{", "}", " ", ""], selectTokens.container.base, scrollbarStyling, typographyTokens.selection.base, function (_ref) {
+})(["@media (prefers-reduced-motion:no-preference){transition:box-shadow 0.2s,border-color 0.2s,background-color 0.2s;}position:relative;", " *::selection{", "}", " &:hover{", " ", "{", "}}&:focus-within{", " ", "{", "}}", " .", "__menu-list{", " ", "}&:hover .", "__dropdown-indicator,&:focus-within .", "__dropdown-indicator{", "}", " ", ""], selectTokens.container.base, typographyTokens.selection.base, function (_ref) {
   var hasLabel = _ref.hasLabel,
       isMulti = _ref.isMulti;
   return isMulti && hasLabel ? css([".", "__value-container{", "}.", "__indicators{", "}"], prefix, selectTokens.valueContainer.isMulti.withLabel.base, prefix, selectTokens.indicatorsContainer.isMulti.withLabel.base) : isMulti && !hasLabel ? css([".", "__control{", "}.", "__value-container{", "}.", "__indicators{", "}"], prefix, selectTokens.input.isMulti.noLabel.base, prefix, selectTokens.valueContainer.isMulti.noLabel.base, prefix, selectTokens.indicatorsContainer.isMulti.noLabel.base) : hasLabel ? css([".", "__value-container{", "}.", "__indicators{", "}"], prefix, selectTokens.valueContainer.withLabel.base, prefix, selectTokens.indicatorsContainer.withLabel.base) : css([".", "__control{", "}.", "__value-container{", "}.", "__indicators{", "}"], prefix, selectTokens.input.noLabel.base, prefix, selectTokens.valueContainer.noLabel.base, prefix, selectTokens.indicatorsContainer.noLabel.base);
 }, selectTokens.container.hover.base, Label, selectTokens.label.hover.base, selectTokens.container.focus.base, Label, selectTokens.label.focus.base, function (_ref2) {
   var errorMessage = _ref2.errorMessage;
   return errorMessage && css(["", " &:hover{", "}&:focus-within{", "}"], selectTokens.container.danger.base, selectTokens.container.danger.hover.base, selectTokens.container.danger.focus.base);
-}, prefix, scrollbarStyling, prefix, prefix, selectTokens.dropdownIndicator.hover.base, function (_ref3) {
+}, prefix, scrollbarStyling.webkit, scrollbarStyling.firefox, prefix, prefix, selectTokens.dropdownIndicator.hover.base, function (_ref3) {
   var isDisabled = _ref3.isDisabled;
   return isDisabled && css(["cursor:not-allowed;", " &:hover{box-shadow:none;", " ", "{", "}&:hover .", "__dropdown-indicator{", "}}"], selectTokens.container.disabled.base, selectTokens.container.disabled.base, Label, selectTokens.label.base, prefix, selectTokens.dropdownIndicator.base);
 }, function (_ref4) {
@@ -89,7 +89,7 @@ var getCustomStyles = function getCustomStyles() {
           transition: 'color 0.2s, background-color 0.2s'
         }
       }), selectTokens.multiValueRemove.base), {
-        svg: Object.assign({}, selectTokens.multiValueRemove.icon.base),
+        padding: 0,
         '&:hover': Object.assign({}, selectTokens.multiValueRemove.hover.base),
         '&:focus': {
           backgroundColor: 'blue'
@@ -127,6 +127,9 @@ var getCustomStyles = function getCustomStyles() {
       return Object.assign(Object.assign({
         display: 'inline-flex'
       }, selectTokens.clearIndicator.base), {
+        '@media (prefers-reduced-motion: no-preference)': {
+          transition: 'color 0.2s'
+        },
         '&:hover': Object.assign({}, selectTokens.clearIndicator.hover.base)
       });
     },

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

@@ -100,9 +100,6 @@ export declare const selectTokens: {
         hover: {
             base: CSSObject;
         };
-        icon: {
-            base: CSSObject;
-        };
     };
     indicatorsContainer: {
         withLabel: {

package/dist/components/Select/Select.tokens.js

@@ -8,8 +8,7 @@ var Colors = ddsBaseTokens.colors,
     Spacing = ddsBaseTokens.spacing,
     FontPackages = ddsBaseTokens.fontPackages,
     BorderRadius = ddsBaseTokens.borderRadius,
-    Border = ddsBaseTokens.border,
-    IconSizes = ddsBaseTokens.iconSizes;
+    Border = ddsBaseTokens.border;
 var textDefault = ddsReferenceTokens.textDefault;
 var multiValueContainerMinHeight = "".concat(Spacing.SizesDdsSpacingLocalX0125NumberPx * 2 + Spacing.SizesDdsSpacingLocalX025NumberPx * 2 + calculateHeightWithLineHeight(FontPackages.supportingStyle_inputtext_01.numbers.lineHeightNumber, FontPackages.supportingStyle_inputtext_01.numbers.fontSizeNumber), "px"); //custom spacing so that multiselect has same height as single value select
 
@@ -90,8 +89,7 @@ var drodownIndicatorReadOnlyBase = {
   color: 'transparent'
 };
 var clearIndicatorBase = {
-  color: Colors.DdsColorNeutralsGray6,
-  padding: " 0 ".concat(Spacing.SizesDdsSpacingLocalX025, " 0 0")
+  color: Colors.DdsColorNeutralsGray6
 };
 var loadingIndicatorBase = {
   color: Colors.DdsColorNeutralsGray6,
@@ -117,13 +115,11 @@ var optionBase = Object.assign(Object.assign({
   color: textDefault.textColor
 });
 var optionHoverBase = {
-  backgroundColor: Colors.DdsColorInteractiveLighter
-};
-var optionSelectedBase = Object.assign(Object.assign({
   backgroundColor: Colors.DdsColorInteractiveLightest
-}, FontPackages.body_sans_02.base), {
-  fontWeight: 600
-});
+};
+var optionSelectedBase = Object.assign({
+  backgroundColor: Colors.DdsColorNeutralsWhite
+}, FontPackages.body_sans_02.base);
 var noOptionsMessageBase = Object.assign({
   padding: "".concat(Spacing.SizesDdsSpacingLocalX05, " ").concat(Spacing.SizesDdsSpacingLocalX1),
   color: Colors.DdsColorNeutralsGray6
@@ -148,17 +144,12 @@ var multiValueLabelBase = Object.assign(Object.assign({
   fontWeight: 'bold'
 });
 var multiValueRemoveBase = {
-  padding: "".concat(Spacing.SizesDdsSpacingLocalX025),
   color: Colors.DdsColorNeutralsGray9
 };
 var multiValueRemoveHoverBase = {
   color: Colors.DdsColorNeutralsWhite,
   backgroundColor: Colors.DdsColorInteractiveBase
 };
-var multiValueRemoveIconBase = {
-  height: IconSizes.DdsIconsizeSmall,
-  width: IconSizes.DdsIconsizeSmall
-};
 var containerDisabledBase = {
   backgroundColor: Colors.DdsColorNeutralsGray1,
   borderColor: Colors.DdsColorNeutralsGray5
@@ -267,9 +258,6 @@ var selectTokens = {
     base: multiValueRemoveBase,
     hover: {
       base: multiValueRemoveHoverBase
-    },
-    icon: {
-      base: multiValueRemoveIconBase
     }
   },
   indicatorsContainer: {

package/dist/components/Table/SortCell.js

@@ -6,9 +6,9 @@ import { cellTokens } from './Cell.tokens.js';
 import styled from 'styled-components';
 import { removeButtonStyling } from '../../helpers/styling/removeButtonStyling.js';
 import { UnfoldMoreIcon } from '../../icons/tsx/unfoldMore.js';
-import { ChevronDownIcon } from '../../icons/tsx/chevronDown.js';
 import { ChevronUpIcon } from '../../icons/tsx/chevronUp.js';
 import { Icon } from '../Icon/Icon.js';
+import { ChevronDownIcon } from '../../icons/tsx/chevronDown.js';
 
 var SortIcon = styled(Icon).withConfig({
   displayName: "SortCell__SortIcon",

package/dist/components/Table/Table.js

@@ -4,12 +4,12 @@ import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { cellTokens } from './Cell.tokens.js';
 import { typographyTokens } from '../Typography/Typography.tokens.js';
-import { scrollbarStyling } from '../../helpers/styling/scrollbarStyling.js';
+import { scrollbarStyling } from '../ScrollableContainer/scrollbarStyling.js';
 
 var StyledTable = styled.table.withConfig({
   displayName: "Table__StyledTable",
   componentId: "sc-bw0w0a-0"
-})(["border-spacing:0;border-collapse:collapse;*::selection{", "}", " ", " ", ""], typographyTokens.selection.base, scrollbarStyling, function (_ref) {
+})(["border-spacing:0;border-collapse:collapse;*::selection{", "}", " ", " ", " ", ""], typographyTokens.selection.base, scrollbarStyling.webkit, scrollbarStyling.firefox, function (_ref) {
   var density = _ref.density;
   return density && css(["td,th{", "}"], cellTokens.density[density].base);
 }, function (_ref2) {

package/dist/components/Table/TableWrapper.js

@@ -3,15 +3,15 @@ import { __rest } from 'tslib';
 import { jsx } from 'react/jsx-runtime';
 import { useState, useRef, useEffect } from 'react';
 import styled, { css } from 'styled-components';
-import { scrollbarStyling } from '../../helpers/styling/scrollbarStyling.js';
+import { scrollbarStyling } from '../ScrollableContainer/scrollbarStyling.js';
 
 var Wrapper = styled.div.withConfig({
   displayName: "TableWrapper__Wrapper",
   componentId: "sc-eb384b-0"
-})(["", " ", ""], function (_ref) {
+})(["", " ", " ", ""], function (_ref) {
   var overflowX = _ref.overflowX;
   return overflowX && css(["overflow-x:auto;"]);
-}, scrollbarStyling);
+}, scrollbarStyling.webkit, scrollbarStyling.firefox);
 var TableWrapper = function TableWrapper(_a) {
   var children = _a.children,
       rest = __rest(_a, ["children"]);

package/dist/components/Tabs/TabList.js

@@ -5,7 +5,7 @@ import { forwardRef, useState, Children, isValidElement, cloneElement } from 're
 import styled from 'styled-components';
 import { tabsTokens } from './Tabs.tokens.js';
 import { useTabsContext } from './Tabs.context.js';
-import { scrollbarStyling } from '../../helpers/styling/scrollbarStyling.js';
+import { scrollbarStyling } from '../ScrollableContainer/scrollbarStyling.js';
 import { useRoveFocus } from '../../hooks/useRoveFocus.js';
 import { useCombinedRef } from '../../hooks/useCombinedRefs.js';
 import { useOnKeyDown } from '../../hooks/useOnKeyDown.js';
@@ -14,7 +14,7 @@ import { useOnClickOutside } from '../../hooks/useOnClickOutside.js';
 var TabRow = styled.div.withConfig({
   displayName: "TabList__TabRow",
   componentId: "sc-1ldr0lz-0"
-})(["", " ", " scroll-snap-type:x mandatory;@media (prefers-reduced-motion:no-preference){scroll-behavior:smooth;}&:focus-visible{", "}&:focus-visible button{outline:none;}"], tabsTokens.tabList.base, scrollbarStyling, tabsTokens.tabList.focus.base);
+})(["", " ", " ", " scroll-snap-type:x mandatory;@media (prefers-reduced-motion:no-preference){scroll-behavior:smooth;}&:focus-visible{", "}&:focus-visible button{outline:none;}"], tabsTokens.tabList.base, scrollbarStyling.webkit, scrollbarStyling.firefox, tabsTokens.tabList.focus.base);
 var TabList = /*#__PURE__*/forwardRef(function (_a, ref) {
   var children = _a.children,
       id = _a.id,

package/dist/components/TextInput/TextInput.styles.js

@@ -1,13 +1,13 @@
 import styled, { css } from 'styled-components';
 import { textInputTokens } from './TextInput.tokens.js';
 import { StatefulInput, Label as Label$1 } from '../../helpers/Input/Input.styles.js';
-import { scrollbarStyling } from '../../helpers/styling/scrollbarStyling.js';
+import { scrollbarStyling } from '../ScrollableContainer/scrollbarStyling.js';
 import { inputTokens } from '../../helpers/Input/Input.tokens.js';
 
 var TextArea = styled(StatefulInput).withConfig({
   displayName: "TextInputstyles__TextArea",
   componentId: "sc-165zflr-0"
-})(["", " ", " ", " &:hover:enabled:read-write ~ label{background-color:", ";}"], scrollbarStyling, textInputTokens.multiline.base, function (_ref) {
+})(["", " ", " ", " ", " &:hover:enabled:read-write ~ label{background-color:", ";}"], scrollbarStyling.webkit, scrollbarStyling.firefox, textInputTokens.multiline.base, function (_ref) {
   var hasLabel = _ref.hasLabel;
   return css(["", ""], textInputTokens.multiline[hasLabel].base);
 }, function (_ref2) {

package/dist/components/TextInput/TextInput.tokens.js

@@ -1,5 +1,5 @@
 import { ddsBaseTokens, ddsReferenceTokens } from '@norges-domstoler/dds-design-tokens';
-import { scrollbarWidthNumberPx } from '../../helpers/styling/scrollbarStyling.js';
+import { scrollbarWidthNumberPx } from '../ScrollableContainer/ScrollableContainer.tokens.js';
 
 var Colors = ddsBaseTokens.colors,
     Spacing = ddsBaseTokens.spacing;

package/dist/helpers/styling/focusVisible.js

@@ -1,8 +1,9 @@
 import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
 
 var Border = ddsBaseTokens.border,
-    Colors = ddsBaseTokens.colors;
-var outlineOffset = '2px';
+    Colors = ddsBaseTokens.colors,
+    spacing = ddsBaseTokens.spacing;
+var outlineOffset = spacing.SizesDdsSpacingLocalX0125;
 var focusVisible = {
   outline: "".concat(Border.BordersDdsBorderFocusBaseStrokeWeight, " ").concat(Border.BordersDdsBorderFocusBaseStroke, " solid"),
   outlineOffset: outlineOffset

package/dist/helpers/styling/index.d.ts

@@ -5,4 +5,3 @@ export * from './hover';
 export * from './focus';
 export * from './danger';
 export * from './hideInput';
-export * from './scrollbarStyling';

package/dist/icons/tsx/closeSmall.d.ts

@@ -0,0 +1,2 @@
+import { SvgProps } from '../utils/propTypes';
+export declare function CloseSmallIcon(props: SvgProps): JSX.Element;

package/dist/icons/tsx/closeSmall.js

@@ -0,0 +1,25 @@
+import { __rest } from 'tslib';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { StyledSvg } from '../utils/StyledSvg.js';
+
+function CloseSmallIcon(props) {
+  var title = props.title,
+      rest = __rest(props, ["title"]);
+
+  return jsxs(StyledSvg, Object.assign({
+    width: 24,
+    height: 24,
+    fill: "currentColor"
+  }, rest, {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24"
+  }, {
+    children: [title && jsx("title", {
+      children: title
+    }), jsx("path", {
+      d: "M7.293 8.707l1.414-1.414L12 10.586l3.293-3.293 1.414 1.414L13.414 12l3.293 3.293-1.414 1.414L12 13.414l-3.293 3.293-1.414-1.414L10.586 12 7.293 8.707z"
+    })]
+  }));
+}
+
+export { CloseSmallIcon };

package/dist/icons/tsx/index.d.ts

@@ -28,6 +28,7 @@ export * from './chevronLeft';
 export * from './chevronRight';
 export * from './chevronUp';
 export * from './close';
+export * from './closeSmall';
 export * from './closeCircled';
 export * from './cloud';
 export * from './collapse';

package/dist/index.d.ts

@@ -33,5 +33,6 @@ export * from './components/Tabs';
 export * from './components/Tag';
 export * from './components/Chip';
 export * from './components/VisuallyHidden';
+export * from './components/ScrollableContainer';
 export * from './icons/tsx';
 export * from './components/Stepper';

package/dist/index.js

@@ -59,6 +59,9 @@ export { Tag } from './components/Tag/Tag.js';
 export { Chip } from './components/Chip/Chip.js';
 export { ChipGroup } from './components/Chip/ChipGroup.js';
 export { VisuallyHidden } from './components/VisuallyHidden/VisuallyHidden.js';
+export { Scrollbar } from './components/ScrollableContainer/Scrollbar.js';
+export { ScrollableContainer } from './components/ScrollableContainer/ScrollableContainer.js';
+export { scrollbarStyling } from './components/ScrollableContainer/scrollbarStyling.js';
 export { AppsIcon } from './icons/tsx/apps.js';
 export { ArchiveIcon } from './icons/tsx/archive.js';
 export { ArrowDownIcon } from './icons/tsx/arrowDown.js';
@@ -89,6 +92,7 @@ export { ChevronLeftIcon } from './icons/tsx/chevronLeft.js';
 export { ChevronRightIcon } from './icons/tsx/chevronRight.js';
 export { ChevronUpIcon } from './icons/tsx/chevronUp.js';
 export { CloseIcon } from './icons/tsx/close.js';
+export { CloseSmallIcon } from './icons/tsx/closeSmall.js';
 export { CloseCircledIcon } from './icons/tsx/closeCircled.js';
 export { CloudIcon } from './icons/tsx/cloud.js';
 export { CollapseIcon } from './icons/tsx/collapse.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@norges-domstoler/dds-components",
-  "version": "5.2.0-beta.1",
+  "version": "5.3.0",
   "description": "React components used in Elsa - domstolenes designsystem",
   "author": "Elsa team",
   "license": "MIT",
@@ -80,7 +80,7 @@
     "eslint-plugin-react": "^7.30.1",
     "eslint-plugin-storybook": "^0.6.4",
     "jest": "^28.1.3",
-    "jest-environment-jsdom": "^28.1.3",
+    "jest-environment-jsdom": "^29.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rollup": "^2.78.1",
@@ -116,8 +116,6 @@
     }
   },
   "dependencies": {
-    "@emotion/react": "^11.10.0",
-    "@emotion/styled": "^11.10.0",
     "@floating-ui/react-dom": "^1.0.0",
     "focus-visible": "^5.2.0",
     "react-select": "^5.4.0",