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

package/cjs/card/Card.d.ts

@@ -1,19 +0,0 @@
-import React, { FunctionComponent, ReactNode } from 'react';
-import { SurfaceType } from '../surface';
-export declare const CardContext: React.Context<{}>;
-export type CardContextType = {
-    cardSize: 's' | 'm' | 'l' | 'xl';
-    cardVariant: 'outline' | 'fill' | 'surface';
-};
-export type CardProps = {
-    children?: React.ReactNode;
-    size: 's' | 'm' | 'l' | 'xl';
-    variant: 'outline' | 'fill' | 'surface';
-    surface?: SurfaceType;
-    reverse?: boolean;
-    media?: ReactNode;
-    ratio?: number[];
-    className?: string;
-};
-declare const Card: FunctionComponent<CardProps>;
-export default Card;

package/cjs/card/CardActions.d.ts

@@ -1,4 +0,0 @@
-import { FunctionComponent } from 'react';
-import { FlexBoxProps } from '../flexbox/FlexBox';
-declare const CardActions: FunctionComponent<FlexBoxProps>;
-export default CardActions;

package/cjs/card/CardContent.d.ts

@@ -1,14 +0,0 @@
-import React, { FunctionComponent } from 'react';
-export type CardContentProps = {
-    children?: React.ReactNode;
-    /**
-     * Text color
-     */
-    color?: string;
-    /**
-     * className to be assigned to the component
-     */
-    className?: string;
-};
-declare const CardContent: FunctionComponent<CardContentProps>;
-export default CardContent;

package/cjs/card/CardMedia.d.ts

@@ -1,19 +0,0 @@
-import React, { FunctionComponent, ReactNode } from 'react';
-export type CardMediaProps = {
-    children?: React.ReactNode;
-    /**
-     * Media component to be displayed
-     */
-    media: ReactNode;
-    /**
-     * Aspect ratio of media component
-     */
-    aspectRatio?: AspectRatio;
-    /**
-     * className to be assigned to the component
-     */
-    className?: string;
-};
-export type AspectRatio = '2:1' | '3:2';
-declare const CardMedia: FunctionComponent<CardMediaProps>;
-export default CardMedia;

package/cjs/card/CardPriceTag.d.ts

@@ -1,25 +0,0 @@
-import React from 'react';
-export type CardPriceTagProps = {
-    /**
-     * Price for the price tag
-     */
-    price: number;
-    /**
-     * Currency symbol to be displayed
-     */
-    currency?: string;
-    /**
-     * Text to be displayed over the price
-     */
-    topText?: string;
-    /**
-     * Text to be displayed under the price
-     */
-    bottomText?: string;
-    /**
-     * className to be assigned to the component
-     */
-    className?: string;
-};
-declare const CardPriceTag: ({ price, topText, bottomText, currency, ...rest }: CardPriceTagProps) => React.JSX.Element;
-export default CardPriceTag;

package/cjs/card/CardTitle.d.ts

@@ -1,19 +0,0 @@
-import React, { FunctionComponent } from 'react';
-export type CardTitleProps = {
-    children?: React.ReactNode;
-    /**
-     * Text color
-     */
-    color?: string;
-    /**
-     * If set to true the title will be displayed using the `sectionHeadline` instead of a `smallHeadline`.
-     * But only for large screens.
-     */
-    largeTitle?: boolean;
-    /**
-     * className to be assigned to the component
-     */
-    className?: string;
-};
-declare const CardTitle: FunctionComponent<CardTitleProps>;
-export default CardTitle;

package/cjs/card/index.d.ts

@@ -1,6 +0,0 @@
-export { default as Card } from './Card';
-export { default as CardMedia } from './CardMedia';
-export { default as CardTitle } from './CardTitle';
-export { default as CardContent } from './CardContent';
-export { default as CardActions } from './CardActions';
-export { default as CardPriceTag } from './CardPriceTag';

package/cjs/chip/Chip.d.ts

@@ -1,19 +0,0 @@
-import React, { ReactNode } from 'react';
-type InteractionEvent = React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>;
-export type ChipProps = {
-    children: ReactNode;
-    dismissable?: boolean;
-    disabled?: boolean;
-    selectable?: boolean;
-    selected?: boolean;
-    onToggle?: (event: InteractionEvent) => void;
-    onDismiss?: (event: InteractionEvent) => void;
-    tabIndex?: number;
-    className?: string;
-};
-export declare const ChipContainer: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-declare const _default: ({ children, dismissable, disabled, selectable, selected, onToggle, onDismiss, className, ...rest }: ChipProps) => React.JSX.Element;
-export default _default;

