@luscii-healthtech/web-ui 21.3.3 → 21.4.0

package/dist/components/Input/StyledInput.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import type { AllowedTextInputTypes } from "../Form/form.types";
+import type { IconProps } from "../Icons/types/IconProps.type";
+import type { FormFieldWidth } from "../Form/form.types";
+export declare const StyledInput: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "type"> & {
+    type?: AllowedTextInputTypes | undefined;
+    suffix?: string | undefined;
+    prefix?: string | undefined;
+    icon?: "BellIcon" | "BluetoothIcon" | "BrushIcon" | "CalendarDayIcon" | "CalendarMonthIcon" | "CalendarRepeatIcon" | "ChartBarsIcon" | "ChartLineAndBarsIcon" | "ChatBubbleIcon" | "ChatBubbleWithTextIcon" | "CheckIcon" | "ChevronDoubleIcon" | "ChevronDownIcon" | "ChevronLeftIcon" | "ChevronRightIcon" | "ClockIcon" | "CogwheelIcon" | "CopyToClipboardIcon" | "CrossIcon" | "CrossInCircleIcon" | "CrossInFilledCircleIcon" | "DatabaseIcon" | "DragIndicatorIcon" | "EarthIcon" | "EmailIcon" | "EmptyIcon" | "ExclamationMarkIcon" | "ExportIcon" | "EyeClosedIcon" | "EyeOpenIcon" | "FilterIcon" | "FireIcon" | "FirstAidKitIcon" | "FlagIcon" | "ForwardIcon" | "GroupIcon" | "GroupOfThreeIcon" | "HamburgerIcon" | "HandshakeIcon" | "HeartIcon" | "HomeIcon" | "ImageIcon" | "InfoIcon" | "LifebuoyIcon" | "LightBulbIcon" | "LinkIcon" | "LockIcon" | "LogInIcon" | "LogOutIcon" | "MessageWithArrowIcon" | "MoreIcon" | "MouseIcon" | "NoteIcon" | "PageViewIcon" | "PatientIcon" | "PencilIcon" | "PhoneIcon" | "PieChartIcon" | "PinIcon" | "PlusIcon" | "PrinterIcon" | "RobotIcon" | "RocketIcon" | "SearchIcon" | "ShareIcon" | "SmallCircleIcon" | "SmallDiamondIcon" | "SmallSquareIcon" | "StarIcon" | "TrashBinIcon" | "TreeIcon" | "AddIcon" | "AlertsIcon" | "ChartIcon" | "ChatBoxIcon" | "DeleteIcon" | "DragIcon" | "EditIcon" | "EyeIcon" | "EyeIconSlashed" | "GearIcon" | "MessagesIcon" | "NotesIcon" | "PrintIcon" | "SpaceRocketIcon" | "SettingsIcon" | "RightArrowIcon" | "DownArrowIcon" | "LeftArrowIcon" | "WarningIcon" | "ChartLineColoredIcon" | "GearColoredIcon" | "GroupColoredIcon" | "StatusColoredIcon" | React.FC<IconProps> | undefined;
+    width?: FormFieldWidth | undefined;
+    isError?: boolean | undefined;
+    isClearIconVisible?: boolean | undefined;
+    onClickClearField?: (() => void) | undefined;
+} & React.RefAttributes<HTMLInputElement>>;

package/dist/index.d.ts

@@ -32,6 +32,7 @@ export { default as Dropdown } from "./components/Dropdown/Dropdown";
 export { EmptyListMessage } from "./components/EmptyListMessage/EmptyListMessage";
 export { InfoField } from "./components/InfoField/InfoField";
 export { default as Input } from "./components/Input/Input";
+export { StyledInput } from "./components/Input/StyledInput";
 export { default as Line } from "./components/Line/Line";
 export { Table, type TableProps } from "./components/Table/Table";
 export { type TableFieldConfig, type TableFieldContent, type TableFieldText, type TableFieldAction, } from "./components/Table/Table.types";

package/dist/index.development.js

