@algolia/satellite 1.0.0-v3.99 → 1.0.0

package/dist/esm/DatePicker/components/Modal.js

@@ -0,0 +1,59 @@
+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;
+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 "../../ClickAwayContainer";
+import { useCreatePortal } from "../../Satellite";
+import stl from "../../styles/helpers/satellitePrefixer";
+import { jsx as _jsx } from "react/jsx-runtime";
+export var DEFAULT_DATE_PICKER_MODAL_POPPER_MODIFIERS = [{
+  name: "offset",
+  options: {
+    offset: [0, 16]
+  }
+}];
+export var DatePickerModal = function DatePickerModal(_ref) {
+  var show = _ref.show,
+    targetElement = _ref.targetElement,
+    _onClickAway = _ref.onClickAway,
+    children = _ref.children,
+    _ref$placement = _ref.placement,
+    placement = _ref$placement === void 0 ? "bottom-start" : _ref$placement,
+    _ref$modifiers = _ref.modifiers,
+    modifiers = _ref$modifiers === void 0 ? [] : _ref$modifiers,
+    className = _ref.className;
+  var createPortal = useCreatePortal();
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    datePickerElement = _useState2[0],
+    setDatePickerElement = _useState2[1];
+  var _usePopper = usePopper(targetElement, datePickerElement, {
+      modifiers: [].concat(DEFAULT_DATE_PICKER_MODAL_POPPER_MODIFIERS, _toConsumableArray(modifiers)),
+      placement: placement,
+      strategy: "fixed"
+    }),
+    styles = _usePopper.styles,
+    attributes = _usePopper.attributes;
+  if (!show) {
+    return null;
+  }
+  return createPortal( /*#__PURE__*/_jsx(ClickAwayContainer, {
+    element: datePickerElement,
+    onClickAway: function onClickAway(evt) {
+      return _onClickAway === null || _onClickAway === void 0 ? void 0 : _onClickAway(evt);
+    },
+    children: /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({
+      ref: setDatePickerElement,
+      className: cx(className, stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["z-dropdown bg-white shadow-z400"]))))
+    }, attributes.popper), {}, {
+      style: styles.popper,
+      children: children
+    }))
+  }));
+};

package/dist/esm/DatePicker/components/NavBar.d.ts

@@ -0,0 +1,9 @@
+import type { VFC } from "react";
+import type { CaptionProps } from "react-day-picker";
+import type { WithRequiredProperty } from "../../types";
+import type { DatePickerLocale } from "../types";
+import type { EditableYearProps } from "./Calendar";
+export declare type NavBarProps = CaptionProps & EditableYearProps & {
+    locale: WithRequiredProperty<DatePickerLocale, "nextMonth" | "previousMonth">;
+};
+export declare const NavBar: VFC<NavBarProps>;

package/dist/esm/DatePicker/components/NavBar.js

