@trackunit/react-form-components 0.0.297-alpha-3fd0172a5e.0 → 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');
 
@@ -44,6 +45,7 @@ var ReactAsyncSelect__default = /*#__PURE__*/_interopDefaultLegacy(ReactAsyncSel
 var parsePhoneNumberFromString__default = /*#__PURE__*/_interopDefaultLegacy(parsePhoneNumberFromString);
 
 var defaultTranslations = {
+	"clearIndicator.icon.tooltip.clearAll": "Clear all",
 	"phoneField.error.INVALID_COUNTRY": "The country code is not valid",
 	"phoneField.error.INVALID_LENGTH": "The phone number is not valid",
 	"phoneField.error.INVALID_NUMBER": "The phone number is not valid",
@@ -616,6 +618,7 @@ const TagsContainer = ({ items, width = "100%", itemsGap = 5, postFix, disabled
  * @returns {Partial<SelectComponents<Option, boolean, GroupBase<Option>>> | undefined} components object to override react-select default components
  */
 const useCustomComponents = (componentsProps, disabled, menuIsOpen, refMenuIsEnabled, dataTestId, maxSelectedDisplayCount, dropdownIcon) => {
+    const [t] = useTranslation();
     // perhaps it should not be wrap in memo (causing some issues with opening and closing on mobiles)
     const customComponents = React__namespace.useMemo(() => {
         return Object.assign({ ValueContainer: props => {
@@ -660,7 +663,7 @@ const useCustomComponents = (componentsProps, disabled, menuIsOpen, refMenuIsEna
                 if (disabled) {
                     return null;
                 }
-                return (jsxRuntime.jsx(ReactSelect.components.ClearIndicator, Object.assign({}, props, { children: jsxRuntime.jsx("div", { className: cvaSelectXIcon(), onClick: props.clearValue, "data-testid": dataTestId && `${dataTestId}-XMarkIcon`, children: jsxRuntime.jsx(reactComponents.Icon, { name: "XCircle", size: "medium" }) }) })));
+                return (jsxRuntime.jsx(ReactSelect.components.ClearIndicator, Object.assign({}, props, { children: jsxRuntime.jsx("div", { className: cvaSelectXIcon(), onClick: props.clearValue, "data-testid": dataTestId && `${dataTestId}-XMarkIcon`, children: jsxRuntime.jsx(reactComponents.Icon, { title: t("clearIndicator.icon.tooltip.clearAll"), name: "XCircle", size: "medium" }) }) })));
             }, Control: props => {
                 return jsxRuntime.jsx(ReactSelect.components.Control, Object.assign({}, props, { className: props.isDisabled ? "bg-slate-100" : "" }));
             }, SingleValue: props => {
@@ -697,13 +700,13 @@ const useCustomComponents = (componentsProps, disabled, menuIsOpen, refMenuIsEna
  * @param {StylesConfig<Option, IsMulti, Group> | undefined} styles a optional object to override styles of react-select
  * @returns {StylesConfig<Option, boolean>} styles to override in select
  */
-const useCustomStyles = (refContainer, refPrefix, maxSelectedDisplayCount, styles) => {
+const useCustomStyles = (refContainer, refPrefix, maxSelectedDisplayCount, styles, disabled) => {
     const customStyles = React__namespace.useMemo(() => {
         return Object.assign({ control: base => {
                 return Object.assign(Object.assign({}, base), { border: "0", boxShadow: "0", "&:hover": {
                         border: "0",
                     }, marginRight: "2px", backgroundColor: "" });
-            }, singleValue: base => (Object.assign({}, base)), multiValue: base => (Object.assign({}, base)), multiValueLabel: base => (Object.assign({}, base)), indicatorsContainer: base => (Object.assign({}, base)), indicatorSeparator: () => ({
+            }, singleValue: base => (Object.assign({}, base)), multiValue: base => (Object.assign({}, base)), multiValueLabel: base => (Object.assign({}, base)), indicatorsContainer: base => (Object.assign(Object.assign({}, base), (disabled && { display: "none" }))), indicatorSeparator: () => ({
                 width: "0px",
             }), menu: base => {
                 return Object.assign(Object.assign({}, base), { width: "100%", marginTop: "4px", marginBottom: "18px", transition: "all 1s ease-in-out" });
@@ -730,7 +733,7 @@ const useSelect = (_a) => {
     var { id, className, dataTestId = "select", prefix, async, dropdownIcon, maxMenuHeight = 200, label, hasError, disabled, isMulti, components, value, options, onChange, isLoading, classNamePrefix = "", onMenuOpen, onMenuClose, maxSelectedDisplayCount = undefined, isClearable = false, isSearchable = true, onMenuScrollToBottom, styles, filterOption, onInputChange } = _a, props = __rest(_a, ["id", "className", "dataTestId", "prefix", "async", "dropdownIcon", "maxMenuHeight", "label", "hasError", "disabled", "isMulti", "components", "value", "options", "onChange", "isLoading", "classNamePrefix", "onMenuOpen", "onMenuClose", "maxSelectedDisplayCount", "isClearable", "isSearchable", "onMenuScrollToBottom", "styles", "filterOption", "onInputChange"]);
     const refContainer = React__default["default"].useRef(null);
     const refPrefix = React__default["default"].useRef(null);
-    const { customStyles } = useCustomStyles(refContainer, refPrefix, maxSelectedDisplayCount, styles);
+    const { customStyles } = useCustomStyles(refContainer, refPrefix, maxSelectedDisplayCount, styles, disabled);
     const [menuIsOpen, setMenuIsOpen] = React__default["default"].useState((_b = props.menuIsOpen) !== null && _b !== void 0 ? _b : false);
     const refMenuIsEnabled = React__default["default"].useRef(true);
     const customComponents = useCustomComponents(components, disabled || false, menuIsOpen, refMenuIsEnabled, dataTestId, maxSelectedDisplayCount, dropdownIcon);
@@ -824,7 +827,7 @@ const CreatableSelect = (props) => {
  */
 const Select = (props) => {
     const { className } = props, propsNoClassName = __rest(props, ["className"]);
-    const { id, dataTestId = "select", prefix, async, maxMenuHeight = 200, label, hasError, disabled, isMulti, value, options, onChange, isLoading, classNamePrefix = dataTestId ? dataTestId : "select", onMenuScrollToBottom, filterOption, onInputChange, isSearchable, isClearable = false, readOnly, } = props;
+    const { id, dataTestId = "select", prefix, async, maxMenuHeight = 200, label, hasError, disabled, isMulti, value, options, onChange, isLoading, classNamePrefix = dataTestId ? dataTestId : "select", onMenuScrollToBottom, filterOption, onInputChange, isSearchable, isClearable = false, readOnly, openMenuOnClick = !disabled, openMenuOnFocus = !disabled, } = props;
     const { refContainer, refPrefix, customStyles, menuIsOpen, customComponents, menuPlacement, openMenuHandler, closeMenuHandler, orderedOptions, } = useSelect(props);
     const selectProps = {
         value,
@@ -841,9 +844,9 @@ const Select = (props) => {
         isSearchable: disabled || readOnly ? false : isSearchable,
         menuShouldBlockScroll: true,
         menuShouldScrollIntoView: true,
-        openMenuOnFocus: true,
+        openMenuOnFocus,
         menuIsOpen: !readOnly ? menuIsOpen : false,
-        openMenuOnClick: true,
+        openMenuOnClick,
         closeMenuOnSelect: false,
         isMulti,
         classNamePrefix,
@@ -928,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":
@@ -936,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}`);
@@ -950,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([
@@ -1055,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,
@@ -1065,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] }));
 });
 
 /**
@@ -1303,7 +1319,7 @@ const OptionCard = React.forwardRef((_a, ref) => {
  *
  * NOTE: If shown with a label, please use the `PasswordField` component instead.
  */
-const PasswordInput = React.forwardRef((props, ref) => (jsxRuntime.jsx(BaseInput, Object.assign({ ref: ref, type: props.obfuscate ? "text" : "password" }, props))));
+const PasswordInput = React.forwardRef((props, ref) => (jsxRuntime.jsx(BaseInput, Object.assign({ ref: ref }, props))));
 
 /**
  * Password fields enter a password or other confidential information. Characters are masked as they are typed.
@@ -1320,7 +1336,7 @@ const PasswordField = React.forwardRef((_a, ref) => {
     const handleChange = React.useCallback((event) => {
         onChange === null || onChange === void 0 ? void 0 : onChange(event);
     }, [onChange]);
-    return (jsxRuntime.jsx(FormGroup, { htmlFor: htmlFor, label: label, tip: tip, isInvalid: renderAsInvalid, helpText: (renderAsInvalid && errorMessage) || helpText, helpAddon: helpAddon, dataTestId: dataTestId && `${dataTestId}-FormGroup`, children: jsxRuntime.jsx(PasswordInput, Object.assign({}, rest, { obfuscate: showPassword, disabled: rest.readOnly, id: htmlFor, "aria-labelledby": htmlFor + "-label", ref: ref, maxLength: maxLength, value: value, isInvalid: renderAsInvalid, className: className, onChange: handleChange, dataTestId: dataTestId, actions: jsxRuntime.jsx(reactComponents.Icon, { className: "absolute top-0 bottom-0 right-2 h-full content-center", name: showPassword ? "EyeSlash" : "Eye", size: "small", color: "neutral", onClick: () => setShowPassword(prevState => !prevState) }) })) }));
+    return (jsxRuntime.jsx(FormGroup, { htmlFor: htmlFor, label: label, tip: tip, isInvalid: renderAsInvalid, helpText: (renderAsInvalid && errorMessage) || helpText, helpAddon: helpAddon, dataTestId: dataTestId && `${dataTestId}-FormGroup`, children: jsxRuntime.jsx(PasswordInput, Object.assign({}, rest, { type: showPassword ? "text" : "password", disabled: rest.readOnly, id: htmlFor, "aria-labelledby": htmlFor + "-label", ref: ref, maxLength: maxLength, value: value, isInvalid: renderAsInvalid, className: className, onChange: handleChange, dataTestId: dataTestId, actions: jsxRuntime.jsx(reactComponents.Icon, { className: "absolute top-0 bottom-0 right-2 h-full content-center", name: showPassword ? "EyeSlash" : "Eye", size: "small", color: "neutral", onClick: () => setShowPassword(prevState => !prevState) }) })) }));
 });
 
 /**
@@ -2114,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,10 +10,12 @@ 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';
 
 var defaultTranslations = {
+	"clearIndicator.icon.tooltip.clearAll": "Clear all",
 	"phoneField.error.INVALID_COUNTRY": "The country code is not valid",
 	"phoneField.error.INVALID_LENGTH": "The phone number is not valid",
 	"phoneField.error.INVALID_NUMBER": "The phone number is not valid",
@@ -586,6 +588,7 @@ const TagsContainer = ({ items, width = "100%", itemsGap = 5, postFix, disabled
  * @returns {Partial<SelectComponents<Option, boolean, GroupBase<Option>>> | undefined} components object to override react-select default components
  */
 const useCustomComponents = (componentsProps, disabled, menuIsOpen, refMenuIsEnabled, dataTestId, maxSelectedDisplayCount, dropdownIcon) => {
+    const [t] = useTranslation();
     // perhaps it should not be wrap in memo (causing some issues with opening and closing on mobiles)
     const customComponents = React.useMemo(() => {
         return Object.assign({ ValueContainer: props => {
@@ -630,7 +633,7 @@ const useCustomComponents = (componentsProps, disabled, menuIsOpen, refMenuIsEna
                 if (disabled) {
                     return null;
                 }
-                return (jsx(components.ClearIndicator, Object.assign({}, props, { children: jsx("div", { className: cvaSelectXIcon(), onClick: props.clearValue, "data-testid": dataTestId && `${dataTestId}-XMarkIcon`, children: jsx(Icon, { name: "XCircle", size: "medium" }) }) })));
+                return (jsx(components.ClearIndicator, Object.assign({}, props, { children: jsx("div", { className: cvaSelectXIcon(), onClick: props.clearValue, "data-testid": dataTestId && `${dataTestId}-XMarkIcon`, children: jsx(Icon, { title: t("clearIndicator.icon.tooltip.clearAll"), name: "XCircle", size: "medium" }) }) })));
             }, Control: props => {
                 return jsx(components.Control, Object.assign({}, props, { className: props.isDisabled ? "bg-slate-100" : "" }));
             }, SingleValue: props => {
@@ -667,13 +670,13 @@ const useCustomComponents = (componentsProps, disabled, menuIsOpen, refMenuIsEna
  * @param {StylesConfig<Option, IsMulti, Group> | undefined} styles a optional object to override styles of react-select
  * @returns {StylesConfig<Option, boolean>} styles to override in select
  */
-const useCustomStyles = (refContainer, refPrefix, maxSelectedDisplayCount, styles) => {
+const useCustomStyles = (refContainer, refPrefix, maxSelectedDisplayCount, styles, disabled) => {
     const customStyles = React.useMemo(() => {
         return Object.assign({ control: base => {
                 return Object.assign(Object.assign({}, base), { border: "0", boxShadow: "0", "&:hover": {
                         border: "0",
                     }, marginRight: "2px", backgroundColor: "" });
-            }, singleValue: base => (Object.assign({}, base)), multiValue: base => (Object.assign({}, base)), multiValueLabel: base => (Object.assign({}, base)), indicatorsContainer: base => (Object.assign({}, base)), indicatorSeparator: () => ({
+            }, singleValue: base => (Object.assign({}, base)), multiValue: base => (Object.assign({}, base)), multiValueLabel: base => (Object.assign({}, base)), indicatorsContainer: base => (Object.assign(Object.assign({}, base), (disabled && { display: "none" }))), indicatorSeparator: () => ({
                 width: "0px",
             }), menu: base => {
                 return Object.assign(Object.assign({}, base), { width: "100%", marginTop: "4px", marginBottom: "18px", transition: "all 1s ease-in-out" });
@@ -700,7 +703,7 @@ const useSelect = (_a) => {
     var { id, className, dataTestId = "select", prefix, async, dropdownIcon, maxMenuHeight = 200, label, hasError, disabled, isMulti, components, value, options, onChange, isLoading, classNamePrefix = "", onMenuOpen, onMenuClose, maxSelectedDisplayCount = undefined, isClearable = false, isSearchable = true, onMenuScrollToBottom, styles, filterOption, onInputChange } = _a, props = __rest(_a, ["id", "className", "dataTestId", "prefix", "async", "dropdownIcon", "maxMenuHeight", "label", "hasError", "disabled", "isMulti", "components", "value", "options", "onChange", "isLoading", "classNamePrefix", "onMenuOpen", "onMenuClose", "maxSelectedDisplayCount", "isClearable", "isSearchable", "onMenuScrollToBottom", "styles", "filterOption", "onInputChange"]);
     const refContainer = React__default.useRef(null);
     const refPrefix = React__default.useRef(null);
-    const { customStyles } = useCustomStyles(refContainer, refPrefix, maxSelectedDisplayCount, styles);
+    const { customStyles } = useCustomStyles(refContainer, refPrefix, maxSelectedDisplayCount, styles, disabled);
     const [menuIsOpen, setMenuIsOpen] = React__default.useState((_b = props.menuIsOpen) !== null && _b !== void 0 ? _b : false);
     const refMenuIsEnabled = React__default.useRef(true);
     const customComponents = useCustomComponents(components, disabled || false, menuIsOpen, refMenuIsEnabled, dataTestId, maxSelectedDisplayCount, dropdownIcon);
@@ -794,7 +797,7 @@ const CreatableSelect = (props) => {
  */
 const Select = (props) => {
     const { className } = props, propsNoClassName = __rest(props, ["className"]);
-    const { id, dataTestId = "select", prefix, async, maxMenuHeight = 200, label, hasError, disabled, isMulti, value, options, onChange, isLoading, classNamePrefix = dataTestId ? dataTestId : "select", onMenuScrollToBottom, filterOption, onInputChange, isSearchable, isClearable = false, readOnly, } = props;
+    const { id, dataTestId = "select", prefix, async, maxMenuHeight = 200, label, hasError, disabled, isMulti, value, options, onChange, isLoading, classNamePrefix = dataTestId ? dataTestId : "select", onMenuScrollToBottom, filterOption, onInputChange, isSearchable, isClearable = false, readOnly, openMenuOnClick = !disabled, openMenuOnFocus = !disabled, } = props;
     const { refContainer, refPrefix, customStyles, menuIsOpen, customComponents, menuPlacement, openMenuHandler, closeMenuHandler, orderedOptions, } = useSelect(props);
     const selectProps = {
         value,
@@ -811,9 +814,9 @@ const Select = (props) => {
         isSearchable: disabled || readOnly ? false : isSearchable,
         menuShouldBlockScroll: true,
         menuShouldScrollIntoView: true,
-        openMenuOnFocus: true,
+        openMenuOnFocus,
         menuIsOpen: !readOnly ? menuIsOpen : false,
-        openMenuOnClick: true,
+        openMenuOnClick,
         closeMenuOnSelect: false,
         isMulti,
         classNamePrefix,
@@ -898,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":
@@ -906,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}`);
@@ -920,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([
@@ -1025,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,
@@ -1035,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] }));
 });
 
 /**
@@ -1273,7 +1289,7 @@ const OptionCard = forwardRef((_a, ref) => {
  *
  * NOTE: If shown with a label, please use the `PasswordField` component instead.
  */
-const PasswordInput = forwardRef((props, ref) => (jsx(BaseInput, Object.assign({ ref: ref, type: props.obfuscate ? "text" : "password" }, props))));
+const PasswordInput = forwardRef((props, ref) => (jsx(BaseInput, Object.assign({ ref: ref }, props))));
 
 /**
  * Password fields enter a password or other confidential information. Characters are masked as they are typed.
@@ -1290,7 +1306,7 @@ const PasswordField = forwardRef((_a, ref) => {
     const handleChange = useCallback((event) => {
         onChange === null || onChange === void 0 ? void 0 : onChange(event);
     }, [onChange]);
-    return (jsx(FormGroup, { htmlFor: htmlFor, label: label, tip: tip, isInvalid: renderAsInvalid, helpText: (renderAsInvalid && errorMessage) || helpText, helpAddon: helpAddon, dataTestId: dataTestId && `${dataTestId}-FormGroup`, children: jsx(PasswordInput, Object.assign({}, rest, { obfuscate: showPassword, disabled: rest.readOnly, id: htmlFor, "aria-labelledby": htmlFor + "-label", ref: ref, maxLength: maxLength, value: value, isInvalid: renderAsInvalid, className: className, onChange: handleChange, dataTestId: dataTestId, actions: jsx(Icon, { className: "absolute top-0 bottom-0 right-2 h-full content-center", name: showPassword ? "EyeSlash" : "Eye", size: "small", color: "neutral", onClick: () => setShowPassword(prevState => !prevState) }) })) }));
+    return (jsx(FormGroup, { htmlFor: htmlFor, label: label, tip: tip, isInvalid: renderAsInvalid, helpText: (renderAsInvalid && errorMessage) || helpText, helpAddon: helpAddon, dataTestId: dataTestId && `${dataTestId}-FormGroup`, children: jsx(PasswordInput, Object.assign({}, rest, { type: showPassword ? "text" : "password", disabled: rest.readOnly, id: htmlFor, "aria-labelledby": htmlFor + "-label", ref: ref, maxLength: maxLength, value: value, isInvalid: renderAsInvalid, className: className, onChange: handleChange, dataTestId: dataTestId, actions: jsx(Icon, { className: "absolute top-0 bottom-0 right-2 h-full content-center", name: showPassword ? "EyeSlash" : "Eye", size: "small", color: "neutral", onClick: () => setShowPassword(prevState => !prevState) }) })) }));
 });
 
 /**
@@ -2084,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-alpha-3fd0172a5e.0",
+  "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.

package/src/components/PasswordInput/PasswordInput.d.ts

@@ -2,10 +2,7 @@
 import { BaseInputProps } from "../BaseInput/BaseInput";
 type BaseInputExposedProps = Omit<BaseInputProps, "type">;
 export interface PasswordInputProps extends BaseInputExposedProps {
-    /**
-     * If false the field will show password as plain text.
-     */
-    obfuscate?: boolean;
+    type?: "password" | "text";
 }
 /**
  * A thin wrapper around the `BaseInput` component for password input fields.

package/src/components/Select/useCustomStyles.d.ts

@@ -9,6 +9,6 @@ import { GroupBase, StylesConfig } from "react-select";
  * @param {StylesConfig<Option, IsMulti, Group> | undefined} styles a optional object to override styles of react-select
  * @returns {StylesConfig<Option, boolean>} styles to override in select
  */
-export declare const useCustomStyles: <Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>(refContainer: React.RefObject<HTMLDivElement>, refPrefix: React.RefObject<HTMLDivElement>, maxSelectedDisplayCount: number | undefined, styles: StylesConfig<Option, IsMulti, Group> | undefined) => {
+export declare const useCustomStyles: <Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>(refContainer: React.RefObject<HTMLDivElement>, refPrefix: React.RefObject<HTMLDivElement>, maxSelectedDisplayCount: number | undefined, styles: StylesConfig<Option, IsMulti, Group> | undefined, disabled: boolean | undefined) => {
     customStyles: StylesConfig<Option, IsMulti, Group>;
 };

package/src/translation.d.ts

@@ -15,8 +15,8 @@ export declare const translations: TranslationResource<TranslationKeys>;
 /**
  *  Local useTranslation for this specific library
  */
-export declare const useTranslation: () => [TransForLibs<"phoneField.error.INVALID_COUNTRY" | "phoneField.error.INVALID_LENGTH" | "phoneField.error.INVALID_NUMBER" | "phoneField.error.NOT_A_NUMBER" | "phoneField.error.REQUIRED" | "phoneField.error.REQUIRED_COUNTRY" | "phoneField.error.TOO_LONG" | "phoneField.error.TOO_SHORT" | "phoneField.error.undefined">, import("i18next").i18n, boolean] & {
-    t: TransForLibs<"phoneField.error.INVALID_COUNTRY" | "phoneField.error.INVALID_LENGTH" | "phoneField.error.INVALID_NUMBER" | "phoneField.error.NOT_A_NUMBER" | "phoneField.error.REQUIRED" | "phoneField.error.REQUIRED_COUNTRY" | "phoneField.error.TOO_LONG" | "phoneField.error.TOO_SHORT" | "phoneField.error.undefined">;
+export declare const useTranslation: () => [TransForLibs<"clearIndicator.icon.tooltip.clearAll" | "phoneField.error.INVALID_COUNTRY" | "phoneField.error.INVALID_LENGTH" | "phoneField.error.INVALID_NUMBER" | "phoneField.error.NOT_A_NUMBER" | "phoneField.error.REQUIRED" | "phoneField.error.REQUIRED_COUNTRY" | "phoneField.error.TOO_LONG" | "phoneField.error.TOO_SHORT" | "phoneField.error.undefined">, import("i18next").i18n, boolean] & {
+    t: TransForLibs<"clearIndicator.icon.tooltip.clearAll" | "phoneField.error.INVALID_COUNTRY" | "phoneField.error.INVALID_LENGTH" | "phoneField.error.INVALID_NUMBER" | "phoneField.error.NOT_A_NUMBER" | "phoneField.error.REQUIRED" | "phoneField.error.REQUIRED_COUNTRY" | "phoneField.error.TOO_LONG" | "phoneField.error.TOO_SHORT" | "phoneField.error.undefined">;
     i18n: import("i18next").i18n;
     ready: boolean;
 };