react-table-edit 0.5.9 → 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 +65 -45
  4. package/dist/index.mjs +65 -45
  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,19 +1869,24 @@ 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
- return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { children: [
1871
- index === 0 ? "" : ", ",
1872
- ele[fieldLabel ?? "label"]
1873
- ] }, index);
1883
+ const element = optionsCurr.find((e) => e[fieldValue ?? "value"] === ele);
1884
+ if (element) {
1885
+ return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { children: [
1886
+ index === 0 ? "" : ", ",
1887
+ element[fieldLabel ?? "label"]
1888
+ ] }, index);
1889
+ }
1874
1890
  }) }) }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: (0, import_classnames11.default)("select-value", { "d-none": searchTerm }), children: [
1875
1891
  value ? formatOptionLabel ? formatOptionLabel(value) : value[fieldLabel ?? "label"] : "",
1876
1892
  " "
@@ -1884,7 +1900,7 @@ var SelectTable = (0, import_react13.forwardRef)((props, ref) => {
1884
1900
  className: (0, import_classnames11.default)("select-input"),
1885
1901
  value: searchTerm,
1886
1902
  onChange: (val) => {
1887
- if (loadOptions && val.target.value) {
1903
+ if (!isMulti && loadOptions && val.target.value) {
1888
1904
  loadOptions(val.target.value, callbackLoadOption);
1889
1905
  }
1890
1906
  setSearchTerm(val.target.value);
@@ -1896,15 +1912,15 @@ var SelectTable = (0, import_react13.forwardRef)((props, ref) => {
1896
1912
  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
1897
1913
  "div",
1898
1914
  {
1899
- 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 }),
1900
1916
  onClick: (e) => {
1901
1917
  onChange(isMulti ? [] : void 0);
1902
1918
  e.stopPropagation();
1903
1919
  },
1904
- 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" }) })
1905
1921
  }
1906
1922
  ),
1907
- /* @__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" }) }) })
1908
1924
  ]
1909
1925
  }
1910
1926
  ),
@@ -1937,21 +1953,22 @@ var SelectTable = (0, import_react13.forwardRef)((props, ref) => {
1937
1953
  children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
1938
1954
  import_reactstrap8.Input,
1939
1955
  {
1940
- checked: (optionsLoad ? optionsLoad : options).length > 0 && value?.length >= (optionsLoad ? optionsLoad : options).length,
1956
+ checked: isSelectedAll,
1941
1957
  type: "checkbox",
1942
- className: (0, import_classnames11.default)("cursor-pointer", { "d-none": !isMulti }),
1943
- style: { textAlign: "center", marginTop: 6 },
1944
- onChange: (e) => {
1958
+ onClick: (e) => {
1945
1959
  if (isMulti) {
1946
- if (e.target.checked) {
1947
- onChange((optionsLoad ? optionsLoad : options).map((item) => {
1948
- return item;
1949
- }));
1950
- } else {
1960
+ if (isSelectedAll) {
1951
1961
  onChange([]);
1962
+ } else {
1963
+ onChange([...optionsCurr]);
1952
1964
  }
1965
+ setIsSelectdAll(!isSelectedAll);
1966
+ e.stopPropagation();
1953
1967
  }
1954
- }
1968
+ },
1969
+ readOnly: true,
1970
+ className: (0, import_classnames11.default)("cursor-pointer", { "d-none": !isMulti }),
1971
+ style: { textAlign: "center", marginTop: 6 }
1955
1972
  }
1956
1973
  )
1957
1974
  }
@@ -1960,14 +1977,14 @@ var SelectTable = (0, import_react13.forwardRef)((props, ref) => {
1960
1977
  return renderHeaderCol(col, index);
1961
1978
  })
1962
1979
  ] }) }),
1963
- (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) => {
1964
- if (loadOptions || checkSearch(searchTerm, row, columns ? columns : defaultColumns)) {
1965
- const isSelected = isMulti && value?.some((x) => x[fieldValue ?? "value"] === row[fieldValue ?? "value"]);
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)) {
1982
+ const isSelected = isMulti && value?.some((x) => x === row[fieldValue ?? "value"]);
1966
1983
  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
1967
1984
  "tr",
1968
1985
  {
1969
1986
  id: `row-select-table-${indexRow}`,
1970
- 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 }),
1971
1988
  children: [
1972
1989
  isMulti && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
1973
1990
  "td",
@@ -1976,16 +1993,18 @@ var SelectTable = (0, import_react13.forwardRef)((props, ref) => {
1976
1993
  style: { width: 40, textAlign: "center", padding: 0, paddingBottom: 6 },
1977
1994
  onClick: (e) => {
1978
1995
  if (isMulti) {
1979
- const index = value?.findIndex((x) => x[fieldValue ?? "value"] === row[fieldValue ?? "value"]);
1996
+ const index = value?.findIndex((x) => x === row[fieldValue ?? "value"]);
1980
1997
  if (index > -1) {
1981
1998
  value?.splice(index, 1);
1982
- onChange(value);
1999
+ const valueArr = optionsCurr.filter((ele) => value?.some((x) => x === ele[fieldValue ?? "value"]));
2000
+ onChange(valueArr);
1983
2001
  } else {
1984
2002
  if (value) {
1985
- value?.push(row);
1986
- onChange(value);
2003
+ value?.push(row[fieldValue ?? "value"]);
2004
+ const valueArr = optionsCurr.filter((ele) => value?.some((x) => x === ele[fieldValue ?? "value"]));
2005
+ onChange(valueArr);
1987
2006
  } else {
1988
- onChange([row]);
2007
+ onChange([row[fieldValue ?? "value"]]);
1989
2008
  }
1990
2009
  }
1991
2010
  e.stopPropagation();
@@ -2026,16 +2045,18 @@ var SelectTable = (0, import_react13.forwardRef)((props, ref) => {
2026
2045
  },
2027
2046
  onClick: (e) => {
2028
2047
  if (isMulti) {
2029
- const index = value?.findIndex((x) => x[fieldValue ?? "value"] === row[fieldValue ?? "value"]);
2048
+ const index = value?.findIndex((x) => x === row[fieldValue ?? "value"]);
2030
2049
  if (index > -1) {
2031
2050
  value?.splice(index, 1);
2032
- onChange(value);
2051
+ const valueArr = optionsCurr.filter((ele) => value?.some((x) => x === ele[fieldValue ?? "value"]));
2052
+ onChange(valueArr);
2033
2053
  } else {
2034
2054
  if (value) {
2035
- value?.push(row);
2036
- onChange(value);
2055
+ value?.push(row[fieldValue ?? "value"]);
2056
+ const valueArr = optionsCurr.filter((ele) => value?.some((x) => x === ele[fieldValue ?? "value"]));
2057
+ onChange(valueArr);
2037
2058
  } else {
2038
- onChange([row]);
2059
+ onChange([row[fieldValue ?? "value"]]);
2039
2060
  }
2040
2061
  }
2041
2062
  } else {
@@ -2063,7 +2084,7 @@ var SelectTable = (0, import_react13.forwardRef)((props, ref) => {
2063
2084
  }
2064
2085
  }) }) }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "r-no-data", children: t("No data available.") })
2065
2086
  ] }) }),
2066
- /* @__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: [
2067
2088
  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_becoxy_icons5.Plus, { className: "me-50", fontSize: 16 }),
2068
2089
  t("AddNew"),
2069
2090
  " (F9)"
@@ -2493,7 +2514,6 @@ var TableEdit = (0, import_react14.forwardRef)((props, ref) => {
2493
2514
  thousandSeparator,
2494
2515
  placeholder: t("Select"),
2495
2516
  loadOptions: col.selectSettings?.loadOptions,
2496
- field: col.field,
2497
2517
  handleAdd: col.selectSettings?.handAddNew,
2498
2518
  isMulti: col.selectSettings?.isMulti,
2499
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,19 +1833,24 @@ 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
- return /* @__PURE__ */ jsxs12("span", { children: [
1835
- index === 0 ? "" : ", ",
1836
- ele[fieldLabel ?? "label"]
1837
- ] }, index);
1847
+ const element = optionsCurr.find((e) => e[fieldValue ?? "value"] === ele);
1848
+ if (element) {
1849
+ return /* @__PURE__ */ jsxs12("span", { children: [
1850
+ index === 0 ? "" : ", ",
1851
+ element[fieldLabel ?? "label"]
1852
+ ] }, index);
1853
+ }
1838
1854
  }) }) }) : /* @__PURE__ */ jsx13(Fragment14, { children: /* @__PURE__ */ jsxs12("div", { className: classnames6("select-value", { "d-none": searchTerm }), children: [
1839
1855
  value ? formatOptionLabel ? formatOptionLabel(value) : value[fieldLabel ?? "label"] : "",
1840
1856
  " "
@@ -1848,7 +1864,7 @@ var SelectTable = forwardRef2((props, ref) => {
1848
1864
  className: classnames6("select-input"),
1849
1865
  value: searchTerm,
1850
1866
  onChange: (val) => {
1851
- if (loadOptions && val.target.value) {
1867
+ if (!isMulti && loadOptions && val.target.value) {
1852
1868
  loadOptions(val.target.value, callbackLoadOption);
1853
1869
  }
1854
1870
  setSearchTerm(val.target.value);
@@ -1860,15 +1876,15 @@ var SelectTable = forwardRef2((props, ref) => {
1860
1876
  /* @__PURE__ */ jsx13(
1861
1877
  "div",
1862
1878
  {
1863
- className: classnames6("select-table-indicator cursor-pointer", { "d-none": !isClearable || !value }),
1879
+ className: classnames6("cursor-pointer", { "d-none": !isClearable || !value }),
1864
1880
  onClick: (e) => {
1865
1881
  onChange(isMulti ? [] : void 0);
1866
1882
  e.stopPropagation();
1867
1883
  },
1868
- 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" }) })
1869
1885
  }
1870
1886
  ),
1871
- /* @__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" }) }) })
1872
1888
  ]
1873
1889
  }
1874
1890
  ),
@@ -1901,21 +1917,22 @@ var SelectTable = forwardRef2((props, ref) => {
1901
1917
  children: /* @__PURE__ */ jsx13(
1902
1918
  Input6,
1903
1919
  {
1904
- checked: (optionsLoad ? optionsLoad : options).length > 0 && value?.length >= (optionsLoad ? optionsLoad : options).length,
1920
+ checked: isSelectedAll,
1905
1921
  type: "checkbox",
1906
- className: classnames6("cursor-pointer", { "d-none": !isMulti }),
1907
- style: { textAlign: "center", marginTop: 6 },
1908
- onChange: (e) => {
1922
+ onClick: (e) => {
1909
1923
  if (isMulti) {
1910
- if (e.target.checked) {
1911
- onChange((optionsLoad ? optionsLoad : options).map((item) => {
1912
- return item;
1913
- }));
1914
- } else {
1924
+ if (isSelectedAll) {
1915
1925
  onChange([]);
1926
+ } else {
1927
+ onChange([...optionsCurr]);
1916
1928
  }
1929
+ setIsSelectdAll(!isSelectedAll);
1930
+ e.stopPropagation();
1917
1931
  }
1918
- }
1932
+ },
1933
+ readOnly: true,
1934
+ className: classnames6("cursor-pointer", { "d-none": !isMulti }),
1935
+ style: { textAlign: "center", marginTop: 6 }
1919
1936
  }
1920
1937
  )
1921
1938
  }
@@ -1924,14 +1941,14 @@ var SelectTable = forwardRef2((props, ref) => {
1924
1941
  return renderHeaderCol(col, index);
1925
1942
  })
1926
1943
  ] }) }),
1927
- (optionsLoad ? optionsLoad : options).length > 0 ? /* @__PURE__ */ jsx13(Fragment14, { children: /* @__PURE__ */ jsx13("tbody", { className: "r-select-gridcontent", children: (optionsLoad ? optionsLoad : options)?.map((row, indexRow) => {
1928
- if (loadOptions || checkSearch(searchTerm, row, columns ? columns : defaultColumns)) {
1929
- const isSelected = isMulti && value?.some((x) => x[fieldValue ?? "value"] === row[fieldValue ?? "value"]);
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)) {
1946
+ const isSelected = isMulti && value?.some((x) => x === row[fieldValue ?? "value"]);
1930
1947
  return /* @__PURE__ */ jsxs12(
1931
1948
  "tr",
1932
1949
  {
1933
1950
  id: `row-select-table-${indexRow}`,
1934
- 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 }),
1935
1952
  children: [
1936
1953
  isMulti && /* @__PURE__ */ jsx13(
1937
1954
  "td",
@@ -1940,16 +1957,18 @@ var SelectTable = forwardRef2((props, ref) => {
1940
1957
  style: { width: 40, textAlign: "center", padding: 0, paddingBottom: 6 },
1941
1958
  onClick: (e) => {
1942
1959
  if (isMulti) {
1943
- const index = value?.findIndex((x) => x[fieldValue ?? "value"] === row[fieldValue ?? "value"]);
1960
+ const index = value?.findIndex((x) => x === row[fieldValue ?? "value"]);
1944
1961
  if (index > -1) {
1945
1962
  value?.splice(index, 1);
1946
- onChange(value);
1963
+ const valueArr = optionsCurr.filter((ele) => value?.some((x) => x === ele[fieldValue ?? "value"]));
1964
+ onChange(valueArr);
1947
1965
  } else {
1948
1966
  if (value) {
1949
- value?.push(row);
1950
- onChange(value);
1967
+ value?.push(row[fieldValue ?? "value"]);
1968
+ const valueArr = optionsCurr.filter((ele) => value?.some((x) => x === ele[fieldValue ?? "value"]));
1969
+ onChange(valueArr);
1951
1970
  } else {
1952
- onChange([row]);
1971
+ onChange([row[fieldValue ?? "value"]]);
1953
1972
  }
1954
1973
  }
1955
1974
  e.stopPropagation();
@@ -1990,16 +2009,18 @@ var SelectTable = forwardRef2((props, ref) => {
1990
2009
  },
1991
2010
  onClick: (e) => {
1992
2011
  if (isMulti) {
1993
- const index = value?.findIndex((x) => x[fieldValue ?? "value"] === row[fieldValue ?? "value"]);
2012
+ const index = value?.findIndex((x) => x === row[fieldValue ?? "value"]);
1994
2013
  if (index > -1) {
1995
2014
  value?.splice(index, 1);
1996
- onChange(value);
2015
+ const valueArr = optionsCurr.filter((ele) => value?.some((x) => x === ele[fieldValue ?? "value"]));
2016
+ onChange(valueArr);
1997
2017
  } else {
1998
2018
  if (value) {
1999
- value?.push(row);
2000
- onChange(value);
2019
+ value?.push(row[fieldValue ?? "value"]);
2020
+ const valueArr = optionsCurr.filter((ele) => value?.some((x) => x === ele[fieldValue ?? "value"]));
2021
+ onChange(valueArr);
2001
2022
  } else {
2002
- onChange([row]);
2023
+ onChange([row[fieldValue ?? "value"]]);
2003
2024
  }
2004
2025
  }
2005
2026
  } else {
@@ -2027,7 +2048,7 @@ var SelectTable = forwardRef2((props, ref) => {
2027
2048
  }
2028
2049
  }) }) }) : /* @__PURE__ */ jsx13("div", { className: "r-no-data", children: t("No data available.") })
2029
2050
  ] }) }),
2030
- /* @__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: [
2031
2052
  /* @__PURE__ */ jsx13(Plus2, { className: "me-50", fontSize: 16 }),
2032
2053
  t("AddNew"),
2033
2054
  " (F9)"
@@ -2457,7 +2478,6 @@ var TableEdit = forwardRef3((props, ref) => {
2457
2478
  thousandSeparator,
2458
2479
  placeholder: t("Select"),
2459
2480
  loadOptions: col.selectSettings?.loadOptions,
2460
- field: col.field,
2461
2481
  handleAdd: col.selectSettings?.handAddNew,
2462
2482
  isMulti: col.selectSettings?.isMulti,
2463
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.5.9",
4
+ "version": "0.6.1",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",
7
7
  "types": "dist/index.d.ts",