@carbon/react 1.29.1 → 1.30.0-rc.0

package/es/components/UIShell/Switcher.js

@@ -38,12 +38,10 @@ Switcher.propTypes = {
    * Required props for accessibility label on the underlying menu
    */
   ...AriaLabelPropType,
-
   /**
    * expects to receive <SwitcherItem />
    */
   children: PropTypes.node.isRequired,
-
   /**
    * Optionally provide a custom class to apply to the underlying `<ul>` node
    */

package/es/components/UIShell/SwitcherDivider.js

@@ -24,7 +24,6 @@ const SwitcherDivider = _ref => {
     className: className
   }));
 };
-
 SwitcherDivider.propTypes = {
   /**
    * Optionally provide a custom class to apply to the underlying `<li>` node

package/es/components/UIShell/SwitcherItem.js

@@ -48,17 +48,14 @@ SwitcherItem.propTypes = {
    * Required props for accessibility label on the underlying menuitem
    */
   ...AriaLabelPropType,
-
   /**
    * Specify the text content for the link
    */
   children: PropTypes.node.isRequired,
-
   /**
    * Optionally provide a custom class to apply to the underlying `<li>` node
    */
   className: PropTypes.string,
-
   /**
    * Specify the tab index of the Link
    */

package/es/components/UnorderedList/UnorderedList.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Copyright IBM Corp. 2016, 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.
+ */
+import PropTypes from 'prop-types';
+import { type ComponentProps } from 'react';
+interface UnorderedListProps extends ComponentProps<'ul'> {
+    nested?: boolean | undefined;
+    isExpressive?: boolean | undefined;
+}
+declare function UnorderedList({ className, nested, isExpressive, ...other }: UnorderedListProps): JSX.Element;
+declare namespace UnorderedList {
+    var propTypes: {
+        /**
+         * Specify a collection of ListItem's to be rendered in the UnorderedList
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Specify an optional className to be applied to the underlying `<ul>` node
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Specify whether this ordered list expressive or not
+         */
+        isExpressive: PropTypes.Requireable<boolean>;
+        /**
+         * Specify whether the list is nested, or not
+         */
+        nested: PropTypes.Requireable<boolean>;
+    };
+}
+export default UnorderedList;

package/es/components/UnorderedList/UnorderedList.js

@@ -11,12 +11,11 @@ import React__default from 'react';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-const UnorderedList = _ref => {
+function UnorderedList(_ref) {
   let {
-    children,
     className,
-    nested,
-    isExpressive,
+    nested = false,
+    isExpressive = false,
     ...other
   } = _ref;
   const prefix = usePrefix();
@@ -26,34 +25,25 @@ const UnorderedList = _ref => {
   });
   return /*#__PURE__*/React__default.createElement("ul", _extends({
     className: classNames
-  }, other), children);
-};
-
+  }, other));
+}
 UnorderedList.propTypes = {
   /**
    * Specify a collection of ListItem's to be rendered in the UnorderedList
    */
   children: PropTypes.node,
-
   /**
    * Specify an optional className to be applied to the underlying `<ul>` node
    */
   className: PropTypes.string,
-
   /**
    * Specify whether this ordered list expressive or not
    */
   isExpressive: PropTypes.bool,
-
   /**
    * Specify whether the list is nested, or not
    */
   nested: PropTypes.bool
 };
-UnorderedList.defaultProps = {
-  nested: false,
-  isExpressive: false
-};
-var UnorderedList$1 = UnorderedList;
 
-export { UnorderedList$1 as default };
+export { UnorderedList as default };

package/es/components/UnorderedList/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Copyright IBM Corp. 2016, 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.
+ */
+export { default, default as UnorderedList } from './UnorderedList';

package/es/index.js

@@ -15,6 +15,7 @@ export { default as DatePicker } from './components/DatePicker/DatePicker.js';
 export { default as DatePickerSkeleton } from './components/DatePicker/DatePicker.Skeleton.js';
 export { default as Dropdown } from './components/Dropdown/Dropdown.js';
 export { default as DropdownSkeleton } from './components/Dropdown/Dropdown.Skeleton.js';
