@algolia/satellite 1.0.0-beta.14 → 1.0.0-beta.141

package/esm/DatePicker/utils.js

@@ -0,0 +1,30 @@
+import format from "date-fns/format";
+import * as Locales from "date-fns/locale";
+export var formatDate = function formatDate(date) {
+  return format(date, "MMM do, yyyy");
+};
+export var DEFAULT_DATE_PICKER_LOCALE = {
+  code: "enUS",
+  rtl: false,
+  apply: "Apply",
+  cancel: "Cancel",
+  openButton: "Enter a date...",
+  previousMonth: "Previous month",
+  nextMonth: "Next month"
+};
+/**
+ * Looks up a date-fns locale. This falls back to `en`
+ * @param locale the ISO 639-1 language code to look up @link https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes
+ * @returns date-fns locale.
+ */
+
+export function getDateFnsLocale(locale) {
+  var _allLocales$locale;
+
+  if (!locale) {
+    return Locales.enUS;
+  }
+
+  var allLocales = Locales;
+  return (_allLocales$locale = allLocales[locale]) !== null && _allLocales$locale !== void 0 ? _allLocales$locale : Locales.enUS;
+}

package/esm/Dropdown/Dropdown.d.ts

@@ -0,0 +1,64 @@
+import type { StrictModifiers } from "@popperjs/core";
+import type { ReactNode } from "react";
+import { StrictModifier } from "react-popper";
+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;
+}
+export declare const DEFAULT_DROPDOWN_POPPER_MODIFIERS: StrictModifier[];
+/**
+ * ## Best practices
+ * - Sort list of options in a way that will make the most sense to the user. You can order:
+ *   - alphabetically
+ *   - numerically
+ *   - by most commonly selected option
+ * - Write in sentence case (the first word capitalized, the rest lowercase) and avoid using commas or semicolons at the end of each option
+ * - Clearly label options based on what each one will do
+ * - Make sure the most common options are listed. These can be grouped into sub-categories under headings
+ */
+export declare const Dropdown: {
+    ({ placement, menuClassName, modifiers, renderTarget, renderFooter, children, }: DropdownProps): JSX.Element;
+    ButtonItem: {
+        (props: import("./components/DropdownButtonItem").DropdownButtonItemProps): JSX.Element;
+        defaultProps: {
+            toggle: boolean;
+        };
+    };
+    LinkItem: {
+        (props: import("./components/DropdownLinkItem").DropdownLinkItemProps): JSX.Element;
+        defaultProps: {
+            toggle: boolean;
+        };
+    };
+    RadioItem: {
+        (props: import("./components/DropdownRadioItem").DropdownRadioItemProps): JSX.Element;
+        defaultProps: {
+            toggle: boolean;
+        };
+    };
+    ToggleItem: {
+        (props: import("./components/DropdownToggleItem").DropdownToggleItemProps): JSX.Element;
+        defaultProps: {
+            toggle: boolean;
+        };
+    };
+    CollapsibleItem: import("react").FC<import("./components/DropdownCollapsibleItem").DropdownCollapsibleItemProps>;
+    FooterItem: ({ children, className, ...props }: {
+        className?: string | undefined;
+        children: ReactNode;
+    }) => JSX.Element | null;
+    Divider: () => JSX.Element;
+    Title: import("react").FunctionComponent<import("./components/DropdownTitle").DropdownTitleProps>;
+};
+export default Dropdown;

package/esm/Dropdown/Dropdown.js

@@ -0,0 +1,138 @@
+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(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+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";
+export var DEFAULT_DROPDOWN_POPPER_MODIFIERS = [{
+  name: "offset",
+  options: {
+    offset: [0, 16]
+  }
+}];
+/**
+ * ## Best practices
+ * - Sort list of options in a way that will make the most sense to the user. You can order:
+ *   - alphabetically
+ *   - numerically
+ *   - by most commonly selected option
+ * - Write in sentence case (the first word capitalized, the rest lowercase) and avoid using commas or semicolons at the end of each option
+ * - Clearly label options based on what each one will do
+ * - Make sure the most common options are listed. These can be grouped into sub-categories under headings
+ */
+
+export 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;
+export default Dropdown;

package/esm/Dropdown/DropdownButton.d.ts

@@ -0,0 +1,11 @@
+import type { FunctionComponent, ReactNode } from "react";
+import { ButtonProps } from "../Button";
+import { RenderTargetParams } from "./Dropdown";
+export interface DropdownButtonProps extends Omit<ButtonProps<"button">, "title" | "endIcon"> {
+    /** Descriptive title for `Dropdown` */
+    title: ReactNode;
+    renderFooter?: (args: RenderTargetParams) => ReactNode;
+    children: ReactNode;
+}
+export declare const DropdownButton: FunctionComponent<DropdownButtonProps>;
+export default DropdownButton;

package/esm/Dropdown/DropdownButton.js

@@ -0,0 +1,45 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children", "title", "renderFooter"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+import { ChevronDown } from "react-feather";
+import Button from "../Button";
+import Dropdown from "./Dropdown";
+import { jsx as _jsx } from "react/jsx-runtime";
+export var DropdownButton = function DropdownButton(_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: ChevronDown,
+      children: title
+    }));
+  };
+
+  return /*#__PURE__*/_jsx(Dropdown, {
+    renderTarget: renderButton,
+    renderFooter: renderFooter,
+    children: children
+  });
+};
+export default DropdownButton;

