@algolia/satellite 1.0.0-v3.99 → 1.1.0

package/dist/esm/FlexGrid/FlexGrid.js

@@ -0,0 +1,67 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22;
+// Heavily inspired by https://github.com/Shopify/polaris-react/blob/2b34f8609e9f08c1a767abea0a235bcc17706b63/src/components/Stack/Stack.tsx#L1
+import cx from "clsx";
+import { Children, isValidElement } from "react";
+import stl from "../styles/helpers/satellitePrefixer";
+import { isRenderedChild } from "../utils/isRenderedChild";
+import { jsx as _jsx } from "react/jsx-runtime";
+var SPACING_CLASSNAMES = {
+  none: "",
+  sm: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["flex-grid-sm"]))),
+  md: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["flex-grid-md"]))),
+  lg: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["flex-grid-lg"]))),
+  xl: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["flex-grid-xl"])))
+};
+var DIRECTION_CLASSNAMES = {
+  row: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["flex-row"]))),
+  column: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["flex-col"])))
+};
+var ALIGNMENT_CLASSNAMES = {
+  leading: stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["items-start"]))),
+  center: stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["items-center"]))),
+  trailing: stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["items-end"]))),
+  fill: stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["items-stretch"]))),
+  baseline: stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["items-baseline"])))
+};
+var DISTRIBUTION_CLASSNAMES = {
+  leading: stl(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["justify-start"]))),
+  trailing: stl(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["justify-end"]))),
+  center: stl(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["justify-center"]))),
+  equalSpacing: stl(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["justify-between"]))),
+  fill: stl(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["flex-grid-d-fill"]))),
+  fillEvenly: stl(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["flex-grid-d-fill-even"])))
+};
+
+/**
+ * The `FlexGrid` component is a wrapper component that allows you to easily create a flexbox layout.
+ *
+ * See the [Flex Grid documentation page](https://satellite.algolia.com/layouts/flex-grid) for more information.
+ */
+export var FlexGrid = function FlexGrid(_ref) {
+  var className = _ref.className,
+    _ref$direction = _ref.direction,
+    direction = _ref$direction === void 0 ? "row" : _ref$direction,
+    _ref$alignment = _ref.alignment,
+    alignment = _ref$alignment === void 0 ? "leading" : _ref$alignment,
+    _ref$distribution = _ref.distribution,
+    distribution = _ref$distribution === void 0 ? "leading" : _ref$distribution,
+    _ref$spacing = _ref.spacing,
+    spacing = _ref$spacing === void 0 ? "none" : _ref$spacing,
+    _ref$inline = _ref.inline,
+    inline = _ref$inline === void 0 ? false : _ref$inline,
+    _ref$wrap = _ref.wrap,
+    wrap = _ref$wrap === void 0 ? false : _ref$wrap,
+    children = _ref.children;
+  return /*#__PURE__*/_jsx("div", {
+    className: cx(inline && stl(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["flex-grid-inline"]))), className),
+    children: /*#__PURE__*/_jsx("div", {
+      className: cx(stl(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["flex-grid-inner"]))), inline ? stl(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["inline-flex"]))) : stl(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["flex"]))), wrap && stl(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["flex-wrap"]))), SPACING_CLASSNAMES[spacing], DIRECTION_CLASSNAMES[direction], ALIGNMENT_CLASSNAMES[alignment], DISTRIBUTION_CLASSNAMES[distribution]),
+      children: Children.map(children, function (child) {
+        return /*#__PURE__*/isValidElement(child) ? child : isRenderedChild(child) ? /*#__PURE__*/_jsx("span", {
+          children: child
+        }) : child;
+      })
+    })
+  });
+};

package/dist/esm/FlexGrid/FlexGrid.tailwind.d.ts

@@ -0,0 +1,8 @@
+export = flexGridPlugin;
+/**
+ * Taking some heavy pointers from Polaris https://github.com/Shopify/polaris-react/blob/2b34f8609e9f08c1a767abea0a235bcc17706b63/src/components/Stack/Stack.scss#L1 🙇🏻‍♂️
+ **/
+declare const flexGridPlugin: {
+    handler: import("tailwindcss/types/config").PluginCreator;
+    config?: Partial<import("tailwindcss/types/config").Config> | undefined;
+};

package/dist/esm/FlexGrid/FlexGrid.tailwind.js

