@sebgroup/green-react 1.1.0 → 1.2.0

package/index.d.ts

@@ -3,6 +3,7 @@ export * from './lib/layout';
 export * from './lib/card/card';
 export * from './lib/alert-ribbon/alert-ribbon';
 export * from './lib/form';
+export * from './lib/formItem';
 export * from './lib/list';
 export * from './lib/navbar/navbar';
 export * from './lib/link/link';

package/index.esm.js

@@ -1,6 +1,7 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import React, { useState, useLayoutEffect, useEffect, useRef, useMemo } from 'react';
 import { randomId, debounce, validateClassName, delay, createStepper, createDropdown, dropdownValues, createDatepicker, months, years } from '@sebgroup/extract';
+import classNames from 'classnames';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -2328,8 +2329,9 @@ const FormItem = ({
     };
   }, [isExpanded, expandableInnerRef]);
   if (!inputId) inputId = randomId();
+  const formItemClassNames = classNames('gds-form-item', validator && validateClassName(validator === null || validator === void 0 ? void 0 : validator.indicator));
   return jsxs("div", Object.assign({
-    className: `gds-form-item ${validator && validateClassName(validator === null || validator === void 0 ? void 0 : validator.indicator)}`,
+    className: formItemClassNames,
     role: role ? role : undefined,
     "aria-labelledby": role ? `${inputId}-label` : undefined
   }, {
@@ -2460,11 +2462,15 @@ const RenderInput = (type, props, onChange, onChangeInput, label, info, validato
     expandableInfoButtonLabel: expandableInfoButtonLabel,
     inputId: inputProps.id
   }, {
-    children: jsx("input", Object.assign({
-      type: type,
-      value: value
-    }, propsWithDescription, {
-      className: validator && validateClassName(validator === null || validator === void 0 ? void 0 : validator.indicator)
+    children: jsx("div", Object.assign({
+      className: "gds-input-wrapper"
+    }, {
+      children: jsx("input", Object.assign({
+        type: type,
+        value: value
+      }, propsWithDescription, {
+        className: validator && validateClassName(validator === null || validator === void 0 ? void 0 : validator.indicator)
+      }))
     }))
   }));
 };
@@ -2517,18 +2523,19 @@ const Checkbox = _a => {
       props = __rest(_a, ["label", "onChange", "validator"]);
 
   const inputProps = useInput(props, onChange);
-  const validatorClassName = validateClassName(validator === null || validator === void 0 ? void 0 : validator.indicator);
+  const labelClassNames = classNames('form-control', validator && validateClassName(validator === null || validator === void 0 ? void 0 : validator.indicator));
+  const inputClassNames = classNames(validator && validateClassName(validator === null || validator === void 0 ? void 0 : validator.indicator));
   return jsxs("div", Object.assign({
     className: "form-group"
   }, {
     children: [jsxs("label", Object.assign({
       htmlFor: inputProps.id,
-      className: `form-control ${validatorClassName}`
+      className: labelClassNames
     }, {
       children: [label, jsx("input", Object.assign({
         type: "checkbox"
       }, inputProps, {
-        className: validatorClassName
+        className: inputClassNames
       })), jsx("i", {})]
     })), validator && jsx("span", Object.assign({
       className: "form-info"
@@ -2547,6 +2554,7 @@ const RadioButton = /*#__PURE__*/React.forwardRef((_a, ref) => {
   const {
     id
   } = useInput(props);
+  const inputClassNames = classNames(validator);
   return jsxs("label", Object.assign({
     htmlFor: id,
     className: "form-control"
@@ -2555,7 +2563,7 @@ const RadioButton = /*#__PURE__*/React.forwardRef((_a, ref) => {
       id: id,
       type: "radio"
     }, props, {
-      className: validator,
+      className: inputClassNames,
       ref: ref
     })), jsx("span", {
       children: label
@@ -2691,6 +2699,7 @@ const RadioGroup = ({
   onChangeRadio,
   onChange,
   name,
+  horizontal,
   children
 }) => {
   if (title) console.warn('"title" prop is deprecated. Please use "label" instead.');
@@ -2703,7 +2712,7 @@ const RadioGroup = ({
     setPrevValueSelected(valueSelected);
   }
 
-  const validatorClassName = validateClassName(validator === null || validator === void 0 ? void 0 : validator.indicator);
+  validateClassName(validator === null || validator === void 0 ? void 0 : validator.indicator);
 
   const handleOnChange = event => {
     if (event.target.value !== selected) {
@@ -2743,16 +2752,23 @@ const RadioGroup = ({
     role: 'radiogroup'
   };
   if (!name) name = randomId();
+  const radioGroupWrapperClassNames = classNames('gds-radio-group-wrapper', {
+    'gds-radio-group-wrapper--horizontal': horizontal
+  });
   return jsx(FormItem, Object.assign({}, formItemProps, {
-    children: React.Children.map(children, radioButton => {
-      return /*#__PURE__*/React.isValidElement(radioButton) ? /*#__PURE__*/React.cloneElement(radioButton, {
-        validator: validatorClassName,
-        onChange: handleOnChange,
-        checked: selected === radioButton.props.value,
-        name,
-        ref: radioBtnRef
-      }) : radioButton;
-    })
+    children: jsx("div", Object.assign({
+      className: radioGroupWrapperClassNames
+    }, {
+      children: React.Children.map(children, radioButton => {
+        return /*#__PURE__*/React.isValidElement(radioButton) ? /*#__PURE__*/React.cloneElement(radioButton, {
+          validator: validator && validateClassName(validator === null || validator === void 0 ? void 0 : validator.indicator),
+          onChange: handleOnChange,
+          checked: selected === radioButton.props.value,
+          name,
+          ref: radioBtnRef
+        }) : radioButton;
+      })
+    }))
   }));
 };
 
@@ -3118,10 +3134,11 @@ const Select = /*#__PURE__*/React.forwardRef(({
     labelInformation: labelInformation,
     expandableInfo: expandableInfo,
     expandableInfoButtonLabel: expandableInfoButtonLabel,
-    inputId: selectId
+    inputId: selectId,
+    validator: validator
   }, {
     children: jsxs("div", Object.assign({
-      className: `gsd-select ${validatorClassName}`
+      className: `gds-select ${validatorClassName}`
     }, {
       children: [jsx("select", Object.assign({
         id: selectId,
@@ -3593,4 +3610,4 @@ const Datepicker = (options = {}) => {
   });
 };
 
-export { AlertRibbon as Alert, AlertRibbon, Badge, Button, ButtonGroup, Card, Checkbox, Datepicker, Dropdown, EmailInput, Flexbox, Form, FormItems, Group, Link, List$1 as List, Modal, Navbar, NumberInput, Option, OptionGroup, RadioButton, RadioGroup, RenderInput, Select, Stepper, Text, TextInput, valueList$1 as ValueList };
+export { AlertRibbon as Alert, AlertRibbon, Badge, Button, ButtonGroup, Card, Checkbox, Datepicker, Dropdown, EmailInput, Flexbox, Form, FormItem, FormItems, Group, Link, List$1 as List, Modal, Navbar, NumberInput, Option, OptionGroup, RadioButton, RadioGroup, RenderInput, Select, Stepper, Text, TextInput, valueList$1 as ValueList };

package/index.umd.js

@@ -1,12 +1,13 @@
 (function (global, factory) {
-	typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react/jsx-runtime'), require('react'), require('@sebgroup/extract')) :
-	typeof define === 'function' && define.amd ? define(['exports', 'react/jsx-runtime', 'react', '@sebgroup/extract'], factory) :
-	(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.React = {}, global.jsxRuntime, global.React, global.extract));
-})(this, (function (exports, jsxRuntime, React, extract) { 'use strict';
+	typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react/jsx-runtime'), require('react'), require('@sebgroup/extract'), require('classnames')) :
+	typeof define === 'function' && define.amd ? define(['exports', 'react/jsx-runtime', 'react', '@sebgroup/extract', 'classnames'], factory) :
+	(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.React = {}, global.jsxRuntime, global.React, global.extract, global.classNames));
+})(this, (function (exports, jsxRuntime, React, extract, classNames) { 'use strict';
 
 	function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 	var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+	var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
 
 	var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -2334,8 +2335,9 @@
 	    };
 	  }, [isExpanded, expandableInnerRef]);
 	  if (!inputId) inputId = extract.randomId();
+	  const formItemClassNames = classNames__default["default"]('gds-form-item', validator && extract.validateClassName(validator === null || validator === void 0 ? void 0 : validator.indicator));
 	  return jsxRuntime.jsxs("div", Object.assign({
-	    className: `gds-form-item ${validator && extract.validateClassName(validator === null || validator === void 0 ? void 0 : validator.indicator)}`,
+	    className: formItemClassNames,
 	    role: role ? role : undefined,
 	    "aria-labelledby": role ? `${inputId}-label` : undefined
 	  }, {
@@ -2466,11 +2468,15 @@
 	    expandableInfoButtonLabel: expandableInfoButtonLabel,
 	    inputId: inputProps.id
 	  }, {
-	    children: jsxRuntime.jsx("input", Object.assign({
-	      type: type,
-	      value: value
-	    }, propsWithDescription, {
-	      className: validator && extract.validateClassName(validator === null || validator === void 0 ? void 0 : validator.indicator)
+	    children: jsxRuntime.jsx("div", Object.assign({
+	      className: "gds-input-wrapper"
+	    }, {
+	      children: jsxRuntime.jsx("input", Object.assign({
+	        type: type,
+	        value: value
+	      }, propsWithDescription, {
+	        className: validator && extract.validateClassName(validator === null || validator === void 0 ? void 0 : validator.indicator)
+	      }))
 	    }))
 	  }));
 	};
@@ -2523,18 +2529,19 @@
 	      props = __rest(_a, ["label", "onChange", "validator"]);
 
 	  const inputProps = useInput(props, onChange);
-	  const validatorClassName = extract.validateClassName(validator === null || validator === void 0 ? void 0 : validator.indicator);
+	  const labelClassNames = classNames__default["default"]('form-control', validator && extract.validateClassName(validator === null || validator === void 0 ? void 0 : validator.indicator));
+	  const inputClassNames = classNames__default["default"](validator && extract.validateClassName(validator === null || validator === void 0 ? void 0 : validator.indicator));
 	  return jsxRuntime.jsxs("div", Object.assign({
 	    className: "form-group"
 	  }, {
 	    children: [jsxRuntime.jsxs("label", Object.assign({
 	      htmlFor: inputProps.id,
-	      className: `form-control ${validatorClassName}`
+	      className: labelClassNames
 	    }, {
 	      children: [label, jsxRuntime.jsx("input", Object.assign({
 	        type: "checkbox"
 	      }, inputProps, {
-	        className: validatorClassName
+	        className: inputClassNames
 	      })), jsxRuntime.jsx("i", {})]
 	    })), validator && jsxRuntime.jsx("span", Object.assign({
 	      className: "form-info"
@@ -2553,6 +2560,7 @@
 	  const {
 	    id
 	  } = useInput(props);
+	  const inputClassNames = classNames__default["default"](validator);
 	  return jsxRuntime.jsxs("label", Object.assign({
 	    htmlFor: id,
 	    className: "form-control"
@@ -2561,7 +2569,7 @@
 	      id: id,
 	      type: "radio"
 	    }, props, {
-	      className: validator,
+	      className: inputClassNames,
 	      ref: ref
 	    })), jsxRuntime.jsx("span", {
 	      children: label
@@ -2697,6 +2705,7 @@
 	  onChangeRadio,
 	  onChange,
 	  name,
+	  horizontal,
 	  children
 	}) => {
 	  if (title) console.warn('"title" prop is deprecated. Please use "label" instead.');
@@ -2709,7 +2718,7 @@
 	    setPrevValueSelected(valueSelected);
 	  }
 
-	  const validatorClassName = extract.validateClassName(validator === null || validator === void 0 ? void 0 : validator.indicator);
+	  extract.validateClassName(validator === null || validator === void 0 ? void 0 : validator.indicator);
 
 	  const handleOnChange = event => {
 	    if (event.target.value !== selected) {
@@ -2749,16 +2758,23 @@
 	    role: 'radiogroup'
 	  };
 	  if (!name) name = extract.randomId();
+	  const radioGroupWrapperClassNames = classNames__default["default"]('gds-radio-group-wrapper', {
+	    'gds-radio-group-wrapper--horizontal': horizontal
+	  });
 	  return jsxRuntime.jsx(FormItem, Object.assign({}, formItemProps, {
-	    children: React__default["default"].Children.map(children, radioButton => {
-	      return /*#__PURE__*/React__default["default"].isValidElement(radioButton) ? /*#__PURE__*/React__default["default"].cloneElement(radioButton, {
-	        validator: validatorClassName,
-	        onChange: handleOnChange,
-	        checked: selected === radioButton.props.value,
-	        name,
-	        ref: radioBtnRef
-	      }) : radioButton;
-	    })
+	    children: jsxRuntime.jsx("div", Object.assign({
+	      className: radioGroupWrapperClassNames
+	    }, {
+	      children: React__default["default"].Children.map(children, radioButton => {
+	        return /*#__PURE__*/React__default["default"].isValidElement(radioButton) ? /*#__PURE__*/React__default["default"].cloneElement(radioButton, {
+	          validator: validator && extract.validateClassName(validator === null || validator === void 0 ? void 0 : validator.indicator),
+	          onChange: handleOnChange,
+	          checked: selected === radioButton.props.value,
+	          name,
+	          ref: radioBtnRef
+	        }) : radioButton;
+	      })
+	    }))
 	  }));
 	};
 
@@ -3124,10 +3140,11 @@
 	    labelInformation: labelInformation,
 	    expandableInfo: expandableInfo,
 	    expandableInfoButtonLabel: expandableInfoButtonLabel,
-	    inputId: selectId
+	    inputId: selectId,
+	    validator: validator
 	  }, {
 	    children: jsxRuntime.jsxs("div", Object.assign({
-	      className: `gsd-select ${validatorClassName}`
+	      className: `gds-select ${validatorClassName}`
 	    }, {
 	      children: [jsxRuntime.jsx("select", Object.assign({
 	        id: selectId,
@@ -3611,6 +3628,7 @@
 	exports.EmailInput = EmailInput;
 	exports.Flexbox = Flexbox;
 	exports.Form = Form;
+	exports.FormItem = FormItem;
 	exports.FormItems = FormItems;
 	exports.Group = Group;
 	exports.Link = Link;

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

@@ -13,6 +13,7 @@ export interface RadioGroupProps {
     onChangeRadio?: (value: string) => string;
     onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
     name?: string;
+    horizontal?: boolean;
 }
-export declare const RadioGroup: ({ defaultSelected, valueSelected, label, title, labelInformation, description, expandableInfo, expandableInfoButtonLabel, validator, onChangeRadio, onChange, name, children, }: React.PropsWithChildren<RadioGroupProps>) => JSX.Element;
+export declare const RadioGroup: ({ defaultSelected, valueSelected, label, title, labelInformation, description, expandableInfo, expandableInfoButtonLabel, validator, onChangeRadio, onChange, name, horizontal, children, }: React.PropsWithChildren<RadioGroupProps>) => JSX.Element;
 export default RadioGroup;

package/lib/form/types.d.ts

@@ -13,6 +13,8 @@ export interface NumberInputProps extends TextInputProps {
     min?: number;
     max?: number;
     step?: number;
+    expandableInfo?: string;
+    expandableInfoButtonLabel?: string;
 }
 export interface CheckboxProps extends HTMLProps<HTMLInputElement> {
     validator?: IValidator;

package/package.json

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