@trackunit/react-components 0.1.19 → 0.1.21

package/index.js

@@ -518,7 +518,7 @@ const StyledText$3 = tw.text `
  */
 const BaseInput = React.forwardRef((_a, ref) => {
     var { className, isInvalid, dataTestId, prefix, suffix, addonBefore, addonAfter, actions, fieldSize = "medium", nonInteractive = false } = _a, rest = __rest(_a, ["className", "isInvalid", "dataTestId", "prefix", "suffix", "addonBefore", "addonAfter", "actions", "fieldSize", "nonInteractive"]);
-    return (jsxs(InputContainer$1, Object.assign({ "$fieldSize": fieldSize, "$invalid": isInvalid, "$disabled": rest.disabled || rest.readOnly, className: className, "data-testid": `${dataTestId}-container` }, { children: [addonBefore !== null && addonBefore !== undefined ? (jsx(AddonBefore, Object.assign({ "data-testid": `${dataTestId}-addonBefore` }, { children: addonBefore }))) : null, prefix !== null && addonBefore !== prefix ? (jsx(InputPrefix, Object.assign({ "data-testid": `${dataTestId}-prefix` }, { children: prefix }))) : null, jsx("input", Object.assign({ ref: ref, "data-testid": dataTestId, className: tws `tu-input__field` }, rest, { readOnly: rest.readOnly || nonInteractive })), suffix !== null && addonBefore !== suffix ? (jsx(InputSuffix, Object.assign({ "data-testid": `${dataTestId}-suffix` }, { children: suffix }))) : null, actions !== null && addonBefore !== actions ? actions : null, addonAfter !== null && addonAfter !== undefined && addonBefore !== addonAfter ? (jsx(AddonAfter, Object.assign({ "data-testid": `${dataTestId}-addonAfter` }, { children: addonAfter }))) : null] })));
+    return (jsxs(InputContainer$1, Object.assign({ "$fieldSize": fieldSize, "$invalid": isInvalid, "$disabled": rest.disabled || rest.readOnly, className: className, "data-testid": `${dataTestId}-container` }, { children: [addonBefore && addonBefore !== undefined ? (jsx(AddonBefore, Object.assign({ "data-testid": `${dataTestId}-addonBefore` }, { children: addonBefore }))) : null, prefix && addonBefore !== prefix ? (jsx(InputPrefix, Object.assign({ "data-testid": `${dataTestId}-prefix` }, { children: prefix }))) : null, jsx("input", Object.assign({ ref: ref, "data-testid": dataTestId, className: tws `tu-input__field` }, rest, { readOnly: rest.readOnly || nonInteractive })), suffix && addonBefore !== suffix ? (jsx(InputSuffix, Object.assign({ "data-testid": `${dataTestId}-suffix` }, { children: suffix }))) : null, actions && addonBefore !== actions ? actions : null, addonAfter && addonAfter !== undefined && addonBefore !== addonAfter ? (jsx(AddonAfter, Object.assign({ "data-testid": `${dataTestId}-addonAfter` }, { children: addonAfter }))) : null] })));
 });
 const InputPrefix = tw.div `
   tu-input__prefix
