@procore/core-react 10.16.1-rc.3 → 10.17.0-cmf.beta.1

package/dist/esm/components/MenuImperative/sensors.js

@@ -0,0 +1,214 @@
+import { scrollIntoView } from '../../utils/scrollIntoView';
+function noop() { }
+var MOUSE_ENTER = 'mouseenter';
+var MOUSE_LEAVE = 'mouseleave';
+var isItem = function (element) { return element === null || element === void 0 ? void 0 : element.hasAttribute('data-value'); };
+function isGroup(el) {
+    return JSON.parse(el.dataset.group || 'false');
+}
+function getFirstItem(menu) {
+    var firstItem = menu === null || menu === void 0 ? void 0 : menu.querySelector('[data-value]:first-child');
+    if (firstItem && isGroup(firstItem)) {
+        return getNextItem(firstItem);
+    }
+    return firstItem;
+}
+function getPrevItem(item) {
+    var _a, _b, _c;
+    if (item.previousElementSibling) {
+        return item.previousElementSibling;
+    }
+    if (((_a = item === null || item === void 0 ? void 0 : item.parentElement) === null || _a === void 0 ? void 0 : _a.getAttribute('data-droppable')) === 'true') {
+        var prevDroppableItems = (_c = (_b = item === null || item === void 0 ? void 0 : item.parentElement) === null || _b === void 0 ? void 0 : _b.previousElementSibling) === null || _c === void 0 ? void 0 : _c.querySelectorAll('[data-group="false"]');
+        return (prevDroppableItems === null || prevDroppableItems === void 0 ? void 0 : prevDroppableItems.length)
+            ? prevDroppableItems[prevDroppableItems.length - 1]
+            : null;
+    }
+    return null;
+}
+function getNextItem(item) {
+    var _a, _b, _c;
+    if (item.nextElementSibling) {
+        return item.nextElementSibling;
+    }
+    if (((_a = item === null || item === void 0 ? void 0 : item.parentElement) === null || _a === void 0 ? void 0 : _a.getAttribute('data-droppable')) === 'true') {
+        return (_c = (_b = item === null || item === void 0 ? void 0 : item.parentElement) === null || _b === void 0 ? void 0 : _b.nextElementSibling) === null || _c === void 0 ? void 0 : _c.querySelector('[data-group="false"]');
+    }
+    return null;
+}
+function getLastItem(menu) {
+    var items = menu === null || menu === void 0 ? void 0 : menu.querySelectorAll('[data-value]');
+    var lastItem = items === null || items === void 0 ? void 0 : items[items.length - 1];
+    if (lastItem && isGroup(lastItem)) {
+        return getPrevItem(lastItem);
+    }
+    return lastItem;
+}
+function updateHighlightedAttribute(item, highlight) {
+    item === null || item === void 0 ? void 0 : item.setAttribute('data-highlighted', highlight ? 'true' : 'false');
+    item === null || item === void 0 ? void 0 : item.dispatchEvent(new MouseEvent(highlight ? MOUSE_ENTER : MOUSE_LEAVE));
+}
+export function createSensors(ref, circular) {
+    var highlightedItem = null;
+    var dragAndDropApi = null;
+    var currentDrag = null;
+    var onSelect = noop;
+    function select(event) {
+        if (ref.current && highlightedItem) {
+            var disabled = JSON.parse((highlightedItem === null || highlightedItem === void 0 ? void 0 : highlightedItem.dataset.disabled) || 'false');
+            if (disabled)
+                return;
+            var item = JSON.parse((highlightedItem === null || highlightedItem === void 0 ? void 0 : highlightedItem.dataset.value) || 'null');
+            var selected = JSON.parse((highlightedItem === null || highlightedItem === void 0 ? void 0 : highlightedItem.dataset.selected) || 'false');
+            onSelect &&
+                onSelect({
+                    event: event,
+                    item: item,
+                    group: false,
+                    action: selected ? 'unselected' : 'selected',
+                });
+        }
+    }
+    function highlightItem(item, shouldScroll) {
+        if (shouldScroll === void 0) { shouldScroll = true; }
+        if (item) {
+            updateHighlightedAttribute(highlightedItem, false);
+            // TODO add localized screenreader instructions for the item
+            updateHighlightedAttribute(item, true);
+            highlightedItem = item;
+            if (shouldScroll) {
+                scrollIntoView(-1, item);
+            }
+        }
+    }
+    function getPrevHighlightableItem(currentItem) {
+        var prev = getPrevItem(currentItem);
+        if (prev) {
+            if (isItem(prev)) {
+                if (isGroup(prev)) {
+                    return getPrevHighlightableItem(prev);
+                }
+                else {
+                    return prev;
+                }
+            }
+        }
+        else if (circular) {
+            return getLastItem(ref.current);
+        }
+        return prev;
+    }
+    function getNextHighlightableItem(currentItem) {
+        var next = getNextItem(currentItem);
+        if (next) {
+            if (isItem(next)) {
+                if (isGroup(next)) {
+                    return getNextHighlightableItem(next);
+                }
+                return next;
+            }
+        }
+        else if (circular) {
+            return getFirstItem(ref.current);
+        }
+    }
+    function highlightFirstItem(shouldScroll) {
+        if (shouldScroll === void 0) { shouldScroll = true; }
+        highlightItem(getFirstItem(ref.current), shouldScroll);
+    }
+    function highlightLastItem(shouldScroll) {
+        if (shouldScroll === void 0) { shouldScroll = true; }
+        highlightItem(getLastItem(ref.current), shouldScroll);
+    }
+    function highlightPrevItem() {
+        if (highlightedItem) {
+            highlightItem(getPrevHighlightableItem(highlightedItem));
+        }
+        else {
+            highlightLastItem();
+        }
+    }
+    function highlightNextItem() {
+        if (highlightedItem) {
+            highlightItem(getNextHighlightableItem(highlightedItem));
+        }
+        else {
+            highlightFirstItem();
+        }
+    }
+    return {
+        handleKeyDown: function (event) {
+            if (ref.current) {
+                if (event.key === 'ArrowUp' || event.key === 'Up') {
+                    event.preventDefault();
+                    (currentDrag === null || currentDrag === void 0 ? void 0 : currentDrag.isActive()) ? currentDrag.moveUp() : highlightPrevItem();
+                }
+                else if (event.key === 'ArrowDown' || event.key === 'Down') {
+                    event.preventDefault();
+                    (currentDrag === null || currentDrag === void 0 ? void 0 : currentDrag.isActive()) ? currentDrag.moveDown() : highlightNextItem();
+                }
+                else if (event.key === 'Enter') {
+                    event.preventDefault();
+                    if (event.ctrlKey || event.metaKey) {
+                        var draggableId = highlightedItem === null || highlightedItem === void 0 ? void 0 : highlightedItem.getAttribute('data-rbd-draggable-id');
+                        if (draggableId) {
+                            var preDrag = dragAndDropApi === null || dragAndDropApi === void 0 ? void 0 : dragAndDropApi.tryGetLock(draggableId);
+                            if (preDrag) {
+                                currentDrag = preDrag.snapLift();
+                            }
+                        }
+                    }
+                    else if (currentDrag === null || currentDrag === void 0 ? void 0 : currentDrag.isActive()) {
+                        currentDrag.drop();
+                    }
+                    else {
+                        select(event);
+                    }
+                }
+                else if (event.key === 'Escape' && (currentDrag === null || currentDrag === void 0 ? void 0 : currentDrag.isActive())) {
+                    currentDrag.cancel();
+                }
+            }
+        },
+        handleItemHover: function (el) {
+            highlightItem(el, false);
+        },
+        useKeyboardSensor: function (api) {
+            dragAndDropApi = api;
+        },
+        updateSelectCallback: function (callback) {
+            onSelect = callback;
+        },
+        highlight: highlightItem,
+        highlighted: function () {
+            return JSON.parse((highlightedItem === null || highlightedItem === void 0 ? void 0 : highlightedItem.dataset.value) || 'null');
+        },
+        highlightFirst: highlightFirstItem,
+        highlightLast: highlightLastItem,
+        rehighlightCurrent: function () {
+            var _a;
+            // Rehighlights an item that may have lost its styling due to the re-render of the list items
+            var draggableId = highlightedItem === null || highlightedItem === void 0 ? void 0 : highlightedItem.getAttribute('data-rbd-draggable-id');
+            if (draggableId) {
+                var newItem = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.querySelector("[data-rbd-draggable-id=\"" + draggableId.replace(/"/g, '\\"') + "\"]");
+                highlightItem(newItem);
+            }
+        },
+        highlightSelected: function (shouldScroll) {
+            var _a;
+            if (shouldScroll === void 0) { shouldScroll = true; }
+            var selectedItem = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.querySelector('[data-selected="true"]');
+            highlightItem(selectedItem, shouldScroll);
+        },
+        highlightSuggested: function (shouldScroll) {
+            var _a;
+            if (shouldScroll === void 0) { shouldScroll = true; }
+            var suggestedItem = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.querySelector('[data-suggested="true"]');
+            highlightItem(suggestedItem, shouldScroll);
+        },
+        prev: highlightPrevItem,
+        next: highlightNextItem,
+        select: select,
+    };
+}
+//# sourceMappingURL=sensors.js.map

package/dist/esm/components/MenuImperative/sensors.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sensors.js","sourceRoot":"","sources":["../../../../src/components/MenuImperative/sensors.ts"],"names":[],"mappings":"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"}

package/dist/esm/components/Modal/Modal.d.ts

@@ -15,4 +15,5 @@ export declare const Modal: React.ForwardRefExoticComponent<ModalProps & React.R
     Overlay: import("styled-components").StyledComponent<"div", any, {}, never>;
     Scrim: import("styled-components").StyledComponent<"div", any, {}, never>;
     State: (props: any) => JSX.Element;
+    Section: React.ForwardRefExoticComponent<import("../../layouts/Section/Section.types").SectionProps & React.RefAttributes<HTMLDivElement>>;
 };

package/dist/esm/components/Modal/Modal.js

@@ -27,26 +27,43 @@ import { mergeRefs } from '../../effects/mergeRefs';
 import { useOverflowObserver } from '../../effects/OverflowObserver';
 import { useScrollLock } from '../../effects/ScrollLock';
 import { Visibility } from '../../state/Visibility';
+import { useLayoutEventListener } from '../../effects/EventListener';
 import { addSubcomponents } from '../../utils/addSubcomponents';
 import { Button } from '../Button';
 import { Portal } from '../Portal';
 import { StyledModal, StyledModalBody, StyledModalButtons, StyledModalCancel, StyledModalContainer, StyledModalContent, StyledModalFooter, StyledModalFooterNotation, StyledModalHeader, StyledModalHeading, StyledModalScrim, StyledModalWarningIcon, fadeInClassName, fadeOutClassName, StyledModalFooterSummary, } from './Modal.styles';
+import { Section, SectionProvider } from '../../layouts/Section';
 function noop() { }
+var ModalContext = React.createContext({
+    isBodyScrolled: false,
+    setIsBodyScrolled: noop,
+});
 var ModalClosableHeader = React.forwardRef(function (_a, ref) {
     var children = _a.children, onClose = _a.onClose, qa = _a.qa, props = __rest(_a, ["children", "onClose", "qa"]);
-    return (React.createElement(StyledModalHeader, __assign({}, props, { ref: ref }),
+    var isBodyScrolled = React.useContext(ModalContext).isBodyScrolled;
+    return (React.createElement(StyledModalHeader, __assign({ "$isBodyScrolled": isBodyScrolled }, props, { ref: ref }),
         React.createElement(StyledModalHeading, null, children),
         onClose && (React.createElement(StyledModalCancel, null,
             React.createElement(Button, { "data-qa": qa === null || qa === void 0 ? void 0 : qa.closeButton, onClick: onClose, icon: React.createElement(Clear, null), variant: "tertiary", tabIndex: -1 })))));
 });
 var ModalContainer = React.forwardRef(function (_a, ref) {
-    var placement = _a.placement, props = __rest(_a, ["placement"]);
-    return (React.createElement(StyledModalContainer, __assign({}, props, { shadowStrength: 4, "$placement": placement, ref: ref })));
+    var placement = _a.placement, width = _a.width, props = __rest(_a, ["placement", "width"]);
+    return (React.createElement(StyledModalContainer, __assign({}, props, { shadowStrength: 4, "$placement": placement, "$width": width, ref: ref })));
 });
 var ModalBody = React.forwardRef(function (_a, ref) {
     var children = _a.children, _b = _a.noSideSpacing, noSideSpacing = _b === void 0 ? false : _b, props = __rest(_a, ["children", "noSideSpacing"]);
     var _c = useOverflowObserver(), isOverflowingY = _c.isOverflowingY, overflowRef = _c.ref;
-    return (React.createElement(StyledModalBody, __assign({}, props, { isOverflowingY: isOverflowingY, noSideSpacing: noSideSpacing, ref: mergeRefs(overflowRef, ref) }), children));
+    var scrollRef = React.useRef(null);
+    var setIsBodyScrolled = React.useContext(ModalContext).setIsBodyScrolled;
+    useLayoutEventListener({
+        event: 'scroll',
+        handler: function (e) {
+            setIsBodyScrolled(e.currentTarget.scrollTop > 0);
+        },
+        scope: scrollRef,
+    });
+    return (React.createElement(SectionProvider, null,
+        React.createElement(StyledModalBody, __assign({}, props, { isOverflowingY: isOverflowingY, noSideSpacing: noSideSpacing, ref: mergeRefs(overflowRef, scrollRef, ref) }), children)));
 });
 var ModalFooterSummary = React.forwardRef(function (_a, ref) {
     var children = _a.children, props = __rest(_a, ["children"]);
@@ -61,6 +78,7 @@ var Modal_ = React.forwardRef(function (_a, ref) {
     useScrollLock(open);
     var _e = React.useState(open), visible = _e[0], setVisible = _e[1];
     var _f = React.useState(''), fadeType = _f[0], setFadeType = _f[1];
+    var _g = React.useState(false), isBodyScrolled = _g[0], setIsBodyScrolled = _g[1];
     React.useEffect(function () {
         if (open) {
             setVisible(true);
@@ -81,7 +99,8 @@ var Modal_ = React.forwardRef(function (_a, ref) {
         React.createElement(StyledModal, { className: fadeType, ref: ref, onTransitionEnd: onTransitionEnd },
             React.createElement(StyledModalScrim, { onClick: onClickOverlay }),
             React.createElement(ModalContainer, __assign({}, props, { placement: placement }),
-                React.createElement(StyledModalContent, null, children))))) : null;
+                React.createElement(StyledModalContent, null,
+                    React.createElement(ModalContext.Provider, { value: { isBodyScrolled: isBodyScrolled, setIsBodyScrolled: setIsBodyScrolled } }, children)))))) : null;
 });
 export var ConfirmModal = React.forwardRef(function (_a, ref) {
     var children = _a.children, headline = _a.headline, onClose = _a.onClose, props = __rest(_a, ["children", "headline", "onClose"]);
@@ -119,5 +138,6 @@ export var Modal = addSubcomponents({
     Overlay: Overlay,
     Scrim: Scrim,
     State: State,
+    Section: Section,
 }, Modal_);
 //# sourceMappingURL=Modal.js.map

package/dist/esm/components/Modal/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/Modal/Modal.styles.d.ts

@@ -1,11 +1,19 @@
-import { ModalPlacement } from './Modal.types';
+import { ModalPlacement, ModalWidth } from './Modal.types';
 export declare const fadeInClassName = "fade-in";
 export declare const fadeOutClassName = "fade-out";
 export declare const modalMaxWidth = "640px";
+export declare const modalPixelGutter: number;
+export declare const modalPixelWidths: {
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+};
 export declare const StyledModal: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledModalButtons: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledModalContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../utils/types").DivAttributes & import("../Card").CardProps & import("react").RefAttributes<HTMLDivElement>>, any, {
     $placement: ModalPlacement;
+    $width?: ModalWidth | undefined;
 }, never>;
 export declare const StyledModalFooter: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledModalBody: import("styled-components").StyledComponent<"div", any, {
@@ -14,7 +22,9 @@ export declare const StyledModalBody: import("styled-components").StyledComponen
 }, never>;
 export declare const StyledModalContent: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledModalFooterNotation: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../utils/types").SpanAttributes & import("../Typography").TypographyProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;
-export declare const StyledModalHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledModalHeader: import("styled-components").StyledComponent<"div", any, {
+    $isBodyScrolled: boolean;
+}, never>;
 export declare const StyledModalHeading: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledModalCancel: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledModalScrim: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/esm/components/Modal/Modal.styles.js

@@ -12,30 +12,47 @@ import { getTypographyIntent } from '../Typography/Typography.styles';
 export var fadeInClassName = 'fade-in';
 export var fadeOutClassName = 'fade-out';
 export var modalMaxWidth = '640px';
+export var modalPixelGutter = spacing.xl;
+export var modalPixelWidths = {
+    sm: 432,
+    md: 688,
+    lg: 1152,
+    xl: 1920,
+};
 export var StyledModal = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  height: 100vh;\n  position: absolute;\n  opacity: 0;\n  transition: 0.3s opacity ease;\n  width: 100vw;\n  z-index: 0;\n\n  &.", " {\n    opacity: 1;\n  }\n\n  &.", " {\n    opacity: 0;\n  }\n"], ["\n  display: flex;\n  height: 100vh;\n  position: absolute;\n  opacity: 0;\n  transition: 0.3s opacity ease;\n  width: 100vw;\n  z-index: 0;\n\n  &.", " {\n    opacity: 1;\n  }\n\n  &.", " {\n    opacity: 0;\n  }\n"])), fadeInClassName, fadeOutClassName);
 export var StyledModalButtons = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex: 0 0 auto;\n  margin-left: ", "px;\n\n  > * + * {\n    margin-left: ", "px;\n  }\n"], ["\n  display: flex;\n  flex: 0 0 auto;\n  margin-left: ", "px;\n\n  > * + * {\n    margin-left: ", "px;\n  }\n"])), spacing.lg, spacing.sm);
-export var StyledModalContainer = styled(Card)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  left: 50vw;\n  position: absolute;\n  z-index: 2;\n\n  ", "\n"], ["\n  display: flex;\n  flex-direction: row;\n  left: 50vw;\n  position: absolute;\n  z-index: 2;\n\n  ", "\n"])), function (_a) {
+export var StyledModalContainer = styled(Card)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  position: absolute;\n  z-index: 2;\n\n  ", "\n\n  ", "\n"], ["\n  display: flex;\n  flex-direction: row;\n  position: absolute;\n  z-index: 2;\n\n  ", "\n\n  ", "\n"])), function (_a) {
     var $placement = _a.$placement;
     if ($placement === 'top') {
-        return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n        top: 5vh;\n        transform: translate(-50%, 0);\n      "], ["\n        top: 5vh;\n        transform: translate(-50%, 0);\n      "])));
+        return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n        top: 5vh;\n      "], ["\n        top: 5vh;\n      "])));
+    }
+    return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      top: 50vh;\n      transform: translateY(-50%);\n    "], ["\n      top: 50vh;\n      transform: translateY(-50%);\n    "])));
+}, function (_a) {
+    var $width = _a.$width, $placement = _a.$placement;
+    if ($width) {
+        return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n        left: ", "px;\n        right: ", "px;\n        margin-left: auto;\n        margin-right: auto;\n        max-width: ", "px;\n\n        // TODO deprecated, moving width up\n        ", " {\n          max-width: none;\n        }\n      "], ["\n        left: ", "px;\n        right: ", "px;\n        margin-left: auto;\n        margin-right: auto;\n        max-width: ", "px;\n\n        // TODO deprecated, moving width up\n        ", " {\n          max-width: none;\n        }\n      "])), modalPixelGutter, modalPixelGutter, modalPixelWidths[$width], StyledModalBody);
     }
-    return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      top: 50vh;\n      transform: translate(-50%, -50%);\n    "], ["\n      top: 50vh;\n      transform: translate(-50%, -50%);\n    "])));
+    // TODO deprecated, uses new centering, required width
+    return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      left: 50vw;\n      transform: translateX(-50%)\n        ", ";\n    "], ["\n      left: 50vw;\n      transform: translateX(-50%)\n        ", ";\n    "])), $placement === 'center' && 'translateY(-50%)');
 });
-export var StyledModalFooter = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  flex: 0 0 auto;\n  flex-wrap: wrap;\n  justify-content: flex-end;\n  padding: ", "px ", "px ", "px;\n"], ["\n  align-items: center;\n  display: flex;\n  flex: 0 0 auto;\n  flex-wrap: wrap;\n  justify-content: flex-end;\n  padding: ", "px ", "px ", "px;\n"])), spacing.xl, spacing.xxl, spacing.xxl);
-export var StyledModalBody = styled.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  ", "\n\n  box-sizing: border-box;\n  color: ", ";\n  display: flex;\n  flex-direction: column;\n  max-width: ", ";\n  overflow: auto;\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  box-sizing: border-box;\n  color: ", ";\n  display: flex;\n  flex-direction: column;\n  max-width: ", ";\n  overflow: auto;\n  ", "\n\n  ", "\n"])), getTypographyIntent('body'), colors.gray15, modalMaxWidth, function (_a) {
+export var StyledModalFooter = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  flex: 0 0 auto;\n  flex-wrap: wrap;\n  justify-content: flex-end;\n  padding: ", "px ", "px ", "px;\n"], ["\n  align-items: center;\n  display: flex;\n  flex: 0 0 auto;\n  flex-wrap: wrap;\n  justify-content: flex-end;\n  padding: ", "px ", "px ", "px;\n"])), spacing.xl, spacing.xxl, spacing.xxl);
+export var StyledModalBody = styled.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  ", "\n\n  box-sizing: border-box;\n  color: ", ";\n  display: flex;\n  flex-direction: column;\n  // TODO deprecated, delete line in breaking change\n  max-width: ", ";\n  overflow: auto;\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  box-sizing: border-box;\n  color: ", ";\n  display: flex;\n  flex-direction: column;\n  // TODO deprecated, delete line in breaking change\n  max-width: ", ";\n  overflow: auto;\n  ", "\n\n  ", "\n"])), getTypographyIntent('body'), colors.gray15, modalMaxWidth, function (_a) {
     var noSideSpacing = _a.noSideSpacing;
-    return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      padding: ", "px ", "px;\n    "], ["\n      padding: ", "px ", "px;\n    "])), spacing.xl, noSideSpacing ? 0 : spacing.xxl);
+    return css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n      padding: ", "px ", "px;\n    "], ["\n      padding: ", "px ", "px;\n    "])), spacing.xl, noSideSpacing ? 0 : spacing.xxl);
 }, function (_a) {
     var isOverflowingY = _a.isOverflowingY;
-    return isOverflowingY && css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      & + ", " {\n        border-top-width: 1px;\n        border-top-style: solid;\n        border-top-color: ", ";\n        ", " {\n          border-top: none;\n        }\n      }\n    "], ["\n      & + ", " {\n        border-top-width: 1px;\n        border-top-style: solid;\n        border-top-color: ", ";\n        ", " {\n          border-top: none;\n        }\n      }\n    "])), StyledModalFooter, colors.gray85, StyledModalFooterSummary);
+    return isOverflowingY && css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n      & + ", " {\n        border-top-width: 1px;\n        border-top-style: solid;\n        border-top-color: ", ";\n        ", " {\n          border-top: none;\n        }\n      }\n    "], ["\n      & + ", " {\n        border-top-width: 1px;\n        border-top-style: solid;\n        border-top-color: ", ";\n        ", " {\n          border-top: none;\n        }\n      }\n    "])), StyledModalFooter, colors.gray85, StyledModalFooterSummary);
+});
+export var StyledModalContent = styled.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  max-height: 90vh;\n  overflow: hidden;\n"], ["\n  display: flex;\n  flex-direction: column;\n  max-height: 90vh;\n  overflow: hidden;\n"])));
+export var StyledModalFooterNotation = styled(Typography)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  flex-grow: 1;\n"], ["\n  flex-grow: 1;\n"])));
+export var StyledModalHeader = styled.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  align-items: flex-start;\n  color: ", ";\n  display: flex;\n  flex: 0 0 auto;\n  padding: ", "px ", "px;\n  position: relative;\n  ", "\n"], ["\n  align-items: flex-start;\n  color: ", ";\n  display: flex;\n  flex: 0 0 auto;\n  padding: ", "px ", "px;\n  position: relative;\n  ", "\n"])), colors.gray10, spacing.xl, spacing.xxl, function (_a) {
+    var $isBodyScrolled = _a.$isBodyScrolled;
+    return css(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n    border-bottom: 1px solid ", ";\n  "], ["\n    border-bottom: 1px solid ", ";\n  "])), $isBodyScrolled ? colors.gray85 : 'transparent');
 });
