@algolia/satellite 1.0.0-beta.173 → 1.0.0-beta.174

package/esm/MenuButton/components/collapsible/index.js

@@ -0,0 +1,5 @@
+export * from "./CollapsibleItem";
+export * from "./CollapsibleItemsGroup";
+export * from "./CollapsibleItemsGroupContext";
+export * from "./CollapsibleItemsMultipleGroup";
+export * from "./CollapsibleItemsSingleGroup";

package/esm/MenuButton/components/items/ButtonItem.d.ts

@@ -0,0 +1,14 @@
+import type { IconComponentType } from "Icons";
+import type { FC } from "react";
+import type { BaseItemProps } from "../../useMenuItemProps";
+export declare type ButtonItemProps = BaseItemProps<HTMLButtonElement> & JSX.IntrinsicElements["button"] & {
+    /** Left aligned icon */
+    startIcon?: IconComponentType;
+    /**
+     * Variant of the item
+     * @default "default"
+     */
+    variant?: "default" | "destructive";
+};
+export declare const ButtonItem: FC<ButtonItemProps>;
+export default ButtonItem;

package/esm/MenuButton/components/items/ButtonItem.js

@@ -0,0 +1,37 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _templateObject, _templateObject2, _templateObject3;
+var _excluded = ["children", "variant", "startIcon"];
+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) { _defineProperty(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; }
+import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
+import cx from "clsx";
+import stl from "../../../styles/helpers/satellitePrefixer";
+import { useMenuItemProps } from "../../useMenuItemProps";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export var ButtonItem = function ButtonItem(props) {
+  var itemProps = useMenuItemProps(props);
+  var _props$itemProps = _objectSpread(_objectSpread({}, props), itemProps),
+    children = _props$itemProps.children,
+    variant = _props$itemProps.variant,
+    StartIcon = _props$itemProps.startIcon,
+    mergedProps = _objectWithoutProperties(_props$itemProps, _excluded);
+  var showDestructiveVariant = !props.disabled && variant === "destructive";
+  return /*#__PURE__*/_jsx(DropdownMenu.Item, {
+    asChild: true,
+    children: /*#__PURE__*/_jsxs("button", _objectSpread(_objectSpread({}, mergedProps), {}, {
+      className: cx(mergedProps.className, stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["w-full"])))),
+      children: [StartIcon && /*#__PURE__*/_jsx(StartIcon, {
+        className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["mr-2 shrink-0 ", ""])), showDestructiveVariant ? "text-red-700" : "text-inherit"),
+        width: "1rem",
+        height: "1rem"
+      }), /*#__PURE__*/_jsx("span", {
+        className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["w-full truncate ", ""])), showDestructiveVariant && "text-red-700"),
+        children: children
+      })]
+    }))
+  });
+};
+export default ButtonItem;

package/esm/MenuButton/components/items/LinkItem.d.ts

@@ -0,0 +1,10 @@
+import type { IconComponentType } from "Icons";
+import type { FC } from "react";
+import type { BaseItemProps } from "../../useMenuItemProps";
+export declare type LinkItemProps = BaseItemProps & {
+    href: string;
+    /** Left aligned icon */
+    startIcon?: IconComponentType;
+};
+export declare const LinkItem: FC<LinkItemProps>;
+export default LinkItem;

package/esm/MenuButton/components/items/LinkItem.js

