@trackunit/react-components 0.0.146 → 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/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.
  *
@@ -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.
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.0.146",
+  "version": "0.0.147",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "dependencies": {
@@ -11,8 +11,8 @@
     "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",