@dfds-ui/react-components 3.0.0-alpha.356fd468 → 3.0.0-alpha.db5f99ee

package/package.json

@@ -3,7 +3,7 @@
   "description": "Shared react components within DFDS",
   "license": "MIT",
   "private": false,
-  "version": "3.0.0-alpha.356fd468",
+  "version": "3.0.0-alpha.db5f99ee",
   "sideEffects": false,
   "main": "./cjs/index.js",
   "module": "./index.js",
@@ -17,21 +17,21 @@
     "react-select": "^5.10.2"
   },
   "dependencies": {
-    "@dfds-ui/colors": "3.0.0-alpha.356fd468",
-    "@dfds-ui/fonts": "3.0.0-alpha.356fd468",
-    "@dfds-ui/hooks": "3.0.0-alpha.356fd468",
-    "@dfds-ui/icons": "3.0.0-alpha.356fd468",
-    "@dfds-ui/spacing": "3.0.0-alpha.356fd468",
-    "@dfds-ui/theme": "3.0.0-alpha.356fd468",
-    "@dfds-ui/typography": "3.0.0-alpha.356fd468",
+    "@dfds-ui/colors": "3.0.0-alpha.db5f99ee",
+    "@dfds-ui/fonts": "3.0.0-alpha.db5f99ee",
+    "@dfds-ui/hooks": "3.0.0-alpha.db5f99ee",
+    "@dfds-ui/icons": "3.0.0-alpha.db5f99ee",
+    "@dfds-ui/spacing": "3.0.0-alpha.db5f99ee",
+    "@dfds-ui/theme": "3.0.0-alpha.db5f99ee",
+    "@dfds-ui/typography": "3.0.0-alpha.db5f99ee",
     "@kunukn/react-collapse": "^3.0.15",
-    "@mui/material": "^7.3.11",
-    "@mui/system": "^7.3.11",
+    "@mui/material": "^9.0.1",
+    "@mui/system": "^9.0.1",
     "classnames": "^2.5.1",
     "humps": "^2.0.1",
     "uuid": "^14.0.0"
   },
-  "gitHead": "356fd46817021e39b139569ce39a727bdec54281",
+  "gitHead": "db5f99ee9763b1aa1c9178d36546b5a4dfae978d",
   "publishConfig": {
     "access": "public"
   }

package/cjs/accordion/Accordion.d.ts

@@ -1,101 +0,0 @@
-import React, { ReactNode } from 'react';
-import { CollapseProps } from '@kunukn/react-collapse';
-export type AccordionHeaderProps = {
-    /**
-     * Add heading to the Accordion.
-     */
-    heading?: string;
-    /**
-     * Add secondary heading to the Accordion.
-     */
-    secondaryHeading?: ReactNode;
-    /**
-     * Specify the duration of the transition between open and closed.
-     */
-    transitionDuration?: string;
-    /**
-     * If set to `true` the Accordion is open.
-     */
-    isOpen?: boolean;
-    /**
-     * Disable the Accordion.
-     */
-    disabled?: boolean;
-    /**
-     * Use the Accordion without animation.
-     */
-    noAnimation?: boolean;
-    /**
-     * Hide the secondary heading when the Accordion is opened.
-     */
-    noSecondaryHeadingWhenOpen?: boolean;
-    /**
-     * Callback when toggling the accordion
-     */
-    onToggle?: () => void;
-};
-export declare const AccordionHeader: React.FunctionComponent<AccordionHeaderProps>;
-export type AccordionProps = {
-    /**
-     * Add heading to the Accordion.
-     */
-    heading?: string;
-    /**
-     * Add a custom header to the Accordion.
-     */
-    header?: ReactNode;
-    /**
-     * Add secondary heading to the Accordion.
-     */
-    secondaryHeading?: ReactNode;
-    /**
-     * Specify the duration of the transition between open and closed.
-     */
-    transitionDuration?: string;
-    /**
-     * If set to `true` the Accordion is open.
-     */
-    isOpen?: boolean;
-    /**
-     * Disable the Accordion.
-     */
-    disabled?: boolean;
-    /**
-     * Callback when toggling the accordion
-     */
-    onToggle?: () => void;
-    /**
-     * Props passed on to the Collapse component
-     */
-    collapseProps?: CollapseProps;
-    /**
-     * Use the Accordion without animation.
-     */
-    noAnimation?: boolean;
-    /**
-     * The compressed variant removes the `margin-bottom` of the Accordion.
-     */
-    variant?: 'default' | 'compressed';
-    /**
-     * Specify the content padding of the Accordion.
-     */
-    type?: 'small' | 'medium';
-    /**
-     * Add a className to the Accordion.
-     */
-    className?: string;
-    /**
-     * Hide the secondary heading when the Accordion is opened.
-     */
-    noSecondaryHeadingWhenOpen?: boolean;
-    /**
-     * Hide the Divider (the grey line under the header)
-     */
-    hideDivider?: boolean;
-    /**
-     * Updates component with children prop accordingly to the @types update
-     */
-    children?: ReactNode;
-};
-export declare const Accordion: React.FunctionComponent<AccordionProps>;
-export default Accordion;

