@spaced-out/ui-design-system 0.3.47-beta.0 → 0.3.48

package/.cspell/custom-words.txt

@@ -135,3 +135,4 @@ xmark
 yourcomponentname
 Yuzhno
 yxxx
+incase

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.3.48](https://github.com/spaced-out/ui-design-system/compare/v0.3.47...v0.3.48) (2025-07-02)
+
+
+### Features
+
+* added data management icon in side menu link ([#363](https://github.com/spaced-out/ui-design-system/issues/363)) ([86a0e4b](https://github.com/spaced-out/ui-design-system/commit/86a0e4b36ae2aa220897330b0090882ebacc5298))
+
+### [0.3.47](https://github.com/spaced-out/ui-design-system/compare/v0.3.47-beta.0...v0.3.47) (2025-06-24)
+
+
+### Bug Fixes
+
+* added labels support for i18n ([#360](https://github.com/spaced-out/ui-design-system/issues/360)) ([f33f4ed](https://github.com/spaced-out/ui-design-system/commit/f33f4ed8fe8346c1c884d67fd8d9ea0cd0331602))
+
 ### [0.3.47-beta.0](https://github.com/spaced-out/ui-design-system/compare/v0.3.46...v0.3.47-beta.0) (2025-06-20)
 
 

package/lib/components/AvatarGroup/AvatarGroup.js.flow

@@ -11,7 +11,7 @@ import {
 import classify from '../../utils/classify';
 import type {AvatarSize} from '../Avatar';
 import {BaseAvatar} from '../Avatar';
-import type {ElevationType, PlacementType} from '../Tooltip';
+import type {PlacementType} from '../Tooltip';
 import {Tooltip} from '../Tooltip';
 
 import css from './AvatarGroup.module.css';
@@ -26,7 +26,7 @@ export type AvatarGroupProps = {
   maxTooltipLines?: number,
   placement?: PlacementType,
   maxAvatars?: number,
-  tooltipElevation?: ElevationType,
+  tooltipElevation?: string,
 };
 
 export const AvatarGroup: React$AbstractComponent<

package/lib/components/ButtonDropdown/ButtonDropdown.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.STRATEGY_TYPE = exports.ButtonDropdown = exports.ANCHOR_POSITION_TYPE = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _react2 = require("@floating-ui/react");
-var _hooks = require("../../hooks");
+var _size = require("../../styles/variables/_size");
 var _space = require("../../styles/variables/_space");
 var _classify = require("../../utils/classify");
 var _clickAway = require("../../utils/click-away");
@@ -48,17 +48,17 @@ const ButtonDropdown = exports.ButtonDropdown = /*#__PURE__*/React.forwardRef((_
     isFluid,
     tooltip,
     onClick,
-    elevation = 'modal',
     clickAwayRef,
     ...restButtonProps
   } = _ref;
+  const menuBtnRef = React.useRef(null);
   const [isMenuOpen, setIsMenuOpen] = React.useState(false);
+  React.useImperativeHandle(forwardRef, () => menuBtnRef.current);
   const {
     x,
     y,
     refs,
-    strategy,
-    context
+    strategy
   } = (0, _react2.useFloating)({
     open: true,
     strategy: positionStrategy,
@@ -66,7 +66,6 @@ const ButtonDropdown = exports.ButtonDropdown = /*#__PURE__*/React.forwardRef((_
     whileElementsMounted: _react2.autoUpdate,
     middleware: [(0, _react2.shift)(), (0, _react2.flip)(), (0, _react2.offset)(parseInt(_space.spaceXXSmall))]
   });
-  const dropdownWidth = (0, _hooks.useReferenceElementWidth)(refs.reference?.current);
   const onMenuToggle = isOpen => {
     if (isOpen) {
       onMenuOpen?.();
@@ -92,7 +91,7 @@ const ButtonDropdown = exports.ButtonDropdown = /*#__PURE__*/React.forwardRef((_
       className: (0, _classify.classify)(_ButtonDropdownModule.default.buttonDropdownContainer, {
         [_ButtonDropdownModule.default.isFluid]: isFluid === true
       }, classNames?.dropdownContainer),
-      ref: forwardRef
+      ref: menuBtnRef
     }, /*#__PURE__*/React.createElement(_ConditionalWrapper.ConditionalWrapper, {
       condition: Boolean(tooltip),
       wrapper: children => /*#__PURE__*/React.createElement(_Tooltip.Tooltip, _extends({}, tooltip, {
@@ -114,27 +113,16 @@ const ButtonDropdown = exports.ButtonDropdown = /*#__PURE__*/React.forwardRef((_
         wrapper: classNames?.buttonWrapper,
         icon: classNames?.buttonIcon
       }
-    }), children)), isOpen && menu && /*#__PURE__*/React.createElement(_react2.FloatingPortal, null, /*#__PURE__*/React.createElement(_react2.FloatingFocusManager, {
-      modal: false,
-      context: context,
-      initialFocus: refs.reference
-    }, /*#__PURE__*/React.createElement("div", {
-      className: _ButtonDropdownModule.default.menuWrapper,
+    }), children)), isOpen && menu && /*#__PURE__*/React.createElement("div", {
       ref: (0, _mergeRefs.mergeRefs)([refs.setFloating, boundaryRef]),
       style: {
         display: 'flex',
         position: strategy,
         top: y ?? _space.spaceNone,
         left: x ?? _space.spaceNone,
-        /* NOTE(Sharad): The FloatingPortal renders the menu outside the normal DOM structure,
-         so its parent is effectively the <body> element. This means the menu
-         would otherwise default to the body's width. To support fluid width,
-         we must manually set the dropdown width here; otherwise, it uses a fixed width.
-         Also, Only treat menu as non-fluid if isFluid is strictly false, since default is true in menu and undefined means fluid. */
-        ...(menu.isFluid !== false && {
-          '--dropdown-width': dropdownWidth
-        }),
-        '--menu-elevation': (0, _Tooltip.getElevationValue)(elevation)
+        ...(isFluid && {
+          width: _size.sizeFluid
+        })
       }
     }, /*#__PURE__*/React.createElement(_Menu.Menu, _extends({}, menu, {
       onSelect: (option, e) => {
@@ -147,6 +135,6 @@ const ButtonDropdown = exports.ButtonDropdown = /*#__PURE__*/React.forwardRef((_
       },
       size: menu.size || size,
       onTabOut: clickAway
-    }))))));
+    }))));
   });
 });

package/lib/components/ButtonDropdown/ButtonDropdown.js.flow

@@ -7,10 +7,6 @@ import {
   // $FlowFixMe[untyped-import]
   flip,
   // $FlowFixMe[untyped-import]
-  FloatingFocusManager,
-  // $FlowFixMe[untyped-import]
-  FloatingPortal,
-  // $FlowFixMe[untyped-import]
   offset,
   // $FlowFixMe[untyped-import]
   shift,
@@ -18,7 +14,7 @@ import {
   useFloating,
 } from '@floating-ui/react';
 
-import {useReferenceElementWidth} from '../../hooks';
+import {sizeFluid} from '../../styles/variables/_size';
 import {spaceNone, spaceXXSmall} from '../../styles/variables/_space';
 import {classify} from '../../utils/classify';
 import {type ClickAwayRefType, ClickAway} from '../../utils/click-away';
@@ -28,8 +24,8 @@ import {Button} from '../Button';
 import {ConditionalWrapper} from '../ConditionalWrapper';
 import type {MenuOption, MenuProps} from '../Menu';
 import {Menu} from '../Menu';
-import type {BaseTooltipProps, ElevationType} from '../Tooltip';
-import {getElevationValue, Tooltip} from '../Tooltip';
+import type {BaseTooltipProps} from '../Tooltip';
+import {Tooltip} from '../Tooltip';
 
 import css from './ButtonDropdown.module.css';
 
@@ -67,7 +63,6 @@ export type ButtonDropdownProps = {
   onMenuOpen?: () => mixed,
   onMenuClose?: () => mixed,
   tooltip?: BaseTooltipProps,
-  elevation?: ElevationType,
   clickAwayRef?: ClickAwayRefType,
   ...
 };
@@ -93,15 +88,15 @@ export const ButtonDropdown: React$AbstractComponent<
       isFluid,
       tooltip,
       onClick,
-      elevation = 'modal',
       clickAwayRef,
       ...restButtonProps
     }: ButtonDropdownProps,
     forwardRef,
   ) => {
+    const menuBtnRef = React.useRef(null);
     const [isMenuOpen, setIsMenuOpen] = React.useState(false);
-
-    const {x, y, refs, strategy, context} = useFloating({
+    React.useImperativeHandle(forwardRef, () => menuBtnRef.current);
+    const {x, y, refs, strategy} = useFloating({
       open: true,
       strategy: positionStrategy,
       placement: anchorPosition,
@@ -109,8 +104,6 @@ export const ButtonDropdown: React$AbstractComponent<
       middleware: [shift(), flip(), offset(parseInt(spaceXXSmall))],
     });
 
-    const dropdownWidth = useReferenceElementWidth(refs.reference?.current);
-
     const onMenuToggle = (isOpen: boolean) => {
       if (isOpen) {
         onMenuOpen?.();
@@ -133,7 +126,7 @@ export const ButtonDropdown: React$AbstractComponent<
               },
               classNames?.dropdownContainer,
             )}
-            ref={forwardRef}
+            ref={menuBtnRef}
           >
             <ConditionalWrapper
               condition={Boolean(tooltip)}
@@ -173,50 +166,32 @@ export const ButtonDropdown: React$AbstractComponent<
             </ConditionalWrapper>
 
             {isOpen && menu && (
-              <FloatingPortal>
-                <FloatingFocusManager
-                  modal={false}
-                  context={context}
-                  initialFocus={refs.reference}
-                >
-                  <div
-                    className={css.menuWrapper}
-                    ref={mergeRefs([refs.setFloating, boundaryRef])}
-                    style={{
-                      display: 'flex',
-                      position: strategy,
-                      top: y ?? spaceNone,
-                      left: x ?? spaceNone,
-                      /* NOTE(Sharad): The FloatingPortal renders the menu outside the normal DOM structure,
-                       so its parent is effectively the <body> element. This means the menu
-                       would otherwise default to the body's width. To support fluid width,
-                       we must manually set the dropdown width here; otherwise, it uses a fixed width.
-                       Also, Only treat menu as non-fluid if isFluid is strictly false, since default is true in menu and undefined means fluid. */
-                      ...(menu.isFluid !== false && {
-                        '--dropdown-width': dropdownWidth,
-                      }),
-                      '--menu-elevation': getElevationValue(elevation),
-                    }}
-                  >
-                    <Menu
-                      {...menu}
-                      onSelect={(option, e) => {
-                        onOptionSelect && onOptionSelect(option, e);
-                        if (
-                          // option.keepMenuOpenOnOptionSelect - to allow the menu persist its open stat upon option selection in normal variant
-                          !option.keepMenuOpenOnOptionSelect &&
-                          (!menu.optionsVariant ||
-                            menu.optionsVariant === 'normal')
-                        ) {
-                          clickAway();
-                        }
-                      }}
-                      size={menu.size || size}
-                      onTabOut={clickAway}
-                    />
-                  </div>
-                </FloatingFocusManager>
-              </FloatingPortal>
+              <div
+                ref={mergeRefs([refs.setFloating, boundaryRef])}
+                style={{
+                  display: 'flex',
+                  position: strategy,
+                  top: y ?? spaceNone,
+                  left: x ?? spaceNone,
+                  ...(isFluid && {width: sizeFluid}),
+                }}
+              >
+                <Menu
+                  {...menu}
+                  onSelect={(option, e) => {
+                    onOptionSelect && onOptionSelect(option, e);
+                    if (
+                      // option.keepMenuOpenOnOptionSelect - to allow the menu persist its open stat upon option selection in normal variant
+                      !option.keepMenuOpenOnOptionSelect &&
+                      (!menu.optionsVariant || menu.optionsVariant === 'normal')
+                    ) {
+                      clickAway();
+                    }
+                  }}
+                  size={menu.size || size}
+                  onTabOut={clickAway}
+                />
+              </div>
             )}
           </div>
         )}

package/lib/components/ButtonDropdown/ButtonDropdown.module.css

@@ -1,6 +1,4 @@
-@value (
-  sizeFluid
-) from '../../styles/variables/_size.css';
+@value ( sizeFluid) from '../../styles/variables/_size.css';
 
 .buttonDropdownContainer {
   display: flex;
@@ -10,8 +8,3 @@
 .isFluid {
   width: sizeFluid;
 }
-
-.menuWrapper {
-  width: var(--dropdown-width);
-  z-index: var(--menu-elevation);
-}

package/lib/components/ButtonDropdown/SimpleButtonDropdown.js

@@ -32,7 +32,6 @@ const SimpleButtonDropdownBase = (props, ref) => {
     showLabelTooltip,
     allowWrap = false,
     clickAwayRef,
-    elevation = 'modal',
     ...buttonProps
   } = props;
   const [btnText, setBtnText] = React.useState('');
@@ -66,11 +65,9 @@ const SimpleButtonDropdownBase = (props, ref) => {
     size: size,
     onOptionSelect: handleOptionChange,
     onMenuOpen: onMenuOpen,
-    elevation: elevation,
     onMenuClose: onMenuClose,
     clickAwayRef: clickAwayRef,
     menu: {
-      // TODO (Sharad): The isFluid prop here controls menu width unlike ButtonDropdown, and is independent from the isFluid prop in ButtonDropdown. There should be a way to set the isFluid prop of ButtonDropdown.
       isFluid,
       options,
       selectedKeys: buttonDropdownSelectedKeys,

package/lib/components/ButtonDropdown/SimpleButtonDropdown.js.flow

@@ -10,7 +10,7 @@ import {
 } from '../../utils/menu';
 import type {ButtonProps} from '../Button';
 import type {MenuOption, MenuOptionsVariant, Virtualization} from '../Menu';
-import type {BaseTooltipProps, ElevationType} from '../Tooltip';
+import type {BaseTooltipProps} from '../Tooltip';
 
 import type {AnchorType} from './ButtonDropdown';
 import {ButtonDropdown} from './ButtonDropdown';
@@ -30,7 +30,6 @@ export type SimpleButtonDropdownProps = {
   // Input props
   ...ButtonProps,
 
-  elevation?: ElevationType,
   classNames?: ClassNames,
   anchorPosition?: AnchorType,
   tooltip?: BaseTooltipProps,
@@ -46,7 +45,6 @@ export type SimpleButtonDropdownProps = {
   menuClassNames?: MenuClassNames,
   showLabelTooltip?: MenuLabelTooltip,
   allowWrap?: boolean,
-
   // events
   onOptionSelect?: (option: MenuOption, ?SyntheticEvent<HTMLElement>) => mixed,
   onMenuOpen?: () => mixed,
@@ -82,7 +80,6 @@ const SimpleButtonDropdownBase = (props: SimpleButtonDropdownProps, ref) => {
     showLabelTooltip,
     allowWrap = false,
     clickAwayRef,
-    elevation = 'modal',
     ...buttonProps
   } = props;
 
@@ -135,11 +132,9 @@ const SimpleButtonDropdownBase = (props: SimpleButtonDropdownProps, ref) => {
       size={size}
       onOptionSelect={handleOptionChange}
       onMenuOpen={onMenuOpen}
-      elevation={elevation}
       onMenuClose={onMenuClose}
       clickAwayRef={clickAwayRef}
       menu={{
-        // TODO (Sharad): The isFluid prop here controls menu width unlike ButtonDropdown, and is independent from the isFluid prop in ButtonDropdown. There should be a way to set the isFluid prop of ButtonDropdown.
         isFluid,
         options,
         selectedKeys: buttonDropdownSelectedKeys,

package/lib/components/ButtonTabs/ButtonTabDropdown.js

@@ -12,7 +12,6 @@ var _classify = _interopRequireDefault(require("../../utils/classify"));
 var _clickAway = require("../../utils/click-away");
 var _mergeRefs = require("../../utils/merge-refs");
 var _Menu = require("../Menu");
-var _Tooltip = require("../Tooltip");
 var _ButtonTab = require("./ButtonTab");
 var _ButtonTabDropdownModule = _interopRequireDefault(require("./ButtonTabDropdown.module.css"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -21,10 +20,10 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 const ButtonTabDropdown = _ref => {
   let {
     title,
-    elevation = 'modal',
     anchorPosition = 'bottom-end',
     ...buttonTabProps
   } = _ref;
+  const menuBtnRef = React.useRef();
   const {
     size,
     children,
@@ -64,8 +63,7 @@ const ButtonTabDropdown = _ref => {
     x,
     y,
     refs,
-    strategy,
-    context
+    strategy
   } = (0, _react2.useFloating)({
     open: true,
     strategy: 'absolute',
@@ -83,6 +81,7 @@ const ButtonTabDropdown = _ref => {
     } = _ref3;
     return /*#__PURE__*/React.createElement("div", {
       "data-testid": "ButtonTabDropdown",
+      ref: menuBtnRef,
       className: (0, _classify.default)(_ButtonTabDropdownModule.default.buttonTabDropDownWrapper, dropdownClass)
     }, /*#__PURE__*/React.createElement(_ButtonTab.ButtonTab, _extends({}, buttonTabProps, {
       ref: (0, _mergeRefs.mergeRefs)([refs.setReference, triggerRef]),
@@ -91,19 +90,13 @@ const ButtonTabDropdown = _ref => {
         e?.stopPropagation();
         onOpen();
       }
-    }), title), isOpen && /*#__PURE__*/React.createElement(_react2.FloatingPortal, null, /*#__PURE__*/React.createElement(_react2.FloatingFocusManager, {
-      modal: false,
-      context: context,
-      initialFocus: refs.reference
-    }, /*#__PURE__*/React.createElement("div", {
-      className: _ButtonTabDropdownModule.default.menuWrapper,
+    }), title), isOpen && /*#__PURE__*/React.createElement("div", {
       ref: (0, _mergeRefs.mergeRefs)([refs.setFloating, boundaryRef]),
       style: {
         display: 'flex',
         position: strategy,
         top: y ?? _space.spaceNone,
-        left: x ?? _space.spaceNone,
-        '--menu-elevation': (0, _Tooltip.getElevationValue)(elevation)
+        left: x ?? _space.spaceNone
       }
     }, /*#__PURE__*/React.createElement(_Menu.Menu, {
       onSelect: (option, e) => {
@@ -114,7 +107,7 @@ const ButtonTabDropdown = _ref => {
       options: menuOptions,
       onTabOut: clickAway,
       selectedKeys: [selectedButtonTabId ?? '']
-    })))));
+    })));
   });
 };
 exports.ButtonTabDropdown = ButtonTabDropdown;

package/lib/components/ButtonTabs/ButtonTabDropdown.js.flow

@@ -7,10 +7,6 @@ import {
   // $FlowFixMe[untyped-import]
   flip,
   // $FlowFixMe[untyped-import]
-  FloatingFocusManager,
-  // $FlowFixMe[untyped-import]
-  FloatingPortal,
-  // $FlowFixMe[untyped-import]
   offset,
   // $FlowFixMe[untyped-import]
   shift,
@@ -25,8 +21,6 @@ import {ClickAway} from '../../utils/click-away';
 import {mergeRefs} from '../../utils/merge-refs';
 import type {AnchorType} from '../ButtonDropdown';
 import {Menu} from '../Menu';
-import type {ElevationType} from '../Tooltip';
-import {getElevationValue} from '../Tooltip';
 
 import type {ButtonTabProps} from './ButtonTab';
 import {ButtonTab} from './ButtonTab';
@@ -37,18 +31,17 @@ import css from './ButtonTabDropdown.module.css';
 export type ButtonTabDropdownProps = {
   ...ButtonTabProps,
   title: string,
-  elevation?: ElevationType,
-  dropdownClass?: string,
   anchorPosition?: AnchorType,
+  dropdownClass?: string,
   ...
 };
 
 export const ButtonTabDropdown = ({
   title,
-  elevation = 'modal',
   anchorPosition = 'bottom-end',
   ...buttonTabProps
 }: ButtonTabDropdownProps): React.Node => {
+  const menuBtnRef = React.useRef();
   const {
     size,
     children,
@@ -85,7 +78,7 @@ export const ButtonTabDropdown = ({
     ? 'more-tab'
     : selectedButtonTabId;
 
-  const {x, y, refs, strategy, context} = useFloating({
+  const {x, y, refs, strategy} = useFloating({
     open: true,
     strategy: 'absolute',
     placement: anchorPosition,
@@ -98,6 +91,7 @@ export const ButtonTabDropdown = ({
       {({isOpen, onOpen, clickAway, boundaryRef, triggerRef}) => (
         <div
           data-testid="ButtonTabDropdown"
+          ref={menuBtnRef}
           className={classify(css.buttonTabDropDownWrapper, dropdownClass)}
         >
           <ButtonTab
@@ -112,36 +106,26 @@ export const ButtonTabDropdown = ({
             {title}
           </ButtonTab>
           {isOpen && (
-            <FloatingPortal>
-              <FloatingFocusManager
-                modal={false}
-                context={context}
-                initialFocus={refs.reference}
-              >
-                <div
-                  className={css.menuWrapper}
-                  ref={mergeRefs([refs.setFloating, boundaryRef])}
-                  style={{
-                    display: 'flex',
-                    position: strategy,
-                    top: y ?? spaceNone,
-                    left: x ?? spaceNone,
-                    '--menu-elevation': getElevationValue(elevation),
-                  }}
-                >
-                  <Menu
-                    onSelect={(option, e) => {
-                      onTabSelect && onTabSelect(option.key, e);
-                      clickAway();
-                    }}
-                    size={size}
-                    options={menuOptions}
-                    onTabOut={clickAway}
-                    selectedKeys={[selectedButtonTabId ?? '']}
-                  />
-                </div>
-              </FloatingFocusManager>
-            </FloatingPortal>
+            <div
+              ref={mergeRefs([refs.setFloating, boundaryRef])}
+              style={{
+                display: 'flex',
+                position: strategy,
+                top: y ?? spaceNone,
+                left: x ?? spaceNone,
+              }}
+            >
+              <Menu
+                onSelect={(option, e) => {
+                  onTabSelect && onTabSelect(option.key, e);
+                  clickAway();
+                }}
+                size={size}
+                options={menuOptions}
+                onTabOut={clickAway}
+                selectedKeys={[selectedButtonTabId ?? '']}
+              />
+            </div>
           )}
         </div>
       )}

package/lib/components/ButtonTabs/ButtonTabDropdown.module.css

@@ -2,7 +2,3 @@
   display: flex;
   flex-shrink: 0;
 }
-
-.menuWrapper {
-  z-index: var(--menu-elevation);
-}

package/lib/components/ButtonTabs/ButtonTabs.js

@@ -20,7 +20,6 @@ const ButtonTabs = exports.ButtonTabs = /*#__PURE__*/React.forwardRef((_ref, ref
     selectedButtonTabId,
     onButtonTabSelect,
     wrapAfter,
-    elevation = 'modal',
     wrapTabTitle = 'more',
     anchorPosition
   } = _ref;
@@ -35,7 +34,6 @@ const ButtonTabs = exports.ButtonTabs = /*#__PURE__*/React.forwardRef((_ref, ref
         id: "more-tab",
         title: wrapTabTitle,
         iconName: "ellipsis-vertical",
-        elevation: elevation,
         anchorPosition: anchorPosition,
         dropdownClass: classNames?.buttonTabDropdownWrapper
       }, wrappedNodes));

package/lib/components/ButtonTabs/ButtonTabs.js.flow

@@ -4,7 +4,6 @@ import * as React from 'react';
 
 import classify from '../../utils/classify';
 import type {AnchorType} from '../ButtonDropdown';
-import type {ElevationType} from '../Tooltip';
 
 import {ButtonTabDropdown} from './ButtonTabDropdown';
 
@@ -25,7 +24,6 @@ export type ButtonTabsProps = {
   selectedButtonTabId?: string,
   onButtonTabSelect?: ?(id: string, e?: ?SyntheticEvent<HTMLElement>) => mixed,
   wrapAfter?: number,
-  elevation?: ElevationType,
   wrapTabTitle?: string,
   anchorPosition?: AnchorType,
 };
@@ -44,7 +42,6 @@ export const ButtonTabs: React$AbstractComponent<
       selectedButtonTabId,
       onButtonTabSelect,
       wrapAfter,
-      elevation = 'modal',
       wrapTabTitle = 'more',
       anchorPosition,
     }: ButtonTabsProps,
@@ -65,7 +62,6 @@ export const ButtonTabs: React$AbstractComponent<
             id="more-tab"
             title={wrapTabTitle}
             iconName="ellipsis-vertical"
-            elevation={elevation}
             anchorPosition={anchorPosition}
             dropdownClass={classNames?.buttonTabDropdownWrapper}
           >

package/lib/components/DateRangePicker/DateRangePicker.js

@@ -24,7 +24,9 @@ const DateRangePicker = exports.DateRangePicker = /*#__PURE__*/React.forwardRef(
     onCancel,
     classNames,
     hideTimezone = false,
-    selectedDateRange = {}
+    selectedDateRange = {},
+    startDateLabel,
+    endDateLabel
   } = _ref;
   const localTimezone = _momentTimezone.default.tz.guess();
   const {
@@ -128,6 +130,8 @@ const DateRangePicker = exports.DateRangePicker = /*#__PURE__*/React.forwardRef(
     setRangeEndMonth: setRangeEndMonthValidated,
     hideTimezone: hideTimezone,
     cardWrapperClass: (0, _classify.default)(_DateRangePickerModule.default.container, classNames?.wrapper),
-    today: today
+    today: today,
+    startDateLabel: startDateLabel,
+    endDateLabel: endDateLabel
   });
 });

package/lib/components/DateRangePicker/DateRangePicker.js.flow

@@ -45,6 +45,8 @@ export type DateRangePickerProps = {
   hideTimezone?: boolean,
   minDate?: string,
   maxDate?: string,
+  startDateLabel?: string,
+  endDateLabel?: string,
 };
 
 export const DateRangePicker: React$AbstractComponent<
@@ -61,6 +63,8 @@ export const DateRangePicker: React$AbstractComponent<
       classNames,
       hideTimezone = false,
       selectedDateRange = {},
+      startDateLabel,
+      endDateLabel,
     }: DateRangePickerProps,
     ref,
   ): React.Node => {
@@ -195,6 +199,8 @@ export const DateRangePicker: React$AbstractComponent<
         hideTimezone={hideTimezone}
         cardWrapperClass={classify(css.container, classNames?.wrapper)}
         today={today}
+        startDateLabel={startDateLabel}
+        endDateLabel={endDateLabel}
       />
     );
   },