@trackunit/react-components 0.1.14 → 0.1.17

package/index.js

@@ -99,7 +99,7 @@ function __awaiter(thisArg, _arguments, P, generator) {
  * @returns {JSX.Element} Spinner component
  */
 const Spinner = ({ mode = "light", size = "medium", centered = false, className, containerClassName, dataTestId, }) => {
-    return (jsx(Container$8, Object.assign({ "$mode": mode, "$centered": centered, className: containerClassName }, { children: jsx(StyledSpinner$1, { "$size": size, "$mode": mode, role: "spinbutton", className: className, "data-testid": dataTestId }) })));
+    return (jsx(Container$9, Object.assign({ "$mode": mode, "$centered": centered, className: containerClassName }, { children: jsx(StyledSpinner$1, { "$size": size, "$mode": mode, role: "spinbutton", className: className, "data-testid": dataTestId }) })));
 };
 const getSpinnerStyles = () => ({ $size }) => {
     switch ($size) {
@@ -117,7 +117,7 @@ const StyledSpinner$1 = tw.span `
   ${p => (p.$mode === "dark" ? tws `tu-spinner--dark` : null)}
   ${getSpinnerStyles()}
 `;
-const Container$8 = tw.div `
+const Container$9 = tw.div `
   tu-spinner--container
   ${p => (p.$centered ? tws `tu-spinner--container-centered` : null)}
 `;
@@ -226,12 +226,12 @@ const Icon$1 = ({ name, size = "large", className, dataTestId, color, onClick, f
     if (!IconComponent) {
         return null;
     }
-    return (jsx(React.Suspense, Object.assign({ fallback: jsx(LoadingDot, { className: iconSizeClassName }) }, { children: jsx(Root$8, Object.assign({ "$color": color, onClick: onClick, "data-testid": dataTestId, ref: forwardedRef }, { children: jsx(IconComponent, { "data-testid": dataTestId ? `${dataTestId}-${name}` : name, className: `${iconSizeClassName} ${colorClassNames} ${className !== null && className !== void 0 ? className : ""} ${name} aspect-square`, style: fillColor ? Object.assign(Object.assign({}, style), { fill: fillColor }) : Object.assign({}, style) }) })) })));
+    return (jsx(React.Suspense, Object.assign({ fallback: jsx(LoadingDot, { className: iconSizeClassName }) }, { children: jsx(Root$9, Object.assign({ "$color": color, onClick: onClick, "data-testid": dataTestId, ref: forwardedRef }, { children: jsx(IconComponent, { "data-testid": dataTestId ? `${dataTestId}-${name}` : name, className: `${iconSizeClassName} ${colorClassNames} ${className !== null && className !== void 0 ? className : ""} ${name} aspect-square`, style: fillColor ? Object.assign(Object.assign({}, style), { fill: fillColor }) : Object.assign({}, style) }) })) })));
 };
 const LoadingDot = tw.span `
   tu-loading-dot
 `;
-const Root$8 = tw.span `
+const Root$9 = tw.span `
   tu-icon
   ${({ $color }) => {
     switch ($color) {
@@ -428,7 +428,7 @@ const Alert = ({ color = "info", title, className, children, primaryAction, seco
             ref && ref.current && ref.current.scrollIntoView && ref.current.scrollIntoView();
         }
     }, [ref, autoScroll]);
-    return (jsxs(Container$7, Object.assign({ "$color": color, className: className, "data-testid": dataTestId, "$inline": inline, ref: ref, role: "alert" }, { children: [jsx(IconContainer$1, Object.assign({ "$inline": inline }, { children: getIconFromColor() })), jsxs(Content$1, Object.assign({ "$inline": inline }, { children: [jsxs(ContentDetails, { children: [jsx(ContentBody, { children: body }), onClose && !inline ? (jsx(CloseButtonContainer, Object.assign({ "$inline": inline }, { children: jsx(IconButton, { size: "small", variant: "transparent", color: "secondary", onClick: onClose, icon: jsx(Icon$1, { name: "XIcon", size: "small" }), title: "Close Alert", circular: true }) }))) : null] }), (primaryAction || secondaryAction || onClose) && (jsxs(RightAligned, Object.assign({ "$inline": inline }, { children: [secondaryAction && (jsx(Button, Object.assign({ size: "small", variant: "transparent", color: getButtonColor(), onClick: secondaryAction.onClick, loading: secondaryAction === null || secondaryAction === void 0 ? void 0 : secondaryAction.loading }, { children: secondaryAction.label }))), primaryAction && (jsx(Button, Object.assign({ size: "small", color: getButtonColor(), onClick: primaryAction.onClick, loading: primaryAction === null || primaryAction === void 0 ? void 0 : primaryAction.loading }, { children: primaryAction.label }))), onClose && inline ? (jsx(CloseButtonContainer, Object.assign({ "$inline": inline }, { children: jsx(IconButton, { size: "small", variant: "transparent", color: "secondary", onClick: onClose, icon: jsx(Icon$1, { name: "XIcon", size: "small" }), title: "Close Alert", circular: true }) }))) : null] })))] }))] })));
+    return (jsxs(Container$8, Object.assign({ "$color": color, className: className, "data-testid": dataTestId, "$inline": inline, ref: ref, role: "alert" }, { children: [jsx(IconContainer$1, Object.assign({ "$inline": inline }, { children: getIconFromColor() })), jsxs(Content$1, Object.assign({ "$inline": inline }, { children: [jsxs(ContentDetails, { children: [jsx(ContentBody, { children: body }), onClose && !inline ? (jsx(CloseButtonContainer, Object.assign({ "$inline": inline }, { children: jsx(IconButton, { size: "small", variant: "transparent", color: "secondary", onClick: onClose, icon: jsx(Icon$1, { name: "XIcon", size: "small" }), title: "Close Alert", circular: true }) }))) : null] }), (primaryAction || secondaryAction || onClose) && (jsxs(RightAligned, Object.assign({ "$inline": inline }, { children: [secondaryAction && (jsx(Button, Object.assign({ size: "small", variant: "transparent", color: getButtonColor(), onClick: secondaryAction.onClick, loading: secondaryAction === null || secondaryAction === void 0 ? void 0 : secondaryAction.loading }, { children: secondaryAction.label }))), primaryAction && (jsx(Button, Object.assign({ size: "small", color: getButtonColor(), onClick: primaryAction.onClick, loading: primaryAction === null || primaryAction === void 0 ? void 0 : primaryAction.loading }, { children: primaryAction.label }))), onClose && inline ? (jsx(CloseButtonContainer, Object.assign({ "$inline": inline }, { children: jsx(IconButton, { size: "small", variant: "transparent", color: "secondary", onClick: onClose, icon: jsx(Icon$1, { name: "XIcon", size: "small" }), title: "Close Alert", circular: true }) }))) : null] })))] }))] })));
 };
 const CloseButtonContainer = tw.div `
   ${p => (p.$inline ? tws `tu-alert__close-button-container--inline` : tws `tu-alert__close-button-container`)}
@@ -442,7 +442,7 @@ const getBackgroundColor = () => ({ $color }) => {
     };
     return colors[$color];
 };
-const Container$7 = tw.div `
+const Container$8 = tw.div `
   tu-alert
   ${p => (p.$inline ? tws `tu-alert--inline` : null)}
   ${getBackgroundColor()}
@@ -655,11 +655,12 @@ const StyledDensityContainer = twx(DensityContainer) `
  * @param {CardFooterProps} props - The props for the CardFooter component
  * @returns {JSX.Element} CardFooter component
  */
-const CardFooter = ({ dataTestId, className, children, density }) => {
-    return (jsx(TopBorderedDensityContainer, Object.assign({ dataTestId: dataTestId, className: className, "$density": density }, { children: jsx(Body, { children: children }) })));
+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 }) })));
 };
-const TopBorderedDensityContainer = twx(DensityContainer) `
+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
@@ -706,11 +707,12 @@ const StyledHeading = tw.div `
  * @param {CardHeaderProps} props - The props for the CardHeader component
  * @returns {JSX.Element} CardHeader component
  */
-const CardHeader = ({ heading, headingVariant = "primary", subHeading, onClose, dataTestId, className, children, accessories, density, extraClassName, }) => {
-    return (jsx(BottomBorderedDensityContainer, Object.assign({ dataTestId: dataTestId, className: className, "$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" }) }))] }) })));
+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" }) }))] }) })));
 };
-const BottomBorderedDensityContainer = twx(DensityContainer) `
-  tu-card__header-density-container
+const Root$8 = twx(DensityContainer) `
+  tu-card__header-density-container 
+  ${p => p.$hideSeparator && tws `tu-card__header-density-container--borderless`}
 `;
 const Container$6 = tw.div `
   tu-card__header
@@ -1085,7 +1087,7 @@ const TipContainer = tw.text `
  * @returns {JSX.Element} FormGroup component
  */
 const FormGroup = ({ isInvalid, helpText, helpAddon, tip, className, dataTestId, label, children, disabled = false, }) => {
-    return (jsxs(FormGroupRoot, Object.assign({ className: className, "data-testid": dataTestId, "$disabled": disabled }, { children: [jsxs(ContainerBefore, { children: [jsx(Label$2, Object.assign({ dataTestId: `${dataTestId}-label` }, { children: label })), tip && jsx(Tip, Object.assign({ dataTestId: `${dataTestId}-tip` }, { children: tip }))] }), children, jsxs(ContainerAfter, Object.assign({ "$isInvalid": isInvalid }, { children: [helpText && jsx("span", Object.assign({ "data-testid": `${dataTestId}-helpText` }, { children: helpText })), helpAddon && jsx(HelpAddon, Object.assign({ "data-testid": `${dataTestId}-helpAddon` }, { children: helpAddon }))] }))] })));
+    return (jsxs(FormGroupRoot, Object.assign({ className: className, "data-testid": dataTestId, "$disabled": disabled }, { children: [jsxs(ContainerBefore, { children: [jsx(FormGroupLabel, Object.assign({ dataTestId: `${dataTestId}-label` }, { children: label })), tip && jsx(Tip, Object.assign({ dataTestId: `${dataTestId}-tip` }, { children: tip }))] }), children, jsxs(ContainerAfter, Object.assign({ "$isInvalid": isInvalid }, { children: [helpText && jsx("span", Object.assign({ "data-testid": `${dataTestId}-helpText` }, { children: helpText })), helpAddon && jsx(HelpAddon, Object.assign({ "data-testid": `${dataTestId}-helpAddon` }, { children: helpAddon }))] }))] })));
 };
 const FormGroupRoot = tw.label `
   tu-form-group
@@ -1096,6 +1098,9 @@ const FormGroupRoot = tw.label `
 const ContainerBefore = tw.div `
   tu-form-group__container-before
 `;
+const FormGroupLabel = twx(Label$2) `
+  component-formGroup-font
+`;
 const ContainerAfter = tw.div `
   tu-form-group__container-after
   ${({ $isInvalid }) => ($isInvalid ? tws `tu-form-group__container-after--invalid` : null)}
@@ -2514,7 +2519,7 @@ const useOverflowItems = ({ threshold = 1, childUniqueIdentifierAttribute = "id"
  * @param {SidebarProps} props - The props for the Sidebar component
  * @returns {JSX.Element} Sidebar component
  */
-const Sidebar = ({ childContainerClassName, children, breakpoint = "lg", className, dataTestId = "sidebar", moreMenuProps, overflowThreshold, }) => {
+const Sidebar = ({ childContainerClassName, children, breakpoint = "lg", className, dataTestId = "sidebar", moreMenuProps, menuListProps, overflowThreshold, }) => {
     const { overflowContainerRef, itemOverflowMap } = useOverflowItems({
         children,
         childUniqueIdentifierAttribute: "id",
@@ -2531,7 +2536,11 @@ const Sidebar = ({ childContainerClassName, children, breakpoint = "lg", classNa
                     return React__default.cloneElement(child, {
                         className: `${child.props.className} ${itemVisibilityClassName(child.props.id)}`,
                     });
-                }) })), overflowItemCount > 0 ? (jsx(MoreMenu, Object.assign({ menuPlacement: "bottom-end" }, moreMenuProps, { className: `${(moreMenuProps === null || moreMenuProps === void 0 ? void 0 : moreMenuProps.className) || ""} !p-0`, dataTestId: `${dataTestId}-more-menu` }, { children: jsx(MenuList, Object.assign({}, moreMenuProps, { dataTestId: `${dataTestId}-menu-list` }, { children: React__default.Children.map(children, child => {
+                }) })), overflowItemCount > 0 ? (jsx(MoreMenu, Object.assign({ iconButtonProps: {
+                    circular: false,
+                    variant: "transparent",
+                    color: "secondary",
+                }, menuPlacement: "bottom-end" }, moreMenuProps, { className: `${(moreMenuProps === null || moreMenuProps === void 0 ? void 0 : moreMenuProps.className) || ""} !p-0`, dataTestId: `${dataTestId}-more-menu` }, { children: jsx(MenuList, Object.assign({}, menuListProps, { dataTestId: `${dataTestId}-menu-list` }, { children: React__default.Children.map(children, child => {
                         return itemOverflowMap[child.props.id] ? child : null;
                     }) })) }))) : null] })));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.1.14",
+  "version": "0.1.17",
   "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.14",
+    "@trackunit/react-core-contexts-test": "0.1.16",
     "echarts-for-react": "3.0.2",
     "echarts": "5.4.0",
     "uuid": "8.3.2",

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

@@ -9,6 +9,10 @@ export interface CardFooterProps extends CommonProps {
      * Element to render in the footer
      */
     children?: React.ReactNode | null;
+    /**
+     * Wether or not a seperator line should be rendered
+     */
+    hideSeparator?: boolean;
 }
 /**
  * A simple footer intended to use with Cards and Modals.
@@ -18,4 +22,4 @@ export interface CardFooterProps extends CommonProps {
  * @param {CardFooterProps} props - The props for the CardFooter component
  * @returns {JSX.Element} CardFooter component
  */
-export declare const CardFooter: ({ dataTestId, className, children, density }: CardFooterProps) => JSX.Element;
+export declare const CardFooter: ({ dataTestId, className, children, density, hideSeparator }: CardFooterProps) => JSX.Element;

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

@@ -5,7 +5,7 @@ export interface CardHeaderProps extends CommonProps {
     /**
      * The text to show in the Cards main heading
      */
-    heading: string;
+    heading?: string;
     /**
      * The variant/size of the heading.
      * Same as the `Heading` component.
@@ -26,7 +26,7 @@ export interface CardHeaderProps extends CommonProps {
     /**
      * Wether or not a seperator line should be rendered
      */
-    showSeparator?: boolean;
+    hideSeparator?: boolean;
     /** Function to call when the close button is clicked */
     onClose?: () => void;
     /**
@@ -44,4 +44,4 @@ export interface CardHeaderProps extends CommonProps {
  * @param {CardHeaderProps} props - The props for the CardHeader component
  * @returns {JSX.Element} CardHeader component
  */
-export declare const CardHeader: ({ heading, headingVariant, subHeading, onClose, dataTestId, className, children, accessories, density, extraClassName, }: CardHeaderProps) => JSX.Element;
+export declare const CardHeader: ({ heading, headingVariant, subHeading, onClose, dataTestId, className, children, accessories, density, extraClassName, hideSeparator, }: CardHeaderProps) => JSX.Element;

package/src/components/Sidebar/Sidebar.d.ts

@@ -52,4 +52,4 @@ export interface SidebarProps extends CommonProps {
  * @param {SidebarProps} props - The props for the Sidebar component
  * @returns {JSX.Element} Sidebar component
  */
-export declare const Sidebar: ({ childContainerClassName, children, breakpoint, className, dataTestId, moreMenuProps, overflowThreshold, }: SidebarProps) => JSX.Element;
+export declare const Sidebar: ({ childContainerClassName, children, breakpoint, className, dataTestId, moreMenuProps, menuListProps, overflowThreshold, }: SidebarProps) => JSX.Element;