@algolia/satellite 1.1.0 → 1.1.1

package/dist/esm/Navigation/Stepper/Stepper.js

@@ -0,0 +1,138 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _templateObject;
+var _excluded = ["steps", "activeStep", "onStepChange", "size", "connectors", "locale", "className"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import cx from "clsx";
+import { useRef, useState } from "react";
+import { useLocale } from "../../Satellite";
+import stl from "../../styles/helpers/satellitePrefixer";
+import { Step } from "./Step";
+import { StepperContext } from "./StepperContext";
+import { useStepIndices } from "./utils";
+import { jsx as _jsx } from "react/jsx-runtime";
+var DEFAULT_TAG_LOCALE = {
+  disabledStep: function disabledStep(stepName) {
+    return "".concat(stepName, " disabled");
+  },
+  activeStep: function activeStep(stepName) {
+    return "".concat(stepName, " active");
+  },
+  incompletedStep: function incompletedStep(stepName) {
+    return "".concat(stepName, " incompleted");
+  },
+  completedStep: function completedStep(stepName) {
+    return "".concat(stepName, " completed");
+  }
+};
+export var Stepper = function Stepper(_ref) {
+  var steps = _ref.steps,
+    customActiveStep = _ref.activeStep,
+    _onStepChange = _ref.onStepChange,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? "default" : _ref$size,
+    _ref$connectors = _ref.connectors,
+    connectors = _ref$connectors === void 0 ? true : _ref$connectors,
+    propsLocale = _ref.locale,
+    className = _ref.className,
+    props = _objectWithoutProperties(_ref, _excluded);
+  if (process.env.NODE_ENV !== "production") {
+    var stepsNb = steps.length;
+    if (stepsNb < 2) {
+      console.warn("The Stepper component should have at least 2 steps.");
+    }
+    if (stepsNb > 6) {
+      console.warn("The Stepper component should not have more than 6 steps.");
+    }
+  }
+  var contextLocale = useLocale("stepper");
+  var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_TAG_LOCALE), contextLocale), propsLocale);
+  var isControlled = typeof customActiveStep !== "undefined";
+  var _useState = useState(customActiveStep || 0),
+    _useState2 = _slicedToArray(_useState, 2),
+    activeStep = _useState2[0],
+    setActiveStep = _useState2[1];
+  if (isControlled && activeStep !== customActiveStep) {
+    setActiveStep(customActiveStep);
+  }
+  var containerRef = useRef(null);
+  var _useState3 = useState(customActiveStep || 0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    focusedStep = _useState4[0],
+    setFocusedStep = _useState4[1];
+  var _useStepIndices = useStepIndices(steps, focusedStep, true),
+    _useStepIndices2 = _slicedToArray(_useStepIndices, 4),
+    getPreviousFocusStep = _useStepIndices2[0],
+    getNextFocusStep = _useStepIndices2[1],
+    getFirstFocusStep = _useStepIndices2[2],
+    getLastFocusStep = _useStepIndices2[3];
+  var focusStep = function focusStep(index) {
+    var _containerRef$current;
+    if (index === -1) return;
+    (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 || (_containerRef$current = _containerRef$current.querySelector("[data-step-idx='".concat(index, "']"))) === null || _containerRef$current === void 0 || _containerRef$current.focus();
+    setFocusedStep(index);
+  };
+  return /*#__PURE__*/_jsx(StepperContext.Provider, {
+    value: {
+      activeStep: activeStep,
+      focusedStep: focusedStep,
+      size: size,
+      connectors: connectors,
+      locale: locale,
+      onStepChange: function onStepChange(index) {
+        if (!isControlled) {
+          setActiveStep(index);
+        }
+        _onStepChange === null || _onStepChange === void 0 || _onStepChange(index);
+        setFocusedStep(index);
+      }
+    },
+    children: /*#__PURE__*/_jsx("nav", _objectSpread(_objectSpread({
+      "aria-label": "progress"
+    }, props), {}, {
+      className: cx(className),
+      children: /*#__PURE__*/_jsx("ol", {
+        role: "presentation",
+        className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["flex flex-col isolate"]))),
+        ref: containerRef,
+        onFocus: function onFocus() {
+          setFocusedStep(activeStep);
+        },
+        onKeyDown: function onKeyDown(event) {
+          switch (event.key) {
+            case "ArrowLeft":
+            case "ArrowUp":
+              {
+                focusStep(getPreviousFocusStep());
+                break;
+              }
+            case "ArrowRight":
+            case "ArrowDown":
+              {
+                focusStep(getNextFocusStep());
+                break;
+              }
+            case "Home":
+              {
+                focusStep(getFirstFocusStep());
+                break;
+              }
+            case "End":
+              {
+                focusStep(getLastFocusStep());
+                break;
+              }
+          }
+        },
+        children: steps.map(function (step, index) {
+          return /*#__PURE__*/_jsx(Step, _objectSpread({
+            index: index
+          }, step), index);
+        })
+      })
+    }))
+  });
+};

