@tedi-design-system/react 15.0.0-rc.1 → 15.0.0-rc.10

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 (93) hide show
  1. package/bundle-stats.html +1 -1
  2. package/community.cjs.js +1 -1
  3. package/community.es.js +219 -227
  4. package/index.css +1 -1
  5. package/package.json +3 -3
  6. package/src/community/components/accordion/accordion-item-header/accordion-item-header.cjs.js +1 -1
  7. package/src/community/components/accordion/accordion-item-header/accordion-item-header.es.js +2 -2
  8. package/src/community/components/button-content/button-content.cjs.js +1 -1
  9. package/src/community/components/button-content/button-content.d.ts +1 -1
  10. package/src/community/components/button-content/button-content.es.js +39 -33
  11. package/src/community/components/form/select/select.cjs.js +1 -1
  12. package/src/community/components/form/select/select.d.ts +1 -1
  13. package/src/community/components/form/select/select.es.js +33 -33
  14. package/src/community/components/form/text-editor/components/style-button.cjs.js +1 -1
  15. package/src/community/components/form/text-editor/components/style-button.es.js +2 -2
  16. package/src/community/components/form/toggle/toggle.cjs.js +1 -1
  17. package/src/community/components/form/toggle/toggle.es.js +4 -4
  18. package/src/community/components/layout/breadcrumbs/crumb/crumb.cjs.js +1 -1
  19. package/src/community/components/layout/breadcrumbs/crumb/crumb.es.js +9 -9
  20. package/src/community/components/layout/footer/footer.cjs.js +1 -1
  21. package/src/community/components/layout/footer/footer.d.ts +1 -1
  22. package/src/community/components/layout/footer/footer.es.js +22 -22
  23. package/src/community/components/layout/header/components/header-language/header-language.cjs.js +1 -1
  24. package/src/community/components/layout/header/components/header-language/header-language.es.js +8 -8
  25. package/src/community/components/layout/header/components/header-modal/header-modal.cjs.js +1 -1
  26. package/src/community/components/layout/header/components/header-modal/header-modal.es.js +6 -6
  27. package/src/community/components/layout/header/components/header-notification/header-notification.cjs.js +1 -1
  28. package/src/community/components/layout/header/components/header-notification/header-notification.es.js +4 -4
  29. package/src/community/components/layout/header/components/header-role/header-role.cjs.js +1 -1
  30. package/src/community/components/layout/header/components/header-role/header-role.es.js +19 -19
  31. package/src/community/components/layout/header/components/header-settings/header-settings.cjs.js +1 -1
  32. package/src/community/components/layout/header/components/header-settings/header-settings.es.js +1 -1
  33. package/src/community/components/layout/sidenav/sidenav.cjs.js +1 -1
  34. package/src/community/components/layout/sidenav/sidenav.d.ts +1 -1
  35. package/src/community/components/layout/sidenav/sidenav.es.js +39 -34
  36. package/src/community/components/placeholder/placeholder.cjs.js +1 -1
  37. package/src/community/components/placeholder/placeholder.d.ts +1 -1
  38. package/src/community/components/placeholder/placeholder.es.js +21 -20
  39. package/src/community/components/stepper/stepper-nav.cjs.js +1 -1
  40. package/src/community/components/stepper/stepper-nav.es.js +1 -1
  41. package/src/community/components/table/components/helpers.cjs.js +1 -1
  42. package/src/community/components/table/components/helpers.es.js +1 -1
  43. package/src/community/components/table/components/pagination/PaginationNextButton.cjs.js +1 -1
  44. package/src/community/components/table/components/pagination/PaginationNextButton.es.js +1 -1
  45. package/src/community/components/table/components/pagination/pagination.cjs.js +1 -1
  46. package/src/community/components/table/components/pagination/pagination.es.js +4 -4
  47. package/src/community/components/table/components/table-filter/components/table-date-filter.cjs.js +1 -1
  48. package/src/community/components/table/components/table-filter/components/table-date-filter.es.js +1 -1
  49. package/src/community/components/table/components/table-filter/components/table-select-filter.cjs.js +1 -1
  50. package/src/community/components/table/components/table-filter/components/table-select-filter.es.js +5 -5
  51. package/src/community/components/table-of-contents/table-of-contents-item.cjs.js +1 -1
  52. package/src/community/components/table-of-contents/table-of-contents-item.es.js +18 -18
  53. package/src/community/components/table-of-contents/table-of-contents-items.cjs.js +1 -1
  54. package/src/community/components/table-of-contents/table-of-contents-items.es.js +1 -1
  55. package/src/community/components/table-of-contents/table-of-contents-modal.cjs.js +1 -1
  56. package/src/community/components/table-of-contents/table-of-contents-modal.es.js +13 -13
  57. package/src/community/components/toggle-open/toggle-open.d.ts +1 -1
  58. package/src/community/components/tooltip/tooltip-trigger.cjs.js +1 -1
  59. package/src/community/components/tooltip/tooltip-trigger.es.js +1 -1
  60. package/src/community/components/vertical-progress/vertical-progress-item.cjs.js +1 -1
  61. package/src/community/components/vertical-progress/vertical-progress-item.es.js +4 -4
  62. package/src/community/index.d.ts +0 -4
  63. package/src/tedi/components/base/icon/icon.d.ts +1 -1
  64. package/src/tedi/components/base/icon/icon.module.scss.cjs.js +1 -1
  65. package/src/tedi/components/base/icon/icon.module.scss.es.js +1 -0
  66. package/src/tedi/components/buttons/collapse/collapse.cjs.js +1 -1
  67. package/src/tedi/components/buttons/collapse/collapse.d.ts +6 -0
  68. package/src/tedi/components/buttons/collapse/collapse.es.js +63 -62
  69. package/src/tedi/components/content/label/label.d.ts +1 -1
  70. package/src/tedi/components/form/textfield/textfield.module.scss.cjs.js +1 -1
  71. package/src/tedi/components/form/textfield/textfield.module.scss.es.js +0 -1
  72. package/src/tedi/components/misc/scroll-visibility/scroll-visibility.cjs.js +2 -1
  73. package/src/tedi/components/misc/scroll-visibility/scroll-visibility.es.js +44 -32
  74. package/src/tedi/helpers/hooks/use-scroll.cjs.js +1 -1
  75. package/src/tedi/helpers/hooks/use-scroll.d.ts +3 -1
  76. package/src/tedi/helpers/hooks/use-scroll.es.js +19 -19
  77. package/src/community/components/ellipsis/ellipsis.cjs.js +0 -1
  78. package/src/community/components/ellipsis/ellipsis.d.ts +0 -19
  79. package/src/community/components/ellipsis/ellipsis.es.js +0 -34
  80. package/src/community/components/ellipsis/ellipsis.module.scss.cjs.js +0 -1
  81. package/src/community/components/ellipsis/ellipsis.module.scss.es.js +0 -9
  82. package/src/community/components/icon/icon.cjs.js +0 -1
  83. package/src/community/components/icon/icon.d.ts +0 -49
  84. package/src/community/components/icon/icon.es.js +0 -47
  85. package/src/community/components/icon/icon.module.scss.cjs.js +0 -1
  86. package/src/community/components/icon/icon.module.scss.es.js +0 -9
  87. package/src/community/components/typography/heading/heading.cjs.js +0 -1
  88. package/src/community/components/typography/heading/heading.d.ts +0 -11
  89. package/src/community/components/typography/heading/heading.es.js +0 -10
  90. package/src/community/components/typography/text/text.cjs.js +0 -1
  91. package/src/community/components/typography/text/text.d.ts +0 -43
  92. package/src/community/components/typography/text/text.es.js +0 -26
  93. package/src/tedi/providers/storybook-provider/storybook-provider.d.ts +0 -10
