@homebound/beam 2.75.1 → 2.76.3

package/dist/components/BeamContext.d.ts

@@ -18,9 +18,14 @@ export interface BeamContextState {
     drawerCanCloseChecks: MutableRefObject<CheckFn[]>;
     /** Checks when closing SuperDrawer Details, a double array to keep per-detail lists. */
     drawerCanCloseDetailsChecks: MutableRefObject<CheckFn[][]>;
+    /** The ref for defining the portal element's location for Tab actions */
+    tabActionsRef: MutableRefObject<HTMLDivElement | null>;
+    /** The div for Tab actions to portal into */
+    tabActionsDiv: HTMLDivElement;
 }
 /** This is only exported internally, for useModal and useSuperDrawer, it's not a public API. */
 export declare const BeamContext: import("react").Context<BeamContextState>;
 export declare function BeamProvider({ children }: {
     children: ReactNode;
 }): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function useBeamContext(): BeamContextState;

package/dist/components/BeamContext.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.BeamProvider = exports.BeamContext = void 0;
+exports.useBeamContext = exports.BeamProvider = exports.BeamContext = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const react_aria_1 = require("react-aria");
@@ -17,6 +17,8 @@ exports.BeamContext = (0, react_1.createContext)({
     drawerContentStack: new index_1.EmptyRef(),
     drawerCanCloseChecks: new index_1.EmptyRef(),
     drawerCanCloseDetailsChecks: new index_1.EmptyRef(),
+    tabActionsRef: new index_1.EmptyRef(),
+    tabActionsDiv: undefined,
 });
 function BeamProvider({ children }) {
     // We want the identity of these to be stable, b/c they end up being used as dependencies
@@ -32,6 +34,8 @@ function BeamProvider({ children }) {
     const drawerContentStackRef = (0, react_1.useRef)([]);
     const drawerCanCloseChecks = (0, react_1.useRef)([]);
     const drawerCanCloseDetailsChecks = (0, react_1.useRef)([]);
+    const tabActionsRef = (0, react_1.useRef)(null);
+    const tabActionsDiv = (0, react_1.useMemo)(() => document.createElement("div"), []);
     // We essentially expose the refs, but with our own getters/setters so that we can
     // have the setters call `tick` to re-render this Provider
     const context = (0, react_1.useMemo)(() => {
@@ -46,6 +50,8 @@ function BeamProvider({ children }) {
             modalFooterDiv,
             drawerCanCloseChecks,
             drawerCanCloseDetailsChecks,
+            tabActionsRef,
+            tabActionsDiv,
         };
     }, [modalBodyDiv, modalFooterDiv]);
     return ((0, jsx_runtime_1.jsxs)(exports.BeamContext.Provider, Object.assign({ value: { ...context } }, { children: [(0, jsx_runtime_1.jsxs)(react_aria_1.OverlayProvider, { children: [children, modalRef.current && drawerContentStackRef.current.length === 0 && (0, jsx_runtime_1.jsx)(Modal_1.Modal, Object.assign({}, modalRef.current), void 0)] }, void 0), (0, jsx_runtime_1.jsx)(SuperDrawer_1.SuperDrawer, {}, void 0)] }), void 0));
@@ -65,3 +71,7 @@ class PretendRefThatTicks {
         this.tick();
     }
 }
+function useBeamContext() {
+    return (0, react_1.useContext)(exports.BeamContext);
+}
+exports.useBeamContext = useBeamContext;

package/dist/components/Modal/Modal.js

@@ -23,7 +23,7 @@ function Modal(props) {
     const { size = "md", content, forceScrolling } = props;
     const isFixedHeight = typeof size !== "string";
     const ref = (0, react_1.useRef)(null);
-    const { modalBodyDiv, modalFooterDiv, modalHeaderDiv, drawerContentStack } = (0, react_1.useContext)(BeamContext_1.BeamContext);
+    const { modalBodyDiv, modalFooterDiv, modalHeaderDiv, drawerContentStack } = (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 }, ref);
     const { modalProps } = (0, react_aria_1.useModal)();
@@ -56,20 +56,20 @@ function Modal(props) {
 }
 exports.Modal = Modal;
 function ModalHeader({ children }) {
-    const { modalHeaderDiv } = (0, react_1.useContext)(BeamContext_1.BeamContext);
+    const { modalHeaderDiv } = (0, BeamContext_1.useBeamContext)();
     return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children }, void 0), modalHeaderDiv);
 }
 exports.ModalHeader = ModalHeader;
 /** Provides consistent styling and the scrolling behavior for a modal's primary content. */
 function ModalBody({ children }) {
-    const { modalBodyDiv } = (0, react_1.useContext)(BeamContext_1.BeamContext);
+    const { modalBodyDiv } = (0, BeamContext_1.useBeamContext)();
     const testId = (0, utils_1.useTestIds)({}, testIdPrefix);
     return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.px3.$ }, testId.content, { children: children }), void 0), modalBodyDiv);
 }
 exports.ModalBody = ModalBody;
 /** Provides consistent styling for modal footers, i.e. where actions are placed. */
 function ModalFooter({ children, xss, }) {
-    const { modalFooterDiv } = (0, react_1.useContext)(BeamContext_1.BeamContext);
+    const { modalFooterDiv } = (0, BeamContext_1.useBeamContext)();
     const testId = (0, utils_1.useTestIds)({}, testIdPrefix);
     return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)("div", Object.assign({ css: { ...Css_1.Css.p3.df.aic.jcfe.childGap1.$, ...xss } }, testId.footer, { children: children }), void 0), modalFooterDiv);
 }

