@algolia/satellite 1.0.0-beta.114 → 1.0.0-beta.118

package/cjs/AnnouncementBadge/AnnouncementBadge.d.ts

@@ -2,7 +2,7 @@ import React, { FunctionComponent } from "react";
 export declare type AnnouncementBadgeSizes = "default" | "small";
 export interface AnnouncementBadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
     size?: AnnouncementBadgeSizes;
-    text?: "new" | "beta" | "internal";
+    text?: "new" | "beta" | "internal" | "pilot";
     variant?: "accent" | "red";
     children?: never;
 }

package/cjs/AutoComplete/AutoComplete.tailwind.js

@@ -34,7 +34,7 @@ var autoCompletePlugin = function autoCompletePlugin(_ref) {
         display: "block",
         minHeight: 30,
         // don't ask me why 30
-        fontSize: "0px"
+        fontSize: 0
       },
       "&.autocomplete-large": {
         minHeight: "3rem",

package/cjs/AutoComplete/components/AutoCompleteEmptyState.d.ts

@@ -7,5 +7,5 @@ export interface AutoCompleteEmptyStateProps {
     title: React.ReactNode;
     description?: React.ReactNode;
 }
-export declare const AutoCompleteEmptyState: ({ icon, variant, title, description }: AutoCompleteEmptyStateProps) => JSX.Element;
+export declare const AutoCompleteEmptyState: ({ icon, variant, title, description, }: AutoCompleteEmptyStateProps) => JSX.Element;
 export default AutoCompleteEmptyState;

package/cjs/Avatars/ApplicationAvatar.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import type { ApplicationAvatarSize, MinimalApplication } from "./types";
+interface ApplicationAvatarProps {
+    /** A minimal application object containing `applicationID` and `name`. */
+    application: MinimalApplication;
+    /** @default "medium" */
+    size?: ApplicationAvatarSize;
+    /** @ignore */
+    className?: string;
+}
+/** The `ApplicationAvatar` is used as a visual representation of an application. */
+export declare const ApplicationAvatar: ({ className, application, size }: ApplicationAvatarProps) => JSX.Element;
+export default ApplicationAvatar;

package/cjs/Avatars/ApplicationAvatar.js

@@ -0,0 +1,43 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.ApplicationAvatar = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
+
+var _utils = require("./utils");
+
+var _templateObject, _templateObject2, _templateObject3;
+
+var SIZE_CLASSNAMES = {
+  small: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["w-4 h-4"]))),
+  medium: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["w-8 h-8"])))
+};
+
+/** The `ApplicationAvatar` is used as a visual representation of an application. */
+var ApplicationAvatar = function ApplicationAvatar(_ref) {
+  var className = _ref.className,
+      application = _ref.application,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? "medium" : _ref$size;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["rounded inline-flex flex-shrink-0 items-center justify-center uppercase"]))), (0, _utils.pickApplicationColors)(application.applicationId), SIZE_CLASSNAMES[size], className),
+    style: size === "small" ? {
+      fontSize: "8px"
+    } : {}
+  }, (0, _utils.getApplicationInitials)(application));
+};
+
+exports.ApplicationAvatar = ApplicationAvatar;
+var _default = ApplicationAvatar;
+exports["default"] = _default;

package/cjs/Avatars/UserAvatar.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import type { MinimalUser } from "./types";
+export declare type UserAvatarProps = {
+    /** A minimal user object containing `name`, `email` and `avatar`. */
+    user: MinimalUser;
+    /** @default 32 */
+    size?: number;
+    /** @ignore */
+    className?: string;
+};
+/** The `UserAvatar` is used as a visual representation of a user. */
+export declare const UserAvatar: ({ className, user, size }: UserAvatarProps) => JSX.Element;
+export default UserAvatar;

package/cjs/Avatars/UserAvatar.js

