@algolia/satellite 1.1.0 → 1.1.1

package/dist/esm/Input/Input.js

@@ -1,219 +0,0 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _excluded = ["className", "style", "startIcon", "endItem", "disabled", "readOnly", "clearable", "type", "variant", "locale", "required"];
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
-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 { forwardRef, Fragment, useEffect, useState } from "react";
-import { IconButton } from "../Button";
-import { useField } from "../Field";
-import { CheckIcon, ChevronDownIcon, ChevronUpIcon, SearchIcon as SearchBaseIcon, XIcon } from "../Icons";
-import { useLocale } from "../Satellite";
-import stl from "../styles/helpers/satellitePrefixer";
-import { isNil } from "../utils/isNil";
-import { useForwardedRef } from "../utils/useForwardedRef";
-import { useTriggerInputChange } from "../utils/useTriggerInputChange";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-var DEFAULT_INPUT_LOCALE = {
-  clearInput: "Clear input",
-  increment: "Increment",
-  decrement: "Decrement"
-};
-var STATUS_CLASSNAMES = {
-  "default": "",
-  invalid: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["input-invalid"]))),
-  validated: ""
-};
-var VARIANT_CLASSNAMES = {
-  small: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["input-small"]))),
-  medium: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["input-medium"]))),
-  large: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["input-large"])))
-};
-var SearchIcon = function SearchIcon(props) {
-  return /*#__PURE__*/_jsx(SearchBaseIcon, _objectSpread(_objectSpread({}, props), {}, {
-    role: "img",
-    "aria-label": "Search Icon"
-  }));
-};
-var InvalidIcon = function InvalidIcon() {
-  return /*#__PURE__*/_jsx(XIcon, {
-    className: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["mr-4 h-4 w-4 text-white bg-red-700 p-px rounded-full"])))
-  });
-};
-var ValidatedIcon = function ValidatedIcon() {
-  return /*#__PURE__*/_jsx(CheckIcon, {
-    className: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["mr-4 h-4 w-4 text-white bg-accent-600 p-px rounded-full"])))
-  });
-};
-
-/**
- * The `Input` component is a flexible, user-friendly component for efficient text and number entry across forms and applications.
- *
- * See the [Input documentation page](https://satellite.algolia.com/components/forms/input) for more information.
- */
-export var Input = /*#__PURE__*/forwardRef(function (_ref, externalRef) {
-  var _inputProps$id;
-  var className = _ref.className,
-    style = _ref.style,
-    startIcon = _ref.startIcon,
-    endItem = _ref.endItem,
-    disabled = _ref.disabled,
-    readOnly = _ref.readOnly,
-    clearableProp = _ref.clearable,
-    _ref$type = _ref.type,
-    type = _ref$type === void 0 ? "text" : _ref$type,
-    _ref$variant = _ref.variant,
-    variant = _ref$variant === void 0 ? "medium" : _ref$variant,
-    propsLocale = _ref.locale,
-    required = _ref.required,
-    inputProps = _objectWithoutProperties(_ref, _excluded);
-  var contextLocale = useLocale("input");
-  var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_INPUT_LOCALE), contextLocale), propsLocale);
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    focused = _useState2[0],
-    setFocused = _useState2[1];
-  var _useForwardedRef = useForwardedRef(externalRef),
-    _useForwardedRef2 = _slicedToArray(_useForwardedRef, 2),
-    inputRefCallback = _useForwardedRef2[0],
-    inputRef = _useForwardedRef2[1];
-  var triggerInputChange = useTriggerInputChange(inputRef);
-  var _useField = useField({
-      required: required
-    }),
-    status = _useField.state.status,
-    labelId = _useField.labelId,
-    descriptionId = _useField.descriptionId,
-    inputId = _useField.inputId;
-  var isControlled = ("value" in inputProps);
-  var _useState3 = useState(function () {
-      return isControlled ? inputProps.value : inputProps.defaultValue;
-    }),
-    _useState4 = _slicedToArray(_useState3, 2),
-    internalValue = _useState4[0],
-    setInternalValue = _useState4[1];
-  var isValueEmpty = typeof internalValue !== "number" && !(internalValue !== null && internalValue !== void 0 && internalValue.length);
-  useEffect(function () {
-    if (isControlled) {
-      setInternalValue(inputProps.value);
-    }
-  }, [inputProps.value, isControlled]);
-  var Icon = startIcon ? startIcon : type === "search" ? SearchIcon : undefined;
-  var iconSize = variant === "small" ? "1rem" : "1.5rem";
-  var isInvalid = status === "invalid";
-  var StatusIcon = isInvalid ? InvalidIcon : status === "validated" ? ValidatedIcon : Fragment;
-  var clearable = typeof clearableProp === "boolean" ? clearableProp : type === "search";
-  return /*#__PURE__*/_jsxs("div", {
-    className: cx(stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n            input group\n            ", "\n            ", "\n          "])), focused && "input-focused", disabled && "input-disabled"), VARIANT_CLASSNAMES[variant], STATUS_CLASSNAMES[status], className),
-    style: style,
-    onClick: function onClick() {
-      var _inputRef$current;
-      (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
-    },
-    children: [Icon && /*#__PURE__*/_jsx(Icon, {
-      className: stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["ml-4 shrink-0 ", ""])), disabled ? "text-grey-200" : focused ? "text-accent-600" : "text-grey-500"),
-      width: iconSize,
-      height: iconSize
-    }), /*#__PURE__*/_jsx("input", _objectSpread(_objectSpread({
-      className: stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["mx-4 no-search-input-decoration"]))),
-      ref: inputRefCallback,
-      type: type,
-      "aria-labelledby": labelId,
-      "aria-describedby": descriptionId
-    }, inputProps), {}, {
-      id: (_inputProps$id = inputProps.id) !== null && _inputProps$id !== void 0 ? _inputProps$id : inputId,
-      required: required,
-      "aria-invalid": isInvalid,
-      readOnly: readOnly,
-      disabled: disabled,
-      onChange: function onChange(evt) {
-        var _inputProps$onChange;
-        (_inputProps$onChange = inputProps.onChange) === null || _inputProps$onChange === void 0 || _inputProps$onChange.call(inputProps, evt);
-        if (!isControlled) {
-          setInternalValue(evt.target.value);
-        }
-      },
-      onFocus: function onFocus(evt) {
-        var _inputProps$onFocus;
-        setFocused(true);
-        (_inputProps$onFocus = inputProps.onFocus) === null || _inputProps$onFocus === void 0 || _inputProps$onFocus.call(inputProps, evt);
-      },
-      onBlur: function onBlur(evt) {
-        var _inputProps$onBlur;
-        setFocused(false);
-        (_inputProps$onBlur = inputProps.onBlur) === null || _inputProps$onBlur === void 0 || _inputProps$onBlur.call(inputProps, evt);
-      }
-    })), clearable && !disabled && !readOnly && !isValueEmpty ? /*#__PURE__*/_jsx(IconButton, {
-      className: stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["mr-2 ", ""])), focused ? "visible" : "invisible group-hover:visible"),
-      title: locale.clearInput,
-      icon: XIcon,
-      variant: "subtle",
-      size: "small",
-      tabIndex: -1,
-      "aria-hidden": true,
-      onClick: function onClick(evt) {
-        evt.preventDefault();
-        triggerInputChange("");
-      }
-    }) : null, !!endItem && /*#__PURE__*/_jsx("div", {
-      className: stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["mr-4"]))),
-      children: endItem
-    }), /*#__PURE__*/_jsx(StatusIcon, {}), type === "number" && !disabled && /*#__PURE__*/_jsxs("div", {
-      className: stl(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["input-spinner"]))),
-      children: [/*#__PURE__*/_jsx("button", {
-        tabIndex: -1,
-        type: "button",
-        disabled: readOnly,
-        className: stl(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["input-spinner-button ", ""])), readOnly && "cursor-not-allowed"),
-        "aria-label": locale.increment,
-        onClick: function onClick() {
-          var _inputRef$current$val, _inputRef$current2;
-          var step = inputProps.step ? parseFloat(String(inputProps.step)) : 1;
-          var max = isNil(inputProps.max) ? Number.MAX_SAFE_INTEGER : parseFloat(String(inputProps.max));
-          var currentValue = parseFloat((_inputRef$current$val = (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.value) !== null && _inputRef$current$val !== void 0 ? _inputRef$current$val : "0");
-          if (Number.isNaN(currentValue)) {
-            currentValue = 0;
-          }
-          if (currentValue + step <= max) {
-            triggerInputChange(String(currentValue + step));
-          } else {
-            triggerInputChange(String(max));
-          }
-        },
-        children: /*#__PURE__*/_jsx(ChevronUpIcon, {
-          size: 12,
-          className: cx(isInvalid && stl(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["text-red-700"]))))
-        })
-      }), /*#__PURE__*/_jsx("button", {
-        tabIndex: -1,
-        type: "button",
-        disabled: readOnly,
-        className: stl(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["input-spinner-button ", ""])), readOnly && "cursor-not-allowed"),
-        "aria-label": locale.decrement,
-        onClick: function onClick() {
-          var _inputRef$current$val2, _inputRef$current3;
-          var step = inputProps.step ? parseFloat(String(inputProps.step)) : 1;
-          var min = isNil(inputProps.min) ? Number.MIN_SAFE_INTEGER : parseFloat(String(inputProps.min));
-          var currentValue = parseFloat((_inputRef$current$val2 = (_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 ? void 0 : _inputRef$current3.value) !== null && _inputRef$current$val2 !== void 0 ? _inputRef$current$val2 : "0");
-          if (Number.isNaN(currentValue)) {
-            currentValue = 0;
-          }
-          if (currentValue - step >= min) {
-            triggerInputChange(String(currentValue - step));
-          } else {
-            triggerInputChange(String(min));
-          }
-        },
-        children: /*#__PURE__*/_jsx(ChevronDownIcon, {
-          size: 12,
-          className: cx(isInvalid && stl(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["text-red-700"]))))
-        })
-      })]
-    })]
-  });
-});
-Input.displayName = "Input";

