@tedi-design-system/react 19.0.1-rc.2 → 19.1.0-rc.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tedi-design-system/react",
-  "version": "19.0.1-rc.2",
+  "version": "19.1.0-rc.10",
   "description": "TEDI Design System React component library — accessible, reusable UI components. Docs & live examples: https://storybook.tedi.ee/react/rc/",
   "type": "module",
   "sideEffects": false,
@@ -47,7 +47,7 @@
     "@mui/material": "^5.15.13",
     "@mui/x-date-pickers": "^5.0.20",
     "@tanstack/react-table": "^8.13.2",
-    "@tedi-design-system/core": "^6.8.1",
+    "@tedi-design-system/core": "^6.9.0",
     "classnames": "^2.5.1",
     "draft-js": "^0.11.7",
     "draftjs-md-converter": "^1.5.2",

package/src/community/components/layout/sidenav/sidenav.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),d=require("react"),S=require("../../../../../external/@floating-ui/react/dist/floating-ui.react.cjs.js"),h=require("../../../../../external/classnames/index.cjs.js"),T=require("../../../../tedi/components/base/icon/icon.cjs.js"),L=require("../../../../tedi/components/content/collapse/collapse.cjs.js"),P=require("../../../../tedi/components/misc/print/print.cjs.js"),q=require("../../../helpers/hooks/use-layout.cjs.js"),B=require("../../anchor/anchor.cjs.js"),C=require("../layout-context.cjs.js"),a=require("./sidenav.module.scss.cjs.js"),F=require("./utility.cjs.js"),A=n=>requestAnimationFrame(n),I=n=>{const{navItems:l,ariaLabel:i,linkAs:r,breakToBottomContent:c,breakToHeader:x,showDividers:u=!0,hideSubItemIcons:m=!1,className:v,..._}=n,p=q.default(["mobile","tablet"]),{menuOpen:b,context:g,getFloatingProps:f,floating:y,headerType:e,y:s}=d.useContext(C.LayoutContext),{hasSidenav:o}=F.useSidenavRendered(e,n);if(!o)return null;const N=h.default(a.default.sidenav,v,{[a.default["sidenav--has-dividers"]]:u,[a.default["sidenav--hide-subitem-icons"]]:m}),j=t.jsx(P.Print,{visibility:"hide",children:t.jsx("nav",{"data-name":"sidenav",..._,className:N,"aria-label":i,children:t.jsx("ul",{className:a.default.sidenav__list,role:"menubar","aria-label":i,children:l.map((E,M)=>d.createElement(k,{as:r,...E,key:M}))})})});return p?b?t.jsx(S.FloatingOverlay,{lockScroll:!0,className:a.default.sidenav__overlay,children:t.jsx(S.FloatingFocusManager,{context:g,order:["reference","content"],children:t.jsx("div",{...f({style:{paddingTop:s??0},className:a.default.sidenav,"aria-label":i}),ref:y,children:j})})}):null:j},k=n=>{const{icon:l,children:i,isActive:r,onClick:c,subItems:x,as:u,...m}=n,{toggleMenu:v,onHeaderSidenavToggle:_}=d.useContext(C.LayoutContext),p=q.default(["mobile","tablet"]),b=h.default(a.default.sidenav__item,{[a.default["sidenav__item--current"]]:r}),g=d.useId(),f=e=>{const o={className:h.default(a.default.sidenav__icon)},N=typeof e=="string"?{...o,name:e,color:"inherit"}:{...o,...e,className:h.default(o.className,e==null?void 0:e.className),background:void 0};return t.jsx(T.Icon,{...N})},y=e=>{c==null||c(e),e.stopPropagation(),typeof _=="function"||(p?A(()=>v()):v())};return t.jsx("li",{"data-name":"sidenav-item",className:b,role:"presentation",children:x?t.jsx(L.Collapse,{id:g,hideCollapseText:!0,open:r,title:t.jsxs("span",{...(({_href:e,...s})=>s)(m),className:a.default.sidenav__link,noStyle:!0,role:"menuitem","aria-current":r?"page":void 0,children:[l&&f(l),t.jsx("span",{className:a.default.sidenav__title,children:i})]}),children:t.jsx("ul",{className:a.default.sidenav__list,role:"menubar",children:x.map((e,s)=>d.createElement(k,{as:u,...e,key:s}))})}):t.jsxs(B.Anchor,{...m,as:u,onClick:y,className:a.default.sidenav__link,noStyle:!0,role:"menuitem","aria-current":r?"page":void 0,children:[l&&f(l),t.jsx("span",{className:a.default.sidenav__title,children:i})]})})};exports.SideNav=I;exports.default=I;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),d=require("react"),S=require("../../../../../external/@floating-ui/react/dist/floating-ui.react.cjs.js"),h=require("../../../../../external/classnames/index.cjs.js"),T=require("../../../../tedi/components/base/icon/icon.cjs.js"),L=require("../../../../tedi/components/content/collapse/collapse.cjs.js"),P=require("../../../../tedi/components/misc/print/print.cjs.js"),q=require("../../../helpers/hooks/use-layout.cjs.js"),A=require("../../anchor/anchor.cjs.js"),C=require("../layout-context.cjs.js"),a=require("./sidenav.module.scss.cjs.js"),B=require("./utility.cjs.js"),F=n=>requestAnimationFrame(n),I=n=>{const{navItems:l,ariaLabel:r,linkAs:i,breakToBottomContent:c,breakToHeader:x,showDividers:u=!0,hideSubItemIcons:m=!1,className:v,..._}=n,p=q.default(["mobile","tablet"]),{menuOpen:g,context:y,getFloatingProps:f,floating:N,headerType:e,y:s}=d.useContext(C.LayoutContext),{hasSidenav:o}=B.useSidenavRendered(e,n);if(!o)return null;const b=h.default(a.default.sidenav,v,{[a.default["sidenav--has-dividers"]]:u,[a.default["sidenav--hide-subitem-icons"]]:m}),j=t.jsx(P.Print,{visibility:"hide",children:t.jsx("nav",{"data-name":"sidenav",..._,className:b,"aria-label":r,children:t.jsx("ul",{className:a.default.sidenav__list,children:l.map((E,M)=>d.createElement(k,{as:i,...E,key:M}))})})});return p?g?t.jsx(S.FloatingOverlay,{lockScroll:!0,className:a.default.sidenav__overlay,children:t.jsx(S.FloatingFocusManager,{context:y,order:["reference","content"],children:t.jsx("div",{...f({style:{paddingTop:s??0},className:a.default.sidenav,"aria-label":r}),ref:N,children:j})})}):null:j},k=n=>{const{icon:l,children:r,isActive:i,onClick:c,subItems:x,as:u,...m}=n,{toggleMenu:v,onHeaderSidenavToggle:_}=d.useContext(C.LayoutContext),p=q.default(["mobile","tablet"]),g=h.default(a.default.sidenav__item,{[a.default["sidenav__item--current"]]:i}),y=d.useId(),f=e=>{const o={className:h.default(a.default.sidenav__icon)},b=typeof e=="string"?{...o,name:e,color:"inherit"}:{...o,...e,className:h.default(o.className,e==null?void 0:e.className),background:void 0};return t.jsx(T.Icon,{...b})},N=e=>{c==null||c(e),e.stopPropagation(),typeof _=="function"||(p?F(()=>v()):v())};return t.jsx("li",{"data-name":"sidenav-item",className:g,children:x?t.jsx(L.Collapse,{id:y,hideCollapseText:!0,contentAsRegion:!1,open:i,title:t.jsxs("span",{...(({_href:e,...s})=>s)(m),className:a.default.sidenav__link,"aria-current":i?"page":void 0,children:[l&&f(l),t.jsx("span",{className:a.default.sidenav__title,children:r})]}),children:t.jsx("ul",{className:a.default.sidenav__list,children:x.map((e,s)=>d.createElement(k,{as:u,...e,key:s}))})}):t.jsxs(A.Anchor,{...m,as:u,onClick:N,className:a.default.sidenav__link,noStyle:!0,"aria-current":i?"page":void 0,children:[l&&f(l),t.jsx("span",{className:a.default.sidenav__title,children:r})]})})};exports.SideNav=I;exports.default=I;

