@cloudscape-design/components-themeable 3.0.1 → 3.0.4

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

@@ -0,0 +1,170 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// 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;
+        return {
+            height: height,
+            width: width,
+            top: top,
+            left: 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
+        ? 0
+        : isMobile
+            ? AVAILABLE_SPACE_RESERVE_MOBILE_VERTICAL
+            : AVAILABLE_SPACE_RESERVE_DEFAULT;
+    var 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;
+        return {
+            above: Math.min(above, currentAbove),
+            below: Math.min(below, currentBelow),
+            left: Math.min(left, currentLeft),
+            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
+        ? AVAILABLE_SPACE_RESERVE_MOBILE_VERTICAL
+        : AVAILABLE_SPACE_RESERVE_DEFAULT;
+    var 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;
+        return {
+            above: Math.min(above, currentAbove),
+            below: Math.min(below, currentBelow),
+            left: Math.min(left, currentLeft),
+            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;
+    minWidth = minWidth ? Math.min(triggerWidth, minWidth) : triggerWidth;
+    var 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;
+    //1. Can it be positioned with ideal width to the right?
+    if (idealWidth <= availableSpace.right) {
+        dropLeft = false;
+        //2. Can it be positioned with ideal width to the left?
+    }
+    else if (idealWidth <= availableSpace.left) {
+        dropLeft = true;
+        //3. Fit into biggest available space either on left or right
+    }
+    else {
+        dropLeft = availableSpace.left > availableSpace.right;
+        width = Math.max(availableSpace.left, availableSpace.right, minWidth);
+    }
+    if (preferCenter) {
+        var 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;
+        if (fitsInCenter) {
+            left = -spillOver;
+        }
+    }
+    var dropUp = availableSpace.below < dropdown.offsetHeight && availableSpace.above > availableSpace.below;
+    var 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;
+    return {
+        dropUp: dropUp,
+        dropLeft: dropLeft,
+        left: left === null ? 'auto' : "".concat(left, "px"),
+        height: "".concat(croppedHeight, "px"),
+        width: "".concat(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;
+    if (width <= availableSpace.right) {
+        dropLeft = false;
+    }
+    else if (width <= availableSpace.left) {
+        dropLeft = true;
+    }
+    else {
+        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;
+    // 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;
+    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")
+    };
+};
+export var calculatePosition = function (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 = '';
+    dropdownElement.style.width = '';
+    dropdownElement.style.top = '';
+    dropdownElement.style.bottom = '';
+    dropdownElement.style.left = '';
+    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
+        ? getInteriorDropdownPosition(triggerElement, dropdownElement, overflowParents, isMobile)
+        : getDropdownPosition(triggerElement, dropdownElement, overflowParents, minWidth, preferCenter, stretchWidth, stretchHeight, isMobile);
+    var triggerBox = triggerElement.getBoundingClientRect();
+    return [position, triggerBox];
+};
+//# sourceMappingURL=dropdown-fit-handler.js.map

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

@@ -0,0 +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"]}