@homebound/beam 2.378.1 → 2.379.1

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

@@ -1,57 +0,0 @@
-import { MutableRefObject, PropsWithChildren, ReactNode } from "react";
-import { Only, Xss } from "../../Css";
-export type ModalSize = "sm" | "md" | "lg" | "xl" | "xxl";
-export interface ModalProps {
-    /**
-     * The modal size, defaults to `md`.
-     *
-     * If setting just `size: sm`, we'll use default a height. If the designer requests a specific
-     * height, i.e. to pixel-perfect match the content, then use `size: { width: ..., height: pixels }`.
-     */
-    size?: ModalSize | {
-        width: ModalSize;
-        height: number;
-    };
-    /** The content of the modal; for consistent styling use a fragment with `<ModalBody />` and `<ModalFooter />`. */
-    content: ReactNode;
-    /** Force scrolling i.e. to avoid content jumping left/right as scroll bar goes away/comes back. */
-    forceScrolling?: boolean;
-    /** Adds a callback that is called _after_ close has definitely happened. */
-    onClose?: VoidFunction;
-    /** Imperative API for interacting with the Modal */
-    api?: MutableRefObject<ModalApi | undefined>;
-    /** Adds a border for the header. */
-    drawHeaderBorder?: boolean;
-    /**
-     * Defaults to `true`
-     * Renders `x` icon and closes modal when users click outside of it.
-     *
-     * When false, relies on you to provide a way to close the modal, i.e. a cancel or confirm button.
-     * Useful if you definitely need to force the user to make a choice.
-     * */
-    allowClosing?: boolean;
-}
-export type ModalApi = {
-    setSize: (size: ModalProps["size"]) => void;
-};
-/**
- * Internal component for displaying a Modal; see `useModal` for the public API.
- *
- * Provides underlay, modal container, and header. Will disable scrolling of page under the modal.
- */
-export declare function Modal(props: ModalProps): import("@emotion/react/jsx-runtime").JSX.Element;
-export declare function ModalHeader({ children }: {
-    children: ReactNode;
-}): JSX.Element;
-/** Provides consistent styling and the scrolling behavior for a modal's primary content. */
-export declare function ModalBody({ children, virtualized, }: PropsWithChildren<{
-    virtualized?: boolean;
-}>): JSX.Element;
-type ModalFooterXss = Xss<"justifyContent" | "alignItems">;
-/** Provides consistent styling for modal footers, i.e. where actions are placed. */
-export declare function ModalFooter<X extends Only<ModalFooterXss, X>>({ children, xss, }: {
-    children: ReactNode;
-    xss?: X;
-}): JSX.Element;
-export {};
-//# sourceMappingURL=Modal.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,SAAS,EAA4C,MAAM,OAAO,CAAC;AAOjH,OAAO,EAAO,IAAI,EAAE,GAAG,EAAE,kBAAgB;AAKzC,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;AAE1D,MAAM,WAAW,UAAU;IACzB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG;QAAE,KAAK,EAAE,SAAS,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IACxD,kHAAkH;IAClH,OAAO,EAAE,SAAS,CAAC;IACnB,mGAAmG;IACnG,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,4EAA4E;IAC5E,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,oDAAoD;IACpD,GAAG,CAAC,EAAE,gBAAgB,CAAC,QAAQ,GAAG,SAAS,CAAC,CAAC;IAC7C,oCAAoC;IACpC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;;;;SAMK;IACL,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,MAAM,MAAM,QAAQ,GAAG;IACrB,OAAO,EAAE,CAAC,IAAI,EAAE,UAAU,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;CAC7C,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,oDAqHtC;AAED,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,GAAG,GAAG,CAAC,OAAO,CAG9E;AAED,4FAA4F;AAC5F,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,WAAmB,GACpB,EAAE,iBAAiB,CAAC;IAAE,WAAW,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC,GAAG,GAAG,CAAC,OAAO,CAU5D;AAED,KAAK,cAAc,GAAG,GAAG,CAAC,gBAAgB,GAAG,YAAY,CAAC,CAAC;AAE3D,oFAAoF;AACpF,wBAAgB,WAAW,CAAC,CAAC,SAAS,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC,EAAE,EAC7D,QAAQ,EACR,GAAG,GACJ,EAAE;IACD,QAAQ,EAAE,SAAS,CAAC;IACpB,GAAG,CAAC,EAAE,CAAC,CAAC;CACT,GAAG,GAAG,CAAC,OAAO,CASd"}

package/dist/components/Modal/Modal.js