package/src/community/components/layout/sidenav/sidenav.es.js

@@ -1,98 +1,96 @@
 import { jsx as t, jsxs as x } from "react/jsx-runtime";
-import y, { createElement as C } from "react";
-import { FloatingOverlay as F, FloatingFocusManager as L } from "../../../../../external/@floating-ui/react/dist/floating-ui.react.es.js";
-import v from "../../../../../external/classnames/index.es.js";
-import { Icon as P } from "../../../../tedi/components/base/icon/icon.es.js";
-import { Collapse as A } from "../../../../tedi/components/content/collapse/collapse.es.js";
-import { Print as j } from "../../../../tedi/components/misc/print/print.es.js";
+import b, { createElement as C } from "react";
+import { FloatingOverlay as B, FloatingFocusManager as F } from "../../../../../external/@floating-ui/react/dist/floating-ui.react.es.js";
+import p from "../../../../../external/classnames/index.es.js";
+import { Icon as L } from "../../../../tedi/components/base/icon/icon.es.js";
+import { Collapse as P } from "../../../../tedi/components/content/collapse/collapse.es.js";
+import { Print as R } from "../../../../tedi/components/misc/print/print.es.js";
 import k from "../../../helpers/hooks/use-layout.es.js";
-import { Anchor as H } from "../../anchor/anchor.es.js";
+import { Anchor as j } from "../../anchor/anchor.es.js";
 import { LayoutContext as E } from "../layout-context.es.js";
 import a from "./sidenav.module.scss.es.js";