@@ -579,11 +579,11 @@ const StyledCard$2 = tw.div `
  * @param {ContainerProps} props - The props for the DensityContainer component
  * @returns {JSX.Element} DensityContainer component
  */
-const DensityContainer = ({ children, className, dataTestId, $density, $disableGap, $direction, }) => {
-    return (jsx(StyledDensityContainer$1, Object.assign({ "$disableGap": $disableGap, "$density": $density, "$direction": $direction, "data-testid": dataTestId, className: className }, { children: children })));
+const DensityContainer = ({ children, className, dataTestId, density, disableGap, direction, }) => {
+    return (jsx(StyledDensityContainer$1, Object.assign({ "$disableGap": disableGap, "$density": density, "$direction": direction, "data-testid": dataTestId, className: className }, { children: children })));
 };
 const getDirection = () => ({ $direction }) => {
-    $direction = $direction ? $direction : "column";
+    $direction = $direction !== null && $direction !== void 0 ? $direction : "column";
     const directions = {
         row: tws `flex-row`,
         "row-reverse": tws `flex-row-reverse`,
@@ -628,7 +628,7 @@ ${DensityFinder}
  * @returns {JSX.Element} CardBody component
  */
 const CardBody = ({ density = "auto", overflow = "auto", children, dataTestId, className, disableGap, }) => {
-    return (jsx(StyledDensityContainer, Object.assign({ "$overflow": overflow, "$density": density, dataTestId: dataTestId, className: className, "$disableGap": disableGap }, { children: children })));
+    return (jsx(StyledDensityContainer, Object.assign({ "$overflow": overflow, density: density, dataTestId: dataTestId, className: className, disableGap: disableGap }, { children: children })));
 };
 const getOverflow = () => ({ $overflow }) => {
     if (!$overflow) {
@@ -656,14 +656,11 @@ const StyledDensityContainer = twx(DensityContainer) `
  * @returns {JSX.Element} CardFooter component
  */
 const CardFooter = ({ dataTestId, className, children, density, hideSeparator = false }) => {
-    return (jsx(Container$7, Object.assign({ dataTestId: dataTestId, className: className, "$hideSeparator": hideSeparator, "$density": density }, { children: jsx(Body, { children: children }) })));
+    return (jsx(Container$7, Object.assign({ dataTestId: dataTestId, className: className, "$hideSeparator": hideSeparator, density: density, direction: "row" }, { children: children })));
 };
 const Container$7 = twx(DensityContainer) `
   tu-card__footer-density-container
   ${p => p.$hideSeparator && tws `tu-card__footer-density-container--borderless`}
-`;
-const Body = tw.div `
-  tu-card__footer
 `;
 
 /**
@@ -708,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$1, { name: "XIcon", size: "small" }) }))] }) })));
+    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$1, { name: "XIcon", size: "small" }), className: "self-start" }))] }) })));
 };
 const Root$8 = twx(DensityContainer) `
   tu-card__header-density-container 
@@ -1485,25 +1482,13 @@ 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, maxWidth = "full", dataTestId, className, onDismissClick = () => {
+const Modal = React.forwardRef(({ isOpen, children, dataTestId, className, 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, "$maxWidth": maxWidth }, { children: children })) }))) })));
+    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 })) }))) })));
 });
-const getCardMaxWidth = ($maxWidth) => {
-    $maxWidth = $maxWidth ? $maxWidth : "full";
-    const widths = {
-        slim: tws `tu-modal__card--slim`,
-        narrow: tws `tu-modal__card--narrow`,
-        wide: tws `tu-modal__card--wide`,
-        normal: tws `tu-modal__card--normal`,
-        full: "",
-    };
-    return widths[$maxWidth];
-};
 const StyledCard = twx(Card) `
   tu-modal__card
-  ${({ $maxWidth }) => getCardMaxWidth($maxWidth)}
 `;
 const StyledDiv = tw.div `
   tu-modal__container

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.1.19",
+  "version": "0.1.21",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "dependencies": {
@@ -9,7 +9,7 @@
     "@trackunit/tailwind-styled-components": "0.0.51",
     "react": "18.2.0",
     "@trackunit/ui-design-tokens": "0.0.53",
-    "@trackunit/react-core-contexts-test": "0.1.18",
+    "@trackunit/react-core-contexts-test": "0.1.19",
     "echarts-for-react": "3.0.2",
     "echarts": "5.4.0",
     "uuid": "8.3.2",

package/src/components/Card/DensityContainer.d.ts

@@ -7,15 +7,15 @@ interface ContainerProps extends CommonProps {
      * "comfortable" = 16px gap and padding.
      * "spacious" = 16px gap, 26px padding.
      */
-    $density?: Density;
+    density?: Density;
     /**
      * Set gap to be 0px (not preferable)
      */
-    $disableGap?: boolean;
+    disableGap?: boolean;
     /**
      * The flex direction of the Card. Defaults to "column".
      */
-    $direction?: "row" | "row-reverse" | "column" | "column-reverse";
+    direction?: "row" | "row-reverse" | "column" | "column-reverse";
     children?: React.ReactNode;
 }
 /**
@@ -26,5 +26,5 @@ interface ContainerProps extends CommonProps {
  * @param {ContainerProps} props - The props for the DensityContainer component
  * @returns {JSX.Element} DensityContainer component
  */
-export declare const DensityContainer: ({ children, className, dataTestId, $density, $disableGap, $direction, }: ContainerProps) => JSX.Element;
+export declare const DensityContainer: ({ children, className, dataTestId, density, disableGap, direction, }: ContainerProps) => JSX.Element;
 export {};

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

@@ -1,6 +1,5 @@
 import * as React from "react";
 import { CommonProps } from "../../common/CommonProps";
-type ModalWidth = "slim" | "narrow" | "normal" | "wide" | "full";
 export interface ModalProps extends CommonProps {
     /**
      * Whether modal is open or not.
@@ -18,10 +17,6 @@ export interface ModalProps extends CommonProps {
      * Test id to be applied to the modal.
      */
     dataTestId?: string;
-    /**
-     * Maximum width of the modal.
-     */
-    maxWidth?: ModalWidth;
 }
 /**
  * - Modals are used to present critical information or request user input needed to complete a user's workflow.
@@ -29,4 +24,3 @@ export interface ModalProps extends CommonProps {
  * - The modal component provides a foundation for creating dialogs, lightboxes, etc.
  */
 export declare const Modal: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<HTMLDivElement>>;
-export {};