@trackunit/react-components 0.1.28 → 0.1.30

package/index.css

@@ -30,10 +30,6 @@
   &__spinner {
     @apply !w-[1em]
       !h-[1em];
-
-    &--full-width {
-      @apply !w-auto;
-    }
   }
 
   &--rounded {

package/index.js

@@ -98,8 +98,8 @@ function __awaiter(thisArg, _arguments, P, generator) {
  * @param {SpinnerProps} props - The props for the Spinner component
  * @returns {JSX.Element} Spinner component
  */
-const Spinner = ({ mode = "light", size = "medium", centered = false, className, containerClassName, 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 Spinner = ({ mode = "light", size = "medium", centering = "centered", className, containerClassName, dataTestId, }) => {
+    return (jsx(Container$9, Object.assign({ "$mode": mode, "$centering": centering, className: containerClassName }, { children: jsx(StyledSpinner$1, { "$size": size, "$mode": mode, role: "spinbutton", className: className, "data-testid": dataTestId }) })));
 };
 const getSpinnerStyles = () => ({ $size }) => {
     switch ($size) {
@@ -112,6 +112,18 @@ const getSpinnerStyles = () => ({ $size }) => {
             return;
     }
 };
+const getCenteringStyles = () => ({ $centering }) => {
+    switch ($centering) {
+        case "centered":
+            return tws `tu-spinner--container-centered`;
+        case "horizontally":
+            return tws `tu-spinner--container-centered-horizontally`;
+        case "vertically":
+            return tws `tu-spinner--container-centered-vertically`;
+        default:
+            return;
+    }
+};
 const StyledSpinner$1 = tw.span `
   tu-spinner
   ${p => (p.$mode === "dark" ? tws `tu-spinner--dark` : null)}
@@ -119,7 +131,8 @@ const StyledSpinner$1 = tw.span `
 `;
 const Container$9 = tw.div `
   tu-spinner--container
-  ${p => (p.$centered ? tws `tu-spinner--container-centered` : null)}
+  ${getCenteringStyles()}
+  
 `;
 
 /**
@@ -170,7 +183,7 @@ const getPadding = () => ({ $size }) => {
  */
 const Button = React.forwardRef((_a, ref) => {
     var { onClick, children, loading, disabled, className, fullWidth = false, prefix, suffix, color = "primary", variant = "filled", type = "button", size = "medium", square = false, dataTestId, title, role, tabIndex, renderAs = "button" } = _a, rest = __rest(_a, ["onClick", "children", "loading", "disabled", "className", "fullWidth", "prefix", "suffix", "color", "variant", "type", "size", "square", "dataTestId", "title", "role", "tabIndex", "renderAs"]);
-    return (jsxs(StyledButton$1, Object.assign({ "$as": renderAs, onClick: onClick, disabled: disabled || loading, type: type, className: className, "$color": color, "$fullWidth": fullWidth, "$variant": variant, "$size": size, "$square": square, title: title, "aria-label": title, role: role, tabIndex: tabIndex, "data-testid": dataTestId, ref: ref }, rest, { children: [loading && (jsx(StyledSpinner, { centered: true, containerClassName: fullWidth ? tws `tu-button__spinner--full-width` : "" })), prefix, children, suffix] })));
+    return (jsxs(StyledButton$1, Object.assign({ "$as": renderAs, onClick: onClick, disabled: disabled || loading, type: type, className: className, "$color": color, "$fullWidth": fullWidth, "$variant": variant, "$size": size, "$square": square, title: title, "aria-label": title, role: role, tabIndex: tabIndex, "data-testid": dataTestId, ref: ref }, rest, { children: [loading && jsx(StyledSpinner, { centering: "vertically" }), prefix, children, suffix] })));
 });
 const StyledButton$1 = tw.button `
   tu-button
@@ -518,7 +531,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 && 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] })));
+    return (jsxs(InputContainer$1, Object.assign({ "$fieldSize": fieldSize, "$invalid": isInvalid, "$disabled": rest.disabled || rest.readOnly, className: className, "data-testid": dataTestId && `${dataTestId}-container` }, { children: [addonBefore && addonBefore !== undefined ? (jsx(AddonBefore, Object.assign({ "data-testid": dataTestId && `${dataTestId}-addonBefore` }, { children: addonBefore }))) : null, prefix && addonBefore !== prefix ? (jsx(InputPrefix, Object.assign({ "data-testid": dataTestId && `${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 && `${dataTestId}-suffix` }, { children: suffix }))) : null, actions && addonBefore !== actions ? actions : null, addonAfter && addonAfter !== undefined && addonBefore !== addonAfter ? (jsx(AddonAfter, Object.assign({ "data-testid": dataTestId && `${dataTestId}-addonAfter` }, { children: addonAfter }))) : null] })));
 });
 const InputPrefix = tw.div `
   tu-input__prefix
@@ -765,7 +778,7 @@ const Chart = ({ options, showLoading, className, style, onChartReady, onClick,
             }
         };
     }, [onClick, echartsRef]);
-    return (jsx(ChartContainer, Object.assign({ style: { height: (_a = style === null || style === void 0 ? void 0 : style.height) !== null && _a !== void 0 ? _a : "300px", width: (_b = style === null || style === void 0 ? void 0 : style.width) !== null && _b !== void 0 ? _b : "100%" }, "data-testid": dataTestId }, { children: showLoading ? (jsxs(SpinnerContainer, { children: [jsx(Spinner, { centered: true }), (loadingOption === null || loadingOption === void 0 ? void 0 : loadingOption.text) && (jsx(Text$1, Object.assign({ align: "center", subtle: true }, { children: loadingOption.text })))] })) : (jsxs(Fragment, { children: [jsx(EChart, { ref: echartsRef, option: options, opts: { width: "auto", height: "auto", renderer: renderer }, notMerge: !merge, onEvents: eventHandlers, className: className, style: style, onChartReady: onChartReady }), timezoneLabel] })) })));
+    return (jsx(ChartContainer, Object.assign({ style: { height: (_a = style === null || style === void 0 ? void 0 : style.height) !== null && _a !== void 0 ? _a : "300px", width: (_b = style === null || style === void 0 ? void 0 : style.width) !== null && _b !== void 0 ? _b : "100%" }, "data-testid": dataTestId }, { children: showLoading ? (jsxs(SpinnerContainer, { children: [jsx(Spinner, { centering: "centered" }), (loadingOption === null || loadingOption === void 0 ? void 0 : loadingOption.text) && (jsx(Text$1, Object.assign({ align: "center", subtle: true }, { children: loadingOption.text })))] })) : (jsxs(Fragment, { children: [jsx(EChart, { ref: echartsRef, option: options, opts: { width: "auto", height: "auto", renderer: renderer }, notMerge: !merge, onEvents: eventHandlers, className: className, style: style, onChartReady: onChartReady }), timezoneLabel] })) })));
 };
 const SpinnerContainer = tw.div `
   tu-chart-spinner-container
@@ -834,7 +847,7 @@ const Checkbox = React.forwardRef((_a, ref) => {
         }
     };
     const uuid = rest.id ? rest.id : v4();
-    return (jsxs(CheckboxContainer, Object.assign({ "data-testid": `${dataTestId}Container`, htmlFor: uuid, className: className }, { children: [jsx(HiddenInput$1, Object.assign({ type: "checkbox", checked: !indeterminate && checked, onChange: onChange, disabled: disabled, "data-testid": dataTestId, readOnly: readOnly, "aria-checked": !indeterminate && checked, role: "checkbox", id: uuid }, rest, { ref: ref })), jsx(CheckboxWrapper, Object.assign({ id: uuid, "$disabled": isReadonly, "$checked": checked, "$indeterminate": indeterminate, "$isInvalid": isReadonly ? false : isInvalid, tabIndex: isReadonly ? -1 : tabIndex, onKeyPress: onKeyPress }, { children: icon })), label && (jsx(Label$2, Object.assign({ className: tws `cursor-pointer`, htmlFor: uuid, disabled: isReadonly, isInvalid: isReadonly ? false : isInvalid, dataTestId: `${dataTestId}-Label` }, { children: label }))), children] })));
+    return (jsxs(CheckboxContainer, Object.assign({ "data-testid": dataTestId && `${dataTestId}Container`, htmlFor: uuid, className: className }, { children: [jsx(HiddenInput$1, Object.assign({ type: "checkbox", checked: !indeterminate && checked, onChange: onChange, disabled: disabled, "data-testid": dataTestId, readOnly: readOnly, "aria-checked": !indeterminate && checked, role: "checkbox", id: uuid }, rest, { ref: ref })), jsx(CheckboxWrapper, Object.assign({ id: uuid, "$disabled": isReadonly, "$checked": checked, "$indeterminate": indeterminate, "$isInvalid": isReadonly ? false : isInvalid, tabIndex: isReadonly ? -1 : tabIndex, onKeyPress: onKeyPress }, { children: icon })), label && (jsx(Label$2, Object.assign({ className: tws `cursor-pointer`, htmlFor: uuid, disabled: isReadonly, isInvalid: isReadonly ? false : isInvalid, dataTestId: dataTestId && `${dataTestId}-Label` }, { children: label }))), children] })));
 });
 const StyledCheckIcon = twx(CheckIcon) `tu-checkbox--icon`;
 const StyledIndeterminateIcon = twx(IndeterminateIcon) `tu-checkbox--icon`;
@@ -1070,7 +1083,7 @@ const Content = tw.div `
  */
 const Tip = ({ children, iconProps, dataTestId, link, renderAs = "span", className, placement = "bottom", mode, }) => {
     const ifAnchorTag = renderAs === "a";
-    return (jsx(TipContainer, Object.assign({ "data-testid": dataTestId, "$as": renderAs, href: ifAnchorTag ? link : undefined, target: ifAnchorTag ? "_blank" : undefined, className: className }, { children: jsx(Tooltip, Object.assign({ label: children, dataTestId: `${dataTestId}-tooltip`, mode: mode, className: "tu-tip-tooltip", placement: placement }, { children: jsx(Icon, Object.assign({ name: "QuestionMarkCircleIcon", size: "medium", dataTestId: `${dataTestId}-icon` }, iconProps)) })) })));
+    return (jsx(TipContainer, Object.assign({ "data-testid": dataTestId, "$as": renderAs, href: ifAnchorTag ? link : undefined, target: ifAnchorTag ? "_blank" : undefined, className: className }, { children: jsx(Tooltip, Object.assign({ label: children, dataTestId: dataTestId && `${dataTestId}-tooltip`, mode: mode, className: "tu-tip-tooltip", placement: placement }, { children: jsx(Icon, Object.assign({ name: "QuestionMarkCircleIcon", size: "medium", dataTestId: dataTestId && `${dataTestId}-icon` }, iconProps)) })) })));
 };
 const TipContainer = tw.text `
   tu-tip
@@ -1084,7 +1097,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(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 }))] }))] })));
+    return (jsxs(FormGroupRoot, Object.assign({ className: className, "data-testid": dataTestId, "$disabled": disabled }, { children: [jsxs(ContainerBefore, { children: [jsx(FormGroupLabel, Object.assign({ dataTestId: dataTestId && `${dataTestId}-label` }, { children: label })), tip && jsx(Tip, Object.assign({ dataTestId: dataTestId && `${dataTestId}-tip` }, { children: tip }))] }), children, jsxs(ContainerAfter, Object.assign({ "$isInvalid": isInvalid }, { children: [helpText && jsx("span", Object.assign({ "data-testid": dataTestId && `${dataTestId}-helpText` }, { children: helpText })), helpAddon && jsx(HelpAddon, Object.assign({ "data-testid": dataTestId && `${dataTestId}-helpAddon` }, { children: helpAddon }))] }))] })));
 };
 const FormGroupRoot = tw.label `
   tu-form-group
@@ -1116,7 +1129,7 @@ const HelpAddon = tw.span `
 const DateField = forwardRef((_a, ref) => {
     var { label, tip, helpText, errorMessage, helpAddon, isInvalid, className, defaultValue, dataTestId } = _a, rest = __rest(_a, ["label", "tip", "helpText", "errorMessage", "helpAddon", "isInvalid", "className", "defaultValue", "dataTestId"]);
     const renderAsInvalid = isInvalid || Boolean(errorMessage);
-    return (jsx(FormGroup, Object.assign({ label: label, tip: tip, isInvalid: renderAsInvalid, helpText: errorMessage || helpText, helpAddon: helpAddon, disabled: rest.disabled, dataTestId: `${dataTestId}-FormGroup` }, { children: jsx(DateInput, Object.assign({ ref: ref, defaultValue: defaultValue, isInvalid: renderAsInvalid }, rest, { className: className, dataTestId: dataTestId })) })));
+    return (jsx(FormGroup, Object.assign({ label: label, tip: tip, isInvalid: renderAsInvalid, helpText: errorMessage || helpText, helpAddon: helpAddon, disabled: rest.disabled, dataTestId: dataTestId && `${dataTestId}-FormGroup` }, { children: jsx(DateInput, Object.assign({ ref: ref, defaultValue: defaultValue, isInvalid: renderAsInvalid }, rest, { className: className, dataTestId: dataTestId })) })));
 });
 
 const localeLookup = {
@@ -1382,7 +1395,7 @@ const MenuItem = ({ className, dataTestId, label, children, selected, focused, p
     return (jsxs(Container$3, Object.assign({}, containerProps, { onClick: e => {
             e.stopPropagation();
             onClick && onClick(e);
-        }, "$selected": selected, "$focused": focused, tabIndex: 0, "$disabled": disabled }, { children: [prefix && (jsx(Prefix, Object.assign({ "$selected": selected, "data-testid": `${dataTestId}-prefix` }, { children: prefix }))), children !== null && children !== void 0 ? children : jsx(Label, Object.assign({ "data-testid": `${dataTestId}-label` }, { children: label })), suffix && (jsx(Suffix, Object.assign({ "$selected": selected, "data-testid": `${dataTestId}-suffix` }, { children: suffix })))] })));
+        }, "$selected": selected, "$focused": focused, tabIndex: 0, "$disabled": disabled }, { children: [prefix && (jsx(Prefix, Object.assign({ "$selected": selected, "data-testid": dataTestId && `${dataTestId}-prefix` }, { children: prefix }))), children !== null && children !== void 0 ? children : jsx(Label, Object.assign({ "data-testid": dataTestId && `${dataTestId}-label` }, { children: label })), suffix && (jsx(Suffix, Object.assign({ "$selected": selected, "data-testid": dataTestId && `${dataTestId}-suffix` }, { children: suffix })))] })));
 };
 const Container$3 = tw.div `
   group tu-menu-item
@@ -1544,7 +1557,7 @@ const NumberInput = forwardRef((props, ref) => (jsx(BaseInput, Object.assign({ r
 const NumberField = forwardRef((_a, ref) => {
     var { label, tip, helpText, errorMessage, helpAddon, isInvalid, maxLength, className, value, dataTestId } = _a, rest = __rest(_a, ["label", "tip", "helpText", "errorMessage", "helpAddon", "isInvalid", "maxLength", "className", "value", "dataTestId"]);
     const renderAsInvalid = isInvalid || Boolean(errorMessage);
-    return (jsx(FormGroup, Object.assign({ label: label, tip: tip, isInvalid: renderAsInvalid, helpText: errorMessage || helpText, helpAddon: helpAddon, dataTestId: `${dataTestId}-FormGroup` }, { children: jsx(NumberInput, Object.assign({ ref: ref, maxLength: maxLength, value: value, isInvalid: renderAsInvalid }, rest, { className: className, dataTestId: dataTestId })) })));
+    return (jsx(FormGroup, Object.assign({ label: label, tip: tip, isInvalid: renderAsInvalid, helpText: errorMessage || helpText, helpAddon: helpAddon, dataTestId: dataTestId && `${dataTestId}-FormGroup` }, { children: jsx(NumberInput, Object.assign({ ref: ref, maxLength: maxLength, value: value, isInvalid: renderAsInvalid }, rest, { className: className, dataTestId: dataTestId })) })));
 });
 
 /**
@@ -1561,7 +1574,7 @@ const NumberField = forwardRef((_a, ref) => {
  */
 const Tag = React.forwardRef((_a, ref) => {
     var { className, dataTestId, children, size = "medium", onClose, color = "primary" } = _a; __rest(_a, ["className", "dataTestId", "children", "size", "onClose", "color"]);
-    return (jsxs(StyledText, Object.assign({ className: className, "$size": size, "data-testid": `${dataTestId}-tag`, "$as": "span", "$color": color, "$withXIcon": !!onClose, ref: ref }, { children: [children, onClose && (
+    return (jsxs(StyledText, Object.assign({ className: className, "$size": size, "data-testid": dataTestId && `${dataTestId}-tag`, "$as": "span", "$color": color, "$withXIcon": !!onClose, ref: ref }, { children: [children, onClose && (
             // a fix for multiselect deselecting tags working together with fade out animation
             jsx(IconContainer, Object.assign({ onMouseDown: onClose }, { children: jsx(Icon, { name: "XCircleIcon", dataTestId: dataTestId + "Icon", type: "solid", style: { WebkitTransition: "-webkit-transform 0.150s" }, className: size === "medium" ? tws `tu-tag__icon` : tws `tu-tag__icon tu-tag__icon--small` }) })))] })));
 });
@@ -1610,7 +1623,7 @@ const IconContainer = tw.div `
  * @returns {JSX.Element} PageHeader component
  */
 const PageHeader = ({ className, dataTestId, action, showLoading, description, link, title, tag, backTo, children, }) => {
-    return (jsxs(StyledPageHeader, Object.assign({ className: className, "data-testid": dataTestId }, { children: [jsxs(HeadingAndAccessoriesContainer, Object.assign({ "data-testid": `${dataTestId}-heading-container` }, { children: [jsxs(HeadingContainer, { children: [backTo && (jsx(IconButton, { to: backTo, color: "tertiary", variant: "transparent", size: "small", icon: jsx(Icon, { name: "ArrowLeftIcon" }) })), jsx(Heading, Object.assign({ "data-testid": `${dataTestId}-heading` }, { children: title })), description && (jsx(StyledTip, Object.assign({ link: isValidHttpUrl(link) ? link : undefined, dataTestId: `${dataTestId}-tip`, iconProps: { name: "QuestionMarkCircleIcon" }, renderAs: link ? "a" : "span" }, { children: description })))] }), tag && jsx(Tag, Object.assign({ dataTestId: dataTestId }, { children: tag })), showLoading && jsx(Spinner, { dataTestId: `${dataTestId}-spinner`, centered: true }), action] })), jsx(ChildContainer$1, { children: children })] })));
+    return (jsxs(StyledPageHeader, Object.assign({ className: className, "data-testid": dataTestId }, { children: [jsxs(HeadingAndAccessoriesContainer, Object.assign({ "data-testid": dataTestId && `${dataTestId}-heading-container` }, { children: [jsxs(HeadingContainer, { children: [backTo && (jsx(IconButton, { to: backTo, color: "tertiary", variant: "transparent", size: "small", icon: jsx(Icon, { name: "ArrowLeftIcon" }) })), jsx(Heading, Object.assign({ "data-testid": dataTestId && `${dataTestId}-heading` }, { children: title })), description && (jsx(StyledTip, Object.assign({ link: isValidHttpUrl(link) ? link : undefined, dataTestId: dataTestId && `${dataTestId}-tip`, iconProps: { name: "QuestionMarkCircleIcon" }, renderAs: link ? "a" : "span" }, { children: description })))] }), tag && jsx(Tag, Object.assign({ dataTestId: dataTestId }, { children: tag })), showLoading && jsx(Spinner, { dataTestId: dataTestId && `${dataTestId}-spinner`, centering: "vertically" }), action] })), jsx(ChildContainer$1, { children: children })] })));
 };
 function isValidHttpUrl(link) {
     if (!link) {
@@ -1902,7 +1915,7 @@ const RadioGroupContext = React.createContext(null);
  * @returns {JSX.Element} RadioGroup component
  */
 const RadioGroup = ({ children, id, name, value, disabled, onChange, label, inline, className, dataTestId, isInvalid, }) => {
-    return (jsx(FormGroup, Object.assign({ label: label, dataTestId: `${dataTestId}-FormGroup` }, { children: jsx(Flex, Object.assign({ "$inline": inline, className: className, "data-testid": dataTestId }, { children: jsx(RadioGroupContext.Provider, Object.assign({ value: {
+    return (jsx(FormGroup, Object.assign({ label: label, dataTestId: dataTestId && `${dataTestId}-FormGroup` }, { children: jsx(Flex, Object.assign({ "$inline": inline, className: className, "data-testid": dataTestId }, { children: jsx(RadioGroupContext.Provider, Object.assign({ value: {
                     id,
                     value,
                     name: name || id,
@@ -1926,7 +1939,7 @@ const RadioItem = ({ label, value, dataTestId, className, description }) => {
     const groupCtx = React.useContext(RadioGroupContext);
     const isChecked = (groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.value) === value;
     const uuid = v4();
-    return (jsxs(InputWrapper, Object.assign({ className: className, htmlFor: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id} ${uuid}`, "data-testid": `${dataTestId}-Wrapper` }, { children: [jsx(Input, { id: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id} ${uuid}`, type: "radio", value: value, checked: isChecked, "$disabled": groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.disabled, "$isInvalid": groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.isInvalid, onChange: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.onChange, "data-testid": dataTestId, "$checked": isChecked }), jsxs(LabelContainer$1, { children: [jsx(Label$2, Object.assign({ htmlFor: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id} ${uuid}`, dataTestId: `${dataTestId}-Label`, disabled: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.disabled, isInvalid: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.isInvalid }, { children: label })), description && (jsx(Description$1, Object.assign({ htmlFor: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id} ${uuid}`, "data-testid": `${dataTestId}-Description`, "$disabled": groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.disabled }, { children: description })))] })] })));
+    return (jsxs(InputWrapper, Object.assign({ className: className, htmlFor: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id} ${uuid}`, "data-testid": dataTestId && `${dataTestId}-Wrapper` }, { children: [jsx(Input, { id: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id} ${uuid}`, type: "radio", value: value, checked: isChecked, "$disabled": groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.disabled, "$isInvalid": groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.isInvalid, onChange: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.onChange, "data-testid": dataTestId, "$checked": isChecked }), jsxs(LabelContainer$1, { children: [jsx(Label$2, Object.assign({ htmlFor: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id} ${uuid}`, dataTestId: dataTestId && `${dataTestId}-Label`, disabled: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.disabled, isInvalid: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.isInvalid }, { children: label })), description && (jsx(Description$1, Object.assign({ htmlFor: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id} ${uuid}`, "data-testid": dataTestId && `${dataTestId}-Description`, "$disabled": groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.disabled }, { children: description })))] })] })));
 };
 const InputWrapper = tw.label `tu-radioitem__wrapper`;
 const Input = tw.input `
@@ -1956,7 +1969,7 @@ const TextInput = forwardRef((props, ref) => (jsx(BaseInput, Object.assign({ ref
  */
 const Search = (_a) => {
     var { className, placeholder = "Search", value, widenInputOnFocus, showBorderWhenNotInFocus = false, disabled, onKeyUp, onChange, onFocus, onBlur, name, onClear, dataTestId, autoComplete = "on", ref } = _a, rest = __rest(_a, ["className", "placeholder", "value", "widenInputOnFocus", "showBorderWhenNotInFocus", "disabled", "onKeyUp", "onChange", "onFocus", "onBlur", "name", "onClear", "dataTestId", "autoComplete", "ref"]);
-    return (jsx(StyledTextInput, Object.assign({}, rest, { ref: ref, dataTestId: dataTestId, name: name, className: className, "$widenOnFocus": widenInputOnFocus, "$showBorderWhenNotInFocus": showBorderWhenNotInFocus, placeholder: placeholder, prefix: jsx(Icon, { name: "SearchIcon", size: "medium" }), suffix: onClear ? (jsx("button", Object.assign({ "data-testid": `${dataTestId}_suffix_component`, onClick: () => {
+    return (jsx(StyledTextInput, Object.assign({}, rest, { ref: ref, dataTestId: dataTestId, name: name, className: className, "$widenOnFocus": widenInputOnFocus, "$showBorderWhenNotInFocus": showBorderWhenNotInFocus, placeholder: placeholder, prefix: jsx(Icon, { name: "SearchIcon", size: "medium" }), suffix: onClear ? (jsx("button", Object.assign({ "data-testid": dataTestId && `${dataTestId}_suffix_component`, onClick: () => {
                 onClear();
             } }, { children: jsx(Icon, { name: "XIcon", size: "small" }) }))) : undefined, value: value, disabled: disabled, onChange: onChange, onKeyUp: onKeyUp, onFocus: onFocus, onBlur: onBlur, autoComplete: autoComplete })));
 };
@@ -2244,7 +2257,7 @@ const useCustomComponents = (componentsProps, disabled, menuIsOpen, refMenuIsEna
                 if (disabled) {
                     return null;
                 }
-                return (jsx(components.ClearIndicator, Object.assign({}, props, { children: jsx(XIcon, Object.assign({ onClick: props.clearValue, "data-testid": `${dataTestId}-XIcon` }, { children: jsx(Icon, { name: "XCircleIcon", size: "medium" }) })) })));
+                return (jsx(components.ClearIndicator, Object.assign({}, props, { children: jsx(XIcon, Object.assign({ onClick: props.clearValue, "data-testid": dataTestId && `${dataTestId}-XIcon` }, { children: jsx(Icon, { name: "XCircleIcon", size: "medium" }) })) })));
             }, Control: props => {
                 return (jsx(components.Control, Object.assign({}, props, { className: props.isDisabled ? tws `tu-select__control--disabled` : "" })));
             }, SingleValue: props => {
@@ -2388,7 +2401,7 @@ const CreatableSelect = (props) => {
         isLoading,
         id,
     };
-    return (jsx(SelectContainer$1, Object.assign({ label: label, hideLabel: hideLabel, id: id, hasError: hasError, error: error, description: description, info: info, dataTestId: dataTestId, isDisabled: disabled }, { children: jsxs(Fragment, { children: [prefix !== undefined && (jsx(SelectPrefix, Object.assign({ "data-testid": `${dataTestId}-prefix`, ref: refPrefix }, { children: prefix }))), async ? (jsx(ReactAsyncCreatableSelect, Object.assign({ "aria-label": label, maxMenuHeight: maxMenuHeight, "data-testid": dataTestId, components: customComponents }, props, { onMenuOpen: () => {
+    return (jsx(SelectContainer$1, Object.assign({ label: label, hideLabel: hideLabel, id: id, hasError: hasError, error: error, description: description, info: info, dataTestId: dataTestId, isDisabled: disabled }, { children: jsxs(Fragment, { children: [prefix !== undefined && (jsx(SelectPrefix, Object.assign({ "data-testid": dataTestId && `${dataTestId}-prefix`, ref: refPrefix }, { children: prefix }))), async ? (jsx(ReactAsyncCreatableSelect, Object.assign({ "aria-label": label, maxMenuHeight: maxMenuHeight, "data-testid": dataTestId, components: customComponents }, props, { onMenuOpen: () => {
                         !disabled && openMenuHandler();
                     }, onMenuClose: () => {
                         closeMenuHandler();
@@ -2436,7 +2449,7 @@ const Select = (props) => {
         onMenuScrollToBottom,
         onInputChange,
     };
-    return (jsxs(SelectContainer, Object.assign({ ref: refContainer, className: className, "data-testid": dataTestId, "$hasError": hasError, "$isDisabled": disabled }, { children: [prefix !== undefined && (jsx(SelectPrefix, Object.assign({ "data-testid": `${dataTestId}-prefix`, ref: refPrefix }, { children: prefix }))), async ? (jsx(ReactAsyncSelect, Object.assign({}, propsNoClassName, selectProps, async, { onMenuOpen: openMenuHandler, onMenuClose: closeMenuHandler }))) : (jsx(ReactSelect, Object.assign({}, propsNoClassName, selectProps, { options: filterOption ? orderedOptions : options, hideSelectedOptions: false, isMulti: isMulti, onMenuOpen: openMenuHandler, onMenuClose: closeMenuHandler })))] })));
+    return (jsxs(SelectContainer, Object.assign({ ref: refContainer, className: className, "data-testid": dataTestId, "$hasError": hasError, "$isDisabled": disabled }, { children: [prefix !== undefined && (jsx(SelectPrefix, Object.assign({ "data-testid": dataTestId && `${dataTestId}-prefix`, ref: refPrefix }, { children: prefix }))), async ? (jsx(ReactAsyncSelect, Object.assign({}, propsNoClassName, selectProps, async, { onMenuOpen: openMenuHandler, onMenuClose: closeMenuHandler }))) : (jsx(ReactSelect, Object.assign({}, propsNoClassName, selectProps, { options: filterOption ? orderedOptions : options, hideSelectedOptions: false, isMulti: isMulti, onMenuOpen: openMenuHandler, onMenuClose: closeMenuHandler })))] })));
 };
 const SelectContainer = tw.div `
   tu-select
@@ -2521,7 +2534,7 @@ const Sidebar = ({ childContainerClassName, children, breakpoint = "lg", classNa
         }
         return tws `visible`;
     };
-    return (jsxs(Root$2, Object.assign({ className: className, "data-testid": dataTestId }, { children: [jsx(ChildContainer, Object.assign({ "$breakpoint": breakpoint, ref: overflowContainerRef, className: childContainerClassName, "data-testid": `${dataTestId}-child-container` }, { children: React__default.Children.map(children, child => {
+    return (jsxs(Root$2, Object.assign({ className: className, "data-testid": dataTestId }, { children: [jsx(ChildContainer, Object.assign({ "$breakpoint": breakpoint, ref: overflowContainerRef, className: childContainerClassName, "data-testid": dataTestId && `${dataTestId}-child-container` }, { children: React__default.Children.map(children, child => {
                     return React__default.cloneElement(child, {
                         className: `${child.props.className} ${itemVisibilityClassName(child.props.id)}`,
                     });
@@ -2529,7 +2542,7 @@ const Sidebar = ({ childContainerClassName, children, breakpoint = "lg", classNa
                     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 => {
+                }, menuPlacement: "bottom-end" }, moreMenuProps, { className: `${(moreMenuProps === null || moreMenuProps === void 0 ? void 0 : moreMenuProps.className) || ""} !p-0`, dataTestId: dataTestId && `${dataTestId}-more-menu` }, { children: jsx(MenuList, Object.assign({}, menuListProps, { dataTestId: dataTestId && `${dataTestId}-menu-list` }, { children: React__default.Children.map(children, child => {
                         return itemOverflowMap[child.props.id] ? child : null;
                     }) })) }))) : null] })));
 };
@@ -2603,7 +2616,7 @@ const TextAreaField = React.forwardRef((_a, ref) => {
         }
     }, [onChange]);
     return (jsx(FormGroup, Object.assign({ label: label, tip: tip, isInvalid: renderAsInvalid, helpText: errorMessage || helpText, helpAddon: helpAddon ||
-            (maxLength !== null && maxLength !== undefined && (jsx(TextLengthIndicator, { length: valueLength, maxLength: maxLength }))), className: className, dataTestId: `${dataTestId}-FormGroup` }, { children: jsx(TextArea, Object.assign({ ref: ref, maxLength: maxLength, value: value, isInvalid: renderAsInvalid }, rest, { className: className, onChange: handleChange, dataTestId: dataTestId })) })));
+            (maxLength !== null && maxLength !== undefined && (jsx(TextLengthIndicator, { length: valueLength, maxLength: maxLength }))), className: className, dataTestId: dataTestId && `${dataTestId}-FormGroup` }, { children: jsx(TextArea, Object.assign({ ref: ref, maxLength: maxLength, value: value, isInvalid: renderAsInvalid }, rest, { className: className, onChange: handleChange, dataTestId: dataTestId })) })));
 });
 
 /**
@@ -2624,7 +2637,7 @@ const TextField = React.forwardRef((_a, ref) => {
         }
     }, [onChange]);
     return (jsx(FormGroup, Object.assign({ label: label, tip: tip, isInvalid: renderAsInvalid, helpText: errorMessage || helpText, helpAddon: helpAddon ||
-            (maxLength !== null && maxLength !== undefined && (jsx(TextLengthIndicator, { length: valueLength, maxLength: maxLength }))), dataTestId: `${dataTestId}-FormGroup`, disabled: rest.readOnly }, { children: jsx(TextInput, Object.assign({ ref: ref, maxLength: maxLength, value: value, isInvalid: renderAsInvalid }, rest, { className: className, onChange: handleChange, dataTestId: dataTestId })) })));
+            (maxLength !== null && maxLength !== undefined && (jsx(TextLengthIndicator, { length: valueLength, maxLength: maxLength }))), dataTestId: dataTestId && `${dataTestId}-FormGroup`, disabled: rest.readOnly }, { children: jsx(TextInput, Object.assign({ ref: ref, maxLength: maxLength, value: value, isInvalid: renderAsInvalid }, rest, { className: className, onChange: handleChange, dataTestId: dataTestId })) })));
 });
 
 /**
@@ -2648,7 +2661,7 @@ const Timeline = ({ className, dataTestId, children }) => {
  */
 const TimelineElement = ({ date, children, className, dataTestId = "timeline-date", dot = jsx(Indicator$1, { className: tws `mt-[-1px]`, color: "neutral", icon: jsx(Icon, { name: "CalendarIcon", size: "large" }) }), header = `${format(date, "MMM d, yyyy")} (${formatDistance(date, new Date(), { addSuffix: true })})`, onClick, }) => {
     var _a;
-    return (jsxs("li", Object.assign({ className: `${tws `tu-timeline-element`}${(_a = " " + className) !== null && _a !== void 0 ? _a : ""}  `, "data-date": `${date}`, "data-testid": `${dataTestId}`, onClick: () => onClick && onClick() }, { children: [jsx("div", Object.assign({ className: tws `tu-timeline-element__dot` }, { children: dot })), jsx("div", { children: header }), jsx("div", {}), jsx("div", { children: jsx("div", { children: children }) })] })));
+    return (jsxs("li", Object.assign({ className: `${tws `tu-timeline-element`}${(_a = " " + className) !== null && _a !== void 0 ? _a : ""}  `, "data-date": `${date}`, "data-testid": dataTestId && `${dataTestId}`, onClick: () => onClick && onClick() }, { children: [jsx("div", Object.assign({ className: tws `tu-timeline-element__dot` }, { children: dot })), jsx("div", { children: header }), jsx("div", {}), jsx("div", { children: jsx("div", { children: children }) })] })));
 };
 
 /**
@@ -2665,7 +2678,7 @@ const Toggle = React.forwardRef(({ toggled = false, onChange, disabled, size = "
     return (jsxs(ToggleWrapper, { children: [jsxs(InputContainer, Object.assign({ htmlFor: id }, { children: [jsx(HiddenInput, { name: name, type: "checkbox", checked: toggled, disabled: disabled, onChange: e => {
                             e.stopPropagation();
                             onChange(!toggled, e);
-                        }, id: id, "aria-checked": toggled, role: "checkbox", tabIndex: tabIndex, required: required, ref: ref, "data-testid": `${dataTestId}-Input`, onBlur: onBlur }), jsx(SwitchContainer, Object.assign({ "$toggled": toggled, htmlFor: id, "$disabled": disabled, "$size": size }, { children: jsx(Switch, { "$toggled": toggled, htmlFor: id, "data-testid": `${dataTestId}-Switch` }) }))] })), jsxs(LabelContainer, { children: [jsx(Label$2, Object.assign({ htmlFor: id, dataTestId: `${dataTestId}-Label`, disabled: disabled }, { children: name })), description && (jsx(Description, Object.assign({ htmlFor: id, "data-testid": `${dataTestId}-Description`, "$disabled": disabled }, { children: description })))] })] }));
+                        }, id: id, "aria-checked": toggled, role: "checkbox", tabIndex: tabIndex, required: required, ref: ref, "data-testid": dataTestId && `${dataTestId}-Input`, onBlur: onBlur }), jsx(SwitchContainer, Object.assign({ "$toggled": toggled, htmlFor: id, "$disabled": disabled, "$size": size }, { children: jsx(Switch, { "$toggled": toggled, htmlFor: id, "data-testid": dataTestId && `${dataTestId}-Switch` }) }))] })), jsxs(LabelContainer, { children: [jsx(Label$2, Object.assign({ htmlFor: id, dataTestId: dataTestId && `${dataTestId}-Label`, disabled: disabled }, { children: name })), description && (jsx(Description, Object.assign({ htmlFor: id, "data-testid": dataTestId && `${dataTestId}-Description`, "$disabled": disabled }, { children: description })))] })] }));
 });
 Toggle.displayName = "Toggle";
 const ToggleWrapper = tw.div `tu-toggle__wrapper`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.1.28",
+  "version": "0.1.30",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "dependencies": {
@@ -10,8 +10,8 @@
     "react": "18.2.0",
     "@trackunit/ui-design-tokens": "0.0.53",
     "@trackunit/react-core-contexts-test": "0.1.19",
-    "echarts-for-react": "3.0.2",
     "echarts": "5.4.0",
+    "echarts-for-react": "3.0.2",
     "uuid": "8.3.2",
     "react-use": "17.4.0",
     "date-fns": "2.29.3",

package/src/components/Chart/Chart.d.ts

@@ -1,6 +1,6 @@
+import { EChartsType } from "echarts";
 import * as React from "react";
 import { CommonProps } from "../../common";
-import { EChartsType } from "echarts";
 export interface IOptionsType {
     [key: string]: any;
 }

package/src/components/Spinner/Spinner.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { CommonProps, Size } from "../../common/CommonProps";
+type Centering = "horizontally" | "vertically" | "centered";
 export interface SpinnerProps extends CommonProps {
     /**
      * Defines the size of the spinner.
@@ -8,7 +9,7 @@ export interface SpinnerProps extends CommonProps {
     /**
      * When true, the spinner will be centered in the parent element using css grid.
      */
-    centered?: boolean;
+    centering?: Centering;
     /**
      * Select either "light" or "dark" mode.
      * Use "dark" when the spinner is used on a dark background.
@@ -34,4 +35,5 @@ export interface SpinnerProps extends CommonProps {
  * @param {SpinnerProps} props - The props for the Spinner component
  * @returns {JSX.Element} Spinner component
  */
-export declare const Spinner: ({ mode, size, centered, className, containerClassName, dataTestId, }: SpinnerProps) => JSX.Element;
+export declare const Spinner: ({ mode, size, centering, className, containerClassName, dataTestId, }: SpinnerProps) => JSX.Element;
+export {};