@sebgroup/green-react 1.0.0-beta.14 → 1.0.0-beta.18

package/index.esm.js

@@ -1757,9 +1757,7 @@ function Card({
   }, {
     children: [jsx("header", {
       children: header
-    }), jsx("p", {
-      children: children
-    }), jsx("footer", {
+    }), children, jsx("footer", {
       children: footer
     })]
   }));
@@ -1976,6 +1974,7 @@ const FormItems = ({
   }, []);
 
   const onChange = event => {
+    if (!event.target) return;
     const {
       value,
       name,
@@ -2314,6 +2313,7 @@ if (DESCRIPTORS && isCallable(NativeSymbol) && (!('description' in SymbolPrototy
 }
 
 const RadioGroup = ({
+  defaultSelected,
   description,
   title,
   validator,
@@ -2336,6 +2336,7 @@ const RadioGroup = ({
     var _a;
 
     if (radioBtnRef && radioBtnRef.current) {
+      if (defaultSelected) setChecked(defaultSelected);
       const form = (_a = radioBtnRef === null || radioBtnRef === void 0 ? void 0 : radioBtnRef.current) === null || _a === void 0 ? void 0 : _a.form;
 
       const resetListner = () => {
@@ -2555,7 +2556,9 @@ const useDropdown = ({
   useValue,
   display,
   togglerRef,
-  listboxRef
+  listboxRef,
+  onChange,
+  validator
 }) => {
   const [handler, setHandler] = useState();
   const [dropdown, setDropdown] = useState();
@@ -2593,7 +2596,14 @@ const useDropdown = ({
           className: (_a = o.classes) === null || _a === void 0 ? void 0 : _a.join(' '),
           children: o[dropdown.display],
           selected: o.selected,
-          onClick: () => handler === null || handler === void 0 ? void 0 : handler.select(o)
+          onClick: () => {
+            handler === null || handler === void 0 ? void 0 : handler.select(o).then(() => {
+              if (onChange) {
+                const result = options.find(item => item.key === o.key);
+                result && onChange(result);
+              }
+            });
+          }
         });
       });
       setListItems(newListItems);
@@ -2605,7 +2615,14 @@ const useDropdown = ({
         inputProps: {
           defaultChecked: o.selected,
           type: 'checkbox',
-          onChange: () => handler === null || handler === void 0 ? void 0 : handler.select(o, false)
+          onChange: () => {
+            handler === null || handler === void 0 ? void 0 : handler.select(o, false).then(() => {
+              if (onChange) {
+                const result = options.find(item => item.key === o.key);
+                result && onChange(result);
+              }
+            });
+          }
         },
         spanProps: {
           children: o[dropdown.display]
@@ -2639,7 +2656,12 @@ const useDropdown = ({
       loop,
       multiSelect
     }); // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [id, texts, options, loop, multiSelect, selectValue, useValue, display]); // Create dropdown handler
+  }, [id, texts, options, loop, multiSelect, selectValue, useValue, display]); // When validator changes
+
+  useEffect(() => {
+    if (!dropdown) return;
+    if (validator) handler === null || handler === void 0 ? void 0 : handler.validate(validator);
+  }, [validator]); // Create dropdown handler
 
   useEffect(() => {
     if (!handler && togglerRef.current && listboxRef.current) {
@@ -2651,7 +2673,8 @@ const useDropdown = ({
         multiSelect,
         selectValue,
         useValue,
-        display
+        display,
+        validator
       }, togglerRef.current, listboxRef.current, listboxRef.current, dd => setDropdown(dd)));
     }
 
@@ -2674,7 +2697,9 @@ const Dropdown = ({
   selectValue,
   useValue,
   display,
-  texts
+  texts,
+  onChange,
+  validator
 }) => {
   var _a;
 
@@ -2696,9 +2721,13 @@ const Dropdown = ({
     display,
     togglerRef,
     listboxRef,
-    texts
+    texts,
+    onChange,
+    validator
   });
-  return jsxs("div", {
+  return jsxs("div", Object.assign({
+    className: "form-group"
+  }, {
     children: [jsx("button", Object.assign({
       type: "button"
     }, togglerProps, {
@@ -2733,8 +2762,12 @@ const Dropdown = ({
       }, {
         children: listItems.map(liProps => jsx("li", Object.assign({}, liProps), liProps.id))
       }))]
+    })), validator && jsx("span", Object.assign({
+      className: "form-info"
+    }, {
+      children: validator === null || validator === void 0 ? void 0 : validator.message
     }))]
-  });
+  }));
 };
 
 export { Alert, Badge, Button, ButtonGroup, Card, Checkbox, Dropdown, EmailInput, Flexbox, Form, FormItems, Group, Link, List, Modal, Navbar, NumberInput, RadioButton, RadioGroup, RenderInput, Text, TextInput };

package/index.umd.js

@@ -1763,9 +1763,7 @@
 	  }, {
 	    children: [jsxRuntime.jsx("header", {
 	      children: header
-	    }), jsxRuntime.jsx("p", {
-	      children: children
-	    }), jsxRuntime.jsx("footer", {
+	    }), children, jsxRuntime.jsx("footer", {
 	      children: footer
 	    })]
 	  }));
@@ -1982,6 +1980,7 @@
 	  }, []);
 
 	  const onChange = event => {
+	    if (!event.target) return;
 	    const {
 	      value,
 	      name,
@@ -2320,6 +2319,7 @@
 	}
 
 	const RadioGroup = ({
+	  defaultSelected,
 	  description,
 	  title,
 	  validator,
@@ -2342,6 +2342,7 @@
 	    var _a;
 
 	    if (radioBtnRef && radioBtnRef.current) {
+	      if (defaultSelected) setChecked(defaultSelected);
 	      const form = (_a = radioBtnRef === null || radioBtnRef === void 0 ? void 0 : radioBtnRef.current) === null || _a === void 0 ? void 0 : _a.form;
 
 	      const resetListner = () => {
@@ -2561,7 +2562,9 @@
 	  useValue,
 	  display,
 	  togglerRef,
-	  listboxRef
+	  listboxRef,
+	  onChange,
+	  validator
 	}) => {
 	  const [handler, setHandler] = React.useState();
 	  const [dropdown, setDropdown] = React.useState();
@@ -2599,7 +2602,14 @@
 	          className: (_a = o.classes) === null || _a === void 0 ? void 0 : _a.join(' '),
 	          children: o[dropdown.display],
 	          selected: o.selected,
-	          onClick: () => handler === null || handler === void 0 ? void 0 : handler.select(o)
+	          onClick: () => {
+	            handler === null || handler === void 0 ? void 0 : handler.select(o).then(() => {
+	              if (onChange) {
+	                const result = options.find(item => item.key === o.key);
+	                result && onChange(result);
+	              }
+	            });
+	          }
 	        });
 	      });
 	      setListItems(newListItems);
@@ -2611,7 +2621,14 @@
 	        inputProps: {
 	          defaultChecked: o.selected,
 	          type: 'checkbox',
-	          onChange: () => handler === null || handler === void 0 ? void 0 : handler.select(o, false)
+	          onChange: () => {
+	            handler === null || handler === void 0 ? void 0 : handler.select(o, false).then(() => {
+	              if (onChange) {
+	                const result = options.find(item => item.key === o.key);
+	                result && onChange(result);
+	              }
+	            });
+	          }
 	        },
 	        spanProps: {
 	          children: o[dropdown.display]
@@ -2645,7 +2662,12 @@
 	      loop,
 	      multiSelect
 	    }); // eslint-disable-next-line react-hooks/exhaustive-deps
-	  }, [id, texts, options, loop, multiSelect, selectValue, useValue, display]); // Create dropdown handler
+	  }, [id, texts, options, loop, multiSelect, selectValue, useValue, display]); // When validator changes
+
+	  React.useEffect(() => {
+	    if (!dropdown) return;
+	    if (validator) handler === null || handler === void 0 ? void 0 : handler.validate(validator);
+	  }, [validator]); // Create dropdown handler
 
 	  React.useEffect(() => {
 	    if (!handler && togglerRef.current && listboxRef.current) {
@@ -2657,7 +2679,8 @@
 	        multiSelect,
 	        selectValue,
 	        useValue,
-	        display
+	        display,
+	        validator
 	      }, togglerRef.current, listboxRef.current, listboxRef.current, dd => setDropdown(dd)));
 	    }
 