@@ -0,0 +1,64 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.UserAvatar = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
+
+var _utils = require("./utils");
+
+var _templateObject, _templateObject2;
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/** The `UserAvatar` is used as a visual representation of a user. */
+var UserAvatar = function UserAvatar(_ref) {
+  var _user$email;
+
+  var className = _ref.className,
+      user = _ref.user,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 32 : _ref$size;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      failedToLoadAvatar = _useState2[0],
+      setFailedToLoadAvatar = _useState2[1];
+
+  var initials = (0, _utils.getUserInitials)(user);
+  var hasValidAvatar = user.avatar && !failedToLoadAvatar;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["relative overflow-hidden flex justify-center items-center rounded-full text-white uppercase"]))), !hasValidAvatar && (0, _utils.getUserBackgroundClassName)((_user$email = user.email) !== null && _user$email !== void 0 ? _user$email : "no-email"), className),
+    style: {
+      width: size,
+      height: size
+    }
+  }, /*#__PURE__*/_react["default"].createElement("span", null, initials), hasValidAvatar && /*#__PURE__*/_react["default"].createElement("img", {
+    className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["w-full absolute top-0 left-0"]))),
+    src: user.avatar,
+    alt: "".concat(user.name || user.email, "'s avatar"),
+    onError: function onError() {
+      return setFailedToLoadAvatar(true);
+    }
+  }));
+};
+
+exports.UserAvatar = UserAvatar;
+var _default = UserAvatar;
+exports["default"] = _default;

package/cjs/Avatars/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./ApplicationAvatar";
+export * from "./UserAvatar";
+export { default } from "./UserAvatar";

package/cjs/Avatars/index.js

@@ -0,0 +1,46 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _UserAvatar["default"];
+  }
+});
+
+var _ApplicationAvatar = require("./ApplicationAvatar");
+
+Object.keys(_ApplicationAvatar).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _ApplicationAvatar[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _ApplicationAvatar[key];
+    }
+  });
+});
+
+var _UserAvatar = _interopRequireWildcard(require("./UserAvatar"));
+
+Object.keys(_UserAvatar).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _UserAvatar[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _UserAvatar[key];
+    }
+  });
+});
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

package/cjs/Avatars/types.d.ts

@@ -0,0 +1,17 @@
+export declare type ApplicationAvatarSize = "small" | "medium";
+export declare type MinimalApplication = {
+    applicationId: string;
+    name?: string;
+};
+declare type UserAvatarWithName = {
+    name: string;
+    email?: string;
+};
+declare type UserAvatarWithEmail = {
+    email: string;
+    name?: string;
+};
+export declare type MinimalUser = (UserAvatarWithName | UserAvatarWithEmail) & {
+    avatar?: string;
+};
+export {};

package/cjs/Avatars/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/cjs/Avatars/utils.d.ts

@@ -0,0 +1,6 @@
+import { MinimalApplication, MinimalUser } from "./types";
+export declare const pickApplicationColors: (applicationId: string) => string;
+export declare const getApplicationIdInitial: (applicationId: string) => string;
+export declare const getApplicationInitials: ({ name, applicationId }: MinimalApplication) => string;
+export declare const getUserBackgroundClassName: (email: string) => string;
+export declare const getUserInitials: (user: MinimalUser) => string;

package/cjs/Avatars/utils.js

