@homebound/beam 2.180.0 → 2.181.0

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/package.json

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