@govtechsg/sgds-web-component 3.14.1-rc.1 → 3.15.0

package/react/components/Dropdown/dropdown-menu.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.css`:host([menuisopen]) .dropdown-menu{display:block}.dropdown-menu{background-clip:padding-box;background-color:var(--sgds-surface-default);border-radius:var(--sgds-border-radius-md);box-shadow:0 0 1px 0 hsla(0,0%,5%,.12),0 4px 8px 0 hsla(0,0%,5%,.12);color:var(--sgds-color-default);display:none;list-style:none;margin:0;max-height:var(--sgds-dimension-480);min-width:var(--sgds-dimension-280);overflow-y:auto;padding:var(--sgds-padding-xs) 0;position:absolute;text-align:left;z-index:1050}.nav-tabs .dropdown-menu{border-top-left-radius:0;border-top-right-radius:0;margin-top:calc(var(--sgds-nav-tabs-border-width)*-1)}@media (min-width:512px){.navbar-expand-sm .navbar-nav .dropdown-menu{position:absolute}}@media (min-width:768px){.navbar-expand-md .navbar-nav .dropdown-menu{position:absolute}}@media (min-width:1024px){.navbar-expand-lg .navbar-nav .dropdown-menu{position:absolute}}@media (min-width:1280px){.navbar-expand-xl .navbar-nav .dropdown-menu{position:absolute}}@media (min-width:1440px){.navbar-expand-xxl .navbar-nav .dropdown-menu{position:absolute}}.navbar-expand .navbar-nav .dropdown-menu{position:absolute}.sgds.navbar .dropdown-menu.megamenu{left:0;right:0;width:100%}.sgds.combobox>.dropdown-menu{min-width:100%}`;
+var css_248z = lit.css`:host([menuisopen]:not([disabled]):not([readonly])) .dropdown-menu{display:block}.dropdown-menu{background-clip:padding-box;background-color:var(--sgds-surface-default);border-radius:var(--sgds-border-radius-md);box-shadow:0 0 1px 0 hsla(0,0%,5%,.12),0 4px 8px 0 hsla(0,0%,5%,.12);color:var(--sgds-color-default);display:none;list-style:none;margin:0;max-height:var(--sgds-dimension-480);min-width:var(--sgds-dimension-280);overflow-y:auto;padding:var(--sgds-padding-xs) 0;position:absolute;text-align:left;z-index:1050}.nav-tabs .dropdown-menu{border-top-left-radius:0;border-top-right-radius:0;margin-top:calc(var(--sgds-nav-tabs-border-width)*-1)}@media (min-width:512px){.navbar-expand-sm .navbar-nav .dropdown-menu{position:absolute}}@media (min-width:768px){.navbar-expand-md .navbar-nav .dropdown-menu{position:absolute}}@media (min-width:1024px){.navbar-expand-lg .navbar-nav .dropdown-menu{position:absolute}}@media (min-width:1280px){.navbar-expand-xl .navbar-nav .dropdown-menu{position:absolute}}@media (min-width:1440px){.navbar-expand-xxl .navbar-nav .dropdown-menu{position:absolute}}.navbar-expand .navbar-nav .dropdown-menu{position:absolute}.sgds.navbar .dropdown-menu.megamenu{left:0;right:0;width:100%}.sgds.combobox>.dropdown-menu{min-width:100%}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=dropdown-menu.cjs.js.map

package/react/components/Dropdown/dropdown-menu.js

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
 
-var css_248z = css`:host([menuisopen]) .dropdown-menu{display:block}.dropdown-menu{background-clip:padding-box;background-color:var(--sgds-surface-default);border-radius:var(--sgds-border-radius-md);box-shadow:0 0 1px 0 hsla(0,0%,5%,.12),0 4px 8px 0 hsla(0,0%,5%,.12);color:var(--sgds-color-default);display:none;list-style:none;margin:0;max-height:var(--sgds-dimension-480);min-width:var(--sgds-dimension-280);overflow-y:auto;padding:var(--sgds-padding-xs) 0;position:absolute;text-align:left;z-index:1050}.nav-tabs .dropdown-menu{border-top-left-radius:0;border-top-right-radius:0;margin-top:calc(var(--sgds-nav-tabs-border-width)*-1)}@media (min-width:512px){.navbar-expand-sm .navbar-nav .dropdown-menu{position:absolute}}@media (min-width:768px){.navbar-expand-md .navbar-nav .dropdown-menu{position:absolute}}@media (min-width:1024px){.navbar-expand-lg .navbar-nav .dropdown-menu{position:absolute}}@media (min-width:1280px){.navbar-expand-xl .navbar-nav .dropdown-menu{position:absolute}}@media (min-width:1440px){.navbar-expand-xxl .navbar-nav .dropdown-menu{position:absolute}}.navbar-expand .navbar-nav .dropdown-menu{position:absolute}.sgds.navbar .dropdown-menu.megamenu{left:0;right:0;width:100%}.sgds.combobox>.dropdown-menu{min-width:100%}`;
+var css_248z = css`:host([menuisopen]:not([disabled]):not([readonly])) .dropdown-menu{display:block}.dropdown-menu{background-clip:padding-box;background-color:var(--sgds-surface-default);border-radius:var(--sgds-border-radius-md);box-shadow:0 0 1px 0 hsla(0,0%,5%,.12),0 4px 8px 0 hsla(0,0%,5%,.12);color:var(--sgds-color-default);display:none;list-style:none;margin:0;max-height:var(--sgds-dimension-480);min-width:var(--sgds-dimension-280);overflow-y:auto;padding:var(--sgds-padding-xs) 0;position:absolute;text-align:left;z-index:1050}.nav-tabs .dropdown-menu{border-top-left-radius:0;border-top-right-radius:0;margin-top:calc(var(--sgds-nav-tabs-border-width)*-1)}@media (min-width:512px){.navbar-expand-sm .navbar-nav .dropdown-menu{position:absolute}}@media (min-width:768px){.navbar-expand-md .navbar-nav .dropdown-menu{position:absolute}}@media (min-width:1024px){.navbar-expand-lg .navbar-nav .dropdown-menu{position:absolute}}@media (min-width:1280px){.navbar-expand-xl .navbar-nav .dropdown-menu{position:absolute}}@media (min-width:1440px){.navbar-expand-xxl .navbar-nav .dropdown-menu{position:absolute}}.navbar-expand .navbar-nav .dropdown-menu{position:absolute}.sgds.navbar .dropdown-menu.megamenu{left:0;right:0;width:100%}.sgds.combobox>.dropdown-menu{min-width:100%}`;
 
 export { css_248z as default };
 //# sourceMappingURL=dropdown-menu.js.map

package/react/components/Dropdown/sgds-dropdown.cjs.js

@@ -49,7 +49,7 @@ class SgdsDropdown extends dropdownListElement.DropdownListElement {
     async firstUpdated(changedProperties) {
         super.firstUpdated(changedProperties);
         if (this.menuIsOpen) {
-            await this.showMenu();
+            await this.updateFloatingPosition();
         }
         this._handleDisabled();
     }

package/react/components/Dropdown/sgds-dropdown.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-dropdown.cjs.js","sources":["../../../../src/components/Dropdown/sgds-dropdown.ts"],"sourcesContent":["import { html, PropertyValueMap } from \"lit\";\nimport { property, queryAssignedElements } from \"lit/decorators.js\";\nimport { ref } from \"lit/directives/ref.js\";\nimport { DropdownListElement } from \"../../base/dropdown-list-element\";\nimport { watch } from \"../../utils/watch\";\nimport dropdownMenuStyle from \"./dropdown-menu.css\";\nimport dropdownStyle from \"./dropdown.css\";\n\nexport type DropDirection = \"left\" | \"right\" | \"up\" | \"down\";\nexport type DropdownButtonVariant =\n  | \"primary\"\n  | \"secondary\"\n  | \"success\"\n  | \"danger\"\n  | \"warning\"\n  | \"info\"\n  | \"light\"\n  | \"dark\";\n\n/**\n * @summary `SgdsDropdown` toggles contextual overlays for displaying lists of links.\n * @slot default - slot for sgds-dropdown-item passed into dropdown's menu\n * @slot toggler - slot for the toggler that triggers the open and closing of menu, typically a button. Only pass in a single element into this slot\n *\n */\nexport class SgdsDropdown extends DropdownListElement {\n  static styles = [...DropdownListElement.styles, dropdownStyle, dropdownMenuStyle];\n\n  constructor() {\n    super();\n    this.menuRef = ref();\n  }\n\n  /** Controls auto-flipping of menu */\n  @property({ type: Boolean, reflect: true, state: false })\n  noFlip = false;\n\n  /** When true, aligns right edge of menu with right edge of button */\n  @property({ type: Boolean, reflect: true, state: false })\n  menuAlignRight = false;\n\n  /** The drop position of menu relative to the toggle button */\n  @property({ type: String, reflect: true, state: false })\n  drop: DropDirection = \"down\";\n\n  @queryAssignedElements({ slot: \"toggler\", flatten: true })\n  private _toggler: Array<HTMLElement>;\n\n  protected menuRef;\n\n  private async _handleClick() {\n    if (this.disabled) {\n      return;\n    }\n    this.toggleMenu();\n  }\n\n  private _handleCloseMenu() {\n    const button = this._toggler[0];\n    button?.focus();\n  }\n\n  async connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener(\"sgds-hide\", this._handleCloseMenu);\n  }\n\n  async disconnectedCallback() {\n    this.removeEventListener(\"sgds-hide\", this._handleCloseMenu);\n  }\n\n  async firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n    if (this.menuIsOpen) {\n      await this.showMenu();\n    }\n    this._handleDisabled();\n  }\n\n  @watch(\"disabled\", { waitUntilFirstUpdate: true })\n  _handleDisabled() {\n    const button = this._toggler[0];\n    if (button) {\n      if (this.disabled) {\n        button.setAttribute(\"disabled\", \"true\");\n      } else {\n        button.hasAttribute(\"disabled\") && button.removeAttribute(\"disabled\");\n      }\n    }\n  }\n\n  render() {\n    return html`\n      <div class=\"dropdown\">\n        <div\n          class=\"toggler-container\"\n          ${ref(this.myDropdown)}\n          @click=${this._handleClick}\n          aria-expanded=\"${this.menuIsOpen}\"\n          aria-haspopup=\"menu\"\n        >\n          <slot name=\"toggler\"></slot>\n        </div>\n        <div class=\"dropdown-menu\" role=\"menu\" ${ref(this.menuRef)}>\n          <slot id=\"default\" @click=${this.handleSelectSlot}></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsDropdown;\n"],"names":["DropdownListElement","ref","html","dropdownStyle","dropdownMenuStyle","__decorate","property","queryAssignedElements","watch"],"mappings":"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"}
+{"version":3,"file":"sgds-dropdown.cjs.js","sources":["../../../../src/components/Dropdown/sgds-dropdown.ts"],"sourcesContent":["import { html, PropertyValueMap } from \"lit\";\nimport { property, queryAssignedElements } from \"lit/decorators.js\";\nimport { ref } from \"lit/directives/ref.js\";\nimport { DropdownListElement } from \"../../base/dropdown-list-element\";\nimport { watch } from \"../../utils/watch\";\nimport dropdownMenuStyle from \"./dropdown-menu.css\";\nimport dropdownStyle from \"./dropdown.css\";\n\nexport type DropDirection = \"left\" | \"right\" | \"up\" | \"down\";\nexport type DropdownButtonVariant =\n  | \"primary\"\n  | \"secondary\"\n  | \"success\"\n  | \"danger\"\n  | \"warning\"\n  | \"info\"\n  | \"light\"\n  | \"dark\";\n\n/**\n * @summary `SgdsDropdown` toggles contextual overlays for displaying lists of links.\n * @slot default - slot for sgds-dropdown-item passed into dropdown's menu\n * @slot toggler - slot for the toggler that triggers the open and closing of menu, typically a button. Only pass in a single element into this slot\n *\n */\nexport class SgdsDropdown extends DropdownListElement {\n  static styles = [...DropdownListElement.styles, dropdownStyle, dropdownMenuStyle];\n\n  constructor() {\n    super();\n    this.menuRef = ref();\n  }\n\n  /** Controls auto-flipping of menu */\n  @property({ type: Boolean, reflect: true, state: false })\n  noFlip = false;\n\n  /** When true, aligns right edge of menu with right edge of button */\n  @property({ type: Boolean, reflect: true, state: false })\n  menuAlignRight = false;\n\n  /** The drop position of menu relative to the toggle button */\n  @property({ type: String, reflect: true, state: false })\n  drop: DropDirection = \"down\";\n\n  @queryAssignedElements({ slot: \"toggler\", flatten: true })\n  private _toggler: Array<HTMLElement>;\n\n  protected menuRef;\n\n  private async _handleClick() {\n    if (this.disabled) {\n      return;\n    }\n    this.toggleMenu();\n  }\n\n  private _handleCloseMenu() {\n    const button = this._toggler[0];\n    button?.focus();\n  }\n\n  async connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener(\"sgds-hide\", this._handleCloseMenu);\n  }\n\n  async disconnectedCallback() {\n    this.removeEventListener(\"sgds-hide\", this._handleCloseMenu);\n  }\n\n  async firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n    if (this.menuIsOpen) {\n      await this.updateFloatingPosition();\n    }\n    this._handleDisabled();\n  }\n\n  @watch(\"disabled\", { waitUntilFirstUpdate: true })\n  _handleDisabled() {\n    const button = this._toggler[0];\n    if (button) {\n      if (this.disabled) {\n        button.setAttribute(\"disabled\", \"true\");\n      } else {\n        button.hasAttribute(\"disabled\") && button.removeAttribute(\"disabled\");\n      }\n    }\n  }\n\n  render() {\n    return html`\n      <div class=\"dropdown\">\n        <div\n          class=\"toggler-container\"\n          ${ref(this.myDropdown)}\n          @click=${this._handleClick}\n          aria-expanded=\"${this.menuIsOpen}\"\n          aria-haspopup=\"menu\"\n        >\n          <slot name=\"toggler\"></slot>\n        </div>\n        <div class=\"dropdown-menu\" role=\"menu\" ${ref(this.menuRef)}>\n          <slot id=\"default\" @click=${this.handleSelectSlot}></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsDropdown;\n"],"names":["DropdownListElement","ref","html","dropdownStyle","dropdownMenuStyle","__decorate","property","queryAssignedElements","watch"],"mappings":"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"}

