@procore/core-react 12.41.0 → 12.42.0

package/dist/Form/Form.styles.js

@@ -23,7 +23,7 @@ function applyStylesOnlyToIE11(styles) {
 }
 export var StyledFormFieldMain = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledFormFieldMain",
-  componentId: "core-12_41_0__sc-ncj3pf-0"
+  componentId: "core-12_42_0__sc-ncj3pf-0"
 })(["-ms-grid-row:2;grid-row:2;", " ", " ", ""], function (_ref) {
   var $colStart = _ref.$colStart,
     $colEnd = _ref.$colEnd,
@@ -35,15 +35,15 @@ export var StyledFormFieldMain = /*#__PURE__*/styled.div.withConfig({
 }, applyStylesOnlyToIE11("\n      padding-left: ".concat(columnGutter, ";\n\n      &:nth-child(2) {\n        padding-left: 0;\n      }\n  ")));
 export var StyledLabel = /*#__PURE__*/styled(Label).withConfig({
   displayName: "StyledLabel",
-  componentId: "core-12_41_0__sc-ncj3pf-1"
+  componentId: "core-12_42_0__sc-ncj3pf-1"
 })(["word-wrap:break-word;word-break:break-word;"]);
 export var StyledDescription = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledDescription",
-  componentId: "core-12_41_0__sc-ncj3pf-2"
+  componentId: "core-12_42_0__sc-ncj3pf-2"
 })(["", " color:", ";word-wrap:break-word;word-break:break-word;"], getTypographyIntent('body'), colors.gray45);
 export var StyledCheckboxInlineDescription = /*#__PURE__*/styled(StyledDescription).withConfig({
   displayName: "StyledCheckboxInlineDescription",
-  componentId: "core-12_41_0__sc-ncj3pf-3"
+  componentId: "core-12_42_0__sc-ncj3pf-3"
 })(["margin-top:", "px;", ""], spacing.xs, function (_ref3) {
   var $read = _ref3.$read;
   if (!$read) {
@@ -52,7 +52,7 @@ export var StyledCheckboxInlineDescription = /*#__PURE__*/styled(StyledDescripti
 });
 export var StyledFormFieldHeader = /*#__PURE__*/styled(StyledFieldHeader).withConfig({
   displayName: "StyledFormFieldHeader",
-  componentId: "core-12_41_0__sc-ncj3pf-4"
+  componentId: "core-12_42_0__sc-ncj3pf-4"
 })(["-ms-grid-row:1;grid-row:1;align-self:end;margin-bottom:", "px;", " ", " * + ", "{margin-top:", "px;}"], spacing.xs, function (_ref4) {
   var $colStart = _ref4.$colStart,
     $colEnd = _ref4.$colEnd,
@@ -61,20 +61,20 @@ export var StyledFormFieldHeader = /*#__PURE__*/styled(StyledFieldHeader).withCo
 }, applyStylesOnlyToIE11("\n    padding-left: ".concat(columnGutter, ";\n\n    &:first-child {\n      padding-left: 0;\n    }\n\n    ").concat(StyledFormFieldMain, " {\n      padding-left: ").concat(columnGutter, ";\n\n      &:nth-child(2) {\n        padding-left: 0;\n      }\n    }\n  ")), StyledDescription, spacing.xs);
 export var StyledFormFieldRequiredMark = /*#__PURE__*/styled(Required).withConfig({
   displayName: "StyledFormFieldRequiredMark",
-  componentId: "core-12_41_0__sc-ncj3pf-5"
+  componentId: "core-12_42_0__sc-ncj3pf-5"
 })(["padding-left:", "px;vertical-align:top;"], spacing.xs);
 export var StyledFormFieldErrorIcon = /*#__PURE__*/styled(Error).withConfig({
   displayName: "StyledFormFieldErrorIcon",
-  componentId: "core-12_41_0__sc-ncj3pf-6"
+  componentId: "core-12_42_0__sc-ncj3pf-6"
 })(["vertical-align:sub;"]);
 export var StyledFormFieldBanner = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledFormFieldBanner",
-  componentId: "core-12_41_0__sc-ncj3pf-7"
+  componentId: "core-12_42_0__sc-ncj3pf-7"
 })(["display:flex;align-items:flex-start;min-height:22px;margin-top:", "px;margin-bottom:2px;word-break:break-word;word-wrap:break-word;color:", ";", ""], spacing.xs, colors.red50, getTypographyIntent('body'));
 /** @deprecated The traditional field layout is deprecated */
 export var StyledTraditionalFormColumn = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledTraditionalFormColumn",
