fix(DrawerList): enhance TypeScript definition types

dnbexperience · Feb 27, 2023 · 381183f · 381183f
1 parent 9e6d724
commit 381183f
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 5 deletions.
diff --git a/...ges/dnb-design-system-portal/src/docs/uilib/components/fragments/drawer-list/Examples.tsx b/...ges/dnb-design-system-portal/src/docs/uilib/components/fragments/drawer-list/Examples.tsx
@@ -8,6 +8,7 @@ import ComponentBox from 'dnb-design-system-portal/src/shared/tags/ComponentBox'
 import styled from '@emotion/styled'
 import { NumberFormat, ToggleButton, HelpButton } from '@dnb/eufemia/src'
 import { DrawerList } from '@dnb/eufemia/src/fragments'
+import { Link } from '@dnb/eufemia/src/elements'
 
 export const DrawerListExampleInteractive = () => (
   <Wrapper>
@@ -148,13 +149,15 @@ export const DrawerListExampleSingleItem = () => (
             skip_portal
             opened
             prevent_close
-            more_menu
+            // more_menu
             right
             title="Choose an item"
             data={() => [
-              <Link href="/">Go to this Link</Link>,
+              <Link key="link" href="/">
+                Go to this Link
+              </Link>,
               'Or press on me',
-              <CustomComponent />,
+              <CustomComponent key="custom" />,
             ]}
             on_change={({ value }) => {
               console.log('More menu:', value)
@@ -179,7 +182,7 @@ export const DrawerListExampleMarkup = () => (
             width: var(--drawer-list-width);
           }
         `
-        const DrawerListWithState = (props) => {
+        const DrawerListWithState = () => {
           const [selected, setSelected] = React.useState('C')
 
           return (
@@ -188,7 +191,6 @@ export const DrawerListExampleMarkup = () => (
                 {list.map(({ value, ...props }, i) => (
                   <DrawerList.Item
                     key={i}
-                    {...props}
                     selected={value === selected}
                     value={value}
                     on_click={({ value }) => setSelected(value)}

diff --git a/packages/dnb-eufemia/src/fragments/drawer-list/DrawerList.d.ts b/packages/dnb-eufemia/src/fragments/drawer-list/DrawerList.d.ts
@@ -69,6 +69,7 @@ export type DrawerListChildren =
   | React.ReactNode
   | Record<string, unknown>
   | any[];
+export type DrawerListSuffix = React.ReactNode;
 /**
  * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
  */
@@ -118,6 +119,7 @@ export interface DrawerListProps extends React.HTMLProps<HTMLElement> {
   left?: DrawerListLeft;
   className?: string;
   children?: DrawerListChildren;
+  suffix?: DrawerListSuffix;
   on_show?: (...args: any[]) => any;
   on_hide?: (...args: any[]) => any;
   handle_dismiss_focus?: (...args: any[]) => any;
@@ -127,11 +129,25 @@ export interface DrawerListProps extends React.HTMLProps<HTMLElement> {
   on_select?: (...args: any[]) => any;
   on_state_update?: (...args: any[]) => any;
 }
+
+export type DrawerListOptionsProps = {
+  children: React.ReactNode;
+};
+
+export type DrawerListItemProps = {
+  children: React.ReactNode;
+  selected: boolean;
+  value: string;
+  on_click: ({ value }: { value: string }) => void;
+};
+
 export default class DrawerList extends React.Component<
   DrawerListProps,
   any
 > {
   static defaultProps: object;
+  static Options: (props: DrawerListOptionsProps) => JSX.Element;
+  static Item: (props: DrawerListItemProps) => JSX.Element;
   render(): JSX.Element;
 }
 export type ItemContentChildren =