package/react/components/Dropdown/sgds-dropdown.js

@@ -45,7 +45,7 @@ class SgdsDropdown extends DropdownListElement {
     async firstUpdated(changedProperties) {
         super.firstUpdated(changedProperties);
         if (this.menuIsOpen) {
-            await this.showMenu();
+            await this.updateFloatingPosition();
         }
         this._handleDisabled();
     }

package/react/components/Dropdown/sgds-dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-dropdown.js","sources":["../../../../src/components/Dropdown/sgds-dropdown.ts"],"sourcesContent":["import { html, PropertyValueMap } from \"lit\";\nimport { property, queryAssignedElements } from \"lit/decorators.js\";\nimport { ref } from \"lit/directives/ref.js\";\nimport { DropdownListElement } from \"../../base/dropdown-list-element\";\nimport { watch } from \"../../utils/watch\";\nimport dropdownMenuStyle from \"./dropdown-menu.css\";\nimport dropdownStyle from \"./dropdown.css\";\n\nexport type DropDirection = \"left\" | \"right\" | \"up\" | \"down\";\nexport type DropdownButtonVariant =\n  | \"primary\"\n  | \"secondary\"\n  | \"success\"\n  | \"danger\"\n  | \"warning\"\n  | \"info\"\n  | \"light\"\n  | \"dark\";\n\n/**\n * @summary `SgdsDropdown` toggles contextual overlays for displaying lists of links.\n * @slot default - slot for sgds-dropdown-item passed into dropdown's menu\n * @slot toggler - slot for the toggler that triggers the open and closing of menu, typically a button. Only pass in a single element into this slot\n *\n */\nexport class SgdsDropdown extends DropdownListElement {\n  static styles = [...DropdownListElement.styles, dropdownStyle, dropdownMenuStyle];\n\n  constructor() {\n    super();\n    this.menuRef = ref();\n  }\n\n  /** Controls auto-flipping of menu */\n  @property({ type: Boolean, reflect: true, state: false })\n  noFlip = false;\n\n  /** When true, aligns right edge of menu with right edge of button */\n  @property({ type: Boolean, reflect: true, state: false })\n  menuAlignRight = false;\n\n  /** The drop position of menu relative to the toggle button */\n  @property({ type: String, reflect: true, state: false })\n  drop: DropDirection = \"down\";\n\n  @queryAssignedElements({ slot: \"toggler\", flatten: true })\n  private _toggler: Array<HTMLElement>;\n\n  protected menuRef;\n\n  private async _handleClick() {\n    if (this.disabled) {\n      return;\n    }\n    this.toggleMenu();\n  }\n\n  private _handleCloseMenu() {\n    const button = this._toggler[0];\n    button?.focus();\n  }\n\n  async connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener(\"sgds-hide\", this._handleCloseMenu);\n  }\n\n  async disconnectedCallback() {\n    this.removeEventListener(\"sgds-hide\", this._handleCloseMenu);\n  }\n\n  async firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n    if (this.menuIsOpen) {\n      await this.showMenu();\n    }\n    this._handleDisabled();\n  }\n\n  @watch(\"disabled\", { waitUntilFirstUpdate: true })\n  _handleDisabled() {\n    const button = this._toggler[0];\n    if (button) {\n      if (this.disabled) {\n        button.setAttribute(\"disabled\", \"true\");\n      } else {\n        button.hasAttribute(\"disabled\") && button.removeAttribute(\"disabled\");\n      }\n    }\n  }\n\n  render() {\n    return html`\n      <div class=\"dropdown\">\n        <div\n          class=\"toggler-container\"\n          ${ref(this.myDropdown)}\n          @click=${this._handleClick}\n          aria-expanded=\"${this.menuIsOpen}\"\n          aria-haspopup=\"menu\"\n        >\n          <slot name=\"toggler\"></slot>\n        </div>\n        <div class=\"dropdown-menu\" role=\"menu\" ${ref(this.menuRef)}>\n          <slot id=\"default\" @click=${this.handleSelectSlot}></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsDropdown;\n"],"names":["dropdownStyle","dropdownMenuStyle"],"mappings":"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"}
+{"version":3,"file":"sgds-dropdown.js","sources":["../../../../src/components/Dropdown/sgds-dropdown.ts"],"sourcesContent":["import { html, PropertyValueMap } from \"lit\";\nimport { property, queryAssignedElements } from \"lit/decorators.js\";\nimport { ref } from \"lit/directives/ref.js\";\nimport { DropdownListElement } from \"../../base/dropdown-list-element\";\nimport { watch } from \"../../utils/watch\";\nimport dropdownMenuStyle from \"./dropdown-menu.css\";\nimport dropdownStyle from \"./dropdown.css\";\n\nexport type DropDirection = \"left\" | \"right\" | \"up\" | \"down\";\nexport type DropdownButtonVariant =\n  | \"primary\"\n  | \"secondary\"\n  | \"success\"\n  | \"danger\"\n  | \"warning\"\n  | \"info\"\n  | \"light\"\n  | \"dark\";\n\n/**\n * @summary `SgdsDropdown` toggles contextual overlays for displaying lists of links.\n * @slot default - slot for sgds-dropdown-item passed into dropdown's menu\n * @slot toggler - slot for the toggler that triggers the open and closing of menu, typically a button. Only pass in a single element into this slot\n *\n */\nexport class SgdsDropdown extends DropdownListElement {\n  static styles = [...DropdownListElement.styles, dropdownStyle, dropdownMenuStyle];\n\n  constructor() {\n    super();\n    this.menuRef = ref();\n  }\n\n  /** Controls auto-flipping of menu */\n  @property({ type: Boolean, reflect: true, state: false })\n  noFlip = false;\n\n  /** When true, aligns right edge of menu with right edge of button */\n  @property({ type: Boolean, reflect: true, state: false })\n  menuAlignRight = false;\n\n  /** The drop position of menu relative to the toggle button */\n  @property({ type: String, reflect: true, state: false })\n  drop: DropDirection = \"down\";\n\n  @queryAssignedElements({ slot: \"toggler\", flatten: true })\n  private _toggler: Array<HTMLElement>;\n\n  protected menuRef;\n\n  private async _handleClick() {\n    if (this.disabled) {\n      return;\n    }\n    this.toggleMenu();\n  }\n\n  private _handleCloseMenu() {\n    const button = this._toggler[0];\n    button?.focus();\n  }\n\n  async connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener(\"sgds-hide\", this._handleCloseMenu);\n  }\n\n  async disconnectedCallback() {\n    this.removeEventListener(\"sgds-hide\", this._handleCloseMenu);\n  }\n\n  async firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n    if (this.menuIsOpen) {\n      await this.updateFloatingPosition();\n    }\n    this._handleDisabled();\n  }\n\n  @watch(\"disabled\", { waitUntilFirstUpdate: true })\n  _handleDisabled() {\n    const button = this._toggler[0];\n    if (button) {\n      if (this.disabled) {\n        button.setAttribute(\"disabled\", \"true\");\n      } else {\n        button.hasAttribute(\"disabled\") && button.removeAttribute(\"disabled\");\n      }\n    }\n  }\n\n  render() {\n    return html`\n      <div class=\"dropdown\">\n        <div\n          class=\"toggler-container\"\n          ${ref(this.myDropdown)}\n          @click=${this._handleClick}\n          aria-expanded=\"${this.menuIsOpen}\"\n          aria-haspopup=\"menu\"\n        >\n          <slot name=\"toggler\"></slot>\n        </div>\n        <div class=\"dropdown-menu\" role=\"menu\" ${ref(this.menuRef)}>\n          <slot id=\"default\" @click=${this.handleSelectSlot}></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsDropdown;\n"],"names":["dropdownStyle","dropdownMenuStyle"],"mappings":"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"}

