@tedi-design-system/react 19.1.0-rc.14 → 19.1.0-rc.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tedi-design-system/react",
-  "version": "19.1.0-rc.14",
+  "version": "19.1.0-rc.16",
   "description": "TEDI Design System React component library — accessible, reusable UI components. Docs & live examples: https://storybook.tedi.ee/react/rc/",
   "type": "module",
   "sideEffects": false,

package/src/community/components/dock-panel/dock-panel.cjs.js

@@ -0,0 +1,2 @@
+"use client";
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),$=require("../../../../external/classnames/index.cjs.js"),s=require("react"),le=require("../../../tedi/components/base/typography/heading/heading.cjs.js"),B=require("../../../tedi/components/buttons/button/button.cjs.js"),n=require("./dock-panel.module.scss.cjs.js"),se=["xs","sm","md","lg","xl"],ae={xs:"25%",sm:"35%",md:"50%",lg:"65%",xl:"80%"},de=o=>typeof o=="string"&&se.includes(o),H=o=>de(o)?ae[o]:typeof o=="number"?`${o}px`:o,z=s.forwardRef((o,p)=>{const{title:h,children:g,labels:d,placement:O="right",size:v="default",collapsed:N,defaultCollapsed:M=!1,onCollapsedChange:_,onClose:b,headerActions:k,footer:y,width:E,height:j,maxHeight:i,headingElement:G,id:W,className:J,style:K,...D}=o,Q=s.useId(),x=W??`tedi-dock-panel-${Q}`,I=`${x}-title`,R=`${x}-body`,[U,V]=s.useState(M),X=N!==void 0,l=N??U,r=s.useRef(null),u=s.useRef(null),C=s.useRef(null),f=s.useRef(!1);s.useEffect(()=>{var T;const e=(T=r.current)==null?void 0:T.ownerDocument;if(!e)return;const c=()=>{var q,w,A;const a=e.activeElement,L=!!(a&&((q=u.current)!=null&&q.contains(a)||(w=C.current)!=null&&w.contains(a)));(L||a!==e.body||!((A=u.current)!=null&&A.hidden))&&(f.current=L)},S=()=>{var a;(a=u.current)!=null&&a.hidden||(f.current=!1)};return c(),e.addEventListener("focusin",c),e.addEventListener("focusout",S),()=>{e.removeEventListener("focusin",c),e.removeEventListener("focusout",S)}},[]),s.useEffect(()=>{var e;l&&f.current&&((e=r.current)==null||e.focus(),f.current=!1)},[l]);const Y=()=>{var c;const e=!l;(c=r.current)==null||c.focus(),X||V(e),_==null||_(e)},m={...K};E!==void 0&&(m["--dock-panel-width"]=H(E)),j!==void 0&&(m["--dock-panel-height"]=H(j)),i!==void 0&&(m["--dock-panel-max-height"]=typeof i=="number"?`${i}px`:i);const Z=G??(v==="small"?"h4":"h3"),ee=l?"small":void 0,P=l?d.expand:d.collapse,te=l?"zoom_out_map":"zoom_in_map",ne=k!=null,oe=y!=null;return t.jsxs("div",{...D,ref:p,id:x,role:"region","aria-labelledby":D["aria-labelledby"]??I,"data-dock-panel":"","data-placement":O,"data-size":v,"data-collapsed":l,className:$.default(n.default["tedi-dock-panel"],J),style:m,children:[t.jsxs("div",{className:n.default["tedi-dock-panel__header"],children:[t.jsx(le.Heading,{id:I,element:Z,modifiers:ee,className:n.default["tedi-dock-panel__title"],children:h}),ne&&t.jsx("div",{ref:C,className:n.default["tedi-dock-panel__header-actions"],hidden:l,children:k}),t.jsxs("div",{className:n.default["tedi-dock-panel__controls"],children:[t.jsx(B.Button,{ref:r,className:n.default["tedi-dock-panel__toggle"],type:"button",visualType:"neutral",icon:te,title:P,"aria-expanded":!l,"aria-controls":R,onClick:Y,children:P}),b&&t.jsx(B.Button,{className:n.default["tedi-dock-panel__close"],type:"button",visualType:"neutral",icon:"close",title:d.close,onClick:b,children:d.close})]})]}),t.jsxs("div",{ref:u,id:R,className:n.default["tedi-dock-panel__body"],hidden:l,children:[t.jsx("div",{className:n.default["tedi-dock-panel__content"],children:t.jsx("div",{className:n.default["tedi-dock-panel__content-inner"],children:g})}),oe&&t.jsx("div",{className:n.default["tedi-dock-panel__footer"],children:y})]})]})});z.displayName="DockPanel";const F=s.forwardRef(({children:o,panel:p,className:h,...g},d)=>t.jsxs("div",{...g,ref:d,className:$.default(n.default["tedi-dock-panel-layout"],h),children:[t.jsx("div",{className:n.default["tedi-dock-panel-layout__content"],"data-dock-panel-layout-content":"",children:o}),p]}));F.displayName="DockPanelLayout";exports.DockPanel=z;exports.DockPanelLayout=F;

