@trackunit/react-components 0.0.100 → 0.0.101

package/components/DateField/DateField.d.ts

@@ -1,30 +1,19 @@
 /// <reference types="react" />
-import { Matcher } from "react-day-picker";
-import { BaseInputProps } from "../BaseInput";
-export interface DateFieldProps extends Pick<BaseInputProps, "placeholder" | "id" | "dataTestId" | "onChange" | "readOnly"> {
+import { DateInputProps } from "../DateInput/DateInput";
+import { FormGroupProps } from "../FormGroup/FormGroup";
+declare type FormGroupExposedProps = Pick<FormGroupProps, "label" | "tip" | "helpText" | "helpAddon">;
+export interface DateFieldProps extends DateInputProps, FormGroupExposedProps {
     /**
-     * A text label to be displayed next to the indicator
+     * If a value is set, the field is rendered in its invalid state.
      */
-    label?: string;
-    /**
-     * A text to be displayed under the input with a short description of field purpose
-     */
-    description?: string;
-    /**
-     * A default value to be displayed by a input field
-     */
-    defaultValue?: string;
-    /**
-     * A flag that can be used to disable the input, default value is false
-     */
-    disabled?: boolean;
-    /**
-     * Specification of dates not allowed to be selected - i the form of react-day-picker matcher
-     */
-    disabledDays?: Matcher | Matcher[] | undefined;
-    /**
-     * 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)
-     */
-    preventDeselect?: boolean;
+    errorMessage?: string;
 }
+/**
+ * The date field component is used for entering date values.
+ *
+ * _**Do use**_ the DateField for date input.
+ *
+ * _**Do not use**_ this fields for non-serialized dates. Use TextField instead.
+ */
 export declare const DateField: import("react").ForwardRefExoticComponent<DateFieldProps & import("react").RefAttributes<HTMLInputElement>>;
+export {};

package/components/DateInput/DateInput.d.ts

@@ -0,0 +1,29 @@
+/// <reference types="react" />
+import { Matcher } from "react-day-picker";
+import { BaseInputProps } from "../BaseInput";
+declare type BaseInputExposedProps = Omit<BaseInputProps, "defaultValue" | "onChange">;
+export interface DateInputProps extends BaseInputExposedProps {
+    /**
+     * A default value to be displayed by a input field
+     */
+    defaultValue?: Date;
+    /**
+     * Specification of dates not allowed to be selected - i the form of react-day-picker matcher
+     */
+    disabledDays?: Matcher | Matcher[] | undefined;
+    /**
+     * 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)
+     */
+    preventDeselect?: boolean;
+    /**
+     * onChange function returning the date instead of input event
+     */
+    onChange?: (date: Date) => void;
+}
+/**
+ * A wrapper around BaseInput with a pop-up day picker.
+ *
+ * NOTE: If shown with a label, please use the `DateField` component instead.
+ */
+export declare const DateInput: import("react").ForwardRefExoticComponent<DateInputProps & import("react").RefAttributes<HTMLInputElement>>;
+export {};

package/components/index.d.ts

@@ -7,7 +7,8 @@ export * from "./Chart";
 export * from "./Checkbox";
 export * from "./Collapse";
 export * from "./CopyableText";
-export * from "./DateField";
+export * from "./DateField/DateField";
+export * from "./DateInput/DateInput";
 export * from "./DayPicker";
 export * from "./FormGroup/FormGroup";
 export * from "./Heading";

package/index.js

@@ -1992,23 +1992,28 @@ const StyledCardBody = tw(CardBody)`
   max-h-full
 `;
 
-const DateField = forwardRef(({
-  defaultValue,
-  onChange,
-  disabled = false,
-  readOnly = false,
-  id,
-  dataTestId,
-  placeholder,
-  disabledDays,
-  preventDeselect = false
-}, ref) => {
-  const [selectedDay, setSelectedDay] = useState(defaultValue ? new Date(defaultValue) : undefined);
+/**
+ * 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);
-  }, [setSelectedDay, onChange, selectedDay, preventDeselect]);
+  }, [selectedDay, preventDeselect, onChange]);
   const target = useRef(null);
   const popover = useRef(null);
   const {
@@ -2023,15 +2028,11 @@ const DateField = forwardRef(({
     placement: "bottom"
   });
   return jsxs(Fragment, {
-    children: [jsx(BaseInput, {
-      placeholder: placeholder,
-      value: (selectedDay === null || selectedDay === void 0 ? void 0 : selectedDay.toLocaleDateString()) || "",
-      onChange: () => {},
-      disabled: disabled,
-      readOnly: readOnly,
-      dataTestId: dataTestId,
-      id: id,
+    children: [jsx(BaseInput, Object.assign({
       ref: ref,
+      value: (selectedDay === null || selectedDay === void 0 ? void 0 : selectedDay.toLocaleDateString()) || "",
+      onChange: () => {}
+    }, rest, {
       suffix: jsx(Icon$1, {
         dataTestId: "calendar",
         name: "CalendarIcon",
@@ -2050,8 +2051,9 @@ const DateField = forwardRef(({
             size: "small"
           })
         }))
-      })
-    }), jsx(AnimatedPopover, Object.assign({
+      }),
+      onClick: e => e.preventDefault()
+    })), jsx(AnimatedPopover, Object.assign({
       ref: popoverRef,
       onRequestClose: () => {
         var _a;
@@ -2075,6 +2077,34 @@ const RemoveValueContainer = tw.div`
 tu-date__remove
   `;
 
+/**
+ * The Label component is used for labels for input fields.
+ * This component is **not used directly**, but is part of the FormGroup and Field components.
+ *
+ * @param {LabelProps} props - The props for the Label component
+ * @returns {JSX.Element} Label component
+ */
+
+const Label$5 = ({
+  id,
+  htmlFor,
+  children,
+  className,
+  dataTestId
+}) => {
+  return jsx(Root$2, Object.assign({
+    className: className,
+    id: id,
+    "data-testid": dataTestId,
+    htmlFor: htmlFor
+  }, {
+    children: children
+  }));
+};
+const Root$2 = tw.label`
+  tu-label
+`;
+
 /**
  * The PopoverListItem component.
  *
@@ -2190,143 +2220,6 @@ const StyledText$1 = tw(Text)`
   text-neutral-500
 `;
 
-/**
- * The DayPickerPopover component returns a button which when clicked shows the daypicker.
- *
- * @param {DayPickerPopoverProps} props - The props for the DayPickerPopover component
- * @returns {JSX.Element} DayPickerPopover component
- */
-
-const DayPickerPopover = ({
-  disabledDays,
-  className,
-  selectedDay,
-  onDaySelect,
-  intent = "secondary",
-  placement = "bottom",
-  size = "small",
-  buttonContent,
-  language
-}) => {
-  const target = useRef(null);
-  const popover = useRef(null);
-  const {
-    popoverRef,
-    targetRef,
-    onShow,
-    onHide,
-    popoverProps
-  } = usePopover({
-    targetRef: target,
-    popoverRef: popover,
-    placement: placement
-  });
-  return jsxs(Fragment$1, {
-    children: [jsx(Button, Object.assign({
-      intent: intent,
-      size: size,
-      className: className,
-      prefix: jsx(Icon$1, {
-        name: "CalendarIcon",
-        size: "small"
-      }),
-      ref: targetRef,
-      onClick: onShow
-    }, {
-      children: buttonContent
-    })), 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, {
-        children: jsx(DayPicker, {
-          disabledDays: disabledDays,
-          onDaySelect: onDaySelect,
-          selectedDays: selectedDay,
-          language: language
-        })
-      })
-    }))]
-  });
-};
-
-/**
- * The DayRangePicker component should be used when the user needs to select a range of dates.
- *
- * @param {DayRangePickerProps} props - The props for the DayRangePicker component
- * @returns {JSX.Element} DayRangePicker component
- */
-
-const DayRangePicker = ({
-  onRangeSelect,
-  selectedDays,
-  disabledDays,
-  dataTestId,
-  language
-}) => {
-  const locale = useLocale(language);
-  const onSelect = useCallback(range => {
-    if (onRangeSelect && range === undefined) {
-      onRangeSelect(undefined);
-    }
-
-    if (onRangeSelect && range) {
-      const from = range.from;
-      const to = range.to ? range.to : range.from;
-      onRangeSelect({
-        from,
-        to
-      });
-    }
-  }, [onRangeSelect]);
-  return jsx("div", Object.assign({
-    "data-testid": dataTestId
-  }, {
-    children: jsx(DayPicker$1, {
-      mode: "range",
-      onSelect: onSelect,
-      selected: selectedDays,
-      defaultMonth: selectedDays && selectedDays.from,
-      locale: locale,
-      disabled: disabledDays,
-      className: "custom-day-picker range-picker"
-    })
-  }));
-};
-
-/**
- * The Label component is used for labels for input fields.
- * This component is **not used directly**, but is part of the FormGroup and Field components.
- *
- * @param {LabelProps} props - The props for the Label component
- * @returns {JSX.Element} Label component
- */
-
-const Label$5 = ({
-  id,
-  htmlFor,
-  children,
-  className,
-  dataTestId
-}) => {
-  return jsx(Root$2, Object.assign({
-    className: className,
-    id: id,
-    "data-testid": dataTestId,
-    htmlFor: htmlFor
-  }, {
-    children: children
-  }));
-};
-const Root$2 = tw.label`
-  tu-label
-`;
-
 /**
  * The Tooltip component.
  *
@@ -2502,6 +2395,157 @@ const HelpAddon = tw.span`
   tu-form-group__help-addon 
 `;
 
+/**
+ * The date field component is used for entering date values.
+ *
+ * _**Do use**_ the DateField for date input.
+ *
+ * _**Do not use**_ this fields for non-serialized dates. Use TextField instead.
+ */
+
+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,
+    dataTestId: `${dataTestId}-FormGroup`
+  }, {
+    children: jsx(DateInput, Object.assign({
+      ref: ref,
+      defaultValue: defaultValue,
+      isInvalid: renderAsInvalid
+    }, rest, {
+      className: className,
+      dataTestId: dataTestId
+    }))
+  }));
+});
+
+/**
+ * The DayPickerPopover component returns a button which when clicked shows the daypicker.
+ *
+ * @param {DayPickerPopoverProps} props - The props for the DayPickerPopover component
+ * @returns {JSX.Element} DayPickerPopover component
+ */
+
+const DayPickerPopover = ({
+  disabledDays,
+  className,
+  selectedDay,
+  onDaySelect,
+  intent = "secondary",
+  placement = "bottom",
+  size = "small",
+  buttonContent,
+  language
+}) => {
+  const target = useRef(null);
+  const popover = useRef(null);
+  const {
+    popoverRef,
+    targetRef,
+    onShow,
+    onHide,
+    popoverProps
+  } = usePopover({
+    targetRef: target,
+    popoverRef: popover,
+    placement: placement
+  });
+  return jsxs(Fragment$1, {
+    children: [jsx(Button, Object.assign({
+      intent: intent,
+      size: size,
+      className: className,
+      prefix: jsx(Icon$1, {
+        name: "CalendarIcon",
+        size: "small"
+      }),
+      ref: targetRef,
+      onClick: onShow
+    }, {
+      children: buttonContent
+    })), 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, {
+        children: jsx(DayPicker, {
+          disabledDays: disabledDays,
+          onDaySelect: onDaySelect,
+          selectedDays: selectedDay,
+          language: language
+        })
+      })
+    }))]
+  });
+};
+
+/**
+ * The DayRangePicker component should be used when the user needs to select a range of dates.
+ *
+ * @param {DayRangePickerProps} props - The props for the DayRangePicker component
+ * @returns {JSX.Element} DayRangePicker component
+ */
+
+const DayRangePicker = ({
+  onRangeSelect,
+  selectedDays,
+  disabledDays,
+  dataTestId,
+  language
+}) => {
+  const locale = useLocale(language);
+  const onSelect = useCallback(range => {
+    if (onRangeSelect && range === undefined) {
+      onRangeSelect(undefined);
+    }
+
+    if (onRangeSelect && range) {
+      const from = range.from;
+      const to = range.to ? range.to : range.from;
+      onRangeSelect({
+        from,
+        to
+      });
+    }
+  }, [onRangeSelect]);
+  return jsx("div", Object.assign({
+    "data-testid": dataTestId
+  }, {
+    children: jsx(DayPicker$1, {
+      mode: "range",
+      onSelect: onSelect,
+      selected: selectedDays,
+      defaultMonth: selectedDays && selectedDays.from,
+      locale: locale,
+      disabled: disabledDays,
+      className: "custom-day-picker range-picker"
+    })
+  }));
+};
+
 /**
  * Indicators are non-interactive elements that communicate essential aspects of the state of an asset.
  *
@@ -4518,4 +4562,4 @@ const Layout = tw.div`
   tu-layout-TwoColumnLayout
 `;
 
-export { Alert, AnimatedPopover, Badge, BaseInput, Button, Card, CardBody, CardFooter, CardHeader, Chart, Checkbox, Collapse, CopyableText, CreatableSelect, DateField, DayPicker, DayPickerPopover, DayRangePicker, DensityContainer, FilterListMapLayout, FormGroup, FullWidthRepeatingLayout, GridArea, Heading, Icon$1 as Icon, IconButton, Indicator$1 as Indicator, IntrinsicallyResponsiveGrid, Label$5 as Label, LegendItem, MenuButton, MenuItem, MenuList, MinTopFullContentLayout, Modal, ModalBackdrop, NumberField, NumberInput, PageHeading, PopoverLifecycle, PopoverList, PopoverListItem, PopoverTitle, Prompt, ROLE_CARD, RadioGroup, RadioItem, Select, SkeletonLines, Spacer, Spinner, StarButton, Tag, Text, TextArea, TextAreaField, TextField, TextInput, Timeline, TimelineElement, Tip, TitleNavContentLayout, Toggle, Tooltip, TwoColumnLayout, activityColors, colors, criticalityColors, docs, generalColors, intentColors, useContainerProps, useCustomComponents, useCustomStyles, useDebounce, useLocalStorage, useModal, usePopover, usePrompt, useTimeout };
+export { Alert, AnimatedPopover, Badge, BaseInput, Button, Card, CardBody, CardFooter, CardHeader, Chart, Checkbox, Collapse, CopyableText, CreatableSelect, DateField, DateInput, DayPicker, DayPickerPopover, DayRangePicker, DensityContainer, FilterListMapLayout, FormGroup, FullWidthRepeatingLayout, GridArea, Heading, Icon$1 as Icon, IconButton, Indicator$1 as Indicator, IntrinsicallyResponsiveGrid, Label$5 as Label, LegendItem, MenuButton, MenuItem, MenuList, MinTopFullContentLayout, Modal, ModalBackdrop, NumberField, NumberInput, PageHeading, PopoverLifecycle, PopoverList, PopoverListItem, PopoverTitle, Prompt, ROLE_CARD, RadioGroup, RadioItem, Select, SkeletonLines, Spacer, Spinner, StarButton, Tag, Text, TextArea, TextAreaField, TextField, TextInput, Timeline, TimelineElement, Tip, TitleNavContentLayout, Toggle, Tooltip, TwoColumnLayout, activityColors, colors, criticalityColors, docs, generalColors, intentColors, useContainerProps, useCustomComponents, useCustomStyles, useDebounce, useLocalStorage, useModal, usePopover, usePrompt, useTimeout };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.0.100",
+  "version": "0.0.101",
   "repository": "https://github.com/Trackunit/manager",
   "license": "UNLICENSED",
   "dependencies": {

package/components/DateField/index.d.ts

@@ -1 +0,0 @@
-export * from "./DateField";