@sebgroup/green-react 3.24.2 → 3.25.0

package/package.json

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

package/src/core/index.d.ts

@@ -23,7 +23,7 @@ export { default as GdsMask } from './mask';
 export { default as GdsMenuButton } from './menu-button';
 export { default as GdsBackdrop } from './backdrop';
 export { default as GdsPopover } from './popover';
-export { default as GdsRadioGroup } from './radio-group';
+export { default as GdsRadio } from './radio';
 export { default as GdsRichText } from './rich-text';
 export { default as GdsSegmentedControl } from './segmented-control';
 export { default as GdsSelect } from './select';
@@ -39,4 +39,5 @@ export { default as GdsFormControlHeader } from './form-control-header';
 export { default as GdsOption } from './option';
 export { default as GdsMenuItem } from './menu-item';
 export { default as GdsFilterChip } from './filter-chip';
+export { default as GdsRadioGroup } from './radio-group';
 export { default as GdsSegment } from './segment';

package/src/core/index.js

@@ -23,7 +23,7 @@ export { default as GdsMask } from './mask/index.js';
 export { default as GdsMenuButton } from './menu-button/index.js';
 export { default as GdsBackdrop } from './backdrop/index.js';
 export { default as GdsPopover } from './popover/index.js';
-export { default as GdsRadioGroup } from './radio-group/index.js';
+export { default as GdsRadio } from './radio/index.js';
 export { default as GdsRichText } from './rich-text/index.js';
 export { default as GdsSegmentedControl } from './segmented-control/index.js';
 export { default as GdsSelect } from './select/index.js';
@@ -39,6 +39,7 @@ export { default as GdsFormControlHeader } from './form-control-header/index.js'
 export { default as GdsOption } from './option/index.js';
 export { default as GdsMenuItem } from './menu-item/index.js';
 export { default as GdsFilterChip } from './filter-chip/index.js';
+export { default as GdsRadioGroup } from './radio-group/index.js';
 export { default as GdsSegment } from './segment/index.js';
 import 'react';
 import '@lit/react';
@@ -68,7 +69,7 @@ import '@sebgroup/green-core/components/mask/mask.js';
 import '@sebgroup/green-core/components/menu-button/menu-button.js';
 import '@sebgroup/green-core/components/popover/backdrop.js';
 import '@sebgroup/green-core/components/popover/popover.js';
-import '@sebgroup/green-core/components/radio/radio-group.js';
+import '@sebgroup/green-core/components/radio/radio.js';
 import '@sebgroup/green-core/components/rich-text/rich-text.js';
 import '@sebgroup/green-core/components/segmented-control/segmented-control.js';
 import '@sebgroup/green-core/components/select/select.js';
@@ -84,4 +85,5 @@ import '@sebgroup/green-core/primitives/form-control-header/form-control-header.
 import '@sebgroup/green-core/primitives/listbox/option.js';
 import '@sebgroup/green-core/primitives/menu/menu-item.js';
 import '@sebgroup/green-core/components/filter-chips/filter-chip/filter-chip.js';
+import '@sebgroup/green-core/components/radio/radio-group/radio-group.js';
 import '@sebgroup/green-core/components/segmented-control/segment/segment.js';

package/src/core/radio/index.d.ts

@@ -0,0 +1,6 @@
+import { GdsRadio } from "@sebgroup/green-core/components/radio/radio.js";
+declare const reactWrapper: import("@lit/react").ReactWebComponent<GdsRadio, {
+    onGdsRadioChange: string;
+    onGdsElementDisconnected: string;
+}>;
+export default reactWrapper;

package/src/core/radio/index.js

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import { getScopedTagName } from '@sebgroup/green-core/scoping';
+import { GdsRadio } from '@sebgroup/green-core/components/radio/radio.js';
+
+var tagName = getScopedTagName("gds-radio");
+//GdsRadio.define('gds-radio')
+var reactWrapper = createComponent({
+  tagName: tagName,
+  elementClass: GdsRadio,
+  react: React,
+  events: {
+    onGdsRadioChange: "gds-radio-change",
+    onGdsElementDisconnected: "gds-element-disconnected"
+  },
+  displayName: "GdsRadio"
+});
+
+export { reactWrapper as default };

package/src/core/radio-group/index.d.ts