package/react/components/Select/sgds-select.cjs.js

@@ -48,8 +48,8 @@ class SgdsSelect extends selectElement.SelectElement {
         this._updateDisplayValue();
         this.input = await this._input;
         this._mixinValidate(this.input);
-        if (this.menuIsOpen && !this.readonly) {
-            this.showMenu();
+        if (this.menuIsOpen) {
+            await this.updateFloatingPosition();
         }
     }
     async _handleSlotChange(e) {

package/react/components/Select/sgds-select.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-select.cjs.js","sources":["../../../../src/components/Select/sgds-select.ts"],"sourcesContent":["import { html, nothing, PropertyValueMap } from \"lit\";\nimport { queryAssignedElements } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { ref } from \"lit/directives/ref.js\";\nimport { SelectElement } from \"../../base/select-element\";\nimport formTextControlStyles from \"../../styles/form-text-control.css\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport selectStyle from \"./select.css\";\nimport SgdsSelectOption from \"./sgds-select-option\";\nimport SgdsSpinner from \"../Spinner/sgds-spinner\";\n/**\n * @summary Select is used to make one selection from a list through keyboard or mouse actions\n *\n * @event sgds-select - Emitted when an option is selected.\n * @event sgds-change - Emitted when the select value changes.\n * @event sgds-focus -  Emitted when user input is focused.\n * @event sgds-blur -  Emitted when user input is blurred.\n *\n * @slot default - slot for sgds-select-option passed into select's menu\n */\nexport class SgdsSelect extends SelectElement {\n  static styles = [...SelectElement.styles, formTextControlStyles, selectStyle];\n  static childName = \"sgds-select-option\";\n  /** @internal */\n  static dependencies = {\n    \"sgds-icon\": SgdsIcon,\n    \"sgds-spinner\": SgdsSpinner,\n    [SgdsSelect.childName]: SgdsSelectOption\n  };\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener(\"sgds-hide\", async () => {\n      const sgdsInput = await this._input;\n      sgdsInput.focus();\n    });\n  }\n  @queryAssignedElements({ flatten: true, selector: \"sgds-select-option\" })\n  protected options: SgdsSelectOption[];\n\n  async firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n    this._updateDisplayValue();\n    this.input = await this._input;\n    this._mixinValidate(this.input);\n    if (this.menuIsOpen && !this.readonly) {\n      this.showMenu();\n    }\n  }\n\n  private async _handleSlotChange(e: Event) {\n    const assignedElements = (e.target as HTMLSlotElement).assignedElements({ flatten: true });\n\n    assignedElements.forEach(el =>\n      el.addEventListener(\"click\", (e: MouseEvent) => {\n        const option = e.target as SgdsSelectOption;\n        if (option.disabled) return;\n        this._handleItemSelected(e);\n      })\n    );\n    assignedElements.forEach(el =>\n      el.addEventListener(\"keydown\", (e: KeyboardEvent) => {\n        if (e.key === \"Enter\") {\n          this._handleItemSelected(e);\n        }\n      })\n    );\n    this.menuList = await this._getMenuListFromOptions(assignedElements);\n    this._updateDisplayValue();\n    this.input = await this._input;\n    this._mixinValidate(this.input);\n  }\n  private _updateDisplayValue() {\n    if (this.value && this.menuList.length > 0) {\n      const initialSelectedItem = this.menuList.filter(({ value }) => value === this.value);\n      this.displayValue = initialSelectedItem[0].label;\n\n      this._setActiveToOption();\n    }\n  }\n  private _setActiveToOption() {\n    const activeIndex = this.menuList.findIndex(item => item.value.toString() === this.value);\n    this.options.forEach((option, index) => {\n      option.active = index === activeIndex;\n    });\n  }\n\n  @watch(\"value\", { waitUntilFirstUpdate: true })\n  async _handleValueChange() {\n    this._setActiveToOption();\n\n    // when value change, always emit a change event\n    this.emit(\"sgds-change\");\n\n    if (this.value) {\n      this.emit(\"sgds-select\");\n    }\n    const sgdsInput = await this._input;\n    this._mixinSetFormValue();\n    this._mixinValidate(sgdsInput);\n\n    this._updateDisplayValue();\n    if (!this._isTouched && this.value === \"\") return;\n\n    this.invalid = !this._mixinReportValidity();\n  }\n\n  protected async _handleItemSelected(e: Event) {\n    const itemEl = e.target as SgdsSelectOption;\n    const itemLabel = itemEl.textContent?.trim() ?? \"\";\n    const itemValueAttr = itemEl.getAttribute(\"value\") ?? itemLabel;\n    const foundItem = {\n      label: itemLabel,\n      value: itemValueAttr\n    };\n    this.value = foundItem.value.toString();\n    this.displayValue = foundItem.label;\n    this.hideMenu();\n  }\n\n  protected _handleFocus() {\n    this.emit(\"sgds-focus\");\n  }\n\n  protected async _handleInputBlur(e: Event) {\n    e.preventDefault();\n    this.emit(\"sgds-blur\");\n  }\n\n  /** For form reset  */\n  protected async _mixinResetFormControl() {\n    this.value = this.defaultValue;\n    const initialItem = this.menuList.filter(({ value }) => value === this.value);\n    if (initialItem.length <= 0) {\n      this.displayValue = \"\";\n    } else {\n      this.displayValue = initialItem[0].label;\n    }\n    this._mixinResetValidity(await this._input);\n  }\n  private _blockInputKeydown = (e: KeyboardEvent) => {\n    if (e.key !== \"Tab\") {\n      e.preventDefault();\n    }\n  };\n  /** Applicable for menuList prop only */\n  protected _renderMenu() {\n    const menu = this.menuList.map(item => {\n      const isActive = item.value === this.value;\n      return html`\n        <sgds-select-option\n          ?active=${isActive}\n          value=${item.value}\n          ?disabled=${item.disabled}\n          @click=${item.disabled ? null : this._handleItemSelected}\n          @keydown=${(e: KeyboardEvent) => {\n            if (e.key === \"Enter\") {\n              this._handleItemSelected(e);\n            }\n          }}\n        >\n          ${item.label}\n        </sgds-select-option>\n      `;\n    });\n    return this.menuList.length === 0 ? this._renderEmptyMenu() : menu;\n  }\n  protected _renderInput() {\n    const wantFeedbackStyle = this.hasFeedback;\n    return html`\n      <div\n        ${ref(this.myDropdown)}\n        class=\"form-control-group ${classMap({\n          disabled: this.disabled,\n          readonly: this.readonly,\n          \"is-invalid\": this.invalid && wantFeedbackStyle\n        })}\"\n        @click=${this._handleClick}\n      >\n        <input\n          class=\"form-control\"\n          type=\"text\"\n          id=${this._controlId}\n          name=${ifDefined(this.name)}\n          placeholder=${ifDefined(this.placeholder)}\n          aria-invalid=${this.invalid ? \"true\" : \"false\"}\n          ?autofocus=${this.autofocus}\n          ?disabled=${this.disabled}\n          ?readonly=${this.readonly}\n          ?required=${this.required}\n          .value=${this.displayValue}\n          @blur=${this._handleInputBlur}\n          @focus=${this._handleFocus}\n          aria-describedby=${ifDefined(this.invalid && this.hasFeedback ? `${this._controlId}-invalid` : undefined)}\n          aria-labelledby=\"${this._labelId} ${this._controlId}Help ${this.invalid && this.hasFeedback\n            ? `${this._controlId}-invalid`\n            : \"\"}\"\n          @keydown=${this._blockInputKeydown}\n        />\n        <sgds-icon name=\"chevron-down\" size=\"md\"></sgds-icon>\n      </div>\n    `;\n  }\n\n  render() {\n    return html`\n      <div\n        class=${classMap({\n          disabled: this.disabled,\n          select: true,\n          \"form-control-container\": true\n        })}\n      >\n        ${this._renderLabel()}\n        <!-- The input -->\n        ${this._renderInput()} ${this._renderFeedback()}\n        <ul id=${this.dropdownMenuId} class=\"dropdown-menu\" part=\"menu\" tabindex=\"-1\" ${ref(this.menuRef)}>\n          <slot id=\"default\" class=${classMap({ \"is-loading\": this.loading })} @slotchange=${this._handleSlotChange}\n            >${this._renderMenu()}</slot\n          >\n          ${this.loading ? this._renderLoadingMenu() : nothing}\n        </ul>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsSelect;\n"],"names":["SelectElement","html","ref","classMap","ifDefined","nothing","formTextControlStyles","selectStyle","SgdsIcon","SgdsSpinner","SgdsSelectOption","__decorate","queryAssignedElements","watch"],"mappings":"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"}
+{"version":3,"file":"sgds-select.cjs.js","sources":["../../../../src/components/Select/sgds-select.ts"],"sourcesContent":["import { html, nothing, PropertyValueMap } from \"lit\";\nimport { queryAssignedElements } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { ref } from \"lit/directives/ref.js\";\nimport { SelectElement } from \"../../base/select-element\";\nimport formTextControlStyles from \"../../styles/form-text-control.css\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport selectStyle from \"./select.css\";\nimport SgdsSelectOption from \"./sgds-select-option\";\nimport SgdsSpinner from \"../Spinner/sgds-spinner\";\n/**\n * @summary Select is used to make one selection from a list through keyboard or mouse actions\n *\n * @event sgds-select - Emitted when an option is selected.\n * @event sgds-change - Emitted when the select value changes.\n * @event sgds-focus -  Emitted when user input is focused.\n * @event sgds-blur -  Emitted when user input is blurred.\n *\n * @slot default - slot for sgds-select-option passed into select's menu\n */\nexport class SgdsSelect extends SelectElement {\n  static styles = [...SelectElement.styles, formTextControlStyles, selectStyle];\n  static childName = \"sgds-select-option\";\n  /** @internal */\n  static dependencies = {\n    \"sgds-icon\": SgdsIcon,\n    \"sgds-spinner\": SgdsSpinner,\n    [SgdsSelect.childName]: SgdsSelectOption\n  };\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener(\"sgds-hide\", async () => {\n      const sgdsInput = await this._input;\n      sgdsInput.focus();\n    });\n  }\n  @queryAssignedElements({ flatten: true, selector: \"sgds-select-option\" })\n  protected options: SgdsSelectOption[];\n\n  async firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n    this._updateDisplayValue();\n    this.input = await this._input;\n    this._mixinValidate(this.input);\n    if (this.menuIsOpen) {\n      await this.updateFloatingPosition();\n    }\n  }\n\n  private async _handleSlotChange(e: Event) {\n    const assignedElements = (e.target as HTMLSlotElement).assignedElements({ flatten: true });\n\n    assignedElements.forEach(el =>\n      el.addEventListener(\"click\", (e: MouseEvent) => {\n        const option = e.target as SgdsSelectOption;\n        if (option.disabled) return;\n        this._handleItemSelected(e);\n      })\n    );\n    assignedElements.forEach(el =>\n      el.addEventListener(\"keydown\", (e: KeyboardEvent) => {\n        if (e.key === \"Enter\") {\n          this._handleItemSelected(e);\n        }\n      })\n    );\n    this.menuList = await this._getMenuListFromOptions(assignedElements);\n    this._updateDisplayValue();\n    this.input = await this._input;\n    this._mixinValidate(this.input);\n  }\n  private _updateDisplayValue() {\n    if (this.value && this.menuList.length > 0) {\n      const initialSelectedItem = this.menuList.filter(({ value }) => value === this.value);\n      this.displayValue = initialSelectedItem[0].label;\n\n      this._setActiveToOption();\n    }\n  }\n  private _setActiveToOption() {\n    const activeIndex = this.menuList.findIndex(item => item.value.toString() === this.value);\n    this.options.forEach((option, index) => {\n      option.active = index === activeIndex;\n    });\n  }\n\n  @watch(\"value\", { waitUntilFirstUpdate: true })\n  async _handleValueChange() {\n    this._setActiveToOption();\n\n    // when value change, always emit a change event\n    this.emit(\"sgds-change\");\n\n    if (this.value) {\n      this.emit(\"sgds-select\");\n    }\n    const sgdsInput = await this._input;\n    this._mixinSetFormValue();\n    this._mixinValidate(sgdsInput);\n\n    this._updateDisplayValue();\n    if (!this._isTouched && this.value === \"\") return;\n\n    this.invalid = !this._mixinReportValidity();\n  }\n\n  protected async _handleItemSelected(e: Event) {\n    const itemEl = e.target as SgdsSelectOption;\n    const itemLabel = itemEl.textContent?.trim() ?? \"\";\n    const itemValueAttr = itemEl.getAttribute(\"value\") ?? itemLabel;\n    const foundItem = {\n      label: itemLabel,\n      value: itemValueAttr\n    };\n    this.value = foundItem.value.toString();\n    this.displayValue = foundItem.label;\n    this.hideMenu();\n  }\n\n  protected _handleFocus() {\n    this.emit(\"sgds-focus\");\n  }\n\n  protected async _handleInputBlur(e: Event) {\n    e.preventDefault();\n    this.emit(\"sgds-blur\");\n  }\n\n  /** For form reset  */\n  protected async _mixinResetFormControl() {\n    this.value = this.defaultValue;\n    const initialItem = this.menuList.filter(({ value }) => value === this.value);\n    if (initialItem.length <= 0) {\n      this.displayValue = \"\";\n    } else {\n      this.displayValue = initialItem[0].label;\n    }\n    this._mixinResetValidity(await this._input);\n  }\n  private _blockInputKeydown = (e: KeyboardEvent) => {\n    if (e.key !== \"Tab\") {\n      e.preventDefault();\n    }\n  };\n  /** Applicable for menuList prop only */\n  protected _renderMenu() {\n    const menu = this.menuList.map(item => {\n      const isActive = item.value === this.value;\n      return html`\n        <sgds-select-option\n          ?active=${isActive}\n          value=${item.value}\n          ?disabled=${item.disabled}\n          @click=${item.disabled ? null : this._handleItemSelected}\n          @keydown=${(e: KeyboardEvent) => {\n            if (e.key === \"Enter\") {\n              this._handleItemSelected(e);\n            }\n          }}\n        >\n          ${item.label}\n        </sgds-select-option>\n      `;\n    });\n    return this.menuList.length === 0 ? this._renderEmptyMenu() : menu;\n  }\n  protected _renderInput() {\n    const wantFeedbackStyle = this.hasFeedback;\n    return html`\n      <div\n        ${ref(this.myDropdown)}\n        class=\"form-control-group ${classMap({\n          disabled: this.disabled,\n          readonly: this.readonly,\n          \"is-invalid\": this.invalid && wantFeedbackStyle\n        })}\"\n        @click=${this._handleClick}\n      >\n        <input\n          class=\"form-control\"\n          type=\"text\"\n          id=${this._controlId}\n          name=${ifDefined(this.name)}\n          placeholder=${ifDefined(this.placeholder)}\n          aria-invalid=${this.invalid ? \"true\" : \"false\"}\n          ?autofocus=${this.autofocus}\n          ?disabled=${this.disabled}\n          ?readonly=${this.readonly}\n          ?required=${this.required}\n          .value=${this.displayValue}\n          @blur=${this._handleInputBlur}\n          @focus=${this._handleFocus}\n          aria-describedby=${ifDefined(this.invalid && this.hasFeedback ? `${this._controlId}-invalid` : undefined)}\n          aria-labelledby=\"${this._labelId} ${this._controlId}Help ${this.invalid && this.hasFeedback\n            ? `${this._controlId}-invalid`\n            : \"\"}\"\n          @keydown=${this._blockInputKeydown}\n        />\n        <sgds-icon name=\"chevron-down\" size=\"md\"></sgds-icon>\n      </div>\n    `;\n  }\n\n  render() {\n    return html`\n      <div\n        class=${classMap({\n          disabled: this.disabled,\n          select: true,\n          \"form-control-container\": true\n        })}\n      >\n        ${this._renderLabel()}\n        <!-- The input -->\n        ${this._renderInput()} ${this._renderFeedback()}\n        <ul id=${this.dropdownMenuId} class=\"dropdown-menu\" part=\"menu\" tabindex=\"-1\" ${ref(this.menuRef)}>\n          <slot id=\"default\" class=${classMap({ \"is-loading\": this.loading })} @slotchange=${this._handleSlotChange}\n            >${this._renderMenu()}</slot\n          >\n          ${this.loading ? this._renderLoadingMenu() : nothing}\n        </ul>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsSelect;\n"],"names":["SelectElement","html","ref","classMap","ifDefined","nothing","formTextControlStyles","selectStyle","SgdsIcon","SgdsSpinner","SgdsSelectOption","__decorate","queryAssignedElements","watch"],"mappings":"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"}

