@luscii-healthtech/web-ui 15.1.1 → 16.0.0

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

@@ -3,7 +3,6 @@ import { AllowedTextInputTypes } from "../Form/form.types";
 import type { IconKey, IconProps } from "../Icons/types/IconProps.type";
 import { FormFieldWidth } from "../Form/form.types";
 import "./Input.css";
-export declare const INPUT_TYPES: Record<string, AllowedTextInputTypes>;
 /**
  * It's very complicated to tap into the onChange events of inputs,
  * so I omit the type it requires and add a easier one to deal with.

package/dist/index.d.ts

@@ -23,7 +23,7 @@ export { default as DatePicker } from "./components/Datepicker/Datepicker";
 export { default as Dropdown } from "./components/Dropdown/Dropdown";
 export { EmptyListMessage } from "./components/EmptyListMessage/EmptyListMessage";
 export { InfoField } from "./components/InfoField/InfoField";
-export { INPUT_TYPES, default as Input } from "./components/Input/Input";
+export { default as Input } from "./components/Input/Input";
 export { default as Line } from "./components/Line/Line";
 export { Table, TableProps } from "./components/Table/Table";
 export { TableFieldConfig, TableFieldContent, TableFieldText, TableFieldAction, } from "./components/Table/Table.types";

package/dist/index.development.js

@@ -1351,12 +1351,6 @@ const List = (props) => {
 var css_248z$h = ".input::-ms-clear {\n  display: none;\n}";
 styleInject(css_248z$h);
 
-const INPUT_TYPES = {
-  EMAIL: "email",
-  NUMBER: "number",
-  PASSWORD: "password",
-  TEXT: "text"
-};
 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 === "";
@@ -1393,54 +1387,62 @@ const Input = React__namespace.default.forwardRef((_a, ref) => {
   const isClearIconVisible = clearable && innerValue;
   return React__namespace.default.createElement(
     FlexRow,
-    { spacing: "none", "data-test-id": "input-component-container", position: "relative", stretch: false },
+    { 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": withPrefix !== "",
-      "ui-order-2": withSuffix !== "",
+      "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),
-    icon && React__namespace.default.createElement(
-      "div",
-      { className: "ui-absolute ui-left-4 ui-top-1/2", style: {
-        transform: "translateY(-50%)"
-      } },
-      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", {
-      "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-bg-slate-50 ui-text-slate-400": isDisabled,
-      "ui-text-slate-800": !isDisabled,
-      "ui-border-input-border": !isDisabled && !isError,
-      "hover:ui-border-input-border-dark": !isDisabled,
-      "ui-border-red-700": isError,
-      "focus:ui-outline-negative": isError,
-      "focus:ui-border-blue-800": !isError,
-      "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-rounded": hasNoExtraContent,
-      "ui-rounded-l": withSuffix !== "",
-      "ui-rounded-r": withPrefix !== "",
-      "ui-order-2": withPrefix !== "",
-      "ui-order-1": withSuffix !== ""
-    }, "ui-shadow-default", className) })),
     React__namespace.default.createElement(
       "div",
-      { className: "ui-absolute ui-right-0 ui-top-1/2", style: {
-        transform: "translateY(-50%)"
-      } },
-      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 })
+      { className: classNames__default.default("ui-relative", {
+        "ui-flex ui-flex-grow": width === "full"
+      }) },
+      icon && React__namespace.default.createElement(
+        "div",
+        { className: classNames__default.default("ui-absolute ui-left-4 ui-top-1/2", {
+          "ui-flex-grow": width === "full"
+        }), style: {
+          transform: "translateY(-50%)",
+          zIndex: 20
+        } },
+        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", {
+        "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-bg-slate-50 ui-text-slate-400": isDisabled,
+        "ui-text-slate-800": !isDisabled,
+        "ui-border-input-border": !isDisabled && !isError,
+        "hover:ui-border-input-border-dark": !isDisabled,
+        "ui-border-red-700": isError,
+        "focus:ui-outline-negative": isError,
+        "focus:ui-border-blue-800": !isError,
+        "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-rounded": hasNoExtraContent,
+        "ui-rounded-l": withSuffix !== "",
+        "ui-rounded-r": withPrefix !== "",
+        "ui-order-2": withPrefix !== "",
+        "ui-order-1": withSuffix !== ""
+      }, "ui-shadow-default", className) })),
+      React__namespace.default.createElement(
+        "div",
+        { className: "ui-absolute ui-right-0 ui-top-1/2", style: {
+          transform: "translateY(-50%)"
+        } },
+        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 })
+      )
     )
   );
 });
@@ -1664,7 +1666,7 @@ const AccordionList = (_a) => {
       "div",
       { className: "ui-flex ui-flex-col ui-space-y-4 ui-border-b ui-border-slate-200 ui-p-6" },
       title && React__namespace.default.createElement(Title, { text: title, type: "sm" }),
-      isSearchEnabled && React__namespace.default.createElement(SearchInput, { className: "ui-w-full", value: searchString, placeholder: searchPlaceholder, onChange: (e) => {
+      isSearchEnabled && React__namespace.default.createElement(SearchInput, { width: "full", value: searchString, placeholder: searchPlaceholder, onChange: (e) => {
         setSearchString(typeof e === "string" ? e : e.currentTarget.value);
       } }),
       buttonProps && React__namespace.default.createElement(
@@ -5642,7 +5644,6 @@ exports.GroupColoredIcon = GroupColoredIcon;
 exports.GroupIcon = GroupIcon;
 exports.HamburgerIcon = HamburgerIcon;
 exports.HeartIcon = HeartIcon;
-exports.INPUT_TYPES = INPUT_TYPES;
 exports.Icon = Icon;
 exports.Image = Image$1;
 exports.ImageIcon = ImageIcon;