@homebound/beam 2.157.1 → 2.158.0

package/dist/components/Stepper.d.ts

@@ -9,4 +9,4 @@ export interface StepperProps {
     currentStep: Step["value"];
     onChange: (stepValue: string) => void;
 }
-export declare function Stepper({ steps, currentStep, onChange }: StepperProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function Stepper(props: StepperProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/Stepper.js

@@ -6,18 +6,22 @@ const react_1 = require("react");
 const react_aria_1 = require("react-aria");
 const Icon_1 = require("./Icon");
 const Css_1 = require("../Css");
-function Stepper({ steps, currentStep, onChange }) {
+const utils_1 = require("../utils");
+const defaultTestId_1 = require("../utils/defaultTestId");
+function Stepper(props) {
+    const { steps, currentStep, onChange } = props;
     if (steps.length === 0) {
         throw new Error("Stepper must be initialized with at least one step");
     }
+    const tid = (0, utils_1.useTestIds)(props, "stepper");
     // calc progress based on last completed step - return -1 when no steps completed
     const lastCompletedStep = steps.map((step) => step.state).lastIndexOf("complete");
     const maxStepWidth = 200;
     const minStepWidth = 100;
     const gap = 8;
-    return ((0, jsx_runtime_1.jsxs)("nav", Object.assign({ "aria-label": "steps", css: Css_1.Css.df.fdc.w100.$ }, { children: [(0, jsx_runtime_1.jsx)("ol", Object.assign({ css: Css_1.Css.listReset.df.gapPx(gap).$ }, { children: steps.map((step) => {
+    return ((0, jsx_runtime_1.jsxs)("nav", Object.assign({ "aria-label": "steps", css: Css_1.Css.df.fdc.w100.$ }, tid, { children: [(0, jsx_runtime_1.jsx)("ol", Object.assign({ css: Css_1.Css.listReset.df.gapPx(gap).$ }, { children: steps.map((step) => {
                     const isCurrent = currentStep === step.value;
-                    return ((0, jsx_runtime_1.jsx)("li", Object.assign({ css: Css_1.Css.df.fg1.fdc.maxwPx(maxStepWidth).mwPx(minStepWidth).$, "aria-current": isCurrent }, { children: (0, jsx_runtime_1.jsx)(StepButton, Object.assign({}, step, { onClick: () => onChange(step.value), isCurrent: isCurrent }), void 0) }), step.label));
+                    return ((0, jsx_runtime_1.jsx)("li", Object.assign({ css: Css_1.Css.df.fg1.fdc.maxwPx(maxStepWidth).mwPx(minStepWidth).$, "aria-current": isCurrent }, tid.step, { children: (0, jsx_runtime_1.jsx)(StepButton, Object.assign({}, step, { onClick: () => onChange(step.value), isCurrent: isCurrent }, tid.stepButton), void 0) }), step.label));
                 }) }), void 0), (0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.mt1.bgGray300
                     .hPx(4)
                     .maxwPx(steps.length * maxStepWidth + (steps.length - 1) * gap)
@@ -26,13 +30,15 @@ function Stepper({ steps, currentStep, onChange }) {
                         .h100.w(`${((lastCompletedStep + 1) / steps.length) * 100}%`).$ }, void 0) }), void 0)] }), void 0));
 }
 exports.Stepper = Stepper;
-function StepButton({ label, disabled, state, isCurrent, onClick }) {
+function StepButton(props) {
+    const { label, disabled, state, isCurrent, onClick } = props;
     const ariaProps = { onPress: onClick, isDisabled: disabled };
     const ref = (0, react_1.useRef)(null);
     const { buttonProps, isPressed } = (0, react_aria_1.useButton)(ariaProps, ref);
     const { isFocusVisible, focusProps } = (0, react_aria_1.useFocusRing)();
     const { hoverProps, isHovered } = (0, react_aria_1.useHover)(ariaProps);
     const focusRingStyles = state === "error" ? Css_1.Css.bshDanger.$ : Css_1.Css.bshFocus.$;
+    const tid = (0, utils_1.useTestIds)(props, "stepButton");
     return ((0, jsx_runtime_1.jsxs)("button", Object.assign({ ref: ref }, buttonProps, focusProps, hoverProps, { css: {
             ...Css_1.Css.buttonBase.$,
             ...Css_1.Css.tl.w100.h100.sm.gray700.add("whiteSpace", "initial").if(state === "error").red600.$,
@@ -41,7 +47,7 @@ function StepButton({ label, disabled, state, isCurrent, onClick }) {
             ...(isPressed ? Css_1.Css.lightBlue500.if(state === "error").red900.$ : {}),
             ...(disabled ? Css_1.Css.gray400.cursorNotAllowed.if(state === "error").red200.$ : {}),
             ...(isFocusVisible ? focusRingStyles : {}),
-        } }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.fs0.mrPx(4).$ }, { children: (0, jsx_runtime_1.jsx)(StepIcon, { state: state, isHovered: isHovered, isPressed: isPressed, isCurrent: isCurrent }, void 0) }), void 0), label] }), void 0));
+        } }, tid[(0, defaultTestId_1.defaultTestId)(label)], { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.fs0.mrPx(4).$ }, { children: (0, jsx_runtime_1.jsx)(StepIcon, { state: state, isHovered: isHovered, isPressed: isPressed, isCurrent: isCurrent }, void 0) }), void 0), label] }), void 0));
 }
 function StepIcon({ state, isHovered = false, isPressed = false, isCurrent = false }) {
     if (state === "error") {

package/dist/components/SuperDrawer/SuperDrawer.js

@@ -12,6 +12,7 @@ const components_1 = require("..");
 const BeamContext_1 = require("../BeamContext");
 const Css_1 = require("../../Css");
 const utils_1 = require("../../utils");
+const utils_2 = require("./utils");
 /**
  * Global drawer component.
  *
@@ -59,6 +60,7 @@ function SuperDrawer() {
     const { onPrevClick, onNextClick, titleRightContent, titleLeftContent, hideControls } = firstContent !== null && firstContent !== void 0 ? firstContent : {};
     const isDetail = currentContent !== firstContent;
     const title = content === undefined ? '' : currentContent.title || firstContent.title;
+    const { width = utils_2.SuperDrawerWidth.Normal } = firstContent !== null && firstContent !== void 0 ? firstContent : {};
     return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { children: content && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.Global, { styles: { body: Css_1.Css.overflowHidden.$ } }, void 0), (0, react_1.createElement)(framer_motion_1.motion.div, { ...testId, 
                     // Key is required for framer-motion animations
                     key: "superDrawer", 
@@ -72,11 +74,11 @@ function SuperDrawer() {
                     animate: { opacity: 1 }, 
                     // Unmount styles
                     exit: { opacity: 0, transition: { delay: 0.2 } }, onClick: closeDrawer },
-                    (0, jsx_runtime_1.jsx)(framer_motion_1.motion.aside, Object.assign({ css: Css_1.Css.bgWhite.h100.maxw((0, Css_1.px)(1040)).w100.df.fdc.relative.$, 
+                    (0, jsx_runtime_1.jsx)(framer_motion_1.motion.aside, Object.assign({ css: Css_1.Css.bgWhite.h100.maxw((0, Css_1.px)(width)).w100.df.fdc.relative.$, 
                         // Keeping initial x to 1040 as this will still work if the container is smaller
-                        initial: { x: 1040 }, animate: { x: 0 }, 
+                        initial: { x: width }, animate: { x: 0 }, 
                         // Custom transitions settings for the translateX animation
-                        transition: { ease: "linear", duration: 0.2, delay: 0.2 }, exit: { transition: { ease: "linear", duration: 0.2 }, x: 1040 }, 
+                        transition: { ease: "linear", duration: 0.2, delay: 0.2 }, exit: { transition: { ease: "linear", duration: 0.2 }, x: width }, 
                         // Preventing clicks from triggering parent onClick
                         onClick: (e) => e.stopPropagation() }, { children: (0, jsx_runtime_1.jsxs)(form_state_1.AutoSaveStatusProvider, { children: [(0, jsx_runtime_1.jsxs)("header", Object.assign({ css: Css_1.Css.df.p3.bb.bGray200.df.aic.jcsb.gap2.$ }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.aic.$ }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.xl2Em.gray900.mr2.$ }, testId.title, { ref: drawerHeaderRef }, { children: !modalState.current && (title || null) }), void 0), !modalState.current && (titleLeftContent || null)] }), void 0), !modalState.current && (
                                         // Forcing height to 32px to match title height

package/dist/components/SuperDrawer/SuperDrawerContent.js

@@ -7,6 +7,7 @@ const BeamContext_1 = require("../BeamContext");
 const Button_1 = require("../Button");
 const useSuperDrawer_1 = require("./useSuperDrawer");
 const Css_1 = require("../../Css");
+const utils_1 = require("./utils");
 /**
  * Helper component to place the given children and actions into the appropriate
  * DOM format to render inside the SuperDrawer.
@@ -15,17 +16,19 @@ const Css_1 = require("../../Css");
  * that knows how to handle the title, prev/next link and the onClose handler.
  */
 const SuperDrawerContent = ({ children, actions }) => {
-    var _a;
+    var _a, _b;
     const { closeDrawerDetail } = (0, useSuperDrawer_1.useSuperDrawer)();
     const { drawerContentStack: contentStack } = (0, BeamContext_1.useBeamContext)();
     // Determine if the current element is a new content element or an detail element
     const { kind } = (_a = contentStack.current[contentStack.current.length - 1]) !== null && _a !== void 0 ? _a : {};
+    const firstContent = (_b = contentStack.current[0]) === null || _b === void 0 ? void 0 : _b.opts;
+    const { width = utils_1.SuperDrawerWidth.Normal } = firstContent !== null && firstContent !== void 0 ? firstContent : {};
     function wrapWithMotionAndMaybeBack(children) {
         if (kind === "open") {
             return ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, Object.assign({ css: Css_1.Css.p3.fg1.overflowAuto.$ }, { children: children }), "content"));
         }
         else if (kind === "detail") {
-            return ((0, jsx_runtime_1.jsxs)(framer_motion_1.motion.div, Object.assign({ css: Css_1.Css.px3.pt2.pb3.fg1.$, animate: { overflow: "auto" }, transition: { overflow: { delay: 0.3 } } }, { children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { label: "Back", icon: "chevronLeft", variant: "tertiary", onClick: closeDrawerDetail }, void 0), (0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, Object.assign({ initial: { x: 1040, opacity: 0 }, animate: { x: 0, opacity: 1 }, transition: { ease: "linear", duration: 0.3, opacity: { delay: 0.15 } }, exit: { x: 1040, opacity: 0 }, css: Css_1.Css.pt2.$ }, { children: children }), void 0)] }), "content"));
+            return ((0, jsx_runtime_1.jsxs)(framer_motion_1.motion.div, Object.assign({ css: Css_1.Css.px3.pt2.pb3.fg1.$, animate: { overflow: "auto" }, transition: { overflow: { delay: 0.3 } } }, { children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { label: "Back", icon: "chevronLeft", variant: "tertiary", onClick: closeDrawerDetail }, void 0), (0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, Object.assign({ initial: { x: width, opacity: 0 }, animate: { x: 0, opacity: 1 }, transition: { ease: "linear", duration: 0.3, opacity: { delay: 0.15 } }, exit: { x: width, opacity: 0 }, css: Css_1.Css.pt2.$ }, { children: children }), void 0)] }), "content"));
         }
         else {
             // Hides content changes when closing the drawer

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

@@ -1,3 +1,4 @@
 export * from "./ConfirmCloseModal";
 export * from "./SuperDrawerContent";
 export * from "./useSuperDrawer";
+export * from "./utils";

package/dist/components/SuperDrawer/index.js

@@ -14,3 +14,4 @@ Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./ConfirmCloseModal"), exports);
 __exportStar(require("./SuperDrawerContent"), exports);
 __exportStar(require("./useSuperDrawer"), exports);
+__exportStar(require("./utils"), exports);

package/dist/components/SuperDrawer/useSuperDrawer.d.ts

@@ -1,5 +1,6 @@
 import { ReactNode } from "react";
 import { CanCloseCheck } from "../../types";
+import { SuperDrawerWidth } from "./utils";
 export interface OpenInDrawerOpts {
     /** Title of the SuperDrawer */
     title: string;
@@ -16,6 +17,8 @@ export interface OpenInDrawerOpts {
     /** Adds a callback that is called _after_ close has definitely happened. */
     onClose?: () => void;
     content: ReactNode;
+    /** Adds the ability to change the SuperDrawer width based on some pre-defined values */
+    width?: SuperDrawerWidth;
 }
 export interface OpenDetailOpts {
     /** Title of the SuperDrawer for this detail page (replaces the original title). */

package/dist/components/SuperDrawer/utils.d.ts

@@ -0,0 +1,4 @@
+export declare enum SuperDrawerWidth {
+    Small = 560,
+    Normal = 1040
+}

package/dist/components/SuperDrawer/utils.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SuperDrawerWidth = void 0;
+var SuperDrawerWidth;
+(function (SuperDrawerWidth) {
+    SuperDrawerWidth[SuperDrawerWidth["Small"] = 560] = "Small";
+    SuperDrawerWidth[SuperDrawerWidth["Normal"] = 1040] = "Normal";
+})(SuperDrawerWidth = exports.SuperDrawerWidth || (exports.SuperDrawerWidth = {}));
+;

package/dist/components/Table/sortRows.js

@@ -23,7 +23,10 @@ function sortBatch(columns, batch, sortState, caseSensitive) {
     const primaryColumn = primaryKey && columns[primaryKey];
     // Make a shallow copy for sorting to avoid mutating the original list
     return [...batch].sort((a, b) => {
-        if ((a.pin || b.pin) && !(a.pin === b.pin)) {
+        if (a.pin || b.pin) {
+            // If both rows are pinned, we don't sort within them, because by pinning the page is taking
+            // explicit ownership over the order of the rows (and we also don't support "levels of pins",
+            // i.e. for change events putting "just added" rows `pin: last` and the "add new" row `pin: lastest`).
             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;

package/package.json

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