cr-ui-lib 1.1.35 → 1.1.36

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/index.d.mts +2 -0
  2. package/dist/index.d.ts +2 -0
  3. package/dist/index.js +140 -94
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +140 -94
  6. package/dist/index.mjs.map +1 -1
  7. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -138,6 +138,7 @@ interface CommonInputProps extends React$1.HTMLAttributes<HTMLInputElement | HTM
138
138
  borderWeight?: string;
139
139
  error?: string;
140
140
  dollarClass?: string;
141
+ labelClass?: string;
141
142
  }
142
143
  declare const CommonInput: React$1.FC<CommonInputProps>;
143
144
 
@@ -183,6 +184,7 @@ interface MultipleAutoSuggestionInputProps {
183
184
  dropdownOpenClass?: string;
184
185
  selectedItemsClass?: string;
185
186
  removeIconClass?: string;
187
+ usePortal?: boolean;
186
188
  }
187
189
  declare const MultipleAutoSuggestionInput: React$1.FC<MultipleAutoSuggestionInputProps>;
188
190
 
package/dist/index.d.ts CHANGED
@@ -138,6 +138,7 @@ interface CommonInputProps extends React$1.HTMLAttributes<HTMLInputElement | HTM
138
138
  borderWeight?: string;
139
139
  error?: string;
140
140
  dollarClass?: string;
141
+ labelClass?: string;
141
142
  }
142
143
  declare const CommonInput: React$1.FC<CommonInputProps>;
143
144
 
@@ -183,6 +184,7 @@ interface MultipleAutoSuggestionInputProps {
183
184
  dropdownOpenClass?: string;
184
185
  selectedItemsClass?: string;
185
186
  removeIconClass?: string;
187
+ usePortal?: boolean;
186
188
  }
187
189
  declare const MultipleAutoSuggestionInput: React$1.FC<MultipleAutoSuggestionInputProps>;
188
190
 