package/dist/esm/Navigation/Stepper/types.d.ts

@@ -0,0 +1,26 @@
+import type { ReactNode } from "react";
+import type { IconComponentType } from "../../Icons";
+export declare type BaseStep = {
+    /**
+     * Defines the icon to display in the step.
+     * If omitted, the `index + 1` of the step will be displayed instead.
+     * If the step is completed, a check icon will be displayed instead.
+     */
+    icon?: IconComponentType;
+    /**
+     * Defines the label to display in the step.
+     */
+    label?: ReactNode;
+    /**
+     * Defines the name to display in the step.
+     */
+    name: ReactNode;
+    /**
+     * Defines whether the step is completed.
+     */
+    completed?: boolean;
+    /**
+     * Defines whether the step is disabled.
+     */
+    disabled?: boolean;
+};

package/dist/esm/Navigation/Tabs/ContentTabs/ContentTabs.d.ts

@@ -0,0 +1,3 @@
+import type { VFC } from "react";
+import type { ContentTabsProps } from "../types";
+export declare const ContentTabs: VFC<ContentTabsProps>;

package/dist/esm/Navigation/Tabs/ContentTabs/ContentTabs.js

@@ -0,0 +1,53 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@radix-ui/react-tabs";
+import cx from "clsx";
+import { Badge } from "../../../Indicators";
+import stl from "../../../styles/helpers/satellitePrefixer";
+import { ACTIVE_UNDERLINE_VARIANT_CLASSNAMES } from "../utils";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export var ContentTabs = function ContentTabs(_ref) {
+  var className = _ref.className,
+    tabs = _ref.tabs,
+    tabIndex = _ref.tabIndex,
+    _ref$defaultIndex = _ref.defaultIndex,
+    defaultIndex = _ref$defaultIndex === void 0 ? 0 : _ref$defaultIndex,
+    onChange = _ref.onChange;
+  return /*#__PURE__*/_jsxs(Tabs, {
+    value: typeof tabIndex !== "undefined" ? String(tabIndex) : undefined,
+    defaultValue: typeof defaultIndex !== "undefined" ? String(defaultIndex) : undefined,
+    onValueChange: function onValueChange(value) {
+      return onChange === null || onChange === void 0 ? void 0 : onChange(Number(value));
+    },
+    children: [/*#__PURE__*/_jsx(TabsList, {
+      className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["tabs-tabbar border-b border-grey-200 flex overflow-x-auto whitespace-nowrap space-x-6"]))), className),
+      children: tabs.map(function (_ref2, index) {
+        var _ref2$variant = _ref2.variant,
+          variant = _ref2$variant === void 0 ? "accent" : _ref2$variant,
+          className = _ref2.className,
+          disabled = _ref2.disabled,
+          label = _ref2.label,
+          value = _ref2.value;
+        return /*#__PURE__*/_jsxs(TabsTrigger, {
+          value: String(index),
+          disabled: disabled,
+          className: cx(ACTIVE_UNDERLINE_VARIANT_CLASSNAMES[variant], stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["tab pb-3 text-base leading-sm"]))), className),
+          children: [label, !!value && /*#__PURE__*/_jsx(Badge, {
+            size: "small",
+            variant: variant,
+            className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["ml-2"]))),
+            children: value
+          })]
+        }, index);
+      })
+    }), tabs.map(function (_ref3, index) {
+      var content = _ref3.content;
+      return /*#__PURE__*/_jsx(TabsContent, {
+        value: String(index),
+        className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["focus:outline-none"]))),
+        children: content
+      }, index);
+    })]
+  });
+};