package/src/community/components/dock-panel/dock-panel.d.ts

@@ -0,0 +1,110 @@
+import { CSSProperties, HTMLAttributes, ReactNode } from 'react';
+import { HeadingProps } from '../../../tedi/components/base/typography/heading/heading';
+export type DockPanelPlacement = 'left' | 'right' | 'top' | 'bottom';
+export type DockPanelSize = 'default' | 'small';
+export type DockPanelDimensionPreset = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type DockPanelWidth = DockPanelDimensionPreset | CSSProperties['width'];
+export type DockPanelHeight = DockPanelDimensionPreset | CSSProperties['height'];
+export interface DockPanelLabels {
+    /** Accessible name for the minimize button. Supply translated text. */
+    collapse: string;
+    /** Accessible name for the restore button. Supply translated text. */
+    expand: string;
+    /** Accessible name for the optional close button. Supply translated text. */
+    close: string;
+}
+export interface DockPanelProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'children'> {
+    /** Required. Visible heading and default accessible name of the panel. */
+    title: string;
+    /** Required. Application-provided React content. Kept mounted while minimized. */
+    children: ReactNode;
+    /**
+     * Required. Translated accessible button names: { collapse, expand, close }.
+     * All three strings are required by this interface, including close when onClose is omitted.
+     * Providing labels.close alone does not display a close button.
+     */
+    labels: DockPanelLabels;
+    /**
+     * Optional. Edge of the containing workspace, not necessarily the browser viewport.
+     * Place the panel in DockPanelLayout to overlay when expanded and reserve space when minimized.
+     * @default right
+     */
+    placement?: DockPanelPlacement;
+    /**
+     * Optional. Panel density, using TEDI Modal padding tokens for the header, content and footer.
+     * The title defaults to h3 for default and h4 for small, including its text size when expanded.
+     * Set headingElement to override both. Minimized titles always use compact text.
+     * This is independent of width/height: small does not mean a narrower panel.
+     * @default default
+     */
+    size?: DockPanelSize;
+    /**
+     * Optional. Controlled minimized state. Supply onCollapsedChange and apply the requested value.
+     * When omitted, the component manages its own state, initialized from defaultCollapsed.
+     */
+    collapsed?: boolean;
+    /**
+     * Optional. Initial minimized state in uncontrolled mode; ignored when collapsed is supplied.
+     * Changes after mounting do not reset the state.
+     * @default false
+     */
+    defaultCollapsed?: boolean;
+    /** Optional. Requests/notifies a minimize/restore change. Receives the next collapsed value. */
+    onCollapsedChange?: (collapsed: boolean) => void;
+    /**
+     * Optional. Displays the close button and requests dismissal when clicked.
+     * The application owns removal, unsaved-change confirmation and focus restoration.
+     * Omit this callback to hide the close button. Closing is separate from minimizing.
+     */
+    onClose?: () => void;
+    /** Optional. React content before the grouped panel controls. Hidden, not unmounted, when minimized. */
+    headerActions?: ReactNode;
+    /** Optional. React content below the scrolling body. Hidden, not unmounted, when minimized. */
+    footer?: ReactNode;
+    /**
+     * Optional. Expanded width for left/right placement; ignored for top/bottom.
+     * Presets share the height scale: xs=25%, sm=35%, md=50%, lg=65%, xl=80% of workspace width.
+     * Every named preset leaves some workspace visible beside the panel, including xl.
+     * Also accepts a CSS length or a number in pixels, limited to the workspace width.
+     * Use 100% explicitly to fill the workspace. An omitted width defaults to xs (25%) via CSS.
+     * @default xs
+     */
+    width?: DockPanelWidth;
+    /**
+     * Optional. Expanded height for any placement. Numbers mean pixels; CSS lengths and auto work too.
+     * Presets share the width scale: xs=25%, sm=35%, md=50%, lg=65%, xl=80% of workspace height.
+     * Named presets leave workspace visible; use 100% explicitly for the full available height.
+     * Defaults to 100% for left/right and 50% for top/bottom.
+     * Use auto for content height, with maxHeight to leave background visible underneath.
+     * A minimized side rail keeps an explicit height, or fits its title and controls for auto.
+     */
+    height?: DockPanelHeight;
+    /**
+     * Optional. Maximum height as a CSS length or number in pixels; not a preset.
+     * For example, calc(100% - 4rem) reserves space below a side panel.
+     * At the limit, the body scrolls while the header and footer remain visible.
+     * @default 100%
+     */
+    maxHeight?: CSSProperties['maxHeight'];
+    /**
+     * Optional. Overrides the title's HTML heading tag and expanded text size.
+     * When omitted, uses h3 for default and h4 for small. Minimized titles always use compact text.
+     * @default h3 (h4 when size is small)
+     */
+    headingElement?: HeadingProps['element'];
+}
+export declare const DockPanel: import('react').ForwardRefExoticComponent<DockPanelProps & import('react').RefAttributes<HTMLDivElement>>;
+/**
+ * Shared layout for one DockPanel and its underlying application content.
+ * Expanded panels are out of flow. A minimized panel occupies a separate grid track,
+ * so the workspace resizes without being obscured by the rail.
+ * Keep the layout mounted when opening/closing the panel to preserve application state.
+ */
+export interface DockPanelLayoutProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** Required. Underlying application content, such as a map, editor or table. */
+    children: ReactNode;
+    /** Optional. One DockPanel, or a layout-aware wrapper containing it. Null means closed. */
+    panel?: ReactNode;
+}
+export declare const DockPanelLayout: import('react').ForwardRefExoticComponent<DockPanelLayoutProps & import('react').RefAttributes<HTMLDivElement>>;
+export default DockPanel;

