loon-bulma-react 2023.0.25 → 2023.0.26

package/dist/components/Modal/Modal.d.ts

@@ -13,6 +13,7 @@ declare type ModalProps = {
      * - `string`: '834px', '50%, 60em', '100%'
      */
     size?: SizeProp | string;
+    helpTag?: string;
 };
 /**
  * Een modal-component. Als een modal ene Foot en een Head heeft, wordt de rest automatisch toegevoegd in een Body

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

@@ -41,6 +41,6 @@ declare type CBInputProps = Omit<BaseInputProps, 'keyboardType' | 'icons' | 'dir
  * | onValueChanged()  | `function`           |         | (value: boolean, valid?: boolean) => void  |
  * | onKeyDown()       | `function`           |         | (event: React.KeyboardEvent) => void       |
  */
-declare function JustACheckbox({ checked, label, name, id, size, color, styling, textAlign, disabled, errorMessage, onValueChanged, onKeyDown, }: CBInputProps): JSX.Element;
-export { JustACheckbox as CB };
+declare function CB({ checked, label, name, id, size, color, styling, textAlign, disabled, errorMessage, helpTag, onValueChanged, onKeyDown, onFocus, }: CBInputProps): JSX.Element;
+export { CB };
 export type { CBInputProps };

package/dist/forms/FormBuilder/FormBuilderProps.d.ts