package/cjs/chip/index.d.ts

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

package/cjs/common/LockBodyScroll.d.ts

@@ -1,26 +0,0 @@
-import React from 'react';
-export type LockBodyScrollProps = {
-    /**
-     * If `true` scroll locking will be enabled
-     */
-    enabled?: boolean;
-    /**
-     * ClassName to be applied to the body element when scroll is locked
-     */
-    bodyClassNameApplied?: string;
-    /**
-     * ClassName to be applied to the html element when scroll is locked
-     */
-    htmlClassNameApplied?: string;
-    /**
-     * Preserve scroll position when locking.
-     */
-    preserveScrollPosition?: boolean;
-    children?: React.ReactNode;
-    ref?: React.Ref<LockBodyScrollResult>;
-};
-export type LockBodyScrollResult = {
-    getGap(): number;
-};
-export declare const LockBodyScroll: ({ enabled, children, ref, ...rest }: LockBodyScrollProps) => React.JSX.Element;
-export default LockBodyScroll;

package/cjs/common/arrow.d.ts

@@ -1,6 +0,0 @@
-export type ArrowPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
-/**
- * Create css for an arrow
- * A <div> tag must surround {children} to work
- */
-export default function arrow(size: number, color: string, offset?: number, position?: ArrowPosition): import("@emotion/utils").SerializedStyles;

package/cjs/common/emotionCloneElement.d.ts

@@ -1,2 +0,0 @@
-declare const emotionCloneElement: (element: any, config: any, ...children: any) => import("react").DetailedReactHTMLElement<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
-export default emotionCloneElement;

package/cjs/common/intent.d.ts

@@ -1,3 +0,0 @@
-export type Intent = 'info' | 'critical' | 'success' | 'warning' | 'none';
-export declare function getIntentColor(intent?: Intent, muted?: boolean): string;
-export declare function getIntentTextColor(intent: Intent): string;

package/cjs/common/miniMoize.d.ts

@@ -1 +0,0 @@
-export declare function miniMoize(fn: (...args: any[]) => any): (...args: any[]) => any;

package/cjs/common/polymorphic.d.ts

@@ -1,25 +0,0 @@
-import React, { ComponentType, ElementType } from 'react';
-export type RenderContainerProps<T> = {
-    renderContainer: (props: T) => React.JSX.Element;
-};
-export type PolymorphicComponentProps = {
-    /**
-     * HTML tag or custom component being rendered.
-     */
-    as?: ElementType;
-};
-/**
- * Given a PolymorphicComponent and a desired RenderComponent this function will returns are new component where the
- * polymorphic prop will point to the provided `RenderComponent`.
- *
- * @example
- * import { Link } from `gatsby`;
- * import { AppBarItem, withRenderAs } from `@dfds-ui/react-components`;
- *
- * const AppBarLink = withRenderAs(AppBarItem, Link);
- *
- * const Example = () => {
- *   return <AppBarLink id="1" title="example" to="/example">Example</AppBarLink>;
- * }
- */
-export declare function withRenderAs<PCProps extends PolymorphicComponentProps, RCProps>(PolymorphicComponent: ComponentType<PCProps>, RenderComponent: ComponentType<RCProps>): ({ ...props }: Omit<PCProps, keyof PolymorphicComponentProps> & RCProps) => React.JSX.Element;

package/cjs/common/use-media.d.ts

@@ -1 +0,0 @@
-export default function useMedia(queries: any, values: any, defaultValue: any): any;

package/cjs/common/useOnClickOutside.d.ts

@@ -1,3 +0,0 @@
-type Handler = (...args: any[]) => void;
-export default function useOnClickOutside(ref: React.RefObject<HTMLElement | null>, handler: Handler | null): void;
-export {};

package/cjs/common/utils.d.ts

@@ -1,3 +0,0 @@
-export declare function ie11MinHeightFix(minHeight?: string): import("@emotion/utils").SerializedStyles | undefined;
-export declare function onlyIE(strings: TemplateStringsArray, ...args: any): import("@emotion/utils").SerializedStyles;
-export declare function onlyChrome(strings: TemplateStringsArray, ...args: any): import("@emotion/utils").SerializedStyles;

package/cjs/counter/Counter.d.ts

@@ -1,27 +0,0 @@
-import React, { ReactNode } from 'react';
-export type CounterProps = {
-    label?: ReactNode | string;
-    /**
-     * Minimum value
-     */
-    minVal: number;
-    /**
-     * Maximum value
-     */
-    maxVal: number;
-    disableMin?: boolean;
-    disableMax?: boolean;
-    /**
-     *Name of the input element
-     */
-    name?: string;
-    currentVal?: number;
-    initialVal?: number;
-    /**
-     *Callback when the value changes
-     */
-    executeOnChange?: (arg: number) => any;
-    ref?: React.Ref<HTMLInputElement>;
-};
-export declare const Counter: (props: CounterProps) => React.JSX.Element;
-export default Counter;