-  componentId: "core-12_41_0__sc-ncj3pf-8"
+  componentId: "core-12_42_0__sc-ncj3pf-8"
 })(["padding:", ";align-self:center;height:100%;&:nth-child(1){-ms-grid-column:1;}&:nth-child(2){-ms-grid-column:2;}&:nth-child(3){-ms-grid-column:3;}&:nth-child(4){-ms-grid-column:4;}", " ", ""], traditionalPadding, function (_ref5) {
   var _ref5$$fullWidth = _ref5.$fullWidth,
     $fullWidth = _ref5$$fullWidth === void 0 ? false : _ref5$$fullWidth;
@@ -86,15 +86,15 @@ export var StyledTraditionalFormColumn = /*#__PURE__*/styled.div.withConfig({
 });
 export var StyledFormOutputTextArea = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledFormOutputTextArea",
-  componentId: "core-12_41_0__sc-ncj3pf-9"
+  componentId: "core-12_42_0__sc-ncj3pf-9"
 })(["white-space:pre-wrap;"]);
 export var StyledFormOutputFiledset = /*#__PURE__*/styled.fieldset.withConfig({
   displayName: "StyledFormOutputFiledset",
-  componentId: "core-12_41_0__sc-ncj3pf-10"
+  componentId: "core-12_42_0__sc-ncj3pf-10"
 })(["border:none;padding:0;margin-top:", "px;"], spacing.xs);
 export var StyledFormRow = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledFormRow",
