@trackunit/react-components 0.1.44 → 0.1.46

package/index.js

@@ -7,7 +7,7 @@ import EChart from 'echarts-for-react';
 import { v4 } from 'uuid';
 import { useMeasure, useCopyToClipboard } from 'react-use';
 import { format, formatDistance } from 'date-fns';
-import { useFloating, offset, flip, shift, size, autoUpdate, useInteractions, useClick, useHover, useRole, useDismiss, FloatingPortal, FloatingFocusManager } from '@floating-ui/react';
+import { useFloating, offset, flip, size, shift, autoUpdate, useInteractions, useClick, useHover, useRole, useDismiss, FloatingPortal, FloatingFocusManager } from '@floating-ui/react';
 import { Link, UNSAFE_NavigationContext } from 'react-router-dom';
 import { DayPicker as DayPicker$1 } from 'react-day-picker';
 import { enGB, enUS, da, de, cs, nl, fr, fi, hu, it, nb, pl, pt, ru, ro, es, sv, ja, th } from 'date-fns/locale';
@@ -488,7 +488,7 @@ const IconContainer$1 = tw.div `
  * @returns {JSX.Element} Badge component
  */
 const Badge = (_a) => {
-    var { color = "danger", subtle = false, className, count, max, hideZero = false, dataTestId } = _a; __rest(_a, ["color", "subtle", "className", "count", "max", "hideZero", "dataTestId"]);
+    var { color = "primary", subtle = false, className, count, max, hideZero = false, dataTestId } = _a; __rest(_a, ["color", "subtle", "className", "count", "max", "hideZero", "dataTestId"]);
     if (hideZero && count === 0) {
         return null;
     }
@@ -498,20 +498,7 @@ const Badge = (_a) => {
 const getBadgeModifierClass = () => ({ $color, $subtle }) => {
     const colorClasses = {
         primary: $subtle ? tws `tu-badge--primary-subtle` : tws `tu-badge--primary`,
-        secondary: $subtle ? tws `tu-badge--secondary-subtle` : tws `tu-badge--secondary`,
-        accent: $subtle ? tws `tu-badge--accent-subtle` : tws `tu-badge--accent`,
-        success: $subtle ? tws `tu-badge--success-subtle` : tws `tu-badge--success`,
         danger: $subtle ? tws `tu-badge--danger-subtle` : tws `tu-badge--danger`,
-        warning: $subtle ? tws `tu-badge--warning-subtle` : tws `tu-badge--warning`,
-        info: $subtle ? tws `tu-badge--info-subtle` : tws `tu-badge--info`,
-        neutral: $subtle ? tws `tu-badge--neutral-subtle` : tws `tu-badge--neutral`,
-        good: $subtle ? tws `tu-badge--good-subtle` : tws `tu-badge--good`,
-        low: $subtle ? tws `tu-badge--low-subtle` : tws `tu-badge--low`,
-        critical: $subtle ? tws `tu-badge--critical-subtle` : tws `tu-badge--critical`,
-        working: $subtle ? tws `tu-badge--working-subtle` : tws `tu-badge--working`,
-        idle: $subtle ? tws `tu-badge--idle-subtle` : tws `tu-badge--idle`,
-        stopped: $subtle ? tws `tu-badge--stopped-subtle` : tws `tu-badge--stopped`,
-        unknown: $subtle ? tws `tu-badge--unknown-subtle` : tws `tu-badge--unknown`,
     };
     return colorClasses[$color];
 };
@@ -958,9 +945,7 @@ const Popover = ({ children, render, placement, activation = { click: true, hove
         middleware: [
             offset(8),
             flip({ fallbackPlacements: ["top", "bottom", "right", "left"] }),
-            shift(),
             size({
-                padding: 8,
                 apply({ availableWidth, availableHeight, elements }) {
                     Object.assign(elements.floating.style, {
                         maxWidth: `${availableWidth}px`,
@@ -968,6 +953,7 @@ const Popover = ({ children, render, placement, activation = { click: true, hove
                     });
                 },
             }),
+            shift(),
         ],
         placement,
         whileElementsMounted: autoUpdate,
@@ -1142,8 +1128,8 @@ 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 && `${dataTestId}-FormGroup` }, { children: jsx(DateInput, Object.assign({ ref: ref, defaultValue: defaultValue, isInvalid: renderAsInvalid }, rest, { className: className, dataTestId: dataTestId })) })));
+    const renderAsInvalid = isInvalid === undefined ? Boolean(errorMessage) : isInvalid;
+    return (jsx(FormGroup, Object.assign({ label: label, tip: tip, isInvalid: renderAsInvalid, helpText: (renderAsInvalid && 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 = {
@@ -1595,8 +1581,8 @@ 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 && `${dataTestId}-FormGroup` }, { children: jsx(NumberInput, Object.assign({ ref: ref, maxLength: maxLength, value: value, isInvalid: renderAsInvalid }, rest, { className: className, dataTestId: dataTestId })) })));
+    const renderAsInvalid = isInvalid === undefined ? Boolean(errorMessage) : isInvalid;
+    return (jsx(FormGroup, Object.assign({ label: label, tip: tip, isInvalid: renderAsInvalid, helpText: (renderAsInvalid && 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 })) })));
 });
 
 /**
@@ -2644,14 +2630,14 @@ const TextAreaField = React.forwardRef((_a, ref) => {
 const TextField = React.forwardRef((_a, ref) => {
     var { label, tip, helpText, helpAddon, errorMessage, isInvalid, maxLength, onChange, className, value, dataTestId } = _a, rest = __rest(_a, ["label", "tip", "helpText", "helpAddon", "errorMessage", "isInvalid", "maxLength", "onChange", "className", "value", "dataTestId"]);
     const [valueLength, setValueLength] = React.useState(value ? `${value}`.length : 0);
-    const renderAsInvalid = isInvalid || Boolean(errorMessage);
+    const renderAsInvalid = isInvalid === undefined ? Boolean(errorMessage) : isInvalid;
     const handleChange = React.useCallback((event) => {
         setValueLength(event.target.value.length);
         if (onChange) {
             onChange(event);
         }
     }, [onChange]);
-    return (jsx(FormGroup, Object.assign({ label: label, tip: tip, isInvalid: renderAsInvalid, helpText: errorMessage || helpText, helpAddon: helpAddon ||
+    return (jsx(FormGroup, Object.assign({ label: label, tip: tip, isInvalid: renderAsInvalid, helpText: (renderAsInvalid && errorMessage) || helpText, helpAddon: helpAddon ||
             (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 })) })));
 });
 

package/package.json

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

package/src/components/Badge/Badge.d.ts

@@ -1,11 +1,12 @@
 /// <reference types="react" />
 import { ThemeColors } from "@trackunit/ui-design-tokens";
 import { CommonProps } from "../../common/CommonProps";
+type BadgeColors = Extract<ThemeColors, "primary" | "danger">;
 interface BaseBadgeProps extends CommonProps {
     /**
      * The color of the badge.
      */
-    color?: ThemeColors;
+    color?: BadgeColors;
     /**
      * Specifies whether the badge is subtle or not.
      * Subtle badges have a light background color wither a darker text color.