package/esm/Dropdown/DropdownContext.d.ts

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

package/esm/Dropdown/DropdownContext.js

@@ -0,0 +1,12 @@
+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;
+};
+export default DropdownContext;

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

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import type { IconComponentType } from "../../types";
+import { 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";
+};
+export declare const DropdownButtonItem: {
+    (props: DropdownButtonItemProps): JSX.Element;
+    defaultProps: {
+        toggle: boolean;
+    };
+};
+export default DropdownButtonItem;

package/esm/Dropdown/components/DropdownButtonItem.js

@@ -0,0 +1,43 @@
+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(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+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";
+export var DropdownButtonItem = function DropdownButtonItem(props) {
+  var dropdownItemProps = useDropdownItemProps(props);
+
+  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"),
+      size: "1rem"
+    }), /*#__PURE__*/_jsx("span", {
+      className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["w-full truncate ", ""])), showDestructiveVariant && "text-red-700"),
+      children: children
+    })]
+  }));
+};
+DropdownButtonItem.defaultProps = {
+  toggle: true
+};
+export default DropdownButtonItem;

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

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

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

@@ -0,0 +1,58 @@
+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 { ChevronDown, ChevronRight } from "react-feather";
+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";
+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 ? void 0 : _onClick(evt, itemName, expandedItems);
+        } else {
+          onItemClick(itemName);
+        }
+      },
+      children: [/*#__PURE__*/_jsx("div", {
+        children: title
+      }), isExpanded ? /*#__PURE__*/_jsx(ChevronDown, {
+        className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["text-grey-500"]))),
+        size: "1.25em"
+      }) : /*#__PURE__*/_jsx(ChevronRight, {
+        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
+    })]
+  });
+};
+export default DropdownCollapsibleItem;

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

@@ -0,0 +1,7 @@
+import type { ReactNode } from "react";
+export declare type DropdownCollapsibleItemsGroupProps = {
+    expandedItems: string[];
+    onItemClick(name: string): void;
+    children: ReactNode;
+};
+export declare const DropdownCollapsibleItemsGroup: ({ expandedItems, onItemClick, children, }: DropdownCollapsibleItemsGroupProps) => JSX.Element;

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

@@ -0,0 +1,14 @@
+import { DropdownCollapsibleItemsGroupContext } from "./DropdownCollapsibleItemsGroupContext";
+import { jsx as _jsx } from "react/jsx-runtime";
+export var DropdownCollapsibleItemsGroup = function DropdownCollapsibleItemsGroup(_ref) {
+  var expandedItems = _ref.expandedItems,
+      onItemClick = _ref.onItemClick,
+      children = _ref.children;
+  return /*#__PURE__*/_jsx(DropdownCollapsibleItemsGroupContext.Provider, {
+    value: {
+      expandedItems: expandedItems,
+      onItemClick: onItemClick
+    },
+    children: children
+  });
+};

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export interface DropdownCollapsibleItemsGroupContext {
+    expandedItems: readonly string[];
+    onItemClick(name: string): void;
+}
+export declare const DropdownCollapsibleItemsGroupContext: import("react").Context<DropdownCollapsibleItemsGroupContext | null>;
+export declare const useDropdownCollapsibleItemsGroup: () => DropdownCollapsibleItemsGroupContext;

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

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

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

@@ -0,0 +1,9 @@
+import type { ReactNode } from "react";
+export declare type DropdownCollapsibleItemsMultiGroupProps = {
+    initialExpandedItems?: string[];
+    children: ReactNode;
+};
+/**
+ * Multiple collapsible item can be open at a given time
+ */
+export declare const DropdownCollapsibleItemsMultiGroup: ({ initialExpandedItems, children, }: DropdownCollapsibleItemsMultiGroupProps) => JSX.Element;

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

