@redsift/pickers 8.1.0

package/index.js

@@ -0,0 +1,874 @@
+import React, { forwardRef, useContext, useEffect, useState, useReducer, useMemo } from 'react';
+import { usePopoverContext, useMergeRefs, FloatingPortal, StyledPopoverContent, PopoverContent, Popover } from '@redsift/popovers';
+import { baseContainer, FocusWithinGroupContext, Flexbox, ListboxContext, partitionComponents, isComponent, IconButton, FocusWithinGroupActionType, EventKey, ListboxActionType, ListboxReducer, FocusWithinGroup, Text } from '@redsift/design-system';
+import { useLocalizedStringFormatter } from '@react-aria/i18n';
+import { mdiUnfoldMoreHorizontal } from '@redsift/icons';
+import classNames from 'classnames';
+import styled from 'styled-components';
+
+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    enumerableOnly && (symbols = symbols.filter(function (sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    })), keys.push.apply(keys, symbols);
+  }
+  return keys;
+}
+function _objectSpread2(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = null != arguments[i] ? arguments[i] : {};
+    i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
+      _defineProperty(target, key, source[key]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
+      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    });
+  }
+  return target;
+}
+function _defineProperty(obj, key, value) {
+  key = _toPropertyKey(key);
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
+}
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+  return target;
+}
+function _objectWithoutProperties(source, excluded) {
+  if (source == null) return {};
+  var target = _objectWithoutPropertiesLoose(source, excluded);
+  var key, i;
+  if (Object.getOwnPropertySymbols) {
+    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+    for (i = 0; i < sourceSymbolKeys.length; i++) {
+      key = sourceSymbolKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+      target[key] = source[key];
+    }
+  }
+  return target;
+}
+function _toPrimitive(input, hint) {
+  if (typeof input !== "object" || input === null) return input;
+  var prim = input[Symbol.toPrimitive];
+  if (prim !== undefined) {
+    var res = prim.call(input, hint || "default");
+    if (typeof res !== "object") return res;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return (hint === "string" ? String : Number)(input);
+}
+function _toPropertyKey(arg) {
+  var key = _toPrimitive(arg, "string");
+  return typeof key === "symbol" ? key : String(key);
+}
+
+/**
+ * Component style.
+ */
+const StyledComboboxContentHeader = styled.div`
+  ${baseContainer}
+`;
+
+const _excluded$3 = ["children", "className"];
+const COMPONENT_NAME$8 = 'ComboboxContentHeader';
+const CLASSNAME$8 = 'redsift-combobox-content-header';
+const DEFAULT_PROPS$8 = {};
+
+/**
+ * The ComboboxContentHeader component.
+ */
+const ComboboxContentHeader = /*#__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),
+    ref: ref
+  }), children);
+});
+ComboboxContentHeader.className = CLASSNAME$8;
+ComboboxContentHeader.defaultProps = DEFAULT_PROPS$8;
+ComboboxContentHeader.displayName = COMPONENT_NAME$8;
+
+/**
+ * Component style.
+ */
+const StyledComboboxContentFooter = styled.div`
+  ${baseContainer}
+`;
+
+const _excluded$2 = ["children", "className"];
+const COMPONENT_NAME$7 = 'ComboboxContentFooter';
+const CLASSNAME$7 = 'redsift-combobox-content-footer';
+const DEFAULT_PROPS$7 = {};
+
+/**
+ * The ComboboxContentFooter component.
+ */
+const ComboboxContentFooter = /*#__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),
+    ref: ref
+  }), children);
+});
+ComboboxContentFooter.className = CLASSNAME$7;
+ComboboxContentFooter.defaultProps = DEFAULT_PROPS$7;
+ComboboxContentFooter.displayName = COMPONENT_NAME$7;
+
+const _excluded$1 = ["children", "className"];
+const COMPONENT_NAME$6 = 'ComboboxContentListbox';
+const CLASSNAME$6 = 'redsift-combobox-content-listbox';
+const DEFAULT_PROPS$6 = {};
+
+/**
+ * The ComboboxContentListbox component.
+ */
+const ComboboxContentListbox = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      children,
+      className
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded$1);
+  const focusContext = useContext(FocusWithinGroupContext);
+  useEffect(() => {
+    if (focusContext && focusContext.state.delayedAction && focusContext.state.tabStops.length) {
+      focusContext.dispatch(focusContext.state.delayedAction);
+    }
+  });
+  return /*#__PURE__*/React.createElement(Flexbox, _extends({
+    className: classNames(ComboboxContentListbox.className, className)
+  }, forwardedProps, {
+    ref: ref,
+    flexDirection: "column",
+    gap: "0px",
+    margin: "8px 0px",
+    style: {
+      outline: 'none'
+    },
+    width: "100%"
+  }), children);
+});
+ComboboxContentListbox.className = CLASSNAME$6;
+ComboboxContentListbox.defaultProps = DEFAULT_PROPS$6;
+ComboboxContentListbox.displayName = COMPONENT_NAME$6;
+
+const COMPONENT_NAME$5 = 'ComboboxContent';
+const CLASSNAME$5 = 'redsift-combobox-content';
+const DEFAULT_PROPS$5 = {};
+
+/**
+ * The ComboboxContent component.
+ */
+const BaseComboboxContent = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    children,
+    className,
+    style,
+    shouldStayOpenEvenIfEmpty
+  } = props;
+  const {
+    getFloatingProps,
+    isOpen,
+    handleOpen,
+    refs,
+    strategy,
+    x,
+    y
+  } = usePopoverContext();
+  const popoverRef = useMergeRefs([refs.setFloating, ref]);
+  const listboxState = useContext(ListboxContext);
+  const focusContext = useContext(FocusWithinGroupContext);
+  const [[header], [listbox], [footer]] = partitionComponents(React.Children.toArray(children), [isComponent('ComboboxContentHeader'), isComponent('ComboboxContentListbox'), isComponent('ComboboxContentFooter')]);
+  useEffect(() => {
+    var _focusContext$state$f, _focusContext$state$f2;
+    if (isOpen && (_focusContext$state$f = focusContext.state.filter) !== null && _focusContext$state$f !== void 0 && (_focusContext$state$f2 = _focusContext$state$f.value) !== null && _focusContext$state$f2 !== void 0 && _focusContext$state$f2.length && focusContext.state.tabStops.length === 0 && !shouldStayOpenEvenIfEmpty) {
+      handleOpen(false);
+    }
+  }, [focusContext.state]);
+  return /*#__PURE__*/React.createElement(FloatingPortal, {
+    id: "redsift-app-container"
+  }, isOpen && /*#__PURE__*/React.createElement(StyledPopoverContent, _extends({
+    ref: popoverRef,
+    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, BaseComboboxContent.className, className),
+    "aria-disabled": listboxState.state.isDisabled,
+    "aria-multiselectable": listboxState.state.selectionMode === 'multiple'
+  }), /*#__PURE__*/React.createElement(Flexbox, {
+    flexDirection: "column",
+    gap: "0px",
+    width: "100%"
+  }, header, listbox, footer)));
+});
+BaseComboboxContent.className = CLASSNAME$5;
+BaseComboboxContent.defaultProps = DEFAULT_PROPS$5;
+BaseComboboxContent.displayName = COMPONENT_NAME$5;
+const ComboboxContent = Object.assign(BaseComboboxContent, {
+  Header: ComboboxContentHeader,
+  Listbox: ComboboxContentListbox,
+  Footer: ComboboxContentFooter
+});
+
+var collapse$1 = "Collapse";
+var expand$1 = "Expand";
+var enUS = {
+	collapse: collapse$1,
+	expand: expand$1
+};
+
+var collapse = "Réduire";
+var expand = "Développer";
+var frFR = {
+	collapse: collapse,
+	expand: expand
+};
+
+var intlMessages = {
+  'en-US': enUS,
+  'fr-FR': frFR
+};
+
+const ComboboxContext = /*#__PURE__*/React.createContext(null);
+
+const _excluded = ["aria-controls", "aria-expanded", "aria-haspopup", "role"];
+const COMPONENT_NAME$4 = 'ComboboxTrigger';
+const CLASSNAME$4 = 'redsift-combobox-trigger';
+const DEFAULT_PROPS$4 = {};
+
+/**
+ * The ComboboxTrigger component.
+ */
+const ComboboxTrigger = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    children,
+    hideExpandButton,
+    openOnFocus
+  } = props;
+  const stringFormatter = useLocalizedStringFormatter(intlMessages);
+  const {
+    getReferenceProps,
+    isOpen,
+    handleOpen: handleOpenPopover,
+    refs
+  } = usePopoverContext();
+  const childrenRef = children.ref;
+  const triggerRef = useMergeRefs([refs.setReference, ref, childrenRef]);
+  const focusContext = useContext(FocusWithinGroupContext);
+  const comboboxState = useContext(ComboboxContext);
+  const listboxState = useContext(ListboxContext);
+  const renderedChildren = typeof children === 'function' ? children({
+    value: comboboxState === null || comboboxState === void 0 ? void 0 : comboboxState.value,
+    isOpen
+  }) : children;
+  const handleChange = value => {
+    focusContext.dispatch({
+      type: FocusWithinGroupActionType.FILTER_LIST,
+      payload: {
+        filter: _objectSpread2({
+          value: value || ''
+        }, comboboxState === null || comboboxState === void 0 ? void 0 : comboboxState.filter)
+      }
+    });
+    comboboxState === null || comboboxState === void 0 ? void 0 : comboboxState.setValue(value);
+  };
+  const handleKeyDown = event => {
+    const code = event.code;
+    if (code === 'Escape' || code === 'Tab') {
+      if (isOpen) {
+        handleOpenPopover(false);
+      }
+    }
+    if (/^.$/u.test(event.key) || code === 'Backspace') {
+      if (!isOpen) {
+        handleOpenPopover(true);
+      }
+    }
+    if (code === 'ArrowDown') {
+      if (!isOpen) {
+        handleOpenPopover(true);
+      }
+      focusContext.dispatch({
+        type: FocusWithinGroupActionType.DELAY_ACTION,
+        payload: {
+          type: FocusWithinGroupActionType.KEY_DOWN_ON_LIST,
+          payload: {
+            key: focusContext.state.selectedId !== null ? EventKey.ArrowDown : EventKey.Home,
+            ctrlKey: event.ctrlKey
+          }
+        }
+      });
+      event.preventDefault();
+    }
+    if (code === 'ArrowUp') {
+      if (!isOpen) {
+        handleOpenPopover(true);
+      }
+      focusContext.dispatch({
+        type: FocusWithinGroupActionType.DELAY_ACTION,
+        payload: {
+          type: FocusWithinGroupActionType.KEY_DOWN_ON_LIST,
+          payload: {
+            key: focusContext.state.selectedId !== null ? EventKey.ArrowUp : EventKey.End,
+            ctrlKey: event.ctrlKey
+          }
+        }
+      });
+      event.preventDefault();
+    }
+    if (code === 'Enter') {
+      if (isOpen && focusContext.state.selectedId) {
+        if (listboxState.state.selectionMode === 'multiple') {
+          var _focusContext$state$a, _focusContext$state$a2;
+          listboxState.dispatch({
+            type: ListboxActionType.TOGGLE,
+            payload: {
+              value: (_focusContext$state$a = (_focusContext$state$a2 = focusContext.state.activedescendant) === null || _focusContext$state$a2 === void 0 ? void 0 : _focusContext$state$a2[1]) !== null && _focusContext$state$a !== void 0 ? _focusContext$state$a : '',
+              activedescendant: focusContext.state.activedescendant
+            }
+          });
+        } else {
+          var _focusContext$state$a3, _focusContext$state$a4;
+          listboxState.dispatch({
+            type: ListboxActionType.SET,
+            payload: {
+              values: [(_focusContext$state$a3 = (_focusContext$state$a4 = focusContext.state.activedescendant) === null || _focusContext$state$a4 === void 0 ? void 0 : _focusContext$state$a4[1]) !== null && _focusContext$state$a3 !== void 0 ? _focusContext$state$a3 : ''],
+              activedescendant: focusContext.state.activedescendant
+            }
+          });
+        }
+      }
+    }
+  };
+  const handleOpen = () => {
+    if (isOpen) {
+      handleOpenPopover(false);
+    } else {
+      var _focusContext$state$a5, _focusContext$state$a6;
+      handleOpenPopover(true);
+      focusContext.dispatch({
+        type: FocusWithinGroupActionType.DELAY_ACTION,
+        payload: {
+          type: FocusWithinGroupActionType.FOCUS_ON_LIST,
+          payload: {
+            id: (_focusContext$state$a5 = (_focusContext$state$a6 = focusContext.state.activedescendant) === null || _focusContext$state$a6 === void 0 ? void 0 : _focusContext$state$a6[0]) !== null && _focusContext$state$a5 !== void 0 ? _focusContext$state$a5 : ''
+          }
+        }
+      });
+    }
+  };
+  useEffect(() => {
+    comboboxState === null || comboboxState === void 0 ? void 0 : comboboxState.setValue(listboxState.state.selectedValues[0]);
+    handleOpenPopover(false);
+  }, [listboxState.state]);
+  if (isComponent('TextField')(renderedChildren)) {
+    var _focusContext$state$a7;
+    const _getReferenceProps = getReferenceProps(_objectSpread2(_objectSpread2({
+        ref: triggerRef
+      }, props), renderedChildren.props)),
+      {
+        'aria-controls': ariaControls,
+        'aria-expanded': ariaExpanded,
+        'aria-haspopup': ariaHaspopup,
+        role
+      } = _getReferenceProps,
+      forwardedProps = _objectWithoutProperties(_getReferenceProps, _excluded);
+    return /*#__PURE__*/React.cloneElement(renderedChildren, _objectSpread2(_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
+      },
+      isDisabled: comboboxState === null || comboboxState === void 0 ? void 0 : comboboxState.isDisabled,
+      isInvalid: comboboxState === null || comboboxState === void 0 ? void 0 : comboboxState.isInvalid,
+      onChange: handleChange
+    }, openOnFocus && {
+      onFocus: handleOpen
+    }), {}, {
+      value: comboboxState === null || comboboxState === void 0 ? void 0 : comboboxState.value,
+      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, {
+          "aria-label": stringFormatter.format(!isOpen ? 'expand' : 'collapse'),
+          color: "question",
+          icon: mdiUnfoldMoreHorizontal,
+          onClick: handleOpen,
+          isDisabled: isDisabled,
+          tabIndex: -1
+        }));
+      }
+    }));
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, renderedChildren);
+});
+ComboboxTrigger.className = CLASSNAME$4;
+ComboboxTrigger.defaultProps = DEFAULT_PROPS$4;
+ComboboxTrigger.displayName = COMPONENT_NAME$4;
+
+const COMPONENT_NAME$3 = 'Combobox';
+const CLASSNAME$3 = 'redsift-combobox';
+const DEFAULT_PROPS$3 = {
+  filter: {
+    type: 'startsWith',
+    caseSensitive: false
+  },
+  minWidth: 'trigger-width'
+};
+
+/**
+ * The Combobox component.
+ */
+const BaseCombobox = props => {
+  const {
+    defaultValue,
+    description,
+    descriptionProps,
+    filter,
+    isDisabled,
+    isInvalid,
+    onChange,
+    value
+  } = props;
+  const [selectedValue, setValue] = useState(value || defaultValue || '');
+  useEffect(() => {
+    if (value) {
+      state.setValue(value);
+    }
+  }, [value]);
+
+  /** Listbox context */
+  const [listboxState, listboxDispatch] = useReducer(ListboxReducer, {
+    isDisabled,
+    selectedValues: [selectedValue]
+  });
+  const listboxContext = useMemo(() => ({
+    state: listboxState,
+    dispatch: listboxDispatch
+  }), [listboxState]);
+
+  /** Combobox context. */
+  const state = {
+    filter,
+    value: selectedValue,
+    isDisabled: isDisabled || false,
+    isInvalid: isInvalid || false,
+    setValue(value) {
+      if (isDisabled) {
+        return;
+      }
+      const previousValue = selectedValue;
+      setValue(value);
+      if (value !== previousValue && onChange) {
+        onChange(value);
+      }
+    }
+  };
+  return /*#__PURE__*/React.createElement(FocusWithinGroup, {
+    focusType: "virtual-focus",
+    focusOnInit: false
+  }, /*#__PURE__*/React.createElement(ComboboxContext.Provider, {
+    value: state
+  }, /*#__PURE__*/React.createElement(ListboxContext.Provider, {
+    value: listboxContext
+  }, /*#__PURE__*/React.createElement(Flexbox, {
+    flexDirection: "column",
+    alignItems: "flex-start",
+    gap: "0px"
+  }, /*#__PURE__*/React.createElement(Popover, _extends({
+    overrideDisplayName: {
+      content: 'ComboboxContent',
+      trigger: 'ComboboxTrigger'
+    },
+    placement: "bottom-start",
+    role: "listbox"
+  }, props)), description && typeof description === 'string' ? /*#__PURE__*/React.createElement(Text, _extends({
+    variant: "caption",
+    color: isInvalid ? 'error' : 'darkgrey'
+  }, descriptionProps), description) : description ? description : null))));
+};
+BaseCombobox.className = CLASSNAME$3;
+BaseCombobox.defaultProps = DEFAULT_PROPS$3;
+BaseCombobox.displayName = COMPONENT_NAME$3;
+const Combobox = Object.assign(BaseCombobox, {
+  Trigger: ComboboxTrigger,
+  Content: ComboboxContent
+});
+
+const COMPONENT_NAME$2 = 'SelectContent';
+const CLASSNAME$2 = 'redsift-select-content';
+const DEFAULT_PROPS$2 = {};
+
+/**
+ * The SelectContent component.
+ */
+const SelectContent = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    children,
+    className,
+    style
+  } = props;
+  const {
+    getFloatingProps,
+    isOpen,
+    refs,
+    strategy,
+    x,
+    y
+  } = usePopoverContext();
+  const popoverRef = useMergeRefs([refs.setFloating, ref]);
+  const focusContext = useContext(FocusWithinGroupContext);
+  const listboxState = useContext(ListboxContext);
+  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(FloatingPortal, {
+    id: "redsift-app-container"
+  }, isOpen && /*#__PURE__*/React.createElement(StyledPopoverContent, _extends({
+    ref: popoverRef,
+    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, SelectContent.className, className),
+    "aria-disabled": listboxState.state.isDisabled,
+    "aria-multiselectable": listboxState.state.selectionMode === 'multiple'
+  }), /*#__PURE__*/React.createElement(Flexbox, {
+    flexDirection: "column",
+    gap: "8px",
+    margin: "8px 0px",
+    width: "100%"
+  }, 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.
+ */
+const SelectTrigger = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    children
+  } = props;
+  const {
+    getReferenceProps,
+    isOpen,
+    handleOpen,
+    refs
+  } = usePopoverContext();
+  const childrenRef = children.ref;
+  const triggerRef = useMergeRefs([refs.setReference, ref, childrenRef]);
+  const focusContext = useContext(FocusWithinGroupContext);
+  const selectContext = useContext(SelectContext);
+  const listboxState = useContext(ListboxContext);
+  const renderedChildren = typeof children === 'function' ? children({
+    value: selectContext === null || selectContext === void 0 ? void 0 : selectContext.value,
+    isOpen
+  }) : children;
+  const handleKeyDown = event => {
+    const code = event.code;
+    if (code === 'Escape') {
+      if (isOpen) {
+        handleOpen(false);
+      }
+    } else if (code === 'ArrowDown') {
+      var _focusContext$state$a;
+      if (!isOpen) {
+        handleOpen(true);
+      }
+      if (focusContext.state.selectedId !== null) {
+        focusContext.dispatch({
+          type: FocusWithinGroupActionType.DELAY_ACTION,
+          payload: {
+            type: FocusWithinGroupActionType.KEY_DOWN_ON_LIST,
+            payload: {
+              key: EventKey.ArrowDown,
+              ctrlKey: event.ctrlKey
+            }
+          }
+        });
+      } else if (!((_focusContext$state$a = focusContext.state.activedescendant) !== null && _focusContext$state$a !== void 0 && _focusContext$state$a[0])) {
+        focusContext.dispatch({
+          type: FocusWithinGroupActionType.DELAY_ACTION,
+          payload: {
+            type: FocusWithinGroupActionType.KEY_DOWN_ON_LIST,
+            payload: {
+              key: EventKey.Home,
+              ctrlKey: event.ctrlKey
+            }
+          }
+        });
+      } else {
+        var _focusContext$state$a2, _focusContext$state$a3;
+        focusContext.dispatch({
+          type: FocusWithinGroupActionType.DELAY_ACTION,
+          payload: {
+            type: FocusWithinGroupActionType.FOCUS_ON_LIST,
+            payload: {
+              id: (_focusContext$state$a2 = (_focusContext$state$a3 = focusContext.state.activedescendant) === null || _focusContext$state$a3 === void 0 ? void 0 : _focusContext$state$a3[0]) !== null && _focusContext$state$a2 !== void 0 ? _focusContext$state$a2 : ''
+            }
+          }
+        });
+      }
+      event.preventDefault();
+    } else if (code === 'ArrowUp') {
+      if (!isOpen) {
+        handleOpen(true);
+      }
+      focusContext.dispatch({
+        type: FocusWithinGroupActionType.DELAY_ACTION,
+        payload: {
+          type: FocusWithinGroupActionType.KEY_DOWN_ON_LIST,
+          payload: {
+            key: focusContext.state.selectedId !== null ? EventKey.ArrowUp : EventKey.Home,
+            ctrlKey: event.ctrlKey
+          }
+        }
+      });
+      event.preventDefault();
+    } else if (code === 'Home') {
+      if (!isOpen) {
+        handleOpen(true);
+      }
+      focusContext.dispatch({
+        type: FocusWithinGroupActionType.DELAY_ACTION,
+        payload: {
+          type: FocusWithinGroupActionType.KEY_DOWN_ON_LIST,
+          payload: {
+            key: EventKey.Home,
+            ctrlKey: event.ctrlKey
+          }
+        }
+      });
+      event.preventDefault();
+    } else if (code === 'End') {
+      if (!isOpen) {
+        handleOpen(true);
+      }
+      focusContext.dispatch({
+        type: FocusWithinGroupActionType.DELAY_ACTION,
+        payload: {
+          type: FocusWithinGroupActionType.KEY_DOWN_ON_LIST,
+          payload: {
+            key: EventKey.End,
+            ctrlKey: event.ctrlKey
+          }
+        }
+      });
+      event.preventDefault();
+    } else if (code === 'Enter') {
+      if (isOpen && focusContext.state.selectedId) {
+        if (listboxState.state.selectionMode === 'multiple') {
+          var _focusContext$state$a4, _focusContext$state$a5;
+          listboxState.dispatch({
+            type: ListboxActionType.TOGGLE,
+            payload: {
+              value: (_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 {
+          var _focusContext$state$a6, _focusContext$state$a7;
+          listboxState.dispatch({
+            type: ListboxActionType.SET,
+            payload: {
+              values: [(_focusContext$state$a6 = (_focusContext$state$a7 = focusContext.state.activedescendant) === null || _focusContext$state$a7 === void 0 ? void 0 : _focusContext$state$a7[1]) !== null && _focusContext$state$a6 !== void 0 ? _focusContext$state$a6 : ''],
+              activedescendant: focusContext.state.activedescendant
+            }
+          });
+        }
+      }
+    }
+  };
+  const handleClick = event => {
+    event.preventDefault();
+    if (isOpen) {
+      handleOpen(false);
+    } else {
+      var _focusContext$state$a8, _focusContext$state$a9;
+      handleOpen(true);
+      focusContext.dispatch({
+        type: FocusWithinGroupActionType.DELAY_ACTION,
+        payload: {
+          type: FocusWithinGroupActionType.FOCUS_ON_LIST,
+          payload: {
+            id: (_focusContext$state$a8 = (_focusContext$state$a9 = focusContext.state.activedescendant) === null || _focusContext$state$a9 === void 0 ? void 0 : _focusContext$state$a9[0]) !== null && _focusContext$state$a8 !== void 0 ? _focusContext$state$a8 : ''
+          }
+        }
+      });
+    }
+  };
+  useEffect(() => {
+    selectContext === null || selectContext === void 0 ? void 0 : selectContext.setValue(listboxState.state.selectedValues[0]);
+    handleOpen(false);
+  }, [listboxState.state]);
+  if (isComponent('Button')(renderedChildren)) {
+    var _focusContext$state$a10;
+    return /*#__PURE__*/React.cloneElement(renderedChildren, _objectSpread2(_objectSpread2(_objectSpread2({}, getReferenceProps(_objectSpread2(_objectSpread2({
+      ref: triggerRef
+    }, props), renderedChildren.props))), {}, {
+      role: 'combobox',
+      'aria-activedescendant': isOpen ? (_focusContext$state$a10 = focusContext.state.activedescendant) === null || _focusContext$state$a10 === void 0 ? void 0 : _focusContext$state$a10[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,
+      isActive: isOpen
+    }, 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 {
+    defaultValue,
+    isDisabled,
+    onChange,
+    value,
+    label,
+    labelProps,
+    description,
+    descriptionProps,
+    isInvalid
+  } = props;
+  const [selectedValue, setValue] = useState(value || defaultValue || '');
+  useEffect(() => {
+    if (value) {
+      state.setValue(value);
+    }
+  }, [value]);
+
+  /** Listbox context */
+  const [listboxState, listboxDispatch] = useReducer(ListboxReducer, {
+    isDisabled,
+    selectedValues: [selectedValue]
+  });
+  const listboxContext = useMemo(() => ({
+    state: listboxState,
+    dispatch: listboxDispatch
+  }), [listboxState]);
+
+  /** Select context. */
+  const state = {
+    value: selectedValue,
+    isDisabled: isDisabled || false,
+    isInvalid: isInvalid || false,
+    setValue(value) {
+      if (isDisabled) {
+        return;
+      }
+      const previousValue = selectedValue;
+      setValue(value);
+      if (value !== previousValue && onChange) {
+        onChange(value);
+      }
+    }
+  };
+  return /*#__PURE__*/React.createElement(FocusWithinGroup, {
+    focusType: "virtual-focus",
+    focusOnInit: false
+  }, /*#__PURE__*/React.createElement(SelectContext.Provider, {
+    value: state
+  }, /*#__PURE__*/React.createElement(ListboxContext.Provider, {
+    value: listboxContext
+  }, /*#__PURE__*/React.createElement(Flexbox, {
+    flexDirection: "column",
+    alignItems: "flex-start",
+    gap: "0px"
+  }, label && typeof label === 'string' ? /*#__PURE__*/React.createElement(Text, _extends({
+    color: isInvalid ? 'error' : 'black'
+  }, labelProps), label) : label ? label : null, /*#__PURE__*/React.createElement(Popover, _extends({
+    overrideDisplayName: {
+      content: 'SelectContent',
+      trigger: 'SelectTrigger'
+    },
+    placement: "bottom-start",
+    role: "listbox"
+  }, props)), description && typeof description === 'string' ? /*#__PURE__*/React.createElement(Text, _extends({
+    variant: "caption",
+    color: isInvalid ? 'error' : 'darkgrey'
+  }, 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, BaseSelect, Combobox, ComboboxContent, ComboboxContentFooter, ComboboxContentHeader, ComboboxContentListbox, ComboboxTrigger, Select, SelectContent, SelectTrigger };
+//# sourceMappingURL=index.js.map