+export { default as Form } from './components/Form/Form.js';
 export { default as FluidForm } from './components/FluidForm/FluidForm.js';
 export { FormContext } from './components/FluidForm/FormContext.js';
 export { FlexGrid } from './components/Grid/FlexGrid.js';
@@ -23,14 +24,15 @@ export { default as Row } from './components/Grid/Row.js';
 export { default as Column } from './components/Grid/Column.js';
 export { ColumnHang } from './components/Grid/ColumnHang.js';
 export { IdPrefix } from './components/IdPrefix/index.js';
+export { default as ListItem } from './components/ListItem/ListItem.js';
+export { default as OrderedList } from './components/OrderedList/OrderedList.js';
 export { default as OverflowMenu } from './components/OverflowMenu/index.js';
 export { default as Search } from './components/Search/Search.js';
 export { default as SearchSkeleton } from './components/Search/Search.Skeleton.js';
 export { default as Slider } from './components/Slider/index.js';
-export { default as Tab } from './components/Tab/index.js';
 export { default as TileGroup } from './components/TileGroup/index.js';
-export { default as TimePickerSelect } from './components/TimePickerSelect/index.js';
 export { Toggletip, ToggletipActions, ToggletipButton, ToggletipContent, ToggletipLabel } from './components/Toggletip/index.js';
+export { default as UnorderedList } from './components/UnorderedList/UnorderedList.js';
 export { default as PaginationSkeleton } from './components/Pagination/Pagination.Skeleton.js';
 export { default as RadioButtonSkeleton } from './components/RadioButton/RadioButton.Skeleton.js';
 export { default as TagSkeleton } from './components/Tag/Tag.Skeleton.js';
@@ -91,6 +93,7 @@ export { default as TabsSkeleton } from './components/Tabs/Tabs.Skeleton.js';
 export { Toggle } from './components/Toggle/Toggle.js';
 export { default as TreeNode } from './components/TreeView/TreeNode.js';
 export { default as TreeView } from './components/TreeView/TreeView.js';
+export { default as HeaderContainer } from './components/UIShell/HeaderContainer.js';
 export { default as HeaderMenuButton } from './components/UIShell/HeaderMenuButton.js';
 export { default as HeaderName } from './components/UIShell/HeaderName.js';
 export { default as HeaderNavigation } from './components/UIShell/HeaderNavigation.js';
@@ -155,15 +158,12 @@ export { default as TableToolbarMenu } from './components/DataTable/TableToolbar
 export { default as DatePickerInput } from './components/DatePickerInput/DatePickerInput.js';
 export { ErrorBoundaryContext } from './components/ErrorBoundary/ErrorBoundaryContext.js';
 export { default as FilterableMultiSelect } from './components/MultiSelect/FilterableMultiSelect.js';
-export { default as Form } from './components/Form/Form.js';
 export { default as FormGroup } from './components/FormGroup/FormGroup.js';
 export { default as Link } from './components/Link/Link.js';
-export { default as ListItem } from './components/ListItem/ListItem.js';
 export { default as Modal } from './components/Modal/Modal.js';
 export { default as MultiSelect } from './components/MultiSelect/MultiSelect.js';
 export { ActionableNotification, InlineNotification, NotificationActionButton, NotificationButton, ToastNotification } from './components/Notification/Notification.js';
 export { NumberInput } from './components/NumberInput/NumberInput.js';
-export { default as OrderedList } from './components/OrderedList/OrderedList.js';
 export { default as OverflowMenuItem } from './components/OverflowMenuItem/OverflowMenuItem.js';
 export { default as Pagination } from './components/Pagination/Pagination.js';
 export { default as PaginationNav } from './components/PaginationNav/PaginationNav.js';
@@ -183,8 +183,8 @@ export { default as IconSwitch } from './components/Switch/IconSwitch.js';
 export { default as SliderSkeleton } from './components/Slider/Slider.Skeleton.js';
 export { default as StructuredListSkeleton } from './components/StructuredList/StructuredList.Skeleton.js';
 export { StructuredListBody, StructuredListCell, StructuredListHead, StructuredListInput, StructuredListRow, StructuredListWrapper } from './components/StructuredList/StructuredList.js';