package/cjs/accordion/AccordionContent.d.ts

@@ -1,14 +0,0 @@
-import React from 'react';
-export type AccordionContentProps = {
-    children?: React.ReactNode;
-    /**
-     * The compressed variant removes the `margin-bottom` of the Accordion.
-     */
-    variant?: 'default' | 'compressed';
-    /**
-     * Specify the content padding of the Accordion.
-     */
-    type?: 'small' | 'medium';
-};
-export declare const AccordionContent: React.FunctionComponent<AccordionContentProps>;
-export default AccordionContent;

package/cjs/accordion/AccordionSmall.d.ts

@@ -1,56 +0,0 @@
-import React from 'react';
-export type AccordionSmallHeaderProps = {
-    /**
-     * Add a heading to the Accordion.
-     */
-    heading: string;
-    /**
-     * Add a secondary heading to the Accordion.
-     */
-    secondaryHeading?: string;
-    /**
-     * Specify the duration of the transition between open and closed.
-     */
-    transitionDuration?: string;
-    /**
-     * If set to `true` the Accordion is open.
-     */
-    isOpen?: boolean;
-    /**
-     * Disable the Accordion.
-     */
-    disabled?: boolean;
-    /**
-     * Use the Accordion without animation.
-     */
-    noAnimation?: boolean;
-    onToggle?: () => void;
-};
-export declare const AccordionSmallHeader: React.FunctionComponent<AccordionSmallHeaderProps>;
-export type AccordionSmallProps = {
-    children?: React.ReactNode;
-    /**
-     * Add a heading to the Accordion.
-     */
-    heading: string;
-    /**
-     * Specify the duration of the transition between open and closed.
-     */
-    transitionDuration?: string;
-    /**
-     * If set to `true` the Accordion is open.
-     */
-    isOpen?: boolean;
-    /**
-     * Disable the Accordion.
-     */
-    disabled?: boolean;
-    /**
-     * Use the Accordion without animation.
-     */
-    noAnimation?: boolean;
-    onToggle?: () => void;
-    collapseProps?: object;
-};
-export declare const AccordionSmall: React.FunctionComponent<AccordionSmallProps>;
-export default AccordionSmall;

package/cjs/accordion/index.d.ts

@@ -1,3 +0,0 @@
-export * from './Accordion';
-export * from './AccordionSmall';
-export * from './AccordionContent';

package/cjs/app-bar/AppBar.d.ts

@@ -1,13 +0,0 @@
-import React from 'react';
-type Breakpoint = 's' | 'm' | 'l';
-declare const AppBar: ({ children, leftActions, actions, logoProps, menuBreakpoint, handleMenuButtonClick, hasMenuButton, ...rest }: {
-    leftActions?: React.ReactNode;
-    actions?: React.ReactNode;
-    className?: string;
-    logoProps?: any;
-    menuBreakpoint?: Breakpoint;
-    hasMenuButton?: boolean;
-    handleMenuButtonClick?: () => void;
-    children?: React.ReactNode;
-}) => React.JSX.Element;
-export default AppBar;

package/cjs/app-bar/AppBarContext.d.ts

@@ -1,12 +0,0 @@
-import * as React from 'react';
-type AppBarState = {
-    drawerOpen: boolean;
-    setDrawerOpen: React.Dispatch<React.SetStateAction<boolean>>;
-    height: number;
-    setHeight: React.Dispatch<React.SetStateAction<number>>;
-};
-export declare const AppBarProvider: ({ children }: {
-    children?: React.ReactNode;
-}) => React.JSX.Element;
-export declare const useAppBarContext: () => AppBarState;
-export {};

package/cjs/app-bar/AppBarDrawer.d.ts

@@ -1,5 +0,0 @@
-import * as React from 'react';
-declare const AppBarDrawer: ({ children, ...props }: {
-    children?: React.ReactNode;
-}) => React.JSX.Element;
-export default AppBarDrawer;

package/cjs/app-bar/AppBarIconButton.d.ts

@@ -1,10 +0,0 @@
-import React from 'react';
-type AppBarIconButtonProps = {
-    isActive?: boolean;
-    ariaLabel: string;
-    icon: React.ElementType;
-    showTooltip?: boolean;
-    onClick?: (event: React.MouseEvent) => void;
-};
-declare const AppBarIconButton: ({ isActive, ariaLabel, showTooltip, ...rest }: AppBarIconButtonProps) => React.JSX.Element;
-export default AppBarIconButton;

package/cjs/app-bar/AppBarItem.d.ts

@@ -1,23 +0,0 @@
-import React from 'react';
-import { PopperProps } from '@mui/material';
-export type AppBarItemProps = {
-    id: string;
-    Icon?: React.ElementType;
-    LeadingIcon?: React.ElementType;
-    TrailingIcon?: React.ElementType;
-    title: string;
-    divider?: 'start' | 'end' | 'both';
-    children?: React.ReactNode;
-    as?: React.ElementType;
-    onClick?: () => void;
-    placement?: 'bottom-start' | 'bottom-end';
-    isActive?: boolean;
-    AppBarPopperProps?: Omit<PopperProps, 'open'>;
-};
-export declare const MenuPopOverContext: React.Context<{
-    handlePopoverClose: () => void;
-} | undefined>;
-export declare const AppBarPopper: import("@emotion/styled").StyledComponent<PopperProps & React.RefAttributes<HTMLDivElement> & {
-    theme?: import("@emotion/react").Theme;
-}, {}, {}>;
-export declare const AppBarItem: ({ id, Icon, LeadingIcon, TrailingIcon, title, divider, children, onClick, placement, isActive, as, AppBarPopperProps, ...rest }: AppBarItemProps & React.JSX.IntrinsicElements["a"]) => React.JSX.Element;

package/cjs/app-bar/AppBarListItem.d.ts

@@ -1,15 +0,0 @@
-declare const AppBarListItem: import("@emotion/styled").StyledComponent<{
-    multiline?: boolean;
-    selected?: boolean;
-    condensed?: boolean;
-    tabIndex?: number;
-    clickable?: boolean;
-    divider?: boolean;
-    onClick?: () => void;
-    flexBoxProps?: import("../flexbox").FlexBoxProps;
-    className?: string;
-    children?: React.ReactNode;
-} & import("..").PolymorphicComponentProps & {
-    theme?: import("@emotion/react").Theme;
-}, {}, {}>;
-export default AppBarListItem;

package/cjs/app-bar/index.d.ts

@@ -1,7 +0,0 @@
-import { useAppBarContext, AppBarProvider } from './AppBarContext';
-import { AppBarItem, MenuPopOverContext } from './AppBarItem';
-export { default as AppBarDrawer } from './AppBarDrawer';
-export { default as AppBar } from './AppBar';
-export { default as AppBarIconButton } from './AppBarIconButton';
-export { default as AppBarListItem } from './AppBarListItem';
-export { useAppBarContext, AppBarProvider, AppBarItem, MenuPopOverContext };

package/cjs/assertions/banner/Banner.d.ts