@@ -1510,49 +1510,20 @@ const List = (props) => {
 var css_248z$g = ".input::-ms-clear {\n  display: none;\n}";
 styleInject(css_248z$g);
 
-const Input = React__namespace.default.forwardRef((_a, ref) => {
-  var { withSuffix = "", withPrefix = "", className, clearable = false, type = "text", isDisabled = false, width = "full", icon, name, value = "", onChange, isError, asFormField } = _a, otherProps = __rest(_a, ["withSuffix", "withPrefix", "className", "clearable", "type", "isDisabled", "width", "icon", "name", "value", "onChange", "isError", "asFormField"]);
-  const hasNoExtraContent = withPrefix === "" && withSuffix === "";
-  const [innerValue, setInnerValue] = React.useState(value);
-  React.useEffect(() => {
-    setInnerValue(value);
-  }, [value]);
-  const clearField = () => {
-    setInnerValue("");
-    onChange === null || onChange === void 0 ? void 0 : onChange({
-      target: {
-        name: name || "",
-        value: ""
-      },
-      currentTarget: {
-        name: name || "",
-        value: ""
-      }
-    });
-  };
-  const handleChangeEvent = (event) => {
-    setInnerValue(event.currentTarget.value);
-    onChange === null || onChange === void 0 ? void 0 : onChange(asFormField ? event.currentTarget.value : {
-      target: {
-        name: name || "",
-        value: event.currentTarget.value
-      },
-      currentTarget: {
-        name: name || "",
-        value: event.currentTarget.value
-      }
-    });
-  };
-  const isClearIconVisible = clearable && innerValue;
+const StyledInput = React__namespace.default.forwardRef((_a, ref) => {
+  var { suffix, prefix, className, width = "full", icon, isError, disabled: isDisabled, isClearIconVisible, onClickClearField } = _a, rest = __rest(_a, ["suffix", "prefix", "className", "width", "icon", "isError", "disabled", "isClearIconVisible", "onClickClearField"]);
+  const hasPrefix = !!prefix;
+  const hasSuffix = !!suffix;
+  const hasNoExtraContent = !hasPrefix && !hasSuffix;
   return React__namespace.default.createElement(
     FlexRow,
     { spacing: "none", "data-test-id": "input-component-container", stretch: false },
     React__namespace.default.createElement("span", { className: classNames__default.default("ui-h-11 ui-border-b ui-border-t ui-border-solid ui-border-input-border", {
       "ui-hidden": hasNoExtraContent,
-      "ui-order-1": withSuffix !== "",
-      "ui-rounded-l ui-border-l": withPrefix !== "",
-      "ui-rounded-r ui-border-r": withSuffix !== ""
-    }, "ui-flex ui-flex-col ui-items-center ui-p-3", "ui-text-sm", "ui-text-slate-500", "ui-bg-main-background") }, withSuffix || withPrefix),
+      "ui-order-1": hasSuffix,
+      "ui-rounded-l ui-border-l": hasPrefix,
+      "ui-rounded-r ui-border-r": hasSuffix
+    }, "ui-flex ui-flex-col ui-items-center ui-p-3", "ui-text-sm", "ui-text-slate-500", "ui-bg-main-background") }, suffix || prefix),
     React__namespace.default.createElement(
       "div",
       { className: classNames__default.default("ui-relative", {
@@ -1568,13 +1539,13 @@ const Input = React__namespace.default.forwardRef((_a, ref) => {
         } },
         React__namespace.default.createElement(IconComponentOrKey, { name: icon, className: "ui-h-6 ui-w-6 ui-text-slate-300" })
       ),
-      React__namespace.default.createElement("input", Object.assign({ "data-test-id": `input-${name}` }, otherProps, { name, value: innerValue, onChange: handleChangeEvent, ref, size: otherProps.maxLength, type, disabled: isDisabled, className: classNames__default.default("input", "ui-block", {
+      React__namespace.default.createElement("input", Object.assign({ ref, className: classNames__default.default("input", "ui-block", {
         "ui-w-16": width === "sm",
         "ui-w-32": width === "md",
         "ui-w-56": width === "lg",
         "ui-w-80": width === "xl",
         "ui-flex-grow": width === "full"
-      }, { "ui-pl-12": icon, "ui-pr-11": clearable }, {
+      }, { "ui-pl-12": icon }, {
         "ui-bg-slate-50 ui-text-slate-400": isDisabled,
         "ui-text-slate-800": !isDisabled,
         "ui-border-input-border": !isDisabled && !isError,
@@ -1585,13 +1556,13 @@ const Input = React__namespace.default.forwardRef((_a, ref) => {
         "focus:ui-outline-primary": !isError,
         "ui-bg-white": !isDisabled
       }, "ui-h-11", "ui-p-2", "ui-border", "ui-text-sm", "ui-placeholder-slate-500", "ui-border-solid", "ui-transition-colors", "ui-duration-300", {
-        "ui-z-10": withSuffix !== "" || withPrefix !== "",
+        "ui-z-10": hasSuffix || hasPrefix,
         "ui-rounded": hasNoExtraContent,
-        "ui-rounded-l": withSuffix !== "",
-        "ui-rounded-r": withPrefix !== "",
-        "ui-order-2": withPrefix !== "",
-        "ui-order-1": withSuffix !== ""
-      }, "ui-shadow-default", className) })),
+        "ui-rounded-l": hasSuffix,
+        "ui-rounded-r": hasPrefix,
+        "ui-order-2": hasPrefix,
+        "ui-order-1": hasSuffix
+      }, "ui-shadow-default", className) }, rest)),
       React__namespace.default.createElement(
         "div",
         { className: "ui-absolute ui-right-0 ui-top-1/2", style: {
@@ -1600,12 +1571,48 @@ const Input = React__namespace.default.forwardRef((_a, ref) => {
         React__namespace.default.createElement(CrossIcon, { className: classNames__default.default("ui-mr-3 ui-h-6 ui-w-6 ui-cursor-pointer ui-text-slate-300", {
           "ui-block": isClearIconVisible,
           "ui-hidden": !isClearIconVisible
-        }), onClick: clearField })
+        }), onClick: onClickClearField })
       )
     )
   );
 });
 
+const Input = React__namespace.default.forwardRef((_a, ref) => {
+  var { withSuffix = "", withPrefix = "", clearable = false, isDisabled = false, name, value = "", onChange, asFormField, maxLength } = _a, otherProps = __rest(_a, ["withSuffix", "withPrefix", "clearable", "isDisabled", "name", "value", "onChange", "asFormField", "maxLength"]);
+  const [innerValue, setInnerValue] = React.useState(value);
+  React.useEffect(() => {
+    setInnerValue(value);
+  }, [value]);
+  const clearField = () => {
+    setInnerValue("");
+    onChange === null || onChange === void 0 ? void 0 : onChange({
+      target: {
+        name: name || "",
+        value: ""
+      },
+      currentTarget: {
+        name: name || "",
+        value: ""
+      }
+    });
+  };
+  const handleChangeEvent = (event) => {
+    setInnerValue(event.currentTarget.value);
+    onChange === null || onChange === void 0 ? void 0 : onChange(asFormField ? event.currentTarget.value : {
+      target: {
+        name: name || "",
+        value: event.currentTarget.value
+      },
+      currentTarget: {
+        name: name || "",
+        value: event.currentTarget.value
+      }
+    });
+  };
+  const isClearIconVisible = clearable && !!innerValue;
+  return React__namespace.default.createElement(StyledInput, Object.assign({ "data-test-id": `input-${name}`, name, value: innerValue, onChange: handleChangeEvent, ref, size: maxLength, disabled: isDisabled, isClearIconVisible, onClickClearField: clearField, prefix: withPrefix, suffix: withSuffix }, otherProps));
+});
+
 const SearchInput = React__namespace.default.forwardRef((props, ref) => {
   var _a;
   return React__namespace.default.createElement(Input, Object.assign({}, props, { icon: "SearchIcon", type: "text", width: (_a = props.width) !== null && _a !== void 0 ? _a : "xl", clearable: true, ref }));
@@ -6236,6 +6243,7 @@ exports.StarIcon = StarIcon;
 exports.StatusColoredIcon = StatusColoredIcon;
 exports.StatusIndicator = StatusIndicator;
 exports.Steps = Steps;
+exports.StyledInput = StyledInput;
 exports.Switcher = Switcher;
 exports.TOASTER_TYPE_OPTIONS = TOASTER_TYPE_OPTIONS;
 exports.Tabbar = Tabbar;