package/src/community/components/dock-panel/dock-panel.es.js

@@ -0,0 +1,138 @@
+"use client";
+import { jsxs as i, jsx as l } from "react/jsx-runtime";
+import j from "../../../../external/classnames/index.es.js";
+import { forwardRef as M, useId as ae, useState as se, useRef as f, useEffect as z } from "react";
+import { Heading as ce } from "../../../tedi/components/base/typography/heading/heading.es.js";
+import { Button as F } from "../../../tedi/components/buttons/button/button.es.js";
+import t from "./dock-panel.module.scss.es.js";
+const ie = ["xs", "sm", "md", "lg", "xl"], de = {
+  xs: "25%",
+  sm: "35%",
+  md: "50%",
+  lg: "65%",
+  xl: "80%"
+}, re = (n) => typeof n == "string" && ie.includes(n), O = (n) => re(n) ? de[n] : typeof n == "number" ? `${n}px` : n, ue = M((n, h) => {
+  const {
+    title: g,
+    children: _,
+    labels: s,
+    placement: G = "right",
+    size: b = "default",
+    collapsed: x,
+    defaultCollapsed: W = !1,
+    onCollapsedChange: y,
+    onClose: E,
+    headerActions: k,
+    footer: v,
+    width: I,
+    height: D,
+    maxHeight: d,
+    headingElement: q,
+    id: J,
+    className: K,
+    style: Q,
+    ...C
+  } = n, U = ae(), N = J ?? `tedi-dock-panel-${U}`, T = `${N}-title`, R = `${N}-body`, [V, X] = se(W), Y = x !== void 0, o = x ?? V, r = f(null), u = f(null), S = f(null), m = f(!1);
+  z(() => {
+    var A;
+    const e = (A = r.current) == null ? void 0 : A.ownerDocument;
+    if (!e) return;
+    const c = () => {
+      var w, B, $;
+      const a = e.activeElement, H = !!(a && ((w = u.current) != null && w.contains(a) || (B = S.current) != null && B.contains(a)));
+      (H || a !== e.body || !(($ = u.current) != null && $.hidden)) && (m.current = H);
+    }, P = () => {
+      var a;
+      (a = u.current) != null && a.hidden || (m.current = !1);
+    };
+    return c(), e.addEventListener("focusin", c), e.addEventListener("focusout", P), () => {
+      e.removeEventListener("focusin", c), e.removeEventListener("focusout", P);
+    };
+  }, []), z(() => {
+    var e;
+    o && m.current && ((e = r.current) == null || e.focus(), m.current = !1);
+  }, [o]);
+  const Z = () => {
+    var c;
+    const e = !o;
+    (c = r.current) == null || c.focus(), Y || X(e), y == null || y(e);
+  }, p = { ...Q };
+  I !== void 0 && (p["--dock-panel-width"] = O(I)), D !== void 0 && (p["--dock-panel-height"] = O(D)), d !== void 0 && (p["--dock-panel-max-height"] = typeof d == "number" ? `${d}px` : d);
+  const ee = q ?? (b === "small" ? "h4" : "h3"), te = o ? "small" : void 0, L = o ? s.expand : s.collapse, ne = o ? "zoom_out_map" : "zoom_in_map", oe = k != null, le = v != null;
+  return /* @__PURE__ */ i(
+    "div",
+    {
+      ...C,
+      ref: h,
+      id: N,
+      role: "region",
+      "aria-labelledby": C["aria-labelledby"] ?? T,
+      "data-dock-panel": "",
+      "data-placement": G,
+      "data-size": b,
+      "data-collapsed": o,
+      className: j(t["tedi-dock-panel"], K),
+      style: p,
+      children: [
+        /* @__PURE__ */ i("div", { className: t["tedi-dock-panel__header"], children: [
+          /* @__PURE__ */ l(
+            ce,
+            {
+              id: T,
+              element: ee,
+              modifiers: te,
+              className: t["tedi-dock-panel__title"],
+              children: g
+            }
+          ),
+          oe && /* @__PURE__ */ l("div", { ref: S, className: t["tedi-dock-panel__header-actions"], hidden: o, children: k }),
+          /* @__PURE__ */ i("div", { className: t["tedi-dock-panel__controls"], children: [
+            /* @__PURE__ */ l(
+              F,
+              {
+                ref: r,
+                className: t["tedi-dock-panel__toggle"],
+                type: "button",
+                visualType: "neutral",
+                icon: ne,
+                title: L,
+                "aria-expanded": !o,
+                "aria-controls": R,
+                onClick: Z,
+                children: L
+              }
+            ),
+            E && /* @__PURE__ */ l(
+              F,
+              {
+                className: t["tedi-dock-panel__close"],
+                type: "button",
+                visualType: "neutral",
+                icon: "close",
+                title: s.close,
+                onClick: E,
+                children: s.close
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ i("div", { ref: u, id: R, className: t["tedi-dock-panel__body"], hidden: o, children: [
+          /* @__PURE__ */ l("div", { className: t["tedi-dock-panel__content"], children: /* @__PURE__ */ l("div", { className: t["tedi-dock-panel__content-inner"], children: _ }) }),
+          le && /* @__PURE__ */ l("div", { className: t["tedi-dock-panel__footer"], children: v })
+        ] })
+      ]
+    }
+  );
+});
+ue.displayName = "DockPanel";
+const me = M(
+  ({ children: n, panel: h, className: g, ..._ }, s) => /* @__PURE__ */ i("div", { ..._, ref: s, className: j(t["tedi-dock-panel-layout"], g), children: [
+    /* @__PURE__ */ l("div", { className: t["tedi-dock-panel-layout__content"], "data-dock-panel-layout-content": "", children: n }),
+    h
+  ] })
+);
+me.displayName = "DockPanelLayout";
+export {
+  ue as DockPanel,
+  me as DockPanelLayout
+};

package/src/community/components/dock-panel/dock-panel.module.scss.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-dock-panel":"tedi-dock-panel-ef8c20a6","tedi-dock-panel-layout":"tedi-dock-panel-layout-cde58073","tedi-dock-panel__header":"tedi-dock-panel__header-b12fda64","tedi-dock-panel__title":"tedi-dock-panel__title-d31ae9ea","tedi-dock-panel__header-actions":"tedi-dock-panel__header-actions-6b6b0022","tedi-dock-panel__controls":"tedi-dock-panel__controls-ec981d75","tedi-dock-panel__toggle":"tedi-dock-panel__toggle-8b710f3d","tedi-dock-panel__close":"tedi-dock-panel__close-d516de11","tedi-dock-panel__body":"tedi-dock-panel__body-06c713da","tedi-dock-panel__content":"tedi-dock-panel__content-417ece1d","tedi-dock-panel__content-inner":"tedi-dock-panel__content-inner-3ea8c932","tedi-dock-panel__footer":"tedi-dock-panel__footer-364577b7","tedi-dock-panel-layout__content":"tedi-dock-panel-layout__content-cff421e0"};exports.default=e;

package/src/community/components/dock-panel/dock-panel.module.scss.es.js

@@ -0,0 +1,18 @@
+const e = {
+  "tedi-dock-panel": "tedi-dock-panel-ef8c20a6",
+  "tedi-dock-panel-layout": "tedi-dock-panel-layout-cde58073",
+  "tedi-dock-panel__header": "tedi-dock-panel__header-b12fda64",
+  "tedi-dock-panel__title": "tedi-dock-panel__title-d31ae9ea",
+  "tedi-dock-panel__header-actions": "tedi-dock-panel__header-actions-6b6b0022",
+  "tedi-dock-panel__controls": "tedi-dock-panel__controls-ec981d75",
+  "tedi-dock-panel__toggle": "tedi-dock-panel__toggle-8b710f3d",
+  "tedi-dock-panel__close": "tedi-dock-panel__close-d516de11",
+  "tedi-dock-panel__body": "tedi-dock-panel__body-06c713da",
+  "tedi-dock-panel__content": "tedi-dock-panel__content-417ece1d",
+  "tedi-dock-panel__content-inner": "tedi-dock-panel__content-inner-3ea8c932",
+  "tedi-dock-panel__footer": "tedi-dock-panel__footer-364577b7",
+  "tedi-dock-panel-layout__content": "tedi-dock-panel-layout__content-cff421e0"
+};
+export {
+  e 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"),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;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),C=require("../../../../../external/classnames/index.cjs.js"),h=require("react"),I=require("../../../../tedi/components/buttons/button/button.cjs.js"),P=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"),f=require("../../../../tedi/helpers/hooks/use-breakpoint.cjs.js"),r=require("../../../../tedi/components/overlays/popover/popover.cjs.js"),z=require("../../../../tedi/components/form/input-group/components/input/input.cjs.js"),D=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(),S=f.isBreakpointBelow(f.default(),"md"),[v,_]=h.useState(!1),u=B("baseMapSelection.transparency"),d=c!==void 0,[N,L]=h.useState(()=>o(M??0)),p=o(d?c:N),m=w=>{const b=o(w);d||L(b),i==null||i(b)},O=C.default(t.default["tedi-base-map-selection__wrapper"],t.default["tedi-base-map-selection--button"],g&&t.default["tedi-base-map-selection--multiple"]),T=S?e.jsx(G.MapButton,{id:a,icon:"map",showDropdownIndicator:!0,hideLabel:!0,iconSize:24,tooltipContent:null,selected:v,children:n}):e.jsxs(I.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(z.Input,{children:e.jsx(P.Field,{type:"number",id:`${a}-transparency`,value:String(p),onChange:m})}),e.jsx(D.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.es.js

@@ -1,18 +1,18 @@
 import { jsxs as r, jsx as e } from "react/jsx-runtime";
-import I from "../../../../../external/classnames/index.es.js";
+import O 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 { Slider as z } from "../../../../tedi/components/form/slider/slider.es.js";
+import { MapButton as D } from "../map-button/map-button.es.js";
+import { BaseMapOption as E } 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 { useLabels as F } from "../../../../tedi/providers/label-provider/use-labels.es.js";
+import G, { isBreakpointBelow as P } 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";
+import { Input as R } from "../../../../tedi/components/form/input-group/components/input/input.es.js";
+import { Suffix as U } 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));
@@ -28,25 +28,25 @@ function b(i) {
     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(
+  } = i, { getLabel: v } = F(), x = P(G(), "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);
+  ), d = l(m ? c : L), u = (I) => {
+    const f = l(I);
     m || T(f), o == null || o(f);
-  }, C = I(
+  }, w = O(
     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: [
+  ), C = x ? /* @__PURE__ */ e(D, { id: a, icon: "map", showDropdownIndicator: !0, hideLabel: !0, iconSize: 24, tooltipContent: null, selected: M, children: n }) : /* @__PURE__ */ r(j, { noStyle: !0, id: a, className: w, 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__ */ e(s.Trigger, { children: C }),
     /* @__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,
+        z,
         {
           "aria-label": p,
           min: 0,
@@ -56,7 +56,7 @@ function b(i) {
           minLabel: "0%",
           maxLabel: "100%",
           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(
+            /* @__PURE__ */ e(R, { children: /* @__PURE__ */ e(
               k,
               {
                 type: "number",
@@ -65,16 +65,16 @@ function b(i) {
                 onChange: u
               }
             ) }),
-            /* @__PURE__ */ e(q, { children: "%" })
+            /* @__PURE__ */ e(U, { children: "%" })
           ] }) })
         }
       ) })
     ] })
   ] });
 }