@@ -0,0 +1,116 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+import cx from "clsx";
+import { add, eachYearOfInterval, getYear, setYear } from "date-fns";
+import isSameMonth from "date-fns/isSameMonth";
+import { useMemo } from "react";
+import { useDayPicker, useNavigation } from "react-day-picker";
+import { IconButton } from "../../Button";
+import { ChevronLeftIcon, ChevronRightIcon } from "../../Icons";
+import stl from "../../styles/helpers/satellitePrefixer";
+import { uniqueId } from "../../utils";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export var NavBar = function NavBar(props) {
+  var _useDayPicker = useDayPicker(),
+    numberOfMonths = _useDayPicker.numberOfMonths,
+    onMonthChange = _useDayPicker.onMonthChange,
+    formatMonthCaption = _useDayPicker.formatters.formatMonthCaption,
+    dir = _useDayPicker.dir,
+    locale = _useDayPicker.locale;
+  var _useNavigation = useNavigation(),
+    previousMonth = _useNavigation.previousMonth,
+    nextMonth = _useNavigation.nextMonth,
+    goToMonth = _useNavigation.goToMonth,
+    goToDate = _useNavigation.goToDate,
+    displayMonths = _useNavigation.displayMonths;
+  var _props$locale = props.locale,
+    nextMonthLabel = _props$locale.nextMonth,
+    previousMonthLabel = _props$locale.previousMonth;
+  var initialDate = useMemo(function () {
+    return props.editableYear && props.initialDate ? props.initialDate : new Date();
+  }, [props]);
+  var displayIndex = displayMonths.findIndex(function (month) {
+    return isSameMonth(props.displayMonth, month);
+  });
+  var showNext = numberOfMonths === 1 || displayIndex === displayMonths.length - 1;
+  var showPrevious = numberOfMonths === 1 || displayIndex === 0;
+  var handlePreviousClick = function handlePreviousClick() {
+    if (!previousMonth) return;
+    goToMonth(previousMonth);
+    onMonthChange === null || onMonthChange === void 0 || onMonthChange(previousMonth);
+  };
+  var handleNextClick = function handleNextClick() {
+    if (!nextMonth) return;
+    goToMonth(nextMonth);
+    onMonthChange === null || onMonthChange === void 0 || onMonthChange(nextMonth);
+  };
+  var years = useMemo(function () {
+    if (!props.editableYear) return [];
+    if (props.years) return props.years;
+    var interval = eachYearOfInterval({
+      start: add(initialDate, {
+        years: -5
+      }),
+      end: add(initialDate, {
+        years: 10
+      })
+    }).map(getYear);
+    var monthYear = props.displayMonth.getFullYear(); // year of the currently shown month
+    if (interval.includes(monthYear)) return interval;
+    var minYear = Math.min.apply(Math, _toConsumableArray(interval).concat([monthYear]));
+    var maxYear = Math.max.apply(Math, _toConsumableArray(interval).concat([monthYear]));
+    return Array.from({
+      length: maxYear - minYear + 1
+    }, function (_, i) {
+      return i + minYear;
+    });
+  }, [props, initialDate]);
+  var yearSelectId = useMemo(function () {
+    return uniqueId("year-select");
+  }, []);
+  return /*#__PURE__*/_jsxs("div", {
+    className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["w-full top-3 left-0 pt-1 px-2 pb-2 flex justify-between"]))),
+    children: [showPrevious ? /*#__PURE__*/_jsx(IconButton, {
+      icon: dir === "rtl" ? ChevronRightIcon : ChevronLeftIcon,
+      title: previousMonthLabel,
+      onClick: handlePreviousClick
+    }) : /*#__PURE__*/_jsx("span", {
+      className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["w-8"])))
+    }), /*#__PURE__*/_jsx("div", {
+      className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["flex items-center text-center"]))),
+      children: /*#__PURE__*/_jsxs("div", {
+        className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["font-medium text-md"]))),
+        children: [formatMonthCaption(props.displayMonth, {
+          locale: locale
+        }), " ", props.editableYear ? /*#__PURE__*/_jsxs("label", {
+          htmlFor: yearSelectId,
+          children: [/*#__PURE__*/_jsx("span", {
+            className: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["sr-only"]))),
+            children: "Select a year"
+          }), /*#__PURE__*/_jsx("select", {
+            id: yearSelectId,
+            className: cx("rdp-year", stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["pl-0.5 font-medium outline-none border-transparent border-2 rounded focus:border-accent-600 focus:shadow-z100 appearance-none"])))),
+            value: props.displayMonth.getFullYear(),
+            onChange: function onChange(e) {
+              return goToDate(setYear(props.displayMonth, parseInt(e.currentTarget.value)));
+            },
+            children: years.map(function (year) {
+              return /*#__PURE__*/_jsx("option", {
+                value: year,
+                children: year
+              }, year);
+            })
+          })]
+        }) : props.displayMonth.getFullYear()]
+      })
+    }), showNext ? /*#__PURE__*/_jsx(IconButton, {
+      icon: dir === "rtl" ? ChevronLeftIcon : ChevronRightIcon,
+      title: nextMonthLabel,
+      onClick: handleNextClick
+    }) : /*#__PURE__*/_jsx("span", {
+      className: stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["w-8"])))
+    })]
+  });
+};

