@algolia/satellite 1.1.0 → 1.1.2

package/dist/cjs/Actions/Switch/Switch.js

@@ -0,0 +1,90 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Switch = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _react = require("react");
+var _RadioGroupContext = require("../../Fields/RadioGroup/RadioGroupContext");
+var _satellitePrefixer = _interopRequireDefault(require("../../styles/helpers/satellitePrefixer"));
+var _prefersReducedMotion = require("../../utils/prefersReducedMotion");
+var _uniqueId = require("../../utils/uniqueId");
+var _styles = require("../Button/styles");
+var _utils = require("./utils");
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject, _templateObject2;
+/**
+ * The `Switch` component is used to select one option among a list of options.
+ *
+ * See the [Switch documentation page](https://satellite.algolia.com/components/controls/switch) for more information.
+ */
+var Switch = exports.Switch = function Switch(_ref) {
+  var className = _ref.className,
+    children = _ref.children,
+    value = _ref.value,
+    onChange = _ref.onChange,
+    disabled = _ref.disabled,
+    name = _ref.name,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? "medium" : _ref$size;
+  var _useState = (0, _react.useState)(function () {
+      return (0, _uniqueId.uniqueId)("SwitchName-");
+    }),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 1),
+    componentDefaultName = _useState2[0];
+  var radioName = name !== null && name !== void 0 ? name : componentDefaultName;
+  var containerRef = (0, _react.useRef)(null);
+  var valueIndicatorRef = (0, _react.useRef)(null);
+  var _useState3 = (0, _react.useState)(),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    valueIndicatorStyle = _useState4[0],
+    setValueIndicatorStyle = _useState4[1];
+
+  /**
+   * Positionning might be affected by different changes (changes in options order/number/label size, widget size etc),
+   * so we want to recompute things on every render. To avoid infinite loops, we check if the style
+   * actually changed before applying it.
+   */
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  (0, _react.useLayoutEffect)(function () {
+    var targetEl = document.querySelector((0, _utils.buildAnimationKeySelector)(radioName, value));
+    if (!targetEl || !valueIndicatorRef.current || !containerRef.current) {
+      return setValueIndicatorStyle(undefined);
+    }
+    var containerRect = containerRef.current.getBoundingClientRect();
+    var targetRect = targetEl.getBoundingClientRect();
+    var duration = _prefersReducedMotion.prefersReducedMotion ? "0ms" : "200ms";
+    var newValueIndicatorStyle = {
+      width: targetRect.width,
+      transform: "translateX(".concat(targetRect.x - containerRect.x, "px)"),
+      visibility: "visible",
+      transitionProperty: "width, transform",
+      transitionDuration: duration,
+      transitionTimingFunction: "ease-in-out"
+    };
+    if (newValueIndicatorStyle.transform !== (valueIndicatorStyle === null || valueIndicatorStyle === void 0 ? void 0 : valueIndicatorStyle.transform) || newValueIndicatorStyle.width !== (valueIndicatorStyle === null || valueIndicatorStyle === void 0 ? void 0 : valueIndicatorStyle.width)) {
+      setValueIndicatorStyle(newValueIndicatorStyle);
+    }
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioGroupContext.RadioGroupContext.Provider, {
+    value: {
+      value: value,
+      name: radioName,
+      onChange: onChange,
+      disabled: disabled
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      ref: containerRef,
+      className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["switch\n           relative inline-flex typo-display-body rounded bg-grey-100\n           ", "\n          "])), size === "large" ? "switch-large space-x-1" : "space-x-2px"), _styles.BUTTON_SIZE_CLASSNAMES[size], className),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        ref: valueIndicatorRef,
+        style: valueIndicatorStyle,
+        className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n            absolute top-0 left-0 z-0 min-w-4 h-full\n            btn btn-neutral\n            pointer-events-none invisible\n          "])))
+      }), children]
+    })
+  });
+};

package/dist/cjs/Actions/Switch/SwitchOption.js

