@trackunit/react-components 0.0.143 → 0.0.147

package/components/DateInput/DateInput.d.ts

@@ -1,24 +1,23 @@
 /// <reference types="react" />
-import { Matcher } from "react-day-picker";
 import { BaseInputProps } from "../BaseInput";
-declare type BaseInputExposedProps = Omit<BaseInputProps, "defaultValue" | "onChange">;
+declare type BaseInputExposedProps = Omit<BaseInputProps, "defaultValue" | "min" | "max" | "value">;
 export interface DateInputProps extends BaseInputExposedProps {
     /**
-     * A default value to be displayed by a input field
+     * A min value in type Date
      */
-    defaultValue?: Date;
+    min?: Date;
     /**
-     * Specification of dates not allowed to be selected - i the form of react-day-picker matcher
+     * A max date value in type Date
      */
-    disabledDays?: Matcher | Matcher[] | undefined;
+    max?: Date;
     /**
-     * A flag that can be set to true to disallow the user to deselect a date. (if false the user can click the selected date to deselect)
+     * A default value in type Date
      */
-    preventDeselect?: boolean;
+    defaultValue?: Date;
     /**
-     * onChange function returning the date instead of input event
+     * A value in type Date
      */
-    onChange?: (date: Date) => void;
+    value?: Date;
 }
 /**
  * A wrapper around BaseInput with a pop-up day picker.

package/components/PageHeading/PageHeading.d.ts

@@ -1,5 +1,7 @@
-/// <reference types="react" />
-interface PageHeadingProps {
+import { ReactNode } from "react";
+import { CommonProps } from "../../common/CommonProps";
+import "./PageHeading.css";
+export interface PageHeadingProps extends CommonProps {
     /**
      * The title of the page.
      */
@@ -9,16 +11,14 @@ interface PageHeadingProps {
      */
     subtitle?: string;
     /**
-     * Test id to be used for the component.
+     * The addon could be used to tell the state of a pageheading.
      */
-    dataTestId?: string;
-    tag?: string;
+    addon?: ReactNode;
 }
 /**
- * The PageHeading component used on pages.
+ * The PageHeading component is used on pages to set the Browser page title.
  *
  * @param {PageHeadingProps} props - The props for the PageHeading component
  * @returns {JSX.Element} PageHeading component
  */
-export declare const PageHeading: ({ title, subtitle, dataTestId, tag }: PageHeadingProps) => JSX.Element;
-export {};
+export declare const PageHeading: ({ title, subtitle, dataTestId, addon }: PageHeadingProps) => JSX.Element;

package/components/Select/Select.d.ts

@@ -4,6 +4,7 @@ import { SelectProps } from "./useSelect";
 export interface SelectOption {
     label: string;
     value: string;
+    disabled?: boolean;
 }
 /**
  * Selects are input components used to choose a value from a set.

package/components/Select/shared.d.ts

@@ -12,4 +12,4 @@ export declare function isMultiValue<Option>(arg: MultiValue<Option> | SingleVal
  * @returns {OptionsOrGroups<Option, Group>} An array of ordered options with selected on top
  */
 export declare const getOrderedOptions: <Option, Group extends GroupBase<Option>>(options: OptionsOrGroups<Option, Group> | undefined, value: PropsValue<Option> | undefined) => OptionsOrGroups<Option, Group>;
-export declare const SelectPrefix: import("tailwind-styled-components/dist/tailwind").TailwindComponent<"div", {}>;
+export declare const SelectPrefix: import("dist/libs/ui/tailwind-styled-components/src/lib/types").TailwindComponent<import("dist/libs/ui/tailwind-styled-components/src/lib/types").TailwindHtmlComponent<"div">, {}>;

package/index.css

@@ -211,6 +211,16 @@
   }
 }
 
