@tedi-design-system/react 18.0.0-rc.5 → 18.0.0-rc.6

package/package.json

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

package/src/tedi/components/content/calendar/calendar.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),O=require("../../../../../external/classnames/index.cjs.js"),d=require("./calendar.module.scss.cjs.js"),w=require("./components/calendar-header/calendar-header.cjs.js"),C=require("./components/calendar-month-grid/calendar-month-grid.cjs.js"),E=require("./components/calendar-year-grid/calendar-year-grid.cjs.js"),F=require("../../../../../external/react-day-picker/dist/esm/DayPicker.cjs.js"),H=require("../../../../../external/react-day-picker/dist/esm/locale/et.cjs.js"),A=({view:s="days",selectionLevel:m="days",currentMonth:c,setCurrentMonth:i,setView:l=()=>"days",mode:S="single",value:a,locale:j=H.et,localeCode:g="et-EE",showOutsideDays:q=!0,disabledMatchers:x,required:b,availableDays:t,unavailableDays:n,footer:k,monthYearSelectType:G,handleSelect:Y,applyValue:y,showNavigation:_=!0,className:u,...P})=>{const h=e=>t?Array.isArray(t)?t.some(f=>f.toDateString()===e.toDateString()):t(e):!0,p=e=>n?Array.isArray(n)?n.some(f=>f.toDateString()===e.toDateString()):n(e):!1,o=[...x??[],...t?[e=>!h(e)]:[],...n?[e=>p(e)]:[]],N=(()=>{switch(S){case"multiple":return{mode:"multiple",selected:Array.isArray(a)?a:void 0};case"range":return{mode:"range",selected:a&&!Array.isArray(a)&&!(a instanceof Date)?a:void 0};default:return{mode:"single",selected:a instanceof Date?a:void 0}}})();return r.jsxs("div",{className:d.default["tedi-calendar__wrapper"],children:[s==="years"&&r.jsx(E.YearGrid,{currentMonth:c,onNavigate:i,showNavigation:_,onSelectYear:e=>{i(e),m==="years"?y(new Date(e.getFullYear(),0,1)):l("months")},className:u}),s==="months"&&r.jsx(C.MonthGrid,{currentMonth:c,onNavigate:i,showNavigation:_,localeCode:g,onSelectMonth:e=>{i(e),m==="months"?y(e):l("days")},className:u}),s==="days"&&r.jsx(F.DayPicker,{...P,...N,locale:j,month:c,onMonthChange:i,showOutsideDays:q,disabled:o.length?o:void 0,required:b,components:{MonthCaption:e=>r.jsx(w.CalendarHeader,{...e,monthYearSelectType:G,onOpenMonthGrid:()=>l("months"),onOpenYearGrid:()=>l("years"),showNavigation:_,localeCode:g,disabledMatchers:o.length?o:void 0}),Nav:()=>r.jsx(r.Fragment,{})},footer:k,classNames:{root:O.default(d.default["tedi-calendar"],u),month_caption:d.default["tedi-calendar__caption"],head:d.default["tedi-calendar__head"],row:d.default["tedi-calendar__row"],day:d.default["tedi-calendar__day"],selected:d.default["tedi-calendar__day--selected"],weekday:d.default["tedi-calendar__weekday"],outside:d.default["tedi-calendar__outside-days"],range_start:d.default["tedi-calendar__range-start"],range_middle:d.default["tedi-calendar__range-middle"],range_end:d.default["tedi-calendar__range-end"],today:d.default["tedi-calendar__today"],disabled:d.default["tedi-calendar__disabled"],month:d.default["tedi-calendar__month"],months:d.default["tedi-calendar__months-container"],footer:d.default["tedi-calendar__footer"],week_number:d.default["tedi-calendar__week-number"]},modifiers:{available:e=>t?h(e):!1,unavailable:e=>n?p(e):!1},modifiersClassNames:{available:d.default["tedi-calendar__available-day"],unavailable:d.default["tedi-calendar__unavailable-day"]},onSelect:Y})]})};A.displayName="Calendar";exports.Calendar=A;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),S=require("../../../../../external/classnames/index.cjs.js"),a=require("./calendar.module.scss.cjs.js"),F=require("./components/calendar-header/calendar-header.cjs.js"),H=require("./components/calendar-month-grid/calendar-month-grid.cjs.js"),M=require("./components/calendar-year-grid/calendar-year-grid.cjs.js"),R=require("../../../../../external/react-day-picker/dist/esm/DayPicker.cjs.js"),T=require("../../../../../external/react-day-picker/dist/esm/locale/et.cjs.js"),j=({view:o="days",selectionLevel:f="days",currentMonth:c,setCurrentMonth:i,setView:l=()=>"days",mode:q="single",value:d,locale:x=T.et,localeCode:m="et-EE",showOutsideDays:N=!0,disabledMatchers:k,required:G,availableDays:t,unavailableDays:n,footer:Y,monthYearSelectType:C,handleSelect:P,applyValue:g,showNavigation:_=!0,className:y,bordered:O=!0,...w})=>{const h=O?void 0:a.default["tedi-calendar--borderless"],p=S.default(h,y),b=e=>t?Array.isArray(t)?t.some(u=>u.toDateString()===e.toDateString()):t(e):!0,A=e=>n?Array.isArray(n)?n.some(u=>u.toDateString()===e.toDateString()):n(e):!1,s=[...k??[],...t?[e=>!b(e)]:[],...n?[e=>A(e)]:[]],E=(()=>{switch(q){case"multiple":return{mode:"multiple",selected:Array.isArray(d)?d:void 0};case"range":return{mode:"range",selected:d&&!Array.isArray(d)&&!(d instanceof Date)?d:void 0};default:return{mode:"single",selected:d instanceof Date?d:void 0}}})();return r.jsxs("div",{className:a.default["tedi-calendar__wrapper"],children:[o==="years"&&r.jsx(M.YearGrid,{currentMonth:c,onNavigate:i,showNavigation:_,onSelectYear:e=>{i(e),f==="years"?g(new Date(e.getFullYear(),0,1)):l("months")},className:p}),o==="months"&&r.jsx(H.MonthGrid,{currentMonth:c,onNavigate:i,showNavigation:_,localeCode:m,onSelectMonth:e=>{i(e),f==="months"?g(e):l("days")},className:p}),o==="days"&&r.jsx(R.DayPicker,{...w,...E,locale:x,month:c,onMonthChange:i,showOutsideDays:N,disabled:s.length?s:void 0,required:G,components:{MonthCaption:e=>r.jsx(F.CalendarHeader,{...e,monthYearSelectType:C,onOpenMonthGrid:()=>l("months"),onOpenYearGrid:()=>l("years"),showNavigation:_,localeCode:m,disabledMatchers:s.length?s:void 0}),Nav:()=>r.jsx(r.Fragment,{})},footer:Y,classNames:{root:S.default(a.default["tedi-calendar"],h,y),month_caption:a.default["tedi-calendar__caption"],head:a.default["tedi-calendar__head"],row:a.default["tedi-calendar__row"],day:a.default["tedi-calendar__day"],selected:a.default["tedi-calendar__day--selected"],weekday:a.default["tedi-calendar__weekday"],outside:a.default["tedi-calendar__outside-days"],range_start:a.default["tedi-calendar__range-start"],range_middle:a.default["tedi-calendar__range-middle"],range_end:a.default["tedi-calendar__range-end"],today:a.default["tedi-calendar__today"],disabled:a.default["tedi-calendar__disabled"],month:a.default["tedi-calendar__month"],months:a.default["tedi-calendar__months-container"],footer:a.default["tedi-calendar__footer"],week_number:a.default["tedi-calendar__week-number"]},modifiers:{available:e=>t?b(e):!1,unavailable:e=>n?A(e):!1},modifiersClassNames:{available:a.default["tedi-calendar__available-day"],unavailable:a.default["tedi-calendar__unavailable-day"]},onSelect:P})]})};j.displayName="Calendar";exports.Calendar=j;