-export var StyledModalContent = styled.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  max-height: 90vh;\n  overflow: hidden;\n"], ["\n  display: flex;\n  flex-direction: column;\n  max-height: 90vh;\n  overflow: hidden;\n"])));
-export var StyledModalFooterNotation = styled(Typography)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  flex-grow: 1;\n"], ["\n  flex-grow: 1;\n"])));
-export var StyledModalHeader = styled.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  align-items: flex-start;\n  color: ", ";\n  display: flex;\n  flex: 0 0 auto;\n  padding: ", "px ", "px;\n  position: relative;\n"], ["\n  align-items: flex-start;\n  color: ", ";\n  display: flex;\n  flex: 0 0 auto;\n  padding: ", "px ", "px;\n  position: relative;\n"])), colors.gray10, spacing.xl, spacing.xxl);
-export var StyledModalHeading = styled.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  ", "\n  align-items: center;\n  display: flex;\n  flex: 1 1 auto;\n  min-height: 36px;\n  padding-right: ", "px;\n"], ["\n  ", "\n  align-items: center;\n  display: flex;\n  flex: 1 1 auto;\n  min-height: 36px;\n  padding-right: ", "px;\n"])), getTypographyIntent('h2'), spacing.lg);
-export var StyledModalCancel = styled.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  flex: 0 0 auto;\n"], ["\n  flex: 0 0 auto;\n"])));
-export var StyledModalScrim = styled.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  background: hsla(200, 8%, 10%, 0.6);\n  height: 100vh;\n  left: 0;\n  position: absolute;\n  top: 0;\n  width: 100vw;\n  z-index: 1;\n"], ["\n  background: hsla(200, 8%, 10%, 0.6);\n  height: 100vh;\n  left: 0;\n  position: absolute;\n  top: 0;\n  width: 100vw;\n  z-index: 1;\n"])));
-export var StyledModalWarningIcon = styled(Warning)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  color: ", ";\n  margin-right: ", "px;\n"], ["\n  color: ", ";\n  margin-right: ", "px;\n"])), colors.yellow40, spacing.sm);
-export var StyledModalFooterSummary = styled.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  ", "\n  border-top: 1px solid ", ";\n  border-bottom: 1px solid ", ";\n  padding: ", "px ", "px;\n  color: ", ";\n  font-style: italic;\n  background-color: ", ";\n  margin: -", "px -", "px ", "px -", "px;\n  flex: 1 1 100%;\n"], ["\n  ", "\n  border-top: 1px solid ", ";\n  border-bottom: 1px solid ", ";\n  padding: ", "px ", "px;\n  color: ", ";\n  font-style: italic;\n  background-color: ", ";\n  margin: -", "px -", "px ", "px -", "px;\n  flex: 1 1 100%;\n"])), getTypographyIntent('small'), colors.gray85, colors.gray85, spacing.md, spacing.xxl, colors.gray15, colors.gray98, spacing.xl, spacing.xxl, spacing.xl, spacing.xxl);
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17;
+export var StyledModalHeading = styled.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  ", "\n  align-items: center;\n  display: flex;\n  flex: 1 1 auto;\n  min-height: 36px;\n  padding-right: ", "px;\n"], ["\n  ", "\n  align-items: center;\n  display: flex;\n  flex: 1 1 auto;\n  min-height: 36px;\n  padding-right: ", "px;\n"])), getTypographyIntent('h2'), spacing.lg);
+export var StyledModalCancel = styled.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  flex: 0 0 auto;\n"], ["\n  flex: 0 0 auto;\n"])));
+export var StyledModalScrim = styled.div(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  background: hsla(200, 8%, 10%, 0.6);\n  height: 100vh;\n  left: 0;\n  position: absolute;\n  top: 0;\n  width: 100vw;\n  z-index: 1;\n"], ["\n  background: hsla(200, 8%, 10%, 0.6);\n  height: 100vh;\n  left: 0;\n  position: absolute;\n  top: 0;\n  width: 100vw;\n  z-index: 1;\n"])));
+export var StyledModalWarningIcon = styled(Warning)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  color: ", ";\n  margin-right: ", "px;\n"], ["\n  color: ", ";\n  margin-right: ", "px;\n"])), colors.yellow40, spacing.sm);
+export var StyledModalFooterSummary = styled.div(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n  ", "\n  border-top: 1px solid ", ";\n  border-bottom: 1px solid ", ";\n  padding: ", "px ", "px;\n  color: ", ";\n  font-style: italic;\n  background-color: ", ";\n  margin: -", "px -", "px ", "px -", "px;\n  flex: 1 1 100%;\n"], ["\n  ", "\n  border-top: 1px solid ", ";\n  border-bottom: 1px solid ", ";\n  padding: ", "px ", "px;\n  color: ", ";\n  font-style: italic;\n  background-color: ", ";\n  margin: -", "px -", "px ", "px -", "px;\n  flex: 1 1 100%;\n"])), getTypographyIntent('small'), colors.gray85, colors.gray85, spacing.md, spacing.xxl, colors.gray15, colors.gray98, spacing.xl, spacing.xxl, spacing.xl, spacing.xxl);
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20;
 //# sourceMappingURL=Modal.styles.js.map

package/dist/esm/components/Modal/Modal.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.styles.js","sourceRoot":"","sources":["../../../../src/components/Modal/Modal.styles.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"Modal.styles.js","sourceRoot":"","sources":["../../../../src/components/Modal/Modal.styles.ts"],"names":[],"mappings":"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"}

package/dist/esm/components/Modal/Modal.types.d.ts

@@ -1,5 +1,6 @@
 import { DivAttributes, Props } from '../../utils/types';
 export declare type ModalPlacement = 'top' | 'center';
+export declare type ModalWidth = 'sm' | 'md' | 'lg' | 'xl';
 export interface ModalProps extends Props {
     /**
      * Callback for clicking the overlay
@@ -15,9 +16,14 @@ export interface ModalProps extends Props {
      * @defaultValue center
      */
     placement?: ModalPlacement;
+    /**
+     * Sets a width on the container and uses next centering. Future will default to `md`
+     */
+    width?: ModalWidth;
 }
 export interface ModalContainerProps extends Props {
     placement: ModalPlacement;
+    width?: ModalWidth;
 }
 export interface ConfirmModalProps extends ModalProps {
     headline?: string;

package/dist/esm/components/NumberInput/NumberInput.utils.d.ts

@@ -19,6 +19,7 @@ export declare const controlKey = "Control";
 export declare const highlightAllKey = "a";
 export declare const copyKey = "c";
 export declare function toFixed(value: number, precision: number): number;
+export declare function formatterFactory(formatterLocale: Locale, options?: Intl.NumberFormatOptions): Intl.NumberFormat;
 export declare function getSeparators(locale: Locale): Separators;
 export declare const isValidNegative: (value: InputValue) => boolean;
 export declare function verifyDecimalScale(decimalScale: boolean | number): number;

package/dist/esm/components/NumberInput/NumberInput.utils.js

@@ -1,3 +1,4 @@
+import { getFormatterLocale } from '../../utils/i18n';
 import { fillDecimalScaleVariant, } from './NumberInput.types';
 export var defaultLocale = 'en-US';
 export var minus = '-';
@@ -25,8 +26,20 @@ export function toFixed(value, precision) {
         return value;
     return Number(Number(Math.round(Number(value + 'e' + precision)) + 'e-' + precision).toFixed(precision));
 }
+export function formatterFactory(formatterLocale, options) {
+    if (options === void 0) { options = {}; }
+    try {
+        return new Intl.NumberFormat(formatterLocale, options);
+    }
+    catch (error) {
+        console.error("@procore/core-react Intl.NumberFormat error for locale " + formatterLocale + ". Will fall back to en-US", error);
+        return new Intl.NumberFormat('en-US', options);
+    }
+}
 export function getSeparators(locale) {
-    var value = new Intl.NumberFormat(locale).format(1e9 + 0.1);
+    var formatterLocale = getFormatterLocale(locale);
+    var formatter = formatterFactory(formatterLocale);
+    var value = formatter.format(1e9 + 0.1);
     var refinedValue = value.replace(new RegExp(/\d/, 'g'), emptyString);
     return {
         decimal: refinedValue.slice(-1),
@@ -165,7 +178,8 @@ export function format(locale, decimalScale, fillDecimalScale, value, isNumericS
             : Math.min(Math.max(0, (fraction === null || fraction === void 0 ? void 0 : fraction.length) || 0), decimalScale),
         maximumFractionDigits: decimalScale,
     };
-    var formatter = new Intl.NumberFormat(locale, options);
+    var formatterLocale = getFormatterLocale(locale);
+    var formatter = formatterFactory(formatterLocale, options);
     var isDecimalAllowed = decimalScale > 0;
     var isEmptyValue = integer === emptyString && !decimal && !fraction;
     if (isEmptyValue)