@react-md/utils - npm Package Compare versions

Comparing version 2.0.0-alpha.9 to 2.0.0-alpha.10

dist/scssVariables.d.ts

 declare const _default: {
     "rmd-utils-ios-scroll-momentum": boolean;
+    "rmd-utils-auto-dense": boolean;
     "rmd-utils-swappable-positions": string[];
@@ -4,0 +5,0 @@ "rmd-utils-swappable-position-prefixes": string[];

dist/scssVariables.js

@@ -6,2 +6,3 @@ "use strict";
     "rmd-utils-ios-scroll-momentum": true,
+    "rmd-utils-auto-dense": true,
     "rmd-utils-swappable-positions": ["top", "right", "bottom", "left"],
@@ -8,0 +9,0 @@ "rmd-utils-swappable-position-prefixes": ["border", "margin", "padding"],

es/css/bem.js

@@ -5,5 +5,5 @@ function modify(base, modifier) {
     }
+    var hasOwn = Object.prototype.hasOwnProperty;
     return Object.keys(modifier).reduce(function (s, mod) {
-        // eslint-disable-next-line no-prototype-builtins
-        if (modifier.hasOwnProperty(mod) && modifier[mod]) {
+        if (hasOwn.call(modifier, mod) && modifier[mod]) {
             s = s + " " + base + "--" + mod;
@@ -10,0 +10,0 @@ }

es/events/touches.js

@@ -45,2 +45,3 @@ var __assign = (this && this.__assign) || function () {
     if (capture === void 0) { capture = false; }
+    // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
     // @ts-ignore
@@ -47,0 +48,0 @@ el[(add ? "add" : "remove") + "EventListener"]("touch" + eventType, callback, isSupported ? __assign({ passive: true, capture: capture }, options) : capture);

es/events/useScrollListener.js

@@ -10,3 +10,3 @@ import { useEffect } from "react";
 export default function useScrollListener(_a) {
-    var _b = _a.enabled, enabled = _b === void 0 ? true : _b, onScroll = _a.onScroll, element = _a.element, _c = _a.options, options = _c === void 0 ? isSupported ? { passive: true, capture: true } : true : _c;
+    var _b = _a.enabled, enabled = _b === void 0 ? true : _b, onScroll = _a.onScroll, element = _a.element, _c = _a.options, options = _c === void 0 ? isSupported ? { passive: true } : false : _c;
     var callback = useRefCache(onScroll);
@@ -13,0 +13,0 @@ useEffect(function () {

es/index.js

 export * from "./css";
 export * from "./events";
+export * from "./interaction";
 export * from "./layout";
+export * from "./search";
 export * from "./sizing";
 export * from "./positioning";
 export * from "./wia-aria";
-export * from "./omit";
+export { default as omit } from "./omit";
+export { default as scrollIntoView } from "./scrollIntoView";
 export { default as unitToNumber } from "./unitToNumber";
 export { default as applyRef } from "./applyRef";
+export { default as throttle } from "./throttle";
 export { default as useToggle } from "./useToggle";
@@ -16,2 +20,3 @@ export { default as useInterval } from "./useInterval";
 export { default as usePrevious } from "./usePrevious";
+export { default as useCloseOnOutsideClick, } from "./useCloseOnOutsideClick";
 //# sourceMappingURL=index.js.map

es/layout/Grid.js

@@ -23,5 +23,6 @@ var __assign = (this && this.__assign) || function () {
 };
-import React, { forwardRef } from "react";
+import React, { forwardRef, Children } from "react";
 import cn from "classnames";
 import useAppSize from "../sizing/useAppSize";
+import GridCell from "./GridCell";
 /**
@@ -50,3 +51,3 @@ * This CSS Variable allows you to override the number of columns that should be displayed in the
     var _b;
-    var style = _a.style, className = _a.className, forwardedRef = _a.forwardedRef, children = _a.children, columns = _a.columns, phoneColumns = _a.phoneColumns, tabletColumns = _a.tabletColumns, desktopColumns = _a.desktopColumns, largeDesktopColumns = _a.largeDesktopColumns, padding = _a.padding, gutter = _a.gutter, minCellWidth = _a.minCellWidth, props = __rest(_a, ["style", "className", "forwardedRef", "children", "columns", "phoneColumns", "tabletColumns", "desktopColumns", "largeDesktopColumns", "padding", "gutter", "minCellWidth"]);
+    var style = _a.style, className = _a.className, forwardedRef = _a.forwardedRef, children = _a.children, clone = _a.clone, wrapOnly = _a.wrapOnly, columns = _a.columns, phoneColumns = _a.phoneColumns, tabletColumns = _a.tabletColumns, desktopColumns = _a.desktopColumns, largeDesktopColumns = _a.largeDesktopColumns, padding = _a.padding, gutter = _a.gutter, minCellWidth = _a.minCellWidth, props = __rest(_a, ["style", "className", "forwardedRef", "children", "clone", "wrapOnly", "columns", "phoneColumns", "tabletColumns", "desktopColumns", "largeDesktopColumns", "padding", "gutter", "minCellWidth"]);
     var _c = useAppSize(), isPhone = _c.isPhone, isTablet = _c.isTablet, isDesktop = _c.isDesktop, isLargeDesktop = _c.isLargeDesktop;
@@ -57,7 +58,16 @@ var mergedStyle = __assign({ padding: padding, gridTemplateColumns: minCellWidth
         (isTablet && tabletColumns) ||
+        (isLargeDesktop && largeDesktopColumns) ||
         (isDesktop && desktopColumns) ||
-        (isLargeDesktop && largeDesktopColumns) ||
         columns, _b[GRID_GUTTER_VAR] = gutter, _b));
-    return (React.createElement("div", __assign({}, props, { style: mergedStyle, ref: forwardedRef, className: cn("rmd-grid", className) }), children));
+    var content = children;
+    if (clone || wrapOnly) {
+        content = Children.map(children, function (child) { return (React.createElement(GridCell, { clone: clone }, child)); });
+    }
+    return (React.createElement("div", __assign({}, props, { style: mergedStyle, ref: forwardedRef, className: cn("rmd-grid", className) }), content));
 };
+var defaultProps = {
+    clone: false,
+    wrapOnly: false,
+};
+Grid.defaultProps = defaultProps;
 if (process.env.NODE_ENV !== "production") {
@@ -74,2 +84,4 @@ Grid.displayName = "Grid";
             className: PropTypes.string,
+            clone: PropTypes.bool,
+            wrapOnly: PropTypes.bool,
             columns: PropTypes.number,
@@ -76,0 +88,0 @@ phoneColumns: PropTypes.number,

es/layout/GridCell.js

@@ -23,3 +23,3 @@ var __assign = (this && this.__assign) || function () {
 };
-import React, { forwardRef } from "react";
+import React, { forwardRef, isValidElement, Children, cloneElement, } from "react";
 import cn from "classnames";
@@ -31,3 +31,3 @@ import bem from "../css/bem";
     var _b, _c, _d, _e, _f, _g;
-    var style = _a.style, className = _a.className, forwardedRef = _a.forwardedRef, children = _a.children, colSpan = _a.colSpan, propColStart = _a.colStart, propColEnd = _a.colEnd, propRowSpan = _a.rowSpan, propRowStart = _a.rowStart, propRowEnd = _a.rowEnd, phone = _a.phone, tablet = _a.tablet, desktop = _a.desktop, largeDesktop = _a.largeDesktop, props = __rest(_a, ["style", "className", "forwardedRef", "children", "colSpan", "colStart", "colEnd", "rowSpan", "rowStart", "rowEnd", "phone", "tablet", "desktop", "largeDesktop"]);
+    var style = _a.style, className = _a.className, clone = _a.clone, forwardedRef = _a.forwardedRef, children = _a.children, colSpan = _a.colSpan, propColStart = _a.colStart, propColEnd = _a.colEnd, propRowSpan = _a.rowSpan, propRowStart = _a.rowStart, propRowEnd = _a.rowEnd, phone = _a.phone, tablet = _a.tablet, desktop = _a.desktop, largeDesktop = _a.largeDesktop, props = __rest(_a, ["style", "className", "clone", "forwardedRef", "children", "colSpan", "colStart", "colEnd", "rowSpan", "rowStart", "rowEnd", "phone", "tablet", "desktop", "largeDesktop"]);
     var _h = useAppSize(), isPhone = _h.isPhone, isTablet = _h.isTablet, isDesktop = _h.isDesktop, isLargeDesktop = _h.isLargeDesktop;
@@ -46,3 +46,14 @@ var colStart = propColStart;
     }
-    return (React.createElement("div", __assign({}, props, { style: __assign({ gridColumnStart: colStart, gridColumnEnd: colEnd, gridRowStart: rowStart, gridRowEnd: rowSpan ? "span " + rowSpan : rowEnd }, style), ref: forwardedRef, className: cn(block("cell", (_g = {}, _g["" + colSpan] = colSpan, _g)), className) }), children));
+    var cellStyle = __assign({ gridColumnStart: colStart, gridColumnEnd: colEnd, gridRowStart: rowStart, gridRowEnd: rowSpan ? "span " + rowSpan : rowEnd }, style);
+    var cellClassName = cn(block("cell", (_g = {},
+        _g["" + colSpan] = colSpan,
+        _g)), className);
+    if (clone && isValidElement(children)) {
+        var child = Children.only(children);
+        return cloneElement(child, {
+            style: __assign({}, child.props.style, cellStyle),
+            className: cn(cellClassName, child.props.className),
+        });
+    }
+    return (React.createElement("div", __assign({}, props, { style: cellStyle, ref: forwardedRef, className: cellClassName }), children));
 };
@@ -68,2 +79,3 @@ if (process.env.NODE_ENV !== "production") {
             className: PropTypes.string,
+            clone: PropTypes.bool,
             rowSpan: PropTypes.number,
@@ -70,0 +82,0 @@ rowStart: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),

es/layout/GridList.js

@@ -23,3 +23,3 @@ var __assign = (this && this.__assign) || function () {
 };
-import React, { forwardRef, useCallback, useRef, useState, } from "react";
+import React, { Children, forwardRef, useCallback, useRef, useState, } from "react";
 import cn from "classnames";
@@ -30,2 +30,3 @@ import applyRef from "../applyRef";
 import getScrollbarWidth from "./scrollbarWidth";
+import GridListCell from "./GridListCell";
 /**
@@ -49,3 +50,3 @@ * This is the css variable that is used store the current size of each cell.
     var _a;
-    var _b = providedProps, style = _b.style, className = _b.className, children = _b.children, cellMargin = _b.cellMargin, maxCellSize = _b.maxCellSize, forwardedRef = _b.forwardedRef, defaultSize = _b.defaultSize, containerPadding = _b.containerPadding, disableHeightObserver = _b.disableHeightObserver, disableWidthObserver = _b.disableWidthObserver, props = __rest(_b, ["style", "className", "children", "cellMargin", "maxCellSize", "forwardedRef", "defaultSize", "containerPadding", "disableHeightObserver", "disableWidthObserver"]);
+    var _b = providedProps, style = _b.style, className = _b.className, children = _b.children, clone = _b.clone, wrapOnly = _b.wrapOnly, cellMargin = _b.cellMargin, maxCellSize = _b.maxCellSize, forwardedRef = _b.forwardedRef, defaultSize = _b.defaultSize, containerPadding = _b.containerPadding, disableHeightObserver = _b.disableHeightObserver, disableWidthObserver = _b.disableWidthObserver, props = __rest(_b, ["style", "className", "children", "clone", "wrapOnly", "cellMargin", "maxCellSize", "forwardedRef", "defaultSize", "containerPadding", "disableHeightObserver", "disableWidthObserver"]);
     var _c = useState(defaultSize || { columns: -1, cellWidth: maxCellSize }), gridSize = _c[0], setGridSize = _c[1];
@@ -81,5 +82,17 @@ var ref = useRef(null);
     var mergedStyle = __assign({}, style, (_a = {}, _a[CELL_SIZE_VAR] = gridSize.cellWidth + "px", _a[CELL_MARGIN_VAR] = cellMargin || undefined, _a));
-    return (React.createElement("div", __assign({}, props, { ref: refHandler, style: mergedStyle, className: cn(block(), className) }), typeof children === "function" ? children(gridSize) : children));
+    var content = null;
+    if (typeof children === "function") {
+        content = children(gridSize);
+    }
+    else if (clone || wrapOnly) {
+        content = Children.map(children, function (child) { return (React.createElement(GridListCell, { clone: clone }, child)); });
+    }
+    else {
+        content = children;
+    }
+    return (React.createElement("div", __assign({}, props, { ref: refHandler, style: mergedStyle, className: cn(block(), className) }), content));
 };
 var defaultProps = {
+    clone: false,
+    wrapOnly: false,
     maxCellSize: 150,
@@ -100,2 +113,4 @@ containerPadding: 16,
         GridList.propTypes = {
+            clone: PropTypes.bool,
+            wrapOnly: PropTypes.bool,
             className: PropTypes.string,
@@ -102,0 +117,0 @@ children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),

es/layout/GridListCell.js

@@ -23,11 +23,19 @@ var __assign = (this && this.__assign) || function () {
 };
-import React, { forwardRef } from "react";
+import React, { forwardRef, Children, cloneElement, isValidElement, } from "react";
 import cn from "classnames";
 import bem from "../css/bem";
-var block = bem("rmd-grid-list__cell");
+var block = bem("rmd-grid-list");
 var GridListCell = function (providedProps) {
-    var _a = providedProps, className = _a.className, forwardedRef = _a.forwardedRef, children = _a.children, square = _a.square, props = __rest(_a, ["className", "forwardedRef", "children", "square"]);
-    return (React.createElement("div", __assign({}, props, { ref: forwardedRef, className: cn(block({ square: square }), className) }), children));
+    var _a = providedProps, className = _a.className, forwardedRef = _a.forwardedRef, children = _a.children, square = _a.square, clone = _a.clone, props = __rest(_a, ["className", "forwardedRef", "children", "square", "clone"]);
+    var cellClassName = cn(block("cell", { square: square }), className);
+    if (clone && isValidElement(children)) {
+        var child = Children.only(children);
+        return cloneElement(child, {
+            className: cn(cellClassName, child.props.className),
+        });
+    }
+    return (React.createElement("div", __assign({}, props, { ref: forwardedRef, className: cellClassName }), children));
 };
 var defaultProps = {
+    clone: false,
     square: false,
@@ -45,2 +53,3 @@ };
         GridListCell.propTypes = {
+            clone: PropTypes.bool,
             square: PropTypes.bool,
@@ -47,0 +56,0 @@ className: PropTypes.string,

es/omit.js

@@ -10,3 +10,3 @@ /**
  */
-export function omit(object, omitKeys) {
+export default function omit(object, omitKeys) {
     if (!omitKeys.length) {
@@ -17,3 +17,2 @@ return object;
         if (!omitKeys.includes(key)) {
-            // @ts-ignore
             updated[key] = object[key];
@@ -20,0 +19,0 @@ }

es/positioning/findSizingContainer.js

@@ -10,7 +10,7 @@ /**
  *
- * @param el - The element to find a sizing containet for.
+ * @param el The element to find a sizing container for.
  * @return the sizing container relative to the provided element, or `null` if none
- *  could be found.
+ * could be found.
  * @throws This error will be thrown if using the `data-query-selector` and the query
- *  selector does not return an element on the page.
+ * selector does not return an element on the page.
  */
@@ -17,0 +17,0 @@ export default function findSizingContainer(el) {

es/positioning/getElementRect.js

@@ -13,2 +13,4 @@ function applyCoords(coord) {
  * try to fit within the viewport.
+ * @return either a DOMRect or ClientRect for the element
+ * @private
  */
@@ -15,0 +17,0 @@ export default function getElementRect(element, coords) {

es/positioning/getFixedPosition.js

@@ -0,255 +1,40 @@
+import createHorizontalPosition from "./createHorizontalPosition";
+import createVerticalPosition from "./createVerticalPosition";
 import findSizingContainer from "./findSizingContainer";
 import getElementRect from "./getElementRect";
+import getTransformOrigin from "./getTransformOrigin";
 import getViewportSize from "./getViewportSize";
-function getTransformOrigin(anchor) {
-    var x = "0";
-    switch (anchor.x) {
-        case "right":
-        case "inner-left":
-            x = "0";
-            break;
-        case "center":
-            x = "50%";
-            break;
-        case "left":
-        case "inner-right":
-            x = "100%";
-            break;
-        default:
-            x = "0";
-    }
-    var y = "0";
-    switch (anchor.y) {
-        case "above":
-        case "bottom":
-            y = "100%";
-            break;
-        case "center":
-            y = "50%";
-            break;
-        case "below":
-        case "top":
-            y = "0";
-            break;
-        default:
-            y = "0";
-    }
-    return x + " " + y;
-}
-function createStyleWithoutElement(containerRect, anchor, transformOrigin) {
-    var x = anchor.x, y = anchor.y;
-    var height = containerRect.height, width = containerRect.width, containerLeft = containerRect.left, containerTop = containerRect.top;
-    var left = containerLeft;
-    var top = containerTop;
-    if (x === "right" || x === "inner-right") {
-        left += width;
-    }
-    else if (x === "center") {
-        left += width / 2;
-    }
-    if (y === "below" || y === "bottom") {
-        top += height;
-    }
-    else if (y === "center") {
-        top += height / 2;
-    }
-    return {
-        actualX: x,
-        actualY: y,
-        style: {
-            left: left,
-            top: top,
-            position: "fixed",
-            transformOrigin: transformOrigin ? getTransformOrigin(anchor) : undefined,
-        },
-    };
-}
 /**
- * Tries to fix the "left" horizontal positoining by ensuring it can be within the viewport
- * and tries swapping sides if possible. This is basically the inverse of `fixRightPosition`
- */
-function fixLeftPosition(_a) {
-    var containerLeft = _a.containerLeft, containerWidth = _a.containerWidth, elementWidth = _a.elementWidth, xMargin = _a.xMargin, vw = _a.vw, vwMargin = _a.vwMargin, disableSwapping = _a.disableSwapping;
-    var left = containerLeft - elementWidth - xMargin;
-    var actualX = "left";
-    if (left < vwMargin) {
-        var nextLeft = containerLeft + containerWidth + xMargin;
-        if (disableSwapping || nextLeft + elementWidth > vw - vwMargin) {
-            left = vwMargin;
-        }
-        else {
-            left = nextLeft;
-            actualX = "right";
-        }
-    }
-    return { left: left, actualX: actualX };
-}
-function fixRightPosition(_a) {
-    var containerLeft = _a.containerLeft, containerWidth = _a.containerWidth, elementWidth = _a.elementWidth, xMargin = _a.xMargin, vw = _a.vw, vwMargin = _a.vwMargin, disableSwapping = _a.disableSwapping;
-    var actualX = "right";
-    var left = containerLeft + containerWidth + xMargin;
-    var screenRight = vw - vwMargin;
-    if (left + elementWidth > screenRight) {
-        var nextLeft = containerLeft - containerWidth - xMargin;
-        if (disableSwapping || nextLeft < vwMargin) {
-            left = screenRight - elementWidth;
-        }
-        else {
-            actualX = "left";
-            left = nextLeft;
-        }
-    }
-    return { left: left, actualX: actualX };
-}
-function fixInnerLeftPosition(_a) {
-    var containerLeft = _a.containerLeft, containerWidth = _a.containerWidth, elementWidth = _a.elementWidth, vw = _a.vw, xMargin = _a.xMargin, vwMargin = _a.vwMargin, disableSwapping = _a.disableSwapping;
-    var left = containerLeft + xMargin;
-    var actualX = "inner-left";
-    var screenRight = vw - vwMargin;
-    if (left < vwMargin) {
-        var nextLeft = containerLeft + containerWidth - elementWidth - xMargin;
-        if (disableSwapping || nextLeft > screenRight) {
-            left = vwMargin;
-        }
-        else {
-            left = nextLeft;
-            actualX = "right";
-        }
-    }
-    return { actualX: actualX, left: left };
-}
-function fixInnerRightPosition(_a) {
-    var containerLeft = _a.containerLeft, containerWidth = _a.containerWidth, elementWidth = _a.elementWidth, vw = _a.vw, xMargin = _a.xMargin, vwMargin = _a.vwMargin, disableSwapping = _a.disableSwapping;
-    var left = containerLeft + containerWidth - elementWidth - xMargin;
-    var actualX = "inner-right";
-    if (left < vwMargin) {
-        if (disableSwapping || containerLeft + elementWidth > vw - vwMargin) {
-            left = vwMargin;
-        }
-        else {
-            left = containerLeft + xMargin;
-            actualX = "left";
-        }
-    }
-    return { actualX: actualX, left: left };
-}
-function fixHorizontalCenterPosition(_a) {
-    var containerLeft = _a.containerLeft, containerWidth = _a.containerWidth, elementWidth = _a.elementWidth, vw = _a.vw, vwMargin = _a.vwMargin;
-    var left = containerLeft + containerWidth / 2 - elementWidth / 2;
-    var screenRight = vw - vwMargin;
-    if (left + elementWidth > screenRight) {
-        left = screenRight - elementWidth;
-    }
-    return left;
-}
-function fixAbovePosition(_a) {
-    var containerTop = _a.containerTop, containerHeight = _a.containerHeight, elementHeight = _a.elementHeight, yMargin = _a.yMargin, vh = _a.vh, vhMargin = _a.vhMargin, disableSwapping = _a.disableSwapping;
-    var top = containerTop - elementHeight - yMargin;
-    var actualY = "above";
-    if (top < vhMargin) {
-        var nextTop = containerTop + containerHeight + yMargin;
-        if (disableSwapping || nextTop + elementHeight > vh - vhMargin) {
-            top = vhMargin;
-        }
-        else {
-            top = nextTop;
-            actualY = "below";
-        }
-    }
-    return { actualY: actualY, top: top };
-}
-function fixBelowPosition(_a) {
-    var containerTop = _a.containerTop, containerHeight = _a.containerHeight, elementHeight = _a.elementHeight, yMargin = _a.yMargin, vh = _a.vh, vhMargin = _a.vhMargin, disableSwapping = _a.disableSwapping;
-    var top = containerTop + containerHeight + yMargin;
-    var actualY = "below";
-    var maxTop = vh - vhMargin;
-    if (top + elementHeight > maxTop) {
-        var nextTop = containerTop - elementHeight - yMargin;
-        if (disableSwapping || nextTop < vhMargin) {
-            top = vhMargin;
-        }
-        else {
-            top = nextTop;
-            actualY = "above";
-        }
-    }
-    return { actualY: actualY, top: top };
-}
-function fixTopPosition(_a) {
-    var containerTop = _a.containerTop, containerHeight = _a.containerHeight, elementHeight = _a.elementHeight, vh = _a.vh, yMargin = _a.yMargin, vhMargin = _a.vhMargin, disableSwapping = _a.disableSwapping;
-    var actualY = "top";
-    var top = containerTop + yMargin;
-    var screenBottom = vh - vhMargin;
-    if (top + elementHeight > screenBottom) {
-        var nextTop = containerTop + containerHeight - elementHeight - yMargin;
-        if (disableSwapping || nextTop < vhMargin) {
-            top = screenBottom - elementHeight;
-        }
-        else {
-            actualY = "bottom";
-            top = nextTop;
-        }
-    }
-    return { actualY: actualY, top: top };
-}
-function fixBottomPosition(_a) {
-    var containerTop = _a.containerTop, containerHeight = _a.containerHeight, elementHeight = _a.elementHeight, vh = _a.vh, yMargin = _a.yMargin, vhMargin = _a.vhMargin, disableSwapping = _a.disableSwapping;
-    var actualY = "bottom";
-    var top = containerTop + containerHeight - elementHeight - yMargin;
-    var screenBottom = vh - vhMargin;
-    if (top + elementHeight > screenBottom) {
-        if (disableSwapping || containerTop < vhMargin) {
-            top = vhMargin;
-        }
-        else {
-            actualY = "top";
-            top = containerTop + yMargin;
-        }
-    }
-    return { actualY: actualY, top: top };
-}
-function fixVerticalCenter(_a) {
-    var containerTop = _a.containerTop, containerHeight = _a.containerHeight, elementHeight = _a.elementHeight, vh = _a.vh, vhMargin = _a.vhMargin;
-    var halvedHeight = elementHeight / 2;
-    var top = containerTop + containerHeight / 2 - halvedHeight;
-    var screenBottom = vh - vhMargin;
-    if (top + halvedHeight > screenBottom) {
-        top = screenBottom - halvedHeight;
-    }
-    else if (top - halvedHeight < vhMargin) {
-        top = vhMargin;
-    }
-    return top;
-}
-/**
- * One of the most complicated functions in this project that will attempt to position
- * an element relative to another container element while still being visible within
- * the viewport. Below is the logical flow for attempting to fix the element to the container:
+ * One of the most complicated functions in this project that will attempt to
+ * position an element relative to another container element while still being
+ * visible within the viewport. Below is the logical flow for attempting to fix
+ * the element to the container:
  *
- * No Container:
- * If there is no container element, return an the provided x and y positions and no styles since
- * there's nothing we can use to calculate the position.
+ * No Container: If there is no container element, return the provided x and y
+ * positions and no styles since there's nothing we can use to calculate the
+ * position.
  *
- * No Element:
- * If the container was provided but the element to position does not exist, return an style object
- * containing the `left` and `top` values for the container and apply as many of the positioning
- * options as possible so that the styles are "as close as possible" before the fixed element
- * is added to the dom. This will also return the provided x and y positions since nothing
- * could be swapped around yet.
+ * No Element: If the container was provided but the element to position does
+ * not exist, return an style object containing the `left` and `top` values for
+ * the container and apply as many of the positioning options as possible so
+ * that the styles are "as close as possible" before the fixed element is added
+ * to the DOM. This will also return the provided x and y positions since
+ * nothing could be swapped around yet.
  *
- * Container and Element:
- * If both the container and fixed element were provided, apply all the positioning options
- * to the `left` and `top` values of the container based on the sizes of both elements.
+ * Container and Element: If both the container and fixed element were provided,
+ * apply all the positioning options to the `left` and `top` values of the
+ * container based on the sizes of both elements.
  *
- * Now that the `left` and `top` values were applied, check to see if the element is fully
- * visible within the viewport with the provided positioning options. If it is fully visible,
- * do nothing else. If it isn't... follow the next flow:
+ * Now that the `left` and `top` values were applied, check to see if the
+ * element is fully visible within the viewport with the provided positioning
+ * options. If it is fully visible, do nothing else. If it isn't... follow the
+ * next flow:
  *
- * First, check the horizontal sizes and make sure that the element is still within the viewport
- * with the provided viewwidth margin. If it isn't, first try to swap only to a `right` style
- * instead of left to see if that fixes it, otherwise keep both the `left` and `right` styles.
+ * First, check the horizontal sizes and make sure that the element is still
+ * within the viewport with the provided viewwidth margin. If it isn't, first
+ * try to swap only to a `right` style instead of left to see if that fixes it,
+ * otherwise keep both the `left` and `right` styles.
  */
 export default function getFixedPosition(_a) {
-    var _b, _c, _d, _e, _f, _g, _h, _j;
-    var container = _a.container, element = _a.element, _k = _a.anchor, propAnchor = _k === void 0 ? {} : _k, _l = _a.vwMargin, vwMargin = _l === void 0 ? 16 : _l, _m = _a.vhMargin, vhMargin = _m === void 0 ? 16 : _m, _o = _a.xMargin, xMargin = _o === void 0 ? 0 : _o, _p = _a.yMargin, yMargin = _p === void 0 ? 0 : _p, _q = _a.disableSwapping, disableSwapping = _q === void 0 ? false : _q, _r = _a.transformOrigin, transformOrigin = _r === void 0 ? false : _r;
+    var container = _a.container, element = _a.element, _b = _a.anchor, propAnchor = _b === void 0 ? {} : _b, _c = _a.vwMargin, vwMargin = _c === void 0 ? 16 : _c, _d = _a.vhMargin, vhMargin = _d === void 0 ? 16 : _d, _e = _a.xMargin, xMargin = _e === void 0 ? 0 : _e, _f = _a.yMargin, yMargin = _f === void 0 ? 0 : _f, _g = _a.width, widthType = _g === void 0 ? "auto" : _g, _h = _a.preventOverlap, preventOverlap = _h === void 0 ? false : _h, _j = _a.transformOrigin, transformOrigin = _j === void 0 ? false : _j, _k = _a.disableSwapping, disableSwapping = _k === void 0 ? false : _k, _l = _a.disableVHBounds, disableVHBounds = _l === void 0 ? false : _l;
     container = findSizingContainer(container);
@@ -260,3 +45,11 @@ var anchor = {
     };
-    if (!container) {
+    if (process.env.NODE_ENV !== "production") {
+        if (widthType !== "auto" && anchor.x !== "center") {
+            throw new Error('Unable to use a calculated width when the horizontal anchor is not `"center"`.');
+        }
+        if (preventOverlap && anchor.y !== "above" && anchor.y !== "below") {
+            throw new Error('Unable to prevent overlap when the vertical anchor is not `"above"` or `"below"`');
+        }
+    }
+    if (!container || !element) {
         return {
@@ -268,83 +61,26 @@ actualX: anchor.x,
     var containerRect = container.getBoundingClientRect();
-    var initialResult = createStyleWithoutElement(containerRect, anchor, transformOrigin);
-    if (!element) {
-        return initialResult;
-    }
     var vh = getViewportSize("height");
     var vw = getViewportSize("width");
-    var maxHeight = vh - vhMargin * 2;
-    var maxWidth = vw - vwMargin * 2;
-    var containerHeight = containerRect.height, containerWidth = containerRect.width;
-    var actualX = anchor.x;
-    var actualY = anchor.y;
-    var _s = getElementRect(element), height = _s.height, width = _s.width;
-    var left;
-    var top;
-    var right;
-    var bottom;
-    var adjustConfig = {
-        containerLeft: containerRect.left,
-        containerTop: containerRect.top,
-        containerWidth: containerWidth,
-        containerHeight: containerHeight,
-        elementWidth: width,
-        elementHeight: height,
+    var _m = getElementRect(element), height = _m.height, elWidth = _m.width;
+    var _o = createHorizontalPosition({
+        x: anchor.x,
+        vw: vw,
+        vwMargin: vwMargin,
         xMargin: xMargin,
-        yMargin: yMargin,
-        vw: vw,
+        width: widthType,
+        elWidth: elWidth,
+        containerRect: containerRect,
+        disableSwapping: disableSwapping,
+    }), left = _o.left, right = _o.right, width = _o.width, minWidth = _o.minWidth, actualX = _o.actualX;
+    var _p = createVerticalPosition({
+        y: anchor.y,
         vh: vh,
-        vwMargin: vwMargin,
         vhMargin: vhMargin,
+        yMargin: yMargin,
+        elHeight: height,
+        containerRect: containerRect,
         disableSwapping: disableSwapping,
-    };
-    if (width > maxWidth) {
-        left = vwMargin;
-        right = vwMargin;
-        actualX = "center";
-    }
-    else {
-        switch (anchor.x) {
-            case "left":
-                (_b = fixLeftPosition(adjustConfig), actualX = _b.actualX, left = _b.left);
-                break;
-            case "right":
-                (_c = fixRightPosition(adjustConfig), actualX = _c.actualX, left = _c.left);
-                break;
-            case "inner-left":
-                (_d = fixInnerLeftPosition(adjustConfig), actualX = _d.actualX, left = _d.left);
-                break;
-            case "inner-right":
-                (_e = fixInnerRightPosition(adjustConfig), actualX = _e.actualX, left = _e.left);
-                break;
-            case "center":
-                left = fixHorizontalCenterPosition(adjustConfig);
-                break;
-            // no default
-        }
-    }
-    if (height > maxHeight) {
-        top = vhMargin;
-        bottom = vhMargin;
-        actualY = "center";
-    }
-    else {
-        switch (anchor.y) {
-            case "above":
-                (_f = fixAbovePosition(adjustConfig), actualY = _f.actualY, top = _f.top);
-                break;
-            case "below":
-                (_g = fixBelowPosition(adjustConfig), actualY = _g.actualY, top = _g.top);
-                break;
-            case "top":
-                (_h = fixTopPosition(adjustConfig), actualY = _h.actualY, top = _h.top);
-                break;
-            case "center":
-                top = fixVerticalCenter(adjustConfig);
-                break;
-            case "bottom":
-                (_j = fixBottomPosition(adjustConfig), actualY = _j.actualY, top = _j.top);
-                break;
-            // no default
-        }
-    }
+        preventOverlap: preventOverlap,
+        disableVHBounds: disableVHBounds,
+    }), top = _p.top, bottom = _p.bottom, actualY = _p.actualY;
     return {
@@ -358,3 +94,5 @@ actualX: actualX,
             bottom: bottom,
-            position: "fixed",
+            width: width,
+            minWidth: minWidth,
+            position: disableVHBounds ? "absolute" : "fixed",
             transformOrigin: transformOrigin
@@ -361,0 +99,0 @@ ? getTransformOrigin({ x: actualX, y: actualY })

es/positioning/index.js

@@ -5,3 +5,2 @@ export { default as findSizingContainer } from "./findSizingContainer";
 export { default as getFixedPosition } from "./getFixedPosition";
-export * from "./getFixedPosition";
 //# sourceMappingURL=index.js.map

es/sizing/index.js

@@ -1,2 +0,3 @@
-export * from "./AppSize";
+export { default as AppSizeListener } from "./AppSizeListener";
+export * from "./AppSizeListener";
 export { default as ResizeObserver } from "./ResizeObserver";
@@ -11,5 +12,6 @@ export * from "./ResizeObserver";
 export { default as useWidthMediaQuery } from "./useWidthMediaQuery";
-export { default as useAppSize, DEFAULT_APP_SIZE } from "./useAppSize";
+export { default as useAppSize } from "./useAppSize";
+export { DEFAULT_APP_SIZE } from "./useAppSizeMedia";
 export { default as useResizeObserver, } from "./useResizeObserver";
 export { default as useResizeListener } from "./useResizeListener";
 //# sourceMappingURL=index.js.map

es/sizing/MediaOnly.js

@@ -1,2 +0,2 @@
-import { useAppSizeContext } from "./AppSize";
+import useAppSize from "./useAppSize";
 /**
@@ -9,3 +9,3 @@ * A simple component that will render the children only when the app is considered
     var _a = props, children = _a.children, fallback = _a.fallback;
-    var _b = useAppSizeContext(), isPhone = _b.isPhone, isTablet = _b.isTablet;
+    var _b = useAppSize(), isPhone = _b.isPhone, isTablet = _b.isTablet;
     if (isPhone || isTablet) {
@@ -22,3 +22,3 @@ return children;
     var _a = props, children = _a.children, fallback = _a.fallback;
-    var isPhone = useAppSizeContext().isPhone;
+    var isPhone = useAppSize().isPhone;
     if (isPhone) {
@@ -35,3 +35,3 @@ return children;
     var _a = props, children = _a.children, fallback = _a.fallback;
-    var isTablet = useAppSizeContext().isTablet;
+    var isTablet = useAppSize().isTablet;
     if (isTablet) {
@@ -48,3 +48,3 @@ return children;
     var _a = props, children = _a.children, fallback = _a.fallback;
-    var isDesktop = useAppSizeContext().isDesktop;
+    var isDesktop = useAppSize().isDesktop;
     if (isDesktop) {
@@ -51,0 +51,0 @@ return children;

es/sizing/useAppSize.js

@@ -1,46 +0,41 @@
-import { useMemo } from "react";
-import { DEFAULT_DESKTOP_LARGE_MIN_WIDTH, DEFAULT_DESKTOP_MIN_WIDTH, DEFAULT_PHONE_MAX_WIDTH, DEFAULT_TABLET_MAX_WIDTH, DEFAULT_TABLET_MIN_WIDTH, } from "./constants";
-import useWidthMediaQuery from "./useWidthMediaQuery";
-export var DEFAULT_APP_SIZE = {
-    isPhone: false,
-    isTablet: false,
-    isDesktop: true,
-    isLargeDesktop: false,
-    isLandscape: true,
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
 };
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { createContext, useContext } from "react";
+import { DEFAULT_APP_SIZE } from "./useAppSizeMedia";
 /**
- * This hook is used to determine the current application size based on the
- * provided query sizes. When you want to render your app server side, you will
- * need to provide a custom `defaultSize` that implements your logic to determine
- * the type of device requesting a page. Once the app has been rendered in the DOM,
- * this hook will attach event listeners to automatically update the app size when
- * the page is resized.
+ * @private
  */
-export default function useAppSize(_a) {
-    var _b = _a === void 0 ? {} : _a, _c = _b.phoneMaxWidth, phoneMaxWidth = _c === void 0 ? DEFAULT_PHONE_MAX_WIDTH : _c, _d = _b.tabletMinWidth, tabletMinWidth = _d === void 0 ? DEFAULT_TABLET_MIN_WIDTH : _d, _e = _b.tabletMaxWidth, tabletMaxWidth = _e === void 0 ? DEFAULT_TABLET_MAX_WIDTH : _e, _f = _b.desktopMinWidth, desktopMinWidth = _f === void 0 ? DEFAULT_DESKTOP_MIN_WIDTH : _f, _g = _b.desktopLargeMinWidth, desktopLargeMinWidth = _g === void 0 ? DEFAULT_DESKTOP_LARGE_MIN_WIDTH : _g, _h = _b.defaultSize, defaultSize = _h === void 0 ? DEFAULT_APP_SIZE : _h;
-    /* eslint-disable react-hooks/rules-of-hooks */
-    // disabled since this is conditionally applied for SSR
-    if (typeof window === "undefined") {
-        return defaultSize;
+export var AppSizeContext = createContext(__assign({}, DEFAULT_APP_SIZE, { __initialized: false }));
+/**
+ * Gets the current app size.
+ *
+ * @return the current AppSize
+ */
+export default function useAppSize() {
+    var _a = useContext(AppSizeContext), __initialized = _a.__initialized, context = __rest(_a, ["__initialized"]);
+    if (!__initialized) {
+        throw new Error("Attempted to use the current `AppSizeContext` without mounting the `AppSizeListener` component beforehand.");
     }
-    var matchesDesktop = useWidthMediaQuery({ min: desktopMinWidth });
-    var matchesLargeDesktop = useWidthMediaQuery({ min: desktopLargeMinWidth });
-    var matchesTablet = useWidthMediaQuery({
-        min: tabletMinWidth,
-        max: tabletMaxWidth,
-    });
-    var matchesPhone = useWidthMediaQuery({ max: phoneMaxWidth });
-    var isDesktop = matchesDesktop;
-    var isTablet = !matchesDesktop && matchesTablet;
-    var isPhone = !isTablet && !isDesktop && matchesPhone;
-    var isLandscape = window.innerWidth > window.innerHeight;
-    var isLargeDesktop = matchesLargeDesktop;
-    return useMemo(function () { return ({
-        isPhone: isPhone,
-        isTablet: isTablet,
-        isDesktop: isDesktop,
-        isLargeDesktop: isLargeDesktop,
-        isLandscape: isLandscape,
-    }); }, [isPhone, isTablet, isDesktop, isLargeDesktop, isLandscape]);
+    return context;
 }
 //# sourceMappingURL=useAppSize.js.map

es/useTimeout.js

@@ -26,3 +26,3 @@ import { useCallback, useEffect, useRef } from "react";
     /* eslint-disable react-hooks/exhaustive-deps */
-    // these are all guarenteed to not change since using refs or non-updating callbacks
+    // these are all guaranteed to not change since using refs or non-updating callbacks
     var restart = useCallback(function () {
@@ -29,0 +29,0 @@ clearTimeout();

es/wia-aria/index.js

 export { default as FocusContainer } from "./FocusContainer";
 export * from "./FocusContainer";
+export * from "./movement";
 export { default as useScrollLock } from "./useScrollLock";
 export { default as useFocusOnMount } from "./useFocusOnMount";
 export { default as usePreviousFocus } from "./usePreviousFocus";
+export { default as useCloseOnEscape } from "./useCloseOnEscape";
 export { default as getFocusableElements } from "./getFocusableElements";
 export { default as focusElementWithin } from "./focusElementWithin";
-export { default as useKeyboardMovement } from "./useKeyboardMovement";
-export { default as useKeyboardSearch } from "./useKeyboardSearch";
-export { default as useCloseOnEscape } from "./useCloseOnEscape";
+export { default as extractTextContent } from "./extractTextContent";
 //# sourceMappingURL=index.js.map

es/wia-aria/usePreviousFocus.js

@@ -70,3 +70,3 @@ import { useEffect } from "react";
             }
-            if (!el) {
+            if (!el && fallback) {
                 switch (typeof fallback) {
@@ -79,4 +79,2 @@ case "string":
                         break;
-                    case "undefined":
-                        return;
                     default:
@@ -83,0 +81,0 @@ el = fallback;

lib/css/bem.js

@@ -7,5 +7,5 @@ "use strict";
     }
+    var hasOwn = Object.prototype.hasOwnProperty;
     return Object.keys(modifier).reduce(function (s, mod) {
-        // eslint-disable-next-line no-prototype-builtins
-        if (modifier.hasOwnProperty(mod) && modifier[mod]) {
+        if (hasOwn.call(modifier, mod) && modifier[mod]) {
             s = s + " " + base + "--" + mod;
@@ -12,0 +12,0 @@ }

lib/events/touches.js

@@ -47,2 +47,3 @@ "use strict";
     if (capture === void 0) { capture = false; }
+    // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
     // @ts-ignore
@@ -49,0 +50,0 @@ el[(add ? "add" : "remove") + "EventListener"]("touch" + eventType, callback, passiveEvents_1.isSupported ? __assign({ passive: true, capture: capture }, options) : capture);

lib/events/useScrollListener.js

@@ -15,3 +15,3 @@ "use strict";
 function useScrollListener(_a) {
-    var _b = _a.enabled, enabled = _b === void 0 ? true : _b, onScroll = _a.onScroll, element = _a.element, _c = _a.options, options = _c === void 0 ? passiveEvents_1.isSupported ? { passive: true, capture: true } : true : _c;
+    var _b = _a.enabled, enabled = _b === void 0 ? true : _b, onScroll = _a.onScroll, element = _a.element, _c = _a.options, options = _c === void 0 ? passiveEvents_1.isSupported ? { passive: true } : false : _c;
     var callback = useRefCache_1.default(onScroll);
@@ -18,0 +18,0 @@ react_1.useEffect(function () {

lib/index.js

@@ -8,7 +8,12 @@ "use strict";
 __export(require("./events"));
+__export(require("./interaction"));
 __export(require("./layout"));
+__export(require("./search"));
 __export(require("./sizing"));
 __export(require("./positioning"));
 __export(require("./wia-aria"));
-__export(require("./omit"));
+var omit_1 = require("./omit");
+exports.omit = omit_1.default;
+var scrollIntoView_1 = require("./scrollIntoView");
+exports.scrollIntoView = scrollIntoView_1.default;
 var unitToNumber_1 = require("./unitToNumber");
@@ -18,2 +23,4 @@ exports.unitToNumber = unitToNumber_1.default;
 exports.applyRef = applyRef_1.default;
+var throttle_1 = require("./throttle");
+exports.throttle = throttle_1.default;
 var useToggle_1 = require("./useToggle");
@@ -31,2 +38,4 @@ exports.useToggle = useToggle_1.default;
 exports.usePrevious = usePrevious_1.default;
+var useCloseOnOutsideClick_1 = require("./useCloseOnOutsideClick");
+exports.useCloseOnOutsideClick = useCloseOnOutsideClick_1.default;
 //# sourceMappingURL=index.js.map

lib/layout/Grid.js

@@ -38,2 +38,3 @@ "use strict";
 var useAppSize_1 = __importDefault(require("../sizing/useAppSize"));
+var GridCell_1 = __importDefault(require("./GridCell"));
 /**
@@ -62,3 +63,3 @@ * This CSS Variable allows you to override the number of columns that should be displayed in the
     var _b;
-    var style = _a.style, className = _a.className, forwardedRef = _a.forwardedRef, children = _a.children, columns = _a.columns, phoneColumns = _a.phoneColumns, tabletColumns = _a.tabletColumns, desktopColumns = _a.desktopColumns, largeDesktopColumns = _a.largeDesktopColumns, padding = _a.padding, gutter = _a.gutter, minCellWidth = _a.minCellWidth, props = __rest(_a, ["style", "className", "forwardedRef", "children", "columns", "phoneColumns", "tabletColumns", "desktopColumns", "largeDesktopColumns", "padding", "gutter", "minCellWidth"]);
+    var style = _a.style, className = _a.className, forwardedRef = _a.forwardedRef, children = _a.children, clone = _a.clone, wrapOnly = _a.wrapOnly, columns = _a.columns, phoneColumns = _a.phoneColumns, tabletColumns = _a.tabletColumns, desktopColumns = _a.desktopColumns, largeDesktopColumns = _a.largeDesktopColumns, padding = _a.padding, gutter = _a.gutter, minCellWidth = _a.minCellWidth, props = __rest(_a, ["style", "className", "forwardedRef", "children", "clone", "wrapOnly", "columns", "phoneColumns", "tabletColumns", "desktopColumns", "largeDesktopColumns", "padding", "gutter", "minCellWidth"]);
     var _c = useAppSize_1.default(), isPhone = _c.isPhone, isTablet = _c.isTablet, isDesktop = _c.isDesktop, isLargeDesktop = _c.isLargeDesktop;
@@ -69,7 +70,16 @@ var mergedStyle = __assign({ padding: padding, gridTemplateColumns: minCellWidth
         (isTablet && tabletColumns) ||
+        (isLargeDesktop && largeDesktopColumns) ||
         (isDesktop && desktopColumns) ||
-        (isLargeDesktop && largeDesktopColumns) ||
         columns, _b[exports.GRID_GUTTER_VAR] = gutter, _b));
-    return (react_1.default.createElement("div", __assign({}, props, { style: mergedStyle, ref: forwardedRef, className: classnames_1.default("rmd-grid", className) }), children));
+    var content = children;
+    if (clone || wrapOnly) {
+        content = react_1.Children.map(children, function (child) { return (react_1.default.createElement(GridCell_1.default, { clone: clone }, child)); });
+    }
+    return (react_1.default.createElement("div", __assign({}, props, { style: mergedStyle, ref: forwardedRef, className: classnames_1.default("rmd-grid", className) }), content));
 };
+var defaultProps = {
+    clone: false,
+    wrapOnly: false,
+};
+Grid.defaultProps = defaultProps;
 if (process.env.NODE_ENV !== "production") {
@@ -86,2 +96,4 @@ Grid.displayName = "Grid";
             className: PropTypes.string,
+            clone: PropTypes.bool,
+            wrapOnly: PropTypes.bool,
             columns: PropTypes.number,
@@ -88,0 +100,0 @@ phoneColumns: PropTypes.number,

lib/layout/GridCell.js

@@ -42,3 +42,3 @@ "use strict";
     var _b, _c, _d, _e, _f, _g;
-    var style = _a.style, className = _a.className, forwardedRef = _a.forwardedRef, children = _a.children, colSpan = _a.colSpan, propColStart = _a.colStart, propColEnd = _a.colEnd, propRowSpan = _a.rowSpan, propRowStart = _a.rowStart, propRowEnd = _a.rowEnd, phone = _a.phone, tablet = _a.tablet, desktop = _a.desktop, largeDesktop = _a.largeDesktop, props = __rest(_a, ["style", "className", "forwardedRef", "children", "colSpan", "colStart", "colEnd", "rowSpan", "rowStart", "rowEnd", "phone", "tablet", "desktop", "largeDesktop"]);
+    var style = _a.style, className = _a.className, clone = _a.clone, forwardedRef = _a.forwardedRef, children = _a.children, colSpan = _a.colSpan, propColStart = _a.colStart, propColEnd = _a.colEnd, propRowSpan = _a.rowSpan, propRowStart = _a.rowStart, propRowEnd = _a.rowEnd, phone = _a.phone, tablet = _a.tablet, desktop = _a.desktop, largeDesktop = _a.largeDesktop, props = __rest(_a, ["style", "className", "clone", "forwardedRef", "children", "colSpan", "colStart", "colEnd", "rowSpan", "rowStart", "rowEnd", "phone", "tablet", "desktop", "largeDesktop"]);
     var _h = useAppSize_1.default(), isPhone = _h.isPhone, isTablet = _h.isTablet, isDesktop = _h.isDesktop, isLargeDesktop = _h.isLargeDesktop;
@@ -57,3 +57,14 @@ var colStart = propColStart;
     }
-    return (react_1.default.createElement("div", __assign({}, props, { style: __assign({ gridColumnStart: colStart, gridColumnEnd: colEnd, gridRowStart: rowStart, gridRowEnd: rowSpan ? "span " + rowSpan : rowEnd }, style), ref: forwardedRef, className: classnames_1.default(block("cell", (_g = {}, _g["" + colSpan] = colSpan, _g)), className) }), children));
+    var cellStyle = __assign({ gridColumnStart: colStart, gridColumnEnd: colEnd, gridRowStart: rowStart, gridRowEnd: rowSpan ? "span " + rowSpan : rowEnd }, style);
+    var cellClassName = classnames_1.default(block("cell", (_g = {},
+        _g["" + colSpan] = colSpan,
+        _g)), className);
+    if (clone && react_1.isValidElement(children)) {
+        var child = react_1.Children.only(children);
+        return react_1.cloneElement(child, {
+            style: __assign({}, child.props.style, cellStyle),
+            className: classnames_1.default(cellClassName, child.props.className),
+        });
+    }
+    return (react_1.default.createElement("div", __assign({}, props, { style: cellStyle, ref: forwardedRef, className: cellClassName }), children));
 };
@@ -79,2 +90,3 @@ if (process.env.NODE_ENV !== "production") {
             className: PropTypes.string,
+            clone: PropTypes.bool,
             rowSpan: PropTypes.number,
@@ -81,0 +93,0 @@ rowStart: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),

lib/layout/GridList.js

@@ -41,2 +41,3 @@ "use strict";
 var scrollbarWidth_1 = __importDefault(require("./scrollbarWidth"));
+var GridListCell_1 = __importDefault(require("./GridListCell"));
 /**
@@ -60,3 +61,3 @@ * This is the css variable that is used store the current size of each cell.
     var _a;
-    var _b = providedProps, style = _b.style, className = _b.className, children = _b.children, cellMargin = _b.cellMargin, maxCellSize = _b.maxCellSize, forwardedRef = _b.forwardedRef, defaultSize = _b.defaultSize, containerPadding = _b.containerPadding, disableHeightObserver = _b.disableHeightObserver, disableWidthObserver = _b.disableWidthObserver, props = __rest(_b, ["style", "className", "children", "cellMargin", "maxCellSize", "forwardedRef", "defaultSize", "containerPadding", "disableHeightObserver", "disableWidthObserver"]);
+    var _b = providedProps, style = _b.style, className = _b.className, children = _b.children, clone = _b.clone, wrapOnly = _b.wrapOnly, cellMargin = _b.cellMargin, maxCellSize = _b.maxCellSize, forwardedRef = _b.forwardedRef, defaultSize = _b.defaultSize, containerPadding = _b.containerPadding, disableHeightObserver = _b.disableHeightObserver, disableWidthObserver = _b.disableWidthObserver, props = __rest(_b, ["style", "className", "children", "clone", "wrapOnly", "cellMargin", "maxCellSize", "forwardedRef", "defaultSize", "containerPadding", "disableHeightObserver", "disableWidthObserver"]);
     var _c = react_1.useState(defaultSize || { columns: -1, cellWidth: maxCellSize }), gridSize = _c[0], setGridSize = _c[1];
@@ -92,5 +93,17 @@ var ref = react_1.useRef(null);
     var mergedStyle = __assign({}, style, (_a = {}, _a[exports.CELL_SIZE_VAR] = gridSize.cellWidth + "px", _a[exports.CELL_MARGIN_VAR] = cellMargin || undefined, _a));
-    return (react_1.default.createElement("div", __assign({}, props, { ref: refHandler, style: mergedStyle, className: classnames_1.default(block(), className) }), typeof children === "function" ? children(gridSize) : children));
+    var content = null;
+    if (typeof children === "function") {
+        content = children(gridSize);
+    }
+    else if (clone || wrapOnly) {
+        content = react_1.Children.map(children, function (child) { return (react_1.default.createElement(GridListCell_1.default, { clone: clone }, child)); });
+    }
+    else {
+        content = children;
+    }
+    return (react_1.default.createElement("div", __assign({}, props, { ref: refHandler, style: mergedStyle, className: classnames_1.default(block(), className) }), content));
 };
 var defaultProps = {
+    clone: false,
+    wrapOnly: false,
     maxCellSize: 150,
@@ -111,2 +124,4 @@ containerPadding: 16,
         GridList.propTypes = {
+            clone: PropTypes.bool,
+            wrapOnly: PropTypes.bool,
             className: PropTypes.string,
@@ -113,0 +128,0 @@ children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),

lib/layout/GridListCell.js

@@ -38,8 +38,16 @@ "use strict";
 var bem_1 = __importDefault(require("../css/bem"));
-var block = bem_1.default("rmd-grid-list__cell");
+var block = bem_1.default("rmd-grid-list");
 var GridListCell = function (providedProps) {
-    var _a = providedProps, className = _a.className, forwardedRef = _a.forwardedRef, children = _a.children, square = _a.square, props = __rest(_a, ["className", "forwardedRef", "children", "square"]);
-    return (react_1.default.createElement("div", __assign({}, props, { ref: forwardedRef, className: classnames_1.default(block({ square: square }), className) }), children));
+    var _a = providedProps, className = _a.className, forwardedRef = _a.forwardedRef, children = _a.children, square = _a.square, clone = _a.clone, props = __rest(_a, ["className", "forwardedRef", "children", "square", "clone"]);
+    var cellClassName = classnames_1.default(block("cell", { square: square }), className);
+    if (clone && react_1.isValidElement(children)) {
+        var child = react_1.Children.only(children);
+        return react_1.cloneElement(child, {
+            className: classnames_1.default(cellClassName, child.props.className),
+        });
+    }
+    return (react_1.default.createElement("div", __assign({}, props, { ref: forwardedRef, className: cellClassName }), children));
 };
 var defaultProps = {
+    clone: false,
     square: false,
@@ -57,2 +65,3 @@ };
         GridListCell.propTypes = {
+            clone: PropTypes.bool,
             square: PropTypes.bool,
@@ -59,0 +68,0 @@ className: PropTypes.string,

lib/omit.js

@@ -18,3 +18,2 @@ "use strict";
         if (!omitKeys.includes(key)) {
-            // @ts-ignore
             updated[key] = object[key];
@@ -25,3 +24,3 @@ }
 }
-exports.omit = omit;
+exports.default = omit;
 //# sourceMappingURL=omit.js.map

lib/positioning/findSizingContainer.js

@@ -12,7 +12,7 @@ "use strict";
  *
- * @param el - The element to find a sizing containet for.
+ * @param el The element to find a sizing container for.
  * @return the sizing container relative to the provided element, or `null` if none
- *  could be found.
+ * could be found.
  * @throws This error will be thrown if using the `data-query-selector` and the query
- *  selector does not return an element on the page.
+ * selector does not return an element on the page.
  */
@@ -19,0 +19,0 @@ function findSizingContainer(el) {

lib/positioning/getElementRect.js

@@ -15,2 +15,4 @@ "use strict";
  * try to fit within the viewport.
+ * @return either a DOMRect or ClientRect for the element
+ * @private
  */
@@ -17,0 +19,0 @@ function getElementRect(element, coords) {

lib/positioning/getFixedPosition.js

@@ -6,256 +6,41 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+var createHorizontalPosition_1 = __importDefault(require("./createHorizontalPosition"));
+var createVerticalPosition_1 = __importDefault(require("./createVerticalPosition"));
 var findSizingContainer_1 = __importDefault(require("./findSizingContainer"));
 var getElementRect_1 = __importDefault(require("./getElementRect"));
+var getTransformOrigin_1 = __importDefault(require("./getTransformOrigin"));
 var getViewportSize_1 = __importDefault(require("./getViewportSize"));
-function getTransformOrigin(anchor) {
-    var x = "0";
-    switch (anchor.x) {
-        case "right":
-        case "inner-left":
-            x = "0";
-            break;
-        case "center":
-            x = "50%";
-            break;
-        case "left":
-        case "inner-right":
-            x = "100%";
-            break;
-        default:
-            x = "0";
-    }
-    var y = "0";
-    switch (anchor.y) {
-        case "above":
-        case "bottom":
-            y = "100%";
-            break;
-        case "center":
-            y = "50%";
-            break;
-        case "below":
-        case "top":
-            y = "0";
-            break;
-        default:
-            y = "0";
-    }
-    return x + " " + y;
-}
-function createStyleWithoutElement(containerRect, anchor, transformOrigin) {
-    var x = anchor.x, y = anchor.y;
-    var height = containerRect.height, width = containerRect.width, containerLeft = containerRect.left, containerTop = containerRect.top;
-    var left = containerLeft;
-    var top = containerTop;
-    if (x === "right" || x === "inner-right") {
-        left += width;
-    }
-    else if (x === "center") {
-        left += width / 2;
-    }
-    if (y === "below" || y === "bottom") {
-        top += height;
-    }
-    else if (y === "center") {
-        top += height / 2;
-    }
-    return {
-        actualX: x,
-        actualY: y,
-        style: {
-            left: left,
-            top: top,
-            position: "fixed",
-            transformOrigin: transformOrigin ? getTransformOrigin(anchor) : undefined,
-        },
-    };
-}
 /**
- * Tries to fix the "left" horizontal positoining by ensuring it can be within the viewport
- * and tries swapping sides if possible. This is basically the inverse of `fixRightPosition`
- */
-function fixLeftPosition(_a) {
-    var containerLeft = _a.containerLeft, containerWidth = _a.containerWidth, elementWidth = _a.elementWidth, xMargin = _a.xMargin, vw = _a.vw, vwMargin = _a.vwMargin, disableSwapping = _a.disableSwapping;
-    var left = containerLeft - elementWidth - xMargin;
-    var actualX = "left";
-    if (left < vwMargin) {
-        var nextLeft = containerLeft + containerWidth + xMargin;
-        if (disableSwapping || nextLeft + elementWidth > vw - vwMargin) {
-            left = vwMargin;
-        }
-        else {
-            left = nextLeft;
-            actualX = "right";
-        }
-    }
-    return { left: left, actualX: actualX };
-}
-function fixRightPosition(_a) {
-    var containerLeft = _a.containerLeft, containerWidth = _a.containerWidth, elementWidth = _a.elementWidth, xMargin = _a.xMargin, vw = _a.vw, vwMargin = _a.vwMargin, disableSwapping = _a.disableSwapping;
-    var actualX = "right";
-    var left = containerLeft + containerWidth + xMargin;
-    var screenRight = vw - vwMargin;
-    if (left + elementWidth > screenRight) {
-        var nextLeft = containerLeft - containerWidth - xMargin;
-        if (disableSwapping || nextLeft < vwMargin) {
-            left = screenRight - elementWidth;
-        }
-        else {
-            actualX = "left";
-            left = nextLeft;
-        }
-    }
-    return { left: left, actualX: actualX };
-}
-function fixInnerLeftPosition(_a) {
-    var containerLeft = _a.containerLeft, containerWidth = _a.containerWidth, elementWidth = _a.elementWidth, vw = _a.vw, xMargin = _a.xMargin, vwMargin = _a.vwMargin, disableSwapping = _a.disableSwapping;
-    var left = containerLeft + xMargin;
-    var actualX = "inner-left";
-    var screenRight = vw - vwMargin;
-    if (left < vwMargin) {
-        var nextLeft = containerLeft + containerWidth - elementWidth - xMargin;
-        if (disableSwapping || nextLeft > screenRight) {
-            left = vwMargin;
-        }
-        else {
-            left = nextLeft;
-            actualX = "right";
-        }
-    }
-    return { actualX: actualX, left: left };
-}
-function fixInnerRightPosition(_a) {
-    var containerLeft = _a.containerLeft, containerWidth = _a.containerWidth, elementWidth = _a.elementWidth, vw = _a.vw, xMargin = _a.xMargin, vwMargin = _a.vwMargin, disableSwapping = _a.disableSwapping;
-    var left = containerLeft + containerWidth - elementWidth - xMargin;
-    var actualX = "inner-right";
-    if (left < vwMargin) {
-        if (disableSwapping || containerLeft + elementWidth > vw - vwMargin) {
-            left = vwMargin;
-        }
-        else {
-            left = containerLeft + xMargin;
-            actualX = "left";
-        }
-    }
-    return { actualX: actualX, left: left };
-}
-function fixHorizontalCenterPosition(_a) {
-    var containerLeft = _a.containerLeft, containerWidth = _a.containerWidth, elementWidth = _a.elementWidth, vw = _a.vw, vwMargin = _a.vwMargin;
-    var left = containerLeft + containerWidth / 2 - elementWidth / 2;
-    var screenRight = vw - vwMargin;
-    if (left + elementWidth > screenRight) {
-        left = screenRight - elementWidth;
-    }
-    return left;
-}
-function fixAbovePosition(_a) {
-    var containerTop = _a.containerTop, containerHeight = _a.containerHeight, elementHeight = _a.elementHeight, yMargin = _a.yMargin, vh = _a.vh, vhMargin = _a.vhMargin, disableSwapping = _a.disableSwapping;
-    var top = containerTop - elementHeight - yMargin;
-    var actualY = "above";
-    if (top < vhMargin) {
-        var nextTop = containerTop + containerHeight + yMargin;
-        if (disableSwapping || nextTop + elementHeight > vh - vhMargin) {
-            top = vhMargin;
-        }
-        else {
-            top = nextTop;
-            actualY = "below";
-        }
-    }
-    return { actualY: actualY, top: top };
-}
-function fixBelowPosition(_a) {
-    var containerTop = _a.containerTop, containerHeight = _a.containerHeight, elementHeight = _a.elementHeight, yMargin = _a.yMargin, vh = _a.vh, vhMargin = _a.vhMargin, disableSwapping = _a.disableSwapping;
-    var top = containerTop + containerHeight + yMargin;
-    var actualY = "below";
-    var maxTop = vh - vhMargin;
-    if (top + elementHeight > maxTop) {
-        var nextTop = containerTop - elementHeight - yMargin;
-        if (disableSwapping || nextTop < vhMargin) {
-            top = vhMargin;
-        }
-        else {
-            top = nextTop;
-            actualY = "above";
-        }
-    }
-    return { actualY: actualY, top: top };
-}
-function fixTopPosition(_a) {
-    var containerTop = _a.containerTop, containerHeight = _a.containerHeight, elementHeight = _a.elementHeight, vh = _a.vh, yMargin = _a.yMargin, vhMargin = _a.vhMargin, disableSwapping = _a.disableSwapping;
-    var actualY = "top";
-    var top = containerTop + yMargin;
-    var screenBottom = vh - vhMargin;
-    if (top + elementHeight > screenBottom) {
-        var nextTop = containerTop + containerHeight - elementHeight - yMargin;
-        if (disableSwapping || nextTop < vhMargin) {
-            top = screenBottom - elementHeight;
-        }
-        else {
-            actualY = "bottom";
-            top = nextTop;
-        }
-    }
-    return { actualY: actualY, top: top };
-}
-function fixBottomPosition(_a) {
-    var containerTop = _a.containerTop, containerHeight = _a.containerHeight, elementHeight = _a.elementHeight, vh = _a.vh, yMargin = _a.yMargin, vhMargin = _a.vhMargin, disableSwapping = _a.disableSwapping;
-    var actualY = "bottom";
-    var top = containerTop + containerHeight - elementHeight - yMargin;
-    var screenBottom = vh - vhMargin;
-    if (top + elementHeight > screenBottom) {
-        if (disableSwapping || containerTop < vhMargin) {
-            top = vhMargin;
-        }
-        else {
-            actualY = "top";
-            top = containerTop + yMargin;
-        }
-    }
-    return { actualY: actualY, top: top };
-}
-function fixVerticalCenter(_a) {
-    var containerTop = _a.containerTop, containerHeight = _a.containerHeight, elementHeight = _a.elementHeight, vh = _a.vh, vhMargin = _a.vhMargin;
-    var halvedHeight = elementHeight / 2;
-    var top = containerTop + containerHeight / 2 - halvedHeight;
-    var screenBottom = vh - vhMargin;
-    if (top + halvedHeight > screenBottom) {
-        top = screenBottom - halvedHeight;
-    }
-    else if (top - halvedHeight < vhMargin) {
-        top = vhMargin;
-    }
-    return top;
-}
-/**
- * One of the most complicated functions in this project that will attempt to position
- * an element relative to another container element while still being visible within
- * the viewport. Below is the logical flow for attempting to fix the element to the container:
+ * One of the most complicated functions in this project that will attempt to
+ * position an element relative to another container element while still being
+ * visible within the viewport. Below is the logical flow for attempting to fix
+ * the element to the container:
  *
- * No Container:
- * If there is no container element, return an the provided x and y positions and no styles since
- * there's nothing we can use to calculate the position.
+ * No Container: If there is no container element, return the provided x and y
+ * positions and no styles since there's nothing we can use to calculate the
+ * position.
  *
- * No Element:
- * If the container was provided but the element to position does not exist, return an style object
- * containing the `left` and `top` values for the container and apply as many of the positioning
- * options as possible so that the styles are "as close as possible" before the fixed element
- * is added to the dom. This will also return the provided x and y positions since nothing
- * could be swapped around yet.
+ * No Element: If the container was provided but the element to position does
+ * not exist, return an style object containing the `left` and `top` values for
+ * the container and apply as many of the positioning options as possible so
+ * that the styles are "as close as possible" before the fixed element is added
+ * to the DOM. This will also return the provided x and y positions since
+ * nothing could be swapped around yet.
  *
- * Container and Element:
- * If both the container and fixed element were provided, apply all the positioning options
- * to the `left` and `top` values of the container based on the sizes of both elements.
+ * Container and Element: If both the container and fixed element were provided,
+ * apply all the positioning options to the `left` and `top` values of the
+ * container based on the sizes of both elements.
  *
- * Now that the `left` and `top` values were applied, check to see if the element is fully
- * visible within the viewport with the provided positioning options. If it is fully visible,
- * do nothing else. If it isn't... follow the next flow:
+ * Now that the `left` and `top` values were applied, check to see if the
+ * element is fully visible within the viewport with the provided positioning
+ * options. If it is fully visible, do nothing else. If it isn't... follow the
+ * next flow:
  *
- * First, check the horizontal sizes and make sure that the element is still within the viewport
- * with the provided viewwidth margin. If it isn't, first try to swap only to a `right` style
- * instead of left to see if that fixes it, otherwise keep both the `left` and `right` styles.
+ * First, check the horizontal sizes and make sure that the element is still
+ * within the viewport with the provided viewwidth margin. If it isn't, first
+ * try to swap only to a `right` style instead of left to see if that fixes it,
+ * otherwise keep both the `left` and `right` styles.
  */
 function getFixedPosition(_a) {
-    var _b, _c, _d, _e, _f, _g, _h, _j;
-    var container = _a.container, element = _a.element, _k = _a.anchor, propAnchor = _k === void 0 ? {} : _k, _l = _a.vwMargin, vwMargin = _l === void 0 ? 16 : _l, _m = _a.vhMargin, vhMargin = _m === void 0 ? 16 : _m, _o = _a.xMargin, xMargin = _o === void 0 ? 0 : _o, _p = _a.yMargin, yMargin = _p === void 0 ? 0 : _p, _q = _a.disableSwapping, disableSwapping = _q === void 0 ? false : _q, _r = _a.transformOrigin, transformOrigin = _r === void 0 ? false : _r;
+    var container = _a.container, element = _a.element, _b = _a.anchor, propAnchor = _b === void 0 ? {} : _b, _c = _a.vwMargin, vwMargin = _c === void 0 ? 16 : _c, _d = _a.vhMargin, vhMargin = _d === void 0 ? 16 : _d, _e = _a.xMargin, xMargin = _e === void 0 ? 0 : _e, _f = _a.yMargin, yMargin = _f === void 0 ? 0 : _f, _g = _a.width, widthType = _g === void 0 ? "auto" : _g, _h = _a.preventOverlap, preventOverlap = _h === void 0 ? false : _h, _j = _a.transformOrigin, transformOrigin = _j === void 0 ? false : _j, _k = _a.disableSwapping, disableSwapping = _k === void 0 ? false : _k, _l = _a.disableVHBounds, disableVHBounds = _l === void 0 ? false : _l;
     container = findSizingContainer_1.default(container);
@@ -266,3 +51,11 @@ var anchor = {
     };
-    if (!container) {
+    if (process.env.NODE_ENV !== "production") {
+        if (widthType !== "auto" && anchor.x !== "center") {
+            throw new Error('Unable to use a calculated width when the horizontal anchor is not `"center"`.');
+        }
+        if (preventOverlap && anchor.y !== "above" && anchor.y !== "below") {
+            throw new Error('Unable to prevent overlap when the vertical anchor is not `"above"` or `"below"`');
+        }
+    }
+    if (!container || !element) {
         return {
@@ -274,83 +67,26 @@ actualX: anchor.x,
     var containerRect = container.getBoundingClientRect();
-    var initialResult = createStyleWithoutElement(containerRect, anchor, transformOrigin);
-    if (!element) {
-        return initialResult;
-    }
     var vh = getViewportSize_1.default("height");
     var vw = getViewportSize_1.default("width");
-    var maxHeight = vh - vhMargin * 2;
-    var maxWidth = vw - vwMargin * 2;
-    var containerHeight = containerRect.height, containerWidth = containerRect.width;
-    var actualX = anchor.x;
-    var actualY = anchor.y;
-    var _s = getElementRect_1.default(element), height = _s.height, width = _s.width;
-    var left;
-    var top;
-    var right;
-    var bottom;
-    var adjustConfig = {
-        containerLeft: containerRect.left,
-        containerTop: containerRect.top,
-        containerWidth: containerWidth,
-        containerHeight: containerHeight,
-        elementWidth: width,
-        elementHeight: height,
+    var _m = getElementRect_1.default(element), height = _m.height, elWidth = _m.width;
+    var _o = createHorizontalPosition_1.default({
+        x: anchor.x,
+        vw: vw,
+        vwMargin: vwMargin,
         xMargin: xMargin,
-        yMargin: yMargin,
-        vw: vw,
+        width: widthType,
+        elWidth: elWidth,
+        containerRect: containerRect,
+        disableSwapping: disableSwapping,
+    }), left = _o.left, right = _o.right, width = _o.width, minWidth = _o.minWidth, actualX = _o.actualX;
+    var _p = createVerticalPosition_1.default({
+        y: anchor.y,
         vh: vh,
-        vwMargin: vwMargin,
         vhMargin: vhMargin,
+        yMargin: yMargin,
+        elHeight: height,
+        containerRect: containerRect,
         disableSwapping: disableSwapping,
-    };
-    if (width > maxWidth) {
-        left = vwMargin;
-        right = vwMargin;
-        actualX = "center";
-    }
-    else {
-        switch (anchor.x) {
-            case "left":
-                (_b = fixLeftPosition(adjustConfig), actualX = _b.actualX, left = _b.left);
-                break;
-            case "right":
-                (_c = fixRightPosition(adjustConfig), actualX = _c.actualX, left = _c.left);
-                break;
-            case "inner-left":
-                (_d = fixInnerLeftPosition(adjustConfig), actualX = _d.actualX, left = _d.left);
-                break;
-            case "inner-right":
-                (_e = fixInnerRightPosition(adjustConfig), actualX = _e.actualX, left = _e.left);
-                break;
-            case "center":
-                left = fixHorizontalCenterPosition(adjustConfig);
-                break;
-            // no default
-        }
-    }
-    if (height > maxHeight) {
-        top = vhMargin;
-        bottom = vhMargin;
-        actualY = "center";
-    }
-    else {
-        switch (anchor.y) {
-            case "above":
-                (_f = fixAbovePosition(adjustConfig), actualY = _f.actualY, top = _f.top);
-                break;
-            case "below":
-                (_g = fixBelowPosition(adjustConfig), actualY = _g.actualY, top = _g.top);
-                break;
-            case "top":
-                (_h = fixTopPosition(adjustConfig), actualY = _h.actualY, top = _h.top);
-                break;
-            case "center":
-                top = fixVerticalCenter(adjustConfig);
-                break;
-            case "bottom":
-                (_j = fixBottomPosition(adjustConfig), actualY = _j.actualY, top = _j.top);
-                break;
-            // no default
-        }
-    }
+        preventOverlap: preventOverlap,
+        disableVHBounds: disableVHBounds,
+    }), top = _p.top, bottom = _p.bottom, actualY = _p.actualY;
     return {
@@ -364,5 +100,7 @@ actualX: actualX,
             bottom: bottom,
-            position: "fixed",
+            width: width,
+            minWidth: minWidth,
+            position: disableVHBounds ? "absolute" : "fixed",
             transformOrigin: transformOrigin
-                ? getTransformOrigin({ x: actualX, y: actualY })
+                ? getTransformOrigin_1.default({ x: actualX, y: actualY })
                 : undefined,
@@ -369,0 +107,0 @@ },

lib/positioning/index.js

 "use strict";
-function __export(m) {
-    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
-}
 Object.defineProperty(exports, "__esModule", { value: true });
@@ -14,3 +11,2 @@ var findSizingContainer_1 = require("./findSizingContainer");
 exports.getFixedPosition = getFixedPosition_1.default;
-__export(require("./getFixedPosition"));
 //# sourceMappingURL=index.js.map

lib/sizing/index.js

@@ -6,3 +6,5 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-__export(require("./AppSize"));
+var AppSizeListener_1 = require("./AppSizeListener");
+exports.AppSizeListener = AppSizeListener_1.default;
+__export(require("./AppSizeListener"));
 var ResizeObserver_1 = require("./ResizeObserver");
@@ -24,3 +26,4 @@ exports.ResizeObserver = ResizeObserver_1.default;
 exports.useAppSize = useAppSize_1.default;
-exports.DEFAULT_APP_SIZE = useAppSize_1.DEFAULT_APP_SIZE;
+var useAppSizeMedia_1 = require("./useAppSizeMedia");
+exports.DEFAULT_APP_SIZE = useAppSizeMedia_1.DEFAULT_APP_SIZE;
 var useResizeObserver_1 = require("./useResizeObserver");
@@ -27,0 +30,0 @@ exports.useResizeObserver = useResizeObserver_1.default;

lib/sizing/MediaOnly.js

 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-var AppSize_1 = require("./AppSize");
+var useAppSize_1 = __importDefault(require("./useAppSize"));
 /**
@@ -11,3 +14,3 @@ * A simple component that will render the children only when the app is considered
     var _a = props, children = _a.children, fallback = _a.fallback;
-    var _b = AppSize_1.useAppSizeContext(), isPhone = _b.isPhone, isTablet = _b.isTablet;
+    var _b = useAppSize_1.default(), isPhone = _b.isPhone, isTablet = _b.isTablet;
     if (isPhone || isTablet) {
@@ -24,3 +27,3 @@ return children;
     var _a = props, children = _a.children, fallback = _a.fallback;
-    var isPhone = AppSize_1.useAppSizeContext().isPhone;
+    var isPhone = useAppSize_1.default().isPhone;
     if (isPhone) {
@@ -37,3 +40,3 @@ return children;
     var _a = props, children = _a.children, fallback = _a.fallback;
-    var isTablet = AppSize_1.useAppSizeContext().isTablet;
+    var isTablet = useAppSize_1.default().isTablet;
     if (isTablet) {
@@ -50,3 +53,3 @@ return children;
     var _a = props, children = _a.children, fallback = _a.fallback;
-    var isDesktop = AppSize_1.useAppSizeContext().isDesktop;
+    var isDesktop = useAppSize_1.default().isDesktop;
     if (isDesktop) {
@@ -53,0 +56,0 @@ return children;

lib/sizing/useAppSize.js

 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
 };
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = require("react");
-var constants_1 = require("./constants");
-var useWidthMediaQuery_1 = __importDefault(require("./useWidthMediaQuery"));
-exports.DEFAULT_APP_SIZE = {
-    isPhone: false,
-    isTablet: false,
-    isDesktop: true,
-    isLargeDesktop: false,
-    isLandscape: true,
-};
+var useAppSizeMedia_1 = require("./useAppSizeMedia");
 /**
- * This hook is used to determine the current application size based on the
- * provided query sizes. When you want to render your app server side, you will
- * need to provide a custom `defaultSize` that implements your logic to determine
- * the type of device requesting a page. Once the app has been rendered in the DOM,
- * this hook will attach event listeners to automatically update the app size when
- * the page is resized.
+ * @private
  */
-function useAppSize(_a) {
-    var _b = _a === void 0 ? {} : _a, _c = _b.phoneMaxWidth, phoneMaxWidth = _c === void 0 ? constants_1.DEFAULT_PHONE_MAX_WIDTH : _c, _d = _b.tabletMinWidth, tabletMinWidth = _d === void 0 ? constants_1.DEFAULT_TABLET_MIN_WIDTH : _d, _e = _b.tabletMaxWidth, tabletMaxWidth = _e === void 0 ? constants_1.DEFAULT_TABLET_MAX_WIDTH : _e, _f = _b.desktopMinWidth, desktopMinWidth = _f === void 0 ? constants_1.DEFAULT_DESKTOP_MIN_WIDTH : _f, _g = _b.desktopLargeMinWidth, desktopLargeMinWidth = _g === void 0 ? constants_1.DEFAULT_DESKTOP_LARGE_MIN_WIDTH : _g, _h = _b.defaultSize, defaultSize = _h === void 0 ? exports.DEFAULT_APP_SIZE : _h;
-    /* eslint-disable react-hooks/rules-of-hooks */
-    // disabled since this is conditionally applied for SSR
-    if (typeof window === "undefined") {
-        return defaultSize;
+exports.AppSizeContext = react_1.createContext(__assign({}, useAppSizeMedia_1.DEFAULT_APP_SIZE, { __initialized: false }));
+/**
+ * Gets the current app size.
+ *
+ * @return the current AppSize
+ */
+function useAppSize() {
+    var _a = react_1.useContext(exports.AppSizeContext), __initialized = _a.__initialized, context = __rest(_a, ["__initialized"]);
+    if (!__initialized) {
+        throw new Error("Attempted to use the current `AppSizeContext` without mounting the `AppSizeListener` component beforehand.");
     }
-    var matchesDesktop = useWidthMediaQuery_1.default({ min: desktopMinWidth });
-    var matchesLargeDesktop = useWidthMediaQuery_1.default({ min: desktopLargeMinWidth });
-    var matchesTablet = useWidthMediaQuery_1.default({
-        min: tabletMinWidth,
-        max: tabletMaxWidth,
-    });
-    var matchesPhone = useWidthMediaQuery_1.default({ max: phoneMaxWidth });
-    var isDesktop = matchesDesktop;
-    var isTablet = !matchesDesktop && matchesTablet;
-    var isPhone = !isTablet && !isDesktop && matchesPhone;
-    var isLandscape = window.innerWidth > window.innerHeight;
-    var isLargeDesktop = matchesLargeDesktop;
-    return react_1.useMemo(function () { return ({
-        isPhone: isPhone,
-        isTablet: isTablet,
-        isDesktop: isDesktop,
-        isLargeDesktop: isLargeDesktop,
-        isLandscape: isLandscape,
-    }); }, [isPhone, isTablet, isDesktop, isLargeDesktop, isLandscape]);
+    return context;
 }
 exports.default = useAppSize;
 //# sourceMappingURL=useAppSize.js.map

lib/useTimeout.js

@@ -31,3 +31,3 @@ "use strict";
     /* eslint-disable react-hooks/exhaustive-deps */
-    // these are all guarenteed to not change since using refs or non-updating callbacks
+    // these are all guaranteed to not change since using refs or non-updating callbacks
     var restart = react_1.useCallback(function () {
@@ -34,0 +34,0 @@ clearTimeout();

lib/wia-aria/index.js

@@ -9,2 +9,3 @@ "use strict";
 __export(require("./FocusContainer"));
+__export(require("./movement"));
 var useScrollLock_1 = require("./useScrollLock");
@@ -16,2 +17,4 @@ exports.useScrollLock = useScrollLock_1.default;
 exports.usePreviousFocus = usePreviousFocus_1.default;
+var useCloseOnEscape_1 = require("./useCloseOnEscape");
+exports.useCloseOnEscape = useCloseOnEscape_1.default;
 var getFocusableElements_1 = require("./getFocusableElements");
@@ -21,8 +24,4 @@ exports.getFocusableElements = getFocusableElements_1.default;
 exports.focusElementWithin = focusElementWithin_1.default;
-var useKeyboardMovement_1 = require("./useKeyboardMovement");
-exports.useKeyboardMovement = useKeyboardMovement_1.default;
-var useKeyboardSearch_1 = require("./useKeyboardSearch");
-exports.useKeyboardSearch = useKeyboardSearch_1.default;
-var useCloseOnEscape_1 = require("./useCloseOnEscape");
-exports.useCloseOnEscape = useCloseOnEscape_1.default;
+var extractTextContent_1 = require("./extractTextContent");
+exports.extractTextContent = extractTextContent_1.default;
 //# sourceMappingURL=index.js.map

lib/wia-aria/usePreviousFocus.js

@@ -75,3 +75,3 @@ "use strict";
             }
-            if (!el) {
+            if (!el && fallback) {
                 switch (typeof fallback) {
@@ -84,4 +84,2 @@ case "string":
                         break;
-                    case "undefined":
-                        return;
                     default:
@@ -88,0 +86,0 @@ el = fallback;

package.json

 {
   "name": "@react-md/utils",
-  "version": "2.0.0-alpha.9",
+  "version": "2.0.0-alpha.10",
   "description": "General utils for react-md.",
@@ -45,3 +45,3 @@ "scripts": {
   },
-  "gitHead": "5dc105d777dd95c5ab6b38509d9c002993bbf4b0"
+  "gitHead": "d42497f9e2e5c6e7f37774e140a5bf80c644081d"
 }

src/__tests__/omit.ts

@@ -1,2 +0,2 @@
-import { omit } from "../omit";
+import omit from "../omit";
 
@@ -3,0 +3,0 @@ describe("omit", () => {

src/css/bem.ts

 type Block = string;
 type Element = string;
-interface Modifier {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  [key: string]: any;
-}
+type Modifier = Record<string, unknown>;
 
@@ -13,5 +10,5 @@ function modify(base: string, modifier?: Modifier): string {
 
+  const hasOwn = Object.prototype.hasOwnProperty;
   return Object.keys(modifier).reduce((s, mod) => {
-    // eslint-disable-next-line no-prototype-builtins
-    if (modifier.hasOwnProperty(mod) && modifier[mod]) {
+    if (hasOwn.call(modifier, mod) && modifier[mod]) {
       s = `${s} ${base}--${mod}`;
@@ -18,0 +15,0 @@ }

src/events/touches.ts

@@ -37,2 +37,3 @@ import { isSupported } from "./passiveEvents";
 ): void {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
   // @ts-ignore
@@ -39,0 +40,0 @@ el[`${add ? "add" : "remove"}EventListener`](

src/events/useScrollListener.ts

@@ -42,3 +42,3 @@ import { useEffect } from "react";
   element,
-  options = isSupported ? { passive: true, capture: true } : true,
+  options = isSupported ? { passive: true } : false,
 }: Options<E>): void {
@@ -45,0 +45,0 @@ const callback = useRefCache(onScroll);

src/index.ts

 export * from "./css";
 export * from "./events";
+export * from "./interaction";
 export * from "./layout";
+export * from "./search";
 export * from "./sizing";
@@ -8,6 +10,8 @@ export * from "./positioning";
 
-export * from "./omit";
+export { default as omit } from "./omit";
+export { default as scrollIntoView } from "./scrollIntoView";
 
 export { default as unitToNumber } from "./unitToNumber";
 export { default as applyRef } from "./applyRef";
+export { default as throttle } from "./throttle";
 
@@ -20,3 +24,7 @@ export { default as useToggle } from "./useToggle";
 export { default as usePrevious } from "./usePrevious";
+export {
+  default as useCloseOnOutsideClick,
+  OnOutsideClick,
+} from "./useCloseOnOutsideClick";
 
 export * from "./types";

src/omit.ts

@@ -1,2 +0,2 @@
-export type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
+type R = Record<string, unknown>;
 
@@ -12,3 +12,3 @@ /**
  */
-export function omit<T extends object, K extends keyof T>(
+export default function omit<T extends object, K extends keyof T>(
   object: T,
@@ -23,4 +23,3 @@ omitKeys: K[] | string[]
     if (!(omitKeys as string[]).includes(key)) {
-      // @ts-ignore
-      updated[key] = object[key];
+      (updated as R)[key] = (object as R)[key];
     }
@@ -27,0 +26,0 @@

src/positioning/findSizingContainer.ts

@@ -10,7 +10,7 @@ /**
  *
- * @param el - The element to find a sizing containet for.
+ * @param el The element to find a sizing container for.
  * @return the sizing container relative to the provided element, or `null` if none
- *  could be found.
+ * could be found.
  * @throws This error will be thrown if using the `data-query-selector` and the query
- *  selector does not return an element on the page.
+ * selector does not return an element on the page.
  */
@@ -17,0 +17,0 @@ export default function findSizingContainer(

src/positioning/getElementRect.ts

@@ -1,7 +0,2 @@
-export interface Coords {
-  top?: number;
-  right?: number;
-  bottom?: number;
-  left?: number;
-}
+import { Coords } from "./types";
 
@@ -21,2 +16,4 @@ function applyCoords(coord: number | undefined): string {
  * try to fit within the viewport.
+ * @return either a DOMRect or ClientRect for the element
+ * @private
  */
@@ -23,0 +20,0 @@ export default function getElementRect(

src/positioning/getFixedPosition.ts

@@ -0,481 +1,39 @@
+import createHorizontalPosition from "./createHorizontalPosition";
+import createVerticalPosition from "./createVerticalPosition";
 import findSizingContainer from "./findSizingContainer";
-import getElementRect, { Coords } from "./getElementRect";
+import getElementRect from "./getElementRect";
+import getTransformOrigin from "./getTransformOrigin";
 import getViewportSize from "./getViewportSize";
+import { FixedPosition, FixedPositionOptions } from "./types";
 
 /**
- * Above:
- * - the container top is in-line with the bottom of the element.
- * Below:
- * - the container bottom is in-line with the top of the element
- * Center:
- * - the container center is in-line with the top of the element
- * Top:
- * - the container top is in-line with the top of the element
- * Bottom:
- * - the container bottom is in-line with the bottom of the element
- */
-export type VerticalPosition = "above" | "below" | "center" | "top" | "bottom";
-
-/**
- * Left:
- * - the container left is in-line with the right of the element
- * Right:
- * - the container right is in-line with the left of the element
- * Center:
- * - the container's horizontal center point will be aligned with the
- *   element's horizontal center point
- * Inner Left:
- * - the container's left is in-line with the left of the element
- * Inner Right:
- * - the container's right is in-line with the right of the element
- */
-export type HorizontalPosition =
-  | "left"
-  | "right"
-  | "center"
-  | "inner-left"
-  | "inner-right";
-
-/**
- * An object containing the x and y positions to anchor a fixed element to
- * another container element.
- */
-export interface PositionAnchor {
-  x: HorizontalPosition;
-  y: VerticalPosition;
-}
-
-/**
- * A "simple" version of all the positioning options. These are generally used
- * across all of react-md as it'll use the "center" version of the opposite type
- * when creating a fixed position.
- */
-export type SimplePosition = "above" | "below" | "left" | "right";
-
-export interface FixedPositionOptions {
-  /**
-   * The container element that the `element` should be fixed to.
-   */
-  container: HTMLElement | null;
-
-  /**
-   * The element that is fixed to a `container` element.
-   */
-  element: HTMLElement | null;
-
-  /**
-   * The configuration to anchor the fixed element to the container element.
-   */
-  anchor?: Partial<PositionAnchor>;
-
-  /**
-   * The viewwidth margin to apply so that the element doesn't need to be directly
-   * on the screen edge.
-   */
-  vwMargin?: number;
-
-  /**
-   * The viewwidth margin to apply so that the element doesn't need to be directly
-   * on the screen edge.
-   */
-  vhMargin?: number;
-
-  /**
-   * The container width margin to apply so that the element doesn't need to be directly
-   * on the container's edge.
-   */
-  xMargin?: number;
-
-  /**
-   * The container height margin to apply so that the element doesn't need to be directly
-   * on the container's edge
-   */
-  yMargin?: number;
-
-  /**
-   * Boolean if the auto-swapping behavior should be disabled. It's normally recommended
-   * to not disable this since it'll allow elements to appear off screen.
-   */
-  disableSwapping?: boolean;
-
-  /**
-   * Boolean if the style object should include the `transformOrigin` value based on the x and y
-   * positions.
-   */
-  transformOrigin?: boolean;
-}
-
-function getTransformOrigin(anchor: PositionAnchor): string {
-  let x = "0";
-  switch (anchor.x) {
-    case "right":
-    case "inner-left":
-      x = "0";
-      break;
-    case "center":
-      x = "50%";
-      break;
-    case "left":
-    case "inner-right":
-      x = "100%";
-      break;
-    default:
-      x = "0";
-  }
-
-  let y = "0";
-  switch (anchor.y) {
-    case "above":
-    case "bottom":
-      y = "100%";
-      break;
-    case "center":
-      y = "50%";
-      break;
-    case "below":
-    case "top":
-      y = "0";
-      break;
-    default:
-      y = "0";
-  }
-
-  return `${x} ${y}`;
-}
-
-export interface FixedPositionResult {
-  actualX: HorizontalPosition;
-  actualY: VerticalPosition;
-  style?: Coords & {
-    position: string;
-    transformOrigin?: string;
-  };
-}
-
-function createStyleWithoutElement(
-  containerRect: ClientRect | DOMRect,
-  anchor: PositionAnchor,
-  transformOrigin: boolean
-): FixedPositionResult {
-  const { x, y } = anchor;
-  const {
-    height,
-    width,
-    left: containerLeft,
-    top: containerTop,
-  } = containerRect;
-
-  let left = containerLeft;
-  let top = containerTop;
-  if (x === "right" || x === "inner-right") {
-    left += width;
-  } else if (x === "center") {
-    left += width / 2;
-  }
-
-  if (y === "below" || y === "bottom") {
-    top += height;
-  } else if (y === "center") {
-    top += height / 2;
-  }
-
-  return {
-    actualX: x,
-    actualY: y,
-    style: {
-      left,
-      top,
-      position: "fixed",
-      transformOrigin: transformOrigin ? getTransformOrigin(anchor) : undefined,
-    },
-  };
-}
-
-interface AdjustPositionOptions {
-  containerLeft: number;
-  containerTop: number;
-  containerWidth: number;
-  containerHeight: number;
-  elementWidth: number;
-  elementHeight: number;
-  xMargin: number;
-  yMargin: number;
-  vw: number;
-  vh: number;
-  vwMargin: number;
-  vhMargin: number;
-  disableSwapping: boolean;
-}
-
-interface HorizontalUpdate {
-  left: number;
-  actualX: HorizontalPosition;
-}
-
-interface VerticalUpdate {
-  top: number;
-  actualY: VerticalPosition;
-}
-
-/**
- * Tries to fix the "left" horizontal positoining by ensuring it can be within the viewport
- * and tries swapping sides if possible. This is basically the inverse of `fixRightPosition`
- */
-function fixLeftPosition({
-  containerLeft,
-  containerWidth,
-  elementWidth,
-  xMargin,
-  vw,
-  vwMargin,
-  disableSwapping,
-}: AdjustPositionOptions): HorizontalUpdate {
-  let left = containerLeft - elementWidth - xMargin;
-  let actualX: HorizontalPosition = "left";
-  if (left < vwMargin) {
-    const nextLeft = containerLeft + containerWidth + xMargin;
-    if (disableSwapping || nextLeft + elementWidth > vw - vwMargin) {
-      left = vwMargin;
-    } else {
-      left = nextLeft;
-      actualX = "right";
-    }
-  }
-
-  return { left, actualX };
-}
-
-function fixRightPosition({
-  containerLeft,
-  containerWidth,
-  elementWidth,
-  xMargin,
-  vw,
-  vwMargin,
-  disableSwapping,
-}: AdjustPositionOptions): HorizontalUpdate {
-  let actualX: HorizontalPosition = "right";
-  let left = containerLeft + containerWidth + xMargin;
-  const screenRight = vw - vwMargin;
-  if (left + elementWidth > screenRight) {
-    const nextLeft = containerLeft - containerWidth - xMargin;
-    if (disableSwapping || nextLeft < vwMargin) {
-      left = screenRight - elementWidth;
-    } else {
-      actualX = "left";
-      left = nextLeft;
-    }
-  }
-
-  return { left, actualX };
-}
-
-function fixInnerLeftPosition({
-  containerLeft,
-  containerWidth,
-  elementWidth,
-  vw,
-  xMargin,
-  vwMargin,
-  disableSwapping,
-}: AdjustPositionOptions): HorizontalUpdate {
-  let left = containerLeft + xMargin;
-  let actualX: HorizontalPosition = "inner-left";
-  const screenRight = vw - vwMargin;
-  if (left < vwMargin) {
-    const nextLeft = containerLeft + containerWidth - elementWidth - xMargin;
-    if (disableSwapping || nextLeft > screenRight) {
-      left = vwMargin;
-    } else {
-      left = nextLeft;
-      actualX = "right";
-    }
-  }
-
-  return { actualX, left };
-}
-
-function fixInnerRightPosition({
-  containerLeft,
-  containerWidth,
-  elementWidth,
-  vw,
-  xMargin,
-  vwMargin,
-  disableSwapping,
-}: AdjustPositionOptions): HorizontalUpdate {
-  let left = containerLeft + containerWidth - elementWidth - xMargin;
-  let actualX: HorizontalPosition = "inner-right";
-  if (left < vwMargin) {
-    if (disableSwapping || containerLeft + elementWidth > vw - vwMargin) {
-      left = vwMargin;
-    } else {
-      left = containerLeft + xMargin;
-      actualX = "left";
-    }
-  }
-
-  return { actualX, left };
-}
-
-function fixHorizontalCenterPosition({
-  containerLeft,
-  containerWidth,
-  elementWidth,
-  vw,
-  vwMargin,
-}: AdjustPositionOptions): number {
-  let left = containerLeft + containerWidth / 2 - elementWidth / 2;
-  const screenRight = vw - vwMargin;
-  if (left + elementWidth > screenRight) {
-    left = screenRight - elementWidth;
-  }
-
-  return left;
-}
-
-function fixAbovePosition({
-  containerTop,
-  containerHeight,
-  elementHeight,
-  yMargin,
-  vh,
-  vhMargin,
-  disableSwapping,
-}: AdjustPositionOptions): VerticalUpdate {
-  let top = containerTop - elementHeight - yMargin;
-  let actualY: VerticalPosition = "above";
-  if (top < vhMargin) {
-    const nextTop = containerTop + containerHeight + yMargin;
-    if (disableSwapping || nextTop + elementHeight > vh - vhMargin) {
-      top = vhMargin;
-    } else {
-      top = nextTop;
-      actualY = "below";
-    }
-  }
-
-  return { actualY, top };
-}
-
-function fixBelowPosition({
-  containerTop,
-  containerHeight,
-  elementHeight,
-  yMargin,
-  vh,
-  vhMargin,
-  disableSwapping,
-}: AdjustPositionOptions): VerticalUpdate {
-  let top = containerTop + containerHeight + yMargin;
-  let actualY: VerticalPosition = "below";
-  const maxTop = vh - vhMargin;
-  if (top + elementHeight > maxTop) {
-    const nextTop = containerTop - elementHeight - yMargin;
-    if (disableSwapping || nextTop < vhMargin) {
-      top = vhMargin;
-    } else {
-      top = nextTop;
-      actualY = "above";
-    }
-  }
-
-  return { actualY, top };
-}
-
-function fixTopPosition({
-  containerTop,
-  containerHeight,
-  elementHeight,
-  vh,
-  yMargin,
-  vhMargin,
-  disableSwapping,
-}: AdjustPositionOptions): VerticalUpdate {
-  let actualY: VerticalPosition = "top";
-  let top = containerTop + yMargin;
-  const screenBottom = vh - vhMargin;
-  if (top + elementHeight > screenBottom) {
-    const nextTop = containerTop + containerHeight - elementHeight - yMargin;
-    if (disableSwapping || nextTop < vhMargin) {
-      top = screenBottom - elementHeight;
-    } else {
-      actualY = "bottom";
-      top = nextTop;
-    }
-  }
-
-  return { actualY, top };
-}
-
-function fixBottomPosition({
-  containerTop,
-  containerHeight,
-  elementHeight,
-  vh,
-  yMargin,
-  vhMargin,
-  disableSwapping,
-}: AdjustPositionOptions): VerticalUpdate {
-  let actualY: VerticalPosition = "bottom";
-  let top = containerTop + containerHeight - elementHeight - yMargin;
-  const screenBottom = vh - vhMargin;
-  if (top + elementHeight > screenBottom) {
-    if (disableSwapping || containerTop < vhMargin) {
-      top = vhMargin;
-    } else {
-      actualY = "top";
-      top = containerTop + yMargin;
-    }
-  }
-
-  return { actualY, top };
-}
-
-function fixVerticalCenter({
-  containerTop,
-  containerHeight,
-  elementHeight,
-  vh,
-  vhMargin,
-}: AdjustPositionOptions): number {
-  const halvedHeight = elementHeight / 2;
-  let top = containerTop + containerHeight / 2 - halvedHeight;
-  const screenBottom = vh - vhMargin;
-  if (top + halvedHeight > screenBottom) {
-    top = screenBottom - halvedHeight;
-  } else if (top - halvedHeight < vhMargin) {
-    top = vhMargin;
-  }
-
-  return top;
-}
-
-/**
- * One of the most complicated functions in this project that will attempt to position
- * an element relative to another container element while still being visible within
- * the viewport. Below is the logical flow for attempting to fix the element to the container:
+ * One of the most complicated functions in this project that will attempt to
+ * position an element relative to another container element while still being
+ * visible within the viewport. Below is the logical flow for attempting to fix
+ * the element to the container:
  *
- * No Container:
- * If there is no container element, return an the provided x and y positions and no styles since
- * there's nothing we can use to calculate the position.
+ * No Container: If there is no container element, return the provided x and y
+ * positions and no styles since there's nothing we can use to calculate the
+ * position.
  *
- * No Element:
- * If the container was provided but the element to position does not exist, return an style object
- * containing the `left` and `top` values for the container and apply as many of the positioning
- * options as possible so that the styles are "as close as possible" before the fixed element
- * is added to the dom. This will also return the provided x and y positions since nothing
- * could be swapped around yet.
+ * No Element: If the container was provided but the element to position does
+ * not exist, return an style object containing the `left` and `top` values for
+ * the container and apply as many of the positioning options as possible so
+ * that the styles are "as close as possible" before the fixed element is added
+ * to the DOM. This will also return the provided x and y positions since
+ * nothing could be swapped around yet.
  *
- * Container and Element:
- * If both the container and fixed element were provided, apply all the positioning options
- * to the `left` and `top` values of the container based on the sizes of both elements.
+ * Container and Element: If both the container and fixed element were provided,
+ * apply all the positioning options to the `left` and `top` values of the
+ * container based on the sizes of both elements.
  *
- * Now that the `left` and `top` values were applied, check to see if the element is fully
- * visible within the viewport with the provided positioning options. If it is fully visible,
- * do nothing else. If it isn't... follow the next flow:
+ * Now that the `left` and `top` values were applied, check to see if the
+ * element is fully visible within the viewport with the provided positioning
+ * options. If it is fully visible, do nothing else. If it isn't... follow the
+ * next flow:
  *
- * First, check the horizontal sizes and make sure that the element is still within the viewport
- * with the provided viewwidth margin. If it isn't, first try to swap only to a `right` style
- * instead of left to see if that fixes it, otherwise keep both the `left` and `right` styles.
+ * First, check the horizontal sizes and make sure that the element is still
+ * within the viewport with the provided viewwidth margin. If it isn't, first
+ * try to swap only to a `right` style instead of left to see if that fixes it,
+ * otherwise keep both the `left` and `right` styles.
  */
@@ -490,5 +48,8 @@ export default function getFixedPosition({
   yMargin = 0,
+  width: widthType = "auto",
+  preventOverlap = false,
+  transformOrigin = false,
   disableSwapping = false,
-  transformOrigin = false,
-}: FixedPositionOptions): FixedPositionResult {
+  disableVHBounds = false,
+}: FixedPositionOptions): FixedPosition {
   container = findSizingContainer(container);
@@ -499,3 +60,18 @@ const anchor = {
   };
-  if (!container) {
+
+  if (process.env.NODE_ENV !== "production") {
+    if (widthType !== "auto" && anchor.x !== "center") {
+      throw new Error(
+        'Unable to use a calculated width when the horizontal anchor is not `"center"`.'
+      );
+    }
+
+    if (preventOverlap && anchor.y !== "above" && anchor.y !== "below") {
+      throw new Error(
+        'Unable to prevent overlap when the vertical anchor is not `"above"` or `"below"`'
+      );
+    }
+  }
+
+  if (!container || !element) {
     return {
@@ -508,92 +84,29 @@ actualX: anchor.x,
   const containerRect = container.getBoundingClientRect();
-  const initialResult = createStyleWithoutElement(
-    containerRect,
-    anchor,
-    transformOrigin
-  );
-  if (!element) {
-    return initialResult;
-  }
-
   const vh = getViewportSize("height");
   const vw = getViewportSize("width");
-  const maxHeight = vh - vhMargin * 2;
-  const maxWidth = vw - vwMargin * 2;
-  const { height: containerHeight, width: containerWidth } = containerRect;
 
-  let actualX = anchor.x;
-  let actualY = anchor.y;
+  const { height, width: elWidth } = getElementRect(element);
 
-  const { height, width } = getElementRect(element);
-
-  let left: number | undefined;
-  let top: number | undefined;
-  let right: number | undefined;
-  let bottom: number | undefined;
-
-  const adjustConfig = {
-    containerLeft: containerRect.left,
-    containerTop: containerRect.top,
-    containerWidth,
-    containerHeight,
-    elementWidth: width,
-    elementHeight: height,
+  const { left, right, width, minWidth, actualX } = createHorizontalPosition({
+    x: anchor.x,
+    vw,
+    vwMargin,
     xMargin,
-    yMargin,
-    vw,
+    width: widthType,
+    elWidth,
+    containerRect,
+    disableSwapping,
+  });
+  const { top, bottom, actualY } = createVerticalPosition({
+    y: anchor.y,
     vh,
-    vwMargin,
     vhMargin,
+    yMargin,
+    elHeight: height,
+    containerRect,
     disableSwapping,
-  };
-  if (width > maxWidth) {
-    left = vwMargin;
-    right = vwMargin;
-    actualX = "center";
-  } else {
-    switch (anchor.x) {
-      case "left":
-        ({ actualX, left } = fixLeftPosition(adjustConfig));
-        break;
-      case "right":
-        ({ actualX, left } = fixRightPosition(adjustConfig));
-        break;
-      case "inner-left":
-        ({ actualX, left } = fixInnerLeftPosition(adjustConfig));
-        break;
-      case "inner-right":
-        ({ actualX, left } = fixInnerRightPosition(adjustConfig));
-        break;
-      case "center":
-        left = fixHorizontalCenterPosition(adjustConfig);
-        break;
-      // no default
-    }
-  }
+    preventOverlap,
+    disableVHBounds,
+  });
 
-  if (height > maxHeight) {
-    top = vhMargin;
-    bottom = vhMargin;
-    actualY = "center";
-  } else {
-    switch (anchor.y) {
-      case "above":
-        ({ actualY, top } = fixAbovePosition(adjustConfig));
-        break;
-      case "below":
-        ({ actualY, top } = fixBelowPosition(adjustConfig));
-        break;
-      case "top":
-        ({ actualY, top } = fixTopPosition(adjustConfig));
-        break;
-      case "center":
-        top = fixVerticalCenter(adjustConfig);
-        break;
-      case "bottom":
-        ({ actualY, top } = fixBottomPosition(adjustConfig));
-        break;
-      // no default
-    }
-  }
-
   return {
@@ -607,3 +120,5 @@ actualX,
       bottom,
-      position: "fixed",
+      width,
+      minWidth,
+      position: disableVHBounds ? "absolute" : "fixed",
       transformOrigin: transformOrigin
@@ -610,0 +125,0 @@ ? getTransformOrigin({ x: actualX, y: actualY })

src/positioning/index.ts

@@ -5,2 +5,2 @@ export { default as findSizingContainer } from "./findSizingContainer";
 export { default as getFixedPosition } from "./getFixedPosition";
-export * from "./getFixedPosition";
+export * from "./types";

src/scssVariables.ts

 /** this is an auto-generated file from @react-md/dev-utils */
 export default {
   "rmd-utils-ios-scroll-momentum": true,
+  "rmd-utils-auto-dense": true,
   "rmd-utils-swappable-positions": ["top", "right", "bottom", "left"],
@@ -5,0 +6,0 @@ "rmd-utils-swappable-position-prefixes": ["border", "margin", "padding"],

src/sizing/index.ts

@@ -1,2 +0,3 @@
-export * from "./AppSize";
+export { default as AppSizeListener } from "./AppSizeListener";
+export * from "./AppSizeListener";
 
@@ -16,3 +17,4 @@ export { default as ResizeObserver } from "./ResizeObserver";
 export { default as useWidthMediaQuery } from "./useWidthMediaQuery";
-export { default as useAppSize, AppSize, DEFAULT_APP_SIZE } from "./useAppSize";
+export { default as useAppSize } from "./useAppSize";
+export { AppSize, AppSizeOptions, DEFAULT_APP_SIZE } from "./useAppSizeMedia";
 export {
@@ -19,0 +21,0 @@ default as useResizeObserver,

src/sizing/useAppSize.ts

@@ -1,144 +0,28 @@
-import { useMemo } from "react";
+import { createContext, useContext } from "react";
+import { AppSize, DEFAULT_APP_SIZE } from "./useAppSizeMedia";
 
-import {
-  DEFAULT_DESKTOP_LARGE_MIN_WIDTH,
-  DEFAULT_DESKTOP_MIN_WIDTH,
-  DEFAULT_PHONE_MAX_WIDTH,
-  DEFAULT_TABLET_MAX_WIDTH,
-  DEFAULT_TABLET_MIN_WIDTH,
-  QuerySize,
-} from "./constants";
-import useWidthMediaQuery from "./useWidthMediaQuery";
-
 /**
- * The current size for your application. This should work both server side
- * and client side, but you will have much better results client side.
+ * @private
  */
-export interface AppSize {
-  /**
-   * Boolean if currently matching a phone by comparing the max width of the
-   * device.
-   */
-  isPhone: boolean;
+export const AppSizeContext = createContext<
+  AppSize & { __initialized: boolean }
+>({
+  ...DEFAULT_APP_SIZE,
+  __initialized: false,
+});
 
-  /**
-   * Boolean if currently matching a tablet by comparing the max width of the
-   * device.
-   */
-  isTablet: boolean;
-
-  /**
-   * Boolean if currently matching a desktop screen by comparing the max width
-   * of the device.
-   */
-  isDesktop: boolean;
-
-  /**
-   * Boolean if currently matching a large desktop screen by comparing the max
-   * width of the device.
-   */
-  isLargeDesktop: boolean;
-
-  /**
-   * Boolean if the app is considered to be in landscape mode. This will just
-   * verify that the window width is greater than the window height.
-   *
-   * NOTE: This might not be super accurate on Android devices since the soft
-   * keyboard will change the dimensions of the viewport when it appears. It
-   * is recommended to use the `useOrientation` hook as well if you'd like to
-   * get the current orientation type.
-   */
-  isLandscape: boolean;
-}
-
-export const DEFAULT_APP_SIZE: AppSize = {
-  isPhone: false,
-  isTablet: false,
-  isDesktop: true,
-  isLargeDesktop: false,
-  isLandscape: true,
-};
-
-export interface AppSizeOptions {
-  /**
-   * The max width to use for phones. This one is a max width unline the others
-   * since everything from 0 to this value will be considered a phone.
-   */
-  phoneMaxWidth?: QuerySize;
-
-  /**
-   * The min width for a tablet device.
-   */
-  tabletMinWidth?: QuerySize;
-
-  /**
-   * The max width for a tablet device. This should normally be `1px` less than the
-   * `desktopMinWidth`, but it can be any value if needed. The tablet has a range of
-   * min to max so that you can have a bit more control.
-   */
-  tabletMaxWidth?: QuerySize;
-
-  /**
-   * The min width for a desktop screen.
-   */
-  desktopMinWidth?: QuerySize;
-
-  /**
-   * The min width for a large desktop screen.
-   */
-  desktopLargeMinWidth?: QuerySize;
-
-  /**
-   * An optional default size to use for your app. This is really only helpful
-   * when trying to do server side rendering or initial page render since the
-   * default behavior is to check and update the size once mounted in the DOM.
-   */
-  defaultSize?: AppSize;
-}
-
 /**
- * This hook is used to determine the current application size based on the
- * provided query sizes. When you want to render your app server side, you will
- * need to provide a custom `defaultSize` that implements your logic to determine
- * the type of device requesting a page. Once the app has been rendered in the DOM,
- * this hook will attach event listeners to automatically update the app size when
- * the page is resized.
+ * Gets the current app size.
+ *
+ * @return the current AppSize
  */
-export default function useAppSize({
-  phoneMaxWidth = DEFAULT_PHONE_MAX_WIDTH,
-  tabletMinWidth = DEFAULT_TABLET_MIN_WIDTH,
-  tabletMaxWidth = DEFAULT_TABLET_MAX_WIDTH,
-  desktopMinWidth = DEFAULT_DESKTOP_MIN_WIDTH,
-  desktopLargeMinWidth = DEFAULT_DESKTOP_LARGE_MIN_WIDTH,
-  defaultSize = DEFAULT_APP_SIZE,
-}: AppSizeOptions = {}): AppSize {
-  /* eslint-disable react-hooks/rules-of-hooks */
-  // disabled since this is conditionally applied for SSR
-  if (typeof window === "undefined") {
-    return defaultSize;
+export default function useAppSize(): AppSize {
+  const { __initialized, ...context } = useContext(AppSizeContext);
+  if (!__initialized) {
+    throw new Error(
+      "Attempted to use the current `AppSizeContext` without mounting the `AppSizeListener` component beforehand."
+    );
   }
 
-  const matchesDesktop = useWidthMediaQuery({ min: desktopMinWidth });
-  const matchesLargeDesktop = useWidthMediaQuery({ min: desktopLargeMinWidth });
-  const matchesTablet = useWidthMediaQuery({
-    min: tabletMinWidth,
-    max: tabletMaxWidth,
-  });
-  const matchesPhone = useWidthMediaQuery({ max: phoneMaxWidth });
-  const isDesktop = matchesDesktop;
-  const isTablet = !matchesDesktop && matchesTablet;
-  const isPhone = !isTablet && !isDesktop && matchesPhone;
-  const isLandscape = window.innerWidth > window.innerHeight;
-  const isLargeDesktop = matchesLargeDesktop;
-
-  return useMemo(
-    () => ({
-      isPhone,
-      isTablet,
-      isDesktop,
-      isLargeDesktop,
-      isLandscape,
-    }),
-    [isPhone, isTablet, isDesktop, isLargeDesktop, isLandscape]
-  );
+  return context;
 }

src/types.ts

@@ -27,3 +27,4 @@ import { Ref } from "react";
 }
+
 export type LabelRequiredForA11y<T extends LabelA11y> = T &
   RequireAtLeastOne<T, "aria-label" | "aria-labelledby">;

src/useTimeout.ts

@@ -37,3 +37,3 @@ import { useCallback, useEffect, useRef } from "react";
   /* eslint-disable react-hooks/exhaustive-deps */
-  // these are all guarenteed to not change since using refs or non-updating callbacks
+  // these are all guaranteed to not change since using refs or non-updating callbacks
   const restart = useCallback(() => {
@@ -40,0 +40,0 @@ clearTimeout();

src/wia-aria/index.ts

 export { default as FocusContainer } from "./FocusContainer";
 export * from "./FocusContainer";
 
+export * from "./movement";
+
 export { default as useScrollLock } from "./useScrollLock";
 export { default as useFocusOnMount } from "./useFocusOnMount";
 export { default as usePreviousFocus } from "./usePreviousFocus";
+export { default as useCloseOnEscape } from "./useCloseOnEscape";
 
 export { default as getFocusableElements } from "./getFocusableElements";
 export { default as focusElementWithin } from "./focusElementWithin";
-export { default as useKeyboardMovement } from "./useKeyboardMovement";
-export { default as useKeyboardSearch } from "./useKeyboardSearch";
-export { default as useCloseOnEscape } from "./useCloseOnEscape";
+export { default as extractTextContent } from "./extractTextContent";

src/wia-aria/usePreviousFocus.ts

@@ -94,3 +94,3 @@ import { useEffect } from "react";
 
-      if (!el) {
+      if (!el && fallback) {
         switch (typeof fallback) {
@@ -103,4 +103,2 @@ case "string":
             break;
-          case "undefined":
-            return;
           default:
@@ -107,0 +105,0 @@ el = fallback;

types/css/bem.d.ts

 declare type Block = string;
 declare type Element = string;
-interface Modifier {
-    [key: string]: any;
-}
+declare type Modifier = Record<string, unknown>;
 declare type BEMResult = (elementOrModifier?: Element | Modifier, modifier?: Modifier) => string;
@@ -7,0 +5,0 @@ /**

types/events/ScrollListener.d.ts

 import { FC } from "react";
-import { Omit } from "../omit";
 import { Options } from "./useScrollListener";
@@ -4,0 +3,0 @@ export declare type ScrollListenerProps = Omit<Options<HTMLElement>, "enabled">;

types/index.d.ts

 export * from "./css";
 export * from "./events";
+export * from "./interaction";
 export * from "./layout";
+export * from "./search";
 export * from "./sizing";
 export * from "./positioning";
 export * from "./wia-aria";
-export * from "./omit";
+export { default as omit } from "./omit";
+export { default as scrollIntoView } from "./scrollIntoView";
 export { default as unitToNumber } from "./unitToNumber";
 export { default as applyRef } from "./applyRef";
+export { default as throttle } from "./throttle";
 export { default as useToggle } from "./useToggle";
@@ -16,2 +20,3 @@ export { default as useInterval } from "./useInterval";
 export { default as usePrevious } from "./usePrevious";
+export { default as useCloseOnOutsideClick, OnOutsideClick, } from "./useCloseOnOutsideClick";
 export * from "./types";

types/layout/Grid.d.ts

@@ -18,2 +18,14 @@ import React, { HTMLAttributes } from "react";
     /**
+     * Boolean if the `children` should be updated to be wrapped in the `GridCell` component and
+     * clone the `className` into each child automatically. This is really just a convenience prop
+     * so you don't always need to import both the `Grid` and `GridCell` components to create a grid.
+     */
+    clone?: boolean;
+    /**
+     * Boolean if the `children` should be updated to be wrapped in the `GridCell` component.
+     * This is really just a convenience prop so you don't always need to import both the `Grid`
+     * and `GridCell` components to create a grid/
+     */
+    wrapOnly?: boolean;
+    /**
      * This prop allows you to generate your grid with a dynamic amount of columns instead of a static
@@ -20,0 +32,0 @@ * size. This will update the grid to ignore all the `columns` props and update the grid to show

types/layout/GridCell.d.ts

@@ -32,2 +32,7 @@ import React, { HTMLAttributes } from "react";
     /**
+     * Boolean if the className should be cloned into the child instead of wrapping
+     * in another div. This will only work if the `children` is a single ReactElement.
+     */
+    clone?: boolean;
+    /**
      * The number of columns that the cell should span. If this value is provided, it will be used
@@ -34,0 +39,0 @@ * instead of the `colEnd` property.

types/layout/GridList.d.ts

@@ -83,4 +83,15 @@ import React, { HTMLAttributes, ReactNode } from "react";
     children: ReactNode | RenderGridListChildren;
+    /**
+     * Boolean if the current cell sizing should automatically be cloned into each child. This will
+     * only work if the `children` is renderable element or a list of renderable elements
+     * that accept the `style` and `className` props.
+     */
+    clone?: boolean;
+    /**
+     * Boolean if each child within the `GridList` should be wrapped with the `GridListCell` component.
+     * This will only work if the `children` is not a `function`.
+     */
+    wrapOnly?: boolean;
 }
 declare const _default: React.ForwardRefExoticComponent<GridListProps & React.RefAttributes<HTMLDivElement>>;
 export default _default;

types/layout/GridListCell.d.ts

 import React, { HTMLAttributes } from "react";
 export interface GridListCellProps extends HTMLAttributes<HTMLDivElement> {
     /**
+     * Boolean if the className should be cloned into the child instead of wrapping
+     * in another div. This will only work if the `children` is a single ReactElement.
+     */
+    clone?: boolean;
+    /**
      * Boolean if the cell should be square by also setting the current cell size
@@ -5,0 +10,0 @@ * to the `height`.

types/omit.d.ts

@@ -1,2 +0,1 @@
-export declare type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
 /**
@@ -11,2 +10,2 @@ * I really don't know how to typedef this. It just creates
  */
-export declare function omit<T extends object, K extends keyof T>(object: T, omitKeys: K[] | string[]): Omit<T, K>;
+export default function omit<T extends object, K extends keyof T>(object: T, omitKeys: K[] | string[]): Omit<T, K>;

types/positioning/findSizingContainer.d.ts

@@ -10,8 +10,8 @@ /**
  *
- * @param el - The element to find a sizing containet for.
+ * @param el The element to find a sizing container for.
  * @return the sizing container relative to the provided element, or `null` if none
- *  could be found.
+ * could be found.
  * @throws This error will be thrown if using the `data-query-selector` and the query
- *  selector does not return an element on the page.
+ * selector does not return an element on the page.
  */
 export default function findSizingContainer(el: HTMLElement | null): HTMLElement | null;

types/positioning/getElementRect.d.ts

@@ -1,7 +0,2 @@
-export interface Coords {
-    top?: number;
-    right?: number;
-    bottom?: number;
-    left?: number;
-}
+import { Coords } from "./types";
 /**
@@ -16,3 +11,5 @@ * This util is used to get the "true" `element.getBoundingClientRect()` that
  * try to fit within the viewport.
+ * @return either a DOMRect or ClientRect for the element
+ * @private
  */
 export default function getElementRect(element: HTMLElement, coords?: Coords): DOMRect | ClientRect;

types/positioning/getFixedPosition.d.ts

@@ -1,123 +0,33 @@
-import { Coords } from "./getElementRect";
+import { FixedPosition, FixedPositionOptions } from "./types";
 /**
- * Above:
- * - the container top is in-line with the bottom of the element.
- * Below:
- * - the container bottom is in-line with the top of the element
- * Center:
- * - the container center is in-line with the top of the element
- * Top:
- * - the container top is in-line with the top of the element
- * Bottom:
- * - the container bottom is in-line with the bottom of the element
- */
-export declare type VerticalPosition = "above" | "below" | "center" | "top" | "bottom";
-/**
- * Left:
- * - the container left is in-line with the right of the element
- * Right:
- * - the container right is in-line with the left of the element
- * Center:
- * - the container's horizontal center point will be aligned with the
- *   element's horizontal center point
- * Inner Left:
- * - the container's left is in-line with the left of the element
- * Inner Right:
- * - the container's right is in-line with the right of the element
- */
-export declare type HorizontalPosition = "left" | "right" | "center" | "inner-left" | "inner-right";
-/**
- * An object containing the x and y positions to anchor a fixed element to
- * another container element.
- */
-export interface PositionAnchor {
-    x: HorizontalPosition;
-    y: VerticalPosition;
-}
-/**
- * A "simple" version of all the positioning options. These are generally used
- * across all of react-md as it'll use the "center" version of the opposite type
- * when creating a fixed position.
- */
-export declare type SimplePosition = "above" | "below" | "left" | "right";
-export interface FixedPositionOptions {
-    /**
-     * The container element that the `element` should be fixed to.
-     */
-    container: HTMLElement | null;
-    /**
-     * The element that is fixed to a `container` element.
-     */
-    element: HTMLElement | null;
-    /**
-     * The configuration to anchor the fixed element to the container element.
-     */
-    anchor?: Partial<PositionAnchor>;
-    /**
-     * The viewwidth margin to apply so that the element doesn't need to be directly
-     * on the screen edge.
-     */
-    vwMargin?: number;
-    /**
-     * The viewwidth margin to apply so that the element doesn't need to be directly
-     * on the screen edge.
-     */
-    vhMargin?: number;
-    /**
-     * The container width margin to apply so that the element doesn't need to be directly
-     * on the container's edge.
-     */
-    xMargin?: number;
-    /**
-     * The container height margin to apply so that the element doesn't need to be directly
-     * on the container's edge
-     */
-    yMargin?: number;
-    /**
-     * Boolean if the auto-swapping behavior should be disabled. It's normally recommended
-     * to not disable this since it'll allow elements to appear off screen.
-     */
-    disableSwapping?: boolean;
-    /**
-     * Boolean if the style object should include the `transformOrigin` value based on the x and y
-     * positions.
-     */
-    transformOrigin?: boolean;
-}
-export interface FixedPositionResult {
-    actualX: HorizontalPosition;
-    actualY: VerticalPosition;
-    style?: Coords & {
-        position: string;
-        transformOrigin?: string;
-    };
-}
-/**
- * One of the most complicated functions in this project that will attempt to position
- * an element relative to another container element while still being visible within
- * the viewport. Below is the logical flow for attempting to fix the element to the container:
+ * One of the most complicated functions in this project that will attempt to
+ * position an element relative to another container element while still being
+ * visible within the viewport. Below is the logical flow for attempting to fix
+ * the element to the container:
  *
- * No Container:
- * If there is no container element, return an the provided x and y positions and no styles since
- * there's nothing we can use to calculate the position.
+ * No Container: If there is no container element, return the provided x and y
+ * positions and no styles since there's nothing we can use to calculate the
+ * position.
  *
- * No Element:
- * If the container was provided but the element to position does not exist, return an style object
- * containing the `left` and `top` values for the container and apply as many of the positioning
- * options as possible so that the styles are "as close as possible" before the fixed element
- * is added to the dom. This will also return the provided x and y positions since nothing
- * could be swapped around yet.
+ * No Element: If the container was provided but the element to position does
+ * not exist, return an style object containing the `left` and `top` values for
+ * the container and apply as many of the positioning options as possible so
+ * that the styles are "as close as possible" before the fixed element is added
+ * to the DOM. This will also return the provided x and y positions since
+ * nothing could be swapped around yet.
  *
- * Container and Element:
- * If both the container and fixed element were provided, apply all the positioning options
- * to the `left` and `top` values of the container based on the sizes of both elements.
+ * Container and Element: If both the container and fixed element were provided,
+ * apply all the positioning options to the `left` and `top` values of the
+ * container based on the sizes of both elements.
  *
- * Now that the `left` and `top` values were applied, check to see if the element is fully
- * visible within the viewport with the provided positioning options. If it is fully visible,
- * do nothing else. If it isn't... follow the next flow:
+ * Now that the `left` and `top` values were applied, check to see if the
+ * element is fully visible within the viewport with the provided positioning
+ * options. If it is fully visible, do nothing else. If it isn't... follow the
+ * next flow:
  *
- * First, check the horizontal sizes and make sure that the element is still within the viewport
- * with the provided viewwidth margin. If it isn't, first try to swap only to a `right` style
- * instead of left to see if that fixes it, otherwise keep both the `left` and `right` styles.
+ * First, check the horizontal sizes and make sure that the element is still
+ * within the viewport with the provided viewwidth margin. If it isn't, first
+ * try to swap only to a `right` style instead of left to see if that fixes it,
+ * otherwise keep both the `left` and `right` styles.
  */
-export default function getFixedPosition({ container, element, anchor: propAnchor, vwMargin, vhMargin, xMargin, yMargin, disableSwapping, transformOrigin, }: FixedPositionOptions): FixedPositionResult;
+export default function getFixedPosition({ container, element, anchor: propAnchor, vwMargin, vhMargin, xMargin, yMargin, width: widthType, preventOverlap, transformOrigin, disableSwapping, disableVHBounds, }: FixedPositionOptions): FixedPosition;

types/positioning/index.d.ts

@@ -5,2 +5,2 @@ export { default as findSizingContainer } from "./findSizingContainer";
 export { default as getFixedPosition } from "./getFixedPosition";
-export * from "./getFixedPosition";
+export * from "./types";

types/sizing/index.d.ts

@@ -1,2 +0,3 @@
-export * from "./AppSize";
+export { default as AppSizeListener } from "./AppSizeListener";
+export * from "./AppSizeListener";
 export { default as ResizeObserver } from "./ResizeObserver";
@@ -11,4 +12,5 @@ export * from "./ResizeObserver";
 export { default as useWidthMediaQuery } from "./useWidthMediaQuery";
-export { default as useAppSize, AppSize, DEFAULT_APP_SIZE } from "./useAppSize";
+export { default as useAppSize } from "./useAppSize";
+export { AppSize, AppSizeOptions, DEFAULT_APP_SIZE } from "./useAppSizeMedia";
 export { default as useResizeObserver, ResizeObserverChangeEventHandler, } from "./useResizeObserver";
 export { default as useResizeListener } from "./useResizeListener";

types/sizing/ResizeListener.d.ts

 import { FC } from "react";
-import { Omit } from "../omit";
 import { ResizeListenerOptions } from "./useResizeListener";
@@ -4,0 +3,0 @@ export declare type ResizeListenerProps = Omit<ResizeListenerOptions, "enabled">;

types/sizing/useAppSize.d.ts

@@ -1,78 +0,14 @@
-import { QuerySize } from "./constants";
+/// <reference types="react" />
+import { AppSize } from "./useAppSizeMedia";
 /**
- * The current size for your application. This should work both server side
- * and client side, but you will have much better results client side.
+ * @private
  */
-export interface AppSize {
-    /**
-     * Boolean if currently matching a phone by comparing the max width of the
-     * device.
-     */
-    isPhone: boolean;
-    /**
-     * Boolean if currently matching a tablet by comparing the max width of the
-     * device.
-     */
-    isTablet: boolean;
-    /**
-     * Boolean if currently matching a desktop screen by comparing the max width
-     * of the device.
-     */
-    isDesktop: boolean;
-    /**
-     * Boolean if currently matching a large desktop screen by comparing the max
-     * width of the device.
-     */
-    isLargeDesktop: boolean;
-    /**
-     * Boolean if the app is considered to be in landscape mode. This will just
-     * verify that the window width is greater than the window height.
-     *
-     * NOTE: This might not be super accurate on Android devices since the soft
-     * keyboard will change the dimensions of the viewport when it appears. It
-     * is recommended to use the `useOrientation` hook as well if you'd like to
-     * get the current orientation type.
-     */
-    isLandscape: boolean;
-}
-export declare const DEFAULT_APP_SIZE: AppSize;
-export interface AppSizeOptions {
-    /**
-     * The max width to use for phones. This one is a max width unline the others
-     * since everything from 0 to this value will be considered a phone.
-     */
-    phoneMaxWidth?: QuerySize;
-    /**
-     * The min width for a tablet device.
-     */
-    tabletMinWidth?: QuerySize;
-    /**
-     * The max width for a tablet device. This should normally be `1px` less than the
-     * `desktopMinWidth`, but it can be any value if needed. The tablet has a range of
-     * min to max so that you can have a bit more control.
-     */
-    tabletMaxWidth?: QuerySize;
-    /**
-     * The min width for a desktop screen.
-     */
-    desktopMinWidth?: QuerySize;
-    /**
-     * The min width for a large desktop screen.
-     */
-    desktopLargeMinWidth?: QuerySize;
-    /**
-     * An optional default size to use for your app. This is really only helpful
-     * when trying to do server side rendering or initial page render since the
-     * default behavior is to check and update the size once mounted in the DOM.
-     */
-    defaultSize?: AppSize;
-}
+export declare const AppSizeContext: import("react").Context<AppSize & {
+    __initialized: boolean;
+}>;
 /**
- * This hook is used to determine the current application size based on the
- * provided query sizes. When you want to render your app server side, you will
- * need to provide a custom `defaultSize` that implements your logic to determine
- * the type of device requesting a page. Once the app has been rendered in the DOM,
- * this hook will attach event listeners to automatically update the app size when
- * the page is resized.
+ * Gets the current app size.
+ *
+ * @return the current AppSize
  */
-export default function useAppSize({ phoneMaxWidth, tabletMinWidth, tabletMaxWidth, desktopMinWidth, desktopLargeMinWidth, defaultSize, }?: AppSizeOptions): AppSize;
+export default function useAppSize(): AppSize;

types/wia-aria/index.d.ts

 export { default as FocusContainer } from "./FocusContainer";
 export * from "./FocusContainer";
+export * from "./movement";
 export { default as useScrollLock } from "./useScrollLock";
 export { default as useFocusOnMount } from "./useFocusOnMount";
 export { default as usePreviousFocus } from "./usePreviousFocus";
+export { default as useCloseOnEscape } from "./useCloseOnEscape";
 export { default as getFocusableElements } from "./getFocusableElements";
 export { default as focusElementWithin } from "./focusElementWithin";
-export { default as useKeyboardMovement } from "./useKeyboardMovement";
-export { default as useKeyboardSearch } from "./useKeyboardSearch";
-export { default as useCloseOnEscape } from "./useCloseOnEscape";
+export { default as extractTextContent } from "./extractTextContent";

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1160124

increased by40.14%

Number of package files

596

increased by39.58%

Lines of code

22381

increased by48.46%

Worsened metrics

Number of low supply chain risk alerts

27

increased by17.39%

No dependency changes