package/dist/esm/Navigation/Tabs/LinkTabs/LinkTabs.d.ts

@@ -0,0 +1,9 @@
+import type { VFC } from "react";
+import type { LinkTabsProps, UrlMatcher } from "../types";
+export declare const defaultUrlMatcher: UrlMatcher;
+/**
+ * The `LinkTabs` component is an easy way to organize content by grouping similar information on the same page. Use it to help users navigate between related views within the same context, especially when the number of views may be more than 3.
+ *
+ * See the [Tabs documentation page](https://satellite.algolia.com/components/navigation/tabs) for more information.
+ */
+export declare const LinkTabs: VFC<LinkTabsProps>;

package/dist/esm/Navigation/Tabs/LinkTabs/LinkTabs.js

@@ -0,0 +1,44 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject;
+import cx from "clsx";
+import useLocation from "react-use/lib/useLocation";
+import stl from "../../../styles/helpers/satellitePrefixer";
+import { matchLocation } from "../../../utils/matchLocation";
+import { LinkTab } from "../components/LinkTab";
+import { jsx as _jsx } from "react/jsx-runtime";
+export var defaultUrlMatcher = function defaultUrlMatcher(tab, location) {
+  return matchLocation(tab.to, {
+    pathname: location.pathname || ""
+  });
+};
+
+/**
+ * The `LinkTabs` component is an easy way to organize content by grouping similar information on the same page. Use it to help users navigate between related views within the same context, especially when the number of views may be more than 3.
+ *
+ * See the [Tabs documentation page](https://satellite.algolia.com/components/navigation/tabs) for more information.
+ */
+export var LinkTabs = function LinkTabs(_ref) {
+  var className = _ref.className,
+    tabs = _ref.tabs,
+    onTabClick = _ref.onTabClick,
+    _ref$urlMatcher = _ref.urlMatcher,
+    urlMatcher = _ref$urlMatcher === void 0 ? defaultUrlMatcher : _ref$urlMatcher;
+  var location = useLocation();
+  var tabIndex = tabs.findIndex(function (tab) {
+    return urlMatcher(tab, location);
+  });
+  tabIndex = tabIndex === -1 ? 0 : tabIndex;
+  return /*#__PURE__*/_jsx("nav", {
+    role: "tablist",
+    className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["tabs-tabbar border-b border-grey-200 flex overflow-x-auto whitespace-nowrap space-x-6"]))), className),
+    children: tabs.map(function (tab, index) {
+      return /*#__PURE__*/_jsx(LinkTab, {
+        tab: tab,
+        selected: index === tabIndex,
+        onClick: function onClick(evt) {
+          return onTabClick === null || onTabClick === void 0 ? void 0 : onTabClick(evt, tab);
+        }
+      }, tab.to);
+    })
+  });
+};

package/dist/esm/Navigation/Tabs/components/LinkTab.js

