@norges-domstoler/dds-components 0.0.30 → 1.1.0

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

@@ -10,13 +10,15 @@ export declare const LovisaWrapper: import("styled-components").StyledComponent<
 export declare const Navigation: import("styled-components").StyledComponent<"nav", any, {}, never>;
 declare type NavListProps = Pick<InternalHeaderProps, 'smallScreen'>;
 export declare const NavigationList: import("styled-components").StyledComponent<"ul", any, NavListProps, never>;
-declare type ContextMenuWrapperProps = {
-    closed?: boolean;
-};
-export declare const ContextMenuWrapper: import("styled-components").StyledComponent<"div", any, ContextMenuWrapperProps, never>;
-export declare const ContextMenuList: import("styled-components").StyledComponent<"ul", any, {}, never>;
-export declare const StyledDivider: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<{
-    color?: import("../Divider").DividerColor | undefined;
-} & import("react").HTMLAttributes<HTMLHRElement> & import("react").RefAttributes<HTMLHRElement>>, any, {}, never>;
 export declare const ContextMenuGroup: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledOverflowMenu: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<{
+    isOpen?: boolean | undefined;
+    anchorRef?: import("react").RefObject<HTMLButtonElement> | undefined;
+    onClose?: (() => void) | undefined;
+    placement?: import("../../hooks").Placement | undefined;
+    userProps?: import("../OverflowMenu").UserProps | undefined;
+    items?: import("../OverflowMenu").OverflowMenuContextItem[] | undefined;
+    navItems?: import("../OverflowMenu").OverflowMenuNavItem[] | undefined;
+    offset?: number | undefined;
+} & import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
 export {};

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

@@ -34,28 +34,6 @@ export declare const internalHeaderTokens: {
             base: CSSObject;
         };
     };
-    contextMenu: {
-        base: CSSObject;
-        spaceFromButtonTop: string;
-    };
-    contextMenuLink: {
-        base: CSSObject;
-        hover: {
-            base: CSSObject;
-        };
-        active: {
-            base: CSSObject;
-        };
-        focus: {
-            base: CSSObject;
-        };
-    };
-    contextMenuDivider: {
-        base: CSSObject;
-    };
-    icon: {
-        base: CSSObject;
-    };
     contextGroup: {
         base: CSSObject;
     };

package/dist/components/Modal/Modal.d.ts

@@ -0,0 +1,15 @@
+import { HTMLAttributes, ReactNode, RefObject } from 'react';
+export declare type ModalProps = {
+    onClose?: () => void;
+    isOpen?: boolean;
+    parentElement?: HTMLElement;
+    header?: string | ReactNode;
+    triggerRef?: RefObject<HTMLElement>;
+} & HTMLAttributes<HTMLDivElement>;
+export declare const Modal: import("react").ForwardRefExoticComponent<{
+    onClose?: (() => void) | undefined;
+    isOpen?: boolean | undefined;
+    parentElement?: HTMLElement | undefined;
+    header?: string | ReactNode;
+    triggerRef?: RefObject<HTMLElement> | undefined;
+} & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,19 @@
+import { CSSObject } from 'styled-components';
+export declare const modalTokens: {
+    base: CSSObject;
+    focus: {
+        base: CSSObject;
+    };
+    contentContainer: {
+        base: CSSObject;
+    };
+    actionsContainer: {
+        base: CSSObject;
+    };
+    bodyScrollable: {
+        base: CSSObject;
+        focus: {
+            base: CSSObject;
+        };
+    };
+};

package/dist/components/Modal/ModalActions.d.ts

@@ -0,0 +1,3 @@
+import { HTMLAttributes } from 'react';
+export declare type ModalActionsProps = HTMLAttributes<HTMLDivElement>;
+export declare const ModalActions: import("react").ForwardRefExoticComponent<ModalActionsProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Modal/ModalBody.d.ts

@@ -0,0 +1,7 @@
+import { HTMLAttributes } from 'react';
+export declare type ModalBodyProps = {
+    scrollable?: boolean;
+} & HTMLAttributes<HTMLDivElement>;
+export declare const ModalBody: import("react").ForwardRefExoticComponent<{
+    scrollable?: boolean | undefined;
+} & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,3 @@
+export * from './Modal';
+export * from './ModalBody';
+export * from './ModalActions';

package/dist/components/OverflowMenu/OverflowMenu.d.ts

