@sebgroup/green-react 3.24.0 → 3.24.2

package/index.js

@@ -322,6 +322,7 @@ import 'classnames';
 import './src/lib/form/formContext.js';
 import './src/lib/form/validateInput.js';
 import './src/lib/form/useInput.js';
+import '@sebgroup/green-core/components/icon/icons/triangle-exclamation';
 import './src/lib/list/listItem.js';
 import '@sebgroup/green-core/components/grouped-list/index.js';
 import 'body-scroll-lock';

package/package.json

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

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

@@ -1,5 +1,5 @@
 import { GdsButton } from "@sebgroup/green-core/components/button/button.js";
-declare const reactWrapper: import("@lit/react").ReactWebComponent<GdsButton<any>, {
+declare const reactWrapper: import("@lit/react").ReactWebComponent<GdsButton, {
     onClick: string;
     onGdsElementDisconnected: string;
 }>;

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

@@ -1,8 +1,8 @@
 import { GdsDatepicker } from "@sebgroup/green-core/components/datepicker/datepicker.js";
 declare const reactWrapper: import("@lit/react").ReactWebComponent<GdsDatepicker, {
     onChange: string;
-    onInput: string;
     onGdsUiState: string;
+    onInput: string;
     onGdsElementDisconnected: string;
 }>;
 export default reactWrapper;

package/src/core/datepicker/index.js

@@ -11,8 +11,8 @@ var reactWrapper = createComponent({
   react: React,
   events: {
     onChange: "change",
-    onInput: "input",
     onGdsUiState: "gds-ui-state",
+    onInput: "input",
     onGdsElementDisconnected: "gds-element-disconnected"
   },
   displayName: "GdsDatepicker"

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

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

package/src/core/div/index.js

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

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

@@ -1,7 +1,7 @@
 import { GdsDropdown } from "@sebgroup/green-core/components/dropdown/dropdown.js";
 declare const reactWrapper: import("@lit/react").ReactWebComponent<GdsDropdown<any>, {
-    onInput: string;
     onChange: string;
+    onInput: string;
     onGdsUiState: string;
     onGdsFilterInput: string;
     onGdsElementDisconnected: string;

package/src/core/dropdown/index.js

@@ -10,8 +10,8 @@ var reactWrapper = createComponent({
   elementClass: GdsDropdown,
   react: React,
   events: {
-    onInput: "input",
     onChange: "change",
+    onInput: "input",
     onGdsUiState: "gds-ui-state",
     onGdsFilterInput: "gds-filter-input",
     onGdsElementDisconnected: "gds-element-disconnected"

package/src/core/index.d.ts

@@ -7,6 +7,7 @@ export { default as GdsContainer } from './container';
 export { default as GdsContextMenu } from './context-menu';
 export { default as GdsDatepicker } from './datepicker';
 export { default as GdsDialog } from './dialog';
+export { default as GdsDiv } from './div';
 export { default as GdsDivider } from './divider';
 export { default as GdsDropdown } from './dropdown';
 export { default as GdsFab } from './fab';
@@ -28,6 +29,7 @@ export { default as GdsSegmentedControl } from './segmented-control';
 export { default as GdsSelect } from './select';
 export { default as GdsSignal } from './signal';
 export { default as GdsSpacer } from './spacer';
+export { default as GdsSpinner } from './spinner';
 export { default as GdsText } from './text';
 export { default as GdsTextarea } from './textarea';
 export { default as GdsTheme } from './theme';

package/src/core/index.js

@@ -7,6 +7,7 @@ export { default as GdsContainer } from './container/index.js';
 export { default as GdsContextMenu } from './context-menu/index.js';
 export { default as GdsDatepicker } from './datepicker/index.js';
 export { default as GdsDialog } from './dialog/index.js';
+export { default as GdsDiv } from './div/index.js';
 export { default as GdsDivider } from './divider/index.js';
 export { default as GdsDropdown } from './dropdown/index.js';
 export { default as GdsFab } from './fab/index.js';
@@ -28,6 +29,7 @@ export { default as GdsSegmentedControl } from './segmented-control/index.js';
 export { default as GdsSelect } from './select/index.js';
 export { default as GdsSignal } from './signal/index.js';
 export { default as GdsSpacer } from './spacer/index.js';
+export { default as GdsSpinner } from './spinner/index.js';
 export { default as GdsText } from './text/index.js';
 export { default as GdsTextarea } from './textarea/index.js';
 export { default as GdsTheme } from './theme/index.js';
@@ -50,6 +52,7 @@ import '@sebgroup/green-core/components/container/container.js';
 import '@sebgroup/green-core/components/context-menu/context-menu.js';
 import '@sebgroup/green-core/components/datepicker/datepicker.js';
 import '@sebgroup/green-core/components/dialog/dialog.js';
+import '@sebgroup/green-core/components/div/div.js';
 import '@sebgroup/green-core/components/divider/divider.js';
 import '@sebgroup/green-core/components/dropdown/dropdown.js';
 import '@sebgroup/green-core/components/fab/fab.js';
@@ -71,6 +74,7 @@ import '@sebgroup/green-core/components/segmented-control/segmented-control.js';
 import '@sebgroup/green-core/components/select/select.js';
 import '@sebgroup/green-core/components/signal/signal.js';
 import '@sebgroup/green-core/components/spacer/spacer.js';
+import '@sebgroup/green-core/components/spinner/gds-spinner.js';
 import '@sebgroup/green-core/components/text/text.js';
 import '@sebgroup/green-core/components/textarea/textarea.js';
 import '@sebgroup/green-core/components/theme/theme.js';

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

@@ -1,5 +1,5 @@
 import { GdsSelect } from "@sebgroup/green-core/components/select/select.js";
-declare const reactWrapper: import("@lit/react").ReactWebComponent<GdsSelect<string>, {
+declare const reactWrapper: import("@lit/react").ReactWebComponent<GdsSelect, {
     onChange: string;
     onInput: string;
     onGdsElementDisconnected: string;

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

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

package/src/core/spinner/index.js

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

package/src/index.js

@@ -320,6 +320,7 @@ import '@sebgroup/green-core/transitional-styles';
 import '@sebgroup/green-core/components/dropdown/index.js';
 import '@sebgroup/green-core/components/context-menu/index.js';
 import 'classnames';
+import '@sebgroup/green-core/components/icon/icons/triangle-exclamation';
 import './lib/form/formContext.js';
 import './lib/form/validateInput.js';
 import './lib/form/useInput.js';

package/src/lib/form/buttonGroup/buttonGroup.js

@@ -6,6 +6,13 @@ import classNames from 'classnames';
 import { Button } from '../button/button.js';
 import '@sebgroup/extract';
 import { Group } from '../group/group.js';
+import '../../formItem/formItem.js';
+import '@lit/react';
+import '@sebgroup/green-core/components/icon/icons/triangle-exclamation';
+import '@sebgroup/green-core/scoping';
+import '../iconButton/iconButton.js';
+import '../../icons/times.js';
+import '../../icons/infoCircle.js';
 
 var ButtonGroup = function ButtonGroup(_ref) {
   var children = _ref.children,

package/src/lib/form/buttonGroup/index.js

@@ -7,3 +7,10 @@ import 'classnames';
 import '../button/button.js';
 import '@sebgroup/extract';
 import '../group/group.js';
+import '../../formItem/formItem.js';
+import '@lit/react';
+import '@sebgroup/green-core/components/icon/icons/triangle-exclamation';
+import '@sebgroup/green-core/scoping';
+import '../iconButton/iconButton.js';
+import '../../icons/times.js';
+import '../../icons/infoCircle.js';

package/src/lib/form/index.js

@@ -16,9 +16,12 @@ import 'react';
 import 'classnames';
 import '../../../_rollupPluginBabelHelpers.js';
 import '@sebgroup/extract';
-import './formContext.js';
-import './validateInput.js';
 import '../formItem/formItem.js';
+import '@lit/react';
+import '@sebgroup/green-core/components/icon/icons/triangle-exclamation';
+import '@sebgroup/green-core/scoping';
 import '../icons/times.js';
 import '../icons/infoCircle.js';
+import './formContext.js';
+import './validateInput.js';
 import './useInput.js';

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

@@ -8,6 +8,9 @@ import 'react';
 import 'classnames';
 import '@sebgroup/extract';
 import '../../formItem/formItem.js';
+import '@lit/react';
+import '@sebgroup/green-core/components/icon/icons/triangle-exclamation';
+import '@sebgroup/green-core/scoping';
 import '../iconButton/iconButton.js';
 import '../button/button.js';
 import '../../icons/times.js';

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

@@ -8,6 +8,9 @@ import { FormItem } from '../../formItem/formItem.js';
 import { Group } from '../group/group.js';
 export { RadioButton } from '../radioButton/radioButton.js';
 export { Checkbox } from '../checkbox/checkbox.js';
+import '@lit/react';
+import '@sebgroup/green-core/components/icon/icons/triangle-exclamation';
+import '@sebgroup/green-core/scoping';
 import '../iconButton/iconButton.js';
 import '../button/button.js';
 import '../../icons/times.js';
@@ -92,12 +95,12 @@ var Input = /*#__PURE__*/forwardRef(function (_a, ref) {
     label: label,
     labelInformation: info,
     role: role,
+    validator: validator,
     children: jsx("div", {
       className: "gds-input-wrapper",
       children: jsxs(Group, {
         groupBorder: true,
         groupFocus: true,
-        error: validator === null || validator === void 0 ? void 0 : validator.message,
         id: "".concat(uuid, "_group"),
         children: [input, unit && jsx("span", {
           className: spanClassName,

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

@@ -8,6 +8,9 @@ import '@sebgroup/extract';
 import '../useInput.js';
 import '../../../../_rollupPluginBabelHelpers.js';
 import '../../formItem/formItem.js';
+import '@lit/react';
+import '@sebgroup/green-core/components/icon/icons/triangle-exclamation';
+import '@sebgroup/green-core/scoping';
 import '../iconButton/iconButton.js';
 import '../button/button.js';
 import '../../icons/times.js';

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

@@ -4,6 +4,9 @@ import React__default, { useState, useRef } from 'react';
 import classNames from 'classnames';
 import { randomId } from '@sebgroup/extract';
 import { FormItem } from '../../formItem/formItem.js';
+import '@lit/react';
+import '@sebgroup/green-core/components/icon/icons/triangle-exclamation';
+import '@sebgroup/green-core/scoping';
 import '../../../../_tslib.js';
 import '../iconButton/iconButton.js';
 import '../button/button.js';

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

@@ -6,6 +6,9 @@ import 'react';
 import 'classnames';
 import '@sebgroup/extract';
 import '../../formItem/formItem.js';
+import '@lit/react';
+import '@sebgroup/green-core/components/icon/icons/triangle-exclamation';
+import '@sebgroup/green-core/scoping';
 import '../iconButton/iconButton.js';
 import '../button/button.js';
 import '../../icons/times.js';

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

@@ -5,6 +5,9 @@ import { forwardRef, useState, useEffect, useCallback } from 'react';
 import classNames from 'classnames';
 import { randomId, validateClassName } from '@sebgroup/extract';
 import { FormItem } from '../../formItem/formItem.js';
+import '@lit/react';
+import '@sebgroup/green-core/components/icon/icons/triangle-exclamation';
+import '@sebgroup/green-core/scoping';
 import '../iconButton/iconButton.js';
 import '../button/button.js';
 import '../../icons/times.js';

package/src/lib/formItem/formItem.js

@@ -1,14 +1,22 @@
 import { _ as _slicedToArray, b as _asyncToGenerator, c as _regeneratorRuntime } from '../../../_rollupPluginBabelHelpers.js';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { useRef, useState, useLayoutEffect, useEffect } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import React__default, { useRef, useState, useLayoutEffect, useEffect } from 'react';
+import { createComponent } from '@lit/react';
 import classNames from 'classnames';
 import { debounce, randomId, validateClassName, delay } from '@sebgroup/extract';
+import { IconTriangleExclamation } from '@sebgroup/green-core/components/icon/icons/triangle-exclamation';
+import { getScopedTagName } from '@sebgroup/green-core/scoping';
 import '../../../_tslib.js';
 import { IconButton } from '../form/iconButton/iconButton.js';
 import { Times } from '../icons/times.js';
 import { InfoCircle } from '../icons/infoCircle.js';
 import '../form/button/button.js';
 
+var TriangleExclamationIcon = createComponent({
+  tagName: getScopedTagName('gds-icon-triangle-exclamation'),
+  elementClass: IconTriangleExclamation,
+  react: React__default
+});
 var FormItem = function FormItem(_ref) {
   var expandableInfo = _ref.expandableInfo,
     label = _ref.label,
@@ -128,10 +136,19 @@ var FormItem = function FormItem(_ref) {
       })
     }), children, jsxs("div", {
       className: "gds-form-item__footer",
-      children: [validator && jsx("span", {
-        className: "form-info",
-        id: "".concat(inputId, "_message"),
-        children: validator.message
+      children: [validator && jsxs(Fragment, {
+        children: [jsx(TriangleExclamationIcon, {
+          solid: true,
+          width: 16,
+          height: 16,
+          style: {
+            color: 'var(--gds-sys-color-text-error)'
+          }
+        }), jsx("span", {
+          className: "form-info",
+          id: "".concat(inputId, "_message"),
+          children: validator.message
+        })]
       }), rightAlignedFooterInfo && jsx("span", {
         className: "form-info",
         style: {

package/src/lib/formItem/index.js

@@ -2,8 +2,11 @@ export { FormItem } from './formItem.js';
 import '../../../_rollupPluginBabelHelpers.js';
 import 'react/jsx-runtime';
 import 'react';
+import '@lit/react';
 import 'classnames';
 import '@sebgroup/extract';
+import '@sebgroup/green-core/components/icon/icons/triangle-exclamation';
+import '@sebgroup/green-core/scoping';
 import '../../../_tslib.js';
 import '../form/iconButton/iconButton.js';
 import '../form/button/button.js';

package/src/lib/modal/modal.js

@@ -132,7 +132,13 @@ var Modal = function Modal(_a) {
     }
     if (isOpen && modalRef.current && enableBodyScrollLock) {
       // Disable scrolling on the body when the modal is open
-      disableBodyScroll(modalRef.current);
+      disableBodyScroll(modalRef.current, {
+        allowTouchMove: function allowTouchMove(el) {
+          var _a;
+          // Allow touchmove for elements inside modal, its required for scroll to work on iOS devices
+          return ((_a = modalRef.current) === null || _a === void 0 ? void 0 : _a.contains(el)) || false;
+        }
+      });
     } else if (modalRef.current) {
       // Enable scrolling on the body when the modal is closed
       enableBodyScroll(modalRef.current);

package/src/lib/select/index.js

@@ -6,6 +6,9 @@ import 'react';
 import 'classnames';
 import '@sebgroup/extract';
 import '../formItem/formItem.js';
+import '@lit/react';
+import '@sebgroup/green-core/components/icon/icons/triangle-exclamation';
+import '@sebgroup/green-core/scoping';
 import '../form/iconButton/iconButton.js';
 import '../form/button/button.js';
 import '../icons/times.js';

package/src/lib/select/select.js

@@ -6,6 +6,9 @@ import classNames from 'classnames';
 import { randomId, validateClassName } from '@sebgroup/extract';
 import { FormItem } from '../formItem/formItem.js';
 import { ChevronDown } from '../icons/chevronDown.js';
+import '@lit/react';
+import '@sebgroup/green-core/components/icon/icons/triangle-exclamation';
+import '@sebgroup/green-core/scoping';
 import '../form/iconButton/iconButton.js';
 import '../form/button/button.js';
 import '../icons/times.js';