@algolia/satellite 1.0.0-v3.99 → 1.1.0

package/Flag/Flag.d.ts

@@ -1,5 +0,0 @@
-import { FunctionComponent } from "react";
-import { Notification } from "./types";
-export declare type FlagProps = Omit<Notification, "id" | "content">;
-export declare const Flag: FunctionComponent<FlagProps>;
-export default Flag;

package/Flag/Flag.js

@@ -1,272 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = exports.Flag = void 0;
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _reactFeather = require("react-feather");
-
-var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
-
-var _ProgressSpinner = _interopRequireDefault(require("../ProgressSpinner"));
-
-var _Button = require("../Button");
-
-var _Card = require("../Card");
-
-function _templateObject19() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["text-grey-600 mt-2"]);
-
-  _templateObject19 = function _templateObject19() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject18() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["flex justify-between"]);
-
-  _templateObject18 = function _templateObject18() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject17() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["flex-1 ml-4"]);
-
-  _templateObject17 = function _templateObject17() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject16() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["flex-shrink-0 text-white rounded-full p-2px mt-1"]);
-
-  _templateObject16 = function _templateObject16() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject15() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["mt-1"]);
-
-  _templateObject15 = function _templateObject15() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject14() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["p-4 flex"]);
-
-  _templateObject14 = function _templateObject14() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject13() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["flag shadow-z500"]);
-
-  _templateObject13 = function _templateObject13() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject12() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["border-red-500"]);
-
-  _templateObject12 = function _templateObject12() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject11() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["border-orange-500"]);
-
-  _templateObject11 = function _templateObject11() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject10() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["border-green-500"]);
-
-  _templateObject10 = function _templateObject10() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject9() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["border-blue-500"]);
-
-  _templateObject9 = function _templateObject9() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject8() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["border-accent-500"]);
-
-  _templateObject8 = function _templateObject8() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject7() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["border-grey-500"]);
-
-  _templateObject7 = function _templateObject7() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject6() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["bg-red-500"]);
-
-  _templateObject6 = function _templateObject6() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject5() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["bg-orange-500"]);
-
-  _templateObject5 = function _templateObject5() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject4() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["bg-green-500"]);
-
-  _templateObject4 = function _templateObject4() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject3() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["bg-blue-500"]);
-
-  _templateObject3 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["bg-accent-500"]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["bg-grey-500"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-var VARIANT_CLASSNAMES = {
-  grey: (0, _satellitePrefixer["default"])(_templateObject()),
-  accent: (0, _satellitePrefixer["default"])(_templateObject2()),
-  blue: (0, _satellitePrefixer["default"])(_templateObject3()),
-  green: (0, _satellitePrefixer["default"])(_templateObject4()),
-  orange: (0, _satellitePrefixer["default"])(_templateObject5()),
-  red: (0, _satellitePrefixer["default"])(_templateObject6())
-};
-var VARIANT_SPINNER_CLASSNAMES = {
-  grey: (0, _satellitePrefixer["default"])(_templateObject7()),
-  accent: (0, _satellitePrefixer["default"])(_templateObject8()),
-  blue: (0, _satellitePrefixer["default"])(_templateObject9()),
-  green: (0, _satellitePrefixer["default"])(_templateObject10()),
-  orange: (0, _satellitePrefixer["default"])(_templateObject11()),
-  red: (0, _satellitePrefixer["default"])(_templateObject12())
-};
-
-var Flag = function Flag(_ref) {
-  var onDismiss = _ref.onDismiss,
-      title = _ref.title,
-      _ref$icon = _ref.icon,
-      Icon = _ref$icon === void 0 ? _reactFeather.Check : _ref$icon,
-      _ref$loading = _ref.loading,
-      loading = _ref$loading === void 0 ? false : _ref$loading,
-      _ref$variant = _ref.variant,
-      variant = _ref$variant === void 0 ? "accent" : _ref$variant,
-      children = _ref.children;
-  var hasTitle = title !== undefined;
-  return _react["default"].createElement(_Card.Card, {
-    fullBleed: true,
-    className: (0, _satellitePrefixer["default"])(_templateObject13())
-  }, _react["default"].createElement("div", {
-    className: (0, _satellitePrefixer["default"])(_templateObject14())
-  }, loading ? _react["default"].createElement(_ProgressSpinner["default"], {
-    size: 16,
-    className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject15()), VARIANT_SPINNER_CLASSNAMES[variant])
-  }) : _react["default"].createElement(Icon, {
-    className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject16()), VARIANT_CLASSNAMES[variant]),
-    size: 16
-  }), _react["default"].createElement("div", {
-    className: (0, _satellitePrefixer["default"])(_templateObject17())
-  }, _react["default"].createElement("div", {
-    className: (0, _satellitePrefixer["default"])(_templateObject18())
-  }, hasTitle ? _react["default"].createElement("h3", null, title) : _react["default"].createElement("div", null, children), onDismiss && _react["default"].createElement(_Button.IconButton, {
-    icon: _reactFeather.X,
-    title: "Dismiss",
-    variant: "subtle",
-    size: "small",
-    onClick: onDismiss
-  })), hasTitle && children && _react["default"].createElement("div", {
-    className: (0, _satellitePrefixer["default"])(_templateObject19())
-  }, children))));
-};
-
-exports.Flag = Flag;
-var _default = Flag;
-exports["default"] = _default;

