@norges-domstoler/dds-components 20.1.0 → 20.2.0

package/dist/index.d.mts

@@ -1982,7 +1982,7 @@ type OverflowMenuListItemBaseProps<T extends 'span' | 'button' | 'a'> = {
      */
     purpose?: 'default' | 'danger';
 } & ComponentPropsWithRef<T>;
-type OverflowMenuButtonProps = OverflowMenuListItemBaseProps<'button'>;
+type OverflowMenuButtonProps = OverflowMenuListItemBaseProps<'button'> & Pick<ButtonProps, 'loading' | 'loadingTooltip'>;
 type OverflowMenuLinkProps = OverflowMenuListItemBaseProps<'a'>;
 type OverflowMenuSpanProps = OverflowMenuListItemBaseProps<'span'>;
 type OverflowMenuProps = Omit<BaseComponentPropsWithChildren<HTMLDivElement, {
@@ -1997,7 +1997,7 @@ type OverflowMenuProps = Omit<BaseComponentPropsWithChildren<HTMLDivElement, {
 }>, 'id'>;
 
 declare const OverflowMenuButton: {
-    ({ id, icon, children, className, onClick, purpose, ref, ...rest }: OverflowMenuButtonProps): react_jsx_runtime.JSX.Element;
+    ({ id, icon, children, className, onClick, purpose, loading, loadingTooltip, "aria-disabled": ariaDisabled, ref, ...rest }: OverflowMenuButtonProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 
@@ -2164,6 +2164,14 @@ type PopoverProps = BaseComponentPropsWithChildren<HTMLDivElement, {
      * @default "bottom"
      */
     placement?: Placement;
+    /**Angir rotnode hvor popover skal rendres.
+     * @default themeProviderRef
+     */
+    parentElement?: HTMLElement;
+    /**Angir om popover skal rendre i en portal eller ikke.
+     * @default "false"
+     */
+    portal?: boolean;
     /**Avstand fra anchor-elementet i px.
      * @default 8
      */
@@ -2184,7 +2192,7 @@ type PopoverProps = BaseComponentPropsWithChildren<HTMLDivElement, {
     onClose?: () => void;
 }>;
 declare const Popover: {
-    ({ id, header, withCloseButton, onBlur, children, placement, offset, sizeProps, returnFocusOnBlur, className, htmlProps, anchorRef, isOpen: propIsOpen, onClose: propOnClose, ref, ...rest }: PopoverProps): react_jsx_runtime.JSX.Element | null;
+    ({ id, header, withCloseButton, onBlur, children, placement, parentElement, portal, offset, sizeProps, returnFocusOnBlur, className, htmlProps, anchorRef, isOpen: propIsOpen, onClose: propOnClose, ref, ...rest }: PopoverProps): react_jsx_runtime.JSX.Element | null;
     displayName: string;
 };
 

package/dist/index.d.ts

@@ -1982,7 +1982,7 @@ type OverflowMenuListItemBaseProps<T extends 'span' | 'button' | 'a'> = {
      */
     purpose?: 'default' | 'danger';
 } & ComponentPropsWithRef<T>;
-type OverflowMenuButtonProps = OverflowMenuListItemBaseProps<'button'>;
+type OverflowMenuButtonProps = OverflowMenuListItemBaseProps<'button'> & Pick<ButtonProps, 'loading' | 'loadingTooltip'>;
 type OverflowMenuLinkProps = OverflowMenuListItemBaseProps<'a'>;
 type OverflowMenuSpanProps = OverflowMenuListItemBaseProps<'span'>;
 type OverflowMenuProps = Omit<BaseComponentPropsWithChildren<HTMLDivElement, {
@@ -1997,7 +1997,7 @@ type OverflowMenuProps = Omit<BaseComponentPropsWithChildren<HTMLDivElement, {
 }>, 'id'>;
 
 declare const OverflowMenuButton: {
-    ({ id, icon, children, className, onClick, purpose, ref, ...rest }: OverflowMenuButtonProps): react_jsx_runtime.JSX.Element;
+    ({ id, icon, children, className, onClick, purpose, loading, loadingTooltip, "aria-disabled": ariaDisabled, ref, ...rest }: OverflowMenuButtonProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 
@@ -2164,6 +2164,14 @@ type PopoverProps = BaseComponentPropsWithChildren<HTMLDivElement, {
      * @default "bottom"
      */
     placement?: Placement;
+    /**Angir rotnode hvor popover skal rendres.
+     * @default themeProviderRef
+     */
+    parentElement?: HTMLElement;
+    /**Angir om popover skal rendre i en portal eller ikke.
+     * @default "false"
+     */
+    portal?: boolean;
     /**Avstand fra anchor-elementet i px.
      * @default 8
      */
@@ -2184,7 +2192,7 @@ type PopoverProps = BaseComponentPropsWithChildren<HTMLDivElement, {
     onClose?: () => void;
 }>;
 declare const Popover: {
-    ({ id, header, withCloseButton, onBlur, children, placement, offset, sizeProps, returnFocusOnBlur, className, htmlProps, anchorRef, isOpen: propIsOpen, onClose: propOnClose, ref, ...rest }: PopoverProps): react_jsx_runtime.JSX.Element | null;
+    ({ id, header, withCloseButton, onBlur, children, placement, parentElement, portal, offset, sizeProps, returnFocusOnBlur, className, htmlProps, anchorRef, isOpen: propIsOpen, onClose: propOnClose, ref, ...rest }: PopoverProps): react_jsx_runtime.JSX.Element | null;
     displayName: string;
 };
 

package/dist/index.js

@@ -444,7 +444,10 @@ var utilStyles_default = {
   "visibility-transition--open": "utilStyles_visibility-transition--open",
   "visibility-transition--closed": "utilStyles_visibility-transition--closed",
   "visually-hidden": "utilStyles_visually-hidden",
-  invisible
+  invisible,
+  "center-absolute": "utilStyles_center-absolute",
+  "center-absolute-y": "utilStyles_center-absolute-y",
+  "center-absolute-x": "utilStyles_center-absolute-x"
 };
 
 // src/components/helpers/Backdrop/Backdrop.utils.tsx
@@ -3635,6 +3638,7 @@ var OverflowMenu_default = {
   danger: "OverflowMenu_danger",
   "list__item--link": "OverflowMenu_list__item--link",
   icon: "OverflowMenu_icon",
+  "button-loading": "OverflowMenu_button-loading",
   divider: "OverflowMenu_divider",
   "group-header": "OverflowMenu_group-header"
 };
@@ -3690,6 +3694,9 @@ var OverflowMenuButton = ({
   className,
   onClick,
   purpose = "default",
+  loading,
+  loadingTooltip,
+  "aria-disabled": ariaDisabled,
   ref,
   ...rest
 }) => {
@@ -3712,17 +3719,33 @@ var OverflowMenuButton = ({
         OverflowMenu_default[purpose],
         typographyStyles_default["body-small"],
         OverflowMenu_default["list__item--link"],
-        focus_default["focusable--inset"]
+        focus_default["focusable--inset"],
+        loading && OverflowMenu_default["button-loading"]
       ),
-      onClick: (e) => {
+      onClick: loading ? void 0 : (e) => {
         onClick == null ? void 0 : onClick(e);
         onClose == null ? void 0 : onClose();
       },
+      "aria-disabled": loading ? true : ariaDisabled ? ariaDisabled : void 0,
       ...rest,
       tabIndex: focusedRef === itemRef ? 0 : -1,
       children: [
-        icon && /* @__PURE__ */ (0, import_jsx_runtime188.jsx)(Icon, { iconSize: "inherit", icon }),
-        children
+        loading && /* @__PURE__ */ (0, import_jsx_runtime188.jsx)("span", { className: cn(utilStyles_default["center-absolute"]), children: /* @__PURE__ */ (0, import_jsx_runtime188.jsx)(
+          Spinner,
+          {
+            size: "var(--dds-icon-size-medium)",
+            tooltip: loadingTooltip
+          }
+        ) }),
+        icon && /* @__PURE__ */ (0, import_jsx_runtime188.jsx)(
+          Icon,
+          {
+            className: cn(loading && invisible),
+            iconSize: "inherit",
+            icon
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime188.jsx)("span", { className: cn(loading && invisible), children })
       ]
     }
   ) });
@@ -9606,6 +9629,7 @@ var getCallingCode = (s) => {
 
 // src/components/Popover/Popover.tsx
 var import_react61 = require("react");
+var import_react_dom5 = require("react-dom");
 
 // src/components/Popover/Popover.module.css
 var Popover_default = {
@@ -9629,6 +9653,8 @@ var Popover = ({
   onBlur,
   children,
   placement = "bottom",
+  parentElement,
+  portal = false,
   offset = 8,
   sizeProps,
   returnFocusOnBlur = true,
@@ -9645,6 +9671,8 @@ var Popover = ({
     placement
   });
   const context = usePopoverContext();
+  const themeContext = (0, import_react61.useContext)(ThemeContext);
+  const portalTarget = parentElement != null ? parentElement : themeContext == null ? void 0 : themeContext.el;
   const {
     floatStyling: contextFloatStyling,
     setFloatOptions,
@@ -9703,7 +9731,7 @@ var Popover = ({
   });
   const hasTitle = !!header;
   const openCn = hasTransitionedIn && isOpen ? "open" : "closed";
-  return isOpen || hasTransitionedIn ? /* @__PURE__ */ (0, import_jsx_runtime272.jsxs)(
+  const popover = /* @__PURE__ */ (0, import_jsx_runtime272.jsxs)(
     Paper,
     {
       ...getBaseHTMLProps(
@@ -9750,7 +9778,8 @@ var Popover = ({
         )
       ]
     }
-  ) : null;
+  );
+  return isOpen || hasTransitionedIn ? portal && portalTarget ? (0, import_react_dom5.createPortal)(popover, portalTarget) : popover : null;
 };
 Popover.displayName = "Popover";