npm - @rio-cloud/rio-uikit - Versions diffs - 2.3.0-beta.3 → 2.4.0 - Mend

@rio-cloud/rio-uikit 2.3.0-beta.3 → 2.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (119) hide show

package/components/map/utils/mapUtils.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"mapUtils.js","sources":["../../../../src/components/map/utils/mapUtils.ts"],"sourcesContent":["import { calculateBoundingBox, isValidBoundingBox, parsePositionFromString } from './positions';\nimport type { BoundingBox, MapBoundingBox, Position } from './mapTypes';\n\n// Internal use for setting the map to a given bounding box\nexport const getMapBounds = (boundingBox: BoundingBox) => {\n const { top, left, bottom, right } = boundingBox;\n return new H.geo.Rect(top, left, bottom, right);\n};\n\nconst typeFilterFunction = (hereType: abstract new (...args: never[]) => H.map.Object) => (obj: H.map.Object) =>\n obj instanceof hereType;\n\nconst markerFilterFunction = typeFilterFunction(H.map.AbstractMarker);\n\nconst groupFilterFunction = typeFilterFunction(H.map.Group);\n\nconst polylineFilterFunction = typeFilterFunction(H.map.Polyline);\n\nconst getPosition = (marker: H.map.AbstractMarker) => marker.getGeometry();\n\nexport type MapUtils = {\n getCenter: () => Position;\n setCenter: (position: Position, animate: boolean) => void;\n getZoom: () => number;\n setZoom: (zoom: number, zoomAnimation: boolean) => void;\n getViewPort: () => {\n width: number;\n height: number;\n margin: number;\n padding: {\n top: number;\n right: number;\n bottom: number;\n left: number;\n };\n center: {\n x: number;\n y: number;\n };\n };\n getBounds: () => MapBoundingBox;\n getObjects: () => H.map.Object[];\n getLayers: () => H.map.DataModel[];\n getBaseLayer: () => H.map.layer.Layer;\n getGroups: () => H.map.Group[];\n getMarkers: () => H.map.Marker[];\n getRoutePolylines: () => H.map.Polyline[];\n getPosition: typeof getPosition;\n calculateBoundingBox: typeof calculateBoundingBox;\n isValidBoundingBox: typeof isValidBoundingBox;\n parsePositionFromString: typeof parsePositionFromString;\n};\n\nexport const createUtils = (mapApi: H.Map) => {\n return {\n getCenter: () => {\n const center = mapApi.getCenter();\n return {\n lat: center.lat,\n lng: center.lng,\n };\n },\n setCenter: (position: Position, animate: boolean) => {\n mapApi.getViewModel().setLookAtData({ position }, animate);\n },\n getZoom: () => {\n const { zoom } = mapApi.getViewModel().getLookAtData();\n return Math.round(zoom === undefined ? 0 : zoom);\n },\n setZoom: (zoom: number, zoomAnimation = false) => {\n mapApi.getViewModel().setLookAtData({ zoom }, zoomAnimation);\n },\n getViewPort: () => {\n const viewPort = mapApi.getViewPort();\n return {\n width: viewPort.width,\n height: viewPort.height,\n margin: viewPort.margin,\n padding: {\n top: viewPort.padding.top,\n right: viewPort.padding.right,\n bottom: viewPort.padding.bottom,\n left: viewPort.padding.left,\n },\n center: {\n x: viewPort.center.x,\n y: viewPort.center.y,\n },\n };\n },\n\n getBounds: () => {\n const { bounds } = mapApi.getViewModel().getLookAtData();\n\n // HERE Maps API for JavaScript 3.1\n const boundingBox = bounds?.getBoundingBox();\n return {\n topLeft: {\n lng: boundingBox?.getTopLeft().lng,\n lat: boundingBox?.getTopLeft().lat,\n },\n bottomRight: {\n lng: boundingBox?.getBottomRight().lng,\n lat: boundingBox?.getBottomRight().lat,\n },\n };\n },\n getObjects: () => mapApi.getObjects(),\n getLayers: () => mapApi.getLayers().asArray(),\n getBaseLayer: () => mapApi.getBaseLayer(),\n getGroups: () => mapApi.getObjects().filter(groupFilterFunction) as H.map.Group[],\n getMarkers: () => mapApi.getObjects().filter(markerFilterFunction) as H.map.Marker[],\n\n getRoutePolylines: () => {\n const groups = mapApi.getObjects().filter(groupFilterFunction) as H.map.Group[];\n const groupObjects = groups.flatMap(group => group.getObjects());\n const filteredPolylines = groupObjects.filter(polylineFilterFunction) as H.map.Polyline[];\n return filteredPolylines;\n },\n\n getPosition,\n calculateBoundingBox,\n isValidBoundingBox,\n parsePositionFromString,\n };\n};\n"],"names":["getMapBounds","boundingBox","top","left","bottom","right","typeFilterFunction","hereType","obj","markerFilterFunction","groupFilterFunction","polylineFilterFunction","getPosition","marker","createUtils","mapApi","center","position","animate","zoom","zoomAnimation","viewPort","bounds","group","calculateBoundingBox","isValidBoundingBox","parsePositionFromString"],"mappings":";AAIO,MAAMA,IAAe,CAACC,MAA6B;AACtD,QAAM,EAAE,KAAAC,GAAK,MAAAC,GAAM,QAAAC,GAAQ,OAAAC,MAAUJ;AACrC,SAAO,IAAI,EAAE,IAAI,KAAKC,GAAKC,GAAMC,GAAQC,CAAK;AAClD,GAEMC,IAAqB,CAACC,MAA8D,CAACC,MACvFA,aAAeD,GAEbE,IAAuBH,EAAmB,EAAE,IAAI,cAAc,GAE9DI,IAAsBJ,EAAmB,EAAE,IAAI,KAAK,GAEpDK,IAAyBL,EAAmB,EAAE,IAAI,QAAQ,GAE1DM,IAAc,CAACC,MAAiCA,EAAO,YAAA,~~GAmChDC~~,IAAc,CAACC,OACjB;AAAA,EACH,WAAW,MAAM;AACb,UAAMC,IAASD,EAAO,UAAA;AACtB,WAAO;AAAA,MACH,KAAKC,EAAO;AAAA,MACZ,KAAKA,EAAO;AAAA,IAAA;AAAA,EAEpB;AAAA,EACA,WAAW,CAACC,GAAoBC,MAAqB;AACjD,IAAAH,EAAO,eAAe,cAAc,EAAE,UAAAE,EAAA,GAAYC,CAAO;AAAA,EAC7D;AAAA,EACA,SAAS,MAAM;AACX,UAAM,EAAE,~~MAAAC~~,EAAA,IAASJ,EAAO,aAAA,EAAe,cAAA;AACvC,WAAO,KAAK,MAAMI,MAAS,SAAY,IAAIA,CAAI;AAAA,EACnD;AAAA,EACA,SAAS,CAACA,GAAcC,IAAgB,OAAU;AAC9C,IAAAL,EAAO,eAAe,cAAc,EAAE,MAAAI,EAAA,GAAQC,CAAa;AAAA,EAC/D;AAAA,EACA,aAAa,MAAM;AACf,UAAMC,IAAWN,EAAO,YAAA;AACxB,WAAO;AAAA,MACH,OAAOM,EAAS;AAAA,MAChB,QAAQA,EAAS;AAAA,MACjB,QAAQA,EAAS;AAAA,MACjB,SAAS;AAAA,QACL,KAAKA,EAAS,QAAQ;AAAA,QACtB,OAAOA,EAAS,QAAQ;AAAA,QACxB,QAAQA,EAAS,QAAQ;AAAA,QACzB,MAAMA,EAAS,QAAQ;AAAA,MAAA;AAAA,MAE3B,QAAQ;AAAA,QACJ,GAAGA,EAAS,OAAO;AAAA,QACnB,GAAGA,EAAS,OAAO;AAAA,MAAA;AAAA,IACvB;AAAA,EAER;AAAA,EAEA,WAAW,MAAM;AACb,UAAM,EAAE,QAAAC,EAAA,IAAWP,EAAO,aAAA,EAAe,cAAA,GAGnCd,IAAcqB,GAAQ,eAAA;AAC5B,WAAO;AAAA,MACH,SAAS;AAAA,QACL,KAAKrB,GAAa,WAAA,EAAa;AAAA,QAC/B,KAAKA,GAAa,aAAa;AAAA,MAAA;AAAA,MAEnC,aAAa;AAAA,QACT,KAAKA,GAAa,eAAA,EAAiB;AAAA,QACnC,KAAKA,GAAa,iBAAiB;AAAA,MAAA;AAAA,IACvC;AAAA,EAER;AAAA,EACA,YAAY,MAAMc,EAAO,WAAA;AAAA,EACzB,WAAW,MAAMA,EAAO,UAAA,EAAY,QAAA;AAAA,EACpC,cAAc,MAAMA,EAAO,aAAA;AAAA,EAC3B,WAAW,MAAMA,EAAO,WAAA,EAAa,OAAOL,CAAmB;AAAA,EAC/D,YAAY,MAAMK,EAAO,WAAA,EAAa,OAAON,CAAoB;AAAA,EAEjE,mBAAmB,MACAM,EAAO,WAAA,EAAa,OAAOL,CAAmB,EACjC,QAAQ,CAAAa,MAASA,EAAM,YAAY,EACxB,OAAOZ,CAAsB;AAAA,EAIxE,aAAAC;AAAA,EACA,sBAAAY;AAAA,EACA,oBAAAC;AAAA,EACA,yBAAAC;AAAA;"}
1	+ {"version":3,"file":"mapUtils.js","sources":["../../../../src/components/map/utils/mapUtils.ts"],"sourcesContent":["import { calculateBoundingBox, isValidBoundingBox, parsePositionFromString } from './positions';\nimport type { BoundingBox, MapBoundingBox, Position } from './mapTypes';\n\n// Internal use for setting the map to a given bounding box\nexport const getMapBounds = (boundingBox: BoundingBox) => {\n const { top, left, bottom, right } = boundingBox;\n return new H.geo.Rect(top, left, bottom, right);\n};\n\nconst typeFilterFunction = (hereType: abstract new (...args: never[]) => H.map.Object) => (obj: H.map.Object) =>\n obj instanceof hereType;\n\nconst markerFilterFunction = typeFilterFunction(H.map.AbstractMarker);\n\nconst groupFilterFunction = typeFilterFunction(H.map.Group);\n\nconst polylineFilterFunction = typeFilterFunction(H.map.Polyline);\n\nconst getPosition = (marker: H.map.AbstractMarker) => marker.getGeometry();\n\nexport type MapUtils = {\n getCenter: () => Position;\n setCenter: (position: Position, animate: boolean) => void;\n getZoom: () => number;\n getPreciseZoom: () => number;\n setZoom: (zoom: number, zoomAnimation: boolean) => void;\n getViewPort: () => {\n width: number;\n height: number;\n margin: number;\n padding: {\n top: number;\n right: number;\n bottom: number;\n left: number;\n };\n center: {\n x: number;\n y: number;\n };\n };\n getBounds: () => MapBoundingBox;\n getObjects: () => H.map.Object[];\n getLayers: () => H.map.DataModel[];\n getBaseLayer: () => H.map.layer.Layer;\n getGroups: () => H.map.Group[];\n getMarkers: () => H.map.Marker[];\n getRoutePolylines: () => H.map.Polyline[];\n getPosition: typeof getPosition;\n calculateBoundingBox: typeof calculateBoundingBox;\n isValidBoundingBox: typeof isValidBoundingBox;\n parsePositionFromString: typeof parsePositionFromString;\n};\n\nexport const createUtils = (mapApi: H.Map) => {\n return {\n getCenter: () => {\n const center = mapApi.getCenter();\n return {\n lat: center.lat,\n lng: center.lng,\n };\n },\n setCenter: (position: Position, animate: boolean) => {\n mapApi.getViewModel().setLookAtData({ position }, animate);\n },\n getPreciseZoom: () => {\n const { zoom } = mapApi.getViewModel().getLookAtData();\n return zoom === undefined ? 0 : zoom;\n },\n getZoom: () => {\n const { zoom } = mapApi.getViewModel().getLookAtData();\n return Math.round(zoom === undefined ? 0 : zoom);\n },\n setZoom: (zoom: number, zoomAnimation = false) => {\n mapApi.getViewModel().setLookAtData({ zoom }, zoomAnimation);\n },\n getViewPort: () => {\n const viewPort = mapApi.getViewPort();\n return {\n width: viewPort.width,\n height: viewPort.height,\n margin: viewPort.margin,\n padding: {\n top: viewPort.padding.top,\n right: viewPort.padding.right,\n bottom: viewPort.padding.bottom,\n left: viewPort.padding.left,\n },\n center: {\n x: viewPort.center.x,\n y: viewPort.center.y,\n },\n };\n },\n\n getBounds: () => {\n const { bounds } = mapApi.getViewModel().getLookAtData();\n\n // HERE Maps API for JavaScript 3.1\n const boundingBox = bounds?.getBoundingBox();\n return {\n topLeft: {\n lng: boundingBox?.getTopLeft().lng,\n lat: boundingBox?.getTopLeft().lat,\n },\n bottomRight: {\n lng: boundingBox?.getBottomRight().lng,\n lat: boundingBox?.getBottomRight().lat,\n },\n };\n },\n getObjects: () => mapApi.getObjects(),\n getLayers: () => mapApi.getLayers().asArray(),\n getBaseLayer: () => mapApi.getBaseLayer(),\n getGroups: () => mapApi.getObjects().filter(groupFilterFunction) as H.map.Group[],\n getMarkers: () => mapApi.getObjects().filter(markerFilterFunction) as H.map.Marker[],\n\n getRoutePolylines: () => {\n const groups = mapApi.getObjects().filter(groupFilterFunction) as H.map.Group[];\n const groupObjects = groups.flatMap(group => group.getObjects());\n const filteredPolylines = groupObjects.filter(polylineFilterFunction) as H.map.Polyline[];\n return filteredPolylines;\n },\n\n getPosition,\n calculateBoundingBox,\n isValidBoundingBox,\n parsePositionFromString,\n };\n};\n"],"names":["getMapBounds","boundingBox","top","left","bottom","right","typeFilterFunction","hereType","obj","markerFilterFunction","groupFilterFunction","polylineFilterFunction","getPosition","marker","createUtils","mapApi","center","position","animate","zoom","zoomAnimation","viewPort","bounds","group","calculateBoundingBox","isValidBoundingBox","parsePositionFromString"],"mappings":";AAIO,MAAMA,IAAe,CAACC,MAA6B;AACtD,QAAM,EAAE,KAAAC,GAAK,MAAAC,GAAM,QAAAC,GAAQ,OAAAC,MAAUJ;AACrC,SAAO,IAAI,EAAE,IAAI,KAAKC,GAAKC,GAAMC,GAAQC,CAAK;AAClD,GAEMC,IAAqB,CAACC,MAA8D,CAACC,MACvFA,aAAeD,GAEbE,IAAuBH,EAAmB,EAAE,IAAI,cAAc,GAE9DI,IAAsBJ,EAAmB,EAAE,IAAI,KAAK,GAEpDK,IAAyBL,EAAmB,EAAE,IAAI,QAAQ,GAE1DM,IAAc,CAACC,MAAiCA,EAAO,YAAA,GAoChDC,IAAc,CAACC,OACjB;AAAA,EACH,WAAW,MAAM;AACb,UAAMC,IAASD,EAAO,UAAA;AACtB,WAAO;AAAA,MACH,KAAKC,EAAO;AAAA,MACZ,KAAKA,EAAO;AAAA,IAAA;AAAA,EAEpB;AAAA,EACA,WAAW,CAACC,GAAoBC,MAAqB;AACjD,IAAAH,EAAO,eAAe,cAAc,EAAE,UAAAE,EAAA,GAAYC,CAAO;AAAA,EAC7D;AAAA,EACA,gBAAgB,MAAM;AAClB,UAAM,EAAE,MAAAC,EAAA,IAASJ,EAAO,aAAA,EAAe,cAAA;AACvC,WAAOI,MAAS,SAAY,IAAIA;AAAA,EACpC;AAAA,EACA,SAAS,MAAM;AACX,UAAM,EAAE,MAAAA,EAAA,IAASJ,EAAO,aAAA,EAAe,cAAA;AACvC,WAAO,KAAK,MAAMI,MAAS,SAAY,IAAIA,CAAI;AAAA,EACnD;AAAA,EACA,SAAS,CAACA,GAAcC,IAAgB,OAAU;AAC9C,IAAAL,EAAO,eAAe,cAAc,EAAE,MAAAI,EAAA,GAAQC,CAAa;AAAA,EAC/D;AAAA,EACA,aAAa,MAAM;AACf,UAAMC,IAAWN,EAAO,YAAA;AACxB,WAAO;AAAA,MACH,OAAOM,EAAS;AAAA,MAChB,QAAQA,EAAS;AAAA,MACjB,QAAQA,EAAS;AAAA,MACjB,SAAS;AAAA,QACL,KAAKA,EAAS,QAAQ;AAAA,QACtB,OAAOA,EAAS,QAAQ;AAAA,QACxB,QAAQA,EAAS,QAAQ;AAAA,QACzB,MAAMA,EAAS,QAAQ;AAAA,MAAA;AAAA,MAE3B,QAAQ;AAAA,QACJ,GAAGA,EAAS,OAAO;AAAA,QACnB,GAAGA,EAAS,OAAO;AAAA,MAAA;AAAA,IACvB;AAAA,EAER;AAAA,EAEA,WAAW,MAAM;AACb,UAAM,EAAE,QAAAC,EAAA,IAAWP,EAAO,aAAA,EAAe,cAAA,GAGnCd,IAAcqB,GAAQ,eAAA;AAC5B,WAAO;AAAA,MACH,SAAS;AAAA,QACL,KAAKrB,GAAa,WAAA,EAAa;AAAA,QAC/B,KAAKA,GAAa,aAAa;AAAA,MAAA;AAAA,MAEnC,aAAa;AAAA,QACT,KAAKA,GAAa,eAAA,EAAiB;AAAA,QACnC,KAAKA,GAAa,iBAAiB;AAAA,MAAA;AAAA,IACvC;AAAA,EAER;AAAA,EACA,YAAY,MAAMc,EAAO,WAAA;AAAA,EACzB,WAAW,MAAMA,EAAO,UAAA,EAAY,QAAA;AAAA,EACpC,cAAc,MAAMA,EAAO,aAAA;AAAA,EAC3B,WAAW,MAAMA,EAAO,WAAA,EAAa,OAAOL,CAAmB;AAAA,EAC/D,YAAY,MAAMK,EAAO,WAAA,EAAa,OAAON,CAAoB;AAAA,EAEjE,mBAAmB,MACAM,EAAO,WAAA,EAAa,OAAOL,CAAmB,EACjC,QAAQ,CAAAa,MAASA,EAAM,YAAY,EACxB,OAAOZ,CAAsB;AAAA,EAIxE,aAAAC;AAAA,EACA,sBAAAY;AAAA,EACA,oBAAAC;AAAA,EACA,yBAAAC;AAAA;"}

