next-recomponents 2.0.46 → 2.0.48

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 (5) hide show
  1. package/dist/index.js +71 -36
  2. package/dist/index.mjs +71 -36
  3. package/package.json +1 -1
  4. package/src/select/index.tsx +49 -5
  5. package/src/table-advanced/h.table.tsx +1 -5
package/dist/index.js CHANGED
@@ -36748,6 +36748,29 @@ function Select({
36748
36748
  const [options, setOptions] = (0, import_react9.useState)(
36749
36749
  []
36750
36750
  );
36751
+ const [dropdownPos, setDropdownPos] = (0, import_react9.useState)({ left: 0, width: 0 });
36752
+ (0, import_react9.useEffect)(() => {
36753
+ if (isOpen && containerRef.current) {
36754
+ const rect = containerRef.current.getBoundingClientRect();
36755
+ const spaceBelow = window.innerHeight - rect.bottom;
36756
+ const spaceAbove = rect.top;
36757
+ if (spaceBelow < 200 && spaceAbove > spaceBelow) {
36758
+ setOpenUpwards(true);
36759
+ setDropdownPos({
36760
+ bottom: window.innerHeight - rect.top + 4,
36761
+ left: rect.left,
36762
+ width: rect.width
36763
+ });
36764
+ } else {
36765
+ setOpenUpwards(false);
36766
+ setDropdownPos({
36767
+ top: rect.bottom + 4,
36768
+ left: rect.left,
36769
+ width: rect.width
36770
+ });
36771
+ }
36772
+ }
36773
+ }, [isOpen]);
36751
36774
  const [filtered, setFiltered] = (0, import_react9.useState)(
36752
36775
  []
36753
36776
  );
@@ -36859,7 +36882,10 @@ function Select({
36859
36882
  " ",
36860
36883
  (props == null ? void 0 : props.required) && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-red-500", children: "*" })
36861
36884
  ] }),
36862
- !isOpen && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "absolute top-0 right-0 flex flex-col justify-center items-center px-2 py-2 font-bold", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SelectIcon, {}) }),
36885
+ !isOpen && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "absolute top-0 right-0 flex justify-center items-center px-2 py-2 font-bold", children: [
36886
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "font-normal text-xs text-gray-400", children: filtered.length == 0 && "Loading..." }),
36887
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SelectIcon, {})
36888
+ ] }),
36863
36889
  isOpen && inputValue != "" && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
36864
36890
  "button",
36865
36891
  {
@@ -36878,44 +36904,54 @@ function Select({
36878
36904
  children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(CloseIcon, {})
36879
36905
  }
36880
36906
  ),
36881
- isOpen && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
36907
+ isOpen && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
36882
36908
  "div",
36883
36909
  {
36884
- style: { zIndex: 9999999999 },
36885
- className: `absolute w-full border rounded shadow bg-white z-10 max-h-100 top-10 overflow-y-auto ${openUpwards ? "bottom-full mb-1" : "mt-1"}`,
36886
- children: filtered.map((opt, index) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
36887
- "div",
36888
- {
36889
- className: `p-2 cursor-pointer ${index === highlightedIndex ? "bg-blue-100" : "hover:bg-gray-100"}`,
36890
- onClick: () => {
36891
- var _a;
36892
- try {
36893
- (_a = props == null ? void 0 : props.onChange) == null ? void 0 : _a.call(props, {
36894
- target: { value: (opt == null ? void 0 : opt.value) || opt.label }
36895
- });
36896
- } catch (error) {
36897
- }
36898
- setHasEdition(false);
36899
- const item = validOption(opt.label);
36900
- if (inputRef == null ? void 0 : inputRef.current) {
36901
- if (!item) {
36902
- if (strictMode) {
36903
- inputRef.current.value = "";
36904
- inputRef.current.classList.remove("bg-green-200");
36905
- inputRef.current.classList.add("bg-red-200");
36906
- return;
36910
+ style: {
36911
+ zIndex: 999999,
36912
+ position: "fixed",
36913
+ top: dropdownPos.top,
36914
+ bottom: dropdownPos.bottom,
36915
+ left: dropdownPos.left,
36916
+ width: dropdownPos.width
36917
+ },
36918
+ className: "border rounded shadow bg-white max-h-100 overflow-y-auto",
36919
+ children: [
36920
+ filtered.length == 0 && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "font-normal p-2 text-gray-400", children: "Loading options..." }),
36921
+ filtered.map((opt, index) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
36922
+ "div",
36923
+ {
36924
+ className: `p-2 cursor-pointer ${index === highlightedIndex ? "bg-blue-100" : "hover:bg-gray-100"}`,
36925
+ onClick: () => {
36926
+ var _a;
36927
+ try {
36928
+ (_a = props == null ? void 0 : props.onChange) == null ? void 0 : _a.call(props, {
36929
+ target: { value: (opt == null ? void 0 : opt.value) || opt.label }
36930
+ });
36931
+ } catch (error) {
36932
+ }
36933
+ setHasEdition(false);
36934
+ const item = validOption(opt.label);
36935
+ if (inputRef == null ? void 0 : inputRef.current) {
36936
+ if (!item) {
36937
+ if (strictMode) {
36938
+ inputRef.current.value = "";
36939
+ inputRef.current.classList.remove("bg-green-200");
36940
+ inputRef.current.classList.add("bg-red-200");
36941
+ return;
36942
+ }
36943
+ } else {
36944
+ inputRef.current.classList.add("bg-green-200");
36945
+ inputRef.current.classList.remove("bg-red-200");
36907
36946
  }
36908
- } else {
36909
- inputRef.current.classList.add("bg-green-200");
36910
- inputRef.current.classList.remove("bg-red-200");
36911
36947
  }
36912
- }
36913
- selectOption(opt);
36948
+ selectOption(opt);
36949
+ },
36950
+ children: opt.label
36914
36951
  },
36915
- children: opt.label
36916
- },
36917
- index
36918
- ))
36952
+ index
36953
+ ))
36954
+ ]
36919
36955
  }