@@ -1,74 +0,0 @@
-import React, { ElementType, FunctionComponent, ReactNode } from 'react';
-import { Intent } from '../../common/intent';
-export type BannerVariant = 'lowEmphasis' | 'mediumEmphasis' | 'highEmphasis' | 'default' | 'inverted';
-export type BannerStickyPosition = 'top' | 'bottom' | 'bottom-right';
-export type BannerProps = {
-    /**
-     * Specifies the intent of the Banner (change the color of the banner icon to match intended status)
-     */
-    intent?: Intent;
-    /**
-     * Actions to be displayed inside the banner
-     */
-    actions?: ReactNode;
-    /**
-     * Class name to be added to the banner
-     */
-    className?: string;
-    /**
-     * Add a close icon in the top-right corner which will invoke the provided callback
-     */
-    onRequestClose?: () => void;
-    /**
-     * Specifies the ariaLabel to be added to the close(x) button
-     */
-    closeLabel?: string;
-    /**
-     * Specifies the variation of the banner.
-     *
-     * `default` and `inverted` variants are deprecated
-     */
-    variant?: BannerVariant;
-    /**
-     * Specifies if the Banner should be displayed with `position: fixed;`
-     *
-     * When the value is `undefined` the Banner default to being sticky if `variant` is set to `inverted`
-     */
-    sticky?: boolean;
-    /**
-     * Specifies the position of the Sticky Banner.
-     */
-    stickyPosition?: BannerStickyPosition;
-    /**
-     * Specifies if the Banner should have a border/divider at the bottom.
-     */
-    divider?: boolean;
-    /**
-     * Specify a custom icon to replace the one derived from `intent`
-     *
-     * @type {ElementType<{ className?: string }>}
-     */
-    icon?: ElementType<{
-        className?: string;
-    }>;
-    /**
-     * Specifies if the actions should always appear below the content
-     */
-    wrapActions?: boolean;
-    /**
-     * Content of the Banner
-     */
-    children?: ReactNode;
-    /**
-     * Specifies if the banner should be narrow
-     */
-    isNarrow?: boolean;
-};
-interface BannerContextInterface {
-    intent: NonNullable<BannerProps['intent']>;
-    variant: NonNullable<BannerProps['variant']>;
-}
-export declare const BannerContext: React.Context<BannerContextInterface | undefined>;
-export declare const useBannerContext: () => BannerContextInterface;
-export declare const Banner: FunctionComponent<BannerProps>;
-export default Banner;

package/cjs/assertions/banner/BannerAction.d.ts

@@ -1,19 +0,0 @@
-import React, { ReactNode } from 'react';
-export type BannerActionVariation = 'primary' | 'secondary' | 'primary-thick' | 'secondary-thick';
-export interface BannerActionProps {
-    variation?: BannerActionVariation;
-    onClick?: () => void;
-    /**
-     * className to be assigned to the button
-     */
-    className?: string;
-    /**
-     * HTML tag or custom component being rendered
-     */
-    as?: React.ElementType;
-    /**
-     * Updates component with children prop accordingly to the @types update
-     */
-    children?: ReactNode;
-}
-export declare const BannerAction: React.FunctionComponent<BannerActionProps>;

package/cjs/assertions/banner/BannerTypography.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-export declare const BannerHeadline: React.FunctionComponent<{
-    children?: React.ReactNode;
-    className?: string;
-}>;
-export declare const BannerParagraph: React.FunctionComponent<{
-    children?: React.ReactNode;
-    className?: string;
-}>;

package/cjs/assertions/banner/index.d.ts

@@ -1,3 +0,0 @@
-export * from './BannerAction';
-export * from './BannerTypography';
-export * from './Banner';

package/cjs/assertions/index.d.ts

@@ -1,2 +0,0 @@
-export * from './banner';
-export * from './toast';

package/cjs/assertions/toast/Toast.d.ts

@@ -1,13 +0,0 @@
-import React from 'react';
-import { Intent } from '../../common/intent';
-export type ToastProps = {
-    children?: React.ReactNode;
-    intent?: Intent;
-    className?: string;
-    loading?: boolean;
-    onRequestClose?: () => void;
-    actionLabel?: string;
-    onRequestAction?: () => void;
-};
-declare const Toast: React.FunctionComponent<ToastProps>;
-export default Toast;

package/cjs/assertions/toast/Toaster.d.ts

