chili-ui 0.2.0 → 0.3.1

package/chili/components/Radio/RadioGroup.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { isFunction, isBoolean } from 'lodash';
 import { RadioButton } from './RadioButton';
 import {
-  getClassNames, useTheme, useElement, useProps,
+  getClassNames, useTheme, useElement, useProps, useValue,
 } from '../../utils';
 import { Div } from '../Div';
 import { COMPONENTS_NAMESPACES } from '../../constants';
@@ -16,6 +16,7 @@ export const RadioGroup = React.forwardRef((props: RadioGroupProps, ref?: React.
   const {
     children,
     className,
+    defaultValue,
     name,
     onChange,
     value: valueProp,
@@ -25,14 +26,15 @@ export const RadioGroup = React.forwardRef((props: RadioGroupProps, ref?: React.
 
   const theme = useTheme(props.theme, COMPONENTS_NAMESPACES.radio);
 
-  const [valueState, setValueState] = React.useState<string | number | undefined | null>();
-
-  const value = valueProp === undefined ? valueState : valueProp;
+  const [value, setValueState] = useValue<string | number | null | undefined>(
+    valueProp,
+    defaultValue ?? null,
+  );
 
   const { isValid, InvalidMessage } = useValidation(props, {
     value,
   }, {
-    reset: createResetHandler(props, setValueState),
+    reset: createResetHandler(props, setValueState, defaultValue),
   });
 
   const combinedClassNames = getClassNames(
@@ -51,7 +53,7 @@ export const RadioGroup = React.forwardRef((props: RadioGroupProps, ref?: React.
     Div,
     wrapperRender,
     props,
-    { value: valueState },
+    { value },
   );
 
   return (

package/chili/components/Radio/handlers.ts

@@ -4,13 +4,15 @@ import type { RadioGroupProps } from './types';
 export const createResetHandler = (
   props: RadioGroupProps,
   setValue: SetState<string | number | null | undefined>,
+  defaultValue?: string | number | null,
 ) => () => {
-  setValue(null);
+  const newValue = defaultValue ?? null;
+  setValue(newValue);
 
   props.onChange?.({
     component: {
       name: props.name,
-      value: null,
+      value: newValue,
     },
   });
 };

package/chili/components/Radio/types.ts

@@ -6,7 +6,7 @@ import type { ValidationProps } from '../Validation/types';
 
 export interface ResetEvent {
   component: {
-    value: null,
+    value: string | number | null,
     name?: string,
   },
 }
@@ -23,6 +23,8 @@ export interface RadioGroupProps extends ValidationProps {
   children: React.ReactNode,
   /** Whole component disabled state */
   isDisabled?: boolean,
+  /** Default value */
+  defaultValue?: string | number | null,
   /** Name */
   name?: string,
   /** Change handler */

package/dist/components/Radio/RadioGroup.js

@@ -2,20 +2,19 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { isFunction, isBoolean } from 'lodash';
 import { RadioButton } from './RadioButton';
-import { getClassNames, useTheme, useElement, useProps, } from '../../utils';
+import { getClassNames, useTheme, useElement, useProps, useValue, } from '../../utils';
 import { Div } from '../Div';
 import { COMPONENTS_NAMESPACES } from '../../constants';
 import { createResetHandler } from './handlers';
 import { useValidation } from '../Validation';
 export const RadioGroup = React.forwardRef((props, ref) => {
-    const { children, className, name, onChange, value: valueProp, wrapperRender, isDisabled, } = useProps(props);
+    const { children, className, defaultValue, name, onChange, value: valueProp, wrapperRender, isDisabled, } = useProps(props);
     const theme = useTheme(props.theme, COMPONENTS_NAMESPACES.radio);
-    const [valueState, setValueState] = React.useState();
-    const value = valueProp === undefined ? valueState : valueProp;
+    const [value, setValueState] = useValue(valueProp, defaultValue !== null && defaultValue !== void 0 ? defaultValue : null);
     const { isValid, InvalidMessage } = useValidation(props, {
         value,
     }, {
-        reset: createResetHandler(props, setValueState),
+        reset: createResetHandler(props, setValueState, defaultValue),
     });
     const combinedClassNames = getClassNames(theme.wrapper, className);
     const handleChange = React.useCallback((ev) => {
@@ -23,7 +22,7 @@ export const RadioGroup = React.forwardRef((props, ref) => {
             onChange(ev);
         return setValueState(ev.component.value);
     }, [onChange]);
-    const Wrapper = useElement('Wrapper', Div, wrapperRender, props, { value: valueState });
+    const Wrapper = useElement('Wrapper', Div, wrapperRender, props, { value });
     return (_jsxs(Wrapper, { className: combinedClassNames, ref: ref, children: [React.Children.toArray(children).map((child) => {
                 if (child
                     && React.isValidElement(child)

package/dist/components/Radio/RadioGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.js","sourceRoot":"","sources":["../../../chili/components/Radio/RadioGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EACL,aAAa,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,GAC9C,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAC7B,OAAO,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AAIxD,OAAO,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAE9C,MAAM,CAAC,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC,KAAsB,EAAE,GAA4B,EAAsB,EAAE;IACtH,MAAM,EACJ,QAAQ,EACR,SAAS,EACT,IAAI,EACJ,QAAQ,EACR,KAAK,EAAE,SAAS,EAChB,aAAa,EACb,UAAU,GACX,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEpB,MAAM,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,KAAK,EAAE,qBAAqB,CAAC,KAAK,CAAC,CAAC;IAEjE,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,KAAK,CAAC,QAAQ,EAAsC,CAAC;IAEzF,MAAM,KAAK,GAAG,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC;IAE/D,MAAM,EAAE,OAAO,EAAE,cAAc,EAAE,GAAG,aAAa,CAAC,KAAK,EAAE;QACvD,KAAK;KACN,EAAE;QACD,KAAK,EAAE,kBAAkB,CAAC,KAAK,EAAE,aAAa,CAAC;KAChD,CAAC,CAAC;IAEH,MAAM,kBAAkB,GAAG,aAAa,CACtC,KAAK,CAAC,OAAO,EACb,SAAS,CACV,CAAC;IAEF,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,EAAe,EAAE,EAAE;QACzD,IAAI,UAAU,CAAC,QAAQ,CAAC;YAAE,QAAQ,CAAC,EAAE,CAAC,CAAC;QAEvC,OAAO,aAAa,CAAC,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;IAC3C,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,MAAM,OAAO,GAAG,UAAU,CACxB,SAAS,EACT,GAAG,EACH,aAAa,EACb,KAAK,EACL,EAAE,KAAK,EAAE,UAAU,EAAE,CACtB,CAAC;IAEF,OAAO,CACL,MAAC,OAAO,IACN,SAAS,EAAE,kBAAkB,EAC7B,GAAG,EAAE,GAAG,aAEP,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;gBAC9C,IAAI,KAAK;uBACJ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;uBAC3B,CAAC,KAAK,CAAC,IAAI,KAAK,WAAW,IAAK,KAAK,CAAC,IAA0B,CAAC,IAAI,KAAK,aAAa,CAAC,EAC3F,CAAC;oBACD,OAAO,KAAK,CAAC,YAAY,CAAC,KAAK,EAAE;wBAC/B,IAAI;wBACJ,QAAQ,EAAE,YAAY;wBACtB,UAAU,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU;wBACvE,SAAS,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,KAAK,KAAK;wBACtC,KAAK,kCAAO,KAAK,GAAK,KAAK,CAAC,KAAK,CAAC,KAAK,CAAE;wBAC3C,gEAAgE;wBAChE,8DAA8D;qBACtD,CAAC,CAAC;gBACZ,CAAC;gBACD,OAAO,KAAK,CAAC;YACf,CAAC,CAAC,EACD,CAAC,OAAO,IAAI,KAAC,cAAc,KAAG,IACvB,CACX,CAAC;AACJ,CAAC,CAA8B,CAAC;AAEhC,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC"}
+{"version":3,"file":"RadioGroup.js","sourceRoot":"","sources":["../../../chili/components/Radio/RadioGroup.tsx"],"names":[],"mappings":"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"}

package/dist/components/Radio/handlers.d.ts

@@ -1,3 +1,3 @@
 import type { SetState } from '../../commonTypes';
 import type { RadioGroupProps } from './types';
-export declare const createResetHandler: (props: RadioGroupProps, setValue: SetState<string | number | null | undefined>) => () => void;
+export declare const createResetHandler: (props: RadioGroupProps, setValue: SetState<string | number | null | undefined>, defaultValue?: string | number | null) => () => void;

package/dist/components/Radio/handlers.js

@@ -1,10 +1,11 @@
-export const createResetHandler = (props, setValue) => () => {
+export const createResetHandler = (props, setValue, defaultValue) => () => {
     var _a;
-    setValue(null);
+    const newValue = defaultValue !== null && defaultValue !== void 0 ? defaultValue : null;
+    setValue(newValue);
     (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, {
         component: {
             name: props.name,
-            value: null,
+            value: newValue,
         },
     });
 };

package/dist/components/Radio/handlers.js.map

@@ -1 +1 @@
-{"version":3,"file":"handlers.js","sourceRoot":"","sources":["../../../chili/components/Radio/handlers.ts"],"names":[],"mappings":"AAGA,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAChC,KAAsB,EACtB,QAAsD,EACtD,EAAE,CAAC,GAAG,EAAE;;IACR,QAAQ,CAAC,IAAI,CAAC,CAAC;IAEf,MAAA,KAAK,CAAC,QAAQ,sDAAG;QACf,SAAS,EAAE;YACT,IAAI,EAAE,KAAK,CAAC,IAAI;YAChB,KAAK,EAAE,IAAI;SACZ;KACF,CAAC,CAAC;AACL,CAAC,CAAC"}
+{"version":3,"file":"handlers.js","sourceRoot":"","sources":["../../../chili/components/Radio/handlers.ts"],"names":[],"mappings":"AAGA,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAChC,KAAsB,EACtB,QAAsD,EACtD,YAAqC,EACrC,EAAE,CAAC,GAAG,EAAE;;IACR,MAAM,QAAQ,GAAG,YAAY,aAAZ,YAAY,cAAZ,YAAY,GAAI,IAAI,CAAC;IACtC,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAEnB,MAAA,KAAK,CAAC,QAAQ,sDAAG;QACf,SAAS,EAAE;YACT,IAAI,EAAE,KAAK,CAAC,IAAI;YAChB,KAAK,EAAE,QAAQ;SAChB;KACF,CAAC,CAAC;AACL,CAAC,CAAC"}

package/dist/components/Radio/types.d.ts

@@ -5,7 +5,7 @@ import type { CustomRender } from '../../commonTypes';
 import type { ValidationProps } from '../Validation/types';
 export interface ResetEvent {
     component: {
-        value: null;
+        value: string | number | null;
         name?: string;
     };
 }
@@ -20,6 +20,8 @@ export interface RadioGroupProps extends ValidationProps {
     children: React.ReactNode;
     /** Whole component disabled state */
     isDisabled?: boolean;
+    /** Default value */
+    defaultValue?: string | number | null;
     /** Name */
     name?: string;
     /** Change handler */

package/docs/src/app/form-components/radio/_demo/Uncontrolled.tsx

@@ -13,6 +13,7 @@ export const Uncontrolled = () => (
       onChange={({ component }) => {
         log(component.value)
       }}
+      defaultValue={2}
     >
       <L.RadioButton value={1}>One</L.RadioButton>
       <L.RadioButton value={2}>Two</L.RadioButton>

package/docs/src/app/form-components/radio/page.tsx

@@ -28,6 +28,11 @@ const RadioPage = () => (
             <Td>React.Node</Td>
             <Td>RadioButton elements</Td>
           </tr>
+          <tr>
+            <Td>defaultValue</Td>
+            <Td>number | string | null</Td>
+            <Td>Default value</Td>
+          </tr>
           <tr>
             <Td>isDisabled</Td>
             <Td>boolean</Td>
@@ -47,7 +52,7 @@ const RadioPage = () => (
             <Td>theme</Td>
             <Td>
               PartialGlobalDefaultTheme[
-              typeof COMPONENTS_NAMESPACES.calendar
+              typeof COMPONENTS_NAMESPACES.radio
               ]
             </Td>
             <Td>...</Td>
@@ -92,7 +97,7 @@ const RadioPage = () => (
             <Td>theme</Td>
             <Td>
               PartialGlobalDefaultTheme[
-              typeof COMPONENTS_NAMESPACES.calendar
+              typeof COMPONENTS_NAMESPACES.radio
               ]
             </Td>
             <Td>...</Td>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chili-ui",
-  "version": "0.2.0",
+  "version": "0.3.1",
   "description": "UI components library for React applications",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",