@synerise/ds-dropdown 1.0.34 → 1.1.0

package/dist/components/DropdownMenu/DropdownMenu.types.d.ts

@@ -0,0 +1,18 @@
+import type { ReactNode } from 'react';
+import type { ListItemProps } from '@synerise/ds-list-item';
+import { type DropdownSharedProps } from '../../Dropdown.types';
+export type DropdownMenuTexts = {
+    searchPlaceholder: string;
+    noSearchResults: ReactNode;
+    searchClearTooltip: ReactNode;
+};
+export type DropdownMenuProps<ItemType extends ListItemProps> = Omit<DropdownSharedProps, 'overlay' | 'dropdownRender' | 'defaultOpen' | 'align' | 'hideOnItemClick'> & {
+    dataSource: ItemType[];
+    hideOnItemClick?: boolean;
+    virtualised?: boolean;
+    withSearch?: boolean;
+    maxVisibleItems?: number;
+    texts?: Partial<DropdownMenuTexts>;
+    itemMatchesSearchQuery?: (item: ItemType, query: string) => boolean;
+    onSearchQueryChange?: (query: string) => void;
+};

package/dist/components/DropdownMenu/DropdownMenu.types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/DropdownMenuList/DropdownMenuList.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { type ListItemProps } from '@synerise/ds-list-item';
+import { type DropdownMenuListProps } from './DropdownMenuList.types';
+export declare const DropdownMenuList: <ItemType extends ListItemProps>({ dataSource, maxVisibleItems, hideOnItemClick, virtualised, closeOverlay, texts, }: DropdownMenuListProps<ItemType>) => React.JSX.Element;

package/dist/components/DropdownMenuList/DropdownMenuList.js

@@ -0,0 +1,84 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React, { useCallback, useMemo } from 'react';
+import { VariableSizeList } from 'react-window';
+import { SearchNoResultsL } from '@synerise/ds-icon';
+import { LIST_ITEM_SIZE_MAPPING } from '@synerise/ds-list-item';
+import Scrollbar from '@synerise/ds-scrollbar';
+import { MAX_VISIBLE_ITEMS, SCROLLBAR_OFFSET } from '../../Dropdown.const';
+import * as S from './DropdownMenuList.styles';
+export var DropdownMenuList = function DropdownMenuList(_ref) {
+  var dataSource = _ref.dataSource,
+    _ref$maxVisibleItems = _ref.maxVisibleItems,
+    maxVisibleItems = _ref$maxVisibleItems === void 0 ? MAX_VISIBLE_ITEMS : _ref$maxVisibleItems,
+    hideOnItemClick = _ref.hideOnItemClick,
+    virtualised = _ref.virtualised,
+    closeOverlay = _ref.closeOverlay,
+    texts = _ref.texts;
+  var getItemSize = useCallback(function (index) {
+    return dataSource[index].type === 'divider' ? 17 : LIST_ITEM_SIZE_MAPPING[dataSource[index].size || 'default'];
+  }, [dataSource]);
+  var handleItemClick = useCallback(function () {
+    if (hideOnItemClick) {
+      setTimeout(function () {
+        closeOverlay();
+      }, 10);
+    }
+  }, [hideOnItemClick, closeOverlay]);
+  var _useMemo = useMemo(function () {
+      var height = 0;
+      var maxHeight = 0;
+      var visibleItems = 0;
+      dataSource.forEach(function (item, index) {
+        var itemHeight = getItemSize(index);
+        height += itemHeight;
+        if (visibleItems < maxVisibleItems) {
+          maxHeight += itemHeight;
+        }
+        if (item.type !== 'divider') {
+          visibleItems += 1;
+        }
+      });
+      return {
+        listHeight: height,
+        listMaxHeight: maxHeight
+      };
+    }, [dataSource, getItemSize, maxVisibleItems]),
+    listHeight = _useMemo.listHeight,
+    listMaxHeight = _useMemo.listMaxHeight;
+  return /*#__PURE__*/React.createElement(S.ScrollableMenuWrapper, null, dataSource.length ? /*#__PURE__*/React.createElement(Scrollbar, {
+    absolute: true,
+    maxHeight: listMaxHeight + SCROLLBAR_OFFSET
+  }, /*#__PURE__*/React.createElement(S.DropdownMenuList, null, virtualised ? /*#__PURE__*/React.createElement(VariableSizeList, {
+    height: listHeight,
+    itemData: dataSource,
+    itemCount: dataSource.length,
+    itemSize: getItemSize,
+    width: "100%",
+    style: {
+      paddingRight: '8px'
+    }
+  }, function (listItemData) {
+    var data = listItemData.data,
+      index = listItemData.index;
+    var item = data[index];
+    return item.type === 'divider' ? /*#__PURE__*/React.createElement(S.DropdownMenuListItem, item) : /*#__PURE__*/React.createElement(S.DropdownMenuListItem, _extends({}, item, {
+      itemKey: item.key,
+      onClick: function onClick(itemData) {
+        item.onClick == null || item.onClick(itemData);
+        handleItemClick();
+      }
+    }));
+  }) : /*#__PURE__*/React.createElement(React.Fragment, null, dataSource.map(function (item) {
+    return item.type === 'divider' ? /*#__PURE__*/React.createElement(S.DropdownMenuListItem, item) : /*#__PURE__*/React.createElement(S.DropdownMenuListItem, _extends({}, item, {
+      itemKey: item.key,
+      onClick: function onClick(itemData) {
+        item.onClick == null || item.onClick(itemData);
+        handleItemClick();
+      }
+    }));
+  })))) : /*#__PURE__*/React.createElement(S.EmptyStates, {
+    iconPosition: "top",
+    customIcon: /*#__PURE__*/React.createElement(SearchNoResultsL, null),
+    label: texts.noSearchResults
+  }));
+};