@@ -0,0 +1,69 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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 _plugin from "tailwindcss/plugin";
+// @ts-check
+var plugin = _plugin;
+
+/**
+ * @param {string} value
+ */
+var negate = function negate(value) {
+  return "-".concat(value);
+};
+
+/**
+ * Generate the base styles for this iteration of grid spacing
+ * @param {string} spacing
+ * @returns {object}
+ */
+var generateSpacing = function generateSpacing(spacing) {
+  return {
+    marginLeft: negate(spacing),
+    marginTop: negate(spacing),
+    "> *": {
+      marginLeft: spacing,
+      marginTop: spacing
+    }
+  };
+};
+
+/**
+ * Taking some heavy pointers from Polaris https://github.com/Shopify/polaris-react/blob/2b34f8609e9f08c1a767abea0a235bcc17706b63/src/components/Stack/Stack.scss#L1 🙇🏻‍♂️
+ **/
+var flexGridPlugin = plugin(function (_ref) {
+  var addComponents = _ref.addComponents,
+    theme = _ref.theme;
+  addComponents({
+    ".flex-grid-inline": {
+      display: "inline-block"
+    },
+    ".flex-grid-inner": {
+      "> *": {
+        flex: "0 0 auto",
+        minWidth: "0px",
+        maxWidth: "100%"
+      }
+    },
+    // Distribution
+    ".flex-grid-d-fill": {
+      "> *": {
+        flex: "1 1 auto"
+      }
+    },
+    ".flex-grid-d-fill-even": {
+      "> *": {
+        flex: "1 1 0%"
+      },
+      "@supports (min-width: fit-content)": {
+        minWidth: "fit-content"
+      }
+    },
+    // Spacing classes
+    ".flex-grid-sm": _objectSpread({}, generateSpacing(theme("spacing.2"))),
+    ".flex-grid-md": _objectSpread({}, generateSpacing(theme("spacing.4"))),
+    ".flex-grid-lg": _objectSpread({}, generateSpacing(theme("spacing.6"))),
+    ".flex-grid-xl": _objectSpread({}, generateSpacing(theme("spacing.8")))
+  });
+});
+export default flexGridPlugin;

package/dist/esm/FlexGrid/index.d.ts

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

package/dist/esm/FlexGrid/index.js

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

package/dist/esm/Form/Form.d.ts

@@ -0,0 +1,16 @@
+import type { FC, HTMLAttributes, ReactNode, VFC } from "react";
+import type { AlertProps } from "../Banners";
+import type { ButtonProps } from "../Button";
+import type { ExperimentalFormContextField } from "./FormContext";
+export interface ExperimentalFormProps extends HTMLAttributes<HTMLFormElement> {
+}
+export declare type ExperimentalFormLocale = {
+    errorText?: (invalidFields: ExperimentalFormContextField[]) => ReactNode;
+};
+export interface ExperimentalFormErrorMessageProps extends Omit<AlertProps, "children"> {
+    locale?: ExperimentalFormLocale;
+}
+export declare const ExperimentalFormErrorMessage: VFC<ExperimentalFormErrorMessageProps>;
+export declare const ExperimentalForm: FC<ExperimentalFormProps>;
+export declare const ExperimentalFormSubmit: FC<ButtonProps>;
+export declare const ExperimentalFormReset: FC<ButtonProps>;

package/dist/esm/Form/Form.js