@@ -2680,7 +2703,9 @@
 	  selectValue,
 	  useValue,
 	  display,
-	  texts
+	  texts,
+	  onChange,
+	  validator
 	}) => {
 	  var _a;
 
@@ -2702,9 +2727,13 @@
 	    display,
 	    togglerRef,
 	    listboxRef,
-	    texts
+	    texts,
+	    onChange,
+	    validator
 	  });
-	  return jsxRuntime.jsxs("div", {
+	  return jsxRuntime.jsxs("div", Object.assign({
+	    className: "form-group"
+	  }, {
 	    children: [jsxRuntime.jsx("button", Object.assign({
 	      type: "button"
 	    }, togglerProps, {
@@ -2739,8 +2768,12 @@
 	      }, {
 	        children: listItems.map(liProps => jsxRuntime.jsx("li", Object.assign({}, liProps), liProps.id))
 	      }))]
+	    })), validator && jsxRuntime.jsx("span", Object.assign({
+	      className: "form-info"
+	    }, {
+	      children: validator === null || validator === void 0 ? void 0 : validator.message
 	    }))]
-	  });
+	  }));
 	};
 
 	exports.Alert = Alert;

package/lib/dropdown/dropdown.d.ts

@@ -1,4 +1,5 @@
 import { DropdownOption, DropdownTexts } from '@sebgroup/extract';