package/dist/components/DropdownMenuList/DropdownMenuList.styles.d.ts

@@ -0,0 +1,40 @@
+export declare const ScrollableMenuWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const MenuWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const EmptyStates: import("styled-components").StyledComponent<({ size, label, text, button, fontSize, customIcon, className, mode, iconPosition, textAlign, }: import("@synerise/ds-empty-states").EmptyStatesProps) => React.JSX.Element, any, {}, never>;
+export declare const DropdownMenuListItem: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@synerise/ds-list-item/dist/ListItem.types").ListItemDividerProps & {
+    checked?: boolean;
+    selected?: boolean;
+    children?: React.ReactNode;
+    className?: string;
+    copyable?: boolean | import("@synerise/ds-list-item/dist/ListItem.types").Copyable;
+    copyValue?: string;
+    copyHint?: React.ReactNode;
+    copyTooltip?: React.ReactNode;
+    timeToHideTooltip?: number;
+    tooltipProps?: import("@synerise/ds-tooltip").TooltipProps;
+    description?: React.ReactNode;
+    direction?: "ltr" | "rtl";
+    disabled?: boolean;
+    highlight?: string;
+    hoverTooltipProps?: Pick<import("rc-trigger").TriggerProps, "onPopupVisibleChange" | "onPopupClick" | "mouseEnterDelay" | "mouseLeaveDelay" | "defaultPopupVisible" | "action" | "afterPopupVisibleChange" | "popupPlacement" | "getPopupContainer" | "forceRender"> & {
+        ref?: React.LegacyRef<import("@synerise/ds-list-item/dist/ListItem.types").TriggerHandle>;
+    };
+    key?: React.Key;
+    itemKey?: React.Key;
+    noHover?: boolean;
+    onItemHover?: import("@synerise/ds-list-item").ListItemEventHandler<import("react").MouseEvent<HTMLDivElement>>;
+    onClick?: import("@synerise/ds-list-item").ListItemEventHandler<import("react").MouseEvent<HTMLDivElement> | import("react").KeyboardEvent<HTMLDivElement>>;
+    ordered?: boolean;
+    parent?: boolean;
+    prefixel?: React.ReactNode | import("@synerise/ds-list-item/dist/ListItem.types").AddonRenderer;
+    prefixVisibilityTrigger?: "hover" | "default";
+    renderHoverTooltip?: () => JSX.Element;
+    size?: import("@synerise/ds-list-item").ItemSize;
+    suffixel?: React.ReactNode | import("@synerise/ds-list-item/dist/ListItem.types").AddonRenderer;
+    suffixVisibilityTrigger?: "hover" | "default";
+    text?: React.ReactNode;
+    type?: import("@synerise/ds-list-item").ItemType;
+    subMenu?: import("@synerise/ds-list-item").ListItemProps[];
+    indentLevel?: number;
+} & Omit<import("react").HTMLAttributes<HTMLDivElement>, "className" | "children" | "onClick" | "disabled" | "size" | keyof import("@synerise/ds-list-item/dist/ListItem.types").ListItemDividerProps | "checked" | "selected" | "copyable" | "copyValue" | "copyHint" | "copyTooltip" | "timeToHideTooltip" | "tooltipProps" | "description" | "direction" | "highlight" | "hoverTooltipProps" | "key" | "itemKey" | "noHover" | "onItemHover" | "ordered" | "parent" | "prefixel" | "prefixVisibilityTrigger" | "renderHoverTooltip" | "suffixel" | "suffixVisibilityTrigger" | "text" | "type" | "subMenu" | "indentLevel"> & import("@synerise/ds-utils").DataAttributes & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
+export declare const DropdownMenuList: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/components/DropdownMenuList/DropdownMenuList.styles.js