@@ -1,122 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Modal = Modal;
-exports.ModalHeader = ModalHeader;
-exports.ModalBody = ModalBody;
-exports.ModalFooter = ModalFooter;
-const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-const utils_1 = require("@react-aria/utils");
-const react_1 = require("react");
-const react_aria_1 = require("react-aria");
-const react_dom_1 = require("react-dom");
-const components_1 = require("..");
-const BeamContext_1 = require("../BeamContext");
-const IconButton_1 = require("../IconButton");
-const useModal_1 = require("./useModal");
-const Css_1 = require("../../Css");
-const hooks_1 = require("../../hooks");
-const utils_2 = require("../../utils");
-const ModalContext_1 = require("./ModalContext");
-/**
- * Internal component for displaying a Modal; see `useModal` for the public API.
- *
- * Provides underlay, modal container, and header. Will disable scrolling of page under the modal.
- */
-function Modal(props) {
-    const { size = "md", content, forceScrolling, api, drawHeaderBorder = false, allowClosing = true } = props;
-    const isFixedHeight = typeof size !== "string";
-    const ref = (0, react_1.useRef)(null);
-    const { modalBodyDiv, modalFooterDiv, modalHeaderDiv } = (0, BeamContext_1.useBeamContext)();
-    const { closeModal } = (0, useModal_1.useModal)();
-    const { overlayProps, underlayProps } = (0, react_aria_1.useOverlay)({
-        ...props,
-        isOpen: true,
-        onClose: closeModal,
-        isDismissable: true,
-        shouldCloseOnInteractOutside: (el) => {
-            // Do not close the Modal if the user is interacting with the Tribute mentions dropdown (via RichTextField) or with another 3rd party dialog (such as a lightbox) on top of it.
-            return (allowClosing &&
-                !(el.closest(".tribute-container") || el.closest("[role='dialog']") || el.closest("[role='alert']")));
-        },
-    }, ref);
-    const { modalProps } = (0, react_aria_1.useModal)();
-    const { dialogProps, titleProps } = (0, react_aria_1.useDialog)({ role: "dialog" }, ref);
-    const [[width, height], setSize] = (0, react_1.useState)(getSize(size));
-    const modalBodyRef = (0, react_1.useRef)(null);
-    const modalFooterRef = (0, react_1.useRef)(null);
-    const modalHeaderRef = (0, react_1.useRef)(null);
-    const testId = (0, utils_2.useTestIds)({}, testIdPrefix);
-    (0, react_aria_1.usePreventScroll)();
-    const { sm } = (0, hooks_1.useBreakpoint)();
-    if (api) {
-        api.current = { setSize: (size = "md") => setSize(getSize(size)) };
-    }
-    const [hasScroll, setHasScroll] = (0, react_1.useState)(forceScrolling ?? false);
-    (0, utils_1.useResizeObserver)({
-        ref: modalBodyRef,
-        onResize: (0, react_1.useCallback)(() => {
-            const target = modalBodyRef.current;
-            if (forceScrolling === undefined && !isFixedHeight) {
-                setHasScroll(target.scrollHeight > target.clientHeight);
-            }
-        }, 
-        // TODO: validate this eslint-disable. It was automatically ignored as part of https://app.shortcut.com/homebound-team/story/40033/enable-react-hooks-exhaustive-deps-for-react-projects
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-        []),
-    });
-    // Even though we use raw-divs for the createPortal calls, we do actually need to
-    // use refs + useEffect to stitch those raw divs back into the React component tree.
-    (0, react_1.useEffect)(() => {
-        modalHeaderRef.current.appendChild(modalHeaderDiv);
-        modalBodyRef.current.appendChild(modalBodyDiv);
-        modalFooterRef.current.appendChild(modalFooterDiv);
-    }, 
-    // TODO: validate this eslint-disable. It was automatically ignored as part of https://app.shortcut.com/homebound-team/story/40033/enable-react-hooks-exhaustive-deps-for-react-projects
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [modalBodyRef, modalFooterRef, modalHeaderRef]);
-    return ((0, jsx_runtime_1.jsx)(ModalContext_1.ModalProvider, { children: (0, jsx_runtime_1.jsx)(react_aria_1.OverlayContainer, { children: (0, jsx_runtime_1.jsx)(components_1.AutoSaveStatusProvider, { children: (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.underlay.z4.$, ...underlayProps, ...testId.underlay, children: (0, jsx_runtime_1.jsx)(react_aria_1.FocusScope, { contain: true, restoreFocus: true, autoFocus: true, children: (0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.br24.bgWhite.bshModal.oh
-                                .maxh("90vh")
-                                .df.fdc.wPx(width)
-                                .mhPx(defaultMinHeight)
-                                .if(isFixedHeight)
-                                .hPx(height)
-                                .if(sm)
-                                .add("height", "100dvh")
-                                .add("width", "100dvw")
-                                .maxh("none").br0.$, ref: ref, ...overlayProps, ...dialogProps, ...modalProps, ...testId, children: [(0, jsx_runtime_1.jsxs)("header", { css: Css_1.Css.df.fdrr.p3.fs0.if(drawHeaderBorder).bb.bcGray200.$, children: [(0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.fs0.pl1.$, children: allowClosing && (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { icon: "x", onClick: closeModal, ...testId.titleClose }) }), (0, jsx_runtime_1.jsx)("h1", { css: Css_1.Css.fg1.xl2Sb.gray900.$, ref: modalHeaderRef, ...titleProps, ...testId.title })] }), (0, jsx_runtime_1.jsx)("main", { ref: modalBodyRef, css: Css_1.Css.fg1.oya.if(hasScroll).bb.bcGray200.if(!!forceScrolling).oys.$, children: content }), (0, jsx_runtime_1.jsx)("footer", { css: Css_1.Css.fs0.$, children: (0, jsx_runtime_1.jsx)("div", { ref: modalFooterRef }) })] }) }) }) }) }) }));
-}
-function ModalHeader({ children }) {
-    const { modalHeaderDiv } = (0, BeamContext_1.useBeamContext)();
-    return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children }), modalHeaderDiv);
-}
-/** Provides consistent styling and the scrolling behavior for a modal's primary content. */
-function ModalBody({ children, virtualized = false, }) {
-    const { modalBodyDiv } = (0, BeamContext_1.useBeamContext)();
-    const testId = (0, utils_2.useTestIds)({}, testIdPrefix);
-    return (0, react_dom_1.createPortal)(
-    // If `virtualized`, then we are expecting the `children` will handle their own scrollbar, so have the overflow hidden and adjust padding
-    (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.h100.if(virtualized).oh.pl3.else.px3.$, ...testId.content, children: children }), modalBodyDiv);
-}
-/** Provides consistent styling for modal footers, i.e. where actions are placed. */
-function ModalFooter({ children, xss, }) {
-    const { modalFooterDiv } = (0, BeamContext_1.useBeamContext)();
-    const testId = (0, utils_2.useTestIds)({}, testIdPrefix);
-    return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)("div", { css: { ...Css_1.Css.p3.df.aic.jcfe.gap1.$, ...xss }, ...testId.footer, children: children }), modalFooterDiv);
-}
-const testIdPrefix = "modal";
-const widths = {
-    sm: 320,
-    md: 480,
-    lg: 640,
-    xl: 800,
-    xxl: 900,
-};
-const defaultMinHeight = 204;
-function getSize(size) {
-    if (typeof size === "string") {
-        return [widths[size], defaultMinHeight];
-    }
-    else {
-        return [widths[size.width], size.height];
-    }
-}

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