@@ -0,0 +1,77 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject, _templateObject2;
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import cx from "clsx";
+import { Badge } from "../../../Indicators";
+import stl from "../../../styles/helpers/satellitePrefixer";
+import { useLinkProps } from "../../../utils/useLinkProps";
+import { ACTIVE_UNDERLINE_VARIANT_CLASSNAMES } from "../utils";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var getNextNonDisabledSibling = function getNextNonDisabledSibling(el) {
+  var _ref;
+  if (!el) return null;
+  var next = el;
+  do {
+    var _next, _next$nextElementSibl, _next2, _next3;
+    next = (_next$nextElementSibl = (_next2 = next) === null || _next2 === void 0 ? void 0 : _next2.nextElementSibling) !== null && _next$nextElementSibl !== void 0 ? _next$nextElementSibl : (_next3 = next) === null || _next3 === void 0 || (_next3 = _next3.parentElement) === null || _next3 === void 0 ? void 0 : _next3.firstElementChild;
+  } while ((_next = next) !== null && _next !== void 0 && _next.getAttribute("aria-disabled"));
+  return (_ref = next) !== null && _ref !== void 0 ? _ref : null;
+};
+var getPreviousNonDisabledSibling = function getPreviousNonDisabledSibling(el) {
+  var _ref2;
+  if (!el) return null;
+  var next = el;
+  do {
+    var _next4, _next$previousElement, _next5, _next6;
+    next = (_next$previousElement = (_next5 = next) === null || _next5 === void 0 ? void 0 : _next5.previousElementSibling) !== null && _next$previousElement !== void 0 ? _next$previousElement : (_next6 = next) === null || _next6 === void 0 || (_next6 = _next6.parentElement) === null || _next6 === void 0 ? void 0 : _next6.lastElementChild;
+  } while ((_next4 = next) !== null && _next4 !== void 0 && _next4.getAttribute("aria-disabled"));
+  return (_ref2 = next) !== null && _ref2 !== void 0 ? _ref2 : null;
+};
+export var LinkTab = function LinkTab(_ref3) {
+  var tab = _ref3.tab,
+    _onClick = _ref3.onClick,
+    selected = _ref3.selected;
+  var variant = tab.variant || "accent";
+  var selectionProps = selected ? {
+    "aria-selected": true,
+    tabIndex: 0
+  } : {
+    "aria-selected": false,
+    tabIndex: -1
+  };
+  var linkProps = useLinkProps({
+    href: tab.to,
+    disabled: tab.disabled,
+    onClick: function onClick(evt) {
+      if (_onClick) {
+        _onClick(evt);
+      }
+    }
+  });
+  return /*#__PURE__*/_jsxs("a", _objectSpread(_objectSpread(_objectSpread({}, linkProps), selectionProps), {}, {
+    id: tab.id,
+    role: "tab",
+    className: cx(ACTIVE_UNDERLINE_VARIANT_CLASSNAMES[variant], stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["tab pb-3 text-base leading-sm hover:no-underline"]))), tab.className),
+    onKeyDown: function onKeyDown(evt) {
+      if (tab.disabled) return;
+      if (evt.key === "ArrowRight") {
+        var nextElement = getNextNonDisabledSibling(evt.currentTarget);
+        nextElement === null || nextElement === void 0 || nextElement.click();
+        nextElement === null || nextElement === void 0 || nextElement.focus();
+      } else if (evt.key === "ArrowLeft") {
+        var previousElement = getPreviousNonDisabledSibling(evt.currentTarget);
+        previousElement === null || previousElement === void 0 || previousElement.click();
+        previousElement === null || previousElement === void 0 || previousElement.focus();
+      }
+    },
+    children: [tab.label, !!tab.value && /*#__PURE__*/_jsx(Badge, {
+      size: "small",
+      variant: variant,
+      className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["ml-2 text-grey-600"]))),
+      children: tab.value
+    })]
+  }));
+};

package/dist/esm/Navigation/Tabs/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./LinkTabs/LinkTabs";
+export * from "./ContentTabs/ContentTabs";
+export * from "./types";

package/dist/esm/Navigation/Tabs/index.js

@@ -0,0 +1,3 @@
+export * from "./LinkTabs/LinkTabs";
+export * from "./ContentTabs/ContentTabs";
+export * from "./types";

package/dist/esm/Navigation/Tabs/types.d.ts

@@ -0,0 +1,34 @@
+import type { MouseEvent, ReactNode } from "react";
+import type { LocationSensorState } from "react-use/lib/useLocation";
+import type { ColorVariant } from "../../types";
+export interface BaseTab {
+    id?: string;
+    label: ReactNode;
+    variant?: ColorVariant;
+    disabled?: boolean;
+    value?: string;
+    /** @ignore */
+    className?: string;
+}
+export declare type UrlMatcher = (tab: LinkTab, location: LocationSensorState) => boolean;
+export interface LinkTab extends BaseTab {
+    to: string;
+}
+export interface LinkTabsProps {
+    /** @ignore */
+    className?: string;
+    tabs: LinkTab[];
+    onTabClick?(event: MouseEvent<HTMLAnchorElement>, tab: LinkTab): void;
+    urlMatcher?: UrlMatcher;
+}
+export interface ContentTab extends BaseTab {
+    content: ReactNode;
+}
+export interface ContentTabsProps {
+    /** @ignore */
+    className?: string;
+    tabs: ContentTab[];
+    tabIndex?: number;
+    defaultIndex?: number;
+    onChange?: (tabIndex: number) => void;
+}

package/dist/esm/Navigation/Tabs/utils.d.ts

@@ -0,0 +1,2 @@
+import type { ColorVariant } from "../../types";
+export declare const ACTIVE_UNDERLINE_VARIANT_CLASSNAMES: Record<ColorVariant, string>;