package/dist/esm/DatePicker/components/SidePanel.d.ts

@@ -0,0 +1,5 @@
+import type { ReactNode, VFC } from "react";
+export declare type DatePickerSidePanelProps = {
+    children: ReactNode;
+};
+export declare const DatePickerSidePanel: VFC<DatePickerSidePanelProps>;

package/dist/esm/DatePicker/components/SidePanel.js

@@ -0,0 +1,14 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject, _templateObject2;
+import stl from "../../styles/helpers/satellitePrefixer";
+import { jsx as _jsx } from "react/jsx-runtime";
+export var DatePickerSidePanel = function DatePickerSidePanel(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/_jsx("div", {
+    className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["min-w-64 flex px-4 py-3"]))),
+    children: /*#__PURE__*/_jsx("div", {
+      className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["flex flex-col flex-1 justify-between items-start border-l border-grey-100 pl-4"]))),
+      children: children
+    })
+  });
+};

package/dist/esm/DatePicker/components/index.d.ts

@@ -0,0 +1,7 @@
+export type { DatePickerCalendarProps } from "./Calendar";
+export { DatePickerCalendar } from "./Calendar";
+export * from "./Display";
+export * from "./Footer";
+export * from "./FooterActions";
+export * from "./Modal";
+export * from "./SidePanel";

package/dist/esm/DatePicker/components/index.js

@@ -0,0 +1,6 @@
+export { DatePickerCalendar } from "./Calendar";
+export * from "./Display";
+export * from "./Footer";
+export * from "./FooterActions";
+export * from "./Modal";
+export * from "./SidePanel";

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

@@ -0,0 +1,2 @@
+export * from "./DatePicker";
+export * from "./DateRangePicker";

package/dist/esm/DatePicker/index.js

@@ -0,0 +1,2 @@
+export * from "./DatePicker";
+export * from "./DateRangePicker";

package/dist/esm/DatePicker/types.d.ts

@@ -0,0 +1,26 @@
+import type { Locale as DateFnsLocale } from "date-fns";
+import type { DatePickerModalProps } from "./components/Modal";
+export declare type DatePickerLocale = {
+    /** The date-fns locale object used to localize dates. Defaults to* `en-US`. */
+    formatter?: DateFnsLocale;
+    /** rtl should be used optionally in conjunction with supported language codes, such as `rtl: true` when code is `arSA` */
+    rtl?: boolean;
+    /**
+     * custom translations for the DatePicker component unrelated to the date-fns locale. These are used to translate
+     * the buttons and labels of the DatePicker component outside of the month, day, year, etc.
+     */
+    openButton?: string;
+    cancel?: string;
+    apply?: string;
+    nextMonth?: string;
+    previousMonth?: string;
+};
+export declare type SharedDatePickerProps = {
+    modalPlacement?: DatePickerModalProps["placement"];
+    locale?: DatePickerLocale;
+} & ({
+    editableYear?: false;
+} | {
+    editableYear: true;
+    years?: number[];
+});

package/dist/esm/DatePicker/types.js

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

package/dist/esm/DatePicker/utils.d.ts

@@ -0,0 +1,3 @@
+import type { DatePickerLocale } from "./types";
+export declare const formatDate: (date: Date | number) => string;
+export declare const DEFAULT_DATE_PICKER_LOCALE: Required<Omit<DatePickerLocale, "formatter">>;

package/dist/esm/DatePicker/utils.js

@@ -0,0 +1,12 @@
+import format from "date-fns/format";
+export var formatDate = function formatDate(date) {
+  return format(date, "MMM do, yyyy");
+};
+export var DEFAULT_DATE_PICKER_LOCALE = {
+  rtl: false,
+  apply: "Apply",
+  cancel: "Cancel",
+  openButton: "Enter a date...",
+  previousMonth: "Previous month",
+  nextMonth: "Next month"
+};

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

