@homebound/beam 2.129.0 → 2.132.0

package/dist/components/BeamContext.js

@@ -6,6 +6,7 @@ const react_1 = require("react");
 const react_aria_1 = require("react-aria");
 const Modal_1 = require("./Modal/Modal");
 const PresentationContext_1 = require("./PresentationContext");
+const SnackbarContext_1 = require("./Snackbar/SnackbarContext");
 const SuperDrawer_1 = require("./SuperDrawer/SuperDrawer");
 const index_1 = require("../utils/index");
 /** This is only exported internally, for useModal and useSuperDrawer, it's not a public API. */
@@ -55,7 +56,7 @@ function BeamProvider({ children, ...presentationProps }) {
             tabActionsDiv,
         };
     }, [modalBodyDiv, modalFooterDiv]);
-    return ((0, jsx_runtime_1.jsx)(exports.BeamContext.Provider, Object.assign({ value: { ...context } }, { children: (0, jsx_runtime_1.jsxs)(PresentationContext_1.PresentationProvider, Object.assign({}, presentationProps, { 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));
+    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.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));
 }
 exports.BeamProvider = BeamProvider;
 /** Looks like a ref, but invokes a re-render on set (w/o changing the setter identity). */

package/dist/components/Button.js

@@ -4,10 +4,10 @@ exports.Button = 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_router_dom_1 = require("react-router-dom");
 const components_1 = require("./");
 const Css_1 = require("../Css");
 const utils_1 = require("../utils");
+const getInteractiveElement_1 = require("../utils/getInteractiveElement");
 const useTestIds_1 = require("../utils/useTestIds");
 function Button(props) {
     const { onClick: onPress, disabled, endAdornment, menuTriggerProps, tooltip, openInNew, download, contrast = false, ...otherProps } = props;
@@ -38,8 +38,9 @@ function Button(props) {
         ...buttonProps,
         ...focusProps,
         ...hoverProps,
+        className: typeof onPress === "string" ? components_1.navLink : undefined,
         css: {
-            ...Css_1.Css.buttonBase.$,
+            ...Css_1.Css.buttonBase.tt("inherit").$,
             ...baseStyles,
             ...(isHovered && !isPressed ? hoverStyles : {}),
             ...(isPressed ? pressedStyles : {}),
@@ -48,12 +49,11 @@ function Button(props) {
         },
         ...tid,
     };
-    const button = typeof onPress === "string" ? ((0, utils_1.isAbsoluteUrl)(onPress) || openInNew || download ? ((0, jsx_runtime_1.jsx)("a", Object.assign({}, buttonAttrs, { href: onPress, className: components_1.navLink }, (download ? { download: "" } : { target: "_blank", rel: "noreferrer noopener" }), { children: buttonContent }), void 0)) : ((0, jsx_runtime_1.jsx)(react_router_dom_1.Link, Object.assign({}, buttonAttrs, { to: onPress, className: components_1.navLink }, { children: buttonContent }), void 0))) : ((0, jsx_runtime_1.jsx)("button", Object.assign({}, buttonAttrs, { children: buttonContent }), void 0));
     // If we're disabled b/c of a non-boolean ReactNode, or the caller specified tooltip text, then show it in a tooltip
     return (0, components_1.maybeTooltip)({
         title: (0, components_1.resolveTooltip)(disabled, tooltip),
         placement: "top",
-        children: button,
+        children: (0, getInteractiveElement_1.getButtonOrLink)(buttonContent, onPress, buttonAttrs, openInNew, download),
     });
 }
 exports.Button = Button;

package/dist/components/Snackbar/Snackbar.d.ts

@@ -0,0 +1,6 @@
+import { SnackbarNoticeProps } from "./SnackbarNotice";
+interface SnackbarProps {
+    notices: SnackbarNoticeProps[];
+}
+export declare function Snackbar({ notices }: SnackbarProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Snackbar/Snackbar.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Snackbar = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const SnackbarNotice_1 = require("./SnackbarNotice");
+const Css_1 = require("../../Css");
+function Snackbar({ notices }) {
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.fixed.bottom3.right3.df.fdc.aife.gapPx(12).$ }, { children: notices.map((data) => ((0, jsx_runtime_1.jsx)(SnackbarNotice_1.SnackbarNotice, Object.assign({}, data), data.id))) }), void 0));
+}
+exports.Snackbar = Snackbar;