@@ -1,19 +0,0 @@
-import React, { FunctionComponent } from 'react';
-import { ToastProps } from './Toast';
-type TimeoutType = {
-    timeout?: number;
-};
-type ToasterState = {
-    open: boolean;
-    hasActive: boolean;
-    toastProps: ToastProps | null;
-} & TimeoutType;
-export declare const useToaster: () => {
-    addToast: (props: ToastProps & TimeoutType) => Promise<void>;
-    state: ToasterState;
-};
-declare const Toaster: FunctionComponent<{
-    children: React.ReactNode | React.ReactNode[];
-    globalTimeout?: number;
-}>;
-export default Toaster;

package/cjs/assertions/toast/index.d.ts

@@ -1,2 +0,0 @@
-export { default as Toast } from './Toast';
-export { default as Toaster, useToaster } from './Toaster';

package/cjs/badge/Badge.d.ts

@@ -1,26 +0,0 @@
-import React from 'react';
-import { Intent } from '../common/intent';
-import { FlexBoxProps } from '../flexbox/FlexBox';
-export type BadgeProps = {
-    /**
-     * Specifies the intent of the Badge
-     */
-    intent?: Intent;
-    /**
-     * Text to be shown in the badge (usually just a string)
-     */
-    children: React.ReactNode;
-    /**
-     * Class name to be added to the badge
-     */
-    className?: string;
-    /**
-     * Props controlling the flexbox
-     */
-    flexBoxProps?: FlexBoxProps;
-    /**
-     * HTML tag or custom component being rendered
-     */
-    as?: React.ElementType;
-};
-export default function Badge({ as, children, intent, flexBoxProps, ...rest }: BadgeProps): React.JSX.Element;

package/cjs/badge/index.d.ts

@@ -1,2 +0,0 @@
-export * from './Badge';
-export { default as Badge } from './Badge';

package/cjs/button/BadgeIcon.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-export type BadgeIconProps = {
-    letter: string;
-    className?: string;
-};
-export declare const BadgeIcon: ({ letter, className }: BadgeIconProps) => React.JSX.Element;
-export default BadgeIcon;

package/cjs/button/BaseButton.d.ts

@@ -1,14 +0,0 @@
-import * as React from 'react';
-export declare const variations: readonly ["primary", "secondary", "outlined", "text", "danger", "link"];
-export type BaseButtonProps = React.PropsWithoutRef<React.JSX.IntrinsicElements['button']>;
-export type ButtonVariation = (typeof variations)[number];
-export type ButtonVariationProps = {
-    variation?: ButtonVariation;
-};
-export declare const BaseButton: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-} & {
-    selected?: boolean;
-}, React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
-export declare function getButtonVariationStyle(variation?: ButtonVariation): import("@emotion/utils").SerializedStyles;

package/cjs/button/Button.d.ts

@@ -1,19 +0,0 @@
-import React from 'react';
-import { BaseButtonProps, ButtonVariationProps } from './BaseButton';
-type ButtonSize = 'medium' | 'small';
-type IconAlign = 'left' | 'right';
-export type ButtonProps = BaseButtonProps & ButtonVariationProps & {
-    className?: string;
-    replace?: boolean;
-    submitting?: boolean;
-    fillWidth?: boolean;
-    size?: ButtonSize;
-    icon?: React.ReactNode;
-    iconAlign?: IconAlign;
-    iconSpacing?: string;
-    iconColor?: string;
-    as?: React.ElementType;
-    children?: React.ReactNode;
-};
-declare const Button: ({ variation, children, submitting, size, icon, iconSpacing, iconAlign, iconColor, title, disabled, ...rest }: ButtonProps) => React.JSX.Element;
-export default Button;

package/cjs/button/IconButton.d.ts

