Merge Custom Select Components into Main

packages/soql-builder-ui/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@salesforce/soql-builder-ui",
   "description": "SOQL Builder UI with LWC",
-  "version": "0.0.29",
+  "version": "0.0.30",
   "author": "Salesforce",
   "publishConfig": {
     "access": "public",

packages/soql-builder-ui/src/index.html

@@ -26,8 +26,8 @@
         --soql-main-min-width: 480px;
         --soql-main-max-width: 960px;
         --soql-media-max-width: 480px;
-        --soql-label-width: 80px;
-        --soql-input-width: 400px;
+        --soql-label-container-width: 80px;
+        --soql-selection-container-width: 400px;
         /* colors */
         --soql-color-light-grey: #ecebea;
         --soql-color-medium-grey: #b0adab;

packages/soql-builder-ui/src/modules/querybuilder/app/app.css

@@ -52,12 +52,14 @@ main {
   opacity: 0.5;
   background-color: rgba(0, 0, 0, 0.6);
   border-radius: 3px;
+  z-index: 2; /* one above the custom select options pane */
 }
 
 .block-message {
   position: absolute;
   top: 0;
   left: 0;
+  z-index: 2; /* one above the custom select options pane */
   background-color: var(
     --vscode-inputValidation-warningBackground,
     var(--soql-error-background)

packages/soql-builder-ui/src/modules/querybuilder/app/app.html

@@ -9,29 +9,14 @@
 <template>
   <main>
     <header class="querybuilder-header">
-      <querybuilder-header class={theme} onrunquery={handleRunQuery} is-running={isQueryRunning}></querybuilder-header>
+      <querybuilder-header
+        class={theme}
+        onrunquery={handleRunQuery}
+        is-running={isQueryRunning}
+      ></querybuilder-header>
     </header>
     <article class="querybuilder-body">
       <section class="querybuilder-form">
-          <template if:true={blockQueryBuilder}>
-            <div class="unsupported-syntax">
-            </div>
-            <template if:true={hasUnsupported}>
-              <!-- TODO: i18n -->
-              <div class="block-message">
-                <h3>Syntax Not Yet Supported</h3>
-                <p>Your query contains statements that SOQL Builder doesn't currently support.  You can still run the query but must use a text editor to change it.</p>
-              </div>
-            </template>
-            <template if:true={hasUnrecoverable}>
-              <!-- TODO: i18n -->
-              <div class="block-message">
-                <h3>Syntax Error</h3>
-                <p>Your SOQL statement contains syntax errors. Use a text editor to edit the query, and try again.</p>
-              </div>
-            </template>
-
-        </template>
         <querybuilder-from
           onobjectselected={handleObjectChange}
           sobjects={sObjects}
@@ -64,9 +49,39 @@ <h3>Syntax Error</h3>
           onlimitchanged={handleLimitChanged}
           class={theme}
         ></querybuilder-limit>
+        <!-- div.unsupported-syntax should always be
+        last in the <section class="querybuilder-form">
+        So it stays on top of form elements -->
+        <template if:true={blockQueryBuilder}>
+          <div class="unsupported-syntax"></div>
+          <template if:true={hasUnsupported}>
+            <!-- TODO: i18n -->
+            <div class="block-message">
+              <h3>Syntax Not Yet Supported</h3>
+              <p>
+                Your query contains statements that SOQL Builder doesn't
+                currently support. You can still run the query but must use a
+                text editor to change it.
+              </p>
+            </div>
+          </template>
+          <template if:true={hasUnrecoverable}>
+            <!-- TODO: i18n -->
+            <div class="block-message">
+              <h3>Syntax Error</h3>
+              <p>
+                Your SOQL statement contains syntax errors. Use a text editor to
+                edit the query, and try again.
+              </p>
+            </div>
+          </template>
+        </template>
       </section>
       <section class="query-preview">
-        <querybuilder-query-preview class={theme} soql-statement={query.originalSoqlStatement}></querybuilder-query-preview>
+        <querybuilder-query-preview
+          class={theme}
+          soql-statement={query.originalSoqlStatement}
+        ></querybuilder-query-preview>
       </section>
     </article>
   </main>

packages/soql-builder-ui/src/modules/querybuilder/app/app.ts

@@ -46,7 +46,7 @@ export default class App extends LightningElement {
   }
 
   get hasUnrecoverable() {
-    return !this.hasUnsupported && this.hasUnrecoverableError
+    return !this.hasUnsupported && this.hasUnrecoverableError;
   }
 
   get blockQueryBuilder() {
@@ -89,7 +89,7 @@ export default class App extends LightningElement {
       this.isFieldsLoading = false;
       this.fields =
         sobjectMetadata && sobjectMetadata.fields
-          ? sobjectMetadata.fields.map((f) => f.name)
+          ? sobjectMetadata.fields.map((f) => f.name).sort()
           : [];
     });
 

packages/soql-builder-ui/src/modules/querybuilder/cssCommon/cssCommon.css

@@ -21,8 +21,12 @@
 }
 
 .section_label-container {
-  width: var(--soql-label-width);
-  min-width: var(--soql-label-width);
+  width: var(--soql-label-container-width);
+  min-width: var(--soql-label-container-width);
+}
+
+.section_selection-container {
+  width: var(--soql-selection-container-width);
 }
 
 .section_label-container label {
@@ -35,7 +39,7 @@
 .selected-fields-container {
   display: flex;
   flex-wrap: wrap;
-  max-width: var(--soql-input-width);
+  max-width: var(--soql-selection-container-width);
 }
 
 .selected-field {
@@ -71,6 +75,7 @@ select {
     var(--vscode-list-inactiveSelectionBackground, var(--soql-color-light-grey));
   border-radius: 3px;
 }
+
 input,
 select {
   background-color: var(--vscode-sideBar-background, var(--soql-background));
@@ -118,8 +123,8 @@ button:hover {
   pointer-events: none;
 }
 .select-long {
-  min-width: var(--soql-input-width);
-  max-width: var(--soql-input-width);
+  min-width: var(--soql-selection-container-width);
+  max-width: var(--soql-selection-container-width);
 }
 
 /* ERROR / DISABLED ------------ */

packages/soql-builder-ui/src/modules/querybuilder/customSelect/customSelect.css

@@ -0,0 +1,124 @@
+@import 'querybuilder/cssCommon';
+
+/* ======= MAIN CONTAINER ======= */
+main.custom-select {
+  position: relative;
+  max-width: var(--soql-selection-container-width);
+}
+
+/* ======= SELECT ======= */
+.select__wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: relative;
+  width: 100%;
+  height: 1.5rem;
+  border: 1px solid
+    var(--vscode-list-inactiveSelectionBackground, var(--soql-color-light-grey));
+  border-radius: 3px;
+  background-color: var(--vscode-sideBar-background, var(--soql-background));
+}
+/*
+- rotate nueter symbol to mimic search icon
+*/
+.select__wrapper::before {
+  position: absolute;
+  content: '⚲';
+  font-size: 1.5em;
+  left: 6px;
+  transform: rotate(-45deg);
+  border-radius: 50%;
+  background-color: transparent;
+  color: var(
+    --vscode-list-inactiveSelectionBackground,
+    var(--soql-color-medium-grey)
+  );
+}
+
+.select__input {
+  width: 90%;
+  height: 1em;
+  padding: 4px;
+  margin-left: 24px;
+  border: none;
+}
+
+.select__input.select__input-placeholder--fadeout::placeholder {
+  opacity: 0.5;
+}
+
+.select:focus {
+  outline: none;
+}
+
+.select__clear-search {
+  align-self: center;
+  padding-right: 5px;
+  cursor: pointer;
+}
+
+.select__dropdown-arrow {
+  transform: rotate(180deg);
+  margin-right: 2px;
+  cursor: pointer;
+}
+
+.select__dropdown-arrow--up {
+  transform: rotate(0deg);
+}
+
+div.select__dropdown-arrow:focus {
+  outline: none;
+}
+
+/* ======== OPTIONS ======== */
+
+.options__wrapper {
+  position: absolute;
+  border: 1px solid
+    var(--vscode-list-inactiveSelectionBackground, var(--soql-color-light-grey));
+  border-radius: 3px;
+  width: var(--soql-selection-container-width);
+  min-height: 100px;
+  max-height: 300px;
+  overflow-y: scroll;
+  /* hidden by default */
+  display: none;
+  opacity: 0;
+  transition: opacity 0.2s;
+  pointer-events: none;
+  z-index: 1;
+  background-color: var(--vscode-sideBar-background, var(--soql-background));
+}
+
+.options--open {
+  opacity: 1;
+  display: block;
+  pointer-events: all;
+}
+
+.option {
+  padding: 3px 0 3px 4px;
+  margin: 0;
+}
+.option:hover {
+  background-color: var(
+    --vscode-list-focusBackground,
+    var(--soql-color-medium-grey)
+  );
+}
+.option--highlight {
+  background-color: var(
+    --vscode-list-focusBackground,
+    var(--soql-color-medium-grey)
+  );
+}
+.option--disabled {
+  color: var(
+    --vscode-list-inactiveFocusBackground,
+    var(--soql-color-medium-grey)
+  );
+  cursor: not-allowed;
+  pointer-events: none;
+}

packages/soql-builder-ui/src/modules/querybuilder/customSelect/customSelect.html

@@ -0,0 +1,55 @@
+<template>
+  <main class="custom-select">
+    <div class="select__wrapper">
+      <input
+        class="select__input"
+        name="search-bar"
+        placeholder={placeholderText}
+        value={displayValue}
+        oninput={handleInputChange}
+        onclick={handleOpenOptions}
+        onkeydown={handleKeyDown}
+        onfocus={handleInputFocus}
+        onblur={handleInputFocus}
+      />
+      <template if:true={hasSearchTerm}>
+        <div
+          role="button"
+          onclick={handleClearSearch}
+          class="select__clear-search"
+        >
+          <!-- close icon '×' -->
+          &#10005;
+        </div>
+      </template>
+      <template if:false={hasSearchTerm}>
+        <!-- Up Arrowhead '⌃'-->
+        <div
+          tabindex="0"
+          role="button"
+          onkeydown={handleKeyDown}
+          onclick={toggleOpenOptions}
+          class={dropDownArrowClassList}
+        >
+          &#8963;
+        </div>
+      </template>
+    </div>
+    <div class="options__wrapper" aria-hidden={optionListIsHidden}>
+      <template for:each={_renderedOptions} for:item="optionName">
+        <p
+          onclick={handleOptionClickSelection}
+          key={optionName}
+          class="option"
+          data-option-value={optionName}
+        >
+          {optionName}
+        </p>
+      </template>
+      <template if:true={noResultsFound}>
+        <!-- i18n -->
+        <p class="option option--disabled">No results found.</p>
+      </template>
+    </div>
+  </main>
+</template>