package/dist/components/Snackbar/SnackbarContext.d.ts

@@ -0,0 +1,8 @@
+import React, { PropsWithChildren } from "react";
+import { SnackbarNoticeProps } from "./SnackbarNotice";
+export declare type SnackbarContextProps = {
+    setNotices: React.Dispatch<React.SetStateAction<SnackbarNoticeProps[]>>;
+};
+export declare const SnackbarContext: React.Context<SnackbarContextProps>;
+export declare function SnackbarProvider(props: PropsWithChildren<{}>): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function useSnackbarContext(): SnackbarContextProps;

package/dist/components/Snackbar/SnackbarContext.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSnackbarContext = exports.SnackbarProvider = exports.SnackbarContext = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const Snackbar_1 = require("./Snackbar");
+exports.SnackbarContext = (0, react_1.createContext)({ setNotices: () => { } });
+function SnackbarProvider(props) {
+    const [notices, setNotices] = (0, react_1.useState)([]);
+    const contextValue = (0, react_1.useMemo)(() => ({ setNotices }), []);
+    return ((0, jsx_runtime_1.jsxs)(exports.SnackbarContext.Provider, Object.assign({ value: contextValue }, { children: [props.children, (0, jsx_runtime_1.jsx)(Snackbar_1.Snackbar, { notices: notices }, void 0)] }), void 0));
+}
+exports.SnackbarProvider = SnackbarProvider;
+function useSnackbarContext() {
+    return (0, react_1.useContext)(exports.SnackbarContext);
+}
+exports.useSnackbarContext = useSnackbarContext;

package/dist/components/Snackbar/SnackbarNotice.d.ts

@@ -0,0 +1,19 @@
+import { ReactNode } from "react";
+import { ButtonProps } from "../Button";
+export declare type SnackbarNoticeTypes = "error" | "warning" | "success" | "info";
+export interface SnackbarNoticeProps {
+    /** Adds action button to the right of the notice */
+    action?: Pick<ButtonProps, "label" | "onClick" | "variant">;
+    /** Does not allow the user to close the notice manually. Notice will fade away in 10s. Value will be ignored if 'persistent' is set to 'true'. */
+    hideCloseButton?: boolean;
+    message: ReactNode;
+    /** This notice will persist on the screen until systematically closed by the app or by the user clicking the close button. */
+    persistent?: boolean;
+    /** Defines the icon that will show on the left side of the notification. */
+    icon?: SnackbarNoticeTypes;
+    /** Unique identifier to allow notice to close itself */
+    id: string;
+    /** Removes the snackbar notice from the stack */
+    onClose: () => void;
+}
+export declare function SnackbarNotice(props: SnackbarNoticeProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/Snackbar/SnackbarNotice.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SnackbarNotice = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const Button_1 = require("../Button");
+const Icon_1 = require("../Icon");
+const IconButton_1 = require("../IconButton");
+const Css_1 = require("../../Css");
+const utils_1 = require("../../utils");
+function SnackbarNotice(props) {
+    const { icon, message, action, hideCloseButton, persistent, onClose } = props;
+    const tid = (0, utils_1.useTestIds)(props, "snackbar");
+    // Only allow the "close" button to be hidden if not a `persistent` notice. Otherwise we could get in a state where the user cannot remove the notice from the screen.
+    const reallyHideClose = hideCloseButton && !persistent;
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.white.bgGray800.br4.base.df.aic.maxwPx(420).$ }, tid, { children: [icon && ((0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.fs0.plPx(12).$ }, { children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, Object.assign({ icon: typeToIcon[icon] }, tid.icon), void 0) }), void 0)), (0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.lineClamp3.pr2.myPx(12).plPx(icon ? 8 : 16).$ }, (typeof message === "string" ? { title: message } : undefined), tid.message, { children: message }), void 0), (action || !reallyHideClose) && ((0, jsx_runtime_1.jsxs)("span", Object.assign({ css: Css_1.Css.fs0.df.aic.$ }, { children: [action && ((0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.ttu.sm.prPx(!reallyHideClose && action.variant !== "text" ? 4 : 8).$ }, { children: (0, jsx_runtime_1.jsx)(Button_1.Button, Object.assign({ contrast: true }, action, tid.action), void 0) }), void 0)), !reallyHideClose && ((0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.pr1.add("lineHeight", 0).$ }, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, Object.assign({ icon: "x", contrast: true, onClick: onClose }, tid.close), void 0) }), void 0))] }), void 0))] }), void 0));
+}
+exports.SnackbarNotice = SnackbarNotice;
+const typeToIcon = {
+    error: "xCircle",
+    warning: "error",
+    success: "checkCircle",
+    info: "infoCircle",
+};

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