package/react/components/Select/sgds-select.js

@@ -44,8 +44,8 @@ class SgdsSelect extends SelectElement {
         this._updateDisplayValue();
         this.input = await this._input;
         this._mixinValidate(this.input);
-        if (this.menuIsOpen && !this.readonly) {
-            this.showMenu();
+        if (this.menuIsOpen) {
+            await this.updateFloatingPosition();
         }
     }
     async _handleSlotChange(e) {

package/react/components/Select/sgds-select.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-select.js","sources":["../../../../src/components/Select/sgds-select.ts"],"sourcesContent":["import { html, nothing, PropertyValueMap } from \"lit\";\nimport { queryAssignedElements } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { ref } from \"lit/directives/ref.js\";\nimport { SelectElement } from \"../../base/select-element\";\nimport formTextControlStyles from \"../../styles/form-text-control.css\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport selectStyle from \"./select.css\";\nimport SgdsSelectOption from \"./sgds-select-option\";\nimport SgdsSpinner from \"../Spinner/sgds-spinner\";\n/**\n * @summary Select is used to make one selection from a list through keyboard or mouse actions\n *\n * @event sgds-select - Emitted when an option is selected.\n * @event sgds-change - Emitted when the select value changes.\n * @event sgds-focus -  Emitted when user input is focused.\n * @event sgds-blur -  Emitted when user input is blurred.\n *\n * @slot default - slot for sgds-select-option passed into select's menu\n */\nexport class SgdsSelect extends SelectElement {\n  static styles = [...SelectElement.styles, formTextControlStyles, selectStyle];\n  static childName = \"sgds-select-option\";\n  /** @internal */\n  static dependencies = {\n    \"sgds-icon\": SgdsIcon,\n    \"sgds-spinner\": SgdsSpinner,\n    [SgdsSelect.childName]: SgdsSelectOption\n  };\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener(\"sgds-hide\", async () => {\n      const sgdsInput = await this._input;\n      sgdsInput.focus();\n    });\n  }\n  @queryAssignedElements({ flatten: true, selector: \"sgds-select-option\" })\n  protected options: SgdsSelectOption[];\n\n  async firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n    this._updateDisplayValue();\n    this.input = await this._input;\n    this._mixinValidate(this.input);\n    if (this.menuIsOpen && !this.readonly) {\n      this.showMenu();\n    }\n  }\n\n  private async _handleSlotChange(e: Event) {\n    const assignedElements = (e.target as HTMLSlotElement).assignedElements({ flatten: true });\n\n    assignedElements.forEach(el =>\n      el.addEventListener(\"click\", (e: MouseEvent) => {\n        const option = e.target as SgdsSelectOption;\n        if (option.disabled) return;\n        this._handleItemSelected(e);\n      })\n    );\n    assignedElements.forEach(el =>\n      el.addEventListener(\"keydown\", (e: KeyboardEvent) => {\n        if (e.key === \"Enter\") {\n          this._handleItemSelected(e);\n        }\n      })\n    );\n    this.menuList = await this._getMenuListFromOptions(assignedElements);\n    this._updateDisplayValue();\n    this.input = await this._input;\n    this._mixinValidate(this.input);\n  }\n  private _updateDisplayValue() {\n    if (this.value && this.menuList.length > 0) {\n      const initialSelectedItem = this.menuList.filter(({ value }) => value === this.value);\n      this.displayValue = initialSelectedItem[0].label;\n\n      this._setActiveToOption();\n    }\n  }\n  private _setActiveToOption() {\n    const activeIndex = this.menuList.findIndex(item => item.value.toString() === this.value);\n    this.options.forEach((option, index) => {\n      option.active = index === activeIndex;\n    });\n  }\n\n  @watch(\"value\", { waitUntilFirstUpdate: true })\n  async _handleValueChange() {\n    this._setActiveToOption();\n\n    // when value change, always emit a change event\n    this.emit(\"sgds-change\");\n\n    if (this.value) {\n      this.emit(\"sgds-select\");\n    }\n    const sgdsInput = await this._input;\n    this._mixinSetFormValue();\n    this._mixinValidate(sgdsInput);\n\n    this._updateDisplayValue();\n    if (!this._isTouched && this.value === \"\") return;\n\n    this.invalid = !this._mixinReportValidity();\n  }\n\n  protected async _handleItemSelected(e: Event) {\n    const itemEl = e.target as SgdsSelectOption;\n    const itemLabel = itemEl.textContent?.trim() ?? \"\";\n    const itemValueAttr = itemEl.getAttribute(\"value\") ?? itemLabel;\n    const foundItem = {\n      label: itemLabel,\n      value: itemValueAttr\n    };\n    this.value = foundItem.value.toString();\n    this.displayValue = foundItem.label;\n    this.hideMenu();\n  }\n\n  protected _handleFocus() {\n    this.emit(\"sgds-focus\");\n  }\n\n  protected async _handleInputBlur(e: Event) {\n    e.preventDefault();\n    this.emit(\"sgds-blur\");\n  }\n\n  /** For form reset  */\n  protected async _mixinResetFormControl() {\n    this.value = this.defaultValue;\n    const initialItem = this.menuList.filter(({ value }) => value === this.value);\n    if (initialItem.length <= 0) {\n      this.displayValue = \"\";\n    } else {\n      this.displayValue = initialItem[0].label;\n    }\n    this._mixinResetValidity(await this._input);\n  }\n  private _blockInputKeydown = (e: KeyboardEvent) => {\n    if (e.key !== \"Tab\") {\n      e.preventDefault();\n    }\n  };\n  /** Applicable for menuList prop only */\n  protected _renderMenu() {\n    const menu = this.menuList.map(item => {\n      const isActive = item.value === this.value;\n      return html`\n        <sgds-select-option\n          ?active=${isActive}\n          value=${item.value}\n          ?disabled=${item.disabled}\n          @click=${item.disabled ? null : this._handleItemSelected}\n          @keydown=${(e: KeyboardEvent) => {\n            if (e.key === \"Enter\") {\n              this._handleItemSelected(e);\n            }\n          }}\n        >\n          ${item.label}\n        </sgds-select-option>\n      `;\n    });\n    return this.menuList.length === 0 ? this._renderEmptyMenu() : menu;\n  }\n  protected _renderInput() {\n    const wantFeedbackStyle = this.hasFeedback;\n    return html`\n      <div\n        ${ref(this.myDropdown)}\n        class=\"form-control-group ${classMap({\n          disabled: this.disabled,\n          readonly: this.readonly,\n          \"is-invalid\": this.invalid && wantFeedbackStyle\n        })}\"\n        @click=${this._handleClick}\n      >\n        <input\n          class=\"form-control\"\n          type=\"text\"\n          id=${this._controlId}\n          name=${ifDefined(this.name)}\n          placeholder=${ifDefined(this.placeholder)}\n          aria-invalid=${this.invalid ? \"true\" : \"false\"}\n          ?autofocus=${this.autofocus}\n          ?disabled=${this.disabled}\n          ?readonly=${this.readonly}\n          ?required=${this.required}\n          .value=${this.displayValue}\n          @blur=${this._handleInputBlur}\n          @focus=${this._handleFocus}\n          aria-describedby=${ifDefined(this.invalid && this.hasFeedback ? `${this._controlId}-invalid` : undefined)}\n          aria-labelledby=\"${this._labelId} ${this._controlId}Help ${this.invalid && this.hasFeedback\n            ? `${this._controlId}-invalid`\n            : \"\"}\"\n          @keydown=${this._blockInputKeydown}\n        />\n        <sgds-icon name=\"chevron-down\" size=\"md\"></sgds-icon>\n      </div>\n    `;\n  }\n\n  render() {\n    return html`\n      <div\n        class=${classMap({\n          disabled: this.disabled,\n          select: true,\n          \"form-control-container\": true\n        })}\n      >\n        ${this._renderLabel()}\n        <!-- The input -->\n        ${this._renderInput()} ${this._renderFeedback()}\n        <ul id=${this.dropdownMenuId} class=\"dropdown-menu\" part=\"menu\" tabindex=\"-1\" ${ref(this.menuRef)}>\n          <slot id=\"default\" class=${classMap({ \"is-loading\": this.loading })} @slotchange=${this._handleSlotChange}\n            >${this._renderMenu()}</slot\n          >\n          ${this.loading ? this._renderLoadingMenu() : nothing}\n        </ul>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsSelect;\n"],"names":["formTextControlStyles","selectStyle"],"mappings":"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"}
+{"version":3,"file":"sgds-select.js","sources":["../../../../src/components/Select/sgds-select.ts"],"sourcesContent":["import { html, nothing, PropertyValueMap } from \"lit\";\nimport { queryAssignedElements } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { ref } from \"lit/directives/ref.js\";\nimport { SelectElement } from \"../../base/select-element\";\nimport formTextControlStyles from \"../../styles/form-text-control.css\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport selectStyle from \"./select.css\";\nimport SgdsSelectOption from \"./sgds-select-option\";\nimport SgdsSpinner from \"../Spinner/sgds-spinner\";\n/**\n * @summary Select is used to make one selection from a list through keyboard or mouse actions\n *\n * @event sgds-select - Emitted when an option is selected.\n * @event sgds-change - Emitted when the select value changes.\n * @event sgds-focus -  Emitted when user input is focused.\n * @event sgds-blur -  Emitted when user input is blurred.\n *\n * @slot default - slot for sgds-select-option passed into select's menu\n */\nexport class SgdsSelect extends SelectElement {\n  static styles = [...SelectElement.styles, formTextControlStyles, selectStyle];\n  static childName = \"sgds-select-option\";\n  /** @internal */\n  static dependencies = {\n    \"sgds-icon\": SgdsIcon,\n    \"sgds-spinner\": SgdsSpinner,\n    [SgdsSelect.childName]: SgdsSelectOption\n  };\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener(\"sgds-hide\", async () => {\n      const sgdsInput = await this._input;\n      sgdsInput.focus();\n    });\n  }\n  @queryAssignedElements({ flatten: true, selector: \"sgds-select-option\" })\n  protected options: SgdsSelectOption[];\n\n  async firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n    this._updateDisplayValue();\n    this.input = await this._input;\n    this._mixinValidate(this.input);\n    if (this.menuIsOpen) {\n      await this.updateFloatingPosition();\n    }\n  }\n\n  private async _handleSlotChange(e: Event) {\n    const assignedElements = (e.target as HTMLSlotElement).assignedElements({ flatten: true });\n\n    assignedElements.forEach(el =>\n      el.addEventListener(\"click\", (e: MouseEvent) => {\n        const option = e.target as SgdsSelectOption;\n        if (option.disabled) return;\n        this._handleItemSelected(e);\n      })\n    );\n    assignedElements.forEach(el =>\n      el.addEventListener(\"keydown\", (e: KeyboardEvent) => {\n        if (e.key === \"Enter\") {\n          this._handleItemSelected(e);\n        }\n      })\n    );\n    this.menuList = await this._getMenuListFromOptions(assignedElements);\n    this._updateDisplayValue();\n    this.input = await this._input;\n    this._mixinValidate(this.input);\n  }\n  private _updateDisplayValue() {\n    if (this.value && this.menuList.length > 0) {\n      const initialSelectedItem = this.menuList.filter(({ value }) => value === this.value);\n      this.displayValue = initialSelectedItem[0].label;\n\n      this._setActiveToOption();\n    }\n  }\n  private _setActiveToOption() {\n    const activeIndex = this.menuList.findIndex(item => item.value.toString() === this.value);\n    this.options.forEach((option, index) => {\n      option.active = index === activeIndex;\n    });\n  }\n\n  @watch(\"value\", { waitUntilFirstUpdate: true })\n  async _handleValueChange() {\n    this._setActiveToOption();\n\n    // when value change, always emit a change event\n    this.emit(\"sgds-change\");\n\n    if (this.value) {\n      this.emit(\"sgds-select\");\n    }\n    const sgdsInput = await this._input;\n    this._mixinSetFormValue();\n    this._mixinValidate(sgdsInput);\n\n    this._updateDisplayValue();\n    if (!this._isTouched && this.value === \"\") return;\n\n    this.invalid = !this._mixinReportValidity();\n  }\n\n  protected async _handleItemSelected(e: Event) {\n    const itemEl = e.target as SgdsSelectOption;\n    const itemLabel = itemEl.textContent?.trim() ?? \"\";\n    const itemValueAttr = itemEl.getAttribute(\"value\") ?? itemLabel;\n    const foundItem = {\n      label: itemLabel,\n      value: itemValueAttr\n    };\n    this.value = foundItem.value.toString();\n    this.displayValue = foundItem.label;\n    this.hideMenu();\n  }\n\n  protected _handleFocus() {\n    this.emit(\"sgds-focus\");\n  }\n\n  protected async _handleInputBlur(e: Event) {\n    e.preventDefault();\n    this.emit(\"sgds-blur\");\n  }\n\n  /** For form reset  */\n  protected async _mixinResetFormControl() {\n    this.value = this.defaultValue;\n    const initialItem = this.menuList.filter(({ value }) => value === this.value);\n    if (initialItem.length <= 0) {\n      this.displayValue = \"\";\n    } else {\n      this.displayValue = initialItem[0].label;\n    }\n    this._mixinResetValidity(await this._input);\n  }\n  private _blockInputKeydown = (e: KeyboardEvent) => {\n    if (e.key !== \"Tab\") {\n      e.preventDefault();\n    }\n  };\n  /** Applicable for menuList prop only */\n  protected _renderMenu() {\n    const menu = this.menuList.map(item => {\n      const isActive = item.value === this.value;\n      return html`\n        <sgds-select-option\n          ?active=${isActive}\n          value=${item.value}\n          ?disabled=${item.disabled}\n          @click=${item.disabled ? null : this._handleItemSelected}\n          @keydown=${(e: KeyboardEvent) => {\n            if (e.key === \"Enter\") {\n              this._handleItemSelected(e);\n            }\n          }}\n        >\n          ${item.label}\n        </sgds-select-option>\n      `;\n    });\n    return this.menuList.length === 0 ? this._renderEmptyMenu() : menu;\n  }\n  protected _renderInput() {\n    const wantFeedbackStyle = this.hasFeedback;\n    return html`\n      <div\n        ${ref(this.myDropdown)}\n        class=\"form-control-group ${classMap({\n          disabled: this.disabled,\n          readonly: this.readonly,\n          \"is-invalid\": this.invalid && wantFeedbackStyle\n        })}\"\n        @click=${this._handleClick}\n      >\n        <input\n          class=\"form-control\"\n          type=\"text\"\n          id=${this._controlId}\n          name=${ifDefined(this.name)}\n          placeholder=${ifDefined(this.placeholder)}\n          aria-invalid=${this.invalid ? \"true\" : \"false\"}\n          ?autofocus=${this.autofocus}\n          ?disabled=${this.disabled}\n          ?readonly=${this.readonly}\n          ?required=${this.required}\n          .value=${this.displayValue}\n          @blur=${this._handleInputBlur}\n          @focus=${this._handleFocus}\n          aria-describedby=${ifDefined(this.invalid && this.hasFeedback ? `${this._controlId}-invalid` : undefined)}\n          aria-labelledby=\"${this._labelId} ${this._controlId}Help ${this.invalid && this.hasFeedback\n            ? `${this._controlId}-invalid`\n            : \"\"}\"\n          @keydown=${this._blockInputKeydown}\n        />\n        <sgds-icon name=\"chevron-down\" size=\"md\"></sgds-icon>\n      </div>\n    `;\n  }\n\n  render() {\n    return html`\n      <div\n        class=${classMap({\n          disabled: this.disabled,\n          select: true,\n          \"form-control-container\": true\n        })}\n      >\n        ${this._renderLabel()}\n        <!-- The input -->\n        ${this._renderInput()} ${this._renderFeedback()}\n        <ul id=${this.dropdownMenuId} class=\"dropdown-menu\" part=\"menu\" tabindex=\"-1\" ${ref(this.menuRef)}>\n          <slot id=\"default\" class=${classMap({ \"is-loading\": this.loading })} @slotchange=${this._handleSlotChange}\n            >${this._renderMenu()}</slot\n          >\n          ${this.loading ? this._renderLoadingMenu() : nothing}\n        </ul>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsSelect;\n"],"names":["formTextControlStyles","selectStyle"],"mappings":"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"}