@@ -1,77 +1,78 @@
1
- import { jsx as t, jsxs as _ } from "react/jsx-runtime";
1
+ import { jsx as t, jsxs as h } from "react/jsx-runtime";
2
2
  import o from "../../../../../external/classnames/index.es.js";
3
- import h from "react";
4
- import E from "../../../../../external/react-animate-height/dist/esm/index.es.js";
5
- import { Icon as K } from "../../base/icon/icon.es.js";
6
- import { Text as A } from "../../base/typography/text/text.es.js";
7
- import { Print as H } from "../../misc/print/print.es.js";
3
+ import f from "react";
4
+ import A from "../../../../../external/react-animate-height/dist/esm/index.es.js";
5
+ import { Icon as H } from "../../base/icon/icon.es.js";
6
+ import { Text as q } from "../../base/typography/text/text.es.js";
7
+ import { Print as F } from "../../misc/print/print.es.js";
8
8
  import e from "./collapse.module.scss.es.js";
9
- import { usePrint as q } from "../../../helpers/hooks/use-print.es.js";
10
- import { useBreakpointProps as F } from "../../../helpers/hooks/use-breakpoint-props.es.js";
11
- import { useLabels as G } from "../../../providers/label-provider/use-labels.es.js";
12
- import { Row as P } from "../../layout/grid/row.es.js";
9
+ import { usePrint as G } from "../../../helpers/hooks/use-print.es.js";
10
+ import { useBreakpointProps as J } from "../../../helpers/hooks/use-breakpoint-props.es.js";
11
+ import { useLabels as Q } from "../../../providers/label-provider/use-labels.es.js";
12
+ import { Row as k } from "../../layout/grid/row.es.js";
13
13
  import { Col as s } from "../../layout/grid/col.es.js";
