@dnb/eufemia 9.26.1 → 9.27.0

package/es/shared/Context.d.ts

@@ -1,46 +1,94 @@
-export function prepareContext(props?: {}): {
-    translation: any;
-    updateTranslation: (locale: any, translation: any) => void;
-    getTranslation: (props: any) => any;
-    locale: any;
-    locales: any;
-    skeleton: any;
-    Button: {};
-    Avatar: {};
-    AvatarGroup: {};
-    Breadcrumb: {};
-    BreadcrumbItem: {};
-    InfoCard: {};
-    Tag: {};
-    TagGroup: {};
-    Timeline: {};
-    TimelineItem: {};
-    VisuallyHidden: {};
-    Drawer: {};
-    Dialog: {};
-    NumberFormat: {};
+/**
+ * Web Context Context
+ *
+ */
+import React from 'react';
+import type { ButtonProps } from '../components/button/Button';
+import type { AvatarProps } from '../components/avatar/Avatar';
+import type { AvatarGroupProps } from '../components/avatar/AvatarGroup';
+import type { BreadcrumbProps } from '../components/breadcrumb/Breadcrumb';
+import type { BreadcrumbItemProps } from '../components/breadcrumb/BreadcrumbItem';
+import type { InfoCardProps } from '../components/info-card/InfoCard';
+import type { TagProps } from '../components/tag/Tag';
+import type { TagGroupProps } from '../components/tag/TagGroup';
+import type { TimelineProps } from '../components/timeline/Timeline';
+import type { TimelineItemProps } from '../components/timeline/TimelineItem';
+import type { VisuallyHiddenProps } from '../components/visually-hidden/VisuallyHidden';
+import type { DrawerProps } from '../components/drawer/types';
+import type { DialogProps } from '../components/dialog/types';
+export declare type ContextProps = {
+    Button?: Partial<ButtonProps>;
+    Avatar?: Partial<AvatarProps>;
+    AvatarGroup?: Partial<AvatarGroupProps>;
+    Breadcrumb?: Partial<BreadcrumbProps>;
+    BreadcrumbItem?: Partial<BreadcrumbItemProps>;
+    InfoCard?: Partial<InfoCardProps>;
+    Tag?: Partial<TagProps>;
+    TagGroup?: Partial<TagGroupProps>;
+    Timeline?: Partial<TimelineProps>;
+    TimelineItem?: Partial<TimelineItemProps>;
+    VisuallyHidden?: Partial<VisuallyHiddenProps>;
+    Drawer?: Partial<DrawerProps>;
+    Dialog?: Partial<DialogProps>;
+    NumberFormat?: Record<string, unknown>;
+    Table?: Record<string, unknown>;
+    HelpButton?: Record<string, unknown>;
+    Pagination?: Record<string, unknown>;
+    FormRow?: Record<string, unknown>;
+    /**
+     * Will enable all skeletons inside this provider/context scope
+     */
+    skeleton?: boolean | string;
+    /**
+     * Define what breakpoints should be used by the MediaQuery component and hook
+     */
+    breakpoints?: Record<string, string>;
+    /**
+     * Defines the locale (internal translation) used by some components
+     */
+    locale?: Locale;
+    /**
+     * Provide your own translations. Use the same format as defined in the translation files
+     */
+    translation?: Translation;
+    /**
+     * Defines the currency used by the NumberFormat component
+     */
+    currency?: string;
+    /**
+     * Defines the currencyDisplay used by the NumberFormat component
+     */
+    currency_display?: string;
+    /**
+     * Update any given provider/context properties
+     */
+    update?: (props: ContextProps) => void;
+    /**
+     * Update any given provider/context properties, but only for the particular scope
+     */
+    updateCurrent?: (props: ContextProps) => void;
+    /**
+     * Update the used locale from within the context
+     */
+    setLocale?: (locale: Locale) => void;
+    /**
+     * Update the used locale from within the context, but only for the particular scope
+     */
+    setCurrentLocale?: (locale: Locale) => void;
+    locales?: Locales;
+    __newContext?: Record<string, string>;
+    updateTranslation?: (locale: Locale, translation: Translation) => void;
+    getTranslation?: (props?: GetTranslationProps) => Translation;
 };
+export declare type GetTranslationProps = {
+    lang?: Locale;
+    locale?: Locale;
+};
+export declare type Locale = string | 'nb-NO' | 'en-GB' | 'en-US';
+export declare type ComponentTranslationsName = string;
+export declare type ComponentTranslations = Record<string, string>;
+export declare type Locales = Record<Locale, Translation>;
+export declare type Translation = Record<ComponentTranslationsName, ComponentTranslations>;
+export declare const prepareContext: (props?: ContextProps) => ContextProps;
+declare const Context: React.Context<ContextProps>;
 export default Context;
-declare const Context: React.Context<{
-    translation: any;
-    updateTranslation: (locale: any, translation: any) => void;
-    getTranslation: (props: any) => any;
-    locale: any;
-    locales: any;
-    skeleton: any;
-    Button: {};
-    Avatar: {};
-    AvatarGroup: {};
-    Breadcrumb: {};
-    BreadcrumbItem: {};
-    InfoCard: {};
-    Tag: {};
-    TagGroup: {};
-    Timeline: {};
-    TimelineItem: {};
-    VisuallyHidden: {};
-    Drawer: {};
-    Dialog: {};
-    NumberFormat: {};
-}>;
-import React from "react";

package/es/shared/Context.js

@@ -40,23 +40,10 @@ export const prepareContext = (props = {}) => {
 
       return context.translation;
     },
-    locale: null,
     locales,
-    skeleton: null,
-    Button: {},
-    Avatar: {},
-    AvatarGroup: {},
-    Breadcrumb: {},
-    BreadcrumbItem: {},
-    InfoCard: {},
-    Tag: {},
-    TagGroup: {},
-    Timeline: {},
-    TimelineItem: {},
-    VisuallyHidden: {},
-    Drawer: {},
-    Dialog: {},
-    NumberFormat: {}
+    locale: null,
+    breakpoints: null,
+    skeleton: null
   }, props), {}, {
     translation
   });
