@luscii-healthtech/web-ui 2.31.0 → 2.32.0

package/dist/components/Form/form.types.d.ts

@@ -6,6 +6,7 @@ import { SelectProps } from "../Select/SelectV2";
 import { ImagePickerProps } from "../ImagePicker/ImagePicker";
 import { PartialProperties } from "../../types/general.types";
 export declare type AllowedTextInputTypes = Extract<HTMLInputTypeAttribute, "email" | "number" | "password" | "text">;
+export declare type FormFieldWidth = "sm" | "md" | "lg" | "xl" | "full";
 export interface GenericFormProps<TFieldValues extends FieldValues> {
     fields: FormFieldProps<TFieldValues>[];
     onValid: SubmitHandler<TFieldValues>;

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

@@ -1,6 +1,7 @@
 import React from "react";
 import { AllowedTextInputTypes } from "../Form/form.types";
 import { IconProps } from "../Icons/types/IconProps.type";
+import { FormFieldWidth } from "../Form/form.types";
 import "./Input.css";
 export declare const INPUT_TYPES: Record<string, AllowedTextInputTypes>;
 /**
@@ -27,6 +28,7 @@ export interface InputProps extends CustomHTMLInputProps {
     withPrefix?: string;
     withSuffix?: string;
     icon?: React.VoidFunctionComponent<IconProps>;
+    width?: FormFieldWidth;
     /**
      * Check the `asFormField` prop of this component to understand why this signature.
      */

package/dist/components/Select/SelectV2.d.ts

@@ -8,12 +8,14 @@ import React from "react";
  * bundle the svg assets used here, and we end up with some broken style.
  */
 import "./Select.scss";
+import { FormFieldWidth } from "../Form/form.types";
 interface OptionMinimal {
     value: any;
     label?: string;
 }
 export interface SelectProps<Option extends OptionMinimal = OptionMinimal, IsMulti extends boolean = any, Group extends GroupBase<Option> = GroupBase<Option>> extends Props<Option, IsMulti, Group> {
     isError?: boolean;
+    width?: FormFieldWidth;
 }
 /**
  * A wrapper around react-select to style it according to our design specification.

package/dist/web-ui-tailwind.css

@@ -2182,14 +2182,26 @@ video {
   width: 3rem;
 }
 
+.w-16 {
+  width: 4rem;
+}
+
 .w-24 {
   width: 6rem;
 }
 
+.w-32 {
+  width: 8rem;
+}
+
 .w-36 {
   width: 9rem;
 }
 
+.w-56 {
+  width: 14rem;
+}
+
 .w-60 {
   width: 15rem;
 }

package/dist/web-ui.cjs.development.js

@@ -1358,7 +1358,7 @@ var SearchIcon = function SearchIcon(props) {
 var css_248z$5 = ".input::-ms-clear {\n  display: none;\n}";
 styleInject(css_248z$5);
 
-var _excluded$3 = ["withSuffix", "withPrefix", "className", "clearable", "type", "isDisabled", "icon", "name", "value", "onChange", "isError", "asFormField"];
+var _excluded$3 = ["withSuffix", "withPrefix", "className", "clearable", "type", "isDisabled", "width", "icon", "name", "value", "onChange", "isError", "asFormField"];
 // Don't know why yet but it can be fixed later.
 
 var INPUT_TYPES = {
@@ -1379,6 +1379,8 @@ var Input = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
       type = _ref$type === void 0 ? "text" : _ref$type,
       _ref$isDisabled = _ref.isDisabled,
       isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
+      _ref$width = _ref.width,
+      width = _ref$width === void 0 ? "full" : _ref$width,
       icon = _ref.icon,
       name = _ref.name,
       _ref$value = _ref.value,
@@ -1457,7 +1459,13 @@ var Input = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     size: otherProps.maxLength,
     type: type,
     disabled: isDisabled,
-    className: classNames("input", "block", "flex-grow", {
+    className: classNames("input", "block", {
+      "w-16": width === "sm",
+      "w-32": width === "md",
+      "w-56": width === "lg",
+      "w-80": width === "xl",
+      "flex-grow": width === "full"
+    }, {
       "pl-12": icon,
       "pr-11": clearable
     }, {
@@ -1496,6 +1504,7 @@ var SearchInput = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
   return /*#__PURE__*/React__default.createElement(Input, _extends({}, props, {
     icon: SearchIcon,
     type: "text",
+    width: "xl",
     clearable: true,
     ref: ref
   }));
@@ -5404,7 +5413,7 @@ function SectionItemWithContent(props) {
   }));
 }
 
-var _excluded$j = ["isError", "styles", "options", "onChange", "value", "isMulti", "className"];
+var _excluded$j = ["isError", "styles", "options", "onChange", "value", "width", "isMulti", "className"];
 
 function generateCustomStyles$1(hasError, isIE11) {
   return {
@@ -5452,7 +5461,7 @@ function generateCustomStyles$1(hasError, isIE11) {
         "&:hover": {
           borderColor: "#9CA3AF",
           // selector for the chevron
-          "> [class*=\"IndicatorsContainer\"]": {
+          '> [class*="IndicatorsContainer"]': {
             opacity: 1
           }
         }
@@ -5507,6 +5516,8 @@ var Select = /*#__PURE__*/React__default.forwardRef(function (_ref, innerRef) {
       options = _ref.options,
       onChange = _ref.onChange,
       value = _ref.value,
+      _ref$width = _ref.width,
+      width = _ref$width === void 0 ? "full" : _ref$width,
       isMulti = _ref.isMulti,
       className = _ref.className,
       otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$j);
@@ -5544,7 +5555,13 @@ var Select = /*#__PURE__*/React__default.forwardRef(function (_ref, innerRef) {
     onChange: onChangeWrapped,
     value: valueWrapped,
     isMulti: isMulti,
-    className: classNames("customized-select", className)
+    className: classNames("customized-select", className, {
+      "w-16": width === "sm",
+      "w-32": width === "md",
+      "w-56": width === "lg",
+      "w-80": width === "xl",
+      "flex-grow": width === "full"
+    })
   }));
 });