@@ -1,75 +0,0 @@
-import React, { ElementType, ComponentPropsWithRef } from 'react';
-import { OverlayOptions } from '@dfds-ui/theme/states';
-import { PolymorphicComponentProps } from '../common/polymorphic';
-export type IconButtonSize = 'small' | 'medium' | 'large' | 's' | 'm' | 'l';
-export interface IconButtonProps extends PolymorphicComponentProps, ComponentPropsWithRef<'button'> {
-    /**
-     * Icon to be displayed on the button.
-     */
-    icon: ElementType;
-    /**
-     * Text of the aria-label as well as the fallback value used for tooltip.
-     */
-    ariaLabel: string;
-    /**
-     * Size of the button.
-     */
-    size?: IconButtonSize;
-    /**
-     * className to be assigned to the button.
-     */
-    className?: string;
-    /**
-     * Disable button.
-     */
-    disabled?: boolean;
-    /**
-     * Disable overlay states.
-     */
-    disableOverlay?: boolean;
-    /**
-     * Disable tooltip.
-     */
-    disableTooltip?: boolean;
-    /**
-     * Text of the tooltip, if none, aria-label will be used.
-     */
-    tooltip?: string;
-    /**
-     * Color of the button and the overlay state.
-     */
-    color?: string;
-    /**
-     * Override color to be used for the hover state.
-     */
-    hoverColor?: string;
-    /**
-     * Override color to be used for the active state.
-     */
-    activeColor?: string;
-    /**
-     * Override color to be used for the focus state.
-     */
-    focusColor?: string;
-    /**
-     * Override the overlay options to use.
-     */
-    overlayOptions?: OverlayOptions;
-}
-/**
- * Helper function returning the default icon size when rendering an IconButton in the specified size.
- * @param size : IconButtonSize;
- * @returns The default icon size
- */
-export declare const getDefaultIconButtonIconSize: (size: IconButtonSize) => "1.5rem" | "1.25rem" | "2rem";
-/**
- * Helper function returning the default dimensions of an IconButton in the specified size.
- * @param size : IconButtonSize;
- * @returns The default size
- */
-export declare const getDefaultIconButtonDimensions: (size: IconButtonSize) => {
-    height: string;
-    width: string;
-};
-declare const IconButton: ({ type, tooltip, title, size, icon: Icon, disableTooltip, disableOverlay, disabled, color, hoverColor, focusColor, activeColor, overlayOptions, as, ariaLabel, ...rest }: IconButtonProps) => React.JSX.Element;
-export default IconButton;

package/cjs/button/LinkButton.d.ts

@@ -1,8 +0,0 @@
-import * as React from 'react';
-import { ButtonProps } from './Button';
-export type LinkButtonProps = React.PropsWithoutRef<React.JSX.IntrinsicElements['a']> & ButtonProps & {
-    href?: string;
-    target?: string;
-};
-export declare const LinkButton: (props: LinkButtonProps) => React.JSX.Element;
-export default LinkButton;

package/cjs/button/button-style.d.ts

@@ -1,7 +0,0 @@
-export declare const baseButtonStyle: import("@emotion/utils").SerializedStyles;
-export declare const primaryButtonStyles: import("@emotion/utils").SerializedStyles;
-export declare const secondaryButtonStyles: import("@emotion/utils").SerializedStyles;
-export declare const outlinedButtonStyles: import("@emotion/utils").SerializedStyles;
-export declare const textButtonStyles: import("@emotion/utils").SerializedStyles;
-export declare const dangerButtonStyles: import("@emotion/utils").SerializedStyles;
-export declare const linkButtonStyles: import("@emotion/utils").SerializedStyles;

package/cjs/button/index.d.ts

@@ -1,7 +0,0 @@
-export { default as Button } from './Button';
-export * from './Button';
-export * from './LinkButton';
-export { default as IconButton } from './IconButton';
-export * from './IconButton';
-export * from './BadgeIcon';
-export { default as Anchor } from './LinkButton';

package/cjs/button-stack/ButtonStack.d.ts

@@ -1,12 +0,0 @@
-import React from 'react';
-type Orientation = 'horizontal' | 'vertical';
-type Alignment = 'left' | 'right' | 'center';
-type ButtonStackProps = {
-    children?: React.ReactNode;
-    align?: Alignment;
-    orientation?: Orientation;
-    className?: string;
-    reverse?: boolean;
-};
-declare const ButtonStack: React.FunctionComponent<ButtonStackProps>;
-export default ButtonStack;

package/cjs/button-stack/index.d.ts

@@ -1 +0,0 @@
-export { default as ButtonStack } from './ButtonStack';