@procore/core-react 12.50.1 → 12.52.0

package/dist/Calendar/Calendar.styles.js

@@ -8,37 +8,37 @@ var cellSize = 36; // TODO one-off size
 
 export var StyledContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledContainer",
-  componentId: "core-12_50_1__sc-1kkl86t-0"
+  componentId: "core-12_52_0__sc-1kkl86t-0"
 })(["", ";display:inline-flex;flex-direction:column;padding:", "px ", "px ", "px;"], getTypographyIntent('small'), spacing.lg, spacing.md, spacing.md);
 export var StyledPaginator = /*#__PURE__*/styled(Button).withConfig({
   displayName: "StyledPaginator",
-  componentId: "core-12_50_1__sc-1kkl86t-1"
+  componentId: "core-12_52_0__sc-1kkl86t-1"
 })(["flex:0 0 auto;"]);
 export var StyledSelect = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledSelect",
-  componentId: "core-12_50_1__sc-1kkl86t-2"
+  componentId: "core-12_52_0__sc-1kkl86t-2"
 })(["display:inline-flex;flex:1 1 0;margin-left:", "px;> div{font-size:12px;}"], spacing.sm);
 export var StyledNavigation = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledNavigation",
-  componentId: "core-12_50_1__sc-1kkl86t-3"
+  componentId: "core-12_52_0__sc-1kkl86t-3"
 })(["display:inline-flex;margin-bottom:", "px;", " + ", ",", " + ", "{margin-left:", "px;}"], spacing.sm, StyledPaginator, StyledSelect, StyledSelect, StyledPaginator, spacing.sm);
 export var StyledCell = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledCell",
-  componentId: "core-12_50_1__sc-1kkl86t-4"
+  componentId: "core-12_52_0__sc-1kkl86t-4"
 })(["align-items:center;display:inline-flex;height:", "px;justify-content:center;width:", "px;"], cellSize, cellSize);
 export var StyledDayHeaderCell = /*#__PURE__*/styled(StyledCell).withConfig({
   displayName: "StyledDayHeaderCell",
-  componentId: "core-12_50_1__sc-1kkl86t-5"
+  componentId: "core-12_52_0__sc-1kkl86t-5"
 })(["cursor:default;font-weight:", ";"], typographyWeights.semibold);
 export var StyledCellButton = /*#__PURE__*/styled.button.attrs({
   type: 'button'
 }).withConfig({
   displayName: "StyledCellButton",
-  componentId: "core-12_50_1__sc-1kkl86t-6"
+  componentId: "core-12_52_0__sc-1kkl86t-6"
 })(["align-items:center;display:inline-flex;height:", "px;justify-content:center;width:", "px;cursor:pointer;border:none;background:none;padding:0;font:inherit;color:inherit;"], cellSize, cellSize);
 export var StyledDayCell = /*#__PURE__*/styled(StyledCellButton).withConfig({
   displayName: "StyledDayCell",
-  componentId: "core-12_50_1__sc-1kkl86t-7"
+  componentId: "core-12_52_0__sc-1kkl86t-7"
 })(["", ""], function (_ref) {
   var _ref$$disabled = _ref.$disabled,
     $disabled = _ref$$disabled === void 0 ? false : _ref$$disabled,
@@ -61,6 +61,6 @@ export var StyledDayCell = /*#__PURE__*/styled(StyledCellButton).withConfig({
 });
 export var StyledWeekRow = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledWeekRow",
-  componentId: "core-12_50_1__sc-1kkl86t-8"
+  componentId: "core-12_52_0__sc-1kkl86t-8"
 })(["display:inline-flex;padding-bottom:2px;user-select:none;&:last-child{padding-bottom:0;}", "{&:first-child{border-top-left-radius:", "px;border-bottom-left-radius:", "px;}&:last-child{border-top-right-radius:", "px;border-bottom-right-radius:", "px;}}"], StyledCell, borderRadius.md, borderRadius.md, borderRadius.md, borderRadius.md);
 //# sourceMappingURL=Calendar.styles.js.map

package/dist/Card/Card.styles.js

@@ -4,7 +4,7 @@ import { colors } from '../_styles/colors';
 import { getShadow } from '../_styles/shadows';
 export var StyledCardContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledCardContainer",
