@sebgroup/green-react 3.18.0 → 3.20.0

package/package.json

@@ -2,13 +2,13 @@
   "name": "@sebgroup/green-react",
   "main": "./src/index.js",
   "module": "./src/index.js",
-  "version": "3.18.0",
+  "version": "3.20.0",
   "peerDependencies": {
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
   "dependencies": {
-    "@sebgroup/green-core": "^1.41.2",
+    "@sebgroup/green-core": "^1.41.3",
     "@sebgroup/chlorophyll": "^3.6.2",
     "@sebgroup/extract": "^3.0.1",
     "@lit/react": "^1.0.2",

package/src/lib/datepicker/datepicker.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { GdsDatepicker } from '@sebgroup/green-core/components/datepicker/index.js';
 import { GdsValidator } from '@sebgroup/green-core/components/form/form-control';
 export declare const CoreDatepicker: import("@lit/react").ReactWebComponent<GdsDatepicker, {
@@ -11,35 +12,35 @@ export type DatepickerOptions = {
     /**
      * Whether to disable weekends in the calendar.
      */
-    disabledWeekends: boolean;
+    disabledWeekends?: boolean;
     /**
      * Whether to hide the label above the input field.
      */
-    hideLabel: boolean;
+    hideLabel?: boolean;
     /**
      * Validation state of the form control. Setting this to true triggers the invalid state of the control.
      */
-    invalid: boolean;
+    invalid?: boolean;
     /**
      * Validate the form control element. Should return the validity state and an optional validation message.
      */
-    validator: GdsValidator;
+    validator?: GdsValidator;
     /**
      * The label text displayed above the datepicker. This should always be set to a descriptive label.
      */
-    label: string;
+    label?: string;
     /**
      * The maximum date that can be selected.
      */
-    maxDate: Date;
+    maxDate?: Date;
     /**
      * The minimum date that can be selected.
      */
-    minDate: Date;
+    minDate?: Date;
     /**
      * Controls whether the datepicker popover is open.
      */
-    open: boolean;
+    open?: boolean;
     /**
      * Callback function that is called when the value of the Datepicker changes.
      */
@@ -47,15 +48,15 @@ export type DatepickerOptions = {
     /**
      * Sets the datepicker as a required field for forms.
      */
-    required: boolean;
+    required?: boolean;
     /**
      * Whether to show a column of week numbers in the calendar.
      */
-    showWeeks: boolean;
+    showWeeks?: boolean;
     /**
      * Whether to use the small variant of the datepicker field.
      */
-    size: 'small' | 'medium';
+    size?: 'small' | 'medium';
     /**
      * The test ID used for testing.
      */
@@ -65,6 +66,14 @@ export type DatepickerOptions = {
      * This can be a string if set via the value attribute in markup, or via the setAttribute DOM API.
      */
     value?: Date;
+    /**
+     * The ref to the datepicker element.
+     */
+    ref?: React.Ref<GdsDatepicker>;
+    /**
+     * The children of the datepicker.
+     */
+    children?: React.ReactNode;
     /**
      * @deprecated Use `value` instead.
      */
@@ -74,5 +83,5 @@ export type DatepickerOptions = {
      */
     currentDate?: Date;
 };
-export declare const Datepicker: ({ label, onChange, minDate, maxDate, value, showWeeks, testId, validator, selectedDate, currentDate, ...props }: DatepickerOptions) => import("react/jsx-runtime").JSX.Element;
+export declare const Datepicker: React.ForwardRefExoticComponent<Omit<DatepickerOptions, "ref"> & React.RefAttributes<unknown>>;
 export default Datepicker;

package/src/lib/datepicker/datepicker.js

@@ -1,6 +1,6 @@
 import { _ as __rest } from '../../../_tslib.js';
 import { jsx } from 'react/jsx-runtime';
-import React, { useEffect } from 'react';
+import React, { forwardRef, useRef, useImperativeHandle, useEffect } from 'react';
 import { createComponent } from '@lit/react';
 import { GdsDatepicker } from '@sebgroup/green-core/components/datepicker/index.js';
 import { getScopedTagName } from '@sebgroup/green-core/scoping';
@@ -15,7 +15,7 @@ var CoreDatepicker = createComponent({
   },
   react: React
 });
-var Datepicker = function Datepicker(_a) {
+var Datepicker = /*#__PURE__*/forwardRef(function (_a, ref) {
   var _a$label = _a.label,
     label = _a$label === void 0 ? 'Date' : _a$label,
     onChange = _a.onChange,
@@ -37,10 +37,13 @@ var Datepicker = function Datepicker(_a) {
       onChange(e.detail.value);
     }
   };
-  var ref = React.useRef(null);
+  var _ref = useRef(null);
+  useImperativeHandle(ref, function () {
+    return _ref.current;
+  }, [_ref]);
   useEffect(function () {
-    if (ref.current) {
-      ref.current.validator = validator;
+    if (_ref === null || _ref === void 0 ? void 0 : _ref.current) {
+      _ref.current.validator = validator;
     }
   }, [validator]);
   return jsx("div", {
@@ -53,9 +56,9 @@ var Datepicker = function Datepicker(_a) {
       showWeekNumbers: showWeeks,
       onchange: onChangeHandler,
       value: value,
-      ref: ref
+      ref: _ref
     }, props))
   });
-};
+});
 
 export { CoreDatepicker, Datepicker, Datepicker as default };

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

@@ -10,5 +10,5 @@ export interface ButtonProps extends DetailedHTMLProps<ButtonHTMLAttributes<HTML
     /** Renders as a `data-testid` attribute on the `<button>` element, useful in testing scenarios. */
     testId?: string;
 }
-export declare function Button({ className, variant, active, type, size, testId, ...otherProps }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare const Button: import("react").ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
 export default Button;

package/src/lib/form/button/button.js

@@ -1,8 +1,9 @@
 import { _ as __rest } from '../../../../_tslib.js';
 import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
 import classNames from 'classnames';
 
-function Button(_a) {
+var Button = /*#__PURE__*/forwardRef(function (_a, ref) {
   var _b;
   var className = _a.className,
     variant = _a.variant,
@@ -12,21 +13,23 @@ function Button(_a) {
     type = _a$type === void 0 ? 'button' : _a$type,
     size = _a.size,
     testId = _a.testId,
-    otherProps = __rest(_a, ["className", "variant", "active", "type", "size", "testId"]);
+    props = __rest(_a, ["className", "variant", "active", "type", "size", "testId"]);
   var buttonClassName = classNames(className, variant, size, {
     active: active
   }) || undefined;
   return variant == 'close' ? jsx("button", Object.assign({
     className: buttonClassName,
-    "aria-label": (_b = otherProps['aria-label']) !== null && _b !== void 0 ? _b : 'Close',
-    "data-testid": testId
-  }, otherProps, {
+    "aria-label": (_b = props['aria-label']) !== null && _b !== void 0 ? _b : 'Close',
+    "data-testid": testId,
+    ref: ref
+  }, props, {
     children: jsx("i", {})
   })) : jsx("button", Object.assign({
     className: buttonClassName,
     type: type,
-    "data-testid": testId
-  }, otherProps));
-}
+    "data-testid": testId,
+    ref: ref
+  }, props));
+});
 
 export { Button, Button as default };

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

@@ -1,4 +1,5 @@
 export { Button } from './button.js';
 import '../../../../_tslib.js';
 import 'react/jsx-runtime';
+import 'react';
 import 'classnames';

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

@@ -1,8 +1,8 @@
 import { _ as _slicedToArray } from '../../../../_rollupPluginBabelHelpers.js';
+import { _ as __rest } from '../../../../_tslib.js';
 import { jsx } from 'react/jsx-runtime';
 import { useState, useEffect } from 'react';
 import { Button } from '../button/button.js';
-import '../../../../_tslib.js';
 import '@sebgroup/extract';
 import classNames from 'classnames';
 import { Group } from '../group/group.js';
@@ -43,8 +43,10 @@ var ButtonGroup = function ButtonGroup(_ref) {
   return jsx(Group, {
     "data-label": "button-group",
     id: id,
-    children: buttons.map(function (props) {
-      return jsx(Button, Object.assign({}, props), props.key);
+    children: buttons.map(function (_a) {
+      var key = _a.key,
+        props = __rest(_a, ["key"]);
+      return jsx(Button, Object.assign({}, props), key);
     })
   });
 };

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

@@ -1,9 +1,9 @@
 export { ButtonGroup } from './buttonGroup.js';
 import '../../../../_rollupPluginBabelHelpers.js';
+import '../../../../_tslib.js';
 import 'react/jsx-runtime';
 import 'react';
 import '../button/button.js';
-import '../../../../_tslib.js';
 import 'classnames';
 import '@sebgroup/extract';
 import '../group/group.js';

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

@@ -12,4 +12,4 @@ export interface CheckboxProps extends HTMLProps<HTMLInputElement> {
     /** A handler function that takes the event and can act on it */
     onChange?: FormEventHandler<HTMLInputElement>;
 }
-export declare const Checkbox: ({ "aria-describedby": ariaDescribedBy, id, label, validator, testId, required, className, ...props }: CheckboxProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Checkbox: import("react").ForwardRefExoticComponent<Omit<CheckboxProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;

package/src/lib/form/checkbox/checkbox.js

@@ -3,9 +3,9 @@ import { _ as __rest } from '../../../../_tslib.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { randomId, validateClassName } from '@sebgroup/extract';
 import classNames from 'classnames';
-import { useState } from 'react';
+import { forwardRef, useState } from 'react';
 
-var Checkbox = function Checkbox(_a) {
+var Checkbox = /*#__PURE__*/forwardRef(function (_a, ref) {
   var ariaDescribedBy = _a['aria-describedby'],
     _a$id = _a.id,
     id = _a$id === void 0 ? randomId() : _a$id,
@@ -35,7 +35,8 @@ var Checkbox = function Checkbox(_a) {
         type: "checkbox",
         "data-testid": testId,
         id: uuid,
-        required: required
+        required: required,
+        ref: ref
       }, props)), jsx("i", {})]
     }), validator && jsx("span", {
       className: "form-info",
@@ -43,6 +44,6 @@ var Checkbox = function Checkbox(_a) {
       children: validator.message
     })]
   });