@@ -0,0 +1,17 @@
+import { OverflowMenuContextItem, OverflowMenuNavItem } from '.';
+declare type ContainerProps = {
+    isOpen?: boolean;
+};
+export declare const Container: import("styled-components").StyledComponent<"div", any, ContainerProps, never>;
+export declare const OverflowMenuList: import("styled-components").StyledComponent<"ul", any, {}, never>;
+export declare const OverflowMenu: import("react").ForwardRefExoticComponent<{
+    isOpen?: boolean | undefined;
+    anchorRef?: import("react").RefObject<HTMLButtonElement> | undefined;
+    onClose?: (() => void) | undefined;
+    placement?: import("../../hooks").Placement | undefined;
+    userProps?: import("./OverflowMenu.types").UserProps | undefined;
+    items?: OverflowMenuContextItem[] | undefined;
+    navItems?: OverflowMenuNavItem[] | undefined;
+    offset?: number | undefined;
+} & import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+export {};

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

@@ -0,0 +1,22 @@
+import { CSSObject } from 'styled-components';
+export declare const overflowMenuTokens: {
+    container: {
+        base: CSSObject;
+    };
+    link: {
+        base: CSSObject;
+        active: {
+            base: CSSObject;
+        };
+        hover: {
+            base: CSSObject;
+        };
+        focus: {
+            base: CSSObject;
+        };
+    };
+    divider: {
+        base: CSSObject;
+    };
+    offset: number;
+};

package/dist/components/OverflowMenu/OverflowMenu.types.d.ts

@@ -0,0 +1,26 @@
+import { SvgIconTypeMap } from '@material-ui/core';
+import { OverridableComponent } from '@material-ui/core/OverridableComponent';
+import { Placement } from '../../hooks/useReactPopper';
+import { AnchorHTMLAttributes, ButtonHTMLAttributes, HTMLAttributes, RefObject } from 'react';
+export declare type OverflowMenuContextItem = {
+    title: string;
+    Icon?: OverridableComponent<SvgIconTypeMap<Record<string, unknown>, 'svg'>>;
+} & (AnchorHTMLAttributes<HTMLAnchorElement> | ButtonHTMLAttributes<HTMLButtonElement>);
+export declare type OverflowMenuNavItem = {
+    title: string;
+    Icon?: OverridableComponent<SvgIconTypeMap<Record<string, unknown>, 'svg'>>;
+} & AnchorHTMLAttributes<HTMLAnchorElement>;
+export declare type UserProps = {
+    name: string;
+    href?: string;
+} & (AnchorHTMLAttributes<HTMLAnchorElement> | ButtonHTMLAttributes<HTMLButtonElement>);
+export declare type OverflowMenuProps = {
+    isOpen?: boolean;
+    anchorRef?: RefObject<HTMLButtonElement>;
+    onClose?: () => void;
+    placement?: Placement;
+    userProps?: UserProps;
+    items?: OverflowMenuContextItem[];
+    navItems?: OverflowMenuNavItem[];
+    offset?: number;
+} & HTMLAttributes<HTMLDivElement>;

package/dist/components/OverflowMenu/OverflowMenuGroup.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+export declare type OverflowMenuGroupProps = {
+    onToggle?: () => void;
+    onOpen?: () => void;
+    onClose?: () => void;
+    children: ReactNode;
+    overflowMenuId?: string;
+};
+export declare const OverflowMenuGroup: ({ children, onClose, onToggle, onOpen, overflowMenuId }: OverflowMenuGroupProps) => JSX.Element;

package/dist/components/{InternalHeader/ContextMenuItem.d.ts → OverflowMenu/OverflowMenuItem.d.ts}

