@algolia/satellite 1.0.0-beta.18 → 1.0.0-beta.181

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

@@ -0,0 +1,10 @@
+import type { VFC } from "react";
+import type { IconComponentType } from "../../Icons";
+import type { DropdownBaseItemProps } from "../useDropdownItemProps";
+export declare type DropdownLinkItemProps = DropdownBaseItemProps<HTMLAnchorElement> & JSX.IntrinsicElements["a"] & {
+    href: string;
+    /** Left aligned icon */
+    startIcon?: IconComponentType;
+};
+/** @deprecated */
+export declare const DropdownLinkItem: VFC<DropdownLinkItemProps>;

package/cjs/Dropdown/components/DropdownLinkItem.js

@@ -0,0 +1,54 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DropdownLinkItem = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _Icons = require("../../Icons");
+var _satellitePrefixer = _interopRequireDefault(require("../../styles/helpers/satellitePrefixer"));
+var _useLinkProps = require("../../utils/useLinkProps");
+var _useDropdownItemProps = require("../useDropdownItemProps");
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var _excluded = ["toggle", "disabled", "startIcon", "className", "children"];
+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) { (0, _defineProperty2["default"])(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; }
+var _DropdownLinkItem = function _DropdownLinkItem(props) {
+  var dropdownItemProps = (0, _useDropdownItemProps.useDropdownItemProps)(props);
+  var linkProps = (0, _useLinkProps.useLinkProps)(_objectSpread(_objectSpread({}, props), dropdownItemProps));
+  var isExternalLink = linkProps.target === "_blank";
+  // `toggle` and `disabled` is destructured here because we don't want them passed to the `a`
+  var _props$dropdownItemPr = _objectSpread(_objectSpread(_objectSpread({}, props), dropdownItemProps), linkProps),
+    toggle = _props$dropdownItemPr.toggle,
+    disabled = _props$dropdownItemPr.disabled,
+    StartIcon = _props$dropdownItemPr.startIcon,
+    className = _props$dropdownItemPr.className,
+    children = _props$dropdownItemPr.children,
+    mergedProps = (0, _objectWithoutProperties2["default"])(_props$dropdownItemPr, _excluded);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("a", _objectSpread(_objectSpread({
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["flex items-center"]))), className)
+  }, mergedProps), {}, {
+    children: [StartIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(StartIcon, {
+      className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["mr-2 shrink-0 text-grey-500"]))),
+      width: "1rem",
+      height: "1rem"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["w-full truncate"]))),
+      children: children
+    }), isExternalLink && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icons.ExternalLinkIcon, {
+      className: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["ml-1 shrink-0"]))),
+      size: "1em"
+    })]
+  }));
+};
+_DropdownLinkItem.defaultProps = {
+  toggle: true
+};
+
+/** @deprecated */
+var DropdownLinkItem = exports.DropdownLinkItem = _DropdownLinkItem;

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

@@ -0,0 +1,8 @@
+import type { ReactNode, VFC } from "react";
+import type { RadioButtonProps } from "../../RadioGroup";
+import type { DropdownBaseItemProps } from "../useDropdownItemProps";
+export interface DropdownRadioItemProps extends RadioButtonProps, DropdownBaseItemProps<HTMLInputElement> {
+    children?: ReactNode;
+}
+/** @deprecated */
+export declare const DropdownRadioItem: VFC<DropdownRadioItemProps>;

package/cjs/Dropdown/components/DropdownRadioItem.js

@@ -0,0 +1,46 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DropdownRadioItem = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _RadioGroup = require("../../RadioGroup");
+var _satellitePrefixer = _interopRequireDefault(require("../../styles/helpers/satellitePrefixer"));
+var _useDropdownItemProps = require("../useDropdownItemProps");
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject, _templateObject2, _templateObject3;
+var _excluded = ["className", "toggle", "children"];
+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) { (0, _defineProperty2["default"])(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; }
+/** @deprecated */
+var _DropdownRadioItem = function _DropdownRadioItem(props) {
+  var dropdownItemProps = (0, _useDropdownItemProps.useDropdownItemProps)(props);
+  // `toggle` is destructured here because we don't want it passed to the `RadioButton`
+  var _props$dropdownItemPr = _objectSpread(_objectSpread({}, props), dropdownItemProps),
+    className = _props$dropdownItemPr.className,
+    toggle = _props$dropdownItemPr.toggle,
+    children = _props$dropdownItemPr.children,
+    radioProps = (0, _objectWithoutProperties2["default"])(_props$dropdownItemPr, _excluded);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+    className: className,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["flex-1 flex items-start py-2 overflow-hidden"]))),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["flex-1 truncate mr-4"]))),
+        children: children
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioGroup.RadioButton, _objectSpread({
+        className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["mt-2px mr-2px"])))
+      }, radioProps))]
+    })
+  });
+};
+_DropdownRadioItem.defaultProps = {
+  toggle: false
+};
+
+/** @deprecated */
+var DropdownRadioItem = exports.DropdownRadioItem = _DropdownRadioItem;

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

