loon-bulma-react 2023.0.23 → 2023.0.25

package/README.md

@@ -2,6 +2,11 @@
 
 > ## Aanpassingen
 >
+> - `spellCheck`-property op de meeste `<input`-componenten. Default = `false`
+> - `<TextInput />` onthoudt nu de caret-positie, als je typt.
+> - `useCaretPosition`-hook gemaakt voor hierbovengenoemde gebruik.
+> - `<TekstEditor>` -component gemaakt. Eigenlijk ene tekst-editor met wat opmaak-opties die HTML of JSON kan genereren om de opmaak te bewaren (of gewoon platte tekst kan gebruiken). Intern gebruikt met [tiptap](https://tiptap.dev/). Component was nodig voor de Help-In-Loon-prakker.
+> - `useSessionStoredState()`-hook gemaakt. Gebruik session-storage in plaats van local-storage om gegevens te verwijderen bij het sluiten van de tab/browser.
 > - `<CB>`-component gemaakt. Een kale checkbox met een label. Geen wrapper, geen direction, geen form.
 > - `<RB>`-component gemaakt. Een Radio-button met een label. Geen wrapper, geen direction, geen form.
 > - `ColorProp` uitgebreid met `"is-${`_string_`}"`-template literal. Als _Bulma_ nog andere kleuren gebruikt dan de standaard-kleuren, kan je die op die manier gebruiken.
@@ -80,7 +85,7 @@
   - [useDebouncedValue](#hooks-use-debounced-value)
   - [useEventListener](#hooks-use-event-listener)
   - [useHotkeys](#hooks-use-hotkeys)
-  - [useLocalStoredState](#hooks-use-local-stored-state)
+  - [useLocalStoredState & useSessionStoredState](#hooks-use-local-stored-state)
   - [usePagination](#hooks-use-pagination)
   - [useToggle & useBoolToggle](#hooks-use-toggle)
   - [useUncontrolled](#hooks-use-uncontrolled)
@@ -1934,7 +1939,7 @@ Het resultaat van deze form komt via de `onSubmit()` methode naar buiten. Als de
   - [useDebouncedValue](#hooks-use-debounced-value)
   - [useEventListener](#hooks-use-event-listener)
   - [useHotkeys](#hooks-use-hotkeys)
-  - [useLocalStoredState](#hooks-use-local-stored-state)
+  - [useLocalStoredState & useSessionStoredState](#hooks-use-local-stored-state)
   - [usePagination](#hooks-use-pagination)
   - [useToggle & useBoolToggle](#hooks-use-toggle)
   - [useUncontrolled](#hooks-use-uncontrolled)
@@ -2085,19 +2090,35 @@ function HotkeysExample() {
 }
 ```
 
-#### useLocalStoredState() <a id="hooks-use-local-stored-state"></a>
+#### useLocalStoredState() en useSessionStoredState() <a id="hooks-use-local-stored-state"></a>
 
-de `useLocalStoredState()`-hook werkt hetzelfde als de `React.useState()`-hook. Het enige verschil is dat de state **ook** in _Local Storage_ wordt opgeslagen, zodat de waarde na een refresh nog steeds beschikbaar is. Data wordt in _Local Storage_ opgeslagen in JSON-formaat. De return-waarde is een tuple met 3 variabelen: `[value, setValue, remove]`
-
-- `value`: de waarde van type `T`
-- `setValue(val: T)`: een functie die de waarde als parameter ontvangt.
-- `remove()`: verwijder de waarde (als die nog bestaat) uit _Local Storage_
+De `useLocalStoredState()`- en de `useSessionStoredState()`-hook werkt hetzelfde als de `React.useState()`-hook. Het enige verschil is dat de state **ook** in _Local Storage_ of de _Session Storage_ wordt opgeslagen, zodat de waarde na een refresh nog steeds beschikbaar is. Data wordt in _Local Storage_ of de _Session Storage_ opgeslagen in JSON-formaat. De return-waarde is een tuple met 3 variabelen: `[value, setValue, remove]`
 
 De hook gebruik je op bijna dezelfde manier als `useState()`:
+| Property | Type | Description |
+|----------------|----------------------|-----------------------------------------------------------------------------------------|
+| `key` | `string` | de key waar de waarde in _Local Storage_ wordt opgeslagen |
+| `defaultValue` | `T` | de waarde die gebruikt wordt als default |
+| `serialize` | `(val: T) => string` | (optioneel) de functie die de waarde `T` omzet naar een string om die te kunnen opslaan |
+| `deserialize` | `(val: string) => T` | (optioneel) de functie die eenstring uit _Local Storage_ omzet naar een waarde `T` |
+
+Het verschil tussen de _Local Storage_ en de _Session Storage_ is simpel:
+
+- _Local Storage_:de data blijft bewaard tot deze wordt verwijderd.
+- _Session Storage_: de data wordt verwijderd als de **browser** of de **tab** wordt gesloten.
 
 ```tsx
 function UseLocalStoredStateDemo() {
-  const [value, setValue, remove] = useLocalStoredState({ key: 'my-special-key', defaultValue: '' });
+  const [value, setValue, remove] = useLocalStoredState({ key: 'my-special-key-local-storage', defaultValue: '' });
+  return (
+    <>
+      <Input value={value} onChange={(e) => setValue(e.target.value)} />
+      <Button.Primary onClick={() => remove()}>Remove value</Button.Primary>
+    </>
+  );
+
+  function UseSessionStoredStateDemo() {
+  const [value, setValue, remove] = useSessionStoredState({ key: 'my-special-key-session-storage', defaultValue: '' });
   return (
     <>
       <Input value={value} onChange={(e) => setValue(e.target.value)} />
@@ -2107,13 +2128,7 @@ function UseLocalStoredStateDemo() {
 }
 ```
 
-Om te zien dat de waarde in _Local Storage_ bewaard blijft, moet je de pagina refreshen nadat je de waarde hebt gewijzigd. Dan wordt de waarde uit _Local Storage_ gevuld. Anders wordt de `defaultValue` gebruikt. Het object dat als parameter wordt meegegeven aan de `useLocalStoredState()`-hook is een object met de volgende properties:
-| Property | Type | Description |
-|----------------|----------------------|--------------------------------------------------------------------------|
-| `key` | `string` | de key waar de waarde in _Local Storage_ wordt opgeslagen |
-| `defaultValue` | `T` | de waarde die gebruikt wordt als default |
-| `serialize` | `(val: T) => string` | (optioneel) de functie die de waarde `T` omzet naar een string om die te kunnen opslaan |
-| `deserialize` | `(val: string) => T` | (optioneel) de functie die eenstring uit _Local Storage_ omzet naar een waarde `T` |
+Om te zien dat de waarde in de _Storage_ bewaard blijft, moet je de pagina refreshen nadat je de waarde hebt gewijzigd. Dan wordt de waarde uit _Storage_ gevuld. Anders wordt de `defaultValue` gebruikt. Als je de waarde wilt verwijderen, dan kan dat met de `remove()`-functie. Om het verschil tussen _Local_ en _Session_ te zien, moet je de tab of de browser sluiten. De waarde in _Local Storage_ blijft bewaard, de waarde in _Session Storage_ wordt verwijderd.
 
 De functies `serialize` en `deserialize` hoef je alleen te implementeren als je een waarde hebt die geen gebruik van `JSON.stringify()` en `JSON.parse()` kan maken, of als er meer nodig is om dat te kunnen doen.
 

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

@@ -23,6 +23,6 @@ declare type AspectRatioProps = {
  *   <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ">
  * </AspectRatio>
  */
-declare function AspectRatio(props: AspectRatioProps): JSX.Element;
+declare function AspectRatio({ ratio, children, caption, className }: AspectRatioProps): JSX.Element;
 export { AspectRatio };
 export type { AspectRatioProps };

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

@@ -25,6 +25,6 @@ declare type ButtonGroupProps = {
  *   <Button>Right</Button>
  * </ButtonGroup>
  */
-declare const ButtonGroup: (props: ButtonGroupProps) => JSX.Element;
+declare const ButtonGroup: ({ children, hasAddons, alignment, className }: ButtonGroupProps) => JSX.Element;
 export { ButtonGroup };
 export type { ButtonGroupProps };

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

@@ -23,7 +23,7 @@ declare type ContainerProps = {
  * @example <Container>This is a container</Container>
  */
 declare const Container: {
-    (props: ContainerProps): JSX.Element;
+    ({ className, children, styles }: ContainerProps): JSX.Element;
     /**
      * Een container om content horizontaal te centreren in grote viewports.
      * @param props
@@ -39,7 +39,7 @@ declare const Container: {
      *
      * @example <Container.Wide>This is a somewhat wider container</Container.Wide>
      */
-    Wide(props: ContainerProps): JSX.Element;
+    Wide({ className, children, styles }: ContainerProps): JSX.Element;
     /**
      * Een container om content horizontaal te centreren in grote viewports.
      * @param props
@@ -55,7 +55,7 @@ declare const Container: {
      *
      * @example <Container.Widest>This is a wide container</Container.Widest>
      */
-    Widest(props: ContainerProps): JSX.Element;
+    Widest({ className, children, styles }: ContainerProps): JSX.Element;
     /**
      * Een container om content horizontaal te centreren in grote viewports.
      * De width van de container is afhankelijk van de maximale viewport width.
@@ -73,7 +73,7 @@ declare const Container: {
      *
      * @example <Container.Max>This is an almost-fullwidth container </Container.Max>
      */
-    Max(props: ContainerProps): JSX.Element;
+    Max({ className, children, styles }: ContainerProps): JSX.Element;
 };
 export { Container };
 export type { ContainerProps };

package/dist/components/DataTable/DataTable.d.ts

@@ -31,8 +31,6 @@ declare type DataTableProps<T extends unknown> = {
     maxRows?: number;
     /** Placeholder voor zoekveld. Als er geen placeholder is (undefined or emptystring), is er geen zoek-veld */
     searchPlaceholder?: string;
-    /** Placeholder voor zoekveld. Als er geen placeholder is (undefined or emptystring), is er geen zoek-veld @deprecated: use `searchPlaceholder` */
-    searchTxt?: string;
     /**
      * (Optionele) Eigen zoek-functie. De default-zoek-functie wordt dan vervangen.
      * @param searchTerm de content van het zoekveld
@@ -126,6 +124,6 @@ declare type DataTableColumn<T extends unknown> = {
  * );
  *
  */
-declare function DataTable<T extends unknown>({ fullwidth, bordered, narrow, striped, hoverable, defaultSortCol, data, maxRows, columns, rowIdentifier, headerContent, searchTxt, searchPlaceholder, onSearch, rowClasses, onRowSelected, onNoRowsToRender, }: DataTableProps<T>): JSX.Element;
+declare function DataTable<T extends unknown>({ fullwidth, bordered, narrow, striped, hoverable, defaultSortCol, data, maxRows, columns, rowIdentifier, headerContent, searchPlaceholder, onSearch, rowClasses, onRowSelected, onNoRowsToRender, }: DataTableProps<T>): JSX.Element;
 export { DataTable };
 export type { DataTableProps, DataTableColumn };

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

@@ -26,7 +26,7 @@ declare type IconProps = {
  * <Icon icon="fas fa-flag" />
  * <Icon icon={faFlag} /> // import { faFlag } from '@fortawesome/free-solid-svg-icons';
  */
-declare const Icon: (props: IconProps) => JSX.Element;
+declare const Icon: ({ color, size, rotation, icon, flip, animate }: IconProps) => JSX.Element;
 declare type IconTextProps = {
     /** React font-awesome icon
      * - `string`: geef de gehele font-awesome-class op. 'flip', 'animate', 'rotation' worden dan al gebruikt in deze class.
@@ -55,6 +55,6 @@ declare type IconTextProps = {
  * <IconText icon="fas fa-flag">Flag</IconText>
  * <IconText icon={faFlag}>Flag</IconText> // import { faFlag } from '@fortawesome/free-solid-svg-icons';
  */
-declare const IconText: (props: IconTextProps) => JSX.Element;
+declare const IconText: ({ icon, size, color, rotation, flip, animate, children }: IconTextProps) => JSX.Element;
 export { Icon, IconText };
 export type { IconProps, IconTextProps };

package/dist/components/Image/Image.d.ts

@@ -24,6 +24,6 @@ declare type ImageProps = {
  * @returns an image with a fixed aspect ratio
  * @example <Image ratio="1by1" src="https://www.loon.be/images/logo.png" alt="Loon.be" />
  */
-declare function Image(props: ImageProps): JSX.Element;
+declare function Image({ ratio, imgWidth, alt, figCaption, className, isRounded, src }: ImageProps): JSX.Element;
 export { Image };
 export type { ImageProps };

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

@@ -43,6 +43,6 @@ declare type LinkProps = {
  * @returns een link
  * @example <Link href="https://www.google.com">Google</Link>
  */
-declare const Link: (props: LinkProps) => JSX.Element;
+declare const Link: ({ href, target, tooltip, id, rel, children }: LinkProps) => JSX.Element;
 export { Link, LinkButton };
 export type { LinkProps, LinkButtonProps };

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

@@ -1,5 +1,17 @@
 import React from 'react';
 import { ColorProp } from '../../loon-react-bulma-types';
+/** Props voor een Notification */
+export declare type NotificationProps = {
+    /** Content van de notificatie */
+    children: React.ReactNode;
+    /**
+     * Afhandeling van dismiss-click notificatie
+     * @param e event
+     */
+    onDismiss(e?: any): void;
+    /** Roep de @see onDismiss() automatisch aan na ... milliseconden  */
+    autoDismissAfter?: number;
+};
 /**
  * Een instelbare notificatie. Default is een info-notificatie
  * @param props
@@ -7,8 +19,8 @@ import { ColorProp } from '../../loon-react-bulma-types';
  * @example <Notification>Hello World</Notification>
  */
 declare const Notification: {
-    (props: NotificationProps & {
-        color?: ColorProp;
+    ({ children, onDismiss, autoDismissAfter, color, }: NotificationProps & {
+        color?: string | undefined;
     }): JSX.Element;
     /** Een primary-colored notificatie
      * @param props
@@ -48,15 +60,3 @@ declare const Notification: {
     Info(props: NotificationProps): JSX.Element;
 };
 export { Notification };
-/** Props voor een Notification */
-export declare type NotificationProps = {
-    /** Content van de notificatie */
-    children: React.ReactNode;
-    /**
-     * Afhandeling van dismiss-click notificatie
-     * @param e event
-     */
-    onDismiss(e?: any): void;
-    /** Roep de @see onDismiss() automatisch aan na ... milliseconden  */
-    autoDismissAfter?: number;
-};

package/dist/forms/Checkbox/CB.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { CheckradioStylingType, ColorProp } from '../../loon-react-bulma-types';
 import { BaseInputProps } from '../shared';
-declare type CBInputProps = Omit<BaseInputProps, 'keyboardType' | 'icons' | 'direction' | 'validation' | 'labelHidden' | 'label'> & {
+declare type CBInputProps = Omit<BaseInputProps, 'keyboardType' | 'icons' | 'direction' | 'validation' | 'labelHidden' | 'label' | 'spellCheck'> & {
     /** Speciale styling van de checkbox */
     styling?: CheckradioStylingType;
     /** Is de checkbox checked */

package/dist/forms/Checkbox/Checkbox.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { CheckradioStylingType, ColorProp } from '../../loon-react-bulma-types';
 import { BaseInputProps } from '../shared';
-declare type CheckboxInputProps = Omit<BaseInputProps, 'icons'> & {
+declare type CheckboxInputProps = Omit<BaseInputProps, 'icons' | 'labelHidden' | 'spellCheck'> & {
     /** Kleur van de checkbox (default = 'l', link) */
     color?: ColorProp;
     /** Speciale styling van de checkbox */

package/dist/forms/Currency/CurrencyInput.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { BaseInputProps } from '../shared';
-declare type CurrencyInputProps = Omit<BaseInputProps, 'labelHidden'> & {
+declare type CurrencyInputProps = BaseInputProps & {
     /** Start value voor deze input (optional) */
     value?: number;
     /**
@@ -32,6 +32,7 @@ declare type CurrencyInputProps = Omit<BaseInputProps, 'labelHidden'> & {
  * | labelHidden       | `boolean`                 | `false` | de label is verborgen (screenreaders)      |
  * | disabled          | `boolean`                 | `false` | de input is disabled                       |
  * | textAlign         | `l`, `c`, `r`             | `l`     | de text-align van de input                 |
+ * | spellCheck        | `boolean`                 | `false` | Moet de browser deze input spell-checken?  |
  * | keyboardType      | `search`, `text`,         | `text ` | de type van de keyboard (touch-devices)    |
  * |                   | `email`,`tel`,`url`       |         |                                            |
  * |                   | `numeric`, `decimal`      |         |                                            |
@@ -44,6 +45,6 @@ declare type CurrencyInputProps = Omit<BaseInputProps, 'labelHidden'> & {
  * | onValueChanged()  | `function`                |         | (value: string, valid?: boolean) => void   |
  * | onKeyDown()       | `function`                |         | (event: React.KeyboardEvent) => void       |
  */
-declare function LbrCurrencyInput({ label, name, id, value, validation, errorMessage, size, textAlign, disabled, placeholder, keyboardType, tooltip, direction, onValueChanged, onKeyDown, decimalSeparator, alwaysShowCents, ...props }: CurrencyInputProps): JSX.Element;
+declare function LbrCurrencyInput({ label, name, id, value, validation, errorMessage, size, textAlign, disabled, placeholder, keyboardType, tooltip, direction, labelHidden, onValueChanged, onKeyDown, decimalSeparator, alwaysShowCents, ...props }: CurrencyInputProps): JSX.Element;
 export { LbrCurrencyInput as CurrencyInput };
 export type { CurrencyInputProps };

package/dist/forms/Datetimes/DateInput.d.ts

@@ -25,6 +25,7 @@ declare type DateInputProps = BaseInputProps & {
  * | id                | `string `            | `name`  | de id voor de input                        |
  * | tooltip           | `string `            |         | tooltip voor de input                      |
  * | labelHidden       | `boolean`            | `false` | de label is verborgen (screenreaders)      |
+ * | spellCheck        | `boolean`            | `false` | Moet de browser deze input spell-checken?  |
  * | disabled          | `boolean`            | `false` | de input is disabled                       |
  * | textAlign         | `l`, `c`, `r`        | `l`     | de text-uitlijning van de input            |
  * | keyboardType      | `search`, `text`,    | `text`  | de type van de keyboard (touch-devices)    |

package/dist/forms/Datetimes/DateTimeInput.d.ts

@@ -24,6 +24,7 @@ declare type DateTimeInputProps = BaseInputProps & {
  * | id                | `string `            | `name`  | de id voor de input                        |
  * | tooltip           | `string `            |         | tooltip voor de input                      |
  * | labelHidden       | `boolean`            | `false` | de label is verborgen (screenreaders)      |
+ * | spellCheck        | `boolean`            | `false` | Moet de browser deze input spell-checken?  |
  * | disabled          | `boolean`            | `false` | de input is disabled                       |
  * | textAlign         | `l`, `c`, `r`        | `l`     | de text-uitlijning van de input            |
  * | keyboardType      | `search`, `text`,    | `text ` | de type van de keyboard (touch-devices)    |

package/dist/forms/Datetimes/TimeInput.d.ts

@@ -25,6 +25,7 @@ declare type TimeInputProps = BaseInputProps & {
  * | name              | `string `            |         | de naam voor de input (REQUIRED)           |
  * | label             | `string `            | `name`  | de label voor de input                     |
  * | id                | `string `            | `name`  | de id voor de input                        |
+ * | spellCheck        | `boolean`            | `false` | Moet de browser deze input spell-checken?  |
  * | tooltip           | `string `            |         | tooltip voor de input                      |
  * | labelHidden       | `boolean`            | `false` | de label is verborgen (screenreaders)      |
  * | disabled          | `boolean`            | `false` | de input is disabled                       |

package/dist/forms/File/FileInput.d.ts

@@ -35,6 +35,7 @@ declare type FileInputProps = Omit<BaseInputProps, 'icons'> & {
  * | name              | `string`             |           | de naam voor de input (REQUIRED)           |
  * | label             | `string`             | `name`    | de label voor de input                     |
  * | kiesLabel         | `string`             |           | de tekst voor de selecteer-file-button     |
+ * | spellCheck        | `boolean`            | `false`   | Moet de browser deze input spell-checken?  |
  * | multiple          | `boolean`            | `false`   | of er meerdere files geselecteerd moeten   |
  * | boxed             | `boolean`            | `false`   | of de input als een block moet worden      |
  * | accept            | `string`             |           | de file-types die geselecteerd mogen worden|

package/dist/forms/Input.d.ts

@@ -4,6 +4,7 @@ import { AutoCompleteType } from '../loon-react-bulma-types';
 import { BaseInputProps, InputTypeProp } from './shared';
 declare type InputValueType = string | number | readonly string[] | Date | undefined;
 declare type InputProps<T extends InputValueType> = BaseInputProps<T> & {
+    required?: boolean;
     /** Default icon voor aan begin van de input */
     icon?: string | IconProp;
     /** Type van de tekst input (default = 'text') */
@@ -11,7 +12,7 @@ declare type InputProps<T extends InputValueType> = BaseInputProps<T> & {
     /** Start value voor deze input (optioneel) */
     value?: T;
     /** Speciaal voor autocomplete-managers, zoals password-managers. Wat is de functie van deze input */
-    autocomplete?: AutoCompleteType;
+    autoComplete?: AutoCompleteType;
     /**
      * Wat te doen als de waarde is veranderd
      * @param newVal: de nieuwe waarde

package/dist/forms/Numeric/MultiRangeInput.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { BaseInputProps } from '../shared';
-declare type MultiRangeInputProps = Omit<BaseInputProps, 'icons'> & {
+declare type MultiRangeInputProps = Omit<BaseInputProps, 'icons' | 'spellCheck'> & {
     /** Stap-grootte voor de input (optional, default = 1) */
     step?: number;
     /** De start-waarde voor de input (optional) */

package/dist/forms/Numeric/NumberInput.d.ts

@@ -26,6 +26,7 @@ declare type NumberInputProps = BaseInputProps & {
  * | id                | `string `            | `name`  | de id voor de input                        |
  * | step              | `number `            | `1`     | stapgrootte voor de input (+ & - aansturen)|
  * | tooltip           | `string `            |         | tooltip voor de input                      |
+ * | spellCheck        | `boolean`            | `false` | Moet de browser deze input spell-checken?  |
  * | labelHidden       | `boolean`            | `false` | de label is verborgen (screenreaders)      |
  * | disabled          | `boolean`            | `false` | de input is disabled                       |
  * | textAlign         | `l`, `c`, `r`        | `l`     | de text-align van de input                 |

package/dist/forms/Numeric/RangeInput.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { BaseInputProps } from '../shared';
-declare type RangeInputProps = Omit<BaseInputProps, 'icons'> & {
+declare type RangeInputProps = Omit<BaseInputProps, 'icons' | 'spellCheck'> & {
     /** Stap-grootte voor de input (optional, default = 1) */
     step?: number;
     /** een getals-unit (`%`, `kg/m3`, etc) om weer te geven op de range-input */

package/dist/forms/Others/ColorInput.d.ts

@@ -24,6 +24,7 @@ declare type ColorInputProps = BaseInputProps & {
  * | id                | `string`             | `name`  | de id voor de input                        |
  * | tooltip           | `string`             |         | tooltip voor de input                      |
  * | labelHidden       | `boolean`            | `false` | de label is verborgen (screenreaders)      |
+ * | spellCheck        | `boolean`            | `false` | Moet de browser deze input spell-checken?  |
  * | disabled          | `boolean`            | `false` | de input is disabled                       |
  * | keyboardType      | `search`, `text`,    | `text ` | de type van de keyboard (touch-devices)    |
  * |                   | `email`,`tel`,`url`  |         |                                            |

package/dist/forms/Radio/RB.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { CheckradioStylingType, ColorProp } from '../../loon-react-bulma-types';
 import { BaseInputProps } from '../shared';
-declare type RBInputProps<T = string> = Omit<BaseInputProps, 'keyboardType' | 'icons' | 'direction' | 'validation' | 'labelHidden' | 'label' | 'id' | 'name'> & {
+declare type RBInputProps<T = string> = Omit<BaseInputProps, 'keyboardType' | 'icons' | 'direction' | 'validation' | 'labelHidden' | 'label' | 'id' | 'name' | 'spellCheck'> & {
     /** de group-name voor deze inputs. Radiobuttons werken daar iets anders mee */
     groupName: string;
     /** Speciale styling van de checkbox */

package/dist/forms/Radio/Radio.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { CheckradioStylingType, ColorProp, DirectionProp, SizeProp, TextAlignmentProp } from '../../loon-react-bulma-types';
 import { BaseInputProps } from '../shared';
-declare type RadioInputProps = Omit<BaseInputProps, 'icons'> & {
+declare type RadioInputProps = Omit<BaseInputProps, 'icons' | 'labelHidden' | 'spellCheck'> & {
     value?: string;
     children?: React.ReactNode;
     onValueChanged?(newVal: string, isValid?: boolean): any | void;

package/dist/forms/RichTextArea/RichTextArea.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare function TekstEditor({ content, onChange, }: {
+    content?: string;
+    onChange: (content: string) => void;
+}): JSX.Element;

package/dist/forms/Selects/MultiSelect.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { BaseInputProps } from '../shared';
 import { SelectOptionType, SelectOptionGroupType } from './BaseSelectProps';
-declare type MultiSelectInputProps = Omit<BaseInputProps, 'icons'> & {
+declare type MultiSelectInputProps = Omit<BaseInputProps, 'icons' | 'spellCheck'> & {
     /** De waarde */
     value?: string[];
     /** De values voor de options. DEZE MOETEN UNIEK ZIJN! */

package/dist/forms/Selects/Select.d.ts

@@ -2,7 +2,7 @@
 import { SizeProp } from '../../loon-react-bulma-types';
 import { BaseInputProps } from '../shared';
 import { SelectOptionType, SelectOptionGroupType } from './BaseSelectProps';
-declare type SelectInputProps = Omit<BaseInputProps, 'icons'> & {
+declare type SelectInputProps = Omit<BaseInputProps, 'icons' | 'spellCheck'> & {
     /** De waarde */
     value?: number | string;
     /** De values voor de options. DEZE MOETEN UNIEK ZIJN! */

package/dist/forms/Text/EmailInput.d.ts

@@ -26,6 +26,7 @@ declare type EmailInputProps = BaseInputProps & {
  * | name              | `string`             |         | de naam voor de input (REQUIRED)           |
  * | label             | `string`             | `name`  | de label voor de input                     |
  * | id                | `string`             | `name`  | de id voor de input                        |
+ * | spellCheck        | `boolean`            | `false` | Moet de browser deze input spell-checken?  |
  * | autoComplete      | `AutoCompleteType`   | `email` | de autocomplete type (password managers)   |
  * | tooltip           | `string`             |         | tooltip voor de input                      |
  * | labelHidden       | `boolean`            | `false` | de label is verborgen (screenreaders)      |

package/dist/forms/Text/PasswordInput.d.ts

@@ -27,6 +27,7 @@ declare type PasswordInputProps = BaseInputProps & {
  * | label                 | `string`             | `name`  | de label voor de input                     |
  * | id                    | `string`             | `name`  | de id voor de input                        |
  * | autoComplete          | `AutoCompleteType`   |         | de autocomplete type (password managers)   |
+ * | spellCheck            | `boolean`            | `false` | Moet de browser deze input spell-checken?  |
  * | tooltip               | `string`             |         | tooltip voor de input                      |
  * | labelHidden           | `boolean`            | `false` | de label is verborgen (screenreaders)      |
  * | disabled              | `boolean`            | `false` | de input is disabled                       |

package/dist/forms/Text/TextArea.d.ts

@@ -25,6 +25,7 @@ declare type TextAreaProps = Omit<BaseInputProps, 'icons'> & {
  * | label             | `string`                  | `name`  | de label voor de input                     |
  * | id                | `string`                  | `name`  | de id voor de input                        |
  * | tooltip           | `string`                  |         | tooltip voor de input                      |
+ * | spellCheck        | `boolean`                 | `false` | Moet de browser deze input spell-checken?  |
  * | autocomplete      | `AutoCompleteType`        |         | autocomplete voor de input                 |
  * | labelHidden       | `boolean`                 | `false` | de label is verborgen (screenreaders)      |
  * | disabled          | `boolean`                 | `false` | de input is disabled                       |

package/dist/forms/Text/TextEditor.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import { JSONContent } from '@tiptap/react';
+/**
+ * Een Rich Text Editor, dus een uitgebreide vorm van een `<textarea>`, want je kan dingen **bold**, *italic*, enz. maken.
+ * De output is in HTML-vorm of in JSON-vorm.  Je kan er ook gewoon platte tekst uitkrijgen, maar dan vervalt de opmaak.
+ * @url https://tiptap.dev/ voor de documentatie van hoe deze component in elkaar steekt.
+ * @returns een component voor het maken van rich text met HTML of JSON output
+ * @description
+ * | prop         | type                       | uitleg                  |
+ * |--------------|----------------------------|-------------------------|
+ * | content      | `string`                   | de inhoud van de editor |
+ * | onChangeHtml | `(c: string) => void`      | een callback die wordt aangeroepen als de inhoud van de editor verandert. De inhoud wordt dan als HTML meegegeven. |
+ * | onChangeText | `(c: string) => void`      | een callback die wordt aangeroepen als de inhoud van de editor verandert. De inhoud wordt dan als platte tekst meegegeven. |
+ * | onChangeJson | `(c: JSONContent) => void` | een callback die wordt aangeroepen als de inhoud van de editor verandert. De inhoud wordt dan als JSON meegegeven. |
+ */
+export declare function TextEditor({ content, onChangeHtml, onChangeText, onChangeJson, }: {
+    content?: string;
+    onChangeHtml?: (content: string) => void;
+    onChangeText?: (content: string) => void;
+    onChangeJson?: (content: JSONContent) => void;
+}): JSX.Element;

package/dist/forms/Text/TextInput.d.ts

@@ -38,6 +38,7 @@ declare type TextInputProps = BaseInputProps & {
  * | label             | `string`                  | `name`  | de label voor de input                     |
  * | characters        | `string`, `RegExp`, `0-Z`,|         | de toegestane karakters in de input        |
  * |                   | `0-9`, `a-z`, `A-Z`, `a-Z`|         |                                            |
+ * | spellCheck        | `boolean`                 | `false` | Moet de browser deze input spell-checken?  |
  * | autocomplete      | `AutoCompleteType`        |         | de autocomplete type voor de input         |
  * | id                | `string`                  | `name`  | de id voor de input                        |
  * | tooltip           | `string`                  |         | tooltip voor de input                      |

package/dist/forms/index.d.ts

@@ -24,6 +24,7 @@ export { EmailInput } from './Text/EmailInput';
 export type { EmailInputProps } from './Text/EmailInput';
 export { PasswordInput } from './Text/PasswordInput';
 export type { PasswordInputProps } from './Text/PasswordInput';
+export { TextEditor } from './Text/TextEditor';
 export { TextArea } from './Text/TextArea';
 export type { TextAreaProps } from './Text/TextArea';
 export { TextInput } from './Text/TextInput';

package/dist/forms/shared/Base.Input.Container.d.ts

@@ -5,6 +5,7 @@ export declare const InputContainer: ({ label, children: input, error, size, dir
     label?: {
         txt: string;
         id: string;
+        hidden: boolean;
     } | undefined;
     children: React.ReactNode;
     error?: React.ReactNode;

package/dist/forms/shared/BaseInputProps.d.ts

@@ -4,24 +4,26 @@ import { TextAlignmentProp, DirectionProp, KeyboardTypeProp, SizeProp } from '..
 export declare type BaseInputProps<T extends any = void> = {
     /** Is dit veld disabled ? (optioneel) */
     disabled?: boolean;
-    /** Name input: gebruikt voor een <label> als er geen label gedefinieerd is & de name-attribuut <input> */
+    /** Name input: gebruikt voor een `<label>` als er geen label gedefinieerd is & de name-attribuut `<input>` */
     name: string;
-    /** ID voor de input: gebruikt voor een <label for="*id*}">. default wordt anders de 'name'-prop gebruik */
+    /** ID voor de input: gebruikt voor een `<label for="*id*">`. default wordt anders de `name`-prop gebruik */
     id?: string;
     /** Een tooltip voor de button */
     tooltip?: string;
     /** Label voor de input, als dat afwijkt van de name-attribuut */
     label?: string;
-    /** Label wordt alleen gebruikt voor accessibility, dus is onzichtbaar op het scherm. (default = false) */
+    /** Label wordt alleen gebruikt voor accessibility, dus is onzichtbaar op het scherm. (default `false`) */
     labelHidden?: boolean;
-    /** Grootte van de input (default = 'm', normal) */
+    /** Grootte van de input (default = `m`, normal) */
     size?: SizeProp;
-    /** Waar moet de tekst van de input uitgelijnd worden (default = 'l', links) */
+    /** Waar moet de tekst van de input uitgelijnd worden (default = `l`, links) */
     textAlign?: TextAlignmentProp;
-    /** De input is horizontaal, label & input op 1 lijn. (default = 'horizontal') */
+    /** De input is horizontaal, label & input op 1 lijn. (default = `horizontal`) */
     direction?: DirectionProp;
     /** Een object met validatie-regels */
     validation?: FormValidationType<T>;
+    /** Moet de spell-checker van de browser aanstaan voor deze input? (default `false`) */
+    spellCheck?: boolean;
     /** Eigen errorMessage voor validatie buiten component om */
     errorMessage?: string | ((value: T | string | string[] | number | number[] | boolean | Date | FileList | any) => string);
     /** Placeholder in input (optioneel) */

package/dist/hooks/index.d.ts

@@ -6,3 +6,4 @@ export * from './usePagination';
 export * from './useToggle';
 export * from './useUncontrolled';
 export * from './useValidatedState';
+export * from './useSessionStoredState';

package/dist/hooks/useCaretPosition.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export declare function useCaretPosition<T extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement>(): {
+    start: number;
+    end: number;
+    ref: React.RefObject<T>;
+    updateCaret: () => void;
+};

package/dist/hooks/useLocalStoredState.d.ts

@@ -1,7 +1,3 @@
-/** Default serializer met `JSON.stringify` van de waar `T` naar een `string` */
-declare function serializeJSON<T>(value: T): string;
-/** Default deserializer met `JSON.parse` van een `string` naar de waarde `T` */
-declare function deserializeJSON<T>(value: string): T;
 declare type UseLocalStoredStateFn<T = string> = {
     /** Key to store the value with in Local Storage */
     key: string;
@@ -15,6 +11,7 @@ declare type UseLocalStoredStateFn<T = string> = {
 /**
  * Hook die werkt als `React.useState<T|undefined>()`, maar waarbij de waarde ook wordt opgeslagen in Local Storage.
  * De waarde blijft dan bij het refreshen van de pagina aanwezig. Als de pagina dan ververst wordt, word de al bestaande waarde gebruikt, niet de initialValue.
+ * Om de waarde te bewaren bij afsluiten van de browser, gebruik je de hook `{@link useSessionStoredState}`.
  * @param {UseLocalStoredStateFn} params voor de hook
  * @returns {[T, (value: T) => void]} tuple met een value en een setValue-function (net als React.useState)
  * @description
@@ -23,7 +20,7 @@ declare type UseLocalStoredStateFn<T = string> = {
  * | key          | `string`   | De key waaronder de waarde in Local Storage wordt opgeslagen. |
  * | initialValue | `T`        | De initiale waarde.                                           |
  * | serialize    | `function` | (optional) functie om de waarde om te zetten naar een string. Implementeer als de waarde __GEEN__ gebruik kan maken van `JSON.stringify()`! |
- * | deserialize  | `function` | De functie die een string omzet naar de waarde. Implementeer als de waarde __GEEN__ gebruik kan maken van `JSON.parse()`! |
+ * | deserialize  | `function` | (optional) De functie die een string omzet naar de waarde. Implementeer als de waarde __GEEN__ gebruik kan maken van `JSON.parse()`! |
  * @example
  * import { useLocalStoredState } from 'loon-bulma-react';
  * const [ value, setValue, removeFromLocalStorage ] = useLocalStoredState({ key: 'myKey', initialValue: 'Oompa Loompa' });
@@ -32,6 +29,8 @@ declare type UseLocalStoredStateFn<T = string> = {
  * // 3. refresh the page.
  * // 4. see te new value on the page.
  * // 5. you can also check the value in Local Storage in devtools.
+ * // 6. close the browser / tab
+ * // 7. check the value in session storage. it should still be there.
  */
 declare function useLocalStoredState<T extends unknown>({ key, initialValue, deserialize, serialize }: UseLocalStoredStateFn<T>): readonly [T | undefined, (value: T) => void, () => void];
-export { useLocalStoredState, serializeJSON, deserializeJSON };
+export { useLocalStoredState };