@@ -0,0 +1,82 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getUserInitials = exports.getUserBackgroundClassName = exports.getApplicationInitials = exports.getApplicationIdInitial = exports.pickApplicationColors = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _diacritics = require("diacritics");
+
+var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
+
+var _hashCode = _interopRequireDefault(require("../utils/hashCode"));
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28;
+
+/** APPLICATION */
+var APPLICATION_COLORS_CLASSNAMES = [(0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["bg-grey-200 text-grey-800"]))), (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["bg-nebula-200 text-nebula-800"]))), (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["bg-blue-200 text-blue-800"]))), (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["bg-green-200 text-green-800"]))), (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["bg-pink-200 text-pink-800"]))), (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["bg-red-200 text-red-800"]))), (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["bg-orange-200 text-orange-800"]))), // Darker variants
+(0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["bg-grey-300 text-grey-900"]))), (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["bg-nebula-300 text-nebula-900"]))), (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["bg-blue-300 text-blue-900"]))), (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["bg-green-300 text-green-900"]))), (0, _satellitePrefixer["default"])(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["bg-pink-300 text-pink-900"]))), (0, _satellitePrefixer["default"])(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["bg-red-300 text-red-900"]))), (0, _satellitePrefixer["default"])(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["bg-orange-300 text-orange-900"])))];
+
+var pickApplicationColors = function pickApplicationColors(applicationId) {
+  var _APPLICATION_COLORS_C;
+
+  return (_APPLICATION_COLORS_C = APPLICATION_COLORS_CLASSNAMES[Math.abs((0, _hashCode["default"])(applicationId)) % APPLICATION_COLORS_CLASSNAMES.length]) !== null && _APPLICATION_COLORS_C !== void 0 ? _APPLICATION_COLORS_C : APPLICATION_COLORS_CLASSNAMES[0];
+};
+
+exports.pickApplicationColors = pickApplicationColors;
+
+var getApplicationIdInitial = function getApplicationIdInitial(applicationId) {
+  return applicationId.startsWith("beta") ? applicationId.slice(4, 6) : applicationId.slice(0, 2);
+};
+
+exports.getApplicationIdInitial = getApplicationIdInitial;
+
+var getApplicationInitials = function getApplicationInitials(_ref) {
+  var name = _ref.name,
+      applicationId = _ref.applicationId;
+
+  if (!name) {
+    return getApplicationIdInitial(applicationId);
+  }
+
+  var words = (0, _diacritics.remove)(name.trim()).toLocaleUpperCase().split(/\W+/).filter(function (word) {
+    return word.length >= 1;
+  });
+
+  if (words.length === 0 || words.length === 1 && words[0].length < 2) {
+    return getApplicationIdInitial(applicationId);
+  } else if (words.length === 1) {
+    return words[0].slice(0, 2);
+  }
+
+  return "".concat(words[0][0]).concat(words[1][0]);
+};
+/** USER */
+
+
+exports.getApplicationInitials = getApplicationInitials;
+var USER_COLORS_CLASSNAMES = [(0, _satellitePrefixer["default"])(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])(["bg-grey-400"]))), (0, _satellitePrefixer["default"])(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2["default"])(["bg-nebula-400"]))), (0, _satellitePrefixer["default"])(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2["default"])(["bg-blue-400"]))), (0, _satellitePrefixer["default"])(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2["default"])(["bg-green-400"]))), (0, _satellitePrefixer["default"])(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2["default"])(["bg-pink-400"]))), (0, _satellitePrefixer["default"])(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2["default"])(["bg-red-400"]))), (0, _satellitePrefixer["default"])(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2["default"])(["bg-orange-400"]))), // Darker variants
+(0, _satellitePrefixer["default"])(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteral2["default"])(["bg-grey-700"]))), (0, _satellitePrefixer["default"])(_templateObject23 || (_templateObject23 = (0, _taggedTemplateLiteral2["default"])(["bg-nebula-700"]))), (0, _satellitePrefixer["default"])(_templateObject24 || (_templateObject24 = (0, _taggedTemplateLiteral2["default"])(["bg-blue-700"]))), (0, _satellitePrefixer["default"])(_templateObject25 || (_templateObject25 = (0, _taggedTemplateLiteral2["default"])(["bg-green-700"]))), (0, _satellitePrefixer["default"])(_templateObject26 || (_templateObject26 = (0, _taggedTemplateLiteral2["default"])(["bg-pink-700"]))), (0, _satellitePrefixer["default"])(_templateObject27 || (_templateObject27 = (0, _taggedTemplateLiteral2["default"])(["bg-red-700"]))), (0, _satellitePrefixer["default"])(_templateObject28 || (_templateObject28 = (0, _taggedTemplateLiteral2["default"])(["bg-orange-700"])))];
+
+var getUserBackgroundClassName = function getUserBackgroundClassName(email) {
+  var _USER_COLORS_CLASSNAM;
+
+  return (_USER_COLORS_CLASSNAM = USER_COLORS_CLASSNAMES[Math.abs((0, _hashCode["default"])(email)) % USER_COLORS_CLASSNAMES.length]) !== null && _USER_COLORS_CLASSNAM !== void 0 ? _USER_COLORS_CLASSNAM : USER_COLORS_CLASSNAMES[0];
+};
+
+exports.getUserBackgroundClassName = getUserBackgroundClassName;
+
+var getUserInitials = function getUserInitials(user) {
+  var _user$email, _user$email$match;
+
+  var words = user.name ? user.name.trim().split(/\s+/) : (_user$email = user.email) === null || _user$email === void 0 ? void 0 : (_user$email$match = _user$email.match(/^(.+)(?:\+.+?)?@.+$/)) === null || _user$email$match === void 0 ? void 0 : _user$email$match[1].split(".");
+  return words ? words.slice(0, 2).map(function (w) {
+    return w.toLocaleLowerCase()[0];
+  }).join("") : "??";
+};
+
+exports.getUserInitials = getUserInitials;

