@dnb/eufemia 10.73.2 → 10.74.0

package/es/extensions/forms/hooks/useSnapshot.js

@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useRef } from 'react';
+import { useCallback, useMemo, useRef } from 'react';
 import { makeUniqueId } from '../../../shared/component-helper';
 import pointer from '../utils/json-pointer';
 import useDataContext from './useDataContext';
@@ -17,29 +17,30 @@ export default function useSnapshot(id) {
     set: setData,
     update: updateData
   } = useData(id);
+  const {
+    internalDataRef,
+    snapshotsRef
+  } = getContext() || {};
+  const internalData = internalDataRef === null || internalDataRef === void 0 ? void 0 : internalDataRef.current;
   const createSnapshot = useCallback((id = makeUniqueId(), name = null, content = null) => {
-    const {
-      internalDataRef,
-      snapshotsRef
-    } = getContext();
     if (!content) {
       var _snapshotsRef$current, _snapshotsRef$current2;
       const snapshotWithPaths = snapshotsRef === null || snapshotsRef === void 0 ? void 0 : (_snapshotsRef$current = snapshotsRef.current) === null || _snapshotsRef$current === void 0 ? void 0 : (_snapshotsRef$current2 = _snapshotsRef$current.get) === null || _snapshotsRef$current2 === void 0 ? void 0 : _snapshotsRef$current2.call(_snapshotsRef$current, name);
       if (snapshotWithPaths) {
         const collectedData = new Map();
         snapshotWithPaths.forEach((isMounted, path) => {
-          if (isMounted && pointer.has(internalDataRef.current, path)) {
-            collectedData.set(path, pointer.get(internalDataRef.current, path));
+          if (isMounted && pointer.has(internalData, path)) {
+            collectedData.set(path, pointer.get(internalData, path));
           }
         });
         content = collectedData;
       } else {
-        content = internalDataRef.current;
+        content = internalData;
       }
     }
     internalSnapshotsRef.current.set(combineIdWithName(id, name), content);
     return id;
-  }, [getContext]);
+  }, [internalData, snapshotsRef]);
   const getSnapshot = useCallback((id, name = null) => {
     return internalSnapshotsRef.current.get(combineIdWithName(id, name));
   }, []);
@@ -60,12 +61,14 @@ export default function useSnapshot(id) {
     applySnapshot(id, name);
     deleteSnapshot(id, name);
   }, [applySnapshot, deleteSnapshot]);
