@oncehub/ui-react 1.4.17-beta.1.0 → 1.4.17-beta.1.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.
@@ -1,8 +1,8 @@
1
1
  import { default as React, CSSProperties } from 'react';
2
- import { Option } from './multi-select.type';
2
+ import { IOption } from '../../interfaces/select.type';
3
3
 
4
4
  interface Props {
5
- options: Option[];
5
+ options: IOption[];
6
6
  checkedValue: string[];
7
7
  onSelectionChange: (val: string[]) => void;
8
8
  maxOptions?: number;
@@ -1,2 +1 @@
1
1
  export * from './quick-multi-select';
2
- export * from './quick-multi-select.type';
@@ -1,8 +1,8 @@
1
1
  import { default as React, CSSProperties } from 'react';
2
- import { Option } from './quick-multi-select.type';
2
+ import { IOption } from '../../interfaces/select.type';
3
3
 
4
4
  interface Props {
5
- options: Option[];
5
+ options: IOption[];
6
6
  checkedValue: string[];
7
7
  onSelectionChange: (val: string[]) => void;
8
8
  maxOptions?: number;
@@ -1,10 +1,10 @@
1
1
  import { CSSProperties, FC } from 'react';
2
- import { Option } from './quick-select.type';
2
+ import { IOption } from '../../interfaces/select.type';
3
3
 
4
4
  interface Props {
5
- options: Option[];
6
- onSelect: (option: Option | undefined) => void;
7
- selected?: Option;
5
+ options: IOption[];
6
+ onSelect: (option: IOption | undefined) => void;
7
+ selected?: IOption;
8
8
  themeColor?: string;
9
9
  className?: string;
10
10
  style?: CSSProperties;
@@ -1,5 +1,5 @@
1
1
  import { FC } from 'react';
2
- import { IOption } from './select.types';
2
+ import { IOption } from '../../interfaces/select.type';
3
3
 
4
4
  interface Props {
5
5
  children: any;
@@ -2,4 +2,3 @@ export * from './select';
2
2
  export * from './select-options';
3
3
  export * from './auto-complete';
4
4
  export * from './auto-complete-options';
5
- export * from './select.types';
@@ -1,5 +1,5 @@
1
1
  import { FC } from 'react';
2
- import { IOption } from './select.types';
2
+ import { IOption } from '../../interfaces/select.type';
3
3
 
4
4
  interface Props {
5
5
  children: any;
package/dist/index.d.ts CHANGED
@@ -1,2 +1,3 @@
1
1
 
2
2
  export * from './components';
3
+ export * from './interfaces';
@@ -0,0 +1 @@
1
+ export * from './select.type';
@@ -1,6 +1,7 @@
1
1
  export interface IOption {
2
2
  value: string;
3
3
  label: string;
4
+ order?: number;
4
5
  avatar?: string;
5
6
  disable?: boolean;
6
7
  }
@@ -1740,17 +1740,17 @@ const Tc = ({
1740
1740
  }, 1e3));
1741
1741
  };
1742
1742
  ae(() => {
1743
- const S = e.filter((W) => W.text.toLowerCase().includes(m.toLowerCase()));
1743
+ const S = e.filter((W) => W.label.toLowerCase().includes(m.toLowerCase()));
1744
1744
  f.current = S;
1745
1745
  }, [e, m]);
1746
1746
  const me = b.length > 0 ? b.map((S) => {
1747
- const W = e.find((ye) => ye.id === S);
1748
- return W?.text !== null ? W?.text : "";
1747
+ const W = e.find((ye) => ye.value === S);
1748
+ return W?.label !== null ? W?.label : "";
1749
1749
  }).filter((S) => S !== "").join(", ") : "Select your option", ve = (S) => {
1750
- const W = e.find((ye) => ye.id === S);
1751
- if (W && !W.disabled && (r === void 0 || b.length <= r)) {
1750
+ const W = e.find((ye) => ye.value === S);
1751
+ if (W && !W.disable && (r === void 0 || b.length <= r)) {
1752
1752
  const he = b.includes(S) ? b.filter((Fe) => Fe !== S) : [...b, S];
1753
- (r === void 0 || he.length <= r) && l && (v(he), n(he), Q(`${W?.text} ${he.includes(S) ? "selected" : "not selected"}`));
1753
+ (r === void 0 || he.length <= r) && l && (v(he), n(he), Q(`${W?.label} ${he.includes(S) ? "selected" : "not selected"}`));
1754
1754
  }
1755
1755
  }, se = (S) => {
1756
1756
  P(), d(S), setTimeout(() => {
@@ -1798,7 +1798,7 @@ const Tc = ({
1798
1798
  });
1799
1799
  }
1800
1800
  } else
1801
- W === "Enter" || W === "Space" || W === " " ? R !== -1 && ve(f.current[R].id) : W === "Escape" && (se(!1), fe());
1801
+ W === "Enter" || W === "Space" || W === " " ? R !== -1 && ve(f.current[R].value) : W === "Escape" && (se(!1), fe());
1802
1802
  };
1803
1803
  ae(() => {
1804
1804
  ne && clearTimeout(ne);
@@ -1908,7 +1908,7 @@ const Tc = ({
1908
1908
  "li",
1909
1909
  {
1910
1910
  className: `${ke.optionsList} ${W === R ? ke.focused : ""}`,
1911
- onClick: () => ve(S.id),
1911
+ onClick: () => ve(S.value),
1912
1912
  "aria-selected": W === R,
1913
1913
  role: "option",
1914
1914
  children: [
@@ -1916,14 +1916,14 @@ const Tc = ({
1916
1916
  io,
1917
1917
  {
1918
1918
  themeColor: o,
1919
- checked: b.includes(S.id),
1920
- disabled: S.disabled || r !== void 0 && b.length >= r && !b.includes(S.id)
1919
+ checked: b.includes(S.value),
1920
+ disabled: S.disable || r !== void 0 && b.length >= r && !b.includes(S.value)
1921
1921
  }
1922
1922
  ),
1923
- /* @__PURE__ */ O.jsx("span", { children: S.text })
1923
+ /* @__PURE__ */ O.jsx("span", { children: S.label })
1924
1924
  ]
1925
1925
  },
1926
- S.id
1926
+ S.value
1927
1927
  )
1928
1928
  )) })
1929
1929
  ] }),
@@ -1982,8 +1982,8 @@ const Tc = ({
1982
1982
  const [b, v] = ie(t), m = j({});
1983
1983
  let h = {}, l;
1984
1984
  const d = (a) => {
1985
- const u = e.find((y) => y.id === a);
1986
- if (!u || u.disabled)
1985
+ const u = e.find((y) => y.value === a);
1986
+ if (!u || u.disable)
1987
1987
  return;
1988
1988
  m.current[a]?.click();
1989
1989
  const k = b.includes(a) ? b.filter((y) => y !== a) : [...b, a];
@@ -2002,38 +2002,38 @@ const Tc = ({
2002
2002
  "li",
2003
2003
  {
2004
2004
  style: { ...h, ...i },
2005
- className: `${c} ${a.disabled || r !== void 0 && b.length >= r && !b.includes(a.id) ? Bt.disabled : ""} ${b.includes(a.id) ? Bt.selected : ""}`,
2006
- tabIndex: a.disabled ? -1 : 0,
2007
- onClick: () => d(a.id),
2005
+ className: `${c} ${a.disable || r !== void 0 && b.length >= r && !b.includes(a.value) ? Bt.disabled : ""} ${b.includes(a.value) ? Bt.selected : ""}`,
2006
+ tabIndex: a.disable ? -1 : 0,
2007
+ onClick: () => d(a.value),
2008
2008
  onKeyPress: (u) => {
2009
- (u.key === " " || u.code === "Space") && (u.preventDefault(), d(a.id));
2009
+ (u.key === " " || u.code === "Space") && (u.preventDefault(), d(a.value));
2010
2010
  },
2011
2011
  "data-testid": "option-box",
2012
2012
  children: /* @__PURE__ */ O.jsx(
2013
2013
  ar,
2014
2014
  {
2015
- id: a.id,
2015
+ id: a.value,
2016
2016
  checkboxSize: "large",
2017
2017
  tabIndex: -1,
2018
2018
  themeColor: o,
2019
2019
  ref: (u) => {
2020
- m.current[a.id] = u;
2020
+ m.current[a.value] = u;
2021
2021
  },
2022
- checked: b.includes(a.id),
2023
- disabled: a.disabled || r !== void 0 && b.length >= r && !b.includes(a.id),
2022
+ checked: b.includes(a.value),
2023
+ disabled: a.disable || r !== void 0 && b.length >= r && !b.includes(a.value),
2024
2024
  children: /* @__PURE__ */ O.jsx(
2025
2025
  "span",
2026
2026
  {
2027
2027
  style: {
2028
- color: o && (o === "#ffffff" || l === "light") || a.disabled || r !== void 0 && b.length >= r && !b.includes(a.id) ? "#333333" : o && (o !== "#ffffff" || l !== "light") ? o : "#006bb1"
2028
+ color: o && (o === "#ffffff" || l === "light") || a.disable || r !== void 0 && b.length >= r && !b.includes(a.value) ? "#333333" : o && (o !== "#ffffff" || l !== "light") ? o : "#006bb1"
2029
2029
  },
2030
- children: a.text
2030
+ children: a.label
2031
2031
  }
2032
2032
  )
2033
2033
  }
2034
2034
  )
2035
2035
  },
2036
- a.id
2036
+ a.value
2037
2037
  )) }) });
