@dnb/eufemia 10.2.0 → 10.3.0

package/components/table/TableTr.js

@@ -7,19 +7,18 @@ import { useTableAccordion } from './TableAccordion';
 import TableContext from './TableContext';
 export default function Tr(componentProps) {
   const {
-    variant,
-    noWrap,
-    expanded,
-    disabled,
-    noAnimation,
-    onClick,
-    onOpened,
-    onClosed,
-    children,
-    className: _className
-  } = componentProps,
-        props = _objectWithoutProperties(componentProps, _excluded);
-
+      variant,
+      noWrap,
+      expanded,
+      disabled,
+      noAnimation,
+      onClick,
+      onOpened,
+      onClosed,
+      children,
+      className: _className
+    } = componentProps,
+    props = _objectWithoutProperties(componentProps, _excluded);
   const {
     currentVariant
   } = useHandleTrVariant({
@@ -37,36 +36,29 @@ export default function Tr(componentProps) {
     onOpened,
     onClosed
   });
-
   if (accordionTr) {
     return accordionTr;
   }
-
   return React.createElement("tr", _extends({
     role: "row",
     className: className
   }, props), children);
 }
-
 function useHandleTrVariant(_ref) {
   let {
     variant
   } = _ref;
   const tableContext = React.useContext(TableContext);
   const countRef = tableContext === null || tableContext === void 0 ? void 0 : tableContext.trCountRef.current;
-
   const increment = () => {
     if (typeof countRef === 'undefined') {
       return 0;
     }
-
     if (!variant || variant === 'even' && countRef.count % 2 === 1 || variant === 'odd' && countRef.count % 2 === 0) {
       countRef.count++;
     }
-
     return countRef.count;
   };
-
   const [count, setCount] = React.useState(() => {
     if (typeof window === 'undefined') {
       return increment();
@@ -76,16 +68,13 @@ function useHandleTrVariant(_ref) {
     setCount(increment());
   }, [tableContext === null || tableContext === void 0 ? void 0 : tableContext.rerenderAlias]);
   let currentVariant = variant;
-
   if (!currentVariant) {
     currentVariant = count % 2 ? 'odd' : 'even';
   }
-
   return {
     currentVariant
   };
 }
-
 export function useHandleOddEven(_ref2) {
   let {
     children
@@ -99,7 +88,6 @@ export function useHandleOddEven(_ref2) {
     if (isMounted.current) {
       forceRerender();
     }
-
     isMounted.current = true;
   }, [children]);
   return {
@@ -107,9 +95,9 @@ export function useHandleOddEven(_ref2) {
     rerenderAlias,
     setRerenderAlias
   };
-
   function forceRerender() {
     trCountRef.current.count = 0;
     setRerenderAlias({});
   }
-}
+}
+//# sourceMappingURL=TableTr.js.map

package/components/table/TableTr.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableTr.js","names":["React","classnames","useTableAccordion","TableContext","Tr","componentProps","variant","noWrap","expanded","disabled","noAnimation","onClick","onOpened","onClosed","children","className","_className","props","_objectWithoutProperties","_excluded","currentVariant","useHandleTrVariant","accordionTr","createElement","_extends","role","_ref","tableContext","useContext","countRef","trCountRef","current","increment","count","setCount","useState","window","useEffect","rerenderAlias","useHandleOddEven","_ref2","useRef","setRerenderAlias","isMounted","forceRerender"],"sources":["../../../../src/components/table/TableTr.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport { useTableAccordion } from './TableAccordion'\nimport { TableTdProps } from './TableTd'\nimport TableContext from './TableContext'\n\nexport type TableTrProps = {\n  /**\n   * The variant of the tr\n   */\n  variant?: 'even' | 'odd'\n\n  /**\n   * If set to true, the inherited header text will not wrap to new lines\n   * Default: false\n   */\n  noWrap?: boolean\n\n  /**\n   * Set true to render the tr initially as expanded\n   * Is part of the accordion feature and needs to be enabled with `accordion` prop in main Table\n   * Default: false\n   */\n  expanded?: boolean\n\n  /**\n   * Set true to disable the tr to be accessible as an interactive element\n   * Is part of the accordion feature and needs to be enabled with `accordion` prop in main Table\n   * Default: false\n   */\n  disabled?: boolean\n\n  /**\n   * Set to true to skip animation\n   * Is part of the accordion feature and needs to be enabled with `accordion` prop in main Table\n   * Default: false\n   */\n  noAnimation?: boolean\n\n  /**\n   * Will emit when user clicks/expands the table row\n   * Is part of the accordion feature and needs to be enabled with `accordion` prop in main Table\n   */\n  onClick?: (event?: React.SyntheticEvent) => void\n\n  /**\n   * Will emit when table row is expanded\n   * Is part of the accordion feature and needs to be enabled with `accordion` prop in main Table\n   */\n  onOpened?: (event?: React.SyntheticEvent) => void\n\n  /**\n   * Will emit when table row is closed (after it was open)\n   * Is part of the accordion feature and needs to be enabled with `accordion` prop in main Table\n   */\n  onClosed?: (event?: React.SyntheticEvent) => void\n\n  /**\n   * The content of the component.\n   */\n  children:\n    | React.ReactElement<TableTdProps>\n    | Array<React.ReactElement<TableTdProps>>\n}\n\nexport default function Tr(\n  componentProps: TableTrProps &\n    React.TableHTMLAttributes<HTMLTableRowElement>\n) {\n  const {\n    variant,\n    noWrap,\n    expanded,\n    disabled,\n    noAnimation,\n    onClick,\n    onOpened,\n    onClosed,\n    children,\n    className: _className,\n    ...props\n  } = componentProps\n\n  const { currentVariant } = useHandleTrVariant({ variant })\n\n  const className = classnames(\n    'dnb-table__tr',\n    currentVariant && `dnb-table__tr--${currentVariant}`,\n    noWrap && 'dnb-table--no-wrap',\n    _className\n  )\n\n  const accordionTr = useTableAccordion({\n    className,\n    children,\n    props,\n    expanded,\n    disabled,\n    noAnimation,\n    onClick,\n    onOpened,\n    onClosed,\n  })\n\n  if (accordionTr) {\n    return accordionTr\n  }\n\n  return (\n    <tr role=\"row\" className={className} {...props}>\n      {children}\n    </tr>\n  )\n}\n\nfunction useHandleTrVariant({ variant }) {\n  const tableContext = React.useContext(TableContext)\n\n  /**\n   * Handle odd/even\n   */\n  const countRef = tableContext?.trCountRef.current\n  const increment = () => {\n    if (typeof countRef === 'undefined') {\n      return 0\n    }\n    if (\n      !variant ||\n      (variant === 'even' && countRef.count % 2 === 1) ||\n      (variant === 'odd' && countRef.count % 2 === 0)\n    ) {\n      countRef.count++\n    }\n\n    return countRef.count\n  }\n\n  const [count, setCount] = React.useState(() => {\n    // SSR Support\n    if (typeof window === 'undefined') {\n      return increment()\n    }\n  })\n\n  // StrictMode support\n  React.useEffect(() => {\n    // SSR will not execute useEffect\n    setCount(increment())\n  }, [tableContext?.rerenderAlias]) // eslint-disable-line react-hooks/exhaustive-deps\n\n  /**\n   * Find out the current odd/even when \"accordionContent\" is used.\n   * Because we have now an additional \"tr\" element.\n   * Then the CSS can't figure out the correct nth element (nth-of-type)\n   * and we need to set it manually (nth-child and nth-of-type do not respect classes, so we can't ignore this one).\n   */\n  let currentVariant = variant\n  if (!currentVariant) {\n    currentVariant = count % 2 ? 'odd' : 'even'\n  }\n\n  return {\n    currentVariant,\n  }\n}\n\n/**\n * Handle odd/even on re-render and React.StrictMode\n */\nexport function useHandleOddEven({ children }) {\n  // Create this ref in order to \"auto\" set even/odd class in tr elements\n  const trCountRef = React.useRef({ count: 0 })\n\n  // When the alias changes, all tr's will rerender and get a new even/odd color\n  // This is usefull, when one tr gets removed\n  const [rerenderAlias, setRerenderAlias] = React.useState({}) // eslint-disable-line no-unused-vars\n\n  const isMounted = React.useRef(false)\n  React.useEffect(() => {\n    if (isMounted.current) {\n      forceRerender()\n    }\n    isMounted.current = true\n  }, [children]) // eslint-disable-line react-hooks/exhaustive-deps\n\n  return { trCountRef, rerenderAlias, setRerenderAlias }\n\n  function forceRerender() {\n    trCountRef.current.count = 0\n    setRerenderAlias({})\n  }\n}\n"],"mappings":"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"}

package/components/table/index.js

@@ -1,3 +1,4 @@
 import Table from './Table';
 export default Table;
-export * from './Table';
+export * from './Table';
+//# sourceMappingURL=index.js.map

package/components/table/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["Table"],"sources":["../../../../src/components/table/index.ts"],"sourcesContent":["/**\n * Component Entry\n *\n */\n\nimport Table from './Table'\nexport default Table\nexport * from './Table'\n"],"mappings":"AAKA,OAAOA,KAAK,MAAM,SAAS;AAC3B,eAAeA,KAAK;AACpB,cAAc,SAAS"}

package/components/table/style/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/table/style/index.js"],"sourcesContent":["/**\n * Web Style Import\n *\n */\n\nimport './dnb-table.scss'\n"],"mappings":"AAKA,OAAO,qBAAkB"}

package/components/table/style/themes/ui.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui.js","names":[],"sources":["../../../../../../src/components/table/style/themes/ui.js"],"sourcesContent":["/**\n * Imports the default theme\n *\n */\n\nimport './dnb-table-theme-ui.scss'\n"],"mappings":"AAKA,OAAO,8BAA2B"}

package/components/table/style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.js","names":[],"sources":["../../../../src/components/table/style.ts"],"sourcesContent":["/**\n * Web Style Import\n *\n */\n\nimport './style/dnb-table.scss'\n"],"mappings":"AAKA,OAAO,2BAAwB"}

package/components/table/useHandleSortState.d.ts

@@ -1,4 +1,4 @@
-export declare type useHandleSortStateOptions = {
+export type useHandleSortStateOptions = {
     /**
      * Defines if the current column should be active or not.
      * Defaults to false.
@@ -15,17 +15,17 @@ export declare type useHandleSortStateOptions = {
      */
     modes?: Array<useHandleSortStateMode>;
 };
-export declare type useHandleSortStateDirection = 'asc' | 'desc' | 'off';
-export declare type useHandleSortStateMode = 'asc' | 'desc' | 'off';
-export declare type useHandleSortStateName = string;
-export declare type useHandleSortStateConfig = Record<useHandleSortStateName, useHandleSortStateOptions>;
-export declare type SortState = Record<useHandleSortStateName, {
+export type useHandleSortStateDirection = 'asc' | 'desc' | 'off';
+export type useHandleSortStateMode = 'asc' | 'desc' | 'off';
+export type useHandleSortStateName = string;
+export type useHandleSortStateConfig = Record<useHandleSortStateName, useHandleSortStateOptions>;
+export type SortState = Record<useHandleSortStateName, {
     active: boolean;
     reversed: boolean;
     direction: useHandleSortStateDirection | 'off';
 }>;
-export declare type SortEventHandler = () => void;
-export declare type SortHandler = Record<useHandleSortStateName, SortEventHandler>;
+export type SortEventHandler = () => void;
+export type SortHandler = Record<useHandleSortStateName, SortEventHandler>;
 export declare function useHandleSortState(config: useHandleSortStateConfig, defaults?: useHandleSortStateOptions): {
     sortState: SortState;
     sortHandler: SortHandler;

package/components/table/useHandleSortState.js

@@ -1,9 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React from 'react';
 export function useHandleSortState(config) {
   let defaults = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
@@ -22,10 +19,8 @@ export function useHandleSortState(config) {
     const list = Object.entries(internalState);
     return list.reduce((acc, _ref2) => {
       let [name, opts] = _ref2;
-
       acc[name] = () => {
         const state = _objectSpread({}, internalState[name]);
-
         if (!state.active && state.lastDirection) {
           state.direction = state.lastDirection;
           state.active = true;
@@ -40,22 +35,18 @@ export function useHandleSortState(config) {
           });
           state.active = state.direction !== 'off';
         }
-
         setState(_objectSpread(_objectSpread({}, list.reduce((acc, _ref3) => {
           let [name, opts] = _ref3;
           acc[name] = opts;
           acc[name].active = false;
-
           if (opts.direction !== 'off') {
             acc[name].lastDirection = opts.direction;
           }
-
           return acc;
         }, {})), {}, {
           [name]: state
         }));
       };
-
       return acc;
     }, {});
   }, [internalState]);
@@ -66,13 +57,11 @@ export function useHandleSortState(config) {
       direction
     }] = _ref4;
     const reversed = direction === 'off' ? undefined : direction === 'desc';
-
     if (active) {
       activeSortName = name;
     } else {
       active = false;
     }
-
     acc[name] = {
       active,
       direction,
@@ -85,7 +74,6 @@ export function useHandleSortState(config) {
     sortHandler,
     activeSortName
   };
-
   function getNextMode(_ref5) {
     let {
       direction,
@@ -95,29 +83,23 @@ export function useHandleSortState(config) {
     const modes = defaults.modes.filter(mode => {
       return opts.modes.includes(mode);
     });
-
     if (!modes.includes(direction)) {
       direction = modes[0];
     }
-
     let next = direction;
-
     for (let i = 0, l = modes.length; i < l; i++) {
       const mode = modes[i];
-
       if (direction === mode) {
         let c = i + 1;
-
         if (c >= l) {
           c = 0;
         }
-
         next = modes[c];
         break;
       }
     }
-
     return next;
   }
 }
-export default useHandleSortState;
+export default useHandleSortState;
+//# sourceMappingURL=useHandleSortState.js.map

package/components/table/useHandleSortState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useHandleSortState.js","names":["React","useHandleSortState","config","defaults","arguments","length","undefined","direction","modes","initialState","useMemo","Object","entries","reduce","acc","_ref","name","opts","_objectSpread","internalState","setState","useState","sortHandler","list","_ref2","state","active","lastDirection","getNextMode","_ref3","activeSortName","sortState","_ref4","reversed","_ref5","filter","mode","includes","next","i","l","c"],"sources":["../../../../src/components/table/useHandleSortState.tsx"],"sourcesContent":["import React from 'react'\n\nexport type useHandleSortStateOptions = {\n  /**\n   * Defines if the current column should be active or not.\n   * Defaults to false.\n   */\n  active?: boolean\n\n  /**\n   * Define the sorting direction. Can be \"asc\", \"desc\" or \"off\".\n   * Defaults to \"off\".\n   */\n  direction?: useHandleSortStateDirection\n\n  /**\n   * Define the possible modes.\n   * Defaults to [\"asc\", \"desc\", \"off\"].\n   */\n  modes?: Array<useHandleSortStateMode>\n}\nexport type useHandleSortStateDirection = 'asc' | 'desc' | 'off'\nexport type useHandleSortStateMode = 'asc' | 'desc' | 'off'\nexport type useHandleSortStateName = string\nexport type useHandleSortStateConfig = Record<\n  useHandleSortStateName,\n  useHandleSortStateOptions\n>\nexport type SortState = Record<\n  useHandleSortStateName,\n  {\n    active: boolean\n    reversed: boolean\n    direction: useHandleSortStateDirection | 'off'\n  }\n>\nexport type SortEventHandler = () => void\nexport type SortHandler = Record<useHandleSortStateName, SortEventHandler>\n\ntype SortStateInternalStateOptions = Omit<\n  useHandleSortStateOptions,\n  'direction'\n> & { direction: useHandleSortStateDirection | 'off' }\ntype SortStateInternalState = SortStateInternalStateOptions & {\n  reversed: boolean\n  lastDirection: useHandleSortStateDirection\n}\ntype SortStateInternalEntry = Record<\n  useHandleSortStateName,\n  SortStateInternalStateOptions\n>\ntype GetNextMode = {\n  direction: useHandleSortStateDirection\n  opts: SortStateInternalStateOptions\n  defaults: useHandleSortStateOptions\n}\n\nexport function useHandleSortState(\n  config: useHandleSortStateConfig,\n  defaults: useHandleSortStateOptions = {\n    direction: 'off',\n    modes: ['asc', 'desc', 'off'],\n  }\n) {\n  const initialState = React.useMemo(() => {\n    return Object.entries(config).reduce((acc, [name, opts]) => {\n      acc[name] = { ...defaults, ...opts }\n\n      return acc\n    }, {})\n  }, [config, defaults])\n\n  const [internalState, setState] = React.useState<SortState>(initialState)\n\n  const sortHandler: SortHandler = React.useMemo(() => {\n    const list = Object.entries(internalState as SortStateInternalEntry)\n\n    return list.reduce((acc, [name, opts]) => {\n      acc[name] = () => {\n        const state = { ...internalState[name] } as SortStateInternalState\n\n        if (!state.active && state.lastDirection) {\n          state.direction = state.lastDirection\n          state.active = true\n          state.lastDirection = null\n        } else if (!state.active && state.direction !== 'off') {\n          state.active = true\n        } else {\n          state.direction = getNextMode({\n            direction: state.direction,\n            opts,\n            defaults,\n          })\n          state.active = state.direction !== 'off'\n        }\n\n        setState({\n          ...list.reduce((acc, [name, opts]) => {\n            acc[name] = opts\n            acc[name].active = false\n            if (opts.direction !== 'off') {\n              acc[name].lastDirection = opts.direction\n            }\n            return acc\n          }, {}),\n          [name]: state,\n        })\n      }\n\n      return acc\n    }, {})\n  }, [internalState]) // eslint-disable-line react-hooks/exhaustive-deps\n\n  let activeSortName = null\n  const sortState: SortState = Object.entries(internalState).reduce(\n    (acc, [name, { active, direction }]) => {\n      const reversed =\n        direction === 'off' ? undefined : direction === 'desc'\n\n      if (active) {\n        activeSortName = name\n      } else {\n        active = false\n      }\n\n      acc[name] = { active, direction, reversed }\n\n      return acc\n    },\n    {}\n  )\n\n  return { sortState, sortHandler, activeSortName }\n\n  function getNextMode({ direction, opts, defaults }: GetNextMode) {\n    const modes = defaults.modes.filter((mode) => {\n      return opts.modes.includes(mode)\n    })\n\n    if (!modes.includes(direction)) {\n      direction = modes[0]\n    }\n\n    let next = direction\n\n    for (let i = 0, l = modes.length; i < l; i++) {\n      const mode = modes[i]\n\n      if (direction === mode) {\n        let c = i + 1\n        if (c >= l) {\n          c = 0\n        }\n        next = modes[c]\n        break\n      }\n    }\n\n    return next\n  }\n}\n\nexport default useHandleSortState\n"],"mappings":"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"}

package/components/tabs/Tabs.d.ts

@@ -34,74 +34,60 @@ export interface TabsProps
    * <em>(required)</em> defines the data structure to load as a JSON. e.g. `[{title: &#39;...&#39;, content: &#39;Current tab&#39;, key: &#39;...&#39;, hash: &#39;...&#39;}]`
    */
   data?: TabsData;
-
   /**
    * <em>(required)</em> the content to render. Can be a function, returning the current tab content `(key) => (&#39;Current tab&#39;)`, a React Component or an object with the keys and content `{key1: &#39;Current tab&#39;}`.
    */
   content?: TabsContent;
-
   /**
    * To enable the visual helper `.dnb-section` on to the content wrapper. Use a supported modifier from the <a href="/uilib/components/section/properties">Section component</a>. Defaults to `null`.
    */
   content_style?: SectionStyleTypes;
-
   /**
    * To modify the `spacing` onto the content wrapper. Use a supported modifier from the <a href="/uilib/components/section/properties">Section component</a>. Defaults to `large`.
    */
   content_spacing?: SectionSpacing;
   label?: string;
-
   /**
    * Define what HTML element should be used. You can provide e.g. `tab_element={GatsbyLink}` – you may then provide the `to` property inside every entry (`data={[{ to: &#39;url&#39;, ... }]}`). Defaults to `<button>`.
    */
   tab_element?: TabsTabElement;
-
   /**
    * In case one of the tabs should be opened by a `key`.
    */
   selected_key?: TabsSelectedKey;
-
   /**
    * To align the tab list on the right side `align="right"`. Defaults to `left`.
    */
   align?: TabsAlign;
-
   /**
    * To enable the visual helper `.dnb-section` inside the tabs list. Use a supported modifier from the <a href="/uilib/components/section/properties">Section component</a>. Defaults to `null`.
    */
   tabs_style?: SectionStyleTypes;
-
   /**
    * To modify the `spacing` inside the tab list. Defaults to `null`.
    */
   tabs_spacing?: boolean;
-
   /**
    * If set to `true`, the default horizontal border line under the tablist will be removed. Defaults to `false`.
    */
   no_border?: boolean;
-
   /**
    * If set to `true`, the navigation icons will have a straight border at their outside. This feature is meant to be used when the Tabs component goes all the way to the browser window. Defaults to `false`.
    */
   nav_button_edge?: boolean;
   use_hash?: boolean;
-
   /**
    * If set to `true`, the Tabs content will pre-render all contents. The visibility will be handled by using the `hidden` and `aria-hidden` HTML attributes. Defaults to `false`.
    */
   prerender?: boolean;
-
   /**
    * If set to `true`, the Tabs content will stay in the DOM. The visibility will be handled by using the `hidden` and `aria-hidden` HTML attributes. Similar to `prerender`, but in contrast, the content will render once the user is activating a tab. Defaults to `false`.
    */
   prevent_rerender?: boolean;
-
   /**
    * If set to `true`, the content will scroll on tab change, until all tabs will be visible on the upper side of the browser window view. Defaults to `false`.
    */
   scroll?: boolean;
-
   /**
    * If set to `true`, an overlaying skeleton with animation will be shown.
    */
@@ -109,28 +95,23 @@ export interface TabsProps
   id?: string;
   class?: string;
   className?: string;
-
   /**
    * <em>(required)</em> the content to render. Can be a function, returning the current tab content `(key) => (&#39;Current tab&#39;)`, a React Component or an object with the keys and content `{key1: &#39;Current tab&#39;}`.
    */
   children?: TabsChildren;
   render?: (...args: any[]) => any;
-
   /**
    * (preferred) this event gets triggered once the tab changes its selected key. Returns `{ key, selected_key, focus_key, event }`.
    */
   on_change?: (...args: any[]) => any;
-
   /**
    * This event gets triggered once the user&#39;s mouse enters a tab (hover). Returns `{ key, selected_key, focus_key, event }`.
    */
   on_mouse_enter?: (...args: any[]) => any;
-
   /**
    * This event gets triggered once the tab gets clicked. Returns `{ key, selected_key, focus_key, event }`.
    */
   on_click?: (...args: any[]) => any;
-
   /**
    * This event gets triggered once the tab changes its focus key. Returns `{ key, selected_key, focus_key, event }`.
    */
@@ -148,4 +129,4 @@ export interface DummyProps {
    */
   children: React.ReactNode;
 }
-export const Dummy: React.FC<DummyProps>;
+export declare const Dummy: React.FC<DummyProps>;