@algolia/satellite 1.0.0-beta.16 → 1.0.0-beta.161

package/cjs/Dropdown/index.js

@@ -0,0 +1,159 @@
+"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 _Dropdown["default"];
+  }
+});
+var _Dropdown = _interopRequireWildcard(require("./Dropdown"));
+Object.keys(_Dropdown).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) 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 (Object.prototype.hasOwnProperty.call(_exportNames, key)) 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 (Object.prototype.hasOwnProperty.call(_exportNames, key)) 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 (Object.prototype.hasOwnProperty.call(_exportNames, key)) 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 (Object.prototype.hasOwnProperty.call(_exportNames, key)) 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 (Object.prototype.hasOwnProperty.call(_exportNames, key)) 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 (Object.prototype.hasOwnProperty.call(_exportNames, key)) 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 (Object.prototype.hasOwnProperty.call(_exportNames, key)) 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 (Object.prototype.hasOwnProperty.call(_exportNames, key)) 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 (Object.prototype.hasOwnProperty.call(_exportNames, key)) 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 (Object.prototype.hasOwnProperty.call(_exportNames, key)) 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 (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _DropdownContext[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _DropdownContext[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/Dropdown/useDropdownItemProps.d.ts

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

package/cjs/Dropdown/useDropdownItemProps.js

@@ -0,0 +1,40 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDropdownItemProps = exports["default"] = 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(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) { (0, _defineProperty2["default"])(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; }
+var 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);
+};
+exports.useDropdownItemProps = useDropdownItemProps;
+var _default = useDropdownItemProps;
+exports["default"] = _default;

package/cjs/Dropzone/Dropzone.d.ts

@@ -0,0 +1,20 @@
+import type { FC } from "react";
+import { FileRejection, DropzoneProps as ReactDropZoneProps } from "react-dropzone";
+export declare type DropzoneLocale = {
+    clearInput?: 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">;
+export declare const Dropzone: FC<DropzoneProps>;
+export default Dropzone;

package/cjs/Dropzone/Dropzone.js

@@ -0,0 +1,159 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = 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 _reactFeather = require("react-feather");
+var _Button = require("../Button");
+var _Field = require("../Field");
+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, _templateObject11;
+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) { (0, _defineProperty2["default"])(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; }
+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 STATUS_CLASSNAMES = {
+  "default": "",
+  invalid: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["input-invalid"]))),
+  validated: ""
+};
+var DEFAULT_DROPZONE_LOCALE = {
+  clearInput: "Clear input"
+};
+var InvalidIcon = function InvalidIcon() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFeather.X, {
+    className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (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)(_reactFeather.Check, {
+    className: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["mr-4 h-4 w-4 text-white bg-accent-600 p-px rounded-full"])))
+  });
+};
+var 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 _useFieldState = (0, _Field.useFieldState)(),
+    status = _useFieldState.status;
+  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 ? void 0 : onChange(updatedFiles, fileRejections);
+  }, [multiple, files, onChange]);
+  var handleClear = function handleClear(evt) {
+    evt.stopPropagation();
+    setFiles([]);
+    onChange === null || onChange === void 0 ? 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 StatusIcon = status === "invalid" ? 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"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n            input group\n            ", "\n            ", "\n            min-h-16 cursor-pointer\n            ", ""])), focused && "input-focused", disabled && "input-disabled cursor-not-allowed", isDragReject ? "border-red-200 cursor-not-allowed" : isDragActive ? "border-accent-500" : null), STATUS_CLASSNAMES[status], 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,
+      onFocus: function onFocus() {
+        return setFocused(true);
+      },
+      onBlur: function onBlur() {
+        return setFocused(false);
+      }
+    }))), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (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"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["flex items-center justify-center space-x-2 display-body"]))),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFeather.UploadCloud, {
+          size: "1rem",
+          className: (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["", ""])), disabled ? "text-grey-200" : "text-grey-500")
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+          className: (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["", ""])), disabled ? "text-grey-300" : "typo-subdued"),
+          children: placeholder || "Drop ".concat(multiple ? "files" : "file", " here or click to select.")
+        })]
+      })
+    }), clearable && !disabled && !isValueEmpty && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])([""]))),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
+        className: (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["mr-2 ", ""])), focused ? "visible" : "invisible group-hover:visible"),
+        title: locale.clearInput,
+        icon: _reactFeather.X,
+        variant: "subtle",
+        size: "small",
+        tabIndex: -1,
+        "aria-hidden": true,
+        onClick: handleClear
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StatusIcon, {})]
+  }));
+};
+exports.Dropzone = Dropzone;
+var _default = Dropzone;
+exports["default"] = _default;