-};
+});
 
 export { Checkbox };

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

@@ -1,13 +1,3 @@
-import { ReactNode, MouseEvent } from 'react';
-import { ButtonType } from '@sebgroup/extract';
-interface IconButtonInterface {
-    children: ReactNode;
-    type?: ButtonType;
-    onClick: (event: MouseEvent) => void;
-    'aria-expanded'?: boolean;
-    'aria-controls'?: string;
-    size?: 'small' | 'normal';
-    title?: string;
-}
-export declare const IconButton: ({ children, onClick, ...props }: IconButtonInterface) => import("react/jsx-runtime").JSX.Element;
-export {};
+/// <reference types="react" />
+import { ButtonProps } from '../button/button';
+export declare const IconButton: import("react").ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;

package/src/lib/form/iconButton/iconButton.js

@@ -1,20 +1,15 @@
-import { _ as __rest } from '../../../../_tslib.js';
 import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Button } from '../button/button.js';
+import '../../../../_tslib.js';
+import 'classnames';
 
-var IconButton = function IconButton(_a) {
-  var _b;
-  var children = _a.children,
-    onClick = _a.onClick,
-    props = __rest(_a, ["children", "onClick"]);
-  return jsx("button", {
-    className: "icon ".concat(props.size === 'small' && 'small'),
-    onClick: onClick,
-    "aria-controls": props['aria-controls'],
-    "aria-expanded": props['aria-expanded'],
-    type: (_b = props.type) !== null && _b !== void 0 ? _b : 'button',
-    title: props.title,
-    children: children
-  });
-};
+var IconButton = /*#__PURE__*/forwardRef(function (props, ref) {
+  return jsx(Button, Object.assign({}, props, {
+    className: "icon",
+    ref: ref,
+    children: props.children
+  }));
+});
 
 export { IconButton };

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