-  componentId: "core-12_41_0__sc-ncj3pf-11"
+  componentId: "core-12_42_0__sc-ncj3pf-11"
 })(["", ""], function (_ref7) {
   var _ref7$$traditional = _ref7.$traditional,
     $traditional = _ref7$$traditional === void 0 ? false : _ref7$$traditional,
@@ -105,6 +105,6 @@ export var StyledFormRow = /*#__PURE__*/styled.div.withConfig({
 export var formWrapper = /*#__PURE__*/css(["display:inherit;flex-direction:inherit;height:inherit;max-height:inherit;"]);
 export var StyledForm = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledForm",
-  componentId: "core-12_41_0__sc-ncj3pf-12"
+  componentId: "core-12_42_0__sc-ncj3pf-12"
 })(["", ""], formWrapper);
 //# sourceMappingURL=Form.styles.js.map

package/dist/Form/StyledFormikForm.styles.js

@@ -5,13 +5,13 @@ import { spacing } from '../_styles/spacing';
 import { formWrapper } from './Form.styles';
 export var StyledFormikForm = /*#__PURE__*/styled(FormikForm).withConfig({
   displayName: "StyledFormikForm",
-  componentId: "core-12_41_0__sc-1ks7m0l-0"
+  componentId: "core-12_42_0__sc-1ks7m0l-0"
 })(["", ""], formWrapper);
 
 /** @deprecated The traditional field layout is deprecated */
 export var StyledTraditionalFormLabel = /*#__PURE__*/styled(Typography).withConfig({
   displayName: "StyledTraditionalFormLabel",
-  componentId: "core-12_41_0__sc-1ks7m0l-1"
+  componentId: "core-12_42_0__sc-1ks7m0l-1"
 })(["display:inline-block;word-break:break-word;word-wrap:break-word;", ""], function (_ref) {
   var $view = _ref.$view;
   return ['create', 'update'].includes($view) && css(["padding-top:", "px;"], spacing.sm);

package/dist/GhostPlaceholder/GhostPlaceholder.styles.js

@@ -3,7 +3,7 @@ import { spacing } from '../_styles/spacing';
 var shimmerAnimation = /*#__PURE__*/keyframes(["0%{background-position:-1000px 500px;}100%{background-position:1000px 500px;}"]);
 export var PlaceholderItem = /*#__PURE__*/styled.div.withConfig({
   displayName: "PlaceholderItem",
-  componentId: "core-12_41_0__sc-1nja302-0"
+  componentId: "core-12_42_0__sc-1nja302-0"
 })(["width:100%;min-height:24px;padding:10px 0;animation:", " 3s ease-out infinite;background:radial-gradient( ellipse at center,", " 0%,", " 50% );background-size:2000px 2000px;border-radius:", "px;"], shimmerAnimation, function (props) {
   return props.$startGradientColor;
 }, function (props) {
@@ -11,7 +11,7 @@ export var PlaceholderItem = /*#__PURE__*/styled.div.withConfig({
 }, spacing.sm);
 export var RoundPlaceholderItem = /*#__PURE__*/styled(PlaceholderItem).withConfig({
   displayName: "RoundPlaceholderItem",
-  componentId: "core-12_41_0__sc-1nja302-1"
+  componentId: "core-12_42_0__sc-1nja302-1"
 })(["width:", ";height:", ";border-radius:50%;"], function (props) {
   return props.$small ? '24px' : '40px';
 }, function (props) {

package/dist/Grid/Grid.styles.js

@@ -75,7 +75,7 @@ var getRowGutterVertical = function getRowGutterVertical(gutterY, breakpoint) {
 };
 export var StyledGridRow = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledGridRow",
-  componentId: "core-12_41_0__sc-8pinsp-0"
+  componentId: "core-12_42_0__sc-8pinsp-0"
 })(["", " display:flex;flex-wrap:wrap;"], function (_ref) {
   var $gutterX = _ref.$gutterX,
     $gutterY = _ref.$gutterY;
@@ -87,7 +87,7 @@ export var StyledGridRow = /*#__PURE__*/styled.div.withConfig({
 });
 export var StyledGridCol = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledGridCol",
-  componentId: "core-12_41_0__sc-8pinsp-1"
+  componentId: "core-12_42_0__sc-8pinsp-1"
 })(["flex-shrink:0;width:100%;max-width:100%;", ""], function (_ref2) {
   var $span = _ref2.$span,
     $offset = _ref2.$offset,

package/dist/GroupSelect/GroupSelect.styles.js

@@ -3,7 +3,7 @@ import { MultiSelect } from '../MultiSelect/MultiSelect';
 import { colors } from '../_styles/colors';
 export var StyledGroupSelectOption = /*#__PURE__*/styled(MultiSelect.Option).withConfig({
   displayName: "StyledGroupSelectOption",
-  componentId: "core-12_41_0__sc-u5gu8j-0"
+  componentId: "core-12_42_0__sc-u5gu8j-0"
 })(["", ""], function (_ref) {
   var disabled = _ref.disabled;
   return disabled && css(["color:", ";cursor:not-allowed;a,a:hover{color:", ";text-decoration:none;}"], colors.gray70, colors.gray70);

package/dist/Input/Input.styles.js

@@ -16,6 +16,6 @@ export function getInputStyles(_ref) {
 }
 export var StyledInput = /*#__PURE__*/styled.input.withConfig({
   displayName: "StyledInput",
-  componentId: "core-12_41_0__sc-12sjkxg-0"
+  componentId: "core-12_42_0__sc-12sjkxg-0"
 })(["", " padding:0 ", "px;&::-ms-clear{display:none;}&[type='number']{-moz-appearance:textfield;&::-webkit-inner-spin-button,&::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}}"], getInputStyles, spacing.md);
 //# sourceMappingURL=Input.styles.js.map

package/dist/Link/Link.styles.js

@@ -17,6 +17,6 @@ function getLinkColors(_ref) {
 }
 export var StyledLink = /*#__PURE__*/styled.a.withConfig({
   displayName: "StyledLink",
-  componentId: "core-12_41_0__sc-jfowrl-0"
+  componentId: "core-12_42_0__sc-jfowrl-0"
 })(["text-decoration:underline;&:hover{cursor:pointer;text-decoration:underline;}", " &.focus,&:focus{", ";}", ""], focusable, getBorderRadius('md'), getLinkColors);
 //# sourceMappingURL=Link.styles.js.map

package/dist/ListPage/ListPage.styles.js

@@ -3,19 +3,19 @@ import { colors } from '../_styles/colors';
 import { spacing } from '../_styles/spacing';
 export var StyledListPageMain = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledListPageMain",
-  componentId: "core-12_41_0__sc-1eq7fzi-0"
+  componentId: "core-12_42_0__sc-1eq7fzi-0"
 })(["display:flex;flex:1 0 auto;flex-direction:column;min-width:0;padding:", "px ", "px;width:100%;"], spacing.lg, spacing.xl);
 export var StyledListPageBanner = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledListPageBanner",
-  componentId: "core-12_41_0__sc-1eq7fzi-1"
+  componentId: "core-12_42_0__sc-1eq7fzi-1"
 })(["flex:0 0 auto;"]);
 export var StyledListPageToolHeader = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledListPageToolHeader",
-  componentId: "core-12_41_0__sc-1eq7fzi-2"
+  componentId: "core-12_42_0__sc-1eq7fzi-2"
 })(["flex:0 0 auto;padding-bottom:", "px;"], spacing.lg);
 export var StyledListPageControl = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledListPageControl",
-  componentId: "core-12_41_0__sc-1eq7fzi-3"
+  componentId: "core-12_42_0__sc-1eq7fzi-3"
 })(["flex:", ";", " ", ""], function (_ref) {
   var $block = _ref.$block;
   return $block ? '1 0 auto' : '0 0 auto';
@@ -32,18 +32,18 @@ export var StyledListPageControl = /*#__PURE__*/styled.div.withConfig({
 });
 export var StyledListPageContentControls = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledListPageContentControls",
-  componentId: "core-12_41_0__sc-1eq7fzi-4"
+  componentId: "core-12_42_0__sc-1eq7fzi-4"
 })(["align-items:center;display:flex;flex:0 0 auto;justify-content:space-between;padding:", "px 0;", " + ", "{margin-left:", "px;}"], spacing.md, StyledListPageControl, StyledListPageControl, spacing.lg);
 export var StyledListPageBody = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledListPageBody",
-  componentId: "core-12_41_0__sc-1eq7fzi-5"
+  componentId: "core-12_42_0__sc-1eq7fzi-5"
 })(["display:flex;flex:1 0 auto;padding-top:", "px;"], spacing.md);
 export var StyledListPageBodyContent = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledListPageBodyContent",