-  return {
-    createSnapshot,
-    revertSnapshot,
-    applySnapshot,
-    internalSnapshotsRef
-  };
+  return useMemo(() => {
+    return {
+      createSnapshot,
+      revertSnapshot,
+      applySnapshot,
+      internalSnapshotsRef
+    };
+  }, [applySnapshot, createSnapshot, revertSnapshot]);
 }
 function combineIdWithName(id, name = null) {
   return name ? `${id}-${name}` : id;

package/es/extensions/forms/hooks/useSnapshot.js.map

@@ -1 +1 @@
-{"version":3,"file":"useSnapshot.js","names":["useCallback","useRef","makeUniqueId","pointer","useDataContext","useData","useSnapshot","id","internalSnapshotsRef","current","Map","getContext","set","setData","update","updateData","createSnapshot","name","content","internalDataRef","snapshotsRef","_snapshotsRef$current","_snapshotsRef$current2","snapshotWithPaths","get","call","collectedData","forEach","isMounted","path","has","combineIdWithName","getSnapshot","deleteSnapshot","delete","applySnapshot","snapshot","value","revertSnapshot"],"sources":["../../../../../src/extensions/forms/hooks/useSnapshot.tsx"],"sourcesContent":["import { useCallback, useRef } from 'react'\nimport { makeUniqueId } from '../../../shared/component-helper'\nimport pointer, { JsonObject } from '../utils/json-pointer'\nimport { SharedStateId } from '../../../shared/helpers/useSharedState'\nimport useDataContext from './useDataContext'\nimport { SnapshotId, SnapshotName } from '../Form/Snapshot'\nimport useData from '../Form/data-context/useData'\n\nexport default function useSnapshot(id?: SharedStateId) {\n  const internalSnapshotsRef = useRef<Map<SnapshotId, JsonObject>>()\n  if (!internalSnapshotsRef.current) {\n    internalSnapshotsRef.current = new Map()\n  }\n\n  const { getContext } = useDataContext(id)\n  const { set: setData, update: updateData } = useData(id)\n\n  const createSnapshot = useCallback(\n    (\n      id: SnapshotId = makeUniqueId(),\n      name: SnapshotName = null,\n      content: JsonObject = null\n    ): SnapshotId => {\n      const { internalDataRef, snapshotsRef } = getContext()\n\n      if (!content) {\n        const snapshotWithPaths = snapshotsRef?.current?.get?.(name)\n        if (snapshotWithPaths) {\n          const collectedData: Map<string, JsonObject> = new Map()\n          snapshotWithPaths.forEach((isMounted, path) => {\n            if (isMounted && pointer.has(internalDataRef.current, path)) {\n              collectedData.set(\n                path,\n                pointer.get(internalDataRef.current, path)\n              )\n            }\n          })\n          content = collectedData as unknown as JsonObject\n        } else {\n          content = internalDataRef.current\n        }\n      }\n\n      internalSnapshotsRef.current.set(\n        combineIdWithName(id, name),\n        content\n      )\n\n      return id\n    },\n    [getContext]\n  )\n\n  const getSnapshot = useCallback(\n    (id: SnapshotId, name: SnapshotName = null): JsonObject => {\n      return internalSnapshotsRef.current.get(combineIdWithName(id, name))\n    },\n    []\n  )\n\n  const deleteSnapshot = useCallback(\n    (id: SnapshotId, name: SnapshotName = null): void => {\n      internalSnapshotsRef.current.delete(combineIdWithName(id, name))\n    },\n    []\n  )\n\n  const applySnapshot = useCallback(\n    (id: SnapshotId, name: SnapshotName = null) => {\n      const snapshot = getSnapshot(id, name)\n\n      if (snapshot instanceof Map) {\n        snapshot.forEach((value, path) => {\n          updateData(path, value)\n        })\n      } else if (snapshot) {\n        setData(snapshot)\n      }\n    },\n    [getSnapshot, setData, updateData]\n  )\n\n  const revertSnapshot = useCallback(\n    (id: SnapshotId, name: SnapshotName = null) => {\n      applySnapshot(id, name)\n      deleteSnapshot(id, name)\n    },\n    [applySnapshot, deleteSnapshot]\n  )\n\n  return {\n    createSnapshot,\n    revertSnapshot,\n    applySnapshot,\n    internalSnapshotsRef,\n  }\n}\n\nfunction combineIdWithName(id: SnapshotId, name: SnapshotName = null) {\n  return name ? `${id}-${name}` : id\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"useSnapshot.js","names":["useCallback","useMemo","useRef","makeUniqueId","pointer","useDataContext","useData","useSnapshot","id","internalSnapshotsRef","current","Map","getContext","set","setData","update","updateData","internalDataRef","snapshotsRef","internalData","createSnapshot","name","content","_snapshotsRef$current","_snapshotsRef$current2","snapshotWithPaths","get","call","collectedData","forEach","isMounted","path","has","combineIdWithName","getSnapshot","deleteSnapshot","delete","applySnapshot","snapshot","value","revertSnapshot"],"sources":["../../../../../src/extensions/forms/hooks/useSnapshot.tsx"],"sourcesContent":["import { useCallback, useMemo, useRef } from 'react'\nimport { makeUniqueId } from '../../../shared/component-helper'\nimport pointer, { JsonObject } from '../utils/json-pointer'\nimport { SharedStateId } from '../../../shared/helpers/useSharedState'\nimport useDataContext from './useDataContext'\nimport { SnapshotId, SnapshotName } from '../Form/Snapshot'\nimport useData from '../Form/data-context/useData'\n\nexport default function useSnapshot(id?: SharedStateId) {\n  const internalSnapshotsRef = useRef<Map<SnapshotId, JsonObject>>()\n  if (!internalSnapshotsRef.current) {\n    internalSnapshotsRef.current = new Map()\n  }\n\n  const { getContext } = useDataContext(id)\n  const { set: setData, update: updateData } = useData(id)\n\n  const { internalDataRef, snapshotsRef } = getContext() || {}\n  const internalData = internalDataRef?.current // Ensure the createSnapshot dependency gets updated\n  const createSnapshot = useCallback(\n    (\n      id: SnapshotId = makeUniqueId(),\n      name: SnapshotName = null,\n      content: JsonObject = null\n    ): SnapshotId => {\n      if (!content) {\n        const snapshotWithPaths = snapshotsRef?.current?.get?.(name)\n        if (snapshotWithPaths) {\n          const collectedData: Map<string, JsonObject> = new Map()\n          snapshotWithPaths.forEach((isMounted, path) => {\n            if (isMounted && pointer.has(internalData, path)) {\n              collectedData.set(path, pointer.get(internalData, path))\n            }\n          })\n          content = collectedData as unknown as JsonObject\n        } else {\n          content = internalData\n        }\n      }\n\n      internalSnapshotsRef.current.set(\n        combineIdWithName(id, name),\n        content\n      )\n\n      return id\n    },\n    [internalData, snapshotsRef]\n  )\n\n  const getSnapshot = useCallback(\n    (id: SnapshotId, name: SnapshotName = null): JsonObject => {\n      return internalSnapshotsRef.current.get(combineIdWithName(id, name))\n    },\n    []\n  )\n\n  const deleteSnapshot = useCallback(\n    (id: SnapshotId, name: SnapshotName = null): void => {\n      internalSnapshotsRef.current.delete(combineIdWithName(id, name))\n    },\n    []\n  )\n\n  const applySnapshot = useCallback(\n    (id: SnapshotId, name: SnapshotName = null) => {\n      const snapshot = getSnapshot(id, name)\n\n      if (snapshot instanceof Map) {\n        snapshot.forEach((value, path) => {\n          updateData(path, value)\n        })\n      } else if (snapshot) {\n        setData(snapshot)\n      }\n    },\n    [getSnapshot, setData, updateData]\n  )\n\n  const revertSnapshot = useCallback(\n    (id: SnapshotId, name: SnapshotName = null) => {\n      applySnapshot(id, name)\n      deleteSnapshot(id, name)\n    },\n    [applySnapshot, deleteSnapshot]\n  )\n\n  return useMemo(() => {\n    return {\n      createSnapshot,\n      revertSnapshot,\n      applySnapshot,\n\n      internalSnapshotsRef,\n    }\n  }, [applySnapshot, createSnapshot, revertSnapshot])\n}\n\nfunction combineIdWithName(id: SnapshotId, name: SnapshotName = null) {\n  return name ? `${id}-${name}` : id\n}\n"],"mappings":"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","ignoreList":[]}

package/es/fragments/drawer-list/DrawerList.d.ts

@@ -1,239 +1,191 @@
-import * as React from 'react';
+/**
+ * Web List Component
+ *
+ * This is a legacy component.
+ * For referencing while developing new features, please use a Functional component.
+ */
+import React from 'react';
 import type { SpacingProps } from '../../shared/types';
-export type DrawerListDirection = 'auto' | 'top' | 'bottom';
-export type DrawerListSize =
-  | 'default'
-  | 'small'
-  | 'medium'
-  | 'large'
-  | number;
-export type DrawerListAlignDrawer = 'left' | 'right';
-export type DrawerListOptionsRender =
-  | Record<string, unknown>
-  | ((...args: any[]) => any)
-  | React.ReactNode;
-export type DrawerListWrapperElement =
-  | Record<string, unknown>
-  | ((...args: any[]) => any)
-  | React.ReactNode;
-export type DrawerListDefaultValue = string | number;
-export type DrawerListValue = string | number;
-/** @deprecated use `DrawerListDataArrayObject` */
-export type DrawerListDataObject = DrawerListDataArrayObject;
+import { DrawerListHorizontalItem } from './DrawerListItem';
+import type { DrawerListItemProps } from './DrawerListItem';
+export type DrawerListContent = string | React.ReactNode | (string | React.ReactNode)[];
 export type DrawerListDataArrayObject = {
-  [customProperty: string]: any;
-  selected_value?: string | React.ReactNode;
-  selectedKey?: string | number;
-  selected_key?: string | number;
-  suffix_value?: string | React.ReactNode;
-  content?: DrawerListContent;
-  disabled?: boolean;
-  search_content?: string | React.ReactNode | string[];
-  style?: React.CSSProperties;
+    [customProperty: string]: any;
+    selected_value?: string | React.ReactNode;
+    selectedKey?: string | number;
+    selected_key?: string | number;
+    suffix_value?: string | React.ReactNode;
+    content: DrawerListContent;
+    disabled?: boolean;
+    /** used by Autocomplete for additional search hits */
+    search_content?: string | React.ReactNode | string[];
+    /** style prop of the html list item */
+    style?: React.CSSProperties;
+    /** classname added to the html list item */
+    class_name?: string;
+    /** set to true to disable mouse events selected style. Keyboard can still select @deprecated */
+    ignore_events?: boolean;
+    /** internal use only */
+    render?: (children: React.ReactNode, id: string) => React.ReactNode;
 };
 /** @deprecated use `DrawerListDataArrayItem` */
 export type DrawerListDataObjectUnion = DrawerListDataArrayItem;
-export type DrawerListDataArrayItem =
-  | DrawerListDataArrayObject
-  | DrawerListContent;
+export type DrawerListDataArrayItem = DrawerListDataArrayObject | DrawerListContent;
 export type DrawerListDataArray = DrawerListDataArrayItem[];
 export type DrawerListDataRecord = Record<string, DrawerListContent>;
 export type DrawerListDataAll = DrawerListDataRecord | DrawerListDataArray;
-export type DrawerListData =
-  | string
-  | ((...args: any[]) => DrawerListDataAll)
-  | DrawerListDataAll;
-export type DrawerListContent =
-  | string
-  | React.ReactNode
-  | (string | React.ReactNode)[];
-export type DrawerListRawData =
-  | any[]
-  | Record<string, unknown>
-  | ((...args: any[]) => any);
-export type DrawerListChildren =
-  | string
-  | ((...args: any[]) => any)
-  | React.ReactNode
-  | Record<string, unknown>
-  | any[];
+export type DrawerListOptionsRender = ({ data, Items, Item, }: {
+    data: DrawerListDataArrayObject[];
+    Items: React.FunctionComponent;
+    Item: React.FC<DrawerListItemProps>;
+}) => React.ReactNode;
+export type DrawerListValue = string | number;
+export type DrawerListData = string | ((...args: any[]) => DrawerListDataAll) | DrawerListDataAll;
 export type DrawerListSuffix = React.ReactNode;
 export interface DrawerListProps {
-  id?: string;
-  role?: string;
-  /**
-   * Set a `cache_hash` as a string to enable internal memorizing of the list to enhance rerendering performance. Components like Autocomplete are using this because of the huge data changes due to search and reorder.
-   */
-  cache_hash?: string;
-  /**
-   * Position of the arrow icon/triangle inside the drawer-list. Set to 'left' or 'right'. Defaults to 'left' if not set.
-   */
-  triangle_position?: string;
-  /**
-   * Defines if the options list should be scrollable (the `max-height` is set by default to `50vh`).
-   */
-  scrollable?: boolean;
-  /**
-   * If set to `true`, the element is then focusable by assertive technologies.
-   */
-  focusable?: boolean;
-  /**
-   * Defines the direction of how the drawer-list shows the options list. Can be 'bottom' or 'top'. Defaults to 'auto'.
-   */
-  direction?: DrawerListDirection;
-  size?: DrawerListSize;
-  /**
-   * Defines the minimum height (in `rem`) of the options list.
-   */
-  min_height?: string | number;
-  /**
-   * Defines the maximum height (in `rem`) of the options list.
-   */
-  max_height?: number;
-  /**
-   * To disable appear/disappear (show/hide) animation.
-   */
-  no_animation?: boolean;
-  /**
-   * To disable scrolling animation.
-   */
-  no_scroll_animation?: boolean;
-  /**
-   * If set to `true`, the DrawerList will then not make any permanent selection.
-   */
-  prevent_selection?: boolean;
-  action_menu?: boolean;
-  is_popup?: boolean;
-  /**
-   * Use 'right' to change the options alignment direction. Makes only sense to use in combination with `prevent_selection` or `more_menu` - or if an independent width is used.
-   */
-  align_drawer?: DrawerListAlignDrawer;
-  /**
-   * Has to be a function, returning the items again. See [example](/uilib/components/fragments/drawer-list#example-usage-of-options_render). This can be used to add additional options above the actual rendered list.
-   */
-  options_render?: DrawerListOptionsRender;
-  /**
-   * Has to be an HTML Element, ideally a mother element, used to calculate sizes and distances. Also used for the 'click outside' detection. Clicking on the `wrapper_element` will not trigger an outside click.
-   */
-  wrapper_element?: DrawerListWrapperElement;
-  /**
-   * Define a startup value or handle a re-render without handling the state during the re-render by yourself. Defaults to `null`.
-   */
-  default_value?: DrawerListDefaultValue;
-  /**
-   * Define a preselected `data` entry. In order of priority, `value` can be set to: object key (if `data` is an object), `selectedKey` prop (if `data` is an array), array index (if no `selectedKey`) or content (if `value` is a non-integer string).
-   */
-  value?: DrawerListValue;
-  /**
-   * To disable the React Portal behavior.
-   */
-  skip_portal?: boolean;
-  /**
-   * Define an HTML class that will be set on the DOM portal beside `dnb-drawer-list__portal__style`. Can be useful to handle e.g. a custom `z-index` in relation to a header.
-   */
-  portal_class?: string;
-  /**
-   * Define an HTML class that will be set on the list, beside `dnb-drawer-list__list`.
-   */
-  list_class?: string;
-  /**
-   * If set to `true`, the DrawerList will not close on any events.
-   */
-  prevent_close?: boolean;
-  /**
-   * If set to `true`, the DrawerList will handle its width and position independently of the parent/mother element.
-   */
-  independent_width?: boolean;
-  /**
-   * If set to `true`, the DrawerList will be fixed in its scroll position by using CSS `position: fixed;`.
-   */
-  fixed_position?: boolean;
-  /**
-   * If set to `true`, the DrawerList will close on outside clicks, but not on selection.
-   */
-  keep_open?: boolean;
-  prevent_focus?: boolean;
-  /**
-   * If set to `true`, search items by the first key will be ignored.
-   */
-  skip_keysearch?: boolean;
-  opened?: boolean;
-  data?: DrawerListData;
-  prepared_data?: any[];
-  raw_data?: DrawerListRawData;
-  /**
-   * If set to `true`, all keyboard and mouse events will be ignored.
-   */
-  ignore_events?: boolean;
-  className?: string;
-  children?: DrawerListChildren;
-  suffix?: DrawerListSuffix;
-  /**
-   * If set to `true`, the HTML body will get locked from scrolling when the Dropdown is open.
-   */
-  enable_body_lock?: boolean;
-  /**
-   * Defines the available scrollable height. If scrolling should not change the height of the drawer-list, then set it to `0` (useful if the DrawerList is used in fixed positions on contrast to a scrollable page content).
-   */
-  page_offset?: string | number;
-  /**
-   * Set a HTML element, either as a selector or a DOM element. Can be used to send in an element which will be used to make the direction calculation on.
-   */
-  observer_element?: string | React.ReactNode;
-  on_show?: (...args: any[]) => any;
-  on_hide?: (...args: any[]) => any;
-  handle_dismiss_focus?: (...args: any[]) => any;
-  on_change?: (...args: any[]) => any;
-  on_pre_change?: (...args: any[]) => any;
-  on_resize?: (...args: any[]) => any;
-  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;
-  /**
-   * Define a preselected `data` entry. In order of priority, `value` can be set to: object key (if `data` is an object), `selectedKey` prop (if `data` is an array), array index (if no `selectedKey`) or content (if `value` is a non-integer string).
-   */
-  value: string;
-  on_click: ({
-    value
-  }: {
+    id?: string;
+    _id?: string;
+    role?: string;
+    /**
+     * Set a `cache_hash` as a string to enable internal memorizing of the list to enhance rerendering performance. Components like Autocomplete are using this because of the huge data changes due to search and reorder.
+     */
+    cache_hash?: string;
+    /**
+     * Position of the arrow icon/triangle inside the drawer-list. Set to 'left' or 'right'. Defaults to 'left' if not set.
+     */
+    triangle_position?: string;
+    /**
+     * Defines if the options list should be scrollable (the `max-height` is set by default to `50vh`).
+     */
+    scrollable?: boolean;
+    /**
+     * If set to `true`, the element is then focusable by assertive technologies.
+     */
+    focusable?: boolean;
+    /**
+     * Defines the direction of how the drawer-list shows the options list. Can be 'bottom' or 'top'. Defaults to 'auto'.
+     */
+    direction?: 'auto' | 'top' | 'bottom';
+    size?: 'default' | 'small' | 'medium' | 'large' | number;
+    /**
+     * Defines the minimum height (in `rem`) of the options list.
+     */
+    min_height?: string | number;
+    /**
+     * Defines the maximum height (in `rem`) of the options list.
+     */
+    max_height?: string | number;
+    /**
+     * To disable appear/disappear (show/hide) animation.
+     */
+    no_animation?: boolean;
+    /**
+     * To disable scrolling animation.
+     */
+    no_scroll_animation?: boolean;
+    /**
+     * If set to `true`, the DrawerList will then not make any permanent selection.
+     */
+    prevent_selection?: boolean;
+    action_menu?: boolean;
+    is_popup?: boolean;
+    /**
+     * Use 'right' to change the options alignment direction. Makes only sense to use in combination with `prevent_selection` or `more_menu` - or if an independent width is used.
+     */
+    align_drawer?: 'left' | 'right';
+    /**
+     * Has to be a function, returning the items again. See [example](/uilib/components/fragments/drawer-list#example-usage-of-options_render). This can be used to add additional options above the actual rendered list.
+     */
+    options_render?: DrawerListOptionsRender;
+    /**
+     * Has to be an HTML Element, ideally a mother element, used to calculate sizes and distances. Also used for the 'click outside' detection. Clicking on the `wrapper_element` will not trigger an outside click.
+     */
+    wrapper_element?: string | HTMLElement;
+    /**
+     * Define a startup value or handle a re-render without handling the state during the re-render by yourself. Defaults to null.
+     */
+    default_value?: DrawerListValue;
     /**
      * Define a preselected `data` entry. In order of priority, `value` can be set to: object key (if `data` is an object), `selectedKey` prop (if `data` is an array), array index (if no `selectedKey`) or content (if `value` is a non-integer string).
      */
-    value: string;
-  }) => void;
-} & Omit<React.HTMLProps<HTMLElement>, 'children'>;
-export type DrawerListHorizontalItemProps = {
-  children: React.ReactNode;
-} & Omit<React.HTMLProps<HTMLElement>, 'children'>;
-export type DrawerListAllProps = DrawerListProps &
-  SpacingProps &
-  Omit<
-    React.HTMLProps<HTMLElement>,
-    'ref' | 'size' | 'label' | 'placeholder' | 'data' | 'children'
-  >;
-export default class DrawerList extends React.Component<
-  DrawerListAllProps,
-  any
-> {
-  static defaultProps: object;
-  static Options: (props: DrawerListOptionsProps) => JSX.Element;
-  static Item: (props: DrawerListItemProps) => JSX.Element;
-  static HorizontalItem: (
-    props: DrawerListHorizontalItemProps
-  ) => JSX.Element;
-  render(): JSX.Element;
+    value?: DrawerListValue;
+    /**
+     * To disable the React Portal behavior.
+     */
+    skip_portal?: boolean;
+    /**
+     * Define an HTML class that will be set on the DOM portal beside `dnb-drawer-list__portal__style`. Can be useful to handle e.g. a custom `z-index` in relation to a header.
+     */
+    portal_class?: string;
+    /**
+     * Define an HTML class that will be set on the list, beside `dnb-drawer-list__list`.
+     */
+    list_class?: string;
+    /**
+     * If set to `true`, the DrawerList will not close on any events.
+     */
+    prevent_close?: boolean;
+    /**
+     * If set to `true`, the DrawerList will handle its width and position independently of the parent/mother element.
+     */
+    independent_width?: boolean;
+    /**
+     * If set to `true`, the DrawerList will be fixed in its scroll position by using CSS `position: fixed;`.
+     */
+    fixed_position?: boolean;
+    /**
+     * If set to `true`, the DrawerList will close on outside clicks, but not on selection.
+     */
+    keep_open?: boolean;
+    prevent_focus?: boolean;
+    /**
+     * If set to `true`, search items by the first key will be ignored.
+     */
+    skip_keysearch?: boolean;
+    opened?: boolean;
+    data?: DrawerListData;
+    prepared_data?: any[];
+    /**
+     * If set to `true`, all keyboard and mouse events will be ignored.
+     */
+    ignore_events?: boolean;
+    className?: string;
+    /** Accepts the same values as the `data` prop. Will be ignored if `data` is used. Can also accept a single child for custom rendering. */
+    children?: DrawerListData | React.ReactElement;
+    suffix?: DrawerListSuffix;
+    /**
+     * If set to `true`, the HTML body will get locked from scrolling when the Dropdown is open.
+     */
+    enable_body_lock?: boolean;
+    /**
+     * Defines the available scrollable height. If scrolling should not change the height of the drawer-list, then set it to `0` (useful if the DrawerList is used in fixed positions on contrast to a scrollable page content).
+     */
+    page_offset?: string | number;
+    /**
+     * Set a HTML element, either as a selector or a DOM element. Can be used to send in an element which will be used to make the direction calculation on.
+     */
+    observer_element?: string | React.ReactNode;
+    on_show?: (...args: any[]) => any;
+    on_hide?: (...args: any[]) => any;
+    handle_dismiss_focus?: (...args: any[]) => any;
+    on_change?: (...args: any[]) => any;
+    on_pre_change?: (...args: any[]) => any;
+    on_resize?: (...args: any[]) => any;
+    on_select?: (...args: any[]) => any;
+    on_state_update?: (...args: any[]) => any;
 }
-export type ItemContentChildren =
-  | React.ReactNode
-  | Record<string, unknown>;
-export interface ItemContentProps {
-  hash?: string;
-  children?: ItemContentChildren;
+export type DrawerListAllProps = DrawerListProps & SpacingProps & Omit<React.HTMLProps<HTMLElement>, 'ref' | 'size' | 'label' | 'placeholder' | 'data' | 'children'>;
+declare function DrawerList(props: DrawerListAllProps): import("react/jsx-runtime").JSX.Element;
+declare namespace DrawerList {
+    var blurDelay: number;
+    var Options: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<DrawerListOptionsProps, "ref"> & React.RefAttributes<HTMLUListElement>>>;
+    var Item: React.ForwardRefExoticComponent<Omit<DrawerListItemProps, "ref"> & React.RefAttributes<HTMLLIElement>>;
+    var HorizontalItem: typeof DrawerListHorizontalItem;
 }
-export declare const ItemContent: React.FC<ItemContentProps>;
+export type DrawerListOptionsProps = React.HTMLProps<HTMLUListElement> & {
+    children: React.ReactNode;
+    triangleRef?: React.LegacyRef<HTMLLIElement>;
+    cache_hash?: string;
+    showFocusRing?: boolean;
+};
+export default DrawerList;