@@ -0,0 +1,38 @@
+import type { StrictModifiers } from "@popperjs/core";
+import type { ReactNode, VFC } from "react";
+import { DropdownButtonItem } from "./components/DropdownButtonItem";
+import { DropdownCollapsibleItem } 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";
+export interface RenderTargetParams {
+    toggle: (open?: boolean) => any;
+    isShowingMenu: boolean;
+}
+export interface DropdownProps {
+    /** Classes for the opened menu */
+    menuClassName?: string;
+    /** Modifiers for the Popper menu */
+    modifiers?: StrictModifiers[];
+    /** Defines which side to open the menu */
+    placement?: "bottom-start" | "bottom-end";
+    renderTarget: (params: RenderTargetParams) => ReactNode;
+    renderFooter?: (params: RenderTargetParams) => ReactNode;
+    children?: ReactNode;
+}
+declare type DropdownSubComponents = {
+    ButtonItem: typeof DropdownButtonItem;
+    LinkItem: typeof DropdownLinkItem;
+    RadioItem: typeof DropdownRadioItem;
+    ToggleItem: typeof DropdownToggleItem;
+    CollapsibleItem: typeof DropdownCollapsibleItem;
+    FooterItem: typeof DropdownFooterItem;
+    Divider: typeof DropdownDivider;
+    Title: typeof DropdownTitle;
+};
+/** @deprecated use `MenuButton` instead */
+export declare const Dropdown: VFC<DropdownProps> & DropdownSubComponents;
+export {};

package/dist/esm/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 { Card } from "../Card";
+import { ClickAwayContainer } from "../ClickAwayContainer";
+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/Dropdown/DropdownButton.d.ts

@@ -0,0 +1,13 @@
+import type { ReactNode } from "react";
+import type { ButtonProps } from "../Button";
+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/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 "../Button";
+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/Dropdown/DropdownContext.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export interface DropdownContextInterface {
+    showMenu(show: boolean): void;
+}
+export declare const DropdownContext: import("react").Context<DropdownContextInterface | null>;
+export declare const useDropdownContext: () => DropdownContextInterface;

package/dist/esm/Dropdown/DropdownContext.js

@@ -0,0 +1,9 @@
+import { createContext, useContext } from "react";
+export var DropdownContext = /*#__PURE__*/createContext(null);
+export var useDropdownContext = function useDropdownContext() {
+  var context = useContext(DropdownContext);
+  if (!context) {
+    throw new Error("useDropdownContext used outside DropdownContext");
+  }
+  return context;
+};

package/dist/esm/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>;

package/dist/esm/Dropdown/components/DropdownButtonItem.js

@@ -0,0 +1,40 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _templateObject, _templateObject2, _templateObject3;
+var _excluded = ["toggle", "children", "variant", "startIcon"];
+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 stl from "../../styles/helpers/satellitePrefixer";
+import { useDropdownItemProps } from "../useDropdownItemProps";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var _DropdownButtonItem = function _DropdownButtonItem(props) {
+  var dropdownItemProps = useDropdownItemProps(props);
+  // `toggle` is destructured here because we don't want it passed to the `button`
+  var _props$dropdownItemPr = _objectSpread(_objectSpread({}, props), dropdownItemProps),
+    toggle = _props$dropdownItemPr.toggle,
+    children = _props$dropdownItemPr.children,
+    variant = _props$dropdownItemPr.variant,
+    StartIcon = _props$dropdownItemPr.startIcon,
+    mergedProps = _objectWithoutProperties(_props$dropdownItemPr, _excluded);
+  var showDestructiveVariant = !props.disabled && variant === "destructive";
+  return /*#__PURE__*/_jsxs("button", _objectSpread(_objectSpread({}, mergedProps), {}, {
+    className: cx(mergedProps.className, stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["w-full"])))),
+    children: [StartIcon && /*#__PURE__*/_jsx(StartIcon, {
+      className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["mr-2 shrink-0 ", ""])), showDestructiveVariant ? "text-red-700" : "text-grey-500"),
+      width: "1rem",
+      height: "1rem"
+    }), /*#__PURE__*/_jsx("span", {
+      className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["w-full truncate ", ""])), showDestructiveVariant && "text-red-700"),
+      children: children
+    })]
+  }));
+};
+_DropdownButtonItem.defaultProps = {
+  toggle: true
+};
+
+/** @deprecated */
+export var DropdownButtonItem = _DropdownButtonItem;

