@tedi-design-system/react 18.1.0-rc.3 → 18.1.0-rc.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tedi-design-system/react",
-  "version": "18.1.0-rc.3",
+  "version": "18.1.0-rc.5",
   "type": "module",
   "sideEffects": false,
   "exports": {

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react/jsx-runtime"),v=require("../../../../../external/classnames/index.cjs.js"),e=require("./base-map-selection.module.scss.cjs.js"),l=o=>{const{title:r,content:c,selected:d,onSelect:t,type:n="selection",className:u,id:p,multiple:m,disabled:a}=o,b=()=>{a||t==null||t()},f=i=>{a||(i.key==="Enter"||i.key===" ")&&(i.preventDefault(),t==null||t())},_=v.default(e.default["tedi-base-map-selection__wrapper"],d&&e.default["tedi-base-map-selection--selected"],n&&e.default[`tedi-base-map-selection--${n}`],m&&e.default["tedi-base-map-selection--multiple"],a&&e.default["tedi-base-map-selection--disabled"],u);return s.jsxs("div",{role:"button",tabIndex:a?-1:0,"aria-pressed":!!d,"aria-disabled":a||void 0,onClick:b,onKeyDown:f,className:_,id:p,children:[s.jsx("div",{"aria-hidden":!0,className:e.default["tedi-base-map-selection__content"],children:c}),s.jsx("div",{className:e.default["tedi-base-map-selection__title"],children:r})]})};l.displayName="BaseMapOption";exports.BaseMapOption=l;exports.default=l;

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

@@ -0,0 +1,51 @@
+import { JSX } from 'react';
+export type BaseMapOptionType = 'button' | 'historical' | 'selection';
+export interface BaseMapOptionProps {
+    /**
+     * The title displayed within the option.
+     */
+    title: string;
+    /**
+     * The main content of the option, typically a thumbnail. Can be any valid React node.
+     */
+    content: React.ReactNode;
+    /**
+     * Indicates whether the option is currently selected.
+     * Used to apply specific visual styles.
+     */
+    selected?: boolean;
+    /**
+     * Callback triggered when the option is clicked
+     * or activated via keyboard (Enter or Space).
+     */
+    onSelect?: () => void;
+    /**
+     * The type of the option, which controls styling.
+     * - `'selection'`: thumbnail with the title rendered below (default)
+     * - `'button'`: square thumbnail with the title overlaid
+     * - `'historical'`: styled for historical context
+     * @default 'selection'
+     */
+    type?: BaseMapOptionType;
+    /**
+     * Optional custom class name to apply additional styles.
+     */
+    className?: string;
+    /**
+     * HTML `id` attribute to identify the element.
+     */
+    id: string;
+    /**
+     * When `true`, renders a "stacked" visual indicating multiple maps.
+     */
+    multiple?: boolean;
+    /**
+     * Applies disabled style.
+     */
+    disabled?: boolean;
+}
+export declare const BaseMapOption: {
+    (props: BaseMapOptionProps): JSX.Element;
+    displayName: string;
+};
+export default BaseMapOption;

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

@@ -0,0 +1,39 @@
+import { jsxs as y, jsx as l } from "react/jsx-runtime";
+import h from "../../../../../external/classnames/index.es.js";
+import e from "./base-map-selection.module.scss.es.js";
+const N = (d) => {
+  const { title: o, content: r, selected: i, onSelect: t, type: n = "selection", className: c, id: p, multiple: m, disabled: s } = d, b = () => {
+    s || t == null || t();
+  }, u = (a) => {
+    s || (a.key === "Enter" || a.key === " ") && (a.preventDefault(), t == null || t());
+  }, f = h(
+    e["tedi-base-map-selection__wrapper"],
+    i && e["tedi-base-map-selection--selected"],
+    n && e[`tedi-base-map-selection--${n}`],
+    m && e["tedi-base-map-selection--multiple"],
+    s && e["tedi-base-map-selection--disabled"],
+    c
+  );
+  return /* @__PURE__ */ y(
+    "div",
+    {
+      role: "button",
+      tabIndex: s ? -1 : 0,
+      "aria-pressed": !!i,
+      "aria-disabled": s || void 0,
+      onClick: b,
+      onKeyDown: u,
+      className: f,
+      id: p,
+      children: [
+        /* @__PURE__ */ l("div", { "aria-hidden": !0, className: e["tedi-base-map-selection__content"], children: r }),
+        /* @__PURE__ */ l("div", { className: e["tedi-base-map-selection__title"], children: o })
+      ]
+    }
+  );
+};
+N.displayName = "BaseMapOption";
+export {
+  N as BaseMapOption,
+  N 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 l=require("react/jsx-runtime"),b=require("../../../../../external/classnames/index.cjs.js"),e=require("./base-map-selection.module.scss.cjs.js"),f=n=>{const{title:i,content:c,selected:o,onSelect:t,type:s="button",className:d,id:u,multiple:r}=n,p=a=>{(a.key==="Enter"||a.key===" ")&&(a.preventDefault(),t==null||t())},m=b.default(e.default["tedi-base-map-selection__wrapper"],o&&e.default["tedi-base-map-selection--selected"],s&&e.default[`tedi-base-map-selection--${s}`],r&&e.default["tedi-base-map-selection--multiple"],d);return l.jsxs("div",{role:"button",tabIndex:0,onClick:t,onKeyDown:p,className:m,id:u,children:[l.jsx("div",{className:e.default["tedi-base-map-selection__content"],children:c}),l.jsx("div",{className:e.default["tedi-base-map-selection__title"],children:i})]})};exports.BaseMapSelection=f;
+"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;

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

@@ -1,44 +1,59 @@
 import { JSX } from 'react';
-type BaseMapSelectionType = 'button' | 'historical' | 'selection';
+import { default as BaseMapOption } from './base-map-option';
 export interface BaseMapSelectionProps {
     /**
-     * The title displayed within the component.
+     * Title of the trigger button and used as its accessible label.
      */
     title: string;
     /**
-     * The main content of the selection card. Can be any valid React node.
+     * Visual content (thumbnail) of the currently active base map, shown on the trigger button.
      */
     content: React.ReactNode;
     /**
-     * Indicates whether the current item is selected.
-     * Used to apply specific visual styles.
+     * Selectable base map options rendered inside the popover, typically `BaseMapSelection.Option` elements.
      */
-    selected?: boolean;
+    children: React.ReactNode;
     /**
-     * Callback function triggered when the selection is clicked
-     * or activated via keyboard (Enter or Space).
+     * Renders a "stacked" trigger, indicating that multiple base maps are available.
+     * @default false
      */
-    onSelect?: () => void;
+    multiple?: boolean;
     /**
-     * The type of the selection, which controls styling.
-     * - `'button'`: default interactive selection
-     * - `'historical'`: styled for historical context
-     * - `'selection'`: styled for multi-selection context
+     * When `true`, renders a transparency slider at the bottom of the popover.
+     * @default false
      */
-    type: BaseMapSelectionType;
+    showTransparency?: boolean;
     /**
-     * Optional custom class name to apply additional styles.
+     * Controlled transparency value (0-100). Use together with `onTransparencyChange`.
+     * Values outside the range are clamped. Omit for uncontrolled usage.
      */
-    className?: string;
+    transparency?: number;
     /**
-     * Optional HTML `id` attribute to identify the element.
+     * Initial transparency value (0-100) for uncontrolled usage. Ignored when `transparency` is provided.
+     * @default 0
      */
-    id?: string;
+    defaultTransparency?: number;
     /**
-     * When `true`, indicates that multiple selections are allowed.
-     * Affects the visual style.
+     * Callback fired when the transparency value changes. The reported value is always clamped to 0-100.
      */
-    multiple?: boolean;
+    onTransparencyChange?: (value: number) => void;
+    /**
+     * Label for the transparency slider.
+     */
+    transparencyLabel?: string;
+    /**
+     * HTML `id` attribute applied to the trigger button.
+     */
+    id: string;
+}
+export declare function BaseMapSelection(props: BaseMapSelectionProps): JSX.Element;
+export declare namespace BaseMapSelection {
+    var Option: {
+        (props: import("./base-map-option").BaseMapOptionProps): JSX.Element;
+        displayName: string;
+    };
+    var displayName: string;
 }
-export declare const BaseMapSelection: (props: BaseMapSelectionProps) => JSX.Element;
+export type { BaseMapOptionProps, BaseMapOptionType } from './base-map-option';
+export { BaseMapOption };
 export default BaseMapSelection;

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

@@ -1,21 +1,80 @@
-import { jsxs as u, jsx as a } from "react/jsx-runtime";
-import y from "../../../../../external/classnames/index.es.js";
-import e from "./base-map-selection.module.scss.es.js";
-const h = (n) => {
-  const { title: l, content: o, selected: c, onSelect: t, type: i = "button", className: m, id: p, multiple: d } = n, r = (s) => {
-    (s.key === "Enter" || s.key === " ") && (s.preventDefault(), t == null || t());
-  }, b = y(
-    e["tedi-base-map-selection__wrapper"],
-    c && e["tedi-base-map-selection--selected"],
-    i && e[`tedi-base-map-selection--${i}`],
-    d && e["tedi-base-map-selection--multiple"],
-    m
+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);
+  return Number.isNaN(n) ? 0 : Math.min(100, Math.max(0, n));
+};
+function f(r) {
+  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__ */ u("div", { role: "button", tabIndex: 0, onClick: t, onKeyDown: r, className: b, id: p, children: [
-    /* @__PURE__ */ a("div", { className: e["tedi-base-map-selection__content"], children: o }),
-    /* @__PURE__ */ a("div", { className: e["tedi-base-map-selection__title"], children: l })
+  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,
+        {
+          label: s,
+          "aria-label": s || "Transparency",
+          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,
+              {
+                type: "number",
+                id: `${o}-transparency`,
+                value: String(d),
+                onChange: u
+              }
+            ) }),
+            /* @__PURE__ */ e($, { children: "%" })
+          ] }) })
+        }
+      ) })
+    ] })
   ] });
