@tedi-design-system/react 18.1.0-rc.6 → 18.1.0-rc.7

package/package.json

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

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 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;
+"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;

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

@@ -1,5 +1,6 @@
 import { JSX } from 'react';
 export type BaseMapOptionType = 'button' | 'historical' | 'selection';
+export type BaseMapOptionTooltipType = 'info' | 'error';
 export interface BaseMapOptionProps {
     /**
      * The title displayed within the option.
@@ -43,6 +44,18 @@ export interface BaseMapOptionProps {
      * Applies disabled style.
      */
     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.
+     */
+    tooltipText?: string;
+    /**
+     * Visual style of the info icon shown when `tooltipText` is set.
+     * - `'info'`: neutral informational icon (default)
+     * - `'error'`: error/danger styled icon
+     * @default 'info'
+     */
+    tooltipType?: BaseMapOptionTooltipType;
 }
 export declare const BaseMapOption: {
     (props: BaseMapOptionProps): JSX.Element;

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

@@ -1,39 +1,75 @@
-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(
+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) => {
+  const {
+    title: r,
+    content: u,
+    selected: d,
+    onSelect: n,
+    type: c = "selection",
+    className: h,
+    id: y,
+    multiple: _,
+    disabled: o,
+    tooltipText: m,
+    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",
     {
       role: "button",
-      tabIndex: s ? -1 : 0,
-      "aria-pressed": !!i,
-      "aria-disabled": s || void 0,
-      onClick: b,
-      onKeyDown: u,
-      className: f,
-      id: p,
+      tabIndex: o ? -1 : 0,
+      "aria-pressed": !!d,
+      "aria-disabled": o || void 0,
+      onClick: g,
+      onKeyDown: v,
+      className: E,
+      id: y,
       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 })
+        /* @__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
       ]
     }
   );
 };
-N.displayName = "BaseMapOption";
+M.displayName = "BaseMapOption";
 export {
-  N as BaseMapOption,
-  N as default
+  M as BaseMapOption,
+  M as default
 };

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

@@ -54,6 +54,6 @@ export declare namespace BaseMapSelection {
     };
     var displayName: string;
 }
-export type { BaseMapOptionProps, BaseMapOptionType } from './base-map-option';
+export type { BaseMapOptionProps, BaseMapOptionTooltipType, BaseMapOptionType } from './base-map-option';
 export { BaseMapOption };
 export default 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__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;
+"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--disabled":"tedi-base-map-selection--disabled-a957b2c8","tedi-base-map-selection__content":"tedi-base-map-selection__content-3145448d","tedi-base-map-selection__info":"tedi-base-map-selection__info-a5674a2d","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--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,13 +1,14 @@
 const e = {
   "tedi-base-map-selection__wrapper": "tedi-base-map-selection__wrapper-aae7464f",
+  "tedi-base-map-selection--disabled": "tedi-base-map-selection--disabled-a957b2c8",
   "tedi-base-map-selection__content": "tedi-base-map-selection__content-3145448d",
+  "tedi-base-map-selection__info": "tedi-base-map-selection__info-a5674a2d",
   "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"