package/cjs/Dropzone/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Dropzone";
+export { default } from "./Dropzone";

package/cjs/Dropzone/index.js

@@ -0,0 +1,27 @@
+"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 _Dropzone["default"];
+  }
+});
+var _Dropzone = _interopRequireWildcard(require("./Dropzone"));
+Object.keys(_Dropzone).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Dropzone[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Dropzone[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/EmptyState/EmptyState.d.ts

@@ -0,0 +1,28 @@
+/// <reference types="react" />
+import type { EmptyStateProps } from "./types";
+/**
+ * Empty states are used when a list, table, chart or page has no items or data to show. This is an opportunity to provide explanation or guidance to help users progress. This can also be shown when a features hasn't been enable.
+ *
+ * #### Features empty state
+ * - Use when the CTA will unlock a key feature in the dashboard. The copy and the illustration need to sell the feature and be clear on the value for the user
+ *
+ * #### Cards empty state
+ * - Use when the CTA will unlock a new set of features inside an already activated feature. Use the context of the interface to help users understand the value of these features and the copy to give further informations
+ *
+ * #### Results/Data empty states
+ * - Use when the query lead to no result or when there is no data to show based on the user filters. Always make sure to give the user suggestions to fix it in the copy
+ *
+ * ## Best practices
+ *
+ * Empty states should:
+ *
+ * - Orient users by clearly explaining the benefit and utility of a product or feature
+ * - Simplify a complicated experience by focusing on a few key features and benefits
+ * - Use simple and clear language that empowers users to move their business forward
+ * - Be encouraging and never make users feel unsuccessful or guilty because they haven't used a product or feature
+ * - Explain the steps users need to take to activate a product or feature
+ * - Use illustrations thoughtfully
+ * - Use only one primary call-to-action button
+ */
+export declare const EmptyState: (props: EmptyStateProps) => JSX.Element;
+export default EmptyState;

package/cjs/EmptyState/EmptyState.js

@@ -0,0 +1,125 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.EmptyState = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _FlexGrid = _interopRequireDefault(require("../FlexGrid"));
+var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
+var _jsxRuntime = require("react/jsx-runtime");
+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;
+var CONTAINER_CONTEXT_CLASSNAMES = {
+  result: {
+    medium: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["max-w-xs"]))),
+    large: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["max-w-md"]))),
+    xlarge: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["max-w-xl"])))
+  },
+  feature: {
+    medium: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["max-w-sm"]))),
+    large: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["max-w-lg"]))),
+    xlarge: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["max-w-2xl"])))
+  },
+  page: {
+    medium: "",
+    large: "",
+    xlarge: ""
+  }
+};
+var MEDALLION_CONTEXT_CLASSNAMES = {
+  result: (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["mb-4"]))),
+  feature: (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["mb-6"]))),
+  page: ""
+};
+var TITLE_CONTEXT_CLASSNAMES = {
+  result: (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["display-body"]))),
+  feature: (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["display-medium"]))),
+  page: (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["display-xlarge"])))
+};
+var DESCRIPTION_CONTEXT_CLASSNAMES = {
+  result: (0, _satellitePrefixer["default"])(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["display-caption mt-2"]))),
+  feature: (0, _satellitePrefixer["default"])(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["display-body mt-2"]))),
+  page: (0, _satellitePrefixer["default"])(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["display-small mt-6"])))
+};
+var ACTIONS_CONTEXT_CLASSNAMES = {
+  result: (0, _satellitePrefixer["default"])(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])(["mt-1"]))),
+  feature: (0, _satellitePrefixer["default"])(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2["default"])(["mt-3"]))),
+  page: (0, _satellitePrefixer["default"])(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2["default"])(["mt-6 md:flex-row"])))
+};
+var renderEmptyState = function renderEmptyState(_ref) {
+  var title = _ref.title,
+    description = _ref.description,
+    actions = _ref.actions,
+    actionsDirection = _ref.actionsDirection,
+    medallion = _ref.medallion,
+    illustration = _ref.illustration,
+    _ref$usageContext = _ref.usageContext,
+    usageContext = _ref$usageContext === void 0 ? "feature" : _ref$usageContext,
+    _ref$width = _ref.width,
+    width = _ref$width === void 0 ? "medium" : _ref$width,
+    _ref$centered = _ref.centered,
+    centered = _ref$centered === void 0 ? false : _ref$centered;
+  var containerClassNames = (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2["default"])(["flex items-center"]))), CONTAINER_CONTEXT_CLASSNAMES[usageContext][width], centered ? (0, _satellitePrefixer["default"])(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2["default"])(["justify-center text-center lg:flex-col"]))) : (0, _satellitePrefixer["default"])(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2["default"])(["justify-between flex-col lg:flex-row"]))));
+  var titleClassNames = (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2["default"])(["text-grey-900"]))), TITLE_CONTEXT_CLASSNAMES[usageContext]);
+  var descriptionClassNames = (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteral2["default"])(["text-grey-600"]))), DESCRIPTION_CONTEXT_CLASSNAMES[usageContext]);
+  var actionsClassNames = (0, _clsx["default"])(ACTIONS_CONTEXT_CLASSNAMES[usageContext]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: containerClassNames,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: (0, _satellitePrefixer["default"])(_templateObject23 || (_templateObject23 = (0, _taggedTemplateLiteral2["default"])(["min-w-2/5"]))),
+      children: [centered && !!medallion && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: MEDALLION_CONTEXT_CLASSNAMES[usageContext],
+        children: medallion
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
+        className: titleClassNames,
+        children: title
+      }), !!description && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: descriptionClassNames,
+        children: description
+      }), !!actions && /*#__PURE__*/(0, _jsxRuntime.jsx)(_FlexGrid["default"], {
+        className: actionsClassNames,
+        alignment: centered ? "center" : "leading",
+        distribution: centered ? "center" : "leading",
+        direction: actionsDirection !== null && actionsDirection !== void 0 ? actionsDirection : centered ? "column" : "row",
+        spacing: "sm",
+        children: actions
+      })]
+    }), !!illustration && !centered && usageContext === "page" && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _satellitePrefixer["default"])(_templateObject24 || (_templateObject24 = (0, _taggedTemplateLiteral2["default"])(["empty-state-illustration ml-16 hidden lg:flex items-center justify-center"]))),
+      children: illustration
+    })]
+  });
+};
+
+/**
+ * Empty states are used when a list, table, chart or page has no items or data to show. This is an opportunity to provide explanation or guidance to help users progress. This can also be shown when a features hasn't been enable.
+ *
+ * #### Features empty state
+ * - Use when the CTA will unlock a key feature in the dashboard. The copy and the illustration need to sell the feature and be clear on the value for the user
+ *
+ * #### Cards empty state
+ * - Use when the CTA will unlock a new set of features inside an already activated feature. Use the context of the interface to help users understand the value of these features and the copy to give further informations
+ *
+ * #### Results/Data empty states
+ * - Use when the query lead to no result or when there is no data to show based on the user filters. Always make sure to give the user suggestions to fix it in the copy
+ *
+ * ## Best practices
+ *
+ * Empty states should:
+ *
+ * - Orient users by clearly explaining the benefit and utility of a product or feature
+ * - Simplify a complicated experience by focusing on a few key features and benefits
+ * - Use simple and clear language that empowers users to move their business forward
+ * - Be encouraging and never make users feel unsuccessful or guilty because they haven't used a product or feature
+ * - Explain the steps users need to take to activate a product or feature
+ * - Use illustrations thoughtfully
+ * - Use only one primary call-to-action button
+ */
+var EmptyState = function EmptyState(props) {
+  return renderEmptyState(props);
+};
+exports.EmptyState = EmptyState;
+var _default = EmptyState;
+exports["default"] = _default;

package/cjs/EmptyState/EmptyState.tailwind.d.ts

@@ -0,0 +1,5 @@
+export = emptyStatePlugin;
+declare const emptyStatePlugin: {
+    handler: import("tailwindcss/types/config").PluginCreator;
+    config?: Partial<import("tailwindcss").Config> | undefined;
+};

package/cjs/EmptyState/EmptyState.tailwind.js

@@ -0,0 +1,15 @@
+"use strict";
+
+// @ts-check
+var plugin = require("tailwindcss/plugin");
+var emptyStatePlugin = plugin(function (_ref) {
+  var addComponents = _ref.addComponents;
+  // Empty State illustration
+  addComponents({
+    ".empty-state-illustration": {
+      minWidth: "500px",
+      minHeight: "500px"
+    }
+  });
+});
+module.exports = emptyStatePlugin;

package/cjs/EmptyState/index.d.ts

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