package/react/index.cjs.js

@@ -47,34 +47,30 @@ var index$E = require('./radio-group/index.cjs.js');
 var index$F = require('./radio/index.cjs.js');
 var index$G = require('./select-option/index.cjs.js');
 var index$H = require('./select/index.cjs.js');
-var index$I = require('./sidebar-group/index.cjs.js');
-var index$J = require('./sidebar-item/index.cjs.js');
-var index$K = require('./sidebar-section/index.cjs.js');
-var index$L = require('./sidebar/index.cjs.js');
-var index$M = require('./sidenav-item/index.cjs.js');
-var index$N = require('./sidenav-link/index.cjs.js');
-var index$O = require('./sidenav/index.cjs.js');
-var index$P = require('./skeleton/index.cjs.js');
-var index$Q = require('./spinner/index.cjs.js');
-var index$R = require('./stepper/index.cjs.js');
-var index$S = require('./subnav-item/index.cjs.js');
-var index$T = require('./subnav/index.cjs.js');
-var index$U = require('./switch/index.cjs.js');
-var index$V = require('./system-banner-item/index.cjs.js');
-var index$W = require('./system-banner/index.cjs.js');
-var index$X = require('./tab-group/index.cjs.js');
-var index$Y = require('./tab-panel/index.cjs.js');
-var index$Z = require('./tab/index.cjs.js');
-var index$_ = require('./table-cell/index.cjs.js');
-var index$$ = require('./table-head/index.cjs.js');
-var index$10 = require('./table-row/index.cjs.js');
-var index$11 = require('./table/index.cjs.js');
-var index$12 = require('./table-of-contents/index.cjs.js');
-var index$13 = require('./textarea/index.cjs.js');
-var index$14 = require('./thumbnail-card/index.cjs.js');
-var index$15 = require('./toast-container/index.cjs.js');
-var index$16 = require('./toast/index.cjs.js');
-var index$17 = require('./tooltip/index.cjs.js');
+var index$I = require('./sidenav-item/index.cjs.js');
+var index$J = require('./sidenav-link/index.cjs.js');
+var index$K = require('./sidenav/index.cjs.js');
+var index$L = require('./skeleton/index.cjs.js');
+var index$M = require('./spinner/index.cjs.js');
+var index$N = require('./stepper/index.cjs.js');
+var index$O = require('./subnav-item/index.cjs.js');
+var index$P = require('./subnav/index.cjs.js');
+var index$Q = require('./switch/index.cjs.js');
+var index$R = require('./system-banner-item/index.cjs.js');
+var index$S = require('./system-banner/index.cjs.js');
+var index$T = require('./tab-group/index.cjs.js');
+var index$U = require('./tab-panel/index.cjs.js');
+var index$V = require('./tab/index.cjs.js');
+var index$W = require('./table-cell/index.cjs.js');
+var index$X = require('./table-head/index.cjs.js');
+var index$Y = require('./table-row/index.cjs.js');
+var index$Z = require('./table/index.cjs.js');
+var index$_ = require('./table-of-contents/index.cjs.js');
+var index$$ = require('./textarea/index.cjs.js');
+var index$10 = require('./thumbnail-card/index.cjs.js');
+var index$11 = require('./toast-container/index.cjs.js');
+var index$12 = require('./toast/index.cjs.js');
+var index$13 = require('./tooltip/index.cjs.js');
 
 
 