@@ -0,0 +1,23 @@
+import styled from 'styled-components';
+import EmptyStatesBase from '@synerise/ds-empty-states';
+import ListItemBase from '@synerise/ds-list-item';
+export var ScrollableMenuWrapper = styled.div.withConfig({
+  displayName: "DropdownMenuListstyles__ScrollableMenuWrapper",
+  componentId: "sc-1lf08nj-0"
+})(["padding:8px 0 8px 8px;"]);
+export var MenuWrapper = styled.div.withConfig({
+  displayName: "DropdownMenuListstyles__MenuWrapper",
+  componentId: "sc-1lf08nj-1"
+})(["padding:8px;"]);
+export var EmptyStates = styled(EmptyStatesBase).withConfig({
+  displayName: "DropdownMenuListstyles__EmptyStates",
+  componentId: "sc-1lf08nj-2"
+})(["margin:48px 0;"]);
+export var DropdownMenuListItem = styled(ListItemBase).withConfig({
+  displayName: "DropdownMenuListstyles__DropdownMenuListItem",
+  componentId: "sc-1lf08nj-3"
+})(["min-width:0;"]);
+export var DropdownMenuList = styled.div.withConfig({
+  displayName: "DropdownMenuListstyles__DropdownMenuList",
+  componentId: "sc-1lf08nj-4"
+})(["padding-right:8px;"]);

package/dist/components/DropdownMenuList/DropdownMenuList.types.d.ts

@@ -0,0 +1,7 @@
+import { type ListItemProps } from '@synerise/ds-list-item';
+import { type DropdownMenuProps, type DropdownMenuTexts } from '../DropdownMenu/DropdownMenu.types';
+export type DropdownMenuListItemProps = ListItemProps;
+export type DropdownMenuListProps<ItemType extends DropdownMenuListItemProps> = Pick<DropdownMenuProps<ItemType>, 'dataSource' | 'hideOnItemClick' | 'virtualised' | 'maxVisibleItems'> & {
+    closeOverlay: () => void;
+    texts: DropdownMenuTexts;
+};

package/dist/components/DropdownMenuList/DropdownMenuList.types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/DropdownOverlay/DropdownOverlay.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export declare const DropdownOverlay: React.ForwardRefExoticComponent<Pick<import("../..").DropdownProps, "overlayStyle" | "overlayClassName" | "size" | "hideOnItemClick"> & {
+    content: React.ReactNode;
+    triggerRef: React.RefObject<HTMLElement>;
+    htmlAttributes?: React.HTMLAttributes<HTMLDivElement>;
+    handleItemClick?: () => void;
+} & React.RefAttributes<HTMLDivElement>>;

package/dist/components/DropdownOverlay/DropdownOverlay.js