-  componentId: "core-12_41_0__sc-1eq7fzi-6"
+  componentId: "core-12_42_0__sc-1eq7fzi-6"
 })(["flex:1 1 auto;"]);
 export var StyledListPage = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledListPage",
-  componentId: "core-12_41_0__sc-1eq7fzi-7"
+  componentId: "core-12_42_0__sc-1eq7fzi-7"
 })(["display:flex;flex-direction:row;height:100%;width:100%;", " + ", "{padding-top:", "px;}", " + ", "{border-top-color:", ";border-top-style:solid;border-top-width:1px;}", " + ", ",", " + ", "{border-top-color:", ";border-top-style:solid;border-top-width:1px;}", " + ", "{padding-top:0;}"], StyledListPageBanner, StyledListPageToolHeader, spacing.lg, StyledListPageContentControls, StyledListPageContentControls, colors.gray85, StyledListPageToolHeader, StyledListPageContentControls, StyledListPageToolHeader, StyledListPageBody, colors.gray85, StyledListPageContentControls, StyledListPageBody);
 //# sourceMappingURL=ListPage.styles.js.map

package/dist/Loader/Loader.styles.js

@@ -7,11 +7,11 @@ export var loaderTransitionDuration = 250;
 var movingStripes = /*#__PURE__*/keyframes(["from{background-position:", "px 0;}100%{background-position:0 ", "px;}"], backgroundSize, backgroundSize);
 export var StyledLoader = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledLoader",
-  componentId: "core-12_41_0__sc-wgvjj9-0"
+  componentId: "core-12_42_0__sc-wgvjj9-0"
 })(["display:block;height:100%;left:0;min-width:12px;position:absolute;transition:width ", "ms ease-out;top:0;"], loaderTransitionDuration);
 export var StyledGradient = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledGradient",