package/cjs/Card/Card.tailwind.js

@@ -31,7 +31,8 @@ var cardPlugin = function cardPlugin(_ref) {
       boxShadow: theme("boxShadow.z400")
     },
     ".card-z500": {
-      boxShadow: theme("boxShadow.z500")
+      boxShadow: theme("boxShadow.z500"),
+      borderRadius: 8
     }
   });
 };

package/cjs/Dropdown/Dropdown.d.ts

@@ -13,6 +13,7 @@ export interface DropdownProps {
     /** Defines which side to open the menu */
     placement?: "bottom-start" | "bottom-end";
     renderTarget: (params: RenderTargetParams) => React.ReactNode;
+    renderFooter?: (params: RenderTargetParams) => React.ReactNode;
     children?: React.ReactNode;
 }
 export declare const DEFAULT_DROPDOWN_POPPER_MODIFIERS: StrictModifier[];
@@ -27,7 +28,7 @@ export declare const DEFAULT_DROPDOWN_POPPER_MODIFIERS: StrictModifier[];
  * - 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, children }: DropdownProps): JSX.Element;
+    ({ placement, menuClassName, modifiers, renderTarget, renderFooter, children, }: DropdownProps): JSX.Element;
     ButtonItem: {
         (props: import("./components/DropdownButtonItem").DropdownButtonItemProps): JSX.Element;
         defaultProps: {
@@ -44,7 +45,7 @@ export declare const Dropdown: {
         (props: import("./components/DropdownRadioItem").DropdownRadioItemProps): JSX.Element;
         defaultProps: {
             toggle: boolean;
-        }; /** Classes for the opened menu */
+        };
     };
     ToggleItem: {
         (props: import("./components/DropdownToggleItem").DropdownToggleItemProps): JSX.Element;
@@ -52,6 +53,11 @@ export declare const Dropdown: {
             toggle: boolean;
         };
     };
+    CollapsibleItem: React.FC<import("./components/DropdownCollapsibleItem").DropdownCollapsibleItemProps>;
+    FooterItem: ({ children, className, ...props }: {
+        className?: string | undefined;
+        children: React.ReactNode;
+    }) => JSX.Element | null;
     Divider: () => JSX.Element;
     Title: React.FunctionComponent<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>>;
 };

package/cjs/Dropdown/Dropdown.js

