@cfx-dev/ui-components 4.2.24 → 4.3.0

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 (176) hide show
  1. package/dist/Combination-CSgOhzm-.js +2198 -0
  2. package/dist/Combination-N-vN9BB-.js +823 -0
  3. package/dist/Table.module-DHI1mXN2.js +17 -0
  4. package/dist/assets/all_css.css +1 -0
  5. package/dist/assets/css/Checkbox.css +1 -1
  6. package/dist/assets/css/DataTable.css +1 -0
  7. package/dist/assets/css/Table.css +1 -1
  8. package/dist/assets/general/global.css +1 -1
  9. package/dist/cfxIcons-B9nzO6TW.js +98 -0
  10. package/dist/components/Accordion/Accordion.js +25 -26
  11. package/dist/components/Accordion/AccordionShowcase.js +1 -1
  12. package/dist/components/Avatar/Avatar.d.ts +2 -1
  13. package/dist/components/Avatar/Avatar.js +21 -20
  14. package/dist/components/Avatar/AvatarShowcase.js +1 -1
  15. package/dist/components/Badge/Badge.d.ts +2 -1
  16. package/dist/components/Badge/Badge.js +29 -29
  17. package/dist/components/Badge/BadgeShowcase.js +1 -1
  18. package/dist/components/BurgerMenu/BurgerMenu.js +2 -2
  19. package/dist/components/BurgerMenu/BurgerMenuButton.js +1 -1
  20. package/dist/components/BurgerMenu/BurgerMenuShowcase.js +1 -1
  21. package/dist/components/Button/Button.d.ts +5 -2
  22. package/dist/components/Button/Button.js +83 -81
  23. package/dist/components/Button/ButtonShowcase.js +2 -2
  24. package/dist/components/Button/LinkButton.d.ts +1 -1
  25. package/dist/components/Button/LinkButton.js +18 -17
  26. package/dist/components/Button/index.d.ts +1 -1
  27. package/dist/components/Button/index.js +7 -7
  28. package/dist/components/Checkbox/Checkbox.d.ts +1 -0
  29. package/dist/components/Checkbox/Checkbox.js +154 -242
  30. package/dist/components/ClipboardButton/ClipboardButton.js +7 -7
  31. package/dist/components/ControlBox/ControlBox.d.ts +3 -2
  32. package/dist/components/ControlBox/ControlBox.js +13 -10
  33. package/dist/components/CountryFlag/CountryFlag.d.ts +3 -2
  34. package/dist/components/CountryFlag/CountryFlag.js +14 -11
  35. package/dist/components/DataTable/DataTable.d.ts +40 -0
  36. package/dist/components/DataTable/DataTable.js +163 -0
  37. package/dist/components/DataTable/DataTableShowcase.d.ts +5 -0
  38. package/dist/components/DataTable/DataTableShowcase.js +60 -0
  39. package/dist/components/DataTable/index.d.ts +2 -0
  40. package/dist/components/DataTable/index.js +6 -0
  41. package/dist/components/Decorate/Decorate.d.ts +3 -2
  42. package/dist/components/Decorate/Decorate.js +19 -15
  43. package/dist/components/Dot/Dot.d.ts +2 -1
  44. package/dist/components/Dot/Dot.js +15 -13
  45. package/dist/components/DropdownSelect/DropdownSelect.d.ts +2 -1
  46. package/dist/components/DropdownSelect/DropdownSelect.js +665 -1836
  47. package/dist/components/DropdownSelect/DropdownSelectShowcase.js +1 -1
  48. package/dist/components/Flyout/Flyout.d.ts +2 -1
  49. package/dist/components/Flyout/Flyout.js +22 -20
  50. package/dist/components/Icon/Icon.d.ts +2 -1
  51. package/dist/components/Icon/Icon.js +19 -17
  52. package/dist/components/IconBig/IconBig.d.ts +2 -1
  53. package/dist/components/IconBig/IconBig.js +16 -14
  54. package/dist/components/Icons/IconsShowcase.js +1 -1
  55. package/dist/components/Icons/cfx-icons/Radio.d.ts +5 -0
  56. package/dist/components/Icons/cfx-icons/Radio.js +36 -0
  57. package/dist/components/Icons/cfx-icons/Square.js +15 -9
  58. package/dist/components/Icons/cfxIcons.d.ts +1 -0
  59. package/dist/components/Icons/cfxIcons.js +62 -60
  60. package/dist/components/Icons/index.js +1 -1
  61. package/dist/components/Indicator/Indicator.js +9 -10
  62. package/dist/components/InfoPanel/InfoPanelShowcase.js +1 -1
  63. package/dist/components/Input/Input.d.ts +4 -1
  64. package/dist/components/Input/Input.js +101 -88
  65. package/dist/components/Input/InputShowcase.js +1 -1
  66. package/dist/components/Input/RichInput.d.ts +2 -1
  67. package/dist/components/Input/RichInput.js +37 -34
  68. package/dist/components/InputDropzone/InputDropzone.d.ts +1 -1
  69. package/dist/components/InputDropzone/InputDropzone.js +1723 -625
  70. package/dist/components/Interactive/Interactive.d.ts +2 -1
  71. package/dist/components/Interactive/Interactive.js +14 -12
  72. package/dist/components/Island/Island.d.ts +2 -1
  73. package/dist/components/Island/Island.js +24 -24
  74. package/dist/components/Layout/Box/Box.d.ts +8 -2
  75. package/dist/components/Layout/Box/Box.js +53 -51
  76. package/dist/components/Layout/Box/Box.types.d.ts +22 -0
  77. package/dist/components/Layout/Box/Box.types.js +4 -0
  78. package/dist/components/Layout/Box/index.d.ts +1 -1
  79. package/dist/components/Layout/Box/index.js +3 -3
  80. package/dist/components/Layout/Center/Center.d.ts +2 -1
  81. package/dist/components/Layout/Center/Center.js +19 -18
  82. package/dist/components/Layout/Flex/Flex.d.ts +6 -10
  83. package/dist/components/Layout/Flex/Flex.js +53 -64
  84. package/dist/components/Layout/Flex/FlexRestricter.d.ts +2 -1
  85. package/dist/components/Layout/Flex/FlexRestricter.js +13 -12
  86. package/dist/components/Layout/Flex/FlexShowcase.js +1 -1
  87. package/dist/components/Layout/Flex/index.d.ts +2 -2
  88. package/dist/components/Layout/Flex/index.js +8 -8
  89. package/dist/components/Layout/Page/Page.js +11 -12
  90. package/dist/components/Layout/Scrollable/Rail.d.ts +1 -1
  91. package/dist/components/Layout/Scrollable/Scrollable.d.ts +2 -1
  92. package/dist/components/Layout/Scrollable/Scrollable.js +40 -38
  93. package/dist/components/Layout/Scrollable/ScrollableShowcase.js +1 -1
  94. package/dist/components/Layout/Scrollable/VirtualScrollable.js +98 -98
  95. package/dist/components/Link/LinkShowcase.js +1 -1
  96. package/dist/components/Loaf/Loaf.d.ts +2 -1
  97. package/dist/components/Loaf/Loaf.js +17 -16
  98. package/dist/components/Logos/LogosShowcase.js +1 -1
  99. package/dist/components/Modal/Modal.js +16 -17
  100. package/dist/components/Modal/ModalShowcase.js +14 -11
  101. package/dist/components/NavList/NavList.d.ts +2 -1
  102. package/dist/components/NavList/NavList.js +19 -18
  103. package/dist/components/OnScreenSensor.js +1 -1
  104. package/dist/components/Overlay/Overlay.d.ts +4 -2
  105. package/dist/components/Overlay/Overlay.js +31 -23
  106. package/dist/components/Popover/Popover.d.ts +3 -2
  107. package/dist/components/Popover/Popover.js +31 -30
  108. package/dist/components/Popover/PopoverShowcase.js +4 -4
  109. package/dist/components/PremiumBadge/PremiumBadge.d.ts +2 -1
  110. package/dist/components/PremiumBadge/PremiumBadge.js +12 -11
  111. package/dist/components/Select/Select.d.ts +1 -1
  112. package/dist/components/Select/Select.js +666 -1617
  113. package/dist/components/Select/SelectShowcase.js +1 -1
  114. package/dist/components/Shroud/Shroud.d.ts +2 -1
  115. package/dist/components/Shroud/Shroud.js +16 -14
  116. package/dist/components/Skeleton/Skeleton.d.ts +1 -1
  117. package/dist/components/Skeleton/Skeleton.js +26 -27
  118. package/dist/components/Skeleton/SkeletonShowcase.js +4 -4
  119. package/dist/components/Slider/Slider.d.ts +2 -1
  120. package/dist/components/Slider/Slider.js +326 -377
  121. package/dist/components/Slider/SliderShowcase.js +1 -1
  122. package/dist/components/Switch/Switch.js +109 -155
  123. package/dist/components/Table/TableBody.d.ts +8 -0
  124. package/dist/components/Table/TableBody.js +14 -0
  125. package/dist/components/Table/TableCell.d.ts +11 -0
  126. package/dist/components/Table/TableCell.js +54 -0
  127. package/dist/components/Table/TableCellCheckbox.d.ts +11 -0
  128. package/dist/components/Table/TableCellCheckbox.js +20 -0
  129. package/dist/components/Table/TableHeader.d.ts +9 -0
  130. package/dist/components/Table/TableHeader.js +24 -0
  131. package/dist/components/Table/TableIconButton.d.ts +6 -0
  132. package/dist/components/Table/TableIconButton.js +16 -0
  133. package/dist/components/Table/TableRoot.d.ts +8 -0
  134. package/dist/components/Table/TableRoot.js +23 -0
  135. package/dist/components/Table/TableRow.d.ts +13 -0
  136. package/dist/components/Table/TableRow.js +46 -0
  137. package/dist/components/Table/TableShowcase.js +56 -57
  138. package/dist/components/Table/index.d.ts +20 -2
  139. package/dist/components/Table/index.js +17 -5
  140. package/dist/components/Tabular/TabularShowcase.js +1 -1
  141. package/dist/components/Text/Text.d.ts +6 -3
  142. package/dist/components/Text/Text.js +67 -63
  143. package/dist/components/Text/TextShowcase.js +40 -33
  144. package/dist/components/Title/Title.d.ts +3 -1
  145. package/dist/components/Title/TitleShowcase.js +1 -1
  146. package/dist/components/ToggleGroup/ToggleGroupShowcase.js +1 -1
  147. package/dist/index-BHuChyf5.js +238 -0
  148. package/dist/index-Cl_RnsqN.js +386 -0
  149. package/dist/index-DZEAOJqB.js +53 -0
  150. package/dist/index-HDl8nGsm.js +70 -0
  151. package/dist/main.d.ts +6 -4
  152. package/dist/main.js +66 -65
  153. package/dist/{medium-BA3EQDZW.js → medium-Bq5NvyU7.js} +1 -1
  154. package/dist/styles-scss/global.scss +1 -0
  155. package/dist/tslib.es6-CtHwNPxX.js +72 -0
  156. package/dist/utils/hooks/useClipboardComponent.d.ts +1 -1
  157. package/dist/utils/hooks/useOutlet.js +1 -1
  158. package/dist/utils/hooks/usePopoverController.d.ts +1 -1
  159. package/dist/utils/links.js +1 -1
  160. package/dist/utils/mergeRefs.d.ts +1 -1
  161. package/dist/utils/mergeRefs.js +1 -1
  162. package/dist/utils/ui/ui.d.ts +1 -0
  163. package/dist/utils/ui/ui.js +45 -36
  164. package/dist/utils/ui/ui.types.d.ts +4 -0
  165. package/package.json +6 -5
  166. package/dist/Combination-Cbiw1XRb.js +0 -792
  167. package/dist/cfxIcons-BNd1WgpX.js +0 -96
  168. package/dist/components/Table/Table.d.ts +0 -42
  169. package/dist/components/Table/Table.js +0 -170
  170. package/dist/index-2hJuj4UN.js +0 -19069
  171. package/dist/index-AweK2ufS.js +0 -171
  172. package/dist/index-BlbvKsmN.js +0 -82
  173. package/dist/index-ByaXH_ih.js +0 -10
  174. package/dist/index-Bz27DCHt.js +0 -1342
  175. package/dist/index-Cf5Yu9oD.js +0 -67
  176. package/dist/tslib.es6-CBKHJX9H.js +0 -151
