loon-bulma-react 2023.0.7 → 2023.0.9

package/README.md

@@ -2,11 +2,11 @@
 
 > ## Aanpassingen
 >
-> DataTable: als er geen rijen zijn, kan je met de `onNoRowsToRender`-prop vertellen wat er dan WEL gerendered moet worden
-> DataTable: striped-color & hover-color zijn anders
-> DataTable: search-bar smaller en maximaal helft van de beschikbare ruimte
-> DataTable: wrapping van header elementen aangepast
-> Currency Input: gemaakt - probeer maar
+> - DataTable: als er geen rijen zijn, kan je met de `onNoRowsToRender`-prop vertellen wat er dan WEL gerendered moet worden
+> - DataTable: striped-color & hover-color zijn anders
+> - DataTable: search-bar smaller en maximaal helft van de beschikbare ruimte
+> - DataTable: wrapping van header elementen aangepast
+> - Currency Input: gemaakt - probeer maar
 
 ## [Bulma](https://bulma.io/) & [React](https://reactjs.org/) componenten voor Loon Salarissoftware.
 
@@ -16,19 +16,16 @@
 - [Confirmation](#confirmation)
 - [Componenten](#components)
 
-  - [Layout](#layout)
-
-    - [AspectRatio](#layout-aspectratio)
-    - [Box](#layout-box)
-    - [Columns](#layout-columns)
-    - [Container](#layout-container)
-    - [Content](#layout-content)
-    - [Footer](#component-footer)
-    - [Hero](#layout-hero)
-    - [Image](#layout-image)
-    - [Section](#layout-section)
-    - [ScrollArea](#layout-scrollarea)
-
+  - [AspectRatio](#layout-aspectratio)
+  - [Box](#layout-box)
+  - [Columns](#layout-columns)
+  - [Container](#layout-container)
+  - [Content](#layout-content)
+  - [Footer](#component-footer)
+  - [Hero](#layout-hero)
+  - [Image](#layout-image)
+  - [Section](#layout-section)
+  - [ScrollArea](#layout-scrollarea)
   - [Button & ButtonGroup](#component-button)
   - [Calendar](#components-calendar)
     - [MonthView](#components-calendar-monthview)

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

@@ -30,6 +30,8 @@ declare type DataTableProps<T extends unknown> = {
     /** wat is het maximaal aantal rijen dat zichtbaar is zonder paginatie? Als 0 is er geen maximum aantal rijen (default 0) */
     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.
@@ -104,7 +106,7 @@ declare type DataTableColumn<T extends unknown> = {
  *     onRowSelected={(i, r) => handleRowClick(i, r)}
  *     defaultSortCol="Naam"
  *     rowClasses={(item: IUser) => (item.first_name.startsWith('C') ? 'is-dangerous' : '')}
- *     searchTxt="Zoek een persoon ..."
+ *     searchPlaceholder="Zoek een persoon ..."
  *     rowIdentifier="id"
  *     striped={true}
  *     hoverable={true}
@@ -124,6 +126,6 @@ declare type DataTableColumn<T extends unknown> = {
  * );
  *
  */
-declare function DataTable<T extends unknown>(props: DataTableProps<T>): JSX.Element;
+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;
 export { DataTable };
 export type { DataTableProps, DataTableColumn };

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

@@ -2,7 +2,7 @@
 import { ColorProp } from '~/loon-react-bulma-types';
 export declare type NotifierProviderProps = {
     /** de child-components die de notifier mogen gebruiken */
-    children: any;
+    children: React.ReactNode;
     /** waar moet de notifier getoont worden? (default = 'top') */
     location?: 'top' | 'bottom';
     /** de tijd (in ms) waarna een notificatie automatisch moet dismissen */
@@ -29,4 +29,6 @@ export declare type NotifierItemProps = {
     dismissAfter?: 0 | number;
     /** wat te doen als er geklikt wordt. Bij een 'click' wordt de notificatie ook gesloten. */
     onClick?: (e: any) => void;
+    /** payload voor de notification */
+    payload?: any;
 };

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

@@ -13,6 +13,8 @@ declare type CurrencyInputProps = Omit<BaseInputProps, 'labelHidden'> & {
     decimalSeparator?: string;
     /** scheidingsteken per duizend (default = '.') */
     thousandsSeparator?: string;
+    /** altijd de centen tonen, ook als dat '0' is (default = true) */
+    alwaysShowCents?: boolean;
 };
 /**
  * Maak een input van een tekst-type met optionele validation.
@@ -42,6 +44,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, ...props }: CurrencyInputProps): JSX.Element;
+declare function LbrCurrencyInput({ label, name, id, value, validation, errorMessage, size, textAlign, disabled, placeholder, keyboardType, tooltip, direction, onValueChanged, onKeyDown, decimalSeparator, alwaysShowCents, ...props }: CurrencyInputProps): JSX.Element;
 export { LbrCurrencyInput as CurrencyInput };
 export type { CurrencyInputProps };

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

@@ -8,5 +8,5 @@ declare type InputErrorProps = {
     touched?: boolean;
 };
 /** Toon een erorr bij een input */
-declare const InputError: (props: InputErrorProps) => JSX.Element | null;
+declare const InputError: ({ stateError, outsideError, touched }: InputErrorProps) => JSX.Element | null;
 export { InputError };

package/dist/hooks/useDebouncedValue.d.ts

@@ -14,6 +14,6 @@ declare type useDebounceHookOptions = {
  * @returns de waarde en een cancel-functie
  * @example const { value, cancel } = useDebounce(value, { delay: 1000 });
  */
-declare function useDebouncedValue<T = any>(value: T, options?: useDebounceHookOptions): readonly [T, () => void];
+declare function useDebouncedValue<T = unknown>(value: T, options?: useDebounceHookOptions): readonly [T, () => void];
 export { useDebouncedValue };
 export type { useDebounceHookOptions };

package/dist/hooks/useLocalStoredState.d.ts

@@ -26,12 +26,12 @@ declare type UseLocalStoredStateFn<T = string> = {
  * | deserialize  | `function` | 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 } = useLocalStoredState({ key: 'myKey', initialValue: 'Oompa Loompa' });
+ * const [ value, setValue, removeFromLocalStorage ] = useLocalStoredState({ key: 'myKey', initialValue: 'Oompa Loompa' });
  * // 1. value is 'Oompa Loompa', put it somewhere on the screen
  * // 2. change the value to something else
  * // 3. refresh the page.
  * // 4. see te new value on the page.
  * // 5. you can also check the value in Local Storage in devtools.
  */
-declare function useLocalStoredState<T = string>({ key, initialValue, deserialize, serialize }: UseLocalStoredStateFn<T>): readonly [T | undefined, (value: T) => void, () => void];
+declare function useLocalStoredState<T extends unknown>({ key, initialValue, deserialize, serialize }: UseLocalStoredStateFn<T>): readonly [T | undefined, (value: T) => void, () => void];
 export { useLocalStoredState, serializeJSON, deserializeJSON };

package/dist/hooks/useToggle.d.ts

@@ -5,7 +5,7 @@
  * @returns een state-toggle function
  * @example const [state, toggle] = useToggle("yes", ["yes", "no"]);
  */
-declare function useToggle<T>(initialState: T, options: [T, T]): readonly [T, (value?: T) => void];
+declare function useToggle<T extends unknown>(initialState: T, options: [T, T]): readonly [T, (value?: T) => void];
 /**
  * useToggle voor booleans
  * @param initialState initia

package/dist/hooks/useValidatedState.d.ts

@@ -14,7 +14,7 @@
  *
  * <input onChange={onChange} value={value} />
  */
-export declare function useValidatedState<T>(initialValue?: T, validation?: (value?: T) => [boolean, string]): readonly [{
+export declare function useValidatedState<T extends unknown>(initialValue?: T, validation?: (value?: T) => [boolean, string]): readonly [{
     readonly value: T | undefined;
     readonly lastValidValue: T | undefined;
     readonly valid: boolean;