@trackunit/react-components 0.0.67 → 0.0.70

package/components/Checkbox/Checkbox.d.ts

@@ -28,8 +28,6 @@ export interface CheckboxProps extends CommonProps, React.InputHTMLAttributes<HT
     indeterminate?: boolean;
 }
 /**
- * Checkbox are interactive elements that represent the boolean logical value (true or false) that can be used for boolean inputs, selectors etc.
- *
  * Checkboxes are used when there are multiple items to select in a list. Users can select zero, one, or any number of items.
  *
  * Checkboxes are used for multiple choices, not for mutually exclusive choices. Each checkbox works independently from other checkboxes in the list, therefore checking an additional box does not affect any other selections.

package/components/DateField/DateField.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { Matcher } from "react-day-picker";
 import { BaseInputProps } from "../BaseInput";
-export interface DateFieldProps extends Pick<BaseInputProps, "placeholder" | "id" | "dataTestId" | "onChange"> {
+export interface DateFieldProps extends Pick<BaseInputProps, "placeholder" | "id" | "dataTestId" | "onChange" | "readOnly"> {
     /**
      * A text label to be displayed next to the indicator
      */

package/index.js

@@ -875,7 +875,7 @@ const BaseInput = React.forwardRef((_a, ref) => {
   return jsxs(InputContainer, Object.assign({
     "$fieldSize": fieldSize,
     "$invalid": isInvalid,
-    "$disabled": rest.disabled,
+    "$disabled": rest.disabled || rest.readOnly,
     className: className,
     "data-testid": `${dataTestId}-container`
   }, {
@@ -1432,8 +1432,6 @@ const IndeterminateIcon = ({
 }));
 
 /**
- * Checkbox are interactive elements that represent the boolean logical value (true or false) that can be used for boolean inputs, selectors etc.
- *
  * Checkboxes are used when there are multiple items to select in a list. Users can select zero, one, or any number of items.
  *
  * Checkboxes are used for multiple choices, not for mutually exclusive choices. Each checkbox works independently from other checkboxes in the list, therefore checking an additional box does not affect any other selections.
@@ -1466,6 +1464,7 @@ const Checkbox = React.forwardRef((_a, ref) => {
 
   const icon = indeterminate ? jsx(StyledIndeterminateIcon, {}) : checked && jsx(StyledCheckIcon, {});
   const internalRef = React.useRef(null);
+  const isReadonly = disabled || readOnly;
 
   const onKeyPress = e => {
     var _a;
@@ -1494,20 +1493,20 @@ const Checkbox = React.forwardRef((_a, ref) => {
     }, rest, {
       ref: ref
     })), jsx(CheckboxWrapper, Object.assign({
-      "$disabled": disabled,
+      "$disabled": isReadonly,
       "$checked": checked,
       "$indeterminate": indeterminate,
-      "$isInvalid": disabled ? false : isInvalid,
+      "$isInvalid": isReadonly ? false : isInvalid,
       className: className,
-      tabIndex: disabled ? -1 : tabIndex,
+      tabIndex: isReadonly ? -1 : tabIndex,
       onKeyPress: onKeyPress
     }, {
       children: icon
     })), label && jsx(Label$4, Object.assign({
       ref: internalRef,
       htmlFor: uuid,
-      "$disabled": disabled,
-      "$isInvalid": disabled ? false : isInvalid,
+      "$disabled": isReadonly,
+      "$isInvalid": isReadonly ? false : isInvalid,
       "data-testid": dataTestId ? `${dataTestId}Label` : ""
     }, {
       children: label
@@ -1988,6 +1987,7 @@ const DateField = forwardRef(({
   defaultValue,
   onChange,
   disabled = false,
+  readOnly = false,
   id,
   dataTestId,
   placeholder,
@@ -2019,6 +2019,7 @@ const DateField = forwardRef(({
       value: (selectedDay === null || selectedDay === void 0 ? void 0 : selectedDay.toLocaleDateString()) || "",
       onChange: () => {},
       disabled: disabled,
+      readOnly: readOnly,
       dataTestId: dataTestId,
       id: id,
       ref: ref,

package/package.json

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