@@ -1,3 +1,6 @@
 export { IconButton } from './iconButton.js';
-import '../../../../_tslib.js';
 import 'react/jsx-runtime';
+import 'react';
+import '../button/button.js';
+import '../../../../_tslib.js';
+import 'classnames';

package/src/lib/form/index.js

@@ -12,9 +12,9 @@ export { RadioGroup } from './radioButton/radioGroup.js';
 export { TextArea } from './textarea/textarea.js';
 import '../../../_tslib.js';
 import 'react/jsx-runtime';
+import 'react';
 import 'classnames';
 import '../../../_rollupPluginBabelHelpers.js';
-import 'react';
 import '@sebgroup/extract';
 import './formContext.js';
 import './validateInput.js';

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

@@ -9,6 +9,7 @@ import '@sebgroup/extract';
 import '../../formItem/formItem.js';
 import 'classnames';
 import '../iconButton/iconButton.js';
+import '../button/button.js';
 import '../../icons/times.js';
 import '../../icons/infoCircle.js';
 import '../group/group.js';

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

@@ -13,14 +13,18 @@ export interface InputProps extends IExpandableInformation, DetailedHTMLProps<In
     unit?: string;
     /** Validation object */
     validator?: IValidator;
-    /** Value of input */
+    /**
+     * Value of input
+     */
     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*/
