@genesislcap/foundation-ui 14.447.1 → 14.448.0-canary.wealth

package/dist/esm/search-bar/search-bar.js

@@ -18,6 +18,11 @@ export class SearchBar extends FoundationElement {
         this.minlength = INPUT_MIN_LENGTH;
         this.position = Position.BELOW;
         this.placeholder = 'Start typing to search';
+        /**
+         * @attr clear-button - when true, shows the end clear control when there are chips or typed text. When false, use {@link SearchBar.clear} or {@link SearchBar.clearSearch} to reset programmatically.
+         * @default true
+         */
+        this.clearButton = true;
         this.selectedOptions = [];
         this.normalizeDelimiter = (inputString) => {
             return inputString.trim().replace(/\t|\r\n|\n|\r|,/g, ' ');
@@ -28,14 +33,78 @@ export class SearchBar extends FoundationElement {
                 : previousText.concat(newText);
         };
     }
+    /**
+     * Clears all search chips and the current input, and emits `selectionChange` with an empty array.
+     * @public
+     */
     clear() {
         this.selectedOptions = [];
-        this.combobox.currentValue = '';
+        this.searchTerm = '';
+        if (this.combobox) {
+            this.combobox.currentValue = '';
+            this.combobox.value = '';
+        }
         this.$emit('selectionChange', []);
     }
+    /**
+     * Alias for {@link SearchBar.clear}.
+     * @public
+     */
     clearSearch() {
         this.clear();
     }
+    /**
+     * @internal
+     */
+    get showClearAffordance() {
+        var _a, _b, _c;
+        if (!this.clearButton) {
+            return false;
+        }
+        const typed = ((_c = (_a = this.searchTerm) !== null && _a !== void 0 ? _a : (_b = this.combobox) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : '').trim();
+        return this.selectedOptions.length > 0 || typed.length > 0;
+    }
+    /**
+     * True when every configured search field already has a chip (one term per field).
+     * @internal
+     */
+    get allSearchFieldsUsed() {
+        var _a;
+        if (!((_a = this.options) === null || _a === void 0 ? void 0 : _a.length)) {
+            return false;
+        }
+        return this.options.every((option) => this.selectedOptions.some((selected) => selected.field === option.field));
+    }
+    /**
+     * Evaluates whether an option is currently selectable.
+     * Falls back to default behavior when no custom `isEnabled` is provided.
+     * @internal
+     */
+    isOptionEnabled(option) {
+        if (option.isEnabled) {
+            return option.isEnabled(this.searchTerm, this.selectedOptions, this.minlength);
+        }
+        return (this.searchTerm.length >= this.minlength &&
+            !this.selectedOptions.some((selected) => selected.field === option.field));
+    }
+    selectedOptionsChanged() {
+        this.applySearchInputLock();
+    }
+    optionsChanged() {
+        this.applySearchInputLock();
+    }
+    applySearchInputLock() {
+        if (!this.combobox) {
+            return;
+        }
+        if (this.allSearchFieldsUsed) {
+            this.searchTerm = '';
+            this.combobox.value = '';
+            this.combobox.currentValue = '';
+            this.combobox.open = false;
+            this.filteredOptions = [];
+        }
+    }
     inputdeleted() {
         if (this.selectedOptions.length > 0) {
             this.unselectOption(this.selectedOptions[this.selectedOptions.length - 1]);
@@ -70,6 +139,10 @@ export class SearchBar extends FoundationElement {
     }
     pasteHandler(event) {
         var _a;
+        if (this.allSearchFieldsUsed) {
+            event.preventDefault();
+            return;
+        }
         this.loading = true;
         const pastedText = event.clipboardData.getData('text/plain');
         const formattedText = this.normalizeDelimiter(pastedText);
@@ -93,6 +166,10 @@ export class SearchBar extends FoundationElement {
     }
     inputHandler() {
         return __awaiter(this, void 0, void 0, function* () {
+            if (this.allSearchFieldsUsed) {
+                this.applySearchInputLock();
+                return;
+            }
             this.loading = true;
             this.searchTerm = this.combobox.value;
             if (this.combobox.value.length >= this.minlength) {
@@ -129,6 +206,9 @@ __decorate([
 __decorate([
     attr
 ], SearchBar.prototype, "disabled", void 0);
+__decorate([
+    attr({ attribute: 'clear-button', mode: 'boolean' })
+], SearchBar.prototype, "clearButton", void 0);
 __decorate([
     observable
 ], SearchBar.prototype, "loading", void 0);

package/dist/esm/search-bar/search-bar.styles.js

@@ -73,23 +73,6 @@ export const foundationSearchBarStyles = css `
     justify-content: center;
   }
 
-  .tooltip {
-    position: absolute;
-    z-index: 999;
-  }
-
-  .tooltip::part(tooltip) {
-    background-color: rgb(18 18 18 / 100%);
-    border: 1px solid #2e3339;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    box-shadow: 0 4px 10px rgb(0 0 0 / 25%);
-    font-size: 10px;
-    color: #f1f1f1;
-    height: 26px;
-  }
-
   .close-icon {
     color: var(--accent-fill-rest);
   }

package/dist/esm/search-bar/search-bar.template.js

@@ -1,4 +1,4 @@
-import { html, ref, repeat, slotted } from '@microsoft/fast-element';
+import { html, ref, repeat, slotted, when } from '@microsoft/fast-element';
 import { whitespaceFilter } from '@microsoft/fast-foundation';
 import { classNames } from '@microsoft/fast-web-utilities';
 import { getPrefix } from '../utils';
@@ -30,6 +30,7 @@ export const getPrefixedSearchBar = (prefix) => html `
     position="${(x) => x.position}"
     placeholder=${(x) => x.placeholder}
     disabled=${(x) => x.disabled}
+    :inputLocked="${(x) => x.allSearchFieldsUsed}"
     autocomplete="none"
     minlength=${(x) => x.minlength}
     @inputdeleted=${(x) => x.inputdeleted()}
@@ -64,37 +65,37 @@ export const getPrefixedSearchBar = (prefix) => html `
     ${repeat((x) => x.filteredOptions, html `
         <${prefix}-option
           value="${(x) => x.field}"
-          :disabled=${(x, ctx) => !x.isEnabled(ctx.parent.searchTerm, ctx.parent.selectedOptions)}
+          :disabled=${(x, ctx) => !ctx.parent.isOptionEnabled(x)}
         >
           ${(x, ctx) => x.label(ctx.parent.searchTerm)}
         </${prefix}-option>
       `)}
-    <${prefix}-button
-      class="search-clear-button"
-      @click=${(x) => x.clearSearch()}
-      id="search-clear-button"
-      slot="end"
-      data-test-id="clear-search"
-    >
-      <div class="svg-container">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          fill="currentColor"
-          width="26px"
-          height="26px"
-          class="bi bi-plus"
-          viewBox="0 0 16 16"
+    ${when((x) => x.showClearAffordance, html `
+        <${prefix}-button
+          class="search-clear-button"
+          @click=${(x) => x.clearSearch()}
+          slot="end"
+          data-test-id="clear-search"
+          aria-label="Clear search terms"
+          title="Clear search terms"
         >
-          <path
-            d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"
-          />
-        </svg>
-      </div>
-    </${prefix}-button>
+          <div class="svg-container">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              fill="currentColor"
+              width="26px"
+              height="26px"
+              class="bi bi-plus"
+              viewBox="0 0 16 16"
+            >
+              <path
+                d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"
+              />
+            </svg>
+          </div>
+        </${prefix}-button>
+      `)}
   </${prefix}-search-bar-combobox>
-  <${prefix}-tooltip class="tooltip" anchor="search-clear-button">
-    Clear Search Terms
-  </${prefix}-tooltip>
 `;
 export const foundationSearchBarTemplate = html `
   ${(x) => getPrefixedSearchBar(getPrefix(x))}

package/dist/react.cjs

@@ -66,7 +66,6 @@ const { Radio: RadioWC } = require('./esm/radio/radio.js');
 const { SchedulerCronBuilder: SchedulerCronBuilderWC } = require('./esm/scheduler-cron-builder/scheduler-cron-builder.js');
 const { SchedulerTimezone: SchedulerTimezoneWC } = require('./esm/scheduler-timezone/scheduler-timezone.js');
 const { Scheduler: SchedulerWC } = require('./esm/scheduler/scheduler.js');
-const { SearchBarCombobox: SearchBarComboboxWC } = require('./esm/search-bar/search-bar-combobox.js');
 const { SearchBar: SearchBarWC } = require('./esm/search-bar/search-bar.js');
 const { SectionNavigator: SectionNavigatorWC } = require('./esm/section-navigator/section-navigator.js');
 const { SegmentedControl: SegmentedControlWC } = require('./esm/segmented-control/segmented-control.js');
@@ -102,6 +101,11 @@ function _mergeRefs(...refs) {
   };
 }
 
+const Accordion = React.forwardRef(function Accordion(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(AccordionWC) ?? '%%prefix%%-accordion', { ...rest, ref }, children);
+});
+
 const AccordionItem = React.forwardRef(function AccordionItem(props, ref) {
   const { children, ...rest } = props;
   return React.createElement(customElements.getName(AccordionItemWC) ?? '%%prefix%%-accordion-item', { ...rest, ref }, children);
@@ -134,11 +138,6 @@ const AiCriteriaSearch = React.forwardRef(function AiCriteriaSearch(props, ref)
   return React.createElement(customElements.getName(AiCriteriaSearchWC) ?? '%%prefix%%-ai-criteria-search', { ...rest, ref: _mergeRefs(_innerRef, ref) }, children);
 });
 
-const Accordion = React.forwardRef(function Accordion(props, ref) {
-  const { children, ...rest } = props;
-  return React.createElement(customElements.getName(AccordionWC) ?? '%%prefix%%-accordion', { ...rest, ref }, children);
-});
-
 const AiIndicator = React.forwardRef(function AiIndicator(props, ref) {
   const { children, ...rest } = props;
   return React.createElement(customElements.getName(AiIndicatorWC) ?? '%%prefix%%-ai-indicator', { ...rest, ref }, children);
@@ -632,23 +631,6 @@ const SchedulerTimezone = React.forwardRef(function SchedulerTimezone(props, ref
   return React.createElement(customElements.getName(SchedulerTimezoneWC) ?? '%%prefix%%-scheduler-timezone', { ...rest, ref }, children);
 });
 
-const SearchBarCombobox = React.forwardRef(function SearchBarCombobox(props, ref) {
-  const { onInputdeleted, children, ...rest } = props;
-  const _innerRef = React.useRef(null);
-  const _onInputdeletedRef = React.useRef(onInputdeleted);
-  _onInputdeletedRef.current = onInputdeleted;
-  React.useLayoutEffect(() => {
-    const el = _innerRef.current;
-    if (!el) return;
-    const _onInputdeletedFn = (e) => _onInputdeletedRef.current?.(e);
-    el.addEventListener('inputdeleted', _onInputdeletedFn);
-    return () => {
-      el.removeEventListener('inputdeleted', _onInputdeletedFn);
-    };
-  }, []);
-  return React.createElement(customElements.getName(SearchBarComboboxWC) ?? '%%prefix%%-search-bar-combobox', { ...rest, ref: _mergeRefs(_innerRef, ref) }, children);
-});
-
 const SearchBar = React.forwardRef(function SearchBar(props, ref) {
   const { onSelectionChange, children, ...rest } = props;
   const _innerRef = React.useRef(null);
@@ -877,10 +859,10 @@ const UrlInput = React.forwardRef(function UrlInput(props, ref) {
 });
 
 module.exports = {
+  Accordion,
   AccordionItem,
   ActionsMenu,
   AiCriteriaSearch,
-  Accordion,
   AiIndicator,
   Anchor,
   AnchoredRegion,
@@ -937,7 +919,6 @@ module.exports = {
   Scheduler,
   SchedulerCronBuilder,
   SchedulerTimezone,
-  SearchBarCombobox,
   SearchBar,
   SectionNavigator,
   SegmentedControl,

package/dist/react.mjs

@@ -64,7 +64,6 @@ import { Radio as RadioWC } from './esm/radio/radio.js';
 import { SchedulerCronBuilder as SchedulerCronBuilderWC } from './esm/scheduler-cron-builder/scheduler-cron-builder.js';
 import { SchedulerTimezone as SchedulerTimezoneWC } from './esm/scheduler-timezone/scheduler-timezone.js';
 import { Scheduler as SchedulerWC } from './esm/scheduler/scheduler.js';
-import { SearchBarCombobox as SearchBarComboboxWC } from './esm/search-bar/search-bar-combobox.js';
 import { SearchBar as SearchBarWC } from './esm/search-bar/search-bar.js';
 import { SectionNavigator as SectionNavigatorWC } from './esm/section-navigator/section-navigator.js';
 import { SegmentedControl as SegmentedControlWC } from './esm/segmented-control/segmented-control.js';
@@ -100,6 +99,11 @@ function _mergeRefs(...refs) {
   };
 }
 
+export const Accordion = React.forwardRef(function Accordion(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(AccordionWC) ?? '%%prefix%%-accordion', { ...rest, ref }, children);
+});
+
 export const AccordionItem = React.forwardRef(function AccordionItem(props, ref) {
   const { children, ...rest } = props;
   return React.createElement(customElements.getName(AccordionItemWC) ?? '%%prefix%%-accordion-item', { ...rest, ref }, children);
@@ -132,11 +136,6 @@ export const AiCriteriaSearch = React.forwardRef(function AiCriteriaSearch(props
   return React.createElement(customElements.getName(AiCriteriaSearchWC) ?? '%%prefix%%-ai-criteria-search', { ...rest, ref: _mergeRefs(_innerRef, ref) }, children);
 });
 
-export const Accordion = React.forwardRef(function Accordion(props, ref) {
-  const { children, ...rest } = props;
-  return React.createElement(customElements.getName(AccordionWC) ?? '%%prefix%%-accordion', { ...rest, ref }, children);
-});
-
 export const AiIndicator = React.forwardRef(function AiIndicator(props, ref) {
   const { children, ...rest } = props;
   return React.createElement(customElements.getName(AiIndicatorWC) ?? '%%prefix%%-ai-indicator', { ...rest, ref }, children);
@@ -630,23 +629,6 @@ export const SchedulerTimezone = React.forwardRef(function SchedulerTimezone(pro
   return React.createElement(customElements.getName(SchedulerTimezoneWC) ?? '%%prefix%%-scheduler-timezone', { ...rest, ref }, children);
 });
 
-export const SearchBarCombobox = React.forwardRef(function SearchBarCombobox(props, ref) {
-  const { onInputdeleted, children, ...rest } = props;
-  const _innerRef = React.useRef(null);
-  const _onInputdeletedRef = React.useRef(onInputdeleted);
-  _onInputdeletedRef.current = onInputdeleted;
-  React.useLayoutEffect(() => {
-    const el = _innerRef.current;
-    if (!el) return;
-    const _onInputdeletedFn = (e) => _onInputdeletedRef.current?.(e);
-    el.addEventListener('inputdeleted', _onInputdeletedFn);
-    return () => {
-      el.removeEventListener('inputdeleted', _onInputdeletedFn);
-    };
-  }, []);
-  return React.createElement(customElements.getName(SearchBarComboboxWC) ?? '%%prefix%%-search-bar-combobox', { ...rest, ref: _mergeRefs(_innerRef, ref) }, children);
-});
-
 export const SearchBar = React.forwardRef(function SearchBar(props, ref) {
   const { onSelectionChange, children, ...rest } = props;
   const _innerRef = React.useRef(null);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@genesislcap/foundation-ui",
   "description": "Genesis Foundation UI",
-  "version": "14.447.1",
+  "version": "14.448.0-canary.wealth",
   "sideEffects": false,
   "license": "SEE LICENSE IN license.txt",
   "main": "dist/esm/index.js",
@@ -85,13 +85,13 @@
     }
   },
   "devDependencies": {
-    "@genesislcap/foundation-testing": "14.447.1",
-    "@genesislcap/genx": "14.447.1",
-    "@genesislcap/rollup-builder": "14.447.1",
-    "@genesislcap/ts-builder": "14.447.1",
-    "@genesislcap/uvu-playwright-builder": "14.447.1",
-    "@genesislcap/vite-builder": "14.447.1",
-    "@genesislcap/webpack-builder": "14.447.1",
+    "@genesislcap/foundation-testing": "14.448.0-canary.wealth",
+    "@genesislcap/genx": "14.448.0-canary.wealth",
+    "@genesislcap/rollup-builder": "14.448.0-canary.wealth",
+    "@genesislcap/ts-builder": "14.448.0-canary.wealth",
+    "@genesislcap/uvu-playwright-builder": "14.448.0-canary.wealth",
+    "@genesislcap/vite-builder": "14.448.0-canary.wealth",
+    "@genesislcap/webpack-builder": "14.448.0-canary.wealth",
     "copyfiles": "^2.4.1"
   },
   "dependencies": {
@@ -100,16 +100,16 @@
     "@fortawesome/free-regular-svg-icons": "^6.2.1",
     "@fortawesome/free-solid-svg-icons": "^6.2.1",
     "@genesiscommunitysuccess/analyzer-import-alias-plugin": "^5.0.3",
-    "@genesislcap/expression-builder": "14.447.1",
-    "@genesislcap/foundation-ai": "14.447.1",
-    "@genesislcap/foundation-comms": "14.447.1",
-    "@genesislcap/foundation-criteria": "14.447.1",
-    "@genesislcap/foundation-errors": "14.447.1",
-    "@genesislcap/foundation-events": "14.447.1",
-    "@genesislcap/foundation-logger": "14.447.1",
-    "@genesislcap/foundation-notifications": "14.447.1",
-    "@genesislcap/foundation-user": "14.447.1",
-    "@genesislcap/foundation-utils": "14.447.1",
+    "@genesislcap/expression-builder": "14.448.0-canary.wealth",
+    "@genesislcap/foundation-ai": "14.448.0-canary.wealth",
+    "@genesislcap/foundation-comms": "14.448.0-canary.wealth",
+    "@genesislcap/foundation-criteria": "14.448.0-canary.wealth",
+    "@genesislcap/foundation-errors": "14.448.0-canary.wealth",
+    "@genesislcap/foundation-events": "14.448.0-canary.wealth",
+    "@genesislcap/foundation-logger": "14.448.0-canary.wealth",
+    "@genesislcap/foundation-notifications": "14.448.0-canary.wealth",
+    "@genesislcap/foundation-user": "14.448.0-canary.wealth",
+    "@genesislcap/foundation-utils": "14.448.0-canary.wealth",
     "@microsoft/fast-colors": "5.3.1",
     "@microsoft/fast-components": "2.30.6",
     "@microsoft/fast-element": "1.14.0",
@@ -142,5 +142,5 @@
       "require": "./dist/react.cjs"
     }
   },
-  "gitHead": "e265cb98c173fe6e51a94b5f31e653384c4f2d8e"
+  "gitHead": "dd463812d10b19835162f58c2c04624fe52c6a36"
 }