From 77a26be67326f37a21a65edfc06ab296f22576f5 Mon Sep 17 00:00:00 2001 From: Brandon Dow Date: Tue, 5 Mar 2024 12:21:49 -0500 Subject: [PATCH 1/2] Initial --- .../ContainerGrid/ContainerGrid.stories.tsx | 179 ++++++++++++++++++ .../ContainerGrid/ContainerGrid.tsx | 55 ++++++ .../ContainerGrid/ContainerGridContext.tsx | 25 +++ .../ContainerGrid/ContainerGridItem.tsx | 48 +++++ .../ContainerGrid/useContainerBreakpoint.ts | 31 +++ .../ContainerGrid/useContainerGrid.ts | 56 ++++++ .../ContainerGrid/useContainerGridItem.ts | 25 +++ src/components/ContainerGrid/utils.ts | 12 ++ src/components/Table/GridTable.stories.tsx | 11 +- 9 files changed, 441 insertions(+), 1 deletion(-) create mode 100644 src/components/ContainerGrid/ContainerGrid.stories.tsx create mode 100644 src/components/ContainerGrid/ContainerGrid.tsx create mode 100644 src/components/ContainerGrid/ContainerGridContext.tsx create mode 100644 src/components/ContainerGrid/ContainerGridItem.tsx create mode 100644 src/components/ContainerGrid/useContainerBreakpoint.ts create mode 100644 src/components/ContainerGrid/useContainerGrid.ts create mode 100644 src/components/ContainerGrid/useContainerGridItem.ts create mode 100644 src/components/ContainerGrid/utils.ts diff --git a/src/components/ContainerGrid/ContainerGrid.stories.tsx b/src/components/ContainerGrid/ContainerGrid.stories.tsx new file mode 100644 index 000000000..e08625973 --- /dev/null +++ b/src/components/ContainerGrid/ContainerGrid.stories.tsx @@ -0,0 +1,179 @@ +import { Meta } from "@storybook/react"; +import { ContainerGrid, ContainerGridProps } from "src/components/ContainerGrid/ContainerGrid"; +import { Button } from "src/components"; +import { useCallback, useRef, useState } from "react"; +import { ContainerGridItem, ContainerGridItemProps } from "src/components/ContainerGrid/ContainerGridItem"; +import { useResizeObserver } from "@react-aria/utils"; +import { useContainerBreakpoint } from "src/components/ContainerGrid/useContainerBreakpoint"; +import { ContainerBreakpoint } from "src/components/ContainerGrid/utils"; +import { Css } from "src/Css"; +import { NumberField } from "src/inputs"; + +export default { + component: ContainerGrid, +} as Meta; + +export function Example() { + const [num, setNum] = useState(0); + return ( +
+
+
+ Resize Me +
+
+ + +

Title of the Page

+
+
+
+ ); +} + +function MainContent() { + const paragraph = ( +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore + magna aliqua. Laoreet suspendisse interdum consectetur libero id faucibus nisl tincidunt eget. Amet est placerat + in egestas erat imperdiet sed. Ultrices neque ornare aenean euismod elementum. Faucibus in ornare quam viverra + orci sagittis. Aliquet bibendum enim facilisis gravida neque. Porttitor rhoncus dolor purus non enim. Dolor morbi + non arcu risus quis varius. Pellentesque pulvinar pellentesque habitant morbi tristique senectus et. Cursus risus + at ultrices mi tempus imperdiet nulla. A lacus vestibulum sed arcu non odio. Et ultrices neque ornare aenean + euismod elementum nisi quis eleifend. Malesuada bibendum arcu vitae elementum curabitur vitae nunc sed velit. + Tortor consequat id porta nibh venenatis cras. At volutpat diam ut venenatis tellus in metus vulputate eu. Erat + nam at lectus urna. Et magnis dis parturient montes nascetur. Quis hendrerit dolor magna eget est lorem ipsum. + Libero enim sed faucibus turpis in eu mi. +

+ ); + return ( + <> +

Main Content

+ {paragraph} + {paragraph} + {paragraph} + + ); +} + +function RailItem({ left }: { left?: boolean }) { + return ( +
+

{left ? "Left" : "Right"} Rail Item

+
    +
  • List Item
    • +
  • List Item
    • +
  • List Item
    • +
  • List Item
    • +
  • List Item
    • +
  • List Item
    • +
+
+ ); +} + +export function Playground() { + const [sm, setSm] = useState(600); + const [md, setMd] = useState(1024); + const [lg, setLg] = useState(1440); + const [columns, setColumns] = useState(12); + const [gap, setGap] = useState(16); + + return ( +
+
+ + + + + +
+ +
+
+ Resize Me +
+
+ + + + + + + +
+
+
+ ); +} + +function GridItemCard(props: Omit) { + const [sm, setSm] = useState(props.sm); + const [md, setMd] = useState(props.md); + const [lg, setLg] = useState(props.lg); + const [xl, setXl] = useState(props.xl); + const matchedBreakpoint = useContainerBreakpoint(); + const fields: { bp: ContainerBreakpoint; value: number | undefined; onChange: (v: number | undefined) => void }[] = [ + { bp: "sm", value: sm, onChange: setSm }, + { bp: "md", value: md, onChange: setMd }, + { bp: "lg", value: lg, onChange: setLg }, + { bp: "xl", value: xl, onChange: setXl }, + ]; + return ( + +
+

Breakpoint Definition

+ {fields.map(({ bp, value, onChange }) => { + return ( +
+ +
+ ); + })} +
+ + ); +} + +function GridHeader() { + const ref = useRef(null); + const [width, setWidth] = useState("auto"); + + const onResize = useCallback(() => { + if (ref.current) { + const width = ref.current.offsetWidth; + setWidth(`${width}px`); + } + }, [setWidth]); + useResizeObserver({ ref, onResize }); + + return ( +
+ Container Width: {width} +
+ ); +} diff --git a/src/components/ContainerGrid/ContainerGrid.tsx b/src/components/ContainerGrid/ContainerGrid.tsx new file mode 100644 index 000000000..2db67edee --- /dev/null +++ b/src/components/ContainerGrid/ContainerGrid.tsx @@ -0,0 +1,55 @@ +import { Css, Properties } from "src"; +import { ReactNode, useRef } from "react"; +import { ContainerGridProvider } from "src/components/ContainerGrid/ContainerGridContext"; +import { defaultGridProps } from "src/components/ContainerGrid/utils"; + +export type ContainerGridProps = { + /** Default to 12 columns */ + columns?: number; + /** Default to 16px gap */ + gap?: number; + /** Default to 1440px (upper bounds of the `lg` breakpoint) */ + lg?: number; + /** Default to 1024px (upper bounds of the `md` breakpoint) */ + md?: number; + /** Default to 600px (upper bounds of the `sm` breakpoint) */ + sm?: number; + children: ReactNode; + xss?: Properties; +}; + +/** + * Creates the styles needed for a CSS Grid layout with container queries. + * Breakpoint properties represent the upper bound of the breakpoint. + * Example: { sm: 600, md: 1024, lg: 1440 } Results in: + * sm: 0 - 600px + * md: 601px - 1024px + * lg: 1025px - 1440px + * xl: 1441px - Infinity + */ +export function ContainerGrid(props: ContainerGridProps) { + const { + columns = defaultGridProps.columns, + gap = defaultGridProps.gap, + lg = defaultGridProps.lg, + md = defaultGridProps.md, + sm = defaultGridProps.sm, + children, + xss, + } = props; + const ref = useRef(null); + + return ( +
+ + {children} + +
+ ); +} diff --git a/src/components/ContainerGrid/ContainerGridContext.tsx b/src/components/ContainerGrid/ContainerGridContext.tsx new file mode 100644 index 000000000..2f7d0a994 --- /dev/null +++ b/src/components/ContainerGrid/ContainerGridContext.tsx @@ -0,0 +1,25 @@ +import { createContext, MutableRefObject, PropsWithChildren, useContext, useMemo } from "react"; +import { defaultGridProps } from "src/components/ContainerGrid/utils"; + +type ContainerGridContextProps = { + columns: number; + gap: number; + lg: number; + md: number; + sm: number; + containerRef?: MutableRefObject; +}; + +export const ContainerGridContext = createContext({ + ...defaultGridProps, +}); + +export function ContainerGridProvider(props: PropsWithChildren) { + const { columns, gap, lg, md, sm, containerRef, children } = props; + const value = useMemo(() => ({ columns, gap, lg, md, sm, containerRef }), [columns, gap, lg, md, sm, containerRef]); + return {children}; +} + +export function useContainerGridContext() { + return useContext(ContainerGridContext); +} diff --git a/src/components/ContainerGrid/ContainerGridItem.tsx b/src/components/ContainerGrid/ContainerGridItem.tsx new file mode 100644 index 000000000..753eca880 --- /dev/null +++ b/src/components/ContainerGrid/ContainerGridItem.tsx @@ -0,0 +1,48 @@ +import { ReactNode, useMemo } from "react"; +import { Container, Css, Properties } from "src"; +import { useContainerGridContext } from "src/components/ContainerGrid/ContainerGridContext"; +import { ContainerBreakpoint } from "src/components/ContainerGrid/utils"; + +export type ContainerGridItemProps = { + sm?: ContainerBreakpointDef; + md?: ContainerBreakpointDef; + lg?: ContainerBreakpointDef; + xl?: ContainerBreakpointDef; + children: ReactNode; + xss?: Properties; +}; + +export function ContainerGridItem(props: ContainerGridItemProps) { + const { sm: smBp, md: mdBp, lg: lgBp, columns } = useContainerGridContext(); + const { sm: smDefs = columns, md: mdDefs = smDefs, lg: lgDefs = mdDefs, xl: xlDefs = lgDefs, xss, children } = props; + + const gridStyles: Properties = useMemo(() => { + const bps: [ContainerBreakpoint, { lt: number } | { gt: number } | { lt: number; gt: number }][] = [ + ["xl", { gt: lgBp }], + ["lg", { gt: mdBp, lt: lgBp }], + ["md", { gt: smBp, lt: mdBp }], + ["sm", { lt: smBp }], + ]; + const styleDefs: Record = { + sm: smDefs, + md: mdDefs, + lg: lgDefs, + xl: xlDefs, + }; + const styles = bps.map(([bp, containerProps]) => { + const bpDefs = styleDefs[bp]; + const colSpan = typeof bpDefs === "number" ? bpDefs : bpDefs.columns; + const bpStyles = typeof bpDefs === "number" ? {} : bpDefs.xss; + + return Css.ifContainer(containerProps).gc(`span ${colSpan}`).addIn(Container(containerProps), bpStyles).$; + }); + + return Object.assign({}, ...styles); + }, [smBp, mdBp, lgBp, smDefs, mdDefs, lgDefs, xlDefs]); + + const styles = useMemo(() => ({ ...gridStyles, ...xss }), [gridStyles, xss]); + + return
{children}
; +} + +type ContainerBreakpointDef = number | { columns?: number; xss?: Properties }; diff --git a/src/components/ContainerGrid/useContainerBreakpoint.ts b/src/components/ContainerGrid/useContainerBreakpoint.ts new file mode 100644 index 000000000..e712b12b6 --- /dev/null +++ b/src/components/ContainerGrid/useContainerBreakpoint.ts @@ -0,0 +1,31 @@ +import { ContainerBreakpoint } from "src/components/ContainerGrid/utils"; +import { useCallback, useState } from "react"; +import { useResizeObserver } from "@react-aria/utils"; +import { useContainerGridContext } from "src/components/ContainerGrid/ContainerGridContext"; + +export function useContainerBreakpoint(): ContainerBreakpoint | undefined { + const { lg, md, sm, containerRef: ref } = useContainerGridContext(); + const [matchedBreakpoint, setMatchedBreakpoint] = useState(); + + const onResize = useCallback(() => { + if (ref?.current) { + const width = ref.current.offsetWidth; + if (width <= sm) { + setMatchedBreakpoint("sm"); + } else if (width <= md) { + setMatchedBreakpoint("md"); + } else if (width <= lg) { + setMatchedBreakpoint("lg"); + } else { + setMatchedBreakpoint("xl"); + } + } + }, [lg, md, ref, sm]); + + // Choosing not to debounce the callback. This may be fired many times if someone resizes very slow. + // Though, it will not trigger re-renders unless the `matchedBreakpoint` changes. + // Choosing to allow for immediate responsive to breakpoint changes vs debouncing. + useResizeObserver({ ref, onResize }); + + return matchedBreakpoint; +} diff --git a/src/components/ContainerGrid/useContainerGrid.ts b/src/components/ContainerGrid/useContainerGrid.ts new file mode 100644 index 000000000..cd2913448 --- /dev/null +++ b/src/components/ContainerGrid/useContainerGrid.ts @@ -0,0 +1,56 @@ +import { useMemo } from "react"; +import { Css, Properties } from "src"; + +export type UseContainerGridProps = { + /** Default to 12 columns */ + columns?: number; + /** Default to 16px gap */ + gap?: number; + /** Default to 1440px (upper bounds of the `lg` breakpoint) */ + lg?: number; + /** Default to 1024px (upper bounds of the `md` breakpoint) */ + md?: number; + /** Default to 600px (upper bounds of the `sm` breakpoint) */ + sm?: number; +}; + +/** + * Creates the styles needed for a CSS Grid layout with container queries. + * Breakpoint properties represent the upper bound of the breakpoint. + * Example: { sm: 600, md: 1024, lg: 1440 } Results in: + * sm: 0 - 600px + * md: 601px - 1024px + * lg: 1025px - 1440px + * xl: 1441px - Infinity + */ +export function useContainerGrid(props: UseContainerGridProps): { + gridStyles: Properties; + gridDefs: ContainerGridDefs; +} { + const { + columns = defaultGridProps.columns, + gap = defaultGridProps.gap, + lg = defaultGridProps.lg, + md = defaultGridProps.md, + sm = defaultGridProps.sm, + } = props; + + const gridStyles: Properties = useMemo(() => { + return Css.ctis.dg.gtc(`repeat(${columns}, minmax(0, 1fr))`).gapPx(gap).$; + }, [columns, gap, lg, md, sm]); + + const gridDefs = useMemo(() => { + return { columns, gap, lg, md, sm }; + }, [columns, gap, lg, md, sm]); + + return { gridStyles, gridDefs }; +} + +export type ContainerGridDefs = Required; +const defaultGridProps: ContainerGridDefs = { + columns: 12, + gap: 16, + lg: 1440, + md: 1024, + sm: 600, +}; diff --git a/src/components/ContainerGrid/useContainerGridItem.ts b/src/components/ContainerGrid/useContainerGridItem.ts new file mode 100644 index 000000000..e6e24b6e9 --- /dev/null +++ b/src/components/ContainerGrid/useContainerGridItem.ts @@ -0,0 +1,25 @@ +import { useMemo } from "react"; +import { useContainerGridContext } from "src/components/ContainerGrid/ContainerGridContext"; + +export type UseContainerGridItemProps = { + /** The number of columns to span at the `xl` breakpoint */ + xl?: number; + /** The number of columns to span at the `lg` breakpoint */ + lg?: number; + /** The number of columns to span at the `md` breakpoint */ + md?: number; + /** The number of columns to span at the `sm` breakpoint */ + sm?: number; +}; + +/** + * Returns data attribute props to be spread onto a grid item HTML element. + */ +export function useContainerGridItem(props: UseContainerGridItemProps) { + const { columns = 1 } = useContainerGridContext(); + const { sm = columns, md = sm, lg = md, xl = lg } = props; + const dataAttributes = useMemo(() => { + return { "data-colspan-sm": sm, "data-colspan-md": md, "data-colspan-lg": lg, "data-colspan-xl": xl }; + }, [sm, md, lg, xl]); + return dataAttributes; +} diff --git a/src/components/ContainerGrid/utils.ts b/src/components/ContainerGrid/utils.ts new file mode 100644 index 000000000..20a6d75cf --- /dev/null +++ b/src/components/ContainerGrid/utils.ts @@ -0,0 +1,12 @@ +import { ContainerGridProps } from "src/components/ContainerGrid/ContainerGrid"; + +export type ContainerBreakpoint = "sm" | "md" | "lg" | "xl"; + +export type ContainerGridDefs = Required>; +export const defaultGridProps: ContainerGridDefs = { + columns: 12, + gap: 16, + lg: 1440, + md: 1024, + sm: 600, +}; diff --git a/src/components/Table/GridTable.stories.tsx b/src/components/Table/GridTable.stories.tsx index 491c4fa67..8542e93b0 100644 --- a/src/components/Table/GridTable.stories.tsx +++ b/src/components/Table/GridTable.stories.tsx @@ -99,7 +99,16 @@ export const Hovering = newStory( export const ActiveCell = newStory( () => { const nameColumn: GridColumn = { id: "name", header: "Name", data: ({ name }) => name }; - const valueColumn: GridColumn = { id: "value", header: "Value", data: ({ value }) => value }; + const valueColumn: GridColumn = { + id: "value", + header: "Value", + data: ({ value }) => ({ + content: () => { + return
{value}
; + }, + css: Css.p0.$, + }), + }; const actionColumn: GridColumn = { id: "actions", header: "Action", data: () =>
Actions
}; const rowStyles: RowStyles = useMemo( () => ({ From 672f66951f34b987f5be0ecab619dea5224ba897 Mon Sep 17 00:00:00 2001 From: Brandon Dow Date: Fri, 7 Jun 2024 15:35:06 -0400 Subject: [PATCH 2/2] Add MUI Grid comparison --- package.json | 2 + .../ContainerGrid/ContainerGrid.stories.tsx | 75 +++- .../ContainerGrid/ContainerGridItem.tsx | 2 +- yarn.lock | 408 ++++++++++++++++++ 4 files changed, 474 insertions(+), 13 deletions(-) diff --git a/package.json b/package.json index 09c6057b5..e6ed500c7 100644 --- a/package.json +++ b/package.json @@ -33,8 +33,10 @@ "format": "prettier --loglevel warn --write \"**/*.{ts,tsx,css,md,mdx}\"" }, "dependencies": { + "@emotion/styled": "^11.11.5", "@homebound/form-state": "^2.20.1", "@internationalized/number": "^3.0.3", + "@mui/material": "^5.15.19", "@popperjs/core": "^2.11.6", "@react-aria/utils": "^3.18.0", "change-case": "^4.1.2", diff --git a/src/components/ContainerGrid/ContainerGrid.stories.tsx b/src/components/ContainerGrid/ContainerGrid.stories.tsx index e08625973..8412eb631 100644 --- a/src/components/ContainerGrid/ContainerGrid.stories.tsx +++ b/src/components/ContainerGrid/ContainerGrid.stories.tsx @@ -2,12 +2,17 @@ import { Meta } from "@storybook/react"; import { ContainerGrid, ContainerGridProps } from "src/components/ContainerGrid/ContainerGrid"; import { Button } from "src/components"; import { useCallback, useRef, useState } from "react"; -import { ContainerGridItem, ContainerGridItemProps } from "src/components/ContainerGrid/ContainerGridItem"; +import { + ContainerBreakpointDef, + ContainerGridItem, + ContainerGridItemProps, +} from "src/components/ContainerGrid/ContainerGridItem"; import { useResizeObserver } from "@react-aria/utils"; import { useContainerBreakpoint } from "src/components/ContainerGrid/useContainerBreakpoint"; import { ContainerBreakpoint } from "src/components/ContainerGrid/utils"; import { Css } from "src/Css"; import { NumberField } from "src/inputs"; +import { Unstable_Grid2 as Grid } from "@mui/material"; export default { component: ContainerGrid, @@ -18,9 +23,7 @@ export function Example() { return (
-
- Resize Me -
+
Resize Me
@@ -48,6 +51,53 @@ export function Example() { ); } +export function MuiGrid() { + const [num, setNum] = useState(0); + const [expanded, setExpanded] = useState(false); + const toggleSize = () => setExpanded((prev) => !prev); + return ( +
+
+ Resize Me +
+
+ + +
+

Title of the Page

+
+ + +
+ + +
+ + +
+ +
+ + +
+ + +
+ + +
+
+ ); +} + function MainContent() { const paragraph = (

@@ -107,9 +157,7 @@ export function Playground() {

-
- Resize Me -
+
Resize Me
@@ -125,10 +173,13 @@ export function Playground() { } function GridItemCard(props: Omit) { - const [sm, setSm] = useState(props.sm); - const [md, setMd] = useState(props.md); - const [lg, setLg] = useState(props.lg); - const [xl, setXl] = useState(props.xl); + function resolveColumnSize(bp: ContainerBreakpointDef | undefined): number | undefined { + return typeof bp === "number" ? bp : bp?.columns; + } + const [sm, setSm] = useState(resolveColumnSize(props.sm)); + const [md, setMd] = useState(resolveColumnSize(props.md)); + const [lg, setLg] = useState(resolveColumnSize(props.lg)); + const [xl, setXl] = useState(resolveColumnSize(props.xl)); const matchedBreakpoint = useContainerBreakpoint(); const fields: { bp: ContainerBreakpoint; value: number | undefined; onChange: (v: number | undefined) => void }[] = [ { bp: "sm", value: sm, onChange: setSm }, @@ -142,7 +193,7 @@ function GridItemCard(props: Omit) {

Breakpoint Definition

{fields.map(({ bp, value, onChange }) => { return ( -
+
{children}
; } -type ContainerBreakpointDef = number | { columns?: number; xss?: Properties }; +export type ContainerBreakpointDef = number | { columns?: number; xss?: Properties }; diff --git a/yarn.lock b/yarn.lock index 0f860b726..2420eb1db 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2713,6 +2713,15 @@ __metadata: languageName: node linkType: hard +"@babel/runtime@npm:^7.23.9, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.8.7": + version: 7.24.7 + resolution: "@babel/runtime@npm:7.24.7" + dependencies: + regenerator-runtime: ^0.14.0 + checksum: d17f29eed6f848ac15cdf4202a910b741facfb0419a9d79e5c7fa37df6362fc3227f1cc2e248cc6db5e53ddffb4caa6686c488e6e80ce3d29c36a4e74c8734ea + languageName: node + linkType: hard + "@babel/template@npm:^7.22.15": version: 7.22.15 resolution: "@babel/template@npm:7.22.15" @@ -2860,6 +2869,25 @@ __metadata: languageName: node linkType: hard +"@emotion/babel-plugin@npm:^11.11.0": + version: 11.11.0 + resolution: "@emotion/babel-plugin@npm:11.11.0" + dependencies: + "@babel/helper-module-imports": ^7.16.7 + "@babel/runtime": ^7.18.3 + "@emotion/hash": ^0.9.1 + "@emotion/memoize": ^0.8.1 + "@emotion/serialize": ^1.1.2 + babel-plugin-macros: ^3.1.0 + convert-source-map: ^1.5.0 + escape-string-regexp: ^4.0.0 + find-root: ^1.1.0 + source-map: ^0.5.7 + stylis: 4.2.0 + checksum: 6b363edccc10290f7a23242c06f88e451b5feb2ab94152b18bb8883033db5934fb0e421e2d67d09907c13837c21218a3ac28c51707778a54d6cd3706c0c2f3f9 + languageName: node + linkType: hard + "@emotion/babel-preset-css-prop@npm:^11.10.0": version: 11.10.0 resolution: "@emotion/babel-preset-css-prop@npm:11.10.0" @@ -2887,6 +2915,19 @@ __metadata: languageName: node linkType: hard +"@emotion/cache@npm:^11.11.0": + version: 11.11.0 + resolution: "@emotion/cache@npm:11.11.0" + dependencies: + "@emotion/memoize": ^0.8.1 + "@emotion/sheet": ^1.2.2 + "@emotion/utils": ^1.2.1 + "@emotion/weak-memoize": ^0.3.1 + stylis: 4.2.0 + checksum: 8eb1dc22beaa20c21a2e04c284d5a2630a018a9d51fb190e52de348c8d27f4e8ca4bbab003d68b4f6cd9cc1c569ca747a997797e0f76d6c734a660dc29decf08 + languageName: node + linkType: hard + "@emotion/css-prettifier@npm:^1.1.1": version: 1.1.1 resolution: "@emotion/css-prettifier@npm:1.1.1" @@ -2904,6 +2945,13 @@ __metadata: languageName: node linkType: hard +"@emotion/hash@npm:^0.9.1": + version: 0.9.1 + resolution: "@emotion/hash@npm:0.9.1" + checksum: 716e17e48bf9047bf9383982c071de49f2615310fb4e986738931776f5a823bc1f29c84501abe0d3df91a3803c80122d24e28b57351bca9e01356ebb33d89876 + languageName: node + linkType: hard + "@emotion/is-prop-valid@npm:^0.8.2": version: 0.8.8 resolution: "@emotion/is-prop-valid@npm:0.8.8" @@ -2913,6 +2961,15 @@ __metadata: languageName: node linkType: hard +"@emotion/is-prop-valid@npm:^1.2.2": + version: 1.2.2 + resolution: "@emotion/is-prop-valid@npm:1.2.2" + dependencies: + "@emotion/memoize": ^0.8.1 + checksum: 61f6b128ea62b9f76b47955057d5d86fcbe2a6989d2cd1e583daac592901a950475a37d049b9f7a7c6aa8758a33b408735db759fdedfd1f629df0f85ab60ea25 + languageName: node + linkType: hard + "@emotion/jest@npm:^11.10.5": version: 11.10.5 resolution: "@emotion/jest@npm:11.10.5" @@ -2948,6 +3005,13 @@ __metadata: languageName: node linkType: hard +"@emotion/memoize@npm:^0.8.1": + version: 0.8.1 + resolution: "@emotion/memoize@npm:0.8.1" + checksum: a19cc01a29fcc97514948eaab4dc34d8272e934466ed87c07f157887406bc318000c69ae6f813a9001c6a225364df04249842a50e692ef7a9873335fbcc141b0 + languageName: node + linkType: hard + "@emotion/react@npm:^11.10.6": version: 11.10.6 resolution: "@emotion/react@npm:11.10.6" @@ -2982,6 +3046,19 @@ __metadata: languageName: node linkType: hard +"@emotion/serialize@npm:^1.1.2, @emotion/serialize@npm:^1.1.4": + version: 1.1.4 + resolution: "@emotion/serialize@npm:1.1.4" + dependencies: + "@emotion/hash": ^0.9.1 + "@emotion/memoize": ^0.8.1 + "@emotion/unitless": ^0.8.1 + "@emotion/utils": ^1.2.1 + csstype: ^3.0.2 + checksum: 71b99f816a9c1d61a87c62cf4928da3894bb62213f3aff38b1ea9790b3368f084af98a3e5453b5055c2f36a7d70318d2fa9955b7b5676c2065b868062375df39 + languageName: node + linkType: hard + "@emotion/sheet@npm:^1.2.1": version: 1.2.1 resolution: "@emotion/sheet@npm:1.2.1" @@ -2989,6 +3066,33 @@ __metadata: languageName: node linkType: hard +"@emotion/sheet@npm:^1.2.2": + version: 1.2.2 + resolution: "@emotion/sheet@npm:1.2.2" + checksum: d973273c9c15f1c291ca2269728bf044bd3e92a67bca87943fa9ec6c3cd2b034f9a6bfe95ef1b5d983351d128c75b547b43ff196a00a3875f7e1d269793cecfe + languageName: node + linkType: hard + +"@emotion/styled@npm:^11.11.5": + version: 11.11.5 + resolution: "@emotion/styled@npm:11.11.5" + dependencies: + "@babel/runtime": ^7.18.3 + "@emotion/babel-plugin": ^11.11.0 + "@emotion/is-prop-valid": ^1.2.2 + "@emotion/serialize": ^1.1.4 + "@emotion/use-insertion-effect-with-fallbacks": ^1.0.1 + "@emotion/utils": ^1.2.1 + peerDependencies: + "@emotion/react": ^11.0.0-rc.0 + react: ">=16.8.0" + peerDependenciesMeta: + "@types/react": + optional: true + checksum: ad5fc42d00e8aa9597f6d9665986036d5ebe0e8f8155af6d95831c5e8fb2319fb837724e6c5cd59e5346f14c3263711b7ce7271d34688e974d1f32ffeecb37ba + languageName: node + linkType: hard + "@emotion/unitless@npm:^0.8.0": version: 0.8.0 resolution: "@emotion/unitless@npm:0.8.0" @@ -2996,6 +3100,13 @@ __metadata: languageName: node linkType: hard +"@emotion/unitless@npm:^0.8.1": + version: 0.8.1 + resolution: "@emotion/unitless@npm:0.8.1" + checksum: 385e21d184d27853bb350999471f00e1429fa4e83182f46cd2c164985999d9b46d558dc8b9cc89975cb337831ce50c31ac2f33b15502e85c299892e67e7b4a88 + languageName: node + linkType: hard + "@emotion/use-insertion-effect-with-fallbacks@npm:^1.0.0": version: 1.0.0 resolution: "@emotion/use-insertion-effect-with-fallbacks@npm:1.0.0" @@ -3005,6 +3116,15 @@ __metadata: languageName: node linkType: hard +"@emotion/use-insertion-effect-with-fallbacks@npm:^1.0.1": + version: 1.0.1 + resolution: "@emotion/use-insertion-effect-with-fallbacks@npm:1.0.1" + peerDependencies: + react: ">=16.8.0" + checksum: 700b6e5bbb37a9231f203bb3af11295eed01d73b2293abece0bc2a2237015e944d7b5114d4887ad9a79776504aa51ed2a8b0ddbc117c54495dd01a6b22f93786 + languageName: node + linkType: hard + "@emotion/utils@npm:^1.2.0": version: 1.2.0 resolution: "@emotion/utils@npm:1.2.0" @@ -3012,6 +3132,13 @@ __metadata: languageName: node linkType: hard +"@emotion/utils@npm:^1.2.1": + version: 1.2.1 + resolution: "@emotion/utils@npm:1.2.1" + checksum: e0b44be0705b56b079c55faff93952150be69e79b660ae70ddd5b6e09fc40eb1319654315a9f34bb479d7f4ec94be6068c061abbb9e18b9778ae180ad5d97c73 + languageName: node + linkType: hard + "@emotion/weak-memoize@npm:^0.3.0": version: 0.3.0 resolution: "@emotion/weak-memoize@npm:0.3.0" @@ -3019,6 +3146,13 @@ __metadata: languageName: node linkType: hard +"@emotion/weak-memoize@npm:^0.3.1": + version: 0.3.1 + resolution: "@emotion/weak-memoize@npm:0.3.1" + checksum: b2be47caa24a8122622ea18cd2d650dbb4f8ad37b636dc41ed420c2e082f7f1e564ecdea68122b546df7f305b159bf5ab9ffee872abd0f052e687428459af594 + languageName: node + linkType: hard + "@esbuild/android-arm64@npm:0.16.17": version: 0.16.17 resolution: "@esbuild/android-arm64@npm:0.16.17" @@ -3397,6 +3531,15 @@ __metadata: languageName: node linkType: hard +"@floating-ui/core@npm:^1.0.0": + version: 1.6.2 + resolution: "@floating-ui/core@npm:1.6.2" + dependencies: + "@floating-ui/utils": ^0.2.0 + checksum: a161b2c8e14b6e185960ec19398f4b893ef3cd6620d535c348c1dc877fb4ffc9f701eb7156f6a30a89b7826093ba28ea223fc2fd1996c0b2464741208725ac8f + languageName: node + linkType: hard + "@floating-ui/core@npm:^1.4.1": version: 1.4.1 resolution: "@floating-ui/core@npm:1.4.1" @@ -3406,6 +3549,16 @@ __metadata: languageName: node linkType: hard +"@floating-ui/dom@npm:^1.0.0": + version: 1.6.5 + resolution: "@floating-ui/dom@npm:1.6.5" + dependencies: + "@floating-ui/core": ^1.0.0 + "@floating-ui/utils": ^0.2.0 + checksum: 767295173cfc9024b2187b65d3c1a0c8d8596a1f827d57c86288e52edf91b41508b3679643e24e0ef9f522d86aab59ef97354b456b39be4f6f5159d819cc807d + languageName: node + linkType: hard + "@floating-ui/dom@npm:^1.3.0": version: 1.5.1 resolution: "@floating-ui/dom@npm:1.5.1" @@ -3428,6 +3581,18 @@ __metadata: languageName: node linkType: hard +"@floating-ui/react-dom@npm:^2.0.8": + version: 2.1.0 + resolution: "@floating-ui/react-dom@npm:2.1.0" + dependencies: + "@floating-ui/dom": ^1.0.0 + peerDependencies: + react: ">=16.8.0" + react-dom: ">=16.8.0" + checksum: 371ab3b14627026c637f4a2b8ca3dbfb7f67f1d51e74af5448b8e5bc76b8ccf30fed5e66d855f1ac1a6de28d79acc6dffcbcca4744a327a5e8d47f3515b0b52a + languageName: node + linkType: hard + "@floating-ui/utils@npm:^0.1.1": version: 0.1.1 resolution: "@floating-ui/utils@npm:0.1.1" @@ -3435,6 +3600,13 @@ __metadata: languageName: node linkType: hard +"@floating-ui/utils@npm:^0.2.0": + version: 0.2.2 + resolution: "@floating-ui/utils@npm:0.2.2" + checksum: 3d8d46fd1b071c98e10d374e2dcf54d1eb9de0aa75ed2b994c9132ebf6f783f896f979053be71450bdb6d60021120cfc24d25a5c84ebb3db0994080e13d9762f + languageName: node + linkType: hard + "@formatjs/ecma402-abstract@npm:1.11.10": version: 1.11.10 resolution: "@formatjs/ecma402-abstract@npm:1.11.10" @@ -3734,6 +3906,7 @@ __metadata: "@emotion/babel-preset-css-prop": ^11.10.0 "@emotion/jest": ^11.10.5 "@emotion/react": ^11.10.6 + "@emotion/styled": ^11.11.5 "@homebound/eslint-config": ^1.10.2 "@homebound/form-state": ^2.20.1 "@homebound/rtl-react-router-utils": 1.0.3 @@ -3741,6 +3914,7 @@ __metadata: "@homebound/truss": ^1.135.0 "@homebound/tsconfig": ^1.0.3 "@internationalized/number": ^3.0.3 + "@mui/material": ^5.15.19 "@popperjs/core": ^2.11.6 "@react-aria/utils": ^3.18.0 "@semantic-release/exec": ^6.0.3 @@ -4454,6 +4628,164 @@ __metadata: languageName: node linkType: hard +"@mui/base@npm:5.0.0-beta.40": + version: 5.0.0-beta.40 + resolution: "@mui/base@npm:5.0.0-beta.40" + dependencies: + "@babel/runtime": ^7.23.9 + "@floating-ui/react-dom": ^2.0.8 + "@mui/types": ^7.2.14 + "@mui/utils": ^5.15.14 + "@popperjs/core": ^2.11.8 + clsx: ^2.1.0 + prop-types: ^15.8.1 + peerDependencies: + "@types/react": ^17.0.0 || ^18.0.0 + react: ^17.0.0 || ^18.0.0 + react-dom: ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 9c084ee67de372411a71af5eca9a5367db9f5bce57bb43973629c522760fe64fa2a43d2934dccd24d6dcbcd0ed399c5fc5c461226c86104f5767de1c9b8deba2 + languageName: node + linkType: hard + +"@mui/core-downloads-tracker@npm:^5.15.19": + version: 5.15.19 + resolution: "@mui/core-downloads-tracker@npm:5.15.19" + checksum: 32dd442d72a4cf4abea0e5c0a325707c3f8aba16b7b40ed674da2c068ed10d686f1941240e527407d685e00ed12931c331d99265e1ed570630c856ffbe291c23 + languageName: node + linkType: hard + +"@mui/material@npm:^5.15.19": + version: 5.15.19 + resolution: "@mui/material@npm:5.15.19" + dependencies: + "@babel/runtime": ^7.23.9 + "@mui/base": 5.0.0-beta.40 + "@mui/core-downloads-tracker": ^5.15.19 + "@mui/system": ^5.15.15 + "@mui/types": ^7.2.14 + "@mui/utils": ^5.15.14 + "@types/react-transition-group": ^4.4.10 + clsx: ^2.1.0 + csstype: ^3.1.3 + prop-types: ^15.8.1 + react-is: ^18.2.0 + react-transition-group: ^4.4.5 + peerDependencies: + "@emotion/react": ^11.5.0 + "@emotion/styled": ^11.3.0 + "@types/react": ^17.0.0 || ^18.0.0 + react: ^17.0.0 || ^18.0.0 + react-dom: ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + "@emotion/react": + optional: true + "@emotion/styled": + optional: true + "@types/react": + optional: true + checksum: 001095973c5d8581c97b05bca888d9aae51876684c9bcf7e1841635287c225ac9af94ca13a8baaa410f60b16b1ebb3003efa85a008d7338e23c12272cbf29ecb + languageName: node + linkType: hard + +"@mui/private-theming@npm:^5.15.14": + version: 5.15.14 + resolution: "@mui/private-theming@npm:5.15.14" + dependencies: + "@babel/runtime": ^7.23.9 + "@mui/utils": ^5.15.14 + prop-types: ^15.8.1 + peerDependencies: + "@types/react": ^17.0.0 || ^18.0.0 + react: ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 1b1ef54e8281c9b13fcc58f4c39682efc610946a68402283c19fcfbce8a7d7a231d61b536d6df9bf7a59a1426591bd403a453a59eb8efb9689437fb58554dc8c + languageName: node + linkType: hard + +"@mui/styled-engine@npm:^5.15.14": + version: 5.15.14 + resolution: "@mui/styled-engine@npm:5.15.14" + dependencies: + "@babel/runtime": ^7.23.9 + "@emotion/cache": ^11.11.0 + csstype: ^3.1.3 + prop-types: ^15.8.1 + peerDependencies: + "@emotion/react": ^11.4.1 + "@emotion/styled": ^11.3.0 + react: ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + "@emotion/react": + optional: true + "@emotion/styled": + optional: true + checksum: 23b45c859a4f0d2b10933d06a6082c0ff093f7b6d8d32a2bfe3a6e515fe46d7a38ca9e7150d45c025a2e98d963bae9a5991d131cf4748b62670075ef0fa321ed + languageName: node + linkType: hard + +"@mui/system@npm:^5.15.15": + version: 5.15.15 + resolution: "@mui/system@npm:5.15.15" + dependencies: + "@babel/runtime": ^7.23.9 + "@mui/private-theming": ^5.15.14 + "@mui/styled-engine": ^5.15.14 + "@mui/types": ^7.2.14 + "@mui/utils": ^5.15.14 + clsx: ^2.1.0 + csstype: ^3.1.3 + prop-types: ^15.8.1 + peerDependencies: + "@emotion/react": ^11.5.0 + "@emotion/styled": ^11.3.0 + "@types/react": ^17.0.0 || ^18.0.0 + react: ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + "@emotion/react": + optional: true + "@emotion/styled": + optional: true + "@types/react": + optional: true + checksum: 9ca96d5f66b2a9d6471909cc98c671eea5ec0a6d58a7ec071073b9e5200b95c3f017f0ca5cc946abc7f83074bd11830ca18f5e30bc98e25cd6ca217bd1b3a26f + languageName: node + linkType: hard + +"@mui/types@npm:^7.2.14": + version: 7.2.14 + resolution: "@mui/types@npm:7.2.14" + peerDependencies: + "@types/react": ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 615c9f9110933157f5d3c4fee69d6e70b98fc0d9ebc3b63079b6a1e23e6b389748687a25ab4ac15b56166fc228885da87c3929503b41fa322cfdee0f6d411206 + languageName: node + linkType: hard + +"@mui/utils@npm:^5.15.14": + version: 5.15.14 + resolution: "@mui/utils@npm:5.15.14" + dependencies: + "@babel/runtime": ^7.23.9 + "@types/prop-types": ^15.7.11 + prop-types: ^15.8.1 + react-is: ^18.2.0 + peerDependencies: + "@types/react": ^17.0.0 || ^18.0.0 + react: ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 36543ba7e3b65fb3219ed27e8f1455aff15b47a74c9b642c63e60774e22baa6492a196079e72bcfa5a570421dab32160398f892110bd444428bcf8b266b11893 + languageName: node + linkType: hard + "@ndelangen/get-tarball@npm:^3.0.7": version: 3.0.7 resolution: "@ndelangen/get-tarball@npm:3.0.7" @@ -4920,6 +5252,13 @@ __metadata: languageName: node linkType: hard +"@popperjs/core@npm:^2.11.8": + version: 2.11.8 + resolution: "@popperjs/core@npm:2.11.8" + checksum: e5c69fdebf52a4012f6a1f14817ca8e9599cb1be73dd1387e1785e2ed5e5f0862ff817f420a87c7fc532add1f88a12e25aeb010ffcbdc98eace3d55ce2139cf0 + languageName: node + linkType: hard + "@radix-ui/number@npm:1.0.1": version: 1.0.1 resolution: "@radix-ui/number@npm:1.0.1" @@ -8381,6 +8720,13 @@ __metadata: languageName: node linkType: hard +"@types/prop-types@npm:^15.7.11": + version: 15.7.12 + resolution: "@types/prop-types@npm:15.7.12" + checksum: ac16cc3d0a84431ffa5cfdf89579ad1e2269549f32ce0c769321fdd078f84db4fbe1b461ed5a1a496caf09e637c0e367d600c541435716a55b1d9713f5035dfe + languageName: node + linkType: hard + "@types/qs@npm:*, @types/qs@npm:^6.9.5": version: 6.9.7 resolution: "@types/qs@npm:6.9.7" @@ -8434,6 +8780,15 @@ __metadata: languageName: node linkType: hard +"@types/react-transition-group@npm:^4.4.10": + version: 4.4.10 + resolution: "@types/react-transition-group@npm:4.4.10" + dependencies: + "@types/react": "*" + checksum: fe2ea11f70251e9f79f368e198c18fd469b1d4f1e1d44e4365845b44e15974b0ec925100036f449b023b0ca3480a82725c5f0a73040e282ad32ec7b0def9b57c + languageName: node + linkType: hard + "@types/react@npm:18.0.28": version: 18.0.28 resolution: "@types/react@npm:18.0.28" @@ -10282,6 +10637,13 @@ __metadata: languageName: node linkType: hard +"clsx@npm:^2.1.0": + version: 2.1.1 + resolution: "clsx@npm:2.1.1" + checksum: acd3e1ab9d8a433ecb3cc2f6a05ab95fe50b4a3cfc5ba47abb6cbf3754585fcb87b84e90c822a1f256c4198e3b41c7f6c391577ffc8678ad587fc0976b24fd57 + languageName: node + linkType: hard + "cmd-shim@npm:^5.0.0": version: 5.0.0 resolution: "cmd-shim@npm:5.0.0" @@ -10714,6 +11076,13 @@ __metadata: languageName: node linkType: hard +"csstype@npm:^3.1.3": + version: 3.1.3 + resolution: "csstype@npm:3.1.3" + checksum: 8db785cc92d259102725b3c694ec0c823f5619a84741b5c7991b8ad135dfaa66093038a1cc63e03361a6cd28d122be48f2106ae72334e067dd619a51f49eddf7 + languageName: node + linkType: hard + "damerau-levenshtein@npm:^1.0.8": version: 1.0.8 resolution: "damerau-levenshtein@npm:1.0.8" @@ -11139,6 +11508,16 @@ __metadata: languageName: node linkType: hard +"dom-helpers@npm:^5.0.1": + version: 5.2.1 + resolution: "dom-helpers@npm:5.2.1" + dependencies: + "@babel/runtime": ^7.8.7 + csstype: ^3.0.2 + checksum: 863ba9e086f7093df3376b43e74ce4422571d404fc9828bf2c56140963d5edf0e56160f9b2f3bb61b282c07f8fc8134f023c98fd684bddcb12daf7b0f14d951c + languageName: node + linkType: hard + "domexception@npm:^4.0.0": version: 4.0.0 resolution: "domexception@npm:4.0.0" @@ -18141,6 +18520,13 @@ __metadata: languageName: node linkType: hard +"react-is@npm:^18.2.0": + version: 18.3.1 + resolution: "react-is@npm:18.3.1" + checksum: e20fe84c86ff172fc8d898251b7cc2c43645d108bf96d0b8edf39b98f9a2cae97b40520ee7ed8ee0085ccc94736c4886294456033304151c3f94978cec03df21 + languageName: node + linkType: hard + "react-popper@npm:^2.3.0": version: 2.3.0 resolution: "react-popper@npm:2.3.0" @@ -18282,6 +18668,21 @@ __metadata: languageName: node linkType: hard +"react-transition-group@npm:^4.4.5": + version: 4.4.5 + resolution: "react-transition-group@npm:4.4.5" + dependencies: + "@babel/runtime": ^7.5.5 + dom-helpers: ^5.0.1 + loose-envify: ^1.4.0 + prop-types: ^15.6.2 + peerDependencies: + react: ">=16.6.0" + react-dom: ">=16.6.0" + checksum: 75602840106aa9c6545149d6d7ae1502fb7b7abadcce70a6954c4b64a438ff1cd16fc77a0a1e5197cdd72da398f39eb929ea06f9005c45b132ed34e056ebdeb1 + languageName: node + linkType: hard + "react-virtuoso@npm:^4.2.2": version: 4.2.2 resolution: "react-virtuoso@npm:4.2.2" @@ -19626,6 +20027,13 @@ __metadata: languageName: node linkType: hard +"stylis@npm:4.2.0": + version: 4.2.0 + resolution: "stylis@npm:4.2.0" + checksum: 0eb6cc1b866dc17a6037d0a82ac7fa877eba6a757443e79e7c4f35bacedbf6421fadcab4363b39667b43355cbaaa570a3cde850f776498e5450f32ed2f9b7584 + languageName: node + linkType: hard + "supports-color@npm:^5.3.0": version: 5.5.0 resolution: "supports-color@npm:5.5.0"