@dnb/eufemia 10.5.0 → 10.6.0

package/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to @dnb/eufemia will be documented in this file. See
 [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [10.6.0](https://github.com/dnbexperience/eufemia/compare/v10.5.0...v10.6.0) (2023-08-17)
+
+
+### :memo: Documentation
+
+* add "Messageboxes" to FormStatus for the equivalent Figma name ([#2560](https://github.com/dnbexperience/eufemia/issues/2560)) ([bf6a19f](https://github.com/dnbexperience/eufemia/commit/bf6a19f2a0c33019b50907d1d56e76868ad5e670))
+* add docs on how to link to a specific theme ([#2555](https://github.com/dnbexperience/eufemia/issues/2555)) ([54b9f1b](https://github.com/dnbexperience/eufemia/commit/54b9f1b5fe9c715d133849282bdcfd6c497d6f9e)), closes [#2374](https://github.com/dnbexperience/eufemia/issues/2374)
+* add theming link to the contribution guide ([#2558](https://github.com/dnbexperience/eufemia/issues/2558)) ([e88bd72](https://github.com/dnbexperience/eufemia/commit/e88bd72f46231fc1c7b5dc52ff6d4aa9bee05b31))
+
+
+### :sparkles: Features
+
+* **Anchor:** inline style sbanken ([#2550](https://github.com/dnbexperience/eufemia/issues/2550)) ([3511f09](https://github.com/dnbexperience/eufemia/commit/3511f093ea803d5e93ccb066ca79f9827a4b7354))
+* **Button:** sbanken hover and error ([#2523](https://github.com/dnbexperience/eufemia/issues/2523)) ([3ea2850](https://github.com/dnbexperience/eufemia/commit/3ea28508d6e6010e5b8b3aa98f8b1a9bb17e81c0))
+* **Forms:** Extension (beta) for simplified implementation of web forms through tailored functionality for layout and data handling ([#2420](https://github.com/dnbexperience/eufemia/issues/2420)) ([74700c0](https://github.com/dnbexperience/eufemia/commit/74700c00486e35ea97661f4a7013bd4f02ee504c))
+* **Input:** sbanken styling ([#2540](https://github.com/dnbexperience/eufemia/issues/2540)) ([db36f09](https://github.com/dnbexperience/eufemia/commit/db36f09b31bb559cd3b39290ac15fca8334e9353))
+* **Textarea:** sbanken theme ([#2551](https://github.com/dnbexperience/eufemia/issues/2551)) ([d8cfb1c](https://github.com/dnbexperience/eufemia/commit/d8cfb1cf48c86b845dc63d5bbd80f3bc5de61137))
+
+
+### :bug: Bug Fixes
+
+* **Forms:** fix circular imports issue ([#2566](https://github.com/dnbexperience/eufemia/issues/2566)) ([3ac4276](https://github.com/dnbexperience/eufemia/commit/3ac427679afff41ce3be183b501aa587477494a0))
+* **NumberFormat:** accept options like maximumFractionDigits ([#2557](https://github.com/dnbexperience/eufemia/issues/2557)) ([2e09e80](https://github.com/dnbexperience/eufemia/commit/2e09e8004806ff207ac6b844b787614d32ebf9fe))
+
 ## [10.5.0](https://github.com/dnbexperience/eufemia/compare/v10.4.2...v10.5.0) (2023-08-10)
 
 

package/cjs/components/accordion/Accordion.d.ts

@@ -1,148 +1,252 @@
-import * as React from 'react';
+/**
+ * Web Accordion Component
+ *
+ */
+import React from 'react';
 import type { ButtonIconPosition } from '../Button';
 import type { HeadingLevel } from '../Heading';
 import type { IconIcon, IconSize } from '../Icon';
 import type { SkeletonShow } from '../Skeleton';
 import type { SpacingProps } from '../space/types';
 import AccordionContent from './AccordionContent';
-import AccordionHeader from './AccordionHeader';
-import AccordionGroup from './AccordionGroup';
 import { Store } from './AccordionStore';
 export type AccordionVariant = 'plain' | 'default' | 'outlined' | 'filled';
 export type AccordionHeading = boolean | React.ReactNode;
-export type AccordionIcon =
-  | IconIcon
-  | {
-      closed?: React.ReactNode | ((...args: any[]) => any);
-      /**
-       * If set to `true` the accordion will be expanded as its initial state.
-       */
-      expanded?: React.ReactNode | ((...args: any[]) => any);
-    };
+export type AccordionIcon = IconIcon | {
+    closed?: React.ReactNode | ((...args: any[]) => any);
+    /**
+     * If set to `true` the accordion will be expanded as its initial state.
+     */
+    expanded?: React.ReactNode | ((...args: any[]) => any);
+};
 export type AccordionAttributes = string | Record<string, unknown>;
 export type AccordionIconPosition = ButtonIconPosition;
-export interface AccordionProps
-  extends Omit<React.HTMLProps<HTMLElement>, 'ref'>,
-    SpacingProps {
-  /**
-   * A title as a string or React element. It will be used as the button text.
-   */
-  title?: React.ReactNode;
-  description?: React.ReactNode;
-  /**
-   * If set to `true` the accordion will be expanded as its initial state.
-   */
-  expanded?: boolean;
-  /**
-   * If set to `true`, the open and close animation will be omitted.
-   */
-  no_animation?: boolean;
-  /**
-   * If set to `true` the accordion will be expanded during SSR. Can be potentially useful for SEO, although it will disturb client hydration, where React expects the same state. But that&#39;s mainly a technical aspect to consider.
-   */
-  expanded_ssr?: boolean;
-  /**
-   * If set to `true` the content will be present, even the accordion is not expanded. Can be useful for assistive technology or SEO.
-   */
-  prerender?: boolean;
-  /**
-   * If set to `true` the accordion component will not re-render its content – can be useful for widgets you don&#39;t have control of storing the temporary state during an interaction.
-   */
-  prevent_rerender?: boolean;
-  /**
-   * Use this prop together with `prevent_rerender` – and if it is to `true`, the accordion component will re-render if the children are a new React element and does not match the previous one anymore.
-   */
-  prevent_rerender_conditional?: boolean;
-  /**
-   * If set to `true`, it will remember a changed state initiated by the user. It requires a unique `id`. It will store the sate in the local storage.
-   */
-  remember_state?: boolean;
-  /**
-   * Send along a custom React Ref for `.dnb-accordion__content`.
-   */
-  contentRef?: Record<string, unknown>;
-  /**
-   * If set to `true`, the saved (remembered) will be removed and the initial component state will be used and set.
-   */
-  flush_remembered_state?: boolean;
-  /**
-   * If set to `true`, a group of accordions will be wrapped to sidebar looking menu for medium and larger screens.
-   */
-  single_container?: boolean;
-  /**
-   * Defines the used styling. As of now, only `outlined` is available. Use `plain` for no styles. It defaults to `outlined`.
-   */
-  variant?: AccordionVariant;
-  /**
-   * Will add a React element on the left side of the `title`, inside `AccordionHeaderContainer`.
-   */
-  left_component?: React.ReactNode;
-  /**
-   * If set to `true`, the accordion button will be disabled (dimmed).
-   */
-  disabled?: boolean;
-  /**
-   * If set to `true`, an overlaying skeleton with animation will be shown.
-   */
-  skeleton?: SkeletonShow;
-  /**
-   * A unique `id` that will be used on the button element. If you use `remember_state`, an id is required.
-   */
-  id?: string;
-  group?: string;
-  /**
-   * Gives you the option to replace the used `button` element. Provide a React element, including a string (HTML element). Defaults to a `div` with all the needed accessibility features included.
-   */
-  element?: React.ReactNode;
-  /**
-   * If set to `true`, level 2 (h2) will be used. You can provide your own HTML heading (`h3`), or provide a `heading_level` property.
-   */
-  heading?: AccordionHeading;
-  /**
-   * If `heading` is set to `true`, you can provide a numeric value to define a different heading level. Defaults to `2`.
-   */
-  heading_level?: HeadingLevel;
-  /**
-   * Will replace the `chevron` icon. The icon will still rotate (by CSS). You can use an object to use two different icons, one for the closed state and one for the expanded state `{ closed, expanded }`.
-   */
-  icon?: AccordionIcon;
-  /**
-   * Will set the placement of the icon. Defaults to `left`.
-   */
-  icon_position?: AccordionIconPosition;
-  /**
-   * Define a different icon size. Defaults to `medium` (1.5rem).
-   */
-  icon_size?: IconSize;
-  attributes?: AccordionAttributes;
-  class?: string;
-  className?: string;
-  children?: React.ReactNode;
-  /**
-   * Will be called by user click interaction. Returns an object with a boolean state `expanded` inside `{ expanded, id, event, ...event }`.
-   */
-  on_change?: (...args: any[]) => any;
-  on_state_update?: (...args: any[]) => any;
-}
-const StoreInstance = (group: string, id?: string) => new Store(group, id);
-export default class Accordion extends React.Component<
-  AccordionProps,
-  any
-> {
-  static defaultProps: object;
-  static Content = AccordionContent;
-  static Header = AccordionHeader;
-  static Provider = AccordionGroup;
-  static Group = Group;
-  static Store = StoreInstance;
-  render(): JSX.Element;
-}
-export type GroupProps = {
-  allow_close_all?: boolean;
-  expanded_id?: string;
-} & AccordionProps;
-declare class Group extends React.Component<GroupProps, any> {
-  static defaultProps: object;
-  static Store: StoreInstance;
-  render(): JSX.Element;
+export type AccordionProps = Omit<React.HTMLProps<HTMLElement>, 'ref'> & SpacingProps & {
+    /**
+     * A title as a string or React element. It will be used as the button text.
+     */
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    /**
+     * If set to `true` the accordion will be expanded as its initial state.
+     */
+    expanded?: boolean;
+    /**
+     * If set to `true`, the open and close animation will be omitted.
+     */
+    no_animation?: boolean;
+    /**
+     * If set to `true` the accordion will be expanded during SSR. Can be potentially useful for SEO, although it will disturb client hydration, where React expects the same state. But that&#39;s mainly a technical aspect to consider.
+     */
+    expanded_ssr?: boolean;
+    /**
+     */
+    prerender?: boolean;
+    /**
+     * If set to `true` the accordion component will not re-render its content – can be useful for widgets you don&#39;t have control of storing the temporary state during an interaction.
+     */
+    prevent_rerender?: boolean;
+    /**
+     * Use this prop together with `prevent_rerender` – and if it is to `true`, the accordion component will re-render if the children are a new React element and does not match the previous one anymore.
+     */
+    prevent_rerender_conditional?: boolean;
+    /**
+     * If set to `true`, it will remember a changed state initiated by the user. It requires a unique `id`. It will store the sate in the local storage.
+     */
+    remember_state?: boolean;
+    /**
+     * Send along a custom React Ref for `.dnb-accordion__content`.
+     */
+    contentRef?: React.MutableRefObject<unknown>;
+    /**
+     * If set to `true`, the saved (remembered) will be removed and the initial component state will be used and set.
+     */
+    flush_remembered_state?: boolean;
+    /**
+     * If set to `true`, a group of accordions will be wrapped to sidebar looking menu for medium and larger screens.
+     */
+    single_container?: boolean;
+    /**
+     * Defines the used styling. As of now, only `outlined` is available. Use `plain` for no styles. It defaults to `outlined`.
+     */
+    variant?: AccordionVariant;
+    /**
+     * Will add a React element on the left side of the `title`, inside `AccordionHeaderContainer`.
+     */
+    left_component?: React.ReactNode;
+    /**
+     * If set to `true`, the accordion button will be disabled (dimmed).
+     */
+    disabled?: boolean;
+    /**
+     * If set to `true`, an overlaying skeleton with animation will be shown.
+     */
+    skeleton?: SkeletonShow;
+    /**
+     * A unique `id` that will be used on the button element. If you use `remember_state`, an id is required.
+     */
+    id?: string;
+    group?: string;
+    /**
+     * Gives you the option to replace the used `button` element. Provide a React element, including a string (HTML element). Defaults to a `div` with all the needed accessibility features included.
+     */
+    element?: React.ReactNode;
+    /**
+     * If set to `true`, level 2 (h2) will be used. You can provide your own HTML heading (`h3`), or provide a `heading_level` property.
+     */
+    heading?: AccordionHeading;
+    /**
+     * If `heading` is set to `true`, you can provide a numeric value to define a different heading level. Defaults to `2`.
+     */
+    heading_level?: HeadingLevel;
+    /**
+     * Will replace the `chevron` icon. The icon will still rotate (by CSS). You can use an object to use two different icons, one for the closed state and one for the expanded state `{ closed, expanded }`.
+     */
+    icon?: AccordionIcon;
+    /**
+     * Will set the placement of the icon. Defaults to `left`.
+     */
+    icon_position?: AccordionIconPosition;
+    /**
+     * Define a different icon size. Defaults to `medium` (1.5rem).
+     */
+    icon_size?: IconSize;
+    attributes?: AccordionAttributes;
+    class?: string;
+    className?: string;
+    children?: React.ReactNode;
+    /**
+     * Will be called by user click interaction. Returns an object with a boolean state `expanded` inside `{ expanded, id, event, ...event }`.
+     */
+    on_change?: (...args: any[]) => any;
+    on_state_update?: (...args: any[]) => any;
+};
+declare function Accordion({ variant, icon_size, ...restOfProps }: AccordionProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Accordion {
+    var defaultProps: Omit<React.HTMLProps<HTMLElement>, "ref"> & import("../space/types").SpacingElementProps & {
+        space?: import("../space/types").SpaceType | import("../space/types").SpacingElementProps; /**
+         * If set to `true` the accordion will be expanded as its initial state.
+         */
+    } & {
+        /**
+         * A title as a string or React element. It will be used as the button text.
+         */
+        title?: React.ReactNode;
+        description?: React.ReactNode;
+        /**
+         * If set to `true` the accordion will be expanded as its initial state.
+         */
+        expanded?: boolean;
+        /**
+         * If set to `true`, the open and close animation will be omitted.
+         */
+        no_animation?: boolean;
+        /**
+         * If set to `true` the accordion will be expanded during SSR. Can be potentially useful for SEO, although it will disturb client hydration, where React expects the same state. But that&#39;s mainly a technical aspect to consider.
+         */
+        expanded_ssr?: boolean;
+        /**
+         */
+        prerender?: boolean;
+        /**
+         * If set to `true` the accordion component will not re-render its content – can be useful for widgets you don&#39;t have control of storing the temporary state during an interaction.
+         */
+        prevent_rerender?: boolean;
+        /**
+         * Use this prop together with `prevent_rerender` – and if it is to `true`, the accordion component will re-render if the children are a new React element and does not match the previous one anymore.
+         */
+        prevent_rerender_conditional?: boolean;
+        /**
+         * If set to `true`, it will remember a changed state initiated by the user. It requires a unique `id`. It will store the sate in the local storage.
+         */
+        remember_state?: boolean;
+        /**
+         * Send along a custom React Ref for `.dnb-accordion__content`.
+         */
+        contentRef?: React.MutableRefObject<unknown>;
+        /**
+         * If set to `true`, the saved (remembered) will be removed and the initial component state will be used and set.
+         */
+        flush_remembered_state?: boolean;
+        /**
+         * If set to `true`, a group of accordions will be wrapped to sidebar looking menu for medium and larger screens.
+         */
+        single_container?: boolean;
+        /**
+         * Defines the used styling. As of now, only `outlined` is available. Use `plain` for no styles. It defaults to `outlined`.
+         */
+        variant?: AccordionVariant;
+        /**
+         * Will add a React element on the left side of the `title`, inside `AccordionHeaderContainer`.
+         */
+        left_component?: React.ReactNode;
+        /**
+         * If set to `true`, the accordion button will be disabled (dimmed).
+         */
+        disabled?: boolean;
+        /**
+         * If set to `true`, an overlaying skeleton with animation will be shown.
+         */
+        skeleton?: boolean;
+        /**
+         * A unique `id` that will be used on the button element. If you use `remember_state`, an id is required.
+         */
+        id?: string;
+        group?: string;
+        /**
+         * Gives you the option to replace the used `button` element. Provide a React element, including a string (HTML element). Defaults to a `div` with all the needed accessibility features included.
+         */
+        element?: React.ReactNode;
+        /**
+         * If set to `true`, level 2 (h2) will be used. You can provide your own HTML heading (`h3`), or provide a `heading_level` property.
+         */
+        heading?: AccordionHeading;
+        /**
+         * If `heading` is set to `true`, you can provide a numeric value to define a different heading level. Defaults to `2`.
+         */
+        heading_level?: HeadingLevel;
+        /**
+         * Will replace the `chevron` icon. The icon will still rotate (by CSS). You can use an object to use two different icons, one for the closed state and one for the expanded state `{ closed, expanded }`.
+         */
+        icon?: AccordionIcon;
+        /**
+         * Will set the placement of the icon. Defaults to `left`.
+         */
+        icon_position?: ButtonIconPosition;
+        /**
+         * Define a different icon size. Defaults to `medium` (1.5rem).
+         */
+        icon_size?: IconSize;
+        attributes?: AccordionAttributes;
+        class?: string;
+        className?: string;
+        children?: React.ReactNode;
+        /**
+         * Will be called by user click interaction. Returns an object with a boolean state `expanded` inside `{ expanded, id, event, ...event }`.
+         */
+        on_change?: (...args: any[]) => any;
+        on_state_update?: (...args: any[]) => any;
+    } & {
+        allow_close_all?: boolean;
+        expanded_id?: string;
+    };
+    var Provider: (props: import("./AccordionGroup").AccordionGroupProps) => import("react/jsx-runtime").JSX.Element;
+    var Header: {
+        ({ icon_size: icon_size_default, ...restOfProps }: import("./AccordionHeader").AccordionHeaderProps): import("react/jsx-runtime").JSX.Element;
+        Container: ({ children, ...rest }: import("./AccordionHeader").AccordionHeaderContainerProps) => import("react/jsx-runtime").JSX.Element;
+        Icon: ({ icon, expanded, size, }: import("./AccordionHeader").AccordionHeaderIconProps) => import("react/jsx-runtime").JSX.Element;
+        Title: ({ children, ...rest }: import("./AccordionHeader").AccordionHeaderTitleProps) => import("react/jsx-runtime").JSX.Element;
+        Description: ({ children, ...rest }: import("./AccordionHeader").AccordionHeaderDescriptionProps) => import("react/jsx-runtime").JSX.Element;
+    };
+    var Content: typeof AccordionContent;
+    var Group: {
+        (props: GroupProps): import("react/jsx-runtime").JSX.Element;
+        Store(group: string, id?: string): Store;
+    };
+    var Store: (id: string) => Store;
 }
+export type GroupProps = AccordionProps & {
+    allow_close_all?: boolean;
+    expanded_id?: string;
+};
+export default Accordion;