@@ -0,0 +1,60 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var _excluded = ["startIcon", "className", "children", "onClick"];
+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) { _defineProperty(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; }
+import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
+import cx from "clsx";
+import { useMemo } from "react";
+import { ExternalLink } from "react-feather";
+import { useSatelliteContext } from "../../../Satellite";
+import stl from "../../../styles/helpers/satellitePrefixer";
+import parseURL from "../../../utils/parseUrl";
+import { useMenuItemProps } from "../../useMenuItemProps";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export var LinkItem = function LinkItem(props) {
+  var _useSatelliteContext = useSatelliteContext(),
+    router = _useSatelliteContext.router;
+  var itemProps = useMenuItemProps(props);
+  var _props$itemProps = _objectSpread(_objectSpread({}, props), itemProps),
+    StartIcon = _props$itemProps.startIcon,
+    className = _props$itemProps.className,
+    children = _props$itemProps.children,
+    onClick = _props$itemProps.onClick,
+    mergedProps = _objectWithoutProperties(_props$itemProps, _excluded);
+  var href = router.transformHref(props.href || "");
+  var parsedLocation = useMemo(function () {
+    return parseURL(href);
+  }, [href]);
+  var isExternalLink = router.isExternalLocation(parsedLocation);
+  var onItemClick = function onItemClick(event) {
+    onClick === null || onClick === void 0 || onClick(event);
+    event.preventDefault();
+    if (router.shouldOpenInNewTab(parsedLocation)) {
+      window.open(href, "_blank");
+    } else {
+      router.push({
+        url: href
+      });
+    }
+  };
+  return /*#__PURE__*/_jsxs(DropdownMenu.Item, _objectSpread(_objectSpread({}, mergedProps), {}, {
+    className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["flex items-center"]))), className),
+    onClick: onItemClick,
+    children: [StartIcon && /*#__PURE__*/_jsx(StartIcon, {
+      className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["mr-2 shrink-0 text-grey-500"]))),
+      width: "1rem",
+      height: "1rem"
+    }), /*#__PURE__*/_jsx("span", {
+      className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["w-full truncate"]))),
+      children: children
+    }), isExternalLink && /*#__PURE__*/_jsx(ExternalLink, {
+      className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["ml-1 shrink-0"]))),
+      size: "1em"
+    })]
+  }));
+};
+export default LinkItem;

package/esm/MenuButton/components/items/RadioItem.d.ts

@@ -0,0 +1,6 @@
+import type { DropdownMenuRadioItemProps } from "@radix-ui/react-dropdown-menu";
+import type { FC } from "react";
+import type { BaseItemProps } from "../../useMenuItemProps";
+export declare type RadioItemProps = Pick<DropdownMenuRadioItemProps, "value" | "defaultChecked"> & BaseItemProps<HTMLDivElement>;
+export declare const RadioItem: FC<RadioItemProps>;
+export default RadioItem;

package/esm/MenuButton/components/items/RadioItem.js

@@ -0,0 +1,41 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var _excluded = ["children", "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) { _defineProperty(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; }
+import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
+import cx from "clsx";
+import { Check } from "react-feather";
+import stl from "../../../styles/helpers/satellitePrefixer";
+import useMenuItemProps from "../../useMenuItemProps";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export var RadioItem = function RadioItem(props) {
+  var itemProps = useMenuItemProps(props);
+  var _props$itemProps = _objectSpread(_objectSpread({}, props), itemProps),
+    children = _props$itemProps.children,
+    className = _props$itemProps.className,
+    radioProps = _objectWithoutProperties(_props$itemProps, _excluded);
+  return /*#__PURE__*/_jsx(DropdownMenu.RadioItem, _objectSpread(_objectSpread({}, radioProps), {}, {
+    className: cx(className, stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["data-[state=checked]:bg-xenon-100"])))),
+    onSelect: function onSelect(e) {
+      return e.preventDefault();
+    },
+    children: /*#__PURE__*/_jsxs("div", {
+      className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["flex-1 flex items-start relative py-2 pr-5 overflow-hidden"]))),
+      children: [/*#__PURE__*/_jsx("span", {
+        className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["flex-1 truncate mr-4"]))),
+        children: children
+      }), /*#__PURE__*/_jsx(DropdownMenu.ItemIndicator, {
+        asChild: true,
+        children: /*#__PURE__*/_jsx(Check, {
+          className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["absolute right-0 text-accent-600 h-5"])))
+        })
+      })]
+    })
+  }));
+};
+RadioItem.displayName = "RadioItem";
+export default RadioItem;

package/esm/MenuButton/components/items/ToggleItem.d.ts

@@ -0,0 +1,9 @@
+import type { IconComponentType } from "Icons";
+import type { FC } from "react";
+import type { ToggleProps } from "../../../Toggle";
+export interface ToggleItemProps extends Omit<ToggleProps, "onSelect"> {
+    startIcon?: IconComponentType;
+    onSelect?: (event: Event) => void;
+}
+export declare const ToggleItem: FC<ToggleItemProps>;
+export default ToggleItem;

package/esm/MenuButton/components/items/ToggleItem.js