package/cjs/counter/PluralCounter.d.ts

@@ -1,14 +0,0 @@
-import React from 'react';
-type PluralCounterProps = {
-    minVal: number;
-    maxVal: number;
-    currentVal?: number;
-    initialVal?: number;
-    singularLabel: string;
-    name?: string;
-    pluralLabel: string;
-    executeOnChange?: (arg: number) => any;
-    ref?: React.Ref<HTMLInputElement>;
-};
-declare const PluralCounter: ({ singularLabel, pluralLabel, executeOnChange, ...rest }: PluralCounterProps) => React.JSX.Element;
-export default PluralCounter;

package/cjs/counter/index.d.ts

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

package/cjs/data-table/DataTable.d.ts

@@ -1,11 +0,0 @@
-import React, { FunctionComponent } from 'react';
-export type DataTableProps = {
-    children?: React.ReactNode;
-    onChange?: (model: object[]) => object[];
-    columns?: string[];
-    data: object[];
-    className?: string;
-    hasHeader?: boolean;
-};
-export declare const DataTable: FunctionComponent<DataTableProps>;
-export default DataTable;

package/cjs/data-table/index.d.ts

@@ -1 +0,0 @@
-export * from './DataTable';

package/cjs/divider/Divider.d.ts

@@ -1,26 +0,0 @@
-import React from 'react';
-export type DividerProps = {
-    /**
-     * Display the Divider in "light" mode.
-     */
-    light?: boolean;
-    /**
-     * Display the Divider in "indent" style
-     */
-    indent?: boolean;
-    /**
-     *  Display the Divider in "margin" style
-     */
-    margins?: boolean;
-    /**
-     * HTML tag or custom component being rendered
-     */
-    as?: React.ElementType;
-    /**
-     * Class name to be assigned to the component
-     */
-    className?: string;
-};
-export declare const dividerBorder: (light?: boolean, placement?: "top" | "bottom") => import("@emotion/utils").SerializedStyles;
-export declare const Divider: ({ light, indent, margins, ...rest }: DividerProps) => React.JSX.Element;
-export default Divider;

package/cjs/divider/index.d.ts

@@ -1 +0,0 @@
-export * from './Divider';

package/cjs/drawer/Drawer.d.ts

@@ -1,32 +0,0 @@
-import React from 'react';
-import { theme } from '@dfds-ui/theme';
-type HorizontalPosition = 'left' | 'right';
-type VerticalPosition = 'top' | 'bottom';
-type Elevation = keyof typeof theme.elevation;
-export type DrawerProps = {
-    /**
-     * Horizontal position of the drawer
-     */
-    position?: HorizontalPosition;
-    /**
-     * Show arrow to visually indicate the relation to a connected component
-     */
-    showArrow?: boolean;
-    /**
-     *  Set the `elevation` for the Drawer.
-     */
-    elevation?: Elevation;
-    /**
-     * Vertical position of the drawer in relation to a connected component.
-     * Will only be used for placing the arrow on either the `top` or `bottom`
-     */
-    verticalPosition?: VerticalPosition;
-    /**
-     * Class name to be assigned to the component
-     */
-    className?: string;
-    children?: React.ReactNode;
-    ref?: React.Ref<HTMLDivElement>;
-};
-export declare const Drawer: ({ className, children, position, verticalPosition, showArrow, elevation, ...rest }: DrawerProps) => React.JSX.Element;
-export default Drawer;

package/cjs/drawer/index.d.ts

@@ -1 +0,0 @@
-export * from './Drawer';

package/cjs/dropdown-menu/Dropdown.d.ts

