@norges-domstoler/dds-components 4.0.0 → 4.0.1

package/dist/components/Tabs/Tabs.d.ts

@@ -2,7 +2,7 @@ import { HTMLAttributes } from 'react';
 import { BaseComponentPropsWithChildren, Direction } from '../../types';
 import { Property } from 'csstype';
 export declare type TabsProps = BaseComponentPropsWithChildren<HTMLDivElement, {
-    /** Indeksen til den aktive fanen. */
+    /** Indeksen til den aktive fanen. **OBS!** Ved å sette denne vil brukere aldri kunne endre tab uten at du også registrerer en `onChange`-lytter for å ta vare på aktiv tab utenfor komponenten. */
     activeTab?: number;
     /** Ekstra logikk ved endring av aktiv fane. */
     onChange?: (index: number) => void;
@@ -14,7 +14,7 @@ export declare type TabsProps = BaseComponentPropsWithChildren<HTMLDivElement, {
 export declare const Tabs: import("react").ForwardRefExoticComponent<{
     htmlProps?: Omit<HTMLAttributes<HTMLDivElement>, "onChange"> | undefined;
 } & Pick<Omit<HTMLAttributes<HTMLDivElement>, "onChange">, "className" | "id"> & {
-    /** Indeksen til den aktive fanen. */
+    /** Indeksen til den aktive fanen. **OBS!** Ved å sette denne vil brukere aldri kunne endre tab uten at du også registrerer en `onChange`-lytter for å ta vare på aktiv tab utenfor komponenten. */
     activeTab?: number | undefined;
     /** Ekstra logikk ved endring av aktiv fane. */
     onChange?: ((index: number) => void) | undefined;

package/dist/index.es.js

@@ -28695,20 +28695,27 @@ var isAnchorTypographyProps = function isAnchorTypographyProps(props) {
 };
 
 var Breadcrumb = /*#__PURE__*/forwardRef(function (props, ref) {
+  var children = props.children,
+      rest = __rest(props, ["children"]);
+
   if (isAnchorTypographyProps(props)) {
-    return jsxRuntime.exports.jsx(Typography, {
-      htmlProps: props,
+    return jsxRuntime.exports.jsx(Typography, __assign({
+      htmlProps: rest,
       ref: ref,
       typographyType: "a"
-    });
+    }, {
+      children: children
+    }));
   }
 
-  return jsxRuntime.exports.jsx(Typography, {
-    htmlProps: props,
+  return jsxRuntime.exports.jsx(Typography, __assign({
+    htmlProps: rest,
     ref: ref,
     as: "span",
     color: "interactive"
-  });
+  }, {
+    children: children
+  }));
 });
 
 var ChevronRightOutlined = {};
@@ -33345,6 +33352,12 @@ var Tabs = /*#__PURE__*/forwardRef(function (props, ref) {
     onChange && onChange(index);
   };
 
+  useEffect(function () {
+    if (activeTab && activeTab != thisActiveTab) {
+      setActiveTab(activeTab);
+    }
+  }, [activeTab, thisActiveTab]);
+
   var containerProps = __assign(__assign({}, getBaseHTMLProps(uniqueId, className, htmlProps, rest)), {
     ref: ref
   });
@@ -33501,7 +33514,6 @@ var Tab = /*#__PURE__*/forwardRef(function (props, ref) {
 
   var _b = useTabsContext(),
       tabPanelsRef = _b.tabPanelsRef,
-      hasTabFocus = _b.hasTabFocus,
       setHasTabFocus = _b.setHasTabFocus,
       tabContentDirection = _b.tabContentDirection,
       tabWidth = _b.tabWidth;
@@ -33512,7 +33524,6 @@ var Tab = /*#__PURE__*/forwardRef(function (props, ref) {
     if (focus) {
       (_a = itemRef.current) === null || _a === void 0 ? void 0 : _a.focus();
       setHasTabFocus(true);
-      console.log('setHasTabFocus if(focus)', hasTabFocus);
     }
   }, [focus]);
   useOnKeyDown('Tab', function () {

package/dist/index.js

@@ -28721,20 +28721,27 @@ var isAnchorTypographyProps = function isAnchorTypographyProps(props) {
 };
 
 var Breadcrumb = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var children = props.children,
+      rest = __rest(props, ["children"]);
+
   if (isAnchorTypographyProps(props)) {
-    return jsxRuntime.exports.jsx(Typography, {
-      htmlProps: props,
+    return jsxRuntime.exports.jsx(Typography, __assign({
+      htmlProps: rest,
       ref: ref,
       typographyType: "a"
-    });
+    }, {
+      children: children
+    }));
   }
 
-  return jsxRuntime.exports.jsx(Typography, {
-    htmlProps: props,
+  return jsxRuntime.exports.jsx(Typography, __assign({
+    htmlProps: rest,
     ref: ref,
     as: "span",
     color: "interactive"
-  });
+  }, {
+    children: children
+  }));
 });
 
 var ChevronRightOutlined = {};
@@ -33371,6 +33378,12 @@ var Tabs = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onChange && onChange(index);
   };
 
+  React.useEffect(function () {
+    if (activeTab && activeTab != thisActiveTab) {
+      setActiveTab(activeTab);
+    }
+  }, [activeTab, thisActiveTab]);
+
   var containerProps = __assign(__assign({}, getBaseHTMLProps(uniqueId, className, htmlProps, rest)), {
     ref: ref
   });
@@ -33527,7 +33540,6 @@ var Tab = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
   var _b = useTabsContext(),
       tabPanelsRef = _b.tabPanelsRef,
-      hasTabFocus = _b.hasTabFocus,
       setHasTabFocus = _b.setHasTabFocus,
       tabContentDirection = _b.tabContentDirection,
       tabWidth = _b.tabWidth;
@@ -33538,7 +33550,6 @@ var Tab = /*#__PURE__*/React.forwardRef(function (props, ref) {
     if (focus) {
       (_a = itemRef.current) === null || _a === void 0 ? void 0 : _a.focus();
       setHasTabFocus(true);
-      console.log('setHasTabFocus if(focus)', hasTabFocus);
     }
   }, [focus]);
   useOnKeyDown('Tab', function () {

package/package.json

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