@tedi-design-system/react 18.1.0-rc.2 → 18.1.0-rc.21

package/src/tedi/components/layout/header/components/header-search/header-search.es.js

@@ -0,0 +1,60 @@
+import { jsx as r, Fragment as n, jsxs as d } from "react/jsx-runtime";
+import { useState as v, useRef as y, useEffect as f } from "react";
+import { Icon as B } from "../../../../base/icon/icon.es.js";
+import { Text as M } from "../../../../base/typography/text/text.es.js";
+import { Button as N } from "../../../../buttons/button/button.es.js";
+import w from "../header-mobile-button/header-mobile-button.es.js";
+import t from "./header-search.module.scss.es.js";
+import x, { isBreakpointBelow as S } from "../../../../../helpers/hooks/use-breakpoint.es.js";
+import { useLabels as b } from "../../../../../providers/label-provider/use-labels.es.js";
+const C = (p) => {
+  const { children: c, mobileVariant: u = "modal", mobileLabels: e, disabled: _ = !1 } = p, g = x(), k = S(g, "md"), { getLabel: a } = b(), [l, s] = v(!1), m = y(null), i = k && u === "modal";
+  return f(() => {
+    i || s(!1);
+  }, [i]), f(() => {
+    const o = m.current;
+    if (!o) return;
+    l && !o.open ? o.showModal() : !l && o.open && o.close();
+    const h = () => s(!1);
+    return o.addEventListener("close", h), () => o.removeEventListener("close", h);
+  }, [l]), /* @__PURE__ */ r(n, { children: i ? /* @__PURE__ */ d(n, { children: [
+    /* @__PURE__ */ d(
+      "dialog",
+      {
+        ref: m,
+        className: t["tedi-header-search__modal"],
+        "aria-label": (e == null ? void 0 : e.modalTitle) ?? a("header.search"),
+        children: [
+          /* @__PURE__ */ d("div", { className: t["tedi-header-search__modal-heading"], children: [
+            /* @__PURE__ */ r(M, { modifiers: "h3", color: "secondary", children: (e == null ? void 0 : e.modalTitle) ?? a("header.search") }),
+            /* @__PURE__ */ r(
+              N,
+              {
+                onClick: () => s(!1),
+                className: t["tedi-header-search__button-close"],
+                "aria-label": a("close"),
+                noStyle: !0,
+                children: /* @__PURE__ */ r(B, { name: "close", size: 24, color: "inherit" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ r("div", { className: t["tedi-header-search__modal-body"], children: c })
+        ]
+      }
+    ),
+    /* @__PURE__ */ r(
+      w,
+      {
+        onClick: () => s((o) => !o),
+        icon: { name: "search", size: 24, color: "inherit" },
+        label: (e == null ? void 0 : e.button) ?? a("header.search"),
+        disabled: _
+      }
+    )
+  ] }) : /* @__PURE__ */ r(n, { children: c }) });
+};
+C.displayName = "HeaderSearch";
+export {
+  C as HeaderSearch,
+  C as default
+};

package/src/tedi/components/layout/header/components/header-search/header-search.module.scss.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-header-search__modal":"tedi-header-search__modal-6d71d725","tedi-header-search__modal-heading":"tedi-header-search__modal-heading-160dc33f","tedi-header-search__modal-body":"tedi-header-search__modal-body-66902805","tedi-header-search__button-close":"tedi-header-search__button-close-558d8732"};exports.default=e;

package/src/tedi/components/layout/header/components/header-search/header-search.module.scss.es.js

@@ -0,0 +1,9 @@
+const e = {
+  "tedi-header-search__modal": "tedi-header-search__modal-6d71d725",
+  "tedi-header-search__modal-heading": "tedi-header-search__modal-heading-160dc33f",
+  "tedi-header-search__modal-body": "tedi-header-search__modal-body-66902805",
+  "tedi-header-search__button-close": "tedi-header-search__button-close-558d8732"
+};
+export {
+  e as default
+};

package/src/tedi/components/layout/header/header.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),d=require("../../../../../external/classnames/index.cjs.js"),H=require("../../../providers/theme-provider/theme-provider.cjs.js"),p=require("../../misc/print/print.cjs.js"),y=require("./components/header-language/header-language.cjs.js"),N=require("./components/header-login/header-login.cjs.js"),L=require("./components/header-logout/header-logout.cjs.js"),_=require("./components/header-profile/header-profile.cjs.js"),v=require("./components/header-role/header-role.cjs.js"),x=require("./components/header-search/header-search.cjs.js"),n=require("./header.module.scss.cjs.js"),q=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),f={"flex-start":"justify-content-start",center:"justify-content-center","flex-end":"justify-content-end","space-between":"justify-content-between","space-around":"justify-content-around","space-evenly":"justify-content-evenly"},e=r=>{const{children:o,toggle:a,top:s,bottom:i,className:l}=r,{getCurrentBreakpointProps:u}=q.useBreakpointProps(r.defaultServerBreakpoint),{topAlignment:c="space-between"}=u(r);return t.jsx(p.Print,{visibility:"hide",children:t.jsxs("header",{className:d.default(n.default["tedi-header"],l),children:[s&&t.jsx("div",{className:d.default(n.default["tedi-header__top"],f[c]),children:s}),t.jsxs("div",{className:n.default["tedi-header__main"],children:[a,t.jsx("div",{className:n.default["tedi-header__main--content"],children:o})]}),i&&t.jsx("div",{className:n.default["tedi-header__bottom"],children:i})]})})};e.displayName="Header";const h=r=>{const{logo:o,logoDark:a,href:s,showLogo:i=!0,className:l}=r,{theme:u}=H.useTheme(),c=u==="dark"&&a?a:o;if(!i)return null;const j=s?t.jsx("a",{href:s,children:c}):c;return t.jsx("div",{className:d.default(n.default["tedi-header__logo"],l),children:j})};h.displayName="Header.Logo";const g=r=>{const{children:o,className:a,alignment:s="center"}=r;return t.jsx("div",{className:d.default(n.default["tedi-header__center"],f[s],a),children:o})};g.displayName="Header.Center";const m=r=>{const{children:o,className:a}=r;return t.jsx("div",{className:d.default(n.default["tedi-header__actions"],a),children:o})};m.displayName="Header.Actions";e.Logo=h;e.Center=g;e.Actions=m;e.Language=y.HeaderLanguage;e.Login=N.HeaderLogin;e.Logout=L.HeaderLogout;e.Profile=_.HeaderProfile;e.Role=v.HeaderRole;e.Search=x.HeaderSearch;exports.Header=e;exports.HeaderActions=m;exports.HeaderCenter=g;exports.HeaderLogo=h;

package/src/tedi/components/layout/header/header.es.js

@@ -0,0 +1,63 @@
+import { jsx as a, jsxs as h } from "react/jsx-runtime";
+import s from "../../../../../external/classnames/index.es.js";
+import { useTheme as y } from "../../../providers/theme-provider/theme-provider.es.js";
+import { Print as H } from "../../misc/print/print.es.js";
+import { HeaderLanguage as _ } from "./components/header-language/header-language.es.js";
+import { HeaderLogin as v } from "./components/header-login/header-login.es.js";
+import { HeaderLogout as L } from "./components/header-logout/header-logout.es.js";
+import { HeaderProfile as j } from "./components/header-profile/header-profile.es.js";
+import { HeaderRole as b } from "./components/header-role/header-role.es.js";
+import { HeaderSearch as k } from "./components/header-search/header-search.es.js";
+import o from "./header.module.scss.es.js";
+import { useBreakpointProps as x } from "../../../helpers/hooks/use-breakpoint-props.es.js";
+const f = {
+  "flex-start": "justify-content-start",
+  center: "justify-content-center",
+  "flex-end": "justify-content-end",
+  "space-between": "justify-content-between",
+  "space-around": "justify-content-around",
+  "space-evenly": "justify-content-evenly"
+}, e = (t) => {
+  const { children: n, toggle: r, top: i, bottom: d, className: m } = t, { getCurrentBreakpointProps: l } = x(t.defaultServerBreakpoint), { topAlignment: c = "space-between" } = l(t);
+  return /* @__PURE__ */ a(H, { visibility: "hide", children: /* @__PURE__ */ h("header", { className: s(o["tedi-header"], m), children: [
+    i && /* @__PURE__ */ a("div", { className: s(o["tedi-header__top"], f[c]), children: i }),
+    /* @__PURE__ */ h("div", { className: o["tedi-header__main"], children: [
+      r,
+      /* @__PURE__ */ a("div", { className: o["tedi-header__main--content"], children: n })
+    ] }),
+    d && /* @__PURE__ */ a("div", { className: o["tedi-header__bottom"], children: d })
+  ] }) });
+};
+e.displayName = "Header";
+const p = (t) => {
+  const { logo: n, logoDark: r, href: i, showLogo: d = !0, className: m } = t, { theme: l } = y(), c = l === "dark" && r ? r : n;
+  if (!d) return null;
+  const N = i ? /* @__PURE__ */ a("a", { href: i, children: c }) : c;
+  return /* @__PURE__ */ a("div", { className: s(o["tedi-header__logo"], m), children: N });
+};
+p.displayName = "Header.Logo";
+const u = (t) => {
+  const { children: n, className: r, alignment: i = "center" } = t;
+  return /* @__PURE__ */ a("div", { className: s(o["tedi-header__center"], f[i], r), children: n });
+};
+u.displayName = "Header.Center";
+const g = (t) => {
+  const { children: n, className: r } = t;
+  return /* @__PURE__ */ a("div", { className: s(o["tedi-header__actions"], r), children: n });
+};
+g.displayName = "Header.Actions";
+e.Logo = p;
+e.Center = u;
+e.Actions = g;
+e.Language = _;
+e.Login = v;
+e.Logout = L;
+e.Profile = j;
+e.Role = b;
+e.Search = k;
+export {
+  e as Header,
+  g as HeaderActions,
+  u as HeaderCenter,
+  p as HeaderLogo
+};

package/src/tedi/components/layout/header/header.module.scss.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-header":"tedi-header-43b23e0d","tedi-header__main":"tedi-header__main-7f808384","tedi-header__main--content":"tedi-header__main--content-e636714e","tedi-header__center":"tedi-header__center-7bc3bc64","tedi-header__actions":"tedi-header__actions-54b0f60e","tedi-header__logo":"tedi-header__logo-0970edf3","tedi-header__bottom":"tedi-header__bottom-17135a7f","tedi-header__top":"tedi-header__top-7cf13841"};exports.default=e;

package/src/tedi/components/layout/header/header.module.scss.es.js

@@ -0,0 +1,13 @@
+const e = {
+  "tedi-header": "tedi-header-43b23e0d",
+  "tedi-header__main": "tedi-header__main-7f808384",
+  "tedi-header__main--content": "tedi-header__main--content-e636714e",
+  "tedi-header__center": "tedi-header__center-7bc3bc64",
+  "tedi-header__actions": "tedi-header__actions-54b0f60e",
+  "tedi-header__logo": "tedi-header__logo-0970edf3",
+  "tedi-header__bottom": "tedi-header__bottom-17135a7f",
+  "tedi-header__top": "tedi-header__top-7cf13841"
+};
+export {
+  e as default
+};

package/src/tedi/components/layout/hide-at/hide-at.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../../../helpers/hooks/use-breakpoint.cjs.js"),r=({children:i,...n})=>{const s=t.default();return Object.entries(n).some(([u,o])=>o?!t.isBreakpointBelow(s,u):!1)?null:e.jsx(e.Fragment,{children:i})};r.displayName="HideAt";exports.HideAt=r;

package/src/tedi/components/layout/hide-at/hide-at.es.js

@@ -0,0 +1,10 @@
+import { jsx as n, Fragment as s } from "react/jsx-runtime";
+import u, { isBreakpointBelow as d } from "../../../helpers/hooks/use-breakpoint.es.js";
+const l = ({ children: e, ...r }) => {
+  const t = u();
+  return Object.entries(r).some(([o, i]) => i ? !d(t, o) : !1) ? null : /* @__PURE__ */ n(s, { children: e });
+};
+l.displayName = "HideAt";
+export {
+  l as HideAt
+};

package/src/tedi/components/layout/show-at/show-at.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../../../helpers/hooks/use-breakpoint.cjs.js"),r=({children:o,...n})=>{const s=t.default();return Object.entries(n).some(([u,i])=>i?!t.isBreakpointBelow(s,u):!1)?e.jsx(e.Fragment,{children:o}):null};r.displayName="ShowAt";exports.ShowAt=r;

package/src/tedi/components/layout/show-at/show-at.es.js

@@ -0,0 +1,10 @@
+import { jsx as s, Fragment as i } from "react/jsx-runtime";
+import u, { isBreakpointBelow as l } from "../../../helpers/hooks/use-breakpoint.es.js";
+const m = ({ children: r, ...o }) => {
+  const t = u();
+  return Object.entries(o).some(([e, n]) => n ? !l(t, e) : !1) ? /* @__PURE__ */ s(i, { children: r }) : null;
+};
+m.displayName = "ShowAt";
+export {
+  m as ShowAt
+};

package/src/tedi/components/tags/tag/tag.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),g=require("../../../../../external/classnames/index.cjs.js"),f=require("../../base/icon/icon.cjs.js"),m=require("../../buttons/closing-button/closing-button.cjs.js"),_=require("../../loaders/spinner/spinner.cjs.js"),j=require("../../misc/ellipsis/ellipsis.cjs.js"),e=require("./tag.module.scss.cjs.js"),x=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),q=l=>{const{getCurrentBreakpointProps:n}=x.useBreakpointProps(l.defaultServerBreakpoint),{children:o,className:c,onClose:s,closeButtonProps:d,isLoading:i=!1,color:a="primary",ellipsis:r=!1,...u}=n(l),p=g.default(e.default["tedi-tag"],a&&e.default[`tedi-tag--color-${a}`],s&&!i&&e.default["tedi-tag__close"],r!==!1&&e.default["tedi-tag--ellipsis"],c);return t.jsxs("div",{className:p,role:"status","aria-live":i?"polite":void 0,...u,children:[a==="danger"&&t.jsx("div",{className:e.default["tedi-tag__icon-wrapper"],children:t.jsx(f.Icon,{name:"info",color:"danger",size:16,className:e.default["tedi-tag__icon--error"]})}),t.jsx("div",{className:e.default["tedi-tag__content"],children:r!==!1?t.jsx(j.Ellipsis,{position:r==="start"?"start":"end",lineClamp:1,children:o}):o}),i&&!s&&t.jsx("div",{className:e.default["tedi-tag__icon-wrapper"],children:t.jsx(_.Spinner,{className:e.default["tedi-tag__loader"]})}),!i&&s&&t.jsx(m.ClosingButton,{iconSize:18,...d,onClick:s})]})};exports.Tag=q;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),f=require("../../../../../external/classnames/index.cjs.js"),m=require("../../base/icon/icon.cjs.js"),_=require("../../buttons/closing-button/closing-button.cjs.js"),j=require("../../loaders/spinner/spinner.cjs.js"),x=require("../../misc/ellipsis/ellipsis.cjs.js"),e=require("./tag.module.scss.cjs.js"),q=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),v=l=>{const{getCurrentBreakpointProps:n}=q.useBreakpointProps(l.defaultServerBreakpoint),{children:o,className:c,onClose:s,closeButtonProps:d,isLoading:i=!1,color:a="primary",ellipsis:r=!1,role:u="status",...p}=n(l),g=f.default(e.default["tedi-tag"],a&&e.default[`tedi-tag--color-${a}`],s&&!i&&e.default["tedi-tag__close"],r!==!1&&e.default["tedi-tag--ellipsis"],c);return t.jsxs("div",{className:g,role:u,"aria-live":i?"polite":void 0,...p,children:[a==="danger"&&t.jsx("div",{className:e.default["tedi-tag__icon-wrapper"],children:t.jsx(m.Icon,{name:"info",color:"danger",size:16,className:e.default["tedi-tag__icon--error"]})}),t.jsx("div",{className:e.default["tedi-tag__content"],children:r!==!1?t.jsx(x.Ellipsis,{position:r==="start"?"start":"end",lineClamp:1,children:o}):o}),i&&!s&&t.jsx("div",{className:e.default["tedi-tag__icon-wrapper"],children:t.jsx(j.Spinner,{className:e.default["tedi-tag__loader"]})}),!i&&s&&t.jsx(_.ClosingButton,{iconSize:18,...d,onClick:s})]})};exports.Tag=v;

package/src/tedi/components/tags/tag/tag.d.ts

@@ -47,6 +47,15 @@ export interface TagProps extends BreakpointSupport<TagBreakpointProps> {
      * @default false
      */
     isLoading?: boolean;
+    /**
+     * Overrides the Tag's implicit live-region role. Tags default to `role="status"`
+     * so they are announced by assistive tech. When a Tag is rendered as static
+     * content inside a list — and additions/removals are announced elsewhere — pass
+     * e.g. `role="presentation"` so it is not read as a live status, which otherwise
+     * makes some screen readers (e.g. JAWS) announce the content twice on focus.
+     * @default 'status'
+     */
+    role?: React.AriaRole;
 }
 export declare const Tag: (props: TagProps) => JSX.Element;
 export {};

package/src/tedi/components/tags/tag/tag.es.js

@@ -1,13 +1,13 @@
-import { jsxs as g, jsx as i } from "react/jsx-runtime";
-import f from "../../../../../external/classnames/index.es.js";
-import { Icon as _ } from "../../base/icon/icon.es.js";
-import { ClosingButton as N } from "../../buttons/closing-button/closing-button.es.js";
-import { Spinner as u } from "../../loaders/spinner/spinner.es.js";
-import { Ellipsis as v } from "../../misc/ellipsis/ellipsis.es.js";
+import { jsxs as f, jsx as i } from "react/jsx-runtime";
+import _ from "../../../../../external/classnames/index.es.js";
+import { Icon as N } from "../../base/icon/icon.es.js";
+import { ClosingButton as u } from "../../buttons/closing-button/closing-button.es.js";
+import { Spinner as v } from "../../loaders/spinner/spinner.es.js";
+import { Ellipsis as B } from "../../misc/ellipsis/ellipsis.es.js";
 import e from "./tag.module.scss.es.js";
-import { useBreakpointProps as B } from "../../../helpers/hooks/use-breakpoint-props.es.js";
-const y = (a) => {
-  const { getCurrentBreakpointProps: n } = B(a.defaultServerBreakpoint), {
+import { useBreakpointProps as h } from "../../../helpers/hooks/use-breakpoint-props.es.js";
+const z = (a) => {
+  const { getCurrentBreakpointProps: n } = h(a.defaultServerBreakpoint), {
     children: l,
     className: c,
     onClose: o,
@@ -15,21 +15,22 @@ const y = (a) => {
     isLoading: t = !1,
     color: r = "primary",
     ellipsis: s = !1,
-    ...d
-  } = n(a), p = f(
+    role: d = "status",
+    ...p
+  } = n(a), g = _(
     e["tedi-tag"],
     r && e[`tedi-tag--color-${r}`],
     o && !t && e["tedi-tag__close"],
     s !== !1 && e["tedi-tag--ellipsis"],
     c
   );
-  return /* @__PURE__ */ g("div", { className: p, role: "status", "aria-live": t ? "polite" : void 0, ...d, children: [
-    r === "danger" && /* @__PURE__ */ i("div", { className: e["tedi-tag__icon-wrapper"], children: /* @__PURE__ */ i(_, { name: "info", color: "danger", size: 16, className: e["tedi-tag__icon--error"] }) }),
-    /* @__PURE__ */ i("div", { className: e["tedi-tag__content"], children: s !== !1 ? /* @__PURE__ */ i(v, { position: s === "start" ? "start" : "end", lineClamp: 1, children: l }) : l }),
-    t && !o && /* @__PURE__ */ i("div", { className: e["tedi-tag__icon-wrapper"], children: /* @__PURE__ */ i(u, { className: e["tedi-tag__loader"] }) }),
-    !t && o && /* @__PURE__ */ i(N, { iconSize: 18, ...m, onClick: o })
+  return /* @__PURE__ */ f("div", { className: g, role: d, "aria-live": t ? "polite" : void 0, ...p, children: [
+    r === "danger" && /* @__PURE__ */ i("div", { className: e["tedi-tag__icon-wrapper"], children: /* @__PURE__ */ i(N, { name: "info", color: "danger", size: 16, className: e["tedi-tag__icon--error"] }) }),
+    /* @__PURE__ */ i("div", { className: e["tedi-tag__content"], children: s !== !1 ? /* @__PURE__ */ i(B, { position: s === "start" ? "start" : "end", lineClamp: 1, children: l }) : l }),
+    t && !o && /* @__PURE__ */ i("div", { className: e["tedi-tag__icon-wrapper"], children: /* @__PURE__ */ i(v, { className: e["tedi-tag__loader"] }) }),
+    !t && o && /* @__PURE__ */ i(u, { iconSize: 18, ...m, onClick: o })
   ] });
 };
 export {
-  y as Tag
+  z as Tag
 };

package/src/tedi/helpers/hooks/use-file-upload.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("react"),A=require("../../providers/label-provider/use-labels.cjs.js"),$=({accept:g,maxSize:r},o)=>{if(!g&&!r)return;const a=[g&&`${o("file-upload.accept")} ${g.replaceAll(",",", ")}`,r&&`${o("file-upload.max-size")} ${r}MB`].filter(Boolean).join(". ");return a.length?{text:a}:void 0},H=()=>`${Date.now()}-${Math.random().toString(36).slice(2)}`,I=g=>{const{getLabel:r}=A.useLabels(),{accept:o,maxSize:a,multiple:w=!1,validateIndividually:E=!1,defaultFiles:S=[],onChange:u,onDelete:f,files:x,announcementTimeout:T=5e3}=g,F=x!==void 0,[b,j]=m.useState(S),p=F?x:b,[L,h]=m.useState($({accept:o,maxSize:a},r)),[R,M]=m.useState(""),y=m.useRef(!0);m.useEffect(()=>()=>{y.current=!1},[]);const d=m.useRef(null),U=s=>{var n;if(!o)return!0;const l=o.split(",").map(e=>e.trim().toLowerCase()),t=s.name.includes(".")?`.${(n=s.name.split(".").pop())==null?void 0:n.toLowerCase()}`:"",i=s.type.toLowerCase();return l.includes(t)||l.includes(i)},V=s=>{const l=s.reduce((t,{type:i,file:n})=>(t[i].push(n.name),t),{extension:[],size:[]});return Object.entries(l).filter(([t,i])=>i.length).map(([t,i])=>{const n=i.map(e=>`'${e}'`).join(", ");return r(`file-upload.${t}-rejected`,n)}).join(". ")};return{innerFiles:p,uploadErrorHelper:L,onFileChange:s=>{if(s.target.files){const l=Array.from(s.target.files),t=[],i=l.map(e=>{const c=U(e),v=!a||e.size<=a*1024**2;c||t.push({type:"extension",file:e}),v||t.push({type:"size",file:e});const z=new File([e],e.name,{type:e.type,lastModified:e.lastModified});return Object.assign(z,{id:H(),isLoading:!1,isValid:c&&v})});let n=[];if(!w&&i.length>0)i[0].isValid&&(n=[i[0]]);else if(E)n=[...p,...i];else{const e=i.filter(c=>c.isValid);e.length>0&&(n=[...p,...e])}if(n.length>0&&(F||j(n),u==null||u(n),t.length===0)){const e=n.length-p.length,c=r("file-upload.success-added",e.toString())||`${e} file(s) added successfully`;y.current&&M(c)}if(t.length){const e=t.map(v=>v.file.name).join(", "),c=r("file-upload.failed-some",e)||`Upload failed for: ${e}`;y.current&&M(c),h({type:"error",text:V(t)})}else h($({accept:o,maxSize:a},r));setTimeout(()=>{y.current&&M("")},T),d.current&&(d.current.value="")}},onFileRemove:s=>{const l=p.filter(t=>t!==s);F||j(l),f==null||f(s),u==null||u(l),l.length===0&&h($({accept:o,maxSize:a},r)),d.current&&(d.current.value="")},handleClear:()=>{const s=[...p];return s.forEach(l=>f==null?void 0:f(l)),F||j([]),u==null||u([]),h($({accept:o,maxSize:a},r)),d.current&&(d.current.value=""),s},fileInputRef:d,announcement:R}};exports.useFileUpload=I;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react"),z=require("../../providers/label-provider/use-labels.cjs.js"),j=({accept:F,maxSize:s},o)=>{if(!F&&!s)return;const u=[F&&`${o("file-upload.accept")} ${F.replaceAll(",",", ")}`,s&&`${o("file-upload.max-size")} ${s}MB`].filter(Boolean).join(". ");return u.length?{text:u}:void 0},I=()=>`${Date.now()}-${Math.random().toString(36).slice(2)}`,O=100,_=F=>{const{getLabel:s}=z.useLabels(),{accept:o,maxSize:u,multiple:w=!1,validateIndividually:b=!1,defaultFiles:L=[],onChange:c,onDelete:f,files:R,announcementTimeout:S=5e3}=F,h=R!==void 0,[A,x]=a.useState(L),p=h?R:A,[C,y]=a.useState(j({accept:o,maxSize:u},s)),[H,M]=a.useState(""),v=a.useRef(!0),g=a.useRef(),T=a.useRef();a.useEffect(()=>()=>{v.current=!1,g.current&&clearTimeout(g.current),T.current&&clearTimeout(T.current)},[]);const E=a.useCallback(t=>{!t||!v.current||(M(""),g.current&&clearTimeout(g.current),T.current&&clearTimeout(T.current),g.current=setTimeout(()=>{v.current&&(M(t),T.current=setTimeout(()=>{v.current&&M("")},S))},O))},[S]),d=a.useRef(null),N=t=>{var n;if(!o)return!0;const l=o.split(",").map(e=>e.trim().toLowerCase()),r=t.name.includes(".")?`.${(n=t.name.split(".").pop())==null?void 0:n.toLowerCase()}`:"",i=t.type.toLowerCase();return l.includes(r)||l.includes(i)},U=t=>{const l=t.reduce((r,{type:i,file:n})=>(r[i].push(n.name),r),{extension:[],size:[]});return Object.entries(l).filter(([r,i])=>i.length).map(([r,i])=>{const n=i.map(e=>`'${e}'`).join(", ");return s(`file-upload.${r}-rejected`,n)}).join(". ")};return{innerFiles:p,uploadErrorHelper:C,onFileChange:t=>{if(t.target.files){const l=Array.from(t.target.files),r=[],i=l.map(e=>{const m=N(e),$=!u||e.size<=u*1024**2;m||r.push({type:"extension",file:e}),$||r.push({type:"size",file:e});const V=new File([e],e.name,{type:e.type,lastModified:e.lastModified});return Object.assign(V,{id:I(),isLoading:!1,isValid:m&&$})});let n=[];if(!w&&i.length>0)i[0].isValid&&(n=[i[0]]);else if(b)n=[...p,...i];else{const e=i.filter(m=>m.isValid);e.length>0&&(n=[...p,...e])}if(n.length>0&&(h||x(n),c==null||c(n)),r.length){const e=U(r);y({type:"error",text:e}),E(e)}else if(y(j({accept:o,maxSize:u},s)),n.length>0){const e=n.filter(m=>!p.includes(m)).length;E(s("file-upload.success-added",e.toString()))}t.target.value="",d.current&&(d.current.value="")}},onFileRemove:t=>{const l=p.filter(r=>r!==t);h||x(l),f==null||f(t),c==null||c(l),l.length===0&&y(j({accept:o,maxSize:u},s)),E(s("file-upload.removed",t.name??"")),d.current&&(d.current.value="")},handleClear:()=>{const t=[...p];return t.forEach(l=>f==null?void 0:f(l)),h||x([]),c==null||c([]),y(j({accept:o,maxSize:u},s)),E(s("file-upload.cleared")),d.current&&(d.current.value=""),t},fileInputRef:d,announcement:H}};exports.useFileUpload=_;

package/src/tedi/helpers/hooks/use-file-upload.es.js

@@ -1,97 +1,102 @@
-import F, { useEffect as I } from "react";
-import { useLabels as U } from "../../providers/label-provider/use-labels.es.js";
-const $ = ({ accept: m, maxSize: r }, o) => {
-  if (!m && !r) return;
-  const a = [
-    m && `${o("file-upload.accept")} ${m.replaceAll(",", ", ")}`,
-    r && `${o("file-upload.max-size")} ${r}MB`
+import a, { useEffect as z } from "react";
+import { useLabels as I } from "../../providers/label-provider/use-labels.es.js";
+const x = ({ accept: F, maxSize: s }, o) => {
+  if (!F && !s) return;
+  const u = [
+    F && `${o("file-upload.accept")} ${F.replaceAll(",", ", ")}`,
+    s && `${o("file-upload.max-size")} ${s}MB`
   ].filter(Boolean).join(". ");
-  return a.length ? { text: a } : void 0;
-}, b = () => `${Date.now()}-${Math.random().toString(36).slice(2)}`, k = (m) => {
-  const { getLabel: r } = U(), {
+  return u.length ? { text: u } : void 0;
+}, U = () => `${Date.now()}-${Math.random().toString(36).slice(2)}`, O = 100, G = (F) => {
+  const { getLabel: s } = I(), {
     accept: o,
-    maxSize: a,
-    multiple: w = !1,
-    validateIndividually: E = !1,
-    defaultFiles: R = [],
+    maxSize: u,
+    multiple: S = !1,
+    validateIndividually: A = !1,
+    defaultFiles: L = [],
     onChange: c,
     onDelete: f,
-    files: M,
-    announcementTimeout: T = 5e3
-  } = m, g = M !== void 0, [L, j] = F.useState(R), p = g ? M : L, [S, h] = F.useState(
-    $({ accept: o, maxSize: a }, r)
-  ), [V, x] = F.useState(""), y = F.useRef(!0);
-  I(() => () => {
-    y.current = !1;
+    files: j,
+    announcementTimeout: w = 5e3
+  } = F, h = j !== void 0, [C, R] = a.useState(L), p = h ? j : C, [H, v] = a.useState(
+    x({ accept: o, maxSize: u }, s)
+  ), [N, $] = a.useState(""), y = a.useRef(!0), T = a.useRef(), g = a.useRef();
+  z(() => () => {
+    y.current = !1, T.current && clearTimeout(T.current), g.current && clearTimeout(g.current);
   }, []);
-  const d = F.useRef(null), z = (n) => {
-    var s;
+  const E = a.useCallback(
+    (t) => {
+      !t || !y.current || ($(""), T.current && clearTimeout(T.current), g.current && clearTimeout(g.current), T.current = setTimeout(() => {
+        y.current && ($(t), g.current = setTimeout(() => {
+          y.current && $("");
+        }, w));
+      }, O));
+    },
+    [w]
+  ), d = a.useRef(null), V = (t) => {
+    var n;
     if (!o) return !0;
-    const l = o.split(",").map((e) => e.trim().toLowerCase()), t = n.name.includes(".") ? `.${(s = n.name.split(".").pop()) == null ? void 0 : s.toLowerCase()}` : "", i = n.type.toLowerCase();
-    return l.includes(t) || l.includes(i);
-  }, A = (n) => {
-    const l = n.reduce(
-      (t, { type: i, file: s }) => (t[i].push(s.name), t),
+    const l = o.split(",").map((e) => e.trim().toLowerCase()), r = t.name.includes(".") ? `.${(n = t.name.split(".").pop()) == null ? void 0 : n.toLowerCase()}` : "", i = t.type.toLowerCase();
+    return l.includes(r) || l.includes(i);
+  }, _ = (t) => {
+    const l = t.reduce(
+      (r, { type: i, file: n }) => (r[i].push(n.name), r),
       { extension: [], size: [] }
     );
-    return Object.entries(l).filter(([t, i]) => i.length).map(([t, i]) => {
-      const s = i.map((e) => `'${e}'`).join(", ");
-      return r(`file-upload.${t}-rejected`, s);
+    return Object.entries(l).filter(([r, i]) => i.length).map(([r, i]) => {
+      const n = i.map((e) => `'${e}'`).join(", ");
+      return s(`file-upload.${r}-rejected`, n);
     }).join(". ");
   };
   return {
     innerFiles: p,
-    uploadErrorHelper: S,
-    onFileChange: (n) => {
-      if (n.target.files) {
-        const l = Array.from(n.target.files), t = [], i = l.map((e) => {
-          const u = z(e), v = !a || e.size <= a * 1024 ** 2;
-          u || t.push({ type: "extension", file: e }), v || t.push({ type: "size", file: e });
-          const H = new File([e], e.name, {
+    uploadErrorHelper: H,
+    onFileChange: (t) => {
+      if (t.target.files) {
+        const l = Array.from(t.target.files), r = [], i = l.map((e) => {
+          const m = V(e), M = !u || e.size <= u * 1024 ** 2;
+          m || r.push({ type: "extension", file: e }), M || r.push({ type: "size", file: e });
+          const b = new File([e], e.name, {
             type: e.type,
             lastModified: e.lastModified
           });
-          return Object.assign(H, {
-            id: b(),
+          return Object.assign(b, {
+            id: U(),
             isLoading: !1,
-            isValid: u && v
+            isValid: m && M
           });
         });
-        let s = [];
-        if (!w && i.length > 0)
-          i[0].isValid && (s = [i[0]]);
-        else if (E)
-          s = [...p, ...i];
+        let n = [];
+        if (!S && i.length > 0)
+          i[0].isValid && (n = [i[0]]);
+        else if (A)
+          n = [...p, ...i];
         else {
-          const e = i.filter((u) => u.isValid);
-          e.length > 0 && (s = [...p, ...e]);
+          const e = i.filter((m) => m.isValid);
+          e.length > 0 && (n = [...p, ...e]);
         }
-        if (s.length > 0 && (g || j(s), c == null || c(s), t.length === 0)) {
-          const e = s.length - p.length, u = r("file-upload.success-added", e.toString()) || `${e} file(s) added successfully`;
-          y.current && x(u);
+        if (n.length > 0 && (h || R(n), c == null || c(n)), r.length) {
+          const e = _(r);
+          v({ type: "error", text: e }), E(e);
+        } else if (v(x({ accept: o, maxSize: u }, s)), n.length > 0) {
+          const e = n.filter((m) => !p.includes(m)).length;
+          E(s("file-upload.success-added", e.toString()));
         }
-        if (t.length) {
-          const e = t.map((v) => v.file.name).join(", "), u = r("file-upload.failed-some", e) || `Upload failed for: ${e}`;
-          y.current && x(u), h({ type: "error", text: A(t) });
-        } else
-          h($({ accept: o, maxSize: a }, r));
-        setTimeout(() => {
-          y.current && x("");
-        }, T), d.current && (d.current.value = "");
+        t.target.value = "", d.current && (d.current.value = "");
       }
     },
-    onFileRemove: (n) => {
-      const l = p.filter((t) => t !== n);
-      g || j(l), f == null || f(n), c == null || c(l), l.length === 0 && h($({ accept: o, maxSize: a }, r)), d.current && (d.current.value = "");
+    onFileRemove: (t) => {
+      const l = p.filter((r) => r !== t);
+      h || R(l), f == null || f(t), c == null || c(l), l.length === 0 && v(x({ accept: o, maxSize: u }, s)), E(s("file-upload.removed", t.name ?? "")), d.current && (d.current.value = "");
     },
     handleClear: () => {
-      const n = [...p];
-      return n.forEach((l) => f == null ? void 0 : f(l)), g || j([]), c == null || c([]), h($({ accept: o, maxSize: a }, r)), d.current && (d.current.value = ""), n;
+      const t = [...p];
+      return t.forEach((l) => f == null ? void 0 : f(l)), h || R([]), c == null || c([]), v(x({ accept: o, maxSize: u }, s)), E(s("file-upload.cleared")), d.current && (d.current.value = ""), t;
     },
     fileInputRef: d,
-    announcement: V
+    announcement: N
   };
 };
 export {
-  k as useFileUpload
+  G as useFileUpload
 };

package/src/tedi/index.d.ts

@@ -75,6 +75,9 @@ export * from './components/misc/ellipsis/ellipsis';
 export * from './components/misc/option-content/option-content';
 export * from './components/layout/sidenav';
 export * from './components/layout/footer';
+export * from './components/layout/header';
+export * from './components/layout/show-at/show-at';
+export * from './components/layout/hide-at/hide-at';
 export * from './helpers';
 export * from './providers/label-provider';
 export * from './providers/style-provider/style-provider';

package/src/tedi/providers/label-provider/label-provider.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const v=require("react/jsx-runtime"),g=require("../../../../external/@mui/x-date-pickers/AdapterDayjs/index.cjs.js"),n=require("dayjs"),k=require("dayjs/plugin/isSameOrAfter"),E=require("dayjs/plugin/isSameOrBefore"),w=require("dayjs/plugin/updateLocale"),o=require("react"),L=require("./labels-map.cjs.js");require("dayjs/locale/et");require("dayjs/locale/ru");const M=require("../../../../external/@mui/x-date-pickers/LocalizationProvider/LocalizationProvider.cjs.js");n.extend(w);n.extend(E);n.extend(k);n.updateLocale("en",{weekStart:1});const m=process.env.NODE_ENV==="test",y=o.createContext({getLabel:(d,...l)=>(m||console.error("LabelProvider missing! Application must be wrapped with <LabelProvider>"),d),setLocale:()=>{m||console.error("LabelProvider missing! Application must be wrapped with <LabelProvider>")},locale:"en"}),O=d=>{const{labels:l={},children:x,locale:b="en"}=d,[e,p]=o.useState(b);o.useEffect(()=>{p(b)},[b]);const c=o.useMemo(()=>{const t={},r=new Set([...Object.keys(L.labelsMap),...Object.keys(l)]);for(const s of r){const a=s,P=L.labelsMap[a]?L.labelsMap[a][e]:void 0,i=l[a]??void 0;let u;i?typeof i=="object"?u=i[e]:u=i:u=void 0,t[a]=u??P??a}return t},[l,e]);o.useEffect(()=>{n.locale(e)},[e]);const f=o.useCallback((t,...r)=>{const s=c[t];return s?typeof s=="function"?s(...r):s:(console.error(`Label missing for key "${t}".`),t)},[c]),q=o.useMemo(()=>({getLabel:f,setLocale:p,locale:e}),[f,p,e]),j=Object.keys(c).reduce((t,r)=>({...t,...r.startsWith("pickers.")?{[r.replace("pickers.","")]:c[r]}:{}}),{});return v.jsx(y.Provider,{value:q,children:v.jsx(M.LocalizationProvider,{dateAdapter:g.AdapterDayjs,dateLibInstance:n,localeText:j,adapterLocale:e,children:x})})};exports.LabelContext=y;exports.LabelProvider=O;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const v=require("react/jsx-runtime"),g=require("../../../../external/@mui/x-date-pickers/AdapterDayjs/index.cjs.js"),a=require("dayjs"),k=require("dayjs/plugin/isSameOrAfter"),E=require("dayjs/plugin/isSameOrBefore"),w=require("dayjs/plugin/updateLocale"),o=require("react"),L=require("./labels-map.cjs.js");require("dayjs/locale/et");require("dayjs/locale/ru");const M=require("../../../../external/@mui/x-date-pickers/LocalizationProvider/LocalizationProvider.cjs.js");a.extend(w);a.extend(E);a.extend(k);a.updateLocale("en",{weekStart:1});const m=process.env.NODE_ENV==="test",y=o.createContext({getLabel:(d,...l)=>(m||console.error("LabelProvider missing! Application must be wrapped with <LabelProvider>"),d),setLocale:()=>{m||console.error("LabelProvider missing! Application must be wrapped with <LabelProvider>")},locale:"et"}),O=d=>{const{labels:l={},children:x,locale:b="et"}=d,[e,p]=o.useState(b);o.useEffect(()=>{p(b)},[b]);const c=o.useMemo(()=>{const t={},r=new Set([...Object.keys(L.labelsMap),...Object.keys(l)]);for(const s of r){const n=s,P=L.labelsMap[n]?L.labelsMap[n][e]:void 0,i=l[n]??void 0;let u;i?typeof i=="object"?u=i[e]:u=i:u=void 0,t[n]=u??P??n}return t},[l,e]);o.useEffect(()=>{a.locale(e)},[e]);const f=o.useCallback((t,...r)=>{const s=c[t];return s?typeof s=="function"?s(...r):s:(console.error(`Label missing for key "${t}".`),t)},[c]),q=o.useMemo(()=>({getLabel:f,setLocale:p,locale:e}),[f,p,e]),j=Object.keys(c).reduce((t,r)=>({...t,...r.startsWith("pickers.")?{[r.replace("pickers.","")]:c[r]}:{}}),{});return v.jsx(y.Provider,{value:q,children:v.jsx(M.LocalizationProvider,{dateAdapter:g.AdapterDayjs,dateLibInstance:a,localeText:j,adapterLocale:e,children:x})})};exports.LabelContext=y;exports.LabelProvider=O;

package/src/tedi/providers/label-provider/label-provider.d.ts

@@ -14,7 +14,7 @@ export declare const LabelContext: React.Context<ILabelContext>;
 export interface LabelProviderProps<TRecord extends TediLabelEntryRecord<TRecord> = Record<string, never>> {
     /**
      * Global labels that are use in components. If omitted then default labels are used based on `locale` prop.
-     * If both props are omitted then English translations are used by default
+     * If both props are omitted then Estonian translations are used by default
      */
     labels?: TRecord | TediLabelValuesRecord;
     /**
@@ -22,7 +22,7 @@ export interface LabelProviderProps<TRecord extends TediLabelEntryRecord<TRecord
      * et - Estonian<br />
      * en - English<br />
      * ru - Russian
-     * @default en
+     * @default et
      */
     locale?: TediLanguage;
     /**

package/src/tedi/providers/label-provider/label-provider.es.js

@@ -20,9 +20,9 @@ const y = process.env.NODE_ENV === "test", S = m.createContext({
   setLocale: () => {
     y || console.error("LabelProvider missing! Application must be wrapped with <LabelProvider>");
   },
-  locale: "en"
+  locale: "et"
 }), R = (p) => {
-  const { labels: n = {}, children: x, locale: d = "en" } = p, [e, f] = m.useState(d);
+  const { labels: n = {}, children: x, locale: d = "et" } = p, [e, f] = m.useState(d);
   m.useEffect(() => {
     f(d);
   }, [d]);