package/components/selects/Multiselect.d.ts CHANGED Viewed

@@ -80,6 +80,12 @@ export type MultiselectProps<T extends MultiselectOption> = Omit<WithFeedbackAnd
      * @default 'md'
      */
     bsSize?: 'sm' | 'md' | 'lg';
+    /**
+     * Defines the visual variant of the select.
+     *
+     * @default 'default'
+     */
+    variant?: 'default' | 'blank';
     /**
      * Option to disable the opening of the option list.
      *

package/components/selects/Multiselect.js CHANGED Viewed

@@ -1,53 +1,54 @@
-import { jsxs as h, Fragment as Ne, jsx as a } from "react/jsx-runtime";
+import { jsxs as h, Fragment as Te, jsx as a } from "react/jsx-runtime";
 import { useState as n, useRef as A } from "react";
 import { isEqual as z } from "es-toolkit/predicate";
-import { isEmpty as Te } from "es-toolkit/compat";
-import { noop as ye } from "es-toolkit/function";
+import { isEmpty as ye } from "es-toolkit/compat";
+import { noop as Re } from "es-toolkit/function";
 import X from "../../utils/classNames.js";
-import Re, { filterOptions as Ee } from "./BaseSelectDropdown.js";
+import ke, { filterOptions as Ee } from "./BaseSelectDropdown.js";
 import Ve from "./ClearButton.js";
 import _e from "./MultiselectToggleCounter.js";
-import ke from "./MultiselectToggleSelection.js";
-import Pe from "./MultiselectToggleFilter.js";
-import Ue from "./MultiselectTogglePlaceholder.js";
-import Be from "../../hooks/useClickOutside.js";
-import Ke from "../../hooks/useMergeRefs.js";
-import We from "./WithFeedbackAndAddon.js";
-const N = -1, ot = (G) => {
+import Pe from "./MultiselectToggleSelection.js";
+import Ue from "./MultiselectToggleFilter.js";
+import Be from "./MultiselectTogglePlaceholder.js";
+import Ke from "../../hooks/useClickOutside.js";
+import We from "../../hooks/useMergeRefs.js";
+import je from "./WithFeedbackAndAddon.js";
+const N = -1, nt = (G) => {
   const {
     name: T,
     id: H = T,
     options: o = [],
     value: i,
-    onChange: I = ye,
+    onChange: I = Re,
     placeholder: J,
     isLoading: Q = !1,
     dropup: Y = !1,
     pullRight: Z = !1,
     autoDropDirection: $ = !0,
     bsSize: w = "md",
+    variant: ee = "default",
     disabled: y = !1,
-    tabIndex: ee = 0,
-    hasError: te = !1,
+    tabIndex: te = 0,
+    hasError: se = !1,
     useFilter: R = !1,
-    useClear: se = !1,
+    useClear: oe = !1,
     multiline: f = !1,
-    noItemMessage: oe,
+    noItemMessage: ne,
     counterMessage: C,
     renderCounterMessage: F,
-    showSelectedItemIcon: ne = !1,
-    showUnselectedItemIcons: E = !1,
-    className: V,
+    showSelectedItemIcon: re = !1,
+    showUnselectedItemIcons: k = !1,
+    className: E,
     inputAddon: S,
-    errorMessage: _,
-    warningMessage: k,
-    messageWhiteSpace: re = "normal",
+    errorMessage: V,
+    warningMessage: _,
+    messageWhiteSpace: le = "normal",
     btnClassName: P,
-    dropdownClassName: le,
-    ...ae
-  } = G, [l, M] = n(!1), [r, d] = n(i || []), [U, m] = n(!1), [B, p] = n(""), [ie, u] = n(o), [ce, de] = n([]), [ue, O] = n(N), [fe, g] = n(!1), K = A(null), b = A(null), me = Be((e) => {
-    b.current && !b.current.contains(e.target) && L();
-  }), pe = Ke(b, me), D = (e, t) => {
+    dropdownClassName: ae,
+    ...ie
+  } = G, [l, M] = n(!1), [r, d] = n(i || []), [U, m] = n(!1), [B, p] = n(""), [ce, u] = n(o), [de, ue] = n([]), [fe, b] = n(N), [me, g] = n(!1), K = A(null), O = A(null), pe = Ke((e) => {
+    O.current && !O.current.contains(e.target) && L();
+  }), ge = We(O, pe), D = (e, t) => {
     if (t)
       d(t);
     else if (e) {
@@ -56,21 +57,21 @@ const N = -1, ot = (G) => {
     }
   }, W = A(!0);
   W.current && (D(o, i), W.current = !1);
-  const [ge, he] = n(i);
-  z(i, ge) || (D(o, i), he(i));
-  const [Ie, we] = n(o);
-  z(o, Ie) || (D(o, i), u(o), we(o));
-  const Ce = (e = []) => {
-    de(e);
-  }, x = () => /* @__PURE__ */ a(
-    Pe,
+  const [he, Ie] = n(i);
+  z(i, he) || (D(o, i), Ie(i));
+  const [we, Ce] = n(o);
+  z(o, we) || (D(o, i), u(o), Ce(o));
+  const Fe = (e = []) => {
+    ue(e);
+  }, v = () => /* @__PURE__ */ a(
+    Ue,
     {
       isActive: U || !!B,
       selectedItemIds: r,
       filterValue: B,
       onFilterChange: Oe
     }
-  ), Fe = () => C || F ? /* @__PURE__ */ a(
+  ), Se = () => C || F ? /* @__PURE__ */ a(
     _e,
     {
       selectedAmount: r.length,
@@ -78,19 +79,19 @@ const N = -1, ot = (G) => {
       customRenderer: F
     }
   ) : /* @__PURE__ */ a(
-    ke,
+    Pe,
     {
       options: o,
       selectedItemIds: r,
-      showSelectedItemIcon: ne,
-      showUnselectedItemIcons: E,
-      onRemoveItem: De,
+      showSelectedItemIcon: re,
+      showUnselectedItemIcons: k,
+      onRemoveItem: ve,
       multiline: f,
       hasInputAddon: !!S,
       hasFilter: R,
-      children: f && x()
+      children: f && v()
     }
-  ), Se = () => {
+  ), Me = () => {
     const e = X(
       "dropdown-toggle",
       "form-control",
@@ -100,7 +101,7 @@ const N = -1, ot = (G) => {
       w === "lg" && "input-lg",
       f && "height-auto",
       y && "disabled"
-    ), t = Te(r) && !E, s = R && l && !C && !F, c = r.length > 0 ? { id: "__multiselect-clear__", label: "" } : null, q = /* @__PURE__ */ h(
+    ), t = ye(r) && !k, s = R && l && !C && !F, c = r.length > 0 ? { id: "__multiselect-clear__", label: "" } : null, q = /* @__PURE__ */ h(
       "button",
       {
         type: "button",
@@ -108,23 +109,23 @@ const N = -1, ot = (G) => {
         name: T,
         className: e,
         "data-toggle": "dropdown",
-        tabIndex: ee,
+        tabIndex: te,
         "aria-haspopup": "true",
         "aria-expanded": l,
-        onClick: v,
-        onKeyDown: ve,
+        onClick: x,
+        onKeyDown: Ae,
         ref: K,
         children: [
-          t ? /* @__PURE__ */ h(Ne, { children: [
-            /* @__PURE__ */ a(Ue, { placeholder: J }),
-            s && x()
-          ] }) : Fe(),
-          s && !f && x(),
+          t ? /* @__PURE__ */ h(Te, { children: [
+            /* @__PURE__ */ a(Be, { placeholder: J }),
+            s && v()
+          ] }) : Se(),
+          s && !f && v(),
           /* @__PURE__ */ h("span", { className: "select-toggle-actions", children: [
             /* @__PURE__ */ a(
               Ve,
               {
-                showClear: se,
+                showClear: oe,
                 selectedItem: c,
                 onClear: xe
               }
@@ -134,45 +135,45 @@ const N = -1, ot = (G) => {
         ]
       }
     );
-    return !S && !_ && !k ? q : /* @__PURE__ */ a(
-      We,
+    return !S && !V && !_ ? q : /* @__PURE__ */ a(
+      je,
       {
         bsSize: w,
         inputAddon: S,
-        errorMessage: _,
-        warningMessage: k,
-        messageWhiteSpace: re,
+        errorMessage: V,
+        warningMessage: _,
+        messageWhiteSpace: le,
         children: q
       }
     );
-  }, Me = () => {
-    const e = ie.map((t) => (t.selected = r.indexOf(t.id) !== -1, t));
+  }, be = () => {
+    const e = ce.map((t) => (t.selected = r.indexOf(t.id) !== -1, t));
     return /* @__PURE__ */ a(
-      Re,
+      ke,
       {
         isOpen: l,
         isLoading: Q,
         options: e,
-        focusedItemIndex: ue,
-        keyboardUsed: fe,
-        updateDOMValues: Ce,
-        onSelect: be,
+        focusedItemIndex: fe,
+        keyboardUsed: me,
+        updateDOMValues: Fe,
+        onSelect: De,
         onClose: L,
-        noItemMessage: oe,
+        noItemMessage: ne,
         pullRight: Z,
         useActiveClass: !0,
         dropup: Y,
         autoDropDirection: $,
-        dropdownClassName: le
+        dropdownClassName: ae
       }
     );
   }, Oe = (e) => {
     e.preventDefault();
-    const t = e.currentTarget.value, s = Ee(ce, t, o);
+    const t = e.currentTarget.value, s = Ee(de, t, o);
     l || M(!0);
     const c = s.length > 0 ? 0 : -1;
-    m(!0), p(t), u(s), s.length > 0 && g(!0), O(c);
-  }, be = (e) => {
+    m(!0), p(t), u(s), s.length > 0 && g(!0), b(c);
+  }, De = (e) => {
     if (e?.disabled)
       return;
     const t = e ? j(e.id) : r;
@@ -180,42 +181,43 @@ const N = -1, ot = (G) => {
   }, j = (e) => {
     const t = [...r], s = r.indexOf(e);
     return s !== -1 ? t.splice(s, 1) : t.push(e), t;
-  }, De = (e, t) => {
+  }, ve = (e, t) => {
     e.stopPropagation();
     const s = j(t);
     d(s), I(s);
   }, xe = () => {
-    d([]), m(!1), p(""), u(o), g(!1), O(N), I([]);
-  }, ve = (e) => {
+    d([]), m(!1), p(""), u(o), g(!1), b(N), I([]);
+  }, Ae = (e) => {
     switch (e.key) {
       case "Space":
-        l || (e.preventDefault(), v(e));
+        l || (e.preventDefault(), x(e));
         break;
       case "Enter":
-        l || (e.preventDefault(), v(e));
+        l || (e.preventDefault(), x(e));
         break;
     }
-  }, v = (e) => {
+  }, x = (e) => {
     if (y || U)
       return;
     const t = e.detail === 0;
     M((s) => !s), g(t);
   }, L = () => {
-    l && (M(!1), m(!1), p(""), u(o), O(N), g(!1), K?.current?.focus());
-  }, Ae = X(
+    l && (M(!1), m(!1), p(""), u(o), b(N), g(!1), K?.current?.focus());
+  }, Ne = X(
     "select",
     "multiselect",
     "dropdown",
     l && "open",
-    te && "has-error",
-    V && V
+    se && "has-error",
+    ee === "blank" && "select-blank",
+    E && E
   );
-  return /* @__PURE__ */ h("div", { ...ae, className: Ae, ref: pe, children: [
-    Se(),
-    Me()
+  return /* @__PURE__ */ h("div", { ...ie, className: Ne, ref: ge, children: [
+    Me(),
+    be()
   ] });
 };
 export {
-  ot as default
+  nt as default
 };
 //# sourceMappingURL=Multiselect.js.map

package/components/selects/Multiselect.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Multiselect.js","sources":["../../../src/components/selects/Multiselect.tsx"],"sourcesContent":["import type React from 'react';\nimport { useRef, useState } from 'react';\nimport { isEqual } from 'es-toolkit/predicate';\nimport { isEmpty } from 'es-toolkit/compat';\nimport { noop } from 'es-toolkit/function';\n\nimport classNames from '../../utils/classNames';\nimport BaseSelectDropdown, { filterOptions, type OptionDOMValue, type SelectOption } from './BaseSelectDropdown';\nimport ClearButton from './ClearButton';\nimport MultiselectToggleCounter from './MultiselectToggleCounter';\nimport MultiselectToggleSelection from './MultiselectToggleSelection';\nimport MultiselectToggleFilter from './MultiselectToggleFilter';\nimport MultiselectTogglePlaceholder from './MultiselectTogglePlaceholder';\nimport useClickOutside from '../../useClickOutside';\nimport useMergeRefs from '../../hooks/useMergeRefs';\nimport WithFeedbackAndAddon, { type WithFeedbackAndAddonProps } from './WithFeedbackAndAddon';\n\nconst DEFAULT_FOCUSED_ITEM_INDEX = -1;\n\nexport type MultiselectCounterMessage = {\n /*\n Text that will be used when a single item is selected.\n /\n one: string \| React.ReactNode;\n\n /\n Text that will be used when multiple item are selected.\n /\n many: string \| React.ReactNode;\n};\n\nexport type MultiselectOption = SelectOption & {};\n\nexport type MultiselectProps<T extends MultiselectOption> = Omit<WithFeedbackAndAddonProps, 'bsSize'> & {\n /\n Passed through as HTML attribute to the toggle button.\n /\n name?: string;\n\n /\n Passed as HTML attribute to the toggle button.\n \n @default Uses the value given to `name` if not provided explicitly.\n /\n id?: string;\n\n /\n Items to display in the dropdown menu.\n \n @default []\n /\n options?: T[];\n\n /\n Sets the ids of the selected options when the component is already mounted.\n /\n value?: string[];\n\n /\n Callback function triggered when an item is selected.\n \n @param selectedItemIds Array containing all the IDs that have been selected.\n \n @default () => {}\n /\n onChange?: (selectedItemIds: string[]) => void;\n\n /\n Text to display when nothing is selected.\n /\n placeholder?: string \| React.ReactNode;\n\n /\n Defines whether the dropdown opens upwards.\n \n Set to `true` additionally disables autoDrop feature.\n \n @default false\n /\n dropup?: boolean;\n\n /\n Defines whether the dropdown opens right aligned to the dropdown toggle.\n \n Set to 'true' additionally disables autoDrop feature.\n \n @default false\n /\n pullRight?: boolean;\n\n /\n Enables or disables the autoDrop positioning feature.\n \n When enabled, the option list opens below or above the input depending on the surrounding space.\n \n @default true\n /\n autoDropDirection?: boolean;\n\n /\n Shows a loading spinner instead of the menu items if set to true.\n * @default false\n /\n isLoading?: boolean;\n\n /\n Defines the size of the select to be rendered.\n \n @default 'md'\n /\n bsSize?: 'sm' \| 'md' \| 'lg';\n\n /\n Option to disable the opening of the option list.\n \n @default false\n /\n disabled?: boolean;\n\n /\n Sets the input's tabindex attribute.\n \n The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being\n * sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for\n * sequential focus navigation.\n \n @default 0\n /\n tabIndex?: number;\n\n /\n Defines whether the Bootstrap error classes shall be added to the toggle element.\n \n @default false\n /\n hasError?: boolean;\n\n /\n Defines whether the selected items wrap around within the dropdown toggle.\n \n @default false\n /\n multiline?: boolean;\n\n /\n Defines whether the component should be filterable.\n \n @default false\n /\n useFilter?: boolean;\n\n /\n Set to show a clear button.\n \n @default false\n /\n useClear?: boolean;\n\n /\n Text that shall be shown when not match was found when filtering.\n /\n noItemMessage?: string \| React.ReactNode;\n\n /\n Object that will render the number of selected items instead of individual items.\n \n Using this prop will disable the filter functionality.\n /\n counterMessage?: MultiselectCounterMessage;\n\n /\n Optional render function that is used to render the message how many items have been selected.\n \n Using this prop will disable the filter functionality.\n \n @param selectedAmount The total amount of selected items.\n /\n renderCounterMessage?: (selectedAmount: number) => React.ReactNode;\n\n /\n Set to show only the icon and not the label of selected item.\n \n @default false\n /\n showSelectedItemIcon?: boolean;\n\n /\n Set to show all item icons within the toggle element.\n \n Selected items are highlighted and unselected items are shown as inactive.\n \n @default false\n /\n showUnselectedItemIcons?: boolean;\n\n /\n Additional classes to be set to the dropdown.\n /\n dropdownClassName?: string;\n\n /\n Additional classes to be set to the select/input.\n /\n btnClassName?: string;\n\n /\n Additional classes to be set to the select wrapper\n */\n className?: string;\n};\n\nconst Multiselect = (props: MultiselectProps<MultiselectOption>) => {\n const {\n name,\n id = name,\n options = [],\n value,\n onChange = noop,\n placeholder,\n isLoading = false,\n dropup = false,\n pullRight = false,\n autoDropDirection = true,\n bsSize = 'md',\n disabled = false,\n tabIndex = 0,\n hasError = false,\n useFilter = false,\n useClear = false,\n multiline = false,\n noItemMessage,\n counterMessage,\n renderCounterMessage,\n showSelectedItemIcon = false,\n showUnselectedItemIcons = false,\n className,\n inputAddon,\n errorMessage,\n warningMessage,\n messageWhiteSpace = 'normal',\n btnClassName,\n dropdownClassName,\n ...remainingProps\n } = props;\n\n const [isOpen, setIsOpen] = useState(false);\n const [selectedItemIds, setSelectedItemIds] = useState<string[]>(value \|\| []);\n const [isFilterActive, setIsFilterActive] = useState(false);\n const [filterValue, setFilterValue] = useState('');\n const [filteredOptions, setFilteredOptions] = useState<MultiselectOption[]>(options);\n const [itemDOMValues, setItemDOMValues] = useState<OptionDOMValue[]>([]);\n const [focusedItemIndex, setFocusedItemIndex] = useState(DEFAULT_FOCUSED_ITEM_INDEX);\n const [keyboardUsed, setKeyboardUsed] = useState(false);\n\n const refToggle = useRef<HTMLButtonElement>(null);\n const refMultiSelectWrapper = useRef<HTMLDivElement>(null);\n\n const ref = useClickOutside(event => {\n // Check if the click is truly outside the multiselect wrapper\n if (refMultiSelectWrapper.current && !refMultiSelectWrapper.current.contains(event.target as Node)) {\n closeMenu();\n }\n });\n\n const mergedSelectRefs = useMergeRefs(refMultiSelectWrapper, ref);\n\n const updateSelectedItems = (optionsToCheck: MultiselectOption[], selectedItem: string[] \| undefined) => {\n if (selectedItem) {\n setSelectedItemIds(selectedItem);\n } else if (optionsToCheck) {\n const filteredBySelection = optionsToCheck.filter(item => item.selected);\n setSelectedItemIds(filteredBySelection.map(option => option.id));\n }\n };\n\n // Update the selectedItems on first render.\n // Note, we use a ref instead of an effect as the effect is triggered too late\n const firstRenderRef = useRef<boolean>(true);\n if (firstRenderRef.current) {\n updateSelectedItems(options, value);\n firstRenderRef.current = false;\n }\n\n // Update selection based on changed value prop\n const [previousValue, setPreviousValue] = useState(value);\n if (!isEqual(value, previousValue)) {\n updateSelectedItems(options, value);\n setPreviousValue(value);\n }\n\n // Update options when they have changed from the outside\n const [previousOptions, setPreviousOptions] = useState(options);\n if (!isEqual(options, previousOptions)) {\n updateSelectedItems(options, value);\n setFilteredOptions(options);\n setPreviousOptions(options);\n }\n\n const updateDOMValues = (updatedItemDOMValues: OptionDOMValue[] = []) => {\n setItemDOMValues(updatedItemDOMValues);\n };\n\n const renderFilter = () => (\n <MultiselectToggleFilter\n isActive={isFilterActive \|\| !!filterValue}\n selectedItemIds={selectedItemIds}\n filterValue={filterValue}\n onFilterChange={handleFilterChange}\n />\n );\n\n const renderSelection = () => {\n if (counterMessage \|\| renderCounterMessage) {\n return (\n <MultiselectToggleCounter\n selectedAmount={selectedItemIds.length}\n counterMessage={counterMessage}\n customRenderer={renderCounterMessage}\n />\n );\n }\n\n return (\n <MultiselectToggleSelection\n options={options}\n selectedItemIds={selectedItemIds}\n showSelectedItemIcon={showSelectedItemIcon}\n showUnselectedItemIcons={showUnselectedItemIcons}\n onRemoveItem={handleRemoveSelectedItem}\n multiline={multiline}\n hasInputAddon={!!inputAddon}\n hasFilter={useFilter}\n >\n {multiline && renderFilter()}\n </MultiselectToggleSelection>\n );\n };\n\n const renderToggle = () => {\n const wrapperClassNames = classNames(\n 'dropdown-toggle',\n 'form-control',\n 'text-left',\n btnClassName && btnClassName,\n bsSize === 'sm' && 'input-sm',\n bsSize === 'lg' && 'input-lg',\n multiline && 'height-auto',\n disabled && 'disabled'\n );\n\n const showPlaceholder = isEmpty(selectedItemIds) && !showUnselectedItemIcons;\n const showFilter = useFilter && isOpen && !counterMessage && !renderCounterMessage;\n const selectedItemForClearButton =\n selectedItemIds.length > 0 ? ({ id: '__multiselect-clear__', label: '' } as SelectOption) : null;\n\n const toggleButton = (\n <button\n type='button'\n id={id}\n name={name}\n className={wrapperClassNames}\n data-toggle='dropdown'\n tabIndex={tabIndex}\n aria-haspopup='true'\n aria-expanded={isOpen}\n onClick={onToggle}\n onKeyDown={handleToggleKeyDown}\n ref={refToggle}\n >\n {showPlaceholder ? (\n <>\n <MultiselectTogglePlaceholder placeholder={placeholder} />\n {showFilter && renderFilter()}\n </>\n ) : (\n renderSelection()\n )}\n {showFilter && !multiline && renderFilter()}\n <span className='select-toggle-actions'>\n <ClearButton\n showClear={useClear}\n selectedItem={selectedItemForClearButton}\n onClear={handleClearSelectedItems}\n />\n <span className='caret' />\n </span>\n </button>\n );\n\n if (!inputAddon && !errorMessage && !warningMessage) {\n return toggleButton;\n }\n\n return (\n <WithFeedbackAndAddon\n bsSize={bsSize}\n inputAddon={inputAddon}\n errorMessage={errorMessage}\n warningMessage={warningMessage}\n messageWhiteSpace={messageWhiteSpace}\n >\n {toggleButton}\n </WithFeedbackAndAddon>\n );\n };\n\n const renderDropdownMenu = () => {\n const nonSelectedOptions = filteredOptions.map(option => {\n option.selected = selectedItemIds.indexOf(option.id) !== -1;\n return option;\n });\n\n return (\n <BaseSelectDropdown\n isOpen={isOpen}\n isLoading={isLoading}\n options={nonSelectedOptions}\n focusedItemIndex={focusedItemIndex}\n keyboardUsed={keyboardUsed}\n updateDOMValues={updateDOMValues}\n onSelect={onOptionChange}\n onClose={closeMenu}\n noItemMessage={noItemMessage}\n pullRight={pullRight}\n useActiveClass\n dropup={dropup}\n autoDropDirection={autoDropDirection}\n dropdownClassName={dropdownClassName}\n />\n );\n };\n\n const handleFilterChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n event.preventDefault();\n\n const targetFilterValue = event.currentTarget.value;\n const optionsFiltered = filterOptions(itemDOMValues, targetFilterValue, options);\n\n if (!isOpen) {\n // Ensure dropdown stays open when filtering\n setIsOpen(true);\n }\n\n const newFocusedItemIndex = optionsFiltered.length > 0 ? 0 : -1;\n\n setIsFilterActive(true);\n setFilterValue(targetFilterValue);\n setFilteredOptions(optionsFiltered);\n\n if (optionsFiltered.length > 0) {\n // Only set keyboard used if there are filtered options\n setKeyboardUsed(true);\n }\n\n setFocusedItemIndex(newFocusedItemIndex);\n };\n\n const onOptionChange = (currentSelectedItem: MultiselectOption \| undefined) => {\n // prevent selecting disabled Items via keyboard\n if (currentSelectedItem?.disabled) {\n return;\n }\n\n const updatedSelectedItems = currentSelectedItem ? updateSelection(currentSelectedItem.id) : selectedItemIds;\n\n // Reset everything after an option was selected. Remove the filter again.\n setSelectedItemIds(updatedSelectedItems);\n setIsFilterActive(false);\n setFilterValue('');\n setFilteredOptions(options);\n\n onChange(updatedSelectedItems);\n };\n\n const updateSelection = (selectedItemId: string) => {\n const newSelectedItems = [...selectedItemIds];\n const itemIndex = selectedItemIds.indexOf(selectedItemId);\n\n if (itemIndex !== -1) {\n newSelectedItems.splice(itemIndex, 1);\n } else {\n newSelectedItems.push(selectedItemId);\n }\n\n return newSelectedItems;\n };\n\n const handleRemoveSelectedItem = (event: React.MouseEvent<HTMLSpanElement>, itemId: string) => {\n event.stopPropagation();\n\n const newSelectedItems = updateSelection(itemId);\n setSelectedItemIds(newSelectedItems);\n\n onChange(newSelectedItems);\n };\n\n const handleClearSelectedItems = () => {\n setSelectedItemIds([]);\n setIsFilterActive(false);\n setFilterValue('');\n setFilteredOptions(options);\n setKeyboardUsed(false);\n setFocusedItemIndex(DEFAULT_FOCUSED_ITEM_INDEX);\n\n onChange([]);\n };\n\n const handleToggleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n switch (event.key) {\n case 'Space':\n if (!isOpen) {\n // open on space\n event.preventDefault();\n onToggle(event);\n }\n break;\n case 'Enter':\n if (!isOpen) {\n // open on enter\n event.preventDefault();\n onToggle(event);\n }\n break;\n default:\n break;\n }\n };\n\n const onToggle = (event: React.MouseEvent<HTMLButtonElement> \| React.KeyboardEvent<HTMLButtonElement>) => {\n // Don't toggle when component is disabled or an item in the toggle was clicked in order to remove from\n // selection neither close when filter is active, means entering some filter value\n // in order to avoid closing menu on space but allow to use it for filtering\n if (disabled \|\| isFilterActive) {\n return;\n }\n\n // using the enter key on the toggle button will trigger a synthetic click event as all buttons are of\n // type submit by default in HTML. In order to differentiate between real click and a synthetic event\n // caused by they keyboard, use the event details. A synthetic event is always 0.\n const isKeyboardUsed = event.detail === 0;\n\n setIsOpen(prevValue => !prevValue);\n setKeyboardUsed(isKeyboardUsed);\n };\n\n const closeMenu = () => {\n if (isOpen) {\n setIsOpen(false);\n setIsFilterActive(false);\n setFilterValue('');\n setFilteredOptions(options);\n setFocusedItemIndex(DEFAULT_FOCUSED_ITEM_INDEX);\n setKeyboardUsed(false);\n\n refToggle?.current?.focus();\n }\n };\n\n const wrapperClasses = classNames(\n 'select',\n 'multiselect',\n 'dropdown',\n isOpen && 'open',\n hasError && 'has-error',\n className && className\n );\n\n return (\n <div {...remainingProps} className={wrapperClasses} ref={mergedSelectRefs}>\n {renderToggle()}\n {renderDropdownMenu()}\n </div>\n );\n};\n\nexport default Multiselect;\n"],"names":["DEFAULT_FOCUSED_ITEM_INDEX","Multiselect","props","name","id","options","value","onChange","noop","placeholder","isLoading","dropup","pullRight","autoDropDirection","bsSize","disabled","tabIndex","hasError","useFilter","useClear","multiline","noItemMessage","counterMessage","renderCounterMessage","showSelectedItemIcon","showUnselectedItemIcons","className","inputAddon","errorMessage","warningMessage","messageWhiteSpace","btnClassName","dropdownClassName","remainingProps","isOpen","setIsOpen","useState","selectedItemIds","setSelectedItemIds","isFilterActive","setIsFilterActive","filterValue","setFilterValue","filteredOptions","setFilteredOptions","itemDOMValues","setItemDOMValues","focusedItemIndex","setFocusedItemIndex","keyboardUsed","setKeyboardUsed","refToggle","useRef","refMultiSelectWrapper","ref","useClickOutside","event","closeMenu","mergedSelectRefs","useMergeRefs","updateSelectedItems","optionsToCheck","selectedItem","filteredBySelection","item","option","firstRenderRef","previousValue","setPreviousValue","isEqual","previousOptions","setPreviousOptions","updateDOMValues","updatedItemDOMValues","renderFilter","jsx","MultiselectToggleFilter","handleFilterChange","renderSelection","MultiselectToggleCounter","MultiselectToggleSelection","handleRemoveSelectedItem","renderToggle","wrapperClassNames","classNames","showPlaceholder","isEmpty","showFilter","selectedItemForClearButton","toggleButton","jsxs","onToggle","handleToggleKeyDown","Fragment","MultiselectTogglePlaceholder","ClearButton","handleClearSelectedItems","WithFeedbackAndAddon","renderDropdownMenu","nonSelectedOptions","BaseSelectDropdown","onOptionChange","targetFilterValue","optionsFiltered","filterOptions","newFocusedItemIndex","currentSelectedItem","updatedSelectedItems","updateSelection","selectedItemId","newSelectedItems","itemIndex","itemId","isKeyboardUsed","prevValue","wrapperClasses"],"mappings":"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"}
1	+ {"version":3,"file":"Multiselect.js","sources":["../../../src/components/selects/Multiselect.tsx"],"sourcesContent":["import type React from 'react';\nimport { useRef, useState } from 'react';\nimport { isEqual } from 'es-toolkit/predicate';\nimport { isEmpty } from 'es-toolkit/compat';\nimport { noop } from 'es-toolkit/function';\n\nimport classNames from '../../utils/classNames';\nimport BaseSelectDropdown, { filterOptions, type OptionDOMValue, type SelectOption } from './BaseSelectDropdown';\nimport ClearButton from './ClearButton';\nimport MultiselectToggleCounter from './MultiselectToggleCounter';\nimport MultiselectToggleSelection from './MultiselectToggleSelection';\nimport MultiselectToggleFilter from './MultiselectToggleFilter';\nimport MultiselectTogglePlaceholder from './MultiselectTogglePlaceholder';\nimport useClickOutside from '../../useClickOutside';\nimport useMergeRefs from '../../hooks/useMergeRefs';\nimport WithFeedbackAndAddon, { type WithFeedbackAndAddonProps } from './WithFeedbackAndAddon';\n\nconst DEFAULT_FOCUSED_ITEM_INDEX = -1;\n\nexport type MultiselectCounterMessage = {\n /*\n Text that will be used when a single item is selected.\n /\n one: string \| React.ReactNode;\n\n /\n Text that will be used when multiple item are selected.\n /\n many: string \| React.ReactNode;\n};\n\nexport type MultiselectOption = SelectOption & {};\n\nexport type MultiselectProps<T extends MultiselectOption> = Omit<WithFeedbackAndAddonProps, 'bsSize'> & {\n /\n Passed through as HTML attribute to the toggle button.\n /\n name?: string;\n\n /\n Passed as HTML attribute to the toggle button.\n \n @default Uses the value given to `name` if not provided explicitly.\n /\n id?: string;\n\n /\n Items to display in the dropdown menu.\n \n @default []\n /\n options?: T[];\n\n /\n Sets the ids of the selected options when the component is already mounted.\n /\n value?: string[];\n\n /\n Callback function triggered when an item is selected.\n \n @param selectedItemIds Array containing all the IDs that have been selected.\n \n @default () => {}\n /\n onChange?: (selectedItemIds: string[]) => void;\n\n /\n Text to display when nothing is selected.\n /\n placeholder?: string \| React.ReactNode;\n\n /\n Defines whether the dropdown opens upwards.\n \n Set to `true` additionally disables autoDrop feature.\n \n @default false\n /\n dropup?: boolean;\n\n /\n Defines whether the dropdown opens right aligned to the dropdown toggle.\n \n Set to 'true' additionally disables autoDrop feature.\n \n @default false\n /\n pullRight?: boolean;\n\n /\n Enables or disables the autoDrop positioning feature.\n \n When enabled, the option list opens below or above the input depending on the surrounding space.\n \n @default true\n /\n autoDropDirection?: boolean;\n\n /\n Shows a loading spinner instead of the menu items if set to true.\n * @default false\n /\n isLoading?: boolean;\n\n /\n Defines the size of the select to be rendered.\n \n @default 'md'\n /\n bsSize?: 'sm' \| 'md' \| 'lg';\n\n /\n Defines the visual variant of the select.\n \n @default 'default'\n /\n variant?: 'default' \| 'blank';\n\n /\n Option to disable the opening of the option list.\n \n @default false\n /\n disabled?: boolean;\n\n /\n Sets the input's tabindex attribute.\n \n The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being\n * sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for\n * sequential focus navigation.\n \n @default 0\n /\n tabIndex?: number;\n\n /\n Defines whether the Bootstrap error classes shall be added to the toggle element.\n \n @default false\n /\n hasError?: boolean;\n\n /\n Defines whether the selected items wrap around within the dropdown toggle.\n \n @default false\n /\n multiline?: boolean;\n\n /\n Defines whether the component should be filterable.\n \n @default false\n /\n useFilter?: boolean;\n\n /\n Set to show a clear button.\n \n @default false\n /\n useClear?: boolean;\n\n /\n Text that shall be shown when not match was found when filtering.\n /\n noItemMessage?: string \| React.ReactNode;\n\n /\n Object that will render the number of selected items instead of individual items.\n \n Using this prop will disable the filter functionality.\n /\n counterMessage?: MultiselectCounterMessage;\n\n /\n Optional render function that is used to render the message how many items have been selected.\n \n Using this prop will disable the filter functionality.\n \n @param selectedAmount The total amount of selected items.\n /\n renderCounterMessage?: (selectedAmount: number) => React.ReactNode;\n\n /\n Set to show only the icon and not the label of selected item.\n \n @default false\n /\n showSelectedItemIcon?: boolean;\n\n /\n Set to show all item icons within the toggle element.\n \n Selected items are highlighted and unselected items are shown as inactive.\n \n @default false\n /\n showUnselectedItemIcons?: boolean;\n\n /\n Additional classes to be set to the dropdown.\n /\n dropdownClassName?: string;\n\n /\n Additional classes to be set to the select/input.\n /\n btnClassName?: string;\n\n /\n Additional classes to be set to the select wrapper\n */\n className?: string;\n};\n\nconst Multiselect = (props: MultiselectProps<MultiselectOption>) => {\n const {\n name,\n id = name,\n options = [],\n value,\n onChange = noop,\n placeholder,\n isLoading = false,\n dropup = false,\n pullRight = false,\n autoDropDirection = true,\n bsSize = 'md',\n variant = 'default',\n disabled = false,\n tabIndex = 0,\n hasError = false,\n useFilter = false,\n useClear = false,\n multiline = false,\n noItemMessage,\n counterMessage,\n renderCounterMessage,\n showSelectedItemIcon = false,\n showUnselectedItemIcons = false,\n className,\n inputAddon,\n errorMessage,\n warningMessage,\n messageWhiteSpace = 'normal',\n btnClassName,\n dropdownClassName,\n ...remainingProps\n } = props;\n\n const [isOpen, setIsOpen] = useState(false);\n const [selectedItemIds, setSelectedItemIds] = useState<string[]>(value \|\| []);\n const [isFilterActive, setIsFilterActive] = useState(false);\n const [filterValue, setFilterValue] = useState('');\n const [filteredOptions, setFilteredOptions] = useState<MultiselectOption[]>(options);\n const [itemDOMValues, setItemDOMValues] = useState<OptionDOMValue[]>([]);\n const [focusedItemIndex, setFocusedItemIndex] = useState(DEFAULT_FOCUSED_ITEM_INDEX);\n const [keyboardUsed, setKeyboardUsed] = useState(false);\n\n const refToggle = useRef<HTMLButtonElement>(null);\n const refMultiSelectWrapper = useRef<HTMLDivElement>(null);\n\n const ref = useClickOutside(event => {\n // Check if the click is truly outside the multiselect wrapper\n if (refMultiSelectWrapper.current && !refMultiSelectWrapper.current.contains(event.target as Node)) {\n closeMenu();\n }\n });\n\n const mergedSelectRefs = useMergeRefs(refMultiSelectWrapper, ref);\n\n const updateSelectedItems = (optionsToCheck: MultiselectOption[], selectedItem: string[] \| undefined) => {\n if (selectedItem) {\n setSelectedItemIds(selectedItem);\n } else if (optionsToCheck) {\n const filteredBySelection = optionsToCheck.filter(item => item.selected);\n setSelectedItemIds(filteredBySelection.map(option => option.id));\n }\n };\n\n // Update the selectedItems on first render.\n // Note, we use a ref instead of an effect as the effect is triggered too late\n const firstRenderRef = useRef<boolean>(true);\n if (firstRenderRef.current) {\n updateSelectedItems(options, value);\n firstRenderRef.current = false;\n }\n\n // Update selection based on changed value prop\n const [previousValue, setPreviousValue] = useState(value);\n if (!isEqual(value, previousValue)) {\n updateSelectedItems(options, value);\n setPreviousValue(value);\n }\n\n // Update options when they have changed from the outside\n const [previousOptions, setPreviousOptions] = useState(options);\n if (!isEqual(options, previousOptions)) {\n updateSelectedItems(options, value);\n setFilteredOptions(options);\n setPreviousOptions(options);\n }\n\n const updateDOMValues = (updatedItemDOMValues: OptionDOMValue[] = []) => {\n setItemDOMValues(updatedItemDOMValues);\n };\n\n const renderFilter = () => (\n <MultiselectToggleFilter\n isActive={isFilterActive \|\| !!filterValue}\n selectedItemIds={selectedItemIds}\n filterValue={filterValue}\n onFilterChange={handleFilterChange}\n />\n );\n\n const renderSelection = () => {\n if (counterMessage \|\| renderCounterMessage) {\n return (\n <MultiselectToggleCounter\n selectedAmount={selectedItemIds.length}\n counterMessage={counterMessage}\n customRenderer={renderCounterMessage}\n />\n );\n }\n\n return (\n <MultiselectToggleSelection\n options={options}\n selectedItemIds={selectedItemIds}\n showSelectedItemIcon={showSelectedItemIcon}\n showUnselectedItemIcons={showUnselectedItemIcons}\n onRemoveItem={handleRemoveSelectedItem}\n multiline={multiline}\n hasInputAddon={!!inputAddon}\n hasFilter={useFilter}\n >\n {multiline && renderFilter()}\n </MultiselectToggleSelection>\n );\n };\n\n const renderToggle = () => {\n const wrapperClassNames = classNames(\n 'dropdown-toggle',\n 'form-control',\n 'text-left',\n btnClassName && btnClassName,\n bsSize === 'sm' && 'input-sm',\n bsSize === 'lg' && 'input-lg',\n multiline && 'height-auto',\n disabled && 'disabled'\n );\n\n const showPlaceholder = isEmpty(selectedItemIds) && !showUnselectedItemIcons;\n const showFilter = useFilter && isOpen && !counterMessage && !renderCounterMessage;\n const selectedItemForClearButton =\n selectedItemIds.length > 0 ? ({ id: '__multiselect-clear__', label: '' } as SelectOption) : null;\n\n const toggleButton = (\n <button\n type='button'\n id={id}\n name={name}\n className={wrapperClassNames}\n data-toggle='dropdown'\n tabIndex={tabIndex}\n aria-haspopup='true'\n aria-expanded={isOpen}\n onClick={onToggle}\n onKeyDown={handleToggleKeyDown}\n ref={refToggle}\n >\n {showPlaceholder ? (\n <>\n <MultiselectTogglePlaceholder placeholder={placeholder} />\n {showFilter && renderFilter()}\n </>\n ) : (\n renderSelection()\n )}\n {showFilter && !multiline && renderFilter()}\n <span className='select-toggle-actions'>\n <ClearButton\n showClear={useClear}\n selectedItem={selectedItemForClearButton}\n onClear={handleClearSelectedItems}\n />\n <span className='caret' />\n </span>\n </button>\n );\n\n if (!inputAddon && !errorMessage && !warningMessage) {\n return toggleButton;\n }\n\n return (\n <WithFeedbackAndAddon\n bsSize={bsSize}\n inputAddon={inputAddon}\n errorMessage={errorMessage}\n warningMessage={warningMessage}\n messageWhiteSpace={messageWhiteSpace}\n >\n {toggleButton}\n </WithFeedbackAndAddon>\n );\n };\n\n const renderDropdownMenu = () => {\n const nonSelectedOptions = filteredOptions.map(option => {\n option.selected = selectedItemIds.indexOf(option.id) !== -1;\n return option;\n });\n\n return (\n <BaseSelectDropdown\n isOpen={isOpen}\n isLoading={isLoading}\n options={nonSelectedOptions}\n focusedItemIndex={focusedItemIndex}\n keyboardUsed={keyboardUsed}\n updateDOMValues={updateDOMValues}\n onSelect={onOptionChange}\n onClose={closeMenu}\n noItemMessage={noItemMessage}\n pullRight={pullRight}\n useActiveClass\n dropup={dropup}\n autoDropDirection={autoDropDirection}\n dropdownClassName={dropdownClassName}\n />\n );\n };\n\n const handleFilterChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n event.preventDefault();\n\n const targetFilterValue = event.currentTarget.value;\n const optionsFiltered = filterOptions(itemDOMValues, targetFilterValue, options);\n\n if (!isOpen) {\n // Ensure dropdown stays open when filtering\n setIsOpen(true);\n }\n\n const newFocusedItemIndex = optionsFiltered.length > 0 ? 0 : -1;\n\n setIsFilterActive(true);\n setFilterValue(targetFilterValue);\n setFilteredOptions(optionsFiltered);\n\n if (optionsFiltered.length > 0) {\n // Only set keyboard used if there are filtered options\n setKeyboardUsed(true);\n }\n\n setFocusedItemIndex(newFocusedItemIndex);\n };\n\n const onOptionChange = (currentSelectedItem: MultiselectOption \| undefined) => {\n // prevent selecting disabled Items via keyboard\n if (currentSelectedItem?.disabled) {\n return;\n }\n\n const updatedSelectedItems = currentSelectedItem ? updateSelection(currentSelectedItem.id) : selectedItemIds;\n\n // Reset everything after an option was selected. Remove the filter again.\n setSelectedItemIds(updatedSelectedItems);\n setIsFilterActive(false);\n setFilterValue('');\n setFilteredOptions(options);\n\n onChange(updatedSelectedItems);\n };\n\n const updateSelection = (selectedItemId: string) => {\n const newSelectedItems = [...selectedItemIds];\n const itemIndex = selectedItemIds.indexOf(selectedItemId);\n\n if (itemIndex !== -1) {\n newSelectedItems.splice(itemIndex, 1);\n } else {\n newSelectedItems.push(selectedItemId);\n }\n\n return newSelectedItems;\n };\n\n const handleRemoveSelectedItem = (event: React.MouseEvent<HTMLSpanElement>, itemId: string) => {\n event.stopPropagation();\n\n const newSelectedItems = updateSelection(itemId);\n setSelectedItemIds(newSelectedItems);\n\n onChange(newSelectedItems);\n };\n\n const handleClearSelectedItems = () => {\n setSelectedItemIds([]);\n setIsFilterActive(false);\n setFilterValue('');\n setFilteredOptions(options);\n setKeyboardUsed(false);\n setFocusedItemIndex(DEFAULT_FOCUSED_ITEM_INDEX);\n\n onChange([]);\n };\n\n const handleToggleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n switch (event.key) {\n case 'Space':\n if (!isOpen) {\n // open on space\n event.preventDefault();\n onToggle(event);\n }\n break;\n case 'Enter':\n if (!isOpen) {\n // open on enter\n event.preventDefault();\n onToggle(event);\n }\n break;\n default:\n break;\n }\n };\n\n const onToggle = (event: React.MouseEvent<HTMLButtonElement> \| React.KeyboardEvent<HTMLButtonElement>) => {\n // Don't toggle when component is disabled or an item in the toggle was clicked in order to remove from\n // selection neither close when filter is active, means entering some filter value\n // in order to avoid closing menu on space but allow to use it for filtering\n if (disabled \|\| isFilterActive) {\n return;\n }\n\n // using the enter key on the toggle button will trigger a synthetic click event as all buttons are of\n // type submit by default in HTML. In order to differentiate between real click and a synthetic event\n // caused by they keyboard, use the event details. A synthetic event is always 0.\n const isKeyboardUsed = event.detail === 0;\n\n setIsOpen(prevValue => !prevValue);\n setKeyboardUsed(isKeyboardUsed);\n };\n\n const closeMenu = () => {\n if (isOpen) {\n setIsOpen(false);\n setIsFilterActive(false);\n setFilterValue('');\n setFilteredOptions(options);\n setFocusedItemIndex(DEFAULT_FOCUSED_ITEM_INDEX);\n setKeyboardUsed(false);\n\n refToggle?.current?.focus();\n }\n };\n\n const wrapperClasses = classNames(\n 'select',\n 'multiselect',\n 'dropdown',\n isOpen && 'open',\n hasError && 'has-error',\n variant === 'blank' && 'select-blank',\n className && className\n );\n\n return (\n <div {...remainingProps} className={wrapperClasses} ref={mergedSelectRefs}>\n {renderToggle()}\n {renderDropdownMenu()}\n </div>\n );\n};\n\nexport default Multiselect;\n"],"names":["DEFAULT_FOCUSED_ITEM_INDEX","Multiselect","props","name","id","options","value","onChange","noop","placeholder","isLoading","dropup","pullRight","autoDropDirection","bsSize","variant","disabled","tabIndex","hasError","useFilter","useClear","multiline","noItemMessage","counterMessage","renderCounterMessage","showSelectedItemIcon","showUnselectedItemIcons","className","inputAddon","errorMessage","warningMessage","messageWhiteSpace","btnClassName","dropdownClassName","remainingProps","isOpen","setIsOpen","useState","selectedItemIds","setSelectedItemIds","isFilterActive","setIsFilterActive","filterValue","setFilterValue","filteredOptions","setFilteredOptions","itemDOMValues","setItemDOMValues","focusedItemIndex","setFocusedItemIndex","keyboardUsed","setKeyboardUsed","refToggle","useRef","refMultiSelectWrapper","ref","useClickOutside","event","closeMenu","mergedSelectRefs","useMergeRefs","updateSelectedItems","optionsToCheck","selectedItem","filteredBySelection","item","option","firstRenderRef","previousValue","setPreviousValue","isEqual","previousOptions","setPreviousOptions","updateDOMValues","updatedItemDOMValues","renderFilter","jsx","MultiselectToggleFilter","handleFilterChange","renderSelection","MultiselectToggleCounter","MultiselectToggleSelection","handleRemoveSelectedItem","renderToggle","wrapperClassNames","classNames","showPlaceholder","isEmpty","showFilter","selectedItemForClearButton","toggleButton","jsxs","onToggle","handleToggleKeyDown","Fragment","MultiselectTogglePlaceholder","ClearButton","handleClearSelectedItems","WithFeedbackAndAddon","renderDropdownMenu","nonSelectedOptions","BaseSelectDropdown","onOptionChange","targetFilterValue","optionsFiltered","filterOptions","newFocusedItemIndex","currentSelectedItem","updatedSelectedItems","updateSelection","selectedItemId","newSelectedItems","itemIndex","itemId","isKeyboardUsed","prevValue","wrapperClasses"],"mappings":"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"}

package/components/selects/Select.d.ts CHANGED Viewed

@@ -73,6 +73,12 @@ export type SelectProps<T extends SelectOption> = Omit<WithFeedbackAndAddonProps
      * @default 'md'
      */
     bsSize?: 'sm' | 'md' | 'lg';
+    /**
+     * Defines the visual variant of the select.
+     *
+     * @default 'default'
+     */
+    variant?: 'default' | 'blank';
     /**
      * Option to disable the opening of the option list.
      *