@@ -1,3 +1,7 @@
-import { GdsRadioGroup } from "@sebgroup/green-core/components/radio/radio-group.js";
-declare const reactWrapper: import("@lit/react").ReactWebComponent<GdsRadioGroup, {}>;
+import { GdsRadioGroup } from "@sebgroup/green-core/components/radio/radio-group/radio-group.js";
+declare const reactWrapper: import("@lit/react").ReactWebComponent<GdsRadioGroup, {
+    onChange: string;
+    onInput: string;
+    onGdsElementDisconnected: string;
+}>;
 export default reactWrapper;

package/src/core/radio-group/index.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { createComponent } from '@lit/react';
 import { getScopedTagName } from '@sebgroup/green-core/scoping';
-import { GdsRadioGroup } from '@sebgroup/green-core/components/radio/radio-group.js';
+import { GdsRadioGroup } from '@sebgroup/green-core/components/radio/radio-group/radio-group.js';
 
 var tagName = getScopedTagName("gds-radio-group");
 //GdsRadioGroup.define('gds-radio-group')
@@ -9,7 +9,11 @@ var reactWrapper = createComponent({
   tagName: tagName,
   elementClass: GdsRadioGroup,
   react: React,
-  events: {},
+  events: {
+    onChange: "change",
+    onInput: "input",
+    onGdsElementDisconnected: "gds-element-disconnected"
+  },
   displayName: "GdsRadioGroup"
 });
 

package/src/lib/formItem/formItem.d.ts

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren } from 'react';
+import React, { AriaAttributes, PropsWithChildren } from 'react';
 import { IExpandableInformation, ILabelAndLabelInformation, IValidator } from '@sebgroup/extract';
 interface FormItemProps extends IExpandableInformation, ILabelAndLabelInformation, PropsWithChildren {
     onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
@@ -6,8 +6,9 @@ interface FormItemProps extends IExpandableInformation, ILabelAndLabelInformatio
     validator?: IValidator;
     inputId?: string;
     role?: string;
+    'aria-live'?: AriaAttributes['aria-live'];
     /** Intended to use together with TextArea to show character counter. */
     rightAlignedFooterInfo?: string;
 }
-export declare const FormItem: ({ expandableInfo, label, labelInformation, validator, inputId, children, expandableInfoButtonLabel, role, rightAlignedFooterInfo, }: FormItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FormItem: ({ expandableInfo, label, labelInformation, validator, inputId, children, expandableInfoButtonLabel, role, rightAlignedFooterInfo, "aria-live": ariaLive, }: FormItemProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/lib/formItem/formItem.js

@@ -26,7 +26,9 @@ var FormItem = function FormItem(_ref) {
     children = _ref.children,
     expandableInfoButtonLabel = _ref.expandableInfoButtonLabel,
     role = _ref.role,
-    rightAlignedFooterInfo = _ref.rightAlignedFooterInfo;
+    rightAlignedFooterInfo = _ref.rightAlignedFooterInfo,
+    _ref$ariaLive = _ref['aria-live'],
+    ariaLive = _ref$ariaLive === void 0 ? 'assertive' : _ref$ariaLive;
   var expandableInnerRef = useRef(null);
   var expandableRef = useRef(null);
   var _useState = useState(0),
@@ -130,12 +132,14 @@ var FormItem = function FormItem(_ref) {
       style: {
         height: isExpanded ? expandableHeight : 0
       },
+      inert: isHidden ? '' : undefined,
       children: jsxs("div", {
         ref: expandableInnerRef,
         children: [" ", expandableInfo, " "]
       })
     }), children, jsxs("div", {
       className: "gds-form-item__footer",
+      "aria-live": ariaLive,
       children: [validator && jsxs(Fragment, {
         children: [jsx(TriangleExclamationIcon, {
           solid: true,
@@ -143,7 +147,8 @@ var FormItem = function FormItem(_ref) {
           height: 16,
           style: {
             color: 'var(--gds-sys-color-text-error)'
-          }
+          },
+          "aria-hidden": "true"
         }), jsx("span", {
           className: "form-info",
           id: "".concat(inputId, "_message"),
@@ -155,6 +160,7 @@ var FormItem = function FormItem(_ref) {
           textAlign: 'right',
           width: validator ? 'auto' : '100%'
         },
+        "aria-hidden": "true",
         children: rightAlignedFooterInfo
       })]
     })]