@procore/core-react 12.50.0 → 12.51.0

package/dist/Button/Button.styles.js

@@ -5,7 +5,6 @@ import { getTypographyIntent, typographyWeights } from '../Typography';
 import { borderRadius } from '../_styles/borderRadius';
 import { colors } from '../_styles/colors';
 import { mediaIE11Hack } from '../_styles/media';
-import { focusable } from '../_styles/mixins';
 import { spacing } from '../_styles/spacing';
 var heights = {
   sm: 24,
@@ -25,8 +24,8 @@ var typographySizes = {
 };
 var buttonTextColors = {
   primary: {
-    main: colors.white,
-    disabled: colors.white
+    main: "var(--core-button-primary-text-color, ".concat(colors.white, ")"),
+    disabled: "var(--core-button-primary-disabled-text-color, ".concat(colors.white, ")")
   },
   secondary: {
     main: colors.gray15,
@@ -47,9 +46,9 @@ var buttonTextColors = {
 };
 var buttonBGColors = {
   primary: {
-    main: colors.orange50,
-    hover: colors.orange45,
-    disabled: colors.orange85
+    main: "var(--core-button-primary-background-color, ".concat(colors.orange50, ")"),
+    hover: "var(--core-button-primary-hover-background-color, ".concat(colors.orange45, ")"),
+    disabled: "var(--core-button-primary-disabled-background-color, ".concat(colors.orange85, ")")
   },
   secondary: {
     main: colors.gray90,
@@ -93,11 +92,11 @@ function getColors(loading, variant) {
 }
 export var StyledContent = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledContent",
-  componentId: "core-12_50_0__sc-c5bhwh-0"
+  componentId: "core-12_51_0__sc-c5bhwh-0"
 })(["align-items:center;display:flex;overflow:hidden;"]);
 export var StyledSpinner = /*#__PURE__*/styled(Spinner).withConfig({
   displayName: "StyledSpinner",
-  componentId: "core-12_50_0__sc-c5bhwh-1"
+  componentId: "core-12_51_0__sc-c5bhwh-1"
 })(["box-sizing:border-box;display:none;position:absolute;transform:translateZ(0);@media ", "{left:50%;top:50%;", "}"], mediaIE11Hack, function (_ref) {
   var size = _ref.size;
   var margin = -1 * (spinnerDimensions[size !== null && size !== void 0 ? size : defaultSpinnerSize] / 2);
@@ -105,14 +104,14 @@ export var StyledSpinner = /*#__PURE__*/styled(Spinner).withConfig({
 });
 export var StyledLabel = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledLabel",
-  componentId: "core-12_50_0__sc-c5bhwh-2"
+  componentId: "core-12_51_0__sc-c5bhwh-2"
 })(["overflow:hidden;padding:0 6px;text-overflow:ellipsis;white-space:nowrap;& + span{padding-left:0;}"]);
 export function getButtonStyles(block, disabled, loading, size, variant) {
-  return css(["", " ", " ", " ", " align-items:center;border-radius:", "px;border:0;box-sizing:border-box;cursor:pointer;display:inline-flex;flex-direction:row;flex-shrink:0;font-family:inherit;font-weight:", ";height:", "px;justify-content:center;margin:0;overflow:hidden;padding:0 ", "px;position:relative;pointer-events:", ";text-overflow:ellipsis;user-select:", ";vertical-align:middle;white-space:nowrap;width:", ";[data-icon-prop='true']{pointer-events:none;height:", "px;width:", "px;}", ""], getTypographyIntent(typographySizes[size]), focusable, variant === 'UNSAFE_helixNav' && css(["&.focus,&:focus{outline:none;box-shadow:0 0 0 2px ", ";}"], colors.blue70), getColors(loading, variant), borderRadius.md, typographyWeights.semibold, heights[size], paddingX[size], disabled || loading ? 'none' : 'inherit', disabled || loading ? 'none' : 'inherit', block && '100%', size === 'sm' ? 16 : 24, size === 'sm' ? 16 : 24, loading && css(["", "{pointer-events:none;visibility:hidden;}", "{display:block;}"], StyledContent, StyledSpinner));
+  return css(["", " &.focus,&:focus{outline:2px solid ", ";outline-offset:var(--core-button-focus-outline-offset,-1px);}", " ", " align-items:center;border-radius:", "px;border:0;box-sizing:border-box;cursor:pointer;display:inline-flex;flex-direction:row;flex-shrink:0;font-family:inherit;font-weight:", ";height:", "px;justify-content:center;margin:0;overflow:hidden;padding:0 ", "px;position:relative;pointer-events:", ";text-overflow:ellipsis;user-select:", ";vertical-align:middle;white-space:nowrap;width:", ";[data-icon-prop='true']{pointer-events:none;height:", "px;width:", "px;}", ""], getTypographyIntent(typographySizes[size]), colors.blue40, variant === 'UNSAFE_helixNav' && css(["&.focus,&:focus{outline:none;box-shadow:0 0 0 2px ", ";}"], colors.blue70), getColors(loading, variant), borderRadius.md, typographyWeights.semibold, heights[size], paddingX[size], disabled || loading ? 'none' : 'inherit', disabled || loading ? 'none' : 'inherit', block && '100%', size === 'sm' ? 16 : 24, size === 'sm' ? 16 : 24, loading && css(["", "{pointer-events:none;visibility:hidden;}", "{display:block;}"], StyledContent, StyledSpinner));
 }
 export var StyledButton = /*#__PURE__*/styled.button.withConfig({
   displayName: "StyledButton",
-  componentId: "core-12_50_0__sc-c5bhwh-3"
+  componentId: "core-12_51_0__sc-c5bhwh-3"
 })(["", ""], function (_ref2) {
   var $block = _ref2.$block,
     disabled = _ref2.disabled,
@@ -123,7 +122,7 @@ export var StyledButton = /*#__PURE__*/styled.button.withConfig({
 });
 export var StyledLinkButton = /*#__PURE__*/styled.a.withConfig({
   displayName: "StyledLinkButton",
-  componentId: "core-12_50_0__sc-c5bhwh-4"
+  componentId: "core-12_51_0__sc-c5bhwh-4"
 })(["&,&:hover{text-decoration:none;}", ""], function (_ref3) {
   var $block = _ref3.$block,
     $disabled = _ref3.$disabled,

package/dist/Button/Button.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.styles.js","names":["styled","css","defaultSpinnerSize","Spinner","spinnerDimensions","getTypographyIntent","typographyWeights","borderRadius","colors","mediaIE11Hack","focusable","spacing","heights","sm","md","lg","paddingX","xs","typographySizes","buttonTextColors","primary","main","white","disabled","secondary","gray15","gray70","tertiary","tertiaryContrast","blue45","UNSAFE_helixNav","gray40","buttonBGColors","orange50","hover","orange45","orange85","gray90","gray85","gray94","gray50","getBGColor","variant","console","error","concat","getTextColor","getColors","loading","StyledContent","span","withConfig","displayName","componentId","StyledSpinner","_ref","size","margin","StyledLabel","getButtonStyles","block","blue70","semibold","StyledButton","button","_ref2","$block","$loading","$size","$variant","StyledLinkButton","a","_ref3","$disabled"],"sources":["../../src/Button/Button.styles.ts"],"sourcesContent":["import type React from 'react'\nimport styled, { css } from 'styled-components'\nimport { defaultSpinnerSize, Spinner } from '../Spinner/Spinner'\nimport { spinnerDimensions } from '../Spinner/Spinner.styles'\nimport { getTypographyIntent, typographyWeights } from '../Typography'\nimport type { Intent } from '../Typography/Typography.types'\nimport { borderRadius } from '../_styles/borderRadius'\nimport { colors } from '../_styles/colors'\nimport { mediaIE11Hack } from '../_styles/media'\nimport { focusable } from '../_styles/mixins'\nimport { spacing } from '../_styles/spacing'\nimport type {\n  ButtonSizes,\n  ButtonVariant,\n  LinkButtonProps,\n  SizingObject,\n} from './Button.types'\n\nconst heights: SizingObject = {\n  sm: 24,\n  md: 36,\n  lg: 48,\n}\n\nconst paddingX: SizingObject = {\n  sm: spacing.xs,\n  md: 6, // TODO one-off\n  lg: spacing.md,\n}\n\nconst typographySizes: { [key in ButtonSizes]: Intent } = {\n  sm: 'small',\n  md: 'body',\n  lg: 'h3',\n}\n\nconst buttonTextColors: {\n  [key in ButtonVariant]: { main: string; disabled: string }\n} = {\n  primary: {\n    main: colors.white,\n    disabled: colors.white,\n  },\n  secondary: {\n    main: colors.gray15,\n    disabled: colors.gray70,\n  },\n  tertiary: {\n    main: colors.gray15,\n    disabled: colors.gray70,\n  },\n  tertiaryContrast: {\n    main: colors.blue45,\n    disabled: colors.blue45,\n  },\n  UNSAFE_helixNav: {\n    main: colors.white,\n    disabled: colors.gray40,\n  },\n}\n\nconst buttonBGColors: {\n  [key in ButtonVariant]: {\n    main: string\n    hover: string\n    disabled: string\n  }\n} = {\n  primary: {\n    main: colors.orange50,\n    hover: colors.orange45,\n    disabled: colors.orange85,\n  },\n  secondary: {\n    main: colors.gray90,\n    hover: colors.gray85,\n    disabled: colors.gray94,\n  },\n  tertiary: {\n    main: 'transparent',\n    hover: colors.gray90,\n    disabled: 'transparent',\n  },\n  tertiaryContrast: {\n    main: 'transparent',\n    hover: 'white',\n    disabled: 'transparent',\n  },\n  UNSAFE_helixNav: {\n    main: 'transparent',\n    hover: colors.gray50,\n    disabled: 'transparent',\n  },\n}\n\nexport function getBGColor(variant: ButtonVariant) {\n  const colors = buttonBGColors[variant]\n  if (!colors) {\n    console.error(\n      `@procore/core-react: Using invalid Button variant ${variant}. Please update, falling back to primary.`\n    )\n    return buttonBGColors.primary\n  }\n  return colors\n}\n\nexport function getTextColor(variant: ButtonVariant) {\n  const colors = buttonTextColors[variant]\n  if (!colors) {\n    console.error(\n      `@procore/core-react: Using invalid Button variant ${variant}. Please update, falling back to primary.`\n    )\n    return buttonTextColors.primary\n  }\n  return colors\n}\n\nfunction getColors(loading: boolean, variant: ButtonVariant) {\n  return css`\n    background: ${loading\n      ? getBGColor(variant).hover\n      : getBGColor(variant).main};\n\n    color: ${getTextColor(variant).main};\n\n    &.active,\n    &:active,\n    &.focus,\n    &:focus,\n    &.hover,\n    &:hover {\n      background: ${getBGColor(variant).hover};\n      color: ${getTextColor(variant).main};\n    }\n\n    &:disabled,\n    &[aria-disabled='true'] {\n      background: ${loading\n        ? getBGColor(variant).hover\n        : getBGColor(variant).disabled};\n      color: ${getTextColor(variant).disabled};\n    }\n  `\n}\n\nexport const StyledContent = styled.span`\n  align-items: center;\n  display: flex;\n  overflow: hidden;\n`\n\nexport const StyledSpinner = styled(Spinner)`\n  box-sizing: border-box;\n  display: none;\n  position: absolute;\n  transform: translateZ(0);\n\n  @media ${mediaIE11Hack} {\n    left: 50%;\n    top: 50%;\n    ${({ size }) => {\n      const margin = -1 * (spinnerDimensions[size ?? defaultSpinnerSize] / 2)\n      return css`\n        margin-left: ${margin}px;\n        margin-top: ${margin}px;\n      `\n    }}\n  }\n`\n\nexport const StyledLabel = styled.span`\n  overflow: hidden;\n  padding: 0 6px; // TODO one-off\n  text-overflow: ellipsis;\n  white-space: nowrap;\n\n  & + span {\n    padding-left: 0;\n  }\n`\n\ninterface StyledButtonProps {\n  disabled: boolean\n  $block: boolean\n  $loading: boolean\n  $size: ButtonSizes\n  $variant: ButtonVariant\n}\n\nexport function getButtonStyles(\n  block: boolean,\n  disabled: boolean,\n  loading: boolean,\n  size: ButtonSizes,\n  variant: ButtonVariant\n) {\n  return css`\n    ${getTypographyIntent(typographySizes[size])}\n\n    ${focusable}\n\n    /**\n     TODO: This might be a new pattern for focus states,\n     but leaving it just here for now\n    */\n    ${variant === 'UNSAFE_helixNav' &&\n    css`\n      &.focus,\n      &:focus {\n        outline: none;\n        box-shadow: 0 0 0 2px ${colors.blue70};\n      }\n    `}\n\n    ${getColors(loading, variant)}\n\n    align-items: center;\n    border-radius: ${borderRadius.md}px;\n    border: 0;\n    box-sizing: border-box;\n    cursor: pointer;\n    display: inline-flex;\n    flex-direction: row;\n    flex-shrink: 0;\n    font-family: inherit;\n    font-weight: ${typographyWeights.semibold};\n    height: ${heights[size]}px;\n    justify-content: center;\n    margin: 0;\n    overflow: hidden;\n    padding: 0 ${paddingX[size]}px;\n    position: relative;\n    pointer-events: ${disabled || loading ? 'none' : 'inherit'};\n    text-overflow: ellipsis;\n    user-select: ${disabled || loading ? 'none' : 'inherit'};\n    vertical-align: middle;\n    white-space: nowrap;\n    width: ${block && '100%'};\n\n    [data-icon-prop='true'] {\n      pointer-events: none;\n      height: ${size === 'sm' ? 16 : 24}px;\n      width: ${size === 'sm' ? 16 : 24}px;\n    }\n\n    ${loading &&\n    css`\n      ${StyledContent} {\n        pointer-events: none;\n        visibility: hidden;\n      }\n\n      ${StyledSpinner} {\n        display: block;\n      }\n    `}\n  `\n}\n\nexport const StyledButton = styled.button<StyledButtonProps>`\n  ${({ $block, disabled, $loading, $size, $variant }) =>\n    getButtonStyles($block, disabled, $loading, $size, $variant)}\n`\n\ninterface StyledLinkButtonProps\n  extends Pick<StyledButtonProps, '$block' | '$size' | '$variant'> {\n  as?: LinkButtonProps['as']\n  children?: React.ReactNode\n  href?: string\n  $disabled: boolean\n  ref?: React.RefCallback<HTMLAnchorElement>\n}\n\nexport const StyledLinkButton = styled.a<StyledLinkButtonProps>`\n  &,\n  &:hover {\n    text-decoration: none;\n  }\n\n  ${({ $block, $disabled, $size, $variant }) =>\n    getButtonStyles($block, $disabled, false, $size, $variant)}\n`\n"],"mappings":"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"}
+{"version":3,"file":"Button.styles.js","names":["styled","css","defaultSpinnerSize","Spinner","spinnerDimensions","getTypographyIntent","typographyWeights","borderRadius","colors","mediaIE11Hack","spacing","heights","sm","md","lg","paddingX","xs","typographySizes","buttonTextColors","primary","main","concat","white","disabled","secondary","gray15","gray70","tertiary","tertiaryContrast","blue45","UNSAFE_helixNav","gray40","buttonBGColors","orange50","hover","orange45","orange85","gray90","gray85","gray94","gray50","getBGColor","variant","console","error","getTextColor","getColors","loading","StyledContent","span","withConfig","displayName","componentId","StyledSpinner","_ref","size","margin","StyledLabel","getButtonStyles","block","blue40","blue70","semibold","StyledButton","button","_ref2","$block","$loading","$size","$variant","StyledLinkButton","a","_ref3","$disabled"],"sources":["../../src/Button/Button.styles.ts"],"sourcesContent":["import type React from 'react'\nimport styled, { css } from 'styled-components'\nimport { defaultSpinnerSize, Spinner } from '../Spinner/Spinner'\nimport { spinnerDimensions } from '../Spinner/Spinner.styles'\nimport { getTypographyIntent, typographyWeights } from '../Typography'\nimport type { Intent } from '../Typography/Typography.types'\nimport { borderRadius } from '../_styles/borderRadius'\nimport { colors } from '../_styles/colors'\nimport { mediaIE11Hack } from '../_styles/media'\nimport { spacing } from '../_styles/spacing'\nimport type {\n  ButtonSizes,\n  ButtonVariant,\n  LinkButtonProps,\n  SizingObject,\n} from './Button.types'\n\nconst heights: SizingObject = {\n  sm: 24,\n  md: 36,\n  lg: 48,\n}\n\nconst paddingX: SizingObject = {\n  sm: spacing.xs,\n  md: 6, // TODO one-off\n  lg: spacing.md,\n}\n\nconst typographySizes: { [key in ButtonSizes]: Intent } = {\n  sm: 'small',\n  md: 'body',\n  lg: 'h3',\n}\n\nconst buttonTextColors: {\n  [key in ButtonVariant]: { main: string; disabled: string }\n} = {\n  primary: {\n    main: `var(--core-button-primary-text-color, ${colors.white})`,\n    disabled: `var(--core-button-primary-disabled-text-color, ${colors.white})`,\n  },\n  secondary: {\n    main: colors.gray15,\n    disabled: colors.gray70,\n  },\n  tertiary: {\n    main: colors.gray15,\n    disabled: colors.gray70,\n  },\n  tertiaryContrast: {\n    main: colors.blue45,\n    disabled: colors.blue45,\n  },\n  UNSAFE_helixNav: {\n    main: colors.white,\n    disabled: colors.gray40,\n  },\n}\n\nconst buttonBGColors: {\n  [key in ButtonVariant]: {\n    main: string\n    hover: string\n    disabled: string\n  }\n} = {\n  primary: {\n    main: `var(--core-button-primary-background-color, ${colors.orange50})`,\n    hover: `var(--core-button-primary-hover-background-color, ${colors.orange45})`,\n    disabled: `var(--core-button-primary-disabled-background-color, ${colors.orange85})`,\n  },\n  secondary: {\n    main: colors.gray90,\n    hover: colors.gray85,\n    disabled: colors.gray94,\n  },\n  tertiary: {\n    main: 'transparent',\n    hover: colors.gray90,\n    disabled: 'transparent',\n  },\n  tertiaryContrast: {\n    main: 'transparent',\n    hover: 'white',\n    disabled: 'transparent',\n  },\n  UNSAFE_helixNav: {\n    main: 'transparent',\n    hover: colors.gray50,\n    disabled: 'transparent',\n  },\n}\n\nexport function getBGColor(variant: ButtonVariant) {\n  const colors = buttonBGColors[variant]\n  if (!colors) {\n    console.error(\n      `@procore/core-react: Using invalid Button variant ${variant}. Please update, falling back to primary.`\n    )\n    return buttonBGColors.primary\n  }\n  return colors\n}\n\nexport function getTextColor(variant: ButtonVariant) {\n  const colors = buttonTextColors[variant]\n  if (!colors) {\n    console.error(\n      `@procore/core-react: Using invalid Button variant ${variant}. Please update, falling back to primary.`\n    )\n    return buttonTextColors.primary\n  }\n  return colors\n}\n\nfunction getColors(loading: boolean, variant: ButtonVariant) {\n  return css`\n    background: ${loading\n      ? getBGColor(variant).hover\n      : getBGColor(variant).main};\n\n    color: ${getTextColor(variant).main};\n\n    &.active,\n    &:active,\n    &.focus,\n    &:focus,\n    &.hover,\n    &:hover {\n      background: ${getBGColor(variant).hover};\n      color: ${getTextColor(variant).main};\n    }\n\n    &:disabled,\n    &[aria-disabled='true'] {\n      background: ${loading\n        ? getBGColor(variant).hover\n        : getBGColor(variant).disabled};\n      color: ${getTextColor(variant).disabled};\n    }\n  `\n}\n\nexport const StyledContent = styled.span`\n  align-items: center;\n  display: flex;\n  overflow: hidden;\n`\n\nexport const StyledSpinner = styled(Spinner)`\n  box-sizing: border-box;\n  display: none;\n  position: absolute;\n  transform: translateZ(0);\n\n  @media ${mediaIE11Hack} {\n    left: 50%;\n    top: 50%;\n    ${({ size }) => {\n      const margin = -1 * (spinnerDimensions[size ?? defaultSpinnerSize] / 2)\n      return css`\n        margin-left: ${margin}px;\n        margin-top: ${margin}px;\n      `\n    }}\n  }\n`\n\nexport const StyledLabel = styled.span`\n  overflow: hidden;\n  padding: 0 6px; // TODO one-off\n  text-overflow: ellipsis;\n  white-space: nowrap;\n\n  & + span {\n    padding-left: 0;\n  }\n`\n\ninterface StyledButtonProps {\n  disabled: boolean\n  $block: boolean\n  $loading: boolean\n  $size: ButtonSizes\n  $variant: ButtonVariant\n}\n\nexport function getButtonStyles(\n  block: boolean,\n  disabled: boolean,\n  loading: boolean,\n  size: ButtonSizes,\n  variant: ButtonVariant\n) {\n  return css`\n    ${getTypographyIntent(typographySizes[size])}\n\n    &.focus,\n    &:focus {\n      outline: 2px solid ${colors.blue40};\n      outline-offset: var(--core-button-focus-outline-offset, -1px);\n    }\n\n    /**\n     TODO: This might be a new pattern for focus states,\n     but leaving it just here for now\n    */\n    ${variant === 'UNSAFE_helixNav' &&\n    css`\n      &.focus,\n      &:focus {\n        outline: none;\n        box-shadow: 0 0 0 2px ${colors.blue70};\n      }\n    `}\n\n    ${getColors(loading, variant)}\n\n    align-items: center;\n    border-radius: ${borderRadius.md}px;\n    border: 0;\n    box-sizing: border-box;\n    cursor: pointer;\n    display: inline-flex;\n    flex-direction: row;\n    flex-shrink: 0;\n    font-family: inherit;\n    font-weight: ${typographyWeights.semibold};\n    height: ${heights[size]}px;\n    justify-content: center;\n    margin: 0;\n    overflow: hidden;\n    padding: 0 ${paddingX[size]}px;\n    position: relative;\n    pointer-events: ${disabled || loading ? 'none' : 'inherit'};\n    text-overflow: ellipsis;\n    user-select: ${disabled || loading ? 'none' : 'inherit'};\n    vertical-align: middle;\n    white-space: nowrap;\n    width: ${block && '100%'};\n\n    [data-icon-prop='true'] {\n      pointer-events: none;\n      height: ${size === 'sm' ? 16 : 24}px;\n      width: ${size === 'sm' ? 16 : 24}px;\n    }\n\n    ${loading &&\n    css`\n      ${StyledContent} {\n        pointer-events: none;\n        visibility: hidden;\n      }\n\n      ${StyledSpinner} {\n        display: block;\n      }\n    `}\n  `\n}\n\nexport const StyledButton = styled.button<StyledButtonProps>`\n  ${({ $block, disabled, $loading, $size, $variant }) =>\n    getButtonStyles($block, disabled, $loading, $size, $variant)}\n`\n\ninterface StyledLinkButtonProps\n  extends Pick<StyledButtonProps, '$block' | '$size' | '$variant'> {\n  as?: LinkButtonProps['as']\n  children?: React.ReactNode\n  href?: string\n  $disabled: boolean\n  ref?: React.RefCallback<HTMLAnchorElement>\n}\n\nexport const StyledLinkButton = styled.a<StyledLinkButtonProps>`\n  &,\n  &:hover {\n    text-decoration: none;\n  }\n\n  ${({ $block, $disabled, $size, $variant }) =>\n    getButtonStyles($block, $disabled, false, $size, $variant)}\n`\n"],"mappings":"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"}

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_0__sc-1kkl86t-0"
+  componentId: "core-12_51_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_0__sc-1kkl86t-1"
+  componentId: "core-12_51_0__sc-1kkl86t-1"
 })(["flex:0 0 auto;"]);
 export var StyledSelect = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledSelect",
-  componentId: "core-12_50_0__sc-1kkl86t-2"
+  componentId: "core-12_51_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_0__sc-1kkl86t-3"
+  componentId: "core-12_51_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_0__sc-1kkl86t-4"
+  componentId: "core-12_51_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_0__sc-1kkl86t-5"
+  componentId: "core-12_51_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_0__sc-1kkl86t-6"
+  componentId: "core-12_51_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_0__sc-1kkl86t-7"
+  componentId: "core-12_51_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_0__sc-1kkl86t-8"
+  componentId: "core-12_51_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_0__sc-2fii7b-0"
+  componentId: "core-12_51_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_0__sc-u63tye-0"
+  componentId: "core-12_51_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_0__sc-u63tye-1"
+  componentId: "core-12_51_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_0__sc-u63tye-2"
+  componentId: "core-12_51_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_0__sc-u63tye-3"
+  componentId: "core-12_51_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_0__sc-u63tye-4"
+  componentId: "core-12_51_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_0__sc-u63tye-5"
+  componentId: "core-12_51_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_0__sc-1c4z9pn-0"
+  componentId: "core-12_51_0__sc-1c4z9pn-0"
 })(["display:inline-flex;align-self:flex-start;"]);
 export var ContactItemAvatar = /*#__PURE__*/styled(Avatar).withConfig({
   displayName: "ContactItemAvatar",
-  componentId: "core-12_50_0__sc-1c4z9pn-1"
+  componentId: "core-12_51_0__sc-1c4z9pn-1"
 })(["cursor:inherit;font-weight:", ";"], typographyWeights.bold);
 export var ContactItemTextWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "ContactItemTextWrapper",
-  componentId: "core-12_50_0__sc-1c4z9pn-2"
+  componentId: "core-12_51_0__sc-1c4z9pn-2"
 })(["overflow:hidden;margin-left:", "px;"], spacing.sm);
 export var ContactItemText = /*#__PURE__*/styled(Typography).withConfig({
   displayName: "ContactItemText",
-  componentId: "core-12_50_0__sc-1c4z9pn-3"
+  componentId: "core-12_51_0__sc-1c4z9pn-3"
 })(["display:flex;", ""], getLineClamp());
 export var ContactItemWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "ContactItemWrapper",
-  componentId: "core-12_50_0__sc-1c4z9pn-4"
+  componentId: "core-12_51_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_0__sc-10y57gh-0"
+  componentId: "core-12_51_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_0__sc-10y57gh-1"
+  componentId: "core-12_51_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_0__sc-w10btf-0"
+  componentId: "core-12_51_0__sc-w10btf-0"
 })(["color:", ";"], colors.gray45);
 export var StyledDateSegmentsContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledDateSegmentsContainer",