@@ -2,10 +2,10 @@ import { AnchorHTMLAttributes, ButtonHTMLAttributes, HTMLAttributes, Dispatch, S
 import { OverridableComponent } from '@material-ui/core/OverridableComponent';
 import { SvgIconTypeMap } from '@material-ui/core/SvgIcon';
 import { IconWrapper } from '../../helpers/IconWrapper';
-export declare const Element: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const Span: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const Link: import("styled-components").StyledComponent<"a", any, {}, never>;
 export declare const StyledIconWrapper: import("styled-components").StyledComponent<typeof IconWrapper, any, {}, never>;
-export declare type ContextMenuItemProps = {
+export declare type OverflowMenuItemProps = {
     title: string;
     href?: string;
     Icon?: OverridableComponent<SvgIconTypeMap<Record<string, unknown>, 'svg'>>;
@@ -14,4 +14,4 @@ export declare type ContextMenuItemProps = {
     index?: number;
     isMenuClosed?: boolean;
 } & (AnchorHTMLAttributes<HTMLAnchorElement> | ButtonHTMLAttributes<HTMLButtonElement> | HTMLAttributes<HTMLSpanElement>);
-export declare const ContextMenuItem: import("react").ForwardRefExoticComponent<ContextMenuItemProps & import("react").RefAttributes<HTMLAnchorElement>>;
+export declare const OverflowMenuItem: import("react").ForwardRefExoticComponent<OverflowMenuItemProps & import("react").RefAttributes<HTMLAnchorElement>>;

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

@@ -0,0 +1,3 @@
+export * from './OverflowMenu';
+export * from './OverflowMenu.types';
+export * from './OverflowMenuGroup';

package/dist/helpers/Backdrop/Backdrop.d.ts

@@ -0,0 +1,5 @@
+declare type BackdropProps = {
+    isOpen: boolean;
+};
+export declare const Backdrop: import("styled-components").StyledComponent<"div", any, BackdropProps, never>;
+export {};

package/dist/helpers/Backdrop/Backdrop.utils.d.ts

@@ -0,0 +1,2 @@
+export declare function handleElementWithBackdropMount(container: HTMLElement): void;
+export declare function handleElementWithBackdropUnmount(container: HTMLElement): void;

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

@@ -0,0 +1,2 @@
+export * from './Backdrop';
+export * from './Backdrop.utils';

package/dist/helpers/color.d.ts

@@ -0,0 +1,6 @@
+export declare type ColorAlphaFormat = 'hex8' | 'decimal';
+export declare const convertAlpha: (value: number | string, typeFrom: ColorAlphaFormat, typeTo: ColorAlphaFormat) => string | number | undefined;
+export declare const hexToRGBA: (hex: string) => string;
+export declare const addAlphaToRGB: (rgb: string, alpha: number | string) => string;
+export declare const RGBToHex: (value: string) => string;
+export declare const changeRGBAAlpha: (value: string, alpha: number) => string;

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

@@ -1 +1,2 @@
 export * from './removeButtonStyling';
+export * from './visibilityTransition';

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

@@ -0,0 +1 @@
+export declare const visibilityTransition: (open: boolean) => import("styled-components").FlattenSimpleInterpolation;

package/dist/hooks/index.d.ts

@@ -3,3 +3,6 @@ export * from './useOnClickOutside';
 export * from './useOnKeyDown';
 export * from './useReactPopper';
 export * from './useRoveFocus';
+export * from './useFocusTrap';
+export * from './useMountTransition';
+export * from './useId';

package/dist/hooks/useFocusTrap.d.ts

@@ -0,0 +1 @@
+export declare function useFocusTrap<T extends HTMLElement>(active: boolean): import("react").RefObject<T>;

package/dist/hooks/useId.d.ts

@@ -0,0 +1 @@
+export declare function useId(prefix: string, suffix?: string): string;

package/dist/hooks/useMountTransition.d.ts

@@ -0,0 +1 @@
+export declare const useMountTransition: (isMounted: boolean, unmountDelay: number) => boolean;

package/dist/index.css

@@ -58,3 +58,10 @@
     url('../assets/fonts/IBMPlexSans-SemiBoldItalic.woff2') format('woff2'),
     url('../assets/fonts/IBMPlexSans-SemiBoldItalic.woff') format('woff');
 }
+
+@import '~@norges-domstoler/dds-design-tokens/dist/css/colors.css';
+
+*::selection {
+  background-color: var(--dds-color-tertiary-lightest);
+  color: var(--dds-color-neutrals-gray-9);
+}

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 import 'focus-visible';
 import './styles/fontStyles.css';
+import './styles/selection.css';
 export * from './components/RadioButton';
 export * from './components/Checkbox';
 export * from './components/Button';
@@ -22,4 +23,6 @@ export * from './components/InternalHeader';
 export * from './components/Datepicker';
 export * from './components/SkipToContent';
 export * from './components/Tooltip';
+export * from './components/Modal';
+export * from './components/OverflowMenu';
 export * from './components/Popover';

package/dist/index.es.css

@@ -58,3 +58,10 @@
     url('../assets/fonts/IBMPlexSans-SemiBoldItalic.woff2') format('woff2'),
     url('../assets/fonts/IBMPlexSans-SemiBoldItalic.woff') format('woff');
 }
+
+@import '~@norges-domstoler/dds-design-tokens/dist/css/colors.css';
+
+*::selection {
+  background-color: var(--dds-color-tertiary-lightest);
+  color: var(--dds-color-neutrals-gray-9);
+}