package/dist/esm/Dropdown/components/DropdownCollapsibleItem/DropdownCollapsibleItem.d.ts

@@ -0,0 +1,10 @@
+import type { MouseEvent, ReactNode, VFC } from "react";
+export interface DropdownCollapsibleItemProps {
+    title: ReactNode;
+    name?: string;
+    expanded?: boolean;
+    onClick?: (evt: MouseEvent<HTMLElement>, name: string, expandedItems: readonly string[]) => void;
+    children: ReactNode;
+}
+/** @deprecated */
+export declare const DropdownCollapsibleItem: VFC<DropdownCollapsibleItemProps>;

package/dist/esm/Dropdown/components/DropdownCollapsibleItem/DropdownCollapsibleItem.js

@@ -0,0 +1,53 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+import { useState } from "react";
+import { ChevronDownIcon, ChevronRightIcon } from "../../../Icons";
+import stl from "../../../styles/helpers/satellitePrefixer";
+import { uniqueId } from "../../../utils";
+import { useDropdownCollapsibleItemsGroup } from "./DropdownCollapsibleItemsGroupContext";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+/** @deprecated */
+export var DropdownCollapsibleItem = function DropdownCollapsibleItem(_ref) {
+  var title = _ref.title,
+    name = _ref.name,
+    expanded = _ref.expanded,
+    _onClick = _ref.onClick,
+    children = _ref.children;
+  var _useDropdownCollapsib = useDropdownCollapsibleItemsGroup(),
+    expandedItems = _useDropdownCollapsib.expandedItems,
+    onItemClick = _useDropdownCollapsib.onItemClick;
+  var _useState = useState(function () {
+      return uniqueId("ddci");
+    }),
+    _useState2 = _slicedToArray(_useState, 1),
+    internalName = _useState2[0];
+  var itemName = name !== null && name !== void 0 ? name : internalName;
+  var isExpanded = typeof expanded === "boolean" ? expanded : expandedItems.includes(itemName);
+  return /*#__PURE__*/_jsxs("div", {
+    className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["flex flex-col"]))),
+    children: [/*#__PURE__*/_jsxs("button", {
+      className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          w-full h-10 px-4\n          flex items-center justify-between\n          text-grey-900 hover:bg-grey-100 focus:bg-grey-100 focus:outline-none cursor-pointer\n        "]))),
+      onClick: function onClick(evt) {
+        if (typeof expanded === "boolean") {
+          _onClick === null || _onClick === void 0 || _onClick(evt, itemName, expandedItems);
+        } else {
+          onItemClick(itemName);
+        }
+      },
+      children: [/*#__PURE__*/_jsx("div", {
+        children: title
+      }), isExpanded ? /*#__PURE__*/_jsx(ChevronDownIcon, {
+        className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["text-grey-500"]))),
+        size: "1.25em"
+      }) : /*#__PURE__*/_jsx(ChevronRightIcon, {
+        className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["text-grey-500"]))),
+        size: "1.25em"
+      })]
+    }), isExpanded && /*#__PURE__*/_jsx("div", {
+      className: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["bg-grey-50 border-l-2 border-grey-300 typo-subdued"]))),
+      children: children
+    })]
+  });
+};

package/dist/esm/Dropdown/components/DropdownCollapsibleItem/DropdownCollapsibleItemsGroup.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode, VFC } from "react";
+export declare type DropdownCollapsibleItemsGroupProps = {
+    expandedItems: string[];
+    onItemClick(name: string): void;
+    children: ReactNode;
+};
+/** @deprecated */
+export declare const DropdownCollapsibleItemsGroup: VFC<DropdownCollapsibleItemsGroupProps>;