@@ -1,12 +0,0 @@
-import { ReactNode } from "react";
-interface ModalContextState {
-    inModal: boolean;
-}
-export declare const ModalContext: import("react").Context<ModalContextState>;
-interface ModalProviderProps {
-    children: ReactNode;
-}
-export declare function ModalProvider({ children }: ModalProviderProps): import("@emotion/react/jsx-runtime").JSX.Element;
-export declare function useModalContext(): ModalContextState;
-export {};
-//# sourceMappingURL=ModalContext.d.ts.map

package/dist/components/Modal/ModalContext.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ModalContext.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/ModalContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,SAAS,EAAuB,MAAM,OAAO,CAAC;AAEtE,UAAU,iBAAiB;IACzB,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,eAAO,MAAM,YAAY,4CAAuD,CAAC;AAEjF,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,EAAE,kBAAkB,oDAG7D;AAED,wBAAgB,eAAe,IAAI,iBAAiB,CAEnD"}

package/dist/components/Modal/ModalContext.js

@@ -1,15 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ModalContext = void 0;
-exports.ModalProvider = ModalProvider;
-exports.useModalContext = useModalContext;
-const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-const react_1 = require("react");
-exports.ModalContext = (0, react_1.createContext)({ inModal: false });
-function ModalProvider({ children }) {
-    const value = (0, react_1.useMemo)(() => ({ inModal: true }), []);
-    return (0, jsx_runtime_1.jsx)(exports.ModalContext.Provider, { value: value, children: children });
-}
-function useModalContext() {
-    return (0, react_1.useContext)(exports.ModalContext);
-}

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

@@ -1,30 +0,0 @@
-import { ModalProps } from "./Modal";
-export interface OpenModalProps {
-    /** The custom modal content to show. */
-    children: JSX.Element;
-    /** The size to use. */
-    size?: ModalProps["size"];
-    /** Whether to force the modal to stay open. This is useful for stories where ruler/tape extensions cause the modal to close. */
-    keepOpen?: boolean;
-}
-/**
- * A component for testing open modals in stories and unit tests.
- *
- * Currently, calling `render(<ModalComponent />)` in a test currently doesn't work, because
- * nothing has called `useModal` to get the header & footer mounted into the DOM.
- *
- * So instead tests can call:
- *
- * ```tsx
- * render(
- *   <OpenModal>
- *     <ModalComponent />
- *   </OpenModal>
- * );
- * ```
- *
- * And `OpenModal` will do a boilerplate `openModal` call, so that the content
- * shows up in the DOM as expected.
- */
-export declare function OpenModal(props: OpenModalProps): JSX.Element;
-//# sourceMappingURL=OpenModal.d.ts.map