@@ -122,32 +118,28 @@ exports.SgdsRadioGroup = index$E["default"];
 exports.SgdsRadio = index$F["default"];
 exports.SgdsSelectOption = index$G["default"];
 exports.SgdsSelect = index$H["default"];
-exports.SgdsSidebarGroup = index$I["default"];
-exports.SgdsSidebarItem = index$J["default"];
-exports.SgdsSidebarSection = index$K["default"];
-exports.SgdsSidebar = index$L["default"];
-exports.SgdsSidenavItem = index$M["default"];
-exports.SgdsSidenavLink = index$N["default"];
-exports.SgdsSidenav = index$O["default"];
-exports.SgdsSkeleton = index$P["default"];
-exports.SgdsSpinner = index$Q["default"];
-exports.SgdsStepper = index$R["default"];
-exports.SgdsSubnavItem = index$S["default"];
-exports.SgdsSubnav = index$T["default"];
-exports.SgdsSwitch = index$U["default"];
-exports.SgdsSystemBannerItem = index$V["default"];
-exports.SgdsSystemBanner = index$W["default"];
-exports.SgdsTabGroup = index$X["default"];
-exports.SgdsTabPanel = index$Y["default"];
-exports.SgdsTab = index$Z["default"];
-exports.SgdsTableCell = index$_["default"];
-exports.SgdsTableHead = index$$["default"];
-exports.SgdsTableRow = index$10["default"];
-exports.SgdsTable = index$11["default"];
-exports.SgdsTableOfContents = index$12["default"];
-exports.SgdsTextarea = index$13["default"];
-exports.SgdsThumbnailCard = index$14["default"];
-exports.SgdsToastContainer = index$15["default"];
-exports.SgdsToast = index$16["default"];
-exports.SgdsTooltip = index$17["default"];
+exports.SgdsSidenavItem = index$I["default"];
+exports.SgdsSidenavLink = index$J["default"];
+exports.SgdsSidenav = index$K["default"];
+exports.SgdsSkeleton = index$L["default"];
+exports.SgdsSpinner = index$M["default"];
+exports.SgdsStepper = index$N["default"];
+exports.SgdsSubnavItem = index$O["default"];
+exports.SgdsSubnav = index$P["default"];
+exports.SgdsSwitch = index$Q["default"];
+exports.SgdsSystemBannerItem = index$R["default"];
+exports.SgdsSystemBanner = index$S["default"];
+exports.SgdsTabGroup = index$T["default"];
+exports.SgdsTabPanel = index$U["default"];
+exports.SgdsTab = index$V["default"];
+exports.SgdsTableCell = index$W["default"];
+exports.SgdsTableHead = index$X["default"];
+exports.SgdsTableRow = index$Y["default"];
+exports.SgdsTable = index$Z["default"];
+exports.SgdsTableOfContents = index$_["default"];
+exports.SgdsTextarea = index$$["default"];
+exports.SgdsThumbnailCard = index$10["default"];
+exports.SgdsToastContainer = index$11["default"];
+exports.SgdsToast = index$12["default"];
+exports.SgdsTooltip = index$13["default"];
 //# sourceMappingURL=index.cjs.js.map

