@sebgroup/green-react 3.2.0 → 3.4.0

package/README.md

@@ -1,8 +1,12 @@
-# `@sebgroup/green-react`
+<div align="center">
+<img width="600" alt="green-react" src="https://github.com/sebgroup/green/assets/11420341/ad4c9fe3-137f-4230-9ea7-a4de87752aa9">
+<h1>@sebgroup/green-react</h1>
+<p>
+React components with SEB's look and feel.
+</p>
+</div>
 
-> TODO: description
-
-## Install \*
+## Install
 
 ```bash
 npm install --save @sebgroup/green-react
@@ -12,17 +16,18 @@ npm install --save @sebgroup/green-react
 yarn add @sebgroup/green-react
 ```
 
-## Usage \*
+## Use
 
-```
-const greenReact = require('@sebgroup/green-react');
+```tsx
+import { Button } from '@sebgroup/green-react'
 
-// TODO: DEMONSTRATE API
+// Use in your JSX
+<Button>A Green React Button!</Button>
 ```
 
 ### Components
 
-View all components in the Storybook
+View all components in the [React Storybook](https://sebgroup.github.io/green/latest/react/)
 
 ## Develop \*
 
@@ -57,5 +62,3 @@ yarn test react --watch
    1. Test
    2. Code
    3. Refactor
-
-## Commands \*

package/index.esm.js

@@ -1,8 +1,8 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import React, { useState, useEffect, useMemo, useRef, useLayoutEffect, forwardRef, useCallback, useId } from 'react';
+import React, { useState, useEffect, useRef, useLayoutEffect, useMemo, forwardRef, useCallback, useId } from 'react';
 import { randomId, validateClassName, debounce, delay, sliderColors, getSliderTrackBackground } from '@sebgroup/extract';
 import { createComponent } from '@lit/react';
-import { getScopedTagName, GdsDatepicker, GdsContextMenu, GdsMenuItem, GdsMenuHeading, GdsDropdown, GdsOption } from '@sebgroup/green-core';
+import { getScopedTagName, GdsDatepicker, GdsContextMenu, GdsMenuItem, GdsMenuHeading, GdsDropdown, GdsOption, GdsGroupedList } from '@sebgroup/green-core';
 import { registerTransitionalStyles } from '@sebgroup/green-core/transitional-styles';
 import classNames from 'classnames';
 
@@ -2106,7 +2106,6 @@ const Datepicker = _a => {
   const min = minDate ? minDate : new Date(new Date().getFullYear() - 10, 0, 1);
   const max = maxDate ? maxDate : new Date(new Date().getFullYear() + 10, 0, 1);
   const onChangeHandler = e => {
-    console.log('OnChange event handler');
     if (onChange) {
       onChange(e.detail.value);
     }
@@ -2121,7 +2120,9 @@ const Datepicker = _a => {
       max: max,
       showWeekNumbers: showWeeks,
       onchange: onChangeHandler,
-      value: value
+      size: props.size,
+      value: value,
+      hideLabel: props.hideLabel
     }, props))
   }));
 };
@@ -2294,23 +2295,25 @@ const CoreOption = createComponent({
   elementClass: GdsOption,
   react: React
 });
-const Dropdown = ({
-  compareWith,
-  display: _display = 'label',
-  id,
-  informationLabel,
-  label,
-  multiSelect,
-  onChange,
-  options,
-  searchFilter,
-  searchable,
-  texts,
-  useValue: _useValue = 'value',
-  validator,
-  value,
-  syncPopoverWidth
-}) => {
+const Dropdown = _a => {
+  var {
+      compareWith,
+      display = 'label',
+      id,
+      informationLabel,
+      label,
+      multiSelect,
+      onChange,
+      options,
+      searchFilter,
+      searchable,
+      texts,
+      useValue = 'value',
+      validator,
+      value,
+      syncPopoverWidth
+    } = _a,
+    props = __rest(_a, ["compareWith", "display", "id", "informationLabel", "label", "multiSelect", "onChange", "options", "searchFilter", "searchable", "texts", "useValue", "validator", "value", "syncPopoverWidth"]);
   const handleOnChange = e => {
     var _a;
     if ((_a = e.detail) === null || _a === void 0 ? void 0 : _a.value) {
@@ -2323,7 +2326,7 @@ const Dropdown = ({
     return compareFn(o1, o2);
   };
   const searchFilterAdapter = (q, o) => {
-    if (searchFilter) return searchFilter(q, o.value[_useValue]);else return ((q, o) => o.innerHTML.toLowerCase().includes(q.toLowerCase()))(q, o);
+    if (searchFilter) return searchFilter(q, o.value[useValue]);else return ((q, o) => o.innerHTML.toLowerCase().includes(q.toLowerCase()))(q, o);
   };
   return jsx("div", Object.assign({
     className: "form-group"
@@ -2338,7 +2341,9 @@ const Dropdown = ({
       compareWith: compareWithAdapter,
       value: value,
       searchFilter: searchFilterAdapter,
-      syncPopoverWidth: syncPopoverWidth
+      syncPopoverWidth: syncPopoverWidth,
+      size: props.size,
+      hideLabel: props.hideLabel
     }, {
       children: [informationLabel && jsx("span", Object.assign({
         slot: "sub-label"
@@ -2356,14 +2361,14 @@ const Dropdown = ({
       })), options.map(option => {
         if (option.heading) {
           return jsx(CoreMenuHeading, {
-            children: option[_display]
+            children: option[display]
           }, option.label);
         }
         return jsx(CoreOption, Object.assign({
-          value: option[_useValue]
+          value: option[useValue]
         }, {
-          children: option[_display]
-        }), option[_useValue]);
+          children: option[display]
+        }), option[useValue]);
       })]
     }))
   }));
@@ -2404,7 +2409,7 @@ const IconButton = _a => {
     } = _a,
     props = __rest(_a, ["children", "onClick"]);
   return jsx("button", Object.assign({
-    className: `icon ${props.size == 'small' && 'small'}`,
+    className: `icon ${props.size === 'small' && 'small'}`,
     onClick: onClick,
     "aria-controls": props['aria-controls'],
     "aria-expanded": props['aria-expanded'],
@@ -2448,46 +2453,48 @@ const ButtonGroup = ({
   }));
 };
 
-const useInput = (props, onChanges, onChangeInput) => {
-  const id = useMemo(() => props.id || randomId(), [props.id]);
-  const ref = useRef(null);
-  const onChange = event => {
-    onChanges && onChanges(event);
-    onChangeInput && onChangeInput(event.target.value);
-  };
-  return Object.assign(Object.assign({}, props), {
-    id,
-    ref,
-    onChange
-  });
-};
-
 const Checkbox = _a => {
   var {
+      'aria-describedby': ariaDescribedBy,
+      id = randomId(),
       label,
-      onChange,
       validator,
-      testId
+      testId,
+      required,
+      className
     } = _a,
-    props = __rest(_a, ["label", "onChange", "validator", "testId"]);
-  const inputProps = useInput(props, onChange);
-  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));
+    props = __rest(_a, ['aria-describedby', "id", "label", "validator", "testId", "required", "className"]);
+  const [uuid] = useState(id);
+  const validationClassName = validateClassName(validator === null || validator === void 0 ? void 0 : validator.indicator);
+  const labelClassNames = classNames('form-control', {
+    [validationClassName]: validator
+  });
+  const inputClassNames = classNames(className, {
+    [validationClassName]: validator
+  });
+  const describedBy = classNames(ariaDescribedBy, {
+    [`${uuid}_message`]: (validator === null || validator === void 0 ? void 0 : validator.message) !== undefined && validator.message.length > 0
+  });
   return jsxs("div", Object.assign({
     className: "form-group"
   }, {
     children: [jsxs("label", Object.assign({
-      htmlFor: inputProps.id,
+      htmlFor: uuid,
       className: labelClassNames
     }, {
       children: [label, jsx("input", Object.assign({
+        "aria-describedby": describedBy || undefined,
+        "aria-invalid": (validator === null || validator === void 0 ? void 0 : validator.indicator) === 'error',
+        "aria-required": required,
+        className: inputClassNames || undefined,
         type: "checkbox",
-        "data-testid": testId
-      }, inputProps, {
-        className: inputClassNames
-      })), jsx("i", {})]
+        "data-testid": testId,
+        id: uuid,
+        required: required
+      }, props)), jsx("i", {})]
     })), validator && jsx("span", Object.assign({
-      className: "form-info"
+      className: "form-info",
+      id: `${uuid}_message`
     }, {
       children: validator.message
     }))]
@@ -2707,7 +2714,8 @@ function Group({
     }, {
       children: children
     })), error && jsx("span", Object.assign({
-      className: "form-info"
+      className: "form-info",
+      id: id && `${id}-message`
     }, {
       children: errorMessage
     }))]
@@ -3912,7 +3920,8 @@ const FormItem = ({
       className: "gds-form-item__footer"
     }, {
       children: [validator && jsx("span", Object.assign({
-        className: "form-info"
+        className: "form-info",
+        id: `${inputId}_message`
       }, {
         children: validator.message
       })), rightAlignedFooterInfo && jsx("span", Object.assign({
@@ -3928,6 +3937,20 @@ const FormItem = ({
   }));
 };
 
+const useInput = (props, onChanges, onChangeInput) => {
+  const id = useMemo(() => props.id || randomId(), [props.id]);
+  const ref = useRef(null);
+  const onChange = event => {
+    onChanges && onChanges(event);
+    onChangeInput && onChangeInput(event.target.value);
+  };
+  return Object.assign(Object.assign({}, props), {
+    id,
+    ref,
+    onChange
+  });
+};
+
 const RadioButton = /*#__PURE__*/forwardRef((_a, ref) => {
   var {
       label,
@@ -3974,46 +3997,59 @@ const Input = _a => {
       role,
       validator,
       onChangeInput,
-      value = ''
+      value = '',
+      required
     } = _a,
-    props = __rest(_a, ['aria-describedby', "autoComplete", "children", "className", "testId", "expandableInfo", "expandableInfoButtonLabel", "formatter", "id", "label", "info", "onChange", "unit", "role", "validator", "onChangeInput", "value"]);
+    props = __rest(_a, ['aria-describedby', "autoComplete", "children", "className", "testId", "expandableInfo", "expandableInfoButtonLabel", "formatter", "id", "label", "info", "onChange", "unit", "role", "validator", "onChangeInput", "value", "required"]);
   const [uuid] = useState(id);
   const [localValue, setLocalValue] = useState(value);
   useEffect(() => {
     setLocalValue(value);
   }, [value]);
-  const localOnChange = useCallback(event => {
-    const oldValue = event.target.value;
-    const newValue = formatter ? formatter(oldValue) : oldValue;
-    setLocalValue(newValue);
-    event.target.value = newValue;
-    if (onChange) onChange(event);
-    if (onChangeInput) onChangeInput(newValue);
+  const handleChange = useCallback(event => {
+    const {
+      selectionStart,
+      value
+    } = event.target;
+    const formattedValue = formatter ? formatter(value) : value;
+    const nrAddedChars = formattedValue.length - value.length;
+    const updateCaretPosition = nrAddedChars !== 0;
+    const newSelectionStart = updateCaretPosition && selectionStart ? selectionStart + nrAddedChars : selectionStart;
     // Fixes bug: React loses caret position when you format the input value
-    if (!formatter || newValue.length > oldValue.length) return;
-    const pointer = event.target.selectionStart;
-    const element = event.target;
     window.requestAnimationFrame(() => {
-      element.selectionStart = pointer;
-      element.selectionEnd = pointer;
+      event.target.selectionStart = newSelectionStart;
+      event.target.selectionEnd = newSelectionStart;
     });
+    setLocalValue(formattedValue);
+    if (onChange) onChange(event);
+    if (onChangeInput) onChangeInput(formattedValue);
   }, [formatter, setLocalValue, onChange, onChangeInput]);
-  const inputAriaDescribedBy = classNames(ariaDescribedBy, {
-    [`gds-expandable-info-${uuid}`]: expandableInfo,
-    [`${uuid}_info`]: info
-  }) || undefined;
-  const inputClassName = classNames(className, validator && validateClassName(validator.indicator)) || undefined;
+  const showSimpleInput = !label && !info && !expandableInfo;
+  const describedBy = classNames(ariaDescribedBy, {
+    [`${uuid}_group-message`]: !showSimpleInput && (validator === null || validator === void 0 ? void 0 : validator.message) !== undefined && validator.message.length > 0,
+    [`gds-expandable-info-${uuid}`]: !showSimpleInput && expandableInfo,
+    [`${uuid}_info`]: !showSimpleInput && info
+  });
+  const inputClassName = classNames(className, {
+    [validateClassName(validator === null || validator === void 0 ? void 0 : validator.indicator)]: validator
+  });
   const input = jsx("input", Object.assign({
-    "aria-describedby": inputAriaDescribedBy,
+    "aria-describedby": describedBy || undefined,
+    "aria-invalid": (validator === null || validator === void 0 ? void 0 : validator.indicator) === 'error',
+    "aria-required": required,
     autoComplete: autoComplete,
-    className: inputClassName,
+    className: inputClassName || undefined,
     "data-testid": dataTestId,
     id: uuid,
-    onChange: localOnChange,
+    onChange: handleChange,
     role: role,
-    value: localValue
+    value: localValue,
+    required: required
   }, props));
-  if (!label && !info && !expandableInfo) return input;
+  if (showSimpleInput) return input;
+  const spanClassName = classNames('form-text', {
+    'disabled': props.disabled
+  });
   return jsx(FormItem, Object.assign({
     expandableInfo: expandableInfo,
     expandableInfoButtonLabel: expandableInfoButtonLabel,
@@ -4028,10 +4064,11 @@ const Input = _a => {
       children: jsxs(Group, Object.assign({
         groupBorder: true,
         groupFocus: true,
-        error: validator && validator.message
+        error: validator === null || validator === void 0 ? void 0 : validator.message,
+        id: `${uuid}_group`
       }, {
         children: [input, unit && jsx("span", Object.assign({
-          className: `form-text${props.disabled ? ' disabled' : ''}`
+          className: spanClassName
         }, {
           children: unit
         })), children]
@@ -4214,23 +4251,27 @@ const TextArea = _a => {
       validator,
       value,
       testId: dataTestId,
-      maxLength
+      maxLength,
+      required
     } = _a,
-    props = __rest(_a, ['aria-describedby', "autoComplete", "className", "expandableInfo", "expandableInfoButtonLabel", "id", "label", "info", "onChange", "role", "rows", "validator", "value", "testId", "maxLength"]);
+    props = __rest(_a, ['aria-describedby', "autoComplete", "className", "expandableInfo", "expandableInfoButtonLabel", "id", "label", "info", "onChange", "role", "rows", "validator", "value", "testId", "maxLength", "required"]);
   const [uuid] = useState(id);
   const [localValue, setLocalValue] = useState(value);
   useEffect(() => {
     setLocalValue(value);
   }, [value]);
-  const localOnChange = useCallback(event => {
+  const handleChange = useCallback(event => {
     setLocalValue(event.target.value);
     if (onChange) onChange(event);
   }, [setLocalValue, onChange]);
-  const inputAriaDescribedBy = classNames(ariaDescribedBy, {
+  const describedBy = classNames(ariaDescribedBy, {
     [`gds-expandable-info-${uuid}`]: expandableInfo,
-    [`${uuid}_info`]: info
+    [`${uuid}_info`]: info,
+    [`${uuid}_message`]: (validator === null || validator === void 0 ? void 0 : validator.message) !== undefined && validator.message.length > 0
+  });
+  const inputClassName = classNames(className, {
+    [validateClassName(validator === null || validator === void 0 ? void 0 : validator.indicator)]: validator
   }) || undefined;
-  const inputClassName = classNames(className, validator && validateClassName(validator.indicator)) || undefined;
   const rightAlignedFooterInfo = maxLength ? `${(localValue === null || localValue === void 0 ? void 0 : localValue.length) || 0}/${maxLength}` : undefined;
   return jsx(FormItem, Object.assign({
     expandableInfo: expandableInfo,
@@ -4246,16 +4287,19 @@ const TextArea = _a => {
       className: "gds-input-wrapper"
     }, {
       children: jsx("textarea", Object.assign({
-        "aria-describedby": inputAriaDescribedBy,
+        "aria-describedby": describedBy || undefined,
+        "aria-invalid": (validator === null || validator === void 0 ? void 0 : validator.indicator) === 'error',
+        "aria-required": required,
         autoComplete: autoComplete,
-        className: inputClassName,
+        className: inputClassName || undefined,
         id: uuid,
-        onChange: localOnChange,
+        onChange: handleChange,
         role: role,
         rows: rows,
         value: localValue,
         "data-testid": dataTestId,
-        maxLength: maxLength
+        maxLength: maxLength,
+        required: required
       }, props))
     }))
   }));
@@ -4402,7 +4446,7 @@ const Link = _a => {
   }));
 };
 
-const ListItem = _a => {
+const ListItem$1 = _a => {
   var {
       listType,
       tableRowData,
@@ -4436,7 +4480,7 @@ const List$1 = _a => {
     props = __rest(_a, ["listType", "tableCaption", "tableData", "children"]);
   if (listType === 'ordered') {
     return jsx("ol", Object.assign({}, props, {
-      children: children === null || children === void 0 ? void 0 : children.map((child, index) => jsx(ListItem, {
+      children: children === null || children === void 0 ? void 0 : children.map((child, index) => jsx(ListItem$1, {
         children: child
       }, index))
     }));
@@ -4444,7 +4488,7 @@ const List$1 = _a => {
     return jsx("ul", Object.assign({}, props, {
       className: listType
     }, {
-      children: children === null || children === void 0 ? void 0 : children.map((child, index) => jsx(ListItem, {
+      children: children === null || children === void 0 ? void 0 : children.map((child, index) => jsx(ListItem$1, {
         children: child
       }, index))
     }));
@@ -4455,7 +4499,7 @@ const List$1 = _a => {
       }, {
         children: tableCaption
       })), jsx("dl", {
-        children: tableData === null || tableData === void 0 ? void 0 : tableData.map((data, index) => jsx(ListItem, {
+        children: tableData === null || tableData === void 0 ? void 0 : tableData.map((data, index) => jsx(ListItem$1, {
           listType: listType,
           tableRowData: data
         }, index))
@@ -4504,6 +4548,18 @@ var valueList$1 = /*#__PURE__*/Object.freeze({
 	'default': valueList
 });
 
+registerTransitionalStyles();
+const GroupedList = createComponent({
+  tagName: getScopedTagName('gds-grouped-list'),
+  elementClass: GdsGroupedList,
+  react: React
+});
+const ListItem = createComponent({
+  tagName: getScopedTagName('gds-list-item'),
+  elementClass: GdsGroupedList,
+  react: React
+});
+
 //TODO: Add variants
 const Navbar = ({
   children,
@@ -4563,75 +4619,56 @@ const Navbar = ({
   }));
 };
 
-const Select = /*#__PURE__*/React.forwardRef(({
-  id,
-  className,
-  children,
-  validator,
-  label,
-  labelInformation,
-  defaultValue,
-  value,
-  testId,
-  onChange,
-  onSelect,
-  expandableInfo,
-  expandableInfoButtonLabel,
-  name
-}, ref) => {
-  const selectId = id !== null && id !== void 0 ? id : randomId();
-  const validatorClassName = validateClassName(validator === null || validator === void 0 ? void 0 : validator.indicator);
+const Select = /*#__PURE__*/React.forwardRef((_a, ref) => {
+  var {
+      'aria-describedby': ariaDescribedBy,
+      id = randomId(),
+      validator,
+      label,
+      info,
+      testId,
+      expandableInfo,
+      expandableInfoButtonLabel,
+      required
+    } = _a,
+    props = __rest(_a, ['aria-describedby', "id", "validator", "label", "info", "testId", "expandableInfo", "expandableInfoButtonLabel", "required"]);
+  const [uuid] = useState(id);
+  const selectClassName = classNames('gds-select', {
+    [`${validateClassName(validator === null || validator === void 0 ? void 0 : validator.indicator)}`]: validator
+  });
+  const describedBy = classNames(ariaDescribedBy, {
+    [`${uuid}_info`]: info,
+    [`gds-expandable-info-${uuid}`]: expandableInfo,
+    [`${uuid}_message`]: (validator === null || validator === void 0 ? void 0 : validator.message) !== undefined && validator.message.length > 0
+  });
   return jsx(FormItem, Object.assign({
     label: label,
-    labelInformation: labelInformation,
+    labelInformation: info !== null && info !== void 0 ? info : props.labelInformation,
     expandableInfo: expandableInfo,
     expandableInfoButtonLabel: expandableInfoButtonLabel,
-    inputId: selectId,
+    inputId: uuid,
     validator: validator
   }, {
     children: jsxs("div", Object.assign({
-      className: `gds-select ${validatorClassName}`
+      className: selectClassName
     }, {
       children: [jsx("select", Object.assign({
-        id: selectId,
+        "aria-describedby": describedBy || undefined,
+        "aria-invalid": (validator === null || validator === void 0 ? void 0 : validator.indicator) === 'error',
+        "aria-required": required,
+        id: uuid,
         "data-testid": testId,
-        className: className,
-        name: name,
-        defaultValue: defaultValue,
-        value: value,
         ref: ref,
-        onChange: event => {
-          onChange && onChange(event);
-        }
-      }, {
-        children: children
-      })), jsx(ChevronDown, {})]
+        required: required
+      }, props)), jsx(ChevronDown, {})]
     }))
   }));
 });
-const Option = _a => {
-  var {
-      value,
-      children
-    } = _a,
-    rest = __rest(_a, ["value", "children"]);
-  return jsx("option", Object.assign({
-    value: value
-  }, rest, {
-    children: children
-  }));
+const Option = props => {
+  return jsx("option", Object.assign({}, props));
 };
-const OptionGroup = ({
-  label,
-  disabled,
-  children
-}) => {
-  return jsx("optgroup", Object.assign({
-    label: label,
-    disabled: disabled
-  }, {
-    children: children
-  }));
+const OptionGroup = props => {
+  return jsx("optgroup", Object.assign({}, props));
 };
 
 var anObject$3 = anObject$e;
@@ -6469,4 +6506,4 @@ const Table = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef((_a, ref) =
   }));
 }));
 
-export { Accordion, AlertRibbon as Alert, AlertRibbon, Badge, Button, ButtonGroup, Card, Checkbox, ContextMenu, CoreDatepicker, CoreDropdown, CoreMenuHeading, CoreOption, Datepicker, Dropdown, EmailInput, Flexbox, Form, FormItem, FormItems, Group, IconButton, InPageWizardStepCard, Input, Link, List$1 as List, MenuItem, Modal, Navbar, NumberInput, Option, OptionGroup, RadioButton, RadioGroup, Select, Slider, SortDirection, Stepper, Tab, Table, TableBody, TableCell, TableContext, TableHeader, TableHeaderCell, TableRow, Tabs, Text, TextArea, TextInput, valueList$1 as ValueList, filterArrayByColumns, onRowSelect, paginate, searchTextByColumns, sortArray, sumCols, useTableContext };
+export { Accordion, AlertRibbon as Alert, AlertRibbon, Badge, Button, ButtonGroup, Card, Checkbox, ContextMenu, CoreDatepicker, CoreDropdown, CoreMenuHeading, CoreOption, Datepicker, Dropdown, EmailInput, Flexbox, Form, FormItem, FormItems, Group, GroupedList, IconButton, InPageWizardStepCard, Input, Link, List$1 as List, ListItem, MenuItem, Modal, Navbar, NumberInput, Option, OptionGroup, RadioButton, RadioGroup, Select, Slider, SortDirection, Stepper, Tab, Table, TableBody, TableCell, TableContext, TableHeader, TableHeaderCell, TableRow, Tabs, Text, TextArea, TextInput, valueList$1 as ValueList, filterArrayByColumns, onRowSelect, paginate, searchTextByColumns, sortArray, sumCols, useTableContext };

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@sebgroup/green-react",
-  "version": "3.2.0",
+  "version": "3.4.0",
   "peerDependencies": {
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
   "dependencies": {
-    "@sebgroup/green-core": "^1.6.0",
-    "@sebgroup/chlorophyll": "^3.0.5",
-    "@sebgroup/extract": "^3.0.0",
+    "@sebgroup/green-core": "^1.8.0",
+    "@sebgroup/chlorophyll": "^3.1.1",
+    "@sebgroup/extract": "^3.0.1",
     "@lit/react": "^1.0.2",
     "classnames": "^2.3.2"
   },

package/src/index.d.ts

@@ -10,6 +10,7 @@ export * from './lib/layout';
 export * from './lib/in-page-wizard';
 export * from './lib/link/link';
 export * from './lib/list';
+export * from './lib/grouped-list/grouped-list';
 export * from './lib/navbar/navbar';
 export * from './lib/select';
 export * from './lib/slider';

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

@@ -10,6 +10,8 @@ export interface DatepickerOptions {
     value?: Date;
     showWeeks?: boolean;
     testId?: string;
+    size?: 'small' | 'medium';
+    hideLabel?: boolean;
     /** @deprecated Use `value` instead */
     selectedDate?: Date;
     /** @deprecated Use `value` instead */

package/src/lib/dropdown/dropdown.d.ts

@@ -30,6 +30,10 @@ export interface DropdownArgs {
     value?: any;
     /** Force width of the popover to match trigger */
     syncPopoverWidth?: boolean;
+    /** Size of the dropdown trigger */
+    size?: 'small' | 'medium';
+    /** Hide the label */
+    hideLabel?: boolean;
 }
 export interface DropdownTexts {
     placeholder?: string;
@@ -48,5 +52,5 @@ export declare const CoreOption: import("@lit/react").ReactWebComponent<GdsOptio
 export interface DropdownProps extends DropdownArgs {
     onChange?: OnChange;
 }
-export declare const Dropdown: ({ compareWith, display, id, informationLabel, label, multiSelect, onChange, options, searchFilter, searchable, texts, useValue, validator, value, syncPopoverWidth, }: DropdownProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Dropdown: ({ compareWith, display, id, informationLabel, label, multiSelect, onChange, options, searchFilter, searchable, texts, useValue, validator, value, syncPopoverWidth, ...props }: DropdownProps) => import("react/jsx-runtime").JSX.Element;
 export default Dropdown;

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: ({ label, onChange, validator, testId, ...props }: CheckboxProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Checkbox: ({ "aria-describedby": ariaDescribedBy, id, label, validator, testId, required, className, ...props }: CheckboxProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -18,7 +18,7 @@ export interface InputProps extends IExpandableInformation, DetailedHTMLProps<In
     /** Function called when input value changes */
     onChangeInput?: (value: string) => 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, ...props }: InputProps) => import("react/jsx-runtime").JSX.Element;
+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;

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, ...props }: ITextAreaProps) => import("react/jsx-runtime").JSX.Element;
+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;

package/src/lib/grouped-list/grouped-list.d.ts

@@ -0,0 +1,3 @@
+import { GdsGroupedList } from '@sebgroup/green-core';
+export declare const GroupedList: import("@lit/react").ReactWebComponent<GdsGroupedList, {}>;
+export declare const ListItem: import("@lit/react").ReactWebComponent<GdsGroupedList, {}>;

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

@@ -1,42 +1,25 @@
-import React, { ReactNode } from 'react';
-import { IValidator } from '@sebgroup/extract';
-import { SelectorAttributesProps, LabelProps } from '../../types';
-export interface SelectProps extends SelectorAttributesProps, LabelProps {
-    children: ReactNode;
-    validator?: IValidator;
-    onChange?: (event: React.ChangeEvent<HTMLSelectElement>) => void;
-    onSelect?: (event: React.ChangeEvent<HTMLSelectElement>) => void;
-    defaultValue?: string | number;
-    value?: string | number;
-    testId?: string;
-    expandableInfo?: string;
-    expandableInfoButtonLabel?: string;
-    name?: string;
-}
-interface OptionProps {
-    children: string;
-    value: string | number;
-    disabled?: boolean;
-    invalid?: boolean;
-    autocomplete?: string;
-    autofocus?: boolean;
-    form?: string;
-    name?: string;
-    required?: boolean;
-    size?: number;
-    selected?: boolean;
-}
-interface OptionGroupProps {
+import React from 'react';
+import { IExpandableInformation, ILabelAndLabelInformation, IValidator } from '@sebgroup/extract';
+export interface SelectProps extends IExpandableInformation, ILabelAndLabelInformation, React.DetailedHTMLProps<React.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement> {
     label: string;
-    children: React.ReactElement<OptionProps> | React.ReactElement<OptionProps>[];
-    disabled?: boolean;
+    info?: string;
+    validator?: IValidator | undefined;
+    value?: string;
+    testId?: string;
+    /**
+     * @deprecated
+     * Use `info` instead
+     */
+    labelInformation?: string;
 }
-export declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLSelectElement>>;
-export declare const Option: ({ value, children, ...rest }: OptionProps) => import("react/jsx-runtime").JSX.Element;
-export declare const OptionGroup: ({ label, disabled, children, }: OptionGroupProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Select: React.ForwardRefExoticComponent<Omit<SelectProps, "ref"> & React.RefAttributes<HTMLSelectElement>>;
+declare type OptionProps = React.DetailedHTMLProps<React.OptionHTMLAttributes<HTMLOptionElement>, HTMLOptionElement>;
+export declare const Option: (props: OptionProps) => import("react/jsx-runtime").JSX.Element;
+declare type OptGroupProps = React.DetailedHTMLProps<React.OptgroupHTMLAttributes<HTMLOptGroupElement>, HTMLOptGroupElement>;
+export declare const OptionGroup: (props: OptGroupProps) => import("react/jsx-runtime").JSX.Element;
 declare const _default: {
-    Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLSelectElement>>;
-    Option: ({ value, children, ...rest }: OptionProps) => import("react/jsx-runtime").JSX.Element;
-    OptionGroup: ({ label, disabled, children, }: OptionGroupProps) => import("react/jsx-runtime").JSX.Element;
+    Select: React.ForwardRefExoticComponent<Omit<SelectProps, "ref"> & React.RefAttributes<HTMLSelectElement>>;
+    Option: (props: OptionProps) => import("react/jsx-runtime").JSX.Element;
+    OptionGroup: (props: OptGroupProps) => import("react/jsx-runtime").JSX.Element;
 };
 export default _default;