-  componentId: "core-12_50_1__sc-2fii7b-0"
+  componentId: "core-12_52_0__sc-2fii7b-0"
 })(["background-color:", ";border-radius:", "px;transition:box-shadow 0.2s ease-in-out;", " ", ""], colors.white, borderRadius.md, function (_ref) {
   var $level = _ref.$level,
     $shadowStrength = _ref.$shadowStrength;

package/dist/Checkbox/Checkbox.styles.js

@@ -9,7 +9,7 @@ export var dataQa = {
 export var checkboxSize = 20;
 export var StyledCheckboxContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledCheckboxContainer",
-  componentId: "core-12_50_1__sc-u63tye-0"
+  componentId: "core-12_52_0__sc-u63tye-0"
 })(["color:", ";display:block;position:relative;& + &{margin-top:", "px;}"], colors.gray15, spacing.md);
 function StyledIndeterminate() {
   return css(["background-color:", ";content:'';height:2px;left:5px;position:absolute;top:9px;width:10px;border:none;"], colors.white);
@@ -48,18 +48,18 @@ function StyledFakeIndeterminate() {
 }
 export var StyledCheckboxLabelWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledCheckboxLabelWrapper",
-  componentId: "core-12_50_1__sc-u63tye-1"
+  componentId: "core-12_52_0__sc-u63tye-1"
 })(["padding-left:", "px;min-height:", "px;position:relative;", ""], function (_ref) {
   var $hasLabel = _ref.$hasLabel;
   return $hasLabel ? checkboxSize + spacing.md : checkboxSize;
 }, checkboxSize, getTypographyIntent('body'));
 export var StyledCheckboxLabel = /*#__PURE__*/styled.label.withConfig({
   displayName: "StyledCheckboxLabel",
-  componentId: "core-12_50_1__sc-u63tye-2"
+  componentId: "core-12_52_0__sc-u63tye-2"
 })(["user-select:none;&:before{background-color:", ";border-radius:2px;border:2px solid ", ";content:'';display:inline-block;height:", "px;width:", "px;min-width:", "px;top:0;left:0;position:absolute;}"], colors.white, colors.gray50, checkboxSize, checkboxSize, checkboxSize);
 export var StyledCheckboxInput = /*#__PURE__*/styled.input.withConfig({
   displayName: "StyledCheckboxInput",
-  componentId: "core-12_50_1__sc-u63tye-3"
+  componentId: "core-12_52_0__sc-u63tye-3"
 })(["left:0;opacity:0;position:absolute;top:0;&:disabled:checked + ", " > ", ":before{background-color:", ";border-color:", ";}&:disabled + ", " > ", ":before{background-color:", ";border-color:", ";}", " &:checked + ", " > ", "{&:before{background-color:", ";border-color:", ";color:", ";}&:after{", "}}&:focus:not(:disabled),&[data-qa=", "]:not(:disabled){+ ", " > ", ":before{", "}}", ""], StyledCheckboxLabelWrapper, StyledCheckboxLabel, colors.blue85, colors.blue85, StyledCheckboxLabelWrapper, StyledCheckboxLabel, function (_ref2) {
   var $indeterminate = _ref2.$indeterminate;
   return $indeterminate ? colors.gray85 : colors.white;
@@ -83,7 +83,7 @@ export var StyledCheckboxInput = /*#__PURE__*/styled.input.withConfig({
 });
 export var StyledFakeCheckboxLabel = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledFakeCheckboxLabel",
-  componentId: "core-12_50_1__sc-u63tye-4"
+  componentId: "core-12_52_0__sc-u63tye-4"
 })(["", " display:block;min-height:", "px;padding-left:", "px;position:relative;user-select:none;cursor:pointer;", ""], getTypographyIntent('body'), checkboxSize, function (_ref7) {
   var children = _ref7.children;
   return children ? checkboxSize + spacing.md : checkboxSize;
@@ -99,7 +99,7 @@ export var StyledFakeCheckboxLabel = /*#__PURE__*/styled.span.withConfig({
 });
 export var StyledFakeCheckboxInput = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledFakeCheckboxInput",
-  componentId: "core-12_50_1__sc-u63tye-5"
+  componentId: "core-12_52_0__sc-u63tye-5"
 })(["width:", "px;height:", "px;border-radius:2px;border:2px solid ", ";position:absolute;", " ", " ", " ", ""], checkboxSize, checkboxSize, colors.gray70, function (_ref9) {
   var $checked = _ref9.$checked,
     $disabled = _ref9.$disabled,

package/dist/ContactItem/ContactItem.styles.js

@@ -7,23 +7,23 @@ import { getLineClamp } from '../_styles/mixins';
 import { spacing } from '../_styles/spacing';
 export var ContactItemAvatarWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "ContactItemAvatarWrapper",
-  componentId: "core-12_50_1__sc-1c4z9pn-0"
+  componentId: "core-12_52_0__sc-1c4z9pn-0"
 })(["display:inline-flex;align-self:flex-start;"]);
 export var ContactItemAvatar = /*#__PURE__*/styled(Avatar).withConfig({
   displayName: "ContactItemAvatar",
-  componentId: "core-12_50_1__sc-1c4z9pn-1"
+  componentId: "core-12_52_0__sc-1c4z9pn-1"
 })(["cursor:inherit;font-weight:", ";"], typographyWeights.bold);
 export var ContactItemTextWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "ContactItemTextWrapper",
-  componentId: "core-12_50_1__sc-1c4z9pn-2"
+  componentId: "core-12_52_0__sc-1c4z9pn-2"
 })(["overflow:hidden;margin-left:", "px;"], spacing.sm);
 export var ContactItemText = /*#__PURE__*/styled(Typography).withConfig({
   displayName: "ContactItemText",
-  componentId: "core-12_50_1__sc-1c4z9pn-3"
+  componentId: "core-12_52_0__sc-1c4z9pn-3"
 })(["display:flex;", ""], getLineClamp());
 export var ContactItemWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "ContactItemWrapper",
-  componentId: "core-12_50_1__sc-1c4z9pn-4"
+  componentId: "core-12_52_0__sc-1c4z9pn-4"
 })(["display:flex;flex-direction:row;align-items:center;padding:", "px ", "px ", "px ", "px;", " ", " ", ""], spacing.sm, spacing.lg, spacing.sm, spacing.sm, function (_ref) {
   var $disabled = _ref.$disabled,
     $clickable = _ref.$clickable;

package/dist/Content/Content.styles.js

@@ -5,10 +5,10 @@ import { mediaIE11Hack } from '../_styles/media';
 import { spacing } from '../_styles/spacing';
 export var StyledContent = /*#__PURE__*/styled(Box).withConfig({
   displayName: "StyledContent",
-  componentId: "core-12_50_1__sc-10y57gh-0"
+  componentId: "core-12_52_0__sc-10y57gh-0"
 })(["> * + *,> * + h1,> * + h2,> * + h3,> * + h4,> * + p,> * + ul,> * + ol{margin-top:", "px;}> ", " + *{margin-top:0;}> ", ",> ", " > ", ",> ", "{", "{min-height:0;margin-bottom:", "px;}&:last-child ", "{margin-bottom:0;}}"], spacing.lg, StyledFormRow, StyledFormRow, StyledForm, StyledFormRow, StyledFormRow, StyledFormFieldBanner, spacing.md, StyledFormFieldBanner);
 export var StyledActions = /*#__PURE__*/styled(Box).withConfig({
   displayName: "StyledActions",
-  componentId: "core-12_50_1__sc-10y57gh-1"
+  componentId: "core-12_52_0__sc-10y57gh-1"
 })(["display:flex;justify-content:flex-end;gap:", "px;@media ", "{& > * + *{margin-left:", "px;}}"], spacing.sm, mediaIE11Hack, spacing.sm);
 //# sourceMappingURL=Content.styles.js.map

package/dist/DateInput/DateInput.styles.js

@@ -10,15 +10,15 @@ var inputHeight = 36; // TODO one-off
 var disabledCss = /*#__PURE__*/css(["background-color:", ";color:", ";border-width:1px;border-style:solid;border-color:", ";pointer-events:none;svg{color:", ";}"], colors.gray94, colors.gray45, colors.gray50, colors.gray45);
 export var StyledCalendar = /*#__PURE__*/styled(Calendar).withConfig({
   displayName: "StyledCalendar",
-  componentId: "core-12_50_1__sc-w10btf-0"
+  componentId: "core-12_52_0__sc-w10btf-0"
 })(["color:", ";"], colors.gray45);
 export var StyledDateSegmentsContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledDateSegmentsContainer",
-  componentId: "core-12_50_1__sc-w10btf-1"
+  componentId: "core-12_52_0__sc-w10btf-1"
 })(["min-width:104px;display:flex;gap:", "px;"], spacing.xs);
 export var StyledDateInputSegment = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledDateInputSegment",