@@ -0,0 +1,73 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import classnames from 'classnames';
+import React, { forwardRef, useEffect, useRef, useState } from 'react';
+import { useMergeRefs } from '@floating-ui/react';
+import { getDropdownWidth } from '../../utils';
+import { OverlayWrapper } from './DropdownOverlay.styles';
+export var DropdownOverlay = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var _getDropdownWidth;
+  var content = _ref.content,
+    size = _ref.size,
+    overlayStyle = _ref.overlayStyle,
+    overlayClassName = _ref.overlayClassName,
+    htmlAttributes = _ref.htmlAttributes,
+    hideOnItemClick = _ref.hideOnItemClick,
+    handleItemClick = _ref.handleItemClick,
+    triggerRef = _ref.triggerRef;
+  var overlayWrapperRef = useRef(null);
+  var mergedRef = useMergeRefs([overlayWrapperRef, ref]);
+  var _useState = useState((_getDropdownWidth = getDropdownWidth(size)) != null ? _getDropdownWidth : 0),
+    overlaySize = _useState[0],
+    setOverlaySize = _useState[1];
+  useEffect(function () {
+    if (triggerRef.current && (size === 'match-trigger' || size === 'min-match-trigger')) {
+      setOverlaySize(triggerRef.current.clientWidth);
+    } else {
+      var _getDropdownWidth2;
+      setOverlaySize((_getDropdownWidth2 = getDropdownWidth(size)) != null ? _getDropdownWidth2 : 0);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [size]);
+  useEffect(function () {
+    var handleItemSelect = function handleItemSelect(element) {
+      var _overlayWrapperRef$cu;
+      var itemSelector = typeof hideOnItemClick === 'string' ? hideOnItemClick : '[role="menuitem"]';
+      var listItem = element.closest(itemSelector);
+      if ((_overlayWrapperRef$cu = overlayWrapperRef.current) != null && _overlayWrapperRef$cu.contains(listItem)) {
+        setTimeout(function () {
+          handleItemClick == null || handleItemClick();
+        }, 0);
+      }
+    };
+    var handleOverlayClick = function handleOverlayClick(event) {
+      if (overlayWrapperRef.current && typeof hideOnItemClick === 'string' && event.target instanceof HTMLElement) {
+        handleItemSelect(event.target);
+      }
+    };
+    var handleItemEnterPress = function handleItemEnterPress(event) {
+      if (event.key === 'Enter') {
+        if (overlayWrapperRef.current && typeof hideOnItemClick === 'string' && event.target instanceof HTMLElement) {
+          handleItemSelect(event.target);
+        }
+      }
+    };
+    var overlayNode = overlayWrapperRef.current;
+    if (overlayNode) {
+      overlayNode.addEventListener('click', handleOverlayClick);
+      overlayNode.addEventListener('keydown', handleItemEnterPress);
+    }
+    return function () {
+      if (overlayNode) {
+        overlayNode.removeEventListener('click', handleOverlayClick);
+        overlayNode.removeEventListener('keydown', handleItemEnterPress);
+      }
+    };
+  });
+  return /*#__PURE__*/React.createElement(OverlayWrapper, _extends({
+    style: overlayStyle,
+    className: classnames(overlayClassName, htmlAttributes == null ? void 0 : htmlAttributes.className),
+    $width: overlaySize,
+    widthProperty: size === 'min-match-trigger' ? 'min-width' : 'width',
+    ref: mergedRef
+  }, htmlAttributes), content);
+});

package/dist/components/DropdownOverlay/DropdownOverlay.styles.d.ts

@@ -0,0 +1,4 @@
+export declare const OverlayWrapper: import("styled-components").StyledComponent<"div", any, {
+    $width?: number;
+    widthProperty: string;
+}, never>;

package/dist/components/DropdownOverlay/DropdownOverlay.styles.js

@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+import { Wrapper as ListItemWrapper } from '@synerise/ds-list-item/dist/components/Text/Text.styles';
+export var OverlayWrapper = styled.div.withConfig({
+  displayName: "DropdownOverlaystyles__OverlayWrapper",
+  componentId: "sc-hy0f4i-0"
+})(["background:", ";box-shadow:", ";border-radius:3px;", ";overflow:hidden;", "{min-width:0;}"], function (props) {
+  return props.theme.palette.white;
+}, function (props) {
+  return props.theme.variables['box-shadow-2'];
+}, function (props) {
+  return props.$width && props.widthProperty + ": " + props.$width + "px";
+}, ListItemWrapper);