+export { IconTab, Tab, TabList, TabPanel, TabPanels, Tabs } from './components/Tabs/Tabs.js';
 export { default as TabContent } from './components/TabContent/TabContent.js';
-export { IconTab, TabList, TabPanel, TabPanels, Tabs } from './components/Tabs/Tabs.js';
 export { default as Tag, types } from './components/Tag/Tag.js';
 export { default as TextAreaSkeleton } from './components/TextArea/TextArea.Skeleton.js';
 export { default as TextArea } from './components/TextArea/TextArea.js';
@@ -193,14 +193,13 @@ export { default as TextInput } from './components/TextInput/TextInput.js';
 export { ClickableTile, ExpandableTile, SelectableTile, Tile, TileAboveTheFoldContent, TileBelowTheFoldContent } from './components/Tile/Tile.js';
 export { default as RadioTile } from './components/RadioTile/RadioTile.js';
 export { default as TimePicker } from './components/TimePicker/TimePicker.js';
-export { default as UnorderedList } from './components/UnorderedList/UnorderedList.js';
+export { default as TimePickerSelect } from './components/TimePickerSelect/TimePickerSelect.js';
 export { default as SkeletonText } from './components/SkeletonText/SkeletonText.js';
 export { default as SkeletonPlaceholder } from './components/SkeletonPlaceholder/SkeletonPlaceholder.js';
 export { default as SkeletonIcon } from './components/SkeletonIcon/SkeletonIcon.js';
 export { default as DataTableSkeleton } from './components/DataTableSkeleton/DataTableSkeleton.js';
 export { default as Content } from './components/UIShell/Content.js';
 export { default as Header } from './components/UIShell/Header.js';
-export { default as HeaderContainer } from './components/UIShell/HeaderContainer.js';
 export { default as HeaderGlobalAction } from './components/UIShell/HeaderGlobalAction.js';
 export { default as HeaderGlobalBar } from './components/UIShell/HeaderGlobalBar.js';
 export { default as HeaderMenu } from './components/UIShell/HeaderMenu.js';

package/es/internal/ClickListener.js

@@ -13,33 +13,27 @@ import React__default from 'react';
  * Generic component used for reacting to a click event happening outside of a
  * given `children` element.
  */