-import { useSidenavRendered as O } from "./utility.es.js";
-const R = (s) => requestAnimationFrame(s), Y = (s) => {
+import { useSidenavRendered as H } from "./utility.es.js";
+const O = (n) => requestAnimationFrame(n), Y = (n) => {
   const {
     navItems: i,
-    ariaLabel: o,
-    linkAs: r,
+    ariaLabel: r,
+    linkAs: o,
     breakToBottomContent: c,
     breakToHeader: f,
     showDividers: d = !0,
     hideSubItemIcons: m = !1,
     className: u,
     ...h
-  } = s, _ = k(["mobile", "tablet"]), { menuOpen: N, context: b, getFloatingProps: p, floating: S, headerType: e, y: n } = y.useContext(E), { hasSidenav: l } = O(e, s);
+  } = n, _ = k(["mobile", "tablet"]), { menuOpen: N, context: g, getFloatingProps: v, floating: S, headerType: e, y: s } = b.useContext(E), { hasSidenav: l } = H(e, n);
   if (!l)
     return null;
-  const g = v(a.sidenav, u, {
+  const y = p(a.sidenav, u, {
     [a["sidenav--has-dividers"]]: d,
     [a["sidenav--hide-subitem-icons"]]: m
-  }), I = /* @__PURE__ */ t(j, { visibility: "hide", children: /* @__PURE__ */ t("nav", { "data-name": "sidenav", ...h, className: g, "aria-label": o, children: /* @__PURE__ */ t("ul", { className: a.sidenav__list, role: "menubar", "aria-label": o, children: i.map((T, B) => /* @__PURE__ */ C(M, { as: r, ...T, key: B })) }) }) });
-  return _ ? N ? /* @__PURE__ */ t(F, { lockScroll: !0, className: a.sidenav__overlay, children: /* @__PURE__ */ t(L, { context: b, order: ["reference", "content"], children: /* @__PURE__ */ t(
+  }), I = /* @__PURE__ */ t(R, { visibility: "hide", children: /* @__PURE__ */ t("nav", { "data-name": "sidenav", ...h, className: y, "aria-label": r, children: /* @__PURE__ */ t("ul", { className: a.sidenav__list, children: i.map((T, A) => /* @__PURE__ */ C(M, { as: o, ...T, key: A })) }) }) });
+  return _ ? N ? /* @__PURE__ */ t(B, { lockScroll: !0, className: a.sidenav__overlay, children: /* @__PURE__ */ t(F, { context: g, order: ["reference", "content"], children: /* @__PURE__ */ t(
     "div",
     {
-      ...p({
+      ...v({
         style: {
-          paddingTop: n ?? 0
+          paddingTop: s ?? 0
         },
         className: a.sidenav,
-        "aria-label": o
+        "aria-label": r
       }),
       ref: S,
       children: I
     }
   ) }) }) : null : I;
-}, M = (s) => {
-  const { icon: i, children: o, isActive: r, onClick: c, subItems: f, as: d, ...m } = s, { toggleMenu: u, onHeaderSidenavToggle: h } = y.useContext(E), _ = k(["mobile", "tablet"]), N = v(a.sidenav__item, { [a["sidenav__item--current"]]: r }), b = y.useId(), p = (e) => {
-    const l = { className: v(a.sidenav__icon) }, g = typeof e == "string" ? { ...l, name: e, color: "inherit" } : {
+}, M = (n) => {
+  const { icon: i, children: r, isActive: o, onClick: c, subItems: f, as: d, ...m } = n, { toggleMenu: u, onHeaderSidenavToggle: h } = b.useContext(E), _ = k(["mobile", "tablet"]), N = p(a.sidenav__item, { [a["sidenav__item--current"]]: o }), g = b.useId(), v = (e) => {
+    const l = { className: p(a.sidenav__icon) }, y = typeof e == "string" ? { ...l, name: e, color: "inherit" } : {
       ...l,
       ...e,
-      className: v(l.className, e == null ? void 0 : e.className),
+      className: p(l.className, e == null ? void 0 : e.className),
       background: void 0
     };
-    return /* @__PURE__ */ t(P, { ...g });
+    return /* @__PURE__ */ t(L, { ...y });
   };
-  return /* @__PURE__ */ t("li", { "data-name": "sidenav-item", className: N, role: "presentation", children: f ? /* @__PURE__ */ t(
-    A,
+  return /* @__PURE__ */ t("li", { "data-name": "sidenav-item", className: N, children: f ? /* @__PURE__ */ t(
+    P,
     {
-      id: b,
+      id: g,
       hideCollapseText: !0,
-      open: r,
+      contentAsRegion: !1,
+      open: o,
       title: /* @__PURE__ */ x(
         "span",
         {
-          ...(({ _href: e, ...n }) => n)(m),
+          ...(({ _href: e, ...s }) => s)(m),
           className: a.sidenav__link,
-          noStyle: !0,
-          role: "menuitem",
-          "aria-current": r ? "page" : void 0,
+          "aria-current": o ? "page" : void 0,
           children: [
-            i && p(i),
-            /* @__PURE__ */ t("span", { className: a.sidenav__title, children: o })
+            i && v(i),
+            /* @__PURE__ */ t("span", { className: a.sidenav__title, children: r })
           ]
         }
       ),
-      children: /* @__PURE__ */ t("ul", { className: a.sidenav__list, role: "menubar", children: f.map((e, n) => /* @__PURE__ */ C(M, { as: d, ...e, key: n })) })
+      children: /* @__PURE__ */ t("ul", { className: a.sidenav__list, children: f.map((e, s) => /* @__PURE__ */ C(M, { as: d, ...e, key: s })) })
     }
   ) : (
     // // TODO: Remove ts-ignore
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
     /* @__PURE__ */ x(
-      H,
+      j,
       {
         ...m,
         as: d,
         onClick: (e) => {
-          c == null || c(e), e.stopPropagation(), typeof h == "function" || (_ ? R(() => u()) : u());
+          c == null || c(e), e.stopPropagation(), typeof h == "function" || (_ ? O(() => u()) : u());
         },
         className: a.sidenav__link,
         noStyle: !0,
-        role: "menuitem",
-        "aria-current": r ? "page" : void 0,
+        "aria-current": o ? "page" : void 0,
         children: [
-          i && p(i),
-          /* @__PURE__ */ t("span", { className: a.sidenav__title, children: o })
+          i && v(i),
+          /* @__PURE__ */ t("span", { className: a.sidenav__title, children: r })
         ]
       }
     )

package/src/community/components/map-components/base-map-selection/base-map-option.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),N=require("../../../../../external/classnames/index.cjs.js"),r=require("react"),I=require("../../../../tedi/components/base/icon/icon.cjs.js"),t=require("./base-map-selection.module.scss.cjs.js"),S=require("../../../../tedi/helpers/hooks/use-element-size.cjs.js"),s=require("../../../../tedi/components/overlays/tooltip/tooltip.cjs.js"),d=b=>{const{title:l,content:x,selected:c,onSelect:n,type:u="selection",className:h,id:j,multiple:T,disabled:o,tooltipText:p,tooltipType:f="info"}=b,a=r.useRef(null),_=S.useElementSize(a),[y,g]=r.useState(!1);r.useEffect(()=>{const i=a.current;i&&g(i.scrollWidth>i.clientWidth)},[_,l]);const q=()=>{o||n==null||n()},v=i=>{o||(i.key==="Enter"||i.key===" ")&&(i.preventDefault(),n==null||n())},M=N.default(t.default["tedi-base-map-selection__wrapper"],c&&t.default["tedi-base-map-selection--selected"],u&&t.default[`tedi-base-map-selection--${u}`],T&&t.default["tedi-base-map-selection--multiple"],o&&t.default["tedi-base-map-selection--disabled"],h),m=e.jsx("div",{ref:a,tabIndex:-1,className:t.default["tedi-base-map-selection__title"],children:l}),E=y?e.jsxs(s.Tooltip,{children:[e.jsx(s.Tooltip.Trigger,{children:m}),e.jsx(s.Tooltip.Content,{children:l})]}):m;return e.jsxs("div",{role:"button",tabIndex:o?-1:0,"aria-pressed":!!c,"aria-disabled":o||void 0,onClick:q,onKeyDown:v,className:M,id:j,children:[e.jsx("div",{"aria-hidden":!0,className:t.default["tedi-base-map-selection__content"],children:x}),p&&e.jsxs(s.Tooltip,{children:[e.jsx(s.Tooltip.Trigger,{children:e.jsx("span",{tabIndex:-1,className:t.default["tedi-base-map-selection__info"],children:e.jsx(I.Icon,{background:"brand-secondary",name:f==="error"?"error":"info",size:16,color:f==="error"?"danger":"brand"})})}),e.jsx(s.Tooltip.Content,{children:p})]}),E]})};d.displayName="BaseMapOption";exports.BaseMapOption=d;exports.default=d;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),M=require("../../../../../external/classnames/index.cjs.js"),r=require("react"),y=require("../../../../tedi/components/base/icon/icon.cjs.js"),N=require("../../../../tedi/components/buttons/button/button.cjs.js"),t=require("./base-map-selection.module.scss.cjs.js"),B=require("../../../../tedi/helpers/hooks/use-element-size.cjs.js"),d=require("../../../../tedi/components/overlays/tooltip/tooltip.cjs.js"),c=h=>{const{title:s,content:x,selected:u,onSelect:a,type:p="selection",className:j,id:_,multiple:T,disabled:n,tooltipText:i,tooltipType:f="info"}=h,o=r.useRef(null),q=B.useElementSize(o),[m,S]=r.useState(!1);r.useEffect(()=>{const l=o.current;l&&S(l.scrollWidth>l.clientWidth)},[q,s]);const g=()=>{n||a==null||a()},v=M.default(t.default["tedi-base-map-selection__wrapper"],u&&t.default["tedi-base-map-selection--selected"],p&&t.default[`tedi-base-map-selection--${p}`],T&&t.default["tedi-base-map-selection--multiple"],n&&t.default["tedi-base-map-selection--disabled"],j),b=e.jsxs(N.Button,{noStyle:!0,disabled:n&&!i,"aria-pressed":!!u,"aria-disabled":n||void 0,onClick:g,className:v,id:_,children:[e.jsx("div",{"aria-hidden":!0,className:t.default["tedi-base-map-selection__content"],children:x}),i&&e.jsx("span",{className:t.default["tedi-base-map-selection__info"],children:e.jsx(y.Icon,{background:"brand-secondary",name:f==="error"?"error":"info",size:16,color:f==="error"?"danger":"brand"})}),e.jsx("div",{ref:o,className:t.default["tedi-base-map-selection__title"],children:s})]});return!i&&!m?b:e.jsxs(d.Tooltip,{ariaHidden:!i,openWith:"hover",children:[e.jsx(d.Tooltip.Trigger,{children:b}),e.jsx(d.Tooltip.Content,{children:i?e.jsxs(e.Fragment,{children:[m&&e.jsx("div",{"aria-hidden":!0,children:s}),i]}):s})]})};c.displayName="BaseMapOption";exports.BaseMapOption=c;exports.default=c;

package/src/community/components/map-components/base-map-selection/base-map-option.d.ts

@@ -45,14 +45,17 @@ export interface BaseMapOptionProps {
      */
     disabled?: boolean;
     /**
-     * Text shown in a tooltip. When set, an info icon is rendered in the middle of
-     * the option and reveals this text on hover.
+     * Text shown in a tooltip. When set, an info icon is rendered in the middle of the
+     * option and hovering anywhere on the option reveals this text. A title too long to
+     * fit is shown above it in the same tooltip rather than in a second, competing one.
      */
     tooltipText?: string;
     /**
-     * Visual style of the info icon shown when `tooltipText` is set.
-     * - `'info'`: neutral informational icon (default)
-     * - `'error'`: error/danger styled icon
+     * Which icon and colour the tooltip indicator uses.
+     * - `'info'`: neutral info icon in the brand colour (default)
+     * - `'error'`: error icon in the danger colour, for a layer that is unavailable
+     *
+     * Only takes effect when `tooltipText` is set, since that is what renders the icon.
      * @default 'info'
      */
     tooltipType?: BaseMapOptionTooltipType;

package/src/community/components/map-components/base-map-selection/base-map-option.es.js

@@ -1,75 +1,73 @@
-import { jsxs as l, jsx as e } from "react/jsx-runtime";
-import k from "../../../../../external/classnames/index.es.js";
-import { useRef as C, useState as w, useEffect as z } from "react";
-import { Icon as B } from "../../../../tedi/components/base/icon/icon.es.js";
-import t from "./base-map-selection.module.scss.es.js";
-import { useElementSize as D } from "../../../../tedi/helpers/hooks/use-element-size.es.js";
-import { Tooltip as s } from "../../../../tedi/components/overlays/tooltip/tooltip.es.js";
-const M = (b) => {
+import { jsxs as l, jsx as t, Fragment as B } from "react/jsx-runtime";
+import S from "../../../../../external/classnames/index.es.js";
+import { useRef as z, useState as E, useEffect as M } from "react";
+import { Icon as W } from "../../../../tedi/components/base/icon/icon.es.js";
+import { Button as j } from "../../../../tedi/components/buttons/button/button.es.js";
+import e from "./base-map-selection.module.scss.es.js";
+import { useElementSize as k } from "../../../../tedi/helpers/hooks/use-element-size.es.js";
+import { Tooltip as d } from "../../../../tedi/components/overlays/tooltip/tooltip.es.js";
+const C = (h) => {
   const {
-    title: r,
-    content: u,
-    selected: d,
-    onSelect: n,
-    type: c = "selection",
-    className: h,
-    id: y,
-    multiple: _,
-    disabled: o,
-    tooltipText: m,
+    title: o,
+    content: b,
+    selected: c,
+    onSelect: s,
+    type: m = "selection",
+    className: _,
+    id: N,
+    multiple: y,
+    disabled: r,
+    tooltipText: i,
     tooltipType: p = "info"
-  } = b, a = C(null), x = D(a), [N, T] = w(!1);
-  z(() => {
-    const i = a.current;
-    i && T(i.scrollWidth > i.clientWidth);
-  }, [x, r]);
-  const g = () => {
-    o || n == null || n();
-  }, v = (i) => {
-    o || (i.key === "Enter" || i.key === " ") && (i.preventDefault(), n == null || n());
-  }, E = k(
-    t["tedi-base-map-selection__wrapper"],
-    d && t["tedi-base-map-selection--selected"],
-    c && t[`tedi-base-map-selection--${c}`],
-    _ && t["tedi-base-map-selection--multiple"],
-    o && t["tedi-base-map-selection--disabled"],
-    h
-  ), f = /* @__PURE__ */ e("div", { ref: a, tabIndex: -1, className: t["tedi-base-map-selection__title"], children: r }), I = N ? /* @__PURE__ */ l(s, { children: [
-    /* @__PURE__ */ e(s.Trigger, { children: f }),
-    /* @__PURE__ */ e(s.Content, { children: r })
-  ] }) : f;
-  return /* @__PURE__ */ l(
-    "div",
+  } = h, n = z(null), T = k(n), [f, g] = E(!1);
+  M(() => {
+    const a = n.current;
+    a && g(a.scrollWidth > a.clientWidth);
+  }, [T, o]);
+  const v = () => {
+    r || s == null || s();
+  }, x = S(
+    e["tedi-base-map-selection__wrapper"],
+    c && e["tedi-base-map-selection--selected"],
+    m && e[`tedi-base-map-selection--${m}`],
+    y && e["tedi-base-map-selection--multiple"],
+    r && e["tedi-base-map-selection--disabled"],
+    _
+  ), u = /* @__PURE__ */ l(
+    j,
     {
-      role: "button",
-      tabIndex: o ? -1 : 0,
-      "aria-pressed": !!d,
-      "aria-disabled": o || void 0,
-      onClick: g,
-      onKeyDown: v,
-      className: E,
-      id: y,
+      noStyle: !0,
+      disabled: r && !i,
+      "aria-pressed": !!c,
+      "aria-disabled": r || void 0,
+      onClick: v,
+      className: x,
+      id: N,
       children: [
-        /* @__PURE__ */ e("div", { "aria-hidden": !0, className: t["tedi-base-map-selection__content"], children: u }),
-        m && /* @__PURE__ */ l(s, { children: [
-          /* @__PURE__ */ e(s.Trigger, { children: /* @__PURE__ */ e("span", { tabIndex: -1, className: t["tedi-base-map-selection__info"], children: /* @__PURE__ */ e(
-            B,
-            {
-              background: "brand-secondary",
-              name: p === "error" ? "error" : "info",
-              size: 16,
-              color: p === "error" ? "danger" : "brand"
-            }
-          ) }) }),
-          /* @__PURE__ */ e(s.Content, { children: m })
-        ] }),
-        I
+        /* @__PURE__ */ t("div", { "aria-hidden": !0, className: e["tedi-base-map-selection__content"], children: b }),
+        i && /* @__PURE__ */ t("span", { className: e["tedi-base-map-selection__info"], children: /* @__PURE__ */ t(
+          W,
+          {
+            background: "brand-secondary",
+            name: p === "error" ? "error" : "info",
+            size: 16,
+            color: p === "error" ? "danger" : "brand"
+          }
+        ) }),
+        /* @__PURE__ */ t("div", { ref: n, className: e["tedi-base-map-selection__title"], children: o })
       ]
     }
   );
+  return !i && !f ? u : /* @__PURE__ */ l(d, { ariaHidden: !i, openWith: "hover", children: [
+    /* @__PURE__ */ t(d.Trigger, { children: u }),
+    /* @__PURE__ */ t(d.Content, { children: i ? /* @__PURE__ */ l(B, { children: [
+      f && /* @__PURE__ */ t("div", { "aria-hidden": !0, children: o }),
+      i
+    ] }) : o })
+  ] });
 };
-M.displayName = "BaseMapOption";
+C.displayName = "BaseMapOption";
 export {
-  M as BaseMapOption,
-  M as default
+  C as BaseMapOption,
+  C as default
 };

package/src/community/components/map-components/base-map-selection/base-map-selection.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),N=require("../../../../../external/classnames/index.cjs.js"),S=require("react"),B=require("../../../../tedi/components/buttons/button/button.cjs.js"),T=require("../../../../tedi/components/form/field/field.cjs.js"),O=require("../../../../tedi/components/form/input-group/input-group.cjs.js"),C=require("../../../../tedi/components/form/slider/slider.cjs.js"),f=require("./base-map-option.cjs.js"),n=require("./base-map-selection.module.scss.cjs.js"),l=require("../../../../tedi/components/overlays/popover/popover.cjs.js"),L=require("../../../../tedi/components/form/input-group/components/input/input.cjs.js"),P=require("../../../../tedi/components/form/input-group/components/suffix/suffix.cjs.js"),c=a=>{const t=Number(a);return Number.isNaN(t)?0:Math.min(100,Math.max(0,t))};function o(a){const{title:t,content:x,children:h,multiple:y=!1,showTransparency:j=!1,transparency:d,defaultTransparency:_,onTransparencyChange:s,transparencyLabel:r="",id:i}=a,p=d!==void 0,[v,g]=S.useState(()=>c(_??0)),u=c(p?d:v),m=M=>{const b=c(M);p||g(b),s==null||s(b)},q=N.default(n.default["tedi-base-map-selection__wrapper"],n.default["tedi-base-map-selection__trigger"],n.default["tedi-base-map-selection--button"],y&&n.default["tedi-base-map-selection--multiple"]);return e.jsxs(l.Popover,{placement:"top-end",children:[e.jsx(l.Popover.Trigger,{children:e.jsxs(B.Button,{noStyle:!0,id:i,className:q,children:[e.jsx("div",{className:n.default["tedi-base-map-selection__content"],"aria-hidden":!0,children:x}),e.jsx("div",{className:n.default["tedi-base-map-selection__title"],children:t})]})}),e.jsxs(l.Popover.Content,{width:"medium",children:[e.jsx("div",{className:n.default["tedi-base-map-selection__options"],children:h}),j&&e.jsx("div",{className:n.default["tedi-base-map-selection__transparency"],children:e.jsx(C.Slider,{label:r,"aria-label":r||"Transparency",min:0,max:100,value:u,onChange:m,minLabel:"0%",maxLabel:"100%",addonRight:e.jsx("div",{className:n.default["tedi-base-map-selection__transparency-field"],children:e.jsxs(O.InputGroupBase,{id:`${i}-transparency`,label:r||"Transparency",hideLabel:!0,children:[e.jsx(L.Input,{children:e.jsx(T.Field,{type:"number",id:`${i}-transparency`,value:String(u),onChange:m})}),e.jsx(P.Suffix,{children:"%"})]})})})})]})]})}o.Option=f.BaseMapOption;o.displayName="BaseMapSelection";exports.BaseMapOption=f.BaseMapOption;exports.BaseMapSelection=o;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),w=require("../../../../../external/classnames/index.cjs.js"),f=require("react"),P=require("../../../../tedi/components/buttons/button/button.cjs.js"),I=require("../../../../tedi/components/form/field/field.cjs.js"),R=require("../../../../tedi/components/form/input-group/input-group.cjs.js"),k=require("../../../../tedi/components/form/slider/slider.cjs.js"),G=require("../map-button/map-button.cjs.js"),x=require("./base-map-option.cjs.js"),t=require("./base-map-selection.module.scss.cjs.js"),$=require("../../../../tedi/providers/label-provider/use-labels.cjs.js"),h=require("../../../../tedi/helpers/hooks/use-breakpoint.cjs.js"),r=require("../../../../tedi/components/overlays/popover/popover.cjs.js"),E=require("../../../../tedi/components/form/input-group/components/input/input.cjs.js"),F=require("../../../../tedi/components/form/input-group/components/suffix/suffix.cjs.js"),o=s=>{const n=Number(s);return Number.isNaN(n)?0:Math.min(100,Math.max(0,n))};function l(s){const{title:n,content:y,children:j,multiple:g=!1,showTransparency:q=!1,transparency:c,defaultTransparency:M,onTransparencyChange:i,id:a}=s,{getLabel:B}=$.useLabels(),v=h.isBreakpointBelow(h.default(),"md"),[S,_]=f.useState(!1),u=B("baseMapSelection.transparency"),d=c!==void 0,[N,L]=f.useState(()=>o(M??0)),p=o(d?c:N),m=C=>{const b=o(C);d||L(b),i==null||i(b)},O=w.default(t.default["tedi-base-map-selection__wrapper"],t.default["tedi-base-map-selection--button"],g&&t.default["tedi-base-map-selection--multiple"]),T=v?e.jsx(G.MapButton,{id:a,icon:"map",hideLabel:!0,tooltipContent:null,selected:S,children:n}):e.jsxs(P.Button,{noStyle:!0,id:a,className:O,children:[e.jsx("div",{className:t.default["tedi-base-map-selection__content"],"aria-hidden":!0,children:y}),e.jsx("div",{className:t.default["tedi-base-map-selection__title"],children:n})]});return e.jsxs(r.Popover,{placement:"top-start",onToggle:_,children:[e.jsx(r.Popover.Trigger,{children:T}),e.jsxs(r.Popover.Content,{width:"medium",children:[e.jsx("div",{className:t.default["tedi-base-map-selection__options"],children:j}),q&&e.jsx("div",{className:t.default["tedi-base-map-selection__transparency"],children:e.jsx(k.Slider,{"aria-label":u,min:0,max:100,value:p,onChange:m,minLabel:"0%",maxLabel:"100%",addonRight:e.jsx("div",{className:t.default["tedi-base-map-selection__transparency-field"],children:e.jsxs(R.InputGroupBase,{id:`${a}-transparency`,label:u,hideLabel:!0,children:[e.jsx(E.Input,{children:e.jsx(I.Field,{type:"number",id:`${a}-transparency`,value:String(p),onChange:m})}),e.jsx(F.Suffix,{children:"%"})]})})})})]})]})}l.Option=x.BaseMapOption;l.displayName="BaseMapSelection";exports.BaseMapOption=x.BaseMapOption;exports.BaseMapSelection=l;

package/src/community/components/map-components/base-map-selection/base-map-selection.d.ts

@@ -15,6 +15,7 @@ export interface BaseMapSelectionProps {
     children: React.ReactNode;
     /**
      * Renders a "stacked" trigger, indicating that multiple base maps are available.
+     * Has no effect below the `md` breakpoint, where the trigger is a `MapButton`.
      * @default false
      */
     multiple?: boolean;
@@ -37,10 +38,6 @@ export interface BaseMapSelectionProps {
      * Callback fired when the transparency value changes. The reported value is always clamped to 0-100.
      */
     onTransparencyChange?: (value: number) => void;
-    /**
-     * Label for the transparency slider.
-     */
-    transparencyLabel?: string;
     /**
      * HTML `id` attribute applied to the trigger button.
      */

package/src/community/components/map-components/base-map-selection/base-map-selection.es.js

@@ -1,80 +1,80 @@
-import { jsxs as t, jsx as e } from "react/jsx-runtime";
-import B from "../../../../../external/classnames/index.es.js";
-import { useState as M } from "react";
-import { Button as C } from "../../../../tedi/components/buttons/button/button.es.js";
-import { Field as L } from "../../../../tedi/components/form/field/field.es.js";
-import { InputGroupBase as w } from "../../../../tedi/components/form/input-group/input-group.es.js";
-import { Slider as j } from "../../../../tedi/components/form/slider/slider.es.js";
-import { BaseMapOption as I } from "./base-map-option.es.js";
-import a from "./base-map-selection.module.scss.es.js";
-import { Popover as l } from "../../../../tedi/components/overlays/popover/popover.es.js";
-import { Input as O } from "../../../../tedi/components/form/input-group/components/input/input.es.js";
-import { Suffix as $ } from "../../../../tedi/components/form/input-group/components/suffix/suffix.es.js";
-const c = (r) => {
-  const n = Number(r);
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import I from "../../../../../external/classnames/index.es.js";
+import { useState as h } from "react";
+import { Button as j } from "../../../../tedi/components/buttons/button/button.es.js";
+import { Field as k } from "../../../../tedi/components/form/field/field.es.js";
+import { InputGroupBase as $ } from "../../../../tedi/components/form/input-group/input-group.es.js";
+import { Slider as E } from "../../../../tedi/components/form/slider/slider.es.js";
+import { MapButton as F } from "../map-button/map-button.es.js";
+import { BaseMapOption as G } from "./base-map-option.es.js";
+import t from "./base-map-selection.module.scss.es.js";
+import { useLabels as P } from "../../../../tedi/providers/label-provider/use-labels.es.js";
+import R, { isBreakpointBelow as U } from "../../../../tedi/helpers/hooks/use-breakpoint.es.js";
+import { Popover as s } from "../../../../tedi/components/overlays/popover/popover.es.js";
+import { Input as V } from "../../../../tedi/components/form/input-group/components/input/input.es.js";
+import { Suffix as q } from "../../../../tedi/components/form/input-group/components/suffix/suffix.es.js";
+const l = (i) => {
+  const n = Number(i);
   return Number.isNaN(n) ? 0 : Math.min(100, Math.max(0, n));
 };
-function f(r) {
+function b(i) {
   const {
     title: n,
-    content: b,
-    children: y,
-    multiple: _ = !1,
-    showTransparency: N = !1,
-    transparency: m,
-    defaultTransparency: g,
-    onTransparencyChange: i,
-    transparencyLabel: s = "",
-    id: o
-  } = r, p = m !== void 0, [v, x] = M(
-    () => c(g ?? 0)
-  ), d = c(p ? m : v), u = (S) => {
-    const h = c(S);
-    p || x(h), i == null || i(h);
-  }, T = B(
-    a["tedi-base-map-selection__wrapper"],
-    a["tedi-base-map-selection__trigger"],
-    a["tedi-base-map-selection--button"],
-    _ && a["tedi-base-map-selection--multiple"]
-  );
-  return /* @__PURE__ */ t(l, { placement: "top-end", children: [
-    /* @__PURE__ */ e(l.Trigger, { children: /* @__PURE__ */ t(C, { noStyle: !0, id: o, className: T, children: [
-      /* @__PURE__ */ e("div", { className: a["tedi-base-map-selection__content"], "aria-hidden": !0, children: b }),
-      /* @__PURE__ */ e("div", { className: a["tedi-base-map-selection__title"], children: n })
-    ] }) }),
-    /* @__PURE__ */ t(l.Content, { width: "medium", children: [
-      /* @__PURE__ */ e("div", { className: a["tedi-base-map-selection__options"], children: y }),
-      N && /* @__PURE__ */ e("div", { className: a["tedi-base-map-selection__transparency"], children: /* @__PURE__ */ e(
-        j,
+    content: y,
+    children: g,
+    multiple: N = !1,
+    showTransparency: _ = !1,
+    transparency: c,
+    defaultTransparency: B,
+    onTransparencyChange: o,
+    id: a
+  } = i, { getLabel: v } = P(), x = U(R(), "md"), [M, S] = h(!1), p = v("baseMapSelection.transparency"), m = c !== void 0, [L, T] = h(
+    () => l(B ?? 0)
+  ), d = l(m ? c : L), u = (O) => {
+    const f = l(O);
+    m || T(f), o == null || o(f);
+  }, C = I(
+    t["tedi-base-map-selection__wrapper"],
+    t["tedi-base-map-selection--button"],
+    N && t["tedi-base-map-selection--multiple"]
+  ), w = x ? /* @__PURE__ */ e(F, { id: a, icon: "map", hideLabel: !0, tooltipContent: null, selected: M, children: n }) : /* @__PURE__ */ r(j, { noStyle: !0, id: a, className: C, children: [
+    /* @__PURE__ */ e("div", { className: t["tedi-base-map-selection__content"], "aria-hidden": !0, children: y }),
+    /* @__PURE__ */ e("div", { className: t["tedi-base-map-selection__title"], children: n })
+  ] });
+  return /* @__PURE__ */ r(s, { placement: "top-start", onToggle: S, children: [
+    /* @__PURE__ */ e(s.Trigger, { children: w }),
+    /* @__PURE__ */ r(s.Content, { width: "medium", children: [
+      /* @__PURE__ */ e("div", { className: t["tedi-base-map-selection__options"], children: g }),
+      _ && /* @__PURE__ */ e("div", { className: t["tedi-base-map-selection__transparency"], children: /* @__PURE__ */ e(
+        E,
         {
-          label: s,
-          "aria-label": s || "Transparency",
+          "aria-label": p,
           min: 0,
           max: 100,
           value: d,
           onChange: u,
           minLabel: "0%",
           maxLabel: "100%",
-          addonRight: /* @__PURE__ */ e("div", { className: a["tedi-base-map-selection__transparency-field"], children: /* @__PURE__ */ t(w, { id: `${o}-transparency`, label: s || "Transparency", hideLabel: !0, children: [
-            /* @__PURE__ */ e(O, { children: /* @__PURE__ */ e(
-              L,
+          addonRight: /* @__PURE__ */ e("div", { className: t["tedi-base-map-selection__transparency-field"], children: /* @__PURE__ */ r($, { id: `${a}-transparency`, label: p, hideLabel: !0, children: [
+            /* @__PURE__ */ e(V, { children: /* @__PURE__ */ e(
+              k,
               {
                 type: "number",
-                id: `${o}-transparency`,
+                id: `${a}-transparency`,
                 value: String(d),
                 onChange: u
               }
             ) }),
-            /* @__PURE__ */ e($, { children: "%" })
+            /* @__PURE__ */ e(q, { children: "%" })
           ] }) })
         }
       ) })
     ] })
   ] });
 }
-f.Option = I;
-f.displayName = "BaseMapSelection";
+b.Option = G;
+b.displayName = "BaseMapSelection";
 export {
-  I as BaseMapOption,
-  f as BaseMapSelection
+  G as BaseMapOption,
+  b as BaseMapSelection
 };

package/src/community/components/map-components/map-button/map-button.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),m=require("../../../../../external/classnames/index.cjs.js"),B=require("react"),S=require("../../../../tedi/components/base/icon/icon.cjs.js"),N=require("../../../../tedi/components/loaders/spinner/spinner.cjs.js"),O=require("../../../../tedi/components/buttons/button/button.cjs.js"),d=require("../map-dropdown/map-dropdown.cjs.js"),t=require("./map-button.module.scss.cjs.js"),l=require("../../../../tedi/components/overlays/tooltip/tooltip.cjs.js"),b=f=>{const{size:n="default",icon:r,selected:h=!1,className:x,children:u,hideLabel:c=!1,tooltipContent:p=u,dropdownItems:i,isActive:j,isHovered:g,underline:q,isLoading:s,...v}=f,[_,w]=B.useState(!1),D=h||_,M=m.default(t.default["tedi-map-button"],t.default[`tedi-map-button--${n}`],D&&t.default["tedi-map-button--selected"],i&&t.default["tedi-map-button--dropdown"],j&&t.default["tedi-map-button--is-active"],g&&t.default["tedi-map-button--is-hovered"],q&&t.default["tedi-map-button--underline"],s&&t.default["tedi-map-button--loading"],x),C=e.jsxs(e.Fragment,{children:[s?e.jsx(N.Spinner,{size:n==="small"?16:18,className:t.default["tedi-map-button__icon"]}):r&&e.jsx(S.Icon,{name:r,className:t.default["tedi-map-button__icon"],size:n==="small"?24:18}),!c&&e.jsx("div",{className:m.default(t.default["tedi-map-button__text"]),children:u})]}),a=e.jsx(O.Button,{noStyle:!0,isLoading:s,className:M,size:n,...v,children:C}),T=c&&p?e.jsxs(l.Tooltip,{placement:"right",children:[e.jsx(l.Tooltip.Trigger,{children:a}),e.jsx(l.Tooltip.Content,{children:p})]}):a;return i?e.jsxs(d.MapDropdown,{onOpenChange:w,placement:"right-start",children:[e.jsx(d.MapDropdown.Trigger,{children:a}),e.jsx(d.MapDropdown.Content,{items:i.map(o=>({children:o.children,onClick:o.onClick,isActive:o.isActive,isDisabled:o.isDisabled}))})]}):T};exports.MapButton=b;exports.default=b;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),f=require("../../../../../external/classnames/index.cjs.js"),b=require("react"),S=require("../../../../tedi/components/base/icon/icon.cjs.js"),y=require("../../../../tedi/components/loaders/spinner/spinner.cjs.js"),O=require("../../../../tedi/components/buttons/button/button.cjs.js"),d=require("../map-dropdown/map-dropdown.cjs.js"),t=require("./map-button.module.scss.cjs.js"),r=require("../../../../tedi/components/overlays/tooltip/tooltip.cjs.js"),u=b.forwardRef((h,x)=>{const{size:n="default",icon:c,selected:j=!1,className:g,children:s,hideLabel:p=!1,tooltipContent:m=s,dropdownItems:i,isActive:q,isHovered:v,underline:w,isLoading:a,...M}=h,[_,D]=b.useState(!1),B=j||_,C=f.default(t.default["tedi-map-button"],t.default[`tedi-map-button--${n}`],B&&t.default["tedi-map-button--selected"],i&&t.default["tedi-map-button--dropdown"],q&&t.default["tedi-map-button--is-active"],v&&t.default["tedi-map-button--is-hovered"],w&&t.default["tedi-map-button--underline"],a&&t.default["tedi-map-button--loading"],g),N=e.jsxs(e.Fragment,{children:[a?e.jsx(y.Spinner,{size:n==="small"?16:18,className:t.default["tedi-map-button__icon"]}):c&&e.jsx(S.Icon,{name:c,className:t.default["tedi-map-button__icon"],size:n==="small"?24:18}),p?e.jsx("span",{className:"sr-only",children:s}):e.jsx("div",{className:f.default(t.default["tedi-map-button__text"]),children:s})]}),l=e.jsx(O.Button,{noStyle:!0,isLoading:a,className:C,size:n,...M,ref:x,children:N}),T=p&&m?e.jsxs(r.Tooltip,{placement:"right",children:[e.jsx(r.Tooltip.Trigger,{children:l}),e.jsx(r.Tooltip.Content,{children:m})]}):l;return i?e.jsxs(d.MapDropdown,{onOpenChange:D,placement:"right-start",children:[e.jsx(d.MapDropdown.Trigger,{children:l}),e.jsx(d.MapDropdown.Content,{items:i.map(o=>({children:o.children,onClick:o.onClick,isActive:o.isActive,isDisabled:o.isDisabled}))})]}):T});u.displayName="MapButton";exports.MapButton=u;exports.default=u;

package/src/community/components/map-components/map-button/map-button.d.ts

@@ -1,4 +1,3 @@
-import { JSX } from 'react';
 import { ButtonProps } from '../../../../tedi';
 import { MapDropdownItem } from '../map-dropdown/map-dropdown';
 /**
@@ -25,7 +24,7 @@ export interface MapButtonProps extends Omit<ButtonProps, OmittedButtonProps> {
     selected?: boolean;
     /**
      * If `true`, hides the label visually (icon-only button).
-     * Label may still be available to screen readers.
+     * The label stays in the accessible name, so `children` is required for the button to be named.
      */
     hideLabel?: boolean;
     /**
@@ -39,5 +38,5 @@ export interface MapButtonProps extends Omit<ButtonProps, OmittedButtonProps> {
      */
     dropdownItems?: MapDropdownItem[];
 }
-export declare const MapButton: (props: MapButtonProps) => JSX.Element;
+export declare const MapButton: import('react').ForwardRefExoticComponent<Omit<MapButtonProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
 export default MapButton;