package/dist/components/DropdownOverlay/DropdownOverlay.types.d.ts

@@ -0,0 +1,8 @@
+import { type HTMLAttributes, type ReactNode, type RefObject } from 'react';
+import { type DropdownProps } from '../../Dropdown.types';
+export type DropdownOverlayProps = Pick<DropdownProps, 'size' | 'overlayStyle' | 'hideOnItemClick' | 'overlayClassName'> & {
+    content: ReactNode;
+    triggerRef: RefObject<HTMLElement>;
+    htmlAttributes?: HTMLAttributes<HTMLDivElement>;
+    handleItemClick?: () => void;
+};

package/dist/components/DropdownOverlay/DropdownOverlay.types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/DropdownPopover/DropdownPopover.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { type DropdownPopoverProps } from './DropdownPopover.types';
+export declare const DropdownPopover: ({ placement, children, popoverProps, popoverTriggerProps, getPopupContainer, trigger, open, onDismiss, overlay, handleOpenChange, size, handleItemClick, handleTriggerClick, hideOnItemClick, asChild, overlayStyle, overlayClassName, overlayHTMLAttributes, activeIndex, setActiveIndex, }: DropdownPopoverProps) => React.JSX.Element;

package/dist/components/DropdownPopover/DropdownPopover.js

@@ -0,0 +1,79 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React, { useRef } from 'react';
+import { FloatingList } from '@floating-ui/react';
+import { DropdownContextProvider } from '@synerise/ds-core';
+import { Popover, PopoverContent, PopoverTrigger } from '@synerise/ds-popover';
+import { POPOVER_FLIP_CONFIG, POPOVER_OFFSET_CONFIG, POPOVER_SHIFT_CONFIG, POPOVER_TRANSITION_DURATION } from '../../Dropdown.const';
+import { getPlacement, getTransitionConfig } from '../../utils';
+import { DropdownOverlay } from '../DropdownOverlay/DropdownOverlay';
+export var DropdownPopover = function DropdownPopover(_ref) {
+  var _ref$placement = _ref.placement,
+    placement = _ref$placement === void 0 ? 'bottomLeft' : _ref$placement,
+    children = _ref.children,
+    popoverProps = _ref.popoverProps,
+    popoverTriggerProps = _ref.popoverTriggerProps,
+    getPopupContainer = _ref.getPopupContainer,
+    trigger = _ref.trigger,
+    open = _ref.open,
+    onDismiss = _ref.onDismiss,
+    overlay = _ref.overlay,
+    handleOpenChange = _ref.handleOpenChange,
+    size = _ref.size,
+    handleItemClick = _ref.handleItemClick,
+    handleTriggerClick = _ref.handleTriggerClick,
+    hideOnItemClick = _ref.hideOnItemClick,
+    asChild = _ref.asChild,
+    overlayStyle = _ref.overlayStyle,
+    overlayClassName = _ref.overlayClassName,
+    overlayHTMLAttributes = _ref.overlayHTMLAttributes,
+    activeIndex = _ref.activeIndex,
+    setActiveIndex = _ref.setActiveIndex;
+  var floatingPlacement = getPlacement(placement);
+  var triggerRef = useRef(null);
+  var elementsRef = useRef([]);
+  var listNavigationConfig = {
+    enabled: true,
+    activeIndex: activeIndex,
+    onNavigate: function onNavigate(newIndex) {
+      setActiveIndex(newIndex);
+    },
+    listRef: elementsRef
+  };
+  return /*#__PURE__*/React.createElement(Popover, _extends({
+    placement: floatingPlacement,
+    trigger: trigger,
+    modal: false,
+    open: open,
+    onOpenChange: handleOpenChange,
+    onDismiss: onDismiss,
+    transitionDuration: POPOVER_TRANSITION_DURATION,
+    autoUpdate: true,
+    offsetConfig: POPOVER_OFFSET_CONFIG,
+    flipConfig: POPOVER_FLIP_CONFIG,
+    shiftConfig: POPOVER_SHIFT_CONFIG,
+    getTransitionConfig: getTransitionConfig,
+    getPopupContainer: getPopupContainer,
+    listNavigationConfig: listNavigationConfig,
+    testId: "dropdown"
+  }, popoverProps), /*#__PURE__*/React.createElement(PopoverTrigger, _extends({
+    ref: triggerRef,
+    asChild: asChild,
+    onClick: handleTriggerClick
+  }, popoverTriggerProps), children), /*#__PURE__*/React.createElement(PopoverContent, null, /*#__PURE__*/React.createElement(DropdownContextProvider, {
+    hideOnItemClick: hideOnItemClick,
+    activeIndex: activeIndex,
+    setIsOpen: handleOpenChange,
+    isOpen: !!open
+  }, /*#__PURE__*/React.createElement(FloatingList, {
+    elementsRef: elementsRef
+  }, /*#__PURE__*/React.createElement(DropdownOverlay, {
+    size: size,
+    triggerRef: triggerRef,
+    htmlAttributes: overlayHTMLAttributes,
+    overlayStyle: overlayStyle,
+    overlayClassName: overlayClassName,
+    hideOnItemClick: hideOnItemClick,
+    content: overlay,
+    handleItemClick: handleItemClick
+  })))));
+};

