@sebgroup/green-react 3.2.0 → 3.3.0

package/index.esm.js

@@ -1,5 +1,5 @@
 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';
@@ -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))
     }))
   }));
@@ -4563,75 +4607,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;

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@sebgroup/green-react",
-  "version": "3.2.0",
+  "version": "3.3.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.7.0",
+    "@sebgroup/chlorophyll": "^3.1.0",
+    "@sebgroup/extract": "^3.0.1",
     "@lit/react": "^1.0.2",
     "classnames": "^2.3.2"
   },

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/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;