+    'aria-describedby'?: string;
 }
-export declare const Input: ({ "aria-describedby": ariaDescribedBy, autoComplete, children, className, testId: dataTestId, expandableInfo, expandableInfoButtonLabel, formatter, id, label, info, onChange, unit, role, validator, onChangeInput, value, required, ...props }: InputProps) => import("react/jsx-runtime").JSX.Element;
-export declare const TextInput: (props: Omit<InputProps, 'type'>) => import("react/jsx-runtime").JSX.Element;
-export declare const EmailInput: (props: Omit<InputProps, 'type'>) => import("react/jsx-runtime").JSX.Element;
-export declare const NumberInput: (props: Omit<InputProps, 'type'>) => import("react/jsx-runtime").JSX.Element;
+export declare const Input: import("react").ForwardRefExoticComponent<Omit<InputProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+export declare const TextInput: import("react").ForwardRefExoticComponent<Omit<Omit<InputProps, "type">, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+export declare const EmailInput: import("react").ForwardRefExoticComponent<Omit<Omit<InputProps, "type">, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+export declare const NumberInput: import("react").ForwardRefExoticComponent<Omit<Omit<InputProps, "type">, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
 export { RadioButton } from '../radioButton/radioButton';
 export { Checkbox } from '../checkbox/checkbox';

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

@@ -1,7 +1,7 @@
 import { _ as _slicedToArray, a as _defineProperty } from '../../../../_rollupPluginBabelHelpers.js';
 import { _ as __rest } from '../../../../_tslib.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useState, useEffect, useCallback } from 'react';
+import { forwardRef, useState, useEffect, useCallback } from 'react';
 import { randomId, validateClassName } from '@sebgroup/extract';
 import { FormItem } from '../../formItem/formItem.js';
 import { Group } from '../group/group.js';
@@ -9,11 +9,12 @@ import classNames from 'classnames';
 export { RadioButton } from '../radioButton/radioButton.js';
 export { Checkbox } from '../checkbox/checkbox.js';
 import '../iconButton/iconButton.js';
+import '../button/button.js';
 import '../../icons/times.js';
 import '../../icons/infoCircle.js';
 import '../useInput.js';
 
-var Input = function Input(_a) {
+var Input = /*#__PURE__*/forwardRef(function (_a, ref) {
   var ariaDescribedBy = _a['aria-describedby'],
     _a$autoComplete = _a.autoComplete,
     autoComplete = _a$autoComplete === void 0 ? 'off' : _a$autoComplete,
@@ -77,7 +78,8 @@ var Input = function Input(_a) {
     onChange: handleChange,
     role: role,
     value: localValue,
-    required: required
+    required: required,
+    ref: ref
   }, props));
   if (showSimpleInput) return input;
   var spanClassName = classNames('form-text', {
@@ -104,21 +106,27 @@ var Input = function Input(_a) {
       })
     })
   });
-};
-var TextInput = function TextInput(props) {
+});
+var TextInput = /*#__PURE__*/forwardRef(function (props, ref) {
   return jsx(Input, Object.assign({
     type: "text"
-  }, props));
-};
-var EmailInput = function EmailInput(props) {
+  }, props, {
+    ref: ref
+  }));
+});
+var EmailInput = /*#__PURE__*/forwardRef(function (props, ref) {
   return jsx(Input, Object.assign({
     type: "email"
-  }, props));
-};
-var NumberInput = function NumberInput(props) {
+  }, props, {
+    ref: ref
+  }));
+});
+var NumberInput = /*#__PURE__*/forwardRef(function (props, ref) {
   return jsx(Input, Object.assign({
     type: "number"
-  }, props));
-};
+  }, props, {
+    ref: ref
+  }));
+});
 
 export { EmailInput, Input, NumberInput, TextInput };

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

@@ -9,5 +9,6 @@ import 'classnames';
 import '../../../../_rollupPluginBabelHelpers.js';
 import '../../formItem/formItem.js';
 import '../iconButton/iconButton.js';
+import '../button/button.js';
 import '../../icons/times.js';
 import '../../icons/infoCircle.js';

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

@@ -6,6 +6,7 @@ import { FormItem } from '../../formItem/formItem.js';
 import classNames from 'classnames';
 import '../../../../_tslib.js';
 import '../iconButton/iconButton.js';
+import '../button/button.js';
 import '../../icons/times.js';
 import '../../icons/infoCircle.js';
 

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

@@ -7,5 +7,6 @@ import 'react';
 import '../../formItem/formItem.js';
 import 'classnames';
 import '../iconButton/iconButton.js';
