feat(select): implement select all

#520

src/components/select/bl-select.css

@@ -29,6 +29,10 @@
  --popover-position: var(--bl-popover-position, fixed);
 }
 
+:host([multiple]:not([hide-select-all])) .select-wrapper {
+ --menu-height: 290px;
+}
+
 :host([size="large"]) .select-wrapper {
  --height: var(--bl-size-3xl);
  --padding-vertical: var(--bl-size-xs);
@@ -337,3 +341,22 @@ legend span {
 .dirty.invalid .help-text {
  display: none;
 }
+
+.select-all {
+ position: sticky;
+ top: 0;
+ padding: var(--bl-size-xs) 0;
+ background: var(--background-color);
+ z-index: 1;
+
+ /* Make sure option focus doesn't overflow */
+ box-shadow: 10px 0 0 var(--background-color), -10px 0 0 var(--background-color);
+}
+
+.select-all::after {
+ position: absolute;
+ content: "";
+ width: 100%;
+ bottom: 0;
+ border-bottom: 1px solid var(--bl-color-neutral-lighter);
+}

src/components/select/bl-select.stories.mdx

@@ -98,14 +98,16 @@ export const SelectTemplate = (args) => html`<bl-select
  ?required=${args.required}
  ?disabled=${args.disabled}
  ?success=${args.success}
+ ?hide-select-all=${args.hideSelectAll}
+ select-all-text=${ifDefined(args.selectAllText)}
  size=${ifDefined(args.size)}
  help-text=${ifDefined(args.helpText)}
  invalid-text=${ifDefined(args.customInvalidText)}
  placeholder=${ifDefined(args.placeholder)}
  .value=${ifDefined(args.value)}>${
  (args.options || defaultOptions).map((option) => html`
  <bl-select-option value=${ifDefined(option.value)} ?selected=${
- ( args.selected || []).includes(option.value) }>${option.label}</bl-select-option>`
+ ( args.selected || []).includes(option.value) } ?disabled=${option.disabled}>${option.label}</bl-select-option>`
  )}
 </bl-select>`
 
@@ -159,6 +161,27 @@ Selected options will be visible on input seperated by commas.
  </Story>
 </Canvas>
 
+### Select All
+
+The Select component features a 'Select All' option, which is automatically displayed when the `multiple` attribute is enabled. If you wish to hide this option, you can do so by adding the `hide-select-all` attribute to the Select component. Additionally, the text for the 'Select All' option can be customized by using the `select-all-text` attribute. Also 'Select All' feature will not have any effect on disabled options.
+
+<Canvas>
+ <Story
+ name="Select All"
+ args={{ placeholder: "Choose countries", multiple: true, selectAllText: 'Select All Countries', options: [{
+ label: 'United States',
+ value: 'us',
+ disabled: true
+ }, ...defaultOptions] }}
+ play={selectOpener}
+ >
+ {SelectTemplate.bind({})}
+ </Story>
+ <Story name="Select All Hidden" args={{ placeholder: "Choose countries", value: ['nl'], multiple: true, hideSelectAll: true }} play={selectOpener}>
+ {SelectTemplate.bind({})}
+ </Story>
+</Canvas>
+
 ## Clear Button
 
 The select component includes a clear button. Clear button can be displayed by passing `clearable` attribute to the Select component.

src/components/select/bl-select.test.ts

@@ -510,4 +510,90 @@ describe("bl-select", () => {
  expect((document.activeElement as BlSelectOption).value).to.equal(firstOption?.value);
  });
  });
+
+ describe("select all", () => {
+ it("should select all options", async () => {
+ const el = await fixture<BlSelect>(html`<bl-select multiple>
+ <bl-select-option value="1">Option 1</bl-select-option>
+ <bl-select-option value="2">Option 2</bl-select-option>
+ <bl-select-option value="3">Option 3</bl-select-option>
+ <bl-select-option value="4">Option 4</bl-select-option>
+ <bl-select-option value="5">Option 5</bl-select-option>
+ </bl-select>`);
+
+
+ const selectAll = el.shadowRoot!.querySelector<BlCheckbox>(".select-all")!;
+
+ setTimeout(() => selectAll.dispatchEvent(
+ new CustomEvent("bl-checkbox-change", { detail: true }))
+ );
+ const event = await oneEvent(el, "bl-select");
+
+ expect(event).to.exist;
+ expect(event.detail.length).to.equal(5);
+ expect(el.selectedOptions.length).to.equal(5);
+ });
+
+ it("should deselect all options", async () => {
+ const el = await fixture<BlSelect>(html`<bl-select multiple .value=${["1", "2", "3", "4", "5"]}>
+ <bl-select-option value="1">Option 1</bl-select-option>
+ <bl-select-option value="2">Option 2</bl-select-option>
+ <bl-select-option value="3">Option 3</bl-select-option>
+ <bl-select-option value="4">Option 4</bl-select-option>
+ <bl-select-option value="5">Option 5</bl-select-option>
+ </bl-select>`);
+
+ expect(el.selectedOptions.length).to.equal(5);
+
+ const selectAll = el.shadowRoot!.querySelector<BlCheckbox>(".select-all")!;
+
+ setTimeout(() => selectAll.dispatchEvent(
+ new CustomEvent("bl-checkbox-change", { detail: false }))
+ );
+
+ const event = await oneEvent(el, "bl-select");
+
+ expect(event).to.exist;
+ expect(event.detail.length).to.equal(0);
+ expect(el.selectedOptions.length).to.equal(0);
+ });
+
+ it("should not act on disabled options", async () => {
+ const el = await fixture<BlSelect>(html`<bl-select multiple>
+ <bl-select-option value="1" disabled>Option 1</bl-select-option>
+ <bl-select-option value="2">Option 2</bl-select-option>
+ <bl-select-option value="3">Option 3</bl-select-option>
+ <bl-select-option value="4">Option 4</bl-select-option>
+ <bl-select-option value="5">Option 5</bl-select-option>
+ </bl-select>`);
+
+ const selectAll = el.shadowRoot!.querySelector<BlCheckbox>(".select-all")!;
+
+ setTimeout(() => selectAll.dispatchEvent(
+ new CustomEvent("bl-checkbox-change", { detail: true }))
+ );
+
+ const event = await oneEvent(el, "bl-select");
+
+ expect(event).to.exist;
+ expect(event.detail.length).to.equal(4);
+ expect(el.selectedOptions.length).to.equal(4);
+ expect(el.selectedOptions[0].value).to.equal("2");
+ });
+
+ it("should display indeterminate state when some options are selected", async () => {
+ const el = await fixture<BlSelect>(html`<bl-select multiple>
+ <bl-select-option value="1" selected>Option 1</bl-select-option>
+ <bl-select-option value="2">Option 2</bl-select-option>
+ <bl-select-option value="3">Option 3</bl-select-option>
+ <bl-select-option value="4">Option 4</bl-select-option>
+ <bl-select-option value="5">Option 5</bl-select-option>
+ </bl-select>`);
+
+ const selectAll = el.shadowRoot!.querySelector<BlCheckbox>(".select-all")!;
+
+ expect(selectAll.indeterminate).to.be.true;
+ expect(selectAll.checked).to.be.false;
+ });
+ });
 });

src/components/select/bl-select.ts

@@ -143,6 +143,18 @@ export default class BlSelect<ValueType extends FormValue = string> extends Form
  @property({ type: String, attribute: "invalid-text", reflect: true })
  customInvalidText?: string;
 
+ /**
+ * Hides select all option in multiple select
+ */
+ @property({ type: Boolean, attribute: "hide-select-all" })
+ hideSelectAll = false;
+
+ /**
+ * Sets select all text in multiple select
+ */
+ @property({ type: String, attribute: "select-all-text" })
+ selectAllText = "Select All";
+
  /* Declare internal reactive properties */
  @state()
  private _isPopoverOpen = false;
@@ -204,6 +216,10 @@ export default class BlSelect<ValueType extends FormValue = string> extends Form
  return this._additionalSelectedOptionCount;
  }
 
+ get isAllSelected() {
+ return this._selectedOptions.length === this._connectedOptions.length;
+ }
+
  validityCallback(): string | void {
  if (this.customInvalidText) {
  return this.customInvalidText;
@@ -273,6 +289,20 @@ export default class BlSelect<ValueType extends FormValue = string> extends Form
  });
  }
 
+ private _handleSelectAll(e: CustomEvent) {
+ const checked = e.detail;
+
+ this._connectedOptions.forEach(option => {
+ if (option.disabled) {
+ return;
+ }
+
+ option.selected = checked;
+ });
+
+ this._handleMultipleSelect();
+ }
+
  connectedCallback(): void {
  super.connectedCallback();
 
@@ -332,6 +362,25 @@ export default class BlSelect<ValueType extends FormValue = string> extends Form
  </fieldset>`;
  }
 
+ selectAllTemplate() {
+ if (!this.multiple || this.hideSelectAll) {
+ return null;
+ }
+
+ const isAnySelected = this._selectedOptions.length > 0;
+
+ return html`<bl-checkbox
+ class="select-all"
+ .checked="${this.isAllSelected}"
+ .indeterminate="${isAnySelected && !this.isAllSelected}"
+ role="option"
+ aria-selected="${this.isAllSelected}"
+ @bl-checkbox-change="${this._handleSelectAll}"
+ >
+ ${this.selectAllText}
+ </bl-checkbox>`;
+ }
+
  render() {
  const invalidMessage = !this.checkValidity()
  ? html`<p id="errorMessage" aria-live="polite" class="invalid-text">
@@ -362,6 +411,7 @@ export default class BlSelect<ValueType extends FormValue = string> extends Form
  aria-multiselectable="${this.multiple}"
  aria-labelledby="label"
  >
+ ${this.selectAllTemplate()}
  <slot></slot>
  </div>
  <div class="hint">${invalidMessage} ${helpMessage}</div>