@@ -0,0 +1,44 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SwitchOption = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _RadioGroupContext = require("../../Fields/RadioGroup/RadioGroupContext");
+var _Overlay = require("../../Overlay");
+var _satellitePrefixer = _interopRequireDefault(require("../../styles/helpers/satellitePrefixer"));
+var _utils = require("./utils");
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject, _templateObject2;
+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 SwitchOption = exports.SwitchOption = function SwitchOption(_ref) {
+  var value = _ref.value,
+    disabled = _ref.disabled,
+    children = _ref.children;
+  var context = (0, _RadioGroupContext.useRadioGroupContext)();
+  var checked = context.value === value;
+  var inputDisabled = context.disabled || disabled;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", _objectSpread(_objectSpread({
+    className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n        inline-flex grow shrink justify-center items-center min-w-16 max-w-48 px-4 z-10 text-grey-600\n        ", "\n        ", "\n      "])), inputDisabled ? "cursor-not-allowed opacity-60 rounded bg-grey-100" : "cursor-pointer hover:text-grey-900", !checked && !inputDisabled && "rounded active:bg-accent-200/20")
+  }, (0, _utils.buildAnimationProps)(context.name, value)), {}, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+      className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["w-0 h-0 opacity-0"]))),
+      type: "radio",
+      value: value,
+      name: context.name,
+      checked: checked,
+      disabled: inputDisabled,
+      onChange: function onChange(evt) {
+        return context.onChange(evt.currentTarget.value);
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Overlay.OverflowTooltipWrapper, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        children: children
+      })
+    })]
+  }));
+};

package/dist/cjs/Actions/index.d.ts

@@ -0,0 +1,7 @@
+export * from "./Button/Button";
+export * from "./ButtonGroup/ButtonGroup";
+export * from "./ButtonLink/ButtonLink";
+export * from "./IconButton/IconButton";
+export * from "./IconButtonLink/IconButtonLink";
+export * from "./Switch";
+export type { ButtonSize, ButtonVariant } from "./Button/types";

package/dist/cjs/Actions/index.js

@@ -0,0 +1,71 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _Button = require("./Button/Button");
+Object.keys(_Button).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Button[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Button[key];
+    }
+  });
+});
+var _ButtonGroup = require("./ButtonGroup/ButtonGroup");
+Object.keys(_ButtonGroup).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ButtonGroup[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _ButtonGroup[key];
+    }
+  });
+});
+var _ButtonLink = require("./ButtonLink/ButtonLink");
+Object.keys(_ButtonLink).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ButtonLink[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _ButtonLink[key];
+    }
+  });
+});
+var _IconButton = require("./IconButton/IconButton");
+Object.keys(_IconButton).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _IconButton[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _IconButton[key];
+    }
+  });
+});
+var _IconButtonLink = require("./IconButtonLink/IconButtonLink");
+Object.keys(_IconButtonLink).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _IconButtonLink[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _IconButtonLink[key];
+    }
+  });
+});
+var _Switch = require("./Switch");
+Object.keys(_Switch).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Switch[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Switch[key];
+    }
+  });
+});

package/dist/cjs/Avatars/ApplicationAvatar/ApplicationAvatar.d.ts

@@ -0,0 +1,16 @@
+import type { VFC } from "react";
+import type { ApplicationAvatarSize, MinimalApplication } from "../types";
+export interface ApplicationAvatarProps {
+    /** A minimal application object containing `applicationID` and `name`. */
+    application: MinimalApplication;
+    /** @default "medium" */
+    size?: ApplicationAvatarSize;
+    /** @ignore */
+    className?: string;
+}
+/**
+ * The `ApplicationAvatar` component is used as a visual representation of an application.
+ *
+ * See the [Application Avatar documentation page](https://satellite.algolia.com/components/images/application-avatar) for more information.
+ */
+export declare const ApplicationAvatar: VFC<ApplicationAvatarProps>;

package/dist/cjs/Avatars/ApplicationAvatar/ApplicationAvatar.js