package/dist/index.js CHANGED
@@ -1706,6 +1706,7 @@ var CommonInput = ({
1706
1706
  labelColor = "text-[#131414]",
1707
1707
  borderWeight = "border-[2px]",
1708
1708
  error,
1709
+ labelClass,
1709
1710
  ...rest
1710
1711
  }) => {
1711
1712
  const inputClasses = tailwindMerge.twMerge(
@@ -1719,7 +1720,17 @@ var CommonInput = ({
1719
1720
  className
1720
1721
  );
1721
1722
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full", children: [
1722
- label && /* @__PURE__ */ jsxRuntime.jsx("p", { className: tailwindMerge.twMerge(labelColor, "text-[14px] font-semibold mb-1"), children: label }),
1723
+ label && /* @__PURE__ */ jsxRuntime.jsx(
1724
+ "p",
1725
+ {
1726
+ className: tailwindMerge.twMerge(
1727
+ labelColor,
1728
+ "text-[14px] font-semibold mb-1",
1729
+ labelClass
1730
+ ),
1731
+ children: label
1732
+ }
1733
+ ),
1723
1734
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
1724
1735
  hasDollar && !isTextarea && /* @__PURE__ */ jsxRuntime.jsx(
1725
1736
  "span",
@@ -2938,7 +2949,9 @@ var MultipleAutoSuggestionInput = ({
2938
2949
  buttonClass = "",
2939
2950
  dropdownOpenClass = "",
2940
2951
  selectedItemsClass = "",
2941
- removeIconClass = ""
2952
+ removeIconClass = "",
2953
+ usePortal = true
2954
+ // ✅ Destructured prop with default true
2942
2955
  }) => {
2943
2956
  var _a;
2944
2957
  const [filteredOptions, setFilteredOptions] = React.useState(options);
@@ -2954,6 +2967,10 @@ var MultipleAutoSuggestionInput = ({
2954
2967
  React.useEffect(() => {
2955
2968
  const handleClickOutside = (event) => {
2956
2969
  if (containerRef.current && !containerRef.current.contains(event.target)) {
2970
+ const portalDropdown = document.querySelector(".portal-dropdown-menu");
2971
+ if (portalDropdown && portalDropdown.contains(event.target)) {
2972
+ return;
2973
+ }
2957
2974
  setTimeout(() => setIsDropdownOpen(false), 150);
2958
2975
  }
2959
2976
  };
@@ -2976,9 +2993,17 @@ var MultipleAutoSuggestionInput = ({
2976
2993
  } else if (!isDropdownAutoOpen) {
2977
2994
  setIsDropdownOpen(false);
2978
2995
  }
2979
- }, [inputValue, options, selectedItems]);
2996
+ }, [
2997
+ inputValue,
2998
+ options,
2999
+ selectedItems,
3000
+ isDropdownAutoOpen,
3001
+ isMulti,
3002
+ enableTypingSingle,
3003
+ selectedList
3004
+ ]);
2980
3005
  React.useLayoutEffect(() => {
2981
- if (isDropdownOpen && containerRef.current) {
3006
+ if (isDropdownOpen && containerRef.current && usePortal) {
2982
3007
  const rect = containerRef.current.getBoundingClientRect();
2983
3008
  setDropdownPosition({
2984
3009
  top: rect.bottom + window.scrollY,
@@ -2986,7 +3011,7 @@ var MultipleAutoSuggestionInput = ({
2986
3011
  width: rect.width
2987
3012
  });
2988
3013
  }
2989
- }, [isDropdownOpen]);
3014
+ }, [isDropdownOpen, usePortal]);
2990
3015
  const handleInputChange = (e) => {
2991
3016
  setInputValue(e.target.value);
2992
3017
  onChange(e);
@@ -2999,16 +3024,27 @@ var MultipleAutoSuggestionInput = ({
2999
3024
  const DropdownMenu = /* @__PURE__ */ jsxRuntime.jsx(
3000
3025
  "div",
3001
3026
  {
3002
- style: {
3027
+ style: usePortal ? {
3028
+ // Portal style
3003
3029
  position: "absolute",
3004
3030
  top: `${dropdownPosition.top + 4}px`,
3005
- // position based on state
3006
3031
  left: `${dropdownPosition.left}px`,
3007
3032
  width: `${dropdownPosition.width}px`
3033
+ } : {
3034
+ // Non-portal (relative) style
3035
+ position: "absolute",
3036
+ top: "100%",
3037
+ // Position relative to the parent
3038
+ left: 0,
3039
+ marginTop: "4px",
3040
+ // Add a small gap
3041
+ width: "100%",
3042
+ zIndex: 99
3008
3043
  },
3009
3044
  className: tailwindMerge.twMerge(
3010
- "w-full rounded-lg bg-white shadow-lg z-50 max-h-60 overflow-auto border border-[#E2E2E2]",
3011
- // Increased z-index
3045
+ "rounded-lg bg-white shadow-lg z-50 max-h-60 overflow-auto border border-[#E2E2E2]",
3046
+ usePortal ? "portal-dropdown-menu" : "",
3047
+ // Added class for click-outside check
3012
3048
  dropdownOpenClass
3013
3049
  ),
3014
3050
  children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-1 rounded-lg border-[#E2E2E2]", children: filteredOptions.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -3033,7 +3069,7 @@ var MultipleAutoSuggestionInput = ({
3033
3069
  children: label
3034
3070
  }
3035
3071
  ),
3036
- /* @__PURE__ */ jsxRuntime.jsx(
3072
+ /* @__PURE__ */ jsxRuntime.jsxs(
3037
3073
  "div",
3038
3074
  {
3039
3075
  ref: containerRef,
@@ -3045,34 +3081,81 @@ var MultipleAutoSuggestionInput = ({
3045
3081
  setIsDropdownOpen(true);
3046
3082
  }
3047
3083
  },
3048
- children: /* @__PURE__ */ jsxRuntime.jsxs(
3049
- "div",
3050
- {
3051
- className: tailwindMerge.twMerge(
3052
- "border border-[#E2E2E2] focus-within:border-[#4683B4] rounded-lg p-1.5 bg-[#F8F8F8] cursor-pointer flex flex-wrap items-center gap-2 min-h-[2.5rem]",
3053
- buttonClass
3054
- ),
3055
- children: [
3056
- isMulti && Array.isArray(selectedList) ? selectedList.map((itemKey) => {
3057
- const option = options.find((opt) => opt.key === itemKey);
3058
- return /* @__PURE__ */ jsxRuntime.jsxs(
3084
+ children: [
3085
+ /* @__PURE__ */ jsxRuntime.jsxs(
3086
+ "div",
3087
+ {
3088
+ className: tailwindMerge.twMerge(
3089
+ "border border-[#E2E2E2] focus-within:border-[#4683B4] rounded-lg p-1.5 bg-[#F8F8F8] cursor-pointer flex flex-wrap items-center gap-2 min-h-[2.5rem]",
3090
+ buttonClass
3091
+ ),
3092
+ children: [
3093
+ isMulti && Array.isArray(selectedList) ? selectedList.map((itemKey) => {
3094
+ const option = options.find((opt) => opt.key === itemKey);
3095
+ return /* @__PURE__ */ jsxRuntime.jsxs(
3096
+ "div",
3097
+ {
3098
+ className: tailwindMerge.twMerge(
3099
+ "flex flex border-[#E2E2E2] border items-center px-2 py-1 bg-white text-gray-700 rounded-md text-xs font-medium",
3100
+ selectedItemsClass
3101
+ ),
3102
+ children: [
3103
+ option ? option.name : itemKey,
3104
+ onRemove && /* @__PURE__ */ jsxRuntime.jsx(
3105
+ "button",
3106
+ {
3107
+ onClick: (e) => {
3108
+ e.stopPropagation();
3109
+ onRemove(itemKey);
3110
+ },
3111
+ className: tailwindMerge.twMerge(
3112
+ "ml-1 text-gray-500 hover:text-gray-700 bg-white",
3113
+ removeIconClass
3114
+ ),
3115
+ children: /* @__PURE__ */ jsxRuntime.jsx(
3116
+ "svg",
3117
+ {
3118
+ xmlns: "http://www.w3.org/2000/svg",
3119
+ width: "14",
3120
+ height: "14",
3121
+ viewBox: "0 0 14 14",
3122
+ fill: "none",
3123
+ children: /* @__PURE__ */ jsxRuntime.jsx(
3124
+ "path",
3125
+ {
3126
+ d: "M11.0837 3.739L10.2612 2.9165L7.00033 6.17734L3.73949 2.9165L2.91699 3.739L6.17783 6.99984L2.91699 10.2607L3.73949 11.0832L7.00033 7.82234L10.2612 11.0832L11.0837 10.2607L7.82283 6.99984L11.0837 3.739Z",
3127
+ fill: "#323232"
3128
+ }
3129
+ )
3130
+ }
3131
+ )
3132
+ }
3133
+ )
3134
+ ]
3135
+ },
3136
+ itemKey
3137
+ );
3138
+ }) : selectedList.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
3059
3139
  "div",
3060
3140
  {
3061
3141
  className: tailwindMerge.twMerge(
3062
- "flex flex border-[#E2E2E2] border items-center px-2 py-1 bg-white text-gray-700 rounded-md text-xs font-medium",
3142
+ "flex border-[#E2E2E2] border items-center px-2 py-1 bg-white text-gray-700 rounded-md text-xs font-medium",
3063
3143
  selectedItemsClass
3064
3144
  ),
3065
3145
  children: [
3066
- option ? option.name : itemKey,
3146
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-gray-800", children: ((_a = options.find((opt) => opt.key === selectedList[0])) == null ? void 0 : _a.name) || selectedList[0] }),
3067
3147
  onRemove && /* @__PURE__ */ jsxRuntime.jsx(
3068
3148
  "button",
3069
3149
  {
3070
3150
  onClick: (e) => {
3151
+ var _a2;
3071
3152
  e.stopPropagation();
3072
- onRemove(itemKey);
3153
+ onRemove(
3154
+ ((_a2 = options.find((opt) => opt.key === selectedList[0])) == null ? void 0 : _a2.name) || selectedList[0]
3155
+ );
3073
3156
  },
3074
3157
  className: tailwindMerge.twMerge(
3075
- "ml-1 text-gray-500 hover:text-gray-700 bg-white",
3158
+ "ml-1 text-gray-500 hover:text-gray-700",
3076
3159
  removeIconClass
3077
3160
  ),
3078
3161
  children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -3095,77 +3178,33 @@ var MultipleAutoSuggestionInput = ({
3095
3178
  }
3096
3179
  )
3097
3180
  ]
3098
- },
3099
- itemKey
3100
- );
3101
- }) : selectedList.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
3102
- "div",
3103
- {
3104
- className: tailwindMerge.twMerge(
3105
- "flex border-[#E2E2E2] border items-center px-2 py-1 bg-white text-gray-700 rounded-md text-xs font-medium",
3106
- selectedItemsClass
3107
- ),
3108
- children: [
3109
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-gray-800", children: ((_a = options.find((opt) => opt.key === selectedList[0])) == null ? void 0 : _a.name) || selectedList[0] }),
3110
- onRemove && /* @__PURE__ */ jsxRuntime.jsx(
3111
- "button",
3112
- {
3113
- onClick: (e) => {
3114
- var _a2;
3115
- e.stopPropagation();
3116
- onRemove(
3117
- ((_a2 = options.find((opt) => opt.key === selectedList[0])) == null ? void 0 : _a2.name) || selectedList[0]
3118
- );
3119
- },
3120
- className: tailwindMerge.twMerge(
3121
- "ml-1 text-gray-500 hover:text-gray-700",
3122
- removeIconClass
3123
- ),
3124
- children: /* @__PURE__ */ jsxRuntime.jsx(
3125
- "svg",
3126
- {
3127
- xmlns: "http://www.w3.org/2000/svg",
3128
- width: "14",
3129
- height: "14",
3130
- viewBox: "0 0 14 14",
3131
- fill: "none",
3132
- children: /* @__PURE__ */ jsxRuntime.jsx(
3133
- "path",
3134
- {
3135
- d: "M11.0837 3.739L10.2612 2.9165L7.00033 6.17734L3.73949 2.9165L2.91699 3.739L6.17783 6.99984L2.91699 10.2607L3.73949 11.0832L7.00033 7.82234L10.2612 11.0832L11.0837 10.2607L7.82283 6.99984L11.0837 3.739Z",
3136
- fill: "#323232"
3137
- }
3138
- )
3139
- }
3140
- )
3181
+ }
3182
+ ),
3183
+ (!isMulti || enableTypingSingle) && /* @__PURE__ */ jsxRuntime.jsx(
3184
+ "input",
3185
+ {
3186
+ type: "text",
3187
+ ref: inputRef,
3188
+ value: inputValue,
3189
+ onKeyDown: keyDown,
3190
+ onChange: handleInputChange,
3191
+ className: "w-full flex-1 px-0 py-1 bg-[#F8F8F8] text-xs border-none outline-none focus:ring-0",
3192
+ onFocus: () => {
3193
+ if (!isDropdownOpen && (!isMulti || inputValue)) {
3194
+ setIsDropdownOpen(true);
3141
3195
  }
3142
- )
3143
- ]
3144
- }
3145
- ),
3146
- (!isMulti || enableTypingSingle) && /* @__PURE__ */ jsxRuntime.jsx(
3147
- "input",
3148
- {
3149
- type: "text",
3150
- ref: inputRef,
3151
- value: inputValue,
3152
- onKeyDown: keyDown,
3153
- onChange: handleInputChange,
3154
- className: "w-full flex-1 px-0 py-1 bg-[#F8F8F8] text-xs border-none outline-none focus:ring-0",
3155
- onFocus: () => {
3156
- if (!isDropdownOpen && (!isMulti || inputValue)) {
3157
- setIsDropdownOpen(true);
3158
- }
3159
- },
3160
- placeholder: selectedList.length === 0 ? "Type or select..." : ""
3161
- }
3162
- )
3163
- ]
3164
- }
3165
- )
3196
+ },
3197
+ placeholder: selectedList.length === 0 ? "Type or select..." : ""
3198
+ }
3199
+ )
3200
+ ]
3201
+ }
3202
+ ),
3203
+ isDropdownOpen && filteredOptions.length > 0 && !usePortal && DropdownMenu
3204
+ ]
3166
3205
  }
3167
3206
  ),
3168
- isDropdownOpen && filteredOptions.length > 0 && reactDom.createPortal(DropdownMenu, document.body)
3207
+ isDropdownOpen && filteredOptions.length > 0 && usePortal && reactDom.createPortal(DropdownMenu, document.body)
3169
3208
  ] });
3170
3209
  };
3171
3210
  var MultipleAutoSuggestionInput_default = MultipleAutoSuggestionInput;
@@ -3402,7 +3441,14 @@ function SingleSelectDropdown({
3402
3441
  top: `${dropdownPosition.top + 4}px`,
3403
3442
  left: `${dropdownPosition.left}px`,
3404
3443
  width: `${dropdownPosition.width}px`
3405
- } : { position: "absolute", top: "100%", left: 0, marginTop: "4px", width: "100%" },
3444
+ } : {
3445
+ position: "absolute",
3446
+ top: "100%",
3447
+ left: 0,
3448
+ marginTop: "4px",
3449
+ width: "100%",
3450
+ zIndex: 99
3451
+ },
3406
3452
  className: "rounded-md bg-white shadow-lg z-50",
3407
3453
  children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-2 shadow-md border rounded-md max-h-[410px] flex flex-col", children: [
3408
3454
  searchable && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [