@synerise/ds-dropdown 1.3.1 → 1.3.2

package/dist/components/DropdownMenu/DropdownMenu.js

@@ -1,132 +1,85 @@
-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, useEffect, useMemo, useState } from 'react';
-import { useTheme } from '@synerise/ds-core';
-import Icon, { SearchM } from '@synerise/ds-icon';
-import SearchBar from '@synerise/ds-search-bar';
-import { DEFAULT_MATCHING_FUNCTION, MAX_VISIBLE_ITEMS } from '../../Dropdown.const';
-import { useDefaultTexts } from '../../hooks/useDefaultTexts';
-import { DropdownFooter } from '../DropdownFooter/DropdownFooter';
-import { DropdownMenuList } from '../DropdownMenuList/DropdownMenuList';
-import { DropdownPopover } from '../DropdownPopover/DropdownPopover';
-export var DropdownMenu = function DropdownMenu(_ref) {
-  var dataSource = _ref.dataSource,
-    withSearch = _ref.withSearch,
-    texts = _ref.texts,
-    children = _ref.children,
-    _ref$trigger = _ref.trigger,
-    trigger = _ref$trigger === void 0 ? 'click' : _ref$trigger,
-    _ref$placement = _ref.placement,
-    placement = _ref$placement === void 0 ? 'bottomLeft' : _ref$placement,
-    _ref$maxVisibleItems = _ref.maxVisibleItems,
-    maxVisibleItems = _ref$maxVisibleItems === void 0 ? MAX_VISIBLE_ITEMS : _ref$maxVisibleItems,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'auto' : _ref$size,
-    open = _ref.open,
-    onOpenChange = _ref.onOpenChange,
-    onDismiss = _ref.onDismiss,
-    onSearchQueryChange = _ref.onSearchQueryChange,
-    getPopupContainer = _ref.getPopupContainer,
-    virtualised = _ref.virtualised,
-    disabled = _ref.disabled,
-    asChild = _ref.asChild,
-    _ref$hideOnItemClick = _ref.hideOnItemClick,
-    hideOnItemClick = _ref$hideOnItemClick === void 0 ? true : _ref$hideOnItemClick,
-    _ref$itemMatchesSearc = _ref.itemMatchesSearchQuery,
-    itemMatchesSearchQuery = _ref$itemMatchesSearc === void 0 ? DEFAULT_MATCHING_FUNCTION : _ref$itemMatchesSearc,
-    footer = _ref.footer,
-    overlayStyle = _ref.overlayStyle,
-    overlayClassName = _ref.overlayClassName,
-    overlayHTMLAttributes = _ref.overlayHTMLAttributes,
-    popoverProps = _ref.popoverProps,
-    popoverTriggerProps = _ref.popoverTriggerProps;
-  var _useState = useState(null),
-    activeIndex = _useState[0],
-    setActiveIndex = _useState[1];
-  var _useState2 = useState(''),
-    searchQuery = _useState2[0],
-    setSearchQuery = _useState2[1];
-  var _useState3 = useState(open),
-    isOpen = _useState3[0],
-    setIsOpen = _useState3[1];
-  var allTexts = useDefaultTexts(texts);
-  var theme = useTheme();
-  var toggleOpen = useCallback(function (openState) {
-    onOpenChange == null || onOpenChange(openState);
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useState, useCallback, useEffect, useMemo } from "react";
+import { useTheme } from "@synerise/ds-core";
+import Icon, { SearchM } from "@synerise/ds-icon";
+import SearchBar from "@synerise/ds-search-bar";
+import { DEFAULT_MATCHING_FUNCTION, MAX_VISIBLE_ITEMS } from "../../Dropdown.const.js";
+import { useDefaultTexts } from "../../hooks/useDefaultTexts.js";
+import { DropdownFooter } from "../DropdownFooter/DropdownFooter.js";
+import { DropdownMenuList } from "../DropdownMenuList/DropdownMenuList.js";
+import { DropdownPopover } from "../DropdownPopover/DropdownPopover.js";
+const DropdownMenu = ({
+  dataSource,
+  withSearch,
+  texts,
+  children,
+  trigger = "click",
+  placement = "bottomLeft",
+  maxVisibleItems = MAX_VISIBLE_ITEMS,
+  size = "auto",
+  open,
+  onOpenChange,
+  onDismiss,
+  onSearchQueryChange,
+  getPopupContainer,
+  virtualised,
+  disabled,
+  asChild,
+  hideOnItemClick = true,
+  itemMatchesSearchQuery = DEFAULT_MATCHING_FUNCTION,
+  footer,
+  overlayStyle,
+  overlayClassName,
+  overlayHTMLAttributes,
+  popoverProps,
+  popoverTriggerProps
+}) => {
+  const [activeIndex, setActiveIndex] = useState(null);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [isOpen, setIsOpen] = useState(open);
+  const allTexts = useDefaultTexts(texts);
+  const theme = useTheme();
+  const toggleOpen = useCallback((openState) => {
+    onOpenChange?.(openState);
     setIsOpen(openState);
   }, [onOpenChange]);
-  useEffect(function () {
-    if (open !== undefined) {
+  useEffect(() => {
+    if (open !== void 0) {
       setIsOpen(open);
     }
   }, [open, toggleOpen]);
-  var handleSearchChange = useCallback(function (query) {
-    onSearchQueryChange == null || onSearchQueryChange(query);
+  const handleSearchChange = useCallback((query) => {
+    onSearchQueryChange?.(query);
     setSearchQuery(query);
   }, [onSearchQueryChange]);
-  var filteredItems = useMemo(function () {
-    return searchQuery ? dataSource.filter(function (item) {
-      return itemMatchesSearchQuery(item, searchQuery);
-    }).map(function (item) {
-      var props = _extends({}, item, {
+  const filteredItems = useMemo(() => {
+    return searchQuery ? dataSource.filter((item) => itemMatchesSearchQuery(item, searchQuery)).map((item) => {
+      const props = {
+        ...item,
         highlight: searchQuery
-      });
+      };
       return props;
     }) : dataSource;
   }, [dataSource, itemMatchesSearchQuery, searchQuery]);
-  var handleSearchFocus = useCallback(function (ref) {
-    setTimeout(function () {
-      var _ref$current;
-      activeIndex != null ? activeIndex : ref == null || (_ref$current = ref.current) == null ? void 0 : _ref$current.focus();
+  const handleSearchFocus = useCallback((ref) => {
+    setTimeout(() => {
+      activeIndex ?? ref?.current?.focus();
     }, 10);
   }, [activeIndex]);
-  var overlay = useMemo(function () {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, withSearch && /*#__PURE__*/React.createElement(SearchBar, {
-      placeholder: allTexts.searchPlaceholder,
-      value: searchQuery,
-      handleInputRef: handleSearchFocus,
-      onSearchChange: handleSearchChange,
-      iconLeft: /*#__PURE__*/React.createElement(Icon, {
-        component: /*#__PURE__*/React.createElement(SearchM, null),
-        color: theme.palette['grey-600']
-      }),
-      onClearInput: function onClearInput() {
-        return setSearchQuery('');
-      },
-      clearTooltip: allTexts.searchClearTooltip
-    }), /*#__PURE__*/React.createElement(DropdownMenuList, {
-      maxVisibleItems: maxVisibleItems,
-      hideOnItemClick: hideOnItemClick,
-      dataSource: filteredItems,
-      closeOverlay: function closeOverlay() {
-        return toggleOpen(false);
-      },
-      texts: allTexts,
-      virtualised: virtualised
-    }), footer && /*#__PURE__*/React.createElement(DropdownFooter, {
-      footer: footer
-    }));
+  const overlay = useMemo(() => {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      withSearch && /* @__PURE__ */ jsx(SearchBar, { placeholder: allTexts.searchPlaceholder, value: searchQuery, handleInputRef: handleSearchFocus, onSearchChange: handleSearchChange, iconLeft: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(SearchM, {}), color: theme.palette["grey-600"] }), onClearInput: () => setSearchQuery(""), clearTooltip: allTexts.searchClearTooltip }),
+      /* @__PURE__ */ jsx(DropdownMenuList, { maxVisibleItems, hideOnItemClick, dataSource: filteredItems, closeOverlay: () => toggleOpen(false), texts: allTexts, virtualised }),
+      footer && /* @__PURE__ */ jsx(DropdownFooter, { footer })
+    ] });
   }, [withSearch, allTexts, searchQuery, handleSearchFocus, handleSearchChange, theme.palette, maxVisibleItems, hideOnItemClick, filteredItems, virtualised, footer, toggleOpen]);
-  return disabled || dataSource.length === 0 ? /*#__PURE__*/React.createElement(React.Fragment, null, children) : /*#__PURE__*/React.createElement(DropdownPopover, {
-    getPopupContainer: getPopupContainer,
-    overlayHTMLAttributes: overlayHTMLAttributes,
-    overlayStyle: overlayStyle,
-    overlayClassName: overlayClassName,
-    trigger: trigger,
-    open: isOpen,
-    size: size,
-    placement: placement,
-    asChild: asChild,
-    onDismiss: onDismiss,
-    overlay: overlay,
-    handleOpenChange: toggleOpen,
-    handleTriggerClick: function handleTriggerClick() {
-      toggleOpen(!isOpen);
-    },
-    activeIndex: activeIndex,
-    setActiveIndex: setActiveIndex,
-    popoverProps: _extends({}, popoverProps, {
-      componentId: 'dropdown-menu'
-    }),
-    popoverTriggerProps: popoverTriggerProps
-  }, children);
-};
+  return disabled || dataSource.length === 0 ? /* @__PURE__ */ jsx(Fragment, { children }) : /* @__PURE__ */ jsx(DropdownPopover, { getPopupContainer, overlayHTMLAttributes, overlayStyle, overlayClassName, trigger, open: isOpen, size, placement, asChild, onDismiss, overlay, handleOpenChange: toggleOpen, handleTriggerClick: () => {
+    toggleOpen(!isOpen);
+  }, activeIndex, setActiveIndex, popoverProps: {
+    ...popoverProps,
+    componentId: "dropdown-menu"
+  }, popoverTriggerProps, children });
+};
+export {
+  DropdownMenu
+};

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

@@ -1,6 +1,6 @@
-import type { ReactNode } from 'react';
-import type { ListItemProps } from '@synerise/ds-list-item';
-import { type DropdownSharedProps } from '../../Dropdown.types';
+import { ReactNode } from 'react';
+import { ListItemProps } from '@synerise/ds-list-item';
+import { DropdownSharedProps } from '../../Dropdown.types';
 export type DropdownMenuTexts = {
     searchPlaceholder: string;
     noSearchResults: ReactNode;

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

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

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

@@ -1,4 +1,4 @@
-import React from 'react';
-import { type ListItemProps } from '@synerise/ds-list-item';
-import { type DropdownMenuListProps } from './DropdownMenuList.types';
+import { default as React } from 'react';
+import { ListItemProps } from '@synerise/ds-list-item';
+import { 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

@@ -1,84 +1,70 @@
-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'];
+import { jsx, Fragment } from "react/jsx-runtime";
+import { 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.js";
+import { ScrollableMenuWrapper, DropdownMenuList as DropdownMenuList$1, DropdownMenuListItem, EmptyStates } from "./DropdownMenuList.styles.js";
+const DropdownMenuList = ({
+  dataSource,
+  maxVisibleItems = MAX_VISIBLE_ITEMS,
+  hideOnItemClick,
+  virtualised,
+  closeOverlay,
+  texts
+}) => {
+  const getItemSize = useCallback((index) => {
+    return dataSource[index].type === "divider" ? 17 : LIST_ITEM_SIZE_MAPPING[dataSource[index].size || "default"];
   }, [dataSource]);
-  var handleItemClick = useCallback(function () {
+  const handleItemClick = useCallback(() => {
     if (hideOnItemClick) {
-      setTimeout(function () {
+      setTimeout(() => {
         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();
+  const {
+    listHeight,
+    listMaxHeight
+  } = useMemo(() => {
+    let height = 0;
+    let maxHeight = 0;
+    let visibleItems = 0;
+    dataSource.forEach((item, index) => {
+      const itemHeight = getItemSize(index);
+      height += itemHeight;
+      if (visibleItems < maxVisibleItems) {
+        maxHeight += itemHeight;
       }
-    }));
-  }) : /*#__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();
+      if (item.type !== "divider") {
+        visibleItems += 1;
       }
-    }));
-  })))) : /*#__PURE__*/React.createElement(S.EmptyStates, {
-    iconPosition: "top",
-    customIcon: /*#__PURE__*/React.createElement(SearchNoResultsL, null),
-    label: texts.noSearchResults
-  }));
-};
+    });
+    return {
+      listHeight: height,
+      listMaxHeight: maxHeight
+    };
+  }, [dataSource, getItemSize, maxVisibleItems]);
+  return /* @__PURE__ */ jsx(ScrollableMenuWrapper, { children: dataSource.length ? /* @__PURE__ */ jsx(Scrollbar, { absolute: true, maxHeight: listMaxHeight + SCROLLBAR_OFFSET, children: /* @__PURE__ */ jsx(DropdownMenuList$1, { children: virtualised ? /* @__PURE__ */ jsx(VariableSizeList, { height: listHeight, itemData: dataSource, itemCount: dataSource.length, itemSize: getItemSize, width: "100%", style: {
+    paddingRight: "8px"
+  }, children: (listItemData) => {
+    const {
+      data,
+      index
+    } = listItemData;
+    const item = data[index];
+    return item.type === "divider" ? /* @__PURE__ */ jsx(DropdownMenuListItem, { ...item }) : /* @__PURE__ */ jsx(DropdownMenuListItem, { ...item, itemKey: item.key, onClick: (itemData) => {
+      item.onClick?.(itemData);
+      handleItemClick();
+    } });
+  } }) : /* @__PURE__ */ jsx(Fragment, { children: dataSource.map((item) => {
+    return item.type === "divider" ? /* @__PURE__ */ jsx(DropdownMenuListItem, { ...item }) : /* @__PURE__ */ jsx(DropdownMenuListItem, { ...item, itemKey: item.key, onClick: (itemData) => {
+      item.onClick?.(itemData);
+      handleItemClick();
+    } });
+  }) }) }) }) : /* @__PURE__ */ jsx(EmptyStates, { iconPosition: "top", customIcon: /* @__PURE__ */ jsx(SearchNoResultsL, {}), label: texts.noSearchResults }) });
+};
+export {
+  DropdownMenuList
+};

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

@@ -1,6 +1,6 @@
-import { type StyledListItem } from '@synerise/ds-list-item';
-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>;
+import { StyledListItem } from '@synerise/ds-list-item';
+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: StyledListItem;
-export declare const DropdownMenuList: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const DropdownMenuList: import('styled-components').StyledComponent<"div", any, {}, never>;

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

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

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

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

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

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

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

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

package/dist/components/DropdownOverlay/DropdownOverlay.js

@@ -1,73 +1,65 @@
-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')) {
+import { jsx } from "react/jsx-runtime";
+import classnames from "classnames";
+import { forwardRef, useRef, useState, useEffect } from "react";
+import { useMergeRefs } from "@floating-ui/react";
+import { getDropdownWidth } from "../../utils/getDropdownWidth.js";
+import { OverlayWrapper } from "./DropdownOverlay.styles.js";
+const DropdownOverlay = forwardRef(({
+  content,
+  size,
+  overlayStyle,
+  overlayClassName,
+  htmlAttributes,
+  hideOnItemClick,
+  handleItemClick,
+  triggerRef
+}, ref) => {
+  const overlayWrapperRef = useRef(null);
+  const mergedRef = useMergeRefs([overlayWrapperRef, ref]);
+  const [overlaySize, setOverlaySize] = useState(getDropdownWidth(size) ?? 0);
+  useEffect(() => {
+    if (triggerRef.current && (size === "match-trigger" || size === "min-match-trigger")) {
       setOverlaySize(triggerRef.current.clientWidth);
     } else {
-      var _getDropdownWidth2;
-      setOverlaySize((_getDropdownWidth2 = getDropdownWidth(size)) != null ? _getDropdownWidth2 : 0);
+      setOverlaySize(getDropdownWidth(size) ?? 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();
+  useEffect(() => {
+    const handleItemSelect = (element) => {
+      const itemSelector = typeof hideOnItemClick === "string" ? hideOnItemClick : '[role="menuitem"]';
+      const listItem = element.closest(itemSelector);
+      if (overlayWrapperRef.current?.contains(listItem)) {
+        setTimeout(() => {
+          handleItemClick?.();
         }, 0);
       }
     };
-    var handleOverlayClick = function handleOverlayClick(event) {
-      if (overlayWrapperRef.current && typeof hideOnItemClick === 'string' && event.target instanceof HTMLElement) {
+    const 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) {
+    const handleItemEnterPress = (event) => {
+      if (event.key === "Enter") {
+        if (overlayWrapperRef.current && typeof hideOnItemClick === "string" && event.target instanceof HTMLElement) {
           handleItemSelect(event.target);
         }
       }
     };
-    var overlayNode = overlayWrapperRef.current;
+    const overlayNode = overlayWrapperRef.current;
     if (overlayNode) {
-      overlayNode.addEventListener('click', handleOverlayClick);
-      overlayNode.addEventListener('keydown', handleItemEnterPress);
+      overlayNode.addEventListener("click", handleOverlayClick);
+      overlayNode.addEventListener("keydown", handleItemEnterPress);
     }
-    return function () {
+    return () => {
       if (overlayNode) {
-        overlayNode.removeEventListener('click', handleOverlayClick);
-        overlayNode.removeEventListener('keydown', handleItemEnterPress);
+        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);
-});
+  return /* @__PURE__ */ jsx(OverlayWrapper, { style: overlayStyle, className: classnames(overlayClassName, htmlAttributes?.className), $width: overlaySize, widthProperty: size === "min-match-trigger" ? "min-width" : "width", ref: mergedRef, ...htmlAttributes, children: content });
+});
+export {
+  DropdownOverlay
+};

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

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

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

@@ -1,12 +1,9 @@
-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({
+import styled from "styled-components";
+import { Wrapper } from "@synerise/ds-list-item/dist/components/Text/Text.styles";
+const OverlayWrapper = /* @__PURE__ */ 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);
+})(["background:", ";box-shadow:", ";border-radius:3px;", ";overflow:hidden;", "{min-width:0;}"], (props) => props.theme.palette.white, (props) => props.theme.variables["box-shadow-2"], (props) => props.$width && `${props.widthProperty}: ${props.$width}px`, Wrapper);
+export {
+  OverlayWrapper
+};

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

@@ -1,5 +1,5 @@
-import { type HTMLAttributes, type ReactNode, type RefObject } from 'react';
-import { type DropdownProps } from '../../Dropdown.types';
+import { HTMLAttributes, ReactNode, RefObject } from 'react';
+import { DropdownProps } from '../../Dropdown.types';
 export type DropdownOverlayProps = Pick<DropdownProps, 'size' | 'overlayStyle' | 'hideOnItemClick' | 'overlayClassName'> & {
     content: ReactNode;
     triggerRef: RefObject<HTMLElement>;

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

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

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

@@ -1,3 +1,3 @@
-import React from 'react';
-import { type DropdownPopoverProps } from './DropdownPopover.types';
+import { default as React } from 'react';
+import { 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;