@trackunit/react-form-components 0.0.354 → 0.0.358

package/index.cjs.js

@@ -1020,6 +1020,8 @@ const validatePhoneNumber = (phoneNumber) => {
     asYouType.input(phoneNumber);
     const countryCode = asYouType.getCallingCode();
     const national = asYouType.getNationalNumber();
+    const safePhoneNumber = getPhoneNumberWithPlus(phoneNumber === null || phoneNumber === void 0 ? void 0 : phoneNumber.trim());
+    const number = parsePhoneNumberFromString__default["default"](safePhoneNumber);
     if (phoneNumber && parsePhoneNumberFromString.isValidPhoneNumber(phoneNumber)) {
         return undefined;
     }
@@ -1027,18 +1029,15 @@ const validatePhoneNumber = (phoneNumber) => {
         return "REQUIRED_COUNTRY";
     }
     if (phoneNumber &&
-        (checkIfPhoneNumberHasPlus(phoneNumber) ? isNaN(+phoneNumber.slice(1, phoneNumber.length)) : isNaN(+phoneNumber))) {
+        (checkIfPhoneNumberHasPlus(phoneNumber)
+            ? isNaN(+phoneNumber.slice(1, phoneNumber.length))
+            : isNaN(+phoneNumber) || !number)) {
         return "NOT_A_NUMBER";
     }
-    const safePhoneNumber = getPhoneNumberWithPlus(phoneNumber === null || phoneNumber === void 0 ? void 0 : phoneNumber.trim());
     if (safePhoneNumber.length <= 5) {
         //needs to be handled manually, parsePhoneNumberFromString can't parse it
         return "TOO_SHORT";
     }
-    const number = parsePhoneNumberFromString__default["default"](safePhoneNumber);
-    if (!number) {
-        return "NOT_A_NUMBER";
-    }
     return "INVALID_NUMBER";
 };
 /**
@@ -1361,7 +1360,7 @@ const TextInput = React.forwardRef((props, ref) => (jsxRuntime.jsx(BaseInput, Ob
 
 const cvaSearch = cssClassVarianceUtilities.cvaMerge([
     "shadow-none",
-    "component-search-borderless",
+    "component-search-border",
     "component-search-background",
     "hover:component-search-background",
     "hover:component-search-focus-hover",
@@ -1371,7 +1370,7 @@ const cvaSearch = cssClassVarianceUtilities.cvaMerge([
     "duration-300",
 ], {
     variants: {
-        border: { true: ["!component-search-border"], false: "" },
+        border: { true: ["!component-search-borderless"], false: "" },
         widenOnFocus: {
             true: [
                 "component-search-width",
@@ -1392,8 +1391,8 @@ const cvaSearch = cssClassVarianceUtilities.cvaMerge([
  * @returns {JSX.Element} Search component
  */
 const Search = React.forwardRef((_a, ref) => {
-    var { className, placeholder = "Search", value, widenInputOnFocus, showBorderWhenNotInFocus = false, disabled, onKeyUp, onChange, onFocus, onBlur, name, onClear, dataTestId, autoComplete = "on" } = _a, rest = __rest(_a, ["className", "placeholder", "value", "widenInputOnFocus", "showBorderWhenNotInFocus", "disabled", "onKeyUp", "onChange", "onFocus", "onBlur", "name", "onClear", "dataTestId", "autoComplete"]);
-    return (jsxRuntime.jsx(TextInput, Object.assign({}, rest, { autoComplete: autoComplete, className: cvaSearch({ className, border: showBorderWhenNotInFocus, widenOnFocus: widenInputOnFocus }), dataTestId: dataTestId, disabled: disabled, name: name, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyUp: onKeyUp, placeholder: placeholder, prefix: jsxRuntime.jsx(reactComponents.Icon, { name: "MagnifyingGlass", size: "medium" }), ref: ref, suffix: onClear ? (jsxRuntime.jsx("button", { className: "flex", "data-testid": dataTestId && `${dataTestId}_suffix_component`, onClick: () => {
+    var { className, placeholder = "Search", value, widenInputOnFocus, hideBorderWhenNotInFocus = false, disabled, onKeyUp, onChange, onFocus, onBlur, name, onClear, dataTestId, autoComplete = "on" } = _a, rest = __rest(_a, ["className", "placeholder", "value", "widenInputOnFocus", "hideBorderWhenNotInFocus", "disabled", "onKeyUp", "onChange", "onFocus", "onBlur", "name", "onClear", "dataTestId", "autoComplete"]);
+    return (jsxRuntime.jsx(TextInput, Object.assign({}, rest, { autoComplete: autoComplete, className: cvaSearch({ className, border: hideBorderWhenNotInFocus, widenOnFocus: widenInputOnFocus }), dataTestId: dataTestId, disabled: disabled, name: name, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyUp: onKeyUp, placeholder: placeholder, prefix: jsxRuntime.jsx(reactComponents.Icon, { name: "MagnifyingGlass", size: "medium" }), ref: ref, suffix: onClear ? (jsxRuntime.jsx("button", { className: "flex", "data-testid": dataTestId && `${dataTestId}_suffix_component`, onClick: () => {
                 onClear();
             }, children: jsxRuntime.jsx(reactComponents.Icon, { name: "XMark", size: "small" }) })) : undefined, value: value })));
 });
@@ -1824,7 +1823,7 @@ CreatableSelect.displayName = "CreatableSelect";
  */
 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 !== null && dataTestId !== void 0 ? dataTestId : "select", onMenuScrollToBottom, filterOption, onInputChange, isSearchable, isClearable = false, readOnly, openMenuOnClick = !disabled, openMenuOnFocus = !disabled, } = props;
+    const { id, dataTestId = "select", prefix, async, maxMenuHeight = 200, label, hasError, disabled, isMulti, value, options, onChange, isLoading, classNamePrefix = dataTestId !== null && dataTestId !== void 0 ? dataTestId : "select", onMenuScrollToBottom, filterOption, onInputChange, isSearchable, isClearable = false, readOnly, openMenuOnClick = !disabled, openMenuOnFocus = !disabled, hideSelectedOptions = false, } = props;
     const { refContainer, refPrefix, customStyles, menuIsOpen, customComponents, menuPlacement, openMenuHandler, closeMenuHandler, orderedOptions, } = useSelect(props);
     const selectProps = {
         value,
@@ -1852,8 +1851,9 @@ const Select = (props) => {
         id,
         onMenuScrollToBottom,
         onInputChange,
+        hideSelectedOptions,
     };
-    return (jsxRuntime.jsxs("div", { className: cvaSelect({ invalid: hasError, disabled: disabled || readOnly, className }), "data-testid": dataTestId, ref: refContainer, children: [prefix !== undefined && (jsxRuntime.jsx("div", { className: cvaSelectPrefix(), "data-testid": dataTestId && `${dataTestId}-prefix`, ref: refPrefix, children: prefix })), async ? (jsxRuntime.jsx(ReactAsyncSelect__default["default"], Object.assign({}, propsNoClassName, selectProps, async, { onMenuClose: closeMenuHandler, onMenuOpen: openMenuHandler }))) : (jsxRuntime.jsx(ReactSelect__default["default"], Object.assign({}, propsNoClassName, selectProps, { hideSelectedOptions: false, isMulti: isMulti, onMenuClose: closeMenuHandler, onMenuOpen: openMenuHandler, options: filterOption ? orderedOptions : options })))] }));
+    return (jsxRuntime.jsxs("div", { className: cvaSelect({ invalid: hasError, disabled: disabled || readOnly, className }), "data-testid": dataTestId, ref: refContainer, children: [prefix !== undefined && (jsxRuntime.jsx("div", { className: cvaSelectPrefix(), "data-testid": dataTestId && `${dataTestId}-prefix`, ref: refPrefix, children: prefix })), async ? (jsxRuntime.jsx(ReactAsyncSelect__default["default"], Object.assign({}, propsNoClassName, selectProps, async, { onMenuClose: closeMenuHandler, onMenuOpen: openMenuHandler }))) : (jsxRuntime.jsx(ReactSelect__default["default"], Object.assign({}, propsNoClassName, selectProps, { isMulti: isMulti, onMenuClose: closeMenuHandler, onMenuOpen: openMenuHandler, options: filterOption ? orderedOptions : options })))] }));
 };
 Select.displayName = "Select";
 

package/index.esm.js

@@ -990,6 +990,8 @@ const validatePhoneNumber = (phoneNumber) => {
     asYouType.input(phoneNumber);
     const countryCode = asYouType.getCallingCode();
     const national = asYouType.getNationalNumber();
+    const safePhoneNumber = getPhoneNumberWithPlus(phoneNumber === null || phoneNumber === void 0 ? void 0 : phoneNumber.trim());
+    const number = parsePhoneNumberFromString(safePhoneNumber);
     if (phoneNumber && isValidPhoneNumber(phoneNumber)) {
         return undefined;
     }
@@ -997,18 +999,15 @@ const validatePhoneNumber = (phoneNumber) => {
         return "REQUIRED_COUNTRY";
     }
     if (phoneNumber &&
-        (checkIfPhoneNumberHasPlus(phoneNumber) ? isNaN(+phoneNumber.slice(1, phoneNumber.length)) : isNaN(+phoneNumber))) {
+        (checkIfPhoneNumberHasPlus(phoneNumber)
+            ? isNaN(+phoneNumber.slice(1, phoneNumber.length))
+            : isNaN(+phoneNumber) || !number)) {
         return "NOT_A_NUMBER";
     }
-    const safePhoneNumber = getPhoneNumberWithPlus(phoneNumber === null || phoneNumber === void 0 ? void 0 : phoneNumber.trim());
     if (safePhoneNumber.length <= 5) {
         //needs to be handled manually, parsePhoneNumberFromString can't parse it
         return "TOO_SHORT";
     }
-    const number = parsePhoneNumberFromString(safePhoneNumber);
-    if (!number) {
-        return "NOT_A_NUMBER";
-    }
     return "INVALID_NUMBER";
 };
 /**
@@ -1331,7 +1330,7 @@ const TextInput = forwardRef((props, ref) => (jsx(BaseInput, Object.assign({ ref
 
 const cvaSearch = cvaMerge([
     "shadow-none",
-    "component-search-borderless",
+    "component-search-border",
     "component-search-background",
     "hover:component-search-background",
     "hover:component-search-focus-hover",
@@ -1341,7 +1340,7 @@ const cvaSearch = cvaMerge([
     "duration-300",
 ], {
     variants: {
-        border: { true: ["!component-search-border"], false: "" },
+        border: { true: ["!component-search-borderless"], false: "" },
         widenOnFocus: {
             true: [
                 "component-search-width",
@@ -1362,8 +1361,8 @@ const cvaSearch = cvaMerge([
  * @returns {JSX.Element} Search component
  */
 const Search = forwardRef((_a, ref) => {
-    var { className, placeholder = "Search", value, widenInputOnFocus, showBorderWhenNotInFocus = false, disabled, onKeyUp, onChange, onFocus, onBlur, name, onClear, dataTestId, autoComplete = "on" } = _a, rest = __rest(_a, ["className", "placeholder", "value", "widenInputOnFocus", "showBorderWhenNotInFocus", "disabled", "onKeyUp", "onChange", "onFocus", "onBlur", "name", "onClear", "dataTestId", "autoComplete"]);
-    return (jsx(TextInput, Object.assign({}, rest, { autoComplete: autoComplete, className: cvaSearch({ className, border: showBorderWhenNotInFocus, widenOnFocus: widenInputOnFocus }), dataTestId: dataTestId, disabled: disabled, name: name, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyUp: onKeyUp, placeholder: placeholder, prefix: jsx(Icon, { name: "MagnifyingGlass", size: "medium" }), ref: ref, suffix: onClear ? (jsx("button", { className: "flex", "data-testid": dataTestId && `${dataTestId}_suffix_component`, onClick: () => {
+    var { className, placeholder = "Search", value, widenInputOnFocus, hideBorderWhenNotInFocus = false, disabled, onKeyUp, onChange, onFocus, onBlur, name, onClear, dataTestId, autoComplete = "on" } = _a, rest = __rest(_a, ["className", "placeholder", "value", "widenInputOnFocus", "hideBorderWhenNotInFocus", "disabled", "onKeyUp", "onChange", "onFocus", "onBlur", "name", "onClear", "dataTestId", "autoComplete"]);
+    return (jsx(TextInput, Object.assign({}, rest, { autoComplete: autoComplete, className: cvaSearch({ className, border: hideBorderWhenNotInFocus, widenOnFocus: widenInputOnFocus }), dataTestId: dataTestId, disabled: disabled, name: name, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyUp: onKeyUp, placeholder: placeholder, prefix: jsx(Icon, { name: "MagnifyingGlass", size: "medium" }), ref: ref, suffix: onClear ? (jsx("button", { className: "flex", "data-testid": dataTestId && `${dataTestId}_suffix_component`, onClick: () => {
                 onClear();
             }, children: jsx(Icon, { name: "XMark", size: "small" }) })) : undefined, value: value })));
 });
@@ -1794,7 +1793,7 @@ CreatableSelect.displayName = "CreatableSelect";
  */
 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 !== null && dataTestId !== void 0 ? dataTestId : "select", onMenuScrollToBottom, filterOption, onInputChange, isSearchable, isClearable = false, readOnly, openMenuOnClick = !disabled, openMenuOnFocus = !disabled, } = props;
+    const { id, dataTestId = "select", prefix, async, maxMenuHeight = 200, label, hasError, disabled, isMulti, value, options, onChange, isLoading, classNamePrefix = dataTestId !== null && dataTestId !== void 0 ? dataTestId : "select", onMenuScrollToBottom, filterOption, onInputChange, isSearchable, isClearable = false, readOnly, openMenuOnClick = !disabled, openMenuOnFocus = !disabled, hideSelectedOptions = false, } = props;
     const { refContainer, refPrefix, customStyles, menuIsOpen, customComponents, menuPlacement, openMenuHandler, closeMenuHandler, orderedOptions, } = useSelect(props);
     const selectProps = {
         value,
@@ -1822,8 +1821,9 @@ const Select = (props) => {
         id,
         onMenuScrollToBottom,
         onInputChange,
+        hideSelectedOptions,
     };
-    return (jsxs("div", { className: cvaSelect({ invalid: hasError, disabled: disabled || readOnly, className }), "data-testid": dataTestId, ref: refContainer, children: [prefix !== undefined && (jsx("div", { className: cvaSelectPrefix(), "data-testid": dataTestId && `${dataTestId}-prefix`, ref: refPrefix, children: prefix })), async ? (jsx(ReactAsyncSelect, Object.assign({}, propsNoClassName, selectProps, async, { onMenuClose: closeMenuHandler, onMenuOpen: openMenuHandler }))) : (jsx(ReactSelect, Object.assign({}, propsNoClassName, selectProps, { hideSelectedOptions: false, isMulti: isMulti, onMenuClose: closeMenuHandler, onMenuOpen: openMenuHandler, options: filterOption ? orderedOptions : options })))] }));
+    return (jsxs("div", { className: cvaSelect({ invalid: hasError, disabled: disabled || readOnly, className }), "data-testid": dataTestId, ref: refContainer, children: [prefix !== undefined && (jsx("div", { className: cvaSelectPrefix(), "data-testid": dataTestId && `${dataTestId}-prefix`, ref: refPrefix, children: prefix })), async ? (jsx(ReactAsyncSelect, Object.assign({}, propsNoClassName, selectProps, async, { onMenuClose: closeMenuHandler, onMenuOpen: openMenuHandler }))) : (jsx(ReactSelect, Object.assign({}, propsNoClassName, selectProps, { isMulti: isMulti, onMenuClose: closeMenuHandler, onMenuOpen: openMenuHandler, options: filterOption ? orderedOptions : options })))] }));
 };
 Select.displayName = "Select";
 

package/package.json

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

package/src/components/Search/Search.d.ts

@@ -18,7 +18,7 @@ export interface SearchProps extends CommonProps, TextInputProps {
     /**
      * Whether the border for the search box should be displayed while the search box is not in focus.
      */
-    showBorderWhenNotInFocus?: boolean;
+    hideBorderWhenNotInFocus?: boolean;
     /**
      * Value rendered in the search box.
      */

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

@@ -34,6 +34,7 @@ export declare const CreatableSelect: {
         isClearable?: boolean | undefined;
         isSearchable?: boolean | undefined;
         isAsync?: IsAsync | undefined;
+        hideSelectedOptions?: boolean | undefined;
     } & CreatableSelectProps): JSX.Element;
     displayName: string;
 };

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

@@ -113,6 +113,13 @@ export type SelectProps<Option, IsAsync extends boolean, IsMulti extends boolean
      * @memberof SelectProps
      */
     isAsync?: IsAsync;
+    /**
+     * A handler for menu close event
+     * use if you want to trigger custom logic
+     *
+     * @memberof SelectProps
+     */
+    hideSelectedOptions?: boolean;
 };
 interface IUseSelect<Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>> {
     customStyles: StylesConfig<Option, IsMulti, Group>;