@@ -1,5 +1,6 @@
-import { ColorProp, DirectionProp } from '../../../loon-react-bulma-types';
-import { FormValidationType } from './../BaseInputProps';
+/// <reference types="react" />
+import { ColorProp, DirectionProp } from '~/loon-react-bulma-types';
+import { FormValidationType } from '../shared';
 import { SelectOptionType, SelectOptionGroupType } from './../Selects/BaseSelectProps';
 /** Props voor de Form-component */
 export declare type FormBuilderProps = {
@@ -36,6 +37,7 @@ export declare type FormBuilderProps = {
 };
 /** Props voor de fields in een form van de Form-Component */
 export declare type FormBuilderFieldProps = {
+    onFocus?: (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>, helpTag?: string) => void;
     /** de naam voor het field. gebruikt in input en  in <label> als geen label gedefinieerd.
      * <input name="..." /> */
     name: string;

package/dist/forms/Input.d.ts

@@ -1,56 +1,94 @@
-/// <reference types="react" />
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
-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') */
-    type: InputTypeProp;
-    /** Start value voor deze input (optioneel) */
-    value?: T;
-    /** Speciaal voor autocomplete-managers, zoals password-managers. Wat is de functie van deze input */
-    autoComplete?: AutoCompleteType;
+import React from 'react';
+import { AlignmentProp, AutoCompleteType, DirectionProp, KeyboardTypeProp, SizeProp } from '..';
+import { InputTypeProp } from './shared';
+declare type InputValueType = string | number | readonly string[] | undefined;
+declare type InputStylingPropsType = {
+    /** grootte van de input (default = `m`, medium)*/ size?: SizeProp;
+    /** alignment van de input (default = `l`, left) */ alignment?: AlignmentProp;
+    /** label boven (`v`) of voor (`h`) de input, (default = `h`, horizontal) */ direction?: DirectionProp;
+    /** (optioneel) icon op de input */ iconLeft?: IconProp | string;
+    /** (optioneel) icon aan einde op de input */ iconRight?: IconProp | string;
+};
+declare type InputPropsType<T = InputValueType> = {
+    /** label bij de input. Als geen label, dan wordt de `name`-property gebruikt */ label?: string;
+    /** foutmelding bij de input*/ errorMessage?: string;
+    /** helptag in Loon bij de input (`:HOOFDGROEP:SUBGROEP:`)*/ helpTag?: string;
+    /** type input (default = `text`)*/ type?: InputTypeProp;
+    /** (optioneel) tooltip-title voor de input*/ title?: string;
+    /** (optioneel) id voor de input. Als geen id, dan wordt de `name`-property gebruikt */ id?: string;
+    /** name-property voor de input */ name: string;
+    /** waarde voor de input */ value?: T;
+    /** gebruikt deze input de spellchecked (default = `false`) */ spellCheck?: boolean;
+    /** is deze input required (default= `false`)*/ required?: boolean;
+    /** autocomplete voor deze input (default = `off`)*/ autoComplete?: AutoCompleteType;
+    /** type toetsenbord (voor smartphones) voor deze input (default = `text`)*/ keyboardType?: KeyboardTypeProp;
+    /** placeholder in de input */ placeholder?: string;
+    /** is deze input disabled 9default = `false`)*/ disabled?: boolean;
+    /** bij welk form hoort deze input?*/ form?: string;
+    /**
+     * max waarde of max lengte voor de input
+     * _(altijd hoger dan de `min`-prop)_
+     * @example // voor max waarde
+     * <Input type="number" max="100"/>
+     * <Input type="range" max="100"/>
+     * <Input type="date" max="2019-12-25"/>
+     * <Input type="month" max="2019-12"/>
+     * <Input type="week" max="2019-W23"/>
+     * <Input type="time" max="17:30"/>
+     * <Input type="datetime-local" max="29-12-25T23:59"/>
+     * @example //strings: voor max length, altijd 0 of hoger
+     * <Input type="text" max="100"/>
+     * <Input type="password" max="50"/>
+     */
+    max?: number;
     /**
-     * Wat te doen als de waarde is veranderd
-     * @param newVal: de nieuwe waarde
-     * @param isValid: is de nieuwe waarde geldig?
+     * min waarde of min lengte voor de input
+     * _(altijd lager dan de `max`-prop)_
+     * @example <Input type="number" min="1"/>
+     * <Input type="range" min="1"/>
+     * <Input type="date" min="2019-01-01"/>
+     * <Input type="month" min="2019-01-01"/>
+     * <Input type="week" min="2019-W01"/>
+     * <Input type="time" min="08:30"/>
+     * <Input type="datetime-local" max="2019-01-01T00:00"/>
+     * @example //strings: voor max length, altijd 0 of hoger
+     * <Input type="text" min="100"/>
+     * <Input type="password" min="50"/>*/
+    min?: number;
+    /** stapgrootte voor groter/kleiner aanpassingen
+     *  | type| value | Example|
+     * |----------------|----------------|---------------------------------------------|
+     * | number         | `1`            | `<Input type="number" step="2"/>`           |
+     * | range          | `1`            | `<Input type="range" step="2"/>`            |
+     * | date           | `1` (day)      | `<Input type="date" step="2"/>`             |
+     * | month          | `1` (month)    | `<Input type="month" step="2"/>`            |
+     * | week           | `1` (week)     | `<Input type="week" step="2"/>`             |
+     * | time           | `60` (seconds) | `<Input type="time" step="2"/>`             |
+     * | datetime-local | `1` (second)   | `<Input type="datetime-local" step="900"/>` |
      */
-    onValueChanged?(newVal: T, isValid?: boolean): any | void;
+    step?: number;
+    /** Is deze input readonly (default = `false`). Bij `true` zie je alleen nog maar de content van de input*/
+    readonly?: boolean;
+    /** moet deze input de focus krijgen? (default = `false`)*/ autofocus?: boolean;
+    /** (optionele) `ref` voor gebruik met `React.useRef`*/ ref?: React.Ref<HTMLInputElement>;
+    /** callback voor unfocus (blur), zet OOK de input op `touched`*/
+    onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    /** callback voor onChange*/
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    /** callback voor focus */
+    onFocus?: (e: React.FocusEvent<HTMLInputElement>, helpTag?: string) => void;
+    /** callback voor typen */
+    onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+    /** callback voor typen */
+    onKeyUp?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
 };
+declare function BaseInput<T extends InputValueType = string>({ placeholder, helpTag, errorMessage, label, disabled, keyboardType, type, title, name, value, required, spellCheck, id, autoComplete, max, min, readonly, step, autofocus, form, onBlur, onChange, onFocus, onKeyDown, onKeyUp, size, alignment, }: InputPropsType<T> & Omit<InputStylingPropsType, 'direction' | 'iconLeft' | 'iconRight'>): JSX.Element;
 /**
- * Input met alle gewone <input> properties zelf in te vullen.
- * LET OP: Voor validatie kan ALLEEN de onValidate() function gebruikt
+ *
  * @param props
- * @returns input element
- * @example <Input<T> type="text" placeholder="placeholder" name="name" id="id" value={value} {...props}/>
- * @description alle props voor Input<T> component
- * | prop              | type                      | default | description                                |
- * |-------------------|---------------------------|---------|--------------------------------------------|
- * | name              | `string`                  |         | de naam voor de input (REQUIRED)           |
- * | type              | `InputTypeProp`           |         | type voor de input (REQUIRED)              |
- * | label             | `string`                  | `name`  | de label voor de input                     |
- * | id                | `string`                  | `name`  | de id voor de input                        |
- * | icon              | `string`, `IconProp`      |         | Optioneel icon voor de input               |
- * | tooltip           | `string`                  |         | tooltip voor de input                      |
- * | autocomplete      | `AutoCompleteType`        |         | autocomplete voor de input                 |
- * | 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                 |
- * | keyboardType      | `search`, `text`,         | `text ` | de type van de keyboard (touch-devices)    |
- * |                   | `email`,`tel`,`url`       |         |                                            |
- * |                   | `numeric`, `decimal`      |         |                                            |
- * | validation        | `FormValidationType`      | `{}`    | de validatie voor de input                 |
- * | value             | `T`                       |         | de waarde, generic<T>                      |
- * | size              | `s`,`m`,`l`,`xl`          | `m`     | de grootte van de input                    |
- * | direction         | `h`,`v`                   | `h`     | de form-richting voor de input             |
- * | errorMessage      | `string`, `function`      |         | een error message (van buiten setbaar)     |
- * | placeholder       | `string`                  |         | de placeholder voor de input               |
- * | onValueChanged()  | `function`                |         | (value: T, valid?: boolean) => void        |
- * | onKeyDown()       | `function`                |         | (event: React.KeyboardEvent) => void       |
+ * @returns
  */
-declare function Input<T extends InputValueType>(props: InputProps<T>): JSX.Element;
-export { Input };
-export type { InputProps, InputValueType };
+declare function Input<T extends InputValueType = string>({ errorMessage, label, name, id, iconLeft, iconRight, direction, onBlur, ...props }: InputPropsType<T> & InputStylingPropsType): JSX.Element;
+export { BaseInput, Input };
+export type { InputPropsType, InputStylingPropsType, InputValueType };

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

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

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

@@ -46,6 +46,6 @@ declare type RBInputProps<T = string> = Omit<BaseInputProps, 'keyboardType' | 'i
  * | errorMessage      | `string  `           |         | een error message (van buiten setbaar)     |
  * | setValueFn()      | `function`           |         | (newVal: T) => void. Gebruik om een React-useState-setfunction aan te roepen |
  */
-declare function JustARadioButon<T = string>({ value, checked, label, groupName: name, id, size, color, styling, textAlign, disabled, errorMessage, onValueChanged, }: RBInputProps<T>): JSX.Element;
+declare function JustARadioButon<T = string>({ value, checked, label, groupName: name, id, size, color, styling, textAlign, disabled, errorMessage, helpTag, onValueChanged, onFocus, }: RBInputProps<T>): JSX.Element;
 export { JustARadioButon as RB };
 export type { RBInputProps };

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

@@ -89,7 +89,9 @@ declare const RadioGroup: {
 declare function InternRadioItem(props: RadioItemProps & {
     name: string;
     selectedItem: string;
+    helpTag?: string;
     setter: (identifier: string) => void;
+    onFocus?: (e: React.FocusEvent<HTMLInputElement>, ht?: string) => void;
 }): JSX.Element;
 /**
  * Een losstaand radio-item om zelf de groep te maken

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

@@ -15,7 +15,7 @@ declare type TextInputProps = BaseInputProps & {
      * - `A-Z`: alleen uppercase letters. lowercase maken we uppercase
      * - `a-Z`: alleen lowercase en uppercase letters
      * - `0-Z`: lowercase, uppercase & numeriek
-     * - `RegExp`: geef een regex op met alle toegestande karakters om NIET te replacen
+     * - `RegExp`: geef een regex op met alle toegestande karakters om **NIET** te replacen
      */
     characters?: CharType;
     /**

package/dist/forms/index.d.ts

@@ -16,7 +16,7 @@ export type { ColorInputProps } from './Others/ColorInput';
 export { HiddenInput } from './Others/HiddenInput';
 export type { HiddenInputProps } from './Others/HiddenInput';
 export { Input } from './Input';
-export type { InputProps, InputValueType } from './Input';
+export type { InputPropsType, InputStylingPropsType, InputValueType } from './Input';
 export { RadioGroup, Radio } from './Radio/Radio';
 export { RB } from './Radio/RB';
 export type { RBInputProps } from './Radio/RB';

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

@@ -2,6 +2,8 @@ import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import React from 'react';
 import { TextAlignmentProp, DirectionProp, KeyboardTypeProp, SizeProp } from '../../loon-react-bulma-types';
 export declare type BaseInputProps<T extends any = void> = {
+    /** De help-tag  van een input (ion loon gebruikt voor help */
+    helpTag?: string;
     /** Is dit veld disabled ? (optioneel) */
     disabled?: boolean;
     /** Name input: gebruikt voor een `<label>` als er geen label gedefinieerd is & de name-attribuut `<input>` */
@@ -32,6 +34,8 @@ export declare type BaseInputProps<T extends any = void> = {
     keyboardType?: KeyboardTypeProp;
     /** `onKeyDown`-event-callback, bijvoorbeeld voor het gebruik van Hotkeys als dit element focused is */
     onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+    /** `onFocus`-event-callback, met optionele helpTag (als opgegeven) */
+    onFocus?: (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>, helpTag?: string) => void;
     /** (optionele) Andere icoontjes voor op de inputs. Anders worden de default-waarden gebruikt. */
     icons?: {
         /** Icon aan start van een input */

package/dist/hooks/useCaretPosition.d.ts

@@ -1,4 +1,7 @@
 import React from 'react';
+/**
+ * Voor gebruik met inputs waarbij je ene bewerking doet en de positie van de cursor wilt onthouden.
+ */
 export declare function useCaretPosition<T extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement>(): {
     start: number;
     end: number;