-  componentId: "core-12_50_0__sc-w10btf-1"
+  componentId: "core-12_51_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_0__sc-w10btf-2"
+  componentId: "core-12_51_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_0__sc-w10btf-3"
+  componentId: "core-12_51_0__sc-w10btf-3"
 })(["", " user-select:none;"], getTypographyIntent('body'));
 export var StyledDateInputIconContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledDateInputIconContainer",
-  componentId: "core-12_50_0__sc-w10btf-4"
+  componentId: "core-12_51_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_0__sc-w10btf-5"
+  componentId: "core-12_51_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_0__sc-cytnlo-0"
+  componentId: "core-12_51_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_0__sc-cytnlo-1"
+  componentId: "core-12_51_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_0__sc-cytnlo-2"
+  componentId: "core-12_51_0__sc-cytnlo-2"
 })(["flex-grow:1;z-index:1;"]);
 export var StyledDetailPageFooter = /*#__PURE__*/styled(Page.Footer).withConfig({
   displayName: "StyledDetailPageFooter",
-  componentId: "core-12_50_0__sc-cytnlo-3"
+  componentId: "core-12_51_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_0__sc-cytnlo-4"
+  componentId: "core-12_51_0__sc-cytnlo-4"
 })(["", ""], getActions());
 var maxFooterContentWidth = 1920;
 export var StyledDetailPageFooterContent = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledDetailPageFooterContent",
