@jobber/components 2.86.0 → 2.86.2

package/dist/Markdown/index.js

@@ -2,70 +2,18 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
-
-var __chunk_1 = require('../chunk-b67af3cb.js');
-var React = require('react');
-var React__default = _interopDefault(React);
-require('../chunk-17e02351.js');
+var Markdown = require('../Markdown-69986c49.js');
+require('../tslib.es6-5b50eb8e.js');
+require('react');
+require('react-markdown');
+require('../Text-9bc093e9.js');
+require('../Typography-7e542a72.js');
 require('classnames');
-require('../Typography/index.js');
-var index$1 = require('../Text/index.js');
-var index$3 = require('../Heading/index.js');
-var index$2 = require('../Content/index.js');
-var ReactMarkdown = _interopDefault(require('react-markdown'));
-var index$4 = require('../Emphasis/index.js');
+require('../style-inject.es-dcee06b6.js');
+require('../Emphasis-fd845639.js');
+require('../Heading-56750113.js');
+require('../Content-18de5fbb.js');
+
 
-function Markdown(_a) {
-    var content = _a.content, externalLink = _a.externalLink, basicUsage = _a.basicUsage;
-    var props = __chunk_1.__assign({}, (basicUsage && {
-        disallowedElements: [
-            "p",
-            "h1",
-            "h2",
-            "h3",
-            "h4",
-            "h5",
-            "h6",
-            "table",
-            "ul",
-            "li",
-            "code",
-            "image",
-        ],
-        unwrapDisallowed: true,
-    }));
-    var Tag = basicUsage ? React__default.Fragment : index$2.Content;
-    return (React__default.createElement(Tag, null,
-        React__default.createElement(ReactMarkdown, __chunk_1.__assign({}, props, { linkTarget: externalLink ? "_blank" : undefined, components: {
-                p: renderParagraph,
-                strong: renderStrong,
-                em: renderEmphasis,
-                h1: renderHeading(1),
-                h2: renderHeading(2),
-                h3: renderHeading(3),
-                h4: renderHeading(4),
-                h5: renderHeading(5),
-            } }), content)));
-}
-function renderParagraph(_a) {
-    var children = _a.children;
-    return React__default.createElement(index$1.Text, null, children);
-}
-function renderStrong(_a) {
-    var children = _a.children;
-    return React__default.createElement(index$4.Emphasis, { variation: "bold" }, children);
-}
-function renderEmphasis(_a) {
-    var children = _a.children;
-    return React__default.createElement(index$4.Emphasis, { variation: "italic" }, children);
-}
-function renderHeading(level) {
-    function buildHeading(_a) {
-        var children = _a.children;
-        return React__default.createElement(index$3.Heading, { level: level }, children);
-    }
-    return buildHeading;
-}
 
-exports.Markdown = Markdown;
+exports.Markdown = Markdown.Markdown;

package/dist/Markdown-69986c49.js

@@ -0,0 +1,68 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-5b50eb8e.js');
+var React = require('react');
+var ReactMarkdown = require('react-markdown');
+var Text = require('./Text-9bc093e9.js');
+var Emphasis = require('./Emphasis-fd845639.js');
+var Heading = require('./Heading-56750113.js');
+var Content = require('./Content-18de5fbb.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var ReactMarkdown__default = /*#__PURE__*/_interopDefaultLegacy(ReactMarkdown);
+
+function Markdown(_a) {
+    var content = _a.content, externalLink = _a.externalLink, basicUsage = _a.basicUsage;
+    var props = tslib_es6.__assign({}, (basicUsage && {
+        disallowedElements: [
+            "p",
+            "h1",
+            "h2",
+            "h3",
+            "h4",
+            "h5",
+            "h6",
+            "table",
+            "ul",
+            "li",
+            "code",
+            "image",
+        ],
+        unwrapDisallowed: true,
+    }));
+    var Tag = basicUsage ? React__default["default"].Fragment : Content.Content;
+    return (React__default["default"].createElement(Tag, null,
+        React__default["default"].createElement(ReactMarkdown__default["default"], tslib_es6.__assign({}, props, { linkTarget: externalLink ? "_blank" : undefined, components: {
+                p: renderParagraph,
+                strong: renderStrong,
+                em: renderEmphasis,
+                h1: renderHeading(1),
+                h2: renderHeading(2),
+                h3: renderHeading(3),
+                h4: renderHeading(4),
+                h5: renderHeading(5),
+            } }), content)));
+}
+function renderParagraph(_a) {
+    var children = _a.children;
+    return React__default["default"].createElement(Text.Text, null, children);
+}
+function renderStrong(_a) {
+    var children = _a.children;
+    return React__default["default"].createElement(Emphasis.Emphasis, { variation: "bold" }, children);
+}
+function renderEmphasis(_a) {
+    var children = _a.children;
+    return React__default["default"].createElement(Emphasis.Emphasis, { variation: "italic" }, children);
+}
+function renderHeading(level) {
+    function buildHeading(_a) {
+        var children = _a.children;
+        return React__default["default"].createElement(Heading.Heading, { level: level }, children);
+    }
+    return buildHeading;
+}
+
+exports.Markdown = Markdown;

package/dist/Menu/Menu.d.ts

@@ -1,46 +1,46 @@
-import React, { ReactElement } from "react";
-import { IconNames } from "@jobber/design";
-interface MenuProps {
-    /**
-     * Custom menu activator. If this is not provided a default [… More] will be used.
-     */
-    readonly activator?: ReactElement;
-    /**
-     * Collection of action items.
-     */
-    readonly items: SectionProps[];
-}
-export interface SectionProps {
-    /**
-     * Defines the section header to further explain the group of actions.
-     */
-    header?: string;
-    /**
-     * List of actions.
-     */
-    actions: Omit<ActionProps, "shouldFocus">[];
-}
-export declare function Menu({ activator, items }: MenuProps): JSX.Element;
-export interface ActionProps {
-    /**
-     * Action label
-     */
-    label: string;
-    /**
-     * Parent Section Label
-     */
-    sectionLabel?: string;
-    /**
-     * Visual cue for the action label
-     */
-    icon?: IconNames;
-    /**
-     * Callback when an action gets clicked
-     */
-    onClick?(event: React.MouseEvent<HTMLButtonElement>): void;
-    /**
-     * Focus on the action when rendered
-     */
-    shouldFocus?: boolean;
-}
-export {};
+import React, { ReactElement } from "react";
+import { IconNames } from "@jobber/design";
+interface MenuProps {
+    /**
+     * Custom menu activator. If this is not provided a default [… More] will be used.
+     */
+    readonly activator?: ReactElement;
+    /**
+     * Collection of action items.
+     */
+    readonly items: SectionProps[];
+}
+export interface SectionProps {
+    /**
+     * Defines the section header to further explain the group of actions.
+     */
+    header?: string;
+    /**
+     * List of actions.
+     */
+    actions: Omit<ActionProps, "shouldFocus">[];
+}
+export declare function Menu({ activator, items }: MenuProps): JSX.Element;
+export interface ActionProps {
+    /**
+     * Action label
+     */
+    label: string;
+    /**
+     * Parent Section Label
+     */
+    sectionLabel?: string;
+    /**
+     * Visual cue for the action label
+     */
+    icon?: IconNames;
+    /**
+     * Callback when an action gets clicked
+     */
+    onClick?(event: React.MouseEvent<HTMLButtonElement>): void;
+    /**
+     * Focus on the action when rendered
+     */
+    shouldFocus?: boolean;
+}
+export {};

package/dist/Menu/index.d.ts

@@ -1 +1 @@
-export { Menu, SectionProps, ActionProps } from "./Menu";
+export { Menu, SectionProps, ActionProps } from "./Menu";

package/dist/Menu/index.js

@@ -2,135 +2,20 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
-
-var __chunk_1 = require('../chunk-b67af3cb.js');
-var React = require('react');
-var React__default = _interopDefault(React);
-var __chunk_2 = require('../chunk-17e02351.js');
-var classnames = _interopDefault(require('classnames'));
-var index = require('../Typography/index.js');
-require('@jobber/design');
-var index$2 = require('../Icon/index.js');
-var uuid = require('uuid');
+var Menu = require('../Menu-6a392af6.js');
+require('../tslib.es6-5b50eb8e.js');
+require('react');
+require('uuid');
+require('classnames');
+require('framer-motion');
+require('@jobber/hooks');
+require('../style-inject.es-dcee06b6.js');
+require('../Button-5b2f1636.js');
 require('react-router-dom');
-var index$5 = require('../Button/index.js');
-var framerMotion = require('framer-motion');
-var hooks = require('@jobber/hooks');
+require('../Icon-d5ad1a6d.js');
+require('@jobber/design');
+require('../Typography-7e542a72.js');
 
-var css = "._3dsZe-fIMb0ftQQAJf53tI * {\n  box-sizing: border-box;\n}\n\n._3dsZe-fIMb0ftQQAJf53tI {\n  display: inline-block;\n  position: relative;\n}\n\n._15jh7FtEcALDetgrjoV8HG {\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  z-index: var(--elevation-menu);\n  width: 100%;\n  max-height: 72vh;\n  padding: var(--space-small);\n  padding-bottom: calc(env(safe-area-inset-bottom) + var(--space-small));\n  border-radius: var(--radius-base) var(--radius-base) 0 0;\n  -webkit-overflow-scrolling: touch;\n  overflow-y: scroll;\n  background-color: var(--color-surface)\n}\n\n@media (min-width: 640px) {\n\n._15jh7FtEcALDetgrjoV8HG {\n    position: absolute;\n    left: auto;\n    width: calc(var(--base-unit) * 12.5);\n    box-shadow: var(--shadow-base);\n    padding: var(--space-small);\n    border: var(--border-base) solid var(--color-border);\n    border-radius: var(--radius-base);\n    overflow: auto\n}\n  }\n\n@media (min-width: 640px) {\n\n._15jh7FtEcALDetgrjoV8HG {\n    position: absolute;\n    left: auto;\n    width: calc(var(--base-unit) * 12.5);\n    box-shadow: var(--shadow-base);\n    padding: var(--space-small);\n    border: var(--border-base) solid var(--color-border);\n    border-radius: var(--radius-base);\n    overflow: auto\n}\n  }\n\n@media (--medium-screens) {\n\n._15jh7FtEcALDetgrjoV8HG {\n    position: absolute;\n    left: auto;\n    width: calc(var(--base-unit) * 12.5);\n    box-shadow: var(--shadow-base);\n    padding: var(--space-small);\n    border: var(--border-base) solid var(--color-border);\n    border-radius: var(--radius-base);\n    overflow: auto\n}\n  }\n\n@media (min-width: 640px) {\n\n._2S3J3IQ4JcMgnYjzx3A9AA {\n    bottom: 100%;\n    margin-bottom: var(--space-smallest)\n}\n  }\n\n@media (min-width: 640px) {\n\n._2S3J3IQ4JcMgnYjzx3A9AA {\n    bottom: 100%;\n    margin-bottom: var(--space-smallest)\n}\n  }\n\n@media (--medium-screens) {\n\n._2S3J3IQ4JcMgnYjzx3A9AA {\n    bottom: 100%;\n    margin-bottom: var(--space-smallest)\n}\n  }\n\n@media (min-width: 640px) {\n\n.qgoF1WJ8Cu39FVc3p_c8w {\n    top: 100%;\n    bottom: auto;\n    margin-top: var(--space-smallest)\n}\n  }\n\n@media (min-width: 640px) {\n\n.qgoF1WJ8Cu39FVc3p_c8w {\n    top: 100%;\n    bottom: auto;\n    margin-top: var(--space-smallest)\n}\n  }\n\n@media (--medium-screens) {\n\n.qgoF1WJ8Cu39FVc3p_c8w {\n    top: 100%;\n    bottom: auto;\n    margin-top: var(--space-smallest)\n}\n  }\n\n@media (min-width: 640px) {\n\n._2QwnAwwIXZuZReq2cUwEoX {\n    right: 0;\n    left: auto\n}\n  }\n\n@media (min-width: 640px) {\n\n._2QwnAwwIXZuZReq2cUwEoX {\n    right: 0;\n    left: auto\n}\n  }\n\n@media (--medium-screens) {\n\n._2QwnAwwIXZuZReq2cUwEoX {\n    right: 0;\n    left: auto\n}\n  }\n\n@media (min-width: 640px) {\n\n._2Bdz7gjSU8id-Og42er82U {\n    right: auto;\n    left: 0\n}\n  }\n\n@media (min-width: 640px) {\n\n._2Bdz7gjSU8id-Og42er82U {\n    right: auto;\n    left: 0\n}\n  }\n\n@media (--medium-screens) {\n\n._2Bdz7gjSU8id-Og42er82U {\n    right: auto;\n    left: 0\n}\n  }\n\n._1j-ztPLXQgH-5XOlXybf0- {\n  padding: var(--space-small) 0;\n  border-bottom: var(--border-base) dotted var(--color-border);\n}\n\n._1j-ztPLXQgH-5XOlXybf0-:first-of-type {\n  padding-top: 0;\n}\n\n._1j-ztPLXQgH-5XOlXybf0-:last-of-type {\n  padding-bottom: 0;\n  border-bottom: none;\n}\n\n.ecEGgRDm96wrHymIDR1FM {\n  padding: var(--space-small);\n}\n\n._1lmtkHVgn76IrVsqnqlOYh {\n  display: -ms-flexbox;\n  display: flex;\n  width: 100%;\n  padding: var(--space-small);\n  border: none;\n  border-radius: var(--radius-base);\n  background-color: transparent;\n  cursor: pointer;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n._1lmtkHVgn76IrVsqnqlOYh:hover,\n._1lmtkHVgn76IrVsqnqlOYh:focus {\n  background-color: var(--color-surface--hover);\n  outline-color: var(--color-focus);\n}\n\n.QMbGAf7Vb6_SM8qOIvLMc {\n  margin-right: var(--space-base);\n}\n\n._1DIimpm0iJewCr_4Ee8NTa {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: var(--elevation-menu);\n  background-color: var(--color-overlay)\n}\n\n@media (min-width: 640px) {\n\n._1DIimpm0iJewCr_4Ee8NTa {\n    background-color: transparent\n}\n  }\n\n@media (min-width: 640px) {\n\n._1DIimpm0iJewCr_4Ee8NTa {\n    background-color: transparent\n}\n  }\n\n@media (--medium-screens) {\n\n._1DIimpm0iJewCr_4Ee8NTa {\n    background-color: transparent\n}\n  }\n\n.qVvYE_6U6kPoQ4ms_2slA {\n  width: 100%;\n}\n\n._3Pk5uJMOz91YR7eDwLASEh {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n}\n";
-var styles = {"wrapper":"_3dsZe-fIMb0ftQQAJf53tI","menu":"_15jh7FtEcALDetgrjoV8HG","above":"_2S3J3IQ4JcMgnYjzx3A9AA","below":"qgoF1WJ8Cu39FVc3p_c8w","left":"_2QwnAwwIXZuZReq2cUwEoX","right":"_2Bdz7gjSU8id-Og42er82U","section":"_1j-ztPLXQgH-5XOlXybf0-","sectionHeader":"ecEGgRDm96wrHymIDR1FM","action":"_1lmtkHVgn76IrVsqnqlOYh","icon":"QMbGAf7Vb6_SM8qOIvLMc","overlay":"_1DIimpm0iJewCr_4Ee8NTa","fullWidth":"qVvYE_6U6kPoQ4ms_2slA","screenReaderOnly":"_3Pk5uJMOz91YR7eDwLASEh"};
-__chunk_2.styleInject(css);
 
-var variation = {
-    overlayStartStop: { opacity: 0 },
-    startOrStop: function (position) {
-        var y = 10;
-        if (position === "below")
-            y *= -1;
-        if (window.innerWidth < 640)
-            y = 150;
-        return { opacity: 0, y: y };
-    },
-    done: { opacity: 1, y: 0 },
-};
-// eslint-disable-next-line max-statements
-function Menu(_a) {
-    var _b;
-    var activator = _a.activator, items = _a.items;
-    var _c;
-    var _d = __chunk_1.__read(React.useState(false), 2), visible = _d[0], setVisible = _d[1];
-    var fullWidth = ((_c = activator === null || activator === void 0 ? void 0 : activator.props) === null || _c === void 0 ? void 0 : _c.fullWidth) || false;
-    var _e = __chunk_1.__read(React.useState({
-        vertical: "below",
-        horizontal: "right",
-    }), 2), position = _e[0], setPosition = _e[1];
-    var wrapperRef = React.createRef();
-    var buttonID = uuid.v1();
-    var menuID = uuid.v1();
-    hooks.useOnKeyDown(handleKeyboardShortcut, ["Escape"]);
-    React.useLayoutEffect(function () {
-        if (wrapperRef.current) {
-            var bounds = wrapperRef.current.getBoundingClientRect();
-            var newPosition = __chunk_1.__assign({}, position);
-            if (bounds.top <= window.innerHeight / 2) {
-                newPosition.vertical = "below";
-            }
-            else {
-                newPosition.vertical = "above";
-            }
-            if (bounds.left <= window.innerWidth / 2) {
-                newPosition.horizontal = "right";
-            }
-            else {
-                newPosition.horizontal = "left";
-            }
-            setPosition(newPosition);
-        }
-    }, [visible, fullWidth]);
-    if (!activator) {
-        activator = (React__default.createElement(index$5.Button, { fullWidth: true, label: "More Actions", icon: "more", type: "secondary" }));
-    }
-    var menuClasses = classnames(styles.menu, position.vertical === "above" && styles.above, position.vertical === "below" && styles.below, position.horizontal === "left" && styles.left, position.horizontal === "right" && styles.right);
-    var wrapperClasses = classnames(styles.wrapper, (_b = {},
-        _b[styles.fullWidth] = fullWidth,
-        _b));
-    return (React__default.createElement("div", { className: wrapperClasses, ref: wrapperRef },
-        React__default.cloneElement(activator, {
-            onClick: toggle(activator.props.onClick),
-            id: buttonID,
-            ariaControls: menuID,
-            ariaExpanded: visible,
-            ariaHaspopup: true,
-        }),
-        React__default.createElement(framerMotion.AnimatePresence, null, visible && (React__default.createElement(React__default.Fragment, null,
-            React__default.createElement(framerMotion.motion.div, { className: styles.overlay, onClick: toggle(), variants: variation, initial: "overlayStartStop", animate: "done", exit: "overlayStartStop", transition: {
-                    type: "tween",
-                    duration: 0.15,
-                } }),
-            React__default.createElement(framerMotion.motion.div, { className: menuClasses, role: "menu", "aria-labelledby": buttonID, id: menuID, onClick: hide, variants: variation, initial: "startOrStop", animate: "done", exit: "startOrStop", custom: position, transition: {
-                    type: "tween",
-                    duration: 0.25,
-                } }, items.map(function (item, key) { return (React__default.createElement("div", { key: key, className: styles.section },
-                item.header && React__default.createElement(SectionHeader, { text: item.header }),
-                item.actions.map(function (action, index) { return (React__default.createElement(Action, __chunk_1.__assign({ sectionLabel: item.header, key: action.label, shouldFocus: key === 0 && index === 0 }, action))); }))); })))))));
-    function toggle(callbackPassthrough) {
-        return function (event) {
-            setVisible(!visible);
-            callbackPassthrough && callbackPassthrough(event);
-        };
-    }
-    function hide() {
-        setVisible(false);
-    }
-    function handleKeyboardShortcut(event) {
-        var key = event.key;
-        if (!visible)
-            return;
-        event.preventDefault();
-        event.stopPropagation();
-        key === "Escape" && hide();
-    }
-}
-function SectionHeader(_a) {
-    var text = _a.text;
-    return (React__default.createElement("div", { className: styles.sectionHeader, "aria-hidden": true },
-        React__default.createElement(index.Typography, { element: "h6", size: "small", textCase: "uppercase", textColor: "greyBlue", fontWeight: "bold" }, text)));
-}
-function Action(_a) {
-    var label = _a.label, sectionLabel = _a.sectionLabel, icon = _a.icon, onClick = _a.onClick, _b = _a.shouldFocus, shouldFocus = _b === void 0 ? false : _b;
-    var actionButtonRef = React.useRef();
-    React.useEffect(function () {
-        if (actionButtonRef.current && shouldFocus) {
-            actionButtonRef.current.focus();
-        }
-    }, [shouldFocus]);
-    return (React__default.createElement("button", { role: "menuitem", type: "button", className: styles.action, key: label, onClick: onClick, ref: actionButtonRef },
-        icon && (React__default.createElement("span", { className: styles.icon },
-            React__default.createElement(index$2.Icon, { name: icon }))),
-        React__default.createElement(index.Typography, { element: "span", size: "base", textColor: "greyBlueDark" },
-            sectionLabel && (React__default.createElement("span", { className: styles.screenReaderOnly }, sectionLabel)),
-            label)));
-}
 
-exports.Menu = Menu;
+exports.Menu = Menu.Menu;

package/dist/Menu-6a392af6.js

@@ -0,0 +1,134 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-5b50eb8e.js');
+var React = require('react');
+var uuid = require('uuid');
+var classnames = require('classnames');
+var framerMotion = require('framer-motion');
+var hooks = require('@jobber/hooks');
+var styleInject_es = require('./style-inject.es-dcee06b6.js');
+var Button = require('./Button-5b2f1636.js');
+var Typography = require('./Typography-7e542a72.js');
+var Icon = require('./Icon-d5ad1a6d.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
+
+var css = "._3dsZe-fIMb0ftQQAJf53tI * {\n  box-sizing: border-box;\n}\n\n._3dsZe-fIMb0ftQQAJf53tI {\n  display: inline-block;\n  position: relative;\n}\n\n._15jh7FtEcALDetgrjoV8HG {\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  z-index: var(--elevation-menu);\n  width: 100%;\n  max-height: 72vh;\n  padding: var(--space-small);\n  padding-bottom: calc(env(safe-area-inset-bottom) + var(--space-small));\n  border-radius: var(--radius-base) var(--radius-base) 0 0;\n  -webkit-overflow-scrolling: touch;\n  overflow-y: scroll;\n  background-color: var(--color-surface)\n}\n\n@media (min-width: 640px) {\n\n._15jh7FtEcALDetgrjoV8HG {\n    position: absolute;\n    left: auto;\n    width: calc(var(--base-unit) * 12.5);\n    box-shadow: var(--shadow-base);\n    padding: var(--space-small);\n    border: var(--border-base) solid var(--color-border);\n    border-radius: var(--radius-base);\n    overflow: auto\n}\n  }\n\n@media (min-width: 640px) {\n\n._15jh7FtEcALDetgrjoV8HG {\n    position: absolute;\n    left: auto;\n    width: calc(var(--base-unit) * 12.5);\n    box-shadow: var(--shadow-base);\n    padding: var(--space-small);\n    border: var(--border-base) solid var(--color-border);\n    border-radius: var(--radius-base);\n    overflow: auto\n}\n  }\n\n@media (--medium-screens) {\n\n._15jh7FtEcALDetgrjoV8HG {\n    position: absolute;\n    left: auto;\n    width: calc(var(--base-unit) * 12.5);\n    box-shadow: var(--shadow-base);\n    padding: var(--space-small);\n    border: var(--border-base) solid var(--color-border);\n    border-radius: var(--radius-base);\n    overflow: auto\n}\n  }\n\n@media (min-width: 640px) {\n\n._2S3J3IQ4JcMgnYjzx3A9AA {\n    bottom: 100%;\n    margin-bottom: var(--space-smallest)\n}\n  }\n\n@media (min-width: 640px) {\n\n._2S3J3IQ4JcMgnYjzx3A9AA {\n    bottom: 100%;\n    margin-bottom: var(--space-smallest)\n}\n  }\n\n@media (--medium-screens) {\n\n._2S3J3IQ4JcMgnYjzx3A9AA {\n    bottom: 100%;\n    margin-bottom: var(--space-smallest)\n}\n  }\n\n@media (min-width: 640px) {\n\n.qgoF1WJ8Cu39FVc3p_c8w {\n    top: 100%;\n    bottom: auto;\n    margin-top: var(--space-smallest)\n}\n  }\n\n@media (min-width: 640px) {\n\n.qgoF1WJ8Cu39FVc3p_c8w {\n    top: 100%;\n    bottom: auto;\n    margin-top: var(--space-smallest)\n}\n  }\n\n@media (--medium-screens) {\n\n.qgoF1WJ8Cu39FVc3p_c8w {\n    top: 100%;\n    bottom: auto;\n    margin-top: var(--space-smallest)\n}\n  }\n\n@media (min-width: 640px) {\n\n._2QwnAwwIXZuZReq2cUwEoX {\n    right: 0;\n    left: auto\n}\n  }\n\n@media (min-width: 640px) {\n\n._2QwnAwwIXZuZReq2cUwEoX {\n    right: 0;\n    left: auto\n}\n  }\n\n@media (--medium-screens) {\n\n._2QwnAwwIXZuZReq2cUwEoX {\n    right: 0;\n    left: auto\n}\n  }\n\n@media (min-width: 640px) {\n\n._2Bdz7gjSU8id-Og42er82U {\n    right: auto;\n    left: 0\n}\n  }\n\n@media (min-width: 640px) {\n\n._2Bdz7gjSU8id-Og42er82U {\n    right: auto;\n    left: 0\n}\n  }\n\n@media (--medium-screens) {\n\n._2Bdz7gjSU8id-Og42er82U {\n    right: auto;\n    left: 0\n}\n  }\n\n._1j-ztPLXQgH-5XOlXybf0- {\n  padding: var(--space-small) 0;\n  border-bottom: var(--border-base) dotted var(--color-border);\n}\n\n._1j-ztPLXQgH-5XOlXybf0-:first-of-type {\n  padding-top: 0;\n}\n\n._1j-ztPLXQgH-5XOlXybf0-:last-of-type {\n  padding-bottom: 0;\n  border-bottom: none;\n}\n\n.ecEGgRDm96wrHymIDR1FM {\n  padding: var(--space-small);\n}\n\n._1lmtkHVgn76IrVsqnqlOYh {\n  display: -ms-flexbox;\n  display: flex;\n  width: 100%;\n  padding: var(--space-small);\n  border: none;\n  border-radius: var(--radius-base);\n  background-color: transparent;\n  cursor: pointer;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n._1lmtkHVgn76IrVsqnqlOYh:hover,\n._1lmtkHVgn76IrVsqnqlOYh:focus {\n  background-color: var(--color-surface--hover);\n  outline-color: var(--color-focus);\n}\n\n.QMbGAf7Vb6_SM8qOIvLMc {\n  margin-right: var(--space-base);\n}\n\n._1DIimpm0iJewCr_4Ee8NTa {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: var(--elevation-menu);\n  background-color: var(--color-overlay)\n}\n\n@media (min-width: 640px) {\n\n._1DIimpm0iJewCr_4Ee8NTa {\n    background-color: transparent\n}\n  }\n\n@media (min-width: 640px) {\n\n._1DIimpm0iJewCr_4Ee8NTa {\n    background-color: transparent\n}\n  }\n\n@media (--medium-screens) {\n\n._1DIimpm0iJewCr_4Ee8NTa {\n    background-color: transparent\n}\n  }\n\n.qVvYE_6U6kPoQ4ms_2slA {\n  width: 100%;\n}\n\n._3Pk5uJMOz91YR7eDwLASEh {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n}\n";
+var styles = {"wrapper":"_3dsZe-fIMb0ftQQAJf53tI","menu":"_15jh7FtEcALDetgrjoV8HG","above":"_2S3J3IQ4JcMgnYjzx3A9AA","below":"qgoF1WJ8Cu39FVc3p_c8w","left":"_2QwnAwwIXZuZReq2cUwEoX","right":"_2Bdz7gjSU8id-Og42er82U","section":"_1j-ztPLXQgH-5XOlXybf0-","sectionHeader":"ecEGgRDm96wrHymIDR1FM","action":"_1lmtkHVgn76IrVsqnqlOYh","icon":"QMbGAf7Vb6_SM8qOIvLMc","overlay":"_1DIimpm0iJewCr_4Ee8NTa","fullWidth":"qVvYE_6U6kPoQ4ms_2slA","screenReaderOnly":"_3Pk5uJMOz91YR7eDwLASEh"};
+styleInject_es.styleInject(css);
+
+var variation = {
+    overlayStartStop: { opacity: 0 },
+    startOrStop: function (position) {
+        var y = 10;
+        if (position === "below")
+            y *= -1;
+        if (window.innerWidth < 640)
+            y = 150;
+        return { opacity: 0, y: y };
+    },
+    done: { opacity: 1, y: 0 },
+};
+// eslint-disable-next-line max-statements
+function Menu(_a) {
+    var _b;
+    var activator = _a.activator, items = _a.items;
+    var _c;
+    var _d = tslib_es6.__read(React.useState(false), 2), visible = _d[0], setVisible = _d[1];
+    var fullWidth = ((_c = activator === null || activator === void 0 ? void 0 : activator.props) === null || _c === void 0 ? void 0 : _c.fullWidth) || false;
+    var _e = tslib_es6.__read(React.useState({
+        vertical: "below",
+        horizontal: "right",
+    }), 2), position = _e[0], setPosition = _e[1];
+    var wrapperRef = React.createRef();
+    var buttonID = uuid.v1();
+    var menuID = uuid.v1();
+    hooks.useOnKeyDown(handleKeyboardShortcut, ["Escape"]);
+    React.useLayoutEffect(function () {
+        if (wrapperRef.current) {
+            var bounds = wrapperRef.current.getBoundingClientRect();
+            var newPosition = tslib_es6.__assign({}, position);
+            if (bounds.top <= window.innerHeight / 2) {
+                newPosition.vertical = "below";
+            }
+            else {
+                newPosition.vertical = "above";
+            }
+            if (bounds.left <= window.innerWidth / 2) {
+                newPosition.horizontal = "right";
+            }
+            else {
+                newPosition.horizontal = "left";
+            }
+            setPosition(newPosition);
+        }
+    }, [visible, fullWidth]);
+    if (!activator) {
+        activator = (React__default["default"].createElement(Button.Button, { fullWidth: true, label: "More Actions", icon: "more", type: "secondary" }));
+    }
+    var menuClasses = classnames__default["default"](styles.menu, position.vertical === "above" && styles.above, position.vertical === "below" && styles.below, position.horizontal === "left" && styles.left, position.horizontal === "right" && styles.right);
+    var wrapperClasses = classnames__default["default"](styles.wrapper, (_b = {},
+        _b[styles.fullWidth] = fullWidth,
+        _b));
+    return (React__default["default"].createElement("div", { className: wrapperClasses, ref: wrapperRef },
+        React__default["default"].cloneElement(activator, {
+            onClick: toggle(activator.props.onClick),
+            id: buttonID,
+            ariaControls: menuID,
+            ariaExpanded: visible,
+            ariaHaspopup: true,
+        }),
+        React__default["default"].createElement(framerMotion.AnimatePresence, null, visible && (React__default["default"].createElement(React__default["default"].Fragment, null,
+            React__default["default"].createElement(framerMotion.motion.div, { className: styles.overlay, onClick: toggle(), variants: variation, initial: "overlayStartStop", animate: "done", exit: "overlayStartStop", transition: {
+                    type: "tween",
+                    duration: 0.15,
+                } }),
+            React__default["default"].createElement(framerMotion.motion.div, { className: menuClasses, role: "menu", "aria-labelledby": buttonID, id: menuID, onClick: hide, variants: variation, initial: "startOrStop", animate: "done", exit: "startOrStop", custom: position, transition: {
+                    type: "tween",
+                    duration: 0.25,
+                } }, items.map(function (item, key) { return (React__default["default"].createElement("div", { key: key, className: styles.section },
+                item.header && React__default["default"].createElement(SectionHeader, { text: item.header }),
+                item.actions.map(function (action, index) { return (React__default["default"].createElement(Action, tslib_es6.__assign({ sectionLabel: item.header, key: action.label, shouldFocus: key === 0 && index === 0 }, action))); }))); })))))));
+    function toggle(callbackPassthrough) {
+        return function (event) {
+            setVisible(!visible);
+            callbackPassthrough && callbackPassthrough(event);
+        };
+    }
+    function hide() {
+        setVisible(false);
+    }
+    function handleKeyboardShortcut(event) {
+        var key = event.key;
+        if (!visible)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        key === "Escape" && hide();
+    }
+}
+function SectionHeader(_a) {
+    var text = _a.text;
+    return (React__default["default"].createElement("div", { className: styles.sectionHeader, "aria-hidden": true },
+        React__default["default"].createElement(Typography.Typography, { element: "h6", size: "small", textCase: "uppercase", textColor: "greyBlue", fontWeight: "bold" }, text)));
+}
+function Action(_a) {
+    var label = _a.label, sectionLabel = _a.sectionLabel, icon = _a.icon, onClick = _a.onClick, _b = _a.shouldFocus, shouldFocus = _b === void 0 ? false : _b;
+    var actionButtonRef = React.useRef();
+    React.useEffect(function () {
+        if (actionButtonRef.current && shouldFocus) {
+            actionButtonRef.current.focus();
+        }
+    }, [shouldFocus]);
+    return (React__default["default"].createElement("button", { role: "menuitem", type: "button", className: styles.action, key: label, onClick: onClick, ref: actionButtonRef },
+        icon && (React__default["default"].createElement("span", { className: styles.icon },
+            React__default["default"].createElement(Icon.Icon, { name: icon }))),
+        React__default["default"].createElement(Typography.Typography, { element: "span", size: "base", textColor: "greyBlueDark" },
+            sectionLabel && (React__default["default"].createElement("span", { className: styles.screenReaderOnly }, sectionLabel)),
+            label)));
+}
+
+exports.Menu = Menu;

package/dist/Modal/Modal.d.ts

@@ -1,22 +1,22 @@
-import React, { ReactNode } from "react";
-import sizes from "./Sizes.css";
-import { ButtonProps } from "../Button";
-interface ModalProps {
-    /**
-     * @default false
-     */
-    readonly title?: string;
-    readonly open?: boolean;
-    readonly size?: keyof typeof sizes;
-    /**
-     * @default true
-     */
-    readonly dismissible?: boolean;
-    readonly children: ReactNode;
-    readonly primaryAction?: ButtonProps;
-    readonly secondaryAction?: ButtonProps;
-    readonly tertiaryAction?: ButtonProps;
-    onRequestClose?(): void;
-}
-export declare function Modal({ open, title, size, dismissible, children, primaryAction, secondaryAction, tertiaryAction, onRequestClose, }: ModalProps): React.ReactPortal;
-export {};
+import React, { ReactNode } from "react";
+import sizes from "./Sizes.css";
+import { ButtonProps } from "../Button";
+interface ModalProps {
+    /**
+     * @default false
+     */
+    readonly title?: string;
+    readonly open?: boolean;
+    readonly size?: keyof typeof sizes;
+    /**
+     * @default true
+     */
+    readonly dismissible?: boolean;
+    readonly children: ReactNode;
+    readonly primaryAction?: ButtonProps;
+    readonly secondaryAction?: ButtonProps;
+    readonly tertiaryAction?: ButtonProps;
+    onRequestClose?(): void;
+}
+export declare function Modal({ open, title, size, dismissible, children, primaryAction, secondaryAction, tertiaryAction, onRequestClose, }: ModalProps): React.ReactPortal;
+export {};

package/dist/Modal/index.d.ts

@@ -1 +1 @@
-export { Modal } from "./Modal";
+export { Modal } from "./Modal";