+import '../button/button.js';
 import '../../icons/times.js';
 import '../../icons/infoCircle.js';

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

@@ -12,4 +12,4 @@ export interface ITextAreaProps extends IExpandableInformation, DetailedHTMLProp
     /** Value of textarea */
     value?: string;
 }
-export declare const TextArea: ({ "aria-describedby": ariaDescribedBy, autoComplete, className, expandableInfo, expandableInfoButtonLabel, id, label, info, onChange, role, rows, validator, value, testId: dataTestId, maxLength, required, ...props }: ITextAreaProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TextArea: import("react").ForwardRefExoticComponent<Omit<ITextAreaProps, "ref"> & import("react").RefAttributes<HTMLTextAreaElement>>;

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

@@ -2,14 +2,15 @@ import { _ as _slicedToArray, a as _defineProperty } from '../../../../_rollupPl
 import { _ as __rest } from '../../../../_tslib.js';
 import { jsx } from 'react/jsx-runtime';
 import { randomId, validateClassName } from '@sebgroup/extract';
-import { useState, useEffect, useCallback } from 'react';
+import { forwardRef, useState, useEffect, useCallback } from 'react';
 import { FormItem } from '../../formItem/formItem.js';
 import classNames from 'classnames';
 import '../iconButton/iconButton.js';
+import '../button/button.js';
 import '../../icons/times.js';
 import '../../icons/infoCircle.js';
 
-var TextArea = function TextArea(_a) {
+var TextArea = /*#__PURE__*/forwardRef(function (_a, ref) {
   var ariaDescribedBy = _a['aria-describedby'],
     _a$autoComplete = _a.autoComplete,
     autoComplete = _a$autoComplete === void 0 ? 'off' : _a$autoComplete,
@@ -71,10 +72,11 @@ var TextArea = function TextArea(_a) {
         value: localValue,
         "data-testid": dataTestId,
         maxLength: maxLength,
-        required: required
+        required: required,
+        ref: ref
       }, props))
     })
   });
-};
+});
 
 export { TextArea };

package/src/lib/formItem/formItem.js

@@ -1,12 +1,13 @@
 import { _ as _slicedToArray, b as _asyncToGenerator, c as _regeneratorRuntime } from '../../../_rollupPluginBabelHelpers.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import '../../../_tslib.js';
+import { useRef, useState, useLayoutEffect, useEffect } from 'react';
 import classNames from 'classnames';
 import { IconButton } from '../form/iconButton/iconButton.js';
-import { useRef, useState, useLayoutEffect, useEffect } from 'react';
 import { debounce, randomId, validateClassName, delay } from '@sebgroup/extract';
 import { Times } from '../icons/times.js';
 import { InfoCircle } from '../icons/infoCircle.js';
+import '../form/button/button.js';
 
 var FormItem = function FormItem(_ref) {
   var expandableInfo = _ref.expandableInfo,
@@ -72,6 +73,7 @@ var FormItem = function FormItem(_ref) {
         size: "small",
         "aria-expanded": isExpanded,
         "aria-controls": "".concat(inputId, "-expandable-info"),
+        "aria-label": expandableInfoButtonLabel,
         onClick: function () {
           var _onClick = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(event) {
             return _regeneratorRuntime().wrap(function _callee$(_context) {

package/src/lib/formItem/index.js

@@ -2,9 +2,10 @@ export { FormItem } from './formItem.js';
 import '../../../_rollupPluginBabelHelpers.js';
 import 'react/jsx-runtime';
 import '../../../_tslib.js';
+import 'react';
 import 'classnames';
 import '../form/iconButton/iconButton.js';
-import 'react';
+import '../form/button/button.js';
 import '@sebgroup/extract';
 import '../icons/times.js';
 import '../icons/infoCircle.js';

package/src/lib/select/index.js

@@ -8,5 +8,6 @@ import '../icons/chevronDown.js';
 import '../formItem/formItem.js';
 import 'classnames';
 import '../form/iconButton/iconButton.js';
+import '../form/button/button.js';
 import '../icons/times.js';
 import '../icons/infoCircle.js';

package/src/lib/select/select.js

@@ -7,6 +7,7 @@ import { ChevronDown } from '../icons/chevronDown.js';
 import { FormItem } from '../formItem/formItem.js';
 import classNames from 'classnames';
 import '../form/iconButton/iconButton.js';
+import '../form/button/button.js';
 import '../icons/times.js';
 import '../icons/infoCircle.js';