@orangelogic/design-system 4.41.0 → 4.42.0

package/library/chunks/{block-width.BazivzBm.js → block-width.Di5s5CkQ.js}

@@ -1076,6 +1076,9 @@ var lr = "data:application/json;base64,ewogICIxMjMiOiB7CiAgICAiY2F0ZWdvcmllcyI6I
 	async handleVariantChange() {
 		await this.updateComplete, this.runFirstUpdated();
 	}
+	async handleSelectOptionsChange() {
+		await this.updateComplete, await this.selectVirtualizer?.layoutComplete?.catch(() => void 0), this.select?.requestUpdate();
+	}
 	async handleCustomIconValidation() {
 		await this.updateComplete, await this.select?.updateComplete, this.updateCustomIconValidity();
 	}
@@ -1137,6 +1140,12 @@ var lr = "data:application/json;base64,ewogICIxMjMiOiB7CiAgICAiY2F0ZWdvcmllcyI6I
 	handleSearchInput(e) {
 		this.searchTerm = e.target.value.toLowerCase();
 	}
+	handleSelectSearchInput() {
+		this.searchTerm = this.select.displayInput.value.trim().toLowerCase();
+	}
+	handleSelectSearchReset(e) {
+		e.target === this.select && (this.searchTerm = "");
+	}
 	handleMenuSelect(e) {
 		let t = e.detail.item.value;
 		this.value = this.setValueMenuSelect(this.value.name, t), this.emit("cx-change");
@@ -1163,8 +1172,8 @@ var lr = "data:application/json;base64,ewogICIxMjMiOiB7CiAgICAiY2F0ZWdvcmllcyI6I
 	selectGetOptionLabel(e) {
 		return !e || !(e instanceof E) ? this.value?.name.toString() : e.value === "custom" ? this.customOptionLabel || this.localize.term("custom") : e.dataset.name || e.value.toString();
 	}
-	selectFilterCallback(e, t) {
-		return !e || !(e instanceof E) ? !1 : (this.searchTerm = t, !0);
+	selectFilterCallback(e) {
+		return e instanceof E;
 	}
 	renderIcon(e, t) {
 		return e.startsWith("fa ") ? n`<cx-icon slot=${v(t)} variant="fa" name=${e}></cx-icon>` : n`<cx-icon slot=${v(t)} name=${e}></cx-icon>`;
@@ -1182,7 +1191,7 @@ var lr = "data:application/json;base64,ewogICIxMjMiOiB7CiAgICAiY2F0ZWdvcmllcyI6I
 	}
 	renderSelectMode() {
 		let e = this.value?.name.trim();
-		return n`<cx-select part="base" class="icon-picker__select" value=${v(this.value?.name)} placeholder=${this.searchPlaceholder || this.localize.term("search")} no-option-text=${this.localize.term("noResults")} ?clearable=${this.clearable} .form=${this.requireCustomIcon ? this.closest("form") : void 0} hoist no-flip data-label=${this.localize.term("iconPicker")} @cx-change=${this.handleSelectValueChange} @cx-show=${this.handleSelectBeforeShow} @cx-after-show=${this.handleSelectShow} .setOptionCurrent=${this.setSelectOptionCurrent}>${this.renderSelectPrefixIcon(e)}
+		return n`<cx-select part="base" class="icon-picker__select" value=${v(this.value?.name)} placeholder=${this.searchPlaceholder || this.localize.term("search")} no-option-text=${this.localize.term("noResults")} ?clearable=${this.clearable} .form=${this.requireCustomIcon ? this.closest("form") : void 0} hoist no-flip data-label=${this.localize.term("iconPicker")} @cx-change=${this.handleSelectValueChange} @input=${this.handleSelectSearchInput} @cx-blur=${this.handleSelectSearchReset} @cx-clear=${this.handleSelectSearchReset} @cx-show=${this.handleSelectBeforeShow} @cx-after-show=${this.handleSelectShow} .setOptionCurrent=${this.setSelectOptionCurrent}>${this.renderSelectPrefixIcon(e)}
         ${y(this.showVirtualizer, () => n`<lit-virtualizer .items=${this.virtualListItems} .renderItem=${this.renderOption}></lit-virtualizer>`)}
         ${y(!this.noCustomOption, () => n`<div part="footer" class="icon-picker__select__footer"><cx-divider part="footer-divider" class="icon-picker__select__footer__divider"></cx-divider><cx-option part="custom-button" class="icon-picker__select__footer__option" value="custom">${y(this.customOptionIcon, () => n`<cx-icon slot="prefix" name=${this.customOptionIcon}></cx-icon>`)}${this.customOptionLabel || this.localize.term("custom")}</cx-option></div>`)}</cx-select>${y(this.value?.name === "custom", () => this.renderCustomIconPicker())}
     `;
@@ -1200,7 +1209,7 @@ var lr = "data:application/json;base64,ewogICIxMjMiOiB7CiAgICAiY2F0ZWdvcmllcyI6I
         ${y(this.canPickColor, () => n`<cx-bicolor-picker value=${at(this.color)} @cx-bicolor-picker-change=${this.handleBicolorChange}></cx-bicolor-picker>`)}</cx-space>`;
 	}
 };
-l([f(".icon-picker__select"), u("design:type", O === void 0 ? Object : O)], U.prototype, "select", void 0), l([f(".icon-picker__select__footer__option"), u("design:type", E === void 0 ? Object : E)], U.prototype, "customOption", void 0), l([f("cx-dropdown"), u("design:type", w === void 0 ? Object : w)], U.prototype, "dropdown", void 0), l([s({
+l([f(".icon-picker__select"), u("design:type", O === void 0 ? Object : O)], U.prototype, "select", void 0), l([f(".icon-picker__select__footer__option"), u("design:type", E === void 0 ? Object : E)], U.prototype, "customOption", void 0), l([f("cx-dropdown"), u("design:type", w === void 0 ? Object : w)], U.prototype, "dropdown", void 0), l([f(".icon-picker__select lit-virtualizer"), u("design:type", Object)], U.prototype, "selectVirtualizer", void 0), l([s({
 	converter: { fromAttribute(e) {
 		if (!e) return {
 			name: "",
@@ -1271,6 +1280,11 @@ l([f(".icon-picker__select"), u("design:type", O === void 0 ? Object : O)], U.pr
 	u("design:paramtypes", []),
 	u("design:returntype", Promise)
 ], U.prototype, "handleVariantChange", null), l([
+	g(["searchTerm", "showVirtualizer"], { waitUntilFirstUpdate: !0 }),
+	u("design:type", Function),
+	u("design:paramtypes", []),
+	u("design:returntype", Promise)
+], U.prototype, "handleSelectOptionsChange", null), l([
 	g("value", { waitUntilFirstUpdate: !0 }),
 	g("requireCustomIcon", { waitUntilFirstUpdate: !0 }),
 	g("variant"),

package/library/chunks/{config-manager.DjEc937J.js → config-manager.h-KN_Efl.js}

@@ -14,7 +14,7 @@ import { t as b } from "./style-map.DPGQIxip.js";
 import { t as x } from "./button.DnOMjl_G.js";
 import { t as ee } from "./tooltip.DWx9VYtS.js";
 import { t as te } from "./line-clamp.B7QEzpUF.js";
-import { C as ne, D as re, E as ie, O as ae, S as oe, T as se, _ as ce, a as le, b as ue, c as de, g as fe, i as pe, l as me, n as he, o as ge, s as S, t as C, v as w, w as T, x as E, y as D } from "./block-width.BazivzBm.js";
+import { C as ne, D as re, E as ie, O as ae, S as oe, T as se, _ as ce, a as le, b as ue, c as de, g as fe, i as pe, l as me, n as he, o as ge, s as S, t as C, v as w, w as T, x as E, y as D } from "./block-width.Di5s5CkQ.js";
 import { t as O } from "./typography.B0mkhqTB.js";
 import { t as k } from "./button-group.CPfXrqyq.js";
 import { t as A } from "./card.3c-X4hqR.js";

package/library/components/types.js

@@ -38,7 +38,7 @@ import { t as kt } from "../chunks/resize-observer.D9EHlnZI.js";
 import { t as At } from "../chunks/line-clamp.B7QEzpUF.js";
 import { t as jt } from "../chunks/tag.BySfbRok.js";
 import { t as Mt } from "../chunks/array-line-clamp.BWWMLJhi.js";
-import { A as Nt, C as Pt, D as Ft, E as It, O as Lt, S as Rt, T as zt, d as Bt, f as Vt, h as Ht, k as Ut, m as Wt, o as Gt, p as Kt, r as qt, s as Jt, t as Yt, u as Xt, w as Zt, x as Qt } from "../chunks/block-width.BazivzBm.js";
+import { A as Nt, C as Pt, D as Ft, E as It, O as Lt, S as Rt, T as zt, d as Bt, f as Vt, h as Ht, k as Ut, m as Wt, o as Gt, p as Kt, r as qt, s as Jt, t as Yt, u as Xt, w as Zt, x as Qt } from "../chunks/block-width.Di5s5CkQ.js";
 import { n as $t, t as en } from "../chunks/position-picker.dY_vgF_H.js";
 import { a as tn, i as nn, n as rn, o as an, r as on, s as sn, t as cn } from "../chunks/src.BJhIYoMP.js";
 import { a as ln, c as un, i as dn, n as fn, o as pn, r as mn, t as hn, u as gn } from "../chunks/time.p1t0NCwj.js";
@@ -95099,7 +95099,7 @@ var j5 = class extends d {
 		return this.mappedSupportedLanguages.length > 1;
 	}
 	ensureConfigUi() {
-		return this.configUiPromise ??= Promise.all([import("../chunks/config-manager.DjEc937J.js"), import("../chunks/configs-controller.Cm21QV6C.js").then((e) => e.n)]).then(async ([, e]) => {
+		return this.configUiPromise ??= Promise.all([import("../chunks/config-manager.h-KN_Efl.js"), import("../chunks/configs-controller.Cm21QV6C.js").then((e) => e.n)]).then(async ([, e]) => {
 			this.configsController ??= new e.default(this.localize), await customElements.whenDefined("cx-config-manager"), await this.configManager?.updateComplete;
 		});
 	}

package/library/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@orangelogic/design-system",
   "type": "module",
-  "version": "4.41.0",
+  "version": "4.42.0",
   "license": "UNLICENSED",
   "types": "library/types.d.ts",
   "scripts": {

package/library/packages/molecules/src/icon-picker/icon-picker.d.ts

@@ -74,6 +74,7 @@ export default class CxIconPicker extends CortexElement {
     private readonly select;
     private readonly customOption;
     private readonly dropdown?;
+    private readonly selectVirtualizer?;
     value: {
         name: string;
         src: string;
@@ -155,6 +156,10 @@ export default class CxIconPicker extends CortexElement {
      * @default undefined
      */
     onRequestAsset: ((type: AssetTypeString, multiple?: boolean) => Promise<Asset | Record<string, Asset>>) | undefined;
+    /**
+     * Lower-cased text the icon list is filtered by. Set from the select's input in select mode
+     * and from the panel's search input in button mode.
+     */
     searchTerm: string;
     /**
      * Recreate the virtualizer for each open because it does not reliably
@@ -171,6 +176,8 @@ export default class CxIconPicker extends CortexElement {
     /** Called by the containing form when reporting errors on save. */
     reportValidity(): boolean;
     handleVariantChange(): Promise<void>;
+    /** cx-select re-checks no-option-text only on its own render, not when the virtualizer swaps options. */
+    handleSelectOptionsChange(): Promise<void>;
     handleCustomIconValidation(): Promise<void>;
     private updateCustomIconValidity;
     renderOption(item: IconData): import('lit-html').TemplateResult<1> | typeof nothing;
@@ -200,12 +207,17 @@ export default class CxIconPicker extends CortexElement {
     handleContentBuilderAssetSelect(event: CxAssetPickerSelectEvent): Promise<void>;
     handleContentBuilderAssetDelete(): Promise<void>;
     private handleSearchInput;
+    /** Native input, not cx-input: cx-input also fires on an option pick, with its label in the input. */
+    private handleSelectSearchInput;
+    /** cx-select drops its typed filter on blur and on clear. */
+    private handleSelectSearchReset;
     private handleMenuSelect;
     private handleBicolorChange;
     private setValueMenuSelect;
     setSelectOptionCurrent(option: HTMLElement, current?: boolean): void;
     selectGetOptionLabel(option: HTMLElement): string;
-    selectFilterCallback(option: HTMLElement, value: string): boolean;
+    /** Filtering is done by virtualListItems; this runs per rendered option, so it can't track the search term. */
+    selectFilterCallback(option: HTMLElement): boolean;
     private renderIcon;
     private renderCustomIconPickerMenuItem;
     private renderCustomIconPicker;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@orangelogic/design-system",
   "type": "module",
-  "version": "4.41.0",
+  "version": "4.42.0",
   "license": "UNLICENSED",
   "types": "library/types.d.ts",
   "scripts": {