-  componentId: "core-12_50_1__sc-w10btf-2"
+  componentId: "core-12_52_0__sc-w10btf-2"
 })(["", " outline:none;text-align:center;&:focus{background-color:", ";}&::selection{background-color:transparent;}&[data-placeholder='true']{color:", ";}"], getTypographyIntent('body'), colors.blue96, function (_ref) {
   var $disabled = _ref.$disabled;
   return $disabled ? colors.gray70 : colors.gray45;
@@ -29,15 +29,15 @@ export var StyledDateInputDelimiter = /*#__PURE__*/styled.span.attrs(function (p
   };
 }).withConfig({
   displayName: "StyledDateInputDelimiter",
-  componentId: "core-12_50_1__sc-w10btf-3"
+  componentId: "core-12_52_0__sc-w10btf-3"
 })(["", " user-select:none;"], getTypographyIntent('body'));
 export var StyledDateInputIconContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledDateInputIconContainer",
-  componentId: "core-12_50_1__sc-w10btf-4"
+  componentId: "core-12_52_0__sc-w10btf-4"
 })(["display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;margin:0 0 0 ", "px;height:24px;width:24px;"], spacing.xs);
 export var StyledDateInput = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledDateInput",
-  componentId: "core-12_50_1__sc-w10btf-5"
+  componentId: "core-12_52_0__sc-w10btf-5"
 })(["align-items:center;border-color:", ";border-radius:4px;border-style:solid;border-width:1px;display:inline-flex;flex-direction:row;height:", "px;justify-content:center;padding:0 ", "px 0 ", "px;&::placeholder{color:", ";}", " &:focus-within,&[data-qa=", "]{", ";}&:disabled{", "}", " ", ""], colors.gray50, inputHeight, spacing.xs, spacing.sm, colors.gray45, function (_ref2) {
   var $error = _ref2.$error;
   return !$error && css(["&:hover,&[data-qa=", "]{border-color:", ";}"], dataQa.hovered, colors.gray20);

package/dist/DetailPage/DetailPage.styles.js

@@ -9,32 +9,32 @@ import { colors } from '../_styles/colors';
 import { spacing } from '../_styles/spacing';
 export var StyledDetailPage = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledDetailPage",
-  componentId: "core-12_50_1__sc-cytnlo-0"
+  componentId: "core-12_52_0__sc-cytnlo-0"
 })(["background-color:", ";height:100%;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:space-between;"], colors.gray96);
 export var StyledDetailPageBody = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledDetailPageBody",
-  componentId: "core-12_50_1__sc-cytnlo-1"
+  componentId: "core-12_52_0__sc-cytnlo-1"
 })(["padding-bottom:", "px;> ", "{margin-top:", "px;}"], spacing.xl, StyledRequiredContainer, spacing.lg);
 export var StyledDetailPageFooterNotation = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledDetailPageFooterNotation",
-  componentId: "core-12_50_1__sc-cytnlo-2"
+  componentId: "core-12_52_0__sc-cytnlo-2"
 })(["flex-grow:1;z-index:1;"]);
 export var StyledDetailPageFooter = /*#__PURE__*/styled(Page.Footer).withConfig({
   displayName: "StyledDetailPageFooter",
-  componentId: "core-12_50_1__sc-cytnlo-3"
+  componentId: "core-12_52_0__sc-cytnlo-3"
 })(["display:flex;padding:", "px 0;background-color:", ";justify-content:center;"], spacing.lg, colors.white);
 export var StyledDetailPageFooterActions = /*#__PURE__*/styled(Box).withConfig({
   displayName: "StyledDetailPageFooterActions",
-  componentId: "core-12_50_1__sc-cytnlo-4"
+  componentId: "core-12_52_0__sc-cytnlo-4"
 })(["", ""], getActions());
 var maxFooterContentWidth = 1920;
 export var StyledDetailPageFooterContent = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledDetailPageFooterContent",
-  componentId: "core-12_50_1__sc-cytnlo-5"
+  componentId: "core-12_52_0__sc-cytnlo-5"
 })(["width:100%;align-items:center;display:flex;justify-content:flex-end;padding:0 ", "px;max-width:", "px;"], spacing.xl, maxFooterContentWidth);
 var detailPageCardBorderRadius = 8;
 export var StyledDetailPageCard = /*#__PURE__*/styled(Card).withConfig({
   displayName: "StyledDetailPageCard",
-  componentId: "core-12_50_1__sc-cytnlo-6"
+  componentId: "core-12_52_0__sc-cytnlo-6"
 })(["width:100%;border-radius:", "px;margin-top:", "px;margin-bottom:", "px;& + &{margin-top:", "px;}&:first-child{margin-top:0;}&:last-child{margin-bottom:", "px;}& > ", "{padding:", "px ", "px 0 ", "px;max-width:100%;&:empty{padding:0;}}& > ", " + ", " > ", "{border-top:0;}> .", ":first-child + .", ",> ", " + .", " + .", "{margin-top:", "px;}"], detailPageCardBorderRadius, spacing.lg, spacing.sm, spacing.sm, spacing.lg, StyledPageBanner, spacing.lg, spacing.lg, spacing.lg, StyledPageBanner, StyledSection, StyledSectionInner, sectionClassnames.levelAnonymous, sectionClassnames.level(2), StyledPageBanner, sectionClassnames.levelAnonymous, sectionClassnames.level(2), spacing.xxl * -1);
 //# sourceMappingURL=DetailPage.styles.js.map

package/dist/Dropdown/Dropdown.styles.js