@@ -39,6 +39,10 @@ var _DropdownRadioItem = _interopRequireDefault(require("./components/DropdownRa
 
 var _DropdownToggleItem = _interopRequireDefault(require("./components/DropdownToggleItem"));
 
+var _DropdownCollapsibleItem = require("./components/DropdownCollapsibleItem");
+
+var _DropdownFooterItem = _interopRequireDefault(require("./components/DropdownFooterItem"));
+
 var _DropdownDivider = _interopRequireDefault(require("./components/DropdownDivider"));
 
 var _DropdownTitle = _interopRequireDefault(require("./components/DropdownTitle"));
@@ -71,12 +75,15 @@ var DEFAULT_DROPDOWN_POPPER_MODIFIERS = [{
 exports.DEFAULT_DROPDOWN_POPPER_MODIFIERS = DEFAULT_DROPDOWN_POPPER_MODIFIERS;
 
 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 _useState = (0, _react.useState)(false),
@@ -108,11 +115,17 @@ var Dropdown = function Dropdown(_ref) {
     },
     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__*/_react["default"].createElement(_DropdownContext["default"].Provider, {
     value: {
       showMenu: setShowMenu
     }
-  }, /*#__PURE__*/_react["default"].createElement("span", {
+  }, /*#__PURE__*/_react["default"].createElement(_DropdownCollapsibleItem.DropdownCollapsibleItemsSingleGroup, null, /*#__PURE__*/_react["default"].createElement("span", {
     className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["inline-block leading-none"]))),
     ref: setTargetEl
   }, target), showMenu && targetEl && /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/_react["default"].createElement(_ClickAwayContainer.ClickAwayContainer, {
@@ -132,7 +145,7 @@ var Dropdown = function Dropdown(_ref) {
     fullBleed: true,
     elevation: "300",
     className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col py-1"])))
-  }, children))), document.body));
+  }, children, footer ? /*#__PURE__*/_react["default"].createElement(_DropdownFooterItem["default"], null, footer) : null))), document.body)));
 };
 
 exports.Dropdown = Dropdown;
@@ -140,6 +153,8 @@ Dropdown.ButtonItem = _DropdownButtonItem["default"];
 Dropdown.LinkItem = _DropdownLinkItem["default"];
 Dropdown.RadioItem = _DropdownRadioItem["default"];
 Dropdown.ToggleItem = _DropdownToggleItem["default"];
+Dropdown.CollapsibleItem = _DropdownCollapsibleItem.DropdownCollapsibleItem;
+Dropdown.FooterItem = _DropdownFooterItem["default"];
 Dropdown.Divider = _DropdownDivider["default"];
 Dropdown.Title = _DropdownTitle["default"];
 var _default = Dropdown;

package/cjs/Dropdown/DropdownButton.d.ts

@@ -1,8 +1,10 @@
 import React, { FunctionComponent } from "react";
 import { ButtonProps } from "../Button";
+import { RenderTargetParams } from "./Dropdown";
 export interface DropdownButtonProps extends Omit<ButtonProps<"button">, "title"> {
     /** Title displayed in the `Dropdown` */
     title: React.ReactNode;
+    renderFooter?: (args: RenderTargetParams) => React.ReactNode;
 }
 export declare const DropdownButton: FunctionComponent<DropdownButtonProps>;
 export default DropdownButton;

package/cjs/Dropdown/DropdownButton.js

@@ -19,11 +19,12 @@ var _Button = _interopRequireDefault(require("../Button"));
 
 var _Dropdown = _interopRequireDefault(require("./Dropdown"));
 
-var _excluded = ["children", "title"];
+var _excluded = ["children", "title", "renderFooter"];
 
 var DropdownButton = function DropdownButton(_ref) {
   var children = _ref.children,
       title = _ref.title,
+      renderFooter = _ref.renderFooter,
       buttonProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
 
   var renderButton = function renderButton(_ref2) {
@@ -46,7 +47,8 @@ var DropdownButton = function DropdownButton(_ref) {
   };
 
   return /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
-    renderTarget: renderButton
+    renderTarget: renderButton,
+    renderFooter: renderFooter
   }, children);
 };
 