@@ -0,0 +1,2 @@
+export { useSnackbar } from "./useSnackbar";
+export type { TriggerNoticeProps } from "./useSnackbar";

package/dist/components/Snackbar/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSnackbar = void 0;
+var useSnackbar_1 = require("./useSnackbar");
+Object.defineProperty(exports, "useSnackbar", { enumerable: true, get: function () { return useSnackbar_1.useSnackbar; } });

package/dist/components/Snackbar/useSnackbar.d.ts

@@ -0,0 +1,12 @@
+import { SnackbarNoticeProps } from "./SnackbarNotice";
+export interface UseSnackbarHook {
+    triggerNotice: (props: TriggerNoticeProps) => {
+        close: () => void;
+    };
+    closeNotice: (id: string) => void;
+}
+export declare function useSnackbar(): UseSnackbarHook;
+export interface TriggerNoticeProps extends Omit<SnackbarNoticeProps, "id" | "onClose"> {
+    id?: string;
+    onClose?: () => void;
+}

package/dist/components/Snackbar/useSnackbar.js

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSnackbar = void 0;
+const react_1 = require("react");
+const SnackbarContext_1 = require("./SnackbarContext");
+const utils_1 = require("../../utils");
+function useSnackbar() {
+    const { setNotices } = (0, SnackbarContext_1.useSnackbarContext)();
+    const onClose = (0, react_1.useCallback)((noticeId) => {
+        setNotices((prev) => {
+            let returnValue = prev;
+            // check to see if the notice is still in our existing stack, if so then remove it. Otherwise it was manually closed, so return the existing value.
+            if (prev.some(({ id }) => id === noticeId)) {
+                returnValue = prev.filter(({ id }) => id !== noticeId);
+            }
+            // For good measure, reset the snackbarId when notices array is emptied.
+            if (returnValue.length === 0) {
+                snackbarId = 1;
+            }
+            return returnValue;
+        });
+    }, []);
+    const triggerNotice = (0, react_1.useCallback)((props) => {
+        var _a;
+        // Sets `noticeId` to the current value of `snackbarId` and then increments.
+        const noticeId = (_a = props.id) !== null && _a !== void 0 ? _a : `beamSnackbar:${snackbarId++}`;
+        let maybeTimeout;
+        if (!props.persistent) {
+            maybeTimeout = window.setTimeout(() => {
+                onClose(noticeId);
+                // Auto close in 10s
+            }, 10000);
+        }
+        setNotices((prev) => prev.concat({
+            ...props,
+            id: noticeId,
+            onClose: () => {
+                // Because we reset the `snackbarId` if the notices array is empty, then we need to call `clearTimeout` to ensure we don't accidentally close the wrong notice
+                clearTimeout(maybeTimeout);
+                onClose(noticeId);
+                (0, utils_1.maybeCall)(props.onClose);
+            },
+        }));
+        return {
+            close: () => {
+                // Because we reset the `snackbarId` if the notices array is empty, then we need to call `clearTimeout` to ensure we don't accidentally close the wrong notice
+                clearTimeout(maybeTimeout);
+                onClose(noticeId);
+            },
+        };
+    }, [onClose, setNotices]);
+    const closeNotice = (0, react_1.useCallback)((id) => onClose(id), [onClose]);
+    return { triggerNotice, closeNotice };
+}
+exports.useSnackbar = useSnackbar;
+let snackbarId = 1;

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

@@ -121,6 +121,7 @@ export declare type GridSortConfig<S> = {
     on: "client";
     /** The optional initial column (index in columns) and direction to sort. */
     initial?: [S | GridColumn<any>, Direction] | undefined;
+    caseSensitive?: boolean;
 } | {
     on: "server";
     /** The current sort by value + direction (if server-side sorting). */
@@ -308,6 +309,8 @@ export declare type GridCellContent = {
     typeScale?: Typography;
     /** Allows the cell to stay in place when the user scrolls horizontally */
     sticky?: "left" | "right";
+    /** If provided, content of the cell will be wrapped within a <button /> or <a /> tag depending on if the value is a function or a string. */
+    onClick?: () => {} | string;
 };
 declare type MaybeFn<T> = T | (() => T);
 /**

package/dist/components/Table/GridTable.js

@@ -45,6 +45,7 @@ const Css_1 = require("../../Css");
 const hooks_1 = require("../../hooks");
 const useRenderCount_1 = require("../../hooks/useRenderCount");
 const utils_1 = require("../../utils");
+const getInteractiveElement_1 = require("../../utils/getInteractiveElement");
 const shallowEqual_1 = require("../../utils/shallowEqual");
 const _1 = require(".");
 exports.ASC = "ASC";
@@ -113,14 +114,14 @@ function GridTable(props) {
     const columnSizes = (0, columnSizes_1.useSetupColumnSizes)(style, columns, tableRef, resizeTarget);
     // Make a single copy of our current collapsed state, so we'll have a single observer.
     const collapsedIds = (0, hooks_1.useComputed)(() => rowState.collapsedIds, [rowState]);
-    const [sortState, setSortKey, sortOn] = (0, useSortState_1.useSortState)(columns, props.sorting);
+    const [sortState, setSortKey, sortOn, caseSensitive] = (0, useSortState_1.useSortState)(columns, props.sorting);
     const maybeSorted = (0, react_1.useMemo)(() => {
         if (sortOn === "client" && sortState) {
             // If using client-side sort, the sortState use S = number
-            return (0, sortRows_1.sortRows)(columns, rows, sortState);
+            return (0, sortRows_1.sortRows)(columns, rows, sortState, caseSensitive);
         }
         return rows;
-    }, [columns, rows, sortOn, sortState]);
+    }, [columns, rows, sortOn, sortState, caseSensitive]);
     let hasTotalsRow = false;
     // Filter rows - ensures parent rows remain in the list if any children match the filter.
     const filterRows = (0, react_1.useCallback)((acc, row) => {
@@ -643,9 +644,9 @@ function isJSX(content) {
     return typeof content === "object" && content && "type" in content && "props" in content;
 }
 /** If a column def return just string text for a given row, apply some default styling. */
-function toContent(content, isHeader, canSortColumn, isClientSideSorting, style, as, alignment) {
-    var _a;
-    content = isGridCellContent(content) ? content.content : content;
+function toContent(maybeContent, isHeader, canSortColumn, isClientSideSorting, style, as, alignment) {
+    var _a, _b;
+    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
         // possible, i.e. only for visible rows if we're in a virtual table).
@@ -662,11 +663,19 @@ function toContent(content, isHeader, canSortColumn, isClientSideSorting, style,
         // for those tables.
         throw new Error("GridTables with as=virtual & sortable columns should use functions that return JSX, instead of JSX");
     }
+    content =
+        isGridCellContent(maybeContent) && !!maybeContent.onClick
+            ? (0, getInteractiveElement_1.getButtonOrLink)(content, maybeContent.onClick, {
+                css: Css_1.Css.maxw100.lightBlue700.if(((_a = style === null || style === void 0 ? void 0 : style.presentationSettings) === null || _a === void 0 ? void 0 : _a.wrap) === false).truncate.$,
+            })
+            : content;
     if (content && typeof content === "string" && isHeader && canSortColumn) {
         return (0, jsx_runtime_1.jsx)(SortHeader_1.SortHeader, { content: content, iconOnLeft: alignment === "right" }, void 0);
     }
-    else if (content && typeof content === "string" && ((_a = style === null || style === void 0 ? void 0 : style.presentationSettings) === null || _a === void 0 ? void 0 : _a.wrap) === false) {
-        return ((0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.mw0.truncate.$, title: content }, { children: content }), 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") {
+        // 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));
     }
     else if (style.emptyCell && isContentEmpty(content)) {
         // If the content is empty and the user specified an `emptyCell` node, return that.

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

@@ -1,5 +1,5 @@
 import { ReactNode } from "react";
 import { GridCellContent, GridColumn, GridDataRow, Kinded } from "./GridTable";
 import { SortOn, SortState } from "./useSortState";
-export declare function sortRows<R extends Kinded>(columns: GridColumn<R>[], rows: GridDataRow<R>[], sortState: SortState<number>): GridDataRow<R>[];
+export declare function sortRows<R extends Kinded>(columns: GridColumn<R>[], rows: GridDataRow<R>[], sortState: SortState<number>, caseSensitive: boolean): GridDataRow<R>[];
 export declare function ensureClientSideSortValueIsSortable(sortOn: SortOn, isHeader: boolean, column: GridColumn<any>, idx: number, maybeContent: ReactNode | GridCellContent): void;

package/dist/components/Table/sortRows.js

@@ -3,26 +3,26 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ensureClientSideSortValueIsSortable = exports.sortRows = void 0;
 const GridTable_1 = require("./GridTable");
 // Returns a shallow copy of the `rows` parameter sorted based on `sortState`
-function sortRows(columns, rows, sortState) {
-    const sorted = sortBatch(columns, rows, sortState);
+function sortRows(columns, rows, sortState, caseSensitive) {
+    const sorted = sortBatch(columns, rows, sortState, caseSensitive);
     // Recursively sort child rows
     sorted.forEach((row, i) => {
         if (row.children) {
-            sorted[i].children = sortRows(columns, row.children, sortState);
+            sorted[i].children = sortRows(columns, row.children, sortState, caseSensitive);
         }
     });
     return sorted;
 }
 exports.sortRows = sortRows;
-function sortBatch(columns, batch, sortState) {
+function sortBatch(columns, batch, sortState, caseSensitive) {
     // When client-side sort, the sort value is the column index
     const [value, direction] = sortState;
     const column = columns[value];
     const invert = direction === "DESC";
     // Make a shallow copy for sorting to avoid mutating the original list
     return [...batch].sort((a, b) => {
-        const v1 = sortValue((0, GridTable_1.applyRowFn)(column, a, {}, 0));
-        const v2 = sortValue((0, GridTable_1.applyRowFn)(column, b, {}, 0));
+        const v1 = sortValue((0, GridTable_1.applyRowFn)(column, a, {}, 0), caseSensitive);
+        const v2 = sortValue((0, GridTable_1.applyRowFn)(column, b, {}, 0), caseSensitive);
         const v1e = v1 === null || v1 === undefined;
         const v2e = v2 === null || v2 === undefined;
         if (a.pin || b.pin) {
@@ -43,7 +43,7 @@ function sortBatch(columns, batch, sortState) {
     });
 }
 /** Look at a row and get its sort value. */
-function sortValue(value) {
+function sortValue(value, caseSensitive) {
     // Check sortValue and then fallback on value
     let maybeFn = value;
     if (value && typeof value === "object") {
@@ -60,13 +60,14 @@ function sortValue(value) {
     }
     // Watch for functions that need to read from a potentially-changing proxy
     if (maybeFn instanceof Function) {
-        return maybeFn();
+        maybeFn = maybeFn();
     }
-    return maybeFn;
+    // If it is a string, then always lower case it for comparisons
+    return typeof maybeFn === "string" && !caseSensitive ? maybeFn.toLowerCase() : maybeFn;
 }
 function ensureClientSideSortValueIsSortable(sortOn, isHeader, column, idx, maybeContent) {
     if (process.env.NODE_ENV !== "production" && !isHeader && sortOn === "client" && column.clientSideSort !== false) {
-        const value = sortValue(maybeContent);
+        const value = sortValue(maybeContent, false);
         if (!canClientSideSort(value)) {
             throw new Error(`Column ${idx} passed an unsortable value, use GridCellContent or clientSideSort=false`);
         }

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

@@ -10,5 +10,5 @@ import { Direction, GridColumn, GridSortConfig, Kinded } from "./GridTable";
 export declare type SortState<S> = readonly [S, Direction];
 export declare type SortOn = "client" | "server" | undefined;
 /** Small custom hook that wraps the "setSortColumn inverts the current sort" logic. */
-export declare function useSortState<R extends Kinded, S>(columns: GridColumn<R, S>[], sorting?: GridSortConfig<S>): [SortState<S> | undefined, (value: S) => void, SortOn];
+export declare function useSortState<R extends Kinded, S>(columns: GridColumn<R, S>[], sorting?: GridSortConfig<S>): [SortState<S> | undefined, (value: S) => void, SortOn, boolean];
 export declare function deriveSortState<S>(currentSortState: SortState<S> | undefined, clickedKey: S, initialSortState: SortState<S> | undefined): SortState<S> | undefined;

package/dist/components/Table/useSortState.js

@@ -47,7 +47,9 @@ function useSortState(columns, sorting) {
     }, 
     // Note that sorting.onSort is not listed here, so we bind to whatever the 1st sorting.onSort was
     [initialSortState, sortState, onSort]);
-    return [sortState, setSortKey, sorting === null || sorting === void 0 ? void 0 : sorting.on];
+    // If sorting is done on the client, the by default the sort will NOT be case sensitive
+    const caseSensitive = (sorting === null || sorting === void 0 ? void 0 : sorting.on) === "client" ? !!sorting.caseSensitive : false;
+    return [sortState, setSortKey, sorting === null || sorting === void 0 ? void 0 : sorting.on, caseSensitive];
 }
 exports.useSortState = useSortState;
 // Exported for testing purposes

package/dist/components/index.d.ts

@@ -19,6 +19,7 @@ export * from "./Modal";
 export * from "./Modal/useModal";
 export { NavLink } from "./NavLink";
 export { PresentationProvider } from "./PresentationContext";
+export * from "./Snackbar";
 export * from "./Stepper";
 export * from "./SuperDrawer";
 export * from "./Table";

package/dist/components/index.js

@@ -35,6 +35,7 @@ var NavLink_1 = require("./NavLink");
 Object.defineProperty(exports, "NavLink", { enumerable: true, get: function () { return NavLink_1.NavLink; } });
 var PresentationContext_1 = require("./PresentationContext");
 Object.defineProperty(exports, "PresentationProvider", { enumerable: true, get: function () { return PresentationContext_1.PresentationProvider; } });
+__exportStar(require("./Snackbar"), exports);
 __exportStar(require("./Stepper"), exports);
 __exportStar(require("./SuperDrawer"), exports);
 __exportStar(require("./Table"), exports);

package/dist/components/internal/OverlayTrigger.js

@@ -23,7 +23,7 @@ function OverlayTrigger(props) {
         placement: (placement ? `bottom ${placement}` : "bottom left"),
     });
     const tid = (0, utils_1.useTestIds)(props, isTextButton(trigger) ? (0, defaultTestId_1.defaultTestId)(trigger.label) : trigger.icon);
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.relative.dib.$ }, { children: [isTextButton(trigger) ? ((0, jsx_runtime_1.jsx)(Button_1.Button, Object.assign({ variant: "secondary" }, trigger, { menuTriggerProps: menuTriggerProps, buttonRef: buttonRef, endAdornment: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: state.isOpen ? "chevronUp" : "chevronDown" }, void 0), disabled: disabled, tooltip: tooltip }, tid), void 0)) : ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, Object.assign({}, trigger, { menuTriggerProps: menuTriggerProps, buttonRef: buttonRef }, tid), void 0)), state.isOpen && ((0, jsx_runtime_1.jsx)(internal_1.Popover, Object.assign({ triggerRef: buttonRef, popoverRef: popoverRef, positionProps: positionProps, onClose: () => state.close(), isOpen: state.isOpen }, { children: children }), void 0))] }), void 0));
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.relative.dib.$ }, { children: [isTextButton(trigger) ? ((0, jsx_runtime_1.jsx)(Button_1.Button, Object.assign({ variant: "secondary" }, trigger, { menuTriggerProps: menuTriggerProps, buttonRef: buttonRef, endAdornment: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: state.isOpen ? "chevronUp" : "chevronDown" }, void 0), disabled: disabled, tooltip: tooltip, onClick: utils_1.noop }, tid), void 0)) : ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, Object.assign({}, trigger, { menuTriggerProps: menuTriggerProps, buttonRef: buttonRef }, tid, { onClick: utils_1.noop }), void 0)), state.isOpen && ((0, jsx_runtime_1.jsx)(internal_1.Popover, Object.assign({ triggerRef: buttonRef, popoverRef: popoverRef, positionProps: positionProps, onClose: () => state.close(), isOpen: state.isOpen }, { children: children }), void 0))] }), void 0));
 }
 exports.OverlayTrigger = OverlayTrigger;
 function isTextButton(trigger) {

package/dist/interfaces.d.ts

@@ -16,7 +16,7 @@ export interface BeamButtonProps {
      */
     disabled?: boolean | ReactNode;
     /** If function, then it is the handler that is called when the press is released over the target. Otherwise if string, it is the URL path for the link */
-    onClick?: ((e: PressEvent) => void) | string;
+    onClick: ((e: PressEvent) => void) | string;
     /** Text to be shown via a tooltip when the user hovers over the button */
     tooltip?: ReactNode;
     /** Whether to open link in a new tab. This only effects the element if the `onClick` is a `string`/URL. */

package/dist/utils/getInteractiveElement.d.ts

@@ -0,0 +1,3 @@
+import { PressEvent } from "@react-types/shared";
+import { HTMLAttributes, ReactNode } from "react";
+export declare function getButtonOrLink(content: ReactNode, onClick: ((e: PressEvent) => void) | string, attrs: HTMLAttributes<HTMLButtonElement | HTMLAnchorElement>, openInNew?: boolean, downloadLink?: boolean): JSX.Element;

package/dist/utils/getInteractiveElement.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getButtonOrLink = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_router_dom_1 = require("react-router-dom");
+const index_1 = require("./index");
+function getButtonOrLink(content, onClick, attrs, openInNew = false, downloadLink = false) {
+    return typeof onClick === "string" ? ((0, index_1.isAbsoluteUrl)(onClick) || openInNew || downloadLink ? ((0, jsx_runtime_1.jsx)("a", Object.assign({}, attrs, { href: onClick }, (downloadLink ? { download: "" } : { target: "_blank", rel: "noreferrer noopener" }), { children: content }), void 0)) : ((0, jsx_runtime_1.jsx)(react_router_dom_1.Link, Object.assign({}, attrs, { to: onClick }, { children: content }), void 0))) : ((0, jsx_runtime_1.jsx)("button", Object.assign({}, attrs, { children: content }), void 0));
+}
+exports.getButtonOrLink = getButtonOrLink;

package/package.json

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