-b.Option = G;
+b.Option = E;
 b.displayName = "BaseMapSelection";
 export {
-  G as BaseMapOption,
+  E 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"),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;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),b=require("../../../../../external/classnames/index.cjs.js"),h=require("react"),y=require("../../../../tedi/components/base/icon/icon.cjs.js"),O=require("../../../../tedi/components/loaders/spinner/spinner.cjs.js"),A=require("../../../../tedi/components/buttons/button/button.cjs.js"),l=require("../map-dropdown/map-dropdown.cjs.js"),t=require("./map-button.module.scss.cjs.js"),d=require("../../../../tedi/components/overlays/tooltip/tooltip.cjs.js"),u=h.forwardRef((x,j)=>{const{size:n="default",icon:c,selected:g=!1,className:w,children:i,hideLabel:p=!1,tooltipContent:m=i,dropdownItems:s,showDropdownIndicator:v=!1,isActive:q,isHovered:D,underline:M,isLoading:a,iconSize:f,..._}=x,[S,B]=h.useState(!1),C=g||S,N=b.default(t.default["tedi-map-button"],t.default[`tedi-map-button--${n}`],C&&t.default["tedi-map-button--selected"],(s||v)&&t.default["tedi-map-button--dropdown"],q&&t.default["tedi-map-button--is-active"],D&&t.default["tedi-map-button--is-hovered"],M&&t.default["tedi-map-button--underline"],a&&t.default["tedi-map-button--loading"],w),T=()=>f||(n==="small"?24:18),z=e.jsxs(e.Fragment,{children:[a?e.jsx(O.Spinner,{size:n==="small"?16:18,className:t.default["tedi-map-button__icon"]}):c&&e.jsx(y.Icon,{name:c,className:t.default["tedi-map-button__icon"],size:T()}),p?e.jsx("span",{className:"sr-only",children:i}):e.jsx("div",{className:b.default(t.default["tedi-map-button__text"]),children:i})]}),r=e.jsx(A.Button,{noStyle:!0,isLoading:a,className:N,size:n,..._,ref:j,children:z}),I=p&&m?e.jsxs(d.Tooltip,{placement:"right",children:[e.jsx(d.Tooltip.Trigger,{children:r}),e.jsx(d.Tooltip.Content,{children:m})]}):r;return s?e.jsxs(l.MapDropdown,{onOpenChange:B,placement:"right-start",children:[e.jsx(l.MapDropdown.Trigger,{children:r}),e.jsx(l.MapDropdown.Content,{items:s.map(o=>({children:o.children,onClick:o.onClick,isActive:o.isActive,isDisabled:o.isDisabled}))})]}):I});u.displayName="MapButton";exports.MapButton=u;exports.default=u;

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

@@ -1,4 +1,4 @@
-import { ButtonProps } from '../../../../tedi';
+import { ButtonProps, IconSize } from '../../../../tedi';
 import { MapDropdownItem } from '../map-dropdown/map-dropdown';
 /**
  * Button props that don't apply to MapButton because it renders `<Button noStyle>` with its own
@@ -37,6 +37,15 @@ export interface MapButtonProps extends Omit<ButtonProps, OmittedButtonProps> {
      * When provided, the button can toggle a dropdown menu.
      */
     dropdownItems?: MapDropdownItem[];
+    /**
+     * Renders the dropdown indicator arrow in the bottom-right corner without wiring up a dropdown.
+     * @default false
+     */
+    showDropdownIndicator?: boolean;
+    /**
+     * Size of the icon displayed on the button.
+     */
+    iconSize?: IconSize;
 }
 export declare const MapButton: import('react').ForwardRefExoticComponent<Omit<MapButtonProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
 export default MapButton;

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