@@ -1,46 +0,0 @@
-import React, { ReactElement } from 'react';
-import { PopperProps, PopperPlacementType } from '@mui/material';
-export type DropdownSize = 'medium' | 'small';
-export type DropdownProps = {
-    /**
-     * Placement for the `Dropdown`.
-     */
-    placement?: PopperPlacementType;
-    /**
-     * HTML element that the `Dropdown` will be anchor to.
-     */
-    anchorEl?: PopperProps['anchorEl'];
-    /**
-     * If set to `true`, the `Dropdown` is shown.
-     */
-    isOpen: boolean;
-    /**
-     * Set the state of the `Dropdown`.
-     */
-    setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
-    /**
-     * Specify the size of the `Dropdown`.
-     */
-    size?: DropdownSize;
-    /**
-     * Close the `Dropdown` on `esc` key.
-     */
-    shouldCloseOnEsc?: boolean;
-    /**
-     * className to be assigned to component.
-     */
-    className?: string;
-    /**
-     * Select multiple children from the `Dropdown`.
-     */
-    multiselect?: boolean;
-    /**
-     * Add an `id` to the `Dropdown`.
-     */
-    id?: string;
-    onClickAway?: () => void;
-    children: ReactElement<any>[];
-    filter?: boolean;
-};
-declare const DropdownMenu: ({ isOpen, multiselect, children, anchorEl, onClickAway, size, id, className, placement, setIsOpen, shouldCloseOnEsc, filter, ...rest }: DropdownProps) => React.JSX.Element;
-export default DropdownMenu;

package/cjs/dropdown-menu/DropdownContext.d.ts

@@ -1,13 +0,0 @@
-import React from 'react';
-type DropdownSize = 'medium' | 'small';
-type DropdownContextProps = {
-    size?: DropdownSize;
-    multiselect?: boolean;
-};
-export declare const DropdownContext: React.Context<DropdownContextProps>;
-export declare const DropdownContextProvider: ({ children, value, }: {
-    value: DropdownContextProps;
-    children?: React.ReactNode;
-}) => React.JSX.Element;
-declare const useDropdownContext: () => DropdownContextProps;
-export default useDropdownContext;

package/cjs/dropdown-menu/MenuCheckbox.d.ts

@@ -1,34 +0,0 @@
-import React from 'react';
-export interface MenuCheckboxProps {
-    /**
-     * HTML tag or custom component being rendered.
-     */
-    as?: React.ElementType;
-    /**
-     * Override the default color for the text.
-     */
-    color?: string;
-    /**
-     * Indicates that the `MenuCheckbox` is disabled.
-     */
-    disabled?: boolean;
-    /**
-     * Invoke the provided callback when the `MenuCheckbox` is clicked.
-     */
-    onClick?: () => void;
-    /**
-     * Indicates that the `MenuCheckbox` is selected.
-     */
-    selected?: boolean;
-    /**
-     * Add interactive styles to the `MenuCheckbox`.
-     */
-    clickable?: boolean;
-    /**
-     * className to be assigned to component.
-     */
-    className?: string;
-    children?: React.ReactNode;
-}
-declare const MenuCheckbox: ({ color, children, disabled, as, onClick, selected, clickable, className, }: MenuCheckboxProps) => React.JSX.Element;
-export default MenuCheckbox;

package/cjs/dropdown-menu/MenuItem.d.ts

@@ -1,45 +0,0 @@
-import React from 'react';
-import { DropdownSize } from './Dropdown';
-export interface MenuItemProps {
-    /**
-     * HTML tag or custom component being rendered.
-     */
-    as?: React.ElementType;
-    /**
-     * Invoke the provided callback when the `MenuItem` is clicked.
-     */
-    onClick?: (event?: any) => void;
-    /**
-     * Indicates that the `MenuItem` is selected.
-     */
-    selected?: boolean;
-    /**
-     * Indicates that the `MenuItem` is disabled.
-     */
-    disabled?: boolean;
-    /**
-     * Add interactive styles to the `MenuItem`.
-     */
-    clickable?: boolean;
-    /**
-     * Override the default color for the text.
-     */
-    color?: string;
-    /**
-     * Choose an icon that will be left aligned.
-     */
-    iconLeft?: React.ElementType;
-    /**
-     * Choose an icon that will be right aligned.
-     */
-    iconRight?: React.ElementType;
-    /**
-     * className to be assigned to component.
-     */
-    className?: string;
-    children?: React.ReactNode;
-}
-export declare const getListItemStyle: (size?: DropdownSize, disabled?: boolean) => import("@emotion/utils").SerializedStyles;
-export declare const getListTextStyle: (size?: DropdownSize) => import("@emotion/utils").SerializedStyles;
-declare const MenuItem: ({ as, clickable, className, onClick, selected, disabled, children, color, iconLeft, iconRight, ...rest }: MenuItemProps) => React.JSX.Element;
-export default MenuItem;

package/cjs/dropdown-menu/MenuTitle.d.ts

@@ -1,14 +0,0 @@
-import React from 'react';
-export interface MenuTitleProps {
-    /**
-     * Change the color of the text.
-     */
-    color?: string;
-    /**
-     * className to be assigned to component.
-     */
-    className?: string;
-    children?: React.ReactNode;
-}
-declare const MenuTitle: ({ color, children, className }: MenuTitleProps) => React.JSX.Element;
-export default MenuTitle;

