hplx-react-elements-dev 1.0.45 → 1.0.47

package/dist/esm/addSuggestion/AddSuggestion.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { AddSuggestionProps } from "../types";
-declare const AddSuggestion: ({ isInputField, label, labelColor, labelSize, start_icon, height, width, end_icon, prefix, suffixButton, suffix, suffixDropdown, isSuffixEditable, suffixInputProps, suffixPlaceholder, handleSuggestionValChange, handleSuffixValChange, handleSuffixClick, char_count, onSuggestionClick, className, rows, hint_text_icon, hint_text, errorMsg, inputProps, inputFieldInputProps, options, suggestionValue, isborderRequired, isDynamicHeight, fieldColor, }: AddSuggestionProps) => JSX.Element;
+declare const AddSuggestion: ({ isInputField, label, labelColor, labelSize, start_icon, height, width, end_icon, prefix, suffixButton, suffix, suffixDropdown, isSuffixEditable, suffixInputProps, suffixPlaceholder, handleSuggestionValChange, handleSuffixValChange, handleSuffixClick, char_count, onSuggestionClick, className, rows, hint_text_icon, hint_text, errorMsg, inputProps, inputFieldInputProps, options, suggestionValue, isborderRequired, isDynamicHeight, fieldColor, suffixClassName, }: AddSuggestionProps) => JSX.Element;
 export default AddSuggestion;

package/dist/esm/datePicker/DatePicker.d.ts

@@ -3,5 +3,5 @@ import "react-date-range/dist/styles.css";
 import "react-date-range/dist/theme/default.css";
 import "../datePicker/DatePickerCSS.css";
 import { DatePickerProps } from "../types";
-declare const DatePicker: ({ disabledDates, selectDate, dateVar, minDate, maxDate, label, width, labelColor, labelSize, height, start_icon, end_icon, hint_text_icon, prefix, suffixButton, suffix, hint_text, char_count, errorMsg, suffixInputProps, suffixDropdown, isSuffixEditable, suffixPlaceholder, fieldColor, isborderRequired, }: DatePickerProps) => JSX.Element;
+declare const DatePicker: ({ disabledDates, selectDate, dateVar, minDate, maxDate, label, width, labelColor, labelSize, placeholder, height, start_icon, end_icon, hint_text_icon, prefix, suffixButton, suffix, hint_text, char_count, errorMsg, suffixInputProps, suffixDropdown, isSuffixEditable, suffixPlaceholder, fieldColor, isborderRequired, }: DatePickerProps) => JSX.Element;
 export default DatePicker;

package/dist/esm/dropdownField/DropdownField.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { DropdownFieldProps } from "../types";
-declare const DropdownField: ({ label, end_icon, hint_text_icon, empty_text, hint_text, value, onChange, disabled, placeholder, errorMsg, options, }: DropdownFieldProps) => JSX.Element;
+declare const DropdownField: ({ label, end_icon, hint_text_icon, empty_text, hint_text, value, onChange, disabled, placeholder, errorMsg, options, className }: DropdownFieldProps) => JSX.Element;
 export default DropdownField;

package/dist/esm/index.js