package/dist/esm/Input/Input.tailwind.js

@@ -1,129 +0,0 @@
-import _rgba from "../styles/rgba";
-import _disabledColor from "../styles/disabledColor";
-import _plugin from "tailwindcss/plugin";
-// @ts-check
-var plugin = _plugin;
-var disabledColor = _disabledColor;
-var rgba = _rgba;
-var inputPlugin = plugin(function (_ref) {
-  var addComponents = _ref.addComponents,
-    theme = _ref.theme;
-  addComponents({
-    ".input": {
-      position: "relative",
-      display: "flex",
-      alignItems: "center",
-      cursor: "text",
-      fontSize: theme("fontSize.base"),
-      lineHeight: theme("lineHeight.base"),
-      backgroundColor: theme("colors.white"),
-      border: "1px solid ".concat(theme("colors.grey.500")),
-      outline: "1px solid transparent",
-      borderRadius: theme("borderRadius.DEFAULT"),
-      boxShadow: "inset 0px 1px 4px 0px ".concat(rgba(theme("colors.grey.500"), 0.3)),
-      overflow: "hidden",
-      transition: "all 100ms ease-in-out",
-      "&:not(.input-disabled, .input-focused):hover": {
-        borderColor: theme("colors.grey.600"),
-        ".input-spinner-button": {
-          borderColor: theme("colors.grey.600")
-        }
-      },
-      input: {
-        flex: "1",
-        minWidth: "0px",
-        caretColor: theme("colors.grey.600"),
-        color: theme("colors.grey.900"),
-        background: "transparent",
-        "&[type=number]": {
-          "-moz-appearance": "textfield"
-        },
-        "&[type=number]::-webkit-inner-spin-button, &[type=number]::-webkit-outer-spin-button": {
-          "-webkit-appearance": "none",
-          margin: "0px"
-        },
-        "&:focus": {
-          outline: "none"
-        },
-        "&::placeholder": {
-          color: theme("colors.grey.600")
-        }
-      }
-    },
-    ".input-focused, .input:focus-within": {
-      borderColor: theme("colors.accent.600"),
-      boxShadow: "0px 1px 0px 0px ".concat(theme("colors.shadow.5")),
-      ".input-spinner-button": {
-        borderColor: theme("colors.accent.600")
-      }
-    },
-    ".input-disabled": {
-      cursor: "not-allowed",
-      background: "linear-gradient(-180deg, ".concat(theme("colors.white"), " 0%, ").concat(theme("colors.grey.100"), " 100%)"),
-      borderColor: disabledColor(theme("colors.grey.200")),
-      boxShadow: "none",
-      "input, input::placeholder": {
-        color: theme("colors.grey.300"),
-        pointerEvents: "none"
-      }
-    },
-    ".input-small": {
-      height: "2rem"
-    },
-    ".input-medium": {
-      height: "2.5rem"
-    },
-    ".input-large": {
-      height: "3rem"
-    },
-    ".input-invalid:not(.input-disabled)": {
-      backgroundColor: theme("colors.red.100"),
-      borderColor: theme("colors.red.700"),
-      ".input-spinner-button": {
-        background: theme("colors.red.100"),
-        borderColor: theme("colors.red.700")
-      },
-      "&:hover": {
-        background: theme("colors.red.50"),
-        borderColor: theme("colors.red.700"),
-        ".input-spinner-button": {
-          borderColor: theme("colors.red.700")
-        }
-      },
-      "&.input-focused, &.input:focus-within": {
-        outlineColor: theme("colors.red.700")
-      }
-    }
-  });
-  addComponents({
-    ".input-spinner": {
-      display: "flex",
-      flexDirection: "column",
-      height: "100%",
-      width: "24px",
-      minWidth: "20px"
-    },
-    ".input-spinner-button": {
-      background: "linear-gradient(-180deg, ".concat(theme("colors.white"), " 0%, ").concat(theme("colors.grey.50"), " 100%)"),
-      borderColor: theme("colors.grey.500"),
-      borderStyle: "solid",
-      borderLeftWidth: "1px",
-      flex: "1",
-      display: "inline-flex",
-      alignItems: "center",
-      justifyContent: "center",
-      "&:focus": {
-        outline: "none"
-      },
-      "&:not(:last-child)": {
-        borderBottomWidth: "1px"
-      },
-      // This is to counterbalance the width of the first button's bottom border
-      // so that the two buttons have the same height.
-      "&:last-child": {
-        paddingTop: "1px"
-      }
-    }
-  });
-});
-export default inputPlugin;