@@ -0,0 +1,63 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var _excluded = ["className", "checked", "startIcon", "children", "onSelect"];
+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) { _defineProperty(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; }
+import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
+import cx from "clsx";
+import { useState } from "react";
+import stl from "../../../styles/helpers/satellitePrefixer";
+import { Toggle } from "../../../Toggle";
+import useMenuItemProps from "../../useMenuItemProps";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export var ToggleItem = function ToggleItem(props) {
+  var itemProps = useMenuItemProps(props);
+  var _props$itemProps = _objectSpread(_objectSpread({}, props), itemProps),
+    className = _props$itemProps.className,
+    checked = _props$itemProps.checked,
+    StartIcon = _props$itemProps.startIcon,
+    children = _props$itemProps.children,
+    _onSelect = _props$itemProps.onSelect,
+    toggleProps = _objectWithoutProperties(_props$itemProps, _excluded);
+  var isControlled = typeof checked === "boolean";
+  var _useState = useState(isControlled ? checked : toggleProps.defaultChecked),
+    _useState2 = _slicedToArray(_useState, 2),
+    internalChecked = _useState2[0],
+    setInternalChecked = _useState2[1];
+  var isChecked = isControlled ? checked : internalChecked;
+  return /*#__PURE__*/_jsx(DropdownMenu.CheckboxItem, {
+    asChild: true,
+    onSelect: function onSelect(event) {
+      // we prevent the default behavior from Radix which consist in closing
+      // the menu when clicking on an item list while we want to keep it open
+      event.preventDefault();
+      _onSelect === null || _onSelect === void 0 || _onSelect(event);
+      if (!isControlled) {
+        setInternalChecked(!internalChecked);
+      }
+    },
+    checked: isChecked,
+    disabled: toggleProps.disabled,
+    children: /*#__PURE__*/_jsxs("div", {
+      className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["flex items-center"]))), className),
+      children: [StartIcon && /*#__PURE__*/_jsx(StartIcon, {
+        className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["mr-2 shrink-0 text-grey-500"]))),
+        width: "1rem",
+        height: "1rem"
+      }), /*#__PURE__*/_jsx("span", {
+        className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["flex-1 truncate mr-4"]))),
+        children: children
+      }), /*#__PURE__*/_jsx(Toggle, _objectSpread(_objectSpread({
+        decorative: true,
+        className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["shrink-0"])))
+      }, toggleProps), {}, {
+        checked: isChecked
+      }))]
+    })
+  });
+};
+export default ToggleItem;

package/esm/MenuButton/components/items/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./ButtonItem";
+export * from "./LinkItem";
+export * from "./RadioItem";
+export * from "./ToggleItem";

package/esm/MenuButton/components/items/index.js

@@ -0,0 +1,4 @@
+export * from "./ButtonItem";
+export * from "./LinkItem";
+export * from "./RadioItem";
+export * from "./ToggleItem";

package/esm/MenuButton/index.d.ts

@@ -0,0 +1 @@
+export { default as ExperimentalMenuButton } from "./MenuButton";

package/esm/MenuButton/index.js

@@ -0,0 +1 @@
+export { default as ExperimentalMenuButton } from "./MenuButton";

package/esm/MenuButton/useMenuItemProps.d.ts

@@ -0,0 +1,11 @@
+import type { EventHandler, MouseEvent } from "react";
+export interface BaseItemProps<T extends HTMLElement = HTMLElement> {
+    className?: string;
+    disabled?: boolean;
+    onClick?: EventHandler<MouseEvent<T>>;
+}
+export declare const useMenuItemProps: <T extends HTMLElement = HTMLElement>(props: BaseItemProps<T>) => {
+    className: string;
+    onClick: ((event: MouseEvent<T, globalThis.MouseEvent>) => void) | undefined;
+};
+export default useMenuItemProps;

package/esm/MenuButton/useMenuItemProps.js

@@ -0,0 +1,12 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject;
+import cx from "clsx";
+import stl from "../styles/helpers/satellitePrefixer";
+export var useMenuItemProps = function useMenuItemProps(props) {
+  var className = cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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 outline-none" : "text-inherit hover:bg-grey-100 focus:bg-grey-100 focus:outline-none cursor-pointer"), props.className);
+  return {
+    className: className,
+    onClick: props.onClick
+  };
+};
+export default useMenuItemProps;

package/esm/Sidebar/SidebarButtonLink.d.ts

@@ -1,5 +1,5 @@
 import type { MouseEventHandler, ReactNode, VFC } from "react";