package/dist/components/Modal/OpenModal.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"OpenModal.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/OpenModal.tsx"],"names":[],"mappings":"AACA,OAAO,EAAS,UAAU,EAAE,gBAAmC;AAG/D,MAAM,WAAW,cAAc;IAC7B,wCAAwC;IACxC,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC;IACtB,uBAAuB;IACvB,IAAI,CAAC,EAAE,UAAU,CAAC,MAAM,CAAC,CAAC;IAC1B,gIAAgI;IAChI,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,GAAG,GAAG,CAAC,OAAO,CAa5D"}

package/dist/components/Modal/OpenModal.js

@@ -1,41 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.OpenModal = OpenModal;
-const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-const react_1 = require("react");
-const Modal_1 = require("./Modal");
-const useModal_1 = require("./useModal");
-/**
- * A component for testing open modals in stories and unit tests.
- *
- * Currently, calling `render(<ModalComponent />)` in a test currently doesn't work, because
- * nothing has called `useModal` to get the header & footer mounted into the DOM.
- *
- * So instead tests can call:
- *
- * ```tsx
- * render(
- *   <OpenModal>
- *     <ModalComponent />
- *   </OpenModal>
- * );
- * ```
- *
- * And `OpenModal` will do a boilerplate `openModal` call, so that the content
- * shows up in the DOM as expected.
- */
-function OpenModal(props) {
-    const { openModal } = (0, useModal_1.useModal)();
-    const { size, children, keepOpen } = props;
-    (0, react_1.useEffect)(() => {
-        if (!keepOpen) {
-            openModal({ size, content: children });
-        }
-    }, [keepOpen, openModal, size, children]);
-    if (keepOpen) {
-        return (0, jsx_runtime_1.jsx)(Modal_1.Modal, { size: size, content: children });
-    }
-    else {
-        return (0, jsx_runtime_1.jsx)("div", { children: "dummy content" });
-    }
-}

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

@@ -1,14 +0,0 @@
-export interface TestModalContentProps {
-    initNumSentences?: number;
-    showLeftAction?: boolean;
-    withTag?: boolean;
-    withDateField?: boolean;
-    withTextArea?: boolean;
-    withTextField?: boolean;
-    allowClosing?: boolean;
-}
-/** A fake modal content component that we share across the modal and superdrawer stories. */
-export declare function TestModalContent(props: TestModalContentProps): import("@emotion/react/jsx-runtime").JSX.Element;
-export declare function TestModalFilterTable(): import("@emotion/react/jsx-runtime").JSX.Element;
-export declare function VirtualizedTable(): import("@emotion/react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=TestModalContent.d.ts.map

package/dist/components/Modal/TestModalContent.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"TestModalContent.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/TestModalContent.tsx"],"names":[],"mappings":"AAcA,MAAM,WAAW,qBAAqB;IACpC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,6FAA6F;AAC7F,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,oDA+E5D;AAED,wBAAgB,oBAAoB,qDAenC;AAED,wBAAgB,gBAAgB,qDAmC/B"}

package/dist/components/Modal/TestModalContent.js

