@sebgroup/green-react 1.5.0 → 1.6.0

package/index.js

@@ -333,10 +333,10 @@ var store$2 = sharedStore;
 (shared$3.exports = function (key, value) {
   return store$2[key] || (store$2[key] = value !== undefined ? value : {});
 })('versions', []).push({
-  version: '3.29.1',
+  version: '3.30.1',
   mode: 'global',
   copyright: '© 2014-2023 Denis Pushkarev (zloirock.ru)',
-  license: 'https://github.com/zloirock/core-js/blob/v3.29.1/LICENSE',
+  license: 'https://github.com/zloirock/core-js/blob/v3.30.1/LICENSE',
   source: 'https://github.com/zloirock/core-js'
 });
 
@@ -2432,36 +2432,13 @@ const FormItem = ({
 const useInput = (props, onChanges, onChangeInput) => {
   const id = useMemo(() => props.id || randomId(), [props.id]);
   const ref = useRef(null);
-  const [value, setValue] = useState(props.value ? props.value : '');
-  const [checked, setChecked] = useState(props.checked ? props.checked : false);
-  useEffect(() => {
-    if (props.value !== undefined) setValue(props.value);
-    if (ref.current && ref.current.form) {
-      const resetListener = () => {
-        setValue(props.value ? props.value : '');
-        setChecked(props.checked ? props.checked : false);
-      };
-      const form = ref.current.form;
-      form.addEventListener('reset', resetListener);
-      return () => form.removeEventListener('reset', resetListener);
-    } else {
-      // eslint-disable-next-line @typescript-eslint/no-empty-function
-      return () => {};
-    }
-  }, [props]);
   const onChange = event => {
-    if (props.value === undefined) {
-      setValue(event.target.value);
-    }
-    setChecked(event.currentTarget.checked);
     onChanges && onChanges(event);
     onChangeInput && onChangeInput(event.target.value);
   };
   return Object.assign(Object.assign({}, props), {
     id,
     ref,
-    value,
-    checked,
     onChange
   });
 };
@@ -3108,6 +3085,7 @@ const InputWrapper = ({
 });
 function Slider({
   name = `${randomId()}-slider`,
+  value,
   defaultValue,
   min = 0,
   max = 100,
@@ -3120,8 +3098,9 @@ function Slider({
   disabled = false,
   onChange
 }) {
+  var _a;
   const [background, setBackground] = React.useState();
-  const [sliderValue, setSliderValue] = React.useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : 0);
+  const [sliderValue, setSliderValue] = React.useState((_a = value !== null && value !== void 0 ? value : defaultValue) !== null && _a !== void 0 ? _a : 0);
   React.useLayoutEffect(() => {
     if (disabled) {
       setBackground(sliderColors.disabled);
@@ -3130,6 +3109,9 @@ function Slider({
     const percent = (sliderValue - min) / (max - min) * 100;
     setBackground(getSliderTrackBackground(percent));
   }, [disabled, sliderValue]);
+  React.useEffect(() => {
+    setSliderValue(Number(value));
+  }, [value]);
   const handleChange = e => {
     const {
       value

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sebgroup/green-react",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "peerDependencies": {
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"

package/src/lib/accordion/accordion.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { AccordionItemInterface } from './accordion-item';
 export interface AccordionInterface {
     items: AccordionItemInterface[];

package/src/lib/datepicker/datepicker.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { DatepickerOptions } from '@sebgroup/extract';
 export declare const Datepicker: (options?: DatepickerOptions) => JSX.Element;

package/src/lib/dropdown/dropdown.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { DropdownArgs, OnChange } from '@sebgroup/extract';
 export interface DropdownProps extends DropdownArgs {
     onChange?: OnChange;

package/src/lib/dropdown/hooks.d.ts

@@ -7,7 +7,7 @@ interface HookArgs extends DropdownArgs {
     onChange?: OnChange;
     validator?: IValidator;
 }
-type Props = HTMLAttributes<HTMLElement>;
+declare type Props = HTMLAttributes<HTMLElement>;
 interface CheckboxItem {
     labelProps: Props;
     inputProps: InputHTMLAttributes<HTMLInputElement>;

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

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

package/src/lib/form/types.d.ts

@@ -28,4 +28,4 @@ export interface RadioButtonProps extends HTMLProps<HTMLInputElement> {
     validator?: string;
     value: string;
 }
-export type InputListener<T> = (newValue?: T) => unknown;
+export declare type InputListener<T> = (newValue?: T) => unknown;

package/src/lib/icons/bankId.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { IconProps } from '../../types/props';
 export declare const BankId: ({ fill, focusable, title, ...props }: IconProps) => JSX.Element;

package/src/lib/icons/check.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { IconProps } from '../../types/props';
 export declare const Check: ({ focusable, title }: IconProps) => JSX.Element;

package/src/lib/icons/chevronDown.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { IconProps } from '../../types/props';
 export declare const ChevronDown: ({ focusable, title }: IconProps) => JSX.Element;

package/src/lib/icons/infoCircle.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { IconProps } from '../../types/props';
 export declare const InfoCircle: ({ focusable, title, ...props }: IconProps) => JSX.Element;

package/src/lib/icons/square-exclamation.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { IconProps } from '../../types/props';
 export declare const SquareExclamation: ({ focusable, title, ...props }: IconProps) => JSX.Element;

package/src/lib/icons/square-info.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { IconProps } from '../../types/props';
 export declare const SquareInfo: ({ focusable, title, ...props }: IconProps) => JSX.Element;

package/src/lib/icons/times.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { IconProps } from '../../types/props';
 export declare const Times: ({ focusable, title }: IconProps) => JSX.Element;

package/src/lib/layout/flexbox/types.d.ts

@@ -1,5 +1,5 @@
-export type AlignContentType = 'start' | 'between' | 'center' | 'stretch' | 'around' | 'end' | 'sm-start' | 'sm-between' | 'sm-center' | 'sm-stretch' | 'sm-around' | 'sm-end' | 'md-start' | 'md-between' | 'md-center' | 'md-stretch' | 'md-around' | 'md-end' | 'lg-start' | 'lg-between' | 'lg-center' | 'lg-stretch' | 'lg-around' | 'lg-end' | 'xl-start' | 'xl-between' | 'xl-center' | 'xl-stretch' | 'xl-around' | 'xl-end' | 'xxl-start' | 'xxl-between' | 'xxl-center' | 'xxl-stretch' | 'xxl-around' | 'xxl-end';
-export type AlignType = 'start' | 'end' | 'center' | 'baseline' | 'stretch' | 'sm-start' | 'sm-end' | 'sm-center' | 'sm-baseline' | 'sm-stretch' | 'md-start' | 'md-end' | 'md-center' | 'md-baseline' | 'md-stretch' | 'lg-start' | 'lg-end' | 'lg-center' | 'lg-baseline' | 'lg-stretch' | 'xl-start' | 'xl-end' | 'xl-center' | 'xl-baseline' | 'xl-stretch' | 'xxl-start' | 'xxl-end' | 'xxl-center' | 'xxl-baseline' | 'xxl-stretch';
-export type JustifyContentType = 'start' | 'between' | 'center' | 'evenly' | 'around' | 'end' | 'sm-start' | 'sm-between' | 'sm-center' | 'sm-evenly' | 'sm-around' | 'sm-end' | 'md-start' | 'md-between' | 'md-center' | 'md-evenly' | 'md-around' | 'md-end' | 'lg-start' | 'lg-between' | 'lg-center' | 'lg-evenly' | 'lg-around' | 'lg-end' | 'xl-start' | 'xl-between' | 'xl-center' | 'xl-evenly' | 'xl-around' | 'xl-end' | 'xxl-start' | 'xxl-between' | 'xxl-center' | 'xxl-evenly' | 'xxl-around' | 'xxl-end';
-export type FlexDirectionType = 'row' | 'row-reverse' | 'column' | 'column-reverse' | 'sm-row' | 'sm-row-reverse' | 'sm-column' | 'sm-column-reverse' | 'md-row' | 'md-row-reverse' | 'md-column' | 'md-column-reverse' | 'lg-row' | 'lg-row-reverse' | 'lg-column' | 'lg-column-reverse' | 'xl-row' | 'xl-row-reverse' | 'xl-column' | 'xl-column-reverse' | 'xxl-row' | 'xxl-row-reverse' | 'xxl-column' | 'xxl-column-reverse';
-export type FlexWrapType = 'nowrap' | 'wrap' | 'wrap-reverse' | 'sm-nowrap' | 'sm-wrap' | 'sm-wrap-reverse' | 'md-nowrap' | 'md-wrap' | 'md-wrap-reverse' | 'lg-nowrap' | 'lg-wrap' | 'lg-wrap-reverse' | 'xl-nowrap' | 'xl-wrap' | 'xl-wrap-reverse' | 'xxl-nowrap' | 'xxl-wrap' | 'xxl-wrap-reverse';
+export declare type AlignContentType = 'start' | 'between' | 'center' | 'stretch' | 'around' | 'end' | 'sm-start' | 'sm-between' | 'sm-center' | 'sm-stretch' | 'sm-around' | 'sm-end' | 'md-start' | 'md-between' | 'md-center' | 'md-stretch' | 'md-around' | 'md-end' | 'lg-start' | 'lg-between' | 'lg-center' | 'lg-stretch' | 'lg-around' | 'lg-end' | 'xl-start' | 'xl-between' | 'xl-center' | 'xl-stretch' | 'xl-around' | 'xl-end' | 'xxl-start' | 'xxl-between' | 'xxl-center' | 'xxl-stretch' | 'xxl-around' | 'xxl-end';
+export declare type AlignType = 'start' | 'end' | 'center' | 'baseline' | 'stretch' | 'sm-start' | 'sm-end' | 'sm-center' | 'sm-baseline' | 'sm-stretch' | 'md-start' | 'md-end' | 'md-center' | 'md-baseline' | 'md-stretch' | 'lg-start' | 'lg-end' | 'lg-center' | 'lg-baseline' | 'lg-stretch' | 'xl-start' | 'xl-end' | 'xl-center' | 'xl-baseline' | 'xl-stretch' | 'xxl-start' | 'xxl-end' | 'xxl-center' | 'xxl-baseline' | 'xxl-stretch';
+export declare type JustifyContentType = 'start' | 'between' | 'center' | 'evenly' | 'around' | 'end' | 'sm-start' | 'sm-between' | 'sm-center' | 'sm-evenly' | 'sm-around' | 'sm-end' | 'md-start' | 'md-between' | 'md-center' | 'md-evenly' | 'md-around' | 'md-end' | 'lg-start' | 'lg-between' | 'lg-center' | 'lg-evenly' | 'lg-around' | 'lg-end' | 'xl-start' | 'xl-between' | 'xl-center' | 'xl-evenly' | 'xl-around' | 'xl-end' | 'xxl-start' | 'xxl-between' | 'xxl-center' | 'xxl-evenly' | 'xxl-around' | 'xxl-end';
+export declare type FlexDirectionType = 'row' | 'row-reverse' | 'column' | 'column-reverse' | 'sm-row' | 'sm-row-reverse' | 'sm-column' | 'sm-column-reverse' | 'md-row' | 'md-row-reverse' | 'md-column' | 'md-column-reverse' | 'lg-row' | 'lg-row-reverse' | 'lg-column' | 'lg-column-reverse' | 'xl-row' | 'xl-row-reverse' | 'xl-column' | 'xl-column-reverse' | 'xxl-row' | 'xxl-row-reverse' | 'xxl-column' | 'xxl-column-reverse';
+export declare type FlexWrapType = 'nowrap' | 'wrap' | 'wrap-reverse' | 'sm-nowrap' | 'sm-wrap' | 'sm-wrap-reverse' | 'md-nowrap' | 'md-wrap' | 'md-wrap-reverse' | 'lg-nowrap' | 'lg-wrap' | 'lg-wrap-reverse' | 'xl-nowrap' | 'xl-wrap' | 'xl-wrap-reverse' | 'xxl-nowrap' | 'xxl-wrap' | 'xxl-wrap-reverse';

package/src/lib/modal/modal.d.ts

@@ -1,6 +1,6 @@
 import { ModalType, Size } from '@sebgroup/extract';
 import { MouseEvent, ReactNode } from 'react';
-type ModalEventListener = (event: MouseEvent<HTMLButtonElement>) => unknown;
+declare type ModalEventListener = (event: MouseEvent<HTMLButtonElement>) => unknown;
 export interface ModalProps {
     type?: ModalType;
     header?: string;

package/src/lib/slider/slider.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { SliderProps } from '../../types';
-export declare function Slider({ name, defaultValue, min, max, step, label, instruction, errorMessage, hasTextbox, unitLabel, disabled, onChange, }: SliderProps): JSX.Element;
+export declare function Slider({ name, value, defaultValue, min, max, step, label, instruction, errorMessage, hasTextbox, unitLabel, disabled, onChange, }: SliderProps): JSX.Element;
 export default Slider;

package/src/lib/stepper/stepper.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { StepperArgs } from './hook';
 import { IValidator } from "@sebgroup/extract";
 export interface StepperProps extends StepperArgs {

package/src/types/props/index.d.ts

@@ -15,7 +15,7 @@ export interface LabelProps {
 }
 export interface SliderProps {
     name?: string;
-    defaultValue?: number;
+    value?: number;
     min?: number;
     max?: number;
     step?: number;
@@ -26,4 +26,8 @@ export interface SliderProps {
     unitLabel?: string;
     disabled?: boolean;
     onChange?: (value: number) => void;
+    /**
+     * @deprecated Use `value` instead
+     */
+    defaultValue?: number;
 }