@trackunit/react-components 0.0.131 → 0.0.132

package/components/BaseInput/BaseInput.d.ts

@@ -45,6 +45,10 @@ export interface BaseInputProps extends FilteredInputProps, CommonProps {
      * The Placeholder text for the input.
      */
     placeholder?: string;
+    /**
+     * A flag to disable interaction with input for example if you want to use input as a child of higher component
+     */
+    nonInteractive?: boolean;
 }
 /**
  * A base input component that can be used for text inputs, password inputs, etc.

package/components/FormGroup/FormGroup.d.ts

@@ -22,6 +22,10 @@ export interface FormGroupProps extends CommonProps {
      * If true the input is rendered in its invalid state.
      */
     isInvalid?: boolean;
+    /**
+     * If true interactions are disabled
+     */
+    disabled?: boolean;
     children?: React.ReactNode;
 }
 /**
@@ -31,4 +35,4 @@ export interface FormGroupProps extends CommonProps {
  * @param {FormGroupProps} props - The props for the FormGroup component
  * @returns {JSX.Element} FormGroup component
  */
-export declare const FormGroup: ({ isInvalid, helpText, helpAddon, tip, className, dataTestId, label, children, }: FormGroupProps) => JSX.Element;
+export declare const FormGroup: ({ isInvalid, helpText, helpAddon, tip, className, dataTestId, label, children, disabled, }: FormGroupProps) => JSX.Element;

package/index.js

@@ -968,9 +968,10 @@ const BaseInput = React.forwardRef((_a, ref) => {
     addonBefore,
     addonAfter,
     actions,
-    fieldSize = "medium"
+    fieldSize = "medium",
+    nonInteractive = false
   } = _a,
-      rest = __rest(_a, ["className", "isInvalid", "dataTestId", "prefix", "suffix", "addonBefore", "addonAfter", "actions", "fieldSize"]);
+      rest = __rest(_a, ["className", "isInvalid", "dataTestId", "prefix", "suffix", "addonBefore", "addonAfter", "actions", "fieldSize", "nonInteractive"]);
 
   return jsxs(InputContainer$1, Object.assign({
     "$fieldSize": fieldSize,
@@ -991,7 +992,9 @@ const BaseInput = React.forwardRef((_a, ref) => {
       ref: ref,
       "data-testid": dataTestId,
       className: tws`tu-input__field`
-    }, rest)), suffix !== null && addonBefore !== suffix ? jsx(InputSuffix, Object.assign({
+    }, rest, {
+      readOnly: rest.readOnly || nonInteractive
+    })), suffix !== null && addonBefore !== suffix ? jsx(InputSuffix, Object.assign({
       "data-testid": `${dataTestId}-suffix`
     }, {
       children: suffix
@@ -2128,6 +2131,11 @@ const DateInput = forwardRef((_a, 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",
@@ -2139,7 +2147,10 @@ const DateInput = forwardRef((_a, ref) => {
       actions: selectedDay && jsx(RemoveValueContainer, {
         children: jsx(Button, Object.assign({
           intent: "tertiary",
-          onClick: () => setSelectedDay(undefined)
+          onClick: e => {
+            e.preventDefault();
+            setSelectedDay(undefined);
+          }
         }, {
           children: jsx(Icon$1, {
             name: "XIcon",
@@ -2157,14 +2168,16 @@ const DateInput = forwardRef((_a, ref) => {
         (_a = targetRef === null || targetRef === void 0 ? void 0 : targetRef.current) === null || _a === void 0 ? void 0 : _a.blur();
       }
     }, popoverProps, {
-      children: jsx(PopoverList, {
+      children: jsx(PopoverList, Object.assign({
+        dataTestId: "datePickerPopover"
+      }, {
         children: jsx(DayPicker, {
           onDaySelect: onChangeHandler,
           disabledDays: disabledDays,
           selectedDays: selectedDay,
           language: navigator.language
         })
-      })
+      }))
     }))]
   });
 });
@@ -2400,11 +2413,13 @@ const FormGroup = ({
   className,
   dataTestId,
   label,
-  children
+  children,
+  disabled = false
 }) => {
   return jsxs(FormGroupRoot, Object.assign({
     className: className,
-    "data-testid": dataTestId
+    "data-testid": dataTestId,
+    "$disabled": disabled
   }, {
     children: [jsxs(ContainerBefore, {
       children: [jsx(Label$3, Object.assign({
@@ -2433,6 +2448,11 @@ const FormGroup = ({
 };
 const FormGroupRoot = tw.label`
   tu-form-group
+  ${({
+  $disabled
+}) => {
+  return $disabled ? "pointer-events-none	" : null;
+}}
 `;
 const ContainerBefore = tw.div`
   tu-form-group__container-before
@@ -2476,6 +2496,7 @@ const DateField = forwardRef((_a, ref) => {
     isInvalid: renderAsInvalid,
     helpText: errorMessage || helpText,
     helpAddon: helpAddon,
+    disabled: rest.disabled,
     dataTestId: `${dataTestId}-FormGroup`
   }, {
     children: jsx(DateInput, Object.assign({
@@ -4655,7 +4676,8 @@ const TextField = React.forwardRef((_a, ref) => {
       length: valueLength,
       maxLength: maxLength
     }),
-    dataTestId: `${dataTestId}-FormGroup`
+    dataTestId: `${dataTestId}-FormGroup`,
+    disabled: rest.readOnly
   }, {
     children: jsx(TextInput, Object.assign({
       ref: ref,

package/package.json

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