@homebound/beam 2.157.0 → 2.157.3

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

@@ -33,6 +33,7 @@ const utils_1 = require("../../utils");
  * above the SuperDrawer.
  */
 function SuperDrawer() {
+    var _a, _b;
     const { drawerContentStack: contentStack, modalState, modalBodyDiv, modalFooterDiv, modalHeaderDiv, } = (0, BeamContext_1.useBeamContext)();
     const { closeDrawer } = (0, components_1.useSuperDrawer)();
     const drawerHeaderRef = (0, react_3.useRef)(null);
@@ -48,17 +49,16 @@ function SuperDrawer() {
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [modalBodyRef.current, modalFooterRef.current, modalState.current]);
-    if (contentStack.current.length === 0) {
-        return null;
-    }
     // Get the latest element on the stack
-    const currentContent = contentStack.current[contentStack.current.length - 1].opts;
-    const { content } = currentContent;
+    // We use undefined, nullish operators and empty object here to allow AnimatePresence
+    // to animate the drawers exit transition when our stack is empty
+    const currentContent = (_a = contentStack.current[contentStack.current.length - 1]) === null || _a === void 0 ? void 0 : _a.opts;
+    const { content } = currentContent !== null && currentContent !== void 0 ? currentContent : {};
     // Also get the first / non-detail element on the stack
-    const firstContent = contentStack.current[0].opts;
-    const { onPrevClick, onNextClick, titleRightContent, titleLeftContent, hideControls } = firstContent;
+    const firstContent = (_b = contentStack.current[0]) === null || _b === void 0 ? void 0 : _b.opts;
+    const { onPrevClick, onNextClick, titleRightContent, titleLeftContent, hideControls } = firstContent !== null && firstContent !== void 0 ? firstContent : {};
     const isDetail = currentContent !== firstContent;
-    const title = currentContent.title || firstContent.title;
+    const title = content === undefined ? '' : currentContent.title || firstContent.title;
     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", 

package/dist/components/SuperDrawer/SuperDrawerContent.js

@@ -15,10 +15,11 @@ 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;
     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 } = contentStack.current[contentStack.current.length - 1];
+    const { kind } = (_a = contentStack.current[contentStack.current.length - 1]) !== null && _a !== void 0 ? _a : {};
     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"));

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.0",
+  "version": "2.157.3",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",