@homebound/beam 2.199.1 → 2.200.0

package/dist/components/ButtonModal.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from "react";
+import { OverlayTriggerProps } from "./internal/OverlayTrigger";
+export interface ButtonModalProps extends Pick<OverlayTriggerProps, "trigger" | "placement" | "disabled" | "tooltip"> {
+    content: ReactNode;
+    title?: string;
+    storybookDefaultOpen?: boolean;
+}
+export declare function ButtonModal(props: ButtonModalProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/ButtonModal.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonModal = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const react_aria_1 = require("react-aria");
+const react_stately_1 = require("react-stately");
+const OverlayTrigger_1 = require("./internal/OverlayTrigger");
+const utils_1 = require("../utils");
+const ContextualModal_1 = require("./internal/ContextualModal");
+function ButtonModal(props) {
+    const { storybookDefaultOpen, trigger, disabled, content, title } = props;
+    const state = (0, react_stately_1.useMenuTriggerState)({ isOpen: storybookDefaultOpen });
+    const buttonRef = (0, react_1.useRef)(null);
+    const { menuTriggerProps } = (0, react_aria_1.useMenuTrigger)({ isDisabled: !!disabled }, state, buttonRef);
+    const tid = (0, utils_1.useTestIds)(props, (0, OverlayTrigger_1.isTextButton)(trigger) ? trigger.label : (0, OverlayTrigger_1.isIconButton)(trigger) ? trigger.icon : trigger.name);
+    return ((0, jsx_runtime_1.jsx)(OverlayTrigger_1.OverlayTrigger, Object.assign({}, props, { menuTriggerProps: menuTriggerProps, state: state, buttonRef: buttonRef }, tid, { children: (0, jsx_runtime_1.jsx)(ContextualModal_1.ContextualModal, { content: content, title: title }, void 0) }), void 0));
+}
+exports.ButtonModal = ButtonModal;

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

@@ -1,10 +1,9 @@
-import { GridColumnWithId } from "../types";
 import { Properties } from "../../../Css";
 interface SortHeaderProps {
     content: string;
     xss?: Properties;
     iconOnLeft?: boolean;
-    column: GridColumnWithId<any>;
+    sortKey: string;
 }
 /**
  * Wraps column header names with up/down sorting icons.

package/dist/components/Table/components/SortHeader.js

@@ -20,13 +20,12 @@ const useTestIds_1 = require("../../../utils/useTestIds");
  *   current sort state + `toggleSort` function
  */
 function SortHeader(props) {
-    const { content, xss, iconOnLeft = false, column } = props;
+    const { content, xss, iconOnLeft = false, sortKey } = props;
     const { isHovered, hoverProps } = (0, hooks_1.useHover)({});
-    const ourSortKey = column.serverSideSortKey || column.id;
     const { tableState } = (0, react_1.useContext)(TableState_1.TableStateContext);
     const current = (0, hooks_1.useComputed)(() => { var _a; return (_a = tableState.sortState) === null || _a === void 0 ? void 0 : _a.current; }, [tableState]);
-    const sorted = ourSortKey === (current === null || current === void 0 ? void 0 : current.columnId) ? current === null || current === void 0 ? void 0 : current.direction : undefined;
-    const toggleSort = (0, react_1.useCallback)(() => tableState.setSortKey(ourSortKey), [ourSortKey, tableState]);
+    const sorted = sortKey === (current === null || current === void 0 ? void 0 : current.columnId) ? current === null || current === void 0 ? void 0 : current.direction : undefined;
+    const toggleSort = (0, react_1.useCallback)(() => tableState.setSortKey(sortKey), [sortKey, tableState]);
     const tid = (0, useTestIds_1.useTestIds)(props, "sortHeader");
     const icon = ((0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.fs0.$ }, { children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, Object.assign({ icon: sorted === "DESC" ? "sortDown" : "sortUp", color: sorted !== undefined ? Css_1.Palette.LightBlue700 : Css_1.Palette.Gray400, xss: {
                 ...Css_1.Css.ml1.if(iconOnLeft).mr1.ml0.$,

package/dist/components/Table/utils/utils.js

@@ -7,7 +7,7 @@ const Css_1 = require("../../../Css");
 const getInteractiveElement_1 = require("../../../utils/getInteractiveElement");
 /** If a column def return just string text for a given row, apply some default styling. */
 function toContent(maybeContent, isHeader, canSortColumn, isClientSideSorting, style, as, alignment, column) {
-    var _a, _b;
+    var _a, _b, _c;
     let content = isGridCellContent(maybeContent) ? maybeContent.content : maybeContent;
     if (typeof content === "function") {
         // Actually create the JSX by calling `content()` here (which should be as late as
@@ -32,9 +32,9 @@ function toContent(maybeContent, isHeader, canSortColumn, isClientSideSorting, s
             })
             : content;
     if (content && typeof content === "string" && isHeader && canSortColumn) {
-        return (0, jsx_runtime_1.jsx)(SortHeader_1.SortHeader, { content: content, iconOnLeft: alignment === "right", column: column }, void 0);
+        return ((0, jsx_runtime_1.jsx)(SortHeader_1.SortHeader, { content: content, iconOnLeft: alignment === "right", sortKey: (_b = column.serverSideSortKey) !== null && _b !== void 0 ? _b : column.id }, void 0));
     }
-    else if (content && ((_b = style === null || style === void 0 ? void 0 : style.presentationSettings) === null || _b === void 0 ? void 0 : _b.wrap) === false && typeof content === "string") {
+    else if (content && ((_c = style === null || style === void 0 ? void 0 : style.presentationSettings) === null || _c === void 0 ? void 0 : _c.wrap) === false && typeof content === "string") {
         // In order to truncate the text properly, then we need to wrap it in another element
         // as our cell element is a flex container, which don't allow for applying truncation styles directly on it.
         return ((0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.truncate.mw0.$, title: content }, { children: content }), void 0));

package/dist/components/internal/ContextualModal.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from "react";
+export interface ContextualModalProps {
+    content: ReactNode;
+    title?: string;
+}
+export declare function ContextualModal(props: ContextualModalProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/internal/ContextualModal.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContextualModal = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_aria_1 = require("react-aria");
+const Css_1 = require("../../Css");
+const utils_1 = require("../../utils");
+function ContextualModal(props) {
+    const { content, title } = props;
+    const tid = (0, utils_1.useTestIds)(props, "popup");
+    return ((0, jsx_runtime_1.jsx)(react_aria_1.FocusScope, Object.assign({ restoreFocus: true, autoFocus: true }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.p3.df.fdc.gap3.bgWhite.bshModal.br4.maxh("inherit").overflowAuto.$ }, { children: [title && ((0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.lg.tc.$ }, tid.title, { children: title }), void 0)), (0, jsx_runtime_1.jsx)("div", Object.assign({}, tid.content, { children: content }), void 0)] }), void 0) }), void 0));
+}
+exports.ContextualModal = ContextualModal;

package/package.json

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