@homebound/beam 2.182.0 → 2.183.1

package/dist/components/Accordion.js

@@ -5,10 +5,12 @@ 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 index_1 = require("../index");
+const Icon_1 = require("./Icon");
+const Css_1 = require("../Css");
+const utils_2 = require("../utils");
 function Accordion(props) {
     const { title, children, size, disabled = false, defaultExpanded = false, topBorder = true, bottomBorder = false, index, setExpandedIndex, } = props;
-    const testIds = (0, index_1.useTestIds)(props, "accordion");
+    const testIds = (0, utils_2.useTestIds)(props, "accordion");
     const id = (0, utils_1.useId)();
     const [expanded, setExpanded] = (0, react_1.useState)(defaultExpanded);
     const { isFocusVisible, focusProps } = (0, react_aria_1.useFocusRing)();
@@ -16,12 +18,12 @@ function Accordion(props) {
         setExpanded(defaultExpanded);
     }, [defaultExpanded]);
     return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, testIds.container, { css: {
-            ...index_1.Css.bGray400.if(topBorder).bt.if(bottomBorder).bb.$,
-            ...(size ? index_1.Css.wPx(accordionSizes[size]).$ : {}),
+            ...Css_1.Css.bGray400.if(topBorder).bt.if(bottomBorder).bb.$,
+            ...(size ? Css_1.Css.wPx(accordionSizes[size]).$ : {}),
         } }, { children: [(0, jsx_runtime_1.jsxs)("button", Object.assign({}, testIds.title, focusProps, { "aria-controls": id, "aria-expanded": expanded, disabled: disabled, css: {
-                    ...index_1.Css.df.jcsb.gap2.aic.w100.p2.baseMd.outline("none").addIn(":hover", index_1.Css.bgGray100.$).$,
-                    ...(disabled && index_1.Css.gray500.$),
-                    ...(isFocusVisible && index_1.Css.boxShadow(`inset 0 0 0 2px ${index_1.Palette.LightBlue700}`).$),
+                    ...Css_1.Css.df.jcsb.gap2.aic.w100.p2.baseMd.outline("none").addIn(":hover", Css_1.Css.bgGray100.$).$,
+                    ...(disabled && Css_1.Css.gray500.$),
+                    ...(isFocusVisible && Css_1.Css.boxShadow(`inset 0 0 0 2px ${Css_1.Palette.LightBlue700}`).$),
                 }, onClick: () => {
                     setExpanded(!expanded);
                     if (setExpandedIndex)
@@ -29,13 +31,13 @@ function Accordion(props) {
                 } }, { children: [(0, jsx_runtime_1.jsx)("span", { children: title }, void 0), (0, jsx_runtime_1.jsx)("span", Object.assign({ css: {
                             transition: "transform 250ms linear",
                             transform: expanded ? "rotate(180deg)" : "rotate(0deg)",
-                        } }, { children: (0, jsx_runtime_1.jsx)(index_1.Icon, { icon: "chevronDown" }, void 0) }), void 0)] }), void 0), (0, jsx_runtime_1.jsx)("div", Object.assign({}, testIds.details, { id: id, "aria-hidden": !expanded, css: {
+                        } }, { children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: "chevronDown" }, void 0) }), void 0)] }), void 0), (0, jsx_runtime_1.jsx)("div", Object.assign({}, testIds.details, { id: id, "aria-hidden": !expanded, css: {
                     // Use max-height for grow/shrink animation (remove close animation for AccordionList to avoid delays)
-                    ...index_1.Css.overflowHidden
+                    ...Css_1.Css.overflowHidden
                         .maxhPx(1000)
                         .add("transition", `max-height ${expanded || !index ? "250ms" : "0"} ease-in-out`).$,
-                    ...(!expanded || disabled ? index_1.Css.maxh0.$ : {}),
-                } }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ css: index_1.Css.px2.pb2.pt1.$ }, { children: children }), void 0) }), void 0)] }), void 0));
+                    ...(!expanded || disabled ? Css_1.Css.maxh0.$ : {}),
+                } }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.px2.pb2.pt1.$ }, { children: children }), void 0) }), void 0)] }), void 0));
 }
 exports.Accordion = Accordion;
 const accordionSizes = {

package/dist/components/BeamContext.d.ts

@@ -19,10 +19,6 @@ export interface BeamContextState {
     drawerCanCloseChecks: MutableRefObject<CanCloseCheck[]>;
     /** Checks when closing SuperDrawer Details, a double array to keep per-detail lists. */
     drawerCanCloseDetailsChecks: MutableRefObject<CanCloseCheck[][]>;
-    /** 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>;

package/dist/components/BeamContext.js

@@ -20,8 +20,6 @@ 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, ...presentationProps }) {
     // We want the identity of these to be stable, b/c they end up being used as dependencies
@@ -42,8 +40,6 @@ function BeamProvider({ children, ...presentationProps }) {
     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)(() => {
@@ -58,8 +54,6 @@ function BeamProvider({ children, ...presentationProps }) {
             modalFooterDiv,
             drawerCanCloseChecks,
             drawerCanCloseDetailsChecks,
-            tabActionsRef,
-            tabActionsDiv,
         };
     }, [modalBodyDiv, modalFooterDiv]);
     return ((0, jsx_runtime_1.jsx)(exports.BeamContext.Provider, Object.assign({ value: { ...context } }, { children: (0, jsx_runtime_1.jsx)(PresentationContext_1.PresentationProvider, Object.assign({}, presentationProps, { children: (0, jsx_runtime_1.jsx)(form_state_1.AutoSaveStatusProvider, { children: (0, jsx_runtime_1.jsxs)(SnackbarContext_1.SnackbarProvider, { 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) }, void 0) }), void 0) }), void 0));

package/dist/components/Table/styles.d.ts

@@ -12,4 +12,4 @@ export interface GridStyleDef {
     /** Enables cells Highlight and hover */
     cellHighlight?: boolean;
 }
-export declare const getTableStyles: (props?: GridStyleDef | undefined) => GridStyle;
+export declare const getTableStyles: (props?: GridStyleDef) => GridStyle;

package/dist/components/Table/styles.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getTableStyles = exports.cardStyle = exports.condensedStyle = exports.defaultStyle = void 0;
 const Css_1 = require("../../Css");
+const utils_1 = require("../../utils");
 /** Our original table look & feel/style. */
 exports.defaultStyle = {
     rootCss: Css_1.Css.gray700.$,
@@ -43,9 +44,12 @@ exports.cardStyle = {
 };
 function memoizedTableStyles() {
     const cache = {};
-    return (props) => {
-        const { inlineEditing = false, grouped = false, rowHeight = "flexible", cellHighlight } = props || {};
-        const key = `${inlineEditing}|${grouped}|${rowHeight}`;
+    return (props = {}) => {
+        const { inlineEditing = false, grouped = false, rowHeight = "flexible", cellHighlight = false } = props;
+        const key = (0, utils_1.safeKeys)(props)
+            .sort()
+            .map((k) => `${k}_${props[k]}`)
+            .join("|");
         if (!cache[key]) {
             const groupedLevels = {
                 0: {

package/dist/components/Tabs.d.ts

@@ -1,4 +1,4 @@
-import { PropsWithChildren, ReactNode, ReactPortal } from "react";
+import { ReactNode } from "react";
 import type { IconKey } from "./";
 import { Margin, Only, Xss } from "../Css";
 export interface Tab<V extends string = string> {
@@ -17,6 +17,7 @@ export interface TabsProps<V extends string, X> {
     contentXss?: X;
     alwaysShowAllTabs?: boolean;
     includeBottomBorder?: boolean;
+    right?: ReactNode;
 }
 export interface RouteTabsProps<V extends string, X> extends Omit<TabsProps<V, X>, "onChange" | "selected" | "tabs"> {
     tabs: RouteTab<V>[];
@@ -129,5 +130,4 @@ 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,14 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TabActions = exports.getNextTabValue = exports.getTabStyles = exports.Tabs = exports.TabContent = exports.TabsWithContent = void 0;
+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");
@@ -44,8 +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, includeBottomBorder, ...others } = props;
+    const { ariaLabel, tabs, includeBottomBorder, right, ...others } = props;
     const location = (0, react_router_1.useLocation)();
     const selected = isRouteTabs(props)
         ? uniqueTabValue(props.tabs.find((t) => !!(0, react_router_1.matchPath)(location.pathname, { path: t.path, exact: true })) || props.tabs[0])
@@ -56,11 +53,6 @@ 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) {
@@ -87,7 +79,7 @@ function Tabs(props) {
     return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.aic.$ }, { children: [!hideTabs(props) && ((0, jsx_runtime_1.jsx)("div", Object.assign({ ref: ref, css: { ...Css_1.Css.dif.childGap1.$, ...(includeBottomBorder ? { ...Css_1.Css.bb.bGray200.$ } : {}) }, "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)), (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.ml("auto").addIn("&>div", Css_1.Css.df.aic.childGap1.$).$, ref: tabActionsRef }, void 0)] }), void 0));
+                }) }), void 0)), right && (0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.ml("auto").df.aic.gap1.$ }, { children: right }), void 0)] }), void 0));
 }
 exports.Tabs = Tabs;
 function TabImpl(props) {
@@ -157,14 +149,6 @@ 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;
 // Determines whether we should hide the Tab panel. Returns true if there is only one enabled tab and `alwaysShowAllTabs` is falsey.
 function hideTabs(props) {
     return props.alwaysShowAllTabs ? false : props.tabs.filter((t) => !t.disabled).length === 1;

package/dist/components/index.d.ts

@@ -3,6 +3,8 @@ export * from "./Chips";
 export * from "./Table/GridTable";
 export * from "./ToggleChip";
 export * from "./ToggleChips";
+export * from "./Accordion";
+export * from "./AccordionList";
 export * from "./Alert";
 export * from "./AutoSaveIndicator";
 export { BeamProvider } from "./BeamContext";
@@ -27,9 +29,7 @@ export * from "./Stepper";
 export type { Step, StepperProps } from "./Stepper";
 export * from "./SuperDrawer";
 export * from "./Table";
-export { TabActions, TabContent, Tabs, TabsWithContent } from "./Tabs";
+export { TabContent, Tabs, TabsWithContent } from "./Tabs";
 export type { RouteTab, RouteTabWithContent, Tab, TabWithContent } from "./Tabs";
 export * from "./Tag";
 export * from "./Tooltip";
-export * from "./Accordion";
-export * from "./AccordionList";

package/dist/components/index.js

@@ -10,12 +10,14 @@ 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.TabsWithContent = exports.Tabs = exports.TabContent = exports.TabActions = exports.PresentationProvider = exports.NavLink = exports.BeamProvider = void 0;
+exports.TabsWithContent = exports.Tabs = exports.TabContent = exports.PresentationProvider = exports.NavLink = exports.BeamProvider = void 0;
 __exportStar(require("./Chip"), exports);
 __exportStar(require("./Chips"), exports);
 __exportStar(require("./Table/GridTable"), exports);
 __exportStar(require("./ToggleChip"), exports);
 __exportStar(require("./ToggleChips"), exports);
+__exportStar(require("./Accordion"), exports);
+__exportStar(require("./AccordionList"), exports);
 __exportStar(require("./Alert"), exports);
 __exportStar(require("./AutoSaveIndicator"), exports);
 var BeamContext_1 = require("./BeamContext");
@@ -43,11 +45,8 @@ __exportStar(require("./Stepper"), exports);
 __exportStar(require("./SuperDrawer"), exports);
 __exportStar(require("./Table"), exports);
 var Tabs_1 = require("./Tabs");
-Object.defineProperty(exports, "TabActions", { enumerable: true, get: function () { return Tabs_1.TabActions; } });
 Object.defineProperty(exports, "TabContent", { enumerable: true, get: function () { return Tabs_1.TabContent; } });
 Object.defineProperty(exports, "Tabs", { enumerable: true, get: function () { return Tabs_1.Tabs; } });
 Object.defineProperty(exports, "TabsWithContent", { enumerable: true, get: function () { return Tabs_1.TabsWithContent; } });
 __exportStar(require("./Tag"), exports);
 __exportStar(require("./Tooltip"), exports);
-__exportStar(require("./Accordion"), exports);
-__exportStar(require("./AccordionList"), exports);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homebound/beam",
-  "version": "2.182.0",
+  "version": "2.183.1",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",