-
 class ClickListener extends React__default.Component {
   static getEventTarget(evt) {
     // support Shadow DOM
     if (evt.composed && typeof evt.composedPath === 'function') {
       return evt.composedPath()[0];
     }
-
     return evt.target;
   }
-
   constructor(props) {
-    super(props); // We manually bind handlers in this Component, versus using class
+    super(props);
+    // We manually bind handlers in this Component, versus using class
     // properties, so that we can properly test the `handleRef` handler.
-
     this.handleRef = this.handleRef.bind(this);
     this.handleDocumentClick = this.handleDocumentClick.bind(this);
   }
-
   componentDidMount() {
     document.addEventListener('click', this.handleDocumentClick);
   }
-
   componentWillUnmount() {
     document.removeEventListener('click', this.handleDocumentClick);
   }
-
   handleDocumentClick(evt) {
     if (this.element) {
       if (this.element.contains && !this.element.contains(ClickListener.getEventTarget(evt))) {
@@ -47,12 +41,12 @@ class ClickListener extends React__default.Component {
       }
     }
   }
-
   handleRef(el) {
     const {
       children
     } = this.props;
     this.element = el;
+
     /**
      * One important note, `children.ref` corresponds to a `ref` prop passed in
      * directly to the child, not necessarily a `ref` defined in the component.
@@ -62,20 +56,16 @@ class ClickListener extends React__default.Component {
      *   <Child ref={targetedRefHere} />
      * </ClickListener>
      */
-
     if (children.ref && typeof children.ref === 'function') {
       children.ref(el);
     }
   }
-
   render() {
     return /*#__PURE__*/React__default.cloneElement(this.props.children, {
       ref: this.handleRef
     });
   }
-
 }
-
 _defineProperty(ClickListener, "propTypes", {
   children: PropTypes.element.isRequired,
   onClickOutside: PropTypes.func.isRequired

package/es/internal/FloatingMenu.js

@@ -50,27 +50,25 @@ const DIRECTION_LEFT = 'left';
 const DIRECTION_TOP = 'top';
 const DIRECTION_RIGHT = 'right';
 const DIRECTION_BOTTOM = 'bottom';
+
 /**
  * @param {FloatingMenu~offset} [oldMenuOffset={}] The old value.
  * @param {FloatingMenu~offset} [menuOffset={}] The new value.
  * @returns `true` if the parent component wants to change in the adjustment of the floating menu position.
  * @private
  */
-
 const hasChangeInOffset = function () {
   let oldMenuOffset = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   let menuOffset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-
   if (typeof oldMenuOffset !== typeof menuOffset) {
     return true;
   }
-
   if (Object(menuOffset) === menuOffset && typeof menuOffset !== 'function') {
     return oldMenuOffset.top !== menuOffset.top || oldMenuOffset.left !== menuOffset.left;
   }
-
   return oldMenuOffset !== menuOffset;
 };
+
 /**
  * @param {object} params The parameters.
  * @param {FloatingMenu~size} params.menuSize The size of the menu.
@@ -83,8 +81,6 @@ const hasChangeInOffset = function () {
  * @returns {FloatingMenu~offset} The position of the menu, relative to the top-left corner of the viewport.
  * @private
  */
-
-
 const getFloatingPosition = _ref => {
   let {
     menuSize,
@@ -136,21 +132,17 @@ const getFloatingPosition = _ref => {
     })
   }[direction]();
 };
+
 /**
  * A menu that is detached from the triggering element.
  * Useful when the container of the triggering element cannot have `overflow:visible` style, etc.
  */
-
-
 class FloatingMenu extends React__default.Component {
   constructor() {
     var _this;
-
     super(...arguments);
     _this = this;
-
     _defineProperty(this, "_placeInProgress", false);
-
     _defineProperty(this, "state", {
       /**
        * The position of the menu, relative to the top-left corner of the viewport.
@@ -158,25 +150,18 @@ class FloatingMenu extends React__default.Component {
        */
       floatingPosition: undefined
     });
-
     _defineProperty(this, "_menuContainer", null);
-
     _defineProperty(this, "_menuBody", null);
-
     _defineProperty(this, "startSentinel", /*#__PURE__*/React__default.createRef());
-
     _defineProperty(this, "endSentinel", /*#__PURE__*/React__default.createRef());
-
     _defineProperty(this, "_updateMenuSize", function () {
       let prevProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
       let isAdjustment = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
       const menuBody = _this._menuBody;
       process.env.NODE_ENV !== "production" ? warning(menuBody, 'The DOM node for menu body for calculating its position is not available. Skipping...') : void 0;
-
       if (!menuBody) {
         return;
       }
-
       const {
         menuOffset: oldMenuOffset = {},
         menuDirection: oldMenuDirection
@@ -185,7 +170,6 @@ class FloatingMenu extends React__default.Component {
         menuOffset = {},
         menuDirection
       } = _this.props;
-
       if (hasChangeInOffset(oldMenuOffset, menuOffset) || oldMenuDirection !== menuDirection || isAdjustment) {
         const {
           flipped,
@@ -197,9 +181,10 @@ class FloatingMenu extends React__default.Component {
         } = triggerRef;
         const menuSize = menuBody.getBoundingClientRect();
         const refPosition = triggerEl && triggerEl.getBoundingClientRect();
-        const offset = typeof menuOffset !== 'function' ? menuOffset : menuOffset(menuBody, menuDirection, triggerEl, flipped); // Optional function to allow parent component to check
-        // if the orientation needs to be changed based on params
+        const offset = typeof menuOffset !== 'function' ? menuOffset : menuOffset(menuBody, menuDirection, triggerEl, flipped);
 
+        // Optional function to allow parent component to check
+        // if the orientation needs to be changed based on params
         if (updateOrientation) {
           updateOrientation({
             menuSize,
@@ -213,11 +198,10 @@ class FloatingMenu extends React__default.Component {
               position: getComputedStyle(_this.props.target()).position
             }
           });
-        } // Skips if either in the following condition:
+        }
+        // Skips if either in the following condition:
         // a) Menu body has `display:none`
         // b) `menuOffset` as a callback returns `undefined` (The callback saw that it couldn't calculate the value)
-
-
         if (menuSize.width > 0 && menuSize.height > 0 || !offset) {
           _this.setState({
             floatingPosition: getFloatingPosition({
@@ -235,7 +219,6 @@ class FloatingMenu extends React__default.Component {
           }, () => {
             if (!isAdjustment) {
               const newMenuSize = menuBody.getBoundingClientRect();
-
               if (newMenuSize !== menuSize) {
                 _this._updateMenuSize(_this.props, true);
               }
@@ -244,34 +227,32 @@ class FloatingMenu extends React__default.Component {
         }
       }
     });
-
     _defineProperty(this, "_focusMenuContent", menuBody => {
       const primaryFocusNode = menuBody.querySelector(this.props.selectorPrimaryFocus || null);
       const tabbableNode = menuBody.querySelector(selectorTabbable);
       const focusableNode = menuBody.querySelector(selectorFocusable);
-      const focusTarget = primaryFocusNode || // User defined focusable node
-      tabbableNode || // First sequentially focusable node
-      focusableNode || // First programmatic focusable node
+      const focusTarget = primaryFocusNode ||
+      // User defined focusable node
+      tabbableNode ||
+      // First sequentially focusable node
+      focusableNode ||
+      // First programmatic focusable node
       menuBody;
       focusTarget.focus();
-
       if (focusTarget === menuBody && process.env.NODE_ENV !== "production") {
         process.env.NODE_ENV !== "production" ? warning(focusableNode === null, 'Floating Menus must have at least a programmatically focusable child. ' + 'This can be accomplished by adding tabIndex="-1" to the content element.') : void 0;
       }
     });
-
     _defineProperty(this, "_menuRef", menuBody => {
       const {
         menuRef
       } = this.props;
       this._placeInProgress = !!menuBody;
       menuRef && menuRef(this._menuBody = menuBody);
-
       if (menuBody) {
         this._updateMenuSize();
       }
     });
-
     _defineProperty(this, "_getChildrenWithProps", () => {
       const {
         styles,
@@ -279,9 +260,9 @@ class FloatingMenu extends React__default.Component {
       } = this.props;
       const {
         floatingPosition: pos
-      } = this.state; // If no pos available, we need to hide the element (offscreen to the left)
+      } = this.state;
+      // If no pos available, we need to hide the element (offscreen to the left)
       // This is done so we can measure the content before positioning it correctly.
-
       const positioningStyle = pos ? {
         left: `${pos.left}px`,
         top: `${pos.top}px`,
@@ -292,20 +273,19 @@ class FloatingMenu extends React__default.Component {
       };
       return /*#__PURE__*/React__default.cloneElement(children, {
         ref: this._menuRef,
-        style: { ...styles,
+        style: {
+          ...styles,
           ...positioningStyle,
           position: 'absolute',
           opacity: 1
         }
       });
     });
-
     _defineProperty(this, "handleBlur", _ref2 => {
       let {
         target: oldActiveNode,
         relatedTarget: currentActiveNode
       } = _ref2;
-
       if (currentActiveNode && oldActiveNode) {
         const {
           current: startSentinelNode
@@ -322,12 +302,36 @@ class FloatingMenu extends React__default.Component {
         });
       }
     });
-  }
-
+  } // `true` if the menu body is mounted and calculation of the position is in progress.
+  /**
+   * The cached reference to the menu container.
+   * Only used if React portal API is not available.
+   * @type {Element}
+   * @private
+   */
+  /**
+   * The cached reference to the menu body.
+   * The reference is set via callback ref instead of object ref,
+   * in order to hook the event when the element ref gets available,
+   * which can be at a different timing from `cDM()`, presumably with SSR scenario.
+   * @type {Element}
+   * @private
+   */
+  /**
+   * Focus sentinel refs for focus trap behavior
+   */
+  /**
+   * Calculates the position in the viewport of floating menu,
+   * once this component is mounted or updated upon change in the following props:
+   *
+   * * `menuOffset` (The adjustment that should be applied to the calculated floating menu's position)
+   * * `menuDirection` (Where the floating menu menu should be placed relative to the trigger button)
+   *
+   * @private
+   */
   componentWillUnmount() {
     this.hResize.release();
   }
-
   componentDidMount() {
     this.hResize = OptimizedResize.add(() => {
       this._updateMenuSize();
@@ -339,36 +343,43 @@ class FloatingMenu extends React__default.Component {
    * @private
    */
 
-
   componentDidUpdate(prevProps) {
     this._updateMenuSize(prevProps);
-
     const {
       onPlace
     } = this.props;
-
     if (this._placeInProgress && this.state.floatingPosition) {
       if (this._menuBody && !this._menuBody.contains(document.activeElement)) {
         this._focusMenuContent(this._menuBody);
       }
-
       if (typeof onPlace === 'function') {
         onPlace(this._menuBody);
         this._placeInProgress = false;
       }
     }
   }
+
   /**
    * A callback for called when menu body is mounted or unmounted.
    * @param {Element} menuBody The menu body being mounted. `null` if the menu body is being unmounted.
    */
 
+  /**
+   * @returns The child nodes, with styles containing the floating menu position.
+   * @private
+   */
+
+  /**
+   * Blur handler for when focus wrap behavior is enabled
+   * @param {Event} event
+   * @param {Element} event.target previously focused node
+   * @param {Element} event.relatedTarget current focused node
+   */
 
   render() {
     const {
       context: prefix
     } = this;
-
     if (typeof document !== 'undefined') {
       const {
         focusTrap,
@@ -388,35 +399,27 @@ class FloatingMenu extends React__default.Component {
         className: `${prefix}--visually-hidden`
       }, "Focus sentinel")), !target ? document.body : target());
     }
-
     return null;
   }
-
 }
-
 _defineProperty(FloatingMenu, "contextType", PrefixContext);
-
 _defineProperty(FloatingMenu, "propTypes", {
   /**
    * Contents to put into the floating menu.
    */
   children: PropTypes.object,
-
   /**
    * `true` if the menu alignment should be flipped.
    */
   flipped: PropTypes.bool,
-
   /**
    * Enable or disable focus trap behavior
    */
   focusTrap: PropTypes.bool,
-
   /**
    * Where to put the tooltip, relative to the trigger button.
    */
   menuDirection: PropTypes.oneOf([DIRECTION_LEFT, DIRECTION_TOP, DIRECTION_RIGHT, DIRECTION_BOTTOM]),
-
   /**
    * The adjustment of the floating menu position, considering the position of dropdown arrow, etc.
    */
@@ -424,52 +427,43 @@ _defineProperty(FloatingMenu, "propTypes", {
     top: PropTypes.number,
     left: PropTypes.number
   }), PropTypes.func]),
-
   /**
    * The callback called when the menu body has been mounted to/will be unmounted from the DOM.
    */
   menuRef: PropTypes.func,
-
   /**
    * The callback called when the menu body has been mounted and positioned.
    */
   onPlace: PropTypes.func,
-
   /**
    * Specify a CSS selector that matches the DOM element that should
    * be focused when the Modal opens
    */
   selectorPrimaryFocus: PropTypes.string,
-
   /**
    * The additional styles to put to the floating menu.
    */
   styles: PropTypes.object,
-
   /**
    * The query selector indicating where the floating menu body should be placed.
    */
   target: PropTypes.func,
-
   /**
    * The element ref of the tooltip's trigger button.
    */
   triggerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
     current: PropTypes.any
   })]),
-
   /**
    * Optional function to change orientation of tooltip based on parent
    */
   updateOrientation: PropTypes.func
 });
-
 _defineProperty(FloatingMenu, "defaultProps", {
   menuOffset: {},
   menuDirection: DIRECTION_BOTTOM,
   updateOrientation: null
 });
-
 var FloatingMenu$1 = FloatingMenu;
 
 export { DIRECTION_BOTTOM, DIRECTION_LEFT, DIRECTION_RIGHT, DIRECTION_TOP, FloatingMenu$1 as default };