-import type { IconComponentType } from "../types";
+import type { IconComponentType } from "../Icons";
 export declare type SidebarButtonLinkIcon = IconComponentType | {
     active: IconComponentType;
     inactive: IconComponentType;

package/esm/Sidebar/SidebarLink.d.ts

@@ -1,5 +1,5 @@
 import type { ReactNode, VFC } from "react";
-import type { IconComponentType } from "../types";
+import type { IconComponentType } from "../Icons";
 export declare type SidebarLinkProps = {
     icon: IconComponentType;
     href: string;

package/esm/Sidebar/SidebarLinksGroup/SidebarLinksGroup.d.ts

@@ -1,5 +1,5 @@
 import type { ReactNode, VFC } from "react";
-import type { IconComponentType } from "../../types";
+import type { IconComponentType } from "../../Icons";
 import type { SidebarLinksGroupLink } from "./types";
 declare type SidebarLinksGroupBaseProps = {
     id?: string;

package/esm/index.d.ts

@@ -23,11 +23,13 @@ export * from "./Field";
 export * from "./Flag";
 export * from "./FlexGrid";
 export * from "./HelpUnderline";
+export * from "./Icons";
 export * from "./Input";
 export * from "./Insert";
 export * from "./KeyboardKey";
 export * from "./Link";
 export * from "./Medallion";
+export * from "./MenuButton";
 export * from "./Modal";
 export * from "./Pagination";
 export * from "./Popover";

package/esm/index.js

@@ -23,11 +23,13 @@ export * from "./Field";
 export * from "./Flag";
 export * from "./FlexGrid";
 export * from "./HelpUnderline";
+export * from "./Icons";
 export * from "./Input";
 export * from "./Insert";
 export * from "./KeyboardKey";
 export * from "./Link";
 export * from "./Medallion";
+export * from "./MenuButton";
 export * from "./Modal";
 export * from "./Pagination";
 export * from "./Popover";

package/esm/styles/helpers/icons.js

@@ -1,11 +1,11 @@
+import _Icon from "react-feather";
 import _require4 from "react-dom/server";
 import _require2 from "react";
-import _Icon from "react-feather";
-var Icon = _Icon;
 var _require = _require2,
   createElement = _require.createElement;
 var _require3 = _require4,
   renderToStaticMarkup = _require3.renderToStaticMarkup;
+var Icon = _Icon;
 
 /**
  * Render inline SVG for a Feather icon

package/esm/types.d.ts

@@ -1,6 +1,3 @@
-import type { ComponentClass, SVGAttributes, VoidFunctionComponent } from "react";
-export declare type IconProps = SVGAttributes<SVGElement>;
-export declare type IconComponentType = VoidFunctionComponent<IconProps> | ComponentClass<IconProps>;
 export declare type ColorVariant = "accent" | "grey" | "green" | "blue" | "orange" | "red";
 /**
  * Ensures at least one type is required

package/esm/utils/sortObjectAlphabetically.d.ts

@@ -0,0 +1 @@
+export declare function sortObjectAlphabetically(obj: Record<string, any>): Record<string, any>;

package/esm/utils/sortObjectAlphabetically.js

@@ -0,0 +1,11 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+export function sortObjectAlphabetically(obj) {
+  var sortedEntries = Object.entries(obj).sort(function (_ref, _ref2) {
+    var _ref3 = _slicedToArray(_ref, 1),
+      keyA = _ref3[0];
+    var _ref4 = _slicedToArray(_ref2, 1),
+      keyB = _ref4[0];
+    return keyA.localeCompare(keyB);
+  });
+  return Object.fromEntries(sortedEntries);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@algolia/satellite",
-  "version": "1.0.0-beta.173",
+  "version": "1.0.0-beta.174",
   "description": "Algolia design system React components",
   "sideEffects": false,
   "scripts": {
@@ -66,7 +66,6 @@
   "peerDependencies": {
     "react": "^17.0.0",
     "react-dom": "^17.0.0",
-    "react-feather": "^2",
     "react-instantsearch-dom": "^6.1.0"
   },
   "dependencies": {
@@ -74,6 +73,7 @@
     "@popperjs/core": "^2.4.4",
     "@radix-ui/react-avatar": "^1.0.3",
     "@radix-ui/react-dialog": "^1.0.4",
+    "@radix-ui/react-dropdown-menu": "^2.0.5",
     "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-progress": "^1.0.3",
     "@radix-ui/react-separator": "^1.0.3",
@@ -89,6 +89,7 @@
     "lodash": "^4.17.21",
     "react-day-picker": "^8.0.7",
     "react-dropzone": "^11.5.1",
+    "react-feather": "^2.0.10",
     "react-popper": "^2.2.5",
     "react-transition-group": "^4.4.5",
     "react-use": "^15.3.8",