@homebound/beam 2.180.0 → 2.181.1

package/dist/components/Accordion.d.ts

@@ -0,0 +1,20 @@
+import { Dispatch, ReactNode, SetStateAction } from "react";
+export interface AccordionProps {
+    title: ReactNode;
+    children: ReactNode;
+    disabled?: boolean;
+    defaultExpanded?: boolean;
+    size?: AccordionSize;
+    /** Adds a top border (enabled by default) */
+    topBorder?: boolean;
+    /** Adds a bottom border (disabled by default) */
+    bottomBorder?: boolean;
+    /**
+     * Used by AccordionList
+     * Allows multiple accordions to be expanded simultaneously (enabled by default)
+     */
+    index?: number;
+    setExpandedIndex?: Dispatch<SetStateAction<number | undefined>>;
+}
+export declare function Accordion(props: AccordionProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare type AccordionSize = "xs" | "sm" | "md" | "lg";

package/dist/components/Accordion.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Accordion = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const utils_1 = require("@react-aria/utils");
+const react_1 = require("react");
+const react_aria_1 = require("react-aria");
+const index_1 = require("../index");
+function Accordion(props) {
+    const { title, children, size, disabled = false, defaultExpanded = false, topBorder = true, bottomBorder = false, index, setExpandedIndex, } = props;
+    const testIds = (0, index_1.useTestIds)(props, "accordion");
+    const id = (0, utils_1.useId)();
+    const [expanded, setExpanded] = (0, react_1.useState)(defaultExpanded);
+    const { isFocusVisible, focusProps } = (0, react_aria_1.useFocusRing)();
+    (0, react_1.useEffect)(() => { setExpanded(defaultExpanded); }, [defaultExpanded]);
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, testIds.container, { css: {
+            ...index_1.Css.bGray400.if(topBorder).bt.if(bottomBorder).bb.$,
+            ...(size ? index_1.Css.wPx(accordionSizes[size]).$ : {}),
+        } }, { children: [(0, jsx_runtime_1.jsxs)("button", Object.assign({}, testIds.title, focusProps, { "aria-controls": id, "aria-expanded": expanded, disabled: disabled, css: {
+                    ...index_1.Css.df.jcsb.gap2.aic.w100.p2.baseEm.outline("none").addIn(":hover", index_1.Css.bgGray100.$).$,
+                    ...(disabled && index_1.Css.gray500.$),
+                    ...(isFocusVisible && index_1.Css.boxShadow(`inset 0 0 0 2px ${index_1.Palette.LightBlue700}`).$),
+                }, onClick: () => {
+                    setExpanded(!expanded);
+                    if (setExpandedIndex)
+                        setExpandedIndex(index);
+                } }, { children: [(0, jsx_runtime_1.jsx)("span", { children: title }, void 0), (0, jsx_runtime_1.jsx)("span", Object.assign({ css: {
+                            transition: "transform 250ms linear",
+                            transform: expanded ? "rotate(180deg)" : "rotate(0deg)",
+                        } }, { children: (0, jsx_runtime_1.jsx)(index_1.Icon, { icon: "chevronDown" }, void 0) }), void 0)] }), void 0), (0, jsx_runtime_1.jsx)("div", Object.assign({}, testIds.details, { id: id, "aria-hidden": !expanded, css: {
+                    // Use max-height for grow/shrink animation (remove close animation for AccordionList to avoid delays)
+                    ...index_1.Css.overflowHidden.maxhPx(1000).add("transition", `max-height ${expanded || !index ? "250ms" : "0"} ease-in-out`).$,
+                    ...(!expanded || disabled ? index_1.Css.maxh0.$ : {}),
+                } }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ css: index_1.Css.px2.pb2.pt1.$ }, { children: children }), void 0) }), void 0)] }), void 0));
+}
+exports.Accordion = Accordion;
+const accordionSizes = {
+    xs: 240,
+    sm: 360,
+    md: 480,
+    lg: 600,
+};

package/dist/components/AccordionList.d.ts