package/dist/esm/Navigation/Tabs/utils.js

@@ -0,0 +1,11 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+import stl from "../../styles/helpers/satellitePrefixer";
+export var ACTIVE_UNDERLINE_VARIANT_CLASSNAMES = {
+  grey: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["tab-grey"]))),
+  accent: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["tab-accent"]))),
+  green: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["tab-green"]))),
+  blue: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["tab-blue"]))),
+  orange: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["tab-orange"]))),
+  red: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["tab-red"])))
+};

package/dist/esm/Navigation/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./Link";
+export * from "./Pagination";
+export * from "./Tabs";
+export * from "./Stepper";

package/dist/esm/Navigation/index.js

@@ -0,0 +1,4 @@
+export * from "./Link";
+export * from "./Pagination";
+export * from "./Tabs";
+export * from "./Stepper";

package/dist/esm/Overlay/Dropdown/Dropdown.js

@@ -0,0 +1,118 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+var _templateObject, _templateObject2, _templateObject3;
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import cx from "clsx";
+import { useState } from "react";
+import { usePopper } from "react-popper";
+import { ClickAwayContainer } from "../../Helpers";
+import { Card } from "../../Layout";
+import { useCreatePortal } from "../../Satellite";
+import stl from "../../styles/helpers/satellitePrefixer";
+import { DropdownButtonItem } from "./components/DropdownButtonItem";
+import { DropdownCollapsibleItem, DropdownCollapsibleItemsSingleGroup } from "./components/DropdownCollapsibleItem";
+import { DropdownDivider } from "./components/DropdownDivider";
+import { DropdownFooterItem } from "./components/DropdownFooterItem";
+import { DropdownLinkItem } from "./components/DropdownLinkItem";
+import { DropdownRadioItem } from "./components/DropdownRadioItem";
+import { DropdownTitle } from "./components/DropdownTitle";
+import { DropdownToggleItem } from "./components/DropdownToggleItem";
+import { DropdownContext } from "./DropdownContext";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var DEFAULT_DROPDOWN_POPPER_MODIFIERS = [{
+  name: "offset",
+  options: {
+    offset: [0, 16]
+  }
+}];
+var _Dropdown = function _Dropdown(_ref) {
+  var _renderFooter;
+  var _ref$placement = _ref.placement,
+    placement = _ref$placement === void 0 ? "bottom-start" : _ref$placement,
+    menuClassName = _ref.menuClassName,
+    _ref$modifiers = _ref.modifiers,
+    modifiers = _ref$modifiers === void 0 ? [] : _ref$modifiers,
+    renderTarget = _ref.renderTarget,
+    renderFooter = _ref.renderFooter,
+    children = _ref.children;
+  var createPortal = useCreatePortal();
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    showMenu = _useState2[0],
+    setShowMenu = _useState2[1];
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    targetEl = _useState4[0],
+    setTargetEl = _useState4[1];
+  var _useState5 = useState(null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    menuContainerEl = _useState6[0],
+    setMenuContainerEl = _useState6[1];
+  var _usePopper = usePopper(targetEl, menuContainerEl, {
+      modifiers: [].concat(DEFAULT_DROPDOWN_POPPER_MODIFIERS, _toConsumableArray(modifiers)),
+      placement: placement,
+      strategy: "fixed"
+    }),
+    styles = _usePopper.styles,
+    attributes = _usePopper.attributes;
+  var target = renderTarget({
+    toggle: function toggle(open) {
+      return setShowMenu(open === undefined ? !showMenu : open);
+    },
+    isShowingMenu: showMenu
+  });
+  var footer = (_renderFooter = renderFooter === null || renderFooter === void 0 ? void 0 : renderFooter({
+    toggle: function toggle(open) {
+      return setShowMenu(open === undefined ? !showMenu : open);
+    },
+    isShowingMenu: showMenu
+  })) !== null && _renderFooter !== void 0 ? _renderFooter : null;
+  return /*#__PURE__*/_jsx(DropdownContext.Provider, {
+    value: {
+      showMenu: setShowMenu
+    },
+    children: /*#__PURE__*/_jsxs(DropdownCollapsibleItemsSingleGroup, {
+      children: [/*#__PURE__*/_jsx("span", {
+        className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["inline-block leading-none"]))),
+        ref: setTargetEl,
+        children: target
+      }), showMenu && targetEl && createPortal( /*#__PURE__*/_jsx(ClickAwayContainer, {
+        element: menuContainerEl,
+        onClickAway: function onClickAway(evt) {
+          var isContainedInTarget = targetEl === null || targetEl === void 0 ? void 0 : targetEl.contains(evt.target);
+          if (!isContainedInTarget) {
+            setShowMenu(false);
+          }
+        },
+        children: /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({}, attributes.popper), {}, {
+          style: styles.popper,
+          className: cx(stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["z-dropdown min-w-64 max-w-128"]))), menuClassName),
+          ref: setMenuContainerEl,
+          children: /*#__PURE__*/_jsxs(Card, {
+            fullBleed: true,
+            elevation: "300",
+            className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["flex flex-col py-1 text-grey-900"]))),
+            children: [children, footer ? /*#__PURE__*/_jsx(DropdownFooterItem, {
+              children: footer
+            }) : null]
+          })
+        }))
+      }))]
+    })
+  });
+};
+_Dropdown.ButtonItem = DropdownButtonItem;
+_Dropdown.LinkItem = DropdownLinkItem;
+_Dropdown.RadioItem = DropdownRadioItem;
+_Dropdown.ToggleItem = DropdownToggleItem;
+_Dropdown.CollapsibleItem = DropdownCollapsibleItem;
+_Dropdown.FooterItem = DropdownFooterItem;
+_Dropdown.Divider = DropdownDivider;
+_Dropdown.Title = DropdownTitle;
+
+/** @deprecated use `MenuButton` instead */
+export var Dropdown = _Dropdown;

