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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tedi-design-system/react",
-  "version": "19.1.0-rc.14",
+  "version": "19.1.0-rc.15",
   "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/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
 };