@@ -2143,9 +2143,11 @@ var InputField = function InputField(_a) {
       _g = _a.isSuffixEditable,
       isSuffixEditable = _g === void 0 ? false : _g,
       suffixPlaceholder = _a.suffixPlaceholder,
+      suffixClassName = _a.suffixClassName,
       fieldColor = _a.fieldColor,
       _h = _a.handleSuffixClick,
-      handleSuffixClick = _h === void 0 ? function (_) {} : _h;
+      handleSuffixClick = _h === void 0 ? function (_) {} : _h,
+      className = _a.className;
 
   var _j = inputProps || {},
       disabled = _j.disabled,
@@ -2245,7 +2247,7 @@ var InputField = function InputField(_a) {
     }, {
       children: jsxRuntime.exports.jsxs("div", __assign({
         "data-setid": "error-msg",
-        className: "hplxt-flex ".concat(isborderRequired ? "hplxt-shadow-xs ".concat(border ? border : "hplxt-border-1", " hplxt-rounded-lg") : "", " hplxt-overflow-hidden placeholder:hplxt-text-Gray-500 ").concat(errorMsg ? "hplxt-border-Error-300" : "hplxt-border-Gray-300", "   ").concat(height ? height : "hplxt-h-10", " ").concat(disabled ? "hplxt-bg-Gray-50" : "".concat(fieldColor ? fieldColor : "hplxt-bg-White", " ").concat(errorMsg ? "hover:hplxt-shadow-xs-error ".concat(active && "hplxt-shadow-xs-error") : " ".concat(isborderRequired ? "hover:hplxt-border-Primary-300 hover:hplxt-shadow-xs-primary ".concat(active && "hplxt-border-Primary-300 hplxt-shadow-xs-primary") : " ")))
+        className: "hplxt-flex ".concat(isborderRequired ? "hplxt-shadow-xs ".concat(border ? border : "hplxt-border-1", " hplxt-rounded-lg") : "", " hplxt-overflow-hidden placeholder:hplxt-text-Gray-500 ").concat(errorMsg ? "hplxt-border-Error-300" : "hplxt-border-Gray-300", "   ").concat(height ? height : "hplxt-h-10", " ").concat(disabled ? "hplxt-bg-Gray-50" : "".concat(fieldColor ? fieldColor : "hplxt-bg-White", " ").concat(errorMsg ? "hover:hplxt-shadow-xs-error ".concat(active && "hplxt-shadow-xs-error") : " ".concat(isborderRequired ? "hover:hplxt-border-Primary-300 hover:hplxt-shadow-xs-primary ".concat(active && "hplxt-border-Primary-300 hplxt-shadow-xs-primary") : " ")), " ").concat(className)
       }, {
         children: [Boolean(prefix) && jsxRuntime.exports.jsx("div", __assign({
           "data-testid": "input-prefix",
@@ -2269,7 +2271,7 @@ var InputField = function InputField(_a) {
             background: "".concat(fieldColor === null || fieldColor === void 0 ? void 0 : fieldColor.split("-")[1], " "),
             width: "".concat(width)
           },
-          className: "hplxt-flex-1 hplxt-pl-[14px] ".concat(fieldColor, " placeholder:hplxt-text-Indigo-500 hplxt-opacity-50   hplxt-pr-[12px] hplxt-py-1 focus-visible:hplxt-outline-0 hplxt-border-0 focus:hplxt-border-0"),
+          className: "hplxt-flex-1 hplxt-pl-[14px] ".concat(fieldColor, " placeholder:hplxt-text-Indigo-500 placeholder:hplxt-opacity-50   hplxt-pr-[12px] hplxt-py-1 focus-visible:hplxt-outline-0 hplxt-border-0 focus:hplxt-border-0"),
           "data-testid": "text-input"
         }, inputProps, {
           onFocus: handleFocus,
@@ -2296,7 +2298,7 @@ var InputField = function InputField(_a) {
         })), isSuffixEditable && jsxRuntime.exports.jsxs("div", {
           children: [jsxRuntime.exports.jsx("div", __assign({
             "data-testid": "input-suffix",
-            className: "".concat(fieldColor ? fieldColor : "hplxt-bg-Gray-50", "  hplxt-bg-none hplxt-border-l-1 hplxt-border-l-Gray-300 hplxt-text-Gray-500 hplxt-flex hplxt-items-center hplxt-pr-3 hplxt-pl-[14px]"),
+            className: "".concat(fieldColor ? fieldColor : "hplxt-bg-Gray-50", "  hplxt-bg-none hplxt-border-l-1 hplxt-border-l-Gray-300 hplxt-text-Gray-500 hplxt-flex hplxt-items-center hplxt-pr-3 hplxt-pl-[14px] ").concat(suffixClassName),
             onClick: function onClick() {
               return setShowSuffixDropdown(true);
             }
@@ -4093,7 +4095,8 @@ var DropdownField = function DropdownField(_a) {
       placeholder = _a.placeholder,
       _f = _a.errorMsg,
       errorMsg = _f === void 0 ? "" : _f,
-      options = _a.options;
+      options = _a.options,
+      className = _a.className;
 
   var _g = useState(false),
       openDropdown = _g[0],
@@ -4124,7 +4127,7 @@ var DropdownField = function DropdownField(_a) {
     }, {
       children: [jsxRuntime.exports.jsxs("div", __assign({
         onClick: handleFieldClick,
-        className: "hplxt-flex-1 hplxt-flex hplxt-items-center hplxt-pl-2 placeholder:hplxt-text-Gray-500 hplxt-justify-between hplxt-border-1 ".concat(errorMsg ? "hplxt-border-Error-300" : "hplxt-border-Gray-300", " hplxt-shadow-xs hplxt-rounded-lg  hplxt-h-10 ").concat(disabled ? "hplxt-bg-Gray-50 hplxt-cursor-not-allowed" : "hplxt-bg-White hplxt-cursor-pointer ".concat(errorMsg ? "hover:hplxt-shadow-xs-error" : "".concat(openDropdown ? "hplxt-border-Primary-300 hplxt-shadow-xs-primary" : "", " hover:hplxt-border-Primary-300 hover:hplxt-shadow-xs-primary")))
+        className: "hplxt-flex-1 hplxt-flex hplxt-items-center hplxt-pl-2 placeholder:hplxt-text-Gray-500 hplxt-justify-between hplxt-border-1 ".concat(errorMsg ? "hplxt-border-Error-300" : "hplxt-border-Gray-300", " hplxt-shadow-xs hplxt-rounded-lg  hplxt-h-10 ").concat(disabled ? "hplxt-bg-Gray-50 hplxt-cursor-not-allowed" : "hplxt-bg-White hplxt-cursor-pointer ".concat(errorMsg ? "hover:hplxt-shadow-xs-error" : "".concat(openDropdown ? "hplxt-border-Primary-300 hplxt-shadow-xs-primary" : "", " hover:hplxt-border-Primary-300 hover:hplxt-shadow-xs-primary")), " ").concat(className)
       }, {
         children: [!!value ? jsxRuntime.exports.jsx("div", __assign({
           className: "hplxt-text-Gray-900"
@@ -4291,35 +4294,38 @@ var CollapsibleCard = function CollapsibleCard(props) {
   var _a = props || {},
       _b = _a.direction,
       direction = _b === void 0 ? "down" : _b,
-      _c = _a.label,
-      label = _c === void 0 ? "" : _c,
       header = _a.header,
       children = _a.children,
       footer = _a.footer,
       title = _a.title,
+      _c = _a.currentState,
+      currentState = _c === void 0 ? function () {} : _c,
       _d = _a.icon,
       icon = _d === void 0 ? "Only" : _d,
       _e = _a.openIcon,
       openIcon = _e === void 0 ? "hx_add" : _e,
-      _f = _a.closeIcon,
-      closeIcon = _f === void 0 ? "hx_remove" : _f,
-      _g = _a.width,
-      width = _g === void 0 ? "" : _g,
-      _h = _a.height,
-      height = _h === void 0 ? "" : _h,
-      _j = _a.disabled,
-      disabled = _j === void 0 ? false : _j,
+      _f = _a.label,
+      label = _f === void 0 ? "" : _f,
+      _g = _a.closeIcon,
+      closeIcon = _g === void 0 ? "hx_remove" : _g,
+      _h = _a.width,
+      width = _h === void 0 ? "" : _h,
+      _j = _a.height,
+      height = _j === void 0 ? "" : _j,
+      _k = _a.disabled,
+      disabled = _k === void 0 ? false : _k,
       handleCollapsibleDisplay = _a.handleCollapsibleDisplay,
       headerRightChildren = _a.headerRightChildren;
 
-  var _k = useState(false),
-      active = _k[0],
-      setActive = _k[1];
+  var _l = useState(false),
+      active = _l[0],
+      setActive = _l[1];
 
   var OnButtonClick = function OnButtonClick() {
     setActive(function (prevValue) {
       return !prevValue;
     });
+    currentState(active);
   };
 
   var getWidth = function getWidth(w) {
@@ -4392,14 +4398,14 @@ var CollapsibleCard = function CollapsibleCard(props) {
         onAnimationEnd: function onAnimationEnd() {
           console.log("onAnimationEnd called");
         },
-        className: "".concat(active ? "hplxt-max-h-[1000px] hplxt-overflow-visible" : "hplxt-max-h-0 hplxt-overflow-hidden", " ").concat(active ? "hplxt-p-5" : "hplxt-p-0", " hplxt-transition-all hplxt-duration-500 hplxt-ease-in-out hplxt-mt-5 ").concat(getWidth(width), " ").concat(getHeight(height), " hplxt-text-ellipsis\n          ")
+        className: "".concat(active ? "hplxt-max-h-[1000px] hplxt-overflow-visible" : "hplxt-max-h-0 hplxt-overflow-hidden", " ").concat(active ? "hplxt-p-4" : "hplxt-p-0", " hplxt-transition-all hplxt-duration-500 hplxt-ease-in-out ").concat(getWidth(width), " ").concat(getHeight(height), " hplxt-text-ellipsis\n          ")
       }, {
         children: [header && jsxRuntime.exports.jsx("div", __assign({
-          className: "hplxt-flex hplxt-flex-1 hplxt-m-1 hplxt-p-4"
+          className: "hplxt-flex hplxt-flex-1 hplxt-mx-1 hplxt-px-4 hplxt-pb-4"
         }, {
           children: header
         })), children, footer && jsxRuntime.exports.jsx("div", __assign({
-          className: "hplxt-flex hplxt-flex-1 hplxt-m-1 hplxt-p-4"
+          className: "hplxt-flex hplxt-flex-1 hplxt-mx-1 hplxt-p-4"
         }, {
           children: footer
         }))]
@@ -4429,11 +4435,11 @@ var CollapsibleCard = function CollapsibleCard(props) {
           }
         }), active && jsxRuntime.exports.jsxs(jsxRuntime.exports.Fragment, {
           children: [jsxRuntime.exports.jsx("div", __assign({
-            className: "hplxt-flex hplxt-flex-1 hplxt-m-1 hplxt-p-4"
+            className: "hplxt-flex hplxt-flex-1 hplxt-mx-1 hplxt-p-4"
           }, {
             children: header
           })), children, jsxRuntime.exports.jsx("div", __assign({
-            className: "hplxt-flex hplxt-flex-1 hplxt-m-1 hplxt-p-4"
+            className: "hplxt-flex hplxt-flex-1 hplxt-mx-1 hplxt-p-4"
           }, {
             children: footer
           }))]
@@ -5263,7 +5269,8 @@ var AddSuggestion = function AddSuggestion(_a) {
       isborderRequired = _r === void 0 ? true : _r,
       _s = _a.isDynamicHeight,
       isDynamicHeight = _s === void 0 ? false : _s,
-      fieldColor = _a.fieldColor;
+      fieldColor = _a.fieldColor,
+      suffixClassName = _a.suffixClassName;
 
   var _t = useState(false),
       showDropdown = _t[0],
@@ -5357,6 +5364,7 @@ var AddSuggestion = function AddSuggestion(_a) {
       isborderRequired: isborderRequired,
       isSuffixEditable: isSuffixEditable,
       suffixInputProps: suffixInputProps,
+      suffixClassName: suffixClassName,
       inputProps: __assign(__assign({}, inputFieldInputProps), {
         onChange: changeHandler,
         value: suggestionValue
@@ -16941,6 +16949,7 @@ var DatePicker = function DatePicker(_a) {
       width = _a.width,
       labelColor = _a.labelColor,
       labelSize = _a.labelSize,
+      placeholder = _a.placeholder,
       _c = _a.height,
       height = _c === void 0 ? "" : _c,
       _d = _a.start_icon,
@@ -17012,10 +17021,10 @@ var DatePicker = function DatePicker(_a) {
     className: ""
   }, {
     children: [jsxRuntime.exports.jsx("div", __assign({
-      className: "hplxt-relative hplxt-w-[189px]"
+      className: "hplxt-relative "
     }, {
       children: jsxRuntime.exports.jsx(InputField, {
-        width: width,
+        width: width ? width : "8em",
         label: label,
         labelColor: labelColor,
         labelSize: labelSize,
@@ -17035,7 +17044,7 @@ var DatePicker = function DatePicker(_a) {
         isborderRequired: isborderRequired,
         start_icon: start_icon,
         inputProps: {
-          placeholder: "Select date",
+          placeholder: placeholder ? placeholder : "select date",
           onClick: inputClick,
           onFocus: inputFocus,
           value: date ? dayjs(date).format("MMM DD, YYYY") : selectDate === null || selectDate === void 0 ? void 0 : selectDate.toString()

package/dist/esm/inputField/InputField.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { InputFieldProps } from "../types";
-declare const InputField: ({ label, labelColor, labelSize, height, start_icon, width, border, end_icon, hint_text_icon, prefix, suffixButton, suffix, hint_text, char_count, errorMsg, inputProps, suffixInputProps, isborderRequired, suffixDropdown, isSuffixEditable, suffixPlaceholder, fieldColor, handleSuffixClick, }: InputFieldProps) => JSX.Element;
+declare const InputField: ({ label, labelColor, labelSize, height, start_icon, width, border, end_icon, hint_text_icon, prefix, suffixButton, suffix, hint_text, char_count, errorMsg, inputProps, suffixInputProps, isborderRequired, suffixDropdown, isSuffixEditable, suffixPlaceholder, suffixClassName, fieldColor, handleSuffixClick, className }: InputFieldProps) => JSX.Element;
 export default InputField;

package/dist/esm/types.d.ts

@@ -2,6 +2,7 @@ import { ReactNode } from "react";
 export interface InputFieldProps {
     label?: string;
     fieldColor?: string;
+    suffixClassName?: string;
     width?: string | number;
     border?: string;
     labelSize?: typographyTextType;
@@ -24,8 +25,10 @@ export interface InputFieldProps {
     handleSuffixClick?: (value: any) => void;
     isSuffixEditable?: boolean;
     handleSuffixValChange?: (value: any) => void;
+    className?: string;
 }
 export interface DatePickerProps {
+    placeholder?: string;
     disabledDates?: Date[];
     selectDate?: any;
     dateVar: (val: Date) => void;
@@ -231,6 +234,7 @@ export interface DropdownFieldProps {
     placeholder?: string;
     empty_text?: string;
     options?: Array<DropdownItemsProps>;
+    className?: string;
 }
 export interface CardType {
     title: string;
@@ -238,6 +242,7 @@ export interface CardType {
 type CollapseDirection = "up" | "down" | "left" | "right";
 export interface CollapsibleCardProps {
     title?: ReactNode;
+    currentState?: (val: boolean) => void;
     direction?: CollapseDirection;
     label?: string;
     children?: ReactNode;
@@ -247,7 +252,7 @@ export interface CollapsibleCardProps {
     closeIcon?: string;
     width?: string;
     height?: string;
-    icon?: iconType;
+    icon: iconType;
     disabled?: boolean;
     handleCollapsibleDisplay?: Function;
     headerRightChildren?: ReactNode;
@@ -377,6 +382,7 @@ export interface AddSuggestionProps {
     inputProps?: React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>;
     inputFieldInputProps?: React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
     suffixInputProps?: React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
+    suffixClassName?: string;
     onSuggestionClick?: (selectedValue: any) => void;
     options?: Array<DropdownItemsProps>;
     suggestionValue?: string;

package/package.json

@@ -9,7 +9,7 @@
     "frontend",
     "healthplix"
   ],
-  "version": "1.0.45",
+  "version": "1.0.47",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/esm/index.d.ts",