@trackunit/react-form-components 0.0.297 → 0.0.301

package/index.cjs.js

@@ -12,6 +12,7 @@ var ReactSelect = require('react-select');
 var ReactAsyncCreatableSelect = require('react-select/async-creatable');
 var ReactCreatableSelect = require('react-select/creatable');
 var ReactAsyncSelect = require('react-select/async');
+var reactUse = require('react-use');
 var dateFns = require('date-fns');
 var parsePhoneNumberFromString = require('libphonenumber-js');
 
@@ -930,7 +931,9 @@ const cvaActionContainer = cssClassVarianceUtilities.cvaMerge(["flex", "items-ce
  * @param {ActionButtonProps} props - The props for the ActionButton component
  * @returns {JSX.Element} ActionButton component
  */
-const ActionButton = ({ type, value, dataTestId, iconSize, disabled, className, }) => {
+const ActionButton = ({ type, value, dataTestId, iconSize, disabled, key, className }) => {
+    const [, copyToClipboard] = reactUse.useCopyToClipboard();
+    const elementKey = React.useMemo(() => key !== null && key !== void 0 ? key : `ActionButton-${uuid.v4()}`, [key]);
     const getIconName = () => {
         switch (type) {
             case "PHONE_NUMBER":
@@ -938,11 +941,14 @@ const ActionButton = ({ type, value, dataTestId, iconSize, disabled, className,
             case "WEB_ADDRESS":
                 return "ArrowTopRightOnSquare";
             case "EMAIL":
-            default:
                 return "Envelope";
+            case "COPY":
+            default:
+                return "ClipboardDocument";
         }
     };
     const ButtonAction = () => {
+        var _a, _b;
         switch (type) {
             case "EMAIL":
                 return window.open(`mailto:${value}`);
@@ -952,11 +958,17 @@ const ActionButton = ({ type, value, dataTestId, iconSize, disabled, className,
                 }
                 return null;
             case "PHONE_NUMBER":
-            default:
                 return window.open(`tel:${value}`);
+            case "COPY":
+                return copyToClipboard((_b = (_a = value === null || value === void 0 ? void 0 : value.current) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : "");
+            default:
+                return null;
         }
     };
-    return (jsxRuntime.jsx("div", { className: cvaActionContainer({ className }), children: jsxRuntime.jsx(reactComponents.IconButton, { disabled: disabled, dataTestId: dataTestId || "testIconButtonId", size: "small", variant: "secondary", icon: jsxRuntime.jsx(reactComponents.Icon, { size: "small", name: getIconName() }), onClick: ButtonAction, className: cvaActionButton({ size: iconSize }) }) }));
+    if (ButtonAction === null) {
+        return null;
+    }
+    return (jsxRuntime.jsx("div", { className: cvaActionContainer({ className }), children: jsxRuntime.jsx(reactComponents.IconButton, { disabled: disabled, dataTestId: dataTestId || "testIconButtonId", size: "small", variant: "secondary", icon: jsxRuntime.jsx(reactComponents.Icon, { size: "small", name: getIconName() }), onClick: ButtonAction, className: cvaActionButton({ size: iconSize }) }) }, elementKey));
 };
 
 const cvaInputBase = cssClassVarianceUtilities.cvaMerge([
@@ -1057,9 +1069,11 @@ const cvaInputSuffix = cssClassVarianceUtilities.cvaMerge(["flex", "justify-cent
  * This is a base used by our other input components such as TextInput, NumberInput, PasswordInput, etc.
  */
 const BaseInput = React__namespace.forwardRef((_a, ref) => {
-    var { className, isInvalid, dataTestId, prefix, suffix, addonBefore, addonAfter, actions, fieldSize = "medium", nonInteractive = false, type, inputClassName, addonBeforeClassName } = _a, rest = __rest(_a, ["className", "isInvalid", "dataTestId", "prefix", "suffix", "addonBefore", "addonAfter", "actions", "fieldSize", "nonInteractive", "type", "inputClassName", "addonBeforeClassName"]);
+    var { className, isInvalid, dataTestId, prefix, suffix, addonBefore, addonAfter, actions, fieldSize = "medium", nonInteractive = false, showDefaultActions = false, type, inputClassName, addonBeforeClassName } = _a, rest = __rest(_a, ["className", "isInvalid", "dataTestId", "prefix", "suffix", "addonBefore", "addonAfter", "actions", "fieldSize", "nonInteractive", "showDefaultActions", "type", "inputClassName", "addonBeforeClassName"]);
     const isReadOnlyWithPlaceholder = React.useMemo(() => !!rest.readOnly && !!rest.placeholder && !rest.value, [rest.readOnly, rest.placeholder, rest.value]);
     const renderAsDisabled = rest.disabled || rest.readOnly;
+    const innerRef = React__namespace.useRef(null);
+    React__namespace.useImperativeHandle(ref, () => innerRef.current, []);
     return (jsxRuntime.jsxs("div", { className: cvaInput({
             disabled: renderAsDisabled,
             invalid: isInvalid,
@@ -1067,9 +1081,9 @@ const BaseInput = React__namespace.forwardRef((_a, ref) => {
             className,
         }), "data-testid": dataTestId && `${dataTestId}-container`, children: [addonBefore && addonBefore !== undefined ? (jsxRuntime.jsx("div", { className: cvaInputAddonBefore({ className: addonBeforeClassName }), "data-testid": dataTestId && `${dataTestId}-addonBefore`, children: addonBefore })) : null, prefix && addonBefore !== prefix ? (jsxRuntime.jsx("div", { className: cvaInputPrefix({
                     disabled: renderAsDisabled,
-                }), "data-testid": dataTestId && `${dataTestId}-prefix`, children: prefix })) : null, jsxRuntime.jsx("input", Object.assign({ ref: ref, "data-testid": dataTestId, className: cvaInputField({ size: fieldSize, disabled: renderAsDisabled, className: inputClassName }), type: isReadOnlyWithPlaceholder ? "text" : type }, rest, { readOnly: rest.readOnly || nonInteractive })), suffix && addonBefore !== suffix ? (jsxRuntime.jsx("div", { className: cvaInputSuffix({
+                }), "data-testid": dataTestId && `${dataTestId}-prefix`, children: prefix })) : null, jsxRuntime.jsx("input", Object.assign({ ref: innerRef, "data-testid": dataTestId, className: cvaInputField({ size: fieldSize, disabled: renderAsDisabled, className: inputClassName }), type: isReadOnlyWithPlaceholder ? "text" : type }, rest, { readOnly: rest.readOnly || nonInteractive })), suffix && addonBefore !== suffix ? (jsxRuntime.jsx("div", { className: cvaInputSuffix({
                     disabled: renderAsDisabled,
-                }), "data-testid": dataTestId && `${dataTestId}-suffix`, children: suffix })) : null, actions && addonBefore !== actions ? actions : null, addonAfter && addonAfter !== undefined && addonBefore !== addonAfter ? (jsxRuntime.jsx("div", { className: cvaInputAddonAfter(), "data-testid": dataTestId && `${dataTestId}-addonAfter`, children: addonAfter })) : null] }));
+                }), "data-testid": dataTestId && `${dataTestId}-suffix`, children: suffix })) : null, rest.readOnly === true && showDefaultActions ? (jsxRuntime.jsx(ActionButton, { type: "COPY", value: innerRef }, "default-copy-action")) : null, actions && addonBefore !== actions ? actions : null, addonAfter && addonAfter !== undefined && addonBefore !== addonAfter ? (jsxRuntime.jsx("div", { className: cvaInputAddonAfter(), "data-testid": dataTestId && `${dataTestId}-addonAfter`, children: addonAfter })) : null] }));
 });
 
 /**
@@ -2116,7 +2130,7 @@ const TimeRangeField = (_a) => {
     var { className, dataTestId, onChange, isInvalid, errorMessage, label, tip, disabled, children, helpText, id } = _a, rest = __rest(_a, ["className", "dataTestId", "onChange", "isInvalid", "errorMessage", "label", "tip", "disabled", "children", "helpText", "id"]);
     const renderAsInvalid = isInvalid === undefined ? Boolean(errorMessage) : isInvalid;
     const htmlFor = id ? id : "timeRangeField-" + uuid.v4();
-    return (jsxRuntime.jsx(FormGroup, { htmlFor: htmlFor, label: label, tip: tip, isInvalid: renderAsInvalid, helpText: (renderAsInvalid && errorMessage) || helpText, dataTestId: dataTestId && `${dataTestId}-FormGroup`, disabled: disabled, children: jsxRuntime.jsx(TimeRange, Object.assign({ className: className, onChange: onChange, disabled: disabled, dataTestId: dataTestId, isInvalid: renderAsInvalid, children: children }, rest)) }));
+    return (jsxRuntime.jsx(FormGroup, { htmlFor: htmlFor, label: label, tip: tip, isInvalid: renderAsInvalid, helpText: (renderAsInvalid && errorMessage) || helpText, dataTestId: dataTestId && `${dataTestId}-FormGroup`, disabled: disabled, children: jsxRuntime.jsx(TimeRange, Object.assign({ className: className, onChange: onChange, disabled: disabled, dataTestId: dataTestId, isInvalid: renderAsInvalid }, rest, { children: children })) }));
 };
 
 const cvaToggleWrapper = cssClassVarianceUtilities.cvaMerge(["flex", "gap-2", "items-center"]);

package/index.esm.js

@@ -10,6 +10,7 @@ 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 { useCopyToClipboard } from 'react-use';
 import { format } from 'date-fns';
 import parsePhoneNumberFromString, { isSupportedCountry, getCountries, getCountryCallingCode, isValidPhoneNumber, parsePhoneNumberFromString as parsePhoneNumberFromString$1 } from 'libphonenumber-js';
 
@@ -900,7 +901,9 @@ const cvaActionContainer = cvaMerge(["flex", "items-center", "m-1"]);
  * @param {ActionButtonProps} props - The props for the ActionButton component
  * @returns {JSX.Element} ActionButton component
  */
-const ActionButton = ({ type, value, dataTestId, iconSize, disabled, className, }) => {
+const ActionButton = ({ type, value, dataTestId, iconSize, disabled, key, className }) => {
+    const [, copyToClipboard] = useCopyToClipboard();
+    const elementKey = useMemo(() => key !== null && key !== void 0 ? key : `ActionButton-${v4()}`, [key]);
     const getIconName = () => {
         switch (type) {
             case "PHONE_NUMBER":
@@ -908,11 +911,14 @@ const ActionButton = ({ type, value, dataTestId, iconSize, disabled, className,
             case "WEB_ADDRESS":
                 return "ArrowTopRightOnSquare";
             case "EMAIL":
-            default:
                 return "Envelope";
+            case "COPY":
+            default:
+                return "ClipboardDocument";
         }
     };
     const ButtonAction = () => {
+        var _a, _b;
         switch (type) {
             case "EMAIL":
                 return window.open(`mailto:${value}`);
@@ -922,11 +928,17 @@ const ActionButton = ({ type, value, dataTestId, iconSize, disabled, className,
                 }
                 return null;
             case "PHONE_NUMBER":
-            default:
                 return window.open(`tel:${value}`);
+            case "COPY":
+                return copyToClipboard((_b = (_a = value === null || value === void 0 ? void 0 : value.current) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : "");
+            default:
+                return null;
         }
     };
-    return (jsx("div", { className: cvaActionContainer({ className }), children: jsx(IconButton, { disabled: disabled, dataTestId: dataTestId || "testIconButtonId", size: "small", variant: "secondary", icon: jsx(Icon, { size: "small", name: getIconName() }), onClick: ButtonAction, className: cvaActionButton({ size: iconSize }) }) }));
+    if (ButtonAction === null) {
+        return null;
+    }
+    return (jsx("div", { className: cvaActionContainer({ className }), children: jsx(IconButton, { disabled: disabled, dataTestId: dataTestId || "testIconButtonId", size: "small", variant: "secondary", icon: jsx(Icon, { size: "small", name: getIconName() }), onClick: ButtonAction, className: cvaActionButton({ size: iconSize }) }) }, elementKey));
 };
 
 const cvaInputBase = cvaMerge([
@@ -1027,9 +1039,11 @@ const cvaInputSuffix = cvaMerge(["flex", "justify-center", "items-center", "text
  * This is a base used by our other input components such as TextInput, NumberInput, PasswordInput, etc.
  */
 const BaseInput = React.forwardRef((_a, ref) => {
-    var { className, isInvalid, dataTestId, prefix, suffix, addonBefore, addonAfter, actions, fieldSize = "medium", nonInteractive = false, type, inputClassName, addonBeforeClassName } = _a, rest = __rest(_a, ["className", "isInvalid", "dataTestId", "prefix", "suffix", "addonBefore", "addonAfter", "actions", "fieldSize", "nonInteractive", "type", "inputClassName", "addonBeforeClassName"]);
+    var { className, isInvalid, dataTestId, prefix, suffix, addonBefore, addonAfter, actions, fieldSize = "medium", nonInteractive = false, showDefaultActions = false, type, inputClassName, addonBeforeClassName } = _a, rest = __rest(_a, ["className", "isInvalid", "dataTestId", "prefix", "suffix", "addonBefore", "addonAfter", "actions", "fieldSize", "nonInteractive", "showDefaultActions", "type", "inputClassName", "addonBeforeClassName"]);
     const isReadOnlyWithPlaceholder = useMemo(() => !!rest.readOnly && !!rest.placeholder && !rest.value, [rest.readOnly, rest.placeholder, rest.value]);
     const renderAsDisabled = rest.disabled || rest.readOnly;
+    const innerRef = React.useRef(null);
+    React.useImperativeHandle(ref, () => innerRef.current, []);
     return (jsxs("div", { className: cvaInput({
             disabled: renderAsDisabled,
             invalid: isInvalid,
@@ -1037,9 +1051,9 @@ const BaseInput = React.forwardRef((_a, ref) => {
             className,
         }), "data-testid": dataTestId && `${dataTestId}-container`, children: [addonBefore && addonBefore !== undefined ? (jsx("div", { className: cvaInputAddonBefore({ className: addonBeforeClassName }), "data-testid": dataTestId && `${dataTestId}-addonBefore`, children: addonBefore })) : null, prefix && addonBefore !== prefix ? (jsx("div", { className: cvaInputPrefix({
                     disabled: renderAsDisabled,
-                }), "data-testid": dataTestId && `${dataTestId}-prefix`, children: prefix })) : null, jsx("input", Object.assign({ ref: ref, "data-testid": dataTestId, className: cvaInputField({ size: fieldSize, disabled: renderAsDisabled, className: inputClassName }), type: isReadOnlyWithPlaceholder ? "text" : type }, rest, { readOnly: rest.readOnly || nonInteractive })), suffix && addonBefore !== suffix ? (jsx("div", { className: cvaInputSuffix({
+                }), "data-testid": dataTestId && `${dataTestId}-prefix`, children: prefix })) : null, jsx("input", Object.assign({ ref: innerRef, "data-testid": dataTestId, className: cvaInputField({ size: fieldSize, disabled: renderAsDisabled, className: inputClassName }), type: isReadOnlyWithPlaceholder ? "text" : type }, rest, { readOnly: rest.readOnly || nonInteractive })), suffix && addonBefore !== suffix ? (jsx("div", { className: cvaInputSuffix({
                     disabled: renderAsDisabled,
-                }), "data-testid": dataTestId && `${dataTestId}-suffix`, children: suffix })) : null, actions && addonBefore !== actions ? actions : null, addonAfter && addonAfter !== undefined && addonBefore !== addonAfter ? (jsx("div", { className: cvaInputAddonAfter(), "data-testid": dataTestId && `${dataTestId}-addonAfter`, children: addonAfter })) : null] }));
+                }), "data-testid": dataTestId && `${dataTestId}-suffix`, children: suffix })) : null, rest.readOnly === true && showDefaultActions ? (jsx(ActionButton, { type: "COPY", value: innerRef }, "default-copy-action")) : null, actions && addonBefore !== actions ? actions : null, addonAfter && addonAfter !== undefined && addonBefore !== addonAfter ? (jsx("div", { className: cvaInputAddonAfter(), "data-testid": dataTestId && `${dataTestId}-addonAfter`, children: addonAfter })) : null] }));
 });
 
 /**
@@ -2086,7 +2100,7 @@ const TimeRangeField = (_a) => {
     var { className, dataTestId, onChange, isInvalid, errorMessage, label, tip, disabled, children, helpText, id } = _a, rest = __rest(_a, ["className", "dataTestId", "onChange", "isInvalid", "errorMessage", "label", "tip", "disabled", "children", "helpText", "id"]);
     const renderAsInvalid = isInvalid === undefined ? Boolean(errorMessage) : isInvalid;
     const htmlFor = id ? id : "timeRangeField-" + v4();
-    return (jsx(FormGroup, { htmlFor: htmlFor, label: label, tip: tip, isInvalid: renderAsInvalid, helpText: (renderAsInvalid && errorMessage) || helpText, dataTestId: dataTestId && `${dataTestId}-FormGroup`, disabled: disabled, children: jsx(TimeRange, Object.assign({ className: className, onChange: onChange, disabled: disabled, dataTestId: dataTestId, isInvalid: renderAsInvalid, children: children }, rest)) }));
+    return (jsx(FormGroup, { htmlFor: htmlFor, label: label, tip: tip, isInvalid: renderAsInvalid, helpText: (renderAsInvalid && errorMessage) || helpText, dataTestId: dataTestId && `${dataTestId}-FormGroup`, disabled: disabled, children: jsx(TimeRange, Object.assign({ className: className, onChange: onChange, disabled: disabled, dataTestId: dataTestId, isInvalid: renderAsInvalid }, rest, { children: children })) }));
 };
 
 const cvaToggleWrapper = cvaMerge(["flex", "gap-2", "items-center"]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-form-components",
-  "version": "0.0.297",
+  "version": "0.0.301",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -11,6 +11,7 @@
     "@trackunit/ui-icons": "*",
     "react": "^18.2.0",
     "uuid": "^9.0.1",
+    "react-use": "^17.4.0",
     "date-fns": "^2.30.0",
     "react-select": "^5.8.0",
     "libphonenumber-js": "1.10.36",

package/src/components/ActionButton/ActionButton.d.ts

@@ -1,26 +1,51 @@
 /// <reference types="react" />
 import { ButtonCommonProps, CommonProps } from "@trackunit/react-components";
-type ActionType = "PHONE_NUMBER" | "WEB_ADDRESS" | "EMAIL";
+type ActionType = "PHONE_NUMBER" | "WEB_ADDRESS" | "EMAIL" | "COPY";
 type FieldSize = "small" | "medium";
-interface ActionButtonProps extends ButtonCommonProps, CommonProps {
+interface AbstractActionButtonProps extends ButtonCommonProps, CommonProps {
     /**
      * The type of action performed when clicking the button.
      */
     type: ActionType;
+    /**
+     * A key to be passed into the button.
+     */
+    key?: string;
     /**
      * The value to be passed into the button.
      */
-    value?: string | null;
+    value?: string | React.RefObject<HTMLInputElement> | null;
     /**
      *  The size of the icon.
      */
     iconSize?: FieldSize;
 }
+interface GenericActionButtonProps extends AbstractActionButtonProps {
+    /**
+     * The type of action performed when clicking the button.
+     */
+    type: "PHONE_NUMBER" | "WEB_ADDRESS" | "EMAIL";
+    /**
+     * The value to be passed into the button.
+     */
+    value?: string | null;
+}
+interface CopyActionButtonProps extends AbstractActionButtonProps {
+    /**
+     * The type of action performed when clicking the button.
+     */
+    type: "COPY";
+    /**
+     * The value to be passed into the button.
+     */
+    value?: React.RefObject<HTMLInputElement>;
+}
+type ActionButtonProps = CopyActionButtonProps | GenericActionButtonProps;
 /**
  * The ActionButton component is a wrapper over IconButton to perform an action when the onClick event is triggered.
  *
  * @param {ActionButtonProps} props - The props for the ActionButton component
  * @returns {JSX.Element} ActionButton component
  */
-export declare const ActionButton: ({ type, value, dataTestId, iconSize, disabled, className, }: ActionButtonProps) => JSX.Element;
+export declare const ActionButton: ({ type, value, dataTestId, iconSize, disabled, key, className }: ActionButtonProps) => JSX.Element | null;
 export {};

package/src/components/BaseInput/BaseInput.d.ts

@@ -57,6 +57,14 @@ export interface BaseInputProps extends FilteredInputProps, CommonProps {
      * Custom css classes for the addon before element.
      */
     addonBeforeClassName?: string;
+    /**
+     *  If true the default actions are shown.
+     */
+    showDefaultActions?: boolean;
+    /**
+     * If true the input is readonly.
+     */
+    readonly?: boolean;
 }
 /**
  * A base input component that can be used for text inputs, password inputs, etc.