14
- const ie = (f) => {
15
- const { getCurrentBreakpointProps: $ } = F(f.defaultServerBreakpoint), { getLabel: w } = G(), {
14
+ const se = (w) => {
15
+ const { getCurrentBreakpointProps: O } = J(w.defaultServerBreakpoint), { getLabel: y } = Q(), {
16
16
  id: r,
17
17
  children: g,
18
- className: O,
19
- openText: y = w("open"),
20
- closeText: b = w("close"),
21
- hideCollapseText: x = !1,
22
- title: N,
18
+ className: P,
19
+ openText: b = y("open"),
20
+ closeText: x = y("close"),
21
+ hideCollapseText: $ = !1,
22
+ title: c,
23
23
  titleRowProps: B,
24
24
  defaultOpen: S,
25
- open: c,
26
- onToggle: d,
27
- arrowType: i = "default",
28
- size: n = "default",
25
+ open: d,
26
+ onToggle: p,
27
+ arrowType: n = "default",
28
+ size: i = "default",
29
29
  underline: T = !0,
30
- toggleLabel: C,
31
- ...j
32
- } = $(f), p = `${r}__trigger`, m = `${r}__content`, D = `${r}__animate`, [v, L] = h.useState(() => S), u = q(), l = h.useMemo(
33
- () => u || (c !== void 0 ? c : v),
34
- [u, c, v]
35
- ), M = o(
30
+ toggleLabel: N,
31
+ iconOnly: j = !1,
32
+ ...D
33
+ } = O(w), m = `${r}__trigger`, u = `${r}__content`, L = `${r}__animate`, [C, M] = f.useState(() => S), _ = G(), a = f.useMemo(
34
+ () => _ || (d !== void 0 ? d : C),
35
+ [_, d, C]
36
+ ), R = j === !0 && !c, z = o(
36
37
  e["tedi-collapse"],
37
- n === "small" && e["tedi-collapse--small"],
38
- l && e["tedi-collapse--is-open"],
39
- x && e["tedi-collapse--icon-only"],
40
- e[`tedi-collapse--arrow-${i}`],
41
- O
42
- ), k = () => {
43
- const a = !l;
44
- L(a), d == null || d(a);
45
- }, R = (a) => {
46
- (a.key === "Enter" || a.key === " ") && !a.repeat && (a.preventDefault(), k());
47
- }, z = C || (l ? b : y), I = h.useMemo(
48
- () => /* @__PURE__ */ t("div", { id: m, role: "region", "aria-labelledby": p, className: e["tedi-collapse__content"], children: g }),
49
- [g, m, p]
38
+ i === "small" && e["tedi-collapse--small"],
39
+ a && e["tedi-collapse--is-open"],
40
+ R && e["tedi-collapse--icon-only"],
41
+ e[`tedi-collapse--arrow-${n}`],
42
+ P
43
+ ), v = () => {
44
+ const l = !a;
45
+ M(l), p == null || p(l);
46
+ }, E = (l) => {
47
+ (l.key === "Enter" || l.key === " ") && !l.repeat && (l.preventDefault(), v());
48
+ }, K = N || (a ? x : b), I = f.useMemo(
49
+ () => /* @__PURE__ */ t("div", { id: u, role: "region", "aria-labelledby": m, className: e["tedi-collapse__content"], children: g }),
50
+ [g, u, m]
50
51
  );
51
- return /* @__PURE__ */ _("div", { "data-name": "collapse", ...j, className: M, children: [
52
+ return /* @__PURE__ */ h("div", { "data-name": "collapse", ...D, className: z, children: [
52
53
  /* @__PURE__ */ t(
53
54
  "button",
54
55
  {
55
- id: p,
56
+ id: m,
56
57
  type: "button",
57
58
  "data-name": "collapse-trigger",
58
59
  className: e["tedi-collapse__title"],
59
- "aria-label": z,
60
- "aria-expanded": l,
61
- "aria-controls": m,
62
- onKeyDown: R,
63
- onClick: k,
64
- children: /* @__PURE__ */ _(P, { justifyContent: "between", alignItems: "center", wrap: "nowrap", ...B, element: "span", children: [
65
- N && /* @__PURE__ */ t(s, { "aria-hidden": "true", children: N }),
66
- /* @__PURE__ */ t(s, { width: "auto", children: /* @__PURE__ */ _(P, { element: "span", alignItems: "center", gutter: 0, wrap: "nowrap", children: [
67
- /* @__PURE__ */ t(H, { visibility: "hide", children: /* @__PURE__ */ t(s, { width: "auto", className: o({ "visually-hidden": x }), children: /* @__PURE__ */ t(
68
- A,
60
+ "aria-label": K,
61
+ "aria-expanded": a,
62
+ "aria-controls": u,
63
+ onKeyDown: E,
64
+ onClick: v,
65
+ children: /* @__PURE__ */ h(k, { justifyContent: "between", alignItems: "center", wrap: "nowrap", ...B, element: "span", children: [
66
+ c && /* @__PURE__ */ t(s, { "aria-hidden": "true", children: c }),
67
+ /* @__PURE__ */ t(s, { width: "auto", children: /* @__PURE__ */ h(k, { element: "span", alignItems: "center", gutter: 0, wrap: "nowrap", children: [
68
+ /* @__PURE__ */ t(F, { visibility: "hide", children: /* @__PURE__ */ t(s, { width: "auto", className: o({ "visually-hidden": $ }), children: /* @__PURE__ */ t(
69
+ q,
69
70
  {
70
71
  element: "span",
71
72
  className: o(e["tedi-collapse__text"], {
72
73
  [e["tedi-collapse__text--underline"]]: T
73
74
  }),
74
- children: l ? b : y
75
+ children: a ? x : b
75
76
  }
76
77
  ) }) }),
77
78
  /* @__PURE__ */ t(s, { width: "auto", children: /* @__PURE__ */ t(
@@ -79,19 +80,19 @@ const ie = (f) => {
79
80
  {
80
81
  className: o(
81
82
  e["tedi-collapse__icon-wrapper"],
82
- e[`tedi-collapse__icon-wrapper--${i}`],
83
- n === "small" && e["tedi-collapse__icon-wrapper--small"]
83
+ e[`tedi-collapse__icon-wrapper--${n}`],
84
+ i === "small" && e["tedi-collapse__icon-wrapper--small"]
84
85
  ),
85
86
  children: /* @__PURE__ */ t(
86
- K,
87
+ H,
87
88
  {
88
89
  className: o(
89
90
  e["tedi-collapse__icon"],
90
- e[`tedi-collapse__icon--${i}`],
91
- n === "small" && e["tedi-collapse__icon--small"]
91
+ e[`tedi-collapse__icon--${n}`],
92
+ i === "small" && e["tedi-collapse__icon--small"]
92
93
  ),
93
94
  name: "expand_more",
94
- size: n === "small" || i === "secondary" ? 18 : 24
95
+ size: i === "small" || n === "secondary" ? 18 : 24
95
96
  }
96
97
  )
97
98
  }
@@ -100,10 +101,10 @@ const ie = (f) => {
100
101
  ] })
101
102
  }
102
103
  ),
103
- u ? I : /* @__PURE__ */ t(E, { id: D, duration: 300, height: l ? "auto" : 0, "data-testid": "collapse-inner", children: I })
104
+ _ ? I : /* @__PURE__ */ t(A, { id: L, duration: 300, height: a ? "auto" : 0, "data-testid": "collapse-inner", children: I })
104
105
  ] });
105
106
  };
106
107
  export {
107
- ie as Collapse,
108
- ie as default
108
+ se as Collapse,
109
+ se as default
109
110
  };
@@ -32,5 +32,5 @@ export interface LabelProps extends BreakpointSupport<LabelBreakpointProps>, Lab
32
32
  */
33
33
  tooltip?: string;
34
34
  }
35
- export declare const Label: import('react').ForwardRefExoticComponent<LabelProps & import('react').RefAttributes<HTMLSpanElement | HTMLLabelElement>>;
35
+ export declare const Label: import('react').ForwardRefExoticComponent<LabelProps & import('react').RefAttributes<HTMLLabelElement | HTMLSpanElement>>;
36
36
  export {};
@@ -1 +1 @@
1
- "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-textfield":"tedi-textfield-376bbeed","tedi-textfield__inner":"tedi-textfield__inner-98791cdd","tedi-textfield__input":"tedi-textfield__input-ade0f9a6","tedi-textfield--invalid":"tedi-textfield--invalid-290ce18d","tedi-textfield--valid":"tedi-textfield--valid-273af8c0","tedi-textfield--clearable":"tedi-textfield--clearable-f47f0508","tedi-textfield--with-icon":"tedi-textfield--with-icon-db2c6f01","textfield--with-icon":"textfield--with-icon-d23a33f0","tedi-textfield__input--hidden-arrows":"tedi-textfield__input--hidden-arrows-609217f7","tedi-textfield__right-area":"tedi-textfield__right-area-6ac81c6b","tedi-textfield--small":"tedi-textfield--small-4ffcc517","tedi-textfield--large":"tedi-textfield--large-0e4d788c","tedi-textfield__separator":"tedi-textfield__separator-63d1ba14","tedi-textfield__icon-wrapper":"tedi-textfield__icon-wrapper-4935814e","tedi-textfield--inline":"tedi-textfield--inline-7ed55c4e","tedi-textfield__icon":"tedi-textfield__icon-05d4adc8","tedi-textfield__feedback-wrapper":"tedi-textfield__feedback-wrapper-9d47f9c6"};exports.default=e;
1
+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-textfield":"tedi-textfield-376bbeed","tedi-textfield__inner":"tedi-textfield__inner-98791cdd","tedi-textfield__input":"tedi-textfield__input-ade0f9a6","tedi-textfield--invalid":"tedi-textfield--invalid-290ce18d","tedi-textfield--valid":"tedi-textfield--valid-273af8c0","tedi-textfield--clearable":"tedi-textfield--clearable-f47f0508","tedi-textfield--with-icon":"tedi-textfield--with-icon-db2c6f01","tedi-textfield__input--hidden-arrows":"tedi-textfield__input--hidden-arrows-609217f7","tedi-textfield__right-area":"tedi-textfield__right-area-6ac81c6b","tedi-textfield--small":"tedi-textfield--small-4ffcc517","tedi-textfield--large":"tedi-textfield--large-0e4d788c","tedi-textfield__separator":"tedi-textfield__separator-63d1ba14","tedi-textfield__icon-wrapper":"tedi-textfield__icon-wrapper-4935814e","tedi-textfield--inline":"tedi-textfield--inline-7ed55c4e","tedi-textfield__icon":"tedi-textfield__icon-05d4adc8","tedi-textfield__feedback-wrapper":"tedi-textfield__feedback-wrapper-9d47f9c6"};exports.default=e;
@@ -6,7 +6,6 @@ const e = {
6
6
  "tedi-textfield--valid": "tedi-textfield--valid-273af8c0",
7
7
  "tedi-textfield--clearable": "tedi-textfield--clearable-f47f0508",
8
8
  "tedi-textfield--with-icon": "tedi-textfield--with-icon-db2c6f01",
9
- "textfield--with-icon": "textfield--with-icon-d23a33f0",
10
9
  "tedi-textfield__input--hidden-arrows": "tedi-textfield__input--hidden-arrows-609217f7",
11
10
  "tedi-textfield__right-area": "tedi-textfield__right-area-6ac81c6b",
12
11
  "tedi-textfield--small": "tedi-textfield--small-4ffcc517",
@@ -1 +1,2 @@
1
- "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const D=require("react/jsx-runtime"),h=require("../../../../../external/classnames/index.cjs.js"),l=require("react"),V=require("../../../helpers/hooks/use-scroll.cjs.js"),f=require("./scroll-visibility.module.scss.cjs.js"),y=v=>{const{children:t,enabled:s=!0,className:g,visibility:u="hide",toggleVisibility:b=!1,scrollDistance:r=100,scrollDirection:o="down",scrollContainer:w,animationDirection:p="center"}=v,{scrollTop:e,scrollHeight:c,clientHeight:n}=V.useScroll(w),[q,d]=l.useState(()=>{if(!s)return!1;const i=o==="down"?e:c-n-e;return u==="hide"?i>r:i<=r}),S=l.useRef(o==="down"?e:c-n-e);l.useEffect(()=>{if(!s)return;const i=u==="show",a=o==="down"?e:c-n-e;b&&a<S.current?d(i):a>r?d(!i):d(i),S.current=a},[u,b,r,e,s,o,c,n]);const m=h.default(f.default["tedi-scroll-visibility"],f.default[`tedi-scroll-visibility--${p}`],{[f.default["tedi-scroll-visibility--hidden"]]:s&&q},g);return l.isValidElement(t)?l.cloneElement(t,{className:h.default(t.props.className,m)}):D.jsx("div",{className:m,children:t})};exports.ScrollVisibility=y;exports.default=y;
1
+ "use client";
2
+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const M=require("react/jsx-runtime"),v=require("../../../../../external/classnames/index.cjs.js"),t=require("react"),V=require("../../../helpers/hooks/use-scroll.cjs.js"),b=require("./scroll-visibility.module.scss.cjs.js"),g=w=>{const{children:l,enabled:o=!0,className:H,visibility:n="hide",toggleVisibility:h=!1,scrollDistance:c=100,scrollDirection:u="down",scrollContainer:p,animationDirection:q="center"}=w,[d,D]=t.useState(!1),{scrollTop:i=0,scrollHeight:a=0,clientHeight:f=0}=V.useScroll(p)??{},[E,m]=t.useState(!1),S=t.useRef(0);t.useEffect(()=>{if(D(!0),!o)return;const e=u==="down"?i:a-f-i,s=n==="hide"?e>c:e<=c;m(s),S.current=e},[]),t.useEffect(()=>{if(!d||!o)return;const e=n==="show",s=u==="down"?i:a-f-i;let r;h&&s<S.current?r=e:s>c?r=!e:r=e,m(r),S.current=s},[d,o,n,h,c,i,u,a,f]);const y=v.default(b.default["tedi-scroll-visibility"],b.default[`tedi-scroll-visibility--${q}`],{[b.default["tedi-scroll-visibility--hidden"]]:d&&o&&E},H);return t.isValidElement(l)?t.cloneElement(l,{className:v.default(l.props.className,y)}):M.jsx("div",{className:y,children:l})};exports.ScrollVisibility=g;exports.default=g;
@@ -1,40 +1,52 @@
1
- import { jsx as D } from "react/jsx-runtime";
2
- import h from "../../../../../external/classnames/index.es.js";
3
- import { useState as N, useRef as g, useEffect as E, cloneElement as H, isValidElement as V } from "react";
4
- import { useScroll as x } from "../../../helpers/hooks/use-scroll.es.js";
5
- import m from "./scroll-visibility.module.scss.es.js";
6
- const M = (b) => {
1
+ "use client";
2
+ import { jsx as M } from "react/jsx-runtime";
3
+ import y from "../../../../../external/classnames/index.es.js";
4
+ import { useState as S, useRef as V, useEffect as w, cloneElement as x, isValidElement as I } from "react";
5
+ import { useScroll as T } from "../../../helpers/hooks/use-scroll.es.js";
6
+ import f from "./scroll-visibility.module.scss.es.js";
7
+ const k = (H) => {
7
8
  const {
8
- children: s,
9
- enabled: t = !0,
10
- className: y,
9
+ children: t,
10
+ enabled: l = !0,
11
+ className: v,
11
12
  visibility: n = "hide",
12
- toggleVisibility: f = !1,
13
- scrollDistance: l = 100,
14
- scrollDirection: o = "down",
15
- scrollContainer: S,
16
- animationDirection: w = "center"
17
- } = b, { scrollTop: e, scrollHeight: r, clientHeight: c } = x(S), [v, a] = N(() => {
18
- if (!t) return !1;
19
- const i = o === "down" ? e : r - c - e;
20
- return n === "hide" ? i > l : i <= l;
21
- }), u = g(o === "down" ? e : r - c - e);
22
- E(() => {
23
- if (!t) return;
24
- const i = n === "show", d = o === "down" ? e : r - c - e;
25
- f && d < u.current ? a(i) : d > l ? a(!i) : a(i), u.current = d;
26
- }, [n, f, l, e, t, o, r, c]);
27
- const p = h(
28
- m["tedi-scroll-visibility"],
29
- m[`tedi-scroll-visibility--${w}`],
13
+ toggleVisibility: h = !1,
14
+ scrollDistance: o = 100,
15
+ scrollDirection: c = "down",
16
+ scrollContainer: D,
17
+ animationDirection: N = "center"
18
+ } = H, [d, g] = S(!1), { scrollTop: s = 0, scrollHeight: a = 0, clientHeight: u = 0 } = T(D) ?? {}, [E, p] = S(!1), m = V(0);
19
+ w(() => {
20
+ if (g(!0), !l) return;
21
+ const e = c === "down" ? s : a - u - s, i = n === "hide" ? e > o : e <= o;
22
+ p(i), m.current = e;
23
+ }, []), w(() => {
24
+ if (!d || !l) return;
25
+ const e = n === "show", i = c === "down" ? s : a - u - s;
26
+ let r;
27
+ h && i < m.current ? r = e : i > o ? r = !e : r = e, p(r), m.current = i;
28
+ }, [
29
+ d,
30
+ l,
31
+ n,
32
+ h,
33
+ o,
34
+ s,
35
+ c,
36
+ a,
37
+ u
38
+ ]);
39
+ const b = y(
40
+ f["tedi-scroll-visibility"],
41
+ f[`tedi-scroll-visibility--${N}`],
30
42
  {
31
- [m["tedi-scroll-visibility--hidden"]]: t && v
43
+ [f["tedi-scroll-visibility--hidden"]]: d && l && E
32
44
  },
33
- y
45
+ v
34
46
  );
35
- return V(s) ? H(s, { className: h(s.props.className, p) }) : /* @__PURE__ */ D("div", { className: p, children: s });
47
+ return I(t) ? x(t, { className: y(t.props.className, b) }) : /* @__PURE__ */ M("div", { className: b, children: t });
36
48
  };
37
49
  export {
38
- M as ScrollVisibility,
39
- M as default
50
+ k as ScrollVisibility,
51
+ k as default
40
52
  };
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("../../../../external/lodash-es/throttle.cjs.js"),o=require("react"),n=l=>{const e=l??document.documentElement,[c,r]=o.useState({scrollTop:e.scrollTop,scrollHeight:e.scrollHeight,clientHeight:e.clientHeight});return o.useEffect(()=>{const t=s.default(()=>{r({scrollTop:e.scrollTop,scrollHeight:e.scrollHeight,clientHeight:e.clientHeight})},50);return(l??window).addEventListener("scroll",t),t(),()=>{(l??window).removeEventListener("scroll",t),t.cancel()}},[e,l]),c};exports.useScroll=n;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("../../../../external/lodash-es/throttle.cjs.js"),r=require("react"),u={scrollTop:0,scrollHeight:0,clientHeight:0},a=t=>{const[s,n]=r.useState(u);return r.useEffect(()=>{const e=t??document.documentElement,o=t??window,c=()=>{n({scrollTop:e.scrollTop,scrollHeight:e.scrollHeight,clientHeight:e.clientHeight})},l=i.default(c,50);return o.addEventListener("scroll",l),c(),()=>{o.removeEventListener("scroll",l),l.cancel()}},[t]),s};exports.useScroll=a;
@@ -1,5 +1,7 @@
1
- export declare const useScroll: (element?: HTMLElement) => {
1
+ type ScrollState = {
2
2
  scrollTop: number;
3
3
  scrollHeight: number;
4
4
  clientHeight: number;
5
5
  };
6
+ export declare const useScroll: (element?: HTMLElement) => ScrollState;
7
+ export {};
@@ -1,24 +1,24 @@
1
- import r from "../../../../external/lodash-es/throttle.es.js";
2
- import { useState as s, useEffect as i } from "react";
3
- const g = (o) => {
4
- const l = o ?? document.documentElement, [e, c] = s({
5
- scrollTop: l.scrollTop,
6
- scrollHeight: l.scrollHeight,
7
- clientHeight: l.clientHeight
8
- });
9
- return i(() => {
10
- const t = r(() => {
11
- c({
12
- scrollTop: l.scrollTop,
13
- scrollHeight: l.scrollHeight,
14
- clientHeight: l.clientHeight
1
+ import n from "../../../../external/lodash-es/throttle.es.js";
2
+ import { useState as i, useEffect as g } from "react";
3
+ const u = {
4
+ scrollTop: 0,
5
+ scrollHeight: 0,
6
+ clientHeight: 0
7
+ }, a = (t) => {
8
+ const [r, s] = i(u);
9
+ return g(() => {
10
+ const o = t ?? document.documentElement, l = t ?? window, c = () => {
11
+ s({
12
+ scrollTop: o.scrollTop,
13
+ scrollHeight: o.scrollHeight,
14
+ clientHeight: o.clientHeight
15
15
  });
16
- }, 50);
17
- return (o ?? window).addEventListener("scroll", t), t(), () => {
18
- (o ?? window).removeEventListener("scroll", t), t.cancel();
16
+ }, e = n(c, 50);
17
+ return l.addEventListener("scroll", e), c(), () => {
18
+ l.removeEventListener("scroll", e), e.cancel();
19
19
  };
20
- }, [l, o]), e;
20
+ }, [t]), r;
21
21
  };
22
22
  export {
23
- g as useScroll
23
+ a as useScroll
24
24
  };
@@ -1 +0,0 @@
1
- "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),i=require("react"),f=require("../../../tedi/helpers/hooks/use-element-size.cjs.js"),o=require("./ellipsis.module.scss.cjs.js"),g=require("../tooltip/tooltip-provider.cjs.js"),q=require("../tooltip/tooltip-trigger.cjs.js"),T=require("../tooltip/tooltip.cjs.js"),h=require("../card/card.cjs.js"),j=require("../card/card-content/card-content.cjs.js"),n=c=>{const{children:r,lineClamp:s=2,showTooltip:u=!0,...d}=c,e=i.useRef(null),[a,p]=i.useState(!1),m=f.useElementSize(e);i.useEffect(()=>{e.current&&p(e.current.scrollHeight>e.current.clientHeight)},[e,m]);const l=t.jsx("div",{"data-name":"ellipsis",...d,ref:e,className:o.default.ellipsis,style:{lineClamp:s,WebkitLineClamp:s},children:r});return a&&u?t.jsxs(g.TooltipProvider,{children:[t.jsx(q.TooltipTrigger,{children:l}),t.jsx(T.Tooltip,{children:t.jsx(h.Card,{borderless:!0,className:o.default.ellipsis__tooltip,children:t.jsx(j.CardContent,{padding:.75,children:r})})})]}):l};exports.Ellipsis=n;exports.default=n;
@@ -1,19 +0,0 @@
1
- import { default as React } from 'react';
2
- export interface EllipsisProps {
3
- /**
4
- * Any content
5
- */
6
- children: React.ReactNode;
7
- /**
8
- * What is max lines before Ellipsis
9
- * @default 2
10
- */
11
- lineClamp?: number;
12
- /**
13
- * Render Ellipsis with Tooltip
14
- * @default true
15
- */
16
- showTooltip?: boolean;
17
- }
18
- export declare const Ellipsis: (props: EllipsisProps) => JSX.Element;
19
- export default Ellipsis;
@@ -1,34 +0,0 @@
1
- import { jsx as t, jsxs as d } from "react/jsx-runtime";
2
- import r from "react";
3
- import { useElementSize as u } from "../../../tedi/helpers/hooks/use-element-size.es.js";
4
- import s from "./ellipsis.module.scss.es.js";
5
- import { TooltipProvider as h } from "../tooltip/tooltip-provider.es.js";
6
- import { TooltipTrigger as T } from "../tooltip/tooltip-trigger.es.js";
7
- import { Tooltip as g } from "../tooltip/tooltip.es.js";
8
- import { Card as C } from "../card/card.es.js";
9
- import { CardContent as R } from "../card/card-content/card-content.es.js";
10
- const H = (n) => {
11
- const { children: i, lineClamp: o = 2, showTooltip: m = !0, ...p } = n, e = r.useRef(null), [c, a] = r.useState(!1), f = u(e);
12
- r.useEffect(() => {
13
- e.current && a(e.current.scrollHeight > e.current.clientHeight);
14
- }, [e, f]);
15
- const l = /* @__PURE__ */ t(
16
- "div",
17
- {
18
- "data-name": "ellipsis",
19
- ...p,
20
- ref: e,
21
- className: s.ellipsis,
22
- style: { lineClamp: o, WebkitLineClamp: o },
23
- children: i
24
- }
25
- );
26
- return c && m ? /* @__PURE__ */ d(h, { children: [
27
- /* @__PURE__ */ t(T, { children: l }),
28
- /* @__PURE__ */ t(g, { children: /* @__PURE__ */ t(C, { borderless: !0, className: s.ellipsis__tooltip, children: /* @__PURE__ */ t(R, { padding: 0.75, children: i }) }) })
29
- ] }) : l;
30
- };
31
- export {
32
- H as Ellipsis,
33
- H as default
34
- };
@@ -1 +0,0 @@
1
- "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l="ellipsis-619434e4",s="ellipsis__tooltip-9735eba5",e={ellipsis:l,ellipsis__tooltip:s};exports.default=e;exports.ellipsis=l;exports.ellipsis__tooltip=s;
@@ -1,9 +0,0 @@
1
- const s = "ellipsis-619434e4", l = "ellipsis__tooltip-9735eba5", i = {
2
- ellipsis: s,
3
- ellipsis__tooltip: l
4
- };
5
- export {
6
- i as default,
7
- s as ellipsis,
8
- l as ellipsis__tooltip
9
- };
@@ -1 +0,0 @@
1
- "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const y=require("react/jsx-runtime"),p=require("../../../../external/classnames/index.cjs.js"),q=require("react"),l=require("./icon.module.scss.cjs.js"),e=q.forwardRef((o,r)=>{const{className:s,name:c,filled:d=!1,label:a,type:i="outlined",size:n=24,display:u="block",color:t,...m}=o,f=p.default("notranslate","material-symbols",l.default.icon,l.default[`icon--${u}`],{[`material-symbols--${i}`]:i,[`text-${t}`]:t},s),b={...n?{"--icon-internal-variation-size":`${n/16}rem`}:{},...d?{"--icon-internal-variation-fill":1}:{}};return y.jsx("span",{"data-name":"icon",role:"img","aria-hidden":!a,...m,className:f,style:b,ref:r,"aria-label":a,children:c})});e.displayName="Icon";exports.Icon=e;exports.default=e;
@@ -1,49 +0,0 @@
1
- import { default as React } from 'react';
2
- import { TextColor } from '../typography/text/text';
3
- export type IconSize = 12 | 14 | 16 | 18 | 24 | 36 | 48;
4
- export interface IconProps {
5
- /**
6
- * Name of material symbols icon.
7
- * https://fonts.google.com/icons?icon.set=Material+Symbols
8
- */
9
- name: string;
10
- /**
11
- * Additional classes.
12
- */
13
- className?: string;
14
- /**
15
- * Type of icon.
16
- * It is recommended to only use one type throughout your app.
17
- * This ensures that only one icon font is downloaded.
18
- * @default outlined
19
- */
20
- type?: 'outlined' | 'rounded' | 'sharp';
21
- /**
22
- * Render a filled variant of the icon.
23
- * @default false
24
- */
25
- filled?: boolean;
26
- /**
27
- * Size of the icon.
28
- * @default 24
29
- */
30
- size?: IconSize;
31
- /**
32
- * Which color Icon should be.
33
- * Use 'positive', 'important' or 'warning' with caution, usually they should not be in application UI.
34
- * @default default
35
- */
36
- color?: TextColor;
37
- /**
38
- * Type of display. block by default.
39
- * @default block
40
- */
41
- display?: 'block' | 'inline';
42
- /**
43
- * Icons label for screen-readers.
44
- * If omitted then the icon is hidden for screen-readers.
45
- */
46
- label?: string;
47
- }
48
- export declare const Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<HTMLDivElement>>;
49
- export default Icon;
@@ -1,47 +0,0 @@
1
- import { jsx as y } from "react/jsx-runtime";
2
- import b from "../../../../external/classnames/index.es.js";
3
- import { forwardRef as N } from "react";
4
- import l from "./icon.module.scss.es.js";
5
- const $ = N((n, r) => {
6
- const {
7
- className: s,
8
- name: t,
9
- filled: m = !1,
10
- label: a,
11
- type: o = "outlined",
12
- size: i = 24,
13
- display: c = "block",
14
- color: e,
15
- ...d
16
- } = n, f = b(
17
- "notranslate",
18
- // Added to prevent Google Translate from translating the icon
19
- "material-symbols",
20
- l.icon,
21
- l[`icon--${c}`],
22
- { [`material-symbols--${o}`]: o, [`text-${e}`]: e },
23
- s
24
- ), p = {
25
- ...i ? { "--icon-internal-variation-size": `${i / 16}rem` } : {},
26
- ...m ? { "--icon-internal-variation-fill": 1 } : {}
27
- };
28
- return /* @__PURE__ */ y(
29
- "span",
30
- {
31
- "data-name": "icon",
32
- role: "img",
33
- "aria-hidden": !a,
34
- ...d,
35
- className: f,
36
- style: p,
37
- ref: r,
38
- "aria-label": a,
39
- children: t
40
- }
41
- );
42
- });
43
- $.displayName = "Icon";
44
- export {
45
- $ as Icon,
46
- $ as default
47
- };
@@ -1 +0,0 @@
1
- "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e="icon-8081be27",o={icon:e,"icon--block":"icon--block-4aa6379d","icon--inline":"icon--inline-5d045b85"};exports.default=o;exports.icon=e;
@@ -1,9 +0,0 @@
1
- const n = "icon-8081be27", o = {
2
- icon: n,
3
- "icon--block": "icon--block-4aa6379d",
4
- "icon--inline": "icon--inline-5d045b85"
5
- };
6
- export {
7
- o as default,
8
- n as icon
9
- };
@@ -1 +0,0 @@
1
- "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("react/jsx-runtime"),i=require("../text/text.cjs.js"),e=t=>{const{children:r,element:n="h1",...s}=t;return u.jsx(i.Text,{element:n,...s,children:r})};exports.Heading=e;exports.default=e;
@@ -1,11 +0,0 @@
1
- import { HeadingModifiers, TextProps } from '../text/text';
2
- export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
3
- export type HeadingProps = Omit<TextProps, 'element'> & {
4
- /**
5
- * Semantic heading tag. h1-h6 are allowed values.
6
- * @default h1
7
- */
8
- element?: Extract<TextProps['element'], HeadingModifiers>;
9
- };
10
- export declare const Heading: (props: HeadingProps) => import("react/jsx-runtime").JSX.Element;
11
- export default Heading;
@@ -1,10 +0,0 @@
1
- import { jsx as n } from "react/jsx-runtime";
2
- import { Text as m } from "../text/text.es.js";
3
- const a = (e) => {
4
- const { children: t, element: r = "h1", ...o } = e;
5
- return /* @__PURE__ */ n(m, { element: r, ...o, children: t });
6
- };
7
- export {
8
- a as Heading,
9
- a as default
10
- };
@@ -1 +0,0 @@
1
- "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const m=require("react/jsx-runtime"),p=require("../../../../../external/classnames/index.cjs.js"),f=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),s=e=>{const{getCurrentBreakpointProps:o}=f.useBreakpointProps(e.defaultServerBreakpoint),{children:i,className:u,tabIndex:a,element:c="p",modifiers:t,color:r,...l}=o(e,{tabIndex:e.id?-1:void 0}),n=typeof t=="string"?[t]:t,d=p.default(u,n==null?void 0:n.map(x=>`text-${x}`),{[`text-${r}`]:r});return m.jsx(c,{className:d,...l,tabIndex:a,children:i})};exports.Text=s;exports.default=s;
@@ -1,43 +0,0 @@
1
- import { BreakpointSupport } from '../../../helpers';
2
- import { HeadingLevel } from '../heading/heading';
3
- export type HeadingModifiers = `h${HeadingLevel}`;
4
- export type TextModifiers = HeadingModifiers | 'normal' | 'small' | 'bold' | 'thin' | 'italic' | 'center' | 'left' | 'right' | 'nowrap' | 'break-all' | 'break-word' | 'break-spaces' | 'uppercase' | 'lowercase' | 'capitalize' | 'capitalize-first' | 'inline-block' | 'inline' | 'line-normal' | 'line-condensed';
5
- export type TextColor = 'default' | 'primary' | 'muted' | 'subtle' | 'disabled' | 'inverted' | 'positive' | 'important' | 'warning';
6
- export type TextElement = 'div' | 'p' | 'span' | 'li' | HeadingModifiers;
7
- type TextBreakpointProps = {
8
- /**
9
- * Additional class.
10
- */
11
- className?: string;
12
- /**
13
- * Base element.
14
- * @default p
15
- */
16
- element?: TextElement;
17
- /**
18
- * Single or multiple modifiers to change the text behavior.
19
- */
20
- modifiers?: TextModifiers[] | TextModifiers;
21
- /**
22
- * Which color text should be.
23
- * Use 'positive', 'important' or 'warning' with caution, usually they should not be in application UI.
24
- * @default default
25
- */
26
- color?: TextColor;
27
- };
28
- export interface TextProps extends BreakpointSupport<TextBreakpointProps> {
29
- /**
30
- * Children of the text.
31
- */
32
- children: React.ReactNode;
33
- /**
34
- * ID attribute.
35
- */
36
- id?: string;
37
- /**
38
- * Allows to focus the element
39
- */
40
- tabIndex?: number;
41
- }
42
- export declare const Text: (props: TextProps) => JSX.Element;
43
- export default Text;