+import { IValidator } from "@sebgroup/extract";
 export interface DropdownProps {
     id?: string;
     texts?: DropdownTexts;
@@ -8,6 +9,8 @@ export interface DropdownProps {
     selectValue?: string;
     loop?: boolean;
     multiSelect?: boolean;
+    onChange?: (o: DropdownOption) => void;
+    validator?: IValidator;
 }
-export declare const Dropdown: ({ id, options, loop, multiSelect, selectValue, useValue, display, texts, }: DropdownProps) => JSX.Element;
+export declare const Dropdown: ({ id, options, loop, multiSelect, selectValue, useValue, display, texts, onChange, validator }: DropdownProps) => JSX.Element;
 export default Dropdown;

package/lib/dropdown/hooks.d.ts

@@ -1,5 +1,6 @@
 import { DropdownHandler, DropdownOption, DropdownTexts } from '@sebgroup/extract';
 import { HTMLAttributes, InputHTMLAttributes, RefObject } from 'react';
+import { IValidator } from "@sebgroup/extract";
 interface HookArgs {
     id?: string;
     texts?: DropdownTexts;
@@ -11,6 +12,8 @@ interface HookArgs {
     display?: string;
     togglerRef: RefObject<HTMLElement>;
     listboxRef: RefObject<HTMLElement>;
+    onChange?: (o: DropdownOption) => void;
+    validator?: IValidator;
 }
 declare type Props = HTMLAttributes<HTMLElement>;
 interface CheckboxItem {
@@ -30,5 +33,5 @@ interface HookResult {
     listItems: Props[];
     multiSelectProps: MultiSelectProps;
 }
-export declare const useDropdown: ({ id, texts, options, loop, multiSelect, selectValue, useValue, display, togglerRef, listboxRef, }: HookArgs) => HookResult;
+export declare const useDropdown: ({ id, texts, options, loop, multiSelect, selectValue, useValue, display, togglerRef, listboxRef, onChange, validator }: HookArgs) => HookResult;
 export {};

package/lib/form/formItems.d.ts

@@ -1,5 +1,5 @@
+import { IValidator } from '@sebgroup/extract';
 import React from 'react';
-import { IValidator } from './types';
 export interface FormItemsProps {
     children: React.ReactNode;
     validate?: IValidator;

package/lib/form/input/input.d.ts

@@ -1,5 +1,6 @@
 import { InputHTMLAttributes } from 'react';
-import { CheckboxProps, IValidator, NumberInputProps, RadioButtonProps, TextInputProps } from '../types';
+import { CheckboxProps, NumberInputProps, RadioButtonProps, TextInputProps } from '../types';
+import { IValidator } from '@sebgroup/extract';
 import React from 'react';
 export declare type Renderer = (type: string, props: InputHTMLAttributes<HTMLInputElement>, onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void, onChangeInput?: (value: string) => string, label?: string, info?: string, validator?: IValidator) => JSX.Element;
 export declare const RenderInput: Renderer;

package/lib/form/radioButton/radioGroup.d.ts

@@ -1,12 +1,13 @@
 import React from 'react';
-import { IValidator } from '../types';
+import { IValidator } from '@sebgroup/extract';
 export interface RadioGroupProps {
     title?: string;
+    defaultSelected?: string;
     description?: string;
     validator?: IValidator;
     onChangeRadio?: (value: string) => string;
     onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
     name?: string;
 }
-export declare const RadioGroup: ({ description, title, validator, onChangeRadio, onChange, name, children }: React.PropsWithChildren<RadioGroupProps>) => JSX.Element;
+export declare const RadioGroup: ({ defaultSelected, description, title, validator, onChangeRadio, onChange, name, children }: React.PropsWithChildren<RadioGroupProps>) => JSX.Element;
 export default RadioGroup;

package/lib/form/types.d.ts

@@ -1,4 +1,4 @@
-import { IndicatorType, ValidatorRules } from '@sebgroup/extract';
+import { IValidator } from '@sebgroup/extract';
 import { HTMLProps } from 'react';
 export interface TextInputProps extends HTMLProps<HTMLInputElement> {
     type?: 'text' | 'email' | 'number';
@@ -21,8 +21,3 @@ export interface RadioButtonProps extends HTMLProps<HTMLInputElement> {
     value: string;
 }
 export declare type InputListener<T> = (newValue?: T) => unknown;
-export interface IValidator {
-    message: string;
-    indicator: IndicatorType;
-    rules?: ValidatorRules;
-}

package/lib/stepper/hook.d.ts

@@ -0,0 +1,3 @@
+import { AbstractStepper, StepperArgs, StepperData } from '@sebgroup/extract';
+export { StepperArgs };
+export declare const useStepper: ({ min, max, value, step, id }: StepperArgs) => [AbstractStepper, StepperData];

package/lib/stepper/stepper.d.ts

@@ -0,0 +1,8 @@
+import { StepperArgs } from './hook';
+export interface StepperProps extends StepperArgs {
+    label?: string;
+    description?: string;
+    statusMessage?: string;
+    onChange?: (value: number) => void;
+}
+export declare function Stepper({ label, description, statusMessage, onChange, ...props }: StepperProps): JSX.Element;

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@sebgroup/green-react",
-  "version": "1.0.0-beta.14",
+  "version": "1.0.0-beta.18",
   "peerDependencies": {
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
   "dependencies": {
-    "@sebgroup/chlorophyll": "^1.0.0-beta.14",
-    "@sebgroup/extract": "^1.0.0-beta.14"
+    "@sebgroup/chlorophyll": "^1.0.0-beta.17",
+    "@sebgroup/extract": "^1.0.0-beta.17"
   },
   "description": "React components built on top of @sebgroup/chlorophyll.",
   "repository": {