+.tu-pageheading {
+  @apply w-full;
+
+  &__flex{
+    @apply flex
+      items-center
+      flex-wrap-reverse
+      gap-2;
+  }
+}
 /* CSS related to the RadioGroup component */
 .tu-radiogroup {
   @apply flex 

package/index.js

@@ -1,16 +1,17 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { tw, tws, twx } from '@trackunit/tailwind-styled-components';
 import * as React from 'react';
-import React__default, { useState, forwardRef, useCallback, useRef, Fragment as Fragment$1, createElement, useEffect, useContext, memo } from 'react';
+import React__default, { useState, forwardRef, useRef, Fragment as Fragment$1, useCallback, createElement, useEffect, useContext, memo } from 'react';
 import { HeroIconsArray, heroIconLookup, TrackunitSolidIconsArray, TrackunitOutlineIconsArray, trackunitIconLookup } from '@trackunit/ui-icons';
 import EChart from 'echarts-for-react';
 import { v4 } from 'uuid';
 import { useMeasure, useCopyToClipboard, useKeyPressEvent } from 'react-use';
-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';
+import { format, formatDistance } from 'date-fns';
 import { useSpring, animated } from '@react-spring/web';
 import usePortal from 'react-useportal';
 import { createPopper } from '@popperjs/core';
+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';
 import { Helmet } from 'react-helmet';
 import { UNSAFE_NavigationContext } from 'react-router-dom';
 import ReactSelect, { components } from 'react-select';
@@ -18,7 +19,6 @@ export { default as ValueType } from 'react-select';
 import ReactAsyncCreatableSelect from 'react-select/async-creatable';
 import ReactCreatableSelect from 'react-select/creatable';
 import ReactAsyncSelect from 'react-select/async';
-import { format, formatDistance } from 'date-fns';
 import { getColorValue } from '@trackunit/ui-design-tokens';
 
 const docs = {
@@ -1833,64 +1833,45 @@ const StyledCopyableText = tw.span`
   tu-copyable-text
   ${p => p.$animating ? tws`tu-copyable-text--animating` : null}`;
 
-const localeLookup = {
-  en: enGB,
-  "en-US": enUS,
-  "en-GB": enGB,
-  da,
-  de,
-  cs,
-  nl,
-  fr,
-  fi,
-  hu,
-  it,
-  nb,
-  pl,
-  pt,
-  ru,
-  ro,
-  es,
-  sv,
-  ja,
-  th
-};
-/**
- * A helper function to get the matching Locale object for a given language.
- *
- * @param {string} language The language to match
- * @returns {Locale} The corresponding Locale object
- */
-
-const useLocale = language => {
-  return localeLookup[language] || localeLookup.en;
-};
-
 /**
- * The DayPicker component is used when the user needs to select a date.
+ * A wrapper around BaseInput with a pop-up day picker.
  *
- * @param {DayPickerProps} props - The props for the DayPicker component
- * @returns {JSX.Element} DayPicker component
+ * NOTE: If shown with a label, please use the `DateField` component instead.
  */
 
-const DayPicker = _a => {
+const DateInput = forwardRef((_a, ref) => {
   var {
-    onDaySelect,
-    disabledDays,
-    selectedDays,
-    language
+    min,
+    max,
+    defaultValue,
+    value
   } = _a,
-      rest = __rest(_a, ["onDaySelect", "disabledDays", "selectedDays", "language"]);
+      rest = __rest(_a, ["min", "max", "defaultValue", "value"]);
 
-  const locale = useLocale(language);
-  return jsx(DayPicker$1, Object.assign({
-    onDayClick: onDaySelect,
-    selected: selectedDays,
-    locale: locale,
-    disabled: disabledDays,
-    className: "custom-day-picker"
+  const formatDateToInputString = date => date ? format(date, "yyyy-MM-dd") : date; // @ts-ignore
+  // Chrome needs it's default icon to have datepicker functionality.
+  // window.chrome doesn't exist in TS but is available on chrome browsers.
+  // If it fails it will just show our icon.
+
+
+  const hideOnChrome = () => window.chrome !== null && typeof window.chrome !== "undefined" ? "hidden" : "";
+
+  return jsx(BaseInput, Object.assign({
+    type: "date",
+    value: formatDateToInputString(value),
+    defaultValue: formatDateToInputString(defaultValue),
+    min: formatDateToInputString(min),
+    max: formatDateToInputString(max),
+    ref: ref,
+    suffix: jsx(Icon$1, {
+      dataTestId: "calendar",
+      name: "CalendarIcon",
+      size: "medium",
+      type: "solid",
+      className: hideOnChrome()
+    })
   }, rest));
-};
+});
 
 var PopoverLifecycle;
 
@@ -2096,101 +2077,6 @@ const StyledCardBody = twx(CardBody)`
   tu-popover-list-body
 `;
 
-/**
- * A wrapper around BaseInput with a pop-up day picker.
- *
- * NOTE: If shown with a label, please use the `DateField` component instead.
- */
-
-const DateInput = forwardRef((_a, ref) => {
-  var {
-    defaultValue,
-    disabledDays,
-    disabled,
-    preventDeselect,
-    onChange
-  } = _a,
-      rest = __rest(_a, ["defaultValue", "disabledDays", "disabled", "preventDeselect", "onChange"]);
-
-  const [selectedDay, setSelectedDay] = useState(defaultValue);
-  const onChangeHandler = useCallback(value => {
-    const newValue = (value === null || value === void 0 ? void 0 : value.toLocaleDateString()) === (selectedDay === null || selectedDay === void 0 ? void 0 : selectedDay.toLocaleDateString()) && !preventDeselect ? undefined : value;
-    setSelectedDay(newValue);
-    onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
-  }, [selectedDay, preventDeselect, onChange]);
-  const target = useRef(null);
-  const popover = useRef(null);
-  const {
-    popoverRef,
-    targetRef,
-    onShow,
-    onHide,
-    popoverProps
-  } = usePopover({
-    targetRef: target,
-    popoverRef: popover,
-    placement: "bottom"
-  });
-  return jsxs(Fragment, {
-    children: [jsx(BaseInput, Object.assign({
-      ref: ref,
-      value: (selectedDay === null || selectedDay === void 0 ? void 0 : selectedDay.toLocaleDateString()) || "",
-      onChange: () => {}
-    }, rest, {
-      dataTestId: "dateInput",
-      onFocus: () => {
-        onShow();
-      },
-      nonInteractive: true,
-      suffix: jsx(Icon$1, {
-        dataTestId: "calendar",
-        name: "CalendarIcon",
-        size: "medium",
-        type: "solid",
-        onClick: !disabled ? onShow : undefined,
-        forwardedRef: targetRef
-      }),
-      actions: selectedDay && jsx(RemoveValueContainer, {
-        children: jsx(Button, Object.assign({
-          color: "tertiary",
-          onClick: e => {
-            e.preventDefault();
-            setSelectedDay(undefined);
-          }
-        }, {
-          children: jsx(Icon$1, {
-            name: "XIcon",
-            size: "small"
-          })
-        }))
-      }),
-      onClick: e => e.preventDefault()
-    })), jsx(AnimatedPopover, Object.assign({
-      ref: popoverRef,
-      onRequestClose: () => {
-        var _a;
-
-        onHide();
-        (_a = targetRef === null || targetRef === void 0 ? void 0 : targetRef.current) === null || _a === void 0 ? void 0 : _a.blur();
-      }
-    }, popoverProps, {
-      children: jsx(PopoverList, Object.assign({
-        dataTestId: "datePickerPopover"
-      }, {
-        children: jsx(DayPicker, {
-          onDaySelect: onChangeHandler,
-          disabledDays: disabledDays,
-          selectedDays: selectedDay,
-          language: navigator.language
-        })
-      }))
-    }))]
-  });
-});
-const RemoveValueContainer = tw.div`
-tu-date__remove
-  `;
-
 /**
  * The PopoverListItem component.
  *
@@ -2234,7 +2120,7 @@ const PopoverListItem = ({
   }, {
     children: url ? jsx(UnstyledAnchor, Object.assign({
       "$as": renderAs,
-      to: url
+      href: url
     }, {
       children: content
     })) : content
@@ -2516,6 +2402,65 @@ const DateField = forwardRef((_a, ref) => {
   }));
 });
 
+const localeLookup = {
+  en: enGB,
+  "en-US": enUS,
+  "en-GB": enGB,
+  da,
+  de,
+  cs,
+  nl,
+  fr,
+  fi,
+  hu,
+  it,
+  nb,
+  pl,
+  pt,
+  ru,
+  ro,
+  es,
+  sv,
+  ja,
+  th
+};
+/**
+ * A helper function to get the matching Locale object for a given language.
+ *
+ * @param {string} language The language to match
+ * @returns {Locale} The corresponding Locale object
+ */
+
+const useLocale = language => {
+  return localeLookup[language] || localeLookup.en;
+};
+
+/**
+ * The DayPicker component is used when the user needs to select a date.
+ *
+ * @param {DayPickerProps} props - The props for the DayPicker component
+ * @returns {JSX.Element} DayPicker component
+ */
+
+const DayPicker = _a => {
+  var {
+    onDaySelect,
+    disabledDays,
+    selectedDays,
+    language
+  } = _a,
+      rest = __rest(_a, ["onDaySelect", "disabledDays", "selectedDays", "language"]);
+
+  const locale = useLocale(language);
+  return jsx(DayPicker$1, Object.assign({
+    onDayClick: onDaySelect,
+    selected: selectedDays,
+    locale: locale,
+    disabled: disabledDays,
+    className: "custom-day-picker"
+  }, rest));
+};
+
 /**
  * The DayPickerPopover component returns a button which when clicked shows the daypicker.
  *
@@ -3170,100 +3115,7 @@ const Space = tw.div`
 `;
 
 /**
- *  The tag component is used to categorize elements in the ui.
- *
- *  This could be to tell the state of an asset, or label a page as Beta.
- *
- *  The tag is also used in multiselect components to show selected options.
- *
- *  **Do:** Use short labels for easy scanning.
- *
- * @param {TagProps} props - The props for the tag component
- * @returns {JSX.Element} tag component
- */
-
-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 && // a fix for multiselect deselecting tags working together with fade out animation
-    jsx(IconContainer, Object.assign({
-      onMouseDown: onClose
-    }, {
-      children: jsx(Icon$1, {
-        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`
-      })
-    }))]
-  }));
-});
-
-const getSizeModifierClass = () => ({
-  $size,
-  $withXIcon
-}) => {
-  const tagSizeModifierClass = {
-    medium: $withXIcon ? tws`tu-tag--with-icon ` : tws` `,
-    small: $withXIcon ? tws`tu-tag--small tu-tag--with-icon` : tws`tu-tag--small`
-  };
-  return tagSizeModifierClass[$size];
-};
-
-const getColorModifierClass = () => ({
-  $color
-}) => {
-  const colorClasses = {
-    primary: tws`tu-tag--primary`,
-    secondary: tws`tu-tag--secondary`,
-    accent: tws`tu-tag--accent`,
-    success: tws`tu-tag--success`,
-    danger: tws`tu-tag--danger`,
-    warning: tws`tu-tag--warning`,
-    info: tws`tu-tag--info`,
-    neutral: tws`tu-tag--neutral`,
-    good: tws`tu-tag--good`,
-    low: tws`tu-tag--low`,
-    critical: tws`tu-tag--critical`,
-    working: tws`tu-tag--working`,
-    idle: tws`tu-tag--idle`,
-    stopped: tws`tu-tag--stopped`,
-    unknown: tws`tu-tag--unknown`
-  };
-  return colorClasses[$color];
-};
-
-const StyledText = tw.span`
-  tu-tag
-  ${getSizeModifierClass()}
-  ${getColorModifierClass()}
-`;
-const IconContainer = tw.div`
-  tu-tag__icon-container
-`;
-
-/**
- * The PageHeading component used on pages.
+ * The PageHeading component is used on pages to set the Browser page title.
  *
  * @param {PageHeadingProps} props - The props for the PageHeading component
  * @returns {JSX.Element} PageHeading component
@@ -3273,11 +3125,9 @@ const PageHeading = ({
   title,
   subtitle,
   dataTestId,
-  tag
+  addon
 }) => {
-  return jsxs("div", Object.assign({
-    className: "w-full"
-  }, {
+  return jsxs(PageHeadingContainer, {
     children: [jsx(Helmet, {
       title: title
     }), jsxs(StyledFlex, {
@@ -3286,11 +3136,7 @@ const PageHeading = ({
         dataTestId: dataTestId
       }, {
         children: title
-      })), tag && jsx(Tag, Object.assign({
-        color: "primary"
-      }, {
-        children: tag
-      }))]
+      })), addon]
     }), subtitle && jsx(Heading, Object.assign({
       variant: "subtitle",
       subtle: true
@@ -3299,14 +3145,10 @@ const PageHeading = ({
     })), jsx(Spacer, {
       minHeight: "normal"
     })]
-  }));
+  });
 };
-const StyledFlex = tw.div`
-  flex
-  items-center
-  flex-wrap-reverse
-  gap-2
-`;
+const PageHeadingContainer = tw.div`tu-pageheading`;
+const StyledFlex = tw.div`tu-pageheading__flex`;
 
 function useConfirmExit(confirmExit, when = true) {
   const {
@@ -3611,6 +3453,99 @@ const SelectPrefix = tw.div`
   tu-select__prefix 
 `;
 
+/**
+ *  The tag component is used to categorize elements in the ui.
+ *
+ *  This could be to tell the state of an asset, or label a page as Beta.
+ *
+ *  The tag is also used in multiselect components to show selected options.
+ *
+ *  **Do:** Use short labels for easy scanning.
+ *
+ * @param {TagProps} props - The props for the tag component
+ * @returns {JSX.Element} tag component
+ */
+
+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 && // a fix for multiselect deselecting tags working together with fade out animation
+    jsx(IconContainer, Object.assign({
+      onMouseDown: onClose
+    }, {
+      children: jsx(Icon$1, {
+        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`
+      })
+    }))]
+  }));
+});
+
+const getSizeModifierClass = () => ({
+  $size,
+  $withXIcon
+}) => {
+  const tagSizeModifierClass = {
+    medium: $withXIcon ? tws`tu-tag--with-icon ` : tws` `,
+    small: $withXIcon ? tws`tu-tag--small tu-tag--with-icon` : tws`tu-tag--small`
+  };
+  return tagSizeModifierClass[$size];
+};
+
+const getColorModifierClass = () => ({
+  $color
+}) => {
+  const colorClasses = {
+    primary: tws`tu-tag--primary`,
+    secondary: tws`tu-tag--secondary`,
+    accent: tws`tu-tag--accent`,
+    success: tws`tu-tag--success`,
+    danger: tws`tu-tag--danger`,
+    warning: tws`tu-tag--warning`,
+    info: tws`tu-tag--info`,
+    neutral: tws`tu-tag--neutral`,
+    good: tws`tu-tag--good`,
+    low: tws`tu-tag--low`,
+    critical: tws`tu-tag--critical`,
+    working: tws`tu-tag--working`,
+    idle: tws`tu-tag--idle`,
+    stopped: tws`tu-tag--stopped`,
+    unknown: tws`tu-tag--unknown`
+  };
+  return colorClasses[$color];
+};
+
+const StyledText = tw.span`
+  tu-tag
+  ${getSizeModifierClass()}
+  ${getColorModifierClass()}
+`;
+const IconContainer = tw.div`
+  tu-tag__icon-container
+`;
+
 /**
  * A single select menu item is a basic wrapper around Menu item designed to be used as a single value render in Select list
  *
@@ -3982,7 +3917,7 @@ const useCustomComponents = (componentsProps, disabled, menuIsClosing, refMenuIs
             disabled: disabled,
             dataTestId: props.label
           })) : jsx(SingleSelectMenuItem, Object.assign({}, componentProps, {
-            disabled: disabled,
+            disabled: disabled || props.isDisabled,
             dataTestId: props.label
           }))
         }));

package/package.json

@@ -1,18 +1,18 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.0.143",
+  "version": "0.0.147",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "dependencies": {
     "@trackunit/css-core": "0.0.51",
-    "@trackunit/tailwind-styled-components": "0.0.44",
+    "@trackunit/tailwind-styled-components": "0.0.45",
     "react": "17.0.2",
     "@trackunit/ui-design-tokens": "0.0.43",
     "echarts-for-react": "^3.0.2",
     "uuid": "^8.3.2",
     "react-use": "^17.4.0",
-    "react-day-picker": "^8.3.0",
     "date-fns": "^2.29.3",
+    "react-day-picker": "^8.3.0",
     "@trackunit/ui-icons": "0.0.46",
     "react-useportal": "1.0.16",
     "react-helmet": "^6.1.0",