@trackunit/react-form-components 0.0.296 → 0.0.297

package/index.cjs.js

@@ -44,6 +44,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 +617,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 +662,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 +699,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 +732,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 +826,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 +843,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,
@@ -1303,7 +1305,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 +1322,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) }) })) }));
 });
 
 /**

package/index.esm.js

@@ -14,6 +14,7 @@ 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 +587,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 +632,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 +669,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 +702,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 +796,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 +813,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,
@@ -1273,7 +1275,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 +1292,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) }) })) }));
 });
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-form-components",
-  "version": "0.0.296",
+  "version": "0.0.297",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {

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;
 };