@@ -1,45 +1,47 @@
-import { jsxs as l, Fragment as T, jsx as e } from "react/jsx-runtime";
+import { jsxs as l, Fragment as A, jsx as e } from "react/jsx-runtime";
 import b from "../../../../../external/classnames/index.es.js";
-import { forwardRef as z, useState as A } from "react";
-import { Icon as I } from "../../../../tedi/components/base/icon/icon.es.js";
-import { Spinner as O } from "../../../../tedi/components/loaders/spinner/spinner.es.js";
-import { Button as j } from "../../../../tedi/components/buttons/button/button.es.js";
+import { forwardRef as O, useState as j } from "react";
+import { Icon as k } from "../../../../tedi/components/base/icon/icon.es.js";
+import { Spinner as E } from "../../../../tedi/components/loaders/spinner/spinner.es.js";
+import { Button as L } from "../../../../tedi/components/buttons/button/button.es.js";
 import { MapDropdown as d } from "../map-dropdown/map-dropdown.es.js";
 import t from "./map-button.module.scss.es.js";
 import { Tooltip as m } from "../../../../tedi/components/overlays/tooltip/tooltip.es.js";
-const k = z((f, h) => {
+const F = O((h, g) => {
   const {
     size: o = "default",
-    icon: p,
-    selected: g = !1,
-    className: N,
+    icon: c,
+    selected: v = !1,
+    className: w,
     children: i,
-    hideLabel: c = !1,
+    hideLabel: p = !1,
     tooltipContent: u = i,
     dropdownItems: s,
-    isActive: v,
-    isHovered: C,
-    underline: w,
+    showDropdownIndicator: N = !1,
+    isActive: C,
+    isHovered: D,
+    underline: S,
     isLoading: r,
+    iconSize: f,
     ..._
-  } = f, [B, D] = A(!1), x = g || B, y = b(
+  } = h, [z, B] = j(!1), I = v || z, x = b(
     t["tedi-map-button"],
     t[`tedi-map-button--${o}`],
-    x && t["tedi-map-button--selected"],
-    s && t["tedi-map-button--dropdown"],
-    v && t["tedi-map-button--is-active"],
-    C && t["tedi-map-button--is-hovered"],
-    w && t["tedi-map-button--underline"],
+    I && t["tedi-map-button--selected"],
+    (s || N) && t["tedi-map-button--dropdown"],
+    C && t["tedi-map-button--is-active"],
+    D && t["tedi-map-button--is-hovered"],
+    S && t["tedi-map-button--underline"],
     r && t["tedi-map-button--loading"],
-    N
-  ), M = /* @__PURE__ */ l(T, { children: [
-    r ? /* @__PURE__ */ e(O, { size: o === "small" ? 16 : 18, className: t["tedi-map-button__icon"] }) : p && /* @__PURE__ */ e(I, { name: p, className: t["tedi-map-button__icon"], size: o === "small" ? 24 : 18 }),
-    c ? /* @__PURE__ */ e("span", { className: "sr-only", children: i }) : /* @__PURE__ */ e("div", { className: b(t["tedi-map-button__text"]), children: i })
-  ] }), a = /* @__PURE__ */ e(j, { noStyle: !0, isLoading: r, className: y, size: o, ..._, ref: h, children: M }), S = c && u ? /* @__PURE__ */ l(m, { placement: "right", children: [
+    w
+  ), y = () => f || (o === "small" ? 24 : 18), M = /* @__PURE__ */ l(A, { children: [
+    r ? /* @__PURE__ */ e(E, { size: o === "small" ? 16 : 18, className: t["tedi-map-button__icon"] }) : c && /* @__PURE__ */ e(k, { name: c, className: t["tedi-map-button__icon"], size: y() }),
+    p ? /* @__PURE__ */ e("span", { className: "sr-only", children: i }) : /* @__PURE__ */ e("div", { className: b(t["tedi-map-button__text"]), children: i })
+  ] }), a = /* @__PURE__ */ e(L, { noStyle: !0, isLoading: r, className: x, size: o, ..._, ref: g, children: M }), T = p && u ? /* @__PURE__ */ l(m, { placement: "right", children: [
     /* @__PURE__ */ e(m.Trigger, { children: a }),
     /* @__PURE__ */ e(m.Content, { children: u })
   ] }) : a;
-  return s ? /* @__PURE__ */ l(d, { onOpenChange: D, placement: "right-start", children: [
+  return s ? /* @__PURE__ */ l(d, { onOpenChange: B, placement: "right-start", children: [
     /* @__PURE__ */ e(d.Trigger, { children: a }),
     /* @__PURE__ */ e(
       d.Content,
@@ -52,10 +54,10 @@ const k = z((f, h) => {
         }))
       }
     )
-  ] }) : S;
+  ] }) : T;
 });
-k.displayName = "MapButton";
+F.displayName = "MapButton";
 export {
-  k as MapButton,
-  k as default
+  F as MapButton,
+  F as default
 };

package/src/community/index.d.ts

@@ -29,6 +29,7 @@ export * from './components/placeholder/placeholder';
 export * from './components/vertical-stepper/vertical-stepper';
 export * from './components/vertical-stepper/step-item/step-item';
 export * from './components/vertical-stepper/sub-item/sub-item';
+export * from './components/dock-panel/dock-panel';
 export * from './helpers';
 export * from './providers/style-provider/style-provider';
 export * from './types/index';