package/dist/esm/Insert/Insert.d.ts

@@ -1,19 +0,0 @@
-import type { ReactNode, VFC } from "react";
-import type { BadgeVariants } from "../Badge";
-declare type InsertContext = {
-    label: string;
-    variant?: BadgeVariants;
-};
-export interface InsertProps {
-    /** Descriptive title for the `Insert` */
-    title: ReactNode;
-    contexts?: Array<string | InsertContext>;
-    children: ReactNode;
-}
-/**
- * The `Insert` component is used to give extra information to the user about the flow they are in or to highlight and define some terms used.
- *
- * See the [Insert documentation page](https://satellite.algolia.com/layouts/insert) for more information.
- */
-export declare const Insert: VFC<InsertProps>;
-export {};

package/dist/esm/Insert/Insert.js

@@ -1,44 +0,0 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-import { Badge } from "../Badge";
-import stl from "../styles/helpers/satellitePrefixer";
-import { onlyText } from "../utils/onlyText";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * The `Insert` component is used to give extra information to the user about the flow they are in or to highlight and define some terms used.
- *
- * See the [Insert documentation page](https://satellite.algolia.com/layouts/insert) for more information.
- */
-export var Insert = function Insert(_ref) {
-  var title = _ref.title,
-    contexts = _ref.contexts,
-    children = _ref.children;
-  return /*#__PURE__*/_jsxs("aside", {
-    "aria-label": onlyText(title),
-    className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["inline-flex flex-col self-start p-4 bg-grey-100 rounded"]))),
-    children: [contexts ? /*#__PURE__*/_jsx("span", {
-      className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["block space-x-2 mb-4"]))),
-      children: contexts.map(function (context, idx) {
-        var _ref2 = typeof context === "string" ? {
-            label: context
-          } : context,
-          label = _ref2.label,
-          _ref2$variant = _ref2.variant,
-          variant = _ref2$variant === void 0 ? "grey" : _ref2$variant;
-        return /*#__PURE__*/_jsx(Badge, {
-          variant: variant,
-          children: label
-        }, idx);
-      })
-    }) : null, /*#__PURE__*/_jsxs("div", {
-      children: [/*#__PURE__*/_jsx("p", {
-        className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["display-heading mb-2"]))),
-        children: title
-      }), /*#__PURE__*/_jsx("span", {
-        className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["display-body typo-subdued"]))),
-        children: children
-      })]
-    })]
-  });
-};