package/Flag/Flag.tailwind.d.ts

@@ -1,5 +0,0 @@
-export = flagPlugin;
-/**
- * @type {import('../tailwind-types').TailwindPlugin}
- */
-declare const flagPlugin: import('../tailwind-types').TailwindPlugin;

package/Flag/Flag.tailwind.js

@@ -1,49 +0,0 @@
-"use strict";
-
-// @ts-check
-
-/**
- * @type {import('../tailwind-types').TailwindPlugin}
- */
-var flagPlugin = function flagPlugin(_ref) {
-  var addComponents = _ref.addComponents,
-      theme = _ref.theme;
-
-  /**
-   * @param {string} color
-   */
-  var TRANSITION_TIMEOUT = 500;
-  addComponents({
-    ".flag": {
-      width: 320
-    }
-  });
-  addComponents({
-    ".flags": {
-      zIndex: theme("zIndex.notification")
-    },
-    ".flags_item": {
-      marginTop: theme("spacing.4")
-    },
-    ".flags_item-enter": {
-      opacity: 0.01,
-      transform: "translate(0, 80px)"
-    },
-    ".flags_item-enter-active": {
-      opacity: 1,
-      transform: "translate(0, 0)",
-      transition: "all ".concat(TRANSITION_TIMEOUT, "ms ease-in")
-    },
-    ".flags_item-exit": {
-      opacity: 1,
-      transform: "translate(0, 0)"
-    },
-    ".flags_item-exit-active": {
-      opacity: 0.01,
-      transform: "translate(0, 80px)",
-      transition: "all ".concat(TRANSITION_TIMEOUT, "ms ease-in")
-    }
-  });
-};
-
-module.exports = flagPlugin;

package/Flag/Flags.d.ts

@@ -1,48 +0,0 @@
-import React from "react";
-import { Notification } from "./types";
-export interface FlagsProps {
-    /**
-     * Array of notifications
-     * @example [{ id: "test", title: "Test", content: "Example" }]
-     */
-    notifications: Notification[];
-}
-/**
- * Use flags for messages containing confirmations, alerts, and acknowledgments that require minimal user interaction. These event-driven messages appear at the bottom of the screen and overlay any content.
- * For critical messaging about loss of data or functionality, please use banners.
- *
- * ## Structure
- *
- * - **Icon (or avatar) and title**: flag messages should always contain a concise title and an appropriate icon
- * - **Message (optional)**: If the text overflows, truncate using an ellipsis
- * - **Actions (optional)**: two links max that enable users to act on the flag's content
- * - **Dismiss**: use to close the flag
- *
- * ## Variations
- *
- * ### Warning
- *
- * Warning messages appear before we request the user to take action. This is usually in anticipation of a significant change. Have empathy for the user. Inform, but don't alarm. If the warning comes before an action, clearly communicate what will happen if the they proceed, and provide an alternative where possible.
- *
- * ### Error
- *
- * Error messages let the user know that something has gone wrong after they've tried to do something. Explain the problem and provide the user with a next step or an alternative. Keep the message simple and direct, avoid blame and accept if something is our fault.
- *
- * ### Success
- *
- * Success messages let the user know that they have completed an action. For these messages, it's best to reaffirm the outcome and get out of the user's way. If they have just created something, give them an option to view it.
- *
- * ### Info / Loading
- *
- * Info messages alert the user to additional information without requiring an action. Inform the user about something that might help or impact them.
- *
- * ## Interaction
- *
- * Flags can be dismissed by selecting the 'x' or will fade away after X seconds. The user can pause the auto-dismiss by hovering over the flag.
- *
- * ## Multiple flags
- *
- * When there are multiple flags, they will stack on top of one another with the most recent flag on top. When a user dismisses a flag, any older flags 'below' will come to the top. Careful consideration should be taken to take into account the ordering and priority of flags in the stack. Never use dismissible and non-dismissible flags in a stack as flags that automatically dismiss can do so and not be visible to the user.
- */
-export declare const Flags: ({ notifications }: FlagsProps) => React.ReactPortal;
-export default Flags;

package/Flag/Flags.js