package/dist/components/DropdownPopover/DropdownPopover.types.d.ts

@@ -0,0 +1,8 @@
+import { type DropdownProps } from '../../Dropdown.types';
+export type DropdownPopoverProps = Pick<DropdownProps, 'asChild' | 'children' | 'onDismiss' | 'onOpenChange' | 'getPopupContainer' | 'placement' | 'popoverProps' | 'popoverTriggerProps' | 'overlay' | 'overlayClassName' | 'overlayHTMLAttributes' | 'overlayStyle' | 'open' | 'hideOnItemClick' | 'size' | 'trigger'> & {
+    handleOpenChange: (newVal: boolean) => void;
+    handleItemClick?: () => void;
+    handleTriggerClick: () => void;
+    setActiveIndex: (index: number | null) => void;
+    activeIndex: number | null;
+};

package/dist/components/DropdownPopover/DropdownPopover.types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/TextTrigger/TextTrigger.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { type TextTriggerProps } from './TextTrigger.types';
+export declare const TextTrigger: React.ForwardRefExoticComponent<TextTriggerProps & React.RefAttributes<HTMLDivElement>>;

package/dist/{elements → components}/TextTrigger/TextTrigger.js

@@ -1,9 +1,9 @@
-import React from 'react';
-import { theme } from '@synerise/ds-core';
+import React, { forwardRef } from 'react';
+import { useTheme } from '@synerise/ds-core';
 import Icon, { AngleDownS } from '@synerise/ds-icon';
 import { Title } from '@synerise/ds-typography';
 import * as S from './TextTrigger.styles';
-var TextTrigger = function TextTrigger(_ref) {
+export var TextTrigger = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var value = _ref.value,
     expanded = _ref.expanded,
     size = _ref.size,
@@ -13,10 +13,12 @@ var TextTrigger = function TextTrigger(_ref) {
     onFocus = _ref.onFocus,
     _ref$isDisabled = _ref.isDisabled,
     isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled;
+  var theme = useTheme();
   return /*#__PURE__*/React.createElement(S.TextTrigger, {
     onFocus: isDisabled ? undefined : onFocus,
     inactiveColor: theme.palette[inactiveColor],
     tabIndex: 0,
+    ref: ref,
     onClick: isDisabled ? undefined : onClick,
     isDisabled: isDisabled
   }, /*#__PURE__*/React.createElement(Title, {
@@ -26,5 +28,4 @@ var TextTrigger = function TextTrigger(_ref) {
   }, /*#__PURE__*/React.createElement(Icon, {
     component: /*#__PURE__*/React.createElement(AngleDownS, null)
   })));
-};
-export default TextTrigger;
+});