@@ -0,0 +1,6 @@
+import type { ReactNode, VFC } from "react";
+export declare type DropdownTitleProps = JSX.IntrinsicElements["h4"] & {
+    children: ReactNode;
+};
+/** @deprecated */
+export declare const DropdownTitle: VFC<DropdownTitleProps>;

package/cjs/Dropdown/components/DropdownTitle.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DropdownTitle = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _satellitePrefixer = _interopRequireDefault(require("../../styles/helpers/satellitePrefixer"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject;
+var _excluded = ["className"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(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; }
+/** @deprecated */
+var DropdownTitle = exports.DropdownTitle = function DropdownTitle(_ref) {
+  var className = _ref.className,
+    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("h4", _objectSpread(_objectSpread({}, props), {}, {
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["flex items-center h-10 px-4\n          border-grey-100 border-b border-t first:border-t-0\n          display-subheading"]))), className)
+  }));
+};

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

@@ -0,0 +1,11 @@
+import type { ReactNode, VFC } from "react";
+import type { IconComponentType } from "../../Icons";
+import type { ToggleProps } from "../../Toggle";
+import type { DropdownBaseItemProps } from "../useDropdownItemProps";
+export interface DropdownToggleItemProps extends ToggleProps, DropdownBaseItemProps<HTMLInputElement> {
+    /** Left aligned icon */
+    startIcon?: IconComponentType;
+    children?: ReactNode;
+}
+/** @deprecated */
+export declare const DropdownToggleItem: VFC<DropdownToggleItemProps>;

package/cjs/Dropdown/components/DropdownToggleItem.js

@@ -0,0 +1,49 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DropdownToggleItem = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _satellitePrefixer = _interopRequireDefault(require("../../styles/helpers/satellitePrefixer"));
+var _Toggle = require("../../Toggle");
+var _useDropdownItemProps = require("../useDropdownItemProps");
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var _excluded = ["className", "toggle", "startIcon", "children"];
+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) { (0, _defineProperty2["default"])(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; }
+/** @deprecated */
+var _DropdownToggleItem = function _DropdownToggleItem(props) {
+  var dropdownItemProps = (0, _useDropdownItemProps.useDropdownItemProps)(props);
+  // `toggle` is destructured here because we don't want it passed to the `Toggle`
+  var _props$dropdownItemPr = _objectSpread(_objectSpread({}, props), dropdownItemProps),
+    className = _props$dropdownItemPr.className,
+    toggle = _props$dropdownItemPr.toggle,
+    StartIcon = _props$dropdownItemPr.startIcon,
+    children = _props$dropdownItemPr.children,
+    toggleProps = (0, _objectWithoutProperties2["default"])(_props$dropdownItemPr, _excluded);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["flex items-center"]))), className),
+    children: [StartIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(StartIcon, {
+      className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["mr-2 shrink-0 text-grey-500"]))),
+      width: "1rem",
+      height: "1rem"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["flex-1 truncate mr-4"]))),
+      children: children
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toggle.Toggle, _objectSpread({
+      className: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["shrink-0"])))
+    }, toggleProps))]
+  });
+};
+_DropdownToggleItem.defaultProps = {
+  toggle: false
+};
+
+/** @deprecated */
+var DropdownToggleItem = exports.DropdownToggleItem = _DropdownToggleItem;

package/cjs/Dropdown/index.d.ts

@@ -0,0 +1,12 @@
+export * from "./Dropdown";
+export * from "./DropdownButton";
+export * from "./components/DropdownRadioItem";
+export * from "./components/DropdownToggleItem";
+export * from "./components/DropdownLinkItem";
+export * from "./components/DropdownButtonItem";
+export * from "./components/DropdownFooterItem";
+export * from "./components/DropdownCollapsibleItem";
+export * from "./components/DropdownDivider";
+export * from "./components/DropdownTitle";
+export * from "./useDropdownItemProps";
+export * from "./DropdownContext";