-  componentId: "core-12_50_0__sc-cytnlo-5"
+  componentId: "core-12_51_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_0__sc-cytnlo-6"
+  componentId: "core-12_51_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.js

@@ -154,7 +154,7 @@ var Dropdown_ = /*#__PURE__*/React.forwardRef(function Dropdown(_ref5, ref) {
   var menuRef = React.useRef(null);
   var buttonRef = React.useRef(null);
   var isSearchable = Boolean(onSearch);
-  var isDialog = hasTabbableElements && !isSearchable;
+  var isDialog = hasTabbableElements || isSearchable;
   function afterHide(e) {
     // @ts-expect-error
     if ((e === null || e === void 0 ? void 0 : e.key) === 'Escape' || e !== null && e !== void 0 && e.restoreFocus) {
@@ -171,7 +171,7 @@ var Dropdown_ = /*#__PURE__*/React.forwardRef(function Dropdown(_ref5, ref) {
   var I18n = useI18nContext();
   var ariaLabel = props['aria-label'] || label || I18n.t("core.dropdown.".concat(props.loading ? 'loading' : 'moreOptions'));
   return /*#__PURE__*/React.createElement(OverlayTrigger, {
-    role: isSearchable ? undefined : isDialog ? 'dialog' : 'menu',
+    role: isDialog ? 'dialog' : 'menu',
     trackAriaExpanded: isSearchable,
     passA11yPropsToOverlay: !isDialog,
     autoFocus: true,

package/dist/Dropdown/Dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.js","names":["CaretDown","CaretUp","EllipsisVertical","classNames","React","MenuImperative","useMenuImperativeControlNavigation","OverlayTrigger","useOverlayTriggerContext","useI18nContext","addSubcomponents","mergeRefs","StyledDropdownButton","StyledDropdownMenu","StyledDropdownSpinner","noop","isFunction","obj","isOpen","_ref","_ref$open","open","Item","forwardRef","_ref2","ref","_ref2$restoreFocus","restoreFocus","props","_objectWithoutProperties","_excluded","createElement","_extends","DropdownButton","_ref3","children","className","_ref3$arrow","arrow","_ref3$loading","loading","_ref3$open","_ref3$focus","focus","_ref3$variant","variant","_excluded2","caret","size","icon","undefined","iconRight","$loading","DropdownMenu","_ref4","footer","i18nScope","menuRef","onSearch_","onSearch","_ref4$onSelect","onSelect","onSelect_","id","overlayTriggerContext","_React$useState","useState","_React$useState2","_slicedToArray","search","setSearch","_useMenuImperativeCon","Boolean","menuId","menuProps","menuNavigationTriggerProps","selection","hide","e","target","value","onKeyDown","key","stopPropagation","shadowStrength","role","Search","onChange","Options","Footer","Dropdown_","Dropdown","_ref5","afterHide_","afterHide","afterShow","beforeHide","beforeShow","error","_ref5$i18nScope","label","_ref5$onKeyDown","_ref5$onSelect","_ref5$placement","placement","_ref5$restoreFocusOnH","restoreFocusOnHide","_ref5$variant","_ref5$hasTabbableElem","hasTabbableElements","_excluded3","useRef","buttonRef","isSearchable","isDialog","_buttonRef$current","current","I18n","ariaLabel","t","concat","trackAriaExpanded","passA11yPropsToOverlay","autoFocus","containFocus","overlay","useDropdownContext","DropdownConsumer","_ref6","displayName","Group"],"sources":["../../src/Dropdown/Dropdown.tsx"],"sourcesContent":["import { CaretDown, CaretUp, EllipsisVertical } from '@procore/core-icons/dist'\nimport classNames from 'classnames'\nimport React from 'react'\nimport {\n  MenuImperative,\n  useMenuImperativeControlNavigation,\n} from '../MenuImperative/MenuImperative'\nimport type { MenuRef, Selection } from '../MenuImperative/MenuImperative.types'\nimport {\n  OverlayTrigger,\n  useOverlayTriggerContext,\n} from '../OverlayTrigger/OverlayTrigger'\nimport { useI18nContext } from '../_hooks/I18n'\nimport { addSubcomponents } from '../_utils/addSubcomponents'\nimport { mergeRefs } from '../_utils/mergeRefs'\nimport {\n  StyledDropdownButton,\n  StyledDropdownMenu,\n  StyledDropdownSpinner,\n} from './Dropdown.styles'\nimport type {\n  ConsumerProps,\n  DropdownButtonProps,\n  DropdownItemProps,\n  DropdownMenuProps,\n  DropdownProps,\n} from './Dropdown.types'\n\nfunction noop() {}\nfunction isFunction(obj: any) {\n  return typeof obj === 'function'\n}\nfunction isOpen({ open = false }) {\n  return open\n}\n\nconst Item = React.forwardRef<HTMLDivElement, DropdownItemProps>(function Item(\n  { restoreFocus = false, ...props },\n  ref\n) {\n  return (\n    <MenuImperative.Item ref={ref} restoreFocus={restoreFocus} {...props} />\n  )\n}) as typeof MenuImperative.Item\n\nexport const DropdownButton = React.forwardRef<\n  HTMLButtonElement,\n  DropdownButtonProps\n>(function DropdownButton(\n  {\n    children,\n    className,\n    arrow = false,\n    loading = false,\n    open = false,\n    focus = false,\n    variant = 'secondary',\n    ...props\n  },\n  ref\n) {\n  const caret =\n    arrow && (open ? <CaretUp size=\"sm\" /> : <CaretDown size=\"sm\" />)\n\n  const icon = loading ? (\n    <StyledDropdownSpinner\n      size=\"xs\"\n      variant={variant === 'primary' ? 'light' : 'default'}\n    />\n  ) : (\n    caret\n  )\n\n  return (\n    <StyledDropdownButton\n      {...props}\n      className={classNames(className, {\n        focus: isFunction(focus) ? (focus as Function)({ open }) : focus,\n      })}\n      aria-busy={loading || undefined}\n      iconRight={icon}\n      $loading={loading}\n      variant={variant}\n      ref={ref}\n    >\n      {children}\n    </StyledDropdownButton>\n  )\n})\n\nconst DropdownMenu = React.forwardRef<HTMLDivElement, DropdownMenuProps>(\n  function DropdownMenu(\n    {\n      children,\n      footer,\n      i18nScope,\n      menuRef,\n      onSearch: onSearch_,\n      onSelect: onSelect_ = noop,\n      id,\n    },\n    ref\n  ) {\n    const overlayTriggerContext = useOverlayTriggerContext()\n\n    const [search, setSearch] = React.useState('')\n    const { menuProps, menuNavigationTriggerProps } =\n      useMenuImperativeControlNavigation(menuRef, Boolean(onSearch_), {\n        menuId: id,\n      })\n\n    function onSelect(selection: Selection) {\n      overlayTriggerContext.hide({ restoreFocus: selection.restoreFocus })\n\n      onSelect_(selection)\n    }\n\n    function onSearch(e: React.ChangeEvent<HTMLInputElement>) {\n      setSearch(e.target.value)\n\n      onSearch_?.(e)\n    }\n\n    function onKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {\n      // This is disconnected from the OverlayTrigger closing on Escape.\n      // Closing a dropdown with Escape will not close a Modal, because stopP.\n      // It is called only once because the menu component is unmounted.\n      // The next Escape will propagate.\n      if (e.key === 'Escape' || e.key === 'Esc') {\n        // only let parent listeners (modal, overlay) know when empty\n        e.stopPropagation()\n      }\n    }\n\n    return (\n      <StyledDropdownMenu ref={ref} shadowStrength={2}>\n        <MenuImperative\n          {...menuProps}\n          ref={menuRef}\n          onKeyDown={onKeyDown}\n          onSelect={onSelect}\n          role=\"menu\"\n        >\n          {onSearch_ && (\n            <MenuImperative.Search\n              {...menuNavigationTriggerProps}\n              onChange={onSearch}\n              i18nScope={i18nScope}\n            />\n          )}\n          <MenuImperative.Options>{children}</MenuImperative.Options>\n          {footer && <MenuImperative.Footer>{footer}</MenuImperative.Footer>}\n        </MenuImperative>\n      </StyledDropdownMenu>\n    )\n  }\n)\n\nconst Dropdown_ = React.forwardRef<HTMLButtonElement, DropdownProps>(\n  function Dropdown(\n    {\n      afterHide: afterHide_,\n      afterShow,\n      beforeHide,\n      beforeShow,\n      children,\n      error,\n      footer,\n      i18nScope = 'core.dropdown',\n      icon,\n      label,\n      onKeyDown = noop,\n      onSearch,\n      onSelect = noop,\n      placement = 'bottom-left',\n      restoreFocusOnHide = false,\n      variant = 'secondary',\n      hasTabbableElements = false,\n      ...props\n    },\n    ref\n  ) {\n    const menuRef = React.useRef<MenuRef>(null)\n    const buttonRef = React.useRef<HTMLButtonElement>(null)\n    const isSearchable = Boolean(onSearch)\n    const isDialog = hasTabbableElements && !isSearchable\n\n    function afterHide(e: Event | undefined) {\n      // @ts-expect-error\n      if (e?.key === 'Escape' || e?.restoreFocus) {\n        buttonRef.current?.focus()\n      }\n\n      afterHide_?.(e)\n\n      onSearch?.({\n        target: { value: '' },\n      } as React.ChangeEvent<HTMLInputElement>)\n    }\n\n    const I18n = useI18nContext()\n\n    const ariaLabel =\n      props['aria-label'] ||\n      label ||\n      I18n.t(`core.dropdown.${props.loading ? 'loading' : 'moreOptions'}`)\n\n    return (\n      <OverlayTrigger\n        role={isSearchable ? undefined : isDialog ? 'dialog' : 'menu'}\n        trackAriaExpanded={isSearchable}\n        passA11yPropsToOverlay={!isDialog}\n        autoFocus\n        afterHide={afterHide}\n        afterShow={afterShow}\n        beforeHide={beforeHide}\n        beforeShow={beforeShow}\n        containFocus={!!footer || hasTabbableElements}\n        overlay={\n          <DropdownMenu\n            footer={footer}\n            i18nScope={i18nScope}\n            menuRef={menuRef}\n            onSearch={onSearch}\n            onSelect={onSelect}\n          >\n            {children}\n          </DropdownMenu>\n        }\n        placement={placement}\n        ref={mergeRefs(ref, buttonRef)}\n        restoreFocusOnHide={restoreFocusOnHide}\n      >\n        <DropdownButton\n          {...props}\n          aria-label={ariaLabel}\n          arrow={label !== undefined}\n          focus={onSearch ? false : isOpen}\n          icon={\n            props.loading && !label ? undefined : !icon && !label ? (\n              <EllipsisVertical />\n            ) : (\n              icon\n            )\n          }\n          onKeyDown={onKeyDown}\n          variant={variant}\n        >\n          {label}\n        </DropdownButton>\n      </OverlayTrigger>\n    )\n  }\n)\n\nexport const useDropdownContext = useOverlayTriggerContext\n\nexport function DropdownConsumer({ children }: ConsumerProps) {\n  return children(useDropdownContext())\n}\n\nDropdown_.displayName = 'Dropdown'\n\nItem.displayName = 'Dropdown.Item'\n\n/**\n\n Dropdowns display a list of actions in a menu that opens and closes. We use\n dropdowns most commonly to trigger an action or to redirect the user to\n a new page or modal.\n\n @since 10.19.0\n\n @see [Storybook](https://stories.core.procore.com/?path=/story/core-react_demos-dropdown--demo)\n\n @see [Design Guidelines](https://design.procore.com/dropdown)\n\n*/\nexport const Dropdown = addSubcomponents(\n  {\n    Item,\n    Group: MenuImperative.Group,\n  },\n  Dropdown_\n)\n"],"mappings":"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"}
+{"version":3,"file":"Dropdown.js","names":["CaretDown","CaretUp","EllipsisVertical","classNames","React","MenuImperative","useMenuImperativeControlNavigation","OverlayTrigger","useOverlayTriggerContext","useI18nContext","addSubcomponents","mergeRefs","StyledDropdownButton","StyledDropdownMenu","StyledDropdownSpinner","noop","isFunction","obj","isOpen","_ref","_ref$open","open","Item","forwardRef","_ref2","ref","_ref2$restoreFocus","restoreFocus","props","_objectWithoutProperties","_excluded","createElement","_extends","DropdownButton","_ref3","children","className","_ref3$arrow","arrow","_ref3$loading","loading","_ref3$open","_ref3$focus","focus","_ref3$variant","variant","_excluded2","caret","size","icon","undefined","iconRight","$loading","DropdownMenu","_ref4","footer","i18nScope","menuRef","onSearch_","onSearch","_ref4$onSelect","onSelect","onSelect_","id","overlayTriggerContext","_React$useState","useState","_React$useState2","_slicedToArray","search","setSearch","_useMenuImperativeCon","Boolean","menuId","menuProps","menuNavigationTriggerProps","selection","hide","e","target","value","onKeyDown","key","stopPropagation","shadowStrength","role","Search","onChange","Options","Footer","Dropdown_","Dropdown","_ref5","afterHide_","afterHide","afterShow","beforeHide","beforeShow","error","_ref5$i18nScope","label","_ref5$onKeyDown","_ref5$onSelect","_ref5$placement","placement","_ref5$restoreFocusOnH","restoreFocusOnHide","_ref5$variant","_ref5$hasTabbableElem","hasTabbableElements","_excluded3","useRef","buttonRef","isSearchable","isDialog","_buttonRef$current","current","I18n","ariaLabel","t","concat","trackAriaExpanded","passA11yPropsToOverlay","autoFocus","containFocus","overlay","useDropdownContext","DropdownConsumer","_ref6","displayName","Group"],"sources":["../../src/Dropdown/Dropdown.tsx"],"sourcesContent":["import { CaretDown, CaretUp, EllipsisVertical } from '@procore/core-icons/dist'\nimport classNames from 'classnames'\nimport React from 'react'\nimport {\n  MenuImperative,\n  useMenuImperativeControlNavigation,\n} from '../MenuImperative/MenuImperative'\nimport type { MenuRef, Selection } from '../MenuImperative/MenuImperative.types'\nimport {\n  OverlayTrigger,\n  useOverlayTriggerContext,\n} from '../OverlayTrigger/OverlayTrigger'\nimport { useI18nContext } from '../_hooks/I18n'\nimport { addSubcomponents } from '../_utils/addSubcomponents'\nimport { mergeRefs } from '../_utils/mergeRefs'\nimport {\n  StyledDropdownButton,\n  StyledDropdownMenu,\n  StyledDropdownSpinner,\n} from './Dropdown.styles'\nimport type {\n  ConsumerProps,\n  DropdownButtonProps,\n  DropdownItemProps,\n  DropdownMenuProps,\n  DropdownProps,\n} from './Dropdown.types'\n\nfunction noop() {}\nfunction isFunction(obj: any) {\n  return typeof obj === 'function'\n}\nfunction isOpen({ open = false }) {\n  return open\n}\n\nconst Item = React.forwardRef<HTMLDivElement, DropdownItemProps>(function Item(\n  { restoreFocus = false, ...props },\n  ref\n) {\n  return (\n    <MenuImperative.Item ref={ref} restoreFocus={restoreFocus} {...props} />\n  )\n}) as typeof MenuImperative.Item\n\nexport const DropdownButton = React.forwardRef<\n  HTMLButtonElement,\n  DropdownButtonProps\n>(function DropdownButton(\n  {\n    children,\n    className,\n    arrow = false,\n    loading = false,\n    open = false,\n    focus = false,\n    variant = 'secondary',\n    ...props\n  },\n  ref\n) {\n  const caret =\n    arrow && (open ? <CaretUp size=\"sm\" /> : <CaretDown size=\"sm\" />)\n\n  const icon = loading ? (\n    <StyledDropdownSpinner\n      size=\"xs\"\n      variant={variant === 'primary' ? 'light' : 'default'}\n    />\n  ) : (\n    caret\n  )\n\n  return (\n    <StyledDropdownButton\n      {...props}\n      className={classNames(className, {\n        focus: isFunction(focus) ? (focus as Function)({ open }) : focus,\n      })}\n      aria-busy={loading || undefined}\n      iconRight={icon}\n      $loading={loading}\n      variant={variant}\n      ref={ref}\n    >\n      {children}\n    </StyledDropdownButton>\n  )\n})\n\nconst DropdownMenu = React.forwardRef<HTMLDivElement, DropdownMenuProps>(\n  function DropdownMenu(\n    {\n      children,\n      footer,\n      i18nScope,\n      menuRef,\n      onSearch: onSearch_,\n      onSelect: onSelect_ = noop,\n      id,\n    },\n    ref\n  ) {\n    const overlayTriggerContext = useOverlayTriggerContext()\n\n    const [search, setSearch] = React.useState('')\n    const { menuProps, menuNavigationTriggerProps } =\n      useMenuImperativeControlNavigation(menuRef, Boolean(onSearch_), {\n        menuId: id,\n      })\n\n    function onSelect(selection: Selection) {\n      overlayTriggerContext.hide({ restoreFocus: selection.restoreFocus })\n\n      onSelect_(selection)\n    }\n\n    function onSearch(e: React.ChangeEvent<HTMLInputElement>) {\n      setSearch(e.target.value)\n\n      onSearch_?.(e)\n    }\n\n    function onKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {\n      // This is disconnected from the OverlayTrigger closing on Escape.\n      // Closing a dropdown with Escape will not close a Modal, because stopP.\n      // It is called only once because the menu component is unmounted.\n      // The next Escape will propagate.\n      if (e.key === 'Escape' || e.key === 'Esc') {\n        // only let parent listeners (modal, overlay) know when empty\n        e.stopPropagation()\n      }\n    }\n\n    return (\n      <StyledDropdownMenu ref={ref} shadowStrength={2}>\n        <MenuImperative\n          {...menuProps}\n          ref={menuRef}\n          onKeyDown={onKeyDown}\n          onSelect={onSelect}\n          role=\"menu\"\n        >\n          {onSearch_ && (\n            <MenuImperative.Search\n              {...menuNavigationTriggerProps}\n              onChange={onSearch}\n              i18nScope={i18nScope}\n            />\n          )}\n          <MenuImperative.Options>{children}</MenuImperative.Options>\n          {footer && <MenuImperative.Footer>{footer}</MenuImperative.Footer>}\n        </MenuImperative>\n      </StyledDropdownMenu>\n    )\n  }\n)\n\nconst Dropdown_ = React.forwardRef<HTMLButtonElement, DropdownProps>(\n  function Dropdown(\n    {\n      afterHide: afterHide_,\n      afterShow,\n      beforeHide,\n      beforeShow,\n      children,\n      error,\n      footer,\n      i18nScope = 'core.dropdown',\n      icon,\n      label,\n      onKeyDown = noop,\n      onSearch,\n      onSelect = noop,\n      placement = 'bottom-left',\n      restoreFocusOnHide = false,\n      variant = 'secondary',\n      hasTabbableElements = false,\n      ...props\n    },\n    ref\n  ) {\n    const menuRef = React.useRef<MenuRef>(null)\n    const buttonRef = React.useRef<HTMLButtonElement>(null)\n    const isSearchable = Boolean(onSearch)\n    const isDialog = hasTabbableElements || isSearchable\n\n    function afterHide(e: Event | undefined) {\n      // @ts-expect-error\n      if (e?.key === 'Escape' || e?.restoreFocus) {\n        buttonRef.current?.focus()\n      }\n\n      afterHide_?.(e)\n\n      onSearch?.({\n        target: { value: '' },\n      } as React.ChangeEvent<HTMLInputElement>)\n    }\n\n    const I18n = useI18nContext()\n\n    const ariaLabel =\n      props['aria-label'] ||\n      label ||\n      I18n.t(`core.dropdown.${props.loading ? 'loading' : 'moreOptions'}`)\n\n    return (\n      <OverlayTrigger\n        role={isDialog ? 'dialog' : 'menu'}\n        trackAriaExpanded={isSearchable}\n        passA11yPropsToOverlay={!isDialog}\n        autoFocus\n        afterHide={afterHide}\n        afterShow={afterShow}\n        beforeHide={beforeHide}\n        beforeShow={beforeShow}\n        containFocus={!!footer || hasTabbableElements}\n        overlay={\n          <DropdownMenu\n            footer={footer}\n            i18nScope={i18nScope}\n            menuRef={menuRef}\n            onSearch={onSearch}\n            onSelect={onSelect}\n          >\n            {children}\n          </DropdownMenu>\n        }\n        placement={placement}\n        ref={mergeRefs(ref, buttonRef)}\n        restoreFocusOnHide={restoreFocusOnHide}\n      >\n        <DropdownButton\n          {...props}\n          aria-label={ariaLabel}\n          arrow={label !== undefined}\n          focus={onSearch ? false : isOpen}\n          icon={\n            props.loading && !label ? undefined : !icon && !label ? (\n              <EllipsisVertical />\n            ) : (\n              icon\n            )\n          }\n          onKeyDown={onKeyDown}\n          variant={variant}\n        >\n          {label}\n        </DropdownButton>\n      </OverlayTrigger>\n    )\n  }\n)\n\nexport const useDropdownContext = useOverlayTriggerContext\n\nexport function DropdownConsumer({ children }: ConsumerProps) {\n  return children(useDropdownContext())\n}\n\nDropdown_.displayName = 'Dropdown'\n\nItem.displayName = 'Dropdown.Item'\n\n/**\n\n Dropdowns display a list of actions in a menu that opens and closes. We use\n dropdowns most commonly to trigger an action or to redirect the user to\n a new page or modal.\n\n @since 10.19.0\n\n @see [Storybook](https://stories.core.procore.com/?path=/story/core-react_demos-dropdown--demo)\n\n @see [Design Guidelines](https://design.procore.com/dropdown)\n\n*/\nexport const Dropdown = addSubcomponents(\n  {\n    Item,\n    Group: MenuImperative.Group,\n  },\n  Dropdown_\n)\n"],"mappings":"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"}

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_0__sc-ufsy2q-0"
+  componentId: "core-12_51_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_0__sc-ufsy2q-1"
+  componentId: "core-12_51_0__sc-ufsy2q-1"
 })(["margin:0 6px;"]);
 export var StyledDropdownButton = /*#__PURE__*/styled(Button).withConfig({
   displayName: "StyledDropdownButton",
-  componentId: "core-12_50_0__sc-ufsy2q-2"
+  componentId: "core-12_51_0__sc-ufsy2q-2"
 })(["pointer-events:", ";", ""], function (_ref) {
   var disabled = _ref.disabled,
     $loading = _ref.$loading;

package/dist/Dropdown/Dropdown.types.d.ts

@@ -115,8 +115,18 @@ export interface DropdownProps extends Omit<HTMLButtonProps, 'onSelect'> {
      */
     variant?: ButtonProps['variant'];
     /**
-     * Whether to act as modal dialog.
-     * Should be used when Dropdown has tabbable elements (e.g. buttons in footer).
+     * Whether the popup should use dialog semantics instead of menu semantics.
+     * @a11y Use `false` for menu-only content (`aria-haspopup="menu"`). Use `true`
+     * when the popup includes additional focusable widgets beyond menu items so
+     * assistive technology receives dialog semantics (`aria-haspopup="dialog"`).
+     *
+     * Defaults to menu behavior (`aria-haspopup="menu"` and overlay role `menu`).
+     * Set this to `true` when the overlay contains additional focusable widgets
+     * beyond menu items (for example footer buttons, form fields, or links), so
+     * the trigger/overlay relationship uses dialog semantics (`aria-haspopup="dialog"`
+     * and overlay role `dialog`).
+     *
+     * For menu-only overlays, keep this as `false`.
      * @default 'false'
      * @since 11.5.0
      */

package/dist/Dropdown/Dropdown.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.types.js","names":[],"sources":["../../src/Dropdown/Dropdown.types.ts"],"sourcesContent":["import type { ButtonProps } from '../Button/Button.types'\nimport type {\n  MenuItemProps,\n  MenuRef,\n  Selection,\n} from '../MenuImperative/MenuImperative.types'\nimport type { OverlayTriggerProps } from '../OverlayTrigger/OverlayTrigger.types'\nimport type { Placement } from '../_utils/types'\n\ntype HTMLButtonProps = React.ComponentPropsWithoutRef<'button'>\n\ntype HTMLDivProps = React.ComponentPropsWithoutRef<'div'>\n\nexport type DropdownPlacement = Extract<\n  Placement,\n  'bottom' | 'bottom-left' | 'bottom-right' | 'top' | 'top-left' | 'top-right'\n>\n\nexport interface DropdownProps extends Omit<HTMLButtonProps, 'onSelect'> {\n  /**\n   * @since 10.19.0\n   */\n  afterHide?: OverlayTriggerProps['afterHide']\n  /**\n   * @since 10.19.0\n   */\n  afterShow?: OverlayTriggerProps['afterShow']\n  /**\n   * @since 10.19.0\n   */\n  beforeHide?: OverlayTriggerProps['beforeHide']\n  /**\n   * @since 10.19.0\n   */\n  beforeShow?: OverlayTriggerProps['beforeShow']\n  /**\n   * @since 10.19.0\n   */\n  block?: ButtonProps['block']\n  /**\n   * @since 10.19.0\n   */\n  className?: ButtonProps['className']\n  /**\n   * @since 10.19.0\n   */\n  disabled?: ButtonProps['disabled']\n  /**\n   * @since 10.19.0\n   */\n  error?: boolean\n\n  /**\n   * Content to render in a footer.\n   * @since 10.19.0\n   */\n  footer?: React.ReactNode\n  /**\n   * The i18n key to use for the dropdowns's configurable strings.\n   * Defaults to using the core library's default strings.\n   * @since 10.19.0\n   */\n  i18nScope?: string\n  /**\n   * @remarks string icons have been deprecated, please pass a component from `@procore/core-icons`\n   * @since 10.19.0\n   */\n  icon?: ButtonProps['icon']\n  /**\n   * The button text.\n   * @since 10.19.0\n   */\n  label?: string\n  /**\n   * @since 10.19.0\n   */\n  loading?: ButtonProps['loading']\n\n  /**\n   * Adds a search bar to the dropdown.\n   * @since 10.19.0\n   */\n  onSearch?: (event: React.ChangeEvent<HTMLInputElement>) => void\n\n  /**\n   * Callback for selecting an item from the menu\n   * ```\n   * ({ event: ReactEvent, item: Menu.Item.props.item, group: bool }) => void\n   * ```\n   * `item` will be the `item` prop supplied to the `Item` component\n   * @since 10.19.0\n   */\n  onSelect?: (selection: Selection) => void\n\n  /**\n   * The placement of the overlay.\n   * @default 'bottom-left'\n   * @since 10.19.0\n   */\n  placement?: DropdownPlacement\n  /**\n   * If focus should return to the button after selection.\n   * @a11y Dropdowns hold no value and take an action. Focus is expected\n   * to be moved from a Dropdown to something else, to continue the user flow .\n   * If all actions are inert and does not move focus, set this to `true`.\n   * If some actions are inert consider using `restoreFocus` on `Dropdown.Item`.\n   * Closing Dropdown via `Escape` always restores focus.\n   * @default false\n   * @since 11.13.0\n   */\n  restoreFocusOnHide?: OverlayTriggerProps['restoreFocusOnHide']\n  /**\n   * The button size\n   * @default 'md'\n   * @since 10.19.0\n   */\n  size?: ButtonProps['size']\n  /**\n   * @since 10.19.0\n   */\n  trigger?: OverlayTriggerProps['trigger']\n  /**\n   * @since 10.19.0\n   */\n  type?: ButtonProps['type']\n\n  /**\n   * @default 'secondary'\n   * @since 10.19.0\n   */\n  variant?: ButtonProps['variant']\n  /**\n   * Whether to act as modal dialog.\n   * Should be used when Dropdown has tabbable elements (e.g. buttons in footer).\n   * @default 'false'\n   * @since 11.5.0\n   */\n  hasTabbableElements?: boolean\n}\n\nexport type DropdownItemProps = MenuItemProps\n\nexport interface DropdownButtonProps extends ButtonProps {\n  /**\n   * Shows the arrow when activated\n   * @since 10.19.0\n   */\n  arrow?: boolean\n  /**\n   * Shows the button spinner\n   * @since 10.19.0\n   */\n  loading?: boolean\n  /**\n   * Changes the direction of the arrow if shown\n   * @since 10.19.0\n   */\n  open?: boolean\n  /**\n   * @since 11.9.0\n   * If the component should apply a focus appeareance. This is\n   * not DOM focus management, and purely visual.\n   */\n  focus?: boolean | ((obj: { open: boolean }) => boolean)\n}\n\nexport interface DropdownMenuProps extends Omit<HTMLDivProps, 'onSelect'> {\n  /**\n   * @since 10.19.0\n   */\n  footer?: React.ReactNode\n  /**\n   * @since 10.19.0\n   */\n  menuRef: React.RefObject<MenuRef>\n  /**\n   * @since 10.19.0\n   */\n  i18nScope?: string\n  /**\n   * @since 10.19.0\n   */\n  onSearch?: (event: React.ChangeEvent<HTMLInputElement>) => void\n  /**\n   * @since 10.19.0\n   */\n  onSelect?: (selection: Selection) => void\n}\n\nexport interface ConsumerProps {\n  /**\n   * @since 10.19.0\n   */\n  children: (api: any) => JSX.Element\n}\n"],"mappings":""}
+{"version":3,"file":"Dropdown.types.js","names":[],"sources":["../../src/Dropdown/Dropdown.types.ts"],"sourcesContent":["import type { ButtonProps } from '../Button/Button.types'\nimport type {\n  MenuItemProps,\n  MenuRef,\n  Selection,\n} from '../MenuImperative/MenuImperative.types'\nimport type { OverlayTriggerProps } from '../OverlayTrigger/OverlayTrigger.types'\nimport type { Placement } from '../_utils/types'\n\ntype HTMLButtonProps = React.ComponentPropsWithoutRef<'button'>\n\ntype HTMLDivProps = React.ComponentPropsWithoutRef<'div'>\n\nexport type DropdownPlacement = Extract<\n  Placement,\n  'bottom' | 'bottom-left' | 'bottom-right' | 'top' | 'top-left' | 'top-right'\n>\n\nexport interface DropdownProps extends Omit<HTMLButtonProps, 'onSelect'> {\n  /**\n   * @since 10.19.0\n   */\n  afterHide?: OverlayTriggerProps['afterHide']\n  /**\n   * @since 10.19.0\n   */\n  afterShow?: OverlayTriggerProps['afterShow']\n  /**\n   * @since 10.19.0\n   */\n  beforeHide?: OverlayTriggerProps['beforeHide']\n  /**\n   * @since 10.19.0\n   */\n  beforeShow?: OverlayTriggerProps['beforeShow']\n  /**\n   * @since 10.19.0\n   */\n  block?: ButtonProps['block']\n  /**\n   * @since 10.19.0\n   */\n  className?: ButtonProps['className']\n  /**\n   * @since 10.19.0\n   */\n  disabled?: ButtonProps['disabled']\n  /**\n   * @since 10.19.0\n   */\n  error?: boolean\n\n  /**\n   * Content to render in a footer.\n   * @since 10.19.0\n   */\n  footer?: React.ReactNode\n  /**\n   * The i18n key to use for the dropdowns's configurable strings.\n   * Defaults to using the core library's default strings.\n   * @since 10.19.0\n   */\n  i18nScope?: string\n  /**\n   * @remarks string icons have been deprecated, please pass a component from `@procore/core-icons`\n   * @since 10.19.0\n   */\n  icon?: ButtonProps['icon']\n  /**\n   * The button text.\n   * @since 10.19.0\n   */\n  label?: string\n  /**\n   * @since 10.19.0\n   */\n  loading?: ButtonProps['loading']\n\n  /**\n   * Adds a search bar to the dropdown.\n   * @since 10.19.0\n   */\n  onSearch?: (event: React.ChangeEvent<HTMLInputElement>) => void\n\n  /**\n   * Callback for selecting an item from the menu\n   * ```\n   * ({ event: ReactEvent, item: Menu.Item.props.item, group: bool }) => void\n   * ```\n   * `item` will be the `item` prop supplied to the `Item` component\n   * @since 10.19.0\n   */\n  onSelect?: (selection: Selection) => void\n\n  /**\n   * The placement of the overlay.\n   * @default 'bottom-left'\n   * @since 10.19.0\n   */\n  placement?: DropdownPlacement\n  /**\n   * If focus should return to the button after selection.\n   * @a11y Dropdowns hold no value and take an action. Focus is expected\n   * to be moved from a Dropdown to something else, to continue the user flow .\n   * If all actions are inert and does not move focus, set this to `true`.\n   * If some actions are inert consider using `restoreFocus` on `Dropdown.Item`.\n   * Closing Dropdown via `Escape` always restores focus.\n   * @default false\n   * @since 11.13.0\n   */\n  restoreFocusOnHide?: OverlayTriggerProps['restoreFocusOnHide']\n  /**\n   * The button size\n   * @default 'md'\n   * @since 10.19.0\n   */\n  size?: ButtonProps['size']\n  /**\n   * @since 10.19.0\n   */\n  trigger?: OverlayTriggerProps['trigger']\n  /**\n   * @since 10.19.0\n   */\n  type?: ButtonProps['type']\n\n  /**\n   * @default 'secondary'\n   * @since 10.19.0\n   */\n  variant?: ButtonProps['variant']\n  /**\n   * Whether the popup should use dialog semantics instead of menu semantics.\n   * @a11y Use `false` for menu-only content (`aria-haspopup=\"menu\"`). Use `true`\n   * when the popup includes additional focusable widgets beyond menu items so\n   * assistive technology receives dialog semantics (`aria-haspopup=\"dialog\"`).\n   *\n   * Defaults to menu behavior (`aria-haspopup=\"menu\"` and overlay role `menu`).\n   * Set this to `true` when the overlay contains additional focusable widgets\n   * beyond menu items (for example footer buttons, form fields, or links), so\n   * the trigger/overlay relationship uses dialog semantics (`aria-haspopup=\"dialog\"`\n   * and overlay role `dialog`).\n   *\n   * For menu-only overlays, keep this as `false`.\n   * @default 'false'\n   * @since 11.5.0\n   */\n  hasTabbableElements?: boolean\n}\n\nexport type DropdownItemProps = MenuItemProps\n\nexport interface DropdownButtonProps extends ButtonProps {\n  /**\n   * Shows the arrow when activated\n   * @since 10.19.0\n   */\n  arrow?: boolean\n  /**\n   * Shows the button spinner\n   * @since 10.19.0\n   */\n  loading?: boolean\n  /**\n   * Changes the direction of the arrow if shown\n   * @since 10.19.0\n   */\n  open?: boolean\n  /**\n   * @since 11.9.0\n   * If the component should apply a focus appeareance. This is\n   * not DOM focus management, and purely visual.\n   */\n  focus?: boolean | ((obj: { open: boolean }) => boolean)\n}\n\nexport interface DropdownMenuProps extends Omit<HTMLDivProps, 'onSelect'> {\n  /**\n   * @since 10.19.0\n   */\n  footer?: React.ReactNode\n  /**\n   * @since 10.19.0\n   */\n  menuRef: React.RefObject<MenuRef>\n  /**\n   * @since 10.19.0\n   */\n  i18nScope?: string\n  /**\n   * @since 10.19.0\n   */\n  onSearch?: (event: React.ChangeEvent<HTMLInputElement>) => void\n  /**\n   * @since 10.19.0\n   */\n  onSelect?: (selection: Selection) => void\n}\n\nexport interface ConsumerProps {\n  /**\n   * @since 10.19.0\n   */\n  children: (api: any) => JSX.Element\n}\n"],"mappings":""}

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;
 };