@@ -0,0 +1,37 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ApplicationAvatar = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _satellitePrefixer = _interopRequireDefault(require("../../styles/helpers/satellitePrefixer"));
+var _utils = require("../utils");
+var _jsxRuntime = require("react/jsx-runtime");
+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` component is used as a visual representation of an application.
+ *
+ * See the [Application Avatar documentation page](https://satellite.algolia.com/components/images/application-avatar) for more information.
+ */
+var ApplicationAvatar = exports.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__*/(0, _jsxRuntime.jsx)("div", {
+    role: "img",
+    "aria-label": application.name || "Application's avatar",
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["rounded inline-flex shrink-0 items-center justify-center uppercase"]))), (0, _utils.pickApplicationColors)(application.applicationId), SIZE_CLASSNAMES[size], className),
+    style: size === "small" ? {
+      fontSize: "8px"
+    } : {},
+    children: (0, _utils.getApplicationInitials)(application)
+  });
+};

package/dist/cjs/Avatars/UserAvatar/UserAvatar.d.ts

@@ -0,0 +1,23 @@
+import type { VFC } from "react";
+import type { MinimalUser } from "../types";
+export declare type UserAvatarLocale = {
+    fallbackText?: string;
+};
+export interface UserAvatarProps {
+    /** A minimal user object containing `name`, `email` and `avatar`. */
+    user: MinimalUser;
+    /**
+     * in px
+     * @default 32
+     * */
+    size?: number;
+    /** @ignore */
+    className?: string;
+    locale?: UserAvatarLocale;
+}
+/**
+ * The `UserAvatar` component is used as a visual representation of a user.
+ *
+ * See the [User Avatar documentation page](https://satellite.algolia.com/components/images/user-avatar) for more information.
+ */
+export declare const UserAvatar: VFC<UserAvatarProps>;

package/dist/cjs/Avatars/UserAvatar/UserAvatar.js

@@ -0,0 +1,58 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.UserAvatar = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _reactAvatar = require("@radix-ui/react-avatar");
+var _clsx = _interopRequireDefault(require("clsx"));
+var _Satellite = require("../../Satellite");
+var _satellitePrefixer = _interopRequireDefault(require("../../styles/helpers/satellitePrefixer"));
+var _utils = require("../utils");
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+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 DEFAULT_LOCALE = {
+  fallbackText: "User's avatar"
+};
+/**
+ * The `UserAvatar` component is used as a visual representation of a user.
+ *
+ * See the [User Avatar documentation page](https://satellite.algolia.com/components/images/user-avatar) for more information.
+ */
+var UserAvatar = exports.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,
+    propsLocale = _ref.locale;
+  var contextLocale = (0, _Satellite.useLocale)("userAvatar");
+  var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_LOCALE), contextLocale), propsLocale);
+  var fallbackName = user.name || user.email || locale.fallbackText;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactAvatar.Root, {
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["overflow-hidden flex justify-center items-center rounded-full"]))), (0, _utils.getUserBackgroundClassName)((_user$email = user.email) !== null && _user$email !== void 0 ? _user$email : "no-email"), className),
+    style: {
+      width: size,
+      height: size
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactAvatar.Image, {
+      className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["h-full w-full object-cover"]))),
+      src: user.avatar,
+      alt: fallbackName
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactAvatar.AvatarFallback, {
+      className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["flex h-full w-full items-center justify-center uppercase"]))),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        "aria-hidden": true,
+        children: (0, _utils.getUserInitials)(user)
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["sr-only"]))),
+        children: fallbackName
+      })]
+    })]
+  });
+};

package/dist/cjs/Avatars/index.d.ts

@@ -1,2 +1,2 @@
-export * from "./ApplicationAvatar";
-export * from "./UserAvatar";
+export * from "./ApplicationAvatar/ApplicationAvatar";
+export * from "./UserAvatar/UserAvatar";

package/dist/cjs/Avatars/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _ApplicationAvatar = require("./ApplicationAvatar");
+var _ApplicationAvatar = require("./ApplicationAvatar/ApplicationAvatar");
 Object.keys(_ApplicationAvatar).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _ApplicationAvatar[key]) return;
@@ -14,7 +14,7 @@ Object.keys(_ApplicationAvatar).forEach(function (key) {
     }
   });
 });
-var _UserAvatar = require("./UserAvatar");
+var _UserAvatar = require("./UserAvatar/UserAvatar");
 Object.keys(_UserAvatar).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _UserAvatar[key]) return;

package/dist/cjs/Fields/AutoComplete/AutoComplete.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import type { AutoCompleteProps, Option } from "./types";
+declare type AutoCompleteComponent = (<O extends Option = Option>(props: AutoCompleteProps<O>) => React.ReactElement | null) & {
+    displayName?: string;
+};
+/**
+ * The `Autocomplete` component enables users to search and select from a list using real-time input matching.
+ *
+ * See the [Autocomplete documentation page](https://satellite.algolia.com/components/forms/autocomplete) for more information.
+ */
+export declare const AutoComplete: AutoCompleteComponent;
+export {};