@@ -1,60 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TestModalContent = TestModalContent;
-exports.TestModalFilterTable = TestModalFilterTable;
-exports.VirtualizedTable = VirtualizedTable;
-const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-const addon_actions_1 = require("@storybook/addon-actions");
-const react_1 = require("react");
-const Button_1 = require("../Button");
-const Layout_1 = require("../Layout");
-const Modal_1 = require("./Modal");
-const useModal_1 = require("./useModal");
-const Snackbar_1 = require("../Snackbar");
-const Table_1 = require("../Table");
-const Tag_1 = require("../Tag");
-const Css_1 = require("../../Css");
-const formStateDomain_1 = require("../../forms/formStateDomain");
-const inputs_1 = require("../../inputs");
-/** A fake modal content component that we share across the modal and superdrawer stories. */
-function TestModalContent(props) {
-    const { closeModal } = (0, useModal_1.useModal)();
-    const { initNumSentences = 1, showLeftAction, withDateField } = props;
-    const [numSentences, setNumSentences] = (0, react_1.useState)(initNumSentences);
-    const [primaryDisabled, setPrimaryDisabled] = (0, react_1.useState)(false);
-    const [leftActionDisabled, setLeftActionDisabled] = (0, react_1.useState)(false);
-    const [date, setDate] = (0, react_1.useState)(formStateDomain_1.jan1);
-    const [internalValue, setValue] = (0, react_1.useState)("");
-    const { triggerNotice } = (0, Snackbar_1.useSnackbar)();
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Modal_1.ModalHeader, { children: props.withTag ? ((0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.aic.$, children: [(0, jsx_runtime_1.jsx)("span", { children: "Modal Title with Tag" }), (0, jsx_runtime_1.jsx)(Tag_1.Tag, { text: "In progress", type: "info", xss: Css_1.Css.ml1.$ })] })) : props.withTextField ? ((0, jsx_runtime_1.jsx)(inputs_1.TextField, { label: "Title", placeholder: "Test title", value: internalValue, onChange: (v) => setValue(v), labelStyle: "hidden", onEscapeBubble: true, borderless: true, xss: Css_1.Css.xl.$ })) : props.withTextArea ? ((0, jsx_runtime_1.jsx)(inputs_1.TextAreaField, { label: "Title", placeholder: "Test title", value: internalValue, onChange: (v) => setValue(v), preventNewLines: true, labelStyle: "hidden", borderless: true, xss: Css_1.Css.xl.$ })) : ("The title of the modal that might wrap") }), (0, jsx_runtime_1.jsxs)(Modal_1.ModalBody, { children: [(0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.gap1.fdc.aifs.$, children: [(0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.gap1.$, children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { label: "More", onClick: () => setNumSentences(numSentences + 2) }), (0, jsx_runtime_1.jsx)(Button_1.Button, { label: "Clear", onClick: () => setNumSentences(0) }), (0, jsx_runtime_1.jsx)(Button_1.Button, { label: "Primary", onClick: () => setPrimaryDisabled(!primaryDisabled) }), (0, jsx_runtime_1.jsx)(Button_1.Button, { label: "Trigger Snackbar", onClick: () => triggerNotice({ message: "Snackbar message" }) }), showLeftAction && ((0, jsx_runtime_1.jsx)(Button_1.Button, { label: "Left Action", onClick: () => setLeftActionDisabled(!leftActionDisabled) }))] }), (0, jsx_runtime_1.jsx)("p", { children: "The body content of the modal. This content can be anything!".repeat(numSentences) })] }), withDateField && (0, jsx_runtime_1.jsx)(inputs_1.DateField, { value: date, label: "Date", onChange: setDate })] }), (0, jsx_runtime_1.jsxs)(Modal_1.ModalFooter, { xss: showLeftAction ? Css_1.Css.jcsb.$ : undefined, children: [showLeftAction && ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(Button_1.Button, { label: "Clear", onClick: (0, addon_actions_1.action)("Clear Action"), variant: "tertiary", disabled: leftActionDisabled }) })), (0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.gap1.$, children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { label: "Cancel", onClick: closeModal, variant: "tertiary" }), (0, jsx_runtime_1.jsx)(Button_1.Button, { label: "Apply", onClick: () => {
-                                    (0, addon_actions_1.action)("Primary action");
-                                    !props?.allowClosing && closeModal();
-                                }, disabled: primaryDisabled })] })] })] }));
-}
-function TestModalFilterTable() {
-    const [filter, setFilter] = (0, react_1.useState)();
-    const { closeModal } = (0, useModal_1.useModal)();
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Modal_1.ModalHeader, { children: "Filterable table" }), (0, jsx_runtime_1.jsxs)(Modal_1.ModalBody, { children: [(0, jsx_runtime_1.jsx)(inputs_1.TextField, { label: "Search", value: filter, onChange: setFilter }), (0, jsx_runtime_1.jsx)(Table_1.GridTable, { columns: columns, rows: rows, filter: filter, xss: Css_1.Css.mt1.$ })] }), (0, jsx_runtime_1.jsx)(Modal_1.ModalFooter, { children: (0, jsx_runtime_1.jsx)(Button_1.Button, { label: "Cancel", onClick: closeModal, variant: "tertiary" }) })] }));
-}
-function VirtualizedTable() {
-    const [filter, setFilter] = (0, react_1.useState)();
-    const { closeModal } = (0, useModal_1.useModal)();
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Modal_1.ModalHeader, { children: "Filterable table" }), (0, jsx_runtime_1.jsx)(Modal_1.ModalBody, { virtualized: true, children: (0, jsx_runtime_1.jsxs)(Layout_1.ScrollableParent, { xss: Css_1.Css.h100.$, children: [(0, jsx_runtime_1.jsx)(inputs_1.TextField, { label: "Search", value: filter, onChange: setFilter }), (0, jsx_runtime_1.jsx)(Layout_1.ScrollableContent, { virtualized: true, children: (0, jsx_runtime_1.jsx)(Table_1.GridTable, { as: "virtual", columns: columns, rows: rows, filter: filter, xss: Css_1.Css.mt1.$ }) })] }) }), (0, jsx_runtime_1.jsx)(Modal_1.ModalFooter, { children: (0, jsx_runtime_1.jsx)(Button_1.Button, { label: "Cancel", onClick: closeModal, variant: "tertiary" }) })] }));
-}
-const users = [
-    { id: "1", name: "Iron Man", role: "Leader" },
-    { id: "2", name: "Captain America", role: "Carries the cool shield" },
-    { id: "3", name: "Thor", role: "Hammer thrower" },
-    { id: "4", name: "Hulk", role: "The Muscle" },
-    { id: "5", name: "Black Widow", role: "Being sneaky" },
-    { id: "6", name: "Ant Man", role: "Helps Wasp" },
-    { id: "7", name: "Wasp", role: "Does the small jobs" },
-    { id: "8", name: "Black Panther", role: "Also being sneaky" },
-    { id: "9", name: "Captain Marvel", role: "Does it all" },
-    { id: "10", name: "Doctor Strange", role: "Doctor" },
-];
-const rows = [Table_1.simpleHeader, ...users.map((u) => ({ kind: "data", id: u.id, data: u }))];
-const columns = [
-    { header: () => "Name", data: ({ name }) => name },
-    { header: () => "Role", data: ({ role }) => role },
-];

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

