@homebound/beam 2.151.2 → 2.153.1

package/dist/components/Button.js

@@ -11,8 +11,12 @@ 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;
-    const showExternalLinkIcon = (typeof onPress === "string" && (0, utils_1.isAbsoluteUrl)(onPress)) || openInNew;
-    const isDisabled = !!disabled;
+    const asLink = typeof onPress === "string";
+    const showExternalLinkIcon = (asLink && (0, utils_1.isAbsoluteUrl)(onPress)) || openInNew;
+    const [isDisabled, setIsDisabled] = (0, react_1.useState)(!!disabled);
+    (0, react_1.useEffect)(() => {
+        setIsDisabled(!!disabled);
+    }, [disabled]);
     const ariaProps = { onPress, isDisabled, ...otherProps, ...menuTriggerProps };
     const { label, 
     // Default the icon based on other properties.
@@ -21,8 +25,17 @@ function Button(props) {
     const tid = (0, useTestIds_1.useTestIds)(props, label);
     const { buttonProps, isPressed } = (0, react_aria_1.useButton)({
         ...ariaProps,
-        onPress: typeof onPress === "string" ? utils_1.noop : onPress,
-        elementType: typeof onPress === "string" ? "a" : "button",
+        onPress: asLink
+            ? utils_1.noop
+            : (e) => {
+                const result = onPress(e);
+                if (isPromise(result)) {
+                    setIsDisabled(true);
+                    result.finally(() => setIsDisabled(false));
+                }
+                return result;
+            },
+        elementType: asLink ? "a" : "button",
     }, ref);
     const { isFocusVisible, focusProps } = (0, react_aria_1.useFocusRing)(ariaProps);
     const { hoverProps, isHovered } = (0, react_aria_1.useHover)(ariaProps);
@@ -38,7 +51,7 @@ function Button(props) {
         ...buttonProps,
         ...focusProps,
         ...hoverProps,
-        className: typeof onPress === "string" ? components_1.navLink : undefined,
+        className: asLink ? components_1.navLink : undefined,
         css: {
             ...Css_1.Css.buttonBase.tt("inherit").$,
             ...baseStyles,
@@ -110,3 +123,6 @@ const iconStyles = {
     md: Css_1.Css.mr1.$,
     lg: Css_1.Css.mrPx(10).$,
 };
+function isPromise(obj) {
+    return typeof obj === "object" && "then" in obj && typeof obj.then === "function";
+}

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

@@ -122,6 +122,8 @@ export declare type GridSortConfig<S> = {
     /** The optional initial column (index in columns) and direction to sort. */
     initial?: [S | GridColumn<any>, Direction] | undefined;
     caseSensitive?: boolean;
+    /** The optional primary sort column, this will be sorted first above/below table sort  */
+    primary?: [S | GridColumn<any>, Direction] | undefined;
 } | {
     on: "server";
     /** The current sort by value + direction (if server-side sorting). */

package/dist/components/Table/sortRows.js

@@ -16,32 +16,47 @@ function sortRows(columns, rows, sortState, caseSensitive) {
 exports.sortRows = sortRows;
 function sortBatch(columns, batch, sortState, caseSensitive) {
     // When client-side sort, the sort value is the column index
-    const [value, direction] = sortState;
+    const [value, direction, primaryKey, primaryDirection] = sortState;
     const column = columns[value];
     const invert = direction === "DESC";
+    const primaryInvert = primaryDirection === "DESC";
+    const primaryColumn = primaryKey && columns[primaryKey];
     // 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), 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) && !(a.pin === b.pin)) {
             const ap = a.pin === "first" ? -1 : a.pin === "last" ? 1 : 0;
             const bp = b.pin === "first" ? -1 : b.pin === "last" ? 1 : 0;
             return ap === bp ? 0 : ap < bp ? -1 : 1;
         }
-        else if ((v1e && v2e) || v1 === v2) {
-            return 0;
+        else if (primaryColumn) {
+            // When primary key exist sort that priority first
+            const primaryCompare = compare(primaryColumn, a, b, primaryInvert, caseSensitive);
+            // if both rows are not primary sort equivalent
+            if (primaryCompare !== 0) {
+                return primaryCompare;
+            }
         }
-        else if (v1e || v1 < v2) {
-            return invert ? 1 : -1;
-        }
-        else if (v2e || v1 > v2) {
-            return invert ? -1 : 1;
-        }
-        return 0;
+        return compare(column, a, b, invert, caseSensitive);
     });
 }
+function compare(column, a, b, invert, caseSensitive) {
+    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 ((v1e && v2e) || v1 === v2) {
+        return 0;
+    }
+    else if (v1e || v1 < v2) {
+        return invert ? 1 : -1;
+    }
+    else if (v2e || v1 > v2) {
+        return invert ? -1 : 1;
+    }
+    else {
+        return 0;
+    }
+}
 /** Look at a row and get its sort value. */
 function sortValue(value, caseSensitive) {
     // Check sortValue and then fallback on value

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

@@ -7,7 +7,7 @@ import { Direction, GridColumn, GridSortConfig, Kinded } from "./GridTable";
  * a) `serverSideSortKey` if we're server-side sorting, or
  * b) it's index in the `columns` array, if client-side sorting
  */
-export declare type SortState<S> = readonly [S, Direction];
+export declare type SortState<S> = readonly [S, Direction, S | undefined, Direction | undefined];
 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, boolean];

package/dist/components/Table/useSortState.js

@@ -10,23 +10,24 @@ function useSortState(columns, sorting) {
     // `setSortState` just changed anyway (in response to the user sorting a column).
     const initialSortState = (0, react_1.useMemo)(() => {
         if ((sorting === null || sorting === void 0 ? void 0 : sorting.on) === "client") {
-            const { initial } = sorting;
+            const { initial, primary } = sorting;
+            const primaryKey = primary && (typeof primary[0] === "number" ? primary[0] : columns.indexOf(primary[0]));
             if (initial === undefined && "initial" in sorting) {
                 // if explicitly set to `undefined`, then do not sort
                 return undefined;
             }
             else if (initial) {
                 const key = typeof initial[0] === "number" ? initial[0] : columns.indexOf(initial[0]);
-                return [key, initial[1]];
+                return [key, initial[1], primaryKey, primary === null || primary === void 0 ? void 0 : primary[1]];
             }
             else {
                 // If no explicit sorting, assume 1st column ascending
                 const firstSortableColumn = columns.findIndex((c) => c.clientSideSort !== false);
-                return [firstSortableColumn, GridTable_1.ASC];
+                return [firstSortableColumn, GridTable_1.ASC, primaryKey, primary === null || primary === void 0 ? void 0 : primary[1]];
             }
         }
         else {
-            return sorting === null || sorting === void 0 ? void 0 : sorting.value;
+            return (sorting === null || sorting === void 0 ? void 0 : sorting.value) ? [sorting === null || sorting === void 0 ? void 0 : sorting.value[0], sorting === null || sorting === void 0 ? void 0 : sorting.value[1], undefined, undefined] : undefined;
         }
     }, 
     // We want to allow the user to not memoize `GridTableProps.sorting` b/c for the
@@ -57,17 +58,17 @@ function deriveSortState(currentSortState, clickedKey, initialSortState) {
     const [currentKey, currentDirection] = currentSortState || [];
     // If the current sort state is not defined, or clicking a new column, then sort ASC on the clicked key
     if (!currentSortState || clickedKey !== currentKey) {
-        return [clickedKey, GridTable_1.ASC];
+        return [clickedKey, GridTable_1.ASC, initialSortState === null || initialSortState === void 0 ? void 0 : initialSortState[2], initialSortState === null || initialSortState === void 0 ? void 0 : initialSortState[3]];
     }
     // If there is an `initialSortState` and we're clicking on that same key, then flip the sort.
     // Handles cases where the initial sort is DESC so that we can allow for DESC to ASC sorting.
     if (initialSortState && initialSortState[0] === clickedKey) {
-        return [clickedKey, currentDirection === GridTable_1.ASC ? GridTable_1.DESC : GridTable_1.ASC];
+        return [clickedKey, currentDirection === GridTable_1.ASC ? GridTable_1.DESC : GridTable_1.ASC, initialSortState === null || initialSortState === void 0 ? void 0 : initialSortState[2], initialSortState === null || initialSortState === void 0 ? void 0 : initialSortState[3]];
     }
     // Otherwise when clicking the current column, toggle through sort states
     if (currentDirection === GridTable_1.ASC) {
         // if ASC -> go to desc
-        return [clickedKey, GridTable_1.DESC];
+        return [clickedKey, GridTable_1.DESC, initialSortState === null || initialSortState === void 0 ? void 0 : initialSortState[2], initialSortState === null || initialSortState === void 0 ? void 0 : initialSortState[3]];
     }
     // Else, direction is already DESC, so revert to original sort value.
     return initialSortState;

package/dist/inputs/DateFields/DateFieldBase.d.ts

@@ -21,6 +21,7 @@ export interface DateFieldBaseProps extends Pick<TextFieldBaseProps<{}>, "border
     placeholder?: string;
     format?: keyof typeof dateFormats;
     iconLeft?: boolean;
+    hideCalendarIcon?: boolean;
     /**
      * Set custom logic for individual dates or date ranges to be disabled in the picker
      * exposed from `react-day-picker`: https://react-day-picker.js.org/api/DayPicker#modifiers

package/dist/inputs/DateFields/DateFieldBase.js

@@ -18,7 +18,7 @@ function DateFieldBase(props) {
     var _a;
     const { label, disabled, required, value, onFocus, onBlur, 
     // Pull `onChange` out of the props, but we're not directly using it. Do not want to keep it in `...others`
-    onChange: _onChange, errorMsg, helperText, inlineLabel = false, readOnly, format = "short", iconLeft = false, disabledDays, onEnter, defaultOpen, mode, ...others } = props;
+    onChange: _onChange, errorMsg, helperText, inlineLabel = false, readOnly, format = "short", iconLeft = false, hideCalendarIcon = false, disabledDays, onEnter, defaultOpen, mode, ...others } = props;
     const inputRef = (0, react_1.useRef)(null);
     const inputWrapRef = (0, react_1.useRef)(null);
     const buttonRef = (0, react_1.useRef)(null);
@@ -156,7 +156,7 @@ function DateFieldBase(props) {
                         const parsed = mode === "range" ? (0, utils_1.parseDateRange)(v, utils_1.dateFormats.short) : (0, utils_1.parseDate)(v, utils_1.dateFormats.short);
                         onChange(parsed);
                     }
-                }, endAdornment: !iconLeft && calendarButton, startAdornment: iconLeft && calendarButton, tooltip: (0, components_1.resolveTooltip)(disabled, undefined, readOnly) }, others), void 0), state.isOpen && ((0, jsx_runtime_1.jsx)(internal_1.Popover, Object.assign({ triggerRef: inputWrapRef, popoverRef: overlayRef, positionProps: positionProps, onClose: state.close, isOpen: state.isOpen }, { children: (0, jsx_runtime_1.jsx)(DatePickerOverlay_1.DatePickerOverlay, Object.assign({ overlayProps: overlayProps }, { children: props.mode === "range" ? ((0, jsx_runtime_1.jsx)(internal_1.DateRangePicker, Object.assign({ range: wipValue, disabledDays: disabledDays, onSelect: (dr) => {
+                }, endAdornment: (!hideCalendarIcon && !iconLeft) && calendarButton, startAdornment: (!hideCalendarIcon && iconLeft) && calendarButton, tooltip: (0, components_1.resolveTooltip)(disabled, undefined, readOnly) }, others), void 0), state.isOpen && ((0, jsx_runtime_1.jsx)(internal_1.Popover, Object.assign({ triggerRef: inputWrapRef, popoverRef: overlayRef, positionProps: positionProps, onClose: state.close, isOpen: state.isOpen }, { children: (0, jsx_runtime_1.jsx)(DatePickerOverlay_1.DatePickerOverlay, Object.assign({ overlayProps: overlayProps }, { children: props.mode === "range" ? ((0, jsx_runtime_1.jsx)(internal_1.DateRangePicker, Object.assign({ range: wipValue, disabledDays: disabledDays, onSelect: (dr) => {
                             var _a;
                             // Note: Do not close date range picker on select to allow the user to select multiple dates at a time
                             setInputValue((_a = (0, utils_1.formatDateRange)(dr, utils_1.dateFormats.short)) !== null && _a !== void 0 ? _a : "");

package/dist/interfaces.d.ts

@@ -15,7 +15,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) | ((e: PressEvent) => Promise<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/package.json

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