-};
+}
+f.Option = I;
+f.displayName = "BaseMapSelection";
 export {
-  h as BaseMapSelection
+  I as BaseMapOption,
+  f as BaseMapSelection
 };

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

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-base-map-selection__wrapper":"tedi-base-map-selection__wrapper-aae7464f","tedi-base-map-selection__content":"tedi-base-map-selection__content-3145448d","tedi-base-map-selection--historical":"tedi-base-map-selection--historical-159d3def","tedi-base-map-selection__title":"tedi-base-map-selection__title-d46b74ec","tedi-map-selection__title":"tedi-map-selection__title-20651d60","tedi-base-map-selection--selected":"tedi-base-map-selection--selected-914a0483","tedi-base-map-selection--button":"tedi-base-map-selection--button-0e9e36f4","tedi-base-map-selection--selection":"tedi-base-map-selection--selection-910cae90","tedi-base-map-selection--multiple":"tedi-base-map-selection--multiple-58cb365c"};exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-base-map-selection__wrapper":"tedi-base-map-selection__wrapper-aae7464f","tedi-base-map-selection__content":"tedi-base-map-selection__content-3145448d","tedi-base-map-selection__options":"tedi-base-map-selection__options-dce549ce","tedi-base-map-selection__transparency":"tedi-base-map-selection__transparency-d4be551d","tedi-base-map-selection__transparency-field":"tedi-base-map-selection__transparency-field-d8b5a065","tedi-base-map-selection--historical":"tedi-base-map-selection--historical-159d3def","tedi-base-map-selection__title":"tedi-base-map-selection__title-d46b74ec","tedi-base-map-selection--selected":"tedi-base-map-selection--selected-914a0483","tedi-base-map-selection--disabled":"tedi-base-map-selection--disabled-a957b2c8","tedi-base-map-selection--button":"tedi-base-map-selection--button-0e9e36f4","tedi-base-map-selection--selection":"tedi-base-map-selection--selection-910cae90","tedi-base-map-selection--multiple":"tedi-base-map-selection--multiple-58cb365c"};exports.default=e;

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