@@ -5,15 +5,15 @@ import { Card } from '../Card/Card';
 import { Spinner } from '../Spinner/Spinner';
 export var StyledDropdownMenu = /*#__PURE__*/styled(Card).withConfig({
   displayName: "StyledDropdownMenu",
-  componentId: "core-12_50_1__sc-ufsy2q-0"
+  componentId: "core-12_52_0__sc-ufsy2q-0"
 })(["display:flex;max-height:40vh;max-width:248px;min-width:inherit;"]);
 export var StyledDropdownSpinner = /*#__PURE__*/styled(Spinner).withConfig({
   displayName: "StyledDropdownSpinner",
-  componentId: "core-12_50_1__sc-ufsy2q-1"
+  componentId: "core-12_52_0__sc-ufsy2q-1"
 })(["margin:0 6px;"]);
 export var StyledDropdownButton = /*#__PURE__*/styled(Button).withConfig({
   displayName: "StyledDropdownButton",
-  componentId: "core-12_50_1__sc-ufsy2q-2"
+  componentId: "core-12_52_0__sc-ufsy2q-2"
 })(["pointer-events:", ";", ""], function (_ref) {
   var disabled = _ref.disabled,
     $loading = _ref.$loading;

package/dist/DropdownFlyout/DropdownFlyout.helpers.d.ts

@@ -8,6 +8,7 @@ export declare function useDropdownFlyout({ flyoutOptions, onClick: _onClick, on
     flyoutOptions: FlyoutOption[];
 }): {
     isFocused: boolean;
+    isFocusVisible: (option: FlyoutOption) => boolean;
     isMouseOver: boolean;
     isOpen: boolean;
     options: FlyoutOption[];
@@ -32,6 +33,7 @@ export declare const DropdownFlyoutContext: React.Context<{
     collapse: (option: FlyoutOption) => void;
     optionRenderer: (option: DropdownOption) => React.ReactNode;
     isExpanded: (option: FlyoutOption) => boolean;
+    isFocusVisible: (option: FlyoutOption) => boolean;
     isHighlighted: (option: FlyoutOption) => boolean;
 }>;
 export declare const useDropdownFlyoutContext: () => {
@@ -40,5 +42,6 @@ export declare const useDropdownFlyoutContext: () => {
     collapse: (option: FlyoutOption) => void;
     optionRenderer: (option: DropdownOption) => React.ReactNode;
     isExpanded: (option: FlyoutOption) => boolean;
+    isFocusVisible: (option: FlyoutOption) => boolean;
     isHighlighted: (option: FlyoutOption) => boolean;
 };

package/dist/DropdownFlyout/DropdownFlyout.helpers.js

@@ -59,12 +59,17 @@ function reducer(state, action) {
       });
     case 'setMouseOver':
       return _objectSpread(_objectSpread({}, state), {}, {
-        isMouseOver: action.isMouseOver
+        isMouseOver: action.isMouseOver,
+        keyboardNavigated: action.isMouseOver ? false : state.keyboardNavigated
       });
     case 'setFocused':
       return _objectSpread(_objectSpread({}, state), {}, {
         isFocused: action.isFocused
       });
+    case 'setKeyboardNavigated':
+      return _objectSpread(_objectSpread({}, state), {}, {
+        keyboardNavigated: true
+      });
     case 'updateOptions':
       return _objectSpread(_objectSpread({}, state), {}, {
         options: action.options
@@ -116,7 +121,8 @@ export function useDropdownFlyout(_ref) {
       highlighted: getFirst(flyoutOptions),
       isMouseOver: false,
       isFocused: false,
-      isOpen: false
+      isOpen: false,
+      keyboardNavigated: false
     }),
     _React$useReducer2 = _slicedToArray(_React$useReducer, 2),
     _React$useReducer2$ = _React$useReducer2[0],
@@ -126,6 +132,7 @@ export function useDropdownFlyout(_ref) {
     isOpen = _React$useReducer2$.isOpen,
     isMouseOver = _React$useReducer2$.isMouseOver,
     isFocused = _React$useReducer2$.isFocused,
+    keyboardNavigated = _React$useReducer2$.keyboardNavigated,
     dispatch = _React$useReducer2[1];
   var setMouseOver = React.useCallback(function (isMouseOver) {
     return dispatch({
@@ -149,6 +156,13 @@ export function useDropdownFlyout(_ref) {
     });
     return (isMouseOver || isFocused) && isCorrectId;
   };
+  var isFocusVisible = function isFocusVisible(option) {
+    var parentIds = collectParentIds(options, highlighted.id);
+    var isCorrectId = option.id === highlighted.id || parentIds.some(function (id) {
+      return id === option.id;
+    });
+    return keyboardNavigated && isCorrectId;
+  };
   var findOptionById = React.useCallback(function (id) {
     return findById(options, id);
   }, [options]);
@@ -232,9 +246,15 @@ export function useDropdownFlyout(_ref) {
       case 'Enter':
         e.preventDefault();
         if (!isOpen && isFocused) {
+          dispatch({
+            type: 'setKeyboardNavigated'
+          });
           openDropdown();
         } else {
           if (hasChildren(highlighted.origin)) {
+            dispatch({
+              type: 'setKeyboardNavigated'
+            });
             traversingHighlight('children');
           } else {
             onClick(highlighted);
@@ -259,11 +279,17 @@ export function useDropdownFlyout(_ref) {
       case 'ArrowDown':
       case 'Down':
         e.preventDefault();
+        dispatch({
+          type: 'setKeyboardNavigated'
+        });
         traversingHighlight('next');
         break;
       case 'ArrowUp':
       case 'Up':
         e.preventDefault();
+        dispatch({
+          type: 'setKeyboardNavigated'
+        });
         traversingHighlight('prev');
         break;
     }
@@ -283,6 +309,7 @@ export function useDropdownFlyout(_ref) {
   }, [flyoutOptions]);
   return {
     isFocused: isFocused,
+    isFocusVisible: isFocusVisible,
     isMouseOver: isMouseOver,
     isOpen: isOpen,
     options: options,
@@ -312,6 +339,7 @@ export var DropdownFlyoutContext = /*#__PURE__*/React.createContext({
   collapse: noop,
   optionRenderer: defaultOptionRenderer,
   isExpanded: returnFalse,
+  isFocusVisible: returnFalse,
   isHighlighted: returnFalse
 });
 export var useDropdownFlyoutContext = function useDropdownFlyoutContext() {

package/dist/DropdownFlyout/DropdownFlyout.helpers.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownFlyout.helpers.js","names":["React","ulid","StyledDropdownFlyoutExpandIcon","StyledDropdownFlyoutLabel","rootId","noop","returnFalse","getFirst","arr","isRootOption","optionId","hasChildren","option","Array","isArray","children","reducer","state","action","type","_objectSpread","highlighted","expanded","concat","_toConsumableArray","collectParentIds","options","id","isOpen","isMouseOver","isFocused","findById","initialValue","arguments","length","undefined","reduce","result","current","transformOption","parentId","acc","updatedOption","origin","useDropdownFlyout","_ref","flyoutOptions","_ref$onClick","onClick","_onClick","_onKeyDown","onKeyDown","_React$useReducer","useReducer","_React$useReducer2","_slicedToArray","_React$useReducer2$","dispatch","setMouseOver","useCallback","setFocused","isExpanded","includes","isHighlighted","parentIds","isCorrectId","some","findOptionById","expand","collapse","highlight","traversingHighlight","item","tier","optionIndex","findIndex","nextIndex","prevIndex","parentOption","closeDropdown","closeSelectedDropdown","e","composedPath","node","_dataset","dataset","flyout","openDropdown","key","preventDefault","_e$stopPropagation","stopPropagation","call","_e$stopPropagation2","useEffect","defaultOptionRenderer","createElement","Fragment","label","DropdownFlyoutContext","createContext","optionRenderer","useDropdownFlyoutContext","useContext"],"sources":["../../src/DropdownFlyout/DropdownFlyout.helpers.tsx"],"sourcesContent":["import React from 'react'\nimport { ulid } from 'ulid'\nimport {\n  StyledDropdownFlyoutExpandIcon,\n  StyledDropdownFlyoutLabel,\n} from './DropdownFlyout.styles'\nimport type {\n  Action,\n  DropdownFlyoutProps,\n  DropdownOption,\n  FlyoutOption,\n  FlyoutOptionId,\n  State,\n} from './DropdownFlyout.types'\nimport { rootId } from './DropdownFlyout.types'\n\nexport function noop() {}\n\nexport function returnFalse() {\n  return false\n}\n\nfunction getFirst<T extends any>(arr: T[]) {\n  return arr[0]\n}\nfunction isRootOption(optionId: FlyoutOptionId) {\n  return optionId === rootId\n}\n\nexport function hasChildren(option: DropdownOption) {\n  return Array.isArray(option.children)\n}\n\nfunction reducer(state: State, action: Action): State {\n  switch (action.type) {\n    case 'highlight':\n      return {\n        ...state,\n        highlighted: action.option,\n      }\n    case 'expand':\n      return {\n        ...state,\n        highlighted: action.option,\n        expanded: [\n          ...collectParentIds(state.options, action.option.id),\n          action.option.id,\n        ],\n      }\n    case 'collapse':\n      return {\n        ...state,\n        highlighted: action.option,\n        expanded: collectParentIds(state.options, action.option.id),\n      }\n    case 'close':\n      return {\n        ...state,\n        expanded: [],\n        highlighted: getFirst(state.options),\n        isOpen: false,\n      }\n    case 'open':\n      return {\n        ...state,\n        isOpen: true,\n      }\n    case 'setMouseOver':\n      return {\n        ...state,\n        isMouseOver: action.isMouseOver,\n      }\n    case 'setFocused':\n      return {\n        ...state,\n        isFocused: action.isFocused,\n      }\n    case 'updateOptions':\n      return {\n        ...state,\n        options: action.options,\n      }\n    default:\n      return state\n  }\n}\n\nfunction findById(\n  options: FlyoutOption[],\n  optionId: FlyoutOption['id'],\n  initialValue: FlyoutOption = getFirst(options)\n): FlyoutOption {\n  return options.reduce((result, current) => {\n    if (current.id === optionId) {\n      return current\n    }\n\n    if (current.children) {\n      return findById(current.children, optionId, result)\n    }\n\n    return result\n  }, initialValue)\n}\n\nexport function transformOption(\n  options: DropdownOption[],\n  parentId: FlyoutOption['parentId']\n): FlyoutOption[] {\n  return options.reduce<FlyoutOption[]>((acc, option) => {\n    const id = ulid()\n    const updatedOption = {\n      id,\n      parentId,\n      origin: option,\n      ...(Array.isArray(option.children) && {\n        children: transformOption(option.children, id),\n      }),\n    }\n\n    return [...acc, updatedOption]\n  }, [])\n}\n\nfunction collectParentIds(\n  options: FlyoutOption[],\n  optionId: FlyoutOption['id']\n): FlyoutOption['id'][] {\n  const option = findById(options, optionId)\n\n  if (!isRootOption(option.parentId)) {\n    return [...collectParentIds(options, option.parentId), option.parentId]\n  }\n  return [option.parentId]\n}\n\nexport function useDropdownFlyout({\n  flyoutOptions,\n  onClick: _onClick = noop,\n  onKeyDown: _onKeyDown,\n}: Pick<DropdownFlyoutProps, 'onClick' | 'onKeyDown'> & {\n  flyoutOptions: FlyoutOption[]\n}) {\n  const [\n    { options, expanded, highlighted, isOpen, isMouseOver, isFocused },\n    dispatch,\n  ] = React.useReducer(reducer, {\n    options: flyoutOptions,\n    expanded: [],\n    highlighted: getFirst(flyoutOptions),\n    isMouseOver: false,\n    isFocused: false,\n    isOpen: false,\n  })\n\n  const setMouseOver = React.useCallback(\n    (isMouseOver: boolean) => dispatch({ type: 'setMouseOver', isMouseOver }),\n    []\n  )\n\n  const setFocused = React.useCallback(\n    (isFocused: boolean) => dispatch({ type: 'setFocused', isFocused }),\n    []\n  )\n\n  const isExpanded = (option: FlyoutOption) => expanded.includes(option.id)\n\n  const isHighlighted = (option: FlyoutOption): boolean => {\n    const parentIds = collectParentIds(options, highlighted.id)\n    const isCorrectId =\n      option.id === highlighted.id || parentIds.some((id) => id === option.id)\n    return (isMouseOver || isFocused) && isCorrectId\n  }\n\n  const findOptionById = React.useCallback(\n    (id: FlyoutOptionId) => findById(options, id),\n    [options]\n  )\n\n  const expand = React.useCallback(\n    (option: FlyoutOption) =>\n      dispatch({\n        type: 'expand',\n        option,\n      }),\n    []\n  )\n\n  const collapse = React.useCallback(\n    (option: FlyoutOption) =>\n      dispatch({\n        type: 'collapse',\n        option,\n      }),\n    []\n  )\n\n  const highlight = React.useCallback(\n    (option: FlyoutOption) =>\n      dispatch({\n        type: 'highlight',\n        option,\n      }),\n    []\n  )\n\n  const traversingHighlight = React.useCallback(\n    (item: 'next' | 'prev' | 'children' | 'parent') => {\n      const tier = isRootOption(highlighted.parentId)\n        ? options\n        : findOptionById(highlighted.parentId).children || []\n      const optionIndex = tier.findIndex((item) => item.id === highlighted.id)\n\n      switch (item) {\n        case 'next':\n          const nextIndex = optionIndex + 1 >= tier.length ? 0 : optionIndex + 1\n\n          highlight(tier[nextIndex])\n          break\n        case 'prev':\n          const prevIndex =\n            optionIndex - 1 < 0 ? tier.length - 1 : optionIndex - 1\n\n          highlight(tier[prevIndex])\n          break\n        case 'children':\n          if (Array.isArray(highlighted.children)) {\n            expand(highlighted)\n\n            highlight(getFirst(highlighted.children))\n          }\n          break\n        case 'parent':\n          if (!isRootOption(highlighted.parentId)) {\n            const parentOption = findOptionById(highlighted.parentId)\n            collapse(parentOption)\n          }\n          break\n        default:\n          return\n      }\n    },\n    [options, findOptionById, collapse, highlighted, expand, highlight]\n  )\n\n  const closeDropdown = React.useCallback(() => {\n    dispatch({ type: 'close' })\n  }, [])\n\n  const closeSelectedDropdown = React.useCallback(\n    (e: Event | React.FocusEvent) => {\n      if (\n        e &&\n        (e.type === 'click' || e.type === 'mouseup') &&\n        !(e as MouseEvent)\n          .composedPath()\n          .some((node) => (node as HTMLElement).dataset?.flyout)\n      ) {\n        dispatch({ type: 'close' })\n      }\n    },\n    []\n  )\n\n  const openDropdown = React.useCallback(() => {\n    dispatch({ type: 'open' })\n  }, [])\n\n  const onClick = React.useCallback(\n    (option: FlyoutOption) => {\n      if (!hasChildren(option.origin)) {\n        _onClick(option.origin)\n        closeDropdown()\n      }\n    },\n    [_onClick, closeDropdown]\n  )\n\n  const onKeyDown = React.useCallback(\n    (e: React.KeyboardEvent<HTMLDivElement>) => {\n      const { key } = e\n\n      switch (key) {\n        case 'Enter':\n          e.preventDefault()\n          if (!isOpen && isFocused) {\n            openDropdown()\n          } else {\n            if (hasChildren(highlighted.origin)) {\n              traversingHighlight('children')\n            } else {\n              onClick(highlighted)\n            }\n          }\n          break\n        case 'Escape':\n        case 'Esc':\n          e.preventDefault()\n          if (isRootOption(highlighted.parentId)) {\n            if (isOpen) {\n              e.stopPropagation?.()\n            }\n            closeDropdown()\n          } else {\n            e.stopPropagation?.()\n            traversingHighlight('parent')\n          }\n          break\n        case 'ArrowDown':\n        case 'Down':\n          e.preventDefault()\n          traversingHighlight('next')\n          break\n        case 'ArrowUp':\n        case 'Up':\n          e.preventDefault()\n          traversingHighlight('prev')\n          break\n      }\n      _onKeyDown?.(e)\n    },\n    [\n      closeDropdown,\n      openDropdown,\n      traversingHighlight,\n      highlighted,\n      isOpen,\n      isFocused,\n      onClick,\n      _onKeyDown,\n    ]\n  )\n  // There was an issue that was fixed in scope of UISP-215 https://procoretech.atlassian.net/browse/UISP-215\n  // UseEffect is necessary for updating state in UseReducer because props don't automatically update state. (In this case: property \"options\")\n  React.useEffect(() => {\n    dispatch({ type: 'updateOptions', options: flyoutOptions })\n    dispatch({ type: 'highlight', option: getFirst(flyoutOptions) })\n  }, [flyoutOptions])\n\n  return {\n    isFocused,\n    isMouseOver,\n    isOpen,\n    options,\n    expanded,\n    highlighted,\n    expand,\n    collapse,\n    isHighlighted,\n    isExpanded,\n    closeDropdown,\n    closeSelectedDropdown,\n    openDropdown,\n    onKeyDown,\n    onClick,\n    setMouseOver,\n    setFocused,\n  }\n}\n\nexport function defaultOptionRenderer(option: DropdownOption) {\n  return (\n    <>\n      <StyledDropdownFlyoutLabel>{option.label}</StyledDropdownFlyoutLabel>\n      {hasChildren(option) && (\n        <StyledDropdownFlyoutExpandIcon data-qa=\"core-dropdown-flyout-option-expand-icon\" />\n      )}\n    </>\n  )\n}\n\nexport const DropdownFlyoutContext = React.createContext<{\n  onClick: (option: FlyoutOption) => void\n\n  expand: (option: FlyoutOption) => void\n  collapse: (option: FlyoutOption) => void\n  optionRenderer: (option: DropdownOption) => React.ReactNode\n\n  isExpanded: (option: FlyoutOption) => boolean\n  isHighlighted: (option: FlyoutOption) => boolean\n}>({\n  onClick: noop,\n\n  expand: noop,\n  collapse: noop,\n  optionRenderer: defaultOptionRenderer,\n\n  isExpanded: returnFalse,\n  isHighlighted: returnFalse,\n})\n\nexport const useDropdownFlyoutContext = () =>\n  React.useContext(DropdownFlyoutContext)\n"],"mappings":"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"}
+{"version":3,"file":"DropdownFlyout.helpers.js","names":["React","ulid","StyledDropdownFlyoutExpandIcon","StyledDropdownFlyoutLabel","rootId","noop","returnFalse","getFirst","arr","isRootOption","optionId","hasChildren","option","Array","isArray","children","reducer","state","action","type","_objectSpread","highlighted","expanded","concat","_toConsumableArray","collectParentIds","options","id","isOpen","isMouseOver","keyboardNavigated","isFocused","findById","initialValue","arguments","length","undefined","reduce","result","current","transformOption","parentId","acc","updatedOption","origin","useDropdownFlyout","_ref","flyoutOptions","_ref$onClick","onClick","_onClick","_onKeyDown","onKeyDown","_React$useReducer","useReducer","_React$useReducer2","_slicedToArray","_React$useReducer2$","dispatch","setMouseOver","useCallback","setFocused","isExpanded","includes","isHighlighted","parentIds","isCorrectId","some","isFocusVisible","findOptionById","expand","collapse","highlight","traversingHighlight","item","tier","optionIndex","findIndex","nextIndex","prevIndex","parentOption","closeDropdown","closeSelectedDropdown","e","composedPath","node","_dataset","dataset","flyout","openDropdown","key","preventDefault","_e$stopPropagation","stopPropagation","call","_e$stopPropagation2","useEffect","defaultOptionRenderer","createElement","Fragment","label","DropdownFlyoutContext","createContext","optionRenderer","useDropdownFlyoutContext","useContext"],"sources":["../../src/DropdownFlyout/DropdownFlyout.helpers.tsx"],"sourcesContent":["import React from 'react'\nimport { ulid } from 'ulid'\nimport {\n  StyledDropdownFlyoutExpandIcon,\n  StyledDropdownFlyoutLabel,\n} from './DropdownFlyout.styles'\nimport type {\n  Action,\n  DropdownFlyoutProps,\n  DropdownOption,\n  FlyoutOption,\n  FlyoutOptionId,\n  State,\n} from './DropdownFlyout.types'\nimport { rootId } from './DropdownFlyout.types'\n\nexport function noop() {}\n\nexport function returnFalse() {\n  return false\n}\n\nfunction getFirst<T extends any>(arr: T[]) {\n  return arr[0]\n}\nfunction isRootOption(optionId: FlyoutOptionId) {\n  return optionId === rootId\n}\n\nexport function hasChildren(option: DropdownOption) {\n  return Array.isArray(option.children)\n}\n\nfunction reducer(state: State, action: Action): State {\n  switch (action.type) {\n    case 'highlight':\n      return {\n        ...state,\n        highlighted: action.option,\n      }\n    case 'expand':\n      return {\n        ...state,\n        highlighted: action.option,\n        expanded: [\n          ...collectParentIds(state.options, action.option.id),\n          action.option.id,\n        ],\n      }\n    case 'collapse':\n      return {\n        ...state,\n        highlighted: action.option,\n        expanded: collectParentIds(state.options, action.option.id),\n      }\n    case 'close':\n      return {\n        ...state,\n        expanded: [],\n        highlighted: getFirst(state.options),\n        isOpen: false,\n      }\n    case 'open':\n      return {\n        ...state,\n        isOpen: true,\n      }\n    case 'setMouseOver':\n      return {\n        ...state,\n        isMouseOver: action.isMouseOver,\n        keyboardNavigated: action.isMouseOver ? false : state.keyboardNavigated,\n      }\n    case 'setFocused':\n      return {\n        ...state,\n        isFocused: action.isFocused,\n      }\n    case 'setKeyboardNavigated':\n      return {\n        ...state,\n        keyboardNavigated: true,\n      }\n    case 'updateOptions':\n      return {\n        ...state,\n        options: action.options,\n      }\n    default:\n      return state\n  }\n}\n\nfunction findById(\n  options: FlyoutOption[],\n  optionId: FlyoutOption['id'],\n  initialValue: FlyoutOption = getFirst(options)\n): FlyoutOption {\n  return options.reduce((result, current) => {\n    if (current.id === optionId) {\n      return current\n    }\n\n    if (current.children) {\n      return findById(current.children, optionId, result)\n    }\n\n    return result\n  }, initialValue)\n}\n\nexport function transformOption(\n  options: DropdownOption[],\n  parentId: FlyoutOption['parentId']\n): FlyoutOption[] {\n  return options.reduce<FlyoutOption[]>((acc, option) => {\n    const id = ulid()\n    const updatedOption = {\n      id,\n      parentId,\n      origin: option,\n      ...(Array.isArray(option.children) && {\n        children: transformOption(option.children, id),\n      }),\n    }\n\n    return [...acc, updatedOption]\n  }, [])\n}\n\nfunction collectParentIds(\n  options: FlyoutOption[],\n  optionId: FlyoutOption['id']\n): FlyoutOption['id'][] {\n  const option = findById(options, optionId)\n\n  if (!isRootOption(option.parentId)) {\n    return [...collectParentIds(options, option.parentId), option.parentId]\n  }\n  return [option.parentId]\n}\n\nexport function useDropdownFlyout({\n  flyoutOptions,\n  onClick: _onClick = noop,\n  onKeyDown: _onKeyDown,\n}: Pick<DropdownFlyoutProps, 'onClick' | 'onKeyDown'> & {\n  flyoutOptions: FlyoutOption[]\n}) {\n  const [\n    {\n      options,\n      expanded,\n      highlighted,\n      isOpen,\n      isMouseOver,\n      isFocused,\n      keyboardNavigated,\n    },\n    dispatch,\n  ] = React.useReducer(reducer, {\n    options: flyoutOptions,\n    expanded: [],\n    highlighted: getFirst(flyoutOptions),\n    isMouseOver: false,\n    isFocused: false,\n    isOpen: false,\n    keyboardNavigated: false,\n  })\n\n  const setMouseOver = React.useCallback(\n    (isMouseOver: boolean) => dispatch({ type: 'setMouseOver', isMouseOver }),\n    []\n  )\n\n  const setFocused = React.useCallback(\n    (isFocused: boolean) => dispatch({ type: 'setFocused', isFocused }),\n    []\n  )\n\n  const isExpanded = (option: FlyoutOption) => expanded.includes(option.id)\n\n  const isHighlighted = (option: FlyoutOption): boolean => {\n    const parentIds = collectParentIds(options, highlighted.id)\n    const isCorrectId =\n      option.id === highlighted.id || parentIds.some((id) => id === option.id)\n    return (isMouseOver || isFocused) && isCorrectId\n  }\n\n  const isFocusVisible = (option: FlyoutOption): boolean => {\n    const parentIds = collectParentIds(options, highlighted.id)\n    const isCorrectId =\n      option.id === highlighted.id || parentIds.some((id) => id === option.id)\n    return keyboardNavigated && isCorrectId\n  }\n\n  const findOptionById = React.useCallback(\n    (id: FlyoutOptionId) => findById(options, id),\n    [options]\n  )\n\n  const expand = React.useCallback(\n    (option: FlyoutOption) =>\n      dispatch({\n        type: 'expand',\n        option,\n      }),\n    []\n  )\n\n  const collapse = React.useCallback(\n    (option: FlyoutOption) =>\n      dispatch({\n        type: 'collapse',\n        option,\n      }),\n    []\n  )\n\n  const highlight = React.useCallback(\n    (option: FlyoutOption) =>\n      dispatch({\n        type: 'highlight',\n        option,\n      }),\n    []\n  )\n\n  const traversingHighlight = React.useCallback(\n    (item: 'next' | 'prev' | 'children' | 'parent') => {\n      const tier = isRootOption(highlighted.parentId)\n        ? options\n        : findOptionById(highlighted.parentId).children || []\n      const optionIndex = tier.findIndex((item) => item.id === highlighted.id)\n\n      switch (item) {\n        case 'next':\n          const nextIndex = optionIndex + 1 >= tier.length ? 0 : optionIndex + 1\n\n          highlight(tier[nextIndex])\n          break\n        case 'prev':\n          const prevIndex =\n            optionIndex - 1 < 0 ? tier.length - 1 : optionIndex - 1\n\n          highlight(tier[prevIndex])\n          break\n        case 'children':\n          if (Array.isArray(highlighted.children)) {\n            expand(highlighted)\n\n            highlight(getFirst(highlighted.children))\n          }\n          break\n        case 'parent':\n          if (!isRootOption(highlighted.parentId)) {\n            const parentOption = findOptionById(highlighted.parentId)\n            collapse(parentOption)\n          }\n          break\n        default:\n          return\n      }\n    },\n    [options, findOptionById, collapse, highlighted, expand, highlight]\n  )\n\n  const closeDropdown = React.useCallback(() => {\n    dispatch({ type: 'close' })\n  }, [])\n\n  const closeSelectedDropdown = React.useCallback(\n    (e: Event | React.FocusEvent) => {\n      if (\n        e &&\n        (e.type === 'click' || e.type === 'mouseup') &&\n        !(e as MouseEvent)\n          .composedPath()\n          .some((node) => (node as HTMLElement).dataset?.flyout)\n      ) {\n        dispatch({ type: 'close' })\n      }\n    },\n    []\n  )\n\n  const openDropdown = React.useCallback(() => {\n    dispatch({ type: 'open' })\n  }, [])\n\n  const onClick = React.useCallback(\n    (option: FlyoutOption) => {\n      if (!hasChildren(option.origin)) {\n        _onClick(option.origin)\n        closeDropdown()\n      }\n    },\n    [_onClick, closeDropdown]\n  )\n\n  const onKeyDown = React.useCallback(\n    (e: React.KeyboardEvent<HTMLDivElement>) => {\n      const { key } = e\n\n      switch (key) {\n        case 'Enter':\n          e.preventDefault()\n          if (!isOpen && isFocused) {\n            dispatch({ type: 'setKeyboardNavigated' })\n            openDropdown()\n          } else {\n            if (hasChildren(highlighted.origin)) {\n              dispatch({ type: 'setKeyboardNavigated' })\n              traversingHighlight('children')\n            } else {\n              onClick(highlighted)\n            }\n          }\n          break\n        case 'Escape':\n        case 'Esc':\n          e.preventDefault()\n          if (isRootOption(highlighted.parentId)) {\n            if (isOpen) {\n              e.stopPropagation?.()\n            }\n            closeDropdown()\n          } else {\n            e.stopPropagation?.()\n            traversingHighlight('parent')\n          }\n          break\n        case 'ArrowDown':\n        case 'Down':\n          e.preventDefault()\n          dispatch({ type: 'setKeyboardNavigated' })\n          traversingHighlight('next')\n          break\n        case 'ArrowUp':\n        case 'Up':\n          e.preventDefault()\n          dispatch({ type: 'setKeyboardNavigated' })\n          traversingHighlight('prev')\n          break\n      }\n      _onKeyDown?.(e)\n    },\n    [\n      closeDropdown,\n      openDropdown,\n      traversingHighlight,\n      highlighted,\n      isOpen,\n      isFocused,\n      onClick,\n      _onKeyDown,\n    ]\n  )\n  // There was an issue that was fixed in scope of UISP-215 https://procoretech.atlassian.net/browse/UISP-215\n  // UseEffect is necessary for updating state in UseReducer because props don't automatically update state. (In this case: property \"options\")\n  React.useEffect(() => {\n    dispatch({ type: 'updateOptions', options: flyoutOptions })\n    dispatch({ type: 'highlight', option: getFirst(flyoutOptions) })\n  }, [flyoutOptions])\n\n  return {\n    isFocused,\n    isFocusVisible,\n    isMouseOver,\n    isOpen,\n    options,\n    expanded,\n    highlighted,\n    expand,\n    collapse,\n    isHighlighted,\n    isExpanded,\n    closeDropdown,\n    closeSelectedDropdown,\n    openDropdown,\n    onKeyDown,\n    onClick,\n    setMouseOver,\n    setFocused,\n  }\n}\n\nexport function defaultOptionRenderer(option: DropdownOption) {\n  return (\n    <>\n      <StyledDropdownFlyoutLabel>{option.label}</StyledDropdownFlyoutLabel>\n      {hasChildren(option) && (\n        <StyledDropdownFlyoutExpandIcon data-qa=\"core-dropdown-flyout-option-expand-icon\" />\n      )}\n    </>\n  )\n}\n\nexport const DropdownFlyoutContext = React.createContext<{\n  onClick: (option: FlyoutOption) => void\n\n  expand: (option: FlyoutOption) => void\n  collapse: (option: FlyoutOption) => void\n  optionRenderer: (option: DropdownOption) => React.ReactNode\n\n  isExpanded: (option: FlyoutOption) => boolean\n  isFocusVisible: (option: FlyoutOption) => boolean\n  isHighlighted: (option: FlyoutOption) => boolean\n}>({\n  onClick: noop,\n\n  expand: noop,\n  collapse: noop,\n  optionRenderer: defaultOptionRenderer,\n\n  isExpanded: returnFalse,\n  isFocusVisible: returnFalse,\n  isHighlighted: returnFalse,\n})\n\nexport const useDropdownFlyoutContext = () =>\n  React.useContext(DropdownFlyoutContext)\n"],"mappings":"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"}

package/dist/DropdownFlyout/DropdownFlyout.js

@@ -1,4 +1,4 @@
-var _excluded = ["option", "highlighted", "expanded", "optionRenderer"],
+var _excluded = ["option", "focusVisible", "highlighted", "expanded", "optionRenderer"],
   _excluded2 = ["children", "icon"],
   _excluded3 = ["disabled", "icon", "label", "loading", "options", "onClick", "optionRenderer", "children", "placement", "onKeyDown", "onFocus", "onBlur", "onMouseDown", "onMouseEnter", "onMouseLeave", "size", "variant"];
 function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
@@ -24,6 +24,7 @@ import { rootId } from './DropdownFlyout.types';
 import { useDropdownFlyoutOverlay } from './useDropdownFlyoutOverlay';
 export var FlyoutCaption = /*#__PURE__*/React.forwardRef(function FlyoutCaption(_ref, ref) {
   var option = _ref.option,
+    focusVisible = _ref.focusVisible,
     highlighted = _ref.highlighted,
     expanded = _ref.expanded,
     optionRenderer = _ref.optionRenderer,
@@ -32,6 +33,7 @@ export var FlyoutCaption = /*#__PURE__*/React.forwardRef(function FlyoutCaption(
   return /*#__PURE__*/React.createElement(StyledDropdownFlyoutItem, _extends({}, props, {
     ref: ref,
     "aria-expanded": expanded,
+    "data-focus-visible": focusVisible,
     "data-highlighted": highlighted,
     "data-flyout": true
   }), renderedOption);
@@ -41,6 +43,7 @@ export function FlyoutItem(_ref2) {
   var option = _ref2.option;
   var overlayElRef = React.useRef(null);
   var _useDropdownFlyoutCon = useDropdownFlyoutContext(),
+    isFocusVisible = _useDropdownFlyoutCon.isFocusVisible,
     isHighlighted = _useDropdownFlyoutCon.isHighlighted,
     isExpanded = _useDropdownFlyoutCon.isExpanded,
     _onClick = _useDropdownFlyoutCon.onClick,
@@ -68,6 +71,7 @@ export function FlyoutItem(_ref2) {
     option: option.origin,
     onClick: onClick,
     optionRenderer: optionRenderer,
+    focusVisible: isFocusVisible(option),
     highlighted: isHighlighted(option),
     expanded: hasChildren(option.origin) ? isExpanded(option) : undefined,
     onMouseEnter: onMouseEnter,
@@ -183,6 +187,7 @@ export var DropdownFlyout = /*#__PURE__*/React.forwardRef(function DropdownFlyou
     setMouseOver = _useDropdownFlyout.setMouseOver,
     setFocused = _useDropdownFlyout.setFocused,
     isExpanded = _useDropdownFlyout.isExpanded,
+    isFocusVisible = _useDropdownFlyout.isFocusVisible,
     isHighlighted = _useDropdownFlyout.isHighlighted,
     closeDropdown = _useDropdownFlyout.closeDropdown;
   useClickOutside({
@@ -271,6 +276,7 @@ export var DropdownFlyout = /*#__PURE__*/React.forwardRef(function DropdownFlyou
       collapse: collapse,
       onClick: onClick,
       isExpanded: isExpanded,
+      isFocusVisible: isFocusVisible,
       isHighlighted: isHighlighted,
       optionRenderer: optionRenderer
     }