@trackunit/custom-field-components 1.0.22 → 1.0.27

package/index.cjs.js

@@ -5,31 +5,12 @@ var i18nLibraryTranslation = require('@trackunit/i18n-library-translation');
 var irisAppRuntimeCore = require('@trackunit/iris-app-runtime-core');
 var reactFormComponents = require('@trackunit/react-form-components');
 var sharedUtils = require('@trackunit/shared-utils');
-var React = require('react');
+var react = require('react');
 var reactHookForm = require('react-hook-form');
 var reactComponents = require('@trackunit/react-components');
 var reactCoreHooks = require('@trackunit/react-core-hooks');
 var reactModal = require('@trackunit/react-modal');
 
-function _interopNamespaceDefault(e) {
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-
-var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
-
 var defaultTranslations = {
 	"customfield.stringlistfield.add": "Add",
 	"customfield.stringlistfield.addField.Heading": "Add {{label}}",
@@ -157,11 +138,11 @@ const BooleanCustomField = ({ defaultValue, dataTestId = "booleanField", onChang
     const initialValue = value !== undefined ? value : defaultValue ? defaultValue : false;
     const renderAsInvalid = isInvalid || Boolean(errorMessage);
     const htmlForId = id ? id : "boolean-custom-field-" + sharedUtils.uuidv4();
-    const [internalValue, setInternalValue] = React__namespace.useState(initialValue);
-    React__namespace.useEffect(() => {
+    const [internalValue, setInternalValue] = react.useState(initialValue);
+    react.useEffect(() => {
         setInternalValue((value === undefined ? defaultValue : value) || false);
     }, [value, setInternalValue, defaultValue]);
-    const onChangeHandler = React__namespace.useCallback((event) => {
+    const onChangeHandler = react.useCallback((event) => {
         onChange && onChange(event);
         const isChecked = event.target.checked || false;
         if (setValue) {
@@ -169,7 +150,7 @@ const BooleanCustomField = ({ defaultValue, dataTestId = "booleanField", onChang
         }
         setInternalValue(isChecked);
     }, [setInternalValue, onChange, id, setValue]);
-    React__namespace.useEffect(() => {
+    react.useEffect(() => {
         register && register(id, { ...validationRules, value: internalValue.toString() });
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []); // register only once
@@ -184,18 +165,18 @@ const BooleanCustomField = ({ defaultValue, dataTestId = "booleanField", onChang
  */
 const DateCustomField = (props) => {
     const { setValue, defaultValue, register, id, validationRules, ...rest } = props;
-    const onChangeHandler = React.useCallback((e) => {
+    const onChangeHandler = react.useCallback((e) => {
         setValue &&
             setValue(id, e.target.valueAsDate?.toISOString(), {
                 shouldDirty: true,
                 shouldValidate: true,
             });
     }, [setValue, id]);
-    React.useEffect(() => {
+    react.useEffect(() => {
         const value = defaultValue && new Date(defaultValue);
         register && register(id, { ...validationRules, value });
     }, [register, validationRules, defaultValue, id]);
-    return (React.createElement(reactFormComponents.DateField, { ...rest, defaultValue: defaultValue, helpAddon: props.helpAddon || null, helpText: props.errorMessage || props.helpText, id: id, key: id, label: props.title, onChange: onChangeHandler }));
+    return (react.createElement(reactFormComponents.DateField, { ...rest, defaultValue: defaultValue, helpAddon: props.helpAddon || null, helpText: props.errorMessage || props.helpText, id: id, key: id, label: props.title, onChange: onChangeHandler }));
 };
 
 const convertToValueFormat = (value) => {
@@ -210,8 +191,8 @@ const convertToValueFormat = (value) => {
 const DropdownCustomField = ({ defaultValue, dataTestId, onChange, onBlur, id, disabled = false, allValues, multiSelect = false, register, validationRules, setValue, label, tip, errorMessage, helpText, isInvalid, helpAddon, }) => {
     const renderAsInvalid = isInvalid || Boolean(errorMessage);
     const htmlForId = id ? id : "dropdown-custom-field-" + sharedUtils.uuidv4();
-    const [selectedValue, setSelectedValue] = React__namespace.useState(defaultValue ? defaultValue.map(convertToValueFormat) : []);
-    const onChangeHandler = React__namespace.useCallback((selected) => {
+    const [selectedValue, setSelectedValue] = react.useState(defaultValue ? defaultValue.map(convertToValueFormat) : []);
+    const onChangeHandler = react.useCallback((selected) => {
         if (selected) {
             const values = Array.isArray(selected) ? selected : [selected];
             if (selectedValue.length === 1 && values.length === 1 && values[0]?.value === selectedValue[0]?.value) {
@@ -228,10 +209,10 @@ const DropdownCustomField = ({ defaultValue, dataTestId, onChange, onBlur, id, d
             setValue && setValue(id, []);
         }
     }, [id, selectedValue, setValue]);
-    const options = React__namespace.useMemo(() => {
+    const options = react.useMemo(() => {
         return allValues ? allValues.map(convertToValueFormat) : [];
     }, [allValues]);
-    React__namespace.useEffect(() => {
+    react.useEffect(() => {
         register && register(id, { ...validationRules, value: selectedValue });
     }, [register, validationRules, selectedValue, id]);
     return (jsxRuntime.jsx(reactFormComponents.FormGroup, { dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon || null, helpText: errorMessage || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, tip: tip, children: jsxRuntime.jsx(reactFormComponents.Select, { "aria-labelledby": htmlForId + "-label", dataTestId: dataTestId, disabled: disabled, hasError: renderAsInvalid, inputId: htmlForId, isClearable: true, isMulti: multiSelect, onChange: onChangeHandler, options: options, value: selectedValue }) }));
@@ -242,7 +223,7 @@ const DropdownCustomField = ({ defaultValue, dataTestId, onChange, onBlur, id, d
  */
 const AddStringListField = ({ id, label, isEditing, setIsEditing, onAdd }) => {
     const { Modal } = reactModal.useModal();
-    const [inputValue, setInputValue] = React.useState("");
+    const [inputValue, setInputValue] = react.useState("");
     const { t } = useTranslation();
     const handleAdd = () => {
         if (inputValue.trim()) {
@@ -262,7 +243,7 @@ const AddStringListField = ({ id, label, isEditing, setIsEditing, onAdd }) => {
  * A custom field that displays a list of strings.
  */
 const StringListField = ({ defaultValue = [], label, description, disabled, validationRules, id, control, register, dataTestId, ...props }) => {
-    const [isEditing, setIsEditing] = React.useState(false);
+    const [isEditing, setIsEditing] = react.useState(false);
     const { confirm } = reactCoreHooks.useConfirmationDialog();
     const { t } = useTranslation();
     return (jsxRuntime.jsx(reactHookForm.Controller, { control: control, defaultValue: defaultValue, name: id, render: ({ field }) => {
@@ -489,7 +470,7 @@ const getEmailValidationRules = (definition) => {
  */
 const useUnitTranslation = () => {
     const { t } = useTranslation();
-    const unitTranslation = React.useCallback((unit) => {
+    const unitTranslation = react.useCallback((unit) => {
         if (!unit) {
             return null;
         }
@@ -510,7 +491,7 @@ const useUnitTranslation = () => {
 const useCustomFieldResolver = ({ field, definition, register, setValue, formState, formValue, unitPreference = "SI", language, fieldId, isEditable = true, control, }) => {
     const validation = { register, setValue, formState };
     const { unitTranslation } = useUnitTranslation();
-    const [numberValue, setNumberValue] = React.useState(() => {
+    const [numberValue, setNumberValue] = react.useState(() => {
         if (field?.definition && field.__typename === "NumberFieldValueAndDefinition") {
             const fieldValue = field.numberValue;
             const unit = unitPreference === "US_CUSTOMARY" && field.definition.unitUs

package/index.esm.js

@@ -3,8 +3,7 @@ import { registerTranslations, useNamespaceTranslation } from '@trackunit/i18n-l
 import { getCustomFieldValueForDisplayInUI } from '@trackunit/iris-app-runtime-core';
 import { FormGroup, Checkbox, DateField, Select, TextInput, useGetPhoneValidationRules, NumberField, TextField, PhoneField, ActionButton } from '@trackunit/react-form-components';
 import { uuidv4, exhaustiveCheck } from '@trackunit/shared-utils';
-import * as React from 'react';
-import { useCallback, useEffect, createElement, useState } from 'react';
+import { useState, useEffect, useCallback, createElement, useMemo } from 'react';
 import { Controller, useWatch } from 'react-hook-form';
 import { CardHeader, CardBody, CardFooter, Button, Card, Tooltip, Text, IconButton, Icon } from '@trackunit/react-components';
 import { useConfirmationDialog } from '@trackunit/react-core-hooks';
@@ -137,11 +136,11 @@ const BooleanCustomField = ({ defaultValue, dataTestId = "booleanField", onChang
     const initialValue = value !== undefined ? value : defaultValue ? defaultValue : false;
     const renderAsInvalid = isInvalid || Boolean(errorMessage);
     const htmlForId = id ? id : "boolean-custom-field-" + uuidv4();
-    const [internalValue, setInternalValue] = React.useState(initialValue);
-    React.useEffect(() => {
+    const [internalValue, setInternalValue] = useState(initialValue);
+    useEffect(() => {
         setInternalValue((value === undefined ? defaultValue : value) || false);
     }, [value, setInternalValue, defaultValue]);
-    const onChangeHandler = React.useCallback((event) => {
+    const onChangeHandler = useCallback((event) => {
         onChange && onChange(event);
         const isChecked = event.target.checked || false;
         if (setValue) {
@@ -149,7 +148,7 @@ const BooleanCustomField = ({ defaultValue, dataTestId = "booleanField", onChang
         }
         setInternalValue(isChecked);
     }, [setInternalValue, onChange, id, setValue]);
-    React.useEffect(() => {
+    useEffect(() => {
         register && register(id, { ...validationRules, value: internalValue.toString() });
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []); // register only once
@@ -190,8 +189,8 @@ const convertToValueFormat = (value) => {
 const DropdownCustomField = ({ defaultValue, dataTestId, onChange, onBlur, id, disabled = false, allValues, multiSelect = false, register, validationRules, setValue, label, tip, errorMessage, helpText, isInvalid, helpAddon, }) => {
     const renderAsInvalid = isInvalid || Boolean(errorMessage);
     const htmlForId = id ? id : "dropdown-custom-field-" + uuidv4();
-    const [selectedValue, setSelectedValue] = React.useState(defaultValue ? defaultValue.map(convertToValueFormat) : []);
-    const onChangeHandler = React.useCallback((selected) => {
+    const [selectedValue, setSelectedValue] = useState(defaultValue ? defaultValue.map(convertToValueFormat) : []);
+    const onChangeHandler = useCallback((selected) => {
         if (selected) {
             const values = Array.isArray(selected) ? selected : [selected];
             if (selectedValue.length === 1 && values.length === 1 && values[0]?.value === selectedValue[0]?.value) {
@@ -208,10 +207,10 @@ const DropdownCustomField = ({ defaultValue, dataTestId, onChange, onBlur, id, d
             setValue && setValue(id, []);
         }
     }, [id, selectedValue, setValue]);
-    const options = React.useMemo(() => {
+    const options = useMemo(() => {
         return allValues ? allValues.map(convertToValueFormat) : [];
     }, [allValues]);
-    React.useEffect(() => {
+    useEffect(() => {
         register && register(id, { ...validationRules, value: selectedValue });
     }, [register, validationRules, selectedValue, id]);
     return (jsx(FormGroup, { dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon || null, helpText: errorMessage || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, tip: tip, children: jsx(Select, { "aria-labelledby": htmlForId + "-label", dataTestId: dataTestId, disabled: disabled, hasError: renderAsInvalid, inputId: htmlForId, isClearable: true, isMulti: multiSelect, onChange: onChangeHandler, options: options, value: selectedValue }) }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/custom-field-components",
-  "version": "1.0.22",
+  "version": "1.0.27",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -12,15 +12,15 @@
     "react-select": "^5.8.0",
     "@testing-library/react": "15.0.6",
     "jest-fetch-mock": "^3.0.3",
-    "@trackunit/react-form-components": "^1.0.20",
-    "@trackunit/shared-utils": "^1.0.3",
-    "@trackunit/custom-field-api": "^1.0.10",
-    "@trackunit/iris-app-runtime-core": "^1.0.5",
-    "@trackunit/react-components": "^1.1.2",
-    "@trackunit/react-modal": "^1.0.20",
-    "@trackunit/react-core-hooks": "^1.0.5",
-    "@trackunit/i18n-library-translation": "^1.0.8",
-    "@trackunit/iris-app-runtime-core-api": "^1.0.5"
+    "@trackunit/react-form-components": "1.0.25",
+    "@trackunit/shared-utils": "1.2.1",
+    "@trackunit/custom-field-api": "1.0.15",
+    "@trackunit/iris-app-runtime-core": "1.0.9",
+    "@trackunit/react-components": "1.1.7",
+    "@trackunit/react-modal": "1.0.25",
+    "@trackunit/react-core-hooks": "1.0.9",
+    "@trackunit/i18n-library-translation": "1.0.13",
+    "@trackunit/iris-app-runtime-core-api": "1.0.9"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js",

package/src/BooleanCustomField.d.ts

@@ -1,5 +1,5 @@
 import { CheckboxProps } from "@trackunit/react-form-components";
-import * as React from "react";
+import { SyntheticEvent } from "react";
 import { FieldValues, UseFormRegister, UseFormSetValue } from "react-hook-form";
 import { ValidationRules } from "./getValidationRules";
 import { FormGroupExposedProps } from "./types";
@@ -39,7 +39,7 @@ export interface BooleanCustomFieldProps extends Omit<CheckboxProps, "value" | "
      *
      * @memberof BooleanCustomFieldProps
      */
-    onChange?: (event: React.SyntheticEvent<HTMLInputElement>) => void;
+    onChange?: (event: SyntheticEvent<HTMLInputElement>) => void;
     /**
      * A flag that can be used to disable the input, default value is false
      *

package/src/DropdownCustomField.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import { ChangeEvent, FocusEvent } from "react";
 import { FieldValues, RegisterOptions, UseFormRegister, UseFormSetValue } from "react-hook-form";
 import { FormGroupExposedProps } from "./types";
 export interface DropdownCustomFieldProps extends FormGroupExposedProps {
@@ -82,8 +82,8 @@ export interface DropdownCustomFieldProps extends FormGroupExposedProps {
      */
     isInvalid?: boolean;
 }
-type OnChange = (event?: React.ChangeEvent<HTMLInputElement>) => void;
-type OnBlur = (event: React.FocusEvent<HTMLDivElement>) => void;
+type OnChange = (event?: ChangeEvent<HTMLInputElement>) => void;
+type OnBlur = (event: FocusEvent<HTMLDivElement>) => void;
 /**
  * A custom field that can be used to render a dropdown
  *