package/dist/esm/Overlay/Dropdown/DropdownButton.d.ts

@@ -0,0 +1,13 @@
+import type { ReactNode } from "react";
+import type { ButtonProps } from "../../Actions";
+import type { RenderTargetParams } from "./Dropdown";
+export interface DropdownButtonProps extends Omit<ButtonProps, "title" | "endIcon"> {
+    /** Descriptive title for `Dropdown` */
+    title: ReactNode;
+    renderFooter?: (args: RenderTargetParams) => ReactNode;
+    children: ReactNode;
+}
+/**
+ * @deprecated use `MenuButton` instead
+ */
+export declare const DropdownButton: import("react").ForwardRefExoticComponent<DropdownButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/esm/Overlay/Dropdown/DropdownButton.js

@@ -0,0 +1,42 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children", "title", "renderFooter"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { forwardRef } from "react";
+import { Button } from "../../Actions";
+import { ChevronDownIcon } from "../../Icons";
+import { Dropdown } from "./Dropdown";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @deprecated use `MenuButton` instead
+ */
+export var DropdownButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    title = _ref.title,
+    renderFooter = _ref.renderFooter,
+    buttonProps = _objectWithoutProperties(_ref, _excluded);
+  var renderButton = function renderButton(_ref2) {
+    var toggle = _ref2.toggle;
+    var handleClick = function handleClick(evt) {
+      if (buttonProps.onClick) {
+        buttonProps.onClick(evt);
+      }
+      if (!evt.defaultPrevented) {
+        toggle();
+      }
+    };
+    return /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({}, buttonProps), {}, {
+      onClick: handleClick,
+      endIcon: ChevronDownIcon,
+      ref: ref,
+      children: title
+    }));
+  };
+  return /*#__PURE__*/_jsx(Dropdown, {
+    renderTarget: renderButton,
+    renderFooter: renderFooter,
+    children: children
+  });
+});
+DropdownButton.displayName = "DropdownButton";

package/dist/esm/Overlay/Dropdown/components/DropdownButtonItem.d.ts

@@ -0,0 +1,14 @@
+import type { VFC } from "react";
+import type { IconComponentType } from "../../../Icons";
+import type { DropdownBaseItemProps } from "../useDropdownItemProps";
+export declare type DropdownButtonItemProps = DropdownBaseItemProps<HTMLButtonElement> & JSX.IntrinsicElements["button"] & {
+    /** Left aligned icon */
+    startIcon?: IconComponentType;
+    /**
+     * Variant of the item
+     * @default default
+     */
+    variant?: "default" | "destructive";
+};
+/** @deprecated */
+export declare const DropdownButtonItem: VFC<DropdownButtonItemProps>;