package/dist/{elements → components}/TextTrigger/TextTrigger.styles.js

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 export var TextTrigger = styled.div.withConfig({
   displayName: "TextTriggerstyles__TextTrigger",
-  componentId: "sc-4ebj2t-0"
+  componentId: "sc-xuqby2-0"
 })(["display:flex;flex-direction:row;align-items:center;justify-content:center;cursor:", ";opacity:", ";.ds-title{margin:0;}.ds-title,svg{color:", ";fill:", ";}&&&:focus{.ds-title,svg{color:", ";fill:", ";}}}&:hover{.ds-title,svg{color:", ";fill:", ";}}"], function (props) {
   return props.isDisabled ? 'default' : 'pointer';
 }, function (props) {
@@ -21,7 +21,7 @@ export var TextTrigger = styled.div.withConfig({
 });
 export var IconWrapper = styled.div.withConfig({
   displayName: "TextTriggerstyles__IconWrapper",
-  componentId: "sc-4ebj2t-1"
+  componentId: "sc-xuqby2-1"
 })(["&&&{svg{transition:transform 0.1s linear;transform:rotateZ( ", " );}}"], function (props) {
   return props.expanded ? '180deg' : '0deg';
 });

package/dist/{elements → components}/TextTrigger/TextTrigger.types.d.ts

@@ -3,7 +3,7 @@ export type TextTriggerProps = {
     value: string | React.ReactNode | undefined;
     inactiveColor?: string;
     size: 1 | 2 | 3 | 4 | 5 | 6;
-    onClick: () => void;
+    onClick?: () => void;
     onFocus?: () => void;
     expanded?: boolean;
     isDisabled?: boolean;

package/dist/components/TextTrigger/TextTrigger.types.js

@@ -0,0 +1 @@
+export {};

package/dist/hooks/useDefaultTexts.d.ts

@@ -0,0 +1,2 @@
+import { type DropdownMenuTexts } from '../components/DropdownMenu/DropdownMenu.types';
+export declare const useDefaultTexts: (customTexts?: Partial<DropdownMenuTexts>) => DropdownMenuTexts;

package/dist/hooks/useDefaultTexts.js

@@ -0,0 +1,21 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+import { FormattedMessage, useIntl } from 'react-intl';
+export var useDefaultTexts = function useDefaultTexts(customTexts) {
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  return _extends({
+    noSearchResults: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "DS.DROPDOWN-MENU.NO-SEARCH-RESULTS",
+      defaultMessage: "No results"
+    }),
+    searchClearTooltip: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "DS.CONFIRMATION.SEARCH-CLEAR-TOOLTIP",
+      defaultMessage: "Clear"
+    }),
+    searchPlaceholder: formatMessage({
+      id: 'DS.DROPDOWN-MENU.SEARCH-PLACEHOLDER',
+      defaultMessage: 'Search'
+    })
+  }, customTexts || {});
+};

package/dist/hooks/useDropdownVisibility.d.ts

@@ -0,0 +1,10 @@
+type UseDropdownVisibilityProps = {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (newState: boolean) => void;
+};
+export declare const useDropdownVisibility: ({ open, onOpenChange, }: UseDropdownVisibilityProps) => {
+    toggleOpen: (openState: boolean) => void;
+    open: boolean | undefined;
+};
+export {};

package/dist/hooks/useDropdownVisibility.js

