loon-bulma-react 2022.3.5 → 2022.3.8

package/README.md

@@ -24,6 +24,7 @@
   - [DataTable](#component-datatable)
   - [Footer](#component-footer)
   - [Icons (FontAwesome)](#component-icons)
+  - [Kbd & Kbds](#component-kbd) (KeyBoarD)
   - [Link & LinkButon](#component-linkbutton)
   - [Menu](#component-menu-2)
   - [Messages & Notificaties](#component-messages)
@@ -46,6 +47,8 @@
       - TimeInput
       - DateTimeInput
       - TextAreaInput
+      - FileInput
+      - BasicInput
     - [CheckBox](#form-checkbox)
     - [Ranges](#form-ranges)
       - Range
@@ -54,6 +57,7 @@
       - Select
       - MultiSelect
     - [Validatie](#form-validatie)
+    - [Form](#form-form)
     - [Form-builder](#form-component)
 - [Publiceren](#publiceren)
 
@@ -742,6 +746,22 @@ Daar kan wel meer worden opgegeven. Voor de IconText component wordt ook de kleu
 </p>
 ```
 
+### Kbd & Kbds (Keyboard Key, Keyboard Key group) <a id="component-kbd"></a>
+
+Een `<Kbd>` is de weergave van een Keyboard Key. Dus toon bijvoorbeeld een 'S' als een S op een toetsenbord. Bijvoorbeeld voor het weergeven van hotkeys.
+
+De `<Kbds>`-component gebruikt je om emerdere keyboard-keys bij elkaar te zetten, gescheiden door (default) een +-teken of een ander teken met de `separator`-prop.
+
+```tsx
+<>
+  <Kdb>Shift</Kdb>
+  <Kbd className="custom class">enter</Kbd>
+
+  <Kbds keys={['ctrl', 'shift', 'x']} />
+  <Kbds keys={['ctrl', 'shift', 'alt', 'S']} separator=" and " />
+</>
+```
+
 ### Link & LinkButton <a id="component-linkbutton"></a>
 
 Link en LinkButton zijn bedoelt om links (`<a>`) en buttons (`<button>`) er, bijvoorbeeld in een tekst, hetzelfde er uit te laten zien. Een Link bevat een url, target etc. die je ook in de `<a>`-tag aantreft, de LinkButton bevat een `onClick()`-methode. Ze zien er wel hetzelfde uit.
@@ -774,9 +794,9 @@ Andere elementen worden **niet** gerendered.
     <Menu.Item>Grover</Menu.Item>
     <Menu.Item>Oscar</Menu.Item>
     <Menu.ExpandableItem label="Sesamstraat" startExpanded={true}>
-      <MenuItem>Ieniemienie</MenuItem>
-      <MenuItem>Pino</MenuItem>
-      <MenuItem>Tommy</MenuItem>
+      <Menu.Item>Ieniemienie</Menu.Item>
+      <Menu.Item>Pino</Menu.Item>
+      <Menu.Item>Tommy</Menu.Item>
     </Menu.ExpandableItem>
 
     <Menu.ItemGroup label="Stuff...">
@@ -1152,26 +1172,30 @@ De library bevat componenten om als losse inputs, selects, ranges of checkboxes
   - _TimeInput_: invoeren van een tijd
   - _DateTimeInput_: invoeren van een datum & een tijd als combi
   - _TextAreaInput_: invoer van een tekst
+  - _FileInput_: invoer van een file
+  - _BasicInput_: zelf in te stellen input
 - [Checkbox](#form-checkbox)
 - [Ranges](#form-ranges)
   - _Range_: een getal selecteren
   - _MultiRange_: 2 getallen selecteren (een range)
 - [Select](#form-select)
 - [Validatie](#form-validatie)
+- [Form](#form-form)
 - [Form-builder](#form-component)
 
 ### Input Types<a id="form-input"></a>
 
 Er zijn verschillende soorten inputs voor de afhandeling van input-types. Er zijn een aantal props die op alle inputs voorkomen:
 
-- `name`: input name voor in een form
-- `id`: id van de input
+- `name`: input name voor in een form (_required_)
+- `id`: id van de input, als niet opgegeven wordt de `name` gebruikt
 - `label`: label-tekst voor een input, voor als dat afwijkt van de `name`-prop
 - `labelHidden`: boolean, verbergt het label als die alleen voor screenreaders beschikbaar moet zijn.
 - `placeholder`: placeholder-tekst voor een input.
 - `tooltip`: tooltip voor een input (`<input title="..." />`)
 - `disabled`: input disabled
-- `validatie`: een object met wat standaard-validatie-opties en een onValidate-function input
+- `errorMessage`: een errormessage van buiten de component. Voor als je validatie anders wilt oplossen. Wordt altijd getoont
+- `validatie`: een object met wat standaard-validatie-opties en een onValidate-function input. Een validatie-error wordt alleen getoont als de input 'touched' is.
   - `required`: input is verplicht
   - `max`: maximale waarde
     - text: input max length
@@ -1187,6 +1211,7 @@ Er zijn verschillende soorten inputs voor de afhandeling van input-types. Er zij
   - `onValidate()`: een eigen function opgeven voor validatie
 - `keyboardType`: wat voor toetsenbord moet er op een smartphone of tablet gebruikt worden
 - `direction`: orientatie van de input (horizontaal of vertical, default = 'horizontal')
+- `size`: de grootte van een input
 
 - Tekst:
   - **TextInput:** invoeren van tekst, urls, etc.
@@ -1202,11 +1227,14 @@ Er zijn verschillende soorten inputs voor de afhandeling van input-types. Er zij
   - **TimeInput:** invoer van een tijdstip. De value kan als `string` of `Date` worden opgegeven
   - **DateTimeInput:** invoer-combi voor een datum & tijd. De value kan als `string` of `Date` worden opgegeven
 - Overig
+  - **BasicInput** een input om helemaal zelf te kunnen instellen
   - **ColorInput** een invoer voor een kleur. Altijd een hex-waarde, de echte selectie is afhankelijk van de browser
   - **HiddenInput** een invoer die wel belangrijk is, maar niet gezien en niet bewerkt mag worden. Heeft vanzelfsprekend geen styling
+  - **FileInput** invoer van een (of meer) files
 
 ```tsx
 <div>
+  <BasicInput name="something" type="text">
   <TextInput type="text" name="TextInput" id="textinput" validatie={{required: true}}/>
   <EmailInput name="EmailInput" id="emailinput" validatie={{required: true}}/>
   <PasswordInput type="password" name="PasswordInput" id="passwordinput" validatie={{min: 10}}/>
@@ -1214,11 +1242,12 @@ Er zijn verschillende soorten inputs voor de afhandeling van input-types. Er zij
 
   <DateInput name="DateInput" id="dateinput" value={new Date()} validatie={{min: '2021-01-01', max: '2021-12-31'}}/>
   <TimeInput name="TimeInput" id="timeinput" value="15:30"/>
-  <DateTimeInput name="DateTimeInput" id="datetimeinput" />
+  <DateTimeInput name="DateTimeInput" id="datetimeinput" errorMessage="Kiekeboe" />
 
   <NumberInput name="NumberInput" id="numberinput" validatie={{required: true, min:-10, max: 10}}/>
 
   <ColorInput name="ColorInput" id="colorinput" value="#ff8000" direction="vertical">
+  <FileInput name="file" direction="horizontal">
 
   <HiddenInput name="HiddenInput" value="bazinga!" id="hiddenInput" required={true}/>
 
@@ -1227,10 +1256,16 @@ Er zijn verschillende soorten inputs voor de afhandeling van input-types. Er zij
 
 ### CheckBox <a id="form-checkbox"></a>
 
-> Was voorheen Checkbox (lowercase B), maar hebben we nu CheckBox van gemaakt
+<<<<<<< HEAD
+Wat anders is aan deze input, is dat de `size`-prop geen effect heeft. Er is maar 1 grootte.Een checkbox werkt zoals je verwacht:
+=======
+
+> Was voorheen Checkbox (lowercase B), maar hebben we nu CheckBox van gemaakt. Wat anders is aan deze input, is dat de `size`-prop geen effect heeft. Er is maar 1 grootte.
 
 Een checkbox werkt zoals je verwacht:
 
+> > > > > > > e2a755af447d47404c4b0a4017dbc02ec903de5e
+
 ```tsx
 <div>
   <CheckBox name="CheckboxInput" id="checkboxinput" label="Dit is een checkbox" validatie={{ required: true }} />
@@ -1390,6 +1425,65 @@ export type FormValidatie = {
 - `pattern`: voor tekst-inputs: voldoet de waarde aan deze regex. In EmailInput overschrijft deze de default e-mail-validatie regex.
 - `onValidate()`: een eigen validatie-methode (als gewenst). Wordt aangeroepen als het veld wordt gevalideerd. De methode met een lege string als _geldig_ of een foutmelding als _ongeldig_ returnen.
 
+### Form <a id="form-form"></a>
+
+De `<Form>`-component is een wrapper voor een gewone `<form>`-tag. Hij bevat (als het goed is) alle normale attributen die ook bij een gewone `<form>`-tag te vinden zijn. Deze component maakt het mogelijk om voor alle inputs in het form de `direction`- en de `size`-attributen in te stellen. Hij exporteert de inputs nogmaals in de vorm `<Form.XXX>` (zie onder).
+
+##### Alle verschillende inputs in een Form
+
+- `<Form.Inpu>`: een geheel zelf in te stellen `<input>`-tag, zelfde als `<BasicInput>`.
+- `<Form.Text>`: een input met type `text`, zelfde als `<TextInput>`.
+- `<Form.Password>`: een input met type `password`, zelfde als `<PasswordInput>`.
+- `<Form.Email>`: een input met type `email`, zelfde als `<EmailInput>`.
+- `<Form.TextArea>`: een `<textarea>` input, zelfde als `<TextArea>`.
+- `<Form.Color>`: een input met type `color`, zelfde als `<ColorInput>`.
+- `<Form.Number>`: een input met type `number`, zelfde als `<NumberInput>`.
+- `<Form.Range>`: een input met type `range`, zelfde als `<RangeInput>`.
+- `<Form.MultiRange>`: een input voor 2 numerieke waarden, zelfde als `<MultiRangeInput>`.
+- `<Form.Select>`: een input met type `select`, zelfde als `<Select>`.
+- `<Form.MultiSelect>`: een input met type `select`, zelfde als `<MultiSelect>`.
+- `<Form.Checkbox>`: een input met type `checkbox`, zelfde als `<Checkbox>`.
+- `<Form.Date>`: een input met type `date`, zelfde als `<DateInput>`.
+- `<Form.Time>`: een input met type `time`, zelfde als `<TimeInput>`.
+- `<Form.DateTime>`: een input met type `datetime-local`, zelfde als `<DateTimeInput>`.
+- `<Form.File>`: een input met type `file`, zelfde als `<FileInput>`.
+- `<Form.Hidden>`: een input met type `hidden`, zelfde als `<HiddenInput>`.
+
+##### Andere componenten binnen `<Form>`
+
+- `<Form.Line>` Een wrapper voor meerdere inputs, om deze op een lijn te kunnen zetten (achter elkaar). Dan moet je \__wel_ zelf de direction instellen als die afwijkt van de normale form-direction.
+- `Form.Space`: een container voor vrije ruimte. Hier kan je helemaal losgaan met eigen componenten. Deze container houdt zich wel aan de form-direction voor de positie.
+- `<Form.Buttons`: een container voor de buttons. Werkt hetzelfde als `<ButtonGroup>`. Voor bijvoorbeeld de submit-button voor een form.
+
+##### Voorbeeld
+
+```tsx
+<>
+  <Form direction={direction} size={size}>
+    <Form.Text name="text" placeholder="Name" />
+
+    <Form.Space>
+      <img src="#" alt="it's free real estate" />
+    </Form.Space>
+
+    <Form.Select name="select" options={['Option 1', 'Option 2', 'Option 3']} />
+    <Form.CheckBox name="checkbox" />
+
+    <Form.Line>
+      <Form.Date name="startDate" />
+      <Form.Date name="endDate" />
+    </Form.Line>
+
+    <Form.TextArea name="comments" />
+
+    <Form.Buttons>
+      <Button.Success type="submit">Send</Button.Success>
+      <Button.Danger>Reset</Button.Danger>
+    </Form.Buttons>
+  </Form>
+</>
+```
+
 ### Form-Builder <a id="form-component"></a>
 
 Een **Form** is ook beschikbaar als component. Om te werken heeft die nodig:

package/dist/components/ButtonGroup/ButtonGroup.d.ts

@@ -1,8 +1,8 @@
-import { ReactNode } from 'react';
+import React from 'react';
 import { AlignmentProp, SizeProp } from '../../loon-react-bulma-types';
 declare type ButtonGroupProps = {
     /** Een buttongroup kan alleen Buttons als children hebben! */
-    children?: ReactNode;
+    children?: React.ReactNode;
     /** Moeten de buttons aan elkaar vast gezet worden (default = false)
      * @deprecated: use 'attach' instead */
     merge?: boolean;

package/dist/components/Calendar/Month/DayContainer.d.ts

@@ -1,4 +1,4 @@
-import { MouseEvent } from 'react';
+import React from 'react';
 import { BaseEventProps, CalendarOptions } from '../Props';
 /**
  * Component voor de dag-container in de maand-view
@@ -11,9 +11,9 @@ export declare function DayContainer<T extends BaseEventProps>(props: {
     /** de namen van de maanden */
     monthNames: string[];
     /** wat te doen als een event aangeklikt wordt */
-    onEventClick?: (event: T, clickEvent: MouseEvent<HTMLElement>) => void;
+    onEventClick?: (event: T, clickEvent: React.MouseEvent<HTMLElement>) => void;
     /** wat te doen als een dag aangeklikt wordt */
-    onDayClick?: (date: Date, clickEvent: MouseEvent<HTMLElement>) => void;
+    onDayClick?: (date: Date, clickEvent: React.MouseEvent<HTMLElement>) => void;
     /** opties voor deze container */
     options?: CalendarOptions<T>;
     /** de datum voor de container */

package/dist/components/Calendar/Month/MonthView.d.ts

@@ -1,4 +1,4 @@
-import { MouseEvent } from 'react';
+import React from 'react';
 import { BaseEventProps, CalendarOptions } from '../Props';
 declare type MonthViewProps<T> = {
     /** events voor deze view */
@@ -6,9 +6,9 @@ declare type MonthViewProps<T> = {
     /** opties voor deze view */
     options?: CalendarOptions<T>;
     /** event aangeklikt */
-    onEventClick?: (e: T, event: MouseEvent<HTMLElement>) => void;
+    onEventClick?: (e: T, event: React.MouseEvent<HTMLElement>) => void;
     /** dag-datum geklikt? */
-    onDayClick?: (date: Date, event: MouseEvent<HTMLElement>) => void;
+    onDayClick?: (date: Date, event: React.MouseEvent<HTMLElement>) => void;
     /** huidige geselecteerde datum */
     viewDate: Date;
 };

package/dist/components/Calendar/Week/AlldayContainer.d.ts

@@ -1,4 +1,4 @@
-import { MouseEvent } from 'react';
+import React from 'react';
 import { BaseEventProps, CalendarOptions } from '../Props';
 /**
  * Component voor de dag-container in de maand-view
@@ -8,7 +8,7 @@ import { BaseEventProps, CalendarOptions } from '../Props';
 export declare function AlldayContainer<T extends BaseEventProps>(props: {
     events: T[];
     /** wat te doen als een event aangeklikt wordt */
-    onEventClick?: (event: T, clickEvent: MouseEvent<HTMLElement>) => void;
+    onEventClick?: (event: T, clickEvent: React.MouseEvent<HTMLElement>) => void;
     /** wat te doen als een dag aangeklikt wordt */
     options?: CalendarOptions<T>;
 }): JSX.Element;

package/dist/components/Calendar/Week/HourRow.d.ts

@@ -1,4 +1,4 @@
-import { MouseEvent } from 'react';
+import React from 'react';
 import { BaseEventProps, CalendarOptions } from '../Props';
 /**
  * Component voor de dag-container in de maand-view
@@ -10,7 +10,7 @@ export declare function HourRow<T extends BaseEventProps>(props: {
     hour: number;
     events: T[];
     /** wat te doen als een event aangeklikt wordt */
-    onEventClick?: (event: T, clickEvent: MouseEvent<HTMLElement>) => void;
+    onEventClick?: (event: T, clickEvent: React.MouseEvent<HTMLElement>) => void;
     /** wat te doen als een dag aangeklikt wordt */
     options?: CalendarOptions<T>;
 }): JSX.Element;

package/dist/components/Calendar/Week/WeekView.d.ts

@@ -1,14 +1,14 @@
 import { BaseEventProps, CalendarOptions } from '../Props';
-import { MouseEvent } from 'react';
+import React from 'react';
 declare type WeekViewProps<T> = {
     /** events voor deze view */
     events: T[] | (() => T[]);
     /** opties voor deze view */
     options?: CalendarOptions<T>;
     /** event aangeklikt */
-    onEventClick?: (e: T, event: MouseEvent<HTMLElement>) => void;
+    onEventClick?: (e: T, event: React.MouseEvent<HTMLElement>) => void;
     /** dag-datum geklikt? */
-    onDayClick?: (date: Date, event: MouseEvent<HTMLElement>) => void;
+    onDayClick?: (date: Date, event: React.MouseEvent<HTMLElement>) => void;
     /** huidige geselecteerde datum */
     viewDate: Date;
 };

package/dist/components/Form/BaseInputProps.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { DirectionProp, KeyboardTypeProp } from '../../loon-react-bulma-types';
 export declare type BaseInputProps<T extends any = void> = {
     /** is dit veld disabled ? (optioneel) */
@@ -16,10 +17,14 @@ export declare type BaseInputProps<T extends any = void> = {
     direction?: DirectionProp;
     /** een object met validatie-regels */
     validation?: FormValidationType<T>;
+    /** eigen errorMessage voor validatie buiten component om */
+    errorMessage?: string | ((value: T | string | string[] | number | number[] | boolean | Date | FileList | any) => string);
     /** placeholder in input (optioneel) */
     placeholder?: string;
     /** Welk (virtueel) toetsenbord moet er gebruikt worden? (smartphones, tablets) */
     keyboardType?: KeyboardTypeProp;
+    /** on-key-down-event, bijvoorbeeld voor het gebruik van Hotkeys als dit element focused is */
+    onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
 };
 export declare type FormValidationType<T extends any = void> = {
     /** is een value required? */
@@ -29,7 +34,7 @@ export declare type FormValidationType<T extends any = void> = {
      * min-length voor strings
      * min-waarde voor ranges,
      * minimaal aantal selected in multiselect,
-     * min-date voor datum/tijd (YYYY-MM-DD, HH:mm, YYYY-MM-DDT:HH:mm).
+     * min-date voor datum/tijd ("YYYY-MM-DD", "HH:mm" of "YYYY-MM-DDT:HH:mm").
      * GEBRUIKT VOOR VALIDATIE */
     min?: number | string;
     /**
@@ -37,7 +42,7 @@ export declare type FormValidationType<T extends any = void> = {
      * max-length voor strings,
      * max-waarde voor ranges,
      * maximaal aantal selected in multiselect,
-     * max-date voor datum/tijd (YYYY-MM-DD, HH:mm, YYYY-MM-DDT:HH:mm).
+     * max-date voor datum/tijd ("YYYY-MM-DD", "HH:mm" of "YYYY-MM-DDT:HH:mm").
      * GEBRUIKT VOOR VALIDATIE */
     max?: number | string;
     /** voor <input type="multirange">: het minimale verschil tussen 2 waarden. */
@@ -51,7 +56,7 @@ export declare type FormValidationType<T extends any = void> = {
      * @param val de nieuwe te valideren waarde
      * @returns een string met daarin de foutmelding OF een lege string voor een valid waarde.
      */
-    onValidate?: (val: T | string | string[] | number | number[] | boolean | Date | FileList) => string;
+    onValidate?: (val: T | string | string[] | number | number[] | boolean | Date | FileList | any) => string;
 };
 export declare type BaseState<T extends any = void> = {
     /** de naam die in foutmeldingen komt */

package/dist/components/Form/InputError.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+declare type InputErrorProps = {
+    /** error gegenereerd door input-validation */
+    stateError?: string;
+    /** error van buitenaf opgegeven */
+    outsideError?: string;
+    /** is het field touched ? dan WEL een stateError opgeven */
+    touched?: boolean;
+};
+/** Toon een erorr bij een input */
+declare const InputError: (props: InputErrorProps) => JSX.Element | null;
+export { InputError };

package/dist/components/Form/Text/TextArea.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { SizeProp } from '../../../loon-react-bulma-types';
 import { BaseInputProps } from '../BaseInputProps';
 declare type TextAreaProps = BaseInputProps & {
@@ -12,6 +12,8 @@ declare type TextAreaProps = BaseInputProps & {
      * @param valid: is de nieuwe waarde geldig?
      */
     onValueChanged?(newVal: string, valid: boolean): any | void;
+    /** eigen onKeyDown voor TextAreas */
+    onKeyDown?(e: React.KeyboardEvent<HTMLTextAreaElement>): void;
 };
 /**
  * Maak een textarea met optionele validation.

package/dist/components/Icon/Icon.d.ts

@@ -1,5 +1,5 @@
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
-import { ReactNode } from 'react';
+import React from 'react';
 import { ColorProp, SizeProp } from '../../loon-react-bulma-types';
 declare type IconProps = {
     /** react font-awesome icon
@@ -37,7 +37,7 @@ declare type IconTextProps = {
     /** moet het icon spinnen of pulseren */
     animate?: 'spin' | 'pulse';
     /** tekst bij het icon */
-    children: ReactNode;
+    children: React.ReactNode;
 };
 /**
  * Toon een Font Awesome Icon met bijhorende tekst.

package/dist/components/Kbd/Kbd.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+/** Toon een Keyboard-Key als een 'key' */
+declare const Kbd: ({ children, className, }: {
+    /** optionele extra class */
+    className?: string | undefined;
+    /** content van de key */
+    children: React.ReactNode;
+}) => JSX.Element;
+/** Toont meerdere keyboard-keys, gescheiden door een teken */
+declare const Kbds: ({ keys, separator, className, }: {
+    /** weer te geven keys als string */
+    keys: string[];
+    /** de separator van de keys, default '+' */
+    separator?: string | undefined;
+    /** optionele className */
+    className?: string | undefined;
+}) => JSX.Element;
+export { Kbd, Kbds };

package/dist/components/Layout/AspectRatio/AspectRatio.d.ts

@@ -1,10 +1,10 @@
-import { ReactNode } from 'react';
+import React from 'react';
 /** Props voor een aspect-ratio */
 declare type AspectRatioProps = {
     /** de ratio (width x height) van het gewenste element */
     ratio: '1by1' | '5by4' | '4by5' | '4by3' | '3by4' | '3by2' | '2by3' | '5by3' | '3by5' | '16by9' | '9by16' | '2by1' | '1by2' | '3by1' | '1by3';
     /** het item dat aan de aspect-ratio moet voldoen */
-    children: ReactNode;
+    children: React.ReactNode;
     /**  */
     caption?: {
         placement: 'top' | 'bottom';

package/dist/components/Layout/Box/Box.d.ts

@@ -1,7 +1,7 @@
-import { ReactNode } from 'react';
+import React from 'react';
 declare type BoxProps = {
     /** de children van de box */
-    children: ReactNode;
+    children: React.ReactNode;
     /** andere classes om op de box toe te passen */
     classes?: string | string[];
 };

package/dist/components/Layout/Columns/Columns.d.ts

@@ -1,7 +1,7 @@
-import { ReactNode } from 'react';
+import React from 'react';
 export declare type ColumnsProps = {
     /** Children van de Columns. Moeten van het type @see Column zijn */
-    children: ReactNode;
+    children: React.ReactNode;
     /** de gap-grootte (stappen van .25rem), een margin tussen kolommen (default = 3, 0.75rem) */
     gap?: '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | undefined;
     /** mogen de kolommen over meerdere rijen verdeeld worden */

package/dist/components/Layout/Container/Container.d.ts

@@ -1,6 +1,6 @@
-import { ReactNode } from 'react';
+import React from 'react';
 declare type ContainerProps = {
-    children: ReactNode;
+    children: React.ReactNode;
     classes?: string;
 };
 /**

package/dist/components/Layout/Content/Content.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import React from 'react';
 import { SizeProp } from '../../../loon-react-bulma-types';
 /**
  * Een Content component voor generated content. De meeste html tags kunnen hier worden gebruikt.
@@ -7,6 +7,6 @@ import { SizeProp } from '../../../loon-react-bulma-types';
  */
 export declare function Content(props: {
     size?: SizeProp;
-    children: ReactNode;
+    children: React.ReactNode;
     classes?: string;
 }): JSX.Element;

package/dist/components/Layout/Footer/Footer.d.ts

@@ -1,8 +1,8 @@
-import { ReactNode } from 'react';
+import React from 'react';
 import { AlignmentProp } from '../../../loon-react-bulma-types';
 export declare type FooterProps = {
     /** de content voor de footer */
-    children: ReactNode;
+    children: React.ReactNode;
     /** alignment bij de footer. (default = 'c') */
     alignment?: AlignmentProp;
     classes?: {

package/dist/components/Layout/ScrollArea/ScrollArea.d.ts

@@ -1,9 +1,9 @@
-import { ReactNode } from 'react';
+import React from 'react';
 import { AlignmentProp } from '../../..';
 declare const ScrollArea: {
     Horizontal: (props: {
         /** wat moet er in de flexbox container komen */
-        children: ReactNode;
+        children: React.ReactNode;
         /** moeten de items gewrapped worden (meerdere rijen/kolommen) (default = false) */
         wrap?: boolean;
         /** moeten de items van eind tot begin of begin tot eind komen? (default = false) */
@@ -34,7 +34,7 @@ declare const ScrollArea: {
     }) => JSX.Element;
     Vertical: (props: {
         /** wat moet er in de flexbox container komen */
-        children: ReactNode;
+        children: React.ReactNode;
         /** moeten de items gewrapped worden (meerdere rijen/kolommen) (default = false) */
         wrap?: boolean;
         /** moeten de items van eind tot begin of begin tot eind komen? (default = false) */

package/dist/components/Layout/Section/Section.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import React from 'react';
 /**
  * Maak een simpele container m een pagina te verdelen in secties.
  * een section heeft een responsive padding.
@@ -6,6 +6,6 @@ import { ReactNode } from 'react';
  * @returns <div class="section">
  */
 export declare function Section(props: {
-    children: ReactNode;
+    children: React.ReactNode;
     classes?: string;
 }): JSX.Element;

package/dist/components/Link/Link.d.ts

@@ -1,7 +1,7 @@
-import { ReactNode } from 'react';
+import React from 'react';
 declare type LinkButtonProps = {
     /** de content van de button */
-    children?: ReactNode;
+    children?: React.ReactNode;
     /** onClick voor de button */
     onClick: (e: any) => any | void;
     /** een tooltip voor de button */
@@ -31,7 +31,7 @@ declare type LinkProps = {
     /** is dit een downloadlink? */
     download?: boolean;
     /** de inhoud van de link: wat is er te lezen / zien */
-    children?: ReactNode;
+    children?: React.ReactNode;
     /** een tooltip voor de button */
     tooltip?: string;
     id?: string;

package/dist/components/Message/Message.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import React from 'react';
 import { ColorProp, SizeProp } from '../../loon-react-bulma-types';
 /** maak de uiteindelijke message */
 declare const Message: {
@@ -21,7 +21,7 @@ declare const Message: {
 export { Message };
 export declare type MessageProps = {
     /** content van de message */
-    children: ReactNode;
+    children: React.ReactNode;
     /** Optionele titel voor de message */
     title?: string | undefined;
     /** de grootte van de tekst in de messages (default = undefined|'m') */

package/dist/components/Notification/Notification.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import React from 'react';
 import { ColorProp } from '../../loon-react-bulma-types';
 /**
  * Een instelbare notificatie. Default is een info-notificatie
@@ -26,7 +26,7 @@ export { Notification };
 /** Props voor een Notification */
 export declare type NotificationProps = {
     /** content van de notificatie */
-    children: ReactNode;
+    children: React.ReactNode;
     /**
      * afhandeling van dismiss-click notificatie
      * @param e event

package/dist/components/Tag/Tag.d.ts

@@ -1,9 +1,9 @@
-import { ReactNode } from 'react';
+import React from 'react';
 import { AlignmentProp } from '../..';
 import { ColorProp, TagSizeProp } from '../../loon-react-bulma-types';
 export declare type TagProps = {
     /** content van de tag */
-    children: ReactNode;
+    children: React.ReactNode;
     /** kleur van de tag, de standaard kleuren + dark & light */
     color?: ColorProp | 'dark' | 'light';
     /** sizes van de tag. (default = 's'). LET OP 3 verschillende sizes ipv 4! */
@@ -19,7 +19,7 @@ export declare type TagProps = {
 };
 export declare type TagsProps = {
     /** de content van de tags-div */
-    children: ReactNode;
+    children: React.ReactNode;
     /** moeten de tags aan elkaar geplakt worden */
     merged?: boolean;
     /** de grootte van alle tags , overschrijfbaar per tag  (default = 's'). LET OP: 3 sizes ipv 4 */

package/dist/contexts/Notifier/NotifierProps.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+/// <reference types="react" />
 import { ColorProp } from '../../loon-react-bulma-types';
 export declare type NotifierProviderProps = {
     /** de child-components die de notifier mogen gebruiken */
@@ -23,7 +23,7 @@ export declare type NotifierItemProps = {
     /** type notificatie I(info), S(success), D(danger), W(warning) */
     type?: ColorProp;
     /** de content voor de notificatie */
-    content?: ReactNode;
+    content?: React.ReactNode;
     /** tijd voor automatisch sluiten in milliseconden.
      *  0 om niet automatisch te sluiten. Dan is de notificatie alleen te sluiten met een 'click' */
     dismissAfter?: 0 | number;