package/cjs/dropdown-menu/index.d.ts

@@ -1,5 +0,0 @@
-export { default as Dropdown } from './Dropdown';
-export * from './Dropdown';
-export { default as MenuItem } from './MenuItem';
-export { default as MenuTitle } from './MenuTitle';
-export { default as MenuCheckbox } from './MenuCheckbox';

package/cjs/elevation/index.d.ts

@@ -1,3 +0,0 @@
-type Level = 3 | 8 | 16;
-declare const elevation: (level: Level) => import("@emotion/utils").SerializedStyles;
-export default elevation;

package/cjs/flexbox/FlexBox.d.ts

@@ -1,100 +0,0 @@
-type RenderAs = {
-    /**
-     * HTML tag or custom component being rendered
-     */
-    as?: React.ElementType;
-};
-export type FlexBoxProps = {
-    children?: React.ReactNode;
-    /**
-     * Set this prop to `true` to set `display` to `inline-flex` instead of `flex`
-     */
-    inline?: boolean;
-    /**
-     * Set this prop to `true` to set `flex-direction` to `row-reverse`
-     */
-    directionRowReverse?: boolean;
-    /**
-     * Set this prop to `true` to set `flex-direction` to `row`
-     */
-    directionRow?: boolean;
-    /**
-     * Set this prop to `true` to set `flex-direction` to `column`
-     */
-    directionColumn?: boolean;
-    /**
-     * Set this prop to `true` to set `flex-direction` to `column-reverse`
-     */
-    directionColumnReverse?: boolean;
-    /**
-     * Set this prop to `true` to set `flex-wrap` to `wrap`
-     */
-    wrapWrap?: boolean;
-    /**
-     * Set this prop to `true` to set `flex-wrap` to `wrap-reverse`
-     */
-    wrapWrapReverse?: boolean;
-    /**
-     * Set this prop to `true` to set `align-items` to `flex-start`
-     */
-    itemsFlexStart?: boolean;
-    /**
-     * Set this prop to `true` to set `align-items` to `flex-end`
-     */
-    itemsFlexEnd?: boolean;
-    /**
-     * Set this prop to `true` to set `align-items` to `flex-center`
-     */
-    itemsCenter?: boolean;
-    /**
-     * Set this prop to `true` to set `align-items` to `flex-baseline`
-     */
-    itemsBaseline?: boolean;
-    /**
-     * Set this prop to `true` to set `align-content` to `flex-start`
-     */
-    contentFlexStart?: boolean;
-    /**
-     * Set this prop to `true` to set `align-content` to `flex-end`
-     */
-    contentFlexEnd?: boolean;
-    /**
-     * Set this prop to `true` to set `align-content` to `center`
-     */
-    contentCenter?: boolean;
-    /**
-     * Set this prop to `true` to set `align-content` to `space-between`
-     */
-    contentSpaceBetween?: boolean;
-    /**
-     * Set this prop to `true` to set `align-content` to `space-around`
-     */
-    contentSpaceAround?: boolean;
-    /**
-     * Set this prop to `true` to set `justify-content` to `space-between`
-     */
-    justifySpaceBetween?: boolean;
-    /**
-     * Set this prop to `true` to set `justify-content` to `space-around`
-     */
-    justifySpaceAround?: boolean;
-    /**
-     * Set this prop to `true` to set `justify-content` to `flex-end`
-     */
-    justifyFlexEnd?: boolean;
-    /**
-     * Set this prop to `true` to set `justify-content` to `center`
-     */
-    justifyCenter?: boolean;
-    /**
-     * Set the `flex` shorthand property
-     */
-    flex?: number;
-    gap?: string;
-};
-export declare const FlexBox: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-} & FlexBoxProps & RenderAs, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare function flexBoxStyles(props?: FlexBoxProps): import("@emotion/utils").SerializedStyles;
-export default FlexBox;

package/cjs/flexbox/index.d.ts

@@ -1 +0,0 @@
-export * from './FlexBox';

package/cjs/footer/Footer.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-declare const Footer: ({ className, children, bottomChildren, }: {
-    className?: string;
-    bottomChildren?: React.ReactNode;
-    children?: React.ReactNode;
-}) => React.JSX.Element;
-export default Footer;

package/cjs/footer/index.d.ts

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

package/cjs/forms/assistive-text/AssistiveText.d.ts

@@ -1,7 +0,0 @@
-declare const AssistiveText: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-} & {
-    inverted?: boolean;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export default AssistiveText;

package/cjs/forms/asterisk/Asterisk.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-declare const Asterisk: () => React.JSX.Element;
-export default Asterisk;