@@ -0,0 +1,135 @@
+import _typeof from "@babel/runtime/helpers/typeof";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _excluded = ["className", "locale"],
+  _excluded2 = ["children"],
+  _excluded3 = ["children"],
+  _excluded4 = ["children"];
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+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 cx from "clsx";
+import { useCallback, useState } from "react";
+import { Alert } from "../Banners";
+import { Button } from "../Button";
+import { XOctagonIcon } from "../Icons";
+import { useLocale } from "../Satellite";
+import stl from "../styles/helpers/satellitePrefixer";
+import { ExperimentalFormContext } from "./FormContext";
+import { useExperimentalForm } from "./useForm";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+var DEFAULT_ERROR_MESSAGE_LOCALE = {
+  errorText: function errorText(invalidFields) {
+    var firstInvalidField = invalidFields[0];
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["display-heading mb-2"]))),
+        children: ["Please fix ", invalidFields.length, " error", invalidFields.length > 1 ? "s" : "", " below and try again."]
+      }), /*#__PURE__*/_jsx("div", {
+        className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["flex flex-col"]))),
+        children: /*#__PURE__*/_jsx("a", {
+          href: "#",
+          className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["text-black underline hover:text-grey-800"]))),
+          onClick: function onClick(e) {
+            e.preventDefault();
+            var label = document.querySelector("label[for=\"".concat(firstInvalidField.labelFor, "\"]"));
+            label === null || label === void 0 || label.scrollIntoView({
+              behavior: "smooth",
+              block: "start"
+            });
+            label === null || label === void 0 || label.focus({
+              preventScroll: true
+            });
+          },
+          children: "Go to first error"
+        })
+      })]
+    });
+  }
+};
+export var ExperimentalFormErrorMessage = function ExperimentalFormErrorMessage(_ref) {
+  var className = _ref.className,
+    propsLocale = _ref.locale,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var contextLocale = useLocale("form");
+  var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_ERROR_MESSAGE_LOCALE), contextLocale), propsLocale);
+  var form = useExperimentalForm();
+  if (!form) return null;
+  var invalidFields = Object.entries(form.fields).filter(function (_ref2) {
+    var _ref3 = _slicedToArray(_ref2, 2),
+      _ = _ref3[0],
+      value = _ref3[1];
+    return value.state.status === "invalid";
+  }).map(function (_ref4) {
+    var _ref5 = _slicedToArray(_ref4, 2),
+      _ = _ref5[0],
+      value = _ref5[1];
+    return value;
+  });
+  return invalidFields.length > 0 ? /*#__PURE__*/_jsx(Alert, _objectSpread(_objectSpread({
+    variant: "red",
+    icon: XOctagonIcon
+  }, props), {}, {
+    className: cx(stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["w-full"]))), className),
+    children: /*#__PURE__*/_jsx("span", {
+      "aria-live": "assertive",
+      className: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["whitespace-break-spaces"]))),
+      children: locale.errorText(invalidFields)
+    })
+  })) : null;
+};
+export var ExperimentalForm = function ExperimentalForm(_ref6) {
+  var children = _ref6.children,
+    props = _objectWithoutProperties(_ref6, _excluded2);
+  var _useState = useState({}),
+    _useState2 = _slicedToArray(_useState, 2),
+    fields = _useState2[0],
+    setFields = _useState2[1];
+  var addField = useCallback(function (field) {
+    setFields(function (fields) {
+      return _objectSpread(_objectSpread({}, fields), {}, _defineProperty({}, field.labelFor, field));
+    });
+  }, []);
+  var removeField = useCallback(function (field) {
+    setFields(function (fields) {
+      var _field$labelFor = field.labelFor,
+        _ = fields[_field$labelFor],
+        rest = _objectWithoutProperties(fields, [_field$labelFor].map(_toPropertyKey));
+      return rest;
+    });
+  }, []);
+  return /*#__PURE__*/_jsx(ExperimentalFormContext.Provider, {
+    value: {
+      fields: fields,
+      addField: addField,
+      removeField: removeField
+    },
+    children: /*#__PURE__*/_jsx("form", _objectSpread(_objectSpread({
+      noValidate: true
+    }, props), {}, {
+      children: children
+    }))
+  });
+};
+export var ExperimentalFormSubmit = function ExperimentalFormSubmit(_ref7) {
+  var children = _ref7.children,
+    props = _objectWithoutProperties(_ref7, _excluded3);
+  return /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({}, props), {}, {
+    type: "submit",
+    children: children
+  }));
+};
+export var ExperimentalFormReset = function ExperimentalFormReset(_ref8) {
+  var children = _ref8.children,
+    props = _objectWithoutProperties(_ref8, _excluded4);
+  return /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({}, props), {}, {
+    type: "reset",
+    children: children
+  }));
+};

package/dist/esm/Form/FormContext.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import type { FieldState } from "../Field";
+export declare type ExperimentalFormContextField = {
+    state: FieldState;
+    label: string;
+    labelFor: string;
+};
+export declare type ExperimentalFormContextValue = {
+    fields: Record<string, ExperimentalFormContextField>;
+    addField: (field: ExperimentalFormContextField) => void;
+    removeField: (field: ExperimentalFormContextField) => void;
+};
+export declare const ExperimentalFormContext: import("react").Context<ExperimentalFormContextValue | null>;

package/dist/esm/Form/FormContext.js

@@ -0,0 +1,2 @@
+import { createContext } from "react";
+export var ExperimentalFormContext = /*#__PURE__*/createContext(null);

package/dist/esm/Form/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./Form";
+export type { ExperimentalFormContextField, ExperimentalFormContextValue } from "./FormContext";
+export * from "./useForm";

package/dist/esm/Form/index.js

@@ -0,0 +1,3 @@
+export * from "./Form";
+export * from "./useForm";
+export {};