@sitecore/sc-contenthub-blok 1.0.32 → 2.0.1

package/node_modules/@mui/material/OutlinedInput/OutlinedInput.mjs

@@ -12,6 +12,7 @@ import memoTheme from "../utils/memoTheme.mjs";
 import createSimplePaletteValueFilter from "../utils/createSimplePaletteValueFilter.mjs";
 import { useDefaultProps } from "../DefaultPropsProvider/index.mjs";
 import outlinedInputClasses, { getOutlinedInputUtilityClass } from "./outlinedInputClasses.mjs";
+import selectClasses from "../Select/selectClasses.mjs";
 import InputBase, { rootOverridesResolver as inputBaseRootOverridesResolver, inputOverridesResolver as inputBaseInputOverridesResolver, InputBaseRoot, InputBaseInput } from "../InputBase/InputBase.mjs";
 import useSlot from "../utils/useSlot.mjs";
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
@@ -87,7 +88,12 @@ const OutlinedInputRoot = styled(InputBaseRoot, {
         ownerState
       }) => ownerState.endAdornment,
       style: {
-        paddingRight: 14
+        // use CSS variable to keep specificity
+        '--_trailingPad': '14px',
+        paddingRight: 'var(--_trailingPad)',
+        [`&.${selectClasses.root}`]: {
+          '--_trailingPad': '0px'
+        }
       }
     }, {
       props: ({

package/node_modules/@mui/material/PaginationItem/PaginationItem.js

@@ -24,6 +24,7 @@ var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
 var _zeroStyled = require("../zero-styled");
 var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
+var _utils = require("../transitions/utils");
 var _jsxRuntime = require("react/jsx-runtime");
 const overridesResolver = (props, styles) => {
   const {
@@ -119,7 +120,7 @@ const PaginationItemPage = (0, _zeroStyled.styled)(_ButtonBase.default, {
   [`&.${_paginationItemClasses.default.disabled}`]: {
     opacity: (theme.vars || theme).palette.action.disabledOpacity
   },
-  transition: theme.transitions.create(['color', 'background-color'], {
+  ...(0, _utils.getTransitionStyles)(theme, ['color', 'background-color'], {
     duration: theme.transitions.duration.short
   }),
   '&:hover': {

package/node_modules/@mui/material/PaginationItem/PaginationItem.mjs

@@ -17,6 +17,7 @@ import useSlot from "../utils/useSlot.mjs";
 import { styled } from "../zero-styled/index.mjs";
 import memoTheme from "../utils/memoTheme.mjs";
 import { useDefaultProps } from "../DefaultPropsProvider/index.mjs";
+import { getTransitionStyles } from "../transitions/utils.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const overridesResolver = (props, styles) => {
   const {
@@ -112,7 +113,7 @@ const PaginationItemPage = styled(ButtonBase, {
   [`&.${paginationItemClasses.disabled}`]: {
     opacity: (theme.vars || theme).palette.action.disabledOpacity
   },
-  transition: theme.transitions.create(['color', 'background-color'], {
+  ...getTransitionStyles(theme, ['color', 'background-color'], {
     duration: theme.transitions.duration.short
   }),
   '&:hover': {

package/node_modules/@mui/material/Paper/Paper.js

@@ -19,6 +19,7 @@ var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _getOverlayAlpha = _interopRequireDefault(require("../styles/getOverlayAlpha"));
 var _paperClasses = require("./paperClasses");
+var _utils = require("../transitions/utils");
 var _jsxRuntime = require("react/jsx-runtime");
 const useUtilityClasses = ownerState => {
   const {
@@ -46,7 +47,7 @@ const PaperRoot = (0, _zeroStyled.styled)('div', {
 }) => ({
   backgroundColor: (theme.vars || theme).palette.background.paper,
   color: (theme.vars || theme).palette.text.primary,
-  transition: theme.transitions.create('box-shadow'),
+  ...(0, _utils.getTransitionStyles)(theme, 'box-shadow'),
   variants: [{
     props: ({
       ownerState

package/node_modules/@mui/material/Paper/Paper.mjs

@@ -12,6 +12,7 @@ import memoTheme from "../utils/memoTheme.mjs";
 import { useDefaultProps } from "../DefaultPropsProvider/index.mjs";
 import getOverlayAlpha from "../styles/getOverlayAlpha.mjs";
 import { getPaperUtilityClass } from "./paperClasses.mjs";
+import { getTransitionStyles } from "../transitions/utils.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -39,7 +40,7 @@ const PaperRoot = styled('div', {
 }) => ({
   backgroundColor: (theme.vars || theme).palette.background.paper,
   color: (theme.vars || theme).palette.text.primary,
-  transition: theme.transitions.create('box-shadow'),
+  ...getTransitionStyles(theme, 'box-shadow'),
   variants: [{
     props: ({
       ownerState

package/node_modules/@mui/material/Popover/Popover.d.mts

@@ -6,7 +6,7 @@ import { Theme } from "../styles/index.mjs";
 import { InternalStandardProps as StandardProps } from "../internal/index.mjs";
 import { PaperProps } from "../Paper/index.mjs";
 import { ModalProps } from "../Modal/index.mjs";
-import { TransitionProps } from "../transitions/transition.mjs";
+import { TransitionProps } from "../transitions/types.mjs";
 import { PopoverClasses } from "./popoverClasses.mjs";
 import { CreateSlotsAndSlotProps, SlotProps } from "../utils/types.mjs";
 export interface PopoverSlots {

package/node_modules/@mui/material/Popover/Popover.d.ts

@@ -6,7 +6,7 @@ import { Theme } from "../styles/index.js";
 import { InternalStandardProps as StandardProps } from "../internal/index.js";
 import { PaperProps } from "../Paper/index.js";
 import { ModalProps } from "../Modal/index.js";
-import { TransitionProps } from "../transitions/transition.js";
+import { TransitionProps } from "../transitions/types.js";
 import { PopoverClasses } from "./popoverClasses.js";
 import { CreateSlotsAndSlotProps, SlotProps } from "../utils/types.js";
 export interface PopoverSlots {

package/node_modules/@mui/material/Popper/BasePopper.js

@@ -92,17 +92,12 @@ const PopperTooltip = /*#__PURE__*/React.forwardRef(function PopperTooltip(props
    * modifiers.flip is essentially a flip for controlled/uncontrolled behavior
    */
   const [placement, setPlacement] = React.useState(rtlPlacement);
-  const [resolvedAnchorElement, setResolvedAnchorElement] = React.useState(resolveAnchorEl(anchorEl));
+  const resolvedAnchorElement = React.useMemo(() => resolveAnchorEl(anchorEl), [anchorEl]);
   React.useEffect(() => {
     if (popperRef.current) {
       popperRef.current.forceUpdate();
     }
   });
-  React.useEffect(() => {
-    if (anchorEl) {
-      setResolvedAnchorElement(resolveAnchorEl(anchorEl));
-    }
-  }, [anchorEl]);
   (0, _useEnhancedEffect.default)(() => {
     if (!resolvedAnchorElement || !open) {
       return undefined;

package/node_modules/@mui/material/Popper/BasePopper.mjs

@@ -85,17 +85,12 @@ const PopperTooltip = /*#__PURE__*/React.forwardRef(function PopperTooltip(props
    * modifiers.flip is essentially a flip for controlled/uncontrolled behavior
    */
   const [placement, setPlacement] = React.useState(rtlPlacement);
-  const [resolvedAnchorElement, setResolvedAnchorElement] = React.useState(resolveAnchorEl(anchorEl));
+  const resolvedAnchorElement = React.useMemo(() => resolveAnchorEl(anchorEl), [anchorEl]);
   React.useEffect(() => {
     if (popperRef.current) {
       popperRef.current.forceUpdate();
     }
   });
-  React.useEffect(() => {
-    if (anchorEl) {
-      setResolvedAnchorElement(resolveAnchorEl(anchorEl));
-    }
-  }, [anchorEl]);
   useEnhancedEffect(() => {
     if (!resolvedAnchorElement || !open) {
       return undefined;

package/node_modules/@mui/material/README.md

@@ -1,7 +1,8 @@
 <!-- #host-reference -->
-<!-- markdownlint-disable-next-line -->
+<!-- lint disable mui-first-block-heading -->
+
 <p align="center">
-  <a href="https://mui.com/material-ui/" rel="noopener" target="_blank"><img width="150" height="133" src="https://mui.com/static/logo.svg" alt="Material UI logo"></a>
+  <a href="https://mui.com/material-ui/" target="_blank"><img width="150" height="133" src="https://mui.com/static/logo.svg" alt="Material UI logo"></a>
 </p>
 
 <h1 align="center">Material UI</h1>

package/node_modules/@mui/material/Radio/Radio.js

@@ -193,6 +193,9 @@ const Radio = /*#__PURE__*/React.forwardRef(function Radio(inProps, ref) {
       disabled,
       name,
       checked,
+      // Forward the raw prop so an unset value stays `undefined` and ButtonBase resolves its
+      // own default — letting a global `MuiButtonBase.defaultProps.disableRipple` apply here.
+      disableRipple: props.disableRipple,
       slots,
       slotProps: {
         // Do not forward `slotProps.root` again because it's already handled by the `RootSlot` in this file.

package/node_modules/@mui/material/Radio/Radio.mjs

@@ -186,6 +186,9 @@ const Radio = /*#__PURE__*/React.forwardRef(function Radio(inProps, ref) {
       disabled,
       name,
       checked,
+      // Forward the raw prop so an unset value stays `undefined` and ButtonBase resolves its
+      // own default — letting a global `MuiButtonBase.defaultProps.disableRipple` apply here.
+      disableRipple: props.disableRipple,
       slots,
       slotProps: {
         // Do not forward `slotProps.root` again because it's already handled by the `RootSlot` in this file.

package/node_modules/@mui/material/Radio/RadioButtonIcon.js

@@ -12,6 +12,7 @@ var _RadioButtonChecked = _interopRequireDefault(require("../internal/svg-icons/
 var _rootShouldForwardProp = _interopRequireDefault(require("../styles/rootShouldForwardProp"));
 var _zeroStyled = require("../zero-styled");
 var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
+var _utils = require("../transitions/utils");
 var _jsxRuntime = require("react/jsx-runtime");
 const RadioButtonIconRoot = (0, _zeroStyled.styled)('span', {
   name: 'MuiRadioButtonIcon',
@@ -34,7 +35,7 @@ const RadioButtonIconDot = (0, _zeroStyled.styled)(_RadioButtonChecked.default,
   left: 0,
   position: 'absolute',
   transform: 'scale(0)',
-  transition: theme.transitions.create('transform', {
+  ...(0, _utils.getTransitionStyles)(theme, 'transform', {
     easing: theme.transitions.easing.easeIn,
     duration: theme.transitions.duration.shortest
   }),
@@ -44,7 +45,7 @@ const RadioButtonIconDot = (0, _zeroStyled.styled)(_RadioButtonChecked.default,
     },
     style: {
       transform: 'scale(1)',
-      transition: theme.transitions.create('transform', {
+      ...(0, _utils.getTransitionStyles)(theme, 'transform', {
         easing: theme.transitions.easing.easeOut,
         duration: theme.transitions.duration.shortest
       })

package/node_modules/@mui/material/Radio/RadioButtonIcon.mjs

@@ -6,6 +6,7 @@ import RadioButtonCheckedIcon from "../internal/svg-icons/RadioButtonChecked.mjs
 import rootShouldForwardProp from "../styles/rootShouldForwardProp.mjs";
 import { styled } from "../zero-styled/index.mjs";
 import memoTheme from "../utils/memoTheme.mjs";
+import { getTransitionStyles } from "../transitions/utils.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const RadioButtonIconRoot = styled('span', {
   name: 'MuiRadioButtonIcon',
@@ -28,7 +29,7 @@ const RadioButtonIconDot = styled(RadioButtonCheckedIcon, {
   left: 0,
   position: 'absolute',
   transform: 'scale(0)',
-  transition: theme.transitions.create('transform', {
+  ...getTransitionStyles(theme, 'transform', {
     easing: theme.transitions.easing.easeIn,
     duration: theme.transitions.duration.shortest
   }),
@@ -38,7 +39,7 @@ const RadioButtonIconDot = styled(RadioButtonCheckedIcon, {
     },
     style: {
       transform: 'scale(1)',
-      transition: theme.transitions.create('transform', {
+      ...getTransitionStyles(theme, 'transform', {
         easing: theme.transitions.easing.easeOut,
         duration: theme.transitions.duration.shortest
       })

package/node_modules/@mui/material/Rating/Rating.js

@@ -26,6 +26,7 @@ var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _slotShouldForwardProp = _interopRequireDefault(require("../styles/slotShouldForwardProp"));
 var _ratingClasses = _interopRequireWildcard(require("./ratingClasses"));
 var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
+var _utils2 = require("../transitions/utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function getDecimalPrecision(num) {
   const decimalPart = num.toString().split('.')[1];
@@ -152,11 +153,11 @@ const RatingIcon = (0, _zeroStyled.styled)('span', {
 }) => ({
   // Fit wrapper to actual icon size.
   display: 'flex',
-  transition: theme.transitions.create('transform', {
+  ...(0, _utils2.getTransitionStyles)(theme, 'transform', {
     duration: theme.transitions.duration.shortest
   }),
   // Fix mouseLeave issue.
-  // https://github.com/facebook/react/issues/4492
+  // https://github.com/react/react/issues/4492
   pointerEvents: 'none',
   variants: [{
     props: ({
@@ -451,7 +452,7 @@ const Rating = /*#__PURE__*/React.forwardRef(function Rating(inProps, ref) {
   };
   const handleClear = event => {
     // Ignore keyboard events
-    // https://github.com/facebook/react/issues/7407
+    // https://github.com/react/react/issues/7407
     if (event.clientX === 0 && event.clientY === 0) {
       return;
     }

package/node_modules/@mui/material/Rating/Rating.mjs

@@ -18,6 +18,7 @@ import { useDefaultProps } from "../DefaultPropsProvider/index.mjs";
 import slotShouldForwardProp from "../styles/slotShouldForwardProp.mjs";
 import ratingClasses, { getRatingUtilityClass } from "./ratingClasses.mjs";
 import useSlot from "../utils/useSlot.mjs";
+import { getTransitionStyles } from "../transitions/utils.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
 function getDecimalPrecision(num) {
@@ -145,11 +146,11 @@ const RatingIcon = styled('span', {
 }) => ({
   // Fit wrapper to actual icon size.
   display: 'flex',
-  transition: theme.transitions.create('transform', {
+  ...getTransitionStyles(theme, 'transform', {
     duration: theme.transitions.duration.shortest
   }),
   // Fix mouseLeave issue.
-  // https://github.com/facebook/react/issues/4492
+  // https://github.com/react/react/issues/4492
   pointerEvents: 'none',
   variants: [{
     props: ({
@@ -444,7 +445,7 @@ const Rating = /*#__PURE__*/React.forwardRef(function Rating(inProps, ref) {
   };
   const handleClear = event => {
     // Ignore keyboard events
-    // https://github.com/facebook/react/issues/7407
+    // https://github.com/react/react/issues/7407
     if (event.clientX === 0 && event.clientY === 0) {
       return;
     }

package/node_modules/@mui/material/Select/SelectInput.js

@@ -28,6 +28,7 @@ var _useForkRef = _interopRequireDefault(require("../utils/useForkRef"));
 var _useControlled = _interopRequireDefault(require("../utils/useControlled"));
 var _selectClasses = _interopRequireWildcard(require("./selectClasses"));
 var _utils2 = require("./utils");
+var _closedTypeahead = require("./utils/closedTypeahead");
 var _SelectFocusSourceContext = require("./utils/SelectFocusSourceContext");
 var _jsxRuntime = require("react/jsx-runtime");
 var _span;
@@ -35,6 +36,11 @@ const OPENING_MOUSE_UP_BOUNDARY_OFFSET = 2;
 // The initial mouseup may land on an item when the menu opens over the trigger.
 const SELECTED_MOUSE_UP_DELAY = 400;
 const UNSELECTED_MOUSE_UP_DELAY = 200;
+const TYPEAHEAD_RESET_MS = 750;
+const SPACE = ' ';
+const ARROW_UP = 'ArrowUp';
+const ARROW_DOWN = 'ArrowDown';
+const ENTER = 'Enter';
 
 /**
  * Returns true when a native mouse event should be treated as happening inside
@@ -197,8 +203,14 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
     allowSelectedMouseUp: false,
     allowUnselectedMouseUp: false
   });
+  const closedTypeaheadRef = React.useRef({
+    buffer: '',
+    previousSearchIndex: null,
+    matchedIndex: null
+  });
   const selectedMouseUpTimer = (0, _useTimeout.default)();
   const unselectedMouseUpTimer = (0, _useTimeout.default)();
+  const typeaheadResetTimer = (0, _useTimeout.default)();
   const [displayNode, setDisplayNode] = React.useState(null);
   const {
     current: isOpenControlled
@@ -221,9 +233,18 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
     value
   }), [value]);
   const open = displayNode !== null && openState;
+  const resetClosedTypeahead = React.useCallback(() => {
+    typeaheadResetTimer.clear();
+    closedTypeaheadRef.current.buffer = '';
+    closedTypeaheadRef.current.previousSearchIndex = null;
+    closedTypeaheadRef.current.matchedIndex = null;
+  }, [typeaheadResetTimer]);
   (0, _useEnhancedEffect.default)(() => {
     openRef.current = open;
-  }, [open]);
+    if (open) {
+      resetClosedTypeahead();
+    }
+  }, [open, resetClosedTypeahead]);
   const clearSelectionTimers = React.useCallback(() => {
     selectedMouseUpTimer.clear();
     unselectedMouseUpTimer.clear();
@@ -255,8 +276,9 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
     return () => {
       resetMouseUpSelection();
       clearOpeningMouseUpListener();
+      resetClosedTypeahead();
     };
-  }, [resetMouseUpSelection, clearOpeningMouseUpListener]);
+  }, [resetMouseUpSelection, clearOpeningMouseUpListener, resetClosedTypeahead]);
   React.useEffect(() => {
     if (!open || !anchorElement || autoWidth) {
       return undefined;
@@ -313,6 +335,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
       clearOpeningMouseUpListener();
     }
     if (openParam) {
+      resetClosedTypeahead();
       setOpenInteractionType((0, _utils2.getOpenInteractionType)(event));
       if (onOpen) {
         onOpen(event);
@@ -360,6 +383,9 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
     }
     // Hijack the default focus behavior.
     event.preventDefault();
+    if (!displayRef.current) {
+      return;
+    }
     displayRef.current.focus();
     const doc = (0, _ownerDocument.default)(event.currentTarget);
     scheduleMouseUpSelection();
@@ -402,6 +428,25 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
       onChange(event, child);
     }
   };
+  const handleValueChange = (event, child, newValue) => {
+    setValueState(newValue);
+    if (onChange) {
+      // Redefine target to allow name and value to be read.
+      // This allows seamless integration with the most popular form libraries.
+      // https://github.com/mui/material-ui/issues/13485#issuecomment-676048492
+      // Clone the event to not override `target` of the original event.
+      const nativeEvent = event.nativeEvent || event;
+      const clonedEvent = new nativeEvent.constructor(nativeEvent.type, nativeEvent);
+      Object.defineProperty(clonedEvent, 'target', {
+        writable: true,
+        value: {
+          value: newValue,
+          name
+        }
+      });
+      onChange(clonedEvent, child);
+    }
+  };
   const handleItemClick = child => event => {
     didPointerDownOnItemRef.current = false;
     let newValue;
@@ -425,23 +470,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
       child.props.onClick(event);
     }
     if (value !== newValue) {
-      setValueState(newValue);
-      if (onChange) {
-        // Redefine target to allow name and value to be read.
-        // This allows seamless integration with the most popular form libraries.
-        // https://github.com/mui/material-ui/issues/13485#issuecomment-676048492
-        // Clone the event to not override `target` of the original event.
-        const nativeEvent = event.nativeEvent || event;
-        const clonedEvent = new nativeEvent.constructor(nativeEvent.type, nativeEvent);
-        Object.defineProperty(clonedEvent, 'target', {
-          writable: true,
-          value: {
-            value: newValue,
-            name
-          }
-        });
-        onChange(clonedEvent, child);
-      }
+      handleValueChange(event, child, newValue);
     }
     if (!multiple) {
       update(false, event);
@@ -460,13 +489,57 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
     }
     event.currentTarget.click();
   };
+  const handleClosedTypeahead = event => {
+    const state = closedTypeaheadRef.current;
+    const hasActiveBuffer = state.buffer !== '';
+    if (open || multiple || disabled || event.defaultPrevented || event.nativeEvent?.isComposing || event.key.length !== 1 || event.ctrlKey || event.metaKey || event.altKey || event.key === SPACE && !hasActiveBuffer) {
+      return false;
+    }
+    if (event.key === SPACE) {
+      event.preventDefault();
+    }
+    const isNewSession = state.buffer === '';
+    const {
+      options: searchableOptions,
+      selectedIndex
+    } = (0, _closedTypeahead.getTypeaheadOptions)(childrenArray, value);
+    if (searchableOptions.length === 0) {
+      if (event.key !== SPACE) {
+        resetClosedTypeahead();
+      }
+      return true;
+    }
+    if (isNewSession) {
+      state.previousSearchIndex = selectedIndex;
+    }
+    const key = event.key.toLowerCase();
+    if (state.buffer === key && (0, _closedTypeahead.canCycleRepeatedCharacter)(searchableOptions, key)) {
+      state.buffer = '';
+      state.previousSearchIndex = state.matchedIndex;
+    }
+    state.buffer += key;
+    typeaheadResetTimer.start(TYPEAHEAD_RESET_MS, resetClosedTypeahead);
+    const matchingIndex = (0, _closedTypeahead.getMatchingOptionIndex)(searchableOptions, state.buffer, (state.previousSearchIndex ?? -1) + 1);
+    if (matchingIndex !== -1) {
+      const matchedOption = searchableOptions[matchingIndex];
+      state.matchedIndex = matchingIndex;
+      if (!(0, _utils2.areEqualValues)(value, matchedOption.value)) {
+        handleValueChange(event, matchedOption.child, matchedOption.value);
+      }
+      return true;
+    }
+    if (event.key !== SPACE) {
+      resetClosedTypeahead();
+    }
+    return true;
+  };
   const handleKeyDown = event => {
     if (!readOnly) {
-      const validKeys = [' ', 'ArrowUp', 'ArrowDown',
-      // The native select doesn't respond to enter on macOS, but it's recommended by
+      const isClosedTypeaheadHandled = handleClosedTypeahead(event);
+      // The native select doesn't respond to Enter on macOS, but it's recommended by
       // https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/
-      'Enter'];
-      if (validKeys.includes(event.key)) {
+      const isOpenKey = event.key === SPACE || event.key === ARROW_UP || event.key === ARROW_DOWN || event.key === ENTER;
+      if (!isClosedTypeaheadHandled && isOpenKey) {
         event.preventDefault();
         update(true, event);
       }
@@ -474,6 +547,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
     }
   };
   const handleBlur = event => {
+    resetClosedTypeahead();
     // if open event.stopImmediatePropagation
     if (!open && onBlur) {
       // Preact support, target is read only property on a native event.
@@ -487,6 +561,19 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
       onBlur(event);
     }
   };
+  const handleItemKeyDown = child => event => {
+    child?.props?.onKeyDown?.(event);
+    if (event.key === SPACE && event.target === event.currentTarget && !event.defaultPrevented) {
+      // Prevent the browser from scrolling the page
+      event.preventDefault();
+      // Ignore auto-repeated keydowns to avoid toggling multiple times
+      if (!event.repeat) {
+        // Trigger via click so that onClick receives a click event,
+        // consistent with Enter and pointer interactions.
+        event.currentTarget.click();
+      }
+    }
+  };
   delete other['aria-invalid'];
   let display;
   let displaySingle;
@@ -544,7 +631,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
       onClick: handleItemClick(child),
       onMouseUp: handleItemMouseUp(child, selected),
       onKeyUp: event => {
-        if (event.key === ' ') {
+        if (event.key === SPACE) {
           // otherwise our MenuItems dispatches a click event
           // it's not behavior of the native <option> and causes
           // the select to close immediately since we open on space keydown
@@ -554,6 +641,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
           child.props.onKeyUp(event);
         }
       },
+      onKeyDown: handleItemKeyDown(child),
       role: 'option',
       selected,
       value: undefined,
@@ -565,7 +653,10 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
   // Keep the opening mouseup guard current without mutating refs during render.
   (0, _useEnhancedEffect.default)(() => {
     hasSelectedItemInListRef.current = foundMatch;
-  }, [foundMatch]);
+    if (!open && !multiple && !foundMatch) {
+      resetClosedTypeahead();
+    }
+  }, [foundMatch, multiple, open, resetClosedTypeahead]);
   if (process.env.NODE_ENV !== 'production') {
     // TODO: uncomment once we enable eslint-plugin-react-compiler // eslint-disable-next-line react-compiler/react-compiler
     // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -629,6 +720,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
       "aria-disabled": disabled ? 'true' : undefined,
       "aria-expanded": open ? 'true' : 'false',
       "aria-haspopup": "listbox",
+      "aria-readonly": readOnly ? 'true' : undefined,
       "aria-label": ariaLabel,
       "aria-labelledby": labelId,
       "aria-describedby": ariaDescribedby,
@@ -659,6 +751,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
       onChange: handleChange,
       tabIndex: -1,
       disabled: disabled,
+      readOnly: readOnly,
       className: classes.nativeInput,
       autoFocus: autoFocus,
       required: required,