2038
2038
  }, nl = "_singleSelectWrapper_j8hf5_1", rl = "_quickOption_j8hf5_4", ol = "_selected_j8hf5_10", il = "_triangle_j8hf5_16", al = "_loader_j8hf5_19", ll = "_checkmarkWrap_j8hf5_22", sl = "_checkmark_j8hf5_22", cl = "_fill_j8hf5_1", ul = "_scale_j8hf5_1", dl = "_checkmarkCheck_j8hf5_29", fl = "_stroke_j8hf5_1", pl = "_disabled_j8hf5_34", Ge = {
2039
2039
  singleSelectWrapper: nl,
@@ -2062,7 +2062,7 @@ const Tc = ({
2062
2062
  const [b, v] = ie(n);
2063
2063
  let m = {}, h = {}, l = "#ffffff";
2064
2064
  const d = (a) => {
2065
- if (b?.id === a?.id) {
2065
+ if (b?.value === a?.value) {
2066
2066
  v(void 0), t(void 0);
2067
2067
  return;
2068
2068
  }
@@ -2084,8 +2084,8 @@ const Tc = ({
2084
2084
  return /* @__PURE__ */ O.jsx("div", { className: Ge.singleSelectWrapper, children: /* @__PURE__ */ O.jsx("div", { className: Ge.quickOption, children: /* @__PURE__ */ O.jsx("ul", { className: Ge.quickOption, role: "radiogroup", id: f, children: e.map((a) => /* @__PURE__ */ O.jsxs(
2085
2085
  "li",
2086
2086
  {
2087
- tabIndex: a.disabled ? -1 : 0,
2088
- className: `${o} ${b?.id === a.id ? Ge.selected : ""} ${a.disabled ? Ge.disabled : ""}`,
2087
+ tabIndex: a.disable ? -1 : 0,
2088
+ className: `${o} ${b?.value === a.value ? Ge.selected : ""} ${a.disable ? Ge.disabled : ""}`,
2089
2089
  style: { ...m, ...c },
2090
2090
  onClick: () => d(a),
2091
2091
  onKeyPress: (u) => {
@@ -2093,10 +2093,10 @@ const Tc = ({
2093
2093
  },
2094
2094
  "data-testid": "checkbox-input",
2095
2095
  role: "radio",
2096
- "aria-checked": b?.id === a.id,
2096
+ "aria-checked": b?.value === a.value,
2097
2097
  children: [
2098
- a.text,
2099
- b?.id === a.id && !a.disabled && /* @__PURE__ */ O.jsxs("div", { className: Ge.triangle, style: { ...h }, children: [
2098
+ a.label,
2099
+ b?.value === a.value && !a.disable && /* @__PURE__ */ O.jsxs("div", { className: Ge.triangle, style: { ...h }, children: [
2100
2100
  i && /* @__PURE__ */ O.jsx("div", { className: Ge.loader, style: { borderRightColor: r ?? "#006bb1" } }),
2101
2101
  !i && /* @__PURE__ */ O.jsx("div", { className: Ge.checkmarkWrap, children: /* @__PURE__ */ O.jsx(
2102
2102
  "svg",
@@ -2121,7 +2121,7 @@ const Tc = ({
2121
2121
  ] })
2122
2122
  ]
2123
2123
  },
2124
- a.id
2124
+ a.value
2125
2125
  )) }) }) });
2126
2126
  }, bl = "_scrollbarContainer_40vsr_1", vl = {
2127
2127
  scrollbarContainer: bl