@@ -0,0 +1,9 @@
+import { AccordionProps, AccordionSize } from "./Accordion";
+interface AccordionListProps {
+    accordions: AccordionProps[];
+    /** Allows multiple accordions to be expanded simultaneously (enabled by default) */
+    allowMultipleExpanded?: boolean;
+    size?: AccordionSize;
+}
+export declare function AccordionList(props: AccordionListProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/AccordionList.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AccordionList = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("@emotion/react");
+const react_2 = require("react");
+const __1 = require("..");
+const Accordion_1 = require("./Accordion");
+function AccordionList(props) {
+    const { accordions, size, allowMultipleExpanded = true } = props;
+    const [expandedIndex, setExpandedIndex] = (0, react_2.useState)();
+    const tid = (0, __1.useTestIds)(props, "accordionList");
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: accordions.map((accordionProps, index, arr) => ((0, react_1.createElement)(Accordion_1.Accordion, { ...accordionProps, ...tid, key: index, size: size, bottomBorder: index === arr.length - 1, defaultExpanded: !allowMultipleExpanded && expandedIndex === index, index: index, setExpandedIndex: setExpandedIndex }))) }, void 0));
+}
+exports.AccordionList = AccordionList;

package/dist/components/Table/GridTable.js

@@ -410,7 +410,6 @@ function calcColumnSizes(columns, tableWidth, tableMinWidthPx = 0) {
     }, { claimedPercentages: 0, claimedPixels: 0, totalFr: 0 });
     // This is our "fake but for some reason it lines up better" fr calc
     function fr(myFr) {
-        console.log("tableWidth", tableWidth);
         // If the tableWidth, then return a pixel value
         if (tableWidth) {
             const widthBasis = Math.max(tableWidth, tableMinWidthPx);

package/dist/components/Table/RowState.js

@@ -70,28 +70,32 @@ class RowState {
         }
     }
     loadSelected(rows) {
-        const selectedRows = rows.filter(row => row.initSelected);
-        // Initialize with selected rows as defined 
+        const selectedRows = rows.filter((row) => row.initSelected);
+        // Initialize with selected rows as defined
         const map = new Map();
-        selectedRows.forEach(row => {
+        selectedRows.forEach((row) => {
             map.set(row.id, "checked");
         });
         this.selectedRows.merge(map);
     }
     // Updates the list of rows and regenerates the collapsedRows property if needed.
     setRows(rows) {
-        // If the set of rows are different, and this is the first time adding "data" rows (non "totals" or "header" rows), then collapsedRows may need to be updated.
-        if (rows !== this.rows && this.rows.some((r) => r.kind !== "totals" && r.kind !== "header")) {
+        // If the set of rows are different
+        if (rows !== this.rows) {
             const currentCollapsedIds = this.collapsedIds;
             // Create a list of the (maybe) new rows that should be initially collapsed
             const maybeNewCollapsedRows = flattenRows(rows).filter((r) => r.initCollapsed);
+            // Check against local storage for collapsed state only if this is the first render of "data" (non-header or totals) rows.
+            const checkLocalStorage = this.persistCollapse && !this.rows.some((r) => r.kind !== "totals" && r.kind !== "header");
             // If the list of collapsed rows are different, then determine which are net-new rows and should be added to the newCollapsedIds array
             if (currentCollapsedIds.length !== maybeNewCollapsedRows.length ||
                 !currentCollapsedIds.every((id) => maybeNewCollapsedRows.some((r) => r.id === id))) {
                 // Flatten out the existing rows to make checking for new rows easier
                 const flattenedExistingIds = flattenRows(this.rows).map((r) => r.id);
                 const newCollapsedIds = maybeNewCollapsedRows
-                    .filter((maybeNewRow) => !flattenedExistingIds.includes(maybeNewRow.id))
+                    .filter((maybeNewRow) => !flattenedExistingIds.includes(maybeNewRow.id) &&
+                    // Using `!` on `this.persistCollapse!` as `checkLocalStorage` ensures this.persistCollapse is truthy
+                    (!checkLocalStorage || readLocalCollapseState(this.persistCollapse).includes(maybeNewRow.id)))
                     .map((row) => row.id);
                 // If there are new rows that should be collapsed then update the collapsedRows arrays
                 if (newCollapsedIds.length > 0) {

package/package.json

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