package/cjs/Dropdown/index.js

@@ -0,0 +1,137 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _Dropdown = require("./Dropdown");
+Object.keys(_Dropdown).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Dropdown[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Dropdown[key];
+    }
+  });
+});
+var _DropdownButton = require("./DropdownButton");
+Object.keys(_DropdownButton).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _DropdownButton[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _DropdownButton[key];
+    }
+  });
+});
+var _DropdownRadioItem = require("./components/DropdownRadioItem");
+Object.keys(_DropdownRadioItem).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _DropdownRadioItem[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _DropdownRadioItem[key];
+    }
+  });
+});
+var _DropdownToggleItem = require("./components/DropdownToggleItem");
+Object.keys(_DropdownToggleItem).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _DropdownToggleItem[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _DropdownToggleItem[key];
+    }
+  });
+});
+var _DropdownLinkItem = require("./components/DropdownLinkItem");
+Object.keys(_DropdownLinkItem).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _DropdownLinkItem[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _DropdownLinkItem[key];
+    }
+  });
+});
+var _DropdownButtonItem = require("./components/DropdownButtonItem");
+Object.keys(_DropdownButtonItem).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _DropdownButtonItem[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _DropdownButtonItem[key];
+    }
+  });
+});
+var _DropdownFooterItem = require("./components/DropdownFooterItem");
+Object.keys(_DropdownFooterItem).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _DropdownFooterItem[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _DropdownFooterItem[key];
+    }
+  });
+});
+var _DropdownCollapsibleItem = require("./components/DropdownCollapsibleItem");
+Object.keys(_DropdownCollapsibleItem).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _DropdownCollapsibleItem[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _DropdownCollapsibleItem[key];
+    }
+  });
+});
+var _DropdownDivider = require("./components/DropdownDivider");
+Object.keys(_DropdownDivider).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _DropdownDivider[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _DropdownDivider[key];
+    }
+  });
+});
+var _DropdownTitle = require("./components/DropdownTitle");
+Object.keys(_DropdownTitle).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _DropdownTitle[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _DropdownTitle[key];
+    }
+  });
+});
+var _useDropdownItemProps = require("./useDropdownItemProps");
+Object.keys(_useDropdownItemProps).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useDropdownItemProps[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _useDropdownItemProps[key];
+    }
+  });
+});
+var _DropdownContext = require("./DropdownContext");
+Object.keys(_DropdownContext).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _DropdownContext[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _DropdownContext[key];
+    }
+  });
+});

package/cjs/Dropdown/useDropdownItemProps.d.ts

@@ -0,0 +1,20 @@
+import type { EventHandler, MouseEvent } from "react";
+export interface DropdownBaseItemProps<T extends HTMLElement = HTMLElement> {
+    className?: string;
+    toggle?: boolean;
+    disabled?: boolean;
+    onClick?: EventHandler<MouseEvent<T>>;
+}
+export declare const useDropdownItemProps: <T extends HTMLElement = HTMLElement>(props: DropdownBaseItemProps<T>) => {
+    disabled: boolean;
+    "aria-disabled": boolean;
+    tabIndex: number;
+    onClick: undefined;
+    className: string;
+} | {
+    disabled?: undefined;
+    "aria-disabled"?: undefined;
+    tabIndex?: undefined;
+    onClick: (evt: MouseEvent<T, globalThis.MouseEvent>) => void;
+    className: string;
+};

package/cjs/Dropdown/useDropdownItemProps.js

