@redsift/pickers 10.2.0 → 10.3.0-alpha.10

package/index.js

@@ -1,29 +1,9 @@
 import React, { forwardRef, useContext, useEffect, useRef, useState, useReducer, useMemo } from 'react';
-import { usePopoverContext, useMergeRefs, FloatingPortal, StyledPopoverContent, PopoverContent, Popover } from '@redsift/popovers';
-import { baseContainer, FocusWithinGroupContext, ListboxContext, isComponent, Item, useListboxItem, useTheme, Flexbox, StyledItem, getContainerProps, partitionComponents, useLocalizedStringFormatter, FocusWithinGroupActionType, ListboxActionType, IconButton, EventKey, ListboxReducer, useId, ThemeProvider, FocusWithinGroup, Text, Theme, Icon } from '@redsift/design-system';
-import { mdiChevronDown } from '@redsift/icons';
 import classNames from 'classnames';
 import styled from 'styled-components';
-
-/**
- * Component variant.
- */
-const ComboboxSelectionMode = {
-  single: 'single',
-  multiple: 'multiple'
-};
-const ComboboxVariant = {
-  options: 'options',
-  suggestions: 'suggestions'
-};
-
-/**
- * Context props.
- */
-
-/**
- * Component props.
- */
+import { baseContainer, FocusWithinGroupContext, ListboxContext, isComponent, Item, useListboxItem, useTheme, Flexbox, StyledItem, getContainerProps, AppContainerContext, partitionComponents, useId, useMessageFormatter, FocusWithinGroupActionType, IconButton, ListboxActionType, EventKey, ListboxReducer, ThemeProvider, FocusWithinGroup, Text, Theme, Icon } from '@redsift/design-system';
+import { usePopoverContext, useMergeRefs, FloatingPortal, StyledPopoverContent, PopoverContent, Popover } from '@redsift/popovers';
+import { mdiClose, mdiChevronDown } from '@redsift/icons';
 
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
@@ -119,69 +99,84 @@ function _toPropertyKey(arg) {
 /**
  * Component style.
  */
-const StyledComboboxContentHeader = styled.div`
+const StyledComboboxContentFooter = styled.div`
   ${baseContainer}
 `;
 
-const _excluded$3 = ["children", "className"];
-const COMPONENT_NAME$b = 'ComboboxContentHeader';
-const CLASSNAME$b = 'redsift-combobox-content-header';
-const DEFAULT_PROPS$b = {};
+const _excluded$6 = ["children", "className"];
+const COMPONENT_NAME$e = 'ComboboxContentFooter';
+const CLASSNAME$e = 'redsift-combobox-content-footer';
 
 /**
- * The ComboboxContentHeader component.
+ * The ComboboxContentFooter component.
  */
-const ComboboxContentHeader = /*#__PURE__*/forwardRef((props, ref) => {
+const ComboboxContentFooter = /*#__PURE__*/forwardRef((props, ref) => {
   const {
       children,
       className
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$3);
-  return /*#__PURE__*/React.createElement(StyledComboboxContentHeader, _extends({}, forwardedProps, {
-    className: classNames(ComboboxContentHeader.className, className),
+    forwardedProps = _objectWithoutProperties(props, _excluded$6);
+  return /*#__PURE__*/React.createElement(StyledComboboxContentFooter, _extends({}, forwardedProps, {
+    className: classNames(ComboboxContentFooter.className, className),
     ref: ref
   }), children);
 });
-ComboboxContentHeader.className = CLASSNAME$b;
-ComboboxContentHeader.defaultProps = DEFAULT_PROPS$b;
-ComboboxContentHeader.displayName = COMPONENT_NAME$b;
+ComboboxContentFooter.className = CLASSNAME$e;
+ComboboxContentFooter.displayName = COMPONENT_NAME$e;
 
 /**
  * Component style.
  */
-const StyledComboboxContentFooter = styled.div`
+const StyledComboboxContentHeader = styled.div`
   ${baseContainer}
 `;
 
-const _excluded$2 = ["children", "className"];
-const COMPONENT_NAME$a = 'ComboboxContentFooter';
-const CLASSNAME$a = 'redsift-combobox-content-footer';
-const DEFAULT_PROPS$a = {};
+const _excluded$5 = ["children", "className"];
+const COMPONENT_NAME$d = 'ComboboxContentHeader';
+const CLASSNAME$d = 'redsift-combobox-content-header';
 
 /**
- * The ComboboxContentFooter component.
+ * The ComboboxContentHeader component.
  */
-const ComboboxContentFooter = /*#__PURE__*/forwardRef((props, ref) => {
+const ComboboxContentHeader = /*#__PURE__*/forwardRef((props, ref) => {
   const {
       children,
       className
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$2);
-  return /*#__PURE__*/React.createElement(StyledComboboxContentFooter, _extends({}, forwardedProps, {
-    className: classNames(ComboboxContentFooter.className, className),
+    forwardedProps = _objectWithoutProperties(props, _excluded$5);
+  return /*#__PURE__*/React.createElement(StyledComboboxContentHeader, _extends({}, forwardedProps, {
+    className: classNames(ComboboxContentHeader.className, className),
     ref: ref
   }), children);
 });
-ComboboxContentFooter.className = CLASSNAME$a;
-ComboboxContentFooter.defaultProps = DEFAULT_PROPS$a;
-ComboboxContentFooter.displayName = COMPONENT_NAME$a;
+ComboboxContentHeader.className = CLASSNAME$d;
+ComboboxContentHeader.displayName = COMPONENT_NAME$d;
 
 const ComboboxContext = /*#__PURE__*/React.createContext(null);
 
-const _excluded$1 = ["children", "className", "renderFreeTextItem"];
-const COMPONENT_NAME$9 = 'ComboboxContentListbox';
-const CLASSNAME$9 = 'redsift-combobox-content-listbox';
-const DEFAULT_PROPS$9 = {};
+/**
+ * Component variant.
+ */
+const ComboboxSelectionMode = {
+  single: 'single',
+  multiple: 'multiple'
+};
+const ComboboxVariant = {
+  options: 'options',
+  suggestions: 'suggestions'
+};
+
+/**
+ * Context props.
+ */
+
+/**
+ * Component props.
+ */
+
+const _excluded$4 = ["children", "className", "renderFreeTextItem"];
+const COMPONENT_NAME$c = 'ComboboxContentListbox';
+const CLASSNAME$c = 'redsift-combobox-content-listbox';
 
 /**
  * The ComboboxContentListbox component.
@@ -192,7 +187,7 @@ const ComboboxContentListbox = /*#__PURE__*/forwardRef((props, ref) => {
       className,
       renderFreeTextItem
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1);
+    forwardedProps = _objectWithoutProperties(props, _excluded$4);
   const focusContext = useContext(FocusWithinGroupContext);
   const listboxState = useContext(ListboxContext);
   const comboboxState = useContext(ComboboxContext);
@@ -270,11 +265,12 @@ const ComboboxContentListbox = /*#__PURE__*/forwardRef((props, ref) => {
   }), canHaveMultipleSelections && canHaveFreeText ? /*#__PURE__*/React.createElement(StyledItem, {
     role: "option",
     id: comboboxState.freeTextItemId,
-    $isActive: undefined,
+    $color: "primary",
+    $isActive: isSelected,
     $isDisabled: isDisabled,
-    $isFocused: isFocused,
-    $isHovered: undefined,
-    $isSelected: isSelected,
+    $isGradient: false,
+    $isHovered: isFocused,
+    $hasBorder: false,
     $hasCheckbox: false,
     $theme: theme,
     "aria-selected": isSelected,
@@ -290,18 +286,17 @@ const ComboboxContentListbox = /*#__PURE__*/forwardRef((props, ref) => {
     } : undefined
   }, renderedFreeTextItem) : null, Array.isArray(children) ? renderedChildren : children);
 });
-ComboboxContentListbox.className = CLASSNAME$9;
-ComboboxContentListbox.defaultProps = DEFAULT_PROPS$9;
-ComboboxContentListbox.displayName = COMPONENT_NAME$9;
+ComboboxContentListbox.className = CLASSNAME$c;
+ComboboxContentListbox.displayName = COMPONENT_NAME$c;
 
-const COMPONENT_NAME$8 = 'ComboboxContent';
-const CLASSNAME$8 = 'redsift-combobox-content';
-const DEFAULT_PROPS$8 = {};
+const COMPONENT_NAME$b = 'ComboboxContent';
+const CLASSNAME$b = 'redsift-combobox-content';
 
 /**
  * The ComboboxContent component.
  */
 const BaseComboboxContent = /*#__PURE__*/forwardRef((props, ref) => {
+  var _comboboxState$inputV;
   const {
     children,
     className,
@@ -317,32 +312,35 @@ const BaseComboboxContent = /*#__PURE__*/forwardRef((props, ref) => {
     y
   } = usePopoverContext();
   const popoverRef = useMergeRefs([refs.setFloating, ref]);
+  const appContainerState = useContext(AppContainerContext);
+  const comboboxState = useContext(ComboboxContext);
+  const focusContext = useContext(FocusWithinGroupContext);
   const listboxState = useContext(ListboxContext);
   const theme = useTheme();
   const [[header], [listbox], [footer]] = partitionComponents(React.Children.toArray(children), [isComponent('ComboboxContentHeader'), isComponent('ComboboxContentListbox'), isComponent('ComboboxContentFooter')]);
   return /*#__PURE__*/React.createElement(FloatingPortal, {
-    id: "redsift-app-container"
+    root: appContainerState === null || appContainerState === void 0 ? void 0 : appContainerState.appContainerRef.current
   }, isOpen && /*#__PURE__*/React.createElement(StyledPopoverContent, _extends({
     $theme: theme,
-    ref: popoverRef,
-    style: _objectSpread2({
+    ref: popoverRef
+  }, getFloatingProps(props), {
+    style: _objectSpread2(_objectSpread2({
       position: strategy,
       top: y !== null && y !== void 0 ? y : 0,
       left: x !== null && x !== void 0 ? x : 0
-    }, style)
-  }, getFloatingProps(props), {
+    }, style), comboboxState !== null && comboboxState !== void 0 && (_comboboxState$inputV = comboboxState.inputValue) !== null && _comboboxState$inputV !== void 0 && _comboboxState$inputV.length && focusContext.state.tabStops.length === 0 ? {
+      display: 'none'
+    } : {}),
     className: classNames(PopoverContent.className, BaseComboboxContent.className, className),
-    "aria-disabled": listboxState.state.isDisabled,
-    "aria-multiselectable": listboxState.state.selectionMode === 'multiple'
+    "aria-disabled": listboxState.state.isDisabled
   }), /*#__PURE__*/React.createElement(Flexbox, _extends({
     flexDirection: "column",
     gap: "0px",
     width: "100%"
   }, containerProps), header, listbox, footer)));
 });
-BaseComboboxContent.className = CLASSNAME$8;
-BaseComboboxContent.defaultProps = DEFAULT_PROPS$8;
-BaseComboboxContent.displayName = COMPONENT_NAME$8;
+BaseComboboxContent.className = CLASSNAME$b;
+BaseComboboxContent.displayName = COMPONENT_NAME$b;
 const ComboboxContent = Object.assign(BaseComboboxContent, {
   Header: ComboboxContentHeader,
   Listbox: ComboboxContentListbox,
@@ -351,16 +349,24 @@ const ComboboxContent = Object.assign(BaseComboboxContent, {
 
 var collapse$1 = "Collapse";
 var expand$1 = "Expand";
+var selected$1 = "{count, plural, =0 {None selected} other {# selected}}";
+var unselect$1 = "Unselect {label}";
 var enUS = {
 	collapse: collapse$1,
-	expand: expand$1
+	expand: expand$1,
+	selected: selected$1,
+	unselect: unselect$1
 };
 
 var collapse = "Réduire";
 var expand = "Développer";
+var selected = "{count, plural, =0 {Aucun sélectionné} =1 {1 sélectionné} other {# sélectionnés}}";
+var unselect = "Déselectionner {{label}}";
 var frFR = {
 	collapse: collapse,
-	expand: expand
+	expand: expand,
+	selected: selected,
+	unselect: unselect
 };
 
 var intlMessages = {
@@ -368,22 +374,23 @@ var intlMessages = {
   'fr-FR': frFR
 };
 
-const _excluded = ["aria-controls", "aria-expanded", "aria-haspopup", "role"];
-const COMPONENT_NAME$7 = 'ComboboxTrigger';
-const CLASSNAME$7 = 'redsift-combobox-trigger';
-const DEFAULT_PROPS$7 = {};
+const _excluded$3 = ["aria-controls", "aria-expanded", "aria-haspopup", "role"];
+const COMPONENT_NAME$a = 'ComboboxTrigger';
+const CLASSNAME$a = 'redsift-combobox-trigger';
 
 /**
  * The ComboboxTrigger component.
  */
 const ComboboxTrigger = /*#__PURE__*/forwardRef((props, ref) => {
   var _renderedChildren$pro;
+  const [id] = useId();
   const {
     children,
     hideExpandButton,
-    openOnFocus
+    openOnFocus,
+    hideClearButton
   } = props;
-  const stringFormatter = useLocalizedStringFormatter(intlMessages);
+  const format = useMessageFormatter(intlMessages);
   const {
     getReferenceProps,
     isOpen,
@@ -402,6 +409,9 @@ const ComboboxTrigger = /*#__PURE__*/forwardRef((props, ref) => {
     value: comboboxState === null || comboboxState === void 0 ? void 0 : comboboxState.value,
     isOpen
   }) : children;
+  const isTextArea = isComponent('TextArea')(renderedChildren);
+  const isTextField = isComponent('TextField')(renderedChildren);
+  const hasMultipleLines = isTextArea && (comboboxState === null || comboboxState === void 0 ? void 0 : comboboxState.inputValue.includes('\n'));
   const _inputRef = useRef();
   const inputRef = (_renderedChildren$pro = renderedChildren.props.inputRef) !== null && _renderedChildren$pro !== void 0 ? _renderedChildren$pro : _inputRef;
   const handleChange = value => {
@@ -431,7 +441,7 @@ const ComboboxTrigger = /*#__PURE__*/forwardRef((props, ref) => {
         });
       }
     }
-    if (/^.$/u.test(event.key) || code === 'Backspace') {
+    if ((/^.$/.test(event.key) || code === 'Backspace') && !hasMultipleLines) {
       if (!isOpen) {
         handleOpenPopover(true);
       }
@@ -457,7 +467,7 @@ const ComboboxTrigger = /*#__PURE__*/forwardRef((props, ref) => {
         }
       });
     }
-    if (code === 'ArrowDown') {
+    if (code === 'ArrowDown' && !hasMultipleLines) {
       if (!isOpen) {
         handleOpenPopover(true);
       }
@@ -473,7 +483,7 @@ const ComboboxTrigger = /*#__PURE__*/forwardRef((props, ref) => {
       });
       event.preventDefault();
     }
-    if (code === 'ArrowUp') {
+    if (code === 'ArrowUp' && !hasMultipleLines) {
       if (!isOpen) {
         handleOpenPopover(true);
       }
@@ -491,41 +501,43 @@ const ComboboxTrigger = /*#__PURE__*/forwardRef((props, ref) => {
     }
     if (code === 'Enter') {
       var _focusContext$state$a;
-      if (canHaveMultipleSelections && canHaveFreeText && ((_focusContext$state$a = focusContext.state.activedescendant) === null || _focusContext$state$a === void 0 ? void 0 : _focusContext$state$a[0]) === comboboxState.freeTextItemId) {
-        if (comboboxState.inputValue) {
+      if (isTextField || isTextArea && !event.shiftKey) {
+        event.preventDefault();
+      }
+      if (canHaveMultipleSelections && canHaveFreeText && ((_focusContext$state$a = focusContext.state.activedescendant) === null || _focusContext$state$a === void 0 ? void 0 : _focusContext$state$a[0]) === comboboxState.freeTextItemId && comboboxState.inputValue) {
+        listboxState.dispatch({
+          type: ListboxActionType.TOGGLE,
+          payload: {
+            value: comboboxState.inputValue,
+            activedescendant: [comboboxState.freeTextItemId, comboboxState.inputValue]
+          }
+        });
+        handleOpenPopover(false);
+      } else if (isOpen && focusContext.state.selectedId) {
+        if (canHaveMultipleSelections) {
+          var _focusContext$state$a2, _focusContext$state$a3;
           listboxState.dispatch({
             type: ListboxActionType.TOGGLE,
             payload: {
-              value: comboboxState.inputValue,
-              activedescendant: [comboboxState.freeTextItemId, comboboxState.inputValue]
+              value: (_focusContext$state$a2 = (_focusContext$state$a3 = focusContext.state.activedescendant) === null || _focusContext$state$a3 === void 0 ? void 0 : _focusContext$state$a3[1]) !== null && _focusContext$state$a2 !== void 0 ? _focusContext$state$a2 : '',
+              activedescendant: focusContext.state.activedescendant
+            }
+          });
+        } else {
+          var _focusContext$state$a4, _focusContext$state$a5;
+          listboxState.dispatch({
+            type: ListboxActionType.SET,
+            payload: {
+              values: [(_focusContext$state$a4 = (_focusContext$state$a5 = focusContext.state.activedescendant) === null || _focusContext$state$a5 === void 0 ? void 0 : _focusContext$state$a5[1]) !== null && _focusContext$state$a4 !== void 0 ? _focusContext$state$a4 : ''],
+              activedescendant: focusContext.state.activedescendant
             }
           });
-          handleOpenPopover(false);
-        }
-      } else {
-        if (isOpen && focusContext.state.selectedId) {
-          if (canHaveMultipleSelections) {
-            var _focusContext$state$a2, _focusContext$state$a3;
-            listboxState.dispatch({
-              type: ListboxActionType.TOGGLE,
-              payload: {
-                value: (_focusContext$state$a2 = (_focusContext$state$a3 = focusContext.state.activedescendant) === null || _focusContext$state$a3 === void 0 ? void 0 : _focusContext$state$a3[1]) !== null && _focusContext$state$a2 !== void 0 ? _focusContext$state$a2 : '',
-                activedescendant: focusContext.state.activedescendant
-              }
-            });
-          } else {
-            var _focusContext$state$a4, _focusContext$state$a5;
-            listboxState.dispatch({
-              type: ListboxActionType.SET,
-              payload: {
-                values: [(_focusContext$state$a4 = (_focusContext$state$a5 = focusContext.state.activedescendant) === null || _focusContext$state$a5 === void 0 ? void 0 : _focusContext$state$a5[1]) !== null && _focusContext$state$a4 !== void 0 ? _focusContext$state$a4 : ''],
-                activedescendant: focusContext.state.activedescendant
-              }
-            });
-          }
         }
+      } else if (!event.shiftKey) {
+        var _comboboxState$formRe, _comboboxState$formRe2, _comboboxState$submit, _comboboxState$submit2;
+        comboboxState === null || comboboxState === void 0 ? void 0 : (_comboboxState$formRe = comboboxState.formRef) === null || _comboboxState$formRe === void 0 ? void 0 : (_comboboxState$formRe2 = _comboboxState$formRe.current) === null || _comboboxState$formRe2 === void 0 ? void 0 : _comboboxState$formRe2.submit();
+        comboboxState === null || comboboxState === void 0 ? void 0 : (_comboboxState$submit = comboboxState.submitRef) === null || _comboboxState$submit === void 0 ? void 0 : (_comboboxState$submit2 = _comboboxState$submit.current) === null || _comboboxState$submit2 === void 0 ? void 0 : _comboboxState$submit2.click();
       }
-      event.preventDefault();
     }
   };
   const handleOpen = () => {
@@ -607,8 +619,8 @@ const ComboboxTrigger = /*#__PURE__*/forwardRef((props, ref) => {
       handleOpenPopover(false);
     }
   }, [listboxState.state]);
-  if (isComponent('TextField')(renderedChildren)) {
-    var _props$children, _focusContext$state$a7;
+  if (isTextField || isTextArea) {
+    var _props$children, _focusContext$state$a7, _comboboxState$value;
     const _getReferenceProps = getReferenceProps(_objectSpread2(_objectSpread2(_objectSpread2({
         ref: triggerRef
       }, props), renderedChildren.props), {}, {
@@ -620,42 +632,64 @@ const ComboboxTrigger = /*#__PURE__*/forwardRef((props, ref) => {
         'aria-haspopup': ariaHaspopup,
         role
       } = _getReferenceProps,
-      forwardedProps = _objectWithoutProperties(_getReferenceProps, _excluded);
+      forwardedProps = _objectWithoutProperties(_getReferenceProps, _excluded$3);
+    const inputProps = {
+      'aria-activedescendant': isOpen ? (_focusContext$state$a7 = focusContext.state.activedescendant) === null || _focusContext$state$a7 === void 0 ? void 0 : _focusContext$state$a7[0] : undefined,
+      'aria-controls': ariaControls,
+      'aria-expanded': ariaExpanded,
+      'aria-haspopup': ariaHaspopup,
+      autoComplete: 'off',
+      autoCapitalize: 'off',
+      autoCorrect: 'off',
+      spellCheck: 'false',
+      'aria-autocomplete': canHaveMultipleSelections ? 'list' : undefined,
+      'aria-description': canHaveMultipleSelections ? format('selected', {
+        count: comboboxState === null || comboboxState === void 0 ? void 0 : comboboxState.value.length
+      }) : undefined,
+      onKeyDown: handleKeyDown,
+      role
+    };
     return /*#__PURE__*/React.cloneElement(renderedChildren, _objectSpread2(_objectSpread2({}, forwardedProps), {}, {
-      inputProps: {
-        'aria-activedescendant': isOpen ? (_focusContext$state$a7 = focusContext.state.activedescendant) === null || _focusContext$state$a7 === void 0 ? void 0 : _focusContext$state$a7[0] : undefined,
-        'aria-controls': ariaControls,
-        'aria-expanded': ariaExpanded,
-        'aria-haspopup': ariaHaspopup,
-        onKeyDown: handleKeyDown,
-        role
-      },
       theme,
-      inputRef,
+      className: classNames(renderedChildren.props.className, comboboxState === null || comboboxState === void 0 ? void 0 : comboboxState.triggerClassName),
       isDisabled: comboboxState === null || comboboxState === void 0 ? void 0 : comboboxState.isDisabled,
       isInvalid: comboboxState === null || comboboxState === void 0 ? void 0 : comboboxState.isInvalid,
-      onClear: handleClear,
       onChange: handleChange,
       onBlur: handleBlur,
       onFocus: handleFocus,
-      value: comboboxState === null || comboboxState === void 0 ? void 0 : comboboxState.inputValue,
+      value: comboboxState === null || comboboxState === void 0 ? void 0 : comboboxState.inputValue
+    }, isTextField ? {
+      inputProps,
+      inputRef,
+      onClear: handleClear,
+      hasClearButton: hideClearButton ? false : {
+        isDisabled: (comboboxState === null || comboboxState === void 0 ? void 0 : comboboxState.isDisabled) || (comboboxState === null || comboboxState === void 0 ? void 0 : comboboxState.value) && (comboboxState === null || comboboxState === void 0 ? void 0 : (_comboboxState$value = comboboxState.value) === null || _comboboxState$value === void 0 ? void 0 : _comboboxState$value.length) === 0,
+        onClick: () => inputRef.current.focus()
+      },
       pills: canHaveMultipleSelections ? (comboboxState === null || comboboxState === void 0 ? void 0 : comboboxState.value).map(v => ({
-        label: v,
-        value: v,
-        onClick: (_, value) => {
-          listboxState.dispatch({
-            type: ListboxActionType.TOGGLE,
-            payload: {
-              value: value,
-              activedescendant: focusContext.state.activedescendant
-            }
-          });
-        }
+        isDisabled: comboboxState === null || comboboxState === void 0 ? void 0 : comboboxState.isDisabled,
+        children: [v, /*#__PURE__*/React.createElement(IconButton, {
+          key: `${id}-pill-${v}-icon-button`,
+          icon: mdiClose,
+          "aria-label": format('unselect', {
+            label: v
+          }),
+          onClick: event => {
+            event.preventDefault();
+            listboxState.dispatch({
+              type: ListboxActionType.TOGGLE,
+              payload: {
+                value: v,
+                activedescendant: focusContext.state.activedescendant
+              }
+            });
+          }
+        })]
       })) : undefined,
       internal: (value, isDisabled, isInvalid, isRequired) => {
         return /*#__PURE__*/React.createElement(React.Fragment, null, typeof renderedChildren.props.internal === 'function' ? renderedChildren.props.internal(value, isDisabled, isInvalid, isRequired) : renderedChildren.props.internal, hideExpandButton ? null : /*#__PURE__*/React.createElement(IconButton, {
           theme: theme,
-          "aria-label": stringFormatter.format(!isOpen ? 'expand' : 'collapse'),
+          "aria-label": format(!isOpen ? 'expand' : 'collapse'),
           color: "grey",
           icon: mdiChevronDown,
           onClick: handleOpen,
@@ -669,25 +703,18 @@ const ComboboxTrigger = /*#__PURE__*/forwardRef((props, ref) => {
           }
         }));
       }
+    } : {
+      textareaProps: inputProps,
+      textareaRef: inputRef
     }));
   }
   return /*#__PURE__*/React.createElement(React.Fragment, null, renderedChildren);
 });
-ComboboxTrigger.className = CLASSNAME$7;
-ComboboxTrigger.defaultProps = DEFAULT_PROPS$7;
-ComboboxTrigger.displayName = COMPONENT_NAME$7;
+ComboboxTrigger.className = CLASSNAME$a;
+ComboboxTrigger.displayName = COMPONENT_NAME$a;
 
-const COMPONENT_NAME$6 = 'Combobox';
-const CLASSNAME$6 = 'redsift-combobox';
-const DEFAULT_PROPS$6 = {
-  filter: {
-    type: 'startsWith',
-    caseSensitive: false
-  },
-  minWidth: 'trigger-width',
-  selectionMode: ComboboxSelectionMode.single,
-  variant: ComboboxVariant.options
-};
+const COMPONENT_NAME$9 = 'Combobox';
+const CLASSNAME$9 = 'redsift-combobox';
 
 /**
  * The Combobox component.
@@ -697,17 +724,24 @@ const BaseCombobox = props => {
     defaultValue,
     description,
     descriptionProps,
-    filter,
+    filter = {
+      type: 'startsWith',
+      caseSensitive: false
+    },
+    formRef,
+    submitRef,
+    inputValue: propsInputValue,
     isDisabled,
     isInvalid,
     maxOptionsLength,
+    minWidth = 'trigger-width',
     onChange,
-    value,
     onInputChange,
-    inputValue: propsInputValue,
-    selectionMode,
+    selectionMode = ComboboxSelectionMode.single,
     theme: propsTheme,
-    variant,
+    triggerClassName,
+    value,
+    variant = ComboboxVariant.options,
     wrapperProps
   } = props;
   const theme = useTheme(propsTheme);
@@ -748,6 +782,8 @@ const BaseCombobox = props => {
   /** Combobox context. */
   const state = {
     filter,
+    formRef,
+    submitRef,
     value: selectedValue,
     inputValue,
     isDisabled: isDisabled || false,
@@ -756,6 +792,7 @@ const BaseCombobox = props => {
     variant,
     freeTextItemRef: freeTextItemRef,
     freeTextItemId,
+    triggerClassName,
     setValue(value) {
       if (isDisabled) {
         return;
@@ -800,7 +837,8 @@ const BaseCombobox = props => {
       trigger: 'ComboboxTrigger'
     },
     placement: "bottom-start",
-    role: "listbox"
+    role: "listbox",
+    minWidth: minWidth
   }, props)), description && typeof description === 'string' ? /*#__PURE__*/React.createElement(Text, _extends({
     theme: theme,
     marginTop: "8px",
@@ -808,22 +846,110 @@ const BaseCombobox = props => {
     color: isInvalid ? 'error' : theme === Theme.light ? 'dark-grey' : 'white'
   }, descriptionProps), description) : /*#__PURE__*/React.isValidElement(description) ? description : null)))));
 };
-BaseCombobox.className = CLASSNAME$6;
-BaseCombobox.defaultProps = DEFAULT_PROPS$6;
-BaseCombobox.displayName = COMPONENT_NAME$6;
+BaseCombobox.className = CLASSNAME$9;
+BaseCombobox.displayName = COMPONENT_NAME$9;
 const Combobox = Object.assign(BaseCombobox, {
   Trigger: ComboboxTrigger,
   Content: ComboboxContent
 });
 
+/**
+ * Component style.
+ */
+const StyledMenuButtonContentFooter = styled.div`
+  ${baseContainer}
+`;
+
+const _excluded$2 = ["children", "className"];
+const COMPONENT_NAME$8 = 'MenuButtonContentFooter';
+const CLASSNAME$8 = 'redsift-combobox-content-footer';
+
+/**
+ * The MenuButtonContentFooter component.
+ */
+const MenuButtonContentFooter = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      children,
+      className
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded$2);
+  return /*#__PURE__*/React.createElement(StyledMenuButtonContentFooter, _extends({}, forwardedProps, {
+    className: classNames(MenuButtonContentFooter.className, className),
+    ref: ref
+  }), children);
+});
+MenuButtonContentFooter.className = CLASSNAME$8;
+MenuButtonContentFooter.displayName = COMPONENT_NAME$8;
+
+/**
+ * Component style.
+ */
+const StyledMenuButtonContentHeader = styled.div`
+  ${baseContainer}
+`;
+
+const _excluded$1 = ["children", "className"];
+const COMPONENT_NAME$7 = 'MenuButtonContentHeader';
+const CLASSNAME$7 = 'redsift-combobox-content-header';
+
+/**
+ * The MenuButtonContentHeader component.
+ */
+const MenuButtonContentHeader = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      children,
+      className
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded$1);
+  return /*#__PURE__*/React.createElement(StyledMenuButtonContentHeader, _extends({}, forwardedProps, {
+    className: classNames(MenuButtonContentHeader.className, className),
+    ref: ref
+  }), children);
+});
+MenuButtonContentHeader.className = CLASSNAME$7;
+MenuButtonContentHeader.displayName = COMPONENT_NAME$7;
+
+const _excluded = ["children", "className"];
+const COMPONENT_NAME$6 = 'MenuButtonContentMenu';
+const CLASSNAME$6 = 'redsift-menu-button-content-menu';
+
+/**
+ * The MenuButtonContentMenu component.
+ */
+const MenuButtonContentMenu = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      children,
+      className
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  const focusContext = useContext(FocusWithinGroupContext);
+  useEffect(() => {
+    if (focusContext && focusContext.state.delayedAction && focusContext.state.tabStops.length) {
+      focusContext.dispatch(focusContext.state.delayedAction);
+    }
+  }, [focusContext.state.delayedAction, focusContext.state.tabStops.length]);
+  return /*#__PURE__*/React.createElement(Flexbox, _extends({
+    flexDirection: "column",
+    gap: "8px",
+    margin: "8px 0px",
+    width: "100%",
+    className: classNames(MenuButtonContentMenu.className, className),
+    role: "menu",
+    as: "ul"
+  }, forwardedProps, {
+    ref: ref
+  }), children);
+});
+MenuButtonContentMenu.className = CLASSNAME$6;
+MenuButtonContentMenu.displayName = COMPONENT_NAME$6;
+
 const COMPONENT_NAME$5 = 'MenuButtonContent';
 const CLASSNAME$5 = 'redsift-menu-button-content';
-const DEFAULT_PROPS$5 = {};
 
 /**
  * The MenuButtonContent component.
  */
-const MenuButtonContent = /*#__PURE__*/forwardRef((props, ref) => {
+const BaseMenuButtonContent = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     children,
     className,
@@ -836,44 +962,48 @@ const MenuButtonContent = /*#__PURE__*/forwardRef((props, ref) => {
     refs,
     strategy,
     x,
-    y
+    y,
+    hideInsteadOfClose
   } = usePopoverContext();
   const popoverRef = useMergeRefs([refs.setFloating, ref]);
-  const focusContext = useContext(FocusWithinGroupContext);
+  const appContainerState = useContext(AppContainerContext);
   const theme = useTheme();
-  useEffect(() => {
-    if (focusContext && focusContext.state.delayedAction && focusContext.state.tabStops.length) {
-      focusContext.dispatch(focusContext.state.delayedAction);
-    }
-  }, [focusContext.state.delayedAction, focusContext.state.tabStops.length]);
+  const [[header], [menu], [footer]] = partitionComponents(React.Children.toArray(children), [isComponent('MenuButtonContentHeader'), isComponent('MenuButtonContentMenu'), isComponent('MenuButtonContentFooter')]);
   return /*#__PURE__*/React.createElement(FloatingPortal, {
-    id: "redsift-app-container"
-  }, isOpen && /*#__PURE__*/React.createElement(StyledPopoverContent, _extends({
+    root: appContainerState === null || appContainerState === void 0 ? void 0 : appContainerState.appContainerRef.current
+  }, isOpen || hideInsteadOfClose ? /*#__PURE__*/React.createElement(StyledPopoverContent, _extends({
     $theme: theme,
-    ref: popoverRef,
+    ref: popoverRef
+  }, getFloatingProps(props), {
     style: _objectSpread2({
       position: strategy,
       top: y !== null && y !== void 0 ? y : 0,
-      left: x !== null && x !== void 0 ? x : 0
-    }, style)
-  }, getFloatingProps(props), {
-    className: classNames(PopoverContent.className, MenuButtonContent.className, className)
-  }), /*#__PURE__*/React.createElement(Flexbox, _extends({
+      left: x !== null && x !== void 0 ? x : 0,
+      display: hideInsteadOfClose && !isOpen ? 'none' : 'flex'
+    }, style),
+    className: classNames(PopoverContent.className, BaseMenuButtonContent.className, className)
+  }), !header && !menu && !footer ? /*#__PURE__*/React.createElement(Flexbox, _extends({
     flexDirection: "column",
-    gap: "8px",
-    margin: "8px 0px",
+    gap: "0px",
     width: "100%"
-  }, containerProps), children)));
+  }, containerProps), /*#__PURE__*/React.createElement(MenuButtonContentMenu, null, children)) : /*#__PURE__*/React.createElement(Flexbox, _extends({
+    flexDirection: "column",
+    gap: "0px",
+    width: "100%"
+  }, containerProps), header, menu, footer)) : null);
+});
+BaseMenuButtonContent.className = CLASSNAME$5;
+BaseMenuButtonContent.displayName = COMPONENT_NAME$5;
+const MenuButtonContent = Object.assign(BaseMenuButtonContent, {
+  Header: MenuButtonContentHeader,
+  Menu: MenuButtonContentMenu,
+  Footer: MenuButtonContentFooter
 });
-MenuButtonContent.className = CLASSNAME$5;
-MenuButtonContent.defaultProps = DEFAULT_PROPS$5;
-MenuButtonContent.displayName = COMPONENT_NAME$5;
 
 const MenuButtonContext = /*#__PURE__*/React.createContext(null);
 
 const COMPONENT_NAME$4 = 'MenuButtonTrigger';
 const CLASSNAME$4 = 'redsift-menu-button-trigger';
-const DEFAULT_PROPS$4 = {};
 
 /**
  * The MenuButtonTrigger component.
@@ -977,8 +1107,9 @@ const MenuButtonTrigger = /*#__PURE__*/forwardRef((props, ref) => {
       event.preventDefault();
     } else if (code === 'Enter') {
       if (isOpen && focusContext.state.selectedId) {
-        var _document$getElementB;
+        var _document$getElementB, _document$getElementB2, _document$getElementB3, _document$getElementB4;
         (_document$getElementB = document.getElementById(focusContext.state.selectedId)) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.click();
+        (_document$getElementB2 = document.getElementById(focusContext.state.selectedId)) === null || _document$getElementB2 === void 0 ? void 0 : (_document$getElementB3 = _document$getElementB2.getElementsByTagName('a')) === null || _document$getElementB3 === void 0 ? void 0 : (_document$getElementB4 = _document$getElementB3[0]) === null || _document$getElementB4 === void 0 ? void 0 : _document$getElementB4.click();
       }
     }
   };
@@ -1022,14 +1153,10 @@ const MenuButtonTrigger = /*#__PURE__*/forwardRef((props, ref) => {
   return /*#__PURE__*/React.createElement(React.Fragment, null, renderedChildren);
 });
 MenuButtonTrigger.className = CLASSNAME$4;
-MenuButtonTrigger.defaultProps = DEFAULT_PROPS$4;
 MenuButtonTrigger.displayName = COMPONENT_NAME$4;
 
 const COMPONENT_NAME$3 = 'MenuButton';
 const CLASSNAME$3 = 'redsift-menu-button';
-const DEFAULT_PROPS$3 = {
-  minWidth: 'trigger-width'
-};
 
 /**
  * The MenuButton component.
@@ -1037,25 +1164,26 @@ const DEFAULT_PROPS$3 = {
 const BaseMenuButton = props => {
   const {
     color,
+    description,
+    descriptionProps,
     isDisabled,
     label,
     labelProps,
-    description,
-    descriptionProps,
-    variant,
-    triggerClassName,
+    minWidth = 'trigger-width',
     theme: propsTheme,
+    triggerClassName,
+    variant,
     wrapperProps
   } = props;
   const theme = useTheme(propsTheme);
 
   /** MenuButton context. */
   const state = {
-    theme,
-    isDisabled: isDisabled || false,
     color,
-    variant,
-    triggerClassName
+    isDisabled: isDisabled || false,
+    theme,
+    triggerClassName,
+    variant
   };
   return /*#__PURE__*/React.createElement(ThemeProvider, {
     value: {
@@ -1078,7 +1206,7 @@ const BaseMenuButton = props => {
       trigger: 'MenuButtonTrigger'
     },
     placement: "bottom-end",
-    role: "menu"
+    minWidth: minWidth
   }, props)), description && typeof description === 'string' ? /*#__PURE__*/React.createElement(Text, _extends({
     theme: theme,
     marginTop: "8px",
@@ -1087,7 +1215,6 @@ const BaseMenuButton = props => {
   }, descriptionProps), description) : description ? description : null))));
 };
 BaseMenuButton.className = CLASSNAME$3;
-BaseMenuButton.defaultProps = DEFAULT_PROPS$3;
 BaseMenuButton.displayName = COMPONENT_NAME$3;
 const MenuButton = Object.assign(BaseMenuButton, {
   Trigger: MenuButtonTrigger,
@@ -1096,7 +1223,6 @@ const MenuButton = Object.assign(BaseMenuButton, {
 
 const COMPONENT_NAME$2 = 'SelectContent';
 const CLASSNAME$2 = 'redsift-select-content';
-const DEFAULT_PROPS$2 = {};
 
 /**
  * The SelectContent component.
@@ -1117,6 +1243,7 @@ const SelectContent = /*#__PURE__*/forwardRef((props, ref) => {
     y
   } = usePopoverContext();
   const popoverRef = useMergeRefs([refs.setFloating, ref]);
+  const appContainerState = useContext(AppContainerContext);
   const focusContext = useContext(FocusWithinGroupContext);
   const listboxState = useContext(ListboxContext);
   const theme = useTheme();
@@ -1126,19 +1253,18 @@ const SelectContent = /*#__PURE__*/forwardRef((props, ref) => {
     }
   }, [focusContext.state.delayedAction, focusContext.state.tabStops.length]);
   return /*#__PURE__*/React.createElement(FloatingPortal, {
-    id: "redsift-app-container"
+    root: appContainerState === null || appContainerState === void 0 ? void 0 : appContainerState.appContainerRef.current
   }, isOpen && /*#__PURE__*/React.createElement(StyledPopoverContent, _extends({
     $theme: theme,
-    ref: popoverRef,
+    ref: popoverRef
+  }, getFloatingProps(props), {
     style: _objectSpread2({
       position: strategy,
       top: y !== null && y !== void 0 ? y : 0,
       left: x !== null && x !== void 0 ? x : 0
-    }, style)
-  }, getFloatingProps(props), {
+    }, style),
     className: classNames(PopoverContent.className, SelectContent.className, className),
-    "aria-disabled": listboxState.state.isDisabled,
-    "aria-multiselectable": listboxState.state.selectionMode === 'multiple'
+    "aria-disabled": listboxState.state.isDisabled
   }), /*#__PURE__*/React.createElement(Flexbox, _extends({
     flexDirection: "column",
     gap: "0px",
@@ -1147,14 +1273,12 @@ const SelectContent = /*#__PURE__*/forwardRef((props, ref) => {
   }, containerProps), children)));
 });
 SelectContent.className = CLASSNAME$2;
-SelectContent.defaultProps = DEFAULT_PROPS$2;
 SelectContent.displayName = COMPONENT_NAME$2;
 
 const SelectContext = /*#__PURE__*/React.createContext(null);
 
 const COMPONENT_NAME$1 = 'SelectTrigger';
 const CLASSNAME$1 = 'redsift-select-trigger';
-const DEFAULT_PROPS$1 = {};
 
 /**
  * The SelectTrigger component.
@@ -1310,36 +1434,16 @@ const SelectTrigger = /*#__PURE__*/forwardRef((props, ref) => {
     handleOpen(false);
   }, [listboxState.state]);
   if (isComponent('TextField')(renderedChildren)) {
-    var _props$children, _focusContext$state$a8, _props$inputProps;
+    var _props$children, _focusContext$state$a8, _selectContext$color, _selectContext$varian, _props$inputProps;
     return /*#__PURE__*/React.cloneElement(renderedChildren, _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({}, getReferenceProps(_objectSpread2(_objectSpread2(_objectSpread2({
       ref: triggerRef
     }, props), renderedChildren.props), {}, {
       children: (_props$children = renderedChildren.props.children) !== null && _props$children !== void 0 ? _props$children : ''
     }))), {}, {
-      theme,
-      inputRef,
-      role: 'combobox',
       'aria-activedescendant': isOpen ? (_focusContext$state$a8 = focusContext.state.activedescendant) === null || _focusContext$state$a8 === void 0 ? void 0 : _focusContext$state$a8[0] : undefined,
-      isDisabled: selectContext === null || selectContext === void 0 ? void 0 : selectContext.isDisabled
-    }, (selectContext === null || selectContext === void 0 ? void 0 : selectContext.isInvalid) === true && {
-      color: 'error'
-    }), {}, {
-      onKeyDown: handleKeyDown,
-      onClick: handleClick,
-      isReadOnly: true,
-      isActive: isOpen
-    }, typeof children !== 'function' && (selectContext === null || selectContext === void 0 ? void 0 : selectContext.value) && {
-      value: selectContext.value
-    }), {}, {
-      style: _objectSpread2(_objectSpread2({}, renderedChildren.props.style), {}, {
-        caretColor: 'transparent',
-        cursor: 'pointer'
-      }),
-      inputProps: _objectSpread2(_objectSpread2({}, renderedChildren.props.inputProps), {}, {
-        style: _objectSpread2(_objectSpread2({}, (_props$inputProps = renderedChildren.props.inputProps) === null || _props$inputProps === void 0 ? void 0 : _props$inputProps.style), {}, {
-          cursor: 'pointer'
-        })
-      }),
+      className: classNames(renderedChildren.props.className, selectContext === null || selectContext === void 0 ? void 0 : selectContext.triggerClassName),
+      color: (_selectContext$color = selectContext === null || selectContext === void 0 ? void 0 : selectContext.color) !== null && _selectContext$color !== void 0 ? _selectContext$color : renderedChildren.props.color,
+      inputRef,
       internal: (value, isDisabled, isInvalid, isRequired) => {
         return /*#__PURE__*/React.createElement(React.Fragment, null, typeof renderedChildren.props.internal === 'function' ? renderedChildren.props.internal(value, isDisabled, isInvalid, isRequired) : renderedChildren.props.internal, hideExpandButton ? null : /*#__PURE__*/React.createElement(Icon, {
           color: isDisabled ? 'no-data' : 'question',
@@ -1350,62 +1454,88 @@ const SelectTrigger = /*#__PURE__*/forwardRef((props, ref) => {
             cursor: 'pointer'
           }
         }));
-      }
+      },
+      isActive: isOpen,
+      isDisabled: selectContext === null || selectContext === void 0 ? void 0 : selectContext.isDisabled,
+      isReadOnly: true,
+      theme,
+      role: 'combobox',
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      style: _objectSpread2(_objectSpread2({}, renderedChildren.props.style), {}, {
+        caretColor: 'transparent',
+        cursor: 'pointer'
+      }),
+      variant: (_selectContext$varian = selectContext === null || selectContext === void 0 ? void 0 : selectContext.variant) !== null && _selectContext$varian !== void 0 ? _selectContext$varian : renderedChildren.props.variant
+    }, (selectContext === null || selectContext === void 0 ? void 0 : selectContext.isInvalid) === true && {
+      color: 'error'
+    }), typeof children !== 'function' && (selectContext === null || selectContext === void 0 ? void 0 : selectContext.value) && {
+      value: selectContext.value
+    }), {}, {
+      inputProps: _objectSpread2(_objectSpread2({}, renderedChildren.props.inputProps), {}, {
+        style: _objectSpread2(_objectSpread2({}, (_props$inputProps = renderedChildren.props.inputProps) === null || _props$inputProps === void 0 ? void 0 : _props$inputProps.style), {}, {
+          cursor: 'pointer'
+        })
+      })
     }));
   } else if (isComponent('Button')(renderedChildren)) {
-    var _props$children2, _focusContext$state$a9, _props$rightIcon, _props$rightIconProps;
-    return /*#__PURE__*/React.cloneElement(renderedChildren, _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({}, getReferenceProps(_objectSpread2(_objectSpread2(_objectSpread2({
+    var _props$children2, _focusContext$state$a9, _props$ariaLabel, _selectContext$color2, _props$rightIcon, _props$rightIconProps, _selectContext$varian2;
+    const children = renderedChildren.props.children;
+    const label = typeof children === 'string' ? children : children === null || children === void 0 ? void 0 : children.textContent;
+    return /*#__PURE__*/React.cloneElement(renderedChildren, _objectSpread2(_objectSpread2(_objectSpread2({}, getReferenceProps(_objectSpread2(_objectSpread2(_objectSpread2({
       ref: triggerRef
     }, props), renderedChildren.props), {}, {
       children: (_props$children2 = renderedChildren.props.children) !== null && _props$children2 !== void 0 ? _props$children2 : ''
     }))), {}, {
-      theme,
-      role: 'combobox',
       'aria-activedescendant': isOpen ? (_focusContext$state$a9 = focusContext.state.activedescendant) === null || _focusContext$state$a9 === void 0 ? void 0 : _focusContext$state$a9[0] : undefined,
-      isDisabled: selectContext === null || selectContext === void 0 ? void 0 : selectContext.isDisabled
-    }, (selectContext === null || selectContext === void 0 ? void 0 : selectContext.isInvalid) === true && {
-      color: 'error'
-    }), {}, {
-      onKeyDown: handleKeyDown,
+      'aria-label': (_props$ariaLabel = renderedChildren.props['aria-label']) !== null && _props$ariaLabel !== void 0 ? _props$ariaLabel : label,
+      className: classNames(renderedChildren.props.className, selectContext === null || selectContext === void 0 ? void 0 : selectContext.triggerClassName),
+      color: (_selectContext$color2 = selectContext === null || selectContext === void 0 ? void 0 : selectContext.color) !== null && _selectContext$color2 !== void 0 ? _selectContext$color2 : renderedChildren.props.color,
+      isActive: isOpen,
+      isDisabled: selectContext === null || selectContext === void 0 ? void 0 : selectContext.isDisabled,
       onClick: handleClick,
-      isActive: isOpen
-    }, typeof children !== 'function' && (selectContext === null || selectContext === void 0 ? void 0 : selectContext.value) && {
-      children: selectContext.value
-    }), {}, {
+      onKeyDown: handleKeyDown,
       rightIcon: (_props$rightIcon = renderedChildren.props.rightIcon) !== null && _props$rightIcon !== void 0 ? _props$rightIcon : mdiChevronDown,
       rightIconProps: renderedChildren.props.rightIcon ? renderedChildren.props.rightIconProps : (_props$rightIconProps = renderedChildren.props.rightIconProps) !== null && _props$rightIconProps !== void 0 ? _props$rightIconProps : {
         style: {
           transition: 'transform 300ms ease-out',
           transform: `rotate(${isOpen ? '-180deg' : '0'})`
         }
-      }
+      },
+      role: 'combobox',
+      theme,
+      variant: (_selectContext$varian2 = selectContext === null || selectContext === void 0 ? void 0 : selectContext.variant) !== null && _selectContext$varian2 !== void 0 ? _selectContext$varian2 : renderedChildren.props.variant
+    }, (selectContext === null || selectContext === void 0 ? void 0 : selectContext.isInvalid) === true && {
+      color: 'error'
+    }), typeof children !== 'function' && (selectContext === null || selectContext === void 0 ? void 0 : selectContext.value) && {
+      children: selectContext.value
     }));
   }
   return /*#__PURE__*/React.createElement(React.Fragment, null, renderedChildren);
 });
 SelectTrigger.className = CLASSNAME$1;
-SelectTrigger.defaultProps = DEFAULT_PROPS$1;
 SelectTrigger.displayName = COMPONENT_NAME$1;
 
 const COMPONENT_NAME = 'Select';
 const CLASSNAME = 'redsift-select';
-const DEFAULT_PROPS = {
-  minWidth: 'trigger-width'
-};
 
 /**
  * The Select component.
  */
 const BaseSelect = props => {
   const {
+    color,
     defaultValue,
-    isDisabled,
-    onChange,
-    value,
     description,
     descriptionProps,
+    isDisabled,
     isInvalid,
+    minWidth = 'trigger-width',
+    onChange,
     theme: propsTheme,
+    triggerClassName,
+    value,
+    variant,
     wrapperProps
   } = props;
   const theme = useTheme(propsTheme);
@@ -1436,8 +1566,7 @@ const BaseSelect = props => {
 
   /** Select context. */
   const state = {
-    theme,
-    value: selectedValue,
+    color,
     isDisabled: isDisabled || false,
     isInvalid: isInvalid || false,
     setValue(value) {
@@ -1449,7 +1578,11 @@ const BaseSelect = props => {
       if (value !== previousValue && onChange) {
         onChange(value);
       }
-    }
+    },
+    theme,
+    triggerClassName,
+    value: selectedValue,
+    variant
   };
   return /*#__PURE__*/React.createElement(ThemeProvider, {
     value: {
@@ -1473,7 +1606,8 @@ const BaseSelect = props => {
       trigger: 'SelectTrigger'
     },
     placement: "bottom-start",
-    role: "listbox"
+    role: "listbox",
+    minWidth: minWidth
   }, props)), description && typeof description === 'string' ? /*#__PURE__*/React.createElement(Text, _extends({
     theme: theme,
     marginTop: "8px",
@@ -1482,12 +1616,11 @@ const BaseSelect = props => {
   }, descriptionProps), description) : description ? description : null)))));
 };
 BaseSelect.className = CLASSNAME;
-BaseSelect.defaultProps = DEFAULT_PROPS;
 BaseSelect.displayName = COMPONENT_NAME;
 const Select = Object.assign(BaseSelect, {
   Trigger: SelectTrigger,
   Content: SelectContent
 });
 
-export { BaseCombobox, BaseComboboxContent, BaseMenuButton, BaseSelect, Combobox, ComboboxContent, ComboboxContentFooter, ComboboxContentHeader, ComboboxContentListbox, ComboboxSelectionMode, ComboboxTrigger, ComboboxVariant, MenuButton, MenuButtonContent, MenuButtonTrigger, Select, SelectContent, SelectTrigger };
+export { BaseCombobox, BaseComboboxContent, BaseMenuButton, BaseMenuButtonContent, BaseSelect, Combobox, ComboboxContent, ComboboxContentFooter, ComboboxContentHeader, ComboboxContentListbox, ComboboxSelectionMode, ComboboxTrigger, ComboboxVariant, MenuButton, MenuButtonContent, MenuButtonContentFooter, MenuButtonContentHeader, MenuButtonContentMenu, MenuButtonTrigger, Select, SelectContent, SelectTrigger };
 //# sourceMappingURL=index.js.map