@carbon/web-components 2.0.0-beta.2 → 2.0.0-beta.4

package/es/components/file-uploader/demo-file-uploader.js.map

@@ -1 +1 @@
-{"version":3,"file":"demo-file-uploader.js","names":["html","property","LitElement","customElement","delay","prefix","ifDefined","FILE_UPLOADER_ITEM_STATE","BUTTON_SIZE","CDSCEDemoFileUploader","_decorate","_initialize","_LitElement","constructor","args","F","d","kind","key","value","_handleChange","event","addedFiles","detail","newFiles","map","item","id","Math","random","toString","slice","file","state","UPLOADING","multiple","_files","files","_simulateUpload","simulateUpload","concat","requestUpdate","forEach","length","_handleDelete","fileId","idToDelete","target","dataset","filter","data","size","_objectSpread","EDIT","invalid","errorSubject","errorBody","rand","COMPLETE","decorators","type","Boolean","reflect","attribute","MEDIUM","render","accept","button","buttonKind","buttonLabel","disabled","labelDescription","labelTitle","inputState","iconDescription","handleChange","handleDelete","_t","_","_t2","inputName","_t3","_t4","name","default"],"sources":["components/file-uploader/demo-file-uploader.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { html, property, LitElement, customElement } from 'lit-element';\n\nimport { delay } from 'bluebird';\nimport { prefix } from '../../globals/settings';\nimport { ifDefined } from 'lit/directives/if-defined';\nimport './index';\nimport { FILE_UPLOADER_ITEM_STATE } from './file-uploader-item';\nimport { BUTTON_SIZE } from '../button/button';\nimport { FileData } from './stories/types';\n\n/**\n * A class to manage file uploading states, like sending file contents to server.\n * DEMONSTRATION-PURPOSE ONLY.\n * Data/state handling in file uploading tends to involve lots of application-specific logics\n * and thus abstracting everything in a library won't be a good return on investment\n * vs. letting users copy code here and implement features that fit their needs.\n */\n@customElement(`${prefix}-ce-demo-file-uploader`)\nexport default class CDSCEDemoFileUploader extends LitElement {\n  /**\n   * The files being uploaded.\n   */\n  private _files: FileData[] = [];\n\n  /**\n   * Handles `cds-drop-container-changed` on `<cds-file-drop-container>`.\n   *\n   * @param event The event.\n   */\n  private _handleChange(event: CustomEvent) {\n    const { addedFiles } = event.detail;\n    const newFiles: FileData[] = addedFiles.map(\n      (item) =>\n        ({\n          id: Math.random().toString(36).slice(2),\n          file: item,\n          state: FILE_UPLOADER_ITEM_STATE.UPLOADING,\n        } as FileData)\n    );\n    const { multiple, _files: files, _simulateUpload: simulateUpload } = this;\n    if (multiple) {\n      this._files = files.concat(newFiles);\n      this.requestUpdate();\n      newFiles.forEach(simulateUpload, this);\n    } else if (addedFiles.length > 0) {\n      this._files = files.concat(newFiles[0]);\n      this.requestUpdate();\n      this._simulateUpload(newFiles[0]);\n    }\n  }\n\n  /**\n   * Handles `cds-file-uploader-item-deleted` on `<cds-file-uploader-item>`.\n   *\n   * @param event The event.\n   */\n  private _handleDelete(event: CustomEvent) {\n    const { fileId: idToDelete } = (event.target as HTMLElement).dataset;\n    this._files = this._files.filter(({ id }) => idToDelete !== id);\n    this.requestUpdate();\n  }\n\n  /**\n   * Simulates updating file.\n   *\n   * @param data The data of the file being uploaded.\n   */\n  private async _simulateUpload(data: FileData) {\n    const { id, file } = data;\n    if (file.size > 524288) {\n      this._files = this._files.map((item) =>\n        id !== item.id\n          ? item\n          : {\n              ...item,\n              state: FILE_UPLOADER_ITEM_STATE.EDIT,\n              invalid: true,\n              errorSubject: 'File size exceeds limit',\n              errorBody:\n                '500kb max file size. Select a new file and try again.',\n            }\n      );\n      this.requestUpdate();\n    } else {\n      // Simulates network request time\n      const rand = Math.random() * 1000;\n      await delay(rand);\n      this._files = this._files.map((item) =>\n        id !== item.id\n          ? item\n          : {\n              ...item,\n              state: FILE_UPLOADER_ITEM_STATE.COMPLETE,\n            }\n      );\n      this.requestUpdate();\n      // Shows x icon after 1 second\n      await delay(1000);\n      this._files = this._files.map((item) =>\n        id !== item.id\n          ? item\n          : {\n              ...item,\n              state: FILE_UPLOADER_ITEM_STATE.EDIT,\n            }\n      );\n      this.requestUpdate();\n    }\n  }\n\n  /**\n   * The file types the file input should accept, separated by space.\n   */\n  @property()\n  accept = '';\n\n  /**\n   * `true` if the drop container should be disabled.\n   */\n  @property({ type: Boolean, reflect: true })\n  button = false;\n\n  /**\n   * Button kind.\n   */\n  @property({ attribute: 'button-kind' })\n  buttonKind = 'primary';\n\n  /**\n   * Button label.\n   */\n  @property({ attribute: 'button-label' })\n  buttonLabel = 'Add file';\n\n  /**\n   * `true` if the drop container should be disabled.\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Icon description.\n   */\n  @property({ attribute: 'icon-description' })\n  iconDescription = '';\n\n  /**\n   * The input name.\n   */\n  @property({ attribute: 'input-name' })\n  inputName = '';\n\n  /**\n   * The label description text.\n   */\n  @property({ attribute: 'label-description' })\n  labelDescription = '';\n\n  /**\n   * The label title.\n   */\n  @property({ attribute: 'label-title' })\n  labelTitle = '';\n\n  /**\n   * `true` if the drop container should accept more than one files at once.\n   * Note that even with `false` set here, user _can_ select multiple files one by one.\n   */\n  @property({ type: Boolean, reflect: true })\n  multiple = false;\n\n  /**\n   * The size of the button item.\n   */\n  @property({ reflect: true })\n  size = BUTTON_SIZE.MEDIUM;\n\n  /**\n   * The state of this file uploader item.\n   */\n  @property({ reflect: true, attribute: 'input-state' })\n  inputState = '';\n\n  render() {\n    const {\n      accept,\n      button,\n      buttonKind,\n      buttonLabel,\n      disabled,\n      labelDescription,\n      labelTitle,\n      multiple,\n      size,\n      inputState,\n      iconDescription,\n      _files: files,\n      _handleChange: handleChange,\n      _handleDelete: handleDelete,\n    } = this;\n    return html`\n      <cds-file-uploader\n        label-description=\"${ifDefined(labelDescription)}\"\n        label-title=\"${ifDefined(labelTitle)}\"\n        ?disabled=\"${disabled}\">\n        ${!button\n          ? html` <cds-file-uploader-drop-container\n              accept=\"${ifDefined(accept)}\"\n              ?multiple=\"${multiple}\"\n              name=\"${ifDefined(this.inputName)}\"\n              @cds-file-uploader-drop-container-changed=\"${handleChange}\">\n              Drag and drop files here or click to upload\n            </cds-file-uploader-drop-container>`\n          : html` <cds-file-uploader-button\n              size=\"${ifDefined(size)}\"\n              button-kind=\"${buttonKind}\"\n              accept=\"${ifDefined(accept)}\"\n              name=\"${ifDefined(this.inputName)}\"\n              ?multiple=\"${multiple}\"\n              @cds-file-uploader-button-changed=\"${handleChange}\">\n              ${buttonLabel}\n            </cds-file-uploader-button>`}\n        ${files.map(\n          ({ id, invalid, file, state, errorSubject, errorBody }) => html`\n            <cds-file-uploader-item\n              data-file-id=\"${id}\"\n              ?invalid=\"${invalid}\"\n              state=\"${inputState || ifDefined(state)}\"\n              icon-description=\"${ifDefined(iconDescription)}\"\n              error-subject=\"${ifDefined(errorSubject)}\"\n              error-body=\"${ifDefined(errorBody)}\"\n              @cds-file-uploader-item-deleted=\"${handleDelete}\">\n              ${file.name}\n            </cds-file-uploader-item>\n          `\n        )}\n      </cds-file-uploader>\n    `;\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"demo-file-uploader.js","names":["html","LitElement","customElement","property","delay","prefix","ifDefined","FILE_UPLOADER_ITEM_STATE","BUTTON_SIZE","CDSCEDemoFileUploader","_decorate","_initialize","_LitElement","constructor","args","F","d","kind","key","value","_handleChange","event","addedFiles","detail","newFiles","map","item","id","Math","random","toString","slice","file","state","UPLOADING","multiple","_files","files","_simulateUpload","simulateUpload","concat","requestUpdate","forEach","length","_handleDelete","fileId","idToDelete","target","dataset","filter","data","size","_objectSpread","EDIT","invalid","errorSubject","errorBody","rand","COMPLETE","decorators","type","Boolean","reflect","attribute","MEDIUM","render","accept","button","buttonKind","buttonLabel","disabled","labelDescription","labelTitle","inputState","iconDescription","handleChange","handleDelete","_t","_","_t2","inputName","_t3","_t4","name","default"],"sources":["components/file-uploader/demo-file-uploader.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { delay } from 'bluebird';\nimport { prefix } from '../../globals/settings';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport './index';\nimport { FILE_UPLOADER_ITEM_STATE } from './file-uploader-item';\nimport { BUTTON_SIZE } from '../button/button';\nimport { FileData } from './stories/types';\n\n/**\n * A class to manage file uploading states, like sending file contents to server.\n * DEMONSTRATION-PURPOSE ONLY.\n * Data/state handling in file uploading tends to involve lots of application-specific logics\n * and thus abstracting everything in a library won't be a good return on investment\n * vs. letting users copy code here and implement features that fit their needs.\n */\n@customElement(`${prefix}-ce-demo-file-uploader`)\nexport default class CDSCEDemoFileUploader extends LitElement {\n  /**\n   * The files being uploaded.\n   */\n  private _files: FileData[] = [];\n\n  /**\n   * Handles `cds-drop-container-changed` on `<cds-file-drop-container>`.\n   *\n   * @param event The event.\n   */\n  private _handleChange(event: CustomEvent) {\n    const { addedFiles } = event.detail;\n    const newFiles: FileData[] = addedFiles.map(\n      (item) =>\n        ({\n          id: Math.random().toString(36).slice(2),\n          file: item,\n          state: FILE_UPLOADER_ITEM_STATE.UPLOADING,\n        } as FileData)\n    );\n    const { multiple, _files: files, _simulateUpload: simulateUpload } = this;\n    if (multiple) {\n      this._files = files.concat(newFiles);\n      this.requestUpdate();\n      newFiles.forEach(simulateUpload, this);\n    } else if (addedFiles.length > 0) {\n      this._files = files.concat(newFiles[0]);\n      this.requestUpdate();\n      this._simulateUpload(newFiles[0]);\n    }\n  }\n\n  /**\n   * Handles `cds-file-uploader-item-deleted` on `<cds-file-uploader-item>`.\n   *\n   * @param event The event.\n   */\n  private _handleDelete(event: CustomEvent) {\n    const { fileId: idToDelete } = (event.target as HTMLElement).dataset;\n    this._files = this._files.filter(({ id }) => idToDelete !== id);\n    this.requestUpdate();\n  }\n\n  /**\n   * Simulates updating file.\n   *\n   * @param data The data of the file being uploaded.\n   */\n  private async _simulateUpload(data: FileData) {\n    const { id, file } = data;\n    if (file.size > 524288) {\n      this._files = this._files.map((item) =>\n        id !== item.id\n          ? item\n          : {\n              ...item,\n              state: FILE_UPLOADER_ITEM_STATE.EDIT,\n              invalid: true,\n              errorSubject: 'File size exceeds limit',\n              errorBody:\n                '500kb max file size. Select a new file and try again.',\n            }\n      );\n      this.requestUpdate();\n    } else {\n      // Simulates network request time\n      const rand = Math.random() * 1000;\n      await delay(rand);\n      this._files = this._files.map((item) =>\n        id !== item.id\n          ? item\n          : {\n              ...item,\n              state: FILE_UPLOADER_ITEM_STATE.COMPLETE,\n            }\n      );\n      this.requestUpdate();\n      // Shows x icon after 1 second\n      await delay(1000);\n      this._files = this._files.map((item) =>\n        id !== item.id\n          ? item\n          : {\n              ...item,\n              state: FILE_UPLOADER_ITEM_STATE.EDIT,\n            }\n      );\n      this.requestUpdate();\n    }\n  }\n\n  /**\n   * The file types the file input should accept, separated by space.\n   */\n  @property()\n  accept = '';\n\n  /**\n   * `true` if the drop container should be disabled.\n   */\n  @property({ type: Boolean, reflect: true })\n  button = false;\n\n  /**\n   * Button kind.\n   */\n  @property({ attribute: 'button-kind' })\n  buttonKind = 'primary';\n\n  /**\n   * Button label.\n   */\n  @property({ attribute: 'button-label' })\n  buttonLabel = 'Add file';\n\n  /**\n   * `true` if the drop container should be disabled.\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Icon description.\n   */\n  @property({ attribute: 'icon-description' })\n  iconDescription = '';\n\n  /**\n   * The input name.\n   */\n  @property({ attribute: 'input-name' })\n  inputName = '';\n\n  /**\n   * The label description text.\n   */\n  @property({ attribute: 'label-description' })\n  labelDescription = '';\n\n  /**\n   * The label title.\n   */\n  @property({ attribute: 'label-title' })\n  labelTitle = '';\n\n  /**\n   * `true` if the drop container should accept more than one files at once.\n   * Note that even with `false` set here, user _can_ select multiple files one by one.\n   */\n  @property({ type: Boolean, reflect: true })\n  multiple = false;\n\n  /**\n   * The size of the button item.\n   */\n  @property({ reflect: true })\n  size = BUTTON_SIZE.MEDIUM;\n\n  /**\n   * The state of this file uploader item.\n   */\n  @property({ reflect: true, attribute: 'input-state' })\n  inputState = '';\n\n  render() {\n    const {\n      accept,\n      button,\n      buttonKind,\n      buttonLabel,\n      disabled,\n      labelDescription,\n      labelTitle,\n      multiple,\n      size,\n      inputState,\n      iconDescription,\n      _files: files,\n      _handleChange: handleChange,\n      _handleDelete: handleDelete,\n    } = this;\n    return html`\n      <cds-file-uploader\n        label-description=\"${ifDefined(labelDescription)}\"\n        label-title=\"${ifDefined(labelTitle)}\"\n        ?disabled=\"${disabled}\">\n        ${!button\n          ? html` <cds-file-uploader-drop-container\n              accept=\"${ifDefined(accept)}\"\n              ?multiple=\"${multiple}\"\n              name=\"${ifDefined(this.inputName)}\"\n              @cds-file-uploader-drop-container-changed=\"${handleChange}\">\n              Drag and drop files here or click to upload\n            </cds-file-uploader-drop-container>`\n          : html` <cds-file-uploader-button\n              size=\"${ifDefined(size)}\"\n              button-kind=\"${buttonKind}\"\n              accept=\"${ifDefined(accept)}\"\n              name=\"${ifDefined(this.inputName)}\"\n              ?multiple=\"${multiple}\"\n              @cds-file-uploader-button-changed=\"${handleChange}\">\n              ${buttonLabel}\n            </cds-file-uploader-button>`}\n        ${files.map(\n          ({ id, invalid, file, state, errorSubject, errorBody }) => html`\n            <cds-file-uploader-item\n              data-file-id=\"${id}\"\n              ?invalid=\"${invalid}\"\n              state=\"${inputState || ifDefined(state)}\"\n              icon-description=\"${ifDefined(iconDescription)}\"\n              error-subject=\"${ifDefined(errorSubject)}\"\n              error-body=\"${ifDefined(errorBody)}\"\n              @cds-file-uploader-item-deleted=\"${handleDelete}\">\n              ${file.name}\n            </cds-file-uploader-item>\n          `\n        )}\n      </cds-file-uploader>\n    `;\n  }\n}\n"],"mappings":"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"}

package/es/components/floating-menu/defs.d.ts

@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020
+ * Copyright IBM Corp. 2020, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -19,56 +19,18 @@ export declare enum FLOATING_MENU_POSITION_DIRECTION {
      */
     RTL = "rtl"
 }
-/**
- * The alignment choices of floating menu.
- */
-export declare enum FLOATING_MENU_ALIGNMENT {
-    /**
-     * Align the top/left position menu body to the one of its trigger button.
-     */
-    START = "start",
-    /**
-     * Align the center position menu body to the one of its trigger button.
-     */
-    CENTER = "center",
-    /**
-     * Align the bottom/right position menu body to the one of its trigger button.
-     */
-    END = "end"
-}
 /**
  * The direction/positioning/orientation choices of floating menu.
  */
 export declare enum FLOATING_MENU_DIRECTION {
-    /**
-     * Put menu body at the left of its trigger button.
-     */
-    LEFT = "left",
     /**
      * Put menu body at the top of its trigger button.
      */
     TOP = "top",
-    /**
-     * Put menu body at the right of its trigger button.
-     */
-    RIGHT = "right",
     /**
      * Put menu body at the bottom of its trigger button.
      */
     BOTTOM = "bottom"
 }
-/**
- * The group of the direction/positioning/orientation choices of floating menu.
- */
-export declare enum FLOATING_MENU_DIRECTION_GROUP {
-    /**
-     * Put menu body at the left/right of its trigger button.
-     */
-    HORIZONTAL = "horizontal",
-    /**
-     * Put menu body at the top/bottom of its trigger button.
-     */
-    VERTICAL = "vertical"
-}
 
 //# sourceMappingURL=defs.d.ts.map

package/es/components/floating-menu/defs.d.ts.map

@@ -1 +1 @@
-{"version":3,"sources":["components/floating-menu/defs.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH;;GAEG;AACH,oBAAY,gCAAgC;IAC1C;;OAEG;IACH,GAAG,QAAQ;IAEX;;OAEG;IACH,GAAG,QAAQ;CACZ;AAED;;GAEG;AACH,oBAAY,uBAAuB;IACjC;;OAEG;IACH,KAAK,UAAU;IAEf;;OAEG;IACH,MAAM,WAAW;IAEjB;;OAEG;IACH,GAAG,QAAQ;CACZ;AAED;;GAEG;AACH,oBAAY,uBAAuB;IACjC;;OAEG;IACH,IAAI,SAAS;IAEb;;OAEG;IACH,GAAG,QAAQ;IAEX;;OAEG;IACH,KAAK,UAAU;IAEf;;OAEG;IACH,MAAM,WAAW;CAClB;AAED;;GAEG;AACH,oBAAY,6BAA6B;IACvC;;OAEG;IACH,UAAU,eAAe;IAEzB;;OAEG;IACH,QAAQ,aAAa;CACtB","file":"defs.d.ts","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2020\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/**\n * The LTR/RTL direction used for positioning floating menu.\n */\nexport enum FLOATING_MENU_POSITION_DIRECTION {\n  /**\n   * LTR.\n   */\n  LTR = 'ltr',\n\n  /**\n   * RTL.\n   */\n  RTL = 'rtl',\n}\n\n/**\n * The alignment choices of floating menu.\n */\nexport enum FLOATING_MENU_ALIGNMENT {\n  /**\n   * Align the top/left position menu body to the one of its trigger button.\n   */\n  START = 'start',\n\n  /**\n   * Align the center position menu body to the one of its trigger button.\n   */\n  CENTER = 'center',\n\n  /**\n   * Align the bottom/right position menu body to the one of its trigger button.\n   */\n  END = 'end',\n}\n\n/**\n * The direction/positioning/orientation choices of floating menu.\n */\nexport enum FLOATING_MENU_DIRECTION {\n  /**\n   * Put menu body at the left of its trigger button.\n   */\n  LEFT = 'left',\n\n  /**\n   * Put menu body at the top of its trigger button.\n   */\n  TOP = 'top',\n\n  /**\n   * Put menu body at the right of its trigger button.\n   */\n  RIGHT = 'right',\n\n  /**\n   * Put menu body at the bottom of its trigger button.\n   */\n  BOTTOM = 'bottom',\n}\n\n/**\n * The group of the direction/positioning/orientation choices of floating menu.\n */\nexport enum FLOATING_MENU_DIRECTION_GROUP {\n  /**\n   * Put menu body at the left/right of its trigger button.\n   */\n  HORIZONTAL = 'horizontal',\n\n  /**\n   * Put menu body at the top/bottom of its trigger button.\n   */\n  VERTICAL = 'vertical',\n}\n"]}
+{"version":3,"sources":["components/floating-menu/defs.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH;;GAEG;AACH,oBAAY,gCAAgC;IAC1C;;OAEG;IACH,GAAG,QAAQ;IAEX;;OAEG;IACH,GAAG,QAAQ;CACZ;AAED;;GAEG;AACH,oBAAY,uBAAuB;IACjC;;OAEG;IACH,GAAG,QAAQ;IAEX;;OAEG;IACH,MAAM,WAAW;CAClB","file":"defs.d.ts","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2020, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/**\n * The LTR/RTL direction used for positioning floating menu.\n */\nexport enum FLOATING_MENU_POSITION_DIRECTION {\n  /**\n   * LTR.\n   */\n  LTR = 'ltr',\n\n  /**\n   * RTL.\n   */\n  RTL = 'rtl',\n}\n\n/**\n * The direction/positioning/orientation choices of floating menu.\n */\nexport enum FLOATING_MENU_DIRECTION {\n  /**\n   * Put menu body at the top of its trigger button.\n   */\n  TOP = 'top',\n\n  /**\n   * Put menu body at the bottom of its trigger button.\n   */\n  BOTTOM = 'bottom',\n}\n"]}

package/es/components/floating-menu/defs.js

@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020
+ * Copyright IBM Corp. 2020, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -13,36 +13,15 @@
 export let FLOATING_MENU_POSITION_DIRECTION;
 
 /**
- * The alignment choices of floating menu.
+ * The direction/positioning/orientation choices of floating menu.
  */
 (function (FLOATING_MENU_POSITION_DIRECTION) {
   FLOATING_MENU_POSITION_DIRECTION["LTR"] = "ltr";
   FLOATING_MENU_POSITION_DIRECTION["RTL"] = "rtl";
 })(FLOATING_MENU_POSITION_DIRECTION || (FLOATING_MENU_POSITION_DIRECTION = {}));
-export let FLOATING_MENU_ALIGNMENT;
-
-/**
- * The direction/positioning/orientation choices of floating menu.
- */
-(function (FLOATING_MENU_ALIGNMENT) {
-  FLOATING_MENU_ALIGNMENT["START"] = "start";
-  FLOATING_MENU_ALIGNMENT["CENTER"] = "center";
-  FLOATING_MENU_ALIGNMENT["END"] = "end";
-})(FLOATING_MENU_ALIGNMENT || (FLOATING_MENU_ALIGNMENT = {}));
 export let FLOATING_MENU_DIRECTION;
-
-/**
- * The group of the direction/positioning/orientation choices of floating menu.
- */
 (function (FLOATING_MENU_DIRECTION) {
-  FLOATING_MENU_DIRECTION["LEFT"] = "left";
   FLOATING_MENU_DIRECTION["TOP"] = "top";
-  FLOATING_MENU_DIRECTION["RIGHT"] = "right";
   FLOATING_MENU_DIRECTION["BOTTOM"] = "bottom";
 })(FLOATING_MENU_DIRECTION || (FLOATING_MENU_DIRECTION = {}));
-export let FLOATING_MENU_DIRECTION_GROUP;
-(function (FLOATING_MENU_DIRECTION_GROUP) {
-  FLOATING_MENU_DIRECTION_GROUP["HORIZONTAL"] = "horizontal";
-  FLOATING_MENU_DIRECTION_GROUP["VERTICAL"] = "vertical";
-})(FLOATING_MENU_DIRECTION_GROUP || (FLOATING_MENU_DIRECTION_GROUP = {}));
 //# sourceMappingURL=defs.js.map

package/es/components/floating-menu/defs.js.map

@@ -1 +1 @@
-{"version":3,"file":"defs.js","names":["FLOATING_MENU_POSITION_DIRECTION","FLOATING_MENU_ALIGNMENT","FLOATING_MENU_DIRECTION","FLOATING_MENU_DIRECTION_GROUP"],"sources":["components/floating-menu/defs.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2020\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/**\n * The LTR/RTL direction used for positioning floating menu.\n */\nexport enum FLOATING_MENU_POSITION_DIRECTION {\n  /**\n   * LTR.\n   */\n  LTR = 'ltr',\n\n  /**\n   * RTL.\n   */\n  RTL = 'rtl',\n}\n\n/**\n * The alignment choices of floating menu.\n */\nexport enum FLOATING_MENU_ALIGNMENT {\n  /**\n   * Align the top/left position menu body to the one of its trigger button.\n   */\n  START = 'start',\n\n  /**\n   * Align the center position menu body to the one of its trigger button.\n   */\n  CENTER = 'center',\n\n  /**\n   * Align the bottom/right position menu body to the one of its trigger button.\n   */\n  END = 'end',\n}\n\n/**\n * The direction/positioning/orientation choices of floating menu.\n */\nexport enum FLOATING_MENU_DIRECTION {\n  /**\n   * Put menu body at the left of its trigger button.\n   */\n  LEFT = 'left',\n\n  /**\n   * Put menu body at the top of its trigger button.\n   */\n  TOP = 'top',\n\n  /**\n   * Put menu body at the right of its trigger button.\n   */\n  RIGHT = 'right',\n\n  /**\n   * Put menu body at the bottom of its trigger button.\n   */\n  BOTTOM = 'bottom',\n}\n\n/**\n * The group of the direction/positioning/orientation choices of floating menu.\n */\nexport enum FLOATING_MENU_DIRECTION_GROUP {\n  /**\n   * Put menu body at the left/right of its trigger button.\n   */\n  HORIZONTAL = 'horizontal',\n\n  /**\n   * Put menu body at the top/bottom of its trigger button.\n   */\n  VERTICAL = 'vertical',\n}\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,WAAYA,gCAAgC;;AAY5C;AACA;AACA;AAFA,WAZYA,gCAAgC;EAAhCA,gCAAgC;EAAhCA,gCAAgC;AAAA,GAAhCA,gCAAgC,KAAhCA,gCAAgC;AAe5C,WAAYC,uBAAuB;;AAiBnC;AACA;AACA;AAFA,WAjBYA,uBAAuB;EAAvBA,uBAAuB;EAAvBA,uBAAuB;EAAvBA,uBAAuB;AAAA,GAAvBA,uBAAuB,KAAvBA,uBAAuB;AAoBnC,WAAYC,uBAAuB;;AAsBnC;AACA;AACA;AAFA,WAtBYA,uBAAuB;EAAvBA,uBAAuB;EAAvBA,uBAAuB;EAAvBA,uBAAuB;EAAvBA,uBAAuB;AAAA,GAAvBA,uBAAuB,KAAvBA,uBAAuB;AAyBnC,WAAYC,6BAA6B;AAUxC,WAVWA,6BAA6B;EAA7BA,6BAA6B;EAA7BA,6BAA6B;AAAA,GAA7BA,6BAA6B,KAA7BA,6BAA6B"}
+{"version":3,"file":"defs.js","names":["FLOATING_MENU_POSITION_DIRECTION","FLOATING_MENU_DIRECTION"],"sources":["components/floating-menu/defs.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2020, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/**\n * The LTR/RTL direction used for positioning floating menu.\n */\nexport enum FLOATING_MENU_POSITION_DIRECTION {\n  /**\n   * LTR.\n   */\n  LTR = 'ltr',\n\n  /**\n   * RTL.\n   */\n  RTL = 'rtl',\n}\n\n/**\n * The direction/positioning/orientation choices of floating menu.\n */\nexport enum FLOATING_MENU_DIRECTION {\n  /**\n   * Put menu body at the top of its trigger button.\n   */\n  TOP = 'top',\n\n  /**\n   * Put menu body at the bottom of its trigger button.\n   */\n  BOTTOM = 'bottom',\n}\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,WAAYA,gCAAgC;;AAY5C;AACA;AACA;AAFA,WAZYA,gCAAgC;EAAhCA,gCAAgC;EAAhCA,gCAAgC;AAAA,GAAhCA,gCAAgC,KAAhCA,gCAAgC;AAe5C,WAAYC,uBAAuB;AAUlC,WAVWA,uBAAuB;EAAvBA,uBAAuB;EAAvBA,uBAAuB;AAAA,GAAvBA,uBAAuB,KAAvBA,uBAAuB"}

package/es/components/floating-menu/floating-menu-trigger.d.ts

@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2020
+ * Copyright IBM Corp. 2019, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -9,7 +9,7 @@
 /**
  * The interface of floating menus containing the trigger button.
  */
-interface BXFloatingMenuTrigger extends HTMLElement {
+interface CDSFloatingMenuTrigger extends HTMLElement {
     /**
      * `true` if the menu should be open.
      */
@@ -19,6 +19,6 @@ interface BXFloatingMenuTrigger extends HTMLElement {
      */
     triggerPosition: ClientRect;
 }
-export default BXFloatingMenuTrigger;
+export default CDSFloatingMenuTrigger;
 
 //# sourceMappingURL=floating-menu-trigger.d.ts.map

package/es/components/floating-menu/floating-menu-trigger.d.ts.map

@@ -1 +1 @@
-{"version":3,"sources":["components/floating-menu/floating-menu-trigger.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH;;GAEG;AACH,UAAU,qBAAsB,SAAQ,WAAW;IACjD;;OAEG;IACH,IAAI,EAAE,OAAO,CAAC;IAEd;;OAEG;IACH,eAAe,EAAE,UAAU,CAAC;CAC7B;AAGD,eAAe,qBAAqB,CAAC","file":"floating-menu-trigger.d.ts","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2020\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/**\n * The interface of floating menus containing the trigger button.\n */\ninterface BXFloatingMenuTrigger extends HTMLElement {\n  /**\n   * `true` if the menu should be open.\n   */\n  open: boolean;\n\n  /**\n   * The position of the trigger button.\n   */\n  triggerPosition: ClientRect;\n}\n\n// eslint-disable-next-line no-undef\nexport default BXFloatingMenuTrigger;\n"]}
+{"version":3,"sources":["components/floating-menu/floating-menu-trigger.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH;;GAEG;AACH,UAAU,sBAAuB,SAAQ,WAAW;IAClD;;OAEG;IACH,IAAI,EAAE,OAAO,CAAC;IAEd;;OAEG;IACH,eAAe,EAAE,UAAU,CAAC;CAC7B;AAGD,eAAe,sBAAsB,CAAC","file":"floating-menu-trigger.d.ts","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/**\n * The interface of floating menus containing the trigger button.\n */\ninterface CDSFloatingMenuTrigger extends HTMLElement {\n  /**\n   * `true` if the menu should be open.\n   */\n  open: boolean;\n\n  /**\n   * The position of the trigger button.\n   */\n  triggerPosition: ClientRect;\n}\n\n// eslint-disable-next-line no-undef\nexport default CDSFloatingMenuTrigger;\n"]}

package/es/components/floating-menu/floating-menu.d.ts

@@ -8,9 +8,9 @@
  */
 import { LitElement } from 'lit';
 import Handle from '../../globals/internal/handle';
-import { FLOATING_MENU_ALIGNMENT, FLOATING_MENU_DIRECTION, FLOATING_MENU_DIRECTION_GROUP, FLOATING_MENU_POSITION_DIRECTION } from './defs';
-import BXFloatingMenuTrigger from './floating-menu-trigger';
-export { FLOATING_MENU_ALIGNMENT, FLOATING_MENU_DIRECTION, FLOATING_MENU_DIRECTION_GROUP, FLOATING_MENU_POSITION_DIRECTION, };
+import { FLOATING_MENU_DIRECTION, FLOATING_MENU_POSITION_DIRECTION } from './defs';
+import CDSFloatingMenuTrigger from './floating-menu-trigger';
+export { FLOATING_MENU_DIRECTION, FLOATING_MENU_POSITION_DIRECTION };
 /**
  * Position of floating menu, or trigger button of floating menu.
  */
@@ -28,7 +28,7 @@ export interface FloatingMenuPosition {
      */
     top: number;
 }
-declare const BXFloatingMenu_base: {
+declare const CDSFloatingMenu_base: {
     new (...args: any[]): {
         _handles: Set<Handle>;
         connectedCallback(): void;
@@ -652,7 +652,7 @@ declare const BXFloatingMenu_base: {
 /**
  * Floating menu.
  */
-declare abstract class BXFloatingMenu extends BXFloatingMenu_base {
+declare abstract class CDSFloatingMenu extends CDSFloatingMenu_base {
     /**
      * The handle for observing resize of the element containing the trigger button.
      */
@@ -666,14 +666,12 @@ declare abstract class BXFloatingMenu extends BXFloatingMenu_base {
      */
     private _resizeObserver;
     private _handleBlur;
+    private _click;
+    private _handleKeyDown;
     /**
      * The DOM element, typically a custom element in this library, launching this floating menu.
      */
-    protected parent: BXFloatingMenuTrigger | null;
-    /**
-     * How the menu is aligned to the trigger button.
-     */
-    abstract alignment: FLOATING_MENU_ALIGNMENT;
+    protected parent: CDSFloatingMenuTrigger | null;
     /**
      * The menu direction.
      */
@@ -683,9 +681,9 @@ declare abstract class BXFloatingMenu extends BXFloatingMenu_base {
      */
     abstract open: boolean;
     /**
-     * The horizontal/vertical direction with regard to how the menu is aligned to the trigger button.
+     * `true` if the menu alignment should be flipped.
      */
-    get alignmentDirection(): FLOATING_MENU_DIRECTION_GROUP;
+    abstract flipped: boolean;
     /**
      * The DOM element to put this menu into.
      */
@@ -710,6 +708,6 @@ declare abstract class BXFloatingMenu extends BXFloatingMenu_base {
         slotAssignment?: SlotAssignmentMode | undefined;
     };
 }
-export default BXFloatingMenu;
+export default CDSFloatingMenu;
 
 //# sourceMappingURL=floating-menu.d.ts.map

package/es/components/floating-menu/floating-menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"sources":["components/floating-menu/floating-menu.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAIjC,OAAO,MAAM,MAAM,+BAA+B,CAAC;AACnD,OAAO,EACL,uBAAuB,EACvB,uBAAuB,EACvB,6BAA6B,EAC7B,gCAAgC,EACjC,MAAM,QAAQ,CAAC;AAChB,OAAO,qBAAqB,MAAM,yBAAyB,CAAC;AAG5D,OAAO,EACL,uBAAuB,EACvB,uBAAuB,EACvB,6BAA6B,EAC7B,gCAAgC,GACjC,CAAC;AAEF;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC;;OAEG;IACH,SAAS,EAAE,gCAAgC,CAAC;IAE5C;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,GAAG,EAAE,MAAM,CAAC;CACb;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCD;;GAEG;AACH,uBAAe,cAAe,SAAQ,mBAErC;IACC;;OAEG;IACH,OAAO,CAAC,qBAAqB,CAAuB;IAEpD;;OAEG;IACH,OAAO,CAAC,wBAAwB,CAAuB;IAEvD;;OAEG;IAGH,OAAO,CAAC,eAAe,CASpB;IAIH,OAAO,CAAC,WAAW,CAQjB;IAEF;;OAEG;IACH,SAAS,CAAC,MAAM,EAAE,qBAAqB,GAAG,IAAI,CAAQ;IAEtD;;OAEG;IACH,QAAQ,CAAC,SAAS,EAAE,uBAAuB,CAAC;IAE5C;;OAEG;IACH,QAAQ,CAAC,SAAS,EAAE,uBAAuB,CAAC;IAE5C;;OAEG;IACH,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAC;IAEvB;;OAEG;IACH,IAAI,kBAAkB,kCAQrB;IAED;;OAEG;IACH,IAAI,SAAS,QAOZ;IAED;;OAEG;IACH,IAAI,QAAQ,IAAI,oBAAoB,CAqGnC;IAED,oBAAoB;IASpB,OAAO,CAAC,iBAAiB,KAAA;IA0CzB;;OAEG;IACH,MAAM,CAAC,aAAa,UAAQ;IAE5B;;OAEG;IACH,MAAM,KAAK,iBAAiB,WAE3B;IACD,MAAM,CAAC,iBAAiB;;;;MAGtB;CACH;AAED,eAAe,cAAc,CAAC","file":"floating-menu.d.ts","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement } from 'lit';\nimport HostListener from '../../globals/decorators/host-listener';\nimport FocusMixin from '../../globals/mixins/focus';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport Handle from '../../globals/internal/handle';\nimport {\n  FLOATING_MENU_ALIGNMENT,\n  FLOATING_MENU_DIRECTION,\n  FLOATING_MENU_DIRECTION_GROUP,\n  FLOATING_MENU_POSITION_DIRECTION,\n} from './defs';\nimport BXFloatingMenuTrigger from './floating-menu-trigger';\nimport { prefix } from '../../globals/settings';\n\nexport {\n  FLOATING_MENU_ALIGNMENT,\n  FLOATING_MENU_DIRECTION,\n  FLOATING_MENU_DIRECTION_GROUP,\n  FLOATING_MENU_POSITION_DIRECTION,\n};\n\n/**\n * Position of floating menu, or trigger button of floating menu.\n */\nexport interface FloatingMenuPosition {\n  /**\n   * The LTR/RTL direction used for positioning floating menu.\n   */\n  direction: FLOATING_MENU_POSITION_DIRECTION;\n\n  /**\n   * The start position (Left position for LTR, right position for RTL).\n   */\n  start: number;\n\n  /**\n   * The top position.\n   */\n  top: number;\n}\n\n/**\n * Observes resize of the given element with the given resize observer.\n *\n * @param observer The resize observer.\n * @param elem The element to observe the resize.\n */\nconst observeResize = (observer: ResizeObserver, elem: Element) => {\n  observer.observe(elem);\n  return {\n    release() {\n      observer.unobserve(elem);\n      return null;\n    },\n  } as Handle;\n};\n\n/**\n * @param elem The starting element.\n * @param selector The CSS selector.\n * @returns {Element}\n *   The closest ancestor node of the given element that matches the given selector, crossing Shadow DOM boundary.\n */\nconst closestComposed = (elem: Element, selector: string) => {\n  const found = elem.closest(selector);\n  if (found) {\n    return found;\n  }\n  const { host } = elem.getRootNode() as ShadowRoot;\n  if (host) {\n    return closestComposed(host, selector);\n  }\n  return null;\n};\n\n/**\n * Floating menu.\n */\nabstract class BXFloatingMenu extends HostListenerMixin(\n  FocusMixin(LitElement)\n) {\n  /**\n   * The handle for observing resize of the element containing the trigger button.\n   */\n  private _hObserveResizeParent: Handle | null = null;\n\n  /**\n   * The handle for observing resize of the floating menu container.\n   */\n  private _hObserveResizeContainer: Handle | null = null;\n\n  /**\n   * The `ResizeObserver` instance for observing element resizes for re-positioning floating menu position.\n   */\n  // TODO: Wait for `.d.ts` update to support `ResizeObserver`\n  // @ts-ignore\n  private _resizeObserver = new ResizeObserver(() => {\n    const { container, open, parent, position } = this;\n    if (container && open && parent) {\n      const { direction, start, top } = position;\n      this.style[\n        direction !== FLOATING_MENU_POSITION_DIRECTION.RTL ? 'left' : 'right'\n      ] = `${start}px`;\n      this.style.top = `${top}px`;\n    }\n  });\n\n  @HostListener('focusout')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleBlur = ({ relatedTarget }: FocusEvent) => {\n    if (!this.contains(relatedTarget as Node)) {\n      const { parent } = this;\n      if (parent) {\n        parent.open = false;\n        HTMLElement.prototype.focus.call(this.parent); // SVGElement in IE11 does not have `.focus()` method\n      }\n    }\n  };\n\n  /**\n   * The DOM element, typically a custom element in this library, launching this floating menu.\n   */\n  protected parent: BXFloatingMenuTrigger | null = null;\n\n  /**\n   * How the menu is aligned to the trigger button.\n   */\n  abstract alignment: FLOATING_MENU_ALIGNMENT;\n\n  /**\n   * The menu direction.\n   */\n  abstract direction: FLOATING_MENU_DIRECTION;\n\n  /**\n   * `true` if the menu should be open.\n   */\n  abstract open: boolean;\n\n  /**\n   * The horizontal/vertical direction with regard to how the menu is aligned to the trigger button.\n   */\n  get alignmentDirection() {\n    return {\n      [FLOATING_MENU_DIRECTION.LEFT]: FLOATING_MENU_DIRECTION_GROUP.VERTICAL,\n      [FLOATING_MENU_DIRECTION.TOP]: FLOATING_MENU_DIRECTION_GROUP.HORIZONTAL,\n      [FLOATING_MENU_DIRECTION.RIGHT]: FLOATING_MENU_DIRECTION_GROUP.VERTICAL,\n      [FLOATING_MENU_DIRECTION.BOTTOM]:\n        FLOATING_MENU_DIRECTION_GROUP.HORIZONTAL,\n    }[this.direction];\n  }\n\n  /**\n   * The DOM element to put this menu into.\n   */\n  get container() {\n    return (\n      closestComposed(\n        this,\n        (this.constructor as typeof BXFloatingMenu).selectorContainer\n      ) || this.ownerDocument!.body\n    );\n  }\n\n  /**\n   * The position of this floating menu.\n   */\n  get position(): FloatingMenuPosition {\n    const { triggerPosition } = this.parent!;\n    if (!triggerPosition) {\n      throw new TypeError('Missing information of trigger button position.');\n    }\n\n    const { container } = this;\n    const {\n      left: refLeft = 0,\n      top: refTop = 0,\n      right: refRight = 0,\n      bottom: refBottom = 0,\n    } = triggerPosition;\n    const { width, height } = this.getBoundingClientRect();\n    const {\n      left: containerLeft = 0,\n      right: containerRight = 0,\n      top: containerTop = 0,\n    } = container.getBoundingClientRect();\n    const refCenterHorizontal = (refLeft + refRight) / 2;\n    const refCenterVertical = (refTop + refBottom) / 2;\n\n    const containerComputedStyle =\n      container.ownerDocument!.defaultView!.getComputedStyle(container);\n    const positionDirection = containerComputedStyle.getPropertyValue(\n      'direction'\n    ) as FLOATING_MENU_POSITION_DIRECTION;\n    const isRtl = positionDirection === FLOATING_MENU_POSITION_DIRECTION.RTL;\n    const containerStartFromViewport = !isRtl\n      ? containerLeft\n      : container.ownerDocument!.defaultView!.innerWidth - containerRight;\n    const refStartFromContainer = !isRtl\n      ? refLeft - containerLeft\n      : containerRight - refRight;\n    const refEndFromContainer = !isRtl\n      ? refRight - containerLeft\n      : containerRight - refLeft;\n    const refCenterHorizontalFromContainer = !isRtl\n      ? refCenterHorizontal - containerLeft\n      : containerRight - refCenterHorizontal;\n    const refTopFromContainer = refTop - containerTop;\n    const refCenterVerticalFromContainer = refCenterVertical - containerTop;\n\n    if (\n      (container !== this.ownerDocument!.body ||\n        containerStartFromViewport !== 0 ||\n        containerTop !== 0) &&\n      containerComputedStyle.getPropertyValue('position') === 'static'\n    ) {\n      throw new Error(\n        'Floating menu container must not have `position:static`.'\n      );\n    }\n\n    const { alignment, alignmentDirection, direction } = this;\n    if (Object.values(FLOATING_MENU_ALIGNMENT).indexOf(alignment) < 0) {\n      throw new Error(`Wrong menu alignment: ${alignment}`);\n    }\n    if (Object.values(FLOATING_MENU_DIRECTION).indexOf(direction) < 0) {\n      throw new Error(`Wrong menu position direction: ${direction}`);\n    }\n\n    const alignmentStart = {\n      [FLOATING_MENU_DIRECTION_GROUP.HORIZONTAL]: {\n        [FLOATING_MENU_ALIGNMENT.START]: () => refStartFromContainer,\n        [FLOATING_MENU_ALIGNMENT.CENTER]: () =>\n          refCenterHorizontalFromContainer - width / 2,\n        [FLOATING_MENU_ALIGNMENT.END]: () => refEndFromContainer - width,\n      },\n      [FLOATING_MENU_DIRECTION_GROUP.VERTICAL]: {\n        [FLOATING_MENU_ALIGNMENT.START]: () => refTopFromContainer,\n        [FLOATING_MENU_ALIGNMENT.CENTER]: () =>\n          refCenterVerticalFromContainer - height / 2,\n        [FLOATING_MENU_ALIGNMENT.END]: () => refBottom - height,\n      },\n    }[alignmentDirection][alignment]();\n\n    const { start, top } = {\n      [FLOATING_MENU_DIRECTION.LEFT]: () => ({\n        start: refStartFromContainer - width,\n        top: alignmentStart,\n      }),\n      [FLOATING_MENU_DIRECTION.TOP]: () => ({\n        start: alignmentStart,\n        top: refTopFromContainer - height,\n      }),\n      [FLOATING_MENU_DIRECTION.RIGHT]: () => ({\n        start: refEndFromContainer,\n        top: alignmentStart,\n      }),\n      [FLOATING_MENU_DIRECTION.BOTTOM]: () => ({\n        start: alignmentStart,\n        top: refBottom,\n      }),\n    }[direction]();\n\n    return {\n      direction: positionDirection,\n      start,\n      top,\n    };\n  }\n\n  disconnectedCallback() {\n    if (this._hObserveResizeContainer) {\n      this._hObserveResizeContainer = this._hObserveResizeContainer.release();\n    }\n    if (this._hObserveResizeParent) {\n      this._hObserveResizeParent = this._hObserveResizeParent.release();\n    }\n  }\n\n  updated(changedProperties) {\n    const { container, open, parent } = this;\n    if (\n      (changedProperties.has('alignment') ||\n        changedProperties.has('direction') ||\n        changedProperties.has('open')) &&\n      open\n    ) {\n      if (!parent) {\n        this.parent = this.parentElement as BXFloatingMenuTrigger;\n        container.appendChild(this);\n      }\n      // Note: `this.position` cannot be referenced until `this.parent` is set\n      const { direction, start, top } = this.position;\n      this.style[\n        direction !== FLOATING_MENU_POSITION_DIRECTION.RTL ? 'left' : 'right'\n      ] = `${start}px`;\n      this.style.top = `${top}px`;\n    }\n    if (changedProperties.has('open')) {\n      if (this._hObserveResizeContainer) {\n        this._hObserveResizeContainer = this._hObserveResizeContainer.release();\n      }\n      if (this._hObserveResizeParent) {\n        this._hObserveResizeParent = this._hObserveResizeParent.release();\n      }\n      if (open) {\n        const { parentElement } = this.parent ?? {};\n        this._hObserveResizeContainer = observeResize(\n          this._resizeObserver,\n          container\n        );\n        if (parentElement) {\n          this._hObserveResizeParent = observeResize(\n            this._resizeObserver,\n            parentElement\n          );\n        }\n      }\n    }\n  }\n\n  /**\n   * A constant indicating that this class is a floating menu.\n   */\n  static FLOATING_MENU = true;\n\n  /**\n   * The CSS selector to find the element to put this floating menu in.\n   */\n  static get selectorContainer() {\n    return `[data-floating-menu-container],${prefix}-modal`;\n  }\n  static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n}\n\nexport default BXFloatingMenu;\n"]}
+{"version":3,"sources":["components/floating-menu/floating-menu.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAIjC,OAAO,MAAM,MAAM,+BAA+B,CAAC;AACnD,OAAO,EACL,uBAAuB,EACvB,gCAAgC,EACjC,MAAM,QAAQ,CAAC;AAChB,OAAO,sBAAsB,MAAM,yBAAyB,CAAC;AAG7D,OAAO,EAAE,uBAAuB,EAAE,gCAAgC,EAAE,CAAC;AAErE;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC;;OAEG;IACH,SAAS,EAAE,gCAAgC,CAAC;IAE5C;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,GAAG,EAAE,MAAM,CAAC;CACb;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCD;;GAEG;AACH,uBAAe,eAAgB,SAAQ,oBAEtC;IACC;;OAEG;IACH,OAAO,CAAC,qBAAqB,CAAuB;IAEpD;;OAEG;IACH,OAAO,CAAC,wBAAwB,CAAuB;IAEvD;;OAEG;IAGH,OAAO,CAAC,eAAe,CASpB;IAIH,OAAO,CAAC,WAAW,CAQjB;IAIF,OAAO,CAAC,MAAM,CAKZ;IAIF,OAAO,CAAC,cAAc,CASpB;IAEF;;OAEG;IACH,SAAS,CAAC,MAAM,EAAE,sBAAsB,GAAG,IAAI,CAAQ;IAEvD;;OAEG;IACH,QAAQ,CAAC,SAAS,EAAE,uBAAuB,CAAC;IAE5C;;OAEG;IACH,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAC;IAEvB;;OAEG;IACH,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC;IAE1B;;OAEG;IACH,IAAI,SAAS,QAOZ;IAED;;OAEG;IACH,IAAI,QAAQ,IAAI,oBAAoB,CAyEnC;IAED,oBAAoB;IASpB,OAAO,CAAC,iBAAiB,KAAA;IA0CzB;;OAEG;IACH,MAAM,CAAC,aAAa,UAAQ;IAE5B;;OAEG;IACH,MAAM,KAAK,iBAAiB,WAE3B;IACD,MAAM,CAAC,iBAAiB;;;;MAGtB;CACH;AAED,eAAe,eAAe,CAAC","file":"floating-menu.d.ts","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement } from 'lit';\nimport HostListener from '../../globals/decorators/host-listener';\nimport FocusMixin from '../../globals/mixins/focus';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport Handle from '../../globals/internal/handle';\nimport {\n  FLOATING_MENU_DIRECTION,\n  FLOATING_MENU_POSITION_DIRECTION,\n} from './defs';\nimport CDSFloatingMenuTrigger from './floating-menu-trigger';\nimport { prefix } from '../../globals/settings';\n\nexport { FLOATING_MENU_DIRECTION, FLOATING_MENU_POSITION_DIRECTION };\n\n/**\n * Position of floating menu, or trigger button of floating menu.\n */\nexport interface FloatingMenuPosition {\n  /**\n   * The LTR/RTL direction used for positioning floating menu.\n   */\n  direction: FLOATING_MENU_POSITION_DIRECTION;\n\n  /**\n   * The start position (Left position for LTR, right position for RTL).\n   */\n  start: number;\n\n  /**\n   * The top position.\n   */\n  top: number;\n}\n\n/**\n * Observes resize of the given element with the given resize observer.\n *\n * @param observer The resize observer.\n * @param elem The element to observe the resize.\n */\nconst observeResize = (observer: ResizeObserver, elem: Element) => {\n  observer.observe(elem);\n  return {\n    release() {\n      observer.unobserve(elem);\n      return null;\n    },\n  } as Handle;\n};\n\n/**\n * @param elem The starting element.\n * @param selector The CSS selector.\n * @returns {Element}\n *   The closest ancestor node of the given element that matches the given selector, crossing Shadow DOM boundary.\n */\nconst closestComposed = (elem: Element, selector: string) => {\n  const found = elem.closest(selector);\n  if (found) {\n    return found;\n  }\n  const { host } = elem.getRootNode() as ShadowRoot;\n  if (host) {\n    return closestComposed(host, selector);\n  }\n  return null;\n};\n\n/**\n * Floating menu.\n */\nabstract class CDSFloatingMenu extends HostListenerMixin(\n  FocusMixin(LitElement)\n) {\n  /**\n   * The handle for observing resize of the element containing the trigger button.\n   */\n  private _hObserveResizeParent: Handle | null = null;\n\n  /**\n   * The handle for observing resize of the floating menu container.\n   */\n  private _hObserveResizeContainer: Handle | null = null;\n\n  /**\n   * The `ResizeObserver` instance for observing element resizes for re-positioning floating menu position.\n   */\n  // TODO: Wait for `.d.ts` update to support `ResizeObserver`\n  // @ts-ignore\n  private _resizeObserver = new ResizeObserver(() => {\n    const { container, open, parent, position } = this;\n    if (container && open && parent) {\n      const { direction, start, top } = position;\n      this.style[\n        direction !== FLOATING_MENU_POSITION_DIRECTION.RTL ? 'left' : 'right'\n      ] = `${start}px`;\n      this.style.top = `${top}px`;\n    }\n  });\n\n  @HostListener('focusout')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleBlur = ({ relatedTarget }: FocusEvent) => {\n    if (!this.contains(relatedTarget as Node)) {\n      const { parent } = this;\n      if (parent && parent !== relatedTarget) {\n        parent.open = false;\n        HTMLElement.prototype.focus.call(this.parent); // SVGElement in IE11 does not have `.focus()` method\n      }\n    }\n  };\n\n  @HostListener('click')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _click = (event: MouseEvent) => {\n    const { parent } = this;\n    if (parent) {\n      parent.open = false;\n    }\n  };\n\n  @HostListener('keydown')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleKeyDown = (event: KeyboardEvent) => {\n    if (event.key === 'Tab') {\n      if (event.shiftKey) {\n        const { parent } = this;\n        if (parent) {\n          parent.open = false;\n        }\n      }\n    }\n  };\n\n  /**\n   * The DOM element, typically a custom element in this library, launching this floating menu.\n   */\n  protected parent: CDSFloatingMenuTrigger | null = null;\n\n  /**\n   * The menu direction.\n   */\n  abstract direction: FLOATING_MENU_DIRECTION;\n\n  /**\n   * `true` if the menu should be open.\n   */\n  abstract open: boolean;\n\n  /**\n   * `true` if the menu alignment should be flipped.\n   */\n  abstract flipped: boolean;\n\n  /**\n   * The DOM element to put this menu into.\n   */\n  get container() {\n    return (\n      closestComposed(\n        this,\n        (this.constructor as typeof CDSFloatingMenu).selectorContainer\n      ) || this.ownerDocument!.body\n    );\n  }\n\n  /**\n   * The position of this floating menu.\n   */\n  get position(): FloatingMenuPosition {\n    const { triggerPosition } = this.parent!;\n    if (!triggerPosition) {\n      throw new TypeError('Missing information of trigger button position.');\n    }\n\n    const { container } = this;\n    const {\n      left: refLeft = 0,\n      top: refTop = 0,\n      right: refRight = 0,\n      bottom: refBottom = 0,\n    } = triggerPosition;\n    const { width, height } = this.getBoundingClientRect();\n    const {\n      left: containerLeft = 0,\n      right: containerRight = 0,\n      top: containerTop = 0,\n    } = container.getBoundingClientRect();\n\n    const containerComputedStyle =\n      container.ownerDocument!.defaultView!.getComputedStyle(container);\n    const positionDirection = containerComputedStyle.getPropertyValue(\n      'direction'\n    ) as FLOATING_MENU_POSITION_DIRECTION;\n    const isRtl = positionDirection === FLOATING_MENU_POSITION_DIRECTION.RTL;\n    const containerStartFromViewport = !isRtl\n      ? containerLeft\n      : container.ownerDocument!.defaultView!.innerWidth - containerRight;\n    const refStartFromContainer = !isRtl\n      ? refLeft - containerLeft\n      : containerRight - refRight;\n    const refEndFromContainer = !isRtl\n      ? refRight - containerLeft\n      : containerRight - refLeft;\n    const refTopFromContainer = refTop - containerTop;\n\n    if (\n      (container !== this.ownerDocument!.body ||\n        containerStartFromViewport !== 0 ||\n        containerTop !== 0) &&\n      containerComputedStyle.getPropertyValue('position') === 'static'\n    ) {\n      throw new Error(\n        'Floating menu container must not have `position:static`.'\n      );\n    }\n\n    const { flipped, direction } = this;\n    if (Object.values(FLOATING_MENU_DIRECTION).indexOf(direction) < 0) {\n      throw new Error(`Wrong menu position direction: ${direction}`);\n    }\n\n    const alignmentStart = flipped\n      ? refEndFromContainer - width\n      : refStartFromContainer;\n\n    const { start, top } = {\n      [FLOATING_MENU_DIRECTION.TOP]: () => ({\n        start: alignmentStart,\n        top: refTopFromContainer - height,\n      }),\n      [FLOATING_MENU_DIRECTION.BOTTOM]: () => ({\n        start: alignmentStart,\n        top: refBottom,\n      }),\n    }[direction]();\n\n    return {\n      direction: positionDirection,\n      start,\n      top,\n    };\n  }\n\n  disconnectedCallback() {\n    if (this._hObserveResizeContainer) {\n      this._hObserveResizeContainer = this._hObserveResizeContainer.release();\n    }\n    if (this._hObserveResizeParent) {\n      this._hObserveResizeParent = this._hObserveResizeParent.release();\n    }\n  }\n\n  updated(changedProperties) {\n    const { container, open, parent } = this;\n    if (\n      (changedProperties.has('flipped') ||\n        changedProperties.has('direction') ||\n        changedProperties.has('open')) &&\n      open\n    ) {\n      if (!parent) {\n        this.parent = this.parentElement as CDSFloatingMenuTrigger;\n        container.appendChild(this);\n      }\n      // Note: `this.position` cannot be referenced until `this.parent` is set\n      const { direction, start, top } = this.position;\n      this.style[\n        direction !== FLOATING_MENU_POSITION_DIRECTION.RTL ? 'left' : 'right'\n      ] = `${start}px`;\n      this.style.top = `${top}px`;\n    }\n    if (changedProperties.has('open')) {\n      if (this._hObserveResizeContainer) {\n        this._hObserveResizeContainer = this._hObserveResizeContainer.release();\n      }\n      if (this._hObserveResizeParent) {\n        this._hObserveResizeParent = this._hObserveResizeParent.release();\n      }\n      if (open) {\n        const { parentElement } = this.parent ?? {};\n        this._hObserveResizeContainer = observeResize(\n          this._resizeObserver,\n          container\n        );\n        if (parentElement) {\n          this._hObserveResizeParent = observeResize(\n            this._resizeObserver,\n            parentElement\n          );\n        }\n      }\n    }\n  }\n\n  /**\n   * A constant indicating that this class is a floating menu.\n   */\n  static FLOATING_MENU = true;\n\n  /**\n   * The CSS selector to find the element to put this floating menu in.\n   */\n  static get selectorContainer() {\n    return `[data-floating-menu-container],${prefix}-modal`;\n  }\n  static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n}\n\nexport default CDSFloatingMenu;\n"]}

package/es/components/floating-menu/floating-menu.js

@@ -13,9 +13,9 @@ import { LitElement } from 'lit';
 import HostListener from '../../globals/decorators/host-listener';
 import FocusMixin from '../../globals/mixins/focus';
 import HostListenerMixin from '../../globals/mixins/host-listener';
-import { FLOATING_MENU_ALIGNMENT, FLOATING_MENU_DIRECTION, FLOATING_MENU_DIRECTION_GROUP, FLOATING_MENU_POSITION_DIRECTION } from './defs';
+import { FLOATING_MENU_DIRECTION, FLOATING_MENU_POSITION_DIRECTION } from './defs';
 import { prefix } from '../../globals/settings';
-export { FLOATING_MENU_ALIGNMENT, FLOATING_MENU_DIRECTION, FLOATING_MENU_DIRECTION_GROUP, FLOATING_MENU_POSITION_DIRECTION };
+export { FLOATING_MENU_DIRECTION, FLOATING_MENU_POSITION_DIRECTION };
 
 /**
  * Position of floating menu, or trigger button of floating menu.
@@ -60,15 +60,15 @@ const closestComposed = (elem, selector) => {
 /**
  * Floating menu.
  */
-let BXFloatingMenu = _decorate(null, function (_initialize, _HostListenerMixin) {
-  class BXFloatingMenu extends _HostListenerMixin {
+let CDSFloatingMenu = _decorate(null, function (_initialize, _HostListenerMixin) {
+  class CDSFloatingMenu extends _HostListenerMixin {
     constructor(...args) {
       super(...args);
       _initialize(this);
     }
   }
   return {
-    F: BXFloatingMenu,
+    F: CDSFloatingMenu,
     d: [{
       kind: "field",
       key: "_hObserveResizeParent",
@@ -115,13 +115,45 @@ let BXFloatingMenu = _decorate(null, function (_initialize, _HostListenerMixin)
             const {
               parent
             } = this;
-            if (parent) {
+            if (parent && parent !== relatedTarget) {
               parent.open = false;
               HTMLElement.prototype.focus.call(this.parent); // SVGElement in IE11 does not have `.focus()` method
             }
           }
         };
       }
+    }, {
+      kind: "field",
+      decorators: [HostListener('click')],
+      key: "_click",
+      value() {
+        return event => {
+          const {
+            parent
+          } = this;
+          if (parent) {
+            parent.open = false;
+          }
+        };
+      }
+    }, {
+      kind: "field",
+      decorators: [HostListener('keydown')],
+      key: "_handleKeyDown",
+      value() {
+        return event => {
+          if (event.key === 'Tab') {
+            if (event.shiftKey) {
+              const {
+                parent
+              } = this;
+              if (parent) {
+                parent.open = false;
+              }
+            }
+          }
+        };
+      }
     }, {
       kind: "field",
       key: "parent",
@@ -130,7 +162,7 @@ let BXFloatingMenu = _decorate(null, function (_initialize, _HostListenerMixin)
       }
     }, {
       kind: "get",
-      key: "alignmentDirection",
+      key: "container",
       value:
       /**
        * The handle for observing resize of the element containing the trigger button.
@@ -150,25 +182,10 @@ let BXFloatingMenu = _decorate(null, function (_initialize, _HostListenerMixin)
        * The DOM element, typically a custom element in this library, launching this floating menu.
        */
 
-      /**
-       * The horizontal/vertical direction with regard to how the menu is aligned to the trigger button.
-       */
-      function alignmentDirection() {
-        return {
-          [FLOATING_MENU_DIRECTION.LEFT]: FLOATING_MENU_DIRECTION_GROUP.VERTICAL,
-          [FLOATING_MENU_DIRECTION.TOP]: FLOATING_MENU_DIRECTION_GROUP.HORIZONTAL,
-          [FLOATING_MENU_DIRECTION.RIGHT]: FLOATING_MENU_DIRECTION_GROUP.VERTICAL,
-          [FLOATING_MENU_DIRECTION.BOTTOM]: FLOATING_MENU_DIRECTION_GROUP.HORIZONTAL
-        }[this.direction];
-      }
-
       /**
        * The DOM element to put this menu into.
        */
-    }, {
-      kind: "get",
-      key: "container",
-      value: function container() {
+      function container() {
         return closestComposed(this, this.constructor.selectorContainer) || this.ownerDocument.body;
       }
 
@@ -203,59 +220,32 @@ let BXFloatingMenu = _decorate(null, function (_initialize, _HostListenerMixin)
           right: containerRight = 0,
           top: containerTop = 0
         } = container.getBoundingClientRect();
-        const refCenterHorizontal = (refLeft + refRight) / 2;
-        const refCenterVertical = (refTop + refBottom) / 2;
         const containerComputedStyle = container.ownerDocument.defaultView.getComputedStyle(container);
         const positionDirection = containerComputedStyle.getPropertyValue('direction');
         const isRtl = positionDirection === FLOATING_MENU_POSITION_DIRECTION.RTL;
         const containerStartFromViewport = !isRtl ? containerLeft : container.ownerDocument.defaultView.innerWidth - containerRight;
         const refStartFromContainer = !isRtl ? refLeft - containerLeft : containerRight - refRight;
         const refEndFromContainer = !isRtl ? refRight - containerLeft : containerRight - refLeft;
-        const refCenterHorizontalFromContainer = !isRtl ? refCenterHorizontal - containerLeft : containerRight - refCenterHorizontal;
         const refTopFromContainer = refTop - containerTop;
-        const refCenterVerticalFromContainer = refCenterVertical - containerTop;
         if ((container !== this.ownerDocument.body || containerStartFromViewport !== 0 || containerTop !== 0) && containerComputedStyle.getPropertyValue('position') === 'static') {
           throw new Error('Floating menu container must not have `position:static`.');
         }
         const {
-          alignment,
-          alignmentDirection,
+          flipped,
           direction
         } = this;
-        if (Object.values(FLOATING_MENU_ALIGNMENT).indexOf(alignment) < 0) {
-          throw new Error(`Wrong menu alignment: ${alignment}`);
-        }
         if (Object.values(FLOATING_MENU_DIRECTION).indexOf(direction) < 0) {
           throw new Error(`Wrong menu position direction: ${direction}`);
         }
-        const alignmentStart = {
-          [FLOATING_MENU_DIRECTION_GROUP.HORIZONTAL]: {
-            [FLOATING_MENU_ALIGNMENT.START]: () => refStartFromContainer,
-            [FLOATING_MENU_ALIGNMENT.CENTER]: () => refCenterHorizontalFromContainer - width / 2,
-            [FLOATING_MENU_ALIGNMENT.END]: () => refEndFromContainer - width
-          },
-          [FLOATING_MENU_DIRECTION_GROUP.VERTICAL]: {
-            [FLOATING_MENU_ALIGNMENT.START]: () => refTopFromContainer,
-            [FLOATING_MENU_ALIGNMENT.CENTER]: () => refCenterVerticalFromContainer - height / 2,
-            [FLOATING_MENU_ALIGNMENT.END]: () => refBottom - height
-          }
-        }[alignmentDirection][alignment]();
+        const alignmentStart = flipped ? refEndFromContainer - width : refStartFromContainer;
         const {
           start,
           top
         } = {
-          [FLOATING_MENU_DIRECTION.LEFT]: () => ({
-            start: refStartFromContainer - width,
-            top: alignmentStart
-          }),
           [FLOATING_MENU_DIRECTION.TOP]: () => ({
             start: alignmentStart,
             top: refTopFromContainer - height
           }),
-          [FLOATING_MENU_DIRECTION.RIGHT]: () => ({
-            start: refEndFromContainer,
-            top: alignmentStart
-          }),
           [FLOATING_MENU_DIRECTION.BOTTOM]: () => ({
             start: alignmentStart,
             top: refBottom
@@ -287,7 +277,7 @@ let BXFloatingMenu = _decorate(null, function (_initialize, _HostListenerMixin)
           open,
           parent
         } = this;
-        if ((changedProperties.has('alignment') || changedProperties.has('direction') || changedProperties.has('open')) && open) {
+        if ((changedProperties.has('flipped') || changedProperties.has('direction') || changedProperties.has('open')) && open) {
           if (!parent) {
             this.parent = this.parentElement;
             container.appendChild(this);
@@ -354,5 +344,5 @@ let BXFloatingMenu = _decorate(null, function (_initialize, _HostListenerMixin)
     }]
   };
 }, HostListenerMixin(FocusMixin(LitElement)));
-export default BXFloatingMenu;
+export default CDSFloatingMenu;
 //# sourceMappingURL=floating-menu.js.map