@trackunit/react-form-components 0.0.139 → 0.0.140

package/index.cjs.js

@@ -97,12 +97,12 @@ const ActionButton = ({ type, value, dataTestId, iconSize, disabled, className,
     const getIconName = () => {
         switch (type) {
             case "PHONE_NUMBER":
-                return "PhoneArrowUpRightIcon";
+                return "PhoneArrowUpRight";
             case "WEB_ADDRESS":
-                return "ArrowTopRightOnSquareIcon";
+                return "ArrowTopRightOnSquare";
             case "EMAIL":
             default:
-                return "EnvelopeIcon";
+                return "Envelope";
         }
     };
     const ButtonAction = () => {
@@ -2922,7 +2922,7 @@ const DateInput = React.forwardRef((_a, ref) => {
     const formatDateToInputString = (date) => date instanceof Date ? format(date, "yyyy-MM-dd") : date;
     // Chrome and Firefox need their default icon to have datepicker functionality.
     const showIcon = !/Chrome/.test(navigator.userAgent) && !/Firefox/.test(navigator.userAgent);
-    return (jsxRuntime.jsx(BaseInput, Object.assign({ type: "date", value: formatDateToInputString(value), defaultValue: formatDateToInputString(defaultValue), min: formatDateToInputString(min), max: formatDateToInputString(max), ref: ref, suffix: showIcon && jsxRuntime.jsx(reactComponents.Icon, { dataTestId: "calendar", name: "CalendarIcon", size: "medium", type: "solid" }) }, rest)));
+    return (jsxRuntime.jsx(BaseInput, Object.assign({ type: "date", value: formatDateToInputString(value), defaultValue: formatDateToInputString(defaultValue), min: formatDateToInputString(min), max: formatDateToInputString(max), ref: ref, suffix: showIcon && jsxRuntime.jsx(reactComponents.Icon, { dataTestId: "calendar", name: "Calendar", size: "medium", type: "solid" }) }, rest)));
 });
 
 /**
@@ -3063,7 +3063,7 @@ const DropZone = (_a) => {
                 e.preventDefault();
                 e.stopPropagation();
             }
-        } }, rest, { children: [jsxRuntime.jsx("input", { title: "Hidden File Input", type: "file", id: "input-file-upload", onChange: handleChange, className: "hidden" }), jsxRuntime.jsxs("label", { className: cvaDropZoneLabel(), htmlFor: "input-file-upload", "data-testid": dataTestId && `${dataTestId}-label`, children: [jsxRuntime.jsx(reactComponents.Icon, { type: "solid", name: "ArrowUpCircleIcon", color: isInvalid ? "danger" : "neutral", style: !isInvalid ? { color: "rgb(156 163 175)" } : {} }), jsxRuntime.jsx("span", { children: label })] })] })));
+        } }, rest, { children: [jsxRuntime.jsx("input", { title: "Hidden File Input", type: "file", id: "input-file-upload", onChange: handleChange, className: "hidden" }), jsxRuntime.jsxs("label", { className: cvaDropZoneLabel(), htmlFor: "input-file-upload", "data-testid": dataTestId && `${dataTestId}-label`, children: [jsxRuntime.jsx(reactComponents.Icon, { type: "solid", name: "ArrowUpCircle", color: isInvalid ? "danger" : "neutral", style: !isInvalid ? { color: "rgb(156 163 175)" } : {} }), jsxRuntime.jsx("span", { children: label })] })] })));
 };
 
 /**
@@ -14090,7 +14090,7 @@ const getOrderedOptions = (options, value) => {
  * @returns {JSX.Element} SingleSelectMenuItem
  */
 const SingleSelectMenuItem = ({ label, icon, onClick, selected, dataTestId, focused, disabled, }) => {
-    return (jsxRuntime.jsx(reactComponents.MenuItem, { dataTestId: dataTestId, label: label, prefix: icon, onClick: onClick, selected: selected, disabled: disabled, focused: focused, suffix: selected ? jsxRuntime.jsx(reactComponents.Icon, { name: "CheckIcon", size: "small" }) : undefined }));
+    return (jsxRuntime.jsx(reactComponents.MenuItem, { dataTestId: dataTestId, label: label, prefix: icon, onClick: onClick, selected: selected, disabled: disabled, focused: focused, suffix: selected ? jsxRuntime.jsx(reactComponents.Icon, { name: "Check", size: "small" }) : undefined }));
 };
 /**
  * A multi select menu item is a basic wrapper around Menu item designed to be used as a multi value render in Select list
@@ -14239,13 +14239,13 @@ const useCustomComponents = (componentsProps, disabled, menuIsOpen, refMenuIsEna
             }, LoadingIndicator: props => {
                 return jsxRuntime.jsx(reactComponents.Spinner, { size: "small", className: "mt-1.5 mr-1" });
             }, DropdownIndicator: props => {
-                const icon = props.selectProps.menuIsOpen ? (jsxRuntime.jsx(reactComponents.Icon, { name: "ChevronUpIcon", size: "medium" })) : (jsxRuntime.jsx(reactComponents.Icon, { name: "ChevronDownIcon", size: "medium" }));
+                const icon = props.selectProps.menuIsOpen ? (jsxRuntime.jsx(reactComponents.Icon, { name: "ChevronUp", size: "medium" })) : (jsxRuntime.jsx(reactComponents.Icon, { name: "ChevronDown", size: "medium" }));
                 return props.selectProps.isLoading ? null : (jsxRuntime.jsx(components.DropdownIndicator, Object.assign({}, props, { children: jsxRuntime.jsx("div", { className: cvaSelectIcon(), children: dropdownIcon ? dropdownIcon : icon }) })));
             }, IndicatorSeparator: () => null, ClearIndicator: props => {
                 if (disabled) {
                     return null;
                 }
-                return (jsxRuntime.jsx(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: "XCircleIcon", size: "medium" }) }) })));
+                return (jsxRuntime.jsx(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" }) }) })));
             }, Control: props => {
                 return jsxRuntime.jsx(components.Control, Object.assign({}, props, { className: props.isDisabled ? "bg-slate-100" : "" }));
             }, SingleValue: props => {
@@ -14801,9 +14801,9 @@ const cvaSearch = cssClassVarianceUtilities.cvaMerge([
  */
 const Search = (_a) => {
     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, { dataTestId: dataTestId, name: name, className: cvaSearch({ className, border: showBorderWhenNotInFocus, widenOnFocus: widenInputOnFocus }), placeholder: placeholder, prefix: jsxRuntime.jsx(reactComponents.Icon, { name: "MagnifyingGlassIcon", size: "medium" }), suffix: onClear ? (jsxRuntime.jsx("button", { "data-testid": dataTestId && `${dataTestId}_suffix_component`, onClick: () => {
+    return (jsxRuntime.jsx(TextInput, Object.assign({}, rest, { dataTestId: dataTestId, name: name, className: cvaSearch({ className, border: showBorderWhenNotInFocus, widenOnFocus: widenInputOnFocus }), placeholder: placeholder, prefix: jsxRuntime.jsx(reactComponents.Icon, { name: "MagnifyingGlass", size: "medium" }), suffix: onClear ? (jsxRuntime.jsx("button", { "data-testid": dataTestId && `${dataTestId}_suffix_component`, onClick: () => {
                 onClear();
-            }, children: jsxRuntime.jsx(reactComponents.Icon, { name: "XMarkIcon", size: "small" }) })) : undefined, value: value, disabled: disabled, onChange: onChange, onKeyUp: onKeyUp, onFocus: onFocus, onBlur: onBlur, autoComplete: autoComplete })));
+            }, children: jsxRuntime.jsx(reactComponents.Icon, { name: "XMark", size: "small" }) })) : undefined, value: value, disabled: disabled, onChange: onChange, onKeyUp: onKeyUp, onFocus: onFocus, onBlur: onBlur, autoComplete: autoComplete })));
 };
 
 const cvaTextArea = cssClassVarianceUtilities.cvaMerge([

package/index.esm.js

@@ -71,12 +71,12 @@ const ActionButton = ({ type, value, dataTestId, iconSize, disabled, className,
     const getIconName = () => {
         switch (type) {
             case "PHONE_NUMBER":
-                return "PhoneArrowUpRightIcon";
+                return "PhoneArrowUpRight";
             case "WEB_ADDRESS":
-                return "ArrowTopRightOnSquareIcon";
+                return "ArrowTopRightOnSquare";
             case "EMAIL":
             default:
-                return "EnvelopeIcon";
+                return "Envelope";
         }
     };
     const ButtonAction = () => {
@@ -2896,7 +2896,7 @@ const DateInput = forwardRef((_a, ref) => {
     const formatDateToInputString = (date) => date instanceof Date ? format(date, "yyyy-MM-dd") : date;
     // Chrome and Firefox need their default icon to have datepicker functionality.
     const showIcon = !/Chrome/.test(navigator.userAgent) && !/Firefox/.test(navigator.userAgent);
-    return (jsx$1(BaseInput, Object.assign({ type: "date", value: formatDateToInputString(value), defaultValue: formatDateToInputString(defaultValue), min: formatDateToInputString(min), max: formatDateToInputString(max), ref: ref, suffix: showIcon && jsx$1(Icon, { dataTestId: "calendar", name: "CalendarIcon", size: "medium", type: "solid" }) }, rest)));
+    return (jsx$1(BaseInput, Object.assign({ type: "date", value: formatDateToInputString(value), defaultValue: formatDateToInputString(defaultValue), min: formatDateToInputString(min), max: formatDateToInputString(max), ref: ref, suffix: showIcon && jsx$1(Icon, { dataTestId: "calendar", name: "Calendar", size: "medium", type: "solid" }) }, rest)));
 });
 
 /**
@@ -3037,7 +3037,7 @@ const DropZone = (_a) => {
                 e.preventDefault();
                 e.stopPropagation();
             }
-        } }, rest, { children: [jsx$1("input", { title: "Hidden File Input", type: "file", id: "input-file-upload", onChange: handleChange, className: "hidden" }), jsxs("label", { className: cvaDropZoneLabel(), htmlFor: "input-file-upload", "data-testid": dataTestId && `${dataTestId}-label`, children: [jsx$1(Icon, { type: "solid", name: "ArrowUpCircleIcon", color: isInvalid ? "danger" : "neutral", style: !isInvalid ? { color: "rgb(156 163 175)" } : {} }), jsx$1("span", { children: label })] })] })));
+        } }, rest, { children: [jsx$1("input", { title: "Hidden File Input", type: "file", id: "input-file-upload", onChange: handleChange, className: "hidden" }), jsxs("label", { className: cvaDropZoneLabel(), htmlFor: "input-file-upload", "data-testid": dataTestId && `${dataTestId}-label`, children: [jsx$1(Icon, { type: "solid", name: "ArrowUpCircle", color: isInvalid ? "danger" : "neutral", style: !isInvalid ? { color: "rgb(156 163 175)" } : {} }), jsx$1("span", { children: label })] })] })));
 };
 
 /**
@@ -14064,7 +14064,7 @@ const getOrderedOptions = (options, value) => {
  * @returns {JSX.Element} SingleSelectMenuItem
  */
 const SingleSelectMenuItem = ({ label, icon, onClick, selected, dataTestId, focused, disabled, }) => {
-    return (jsx$1(MenuItem, { dataTestId: dataTestId, label: label, prefix: icon, onClick: onClick, selected: selected, disabled: disabled, focused: focused, suffix: selected ? jsx$1(Icon, { name: "CheckIcon", size: "small" }) : undefined }));
+    return (jsx$1(MenuItem, { dataTestId: dataTestId, label: label, prefix: icon, onClick: onClick, selected: selected, disabled: disabled, focused: focused, suffix: selected ? jsx$1(Icon, { name: "Check", size: "small" }) : undefined }));
 };
 /**
  * A multi select menu item is a basic wrapper around Menu item designed to be used as a multi value render in Select list
@@ -14213,13 +14213,13 @@ const useCustomComponents = (componentsProps, disabled, menuIsOpen, refMenuIsEna
             }, LoadingIndicator: props => {
                 return jsx$1(Spinner, { size: "small", className: "mt-1.5 mr-1" });
             }, DropdownIndicator: props => {
-                const icon = props.selectProps.menuIsOpen ? (jsx$1(Icon, { name: "ChevronUpIcon", size: "medium" })) : (jsx$1(Icon, { name: "ChevronDownIcon", size: "medium" }));
+                const icon = props.selectProps.menuIsOpen ? (jsx$1(Icon, { name: "ChevronUp", size: "medium" })) : (jsx$1(Icon, { name: "ChevronDown", size: "medium" }));
                 return props.selectProps.isLoading ? null : (jsx$1(components.DropdownIndicator, Object.assign({}, props, { children: jsx$1("div", { className: cvaSelectIcon(), children: dropdownIcon ? dropdownIcon : icon }) })));
             }, IndicatorSeparator: () => null, ClearIndicator: props => {
                 if (disabled) {
                     return null;
                 }
-                return (jsx$1(components.ClearIndicator, Object.assign({}, props, { children: jsx$1("div", { className: cvaSelectXIcon(), onClick: props.clearValue, "data-testid": dataTestId && `${dataTestId}-XMarkIcon`, children: jsx$1(Icon, { name: "XCircleIcon", size: "medium" }) }) })));
+                return (jsx$1(components.ClearIndicator, Object.assign({}, props, { children: jsx$1("div", { className: cvaSelectXIcon(), onClick: props.clearValue, "data-testid": dataTestId && `${dataTestId}-XMarkIcon`, children: jsx$1(Icon, { name: "XCircle", size: "medium" }) }) })));
             }, Control: props => {
                 return jsx$1(components.Control, Object.assign({}, props, { className: props.isDisabled ? "bg-slate-100" : "" }));
             }, SingleValue: props => {
@@ -14775,9 +14775,9 @@ const cvaSearch = cvaMerge([
  */
 const Search = (_a) => {
     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$1(TextInput, Object.assign({}, rest, { dataTestId: dataTestId, name: name, className: cvaSearch({ className, border: showBorderWhenNotInFocus, widenOnFocus: widenInputOnFocus }), placeholder: placeholder, prefix: jsx$1(Icon, { name: "MagnifyingGlassIcon", size: "medium" }), suffix: onClear ? (jsx$1("button", { "data-testid": dataTestId && `${dataTestId}_suffix_component`, onClick: () => {
+    return (jsx$1(TextInput, Object.assign({}, rest, { dataTestId: dataTestId, name: name, className: cvaSearch({ className, border: showBorderWhenNotInFocus, widenOnFocus: widenInputOnFocus }), placeholder: placeholder, prefix: jsx$1(Icon, { name: "MagnifyingGlass", size: "medium" }), suffix: onClear ? (jsx$1("button", { "data-testid": dataTestId && `${dataTestId}_suffix_component`, onClick: () => {
                 onClear();
-            }, children: jsx$1(Icon, { name: "XMarkIcon", size: "small" }) })) : undefined, value: value, disabled: disabled, onChange: onChange, onKeyUp: onKeyUp, onFocus: onFocus, onBlur: onBlur, autoComplete: autoComplete })));
+            }, children: jsx$1(Icon, { name: "XMark", size: "small" }) })) : undefined, value: value, disabled: disabled, onChange: onChange, onKeyUp: onKeyUp, onFocus: onFocus, onBlur: onBlur, autoComplete: autoComplete })));
 };
 
 const cvaTextArea = cvaMerge([

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-form-components",
-  "version": "0.0.139",
+  "version": "0.0.140",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -9,8 +9,9 @@
   "dependencies": {
     "@trackunit/css-class-variance-utilities": "0.0.14",
     "@trackunit/i18n-library-translation": "0.0.77",
-    "@trackunit/react-components": "0.1.156",
+    "@trackunit/react-components": "0.1.157",
     "@trackunit/shared-utils": "0.0.7",
+    "@trackunit/ui-icons": "0.0.76",
     "date-fns": "2.29.3",
     "libphonenumber-js": "1.10.36",
     "react": "18.2.0",