36920
36956
  )
36921
36957
  ] }),
@@ -39208,8 +39244,7 @@ function HTable({
39208
39244
  context.onSave && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
39209
39245
  "button",
39210
39246
  {
39211
- className: "border shadow rounded p-1 text-white px-2 " + (context.editions.length > 0 ? "bg-blue-500" : "bg-gray-500"),
39212
- disabled: context.editions.length == 0,
39247
+ className: "border shadow rounded p-1 text-white px-2 ",
39213
39248
  onClick: async (e) => {
39214
39249
  setIsloading(true);
39215
39250
  const ex = context.filteredData.map((d) => {
package/dist/index.mjs CHANGED
@@ -36733,6 +36733,29 @@ function Select({
36733
36733
  const [options, setOptions] = useState8(
36734
36734
  []
36735
36735
  );
36736
+ const [dropdownPos, setDropdownPos] = useState8({ left: 0, width: 0 });
36737
+ useEffect5(() => {
36738
+ if (isOpen && containerRef.current) {
36739
+ const rect = containerRef.current.getBoundingClientRect();
36740
+ const spaceBelow = window.innerHeight - rect.bottom;
36741
+ const spaceAbove = rect.top;
36742
+ if (spaceBelow < 200 && spaceAbove > spaceBelow) {
36743
+ setOpenUpwards(true);
36744
+ setDropdownPos({
36745
+ bottom: window.innerHeight - rect.top + 4,
36746
+ left: rect.left,
36747
+ width: rect.width
36748
+ });
36749
+ } else {
36750
+ setOpenUpwards(false);
36751
+ setDropdownPos({
36752
+ top: rect.bottom + 4,
36753
+ left: rect.left,
36754
+ width: rect.width
36755
+ });
36756
+ }
36757
+ }
36758
+ }, [isOpen]);
36736
36759
  const [filtered, setFiltered] = useState8(
36737
36760
  []
36738
36761
  );
@@ -36844,7 +36867,10 @@ function Select({
36844
36867
  " ",
36845
36868
  (props == null ? void 0 : props.required) && /* @__PURE__ */ jsx10("span", { className: "text-red-500", children: "*" })
36846
36869
  ] }),
36847
- !isOpen && /* @__PURE__ */ jsx10("div", { className: "absolute top-0 right-0 flex flex-col justify-center items-center px-2 py-2 font-bold", children: /* @__PURE__ */ jsx10(SelectIcon, {}) }),
36870
+ !isOpen && /* @__PURE__ */ jsxs7("div", { className: "absolute top-0 right-0 flex justify-center items-center px-2 py-2 font-bold", children: [
36871
+ /* @__PURE__ */ jsx10("div", { className: "font-normal text-xs text-gray-400", children: filtered.length == 0 && "Loading..." }),
36872
+ /* @__PURE__ */ jsx10(SelectIcon, {})
36873
+ ] }),
36848
36874
  isOpen && inputValue != "" && /* @__PURE__ */ jsx10(
36849
36875
  "button",
36850
36876
  {
@@ -36863,44 +36889,54 @@ function Select({
36863
36889
  children: /* @__PURE__ */ jsx10(CloseIcon, {})
36864
36890
  }
36865
36891
  ),
36866
- isOpen && /* @__PURE__ */ jsx10(
36892
+ isOpen && /* @__PURE__ */ jsxs7(
36867
36893
  "div",
36868
36894
  {
36869
- style: { zIndex: 9999999999 },
36870
- className: `absolute w-full border rounded shadow bg-white z-10 max-h-100 top-10 overflow-y-auto ${openUpwards ? "bottom-full mb-1" : "mt-1"}`,
36871
- children: filtered.map((opt, index) => /* @__PURE__ */ jsx10(
36872
- "div",
36873
- {
36874
- className: `p-2 cursor-pointer ${index === highlightedIndex ? "bg-blue-100" : "hover:bg-gray-100"}`,
36875
- onClick: () => {
36876
- var _a;
36877
- try {
36878
- (_a = props == null ? void 0 : props.onChange) == null ? void 0 : _a.call(props, {
36879
- target: { value: (opt == null ? void 0 : opt.value) || opt.label }
36880
- });
36881
- } catch (error) {
36882
- }
36883
- setHasEdition(false);
36884
- const item = validOption(opt.label);
36885
- if (inputRef == null ? void 0 : inputRef.current) {
36886
- if (!item) {
36887
- if (strictMode) {
36888
- inputRef.current.value = "";
36889
- inputRef.current.classList.remove("bg-green-200");
36890
- inputRef.current.classList.add("bg-red-200");
36891
- return;
36895
+ style: {
36896
+ zIndex: 999999,
36897
+ position: "fixed",
36898
+ top: dropdownPos.top,
36899
+ bottom: dropdownPos.bottom,
36900
+ left: dropdownPos.left,
36901
+ width: dropdownPos.width
36902
+ },
36903
+ className: "border rounded shadow bg-white max-h-100 overflow-y-auto",
36904
+ children: [
36905
+ filtered.length == 0 && /* @__PURE__ */ jsx10("div", { className: "font-normal p-2 text-gray-400", children: "Loading options..." }),
36906
+ filtered.map((opt, index) => /* @__PURE__ */ jsx10(
36907
+ "div",
36908
+ {
36909
+ className: `p-2 cursor-pointer ${index === highlightedIndex ? "bg-blue-100" : "hover:bg-gray-100"}`,
36910
+ onClick: () => {
36911
+ var _a;
36912
+ try {
36913
+ (_a = props == null ? void 0 : props.onChange) == null ? void 0 : _a.call(props, {
36914
+ target: { value: (opt == null ? void 0 : opt.value) || opt.label }
36915
+ });
36916
+ } catch (error) {
36917
+ }
36918
+ setHasEdition(false);
36919
+ const item = validOption(opt.label);
36920
+ if (inputRef == null ? void 0 : inputRef.current) {
36921
+ if (!item) {
36922
+ if (strictMode) {
36923
+ inputRef.current.value = "";
36924
+ inputRef.current.classList.remove("bg-green-200");
36925
+ inputRef.current.classList.add("bg-red-200");
36926
+ return;
36927
+ }
36928
+ } else {
36929
+ inputRef.current.classList.add("bg-green-200");
36930
+ inputRef.current.classList.remove("bg-red-200");
36892
36931
  }
36893
- } else {
36894
- inputRef.current.classList.add("bg-green-200");
36895
- inputRef.current.classList.remove("bg-red-200");
36896
36932
  }
36897
- }
36898
- selectOption(opt);
36933
+ selectOption(opt);
36934
+ },
36935
+ children: opt.label
36899
36936
  },
36900
- children: opt.label
36901
- },
36902
- index
36903
- ))
36937
+ index
36938
+ ))
36939
+ ]
36904
36940
  }
36905
36941
  )
36906
36942
  ] }),
@@ -39206,8 +39242,7 @@ function HTable({
39206
39242
  context.onSave && /* @__PURE__ */ jsx33(
39207
39243
  "button",
39208
39244
  {
39209
- className: "border shadow rounded p-1 text-white px-2 " + (context.editions.length > 0 ? "bg-blue-500" : "bg-gray-500"),
39210
- disabled: context.editions.length == 0,
39245
+ className: "border shadow rounded p-1 text-white px-2 ",
39211
39246
  onClick: async (e) => {
39212
39247
  setIsloading(true);
39213
39248
  const ex = context.filteredData.map((d) => {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "next-recomponents",
3
- "version": "2.0.46",
3
+ "version": "2.0.48",
4
4
  "description": "description nueva",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
package/src/select/index.tsx CHANGED
@@ -32,6 +32,37 @@ export default function Select({
32
32
  const [options, setOptions] = useState<{ value: string; label: string }[]>(
33
33
  [],
34
34
  );
35
+ const [dropdownPos, setDropdownPos] = useState<{
36
+ top?: number;
37
+ bottom?: number;
38
+ left: number;
39
+ width: number;
40
+ }>({ left: 0, width: 0 });
41
+
42
+ useEffect(() => {
43
+ if (isOpen && containerRef.current) {
44
+ const rect = containerRef.current.getBoundingClientRect();
45
+ const spaceBelow = window.innerHeight - rect.bottom;
46
+ const spaceAbove = rect.top;
47
+
48
+ if (spaceBelow < 200 && spaceAbove > spaceBelow) {
49
+ setOpenUpwards(true);
50
+ setDropdownPos({
51
+ bottom: window.innerHeight - rect.top + 4,
52
+ left: rect.left,
53
+ width: rect.width,
54
+ });
55
+ } else {
56
+ setOpenUpwards(false);
57
+ setDropdownPos({
58
+ top: rect.bottom + 4,
59
+ left: rect.left,
60
+ width: rect.width,
61
+ });
62
+ }
63
+ }
64
+ }, [isOpen]);
65
+
35
66
  const [filtered, setFiltered] = useState<{ value: string; label: string }[]>(
36
67
  [],
37
68
  );
@@ -170,7 +201,10 @@ export default function Select({
170
201
  </label>
171
202
  )}
172
203
  {!isOpen && (
173
- <div className="absolute top-0 right-0 flex flex-col justify-center items-center px-2 py-2 font-bold">
204
+ <div className="absolute top-0 right-0 flex justify-center items-center px-2 py-2 font-bold">
205
+ <div className="font-normal text-xs text-gray-400">
206
+ {filtered.length == 0 && "Loading..."}
207
+ </div>
174
208
  <SelectIcon />
175
209
  </div>
176
210
  )}
@@ -194,11 +228,21 @@ export default function Select({
194
228
  )}
195
229
  {isOpen && (
196
230
  <div
197
- style={{ zIndex: 9999999999 }}
198
- className={`absolute w-full border rounded shadow bg-white z-10 max-h-100 top-10 overflow-y-auto ${
199
- openUpwards ? "bottom-full mb-1" : "mt-1"
200
- }`}
231
+ style={{
232
+ zIndex: 999999,
233
+ position: "fixed",
234
+ top: dropdownPos.top,
235
+ bottom: dropdownPos.bottom,
236
+ left: dropdownPos.left,
237
+ width: dropdownPos.width,
238
+ }}
239
+ className="border rounded shadow bg-white max-h-100 overflow-y-auto"
201
240
  >
241
+ {filtered.length == 0 && (
242
+ <div className="font-normal p-2 text-gray-400">
243
+ Loading options...
244
+ </div>
245
+ )}
202
246
  {filtered.map((opt, index) => (
203
247
  <div
204
248
  key={index}
package/src/table-advanced/h.table.tsx CHANGED
@@ -214,11 +214,7 @@ export default function HTable({
214
214
  )}
215
215
  {context.onSave && (
216
216
  <button
217
- className={
218
- "border shadow rounded p-1 text-white px-2 " +
219
- (context.editions.length > 0 ? "bg-blue-500" : "bg-gray-500")
220
- }
221
- disabled={context.editions.length == 0}
217
+ className={"border shadow rounded p-1 text-white px-2 "}
222
218
  onClick={async (e) => {
223
219
  setIsloading(true);
224
220
  const ex = context.filteredData.map((d) => {