@@ -1,5 +0,0 @@
-export { ModalBody, ModalFooter, ModalHeader } from "./Modal";
-export type { ModalProps, ModalSize } from "./Modal";
-export { OpenModal } from "./OpenModal";
-export * from "./useModal";
-//# sourceMappingURL=index.d.ts.map

package/dist/components/Modal/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAC9D,YAAY,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AACrD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,cAAc,YAAY,CAAC"}

package/dist/components/Modal/index.js

@@ -1,24 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.OpenModal = exports.ModalHeader = exports.ModalFooter = exports.ModalBody = void 0;
-var Modal_1 = require("./Modal");
-Object.defineProperty(exports, "ModalBody", { enumerable: true, get: function () { return Modal_1.ModalBody; } });
-Object.defineProperty(exports, "ModalFooter", { enumerable: true, get: function () { return Modal_1.ModalFooter; } });
-Object.defineProperty(exports, "ModalHeader", { enumerable: true, get: function () { return Modal_1.ModalHeader; } });
-var OpenModal_1 = require("./OpenModal");
-Object.defineProperty(exports, "OpenModal", { enumerable: true, get: function () { return OpenModal_1.OpenModal; } });
-__exportStar(require("./useModal"), exports);

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

@@ -1,11 +0,0 @@
-import { CheckFn } from "../../types";
-import { ModalProps } from "./Modal";
-export interface UseModalHook {
-    openModal: (props: ModalProps) => void;
-    closeModal: VoidFunction;
-    addCanClose: (canClose: CheckFn) => void;
-    setSize: (size: ModalProps["size"]) => void;
-    inModal: boolean;
-}
-export declare function useModal(): UseModalHook;
-//# sourceMappingURL=useModal.d.ts.map

package/dist/components/Modal/useModal.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useModal.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/useModal.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,EAAE,oBAAkB;AAEpC,OAAO,EAAY,UAAU,EAAE,MAAM,SAAS,CAAC;AAG/C,MAAM,WAAW,YAAY;IAC3B,SAAS,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACvC,UAAU,EAAE,YAAY,CAAC;IACzB,WAAW,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,OAAO,EAAE,CAAC,IAAI,EAAE,UAAU,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;IAC5C,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,wBAAgB,QAAQ,IAAI,YAAY,CA6CvC"}

package/dist/components/Modal/useModal.js

@@ -1,50 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useModal = useModal;
-const react_1 = require("react");
-const BeamContext_1 = require("../BeamContext");
-const utils_1 = require("../../utils");
-const ModalContext_1 = require("./ModalContext");
-function useModal() {
-    const { modalState, modalCanCloseChecks } = (0, BeamContext_1.useBeamContext)();
-    const { inModal } = (0, ModalContext_1.useModalContext)();
-    const lastCanClose = (0, react_1.useRef)();
-    const api = (0, react_1.useRef)();
-    (0, react_1.useEffect)(() => {
-        return () => {
-            modalCanCloseChecks.current = modalCanCloseChecks.current.filter((c) => c !== lastCanClose.current);
-        };
-    }, [modalCanCloseChecks]);
-    return (0, react_1.useMemo)(() => ({
-        openModal(props) {
-            // TODO Check already open?
-            // TODO Check can leave?
-            modalState.current = { ...props, api };
-        },
-        closeModal() {
-            // TODO: Should remove checks
-            for (const canCloseModal of modalCanCloseChecks.current) {
-                if (!canCloseModal()) {
-                    return;
-                }
-            }
-            (0, utils_1.maybeCall)(modalState.current?.onClose);
-            modalState.current = undefined;
-        },
-        // TODO: Rename as a breaking change
-        addCanClose(canClose) {
-            modalCanCloseChecks.current = [
-                // Only allow one canClose per component at a time; this lets the caller avoid useMemo'ing their lambda
-                ...modalCanCloseChecks.current.filter((c) => c !== lastCanClose.current),
-                canClose,
-            ];
-            lastCanClose.current = canClose;
-        },
-        setSize(size) {
-            if (modalState.current && modalState.current.api?.current) {
-                modalState.current.api.current.setSize(size);
-            }
-        },
-        inModal,
-    }), [inModal, modalState, modalCanCloseChecks]);
-}

package/dist/components/NavLink.d.ts

@@ -1,32 +0,0 @@
-import { AriaButtonProps } from "@react-types/button";
-import { RefObject } from "react";
-import type { IconKey } from "./";
-import { Properties } from "../Css";
-import { BeamFocusableProps } from "../interfaces";
-export interface NavLinkProps extends BeamFocusableProps {
-    /** active indicates the user is on the current page */
-    active?: boolean;
-    disabled?: boolean;
-    /** if `href` isn't provided, it is treated as a <button> */
-    href?: string;
-    label: string;
-    icon?: IconKey;
-    variant: NavLinkVariant;
-    openInNew?: boolean;
-    contrast?: boolean;
-    /** HTML attributes to apply to the button element when it is being used to trigger a menu. */
-    menuTriggerProps?: AriaButtonProps;
-    buttonRef?: RefObject<HTMLElement>;
-}
-type NavLinkVariant = "side" | "global";
-export declare function NavLink(props: NavLinkProps): JSX.Element;
-export declare function getNavLinkStyles(variant: NavLinkVariant, contrast: boolean): {
-    baseStyles: Properties;
-    hoverStyles: Properties;
-    disabledStyles: Properties;
-    focusRingStyles: Properties;
-    activeStyles: Properties;
-    pressedStyles: Properties;
-};
-export {};
-//# sourceMappingURL=NavLink.d.ts.map

package/dist/components/NavLink.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"NavLink.d.ts","sourceRoot":"","sources":["../../src/components/NavLink.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,SAAS,EAAW,MAAM,OAAO,CAAC;AAE3C,OAAO,KAAK,EAAE,OAAO,EAAE,WAAuB;AAE9C,OAAO,EAAO,UAAU,EAAE,eAAgB;AAE1C,OAAO,EAAE,kBAAkB,EAAE,sBAAuB;AAIpD,MAAM,WAAW,YAAa,SAAQ,kBAAkB;IACtD,uDAAuD;IACvD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4DAA4D;IAC5D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,EAAE,cAAc,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8FAA8F;IAC9F,gBAAgB,CAAC,EAAE,eAAe,CAAC;IACnC,SAAS,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC,CAAC;CACpC;AAED,KAAK,cAAc,GAAG,MAAM,GAAG,QAAQ,CAAC;AAExC,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,eAmD1C;AAED,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,cAAc,EAAE,QAAQ,EAAE,OAAO;gBAS3D,UAAU;iBACT,UAAU;oBACP,UAAU;qBACT,UAAU;kBACb,UAAU;mBACT,UAAU;EAZ5B"}

package/dist/components/NavLink.js

@@ -1,62 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.NavLink = NavLink;
-exports.getNavLinkStyles = getNavLinkStyles;
-const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-const react_1 = require("react");
-const react_aria_1 = require("react-aria");
-const components_1 = require("./");
-const Css_1 = require("../Css");
-const useGetRef_1 = require("../hooks/useGetRef");
-const getInteractiveElement_1 = require("../utils/getInteractiveElement");
-const Icon_1 = require("./Icon");
-function NavLink(props) {
-    const { disabled: isDisabled, label, openInNew, contrast = false, menuTriggerProps, buttonRef, ...otherProps } = props;
-    const ariaProps = { children: label, isDisabled, ...menuTriggerProps, ...otherProps };
-    const { href, active = false, icon = false, variant } = ariaProps;
-    const ref = (0, useGetRef_1.useGetRef)(buttonRef);
-    const { buttonProps, isPressed } = (0, react_aria_1.useButton)({ ...ariaProps, elementType: href ? "a" : "button" }, ref);
-    const { hoverProps, isHovered } = (0, react_aria_1.useHover)({ isDisabled });
-    const { isFocusVisible, focusProps } = (0, react_aria_1.useFocusRing)(ariaProps);
-    const { baseStyles, activeStyles, focusRingStyles, hoverStyles, disabledStyles, pressedStyles } = (0, react_1.useMemo)(() => getNavLinkStyles(variant, contrast), [variant, contrast]);
-    const linkAttributes = {
-        className: components_1.navLink,
-        ref: ref,
-        /** does not focus if disabled */
-        tabIndex: isDisabled ? -1 : 0,
-        /** aria-current represents the current page within a set of pages */
-        "aria-current": active ? "page" : undefined,
-        css: {
-            ...baseStyles,
-            ...(active && activeStyles),
-            ...(isDisabled && disabledStyles),
-            ...(isFocusVisible && focusRingStyles),
-            ...(isHovered && hoverStyles),
-            ...(isPressed && pressedStyles),
-        },
-    };
-    const linkContent = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [label, icon && ((0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.ml1.$, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: icon }) }))] }));
-    return (0, getInteractiveElement_1.getButtonOrLink)(linkContent, href, { ...(0, react_aria_1.mergeProps)(buttonProps, focusProps, hoverProps), ...linkAttributes });
-}
-function getNavLinkStyles(variant, contrast) {
-    return navLinkVariantStyles(contrast)[variant];
-}
-const baseStyles = Css_1.Css.df.aic.hPx(32).pyPx(6).px1.br4.smMd.outline0.$;
-const navLinkVariantStyles = (contrast) => ({
-    side: {
-        baseStyles: { ...baseStyles, ...Css_1.Css.gray700.if(contrast).gray600.$ },
-        activeStyles: Css_1.Css.blue700.bgBlue50.if(contrast).white.bgGray700.$,
-        disabledStyles: Css_1.Css.gray400.cursorNotAllowed.if(contrast).gray800.$,
-        focusRingStyles: Css_1.Css.bgBlue50.bshFocus.if(contrast).bgGray700.white.$,
-        hoverStyles: Css_1.Css.gray700.bgGray100.if(contrast).bgGray800.gray600.$,
-        pressedStyles: Css_1.Css.gray700.bgGray200.if(contrast).bgGray200.gray800.$,
-    },
-    global: {
-        baseStyles: { ...baseStyles, ...Css_1.Css.add("width", "max-content").gray500.$ },
-        activeStyles: Css_1.Css.white.bgGray900.$,
-        disabledStyles: Css_1.Css.gray400.cursorNotAllowed.$,
-        focusRingStyles: Css_1.Css.gray500.bgGray900.add("boxShadow", `0px 1px 2px rgba(0, 0, 0, 0.05), 0px 0px 0px 2px #242424, 0px 0px 0px 4px #0EA5E9`).$,
-        hoverStyles: Css_1.Css.gray500.bgGray900.$,
-        pressedStyles: Css_1.Css.gray500.bgGray700.$,
-    },
-});

package/dist/components/Pagination.d.ts

@@ -1,27 +0,0 @@
-import { Dispatch } from "react";
-/**
- * Page settings, either a pageNumber+pageSize or offset+limit.
- *
- * This component is implemented in terms of "page number + page size",
- * but our backend wants offset+limit, so we accept both and translate.
- */
-export type PageSettings = PageNumberAndSize | OffsetAndLimit;
-export type PageNumberAndSize = {
-    pageNumber: number;
-    pageSize: number;
-};
-export type OffsetAndLimit = {
-    offset: number;
-    limit: number;
-};
-export declare const defaultPage: OffsetAndLimit;
-interface PaginationProps {
-    page: readonly [PageNumberAndSize, Dispatch<PageNumberAndSize>] | readonly [OffsetAndLimit, Dispatch<OffsetAndLimit>];
-    totalCount: number;
-    pageSizes?: number[];
-}
-export declare function Pagination(props: PaginationProps): import("@emotion/react/jsx-runtime").JSX.Element;
-export declare function toLimitAndOffset(page: PageSettings): OffsetAndLimit;
-export declare function toPageNumberSize(page: PageSettings): PageNumberAndSize;
-export {};
-//# sourceMappingURL=Pagination.d.ts.map

package/dist/components/Pagination.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../src/components/Pagination.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAMjC;;;;;GAKG;AACH,MAAM,MAAM,YAAY,GAAG,iBAAiB,GAAG,cAAc,CAAC;AAC9D,MAAM,MAAM,iBAAiB,GAAG;IAAE,UAAU,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAA;CAAE,CAAC;AACzE,MAAM,MAAM,cAAc,GAAG;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAG/D,eAAO,MAAM,WAAW,EAAE,cAA0C,CAAC;AAErE,UAAU,eAAe;IACvB,IAAI,EAAE,SAAS,CAAC,iBAAiB,EAAE,QAAQ,CAAC,iBAAiB,CAAC,CAAC,GAAG,SAAS,CAAC,cAAc,EAAE,QAAQ,CAAC,cAAc,CAAC,CAAC,CAAC;IACtH,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;CACtB;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,oDA6DhD;AAED,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,YAAY,GAAG,cAAc,CAQnE;AAED,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,YAAY,GAAG,iBAAiB,CAOtE"}