@cloudscape-design/components 3.0.220 → 3.0.222

package/internal/components/dropdown/dropdown-fit-handler.js

@@ -2,85 +2,78 @@
 // SPDX-License-Identifier: Apache-2.0
 import { getOverflowParents, getOverflowParentDimensions } from '../../utils/scrollable-containers';
 import styles from './styles.css.js';
-var AVAILABLE_SPACE_RESERVE_DEFAULT = 50;
-var AVAILABLE_SPACE_RESERVE_MOBILE_VERTICAL = 19; // 50 - 31
-var AVAILABLE_SPACE_RESERVE_MOBILE_HORIZONTAL = 20;
-var getClosestParentDimensions = function (element) {
-    var parents = getOverflowParents(element).map(function (el) {
-        var _a = el.getBoundingClientRect(), height = _a.height, width = _a.width, top = _a.top, left = _a.left;
+const AVAILABLE_SPACE_RESERVE_DEFAULT = 50;
+const AVAILABLE_SPACE_RESERVE_MOBILE_VERTICAL = 19; // 50 - 31
+const AVAILABLE_SPACE_RESERVE_MOBILE_HORIZONTAL = 20;
+const getClosestParentDimensions = (element) => {
+    const parents = getOverflowParents(element).map(el => {
+        const { height, width, top, left } = el.getBoundingClientRect();
         return {
-            height: height,
-            width: width,
-            top: top,
-            left: left
+            height,
+            width,
+            top,
+            left,
         };
     });
     return parents.shift();
 };
-export var getAvailableSpace = function (trigger, dropdown, overflowParents, stretchWidth, stretchHeight, isMobile) {
-    if (stretchWidth === void 0) { stretchWidth = false; }
-    if (stretchHeight === void 0) { stretchHeight = false; }
-    var availableSpaceReserveVertical = stretchHeight
+export const getAvailableSpace = (trigger, dropdown, overflowParents, stretchWidth = false, stretchHeight = false, isMobile) => {
+    const availableSpaceReserveVertical = stretchHeight
         ? 0
         : isMobile
             ? AVAILABLE_SPACE_RESERVE_MOBILE_VERTICAL
             : AVAILABLE_SPACE_RESERVE_DEFAULT;
-    var availableSpaceReserveHorizontal = stretchWidth
+    const availableSpaceReserveHorizontal = stretchWidth
         ? 0
         : isMobile
             ? AVAILABLE_SPACE_RESERVE_MOBILE_HORIZONTAL
             : AVAILABLE_SPACE_RESERVE_DEFAULT;
-    var _a = trigger.getBoundingClientRect(), triggerBottom = _a.bottom, triggerLeft = _a.left, triggerRight = _a.right;
-    return overflowParents.reduce(function (_a, overflowParent) {
-        var above = _a.above, below = _a.below, left = _a.left, right = _a.right;
-        var offsetTop = triggerBottom - overflowParent.top;
-        var currentAbove = offsetTop - trigger.offsetHeight - availableSpaceReserveVertical;
-        var currentBelow = overflowParent.height - offsetTop - availableSpaceReserveVertical;
-        var currentLeft = triggerRight - overflowParent.left - availableSpaceReserveHorizontal;
-        var currentRight = overflowParent.left + overflowParent.width - triggerLeft - availableSpaceReserveHorizontal;
+    const { bottom: triggerBottom, left: triggerLeft, right: triggerRight } = trigger.getBoundingClientRect();
+    return overflowParents.reduce(({ above, below, left, right }, overflowParent) => {
+        const offsetTop = triggerBottom - overflowParent.top;
+        const currentAbove = offsetTop - trigger.offsetHeight - availableSpaceReserveVertical;
+        const currentBelow = overflowParent.height - offsetTop - availableSpaceReserveVertical;
+        const currentLeft = triggerRight - overflowParent.left - availableSpaceReserveHorizontal;
+        const currentRight = overflowParent.left + overflowParent.width - triggerLeft - availableSpaceReserveHorizontal;
         return {
             above: Math.min(above, currentAbove),
             below: Math.min(below, currentBelow),
             left: Math.min(left, currentLeft),
-            right: Math.min(right, currentRight)
+            right: Math.min(right, currentRight),
         };
     }, { above: Number.MAX_VALUE, below: Number.MAX_VALUE, left: Number.MAX_VALUE, right: Number.MAX_VALUE });
 };
-export var getInteriorAvailableSpace = function (trigger, dropdown, overflowParents, isMobile) {
-    var AVAILABLE_SPACE_RESERVE_VERTICAL = isMobile
+export const getInteriorAvailableSpace = (trigger, dropdown, overflowParents, isMobile) => {
+    const AVAILABLE_SPACE_RESERVE_VERTICAL = isMobile
         ? AVAILABLE_SPACE_RESERVE_MOBILE_VERTICAL
         : AVAILABLE_SPACE_RESERVE_DEFAULT;
-    var AVAILABLE_SPACE_RESERVE_HORIZONTAL = isMobile
+    const AVAILABLE_SPACE_RESERVE_HORIZONTAL = isMobile
         ? AVAILABLE_SPACE_RESERVE_MOBILE_HORIZONTAL
         : AVAILABLE_SPACE_RESERVE_DEFAULT;
-    var _a = trigger.getBoundingClientRect(), triggerBottom = _a.bottom, triggerTop = _a.top, triggerLeft = _a.left, triggerRight = _a.right;
-    return overflowParents.reduce(function (_a, overflowParent) {
-        var above = _a.above, below = _a.below, left = _a.left, right = _a.right;
-        var currentAbove = triggerBottom - overflowParent.top - AVAILABLE_SPACE_RESERVE_VERTICAL;
-        var currentBelow = overflowParent.height - triggerTop + overflowParent.top - AVAILABLE_SPACE_RESERVE_VERTICAL;
-        var currentLeft = triggerLeft - overflowParent.left - AVAILABLE_SPACE_RESERVE_HORIZONTAL;
-        var currentRight = overflowParent.left + overflowParent.width - triggerRight - AVAILABLE_SPACE_RESERVE_HORIZONTAL;
+    const { bottom: triggerBottom, top: triggerTop, left: triggerLeft, right: triggerRight, } = trigger.getBoundingClientRect();
+    return overflowParents.reduce(({ above, below, left, right }, overflowParent) => {
+        const currentAbove = triggerBottom - overflowParent.top - AVAILABLE_SPACE_RESERVE_VERTICAL;
+        const currentBelow = overflowParent.height - triggerTop + overflowParent.top - AVAILABLE_SPACE_RESERVE_VERTICAL;
+        const currentLeft = triggerLeft - overflowParent.left - AVAILABLE_SPACE_RESERVE_HORIZONTAL;
+        const currentRight = overflowParent.left + overflowParent.width - triggerRight - AVAILABLE_SPACE_RESERVE_HORIZONTAL;
         return {
             above: Math.min(above, currentAbove),
             below: Math.min(below, currentBelow),
             left: Math.min(left, currentLeft),
-            right: Math.min(right, currentRight)
+            right: Math.min(right, currentRight),
         };
     }, { above: Number.MAX_VALUE, below: Number.MAX_VALUE, left: Number.MAX_VALUE, right: Number.MAX_VALUE });
 };
-export var getDropdownPosition = function (trigger, dropdown, overflowParents, minWidth, preferCenter, stretchWidth, stretchHeight, isMobile) {
-    if (preferCenter === void 0) { preferCenter = false; }
-    if (stretchWidth === void 0) { stretchWidth = false; }
-    if (stretchHeight === void 0) { stretchHeight = false; }
-    var availableSpace = getAvailableSpace(trigger, dropdown, overflowParents, stretchWidth, stretchHeight, isMobile);
-    var triggerWidth = trigger.getBoundingClientRect().width;
+export const getDropdownPosition = (trigger, dropdown, overflowParents, minWidth, preferCenter = false, stretchWidth = false, stretchHeight = false, isMobile) => {
+    const availableSpace = getAvailableSpace(trigger, dropdown, overflowParents, stretchWidth, stretchHeight, isMobile);
+    const triggerWidth = trigger.getBoundingClientRect().width;
     minWidth = minWidth ? Math.min(triggerWidth, minWidth) : triggerWidth;
-    var requiredWidth = dropdown.getBoundingClientRect().width;
+    const requiredWidth = dropdown.getBoundingClientRect().width;
     // dropdown should not be smaller than the trigger
-    var idealWidth = Math.max(requiredWidth, minWidth);
-    var dropLeft;
-    var left = null;
-    var width = idealWidth;
+    const idealWidth = Math.max(requiredWidth, minWidth);
+    let dropLeft;
+    let left = null;
+    let width = idealWidth;
     //1. Can it be positioned with ideal width to the right?
     if (idealWidth <= availableSpace.right) {
         dropLeft = false;
@@ -95,34 +88,34 @@ export var getDropdownPosition = function (trigger, dropdown, overflowParents, m
         width = Math.max(availableSpace.left, availableSpace.right, minWidth);
     }
     if (preferCenter) {
-        var spillOver = (idealWidth - triggerWidth) / 2;
+        const spillOver = (idealWidth - triggerWidth) / 2;
         // availableSpace always includes the trigger width, but we want to exclude that
-        var availableOutsideLeft = availableSpace.left - triggerWidth;
-        var availableOutsideRight = availableSpace.right - triggerWidth;
-        var fitsInCenter = availableOutsideLeft >= spillOver && availableOutsideRight >= spillOver;
+        const availableOutsideLeft = availableSpace.left - triggerWidth;
+        const availableOutsideRight = availableSpace.right - triggerWidth;
+        const fitsInCenter = availableOutsideLeft >= spillOver && availableOutsideRight >= spillOver;
         if (fitsInCenter) {
             left = -spillOver;
         }
     }
-    var dropUp = availableSpace.below < dropdown.offsetHeight && availableSpace.above > availableSpace.below;
-    var availableHeight = dropUp ? availableSpace.above : availableSpace.below;
+    const dropUp = availableSpace.below < dropdown.offsetHeight && availableSpace.above > availableSpace.below;
+    const availableHeight = dropUp ? availableSpace.above : availableSpace.below;
     // Try and crop the bottom item when all options can't be displayed, affordance for "there's more"
-    var croppedHeight = stretchHeight ? availableHeight : Math.floor(availableHeight / 31) * 31 + 16;
+    const croppedHeight = stretchHeight ? availableHeight : Math.floor(availableHeight / 31) * 31 + 16;
     return {
-        dropUp: dropUp,
-        dropLeft: dropLeft,
-        left: left === null ? 'auto' : "".concat(left, "px"),
-        height: "".concat(croppedHeight, "px"),
-        width: "".concat(width, "px")
+        dropUp,
+        dropLeft,
+        left: left === null ? 'auto' : `${left}px`,
+        height: `${croppedHeight}px`,
+        width: `${width}px`,
     };
 };
-export var getInteriorDropdownPosition = function (trigger, dropdown, overflowParents, isMobile) {
-    var availableSpace = getInteriorAvailableSpace(trigger, dropdown, overflowParents, isMobile);
-    var _a = trigger.getBoundingClientRect(), triggerBottom = _a.bottom, triggerTop = _a.top, triggerWidth = _a.width;
-    var _b = getClosestParentDimensions(trigger), parentDropdownTop = _b.top, parentDropdownHeight = _b.height;
-    var dropLeft;
-    var width = dropdown.getBoundingClientRect().width;
-    var top = triggerTop - parentDropdownTop;
+export const getInteriorDropdownPosition = (trigger, dropdown, overflowParents, isMobile) => {
+    const availableSpace = getInteriorAvailableSpace(trigger, dropdown, overflowParents, isMobile);
+    const { bottom: triggerBottom, top: triggerTop, width: triggerWidth } = trigger.getBoundingClientRect();
+    const { top: parentDropdownTop, height: parentDropdownHeight } = getClosestParentDimensions(trigger);
+    let dropLeft;
+    let width = dropdown.getBoundingClientRect().width;
+    const top = triggerTop - parentDropdownTop;
     if (width <= availableSpace.right) {
         dropLeft = false;
     }
@@ -133,23 +126,23 @@ export var getInteriorDropdownPosition = function (trigger, dropdown, overflowPa
         dropLeft = availableSpace.left > availableSpace.right;
         width = Math.max(availableSpace.left, availableSpace.right);
     }
-    var left = dropLeft ? 0 - width : triggerWidth;
-    var dropUp = availableSpace.below < dropdown.offsetHeight && availableSpace.above > availableSpace.below;
-    var bottom = dropUp ? parentDropdownTop + parentDropdownHeight - triggerBottom : 0;
-    var availableHeight = dropUp ? availableSpace.above : availableSpace.below;
+    const left = dropLeft ? 0 - width : triggerWidth;
+    const dropUp = availableSpace.below < dropdown.offsetHeight && availableSpace.above > availableSpace.below;
+    const bottom = dropUp ? parentDropdownTop + parentDropdownHeight - triggerBottom : 0;
+    const availableHeight = dropUp ? availableSpace.above : availableSpace.below;
     // Try and crop the bottom item when all options can't be displayed, affordance for "there's more"
-    var croppedHeight = Math.floor(availableHeight / 31) * 31 + 16;
+    const croppedHeight = Math.floor(availableHeight / 31) * 31 + 16;
     return {
-        dropUp: dropUp,
-        dropLeft: dropLeft,
-        height: "".concat(croppedHeight, "px"),
-        width: "".concat(width, "px"),
-        top: "".concat(top, "px"),
-        bottom: "".concat(bottom, "px"),
-        left: "".concat(left, "px")
+        dropUp,
+        dropLeft,
+        height: `${croppedHeight}px`,
+        width: `${width}px`,
+        top: `${top}px`,
+        bottom: `${bottom}px`,
+        left: `${left}px`,
     };
 };
-export var calculatePosition = function (dropdownElement, triggerElement, verticalContainerElement, interior, expandToViewport, preferCenter, stretchWidth, stretchHeight, isMobile, minWidth) {
+export const calculatePosition = (dropdownElement, triggerElement, verticalContainerElement, interior, expandToViewport, preferCenter, stretchWidth, stretchHeight, isMobile, minWidth) => {
     // cleaning previously assigned values,
     // so that they are not reused in case of screen resize and similar events
     verticalContainerElement.style.maxHeight = '';
@@ -160,11 +153,11 @@ export var calculatePosition = function (dropdownElement, triggerElement, vertic
     dropdownElement.classList.remove(styles['dropdown-drop-left']);
     dropdownElement.classList.remove(styles['dropdown-drop-right']);
     dropdownElement.classList.remove(styles['dropdown-drop-up']);
-    var overflowParents = getOverflowParentDimensions(dropdownElement, interior, expandToViewport, stretchHeight);
-    var position = interior
+    const overflowParents = getOverflowParentDimensions(dropdownElement, interior, expandToViewport, stretchHeight);
+    const position = interior
         ? getInteriorDropdownPosition(triggerElement, dropdownElement, overflowParents, isMobile)
         : getDropdownPosition(triggerElement, dropdownElement, overflowParents, minWidth, preferCenter, stretchWidth, stretchHeight, isMobile);
-    var triggerBox = triggerElement.getBoundingClientRect();
+    const triggerBox = triggerElement.getBoundingClientRect();
     return [position, triggerBox];
 };
 //# sourceMappingURL=dropdown-fit-handler.js.map

package/internal/components/dropdown/dropdown-fit-handler.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-fit-handler.js","sourceRoot":"","sources":["../../../../../src/internal/components/dropdown/dropdown-fit-handler.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { Dimensions, getOverflowParents, getOverflowParentDimensions } from '../../utils/scrollable-containers';\nimport styles from './styles.css.js';\n\nconst AVAILABLE_SPACE_RESERVE_DEFAULT = 50;\nconst AVAILABLE_SPACE_RESERVE_MOBILE_VERTICAL = 19; // 50 - 31\nconst AVAILABLE_SPACE_RESERVE_MOBILE_HORIZONTAL = 20;\n\ninterface AvailableSpace {\n  above: number;\n  below: number;\n  left: number;\n  right: number;\n}\nexport interface DropdownPosition {\n  height: string;\n  width: string;\n  dropUp: boolean;\n  dropLeft: boolean;\n  left: string;\n}\nexport interface InteriorDropdownPosition extends DropdownPosition {\n  bottom: string;\n  top: string;\n}\n\nconst getClosestParentDimensions = (element: HTMLElement): any => {\n  const parents = getOverflowParents(element).map(el => {\n    const { height, width, top, left } = el.getBoundingClientRect();\n    return {\n      height,\n      width,\n      top,\n      left,\n    };\n  });\n\n  return parents.shift();\n};\n\nexport const getAvailableSpace = (\n  trigger: HTMLElement,\n  dropdown: HTMLElement,\n  overflowParents: ReadonlyArray<Dimensions>,\n  stretchWidth = false,\n  stretchHeight = false,\n  isMobile?: boolean\n): AvailableSpace => {\n  const availableSpaceReserveVertical = stretchHeight\n    ? 0\n    : isMobile\n    ? AVAILABLE_SPACE_RESERVE_MOBILE_VERTICAL\n    : AVAILABLE_SPACE_RESERVE_DEFAULT;\n  const availableSpaceReserveHorizontal = stretchWidth\n    ? 0\n    : isMobile\n    ? AVAILABLE_SPACE_RESERVE_MOBILE_HORIZONTAL\n    : AVAILABLE_SPACE_RESERVE_DEFAULT;\n  const { bottom: triggerBottom, left: triggerLeft, right: triggerRight } = trigger.getBoundingClientRect();\n\n  return overflowParents.reduce(\n    ({ above, below, left, right }, overflowParent) => {\n      const offsetTop = triggerBottom - overflowParent.top;\n      const currentAbove = offsetTop - trigger.offsetHeight - availableSpaceReserveVertical;\n      const currentBelow = overflowParent.height - offsetTop - availableSpaceReserveVertical;\n      const currentLeft = triggerRight - overflowParent.left - availableSpaceReserveHorizontal;\n      const currentRight = overflowParent.left + overflowParent.width - triggerLeft - availableSpaceReserveHorizontal;\n\n      return {\n        above: Math.min(above, currentAbove),\n        below: Math.min(below, currentBelow),\n        left: Math.min(left, currentLeft),\n        right: Math.min(right, currentRight),\n      };\n    },\n    { above: Number.MAX_VALUE, below: Number.MAX_VALUE, left: Number.MAX_VALUE, right: Number.MAX_VALUE }\n  );\n};\n\nexport const getInteriorAvailableSpace = (\n  trigger: HTMLElement,\n  dropdown: HTMLElement,\n  overflowParents: ReadonlyArray<Dimensions>,\n  isMobile?: boolean\n): AvailableSpace => {\n  const AVAILABLE_SPACE_RESERVE_VERTICAL = isMobile\n    ? AVAILABLE_SPACE_RESERVE_MOBILE_VERTICAL\n    : AVAILABLE_SPACE_RESERVE_DEFAULT;\n  const AVAILABLE_SPACE_RESERVE_HORIZONTAL = isMobile\n    ? AVAILABLE_SPACE_RESERVE_MOBILE_HORIZONTAL\n    : AVAILABLE_SPACE_RESERVE_DEFAULT;\n  const {\n    bottom: triggerBottom,\n    top: triggerTop,\n    left: triggerLeft,\n    right: triggerRight,\n  } = trigger.getBoundingClientRect();\n\n  return overflowParents.reduce(\n    ({ above, below, left, right }, overflowParent) => {\n      const currentAbove = triggerBottom - overflowParent.top - AVAILABLE_SPACE_RESERVE_VERTICAL;\n      const currentBelow = overflowParent.height - triggerTop + overflowParent.top - AVAILABLE_SPACE_RESERVE_VERTICAL;\n      const currentLeft = triggerLeft - overflowParent.left - AVAILABLE_SPACE_RESERVE_HORIZONTAL;\n      const currentRight =\n        overflowParent.left + overflowParent.width - triggerRight - AVAILABLE_SPACE_RESERVE_HORIZONTAL;\n\n      return {\n        above: Math.min(above, currentAbove),\n        below: Math.min(below, currentBelow),\n        left: Math.min(left, currentLeft),\n        right: Math.min(right, currentRight),\n      };\n    },\n    { above: Number.MAX_VALUE, below: Number.MAX_VALUE, left: Number.MAX_VALUE, right: Number.MAX_VALUE }\n  );\n};\n\nexport const getDropdownPosition = (\n  trigger: HTMLElement,\n  dropdown: HTMLElement,\n  overflowParents: ReadonlyArray<Dimensions>,\n  minWidth?: number,\n  preferCenter = false,\n  stretchWidth = false,\n  stretchHeight = false,\n  isMobile?: boolean\n): DropdownPosition => {\n  const availableSpace = getAvailableSpace(trigger, dropdown, overflowParents, stretchWidth, stretchHeight, isMobile);\n  const triggerWidth = trigger.getBoundingClientRect().width;\n  minWidth = minWidth ? Math.min(triggerWidth, minWidth) : triggerWidth;\n  const requiredWidth = dropdown.getBoundingClientRect().width;\n  // dropdown should not be smaller than the trigger\n  const idealWidth = Math.max(requiredWidth, minWidth);\n\n  let dropLeft: boolean;\n  let left: number | null = null;\n  let width = idealWidth;\n\n  //1. Can it be positioned with ideal width to the right?\n  if (idealWidth <= availableSpace.right) {\n    dropLeft = false;\n    //2. Can it be positioned with ideal width to the left?\n  } else if (idealWidth <= availableSpace.left) {\n    dropLeft = true;\n    //3. Fit into biggest available space either on left or right\n  } else {\n    dropLeft = availableSpace.left > availableSpace.right;\n    width = Math.max(availableSpace.left, availableSpace.right, minWidth);\n  }\n\n  if (preferCenter) {\n    const spillOver = (idealWidth - triggerWidth) / 2;\n\n    // availableSpace always includes the trigger width, but we want to exclude that\n    const availableOutsideLeft = availableSpace.left - triggerWidth;\n    const availableOutsideRight = availableSpace.right - triggerWidth;\n\n    const fitsInCenter = availableOutsideLeft >= spillOver && availableOutsideRight >= spillOver;\n    if (fitsInCenter) {\n      left = -spillOver;\n    }\n  }\n\n  const dropUp = availableSpace.below < dropdown.offsetHeight && availableSpace.above > availableSpace.below;\n  const availableHeight = dropUp ? availableSpace.above : availableSpace.below;\n  // Try and crop the bottom item when all options can't be displayed, affordance for \"there's more\"\n  const croppedHeight = stretchHeight ? availableHeight : Math.floor(availableHeight / 31) * 31 + 16;\n\n  return {\n    dropUp,\n    dropLeft,\n    left: left === null ? 'auto' : `${left}px`,\n    height: `${croppedHeight}px`,\n    width: `${width}px`,\n  };\n};\n\nexport const getInteriorDropdownPosition = (\n  trigger: HTMLElement,\n  dropdown: HTMLElement,\n  overflowParents: ReadonlyArray<Dimensions>,\n  isMobile?: boolean\n): InteriorDropdownPosition => {\n  const availableSpace = getInteriorAvailableSpace(trigger, dropdown, overflowParents, isMobile);\n  const { bottom: triggerBottom, top: triggerTop, width: triggerWidth } = trigger.getBoundingClientRect();\n  const { top: parentDropdownTop, height: parentDropdownHeight } = getClosestParentDimensions(trigger);\n\n  let dropLeft;\n\n  let width = dropdown.getBoundingClientRect().width;\n  const top = triggerTop - parentDropdownTop;\n  if (width <= availableSpace.right) {\n    dropLeft = false;\n  } else if (width <= availableSpace.left) {\n    dropLeft = true;\n  } else {\n    dropLeft = availableSpace.left > availableSpace.right;\n    width = Math.max(availableSpace.left, availableSpace.right);\n  }\n\n  const left = dropLeft ? 0 - width : triggerWidth;\n\n  const dropUp = availableSpace.below < dropdown.offsetHeight && availableSpace.above > availableSpace.below;\n  const bottom = dropUp ? parentDropdownTop + parentDropdownHeight - triggerBottom : 0;\n  const availableHeight = dropUp ? availableSpace.above : availableSpace.below;\n  // Try and crop the bottom item when all options can't be displayed, affordance for \"there's more\"\n  const croppedHeight = Math.floor(availableHeight / 31) * 31 + 16;\n\n  return {\n    dropUp,\n    dropLeft,\n    height: `${croppedHeight}px`,\n    width: `${width}px`,\n    top: `${top}px`,\n    bottom: `${bottom}px`,\n    left: `${left}px`,\n  };\n};\n\nexport const calculatePosition = (\n  dropdownElement: HTMLDivElement,\n  triggerElement: HTMLDivElement,\n  verticalContainerElement: HTMLDivElement,\n  interior: boolean,\n  expandToViewport: boolean,\n  preferCenter: boolean,\n  stretchWidth: boolean,\n  stretchHeight: boolean,\n  isMobile: boolean,\n  minWidth?: number\n): [DropdownPosition, DOMRect] => {\n  // cleaning previously assigned values,\n  // so that they are not reused in case of screen resize and similar events\n  verticalContainerElement.style.maxHeight = '';\n  dropdownElement.style.width = '';\n  dropdownElement.style.top = '';\n  dropdownElement.style.bottom = '';\n  dropdownElement.style.left = '';\n\n  dropdownElement.classList.remove(styles['dropdown-drop-left']);\n  dropdownElement.classList.remove(styles['dropdown-drop-right']);\n  dropdownElement.classList.remove(styles['dropdown-drop-up']);\n\n  const overflowParents = getOverflowParentDimensions(dropdownElement, interior, expandToViewport, stretchHeight);\n  const position = interior\n    ? getInteriorDropdownPosition(triggerElement, dropdownElement, overflowParents, isMobile)\n    : getDropdownPosition(\n        triggerElement,\n        dropdownElement,\n        overflowParents,\n        minWidth,\n        preferCenter,\n        stretchWidth,\n        stretchHeight,\n        isMobile\n      );\n  const triggerBox = triggerElement.getBoundingClientRect();\n  return [position, triggerBox];\n};\n"]}
+{"version":3,"file":"dropdown-fit-handler.js","sourceRoot":"","sources":["../../../../../src/internal/components/dropdown/dropdown-fit-handler.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { Dimensions, getOverflowParents, getOverflowParentDimensions } from '../../utils/scrollable-containers';\nimport styles from './styles.css.js';\n\nconst AVAILABLE_SPACE_RESERVE_DEFAULT = 50;\nconst AVAILABLE_SPACE_RESERVE_MOBILE_VERTICAL = 19; // 50 - 31\nconst AVAILABLE_SPACE_RESERVE_MOBILE_HORIZONTAL = 20;\n\ninterface AvailableSpace {\n  above: number;\n  below: number;\n  left: number;\n  right: number;\n}\nexport interface DropdownPosition {\n  height: string;\n  width: string;\n  dropUp: boolean;\n  dropLeft: boolean;\n  left: string;\n}\nexport interface InteriorDropdownPosition extends DropdownPosition {\n  bottom: string;\n  top: string;\n}\n\nconst getClosestParentDimensions = (element: HTMLElement): any => {\n  const parents = getOverflowParents(element).map(el => {\n    const { height, width, top, left } = el.getBoundingClientRect();\n    return {\n      height,\n      width,\n      top,\n      left,\n    };\n  });\n\n  return parents.shift();\n};\n\nexport const getAvailableSpace = (\n  trigger: HTMLElement,\n  dropdown: HTMLElement,\n  overflowParents: ReadonlyArray<Dimensions>,\n  stretchWidth = false,\n  stretchHeight = false,\n  isMobile?: boolean\n): AvailableSpace => {\n  const availableSpaceReserveVertical = stretchHeight\n    ? 0\n    : isMobile\n    ? AVAILABLE_SPACE_RESERVE_MOBILE_VERTICAL\n    : AVAILABLE_SPACE_RESERVE_DEFAULT;\n  const availableSpaceReserveHorizontal = stretchWidth\n    ? 0\n    : isMobile\n    ? AVAILABLE_SPACE_RESERVE_MOBILE_HORIZONTAL\n    : AVAILABLE_SPACE_RESERVE_DEFAULT;\n  const { bottom: triggerBottom, left: triggerLeft, right: triggerRight } = trigger.getBoundingClientRect();\n\n  return overflowParents.reduce(\n    ({ above, below, left, right }, overflowParent) => {\n      const offsetTop = triggerBottom - overflowParent.top;\n      const currentAbove = offsetTop - trigger.offsetHeight - availableSpaceReserveVertical;\n      const currentBelow = overflowParent.height - offsetTop - availableSpaceReserveVertical;\n      const currentLeft = triggerRight - overflowParent.left - availableSpaceReserveHorizontal;\n      const currentRight = overflowParent.left + overflowParent.width - triggerLeft - availableSpaceReserveHorizontal;\n\n      return {\n        above: Math.min(above, currentAbove),\n        below: Math.min(below, currentBelow),\n        left: Math.min(left, currentLeft),\n        right: Math.min(right, currentRight),\n      };\n    },\n    { above: Number.MAX_VALUE, below: Number.MAX_VALUE, left: Number.MAX_VALUE, right: Number.MAX_VALUE }\n  );\n};\n\nexport const getInteriorAvailableSpace = (\n  trigger: HTMLElement,\n  dropdown: HTMLElement,\n  overflowParents: ReadonlyArray<Dimensions>,\n  isMobile?: boolean\n): AvailableSpace => {\n  const AVAILABLE_SPACE_RESERVE_VERTICAL = isMobile\n    ? AVAILABLE_SPACE_RESERVE_MOBILE_VERTICAL\n    : AVAILABLE_SPACE_RESERVE_DEFAULT;\n  const AVAILABLE_SPACE_RESERVE_HORIZONTAL = isMobile\n    ? AVAILABLE_SPACE_RESERVE_MOBILE_HORIZONTAL\n    : AVAILABLE_SPACE_RESERVE_DEFAULT;\n  const {\n    bottom: triggerBottom,\n    top: triggerTop,\n    left: triggerLeft,\n    right: triggerRight,\n  } = trigger.getBoundingClientRect();\n\n  return overflowParents.reduce(\n    ({ above, below, left, right }, overflowParent) => {\n      const currentAbove = triggerBottom - overflowParent.top - AVAILABLE_SPACE_RESERVE_VERTICAL;\n      const currentBelow = overflowParent.height - triggerTop + overflowParent.top - AVAILABLE_SPACE_RESERVE_VERTICAL;\n      const currentLeft = triggerLeft - overflowParent.left - AVAILABLE_SPACE_RESERVE_HORIZONTAL;\n      const currentRight =\n        overflowParent.left + overflowParent.width - triggerRight - AVAILABLE_SPACE_RESERVE_HORIZONTAL;\n\n      return {\n        above: Math.min(above, currentAbove),\n        below: Math.min(below, currentBelow),\n        left: Math.min(left, currentLeft),\n        right: Math.min(right, currentRight),\n      };\n    },\n    { above: Number.MAX_VALUE, below: Number.MAX_VALUE, left: Number.MAX_VALUE, right: Number.MAX_VALUE }\n  );\n};\n\nexport const getDropdownPosition = (\n  trigger: HTMLElement,\n  dropdown: HTMLElement,\n  overflowParents: ReadonlyArray<Dimensions>,\n  minWidth?: number,\n  preferCenter = false,\n  stretchWidth = false,\n  stretchHeight = false,\n  isMobile?: boolean\n): DropdownPosition => {\n  const availableSpace = getAvailableSpace(trigger, dropdown, overflowParents, stretchWidth, stretchHeight, isMobile);\n  const triggerWidth = trigger.getBoundingClientRect().width;\n  minWidth = minWidth ? Math.min(triggerWidth, minWidth) : triggerWidth;\n  const requiredWidth = dropdown.getBoundingClientRect().width;\n  // dropdown should not be smaller than the trigger\n  const idealWidth = Math.max(requiredWidth, minWidth);\n\n  let dropLeft: boolean;\n  let left: number | null = null;\n  let width = idealWidth;\n\n  //1. Can it be positioned with ideal width to the right?\n  if (idealWidth <= availableSpace.right) {\n    dropLeft = false;\n    //2. Can it be positioned with ideal width to the left?\n  } else if (idealWidth <= availableSpace.left) {\n    dropLeft = true;\n    //3. Fit into biggest available space either on left or right\n  } else {\n    dropLeft = availableSpace.left > availableSpace.right;\n    width = Math.max(availableSpace.left, availableSpace.right, minWidth);\n  }\n\n  if (preferCenter) {\n    const spillOver = (idealWidth - triggerWidth) / 2;\n\n    // availableSpace always includes the trigger width, but we want to exclude that\n    const availableOutsideLeft = availableSpace.left - triggerWidth;\n    const availableOutsideRight = availableSpace.right - triggerWidth;\n\n    const fitsInCenter = availableOutsideLeft >= spillOver && availableOutsideRight >= spillOver;\n    if (fitsInCenter) {\n      left = -spillOver;\n    }\n  }\n\n  const dropUp = availableSpace.below < dropdown.offsetHeight && availableSpace.above > availableSpace.below;\n  const availableHeight = dropUp ? availableSpace.above : availableSpace.below;\n  // Try and crop the bottom item when all options can't be displayed, affordance for \"there's more\"\n  const croppedHeight = stretchHeight ? availableHeight : Math.floor(availableHeight / 31) * 31 + 16;\n\n  return {\n    dropUp,\n    dropLeft,\n    left: left === null ? 'auto' : `${left}px`,\n    height: `${croppedHeight}px`,\n    width: `${width}px`,\n  };\n};\n\nexport const getInteriorDropdownPosition = (\n  trigger: HTMLElement,\n  dropdown: HTMLElement,\n  overflowParents: ReadonlyArray<Dimensions>,\n  isMobile?: boolean\n): InteriorDropdownPosition => {\n  const availableSpace = getInteriorAvailableSpace(trigger, dropdown, overflowParents, isMobile);\n  const { bottom: triggerBottom, top: triggerTop, width: triggerWidth } = trigger.getBoundingClientRect();\n  const { top: parentDropdownTop, height: parentDropdownHeight } = getClosestParentDimensions(trigger);\n\n  let dropLeft;\n\n  let width = dropdown.getBoundingClientRect().width;\n  const top = triggerTop - parentDropdownTop;\n  if (width <= availableSpace.right) {\n    dropLeft = false;\n  } else if (width <= availableSpace.left) {\n    dropLeft = true;\n  } else {\n    dropLeft = availableSpace.left > availableSpace.right;\n    width = Math.max(availableSpace.left, availableSpace.right);\n  }\n\n  const left = dropLeft ? 0 - width : triggerWidth;\n\n  const dropUp = availableSpace.below < dropdown.offsetHeight && availableSpace.above > availableSpace.below;\n  const bottom = dropUp ? parentDropdownTop + parentDropdownHeight - triggerBottom : 0;\n  const availableHeight = dropUp ? availableSpace.above : availableSpace.below;\n  // Try and crop the bottom item when all options can't be displayed, affordance for \"there's more\"\n  const croppedHeight = Math.floor(availableHeight / 31) * 31 + 16;\n\n  return {\n    dropUp,\n    dropLeft,\n    height: `${croppedHeight}px`,\n    width: `${width}px`,\n    top: `${top}px`,\n    bottom: `${bottom}px`,\n    left: `${left}px`,\n  };\n};\n\nexport const calculatePosition = (\n  dropdownElement: HTMLDivElement,\n  triggerElement: HTMLDivElement,\n  verticalContainerElement: HTMLDivElement,\n  interior: boolean,\n  expandToViewport: boolean,\n  preferCenter: boolean,\n  stretchWidth: boolean,\n  stretchHeight: boolean,\n  isMobile: boolean,\n  minWidth?: number\n): [DropdownPosition, DOMRect] => {\n  // cleaning previously assigned values,\n  // so that they are not reused in case of screen resize and similar events\n  verticalContainerElement.style.maxHeight = '';\n  dropdownElement.style.width = '';\n  dropdownElement.style.top = '';\n  dropdownElement.style.bottom = '';\n  dropdownElement.style.left = '';\n\n  dropdownElement.classList.remove(styles['dropdown-drop-left']);\n  dropdownElement.classList.remove(styles['dropdown-drop-right']);\n  dropdownElement.classList.remove(styles['dropdown-drop-up']);\n\n  const overflowParents = getOverflowParentDimensions(dropdownElement, interior, expandToViewport, stretchHeight);\n  const position = interior\n    ? getInteriorDropdownPosition(triggerElement, dropdownElement, overflowParents, isMobile)\n    : getDropdownPosition(\n        triggerElement,\n        dropdownElement,\n        overflowParents,\n        minWidth,\n        preferCenter,\n        stretchWidth,\n        stretchHeight,\n        isMobile\n      );\n  const triggerBox = triggerElement.getBoundingClientRect();\n  return [position, triggerBox];\n};\n"]}

package/internal/components/dropdown/index.js

@@ -1,4 +1,3 @@
-import { __spreadArray } from "tslib";
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import styles from './styles.css.js';
@@ -15,8 +14,7 @@ import { DropdownContextProvider } from './context';
 import { useMobile } from '../../hooks/use-mobile';
 import TabTrap from '../tab-trap/index.js';
 import { getFirstFocusable, getLastFocusable } from '../focus-lock/utils.js';
-var DropdownContainer = function (_a) {
-    var children = _a.children, _b = _a.renderWithPortal, renderWithPortal = _b === void 0 ? false : _b, id = _a.id, open = _a.open;
+const DropdownContainer = ({ children, renderWithPortal = false, id, open }) => {
     if (renderWithPortal) {
         if (open) {
             return createPortal(React.createElement("div", { id: id }, children), document.body);
@@ -29,19 +27,17 @@ var DropdownContainer = function (_a) {
         return React.createElement(React.Fragment, null, children);
     }
 };
-var TransitionContent = function (_a) {
-    var _b;
-    var state = _a.state, transitionRef = _a.transitionRef, dropdownClasses = _a.dropdownClasses, stretchWidth = _a.stretchWidth, interior = _a.interior, isRefresh = _a.isRefresh, dropdownRef = _a.dropdownRef, verticalContainerRef = _a.verticalContainerRef, expandToViewport = _a.expandToViewport, header = _a.header, children = _a.children, footer = _a.footer, position = _a.position, open = _a.open, onMouseDown = _a.onMouseDown;
-    var contentRef = useMergeRefs(dropdownRef, transitionRef);
-    return (React.createElement("div", { className: clsx(styles.dropdown, dropdownClasses, (_b = {},
-            _b[styles.open] = open,
-            _b[styles['with-limited-width']] = !stretchWidth,
-            _b[styles['hide-upper-border']] = stretchWidth,
-            _b[styles.interior] = interior,
-            _b[styles['is-empty']] = !header && !children,
-            _b[styles.refresh] = isRefresh,
-            _b[styles['use-portal']] = expandToViewport && !interior,
-            _b)), ref: contentRef, "data-open": open, "data-animating": state !== 'exited', "aria-hidden": !open, onMouseDown: onMouseDown },
+const TransitionContent = ({ state, transitionRef, dropdownClasses, stretchWidth, interior, isRefresh, dropdownRef, verticalContainerRef, expandToViewport, header, children, footer, position, open, onMouseDown, }) => {
+    const contentRef = useMergeRefs(dropdownRef, transitionRef);
+    return (React.createElement("div", { className: clsx(styles.dropdown, dropdownClasses, {
+            [styles.open]: open,
+            [styles['with-limited-width']]: !stretchWidth,
+            [styles['hide-upper-border']]: stretchWidth,
+            [styles.interior]: interior,
+            [styles['is-empty']]: !header && !children,
+            [styles.refresh]: isRefresh,
+            [styles['use-portal']]: expandToViewport && !interior,
+        }), ref: contentRef, "data-open": open, "data-animating": state !== 'exited', "aria-hidden": !open, onMouseDown: onMouseDown },
         React.createElement("div", { className: clsx(styles['dropdown-content-wrapper'], isRefresh && styles.refresh) },
             React.createElement("div", { className: styles['ie11-wrapper'] },
                 React.createElement("div", { ref: verticalContainerRef, className: styles['dropdown-content'] },
@@ -50,26 +46,25 @@ var TransitionContent = function (_a) {
                         children,
                         footer))))));
 };
-var Dropdown = function (_a) {
-    var children = _a.children, trigger = _a.trigger, open = _a.open, onDropdownClose = _a.onDropdownClose, onMouseDown = _a.onMouseDown, header = _a.header, footer = _a.footer, dropdownId = _a.dropdownId, _b = _a.stretchTriggerHeight, stretchTriggerHeight = _b === void 0 ? false : _b, _c = _a.stretchWidth, stretchWidth = _c === void 0 ? true : _c, _d = _a.stretchHeight, stretchHeight = _d === void 0 ? false : _d, _e = _a.stretchToTriggerWidth, stretchToTriggerWidth = _e === void 0 ? true : _e, _f = _a.expandToViewport, expandToViewport = _f === void 0 ? false : _f, _g = _a.preferCenter, preferCenter = _g === void 0 ? false : _g, _h = _a.interior, interior = _h === void 0 ? false : _h, minWidth = _a.minWidth, _j = _a.scrollable, scrollable = _j === void 0 ? true : _j, _k = _a.loopFocus, loopFocus = _k === void 0 ? expandToViewport : _k, onFocus = _a.onFocus, onBlur = _a.onBlur, contentKey = _a.contentKey;
-    var wrapperRef = useRef(null);
-    var triggerRef = useRef(null);
-    var dropdownRef = useRef(null);
-    var dropdownContainerRef = useRef(null);
+const Dropdown = ({ children, trigger, open, onDropdownClose, onMouseDown, header, footer, dropdownId, stretchTriggerHeight = false, stretchWidth = true, stretchHeight = false, stretchToTriggerWidth = true, expandToViewport = false, preferCenter = false, interior = false, minWidth, scrollable = true, loopFocus = expandToViewport, onFocus, onBlur, contentKey, }) => {
+    const wrapperRef = useRef(null);
+    const triggerRef = useRef(null);
+    const dropdownRef = useRef(null);
+    const dropdownContainerRef = useRef(null);
     // This container is only needed to apply max-height to. We can't move max-height to it's parent
     // because of an IE11 issue with flexbox. https://github.com/philipwalton/flexbugs/issues/216
-    var verticalContainerRef = useRef(null);
+    const verticalContainerRef = useRef(null);
     // To keep track of the initial position (drop up/down) which is kept the same during fixed repositioning
-    var fixedPosition = useRef(null);
-    var isRefresh = useVisualRefresh();
-    var dropdownClasses = usePortalModeClasses(triggerRef);
-    var _l = useState('bottom-right'), position = _l[0], setPosition = _l[1];
-    var isMobile = useMobile();
-    var setDropdownPosition = function (position, triggerBox, target, verticalContainer) {
-        var entireWidth = !interior && stretchWidth;
+    const fixedPosition = useRef(null);
+    const isRefresh = useVisualRefresh();
+    const dropdownClasses = usePortalModeClasses(triggerRef);
+    const [position, setPosition] = useState('bottom-right');
+    const isMobile = useMobile();
+    const setDropdownPosition = (position, triggerBox, target, verticalContainer) => {
+        const entireWidth = !interior && stretchWidth;
         if (!stretchWidth) {
             // 1px offset for dropdowns where the dropdown itself needs a border, rather than on the items
-            verticalContainer.style.maxHeight = "".concat(parseInt(position.height) + 1, "px");
+            verticalContainer.style.maxHeight = `${parseInt(position.height) + 1}px`;
         }
         else {
             verticalContainer.style.maxHeight = position.height;
@@ -100,16 +95,16 @@ var Dropdown = function (_a) {
         if (expandToViewport && !interior) {
             target.style.position = 'fixed';
             if (position.dropUp) {
-                target.style.bottom = "calc(100% - ".concat(triggerBox.top, "px)");
+                target.style.bottom = `calc(100% - ${triggerBox.top}px)`;
             }
             else {
-                target.style.top = "".concat(triggerBox.bottom, "px");
+                target.style.top = `${triggerBox.bottom}px`;
             }
             if (position.dropLeft) {
-                target.style.left = "calc(".concat(triggerBox.right, "px - ").concat(position.width, ")");
+                target.style.left = `calc(${triggerBox.right}px - ${position.width})`;
             }
             else {
-                target.style.left = "".concat(triggerBox.left, "px");
+                target.style.left = `${triggerBox.left}px`;
             }
             // Keep track of the initial dropdown position and direction.
             // Dropdown direction doesn't need to change as the user scrolls, just needs to stay attached to the trigger.
@@ -141,29 +136,26 @@ var Dropdown = function (_a) {
             setPosition('bottom-right');
         }
     };
-    var isOutsideDropdown = function (element) {
-        return (!wrapperRef.current || !wrapperRef.current.contains(element)) &&
-            (!dropdownContainerRef.current || !dropdownContainerRef.current.contains(element));
-    };
-    var focusHandler = function (event) {
+    const isOutsideDropdown = (element) => (!wrapperRef.current || !wrapperRef.current.contains(element)) &&
+        (!dropdownContainerRef.current || !dropdownContainerRef.current.contains(element));
+    const focusHandler = (event) => {
         if (!event.relatedTarget || isOutsideDropdown(event.relatedTarget)) {
             fireNonCancelableEvent(onFocus, event);
         }
     };
-    var blurHandler = function (event) {
+    const blurHandler = (event) => {
         if (!event.relatedTarget || isOutsideDropdown(event.relatedTarget)) {
             fireNonCancelableEvent(onBlur, event);
         }
     };
-    useLayoutEffect(function () {
-        var onDropdownOpen = function () {
+    useLayoutEffect(() => {
+        const onDropdownOpen = () => {
             if (open && dropdownRef.current && triggerRef.current && verticalContainerRef.current) {
                 // calculate scroll width only for dropdowns that has a scrollbar and ignore it for date picker components
                 if (scrollable) {
                     dropdownRef.current.classList.add(styles.nowrap);
                 }
-                setDropdownPosition.apply(void 0, __spreadArray(__spreadArray([], calculatePosition(dropdownRef.current, triggerRef.current, verticalContainerRef.current, interior, expandToViewport, preferCenter, stretchWidth, stretchHeight, isMobile, minWidth), false), [dropdownRef.current,
-                    verticalContainerRef.current], false));
+                setDropdownPosition(...calculatePosition(dropdownRef.current, triggerRef.current, verticalContainerRef.current, interior, expandToViewport, preferCenter, stretchWidth, stretchHeight, isMobile, minWidth), dropdownRef.current, verticalContainerRef.current);
                 if (scrollable) {
                     dropdownRef.current.classList.remove(styles.nowrap);
                 }
@@ -175,11 +167,11 @@ var Dropdown = function (_a) {
             window.addEventListener('scroll', onDropdownOpen);
             // only listen to window scroll within very short time after the dropdown opens
             // do not want to interfere dropdown position on scroll afterwards
-            var timeoutId_1 = setTimeout(function () {
+            const timeoutId = setTimeout(() => {
                 window.removeEventListener('scroll', onDropdownOpen);
             }, 500);
-            return function () {
-                clearTimeout(timeoutId_1);
+            return () => {
+                clearTimeout(timeoutId);
                 window.removeEventListener('scroll', onDropdownOpen);
             };
         }
@@ -187,42 +179,42 @@ var Dropdown = function (_a) {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [open, dropdownRef, triggerRef, verticalContainerRef, interior, stretchWidth, isMobile, contentKey]);
     // subscribe to outside click
-    useEffect(function () {
+    useEffect(() => {
         if (!open) {
             return;
         }
-        var clickListener = function (e) {
+        const clickListener = (e) => {
             var _a, _b;
             if (!((_a = dropdownRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target)) && !((_b = triggerRef.current) === null || _b === void 0 ? void 0 : _b.contains(e.target))) {
                 fireNonCancelableEvent(onDropdownClose);
             }
         };
         window.addEventListener('click', clickListener, true);
-        return function () {
+        return () => {
             window.removeEventListener('click', clickListener, true);
         };
     }, [open, onDropdownClose]);
     // sync dropdown position on scroll and resize
-    useLayoutEffect(function () {
+    useLayoutEffect(() => {
         if (!expandToViewport || !open) {
             return;
         }
-        var updateDropdownPosition = function () {
+        const updateDropdownPosition = () => {
             if (triggerRef.current && dropdownRef.current && verticalContainerRef.current) {
-                var triggerRect = triggerRef.current.getBoundingClientRect();
-                var target = dropdownRef.current;
+                const triggerRect = triggerRef.current.getBoundingClientRect();
+                const target = dropdownRef.current;
                 if (fixedPosition.current) {
                     if (fixedPosition.current.dropUp) {
-                        dropdownRef.current.style.bottom = "calc(100% - ".concat(triggerRect.top, "px)");
+                        dropdownRef.current.style.bottom = `calc(100% - ${triggerRect.top}px)`;
                     }
                     else {
-                        target.style.top = "".concat(triggerRect.bottom, "px");
+                        target.style.top = `${triggerRect.bottom}px`;
                     }
                     if (fixedPosition.current.dropLeft) {
-                        target.style.left = "calc(".concat(triggerRect.right, "px - ").concat(fixedPosition.current.width, ")");
+                        target.style.left = `calc(${triggerRect.right}px - ${fixedPosition.current.width})`;
                     }
                     else {
-                        target.style.left = "".concat(triggerRect.left, "px");
+                        target.style.left = `${triggerRect.left}px`;
                     }
                 }
             }
@@ -230,20 +222,20 @@ var Dropdown = function (_a) {
         updateDropdownPosition();
         window.addEventListener('scroll', updateDropdownPosition, true);
         window.addEventListener('resize', updateDropdownPosition, true);
-        return function () {
+        return () => {
             window.removeEventListener('scroll', updateDropdownPosition, true);
             window.removeEventListener('resize', updateDropdownPosition, true);
         };
     }, [open, expandToViewport]);
     return (React.createElement("div", { className: clsx(styles.root, interior && styles.interior, stretchTriggerHeight && styles['stretch-trigger-height']), ref: wrapperRef, onFocus: focusHandler, onBlur: blurHandler },
         React.createElement("div", { className: clsx(stretchTriggerHeight && styles['stretch-trigger-height']), ref: triggerRef }, trigger),
-        React.createElement(TabTrap, { focusNextCallback: function () { var _a; return dropdownRef.current && ((_a = getFirstFocusable(dropdownRef.current)) === null || _a === void 0 ? void 0 : _a.focus()); }, disabled: !open || !loopFocus }),
+        React.createElement(TabTrap, { focusNextCallback: () => { var _a; return dropdownRef.current && ((_a = getFirstFocusable(dropdownRef.current)) === null || _a === void 0 ? void 0 : _a.focus()); }, disabled: !open || !loopFocus }),
         React.createElement(DropdownContainer, { renderWithPortal: expandToViewport && !interior, id: dropdownId, open: open },
-            React.createElement(Transition, { "in": open !== null && open !== void 0 ? open : false, exit: false }, function (state, ref) { return (React.createElement("div", { ref: dropdownContainerRef },
-                React.createElement(TabTrap, { focusNextCallback: function () { var _a; return triggerRef.current && ((_a = getLastFocusable(triggerRef.current)) === null || _a === void 0 ? void 0 : _a.focus()); }, disabled: !open || !loopFocus }),
+            React.createElement(Transition, { in: open !== null && open !== void 0 ? open : false, exit: false }, (state, ref) => (React.createElement("div", { ref: dropdownContainerRef },
+                React.createElement(TabTrap, { focusNextCallback: () => { var _a; return triggerRef.current && ((_a = getLastFocusable(triggerRef.current)) === null || _a === void 0 ? void 0 : _a.focus()); }, disabled: !open || !loopFocus }),
                 React.createElement(TransitionContent, { state: state, transitionRef: ref, dropdownClasses: dropdownClasses, open: open, stretchWidth: stretchWidth, interior: interior, header: header, expandToViewport: expandToViewport, footer: footer, onMouseDown: onMouseDown, isRefresh: isRefresh, dropdownRef: dropdownRef, verticalContainerRef: verticalContainerRef, position: position }, children),
-                React.createElement(TabTrap, { focusNextCallback: function () { var _a; return triggerRef.current && ((_a = getFirstFocusable(triggerRef.current)) === null || _a === void 0 ? void 0 : _a.focus()); }, disabled: !open || !loopFocus }))); }))));
+                React.createElement(TabTrap, { focusNextCallback: () => { var _a; return triggerRef.current && ((_a = getFirstFocusable(triggerRef.current)) === null || _a === void 0 ? void 0 : _a.focus()); }, disabled: !open || !loopFocus })))))));
 };
-var isInteriorPosition = function (position) { return position.bottom !== undefined; };
+const isInteriorPosition = (position) => position.bottom !== undefined;
 export default Dropdown;
 //# sourceMappingURL=index.js.map