@trackunit/react-components 0.1.25 → 0.1.27

package/index.js

@@ -705,7 +705,7 @@ const StyledHeading = tw.div `
  * @returns {JSX.Element} CardHeader component
  */
 const CardHeader = ({ heading, headingVariant = "primary", subHeading, onClose, dataTestId, className, children, accessories, density, extraClassName, hideSeparator = false, }) => {
-    return (jsx(Root$8, Object.assign({ dataTestId: dataTestId, className: className, "$hideSeparator": hideSeparator, density: density }, { children: jsxs(Container$6, { children: [jsxs("div", Object.assign({ className: extraClassName }, { children: [jsxs(HeadingContainer$1, { children: [jsx(Heading$1, Object.assign({ variant: headingVariant }, { children: heading })), accessories] }), subHeading && (jsx(Heading$1, Object.assign({ subtle: true, variant: "subtitle" }, { children: subHeading }))), children] })), onClose && (jsx(IconButton, { dataTestId: "card-header-close-button", variant: "transparent", color: "secondary", onClick: onClose, icon: jsx(Icon, { name: "XIcon", size: "small" }), className: "self-start" }))] }) })));
+    return (jsx(Root$8, Object.assign({ dataTestId: dataTestId, className: className, "$hideSeparator": hideSeparator, density: density }, { children: jsxs(Container$6, { children: [jsxs("div", Object.assign({ className: extraClassName }, { children: [jsxs(HeadingContainer$1, { children: [jsx(Heading$1, Object.assign({ className: "self-center", variant: headingVariant }, { children: heading })), accessories] }), subHeading && (jsx(Heading$1, Object.assign({ subtle: true, variant: "subtitle" }, { children: subHeading }))), children] })), onClose && (jsx(IconButton, { dataTestId: "card-header-close-button", variant: "transparent", color: "secondary", onClick: onClose, icon: jsx(Icon, { name: "XIcon", size: "small" }), className: "!h-min" }))] }) })));
 };
 const Root$8 = twx(DensityContainer) `
   tu-card__header-density-container 
@@ -1483,10 +1483,10 @@ const Backdrop = tw.div `
  * - Modals interrupt a user's workflow by design.
  * - The modal component provides a foundation for creating dialogs, lightboxes, etc.
  */
-const Modal = React.forwardRef(({ isOpen, children, dataTestId, className, onDismissClick = () => {
+const Modal = React.forwardRef(({ isOpen, children, dataTestId, className, role = "", onDismissClick = () => {
     return;
 }, }, ref) => {
-    return (jsx(ModalBackdrop, Object.assign({ isVisible: isOpen, onClick: onDismissClick }, { children: isOpen && (jsx(StyledDiv, Object.assign({ ref: ref }, { children: jsx(StyledCard, Object.assign({ dataTestId: dataTestId, className: className }, { children: children })) }))) })));
+    return (jsx(ModalBackdrop, Object.assign({ isVisible: isOpen, onClick: onDismissClick }, { children: isOpen && (jsx(StyledDiv, Object.assign({ ref: ref, role: role }, { children: jsx(StyledCard, Object.assign({ dataTestId: dataTestId, className: className }, { children: children })) }))) })));
 });
 const StyledCard = twx(Card) `
   tu-modal__card
@@ -3011,7 +3011,7 @@ const GridArea = ({ area, dataTestId, className, children }) => (jsx("section",
  * @param {IntrinsicallyResponsiveGridProps} props - The props for the IntrinsicallyResponsiveGrid component
  * @returns {JSX.Element} IntrinsicallyResponsiveGrid component
  */
-const IntrinsicallyResponsiveGrid = ({ children, occupation = "auto-fill", minColumnWidth = "md", gap = "auto", dataTestId, className, }) => (jsx(Layout$2, Object.assign({ "$minColumnWidth": minColumnWidth, "data-testid": dataTestId, "$gap": gap, "$occupation": occupation, className: className }, { children: children })));
+const IntrinsicallyResponsiveGrid = ({ children, occupation = "auto-fill", minColumnWidth = "md", rowHeight = "1fr", gap = "auto", dataTestId, className, }) => (jsx(Layout$2, Object.assign({ "$minColumnWidth": minColumnWidth, "data-testid": dataTestId, "$gap": gap, "$rowHeight": rowHeight, "$occupation": occupation, className: className }, { children: children })));
 const Layout$2 = tw.span `
   tu-layout-IntrinsicallyResponsiveGrid
   ${({ $occupation }) => {
@@ -3065,6 +3065,16 @@ const Layout$2 = tw.span `
             return tws `tu-gap-responsive`;
     }
 }};
+  
+  ${({ $rowHeight }) => {
+    switch ($rowHeight) {
+        case "auto":
+            return tws `tu-layout-IntrinsicallyResponsiveGrid--row-auto`;
+        case "1fr":
+        default:
+            return tws `tu-layout-IntrinsicallyResponsiveGrid--row-1fr`;
+    }
+}};
 `;
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.1.25",
+  "version": "0.1.27",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "dependencies": {

package/src/components/Modal/Modal.d.ts

@@ -17,6 +17,10 @@ export interface ModalProps extends CommonProps {
      * Test id to be applied to the modal.
      */
     dataTestId?: string;
+    /**
+     * Aria role to be applied to element
+     */
+    role?: string;
 }
 /**
  * - Modals are used to present critical information or request user input needed to complete a user's workflow.

package/src/layout/responsive/IntrinsicallyResponsiveGrid.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import { CommonProps } from "../../common/CommonProps";
 type ColumnWidth = "xs" | "sm" | "md" | "lg" | "xl";
+type RowHeight = "auto" | "1fr";
 type Space = "inherit" | "auto" | "none" | "tiny" | "mini" | "small" | "medium" | "large" | "giant" | "enormous";
 type Occupation = "auto-fill" | "auto-fit";
 interface IntrinsicallyResponsiveGridProps extends CommonProps {
@@ -14,6 +15,7 @@ interface IntrinsicallyResponsiveGridProps extends CommonProps {
      */
     occupation?: Occupation;
     minColumnWidth?: ColumnWidth;
+    rowHeight?: RowHeight;
     /**
      * The gap size between children
      */
@@ -26,5 +28,5 @@ interface IntrinsicallyResponsiveGridProps extends CommonProps {
  * @param {IntrinsicallyResponsiveGridProps} props - The props for the IntrinsicallyResponsiveGrid component
  * @returns {JSX.Element} IntrinsicallyResponsiveGrid component
  */
-export declare const IntrinsicallyResponsiveGrid: ({ children, occupation, minColumnWidth, gap, dataTestId, className, }: IntrinsicallyResponsiveGridProps) => JSX.Element;
+export declare const IntrinsicallyResponsiveGrid: ({ children, occupation, minColumnWidth, rowHeight, gap, dataTestId, className, }: IntrinsicallyResponsiveGridProps) => JSX.Element;
 export {};