@@ -1,116 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = exports.Flags = void 0;
-
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _reactDom = require("react-dom");
-
-var _reactTransitionGroup = require("react-transition-group");
-
-var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
-
-var _Flag = _interopRequireDefault(require("./Flag"));
-
-function _templateObject3() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["flags_item"]);
-
-  _templateObject3 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["flags_item"]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["flags bottom-0 right-0 fixed flex flex-col items-end p-4"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-var TRANSITION_TIMEOUT = 500;
-/**
- * Use flags for messages containing confirmations, alerts, and acknowledgments that require minimal user interaction. These event-driven messages appear at the bottom of the screen and overlay any content.
- * For critical messaging about loss of data or functionality, please use banners.
- *
- * ## Structure
- *
- * - **Icon (or avatar) and title**: flag messages should always contain a concise title and an appropriate icon
- * - **Message (optional)**: If the text overflows, truncate using an ellipsis
- * - **Actions (optional)**: two links max that enable users to act on the flag's content
- * - **Dismiss**: use to close the flag
- *
- * ## Variations
- *
- * ### Warning
- *
- * Warning messages appear before we request the user to take action. This is usually in anticipation of a significant change. Have empathy for the user. Inform, but don't alarm. If the warning comes before an action, clearly communicate what will happen if the they proceed, and provide an alternative where possible.
- *
- * ### Error
- *
- * Error messages let the user know that something has gone wrong after they've tried to do something. Explain the problem and provide the user with a next step or an alternative. Keep the message simple and direct, avoid blame and accept if something is our fault.
- *
- * ### Success
- *
- * Success messages let the user know that they have completed an action. For these messages, it's best to reaffirm the outcome and get out of the user's way. If they have just created something, give them an option to view it.
- *
- * ### Info / Loading
- *
- * Info messages alert the user to additional information without requiring an action. Inform the user about something that might help or impact them.
- *
- * ## Interaction
- *
- * Flags can be dismissed by selecting the 'x' or will fade away after X seconds. The user can pause the auto-dismiss by hovering over the flag.
- *
- * ## Multiple flags
- *
- * When there are multiple flags, they will stack on top of one another with the most recent flag on top. When a user dismisses a flag, any older flags 'below' will come to the top. Careful consideration should be taken to take into account the ordering and priority of flags in the stack. Never use dismissible and non-dismissible flags in a stack as flags that automatically dismiss can do so and not be visible to the user.
- */
-
-var Flags = function Flags(_ref) {
-  var _ref$notifications = _ref.notifications,
-      notifications = _ref$notifications === void 0 ? [] : _ref$notifications;
-  return (0, _reactDom.createPortal)(_react["default"].createElement(_reactTransitionGroup.TransitionGroup, {
-    className: (0, _satellitePrefixer["default"])(_templateObject()),
-    component: "ul"
-  }, notifications.map(function (_ref2) {
-    var content = _ref2.content,
-        id = _ref2.id,
-        rest = (0, _objectWithoutProperties2["default"])(_ref2, ["content", "id"]);
-    return _react["default"].createElement(_reactTransitionGroup.CSSTransition, {
-      key: id,
-      classNames: (0, _satellitePrefixer["default"])(_templateObject2()),
-      timeout: TRANSITION_TIMEOUT,
-      appear: true
-    }, _react["default"].createElement("li", {
-      className: (0, _satellitePrefixer["default"])(_templateObject3())
-    }, _react["default"].createElement(_Flag["default"], rest, content)));
-  })), document.body);
-};
-
-exports.Flags = Flags;
-var _default = Flags;
-exports["default"] = _default;

package/Flag/index.d.ts

@@ -1,4 +0,0 @@
-export * from "./Flag";
-export * from "./Flags";
-export * from "./types";
-export { default } from "./Flag";

package/Flag/index.js

@@ -1,53 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var _exportNames = {};
-Object.defineProperty(exports, "default", {
-  enumerable: true,
-  get: function get() {
-    return _Flag["default"];
-  }
-});
-
-var _Flag = _interopRequireWildcard(require("./Flag"));
-
-Object.keys(_Flag).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _Flag[key];
-    }
-  });
-});
-
-var _Flags = require("./Flags");
-
-Object.keys(_Flags).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _Flags[key];
-    }
-  });
-});
-
-var _types = require("./types");
-
-Object.keys(_types).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _types[key];
-    }
-  });
-});

package/Flag/types.d.ts

@@ -1,17 +0,0 @@
-/// <reference types="react" />
-import IconComponentType from "../utils/icon";
-import { ColorVariant } from "../types";
-export interface Notification {
-    /** Unique notification ID */
-    id: string;
-    title?: string;
-    /** Content goes here */
-    content: React.ReactNode;
-    /** Icon to accompany the notification */
-    icon?: IconComponentType;
-    /**  @default false */
-    loading?: boolean;
-    /**  @default blue */
-    variant?: ColorVariant;
-    onDismiss?: () => void;
-}

package/Flag/types.js

@@ -1 +0,0 @@
-"use strict";

package/FlexGrid/FlexGrid.d.ts

@@ -1,16 +0,0 @@
-import { FunctionComponent } from "react";
-export declare type FlexGridDirection = "row" | "column";
-export declare type FlexGridAlignment = "leading" | "trailing" | "center" | "fill" | "baseline";
-export declare type FlexGridDistribution = "equalSpacing" | "leading" | "trailing" | "center" | "fill" | "fillEvenly";
-export declare type FlexGridSpacing = "none" | "sm" | "md" | "lg" | "xl";
-export interface FlexGridProps {
-    className?: string;
-    direction?: FlexGridDirection;
-    wrap?: boolean;
-    inline?: boolean;
-    alignment?: FlexGridAlignment;
-    distribution?: FlexGridDistribution;
-    spacing?: FlexGridSpacing;
-}
-export declare const FlexGrid: FunctionComponent<FlexGridProps>;
-export default FlexGrid;