@@ -1,109 +1,111 @@
1
- import { jsx as a, jsxs as W, Fragment as g } from "react/jsx-runtime";
1
+ import { jsx as a, jsxs as N, Fragment as W } from "react/jsx-runtime";
2
2
  import m from "react";
3
- import { Icon as A } from "../Icon/Icon.js";
4
- import { clsx as q } from "../../utils/clsx.js";
5
- import { noop as x } from "../../utils/functional.js";
6
- const I = "cfxui__Button__unsetAll__44b96", M = "cfxui__Button__root__e2ace", j = "cfxui__Button__fullWidth__f61d9", w = "cfxui__Button__primary__1c59f", F = "cfxui__Button__secondary__b2b84", R = "cfxui__Button__linked__330cb", v = "cfxui__Button__quicklink__204ac", D = "cfxui__Button__icon__44e51", L = "cfxui__Button__icononly__4f786", U = "cfxui__Button__decorator__39a9b", t = {
7
- unsetAll: I,
8
- root: M,
9
- fullWidth: j,
10
- primary: w,
3
+ import { Icon as g } from "../Icon/Icon.js";
4
+ import { clsx as A } from "../../utils/clsx.js";
5
+ import { noop as d } from "../../utils/functional.js";
6
+ const q = "cfxui__Button__unsetAll__44b96", I = "cfxui__Button__root__e2ace", M = "cfxui__Button__fullWidth__f61d9", j = "cfxui__Button__primary__1c59f", F = "cfxui__Button__secondary__b2b84", v = "cfxui__Button__linked__330cb", w = "cfxui__Button__quicklink__204ac", D = "cfxui__Button__icon__44e51", L = "cfxui__Button__icononly__4f786", R = "cfxui__Button__decorator__39a9b", t = {
7
+ unsetAll: q,
8
+ root: I,
9
+ fullWidth: M,
10
+ primary: j,
11
11
  secondary: F,
12
12
  "on-light": "cfxui__Button__on-light__ae69c",
13
- linked: R,
14
- quicklink: v,
13
+ linked: v,
14
+ quicklink: w,
15
15
  icon: D,
16
16
  icononly: L,
17
- decorator: U
17
+ decorator: R
18
18
  };
19
- function z(l) {
19
+ function U(c) {
20
20
  const {
21
21
  text: o = null,
22
- icon: e,
23
- decorator: n = null
24
- } = l;
25
- return /* @__PURE__ */ W(g, { children: [
22
+ icon: n,
23
+ decorator: l = null
24
+ } = c;
25
+ return /* @__PURE__ */ N(W, { children: [
26
26
  o,
27
- !!e && /* @__PURE__ */ a(A, { name: e, className: t.icon }),
28
- !!n && /* @__PURE__ */ a("div", { className: t.decorator, children: n })
27
+ !!n && /* @__PURE__ */ a(g, { name: n, className: t.icon }),
28
+ !!l && /* @__PURE__ */ a("div", { className: t.decorator, children: l })
29
29
  ] });
30
30
  }
31
- function E(l) {
31
+ function $(c) {
32
32
  const {
33
33
  text: o = null,
34
- icon: e,
35
- theme: n = "default",
36
- disabled: u = !1,
37
- className: s = "",
38
- autofocus: r = !1,
39
- fullWidth: _ = !1,
34
+ icon: n,
35
+ theme: l = "default",
36
+ disabled: s = !1,
37
+ className: u = "",
38
+ autofocus: _ = !1,
39
+ fullWidth: e = !1,
40
40
  tabIndex: i
41
- } = l;
42
- return q(t.unsetAll, t.root, t[n], s, {
43
- [t.disabled]: u,
44
- [t.icononly]: !!e && (o === null || typeof o > "u"),
41
+ } = c;
42
+ return A(t.unsetAll, t.root, t[l], u, {
43
+ [t.disabled]: s,
44
+ [t.icononly]: !!n && (o === null || typeof o > "u"),
45
45
  [t.text]: !!o,
46
- [t.autofocus]: r || typeof i < "u",
47
- [t.fullWidth]: _
46
+ [t.autofocus]: _ || typeof i < "u",
47
+ [t.fullWidth]: e
48
48
  });
49
49
  }
50
- const P = m.forwardRef(function(o, e) {
50
+ function z(c) {
51
51
  const {
52
- text: n = null,
53
- icon: u,
54
- title: s = "",
55
- type: r = "button",
56
- className: _ = "",
57
- theme: i = "default",
58
- disabled: c = !1,
59
- onClick: b = x,
60
- onMouseDown: h = x,
61
- onMouseUp: k = x,
62
- autofocus: f = !1,
63
- tabIndex: d,
64
- fullWidth: B = !1,
65
- ariaLabel: y = ""
66
- } = o, p = m.useMemo(() => E({
67
- text: n,
68
- icon: u,
69
- theme: i,
70
- disabled: c,
71
- className: _,
72
- autofocus: f,
73
- fullWidth: B,
74
- tabIndex: d
52
+ text: o = null,
53
+ icon: n,
54
+ title: l = "",
55
+ type: s = "button",
56
+ className: u = "",
57
+ theme: _ = "default",
58
+ disabled: e = !1,
59
+ onClick: i = d,
60
+ onMouseDown: b = d,
61
+ onMouseUp: B = d,
62
+ autofocus: r = !1,
63
+ tabIndex: f,
64
+ fullWidth: x = !1,
65
+ ariaLabel: h = "",
66
+ ref: k
67
+ } = c, y = m.useMemo(() => $({
68
+ text: o,
69
+ icon: n,
70
+ theme: _,
71
+ disabled: e,
72
+ className: u,
73
+ autofocus: r,
74
+ fullWidth: x,
75
+ tabIndex: f
75
76
  }), [
76
- f,
77
- _,
78
- B,
79
- c,
77
+ r,
80
78
  u,
81
- d,
79
+ x,
80
+ e,
82
81
  n,
83
- i
84
- ]), C = m.useCallback((N) => {
85
- c || b(N);
86
- }, [c, b]);
82
+ f,
83
+ o,
84
+ _
85
+ ]), p = m.useCallback((C) => {
86
+ e || i(C);
87
+ }, [e, i]);
87
88
  return /* @__PURE__ */ a(
88
89
  "button",
89
90
  {
90
- ref: e,
91
- disabled: c,
92
- className: p,
93
- onClick: C,
94
- onMouseDown: h,
95
- onMouseUp: k,
96
- autoFocus: f,
97
- tabIndex: d,
98
- title: s,
99
- type: r,
100
- "aria-label": y,
101
- children: /* @__PURE__ */ a(z, { ...o })
91
+ ref: k,
92
+ disabled: e,
93
+ className: y,
94
+ onClick: p,
95
+ onMouseDown: b,
96
+ onMouseUp: B,
97
+ autoFocus: r,
98
+ tabIndex: f,
99
+ title: l,
100
+ type: s,
101
+ "aria-label": h,
102
+ children: /* @__PURE__ */ a(U, { ...c })
102
103
  }
103
104
  );
104
- });
105
+ }
106
+ const O = m.memo(z);
105
107
  export {
106
- P as Button,
107
- z as ButtonContent,
108
- E as getButtonClassName
108
+ U as ButtonContent,
109
+ O as default,
110
+ $ as getButtonClassName
109
111
  };
@@ -1,9 +1,9 @@
1
1
  import { jsxs as t, jsx as e } from "react/jsx-runtime";
2
2
  import l from "react";
3
- import { Flex as n } from "../Layout/Flex/Flex.js";
3
+ import n from "../Layout/Flex/Flex.js";
4
4
  import { Text as i } from "../Text/Text.js";
5
5
  import "../../utils/ui/ui.js";
6
- import { Button as r } from "./Button.js";
6
+ import r from "./Button.js";
7
7
  import { ButtonBar as o } from "./ButtonBar.js";
8
8
  import { LinkButton as c } from "./LinkButton.js";
9
9
  function a() {
@@ -8,5 +8,5 @@ export interface LinkButtonProps extends BtnExtendedProps {
8
8
  target?: string;
9
9
  Component?: React.ElementType;
10
10
  }
11
- export declare const LinkButton: React.ForwardRefExoticComponent<LinkButtonProps & React.RefAttributes<HTMLAnchorElement>>;
11
+ export declare function LinkButton(props: LinkButtonProps): import("react/jsx-runtime").JSX.Element;
12
12
  export {};
@@ -1,33 +1,34 @@
1
- import { jsx as i } from "react/jsx-runtime";
2
- import n from "react";
1
+ import { jsx as r } from "react/jsx-runtime";
2
+ import i from "react";
3
3
  import { noop as k } from "../../utils/functional.js";
4
- import { isExternalUrl as d } from "../../utils/links.js";
5
- import { getButtonClassName as x, ButtonContent as B } from "./Button.js";
6
- const M = n.forwardRef(function(t, a) {
4
+ import { isExternalUrl as x } from "../../utils/links.js";
5
+ import { getButtonClassName as d, ButtonContent as B } from "./Button.js";
6
+ function M(t) {
7
7
  const {
8
- to: o,
8
+ to: e,
9
9
  title: m = "",
10
- tabIndex: s,
11
- target: f = "",
10
+ tabIndex: a,
11
+ target: s = "",
12
12
  onClick: l = k,
13
- isHrefProp: r = !1,
14
- Component: c
15
- } = t, u = n.useMemo(() => x(t), [t]), e = d(o), C = e ? "a" : c || "a", p = n.useMemo(() => e || r ? { href: o } : { to: o }, [o, e, r]);
16
- return /* @__PURE__ */ i(
13
+ isHrefProp: n = !1,
14
+ Component: f,
15
+ ref: c
16
+ } = t, u = i.useMemo(() => d(t), [t]), o = x(e), C = o ? "a" : f || "a", p = i.useMemo(() => o || n ? { href: e } : { to: e }, [e, o, n]);
17
+ return /* @__PURE__ */ r(
17
18
  C,
18
19
  {
19
- ref: a,
20
+ ref: c,
20
21
  className: u,
21
- tabIndex: s,
22
+ tabIndex: a,
22
23
  title: m,
23
- target: f,
24
+ target: s,
24
25
  rel: "noopener noreferrer",
25
26
  onClickCapture: l,
26
27
  ...p,
27
- children: /* @__PURE__ */ i(B, { ...t })
28
+ children: /* @__PURE__ */ r(B, { ...t })
28
29
  }
29
30
  );
30
- });
31
+ }
31
32
  export {
32
33
  M as LinkButton
33
34
  };
@@ -1,4 +1,4 @@
1
- export { Button, ButtonContent, getButtonClassName, } from './Button';
1
+ export { default as Button, ButtonContent, getButtonClassName, } from './Button';
2
2
  export { ButtonBar } from './ButtonBar';
3
3
  export { LinkButton } from './LinkButton';
4
4
  export type { ButtonTheme, ButtonProps, } from './Button';
@@ -1,10 +1,10 @@
1
- import { Button as n, ButtonContent as r, getButtonClassName as e } from "./Button.js";
2
- import { ButtonBar as u } from "./ButtonBar.js";
3
- import { LinkButton as a } from "./LinkButton.js";
1
+ import { default as n, ButtonContent as e, getButtonClassName as r } from "./Button.js";
2
+ import { ButtonBar as B } from "./ButtonBar.js";
3
+ import { LinkButton as f } from "./LinkButton.js";
4
4
  export {
5
5
  n as Button,
6
- u as ButtonBar,
7
- r as ButtonContent,
8
- a as LinkButton,
9
- e as getButtonClassName
6
+ B as ButtonBar,
7
+ e as ButtonContent,
8
+ f as LinkButton,
9
+ r as getButtonClassName
10
10
  };
@@ -7,6 +7,7 @@ export interface CheckboxProps extends Omit<CheckboxUi.CheckboxProps, 'color'>,
7
7
  size?: CheckboxSize;
8
8
  rootClassName?: string;
9
9
  indicatorClassName?: string;
10
+ iconIndicator?: React.ComponentType;
10
11
  }
11
12
  declare function Checkbox(props: CheckboxProps): import("react/jsx-runtime").JSX.Element;
12
13
  declare const _default: React.MemoExoticComponent<typeof Checkbox>;