-  componentId: "core-12_41_0__sc-wgvjj9-1"
+  componentId: "core-12_42_0__sc-wgvjj9-1"
 })(["height:100%;", ""], function (_ref) {
   var $animated = _ref.$animated;
   return $animated ? css(["@media (prefers-reduced-motion:no-preference){animation:", " 0.5s linear infinite;}background-image:linear-gradient( 45deg,", " 26%,", " 25%,", " 51%,", " 50%,", " 76%,", " 75%,", " );background-size:", "px ", "px;"], movingStripes, color1, color2, color2, color1, color1, color2, color2, backgroundSize, backgroundSize) : css(["background-color:", ";"], colors.blue50);

package/dist/MenuImperative/MenuImperative.d.ts

@@ -15,7 +15,7 @@ export declare function useMenuContext(): IMenuContext;
  */
 export declare const useMenuImperativeControlNavigation: (ref: React.RefObject<MenuRef>, enable?: boolean, options?: ControlNavigationProps) => ControlNavigationReturn;
 export declare const Group: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & GroupProps & React.RefAttributes<HTMLDivElement>>;
-export declare function Droppable({ id, children }: DroppableProps): React.JSX.Element;
+export declare function Droppable({ id, children, ...props }: DroppableProps): React.JSX.Element;
 export declare namespace Droppable {
     var displayName: string;
 }

package/dist/MenuImperative/MenuImperative.js

@@ -1,11 +1,12 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 var _excluded = ["circular", "onDragEnd", "onScrollBottom", "onSelect", "role", "onChangeActiveDescendant", "onKeyboardNavigation", "id", "multiple"],
-  _excluded2 = ["clickable", "item", "id", "label", "children"],
-  _excluded3 = ["hasCheckbox", "children", "selected", "provided"],
-  _excluded4 = ["as", "children", "item", "onClick", "selected", "suggested", "disabled", "id", "role", "restoreFocus", "draggableId", "draggableIndex", "droppableIn"],
-  _excluded5 = ["selected", "disabled", "error", "indeterminate", "children", "role"],
-  _excluded6 = ["className", "i18nScope", "placeholder", "onChange", "value"],
-  _excluded7 = ["padding"];
+  _excluded2 = ["clickable", "item", "label", "labelId", "children", "id"],
+  _excluded3 = ["id", "children"],
+  _excluded4 = ["hasCheckbox", "children", "selected", "provided", "dndInstructionsId"],
+  _excluded5 = ["as", "children", "item", "onClick", "selected", "suggested", "disabled", "id", "role", "restoreFocus", "draggableId", "draggableIndex", "droppableIn"],
+  _excluded6 = ["selected", "disabled", "error", "indeterminate", "children", "role"],
+  _excluded7 = ["className", "i18nScope", "placeholder", "onChange", "value"],
+  _excluded8 = ["padding"];
 function _objectDestructuringEmpty(t) { if (null == t) throw new TypeError("Cannot destructure " + t); }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -26,6 +27,7 @@ import { Grip } from '@procore/core-icons/dist';
 import { useLabel } from '@react-aria/label';
 import { useId } from '@react-aria/utils';
 import React, { isValidElement, useEffect, useMemo, useState } from 'react';
+import { flushSync } from 'react-dom';
 import { Checkbox, FakeCheckbox } from '../Checkbox/Checkbox';
 import { Typeahead } from '../Typeahead';
 import { useI18nContext } from '../_hooks/I18n';
@@ -36,7 +38,18 @@ import { mergeRefs } from '../_utils/mergeRefs';
 import { StyledDroppable, StyledFooter, StyledGrip, StyledGroup, StyledGroupLabel, StyledHeader, StyledItem, StyledMenu, StyledOptions, StyledSearch, StyledWrapper } from './MenuImperative.styles';
 import { createSensors } from './sensors';
 var onScrollBottomThreshold = 8;
-var NO_ANNOUCEMENT = '';
+
+/**
+ * Finds the group element for a given droppable ID (from DnD result).
+ * Locates the Droppable via data-droppable-id, then returns its parent Group
+ * (ancestor with data-group="true") so we can read data-title for announcements.
+ */
+function findGroupByDroppableId(container, droppableId) {
+  var droppable = container === null || container === void 0 ? void 0 : container.querySelector("[data-droppable-id=\"".concat(droppableId, "\"]"));
+  if (!droppable) return null;
+  var group = droppable.closest('[data-group="true"]');
+  return group !== null && group !== void 0 ? group : null;
+}
 function noop() {}
 function isScrolledToBottom(e) {
   return e.currentTarget instanceof HTMLElement && e.currentTarget.scrollTop >= e.currentTarget.scrollHeight - e.currentTarget.clientHeight - onScrollBottomThreshold;
@@ -44,7 +57,10 @@ function isScrolledToBottom(e) {
 export var MenuContext = /*#__PURE__*/React.createContext({
   a11yOptionsProps: {},
   currentlyDroppableIn: [],
+  dndInstructionsId: '',
   onHoverItem: noop,
+  onFocusItem: noop,
+  onBlurItem: noop,
   onScrollBottom: noop,
   onSelect: noop,
   role: 'none'
@@ -56,6 +72,10 @@ export function useMenuContext() {
   }
   return context;
 }
+var IsInsideDroppableContext = /*#__PURE__*/React.createContext(false);
+function useIsInsideDroppable() {
+  return React.useContext(IsInsideDroppableContext);
+}
 
 /**
  * Usefully if navigation is controlled by search input or another input.
@@ -136,6 +156,8 @@ var MenuImperative_ = /*#__PURE__*/React.forwardRef(function Menu(_ref, forwardR
     _useState4 = _slicedToArray(_useState3, 2),
     currentlyDroppableIn = _useState4[0],
     setCurrentlyDroppableIn = _useState4[1];
+  var i18n = useI18nContext();
+  var dndInstructionsId = useId();
 
   // for context, used by Menu.Item
   var onSelect = React.useCallback(function (selection) {
@@ -146,6 +168,8 @@ var MenuImperative_ = /*#__PURE__*/React.forwardRef(function Menu(_ref, forwardR
       return createSensors(ref, circular, onChangeHighlight);
     }, [circular, onChangeHighlight]),
     handleItemHover = _useMemo.handleItemHover,
+    handleItemFocus = _useMemo.handleItemFocus,
+    handleItemBlur = _useMemo.handleItemBlur,
     defaultKeyDownNavigationHandler = _useMemo.handleKeyDown,
     highlight = _useMemo.highlight,
     highlighted = _useMemo.highlighted,
@@ -157,7 +181,8 @@ var MenuImperative_ = /*#__PURE__*/React.forwardRef(function Menu(_ref, forwardR
     prev = _useMemo.prev,
     next = _useMemo.next,
     select = _useMemo.select,
-    updateSelectCallback = _useMemo.updateSelectCallback;
+    updateSelectCallback = _useMemo.updateSelectCallback,
+    setIsDragging = _useMemo.setIsDragging;
   var commonA11yOptionProps = _defineProperty({
     role: role,
     id: id
@@ -189,19 +214,53 @@ var MenuImperative_ = /*#__PURE__*/React.forwardRef(function Menu(_ref, forwardR
   });
   useEffect(rehighlightCurrent);
   function onDragStart(start, provided) {
-    // TODO Replace with localized instructions
-    provided.announce(NO_ANNOUCEMENT);
+    var _findGroupByDroppable, _findGroupByDroppable2;
     var itemInfo = JSON.parse(start.draggableId);
-    setCurrentlyDroppableIn(itemInfo.droppableIn);
-  }
-  function onDragUpdate(_update, provided) {
-    // TODO Replace with localized instructions
-    provided.announce(NO_ANNOUCEMENT);
+    // flushSync needed to ensure proper behavior in Safari
+    flushSync(function () {
+      return setCurrentlyDroppableIn(itemInfo.droppableIn);
+    });
+    setIsDragging(true);
+    var startPosition = start.source.index + 1;
+    var startGroupTitle = (_findGroupByDroppable = (_findGroupByDroppable2 = findGroupByDroppableId(ref.current, start.source.droppableId)) === null || _findGroupByDroppable2 === void 0 ? void 0 : _findGroupByDroppable2.getAttribute('data-title')) !== null && _findGroupByDroppable !== void 0 ? _findGroupByDroppable : '';
+    var announcement = startGroupTitle ? i18n.t('core.menuImperative.dragStartWithGroup', {
+      startPosition: startPosition,
+      startGroupTitle: startGroupTitle
+    }) : i18n.t('core.menuImperative.dragStart', {
+      startPosition: startPosition
+    });
+    provided.announce(announcement);
   }
+  var onDragUpdate = React.useCallback(function (_update, provided) {
+    var _findGroupByDroppable3, _findGroupByDroppable4, _update$destination, _findGroupByDroppable5, _findGroupByDroppable6;
+    var startPosition = _update.source.index + 1;
+    var startGroupTitle = (_findGroupByDroppable3 = (_findGroupByDroppable4 = findGroupByDroppableId(ref.current, _update.source.droppableId)) === null || _findGroupByDroppable4 === void 0 ? void 0 : _findGroupByDroppable4.getAttribute('data-title')) !== null && _findGroupByDroppable3 !== void 0 ? _findGroupByDroppable3 : '';
+    var endPosition = ((_update$destination = _update.destination) === null || _update$destination === void 0 ? void 0 : _update$destination.index) + 1;
+    var endGroupTitle = _update.destination ? (_findGroupByDroppable5 = (_findGroupByDroppable6 = findGroupByDroppableId(ref.current, _update.destination.droppableId)) === null || _findGroupByDroppable6 === void 0 ? void 0 : _findGroupByDroppable6.getAttribute('data-title')) !== null && _findGroupByDroppable5 !== void 0 ? _findGroupByDroppable5 : '' : '';
+    var announcement = startGroupTitle === endGroupTitle || !endGroupTitle || !startGroupTitle ? i18n.t('core.menuImperative.dragUpdate', {
+      startPosition: startPosition,
+      endPosition: endPosition
+    }) : i18n.t('core.menuImperative.dragUpdateWithGroup', {
+      startPosition: startPosition,
+      endPosition: endPosition,
+      startGroupTitle: startGroupTitle,
+      endGroupTitle: endGroupTitle
+    });
+    provided.announce(announcement);
+  }, []);
   var onDragEnd = React.useCallback(function (result, provided) {
-    // TODO Replace with localized instructions
-    provided.announce(NO_ANNOUCEMENT);
+    var _result$destination, _findGroupByDroppable7, _findGroupByDroppable8;
+    var endPosition = ((_result$destination = result.destination) === null || _result$destination === void 0 ? void 0 : _result$destination.index) + 1;
+    var endGroupTitle = result.destination ? (_findGroupByDroppable7 = (_findGroupByDroppable8 = findGroupByDroppableId(ref.current, result.destination.droppableId)) === null || _findGroupByDroppable8 === void 0 ? void 0 : _findGroupByDroppable8.getAttribute('data-title')) !== null && _findGroupByDroppable7 !== void 0 ? _findGroupByDroppable7 : '' : '';
+    var announcement = endGroupTitle ? i18n.t('core.menuImperative.dragEndWithGroup', {
+      endPosition: endPosition,
+      endGroupTitle: endGroupTitle
+    }) : i18n.t('core.menuImperative.dragEnd', {
+      endPosition: endPosition
+    });
+    provided.announce(announcement);
     setCurrentlyDroppableIn([]);
+    setIsDragging(false);
     if (result.reason === 'DROP' && result.destination) {
       var itemInfo = JSON.parse(result.draggableId);
       onDragEnd_({
@@ -210,7 +269,7 @@ var MenuImperative_ = /*#__PURE__*/React.forwardRef(function Menu(_ref, forwardR
         destination: result.destination
       });
     }
-  }, [onDragEnd_]);
+  }, [onDragEnd_, setIsDragging]);
 
   // for context, used by Menu.Options
   var onScrollBottom = React.useCallback(function (e) {
@@ -222,7 +281,10 @@ var MenuImperative_ = /*#__PURE__*/React.forwardRef(function Menu(_ref, forwardR
     value: {
       a11yOptionsProps: a11yOptionsProps,
       currentlyDroppableIn: currentlyDroppableIn,
+      dndInstructionsId: dndInstructionsId,
       onHoverItem: handleItemHover,
+      onFocusItem: handleItemFocus,
+      onBlurItem: handleItemBlur,
       onScrollBottom: onScrollBottom,
       onSelect: onSelect,
       role: role
@@ -233,15 +295,19 @@ var MenuImperative_ = /*#__PURE__*/React.forwardRef(function Menu(_ref, forwardR
     onDragStart: onDragStart,
     onDragUpdate: onDragUpdate,
     onDragEnd: onDragEnd
-  }, /*#__PURE__*/React.createElement(StyledMenu, props))));
+  }, /*#__PURE__*/React.createElement(StyledMenu, props))), /*#__PURE__*/React.createElement("div", {
+    id: dndInstructionsId,
+    hidden: true
+  }, i18n.t('core.menuImperative.dragAndDropInstructions')));
 });
 export var Group = /*#__PURE__*/React.forwardRef(function Group(_ref2, ref) {
   var clickable = _ref2.clickable,
     _ref2$item = _ref2.item,
     item = _ref2$item === void 0 ? 'group' : _ref2$item,
-    id = _ref2.id,
     label = _ref2.label,
+    labelId = _ref2.labelId,
     children = _ref2.children,
+    id = _ref2.id,
     props = _objectWithoutProperties(_ref2, _excluded2);
   var _useLabel = useLabel({
       id: id,
@@ -250,10 +316,19 @@ export var Group = /*#__PURE__*/React.forwardRef(function Group(_ref2, ref) {
     }),
     fieldProps = _useLabel.fieldProps,
     labelProps = _useLabel.labelProps;
+  if (labelId) {
+    fieldProps = _objectSpread(_objectSpread({}, fieldProps), {}, {
+      'aria-labelledby': labelId
+    });
+    labelProps = _objectSpread(_objectSpread({}, labelProps), {}, {
+      id: labelId
+    });
+  }
   return /*#__PURE__*/React.createElement(StyledGroup, _extends({
     ref: ref,
     "data-group": true,
     "data-value": JSON.stringify(item),
+    "data-title": label,
     role: label ? 'group' : 'separator'
   }, fieldProps, props), /*#__PURE__*/React.createElement(StyledGroupLabel, labelProps, label !== null && label !== void 0 ? label : children), label ? children : null);
 });
@@ -278,7 +353,8 @@ function findDraggableRecursively(children, draggableId) {
 }
 export function Droppable(_ref3) {
   var id = _ref3.id,
-    children = _ref3.children;
+    children = _ref3.children,
+    props = _objectWithoutProperties(_ref3, _excluded3);
   var ctx = useMenuContext();
   var cloneZIndex = useZIndexContext().value;
   function renderItemClone(provided, _snapshot, rubric) {
@@ -289,7 +365,8 @@ export function Droppable(_ref3) {
     return /*#__PURE__*/React.createElement(ClonedItem, _extends({
       hasCheckbox: (draggingChild === null || draggingChild === void 0 ? void 0 : draggingChild.type) === CheckboxItem,
       provided: provided,
-      cloneZIndex: cloneZIndex
+      cloneZIndex: cloneZIndex,
+      dndInstructionsId: ctx.dndInstructionsId
     }, cloneProps));
   }
   return /*#__PURE__*/React.createElement(DndDroppable, {
@@ -297,10 +374,13 @@ export function Droppable(_ref3) {
     isDropDisabled: !ctx.currentlyDroppableIn.includes(id),
     renderClone: renderItemClone
   }, function (provided, snapshot) {
-    return /*#__PURE__*/React.createElement(StyledDroppable, {
+    return /*#__PURE__*/React.createElement(StyledDroppable, _extends({
       ref: provided.innerRef,
-      "data-droppable": true
-    }, children, provided.placeholder);
+      "data-droppable": true,
+      "data-droppable-id": id
+    }, props), /*#__PURE__*/React.createElement(IsInsideDroppableContext.Provider, {
+      value: true
+    }, children, provided.placeholder));
   });
 }
 
@@ -315,8 +395,10 @@ var ClonedItem = function ClonedItem(_ref4) {
     _ref4$selected = _ref4.selected,
     selected = _ref4$selected === void 0 ? false : _ref4$selected,
     provided = _ref4.provided,
-    props = _objectWithoutProperties(_ref4, _excluded3);
+    dndInstructionsId = _ref4.dndInstructionsId,
+    props = _objectWithoutProperties(_ref4, _excluded4);
   var itemProps = _objectSpread(_objectSpread({}, props), {}, {
+    'aria-describedby': dndInstructionsId,
     $selected: selected
   });
   var itemChildren = hasCheckbox ? /*#__PURE__*/React.createElement(Checkbox, {
@@ -362,9 +444,10 @@ forwardRef) {
     draggableId = _ref5.draggableId,
     draggableIndex = _ref5.draggableIndex,
     droppableIn = _ref5.droppableIn,
-    props = _objectWithoutProperties(_ref5, _excluded4);
+    props = _objectWithoutProperties(_ref5, _excluded5);
   var id = useId(_id);
   var ctx = useMenuContext();
+  var isInsideDroppable = useIsInsideDroppable();
   var onClick = React.useCallback(function (event) {
     if (disabled) return;
     onClick_(event);
@@ -381,20 +464,30 @@ forwardRef) {
   var ariaSelected;
   if (ctx.role === 'listbox') {
     contextRole = 'option';
-    ariaSelected = selected ? true : undefined;
   } else if (ctx.role === 'menu') {
     contextRole = 'menuitem';
   }
+  if ([role, contextRole].includes('option')) {
+    ariaSelected = selected ? true : undefined;
+  }
+  var ariaDescribedBy = isInsideDroppable ? ctx.dndInstructionsId : undefined;
   var itemProps = _objectSpread(_objectSpread({
     'aria-disabled': disabled ? true : undefined,
-    'aria-selected': ariaSelected
+    'aria-describedby': ariaDescribedBy
   }, props), {}, {
+    'aria-selected': ariaSelected,
     id: id,
     role: role !== null && role !== void 0 ? role : contextRole,
     onClick: onClick,
     onMouseMove: function onMouseMove(e) {
       return ctx.onHoverItem(e.currentTarget);
     },
+    onFocus: function onFocus(e) {
+      return ctx.onFocusItem(e.currentTarget);
+    },
+    onBlur: function onBlur(e) {
+      return ctx.onBlurItem(e.currentTarget);
+    },
     'data-group': false,
     'data-value': JSON.stringify(item),
     'data-selected': selected,
@@ -420,8 +513,7 @@ forwardRef) {
         as: as
       }, provided.draggableProps, provided.dragHandleProps, itemProps, {
         $isDraggable: !disabled,
-        style: _objectSpread(_objectSpread({}, provided.draggableProps.style), itemProps.style),
-        tabIndex: -1
+        style: _objectSpread(_objectSpread({}, provided.draggableProps.style), itemProps.style)
       }), !disabled && /*#__PURE__*/React.createElement(StyledGrip, null, /*#__PURE__*/React.createElement(Grip, {
         color: colors.gray45
       })), children);
@@ -444,7 +536,7 @@ export var CheckboxItem = /*#__PURE__*/React.forwardRef(function CheckboxItem(_r
     _ref6$children = _ref6.children,
     children = _ref6$children === void 0 ? null : _ref6$children,
     role = _ref6.role,
-    props = _objectWithoutProperties(_ref6, _excluded5);
+    props = _objectWithoutProperties(_ref6, _excluded6);
   var ctx = useMenuContext();
   var contextRole;
   var ariaChecked;
@@ -494,7 +586,7 @@ export var Search = function Search(_ref7) {
     placeholder = _ref7.placeholder,
     _onChange = _ref7.onChange,
     valueProp = _ref7.value,
-    props = _objectWithoutProperties(_ref7, _excluded6);
+    props = _objectWithoutProperties(_ref7, _excluded7);
   var I18n = useI18nContext();
   var isControlled = valueProp !== undefined;
   var _React$useState3 = React.useState(''),
@@ -533,7 +625,7 @@ export var Header = /*#__PURE__*/React.forwardRef(function Header(_ref8, ref) {
 export var Footer = /*#__PURE__*/React.forwardRef(function Footer(_ref9, ref) {
   var _ref9$padding = _ref9.padding,
     padding = _ref9$padding === void 0 ? 'md lg' : _ref9$padding,
-    props = _objectWithoutProperties(_ref9, _excluded7);
+    props = _objectWithoutProperties(_ref9, _excluded8);
   return /*#__PURE__*/React.createElement(StyledFooter, _extends({
     ref: ref,
     padding: padding