package/src/tedi/components/content/calendar/calendar.d.ts

@@ -107,8 +107,16 @@ export interface CalendarProps extends Omit<DayPickerProps, 'mode' | 'selected'
      * Optional additional CSS class for the calendar container.
      */
     className?: string;
+    /**
+     * Whether to render the surrounding card (border, background, radius).
+     * Set to `false` when embedding inside a parent that already provides
+     * its own surface — e.g. alongside a calendar inside `DateTimeField`.
+     * The inner gradient masks and column separators are preserved either way.
+     * @default true
+     */
+    bordered?: boolean;
 }
 export declare const Calendar: {
-    ({ view, selectionLevel, currentMonth, setCurrentMonth, setView, mode, value, locale, localeCode, showOutsideDays, disabledMatchers, required, availableDays, unavailableDays, footer, monthYearSelectType, handleSelect, applyValue, showNavigation, className, ...dayPickerProps }: CalendarProps): import("react/jsx-runtime").JSX.Element;
+    ({ view, selectionLevel, currentMonth, setCurrentMonth, setView, mode, value, locale, localeCode, showOutsideDays, disabledMatchers, required, availableDays, unavailableDays, footer, monthYearSelectType, handleSelect, applyValue, showNavigation, className, bordered, ...dayPickerProps }: CalendarProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/src/tedi/components/content/calendar/calendar.es.js

@@ -1,106 +1,107 @@
-import { jsxs as E, jsx as i, Fragment as F } from "react/jsx-runtime";
-import O from "../../../../../external/classnames/index.es.js";
+import { jsxs as P, jsx as o, Fragment as H } from "react/jsx-runtime";
+import u from "../../../../../external/classnames/index.es.js";
 import r from "./calendar.module.scss.es.js";
-import { CalendarHeader as P } from "./components/calendar-header/calendar-header.es.js";
-import { MonthGrid as C } from "./components/calendar-month-grid/calendar-month-grid.es.js";
-import { YearGrid as H } from "./components/calendar-year-grid/calendar-year-grid.es.js";
-import { DayPicker as U } from "../../../../../external/react-day-picker/dist/esm/DayPicker.es.js";
-import { et as q } from "../../../../../external/react-day-picker/dist/esm/locale/et.es.js";
-const z = ({
-  view: m = "days",
-  selectionLevel: p = "days",
-  currentMonth: c,
+import { CalendarHeader as U } from "./components/calendar-header/calendar-header.es.js";
+import { MonthGrid as q } from "./components/calendar-month-grid/calendar-month-grid.es.js";
+import { YearGrid as z } from "./components/calendar-year-grid/calendar-year-grid.es.js";
+import { DayPicker as B } from "../../../../../external/react-day-picker/dist/esm/DayPicker.es.js";
+import { et as I } from "../../../../../external/react-day-picker/dist/esm/locale/et.es.js";
+const J = ({
+  view: c = "days",
+  selectionLevel: f = "days",
+  currentMonth: l,
   setCurrentMonth: n,
-  setView: o = () => "days",
+  setView: i = () => "days",
   mode: S = "single",
-  value: d,
-  locale: u = q,
-  localeCode: g = "et-EE",
-  showOutsideDays: b = !0,
-  disabledMatchers: k,
-  required: G,
-  availableDays: a,
+  value: a,
+  locale: k = I,
+  localeCode: p = "et-EE",
+  showOutsideDays: G = !0,
+  disabledMatchers: Y,
+  required: x,
+  availableDays: d,
   unavailableDays: t,
-  footer: N,
-  monthYearSelectType: Y,
-  handleSelect: x,
-  applyValue: y,
-  showNavigation: l = !0,
-  className: _,
-  ...j
+  footer: C,
+  monthYearSelectType: j,
+  handleSelect: w,
+  applyValue: g,
+  showNavigation: m = !0,
+  className: y,
+  bordered: E = !0,
+  ...F
 }) => {
-  const h = (e) => a ? Array.isArray(a) ? a.some((f) => f.toDateString() === e.toDateString()) : a(e) : !0, A = (e) => t ? Array.isArray(t) ? t.some((f) => f.toDateString() === e.toDateString()) : t(e) : !1, s = [
-    ...k ?? [],
-    ...a ? [(e) => !h(e)] : [],
-    ...t ? [(e) => A(e)] : []
-  ], w = (() => {
+  const h = E ? void 0 : r["tedi-calendar--borderless"], A = u(h, y), N = (e) => d ? Array.isArray(d) ? d.some((_) => _.toDateString() === e.toDateString()) : d(e) : !0, b = (e) => t ? Array.isArray(t) ? t.some((_) => _.toDateString() === e.toDateString()) : t(e) : !1, s = [
+    ...Y ?? [],
+    ...d ? [(e) => !N(e)] : [],
+    ...t ? [(e) => b(e)] : []
+  ], O = (() => {
     switch (S) {
       case "multiple":
-        return { mode: "multiple", selected: Array.isArray(d) ? d : void 0 };
+        return { mode: "multiple", selected: Array.isArray(a) ? a : void 0 };
       case "range":
         return {
           mode: "range",
-          selected: d && !Array.isArray(d) && !(d instanceof Date) ? d : void 0
+          selected: a && !Array.isArray(a) && !(a instanceof Date) ? a : void 0
         };
       default:
-        return { mode: "single", selected: d instanceof Date ? d : void 0 };
+        return { mode: "single", selected: a instanceof Date ? a : void 0 };
     }
   })();
-  return /* @__PURE__ */ E("div", { className: r["tedi-calendar__wrapper"], children: [
-    m === "years" && /* @__PURE__ */ i(
-      H,
+  return /* @__PURE__ */ P("div", { className: r["tedi-calendar__wrapper"], children: [
+    c === "years" && /* @__PURE__ */ o(
+      z,
       {
-        currentMonth: c,
+        currentMonth: l,
         onNavigate: n,
-        showNavigation: l,
+        showNavigation: m,
         onSelectYear: (e) => {
-          n(e), p === "years" ? y(new Date(e.getFullYear(), 0, 1)) : o("months");
+          n(e), f === "years" ? g(new Date(e.getFullYear(), 0, 1)) : i("months");
         },
-        className: _
+        className: A
       }
     ),
-    m === "months" && /* @__PURE__ */ i(
-      C,
+    c === "months" && /* @__PURE__ */ o(
+      q,
       {
-        currentMonth: c,
+        currentMonth: l,
         onNavigate: n,
-        showNavigation: l,
-        localeCode: g,
+        showNavigation: m,
+        localeCode: p,
         onSelectMonth: (e) => {
-          n(e), p === "months" ? y(e) : o("days");
+          n(e), f === "months" ? g(e) : i("days");
         },
-        className: _
+        className: A
       }
     ),
-    m === "days" && /* @__PURE__ */ i(
-      U,
+    c === "days" && /* @__PURE__ */ o(
+      B,
       {
-        ...j,
-        ...w,
-        locale: u,
-        month: c,
+        ...F,
+        ...O,
+        locale: k,
+        month: l,
         onMonthChange: n,
-        showOutsideDays: b,
+        showOutsideDays: G,
         disabled: s.length ? s : void 0,
-        required: G,
+        required: x,
         components: {
-          MonthCaption: (e) => /* @__PURE__ */ i(
-            P,
+          MonthCaption: (e) => /* @__PURE__ */ o(
+            U,
             {
               ...e,
-              monthYearSelectType: Y,
-              onOpenMonthGrid: () => o("months"),
-              onOpenYearGrid: () => o("years"),
-              showNavigation: l,
-              localeCode: g,
+              monthYearSelectType: j,
+              onOpenMonthGrid: () => i("months"),
+              onOpenYearGrid: () => i("years"),
+              showNavigation: m,
+              localeCode: p,
               disabledMatchers: s.length ? s : void 0
             }
           ),
-          Nav: () => /* @__PURE__ */ i(F, {})
+          Nav: () => /* @__PURE__ */ o(H, {})
         },
-        footer: N,
+        footer: C,
         classNames: {
-          root: O(r["tedi-calendar"], _),
+          root: u(r["tedi-calendar"], h, y),
           month_caption: r["tedi-calendar__caption"],
           head: r["tedi-calendar__head"],
           row: r["tedi-calendar__row"],
@@ -119,19 +120,19 @@ const z = ({
           week_number: r["tedi-calendar__week-number"]
         },
         modifiers: {
-          available: (e) => a ? h(e) : !1,
-          unavailable: (e) => t ? A(e) : !1
+          available: (e) => d ? N(e) : !1,
+          unavailable: (e) => t ? b(e) : !1
         },
         modifiersClassNames: {
           available: r["tedi-calendar__available-day"],
           unavailable: r["tedi-calendar__unavailable-day"]
         },
-        onSelect: x
+        onSelect: w
       }
     )
   ] });
 };
-z.displayName = "Calendar";
+J.displayName = "Calendar";
 export {
-  z as Calendar
+  J as Calendar
 };

package/src/tedi/components/content/calendar/calendar.module.scss.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-calendar__picker-grid-container":"tedi-calendar__picker-grid-container-1b2bfc55","tedi-calendar__week-number":"tedi-calendar__week-number-c1a67f28","tedi-calendar__day":"tedi-calendar__day-baa13412","tedi-calendar__weekday":"tedi-calendar__weekday-9dce46ba","tedi-calendar":"tedi-calendar-a8c2a0a4","tedi-calendar__months-container":"tedi-calendar__months-container-793f3f7b","tedi-calendar__month":"tedi-calendar__month-b0e4d350","tedi-calendar__footer":"tedi-calendar__footer-bb297fb5","tedi-calendar__head":"tedi-calendar__head-bbd962e1","tedi-calendar__disabled":"tedi-calendar__disabled-30620859","tedi-calendar__day--selected":"tedi-calendar__day--selected-9f3dc090","tedi-calendar__today":"tedi-calendar__today-fa050850","tedi-calendar__available-day":"tedi-calendar__available-day-a0b09cf3","tedi-calendar__unavailable-day":"tedi-calendar__unavailable-day-05d8742d","tedi-calendar__range-middle":"tedi-calendar__range-middle-fa3459d1","tedi-calendar__range-start":"tedi-calendar__range-start-aaf20ea3","tedi-calendar__range-end":"tedi-calendar__range-end-097f2a3b","tedi-calendar__outside-days":"tedi-calendar__outside-days-703857de","tedi-calendar__picker-grid":"tedi-calendar__picker-grid-9b167adf","tedi-calendar__picker-grid-header":"tedi-calendar__picker-grid-header-30f8748f","tedi-calendar__picker--no-navigation":"tedi-calendar__picker--no-navigation-695a34ca","tedi-calendar__grid-button":"tedi-calendar__grid-button-889a2a85","tedi-calendar__grid-button--selected":"tedi-calendar__grid-button--selected-2019301b"};exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-calendar__picker-grid-container":"tedi-calendar__picker-grid-container-1b2bfc55","tedi-calendar__week-number":"tedi-calendar__week-number-c1a67f28","tedi-calendar__day":"tedi-calendar__day-baa13412","tedi-calendar__weekday":"tedi-calendar__weekday-9dce46ba","tedi-calendar":"tedi-calendar-a8c2a0a4","tedi-calendar--borderless":"tedi-calendar--borderless-22d5d627","tedi-calendar__months-container":"tedi-calendar__months-container-793f3f7b","tedi-calendar__month":"tedi-calendar__month-b0e4d350","tedi-calendar__footer":"tedi-calendar__footer-bb297fb5","tedi-calendar__head":"tedi-calendar__head-bbd962e1","tedi-calendar__disabled":"tedi-calendar__disabled-30620859","tedi-calendar__day--selected":"tedi-calendar__day--selected-9f3dc090","tedi-calendar__today":"tedi-calendar__today-fa050850","tedi-calendar__available-day":"tedi-calendar__available-day-a0b09cf3","tedi-calendar__unavailable-day":"tedi-calendar__unavailable-day-05d8742d","tedi-calendar__range-middle":"tedi-calendar__range-middle-fa3459d1","tedi-calendar__range-start":"tedi-calendar__range-start-aaf20ea3","tedi-calendar__range-end":"tedi-calendar__range-end-097f2a3b","tedi-calendar__outside-days":"tedi-calendar__outside-days-703857de","tedi-calendar__picker-grid":"tedi-calendar__picker-grid-9b167adf","tedi-calendar__picker-grid-header":"tedi-calendar__picker-grid-header-30f8748f","tedi-calendar__picker--no-navigation":"tedi-calendar__picker--no-navigation-695a34ca","tedi-calendar__grid-button":"tedi-calendar__grid-button-889a2a85","tedi-calendar__grid-button--selected":"tedi-calendar__grid-button--selected-2019301b"};exports.default=e;

package/src/tedi/components/content/calendar/calendar.module.scss.es.js

@@ -1,9 +1,10 @@
-const a = {
+const e = {
   "tedi-calendar__picker-grid-container": "tedi-calendar__picker-grid-container-1b2bfc55",
   "tedi-calendar__week-number": "tedi-calendar__week-number-c1a67f28",
   "tedi-calendar__day": "tedi-calendar__day-baa13412",
   "tedi-calendar__weekday": "tedi-calendar__weekday-9dce46ba",
   "tedi-calendar": "tedi-calendar-a8c2a0a4",
+  "tedi-calendar--borderless": "tedi-calendar--borderless-22d5d627",
   "tedi-calendar__months-container": "tedi-calendar__months-container-793f3f7b",
   "tedi-calendar__month": "tedi-calendar__month-b0e4d350",
   "tedi-calendar__footer": "tedi-calendar__footer-bb297fb5",
@@ -24,5 +25,5 @@ const a = {
   "tedi-calendar__grid-button--selected": "tedi-calendar__grid-button--selected-2019301b"
 };
 export {
-  a as default
+  e as default
 };

package/src/tedi/components/filter/filter/filter-group-context.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react"),e=t.createContext(null);exports.FilterGroupContext=e;

package/src/tedi/components/filter/filter/filter-group-context.d.ts

@@ -0,0 +1,8 @@
+export interface FilterGroupContextValue {
+    isManaged: boolean;
+    multiselect: boolean;
+    disabled: boolean;
+    isSelected: (value: string) => boolean;
+    selectFilter: (value: string) => void;
+}
+export declare const FilterGroupContext: import('react').Context<FilterGroupContextValue | null>;

package/src/tedi/components/filter/filter/filter-group-context.es.js

@@ -0,0 +1,5 @@
+import { createContext as t } from "react";
+const e = t(null);
+export {
+  e as FilterGroupContext
+};

package/src/tedi/components/filter/filter/filter-group.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const y=require("react/jsx-runtime"),N=require("../../../../../external/classnames/index.cjs.js"),a=require("react"),P=require("./filter.module.scss.cjs.js"),C=require("./filter-group-context.cjs.js"),G=new Set,F=S=>{const{label:d,ariaLabelledBy:p,disabled:v=!1,className:g,children:q,multiselect:t=!1,value:l,defaultValue:f,onValueChange:o,values:s,defaultValues:x,onValuesChange:n}=S,u=l!==void 0||f!==void 0||o!==void 0||s!==void 0||x!==void 0||n!==void 0||!!d||t,[h,j]=a.useState(f??null),[w,k]=a.useState(x??[]),c=l!==void 0?l:h,r=s!==void 0?s:w,m=a.useCallback(e=>{if(t){const i=r.includes(e)?r.filter(M=>M!==e):[...r,e];s===void 0&&k(i),n==null||n(i)}else{const i=c===e?null:e;l===void 0&&j(i),o==null||o(i)}},[t,r,c,s,l,n,o]),V=a.useCallback(e=>t?r.includes(e):c===e,[t,r,c]),B=a.useMemo(()=>({isManaged:u,multiselect:t,disabled:v,isSelected:V,selectFilter:m}),[u,t,v,V,m]),b=u?t?"group":"radiogroup":void 0;if(u&&!d&&!p){const e=b+"|"+(l??f??"")+"|"+t;G.has(e)||(G.add(e),console.warn(`[FilterGroup] role="${b}" needs an accessible name. Pass either \`label\` or \`ariaLabelledBy\` so screen readers can announce the group with context.`))}return y.jsx(C.FilterGroupContext.Provider,{value:B,children:y.jsx("div",{className:N.default(P.default["tedi-filter-group"],g),role:b,"aria-label":d,"aria-labelledby":p,children:q})})};F.displayName="FilterGroup";exports.FilterGroup=F;

package/src/tedi/components/filter/filter/filter-group.d.ts

@@ -0,0 +1,94 @@
+import { default as React } from 'react';
+interface FilterGroupCommonProps {
+    /**
+     * Accessible label for the group, exposed as `aria-label` on the container.
+     *
+     * **Required when the group is managed** (single- or multi-select). The container then
+     * has `role="radiogroup"` / `role="group"`, and ARIA requires every role to carry an
+     * accessible name — otherwise screen readers announce e.g. "radio group" with no context.
+     * Use `ariaLabelledBy` instead if the name lives in an existing heading.
+     *
+     * Setting `label` also implicitly turns the group into managed mode.
+     */
+    label?: string;
+    /**
+     * ID of an existing element that labels the group (alternative to `label`). Useful when
+     * the group is preceded by a heading that should also act as the accessible name —
+     * avoids duplicating the text. Sets `aria-labelledby` on the container.
+     */
+    ariaLabelledBy?: string;
+    /**
+     * When `true`, every `<Filter>` inside the group is disabled, regardless of their own
+     * `disabled` props. Useful for "this section isn't applicable yet" UX.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Extra class name appended to the group container `<div>`. Use this for spacing/layout;
+     * the per-filter radius and border-collapsing already comes from the group's own styles.
+     */
+    className?: string;
+    /**
+     * `<Filter>` children that participate in the group. Non-`<Filter>` nodes are rendered
+     * verbatim but do not contribute to the managed selection state.
+     */
+    children: React.ReactNode;
+}
+interface FilterGroupSingleProps extends FilterGroupCommonProps {
+    /**
+     * When `false` or omitted, the group enforces single-select (radio-like) semantics —
+     * picking a child deselects the others; re-clicking the active one toggles it to `null`.
+     *
+     * @default false
+     */
+    multiselect?: false;
+    /**
+     * **Controlled** selected value. The string identifier matches the `value` prop on the
+     * `<Filter>` child you want highlighted, or `null` for "nothing selected".
+     *
+     * Pair with `onValueChange` to fully own the state.
+     */
+    value?: string | null;
+    /**
+     * **Uncontrolled** initial selected value. Ignored once `value` is provided.
+     */
+    defaultValue?: string | null;
+    /**
+     * Fires whenever the selected value changes — when a child is clicked, or when the
+     * currently-active child is re-clicked to toggle it back to `null`.
+     */
+    onValueChange?: (value: string | null) => void;
+    values?: never;
+    defaultValues?: never;
+    onValuesChange?: never;
+}
+interface FilterGroupMultiProps extends FilterGroupCommonProps {
+    /**
+     * Set to `true` to switch the group into multi-select (toggle-group) semantics — multiple
+     * children can be active at once and `aria-pressed` is used in place of `aria-checked`.
+     */
+    multiselect: true;
+    /**
+     * **Controlled** selected values array. Each entry should match the `value` prop of one
+     * `<Filter>` child. Order is preserved as the user toggles entries.
+     */
+    values?: string[];
+    /**
+     * **Uncontrolled** initial selected values array. Ignored once `values` is provided.
+     */
+    defaultValues?: string[];
+    /**
+     * Fires whenever the selected values array changes (any child toggled on or off).
+     */
+    onValuesChange?: (values: string[]) => void;
+    value?: never;
+    defaultValue?: never;
+    onValueChange?: never;
+}
+export type FilterGroupProps = FilterGroupSingleProps | FilterGroupMultiProps;
+export declare const FilterGroup: {
+    (props: FilterGroupProps): JSX.Element;
+    displayName: string;
+};
+export {};

package/src/tedi/components/filter/filter/filter-group.es.js

@@ -0,0 +1,64 @@
+import { jsx as y } from "react/jsx-runtime";
+import L from "../../../../../external/classnames/index.es.js";
+import n from "react";
+import M from "./filter.module.scss.es.js";
+import { FilterGroupContext as P } from "./filter-group-context.es.js";
+const F = /* @__PURE__ */ new Set(), _ = (G) => {
+  const {
+    label: d,
+    ariaLabelledBy: p,
+    disabled: b = !1,
+    className: h,
+    children: w,
+    multiselect: l = !1,
+    value: o,
+    defaultValue: f,
+    onValueChange: r,
+    values: s,
+    defaultValues: v,
+    onValuesChange: a
+  } = G, c = o !== void 0 || f !== void 0 || r !== void 0 || s !== void 0 || v !== void 0 || a !== void 0 || !!d || l, [N, S] = n.useState(f ?? null), [g, k] = n.useState(v ?? []), u = o !== void 0 ? o : N, t = s !== void 0 ? s : g, V = n.useCallback(
+    (e) => {
+      if (l) {
+        const i = t.includes(e) ? t.filter((I) => I !== e) : [...t, e];
+        s === void 0 && k(i), a == null || a(i);
+      } else {
+        const i = u === e ? null : e;
+        o === void 0 && S(i), r == null || r(i);
+      }
+    },
+    [l, t, u, s, o, a, r]
+  ), x = n.useCallback(
+    (e) => l ? t.includes(e) : u === e,
+    [l, t, u]
+  ), B = n.useMemo(
+    () => ({
+      isManaged: c,
+      multiselect: l,
+      disabled: b,
+      isSelected: x,
+      selectFilter: V
+    }),
+    [c, l, b, x, V]
+  ), m = c ? l ? "group" : "radiogroup" : void 0;
+  if (c && !d && !p) {
+    const e = m + "|" + (o ?? f ?? "") + "|" + l;
+    F.has(e) || (F.add(e), console.warn(
+      `[FilterGroup] role="${m}" needs an accessible name. Pass either \`label\` or \`ariaLabelledBy\` so screen readers can announce the group with context.`
+    ));
+  }
+  return /* @__PURE__ */ y(P.Provider, { value: B, children: /* @__PURE__ */ y(
+    "div",
+    {
+      className: L(M["tedi-filter-group"], h),
+      role: m,
+      "aria-label": d,
+      "aria-labelledby": p,
+      children: w
+    }
+  ) });
+};
+_.displayName = "FilterGroup";
+export {
+  _ as FilterGroup
+};

package/src/tedi/components/filter/filter/filter.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),oe=require("../../../../../external/classnames/index.cjs.js"),l=require("react"),ce=require("../../base/icon/icon.cjs.js"),E=require("../../buttons/button/button.cjs.js"),de=require("../../form/checkbox/checkbox.cjs.js"),We=require("../../form/search/search.cjs.js"),d=require("../../overlays/dropdown/dropdown.cjs.js"),Ze=require("../../tags/status-badge/status-badge.cjs.js"),n=require("./filter.module.scss.cjs.js"),He=require("./filter-group-context.cjs.js"),Je=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),Ke=require("../../../providers/label-provider/use-labels.cjs.js"),ue=v=>v==="large"?24:18,Qe=v=>{const b=l.useId();return v??`tedi-filter-${b.replace(/[^a-zA-Z0-9-]/g,"")}`},W=l.forwardRef((v,b)=>{const{getCurrentBreakpointProps:fe}=Je.useBreakpointProps(v.defaultServerBreakpoint),{text:g,value:_,disabled:he=!1,className:pe,id:Z,selected:k,defaultSelected:H=!1,onSelectedChange:C,selectedValue:j,defaultSelectedValue:me,onSelectedValueChange:u,multiselect:J=!1,selectedValues:f,defaultSelectedValues:be,onSelectedValuesChange:a,options:S=[],searchable:xe=!1,showSelectAll:ve=!1,selectAllLabel:ge,showClear:K=!1,clearLabel:je,preserveLabel:Q=!1,children:U,onClear:B,prepend:y,hidePrependWhenSelected:Se=!0,append:I,placement:we="bottom-start",variant:_e="primary",size:D="default",searchLabel:V}=fe(v),{getLabel:X}=Ke.useLabels(),ke=ge??X("filter.select-all"),Y=je??X("filter.clear-selection"),i=l.useContext(He.FilterGroupContext),L=Qe(Z),Ce=l.useRef(null),P=S.length>0,F=!!U,x=P||F,h=P&&!J,p=P&&J,N=!!(i!=null&&i.isManaged)&&_!==void 0&&!x,O=N&&!(i!=null&&i.multiselect),ee=he||((i==null?void 0:i.disabled)??!1),[Le,Fe]=l.useState(H),[Ne,te]=l.useState(me??""),[Be,T]=l.useState(be??[]);F&&(H||C)&&k===void 0&&console.warn("[Filter] `defaultSelected` and `onSelectedChange` are not honoured in custom-content mode (when `children` is provided). Drive the selected state yourself via the controlled `selected` prop, e.g. `selected={Boolean(value)}`.");const M=k!==void 0?k:Le,m=j!==void 0?j:Ne,r=f!==void 0?f:Be,w=l.useMemo(()=>N?i.isSelected(_):p?r.length>0:h?m!=="":M,[N,_,i,p,r,h,m,M]),q=l.useMemo(()=>{var e;return!h||!m?null:((e=S.find(s=>s.value===m))==null?void 0:e.label)??null},[h,m,S]),Me=l.useMemo(()=>h?q&&Q?`${g}: ${q}`:q??g:g,[h,q,Q,g]),[$,le]=l.useState(!1),[z,se]=l.useState("");l.useEffect(()=>{$||se("")},[$]);const R=l.useMemo(()=>{const e=z.trim().toLowerCase();return e?S.filter(s=>s.label.toLowerCase().includes(e)):S},[z,S]),o=l.useMemo(()=>R.filter(e=>!e.disabled),[R]),A=l.useMemo(()=>o.length===0?!1:o.every(e=>r.includes(e.value)),[o,r]),qe=l.useMemo(()=>{if(o.length===0)return!1;const e=o.filter(s=>r.includes(s.value)).length;return e>0&&e<o.length},[o,r]),ye=l.useCallback(e=>{Ce.current=e,typeof b=="function"?b(e):b&&(b.current=e)},[b]),Ie=l.useCallback(()=>{if(N){i.selectFilter(_);return}const e=!M;k===void 0&&Fe(e),C==null||C(e)},[N,i,_,M,k,C]),De=l.useCallback(e=>{const s=m===e?"":e;j===void 0&&te(s),u==null||u(s)},[m,j,u]),Pe=l.useCallback(e=>{const s=r.includes(e)?r.filter(c=>c!==e):[...r,e];f===void 0&&T(s),a==null||a(s)},[r,f,a]),Oe=l.useCallback(()=>{let e;if(A){const s=new Set(o.map(c=>c.value));e=r.filter(c=>!s.has(c))}else{const s=new Set(r);o.forEach(c=>s.add(c.value)),e=[...s]}f===void 0&&T(e),a==null||a(e)},[A,o,r,f,a]),re=l.useCallback(()=>{F?B==null||B():p?(f===void 0&&T([]),a==null||a([])):h&&(j===void 0&&te(""),u==null||u("")),le(!1)},[F,B,p,f,a,h,j,u]),Te=w&&Se,$e=O?"radio":void 0,ze=O?w:void 0,Re=!x&&!O?w:void 0,Ae=t.jsxs(t.Fragment,{children:[!x&&w&&t.jsx(ce.Icon,{className:n.default["tedi-filter__icon"],name:"check",size:ue(D),color:"inherit"}),y!=null&&t.jsx("span",{className:oe.default(n.default["tedi-filter__prepend"],{[n.default["tedi-filter__prepend--hidden"]]:Te}),children:y}),t.jsx("span",{className:n.default["tedi-filter__text"],children:Me}),I!=null&&t.jsx("span",{className:n.default["tedi-filter__append"],children:I}),p&&w&&r.length>0&&t.jsx(Ze.StatusBadge,{className:n.default["tedi-filter__count"],color:ee?"neutral":"brand",children:String(r.length)}),x&&t.jsx(ce.Icon,{className:n.default["tedi-filter__icon"],name:"arrow_drop_down",filled:!0,size:ue(D),color:"inherit"})]}),ne=oe.default(n.default["tedi-filter"],n.default[`tedi-filter--${_e}`],D==="large"&&n.default["tedi-filter--large"],w&&n.default["tedi-filter--selected"],pe),ie=t.jsx(E.Button,{ref:ye,id:Z,type:"button",disabled:ee,className:n.default["tedi-filter__button"],onClick:x?void 0:Ie,role:x?void 0:$e,"aria-checked":ze,"aria-pressed":Re,noStyle:!0,children:Ae});if(!x)return t.jsx("div",{className:ne,children:ie});const G=p&&ve?0:null,Ge=G!==null?1:0,Ee=()=>R.map((e,s)=>{const c=p?r.includes(e.value):m===e.value,ae=s+Ge;return p?t.jsx(d.Dropdown.Item,{index:ae,asChild:!0,disabled:e.disabled,closeOnSelect:!1,children:t.jsx(de.Checkbox,{id:`${L}-option-${s}`,label:e.label,value:e.value,checked:c,disabled:e.disabled,onChange:()=>Pe(e.value),name:`${L}-options`})},e.value):t.jsx(d.Dropdown.Item,{index:ae,disabled:e.disabled,active:c,onClick:()=>De(e.value),children:e.label},e.value)});return t.jsx("div",{className:ne,children:t.jsxs(d.Dropdown,{open:$,onOpenChange:le,placement:we,width:"auto",children:[t.jsx(d.Dropdown.Trigger,{children:ie}),t.jsx(d.Dropdown.Content,{children:F?t.jsxs(t.Fragment,{children:[t.jsx("div",{className:n.default["tedi-filter-dropdown__custom-content"],children:U}),K&&t.jsxs(t.Fragment,{children:[t.jsx(d.Dropdown.Separator,{}),t.jsx("div",{className:n.default["tedi-filter-dropdown__clear"],children:t.jsx(E.Button,{visualType:"neutral",size:"small",type:"button",iconLeft:"refresh",onClick:re,children:Y})})]})]}):t.jsxs(t.Fragment,{children:[xe&&t.jsxs(t.Fragment,{children:[t.jsx("div",{className:n.default["tedi-filter-dropdown__search"],children:t.jsx(We.Search,{id:`${L}-search`,label:V??g,hideLabel:!0,ariaLabel:V??g,value:z,onChange:se})}),t.jsx(d.Dropdown.Separator,{})]}),G!==null&&t.jsxs(t.Fragment,{children:[t.jsx(d.Dropdown.Item,{index:G,asChild:!0,closeOnSelect:!1,children:t.jsx(de.Checkbox,{id:`${L}-select-all`,label:ke,value:"select-all",checked:A,indeterminate:qe,onChange:Oe,name:`${L}-select-all`})}),t.jsx(d.Dropdown.Separator,{})]}),Ee(),K&&t.jsxs(t.Fragment,{children:[t.jsx(d.Dropdown.Separator,{}),t.jsx("div",{className:n.default["tedi-filter-dropdown__clear"],children:t.jsx(E.Button,{visualType:"neutral",size:"small",type:"button",iconLeft:"refresh",onClick:re,children:Y})})]})]})})]})})});W.displayName="Filter";exports.Filter=W;exports.default=W;

package/src/tedi/components/filter/filter/filter.d.ts

@@ -0,0 +1,98 @@
+import { default as React } from 'react';
+import { BreakpointSupport } from '../../../helpers';
+import { Dropdown } from '../../overlays/dropdown/dropdown';
+export type FilterVariant = 'primary' | 'secondary';
+export type FilterSize = 'default' | 'large';
+export interface FilterOption {
+    /** Display label of the option. */
+    label: string;
+    /** Stable identifier returned via selection callbacks. */
+    value: string;
+    /** Whether the option cannot be selected. */
+    disabled?: boolean;
+}
+type FilterBreakpointProps = {
+    /**
+     * Visual variant of the filter.
+     * @default primary
+     */
+    variant?: FilterVariant;
+    /**
+     * Visual size of the filter.
+     * @default default
+     */
+    size?: FilterSize;
+};
+export interface FilterProps extends BreakpointSupport<FilterBreakpointProps> {
+    /** Trigger label. In single-select mode it's replaced by the picked option (or prefixed when `preserveLabel`). */
+    text: string;
+    /** Identifier for participating in a managed `<FilterGroup>`. Unused outside a group. */
+    value?: string;
+    /** @default false */
+    disabled?: boolean;
+    /** Class on the root wrapper `<div>` (not the inner `<button>`). */
+    className?: string;
+    /** Trigger `<button>` id. Auto-generated when omitted; also used as a prefix for sub-element ids. */
+    id?: string;
+    /**
+     * Selected appearance.
+     * - Toggle mode (no `options`, no `children`): controlled or uncontrolled (`defaultSelected`).
+     * - Custom-content mode (`children`): controlled-only — derive it from your own state.
+     * - Dropdown mode (`options`): ignored; derived from `selectedValue` / `selectedValues`.
+     */
+    selected?: boolean;
+    /** Toggle-mode initial state. Ignored when `selected` is set. @default false */
+    defaultSelected?: boolean;
+    /** Toggle-mode change callback. Not fired in custom-content or dropdown modes. */
+    onSelectedChange?: (selected: boolean) => void;
+    /** Single-select controlled value (`''` = nothing selected). Pair with `options`. */
+    selectedValue?: string;
+    /** Single-select initial value. Ignored when `selectedValue` is set. */
+    defaultSelectedValue?: string;
+    /** Single-select change callback — fires on commit or clear (`''`). */
+    onSelectedValueChange?: (value: string) => void;
+    /** Switch the dropdown to multi-select (checkboxes). Requires `options`. @default false */
+    multiselect?: boolean;
+    /** Multi-select controlled values. */
+    selectedValues?: string[];
+    /** Multi-select initial values. Ignored when `selectedValues` is set. */
+    defaultSelectedValues?: string[];
+    /** Multi-select change callback — fires on toggle, "Select all", or clear. */
+    onSelectedValuesChange?: (values: string[]) => void;
+    /** Dropdown options. Mutually exclusive with `children` (children wins if both). */
+    options?: FilterOption[];
+    /** Search input that filters `options` by label (case-insensitive substring). @default false */
+    searchable?: boolean;
+    /** Multi-select "Select all" toggle; targets enabled + visible options. @default false */
+    showSelectAll?: boolean;
+    /** Override the `filter.select-all` i18n label. */
+    selectAllLabel?: string;
+    /**
+     * "Clear selection" button below the panel. Dropdown modes clear automatically;
+     * custom-content mode delegates to `onClear`. @default false
+     */
+    showClear?: boolean;
+    /** Override the `filter.clear-selection` i18n label. */
+    clearLabel?: string;
+    /** Single-select: keep `text` as a prefix once a value is picked ("Teenus: …"). @default false */
+    preserveLabel?: boolean;
+    /** Custom dropdown content. Switches the filter into controlled custom-content mode. */
+    children?: React.ReactNode;
+    /** Fires when "Clear" is clicked in custom-content mode — reset your own state here. */
+    onClear?: () => void;
+    /**
+     * Slot before `text` (icon, status). Auto-replaced by a check icon when toggle-mode
+     * selected — disable via `hidePrependWhenSelected={false}`.
+     */
+    prepend?: React.ReactNode;
+    /** Hide `prepend` while selected so the check icon can take its place. @default true */
+    hidePrependWhenSelected?: boolean;
+    /** Slot after `text`. In multi-select sits alongside the built-in count badge. */
+    append?: React.ReactNode;
+    /** Floating UI placement; flips when room is tight. @default bottom-start */
+    placement?: React.ComponentProps<typeof Dropdown>['placement'];
+    /** Accessible label for the search input. Falls back to `text`. */
+    searchLabel?: string;
+}
+export declare const Filter: React.ForwardRefExoticComponent<FilterProps & React.RefAttributes<HTMLButtonElement>>;
+export default Filter;