package/react/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/react/index.d.ts

@@ -42,10 +42,6 @@ export { default as SgdsRadioGroup } from './radio-group';
 export { default as SgdsRadio } from './radio';
 export { default as SgdsSelectOption } from './select-option';
 export { default as SgdsSelect } from './select';
-export { default as SgdsSidebarGroup } from './sidebar-group';
-export { default as SgdsSidebarItem } from './sidebar-item';
-export { default as SgdsSidebarSection } from './sidebar-section';
-export { default as SgdsSidebar } from './sidebar';
 export { default as SgdsSidenavItem } from './sidenav-item';
 export { default as SgdsSidenavLink } from './sidenav-link';
 export { default as SgdsSidenav } from './sidenav';

package/react/index.js

@@ -43,10 +43,6 @@ export { default as SgdsRadioGroup } from './radio-group/index.js';
 export { default as SgdsRadio } from './radio/index.js';
 export { default as SgdsSelectOption } from './select-option/index.js';
 export { default as SgdsSelect } from './select/index.js';
-export { default as SgdsSidebarGroup } from './sidebar-group/index.js';
-export { default as SgdsSidebarItem } from './sidebar-item/index.js';
-export { default as SgdsSidebarSection } from './sidebar-section/index.js';
-export { default as SgdsSidebar } from './sidebar/index.js';
 export { default as SgdsSidenavItem } from './sidenav-item/index.js';
 export { default as SgdsSidenavLink } from './sidenav-link/index.js';
 export { default as SgdsSidenav } from './sidenav/index.js';

