fix(Accordion): enhance TypeScript type definitions

dnbexperience · May 31, 2023 · 035c0fb · 035c0fb
1 parent f97f6ea
commit 035c0fb
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 5 deletions.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/accordion/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/components/accordion/Examples.tsx
@@ -94,8 +94,8 @@ export const AccordionContainerExample = () => (
   >
     {() => {
       function AccordionWithContainer() {
-        const ref1 = React.useRef()
-        const ref2 = React.useRef()
+        const ref1 = React.useRef(null)
+        const ref2 = React.useRef(null)
         const [changeHeight] = React.useState(() => ({ ref1, ref2 }))
         return (
           <Accordion.Group

diff --git a/packages/dnb-eufemia/src/components/accordion/Accordion.d.ts b/packages/dnb-eufemia/src/components/accordion/Accordion.d.ts
@@ -70,6 +70,11 @@ export interface AccordionProps extends React.HTMLProps<HTMLElement> {
    */
   title?: React.ReactNode;
 
+  /**
+   * A description as a string or React element. It will be used as an additional text.
+   */
+  description?: React.ReactNode;
+
   /**
    * If set to `true` the accordion will be expanded as its initial state.
    */
@@ -221,14 +226,15 @@ export default class Accordion extends React.Component<
   static Content = AccordionContent;
   static Header = AccordionHeader;
   static Provider = AccordionProvider;
+  static Group: (props: GroupProps) => JSX.Element;
   render(): JSX.Element;
 }
 export type GroupRememberState = string | boolean;
 /**
  * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
  */
 
-export interface GroupProps {
+export type GroupProps = {
   /**
    * A unique `id` that will be used on the button element. If you use `remember_state`, an id is required.
    */
@@ -239,7 +245,9 @@ export interface GroupProps {
    * 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?: GroupRememberState;
-}
+
+  children: React.ReactNode;
+} & AccordionProps;
 
 declare class Group extends React.Component<GroupProps, any> {
   static defaultProps: object;

diff --git a/packages/dnb-eufemia/src/components/accordion/AccordionContent.d.ts b/packages/dnb-eufemia/src/components/accordion/AccordionContent.d.ts
@@ -22,7 +22,7 @@ export type AccordionContentChildren =
 
 export interface AccordionContentProps
   extends React.HTMLProps<HTMLElement> {
-  instance?: Record<string, unknown>;
+  instance?: React.LegacyRef;
   space?: AccordionContentSpace;
   top?: AccordionContentTop;
   right?: AccordionContentRight;

diff --git a/packages/dnb-eufemia/src/components/accordion/AccordionHeader.d.ts b/packages/dnb-eufemia/src/components/accordion/AccordionHeader.d.ts
@@ -179,5 +179,20 @@ export default class AccordionHeader extends React.Component<
   any
 > {
   static defaultProps: object;
+  static Container: ({
+    children
+  }: {
+    children: React.ReactNode;
+  }) => JSX.Element;
+  static Title: ({
+    children
+  }: {
+    children: React.ReactNode;
+  }) => JSX.Element;
+  static Description: ({
+    children
+  }: {
+    children: React.ReactNode;
+  }) => JSX.Element;
   render(): JSX.Element;
 }