react-table-edit 0.6.0 → 0.6.1

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.d.mts +1 -1
  2. package/dist/index.d.ts +1 -1
  3. package/dist/index.js +48 -35
  4. package/dist/index.mjs +48 -35
  5. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -19,7 +19,6 @@ type IFColumnSelectTable = {
19
19
  type Props = {
20
20
  id?: string;
21
21
  component?: any;
22
- field?: string;
23
22
  fieldValue?: string;
24
23
  fieldLabel?: string;
25
24
  onChange: any;
@@ -41,6 +40,7 @@ type Props = {
41
40
  thousandSeparator?: string;
42
41
  isClearable?: boolean;
43
42
  isDisabled?: boolean;
43
+ showFooter?: boolean;
44
44
  };
45
45
  declare const SelectTable: react.ForwardRefExoticComponent<Props & react.RefAttributes<unknown>>;
46
46
 
package/dist/index.d.ts CHANGED
@@ -19,7 +19,6 @@ type IFColumnSelectTable = {
19
19
  type Props = {
20
20
  id?: string;
21
21
  component?: any;
22
- field?: string;
23
22
  fieldValue?: string;
24
23
  fieldLabel?: string;
25
24
  onChange: any;
@@ -41,6 +40,7 @@ type Props = {
41
40
  thousandSeparator?: string;
42
41
  isClearable?: boolean;
43
42
  isDisabled?: boolean;
43
+ showFooter?: boolean;
44
44
  };
45
45
  declare const SelectTable: react.ForwardRefExoticComponent<Props & react.RefAttributes<unknown>>;
46
46
 
package/dist/index.js CHANGED
@@ -1602,7 +1602,8 @@ var SelectTable = (0, import_react13.forwardRef)((props, ref) => {
1602
1602
  component,
1603
1603
  isDisabled,
1604
1604
  formatOptionLabel,
1605
- isMulti
1605
+ isMulti,
1606
+ showFooter
1606
1607
  } = props;
1607
1608
  const selectTableRef = (0, import_react13.useRef)();
1608
1609
  const selectMenuTableRef = (0, import_react13.useRef)();
@@ -1612,7 +1613,16 @@ var SelectTable = (0, import_react13.forwardRef)((props, ref) => {
1612
1613
  const [isFocus, setIsFocus] = (0, import_react13.useState)(false);
1613
1614
  const [searchTerm, setSearchTerm] = (0, import_react13.useState)("");
1614
1615
  const [optionsLoad, setOptionsLoad] = (0, import_react13.useState)();
1616
+ const [optionsCurr, setOptionsCurr] = (0, import_react13.useState)([]);
1617
+ const [isSelectedAll, setIsSelectdAll] = (0, import_react13.useState)(isMulti === true && optionsCurr.length > 0 && value?.length >= optionsCurr.length);
1615
1618
  const { t } = (0, import_react_i18next9.useTranslation)();
1619
+ (0, import_react13.useEffect)(() => {
1620
+ if (optionsLoad) {
1621
+ setOptionsCurr(optionsLoad);
1622
+ } else {
1623
+ setOptionsCurr(options);
1624
+ }
1625
+ }, [optionsLoad, options]);
1616
1626
  const defaultColumns = [
1617
1627
  {
1618
1628
  field: "key",
@@ -1636,7 +1646,7 @@ var SelectTable = (0, import_react13.forwardRef)((props, ref) => {
1636
1646
  if (dropdownOpen) {
1637
1647
  if (value) {
1638
1648
  if (selectMenuTableRef) {
1639
- const elementFocus = document.getElementById(`row-select-table-${(optionsLoad ? optionsLoad : options)?.findIndex((e) => e[fieldValue ?? "value"] === value[fieldValue ?? "value"])}`);
1649
+ const elementFocus = document.getElementById(`row-select-table-${optionsCurr?.findIndex((e) => e[fieldValue ?? "value"] === value[fieldValue ?? "value"])}`);
1640
1650
  if (elementFocus) {
1641
1651
  const rect = elementFocus.getBoundingClientRect();
1642
1652
  const parentRect = selectMenuTableRef.current?.getBoundingClientRect();
@@ -1656,7 +1666,8 @@ var SelectTable = (0, import_react13.forwardRef)((props, ref) => {
1656
1666
  if (inputRef) {
1657
1667
  inputRef.current.addEventListener("blur", function() {
1658
1668
  timeOutBlur = setTimeout(() => {
1659
- if (document.activeElement?.className !== "select-input" && !selectTableRef.current?.contains(document.activeElement)) {
1669
+ console.log(document.activeElement);
1670
+ if (!selectTableRef.current?.contains(document.activeElement)) {
1660
1671
  setDropdownOpen(false);
1661
1672
  setIsFocus(false);
1662
1673
  }
@@ -1701,7 +1712,7 @@ var SelectTable = (0, import_react13.forwardRef)((props, ref) => {
1701
1712
  flag = true;
1702
1713
  } else if (e.code === "Escape" || e.code === "Space") {
1703
1714
  if (dropdownOpen) {
1704
- onChange((optionsLoad ? optionsLoad : options)[indexFocus]);
1715
+ onChange(optionsCurr[indexFocus]);
1705
1716
  }
1706
1717
  if (!searchTerm) {
1707
1718
  handleOpenClose();
@@ -1709,7 +1720,7 @@ var SelectTable = (0, import_react13.forwardRef)((props, ref) => {
1709
1720
  }
1710
1721
  } else if (e.code === "Enter" || e.code === "Tab" || e.code === "NumpadEnter") {
1711
1722
  if (dropdownOpen) {
1712
- onChange((optionsLoad ? optionsLoad : options)[indexFocus]);
1723
+ onChange(optionsCurr[indexFocus]);
1713
1724
  handleOpenClose();
1714
1725
  flag = true;
1715
1726
  }
@@ -1719,9 +1730,9 @@ var SelectTable = (0, import_react13.forwardRef)((props, ref) => {
1719
1730
  if (indexFocus >= 0) {
1720
1731
  newIndex = indexFocus + 1;
1721
1732
  } else if (value) {
1722
- newIndex = (optionsLoad ? optionsLoad : options)?.findIndex((e2) => e2[fieldValue ?? "value"] === value[fieldValue ?? "value"]) + 1;
1733
+ newIndex = optionsCurr?.findIndex((e2) => e2[fieldValue ?? "value"] === value[fieldValue ?? "value"]) + 1;
1723
1734
  }
1724
- if (newIndex < (optionsLoad ? optionsLoad : options).length) {
1735
+ if (newIndex < optionsCurr.length) {
1725
1736
  setIndexFocus(newIndex);
1726
1737
  checkIfElementIsOutOfScroll(0);
1727
1738
  } else {
@@ -1739,13 +1750,13 @@ var SelectTable = (0, import_react13.forwardRef)((props, ref) => {
1739
1750
  if (indexFocus >= 0) {
1740
1751
  newIndex = indexFocus - 1;
1741
1752
  } else if (value) {
1742
- newIndex = (optionsLoad ? optionsLoad : options)?.findIndex((e2) => e2[fieldValue ?? "value"] === value[fieldValue ?? "value"]) - 1;
1753
+ newIndex = optionsCurr?.findIndex((e2) => e2[fieldValue ?? "value"] === value[fieldValue ?? "value"]) - 1;
1743
1754
  }
1744
1755
  if (newIndex >= 0) {
1745
1756
  setIndexFocus(newIndex);
1746
1757
  checkIfElementIsOutOfScroll(2);
1747
1758
  } else {
1748
- setIndexFocus((optionsLoad ? optionsLoad : options).length - 1);
1759
+ setIndexFocus(optionsCurr.length - 1);
1749
1760
  checkIfElementIsOutOfScroll(3);
1750
1761
  }
1751
1762
  flag = true;
@@ -1858,16 +1869,18 @@ var SelectTable = (0, import_react13.forwardRef)((props, ref) => {
1858
1869
  {
1859
1870
  onClick: () => {
1860
1871
  inputRef?.current.focus();
1861
- clearTimeout(timeOutBlur);
1872
+ if (dropdownOpen) {
1873
+ clearTimeout(timeOutBlur);
1874
+ }
1862
1875
  handleOpenClose();
1863
1876
  },
1864
1877
  tabIndex: 0,
1865
1878
  tag: "div",
1866
- className: (0, import_classnames11.default)("select-table-control", { "r-select-is-focus": isFocus }, { "r-select-is-invalid": invalid }),
1879
+ className: (0, import_classnames11.default)("select-table-control", { "r-select-is-open": dropdownOpen }, { "r-select-is-focus": isFocus }, { "r-select-is-invalid": invalid }),
1867
1880
  children: [
1868
1881
  /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "select-table-container", children: [
1869
1882
  isMulti ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: (0, import_classnames11.default)("select-value is-mutil", { "d-none": searchTerm }), children: value?.map((ele, index) => {
1870
- const element = options.find((e) => e[fieldValue ?? "value"] === ele);
1883
+ const element = optionsCurr.find((e) => e[fieldValue ?? "value"] === ele);
1871
1884
  if (element) {
1872
1885
  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { children: [
1873
1886
  index === 0 ? "" : ", ",
@@ -1887,7 +1900,7 @@ var SelectTable = (0, import_react13.forwardRef)((props, ref) => {
1887
1900
  className: (0, import_classnames11.default)("select-input"),
1888
1901
  value: searchTerm,
1889
1902
  onChange: (val) => {
1890
- if (loadOptions && val.target.value) {
1903
+ if (!isMulti && loadOptions && val.target.value) {
1891
1904
  loadOptions(val.target.value, callbackLoadOption);
1892
1905
  }
1893
1906
  setSearchTerm(val.target.value);
@@ -1899,15 +1912,15 @@ var SelectTable = (0, import_react13.forwardRef)((props, ref) => {
1899
1912
  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
1900
1913
  "div",
1901
1914
  {
1902
- className: (0, import_classnames11.default)("select-table-indicator cursor-pointer", { "d-none": !isClearable || !value }),
1915
+ className: (0, import_classnames11.default)("cursor-pointer", { "d-none": !isClearable || !value }),
1903
1916
  onClick: (e) => {
1904
1917
  onChange(isMulti ? [] : void 0);
1905
1918
  e.stopPropagation();
1906
1919
  },
1907
- children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("svg", { height: "20", width: "20", style: { color: "#c4c4c4" }, viewBox: "0 0 20 20", "aria-hidden": "true", focusable: "false", className: "css-tj5bde-Svg", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { d: "M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z" }) })
1920
+ children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("svg", { height: "20", width: "20", fill: "#c4c4c4", viewBox: "0 0 20 20", "aria-hidden": "true", focusable: "false", className: "css-tj5bde-Svg", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { d: "M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z" }) })
1908
1921
  }
1909
1922
  ),
1910
- /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "select-table-indicator", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("svg", { height: "20", width: "20", style: { color: dropdownOpen ? "#000000af" : "#c4c4c4" }, viewBox: "0 0 20 20", "aria-hidden": "true", focusable: "false", className: "css-tj5bde-Svg", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { d: "M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z" }) }) })
1923
+ /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "select-table-indicator", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("svg", { height: "20", width: "20", viewBox: "0 0 20 20", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { d: "M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z" }) }) })
1911
1924
  ]
1912
1925
  }
1913
1926
  ),
@@ -1940,21 +1953,22 @@ var SelectTable = (0, import_react13.forwardRef)((props, ref) => {
1940
1953
  children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
1941
1954
  import_reactstrap8.Input,
1942
1955
  {
1943
- defaultChecked: (optionsLoad ? optionsLoad : options).length > 0 && value?.length >= (optionsLoad ? optionsLoad : options).length,
1956
+ checked: isSelectedAll,
1944
1957
  type: "checkbox",
1945
- className: (0, import_classnames11.default)("cursor-pointer", { "d-none": !isMulti }),
1946
- style: { textAlign: "center", marginTop: 6 },
1947
- onChange: (e) => {
1958
+ onClick: (e) => {
1948
1959
  if (isMulti) {
1949
- if (e.target.checked) {
1950
- onChange((optionsLoad ? optionsLoad : options).map((item) => {
1951
- return item;
1952
- }));
1953
- } else {
1960
+ if (isSelectedAll) {
1954
1961
  onChange([]);
1962
+ } else {
1963
+ onChange([...optionsCurr]);
1955
1964
  }
1965
+ setIsSelectdAll(!isSelectedAll);
1966
+ e.stopPropagation();
1956
1967
  }
1957
- }
1968
+ },
1969
+ readOnly: true,
1970
+ className: (0, import_classnames11.default)("cursor-pointer", { "d-none": !isMulti }),
1971
+ style: { textAlign: "center", marginTop: 6 }
1958
1972
  }
1959
1973
  )
1960
1974
  }
@@ -1963,14 +1977,14 @@ var SelectTable = (0, import_react13.forwardRef)((props, ref) => {
1963
1977
  return renderHeaderCol(col, index);
1964
1978
  })
1965
1979
  ] }) }),
1966
- (optionsLoad ? optionsLoad : options).length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("tbody", { className: "r-select-gridcontent", children: (optionsLoad ? optionsLoad : options)?.map((row, indexRow) => {
1967
- if (loadOptions || checkSearch(searchTerm, row, columns ? columns : defaultColumns)) {
1980
+ optionsCurr.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("tbody", { className: "r-select-gridcontent", children: optionsCurr?.map((row, indexRow) => {
1981
+ if (!isMulti && loadOptions || checkSearch(searchTerm, row, columns ? columns : defaultColumns)) {
1968
1982
  const isSelected = isMulti && value?.some((x) => x === row[fieldValue ?? "value"]);
1969
1983
  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
1970
1984
  "tr",
1971
1985
  {
1972
1986
  id: `row-select-table-${indexRow}`,
1973
- className: (0, import_classnames11.default)("r-select-row", { "last-row": indexRow === (optionsLoad ? optionsLoad : options).length - 1 }, { "fisrt-row": indexRow === 0 }),
1987
+ className: (0, import_classnames11.default)("r-select-row", { "last-row": indexRow === optionsCurr.length - 1 }, { "fisrt-row": indexRow === 0 }),
1974
1988
  children: [
1975
1989
  isMulti && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
1976
1990
  "td",
@@ -1982,12 +1996,12 @@ var SelectTable = (0, import_react13.forwardRef)((props, ref) => {
1982
1996
  const index = value?.findIndex((x) => x === row[fieldValue ?? "value"]);
1983
1997
  if (index > -1) {
1984
1998
  value?.splice(index, 1);
1985
- const valueArr = options.filter((ele) => value?.some((x) => x === ele[fieldValue ?? "value"]));
1999
+ const valueArr = optionsCurr.filter((ele) => value?.some((x) => x === ele[fieldValue ?? "value"]));
1986
2000
  onChange(valueArr);
1987
2001
  } else {
1988
2002
  if (value) {
1989
2003
  value?.push(row[fieldValue ?? "value"]);
1990
- const valueArr = options.filter((ele) => value?.some((x) => x === ele[fieldValue ?? "value"]));
2004
+ const valueArr = optionsCurr.filter((ele) => value?.some((x) => x === ele[fieldValue ?? "value"]));
1991
2005
  onChange(valueArr);
1992
2006
  } else {
1993
2007
  onChange([row[fieldValue ?? "value"]]);
@@ -2034,12 +2048,12 @@ var SelectTable = (0, import_react13.forwardRef)((props, ref) => {
2034
2048
  const index = value?.findIndex((x) => x === row[fieldValue ?? "value"]);
2035
2049
  if (index > -1) {
2036
2050
  value?.splice(index, 1);
2037
- const valueArr = options.filter((ele) => value?.some((x) => x === ele[fieldValue ?? "value"]));
2051
+ const valueArr = optionsCurr.filter((ele) => value?.some((x) => x === ele[fieldValue ?? "value"]));
2038
2052
  onChange(valueArr);
2039
2053
  } else {
2040
2054
  if (value) {
2041
2055
  value?.push(row[fieldValue ?? "value"]);
2042
- const valueArr = options.filter((ele) => value?.some((x) => x === ele[fieldValue ?? "value"]));
2056
+ const valueArr = optionsCurr.filter((ele) => value?.some((x) => x === ele[fieldValue ?? "value"]));
2043
2057
  onChange(valueArr);
2044
2058
  } else {
2045
2059
  onChange([row[fieldValue ?? "value"]]);
@@ -2070,7 +2084,7 @@ var SelectTable = (0, import_react13.forwardRef)((props, ref) => {
2070
2084
  }
2071
2085
  }) }) }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "r-no-data", children: t("No data available.") })
2072
2086
  ] }) }),
2073
- /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "r-select-footer", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_reactstrap8.Button, { outline: true, color: "primary", className: "r-btn-add d-flex align-items-center", onClick: handleAdd, children: [
2087
+ /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: (0, import_classnames11.default)("r-select-footer", { "d-none": !(showFooter === true || handleAdd) }), children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_reactstrap8.Button, { outline: true, color: "primary", onClick: handleAdd, className: (0, import_classnames11.default)("r-btn-add d-flex align-items-center", { "d-none": !handleAdd }), children: [
2074
2088
  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_becoxy_icons5.Plus, { className: "me-50", fontSize: 16 }),
2075
2089
  t("AddNew"),
2076
2090
  " (F9)"
@@ -2500,7 +2514,6 @@ var TableEdit = (0, import_react14.forwardRef)((props, ref) => {
2500
2514
  thousandSeparator,
2501
2515
  placeholder: t("Select"),
2502
2516
  loadOptions: col.selectSettings?.loadOptions,
2503
- field: col.field,
2504
2517
  handleAdd: col.selectSettings?.handAddNew,
2505
2518
  isMulti: col.selectSettings?.isMulti,
2506
2519
  invalid: col.validate && col.validate(row[col.field], row),
package/dist/index.mjs CHANGED
@@ -1566,7 +1566,8 @@ var SelectTable = forwardRef2((props, ref) => {
1566
1566
  component,
1567
1567
  isDisabled,
1568
1568
  formatOptionLabel,
1569
- isMulti
1569
+ isMulti,
1570
+ showFooter
1570
1571
  } = props;
1571
1572
  const selectTableRef = useRef2();
1572
1573
  const selectMenuTableRef = useRef2();
@@ -1576,7 +1577,16 @@ var SelectTable = forwardRef2((props, ref) => {
1576
1577
  const [isFocus, setIsFocus] = useState6(false);
1577
1578
  const [searchTerm, setSearchTerm] = useState6("");
1578
1579
  const [optionsLoad, setOptionsLoad] = useState6();
1580
+ const [optionsCurr, setOptionsCurr] = useState6([]);
1581
+ const [isSelectedAll, setIsSelectdAll] = useState6(isMulti === true && optionsCurr.length > 0 && value?.length >= optionsCurr.length);
1579
1582
  const { t } = useTranslation9();
1583
+ useEffect7(() => {
1584
+ if (optionsLoad) {
1585
+ setOptionsCurr(optionsLoad);
1586
+ } else {
1587
+ setOptionsCurr(options);
1588
+ }
1589
+ }, [optionsLoad, options]);
1580
1590
  const defaultColumns = [
1581
1591
  {
1582
1592
  field: "key",
@@ -1600,7 +1610,7 @@ var SelectTable = forwardRef2((props, ref) => {
1600
1610
  if (dropdownOpen) {
1601
1611
  if (value) {
1602
1612
  if (selectMenuTableRef) {
1603
- const elementFocus = document.getElementById(`row-select-table-${(optionsLoad ? optionsLoad : options)?.findIndex((e) => e[fieldValue ?? "value"] === value[fieldValue ?? "value"])}`);
1613
+ const elementFocus = document.getElementById(`row-select-table-${optionsCurr?.findIndex((e) => e[fieldValue ?? "value"] === value[fieldValue ?? "value"])}`);
1604
1614
  if (elementFocus) {
1605
1615
  const rect = elementFocus.getBoundingClientRect();
1606
1616
  const parentRect = selectMenuTableRef.current?.getBoundingClientRect();
@@ -1620,7 +1630,8 @@ var SelectTable = forwardRef2((props, ref) => {
1620
1630
  if (inputRef) {
1621
1631
  inputRef.current.addEventListener("blur", function() {
1622
1632
  timeOutBlur = setTimeout(() => {
1623
- if (document.activeElement?.className !== "select-input" && !selectTableRef.current?.contains(document.activeElement)) {
1633
+ console.log(document.activeElement);
1634
+ if (!selectTableRef.current?.contains(document.activeElement)) {
1624
1635
  setDropdownOpen(false);
1625
1636
  setIsFocus(false);
1626
1637
  }
@@ -1665,7 +1676,7 @@ var SelectTable = forwardRef2((props, ref) => {
1665
1676
  flag = true;
1666
1677
  } else if (e.code === "Escape" || e.code === "Space") {
1667
1678
  if (dropdownOpen) {
1668
- onChange((optionsLoad ? optionsLoad : options)[indexFocus]);
1679
+ onChange(optionsCurr[indexFocus]);
1669
1680
  }
1670
1681
  if (!searchTerm) {
1671
1682
  handleOpenClose();
@@ -1673,7 +1684,7 @@ var SelectTable = forwardRef2((props, ref) => {
1673
1684
  }
1674
1685
  } else if (e.code === "Enter" || e.code === "Tab" || e.code === "NumpadEnter") {
1675
1686
  if (dropdownOpen) {
1676
- onChange((optionsLoad ? optionsLoad : options)[indexFocus]);
1687
+ onChange(optionsCurr[indexFocus]);
1677
1688
  handleOpenClose();
1678
1689
  flag = true;
1679
1690
  }
@@ -1683,9 +1694,9 @@ var SelectTable = forwardRef2((props, ref) => {
1683
1694
  if (indexFocus >= 0) {
1684
1695
  newIndex = indexFocus + 1;
1685
1696
  } else if (value) {
1686
- newIndex = (optionsLoad ? optionsLoad : options)?.findIndex((e2) => e2[fieldValue ?? "value"] === value[fieldValue ?? "value"]) + 1;
1697
+ newIndex = optionsCurr?.findIndex((e2) => e2[fieldValue ?? "value"] === value[fieldValue ?? "value"]) + 1;
1687
1698
  }
1688
- if (newIndex < (optionsLoad ? optionsLoad : options).length) {
1699
+ if (newIndex < optionsCurr.length) {
1689
1700
  setIndexFocus(newIndex);
1690
1701
  checkIfElementIsOutOfScroll(0);
1691
1702
  } else {
@@ -1703,13 +1714,13 @@ var SelectTable = forwardRef2((props, ref) => {
1703
1714
  if (indexFocus >= 0) {
1704
1715
  newIndex = indexFocus - 1;
1705
1716
  } else if (value) {
1706
- newIndex = (optionsLoad ? optionsLoad : options)?.findIndex((e2) => e2[fieldValue ?? "value"] === value[fieldValue ?? "value"]) - 1;
1717
+ newIndex = optionsCurr?.findIndex((e2) => e2[fieldValue ?? "value"] === value[fieldValue ?? "value"]) - 1;
1707
1718
  }
1708
1719
  if (newIndex >= 0) {
1709
1720
  setIndexFocus(newIndex);
1710
1721
  checkIfElementIsOutOfScroll(2);
1711
1722
  } else {
1712
- setIndexFocus((optionsLoad ? optionsLoad : options).length - 1);
1723
+ setIndexFocus(optionsCurr.length - 1);
1713
1724
  checkIfElementIsOutOfScroll(3);
1714
1725
  }
1715
1726
  flag = true;
@@ -1822,16 +1833,18 @@ var SelectTable = forwardRef2((props, ref) => {
1822
1833
  {
1823
1834
  onClick: () => {
1824
1835
  inputRef?.current.focus();
1825
- clearTimeout(timeOutBlur);
1836
+ if (dropdownOpen) {
1837
+ clearTimeout(timeOutBlur);
1838
+ }
1826
1839
  handleOpenClose();
1827
1840
  },
1828
1841
  tabIndex: 0,
1829
1842
  tag: "div",
1830
- className: classnames6("select-table-control", { "r-select-is-focus": isFocus }, { "r-select-is-invalid": invalid }),
1843
+ className: classnames6("select-table-control", { "r-select-is-open": dropdownOpen }, { "r-select-is-focus": isFocus }, { "r-select-is-invalid": invalid }),
1831
1844
  children: [
1832
1845
  /* @__PURE__ */ jsxs12("div", { className: "select-table-container", children: [
1833
1846
  isMulti ? /* @__PURE__ */ jsx13(Fragment14, { children: /* @__PURE__ */ jsx13("div", { className: classnames6("select-value is-mutil", { "d-none": searchTerm }), children: value?.map((ele, index) => {
1834
- const element = options.find((e) => e[fieldValue ?? "value"] === ele);
1847
+ const element = optionsCurr.find((e) => e[fieldValue ?? "value"] === ele);
1835
1848
  if (element) {
1836
1849
  return /* @__PURE__ */ jsxs12("span", { children: [
1837
1850
  index === 0 ? "" : ", ",
@@ -1851,7 +1864,7 @@ var SelectTable = forwardRef2((props, ref) => {
1851
1864
  className: classnames6("select-input"),
1852
1865
  value: searchTerm,
1853
1866
  onChange: (val) => {
1854
- if (loadOptions && val.target.value) {
1867
+ if (!isMulti && loadOptions && val.target.value) {
1855
1868
  loadOptions(val.target.value, callbackLoadOption);
1856
1869
  }
1857
1870
  setSearchTerm(val.target.value);
@@ -1863,15 +1876,15 @@ var SelectTable = forwardRef2((props, ref) => {
1863
1876
  /* @__PURE__ */ jsx13(
1864
1877
  "div",
1865
1878
  {
1866
- className: classnames6("select-table-indicator cursor-pointer", { "d-none": !isClearable || !value }),
1879
+ className: classnames6("cursor-pointer", { "d-none": !isClearable || !value }),
1867
1880
  onClick: (e) => {
1868
1881
  onChange(isMulti ? [] : void 0);
1869
1882
  e.stopPropagation();
1870
1883
  },
1871
- children: /* @__PURE__ */ jsx13("svg", { height: "20", width: "20", style: { color: "#c4c4c4" }, viewBox: "0 0 20 20", "aria-hidden": "true", focusable: "false", className: "css-tj5bde-Svg", children: /* @__PURE__ */ jsx13("path", { d: "M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z" }) })
1884
+ children: /* @__PURE__ */ jsx13("svg", { height: "20", width: "20", fill: "#c4c4c4", viewBox: "0 0 20 20", "aria-hidden": "true", focusable: "false", className: "css-tj5bde-Svg", children: /* @__PURE__ */ jsx13("path", { d: "M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z" }) })
1872
1885
  }
1873
1886
  ),
1874
- /* @__PURE__ */ jsx13("div", { className: "select-table-indicator", children: /* @__PURE__ */ jsx13("svg", { height: "20", width: "20", style: { color: dropdownOpen ? "#000000af" : "#c4c4c4" }, viewBox: "0 0 20 20", "aria-hidden": "true", focusable: "false", className: "css-tj5bde-Svg", children: /* @__PURE__ */ jsx13("path", { d: "M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z" }) }) })
1887
+ /* @__PURE__ */ jsx13("div", { className: "select-table-indicator", children: /* @__PURE__ */ jsx13("svg", { height: "20", width: "20", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx13("path", { d: "M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z" }) }) })
1875
1888
  ]
1876
1889
  }
1877
1890
  ),
@@ -1904,21 +1917,22 @@ var SelectTable = forwardRef2((props, ref) => {
1904
1917
  children: /* @__PURE__ */ jsx13(
1905
1918
  Input6,
1906
1919
  {
1907
- defaultChecked: (optionsLoad ? optionsLoad : options).length > 0 && value?.length >= (optionsLoad ? optionsLoad : options).length,
1920
+ checked: isSelectedAll,
1908
1921
  type: "checkbox",
1909
- className: classnames6("cursor-pointer", { "d-none": !isMulti }),
1910
- style: { textAlign: "center", marginTop: 6 },
1911
- onChange: (e) => {
1922
+ onClick: (e) => {
1912
1923
  if (isMulti) {
1913
- if (e.target.checked) {
1914
- onChange((optionsLoad ? optionsLoad : options).map((item) => {
1915
- return item;
1916
- }));
1917
- } else {
1924
+ if (isSelectedAll) {
1918
1925
  onChange([]);
1926
+ } else {
1927
+ onChange([...optionsCurr]);
1919
1928
  }
1929
+ setIsSelectdAll(!isSelectedAll);
1930
+ e.stopPropagation();
1920
1931
  }
1921
- }
1932
+ },
1933
+ readOnly: true,
1934
+ className: classnames6("cursor-pointer", { "d-none": !isMulti }),
1935
+ style: { textAlign: "center", marginTop: 6 }
1922
1936
  }
1923
1937
  )
1924
1938
  }
@@ -1927,14 +1941,14 @@ var SelectTable = forwardRef2((props, ref) => {
1927
1941
  return renderHeaderCol(col, index);
1928
1942
  })
1929
1943
  ] }) }),
1930
- (optionsLoad ? optionsLoad : options).length > 0 ? /* @__PURE__ */ jsx13(Fragment14, { children: /* @__PURE__ */ jsx13("tbody", { className: "r-select-gridcontent", children: (optionsLoad ? optionsLoad : options)?.map((row, indexRow) => {
1931
- if (loadOptions || checkSearch(searchTerm, row, columns ? columns : defaultColumns)) {
1944
+ optionsCurr.length > 0 ? /* @__PURE__ */ jsx13(Fragment14, { children: /* @__PURE__ */ jsx13("tbody", { className: "r-select-gridcontent", children: optionsCurr?.map((row, indexRow) => {
1945
+ if (!isMulti && loadOptions || checkSearch(searchTerm, row, columns ? columns : defaultColumns)) {
1932
1946
  const isSelected = isMulti && value?.some((x) => x === row[fieldValue ?? "value"]);
1933
1947
  return /* @__PURE__ */ jsxs12(
1934
1948
  "tr",
1935
1949
  {
1936
1950
  id: `row-select-table-${indexRow}`,
1937
- className: classnames6("r-select-row", { "last-row": indexRow === (optionsLoad ? optionsLoad : options).length - 1 }, { "fisrt-row": indexRow === 0 }),
1951
+ className: classnames6("r-select-row", { "last-row": indexRow === optionsCurr.length - 1 }, { "fisrt-row": indexRow === 0 }),
1938
1952
  children: [
1939
1953
  isMulti && /* @__PURE__ */ jsx13(
1940
1954
  "td",
@@ -1946,12 +1960,12 @@ var SelectTable = forwardRef2((props, ref) => {
1946
1960
  const index = value?.findIndex((x) => x === row[fieldValue ?? "value"]);
1947
1961
  if (index > -1) {
1948
1962
  value?.splice(index, 1);
1949
- const valueArr = options.filter((ele) => value?.some((x) => x === ele[fieldValue ?? "value"]));
1963
+ const valueArr = optionsCurr.filter((ele) => value?.some((x) => x === ele[fieldValue ?? "value"]));
1950
1964
  onChange(valueArr);
1951
1965
  } else {
1952
1966
  if (value) {
1953
1967
  value?.push(row[fieldValue ?? "value"]);
1954
- const valueArr = options.filter((ele) => value?.some((x) => x === ele[fieldValue ?? "value"]));
1968
+ const valueArr = optionsCurr.filter((ele) => value?.some((x) => x === ele[fieldValue ?? "value"]));
1955
1969
  onChange(valueArr);
1956
1970
  } else {
1957
1971
  onChange([row[fieldValue ?? "value"]]);
@@ -1998,12 +2012,12 @@ var SelectTable = forwardRef2((props, ref) => {
1998
2012
  const index = value?.findIndex((x) => x === row[fieldValue ?? "value"]);
1999
2013
  if (index > -1) {
2000
2014
  value?.splice(index, 1);
2001
- const valueArr = options.filter((ele) => value?.some((x) => x === ele[fieldValue ?? "value"]));
2015
+ const valueArr = optionsCurr.filter((ele) => value?.some((x) => x === ele[fieldValue ?? "value"]));
2002
2016
  onChange(valueArr);
2003
2017
  } else {
2004
2018
  if (value) {
2005
2019
  value?.push(row[fieldValue ?? "value"]);
2006
- const valueArr = options.filter((ele) => value?.some((x) => x === ele[fieldValue ?? "value"]));
2020
+ const valueArr = optionsCurr.filter((ele) => value?.some((x) => x === ele[fieldValue ?? "value"]));
2007
2021
  onChange(valueArr);
2008
2022
  } else {
2009
2023
  onChange([row[fieldValue ?? "value"]]);
@@ -2034,7 +2048,7 @@ var SelectTable = forwardRef2((props, ref) => {
2034
2048
  }
2035
2049
  }) }) }) : /* @__PURE__ */ jsx13("div", { className: "r-no-data", children: t("No data available.") })
2036
2050
  ] }) }),
2037
- /* @__PURE__ */ jsx13("div", { className: "r-select-footer", children: /* @__PURE__ */ jsxs12(Button3, { outline: true, color: "primary", className: "r-btn-add d-flex align-items-center", onClick: handleAdd, children: [
2051
+ /* @__PURE__ */ jsx13("div", { className: classnames6("r-select-footer", { "d-none": !(showFooter === true || handleAdd) }), children: /* @__PURE__ */ jsxs12(Button3, { outline: true, color: "primary", onClick: handleAdd, className: classnames6("r-btn-add d-flex align-items-center", { "d-none": !handleAdd }), children: [
2038
2052
  /* @__PURE__ */ jsx13(Plus2, { className: "me-50", fontSize: 16 }),
2039
2053
  t("AddNew"),
2040
2054
  " (F9)"
@@ -2464,7 +2478,6 @@ var TableEdit = forwardRef3((props, ref) => {
2464
2478
  thousandSeparator,
2465
2479
  placeholder: t("Select"),
2466
2480
  loadOptions: col.selectSettings?.loadOptions,
2467
- field: col.field,
2468
2481
  handleAdd: col.selectSettings?.handAddNew,
2469
2482
  isMulti: col.selectSettings?.isMulti,
2470
2483
  invalid: col.validate && col.validate(row[col.field], row),
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "react-table-edit",
3
3
  "license": "MIT",
4
- "version": "0.6.0",
4
+ "version": "0.6.1",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",
7
7
  "types": "dist/index.d.ts",