package/dist/components/Modal/useModal.js

@@ -5,7 +5,7 @@ const react_1 = require("react");
 const BeamContext_1 = require("../BeamContext");
 const utils_1 = require("../../utils");
 function useModal() {
-    const { modalState, modalCanCloseChecks } = (0, react_1.useContext)(BeamContext_1.BeamContext);
+    const { modalState, modalCanCloseChecks } = (0, BeamContext_1.useBeamContext)();
     const lastCanClose = (0, react_1.useRef)();
     return (0, react_1.useMemo)(() => ({
         openModal(props) {

package/dist/components/SuperDrawer/ConfirmCloseModal.js

@@ -2,12 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ConfirmCloseModal = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-const react_1 = require("react");
 const src_1 = require("../..");
 const BeamContext_1 = require("../BeamContext");
 /** Modal content to appear when a close checks fails */
 function ConfirmCloseModal({ onClose }) {
-    const { modalState } = (0, react_1.useContext)(BeamContext_1.BeamContext);
+    const { modalState } = (0, BeamContext_1.useBeamContext)();
     // TODO: Change to closeModal from useModal when canCloseChecks are reset
     function closeModal() {
         // Not using closeModal from useModal since the canClose checks are not reset

package/dist/components/SuperDrawer/SuperDrawer.js

@@ -32,7 +32,7 @@ const utils_1 = require("../../utils");
  * above the SuperDrawer.
  */
 function SuperDrawer() {
-    const { drawerContentStack: contentStack, modalState, modalBodyDiv, modalFooterDiv, modalHeaderDiv, } = (0, react_3.useContext)(BeamContext_1.BeamContext);
+    const { drawerContentStack: contentStack, modalState, modalBodyDiv, modalFooterDiv, modalHeaderDiv, } = (0, BeamContext_1.useBeamContext)();
     const { closeDrawer } = (0, components_1.useSuperDrawer)();
     const drawerHeaderRef = (0, react_3.useRef)(null);
     const modalBodyRef = (0, react_3.useRef)(null);

package/dist/components/SuperDrawer/SuperDrawerContent.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SuperDrawerContent = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const framer_motion_1 = require("framer-motion");
-const react_1 = require("react");
 const BeamContext_1 = require("../BeamContext");
 const Button_1 = require("../Button");
 const useSuperDrawer_1 = require("./useSuperDrawer");
@@ -17,7 +16,7 @@ const Css_1 = require("../../Css");
  */
 const SuperDrawerContent = ({ children, actions }) => {
     const { closeDrawerDetail } = (0, useSuperDrawer_1.useSuperDrawer)();
-    const { drawerContentStack: contentStack } = (0, react_1.useContext)(BeamContext_1.BeamContext);
+    const { drawerContentStack: contentStack } = (0, BeamContext_1.useBeamContext)();
     // Determine if the current element is a new content element or an detail element
     const { kind } = contentStack.current[contentStack.current.length - 1];
     function wrapWithMotionAndMaybeBack(children) {

package/dist/components/SuperDrawer/useSuperDrawer.js

@@ -7,7 +7,7 @@ const BeamContext_1 = require("../BeamContext");
 const Modal_1 = require("../Modal");
 const ConfirmCloseModal_1 = require("./ConfirmCloseModal");
 function useSuperDrawer() {
-    const { drawerContentStack: contentStack, modalState, drawerCanCloseChecks: canCloseChecks, drawerCanCloseDetailsChecks: canCloseDetailsChecks, } = (0, react_1.useContext)(BeamContext_1.BeamContext);
+    const { drawerContentStack: contentStack, modalState, drawerCanCloseChecks: canCloseChecks, drawerCanCloseDetailsChecks: canCloseDetailsChecks, } = (0, BeamContext_1.useBeamContext)();
     const { openModal } = (0, Modal_1.useModal)();
     function canCloseDrawerDetails(i, doChange) {
         var _a;

package/dist/components/Tabs.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import { PropsWithChildren, ReactNode, ReactPortal } from "react";
 import type { IconKey } from "./";
 import { Margin, Only, Xss } from "../Css";
 export interface Tab<V extends string = string> {
@@ -97,4 +97,5 @@ export declare function getTabStyles(): {
     };
 };
 export declare function getNextTabValue<V extends string>(selected: V, key: "ArrowLeft" | "ArrowRight", tabs: Tab<V>[] | RouteTab<V>[]): V;
+export declare function TabActions({ children }: PropsWithChildren<{}>): ReactPortal;
 export {};

package/dist/components/Tabs.js

@@ -1,12 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getNextTabValue = exports.getTabStyles = exports.Tabs = exports.TabContent = exports.TabsWithContent = void 0;
+exports.TabActions = exports.getNextTabValue = exports.getTabStyles = exports.Tabs = exports.TabContent = exports.TabsWithContent = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const change_case_1 = require("change-case");
 const react_1 = require("react");
 const react_aria_1 = require("react-aria");
+const react_dom_1 = require("react-dom");
 const react_router_1 = require("react-router");
 const react_router_dom_1 = require("react-router-dom");
+const BeamContext_1 = require("./BeamContext");
 const Css_1 = require("../Css");
 const utils_1 = require("../utils");
 const defaultTestId_1 = require("../utils/defaultTestId");
@@ -21,11 +23,7 @@ const Icon_1 = require("./Icon");
  * and `TabContent` components directly.
  */
 function TabsWithContent(props) {
-    // Hide the tabs if only one tab is enabled, and `alwaysShowAllTabs` is not true
-    const hideTabs = props.alwaysShowAllTabs
-        ? false
-        : props.tabs.filter((t) => !t.disabled).length === 1;
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!hideTabs && (0, jsx_runtime_1.jsx)(Tabs, Object.assign({}, props), void 0), (0, jsx_runtime_1.jsx)(TabContent, Object.assign({}, props), void 0)] }, void 0));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Tabs, Object.assign({}, props), void 0), (0, jsx_runtime_1.jsx)(TabContent, Object.assign({}, props), void 0)] }, void 0));
 }
 exports.TabsWithContent = TabsWithContent;
 function TabContent(props) {
@@ -44,6 +42,7 @@ function TabContent(props) {
 exports.TabContent = TabContent;
 /** The top list of tabs. */
 function Tabs(props) {
+    const { tabActionsRef, tabActionsDiv } = (0, BeamContext_1.useBeamContext)();
     const { ariaLabel, tabs, ...others } = props;
     const location = (0, react_router_1.useLocation)();
     const selected = isRouteTabs(props)
@@ -55,6 +54,11 @@ function Tabs(props) {
     const ref = (0, react_1.useRef)(null);
     // Whenever selected changes, reset active
     (0, react_1.useEffect)(() => setActive(selected), [selected]);
+    (0, react_1.useEffect)(() => {
+        if (tabActionsRef && tabActionsDiv) {
+            tabActionsRef.current.appendChild(tabActionsDiv);
+        }
+    }, [tabActionsRef, tabActionsDiv]);
     // the active tab is highlighted, but not necessarily "selected"
     // the selected tab dictates what is displayed in the content panel
     function onKeyUp(e) {
@@ -78,15 +82,16 @@ function Tabs(props) {
             setActive(selected);
         }
     }
-    // We also check this in TabsWithContent, but if someone is using Tabs standalone, check it here as well
+    const actionsDiv = (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.ml("auto").addIn("&>div", Css_1.Css.df.aic.childGap1.$).$, ref: tabActionsRef }, void 0);
+    // Check to see if we should hide the tabs. We will still return something so that the Tab Actions (if any) can render
     const hideTabs = props.alwaysShowAllTabs ? false : props.tabs.filter((t) => !t.disabled).length === 1;
     if (hideTabs) {
-        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0);
+        return (0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.df.aic.$ }, { children: actionsDiv }), void 0);
     }
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ ref: ref, css: Css_1.Css.dif.childGap1.$, "aria-label": ariaLabel, role: "tablist" }, tid, { children: tabs.map((tab) => {
-            const uniqueValue = uniqueTabValue(tab);
-            return ((0, jsx_runtime_1.jsx)(TabImpl, Object.assign({ active: active === uniqueValue, focusProps: focusProps, isFocusVisible: isFocusVisible, onClick: onClick, onKeyUp: onKeyUp, onBlur: onBlur, tab: tab }, tid[(0, defaultTestId_1.defaultTestId)(uniqueValue)]), uniqueValue));
-        }) }), void 0));
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.aic.$ }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ ref: ref, css: Css_1.Css.dif.childGap1.$, "aria-label": ariaLabel, role: "tablist" }, tid, { children: tabs.map((tab) => {
+                    const uniqueValue = uniqueTabValue(tab);
+                    return ((0, jsx_runtime_1.jsx)(TabImpl, Object.assign({ active: active === uniqueValue, focusProps: focusProps, isFocusVisible: isFocusVisible, onClick: onClick, onKeyUp: onKeyUp, onBlur: onBlur, tab: tab }, tid[(0, defaultTestId_1.defaultTestId)(uniqueValue)]), uniqueValue));
+                }) }), void 0), actionsDiv] }), void 0));
 }
 exports.Tabs = Tabs;
 function TabImpl(props) {
@@ -149,3 +154,11 @@ function isRouteTab(tab) {
 function uniqueTabValue(tab) {
     return isRouteTab(tab) ? (0, change_case_1.camelCase)(tab.name) : tab.value;
 }
+function TabActions({ children }) {
+    const { tabActionsDiv } = (0, BeamContext_1.useBeamContext)();
+    if (!tabActionsDiv) {
+        throw new Error("Tab Actions element is not defined");
+    }
+    return (0, react_dom_1.createPortal)(children, tabActionsDiv);
+}
+exports.TabActions = TabActions;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homebound/beam",
-  "version": "2.75.1",
+  "version": "2.76.3",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",
@@ -33,7 +33,9 @@
     "format": "prettier --loglevel warn --write \"**/*.{ts,tsx,css,md}\""
   },
   "dependencies": {
+    "@react-aria/utils": "^3.8.1",
     "@react-hook/resize-observer": "^1.2.2",
+    "@types/tinycolor2": "^1.4.2",
     "change-case": "^4.1.2",
     "date-fns": "^2.21.3",
     "dompurify": "^2.3.0",
@@ -46,6 +48,7 @@
     "react-router-dom": "^5.2.0",
     "react-stately": "^3.7.0",
     "react-virtuoso": "^1.9.0",
+    "tinycolor2": "^1.4.2",
     "tributejs": "^5.1.3",
     "trix": "^1.3.1",
     "use-query-params": "^1.2.2"
@@ -54,8 +57,7 @@
     "@emotion/react": ">=11",
     "mobx-react": ">=7",
     "react": ">=16",
-    "react-router-dom": ">=5.2",
-    "tinycolor2": ">=1.4"
+    "react-router-dom": ">=5.2"
   },
   "peerDependenciesMeta": {
     "mobx-react": {
@@ -63,9 +65,6 @@
     },
     "react-router-dom": {
       "optional": false
-    },
-    "tinycolor2": {
-      "optional": true
     }
   },
   "devDependencies": {
@@ -92,7 +91,6 @@
     "@types/react": "^17.0.5",
     "@types/react-dom": "^16.9.11",
     "@types/react-router-dom": "^5.1.7",
-    "@types/tinycolor2": "^1.4.2",
     "@typescript-eslint/eslint-plugin": "^4.17.0",
     "@typescript-eslint/parser": "^4.17.0",
     "babel-eslint": "^10.1.0",