@@ -0,0 +1,37 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDropdownItemProps = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
+var _DropdownContext = require("./DropdownContext");
+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) { (0, _defineProperty2["default"])(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; }
+var useDropdownItemProps = exports.useDropdownItemProps = function useDropdownItemProps(props) {
+  var _useDropdownContext = (0, _DropdownContext.useDropdownContext)(),
+    showMenu = _useDropdownContext.showMenu;
+  var className = (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n      flex items-center\n      min-h-10 px-4 text-left\n      focus:no-underline hover:no-underline\n      ", "\n    "])), props.disabled ? "text-grey-300 cursor-not-allowed" : "text-inherit hover:bg-grey-100 focus:bg-grey-100 focus:outline-none cursor-pointer"), props.className);
+  var disabledProps = props.disabled ? {
+    disabled: true,
+    "aria-disabled": true,
+    tabIndex: -1,
+    onClick: undefined
+  } : {};
+  return _objectSpread({
+    className: className,
+    onClick: function onClick(evt) {
+      if (props.onClick) {
+        props.onClick(evt);
+      }
+      if (!evt.defaultPrevented && props.toggle) {
+        showMenu(false);
+      }
+    }
+  }, disabledProps);
+};

package/cjs/Dropzone/Dropzone.d.ts

@@ -0,0 +1,25 @@
+import type { VFC } from "react";
+import type { FileRejection, DropzoneProps as ReactDropZoneProps } from "react-dropzone";
+export declare type DropzoneLocale = {
+    clearInput?: string;
+    placeholder?: (multiple: boolean) => string;
+};
+export interface DropzoneBaseProps {
+    id?: string;
+    onChange?(acceptedFiles: File[], fileRejections: FileRejection[]): void;
+    placeholder?: string;
+    /** @default false */
+    clearable?: boolean;
+    /** @ignore */
+    className?: string;
+    /** @default false */
+    multiple?: boolean;
+    locale?: DropzoneLocale;
+}
+export declare type DropzoneProps = DropzoneBaseProps & Omit<ReactDropZoneProps, "onDrop" | "onDropAccepted" | "onDropRejected" | "multiple">;
+/**
+ * The `Dropzone` component is used to upload files.
+ *
+ * See the [Dropzone documentation page](https://satellite.algolia.com/components/forms/dropzone) for more information.
+ */
+export declare const Dropzone: VFC<DropzoneProps>;

package/cjs/Dropzone/Dropzone.js

@@ -0,0 +1,163 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Dropzone = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _react = require("react");
+var _reactDropzone = require("react-dropzone");
+var _Button = require("../Button");
+var _Field = require("../Field");
+var _Icons = require("../Icons");
+var _Satellite = require("../Satellite");
+var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
+var _formatters = require("../utils/formatters");
+var _uniqueId = require("../utils/uniqueId");
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["id", "placeholder", "disabled", "multiple", "clearable", "onChange", "className", "locale"];
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
+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) { (0, _defineProperty2["default"])(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; }
+var DropzoneFileItem = function DropzoneFileItem(_ref) {
+  var file = _ref.file;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+    className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["truncate text-grey-900"]))),
+    children: [file.name, " - ", (0, _formatters.formatHumanSize)(file.size)]
+  });
+};
+var DEFAULT_DROPZONE_LOCALE = {
+  clearInput: "Clear input",
+  placeholder: function placeholder(multiple) {
+    return "Drop ".concat(multiple ? "files" : "file", " here or click to select.");
+  }
+};
+var InvalidIcon = function InvalidIcon() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icons.XIcon, {
+    className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["mr-4 h-4 w-4 text-white bg-red-700 p-px rounded-full"])))
+  });
+};
+var ValidatedIcon = function ValidatedIcon() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icons.CheckIcon, {
+    className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["mr-4 h-4 w-4 text-white bg-accent-600 p-px rounded-full"])))
+  });
+};
+
+/**
+ * The `Dropzone` component is used to upload files.
+ *
+ * See the [Dropzone documentation page](https://satellite.algolia.com/components/forms/dropzone) for more information.
+ */
+var Dropzone = exports.Dropzone = function Dropzone(_ref2) {
+  var id = _ref2.id,
+    placeholder = _ref2.placeholder,
+    disabled = _ref2.disabled,
+    _ref2$multiple = _ref2.multiple,
+    multiple = _ref2$multiple === void 0 ? false : _ref2$multiple,
+    _ref2$clearable = _ref2.clearable,
+    clearable = _ref2$clearable === void 0 ? false : _ref2$clearable,
+    onChange = _ref2.onChange,
+    className = _ref2.className,
+    propsLocale = _ref2.locale,
+    props = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
+  var contextLocale = (0, _Satellite.useLocale)("dropzone");
+  var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_DROPZONE_LOCALE), contextLocale), propsLocale);
+  var _useState = (0, _react.useState)([]),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    files = _useState2[0],
+    setFiles = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    focused = _useState4[0],
+    setFocused = _useState4[1];
+  var _useField = (0, _Field.useField)(),
+    status = _useField.state.status,
+    labelId = _useField.labelId;
+  var onDrop = (0, _react.useCallback)(function (acceptedFiles, fileRejections) {
+    var updatedFiles = multiple ? [].concat((0, _toConsumableArray2["default"])(files), (0, _toConsumableArray2["default"])(acceptedFiles)) : acceptedFiles;
+    setFiles(updatedFiles);
+    onChange === null || onChange === void 0 || onChange(updatedFiles, fileRejections);
+  }, [multiple, files, onChange]);
+  var handleClear = function handleClear(evt) {
+    evt.stopPropagation();
+    setFiles([]);
+    onChange === null || onChange === void 0 || onChange([], []);
+  };
+  var _useDropzone = (0, _reactDropzone.useDropzone)(_objectSpread(_objectSpread({
+      disabled: disabled,
+      multiple: multiple
+    }, props), {}, {
+      onDrop: onDrop
+    })),
+    getRootProps = _useDropzone.getRootProps,
+    getInputProps = _useDropzone.getInputProps,
+    isDragActive = _useDropzone.isDragActive,
+    isDragReject = _useDropzone.isDragReject;
+  var dropzoneId = (0, _react.useMemo)(function () {
+    return id !== null && id !== void 0 ? id : (0, _uniqueId.uniqueId)("dropzone");
+  }, [id]);
+  var isValueEmpty = files.length === 0;
+  var isInvalid = status === "invalid";
+  var StatusIcon = isInvalid ? InvalidIcon : status === "validated" ? ValidatedIcon : _react.Fragment;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", _objectSpread(_objectSpread({}, getRootProps({
+    "aria-controls": dropzoneId,
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n            relative flex items-center group/dropzone\n            border border-grey-500 rounded\n            shadow-field\n            overflow-hidden transition-all ease-in-out delay-100\n            focus-within:border-accent-600 focus-within:shadow-field-focused\n            min-h-16\n            ", "\n            ", "\n            ", "\n            ", ""])), focused && "border-accent-600 shadow-field-focused", disabled ? "cursor-not-allowed border-grey-200/30 shadow-none bg-gradient-to-b from-white to-grey-100" : "cursor-pointer", isDragReject && !disabled ? "border-red-200 cursor-not-allowed" : isDragActive ? "border-accent-500 cursor-pointer" : null, isInvalid ? "bg-red-100 border-red-700 hover:bg-red-50" : "bg-white hover:bg-grey-50"), className),
+    onClick: function onClick(evt) {
+      // Helps with https://github.com/react-dropzone/react-dropzone/issues/182
+      if (evt.target.closest("label")) {
+        evt.stopPropagation();
+      }
+    }
+  })), {}, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", _objectSpread({}, getInputProps({
+      id: dropzoneId,
+      "aria-labelledby": labelId,
+      onFocus: function onFocus() {
+        return setFocused(true);
+      },
+      onBlur: function onBlur() {
+        return setFocused(false);
+      }
+    }))), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["flex-1 flex items-center justify-center space-x-2 display-body"]))),
+      children: files.length > 0 ? files.length > 1 ? /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
+        children: files.map(function (file) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(DropzoneFileItem, {
+              file: file
+            })
+          }, file.name);
+        })
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(DropzoneFileItem, {
+        file: files[0]
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["flex items-center justify-center space-x-2 display-body"]))),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Icons.UploadCloudIcon, {
+          size: "1rem",
+          className: (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["", ""])), disabled ? "text-grey-200" : "text-grey-500")
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+          className: (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["", ""])), disabled ? "text-grey-300" : "typo-subdued"),
+          children: placeholder || locale.placeholder(multiple)
+        })]
+      })
+    }), clearable && !disabled && !isValueEmpty && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])([""]))),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
+        className: (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["mr-2 ", ""])), focused ? "visible" : "invisible group-hover/dropzone:visible"),
+        title: locale.clearInput,
+        icon: _Icons.XIcon,
+        variant: "subtle",
+        size: "small",
+        tabIndex: -1,
+        "aria-hidden": true,
+        onClick: handleClear
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StatusIcon, {})]
+  }));
+};

package/cjs/Dropzone/index.d.ts

@@ -0,0 +1 @@
+export * from "./Dropzone";

package/cjs/Dropzone/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _Dropzone = require("./Dropzone");
+Object.keys(_Dropzone).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Dropzone[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Dropzone[key];
+    }
+  });
+});