@sebgroup/green-react 3.26.0 → 3.27.0

package/package.json

@@ -2,13 +2,13 @@
   "name": "@sebgroup/green-react",
   "main": "./src/index.js",
   "module": "./src/index.js",
-  "version": "3.26.0",
+  "version": "3.27.0",
   "peerDependencies": {
     "react": "^17 || ^18 || ^19",
     "react-dom": "^17 || ^18 || ^19"
   },
   "dependencies": {
-    "@sebgroup/green-core": "^1.70.0",
+    "@sebgroup/green-core": "^1.71.2",
     "@sebgroup/chlorophyll": "^3.6.16",
     "@sebgroup/extract": "^3.0.1",
     "@lit/react": "^1.0.2",

package/src/lib/alert-ribbon/alert-ribbon.d.ts

@@ -1,4 +1,4 @@
-import React, { AriaAttributes, ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { AlertRibbonType } from '@sebgroup/extract';
 export interface AlertRibbonProps {
     children: ReactNode;
@@ -9,7 +9,7 @@ export interface AlertRibbonProps {
     closeText?: string;
     onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;
     role?: 'alert';
-    ['aria-live']?: AriaAttributes['aria-live'];
+    'aria-live'?: React.AriaAttributes['aria-live'];
     closeAriaLabel?: string;
 }
 export declare function AlertRibbon({ type, header, footer, children, closeText, isCloseable, onClose, role, 'aria-live': ariaLive, closeAriaLabel, }: AlertRibbonProps): import("react/jsx-runtime").JSX.Element;

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

@@ -19,8 +19,15 @@ export interface InputProps extends IExpandableInformation, DetailedHTMLProps<In
     value?: string | number;
     /** Function called when input value changes */
     onChangeInput?: (value: string) => string;
-    /** Pass an string that is an id to another element describing the input-field*/
+    /**
+     * Pass an string that is an id to another element describing the input field
+     */
     'aria-describedby'?: string;
+    /**
+     * Set the live region attribute of the form control footer, this will change how error messages are read by screen readers
+     * @default 'assertive'
+     */
+    'aria-live'?: React.AriaAttributes['aria-live'];
 }
 export declare const Input: import("react").ForwardRefExoticComponent<Omit<InputProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
 export declare const TextInput: import("react").ForwardRefExoticComponent<Omit<InputProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;

package/src/lib/form/input/input.js

@@ -19,6 +19,8 @@ import '../useInput.js';
 
 var Input = /*#__PURE__*/forwardRef(function (_a, ref) {
   var ariaDescribedBy = _a['aria-describedby'],
+    _a$ariaLive = _a['aria-live'],
+    ariaLive = _a$ariaLive === void 0 ? 'assertive' : _a$ariaLive,
     _a$autoComplete = _a.autoComplete,
     autoComplete = _a$autoComplete === void 0 ? 'off' : _a$autoComplete,
     children = _a.children,
@@ -39,7 +41,7 @@ var Input = /*#__PURE__*/forwardRef(function (_a, ref) {
     _a$value = _a.value,
     value = _a$value === void 0 ? '' : _a$value,
     required = _a.required,
-    props = __rest(_a, ['aria-describedby', "autoComplete", "children", "className", "testId", "expandableInfo", "expandableInfoButtonLabel", "formatter", "id", "label", "info", "onChange", "unit", "role", "validator", "onChangeInput", "value", "required"]);
+    props = __rest(_a, ['aria-describedby', 'aria-live', "autoComplete", "children", "className", "testId", "expandableInfo", "expandableInfoButtonLabel", "formatter", "id", "label", "info", "onChange", "unit", "role", "validator", "onChangeInput", "value", "required"]);
   var _useState = useState(id),
     _useState2 = _slicedToArray(_useState, 1),
     uuid = _useState2[0];
@@ -68,7 +70,7 @@ var Input = /*#__PURE__*/forwardRef(function (_a, ref) {
     if (onChangeInput) onChangeInput(formattedValue);
   }, [formatter, setLocalValue, onChange, onChangeInput]);
   var showSimpleInput = !label && !info && !expandableInfo;
-  var describedBy = classNames(ariaDescribedBy, _defineProperty(_defineProperty(_defineProperty({}, "".concat(uuid, "_group-message"), !showSimpleInput && (validator === null || validator === void 0 ? void 0 : validator.message) !== undefined && validator.message.length > 0), "".concat(uuid, "_info"), !showSimpleInput && info), "gds-expandable-info-".concat(uuid), !showSimpleInput && expandableInfo));
+  var describedBy = classNames(ariaDescribedBy, _defineProperty(_defineProperty(_defineProperty({}, "".concat(uuid, "_message"), !showSimpleInput && (validator === null || validator === void 0 ? void 0 : validator.message) !== undefined && validator.message.length > 0), "".concat(uuid, "_info"), !showSimpleInput && info), "gds-expandable-info-".concat(uuid), !showSimpleInput && expandableInfo));
   var inputClassName = classNames(className, _defineProperty({}, validateClassName(validator === null || validator === void 0 ? void 0 : validator.indicator), validator));
   var input = jsx("input", Object.assign({
     "aria-describedby": describedBy || undefined,
@@ -96,6 +98,7 @@ var Input = /*#__PURE__*/forwardRef(function (_a, ref) {
     labelInformation: info,
     role: role,
     validator: validator,
+    "aria-live": ariaLive,
     children: jsx("div", {
       className: "gds-input-wrapper",
       children: jsxs(Group, {

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

@@ -1,6 +1,11 @@
 import React from 'react';
 import { IExpandableInformation, ILabelAndLabelInformation, IValidator } from '@sebgroup/extract';
 export interface RadioGroupProps extends IExpandableInformation, ILabelAndLabelInformation {
+    /**
+     * Set the live region attribute of the form control footer, this will change how error messages are read by screen readers
+     * @default 'assertive'
+     */
+    'aria-live'?: React.AriaAttributes['aria-live'];
     label?: string;
     title?: string;
     valueSelected?: string;
@@ -12,5 +17,5 @@ export interface RadioGroupProps extends IExpandableInformation, ILabelAndLabelI
     name?: string;
     horizontal?: boolean;
 }
-export declare const RadioGroup: ({ defaultSelected, valueSelected, label, title, labelInformation, description, expandableInfo, expandableInfoButtonLabel, validator, onChangeRadio, onChange, name: propName, horizontal, children, }: React.PropsWithChildren<RadioGroupProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const RadioGroup: ({ "aria-live": ariaLive, defaultSelected, valueSelected, label, title, labelInformation, description, expandableInfo, expandableInfoButtonLabel, validator, onChangeRadio, onChange, name: propName, horizontal, children, }: React.PropsWithChildren<RadioGroupProps>) => import("react/jsx-runtime").JSX.Element;
 export default RadioGroup;

package/src/lib/form/radioButton/radioGroup.js

@@ -14,7 +14,8 @@ import '../../icons/times.js';
 import '../../icons/infoCircle.js';
 
 var RadioGroup = function RadioGroup(_ref) {
-  var defaultSelected = _ref.defaultSelected,
+  var ariaLive = _ref['aria-live'],
+    defaultSelected = _ref.defaultSelected,
     valueSelected = _ref.valueSelected,
     label = _ref.label,
     title = _ref.title,
@@ -42,7 +43,7 @@ var RadioGroup = function RadioGroup(_ref) {
     name = _useState6[0];
   var _useState7 = useState(randomId()),
     _useState8 = _slicedToArray(_useState7, 1),
-    uniqueId = _useState8[0];
+    uuid = _useState8[0];
   if (valueSelected !== prevValueSelected) {
     setSelected(valueSelected);
     setPrevValueSelected(valueSelected);
@@ -80,14 +81,15 @@ var RadioGroup = function RadioGroup(_ref) {
     label: labelFromTitle,
     expandableInfo: expandableInfo,
     expandableInfoButtonLabel: expandableInfoButtonLabel,
-    role: 'radiogroup'
+    role: 'radiogroup',
+    'aria-live': ariaLive
   };
   var radioGroupWrapperClassNames = classNames('gds-radio-group-wrapper', {
     'gds-radio-group-wrapper--horizontal': horizontal
   });
-  var describedBy = classNames(_defineProperty(_defineProperty(_defineProperty({}, "".concat(uniqueId, "_message"), (validator === null || validator === void 0 ? void 0 : validator.message) !== undefined && validator.message.length > 0), "".concat(uniqueId, "_info"), labelInformation), "gds-expandable-info-".concat(uniqueId), expandableInfo));
+  var describedBy = classNames(_defineProperty(_defineProperty(_defineProperty({}, "".concat(uuid, "_message"), (validator === null || validator === void 0 ? void 0 : validator.message) !== undefined && validator.message.length > 0), "".concat(uuid, "_info"), labelInformation), "gds-expandable-info-".concat(uuid), expandableInfo));
   return jsx(FormItem, Object.assign({}, formItemProps, {
-    inputId: uniqueId,
+    inputId: uuid,
     children: jsx("div", {
       className: radioGroupWrapperClassNames,
       children: React.Children.map(children, function (radioButton) {

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

@@ -1,6 +1,11 @@
 import { DetailedHTMLProps, ReactNode } from 'react';
 import { IExpandableInformation, IValidator } from '@sebgroup/extract';
 export interface ITextAreaProps extends IExpandableInformation, DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement> {
+    /**
+     * Set the live region attribute of the form control footer, this will change how error messages are read by screen readers
+     * @default 'assertive'
+     */
+    'aria-live'?: React.AriaAttributes['aria-live'];
     /** Data test id used for finding elements in test */
     testId?: string;
     /** Label describing the textarea */

package/src/lib/form/textarea/textarea.js

@@ -14,7 +14,9 @@ import '../../icons/times.js';
 import '../../icons/infoCircle.js';
 
 var TextArea = /*#__PURE__*/forwardRef(function (_a, ref) {
-  var ariaDescribedBy = _a['aria-describedby'],
+  var _a$ariaLive = _a['aria-live'],
+    ariaLive = _a$ariaLive === void 0 ? 'assertive' : _a$ariaLive,
+    ariaDescribedBy = _a['aria-describedby'],
     _a$autoComplete = _a.autoComplete,
     autoComplete = _a$autoComplete === void 0 ? 'off' : _a$autoComplete,
     className = _a.className,
@@ -33,7 +35,7 @@ var TextArea = /*#__PURE__*/forwardRef(function (_a, ref) {
     dataTestId = _a.testId,
     maxLength = _a.maxLength,
     required = _a.required,
-    props = __rest(_a, ['aria-describedby', "autoComplete", "className", "expandableInfo", "expandableInfoButtonLabel", "id", "label", "info", "onChange", "role", "rows", "validator", "value", "testId", "maxLength", "required"]);
+    props = __rest(_a, ['aria-live', 'aria-describedby', "autoComplete", "className", "expandableInfo", "expandableInfoButtonLabel", "id", "label", "info", "onChange", "role", "rows", "validator", "value", "testId", "maxLength", "required"]);
   var _useState = useState(id),
     _useState2 = _slicedToArray(_useState, 1),
     uuid = _useState2[0];
@@ -52,6 +54,7 @@ var TextArea = /*#__PURE__*/forwardRef(function (_a, ref) {
   var inputClassName = classNames(className, _defineProperty({}, validateClassName(validator === null || validator === void 0 ? void 0 : validator.indicator), validator)) || undefined;
   var rightAlignedFooterInfo = maxLength ? "".concat((localValue === null || localValue === void 0 ? void 0 : localValue.length) || 0, "/").concat(maxLength) : undefined;
   return jsx(FormItem, {
+    "aria-live": ariaLive,
     expandableInfo: expandableInfo,
     expandableInfoButtonLabel: expandableInfoButtonLabel,
     inputId: uuid,

package/src/lib/formItem/formItem.js

@@ -135,7 +135,7 @@ var FormItem = function FormItem(_ref) {
       inert: isHidden ? true : undefined,
       children: jsxs("div", {
         ref: expandableInnerRef,
-        children: [" ", expandableInfo, " "]
+        children: [" ", !isHidden && expandableInfo, " "]
       })
     }), children, jsxs("div", {
       className: "gds-form-item__footer",

package/src/lib/select/select.d.ts

@@ -1,6 +1,11 @@
 import React from 'react';
 import { IExpandableInformation, ILabelAndLabelInformation, IValidator } from '@sebgroup/extract';
 export interface SelectProps extends IExpandableInformation, ILabelAndLabelInformation, React.DetailedHTMLProps<React.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement> {
+    /**
+     * Set the live region attribute of the form control footer, this will change how error messages are read by screen readers
+     * @default 'assertive'
+     */
+    'aria-live'?: React.AriaAttributes['aria-live'];
     label: string;
     info?: string;
     validator?: IValidator | undefined;

package/src/lib/select/select.js

@@ -15,7 +15,9 @@ import '../icons/times.js';
 import '../icons/infoCircle.js';
 
 var Select = /*#__PURE__*/React.forwardRef(function (_a, ref) {
-  var ariaDescribedBy = _a['aria-describedby'],
+  var _a$ariaLive = _a['aria-live'],
+    ariaLive = _a$ariaLive === void 0 ? 'assertive' : _a$ariaLive,
+    ariaDescribedBy = _a['aria-describedby'],
     _a$id = _a.id,
     id = _a$id === void 0 ? randomId() : _a$id,
     validator = _a.validator,
@@ -25,13 +27,14 @@ var Select = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     expandableInfo = _a.expandableInfo,
     expandableInfoButtonLabel = _a.expandableInfoButtonLabel,
     required = _a.required,
-    props = __rest(_a, ['aria-describedby', "id", "validator", "label", "info", "testId", "expandableInfo", "expandableInfoButtonLabel", "required"]);
+    props = __rest(_a, ['aria-live', 'aria-describedby', "id", "validator", "label", "info", "testId", "expandableInfo", "expandableInfoButtonLabel", "required"]);
   var _useState = useState(id),
     _useState2 = _slicedToArray(_useState, 1),
     uuid = _useState2[0];
   var selectClassName = classNames('gds-select', _defineProperty({}, "".concat(validateClassName(validator === null || validator === void 0 ? void 0 : validator.indicator)), validator));
   var describedBy = classNames(ariaDescribedBy, _defineProperty(_defineProperty(_defineProperty({}, "".concat(uuid, "_message"), (validator === null || validator === void 0 ? void 0 : validator.message) !== undefined && validator.message.length > 0), "".concat(uuid, "_info"), info || props.labelInformation), "gds-expandable-info-".concat(uuid), expandableInfo));
   return jsx(FormItem, {
+    "aria-live": ariaLive,
     label: label,
     labelInformation: info !== null && info !== void 0 ? info : props.labelInformation,
     expandableInfo: expandableInfo,