@@ -0,0 +1,40 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+export var useDropdownVisibility = function useDropdownVisibility(_ref) {
+  var open = _ref.open,
+    onOpenChange = _ref.onOpenChange;
+  var _useState = useState(open),
+    internalOpen = _useState[0],
+    setInternalOpen = _useState[1];
+  var skipDuplicates = useRef(0);
+  var controlledComponent = open !== undefined;
+  var actualOpen = controlledComponent ? open : internalOpen;
+  useEffect(function () {
+    skipDuplicates.current = 0;
+  }, [internalOpen]);
+  useEffect(function () {
+    if (controlledComponent && open !== internalOpen) {
+      if (skipDuplicates.current === 0) {
+        skipDuplicates.current += 1;
+        onOpenChange == null || onOpenChange(open);
+      }
+      setInternalOpen(open);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [controlledComponent, open]);
+  var toggleOpen = useCallback(function (openState) {
+    if (openState !== internalOpen) {
+      setInternalOpen(openState);
+    }
+    // PopupTrigger fires toggleOpen onClick
+    // the trigger in the implementation may or may not have an onClick that changes `open` state
+    // this prevents duplicated onOpenChange calls if both have onClicks defined
+    if (skipDuplicates.current === 0) {
+      skipDuplicates.current += 1;
+      onOpenChange == null || onOpenChange(openState);
+    }
+  }, [internalOpen, onOpenChange]);
+  return {
+    toggleOpen: toggleOpen,
+    open: actualOpen
+  };
+};

package/dist/index.d.ts

@@ -1 +1,9 @@
-export { default, type DropdownProps } from './Dropdown';
+export { default, Dropdown } from './Dropdown';
+export { DropdownMenu } from './components/DropdownMenu/DropdownMenu';
+export { DropdownOverlay } from './components/DropdownOverlay/DropdownOverlay';
+export { TextTrigger } from './components/TextTrigger/TextTrigger';
+export { BackAction } from './components/BackAction/BackAction';
+export { BottomAction } from './components/BottomAction/BottomAction';
+export type { DropdownPlacement, DropdownProps, DropdownSharedProps, DropdownSize, } from './Dropdown.types';
+export { type DropdownMenuProps } from './components/DropdownMenu/DropdownMenu.types';
+export { type DropdownMenuListItemProps } from './components/DropdownMenuList/DropdownMenuList.types';

package/dist/index.js

@@ -1 +1,6 @@
-export { default } from './Dropdown';
+export { default, Dropdown } from './Dropdown';
+export { DropdownMenu } from './components/DropdownMenu/DropdownMenu';
+export { DropdownOverlay } from './components/DropdownOverlay/DropdownOverlay';
+export { TextTrigger } from './components/TextTrigger/TextTrigger';
+export { BackAction } from './components/BackAction/BackAction';
+export { BottomAction } from './components/BottomAction/BottomAction';

package/dist/utils/getDropdownWidth.d.ts

@@ -0,0 +1,2 @@
+import { type DropdownSize } from '../Dropdown.types';
+export declare const getDropdownWidth: (size?: DropdownSize | number) => number | null;

package/dist/utils/getDropdownWidth.js

@@ -0,0 +1,18 @@
+export var getDropdownWidth = function getDropdownWidth(size) {
+  if (typeof size === 'number') {
+    return size;
+  }
+  switch (size) {
+    case 'small':
+      return 216;
+    case 'large':
+      return 588;
+    case 'medium':
+      return 282;
+    case 'auto':
+    case 'match-trigger':
+    case 'min-match-trigger':
+    default:
+      return null;
+  }
+};

package/dist/utils/getPlacement.d.ts

@@ -0,0 +1,3 @@
+import { type Placement } from '@floating-ui/react';
+import { type DropdownPlacement } from '../Dropdown.types';
+export declare const getPlacement: (placement: DropdownPlacement) => Placement;

package/dist/utils/getPlacement.js

@@ -0,0 +1,4 @@
+import { PLACEMENT_MAP } from '../Dropdown.const';
+export var getPlacement = function getPlacement(placement) {
+  return PLACEMENT_MAP[placement];
+};

package/dist/utils/getTransitionConfig.d.ts

@@ -0,0 +1,4 @@
+import { type Placement, type UseTransitionStylesProps } from '@floating-ui/react';
+export declare const getTransitionConfig: ({ placement, }: {
+    placement: Placement;
+}) => Partial<UseTransitionStylesProps>;

package/dist/utils/getTransitionConfig.js

@@ -0,0 +1,15 @@
+export var getTransitionConfig = function getTransitionConfig(_ref) {
+  var placement = _ref.placement;
+  var isTop = placement.indexOf('top');
+  return {
+    open: {
+      transform: 'scaleY(1)'
+    },
+    initial: {
+      transform: 'scaleY(0)'
+    },
+    common: {
+      transformOrigin: isTop ? 'top' : 'bottom'
+    }
+  };
+};

package/dist/utils/index.d.ts

@@ -0,0 +1,4 @@
+export * from './getPlacement';
+export * from './getTransitionConfig';
+export * from './isSplitFooter';
+export * from './getDropdownWidth';