@@ -82,7 +69,7 @@ const Context = React.createContext(prepareContext({
 export default Context;
 
 function destruct(source, validKeys) {
-  for (let k in source) {
+  for (const k in source) {
     if (String(k).includes('.')) {
       const list = k.split('.');
 

package/es/shared/Eufemia.js

@@ -2,7 +2,7 @@ export function init() {
   if (typeof window !== 'undefined') {
     class Eufemia {
       get version() {
-        return '9.26.1';
+        return '9.27.0';
       }
 
     }

package/es/shared/MediaQuery.d.ts

@@ -1,38 +1,19 @@
-import * as React from 'react';
-export type MediaQueryMatchOnSsr = string | boolean;
-export type MediaQueryWhen = string | any[] | Object;
-export type MediaQueryNot = string | boolean;
-export type MediaQueryQuery = string | Object;
-
-/**
- * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
- */
-export interface MediaQueryProps extends React.HTMLProps<HTMLElement> {
-  /**
-   * If set to true, it will match and return the given children during SSR.
-   */
-  matchOnSSR?: MediaQueryMatchOnSsr;
-
-  /**
-   * Define a list of sizes to match, given as an object `{ min: &#39;small&#39;, max: &#39;medium&#39; }` or as an array `[{ min: &#39;small&#39;, max: &#39;medium&#39; }, { min: &#39;medium&#39;, max: &#39;large&#39; }]`.
-   */
-  when?: MediaQueryWhen;
-
-  /**
-   * Reverts the defined queries as a whole.
-   */
-  not?: MediaQueryNot;
-
-  /**
-   * A MediaQuery as a string similar to the CSS API, but without `@media`.
-   */
-  query?: MediaQueryQuery;
-  children?: React.ReactNode;
-}
-export default class MediaQuery extends React.Component<
-  MediaQueryProps,
-  any
-> {
-  static defaultProps: object;
-  render(): JSX.Element;
+import React from 'react';
+import { onMediaQueryChange } from './MediaQueryUtils';
+import type { MediaQueryProps, MediaQueryState, MediaQueryListener } from './MediaQueryUtils';
+export type { MediaQueryProps };
+export { onMediaQueryChange };
+export default class MediaQuery extends React.PureComponent<MediaQueryProps, MediaQueryState> {
+    static contextType: React.Context<import("./Context").ContextProps>;
+    listener: MediaQueryListener;
+    state: {
+        match: any;
+        mediaQueryList: any;
+    };
+    constructor(props: any, context: any);
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    componentDidUpdate(props: any): void;
+    bindListener: () => void;
+    render(): React.ReactNode;
 }

package/es/shared/MediaQuery.js

@@ -1,6 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import React from 'react';
-import PropTypes from 'prop-types';
 import { isTrue } from './component-helper';
 import Context from './Context';
 import { makeMediaQueryList, createMediaQueryListener, onMediaQueryChange, isMatchMediaSupported } from './MediaQueryUtils';
@@ -9,6 +8,8 @@ export default class MediaQuery extends React.PureComponent {
   constructor(props, context) {
     super(props);
 
+    _defineProperty(this, "listener", void 0);
+
     _defineProperty(this, "state", {
       match: null,
       mediaQueryList: null
@@ -73,20 +74,4 @@ export default class MediaQuery extends React.PureComponent {
 
 }
 
-_defineProperty(MediaQuery, "contextType", Context);
-
-_defineProperty(MediaQuery, "defaultProps", {
-  matchOnSSR: null,
-  when: null,
-  not: null,
-  query: null,
-  children: null
-});
-
-process.env.NODE_ENV !== "production" ? MediaQuery.propTypes = {
-  matchOnSSR: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  when: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
-  not: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  query: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-  children: PropTypes.node
-} : void 0;
+_defineProperty(MediaQuery, "contextType", Context);

package/es/shared/MediaQueryUtils.d.ts

@@ -1,3 +1,52 @@
+/// <reference types="react" />
+export declare type MediaQuerySizes = 'small' | 'medium' | 'large' | 'x-large' | 'xx-large';
+export declare type MediaQueryBreakpoints = Partial<Record<MediaQuerySizes, string>>;
+export declare const defaultBreakpoints: MediaQueryBreakpoints;
+export declare type MediaQueryCondition = {
+    min?: number | string | MediaQuerySizes;
+    max?: number | string | MediaQuerySizes;
+    screen?: boolean;
+    minWidth?: number | string | MediaQuerySizes;
+    maxWidth?: number | string | MediaQuerySizes;
+    orientation?: string;
+    handheld?: boolean;
+    not?: boolean;
+    all?: boolean;
+    monochrome?: boolean;
+    aspectRatio?: string;
+} | string;
+export declare type MediaQueryProperties = {
+    /**
+     * A MediaQuery as a string similar to the CSS API, but without `@media`.
+     */
+    query?: MediaQueryCondition;
+    /**
+     * Define a list of sizes to match, given as an object `{ min: 'small', max: 'medium' }` or as an array `[{ min: 'small', max: 'medium' }, { min: 'medium', max: 'large' }]`.
+     */
+    when?: MediaQueryCondition | Array<MediaQueryCondition>;
+    /**
+     * Reverts the defined queries as a whole.
+     */
+    not?: boolean;
+    /**
+     * For debugging
+     */
+    log?: boolean;
+} & MediaQueryCondition;
+export declare type MediaQueryListener = () => void;
+export declare type MediaQueryProps = {
+    /**
+     * If set to true, it will match and return the given children during SSR.
+     */
+    matchOnSSR?: boolean;
+    children?: React.ReactNode;
+} & MediaQueryProperties;
+export declare type MediaQueryState = {
+    match?: boolean | null;
+    mediaQueryList?: {
+        matches: boolean;
+    };
+};
 /**
  * Adds a listener to a given MediaQuery
  *
@@ -8,9 +57,15 @@
  * @param {function} callback function that gets emitted when the given media query
  * @returns function to remove listeners when called
  */
-export function onMediaQueryChange(property: any, callback: Function, { runOnInit }?: {
+export declare function onMediaQueryChange(property: MediaQueryProperties | string, callback?: (matches: boolean, mediaQueryList: MediaQueryList) => void, { runOnInit }?: {
     runOnInit?: boolean;
-}): () => any;
+}): MediaQueryListener;
+/**
+ * Returns a boolean for whether window.matchMedia is supported or not
+ *
+ * @returns boolean
+ */
+export declare const isMatchMediaSupported: () => boolean;
 /**
  * Convert user defined media queries to an valid MediaQueryList we can assign a listener to
  *
@@ -21,12 +76,7 @@ export function onMediaQueryChange(property: any, callback: Function, { runOnIni
  * @property {boolean} log - print used query to console
  * @returns MediaQueryList type
  */
-export function makeMediaQueryList({ query, when, not, log }?: {
-    query: any;
-    when: any;
-    not?: any;
-    log?: boolean;
-}, breakpoints?: any): MediaQueryList;
+export declare function makeMediaQueryList({ query, when, not, log }?: MediaQueryProperties, breakpoints?: MediaQueryBreakpoints): MediaQueryList;
 /**
  * Adds a listener to the window.matchMedia Browser API
  *
@@ -34,7 +84,7 @@ export function makeMediaQueryList({ query, when, not, log }?: {
  * @param {function} callback callback function
  * @returns function to remove listeners when called
  */
-export function createMediaQueryListener(mediaQueryList: MatchMediaList, callback: Function): () => any;
+export declare function createMediaQueryListener(mediaQueryList: MediaQueryList, callback: (matches: boolean, event: any) => void): MediaQueryListener;
 /**
  * Builds a valid media query we can use on window.matchMedia(...)
  *
@@ -44,23 +94,11 @@ export function createMediaQueryListener(mediaQueryList: MatchMediaList, callbac
  * @property {boolean} not - reverses a media query
  * @returns media queries as a string
  */
-export function buildQuery({ query, when, not }: {
-    query?: any;
-    when?: any;
-    not?: any;
-}, breakpoints: any): any;
+export declare function buildQuery({ query, when, not }?: MediaQueryProperties, breakpoints?: MediaQueryBreakpoints): MediaQueryCondition;
 /**
  * Convert a media query from various formats to a valid string based media query
  *
  * @param {array|object|string} query media query definitions
  * @returns media query string
  */
-export function convertToMediaQuery(query: any[] | object | string, breakpoints?: any): any;
-export const defaultBreakpoints: {
-    small: string;
-    medium: string;
-    large: string;
-    'x-large': string;
-    'xx-large': string;
-};
-export function isMatchMediaSupported(): boolean;
+export declare function convertToMediaQuery(query: MediaQueryCondition | Array<MediaQueryCondition>, breakpoints?: MediaQueryBreakpoints): string;

package/es/shared/MediaQueryUtils.js

@@ -122,7 +122,7 @@ export function buildQuery({
   }
 
   if (isTrue(not)) {
-    query = reverseQuery(query);
+    query = reverseQuery(String(query));
   }
 
   return query || 'not';
@@ -241,7 +241,7 @@ function objToMediaQuery(obj, breakpoints = null) {
   return query;
 }
 
-function getValueByFeature(value, types = {}) {
+function getValueByFeature(value, types = null) {
   types = types || defaultBreakpoints;
 
   if (Object.prototype.hasOwnProperty.call(types, value)) {

package/es/shared/Provider.d.ts

@@ -1,15 +1,39 @@
-import * as React from 'react';
-
 /**
- * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
+ * Lib Provider
+ *
  */
-export interface ProviderProps extends React.HTMLProps<HTMLElement> {
-  value?: Object;
-  locale?: string;
-  skeleton?: boolean;
-  children: React.ReactNode;
-}
-export default class Provider extends React.Component<ProviderProps, any> {
-  static defaultProps: object;
-  render(): JSX.Element;
+import React from 'react';
+import type { ContextProps } from './Context';
+export declare type ProviderProps = {
+    /**
+     * Send in an object that gets spread as properties to the Provider
+     */
+    value?: ContextProps;
+    /**
+     * Define the locale used for every Eufemia components inside this Provider. Defaults to nb-NO
+     */
+    locale?: string;
+    /**
+     * Enable skeleton of every Eufemia component inside this Provider
+     */
+    skeleton?: boolean | string;
+    /**
+     * The content
+     */
+    children: React.ReactNode;
+} & ContextProps;
+export declare type ProviderState = {
+    /** For internal use */
+    isRoot?: boolean;
+    _listenForPropChanges?: boolean;
+    _startupProps?: ContextProps;
+} & ContextProps;
+export default class Provider extends React.PureComponent<ProviderProps, ProviderState> {
+    static contextType: React.Context<ContextProps>;
+    static defaultProps: Record<string, unknown>;
+    static getDerivedStateFromProps(props: any, state: any): ContextProps;
+    static mergeContext(props: any, context: any): any;
+    constructor(props: any, context: any);
+    setNewContext(__newContext: any): void;
+    render(): JSX.Element;
 }

package/es/shared/Provider.js

@@ -10,10 +10,9 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 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; }
 
 import React from 'react';
-import PropTypes from 'prop-types';
 import Context, { prepareContext } from './Context';
 import { makeUniqueId } from './component-helper';
-import { prepareFormRowContext } from '../components/form-row/FormRow';
+import { prepareFormRowContext } from '../components/form-row/FormRowHelpers';
 export default class Provider extends React.PureComponent {
   static getDerivedStateFromProps(props, state) {
     if (state._listenForPropChanges) {
@@ -56,7 +55,7 @@ export default class Provider extends React.PureComponent {
 
     const merge = _objectSpread(_objectSpread({}, value), rest);
 
-    let mergedContext = _objectSpread(_objectSpread({}, context), merge);
+    const mergedContext = _objectSpread(_objectSpread({}, context), merge);
 
     if (context.FormRow && merge.FormRow) {
       mergedContext.FormRow = _objectSpread(_objectSpread({}, context.FormRow), merge.FormRow);
@@ -108,10 +107,10 @@ export default class Provider extends React.PureComponent {
       });
     };
 
+    pC.isRoot = isRoot;
+    pC._listenForPropChanges = true;
+    pC._startupProps = startupProps;
     this.state = pC;
-    this.state.isRoot = isRoot;
-    this.state._listenForPropChanges = true;
-    this.state._startupProps = startupProps;
   }
 
   setNewContext(__newContext) {
@@ -140,11 +139,4 @@ export default class Provider extends React.PureComponent {
 
 _defineProperty(Provider, "contextType", Context);
 
-_defineProperty(Provider, "defaultProps", {});
-
-process.env.NODE_ENV !== "production" ? Provider.propTypes = {
-  value: PropTypes.object,
-  locale: PropTypes.string,
-  skeleton: PropTypes.bool,
-  children: PropTypes.node.isRequired
-} : void 0;
+_defineProperty(Provider, "defaultProps", {});

package/es/shared/component-helper.d.ts

@@ -39,7 +39,7 @@ export function makeUniqueId(prefix?: string, length?: number): string;
 export function slugify(s: any): string;
 export function matchAll(string: any, regex: any): any[];
 export function getPreviousSibling(className: [string], element: [HTMLElement]): [HTMLElement];
-export function isChildOfElement(element: any, target: any, cb?: any): any;
+export function isChildOfElement(element: HTMLElement, target: HTMLElement, callback?: Function): HTMLElement | null;
 export function roundToNearest(num: any, target: any): any;
 export function isInsideScrollView(currentElement: any, returnElement?: boolean): boolean | [HTMLElement];
 export function convertJsxToString(elements: any, separator?: any): any;

package/es/shared/component-helper.js

@@ -507,14 +507,14 @@ export const getPreviousSibling = (className, element) => {
 
   return element;
 };
-export const isChildOfElement = (element, target, cb = null) => {
+export const isChildOfElement = (element, target, callback = null) => {
   try {
     const contains = element => {
-      if (cb) {
-        const res = cb(element);
+      if (callback) {
+        const res = callback(element);
 
-        if (typeof res === 'boolean') {
-          return res;
+        if (res) {
+          return element;
         }
       }
 

package/es/shared/interfaces.d.ts

@@ -8,3 +8,16 @@ export interface ISpacingElementProps {
     left?: SpaceTypes;
 }
 export declare type SpaceTypes = string | boolean | number;
+export declare type DataAttributeTypes = {
+    /**
+     * When using HTMLAttributes on object to define props,
+     * we need not get data-* attributes as valid types:
+     *
+     * triggerAttributes={{
+     *   'data-testid': 'html-selector'
+     * }}
+     *
+     * Effects: triggerAttributes, closeButtonAttributes
+     */
+    'data-testid'?: string;
+};

package/es/shared/locales/en-GB.d.ts

@@ -66,6 +66,7 @@ declare var _default: {
             show_all: string;
             show_options_sr: string;
             aria_live_options: string;
+            selected_sr: string;
             indicator_label: string;
         };
         Modal: {

package/es/shared/locales/en-GB.js

@@ -66,6 +66,7 @@ export default {
       show_all: 'Show everything',
       show_options_sr: 'Browse options, close with esc button',
       aria_live_options: '%s options',
+      selected_sr: 'Selected:',
       indicator_label: 'Getting data ...'
     },
     Modal: {

package/es/shared/locales/en-US.d.ts

@@ -67,6 +67,7 @@ declare var _default: {
             show_all: string;
             show_options_sr: string;
             aria_live_options: string;
+            selected_sr: string;
             indicator_label: string;
         };
         Modal: {

package/es/shared/locales/index.d.ts

@@ -66,6 +66,7 @@ declare var _default: {
             show_all: string;
             show_options_sr: string;
             aria_live_options: string;
+            selected_sr: string;
             indicator_label: string;
         };
         Modal: {
@@ -186,6 +187,7 @@ declare var _default: {
             show_all: string;
             show_options_sr: string;
             aria_live_options: string;
+            selected_sr: string;
             indicator_label: string;
         };
         Modal: {

package/es/shared/locales/nb-NO.d.ts

@@ -66,6 +66,7 @@ declare var _default: {
             show_all: string;
             show_options_sr: string;
             aria_live_options: string;
+            selected_sr: string;
             indicator_label: string;
         };
         Modal: {

package/es/shared/locales/nb-NO.js

@@ -66,6 +66,7 @@ export default {
       show_all: 'Vis alt',
       show_options_sr: 'Bla gjennom alternativer, lukk med esc knappen',
       aria_live_options: '%s alternativer',
+      selected_sr: 'Valgt:',
       indicator_label: 'Henter data ...'
     },
     Modal: {

package/es/shared/useMediaQuery.d.ts

@@ -1 +1,3 @@
-export default function useMediaQuery(props: any): boolean;
+import type { MediaQueryProps } from './MediaQueryUtils';
+export type { MediaQueryProps };
+export default function useMediaQuery(props: MediaQueryProps): boolean;

package/es/shared/useTranslation.d.ts

@@ -1,28 +1,7 @@
 export function getTranslation(id: any, params: any): JSX.Element;
 export default function useTranslation(id: any, params: any): any;
 export class Translation extends React.PureComponent<any, any, any> {
-    static contextType: React.Context<{
-        translation: any;
-        updateTranslation: (locale: any, translation: any) => void;
-        getTranslation: (props: any) => any;
-        locale: any;
-        locales: any;
-        skeleton: any;
-        Button: {};
-        Avatar: {};
-        AvatarGroup: {};
-        Breadcrumb: {};
-        BreadcrumbItem: {};
-        InfoCard: {};
-        Tag: {};
-        TagGroup: {};
-        Timeline: {};
-        TimelineItem: {};
-        VisuallyHidden: {};
-        Drawer: {};
-        Dialog: {};
-        NumberFormat: {};
-    }>;
+    static contextType: React.Context<import("./Context").ContextProps>;
     static propTypes: {
         id: PropTypes.Requireable<string>;
         children: PropTypes.Requireable<string>;