package/cjs/Dropdown/components/DropdownButtonItem.js

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = exports.DropdownButtonItem = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
@@ -15,11 +17,13 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _react = _interopRequireDefault(require("react"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _satellitePrefixer = _interopRequireDefault(require("../../styles/helpers/satellitePrefixer"));
 
 var _useDropdownItemProps = _interopRequireDefault(require("../useDropdownItemProps"));
 
-var _templateObject, _templateObject2;
+var _templateObject, _templateObject2, _templateObject3;
 
 var _excluded = ["children", "variant", "toggle", "startIcon"];
 
@@ -38,11 +42,13 @@ var DropdownButtonItem = function DropdownButtonItem(props) {
       mergedProps = (0, _objectWithoutProperties2["default"])(_props$dropdownItemPr, _excluded);
 
   var showDestructiveVariant = !props.disabled && variant === "destructive";
-  return /*#__PURE__*/_react["default"].createElement("button", mergedProps, StartIcon && /*#__PURE__*/_react["default"].createElement(StartIcon, {
-    className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["mr-2 ", ""])), showDestructiveVariant ? "text-red-700" : "text-grey-500"),
+  return /*#__PURE__*/_react["default"].createElement("button", (0, _extends2["default"])({}, mergedProps, {
+    className: (0, _classnames["default"])(mergedProps.className, (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["w-full"]))))
+  }), StartIcon && /*#__PURE__*/_react["default"].createElement(StartIcon, {
+    className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["mr-2 ", ""])), showDestructiveVariant ? "text-red-700" : "text-grey-500"),
     size: "1rem"
   }), /*#__PURE__*/_react["default"].createElement("span", {
-    className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["w-full truncate ", ""])), showDestructiveVariant && "text-red-700")
+    className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["w-full truncate ", ""])), showDestructiveVariant && "text-red-700")
   }, children));
 };
 

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

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

package/cjs/Dropdown/components/DropdownCollapsibleItem/DropdownCollapsibleItem.js

@@ -0,0 +1,75 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.DropdownCollapsibleItem = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactFeather = require("react-feather");
+
+var _utils = require("../../../utils");
+
+var _satellitePrefixer = _interopRequireDefault(require("../../../styles/helpers/satellitePrefixer"));
+
+var _ = require(".");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var DropdownCollapsibleItem = function DropdownCollapsibleItem(_ref) {
+  var title = _ref.title,
+      name = _ref.name,
+      expanded = _ref.expanded,
+      _onClick = _ref.onClick,
+      children = _ref.children;
+
+  var _useDropdownCollapsib = (0, _.useDropdownCollapsibleItemsGroup)(),
+      expandedItems = _useDropdownCollapsib.expandedItems,
+      onItemClick = _useDropdownCollapsib.onItemClick;
+
+  var _useState = (0, _react.useState)(function () {
+    return (0, _utils.uniqueId)("ddci");
+  }),
+      _useState2 = (0, _slicedToArray2["default"])(_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__*/_react["default"].createElement("div", {
+    className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["flex flex-col"])))
+  }, /*#__PURE__*/_react["default"].createElement("button", {
+    className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\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);
+      }
+    }
+  }, /*#__PURE__*/_react["default"].createElement("div", null, title), isExpanded ? /*#__PURE__*/_react["default"].createElement(_reactFeather.ChevronDown, {
+    className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["text-grey-500"]))),
+    size: "1.25em"
+  }) : /*#__PURE__*/_react["default"].createElement(_reactFeather.ChevronRight, {
+    className: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["text-grey-500"]))),
+    size: "1.25em"
+  })), isExpanded && /*#__PURE__*/_react["default"].createElement("div", {
+    className: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["bg-grey-50 border-l-2 border-grey-300"])))
+  }, children));
+};
+
+exports.DropdownCollapsibleItem = DropdownCollapsibleItem;
+var _default = DropdownCollapsibleItem;
+exports["default"] = _default;

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

@@ -0,0 +1,7 @@
+import { 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;