package/react/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/base/sidebar-element.d.ts

@@ -1,112 +0,0 @@
-import { PropertyValueMap } from "lit";
-import SgdsElement from "./sgds-element";
-/**
- * @summary Base class for sidebar navigation components.
- * Provides core functionality for sidebar items and groups including keyboard navigation,
- * selection state management, and nesting support. This class manages hierarchical navigation,
- * active state tracking, and drawer overlay coordination through context providers.
- *
- * Features:
- * - Multi-level keyboard navigation (Arrow keys, Enter)
- * - Active state management via Lit context subscription
- * - Support for nested hierarchies up to 3 levels deep
- * - Focus management and full ARIA attribute support
- * - Event emission for sidebar coordination (i-sgds-click)
- * - Automatic child element tracking and nesting level detection
- *
- * Keyboard Navigation:
- * - Arrow Up/Down: Navigate between siblings in the same level
- * - Arrow Left/Right: Navigate hierarchically (collapse/expand or move in drawer)
- * - Enter: Activate focused item or toggle group
- *
- * Context Management:
- * - Consumes: SidebarCollapsed, SidebarActiveItem, SidebarActiveGroup, SidebarDrawerItems
- * - Updates state based on context changes for responsive UI updates
- *
- * @internal
- */
-export declare class SidebarElement extends SgdsElement {
-    static styles: import("lit").CSSResult[];
-    /**
-     * The display title/label for the sidebar element.
-     * Shown in the UI and used for accessibility labels (aria-label).
-     * @attribute title
-     * @type {string}
-     * @default ""
-     */
-    title: string;
-    /**
-     * The unique name identifier for the sidebar element.
-     * Used to identify selections in sgds-select events and manage active states.
-     * Should be unique among siblings in the same navigation level.
-     * @attribute name
-     * @type {string}
-     * @default ""
-     */
-    name: string;
-    /** @internal */
-    _sidebarCollapsed: boolean;
-    /** @internal */
-    _sidebarActiveItem: SidebarElement | null;
-    /** @internal */
-    _sidebarActiveGroup: SidebarElement | null;
-    /** @internal */
-    _drawerItems: SidebarElement[] | null;
-    /** @internal Tracks whether a drawer overlay is currently open */
-    _showDrawer: boolean;
-    /** @internal */
-    _childLevel: number;
-    /**
-     * Indicates whether this element is currently selected/active.
-     * @internal
-     */
-    _selected: boolean;
-    /**
-     * Indicates whether this element should be hidden based on nesting context.
-     * @internal
-     */
-    _hidden: boolean;
-    /**
-     * List of child elements assigned to this component.
-     * @internal
-     */
-    _childElements: SidebarElement[];
-    /** @internal */
-    _childActive: boolean;
-    /** @internal */
-    private _defaultNodes;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    firstUpdated(changedProperties: PropertyValueMap<this>): void;
-    updated(): void;
-    /**
-     * Handles slot change events and updates child elements list.
-     * @internal
-     * @returns {void}
-     */
-    _handleSlotChange(): void;
-    /**
-     * Handles click/activation events on the sidebar element.
-     * Emits internal click event for parent sidebar to handle selection.
-     * @internal
-     * @param {SidebarElement} [element] - Optional element parameter (for keyboard compatibility)
-     * @returns {void}
-     */
-    _handleClick(): void;
-    /**
-     * Handles keyboard navigation events for sidebar elements.
-     * Supports Arrow Up/Down for navigation and Arrow Left/Right for drawer management.
-     * @internal
-     * @param {KeyboardEvent} event - The keyboard event object
-     * @returns {void}
-     */
-    private _handleKeyDown;
-    /**
-     * Calculates the nesting level by counting parent sgds-sidebar-group ancestors.
-     * Level 0 = top-level element, Level 1+ = nested within another group.
-     * Updates the _childLevel state property.
-     * @internal
-     * @returns {void}
-     */
-    private getChildLevel;
-}