@@ -0,0 +1,32 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { useState } from "react";
+import { DropdownCollapsibleItemsGroup } from "./DropdownCollapsibleItemsGroup";
+import { jsx as _jsx } from "react/jsx-runtime";
+
+/**
+ * Multiple collapsible item can be open at a given time
+ */
+export var DropdownCollapsibleItemsMultiGroup = function DropdownCollapsibleItemsMultiGroup(_ref) {
+  var initialExpandedItems = _ref.initialExpandedItems,
+      children = _ref.children;
+
+  var _useState = useState(function () {
+    return initialExpandedItems !== null && initialExpandedItems !== void 0 ? initialExpandedItems : [];
+  }),
+      _useState2 = _slicedToArray(_useState, 2),
+      expandedItems = _useState2[0],
+      setExpandedItems = _useState2[1];
+
+  return /*#__PURE__*/_jsx(DropdownCollapsibleItemsGroup, {
+    expandedItems: expandedItems,
+    onItemClick: function onItemClick(name) {
+      return setExpandedItems(function (items) {
+        return items.includes(name) ? items.filter(function (i) {
+          return i !== name;
+        }) : [].concat(_toConsumableArray(items), [name]);
+      });
+    },
+    children: children
+  });
+};

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

@@ -0,0 +1,9 @@
+import type { ReactNode } from "react";
+export declare type DropdownCollapsibleItemsExclusiveGroupProps = {
+    initialExpandedItem?: string;
+    children: ReactNode;
+};
+/**
+ * Only one collapsible item can be open at a given time (unless you manually override)
+ */
+export declare const DropdownCollapsibleItemsSingleGroup: ({ initialExpandedItem, children, }: DropdownCollapsibleItemsExclusiveGroupProps) => JSX.Element;

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

@@ -0,0 +1,29 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { useState } from "react";
+import { DropdownCollapsibleItemsGroup } from "./DropdownCollapsibleItemsGroup";
+import { jsx as _jsx } from "react/jsx-runtime";
+
+/**
+ * Only one collapsible item can be open at a given time (unless you manually override)
+ */
+export var DropdownCollapsibleItemsSingleGroup = function DropdownCollapsibleItemsSingleGroup(_ref) {
+  var initialExpandedItem = _ref.initialExpandedItem,
+      children = _ref.children;
+
+  var _useState = useState(function () {
+    return initialExpandedItem ? [initialExpandedItem] : [];
+  }),
+      _useState2 = _slicedToArray(_useState, 2),
+      expandedItems = _useState2[0],
+      setExpandedItems = _useState2[1];
+
+  return /*#__PURE__*/_jsx(DropdownCollapsibleItemsGroup, {
+    expandedItems: expandedItems,
+    onItemClick: function onItemClick(name) {
+      return setExpandedItems(function (items) {
+        return items.includes(name) ? [] : [name];
+      });
+    },
+    children: children
+  });
+};

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

@@ -0,0 +1,5 @@
+export * from "./DropdownCollapsibleItem";
+export * from "./DropdownCollapsibleItemsGroup";
+export * from "./DropdownCollapsibleItemsMultiGroup";
+export * from "./DropdownCollapsibleItemsSingleGroup";
+export { useDropdownCollapsibleItemsGroup } from "./DropdownCollapsibleItemsGroupContext";

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

@@ -0,0 +1,5 @@
+export * from "./DropdownCollapsibleItem";
+export * from "./DropdownCollapsibleItemsGroup";
+export * from "./DropdownCollapsibleItemsMultiGroup";
+export * from "./DropdownCollapsibleItemsSingleGroup";
+export { useDropdownCollapsibleItemsGroup } from "./DropdownCollapsibleItemsGroupContext";

package/esm/Dropdown/components/DropdownDivider.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const DropdownDivider: () => JSX.Element;
+export default DropdownDivider;

package/esm/Dropdown/components/DropdownDivider.js

@@ -0,0 +1,12 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject;
+
+import stl from "../../styles/helpers/satellitePrefixer";
+import { jsx as _jsx } from "react/jsx-runtime";
+export var DropdownDivider = function DropdownDivider() {
+  return /*#__PURE__*/_jsx("div", {
+    className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["border-b border-grey-100"])))
+  });
+};
+export default DropdownDivider;

package/esm/Dropdown/components/DropdownFooterItem.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from "react";
+declare type DropdownFooterItemProps = {
+    className?: string;
+    children: ReactNode;
+};
+export declare const DropdownFooterItem: ({ children, className, ...props }: DropdownFooterItemProps) => JSX.Element | null;
+export default DropdownFooterItem;

package/esm/Dropdown/components/DropdownFooterItem.js

@@ -0,0 +1,28 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+
+var _templateObject;
+
+var _excluded = ["children", "className"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+import cx from "clsx";
+import stl from "../../styles/helpers/satellitePrefixer";
+import { jsx as _jsx } from "react/jsx-runtime";
+export var DropdownFooterItem = function DropdownFooterItem(_ref) {
+  var children = _ref.children,
+      className = _ref.className,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  if (!children) return null;
+  return /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({
+    className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["flex bg-grey-100 -mb-1 items-center justify-between px-4 py-3 border-t border-grey-200"]))), className)
+  }, props), {}, {
+    children: children
+  }));
+};
+export default DropdownFooterItem;