@@ -1,10 +1,13 @@
 const e = {
   "tedi-base-map-selection__wrapper": "tedi-base-map-selection__wrapper-aae7464f",
   "tedi-base-map-selection__content": "tedi-base-map-selection__content-3145448d",
+  "tedi-base-map-selection__options": "tedi-base-map-selection__options-dce549ce",
+  "tedi-base-map-selection__transparency": "tedi-base-map-selection__transparency-d4be551d",
+  "tedi-base-map-selection__transparency-field": "tedi-base-map-selection__transparency-field-d8b5a065",
   "tedi-base-map-selection--historical": "tedi-base-map-selection--historical-159d3def",
   "tedi-base-map-selection__title": "tedi-base-map-selection__title-d46b74ec",
-  "tedi-map-selection__title": "tedi-map-selection__title-20651d60",
   "tedi-base-map-selection--selected": "tedi-base-map-selection--selected-914a0483",
+  "tedi-base-map-selection--disabled": "tedi-base-map-selection--disabled-a957b2c8",
   "tedi-base-map-selection--button": "tedi-base-map-selection--button-0e9e36f4",
   "tedi-base-map-selection--selection": "tedi-base-map-selection--selection-910cae90",
   "tedi-base-map-selection--multiple": "tedi-base-map-selection--multiple-58cb365c"