@algolia/satellite 1.0.0-beta.131 → 1.0.0-beta.134

package/README.md

@@ -82,39 +82,24 @@ yarn add -D tailwindcss
 Example `main.css`
 
 ```css
-@import "tailwindcss/base";
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 
-@import "tailwindcss/components";
-
-@import "tailwindcss/utilities";
+@layer components {
+  /* your custom components */
+}
 ```
 
 Example `postcss.config.js`
 
 ```js
-const purgecss = require("@fullhuman/postcss-purgecss");
-const cssnano = require("cssnano");
-
-// Feel free to customize it
-const tailwindConfig = require("@algolia/satellite/cjs/styles/tailwind.config.js");
-
-// If you're gonna use purge css, you need to configure a custom extractor to avoid removing classes used in the Satellite components.
-const { makePurgeCssExtractor } = require("@algolia/satellite");
-const PurgeCssExtractor = makePurgeCssExtractor(tailwindConfig.prefix);
+// ...
 
 const plugins = [
   require("postcss-import"),
   require("tailwindcss")(tailwindConfig),
   require("autoprefixer"),
-  purgecss({
-    content: ["./dist/**/*.{js,html}"],
-    defaultExtractor: PurgeCssExtractor,
-    // This entry will allow you to safelist some prefix in order to avoid some classnames to be wiped out.
-    // Here, it will keep all the classnames starting with:
-    // - 'ais-*' to preserve the instant-search widgets style
-    // - 'DayPicker*' to preserve all the DatePicker styles (used in the DatePicker and DateRangePicker)
-    whitelistPatterns: [/^ais-/, /^DayPicker/],
-  }),
   cssnano({ preset: "default" }),
 ];
 
@@ -124,11 +109,31 @@ module.exports = { plugins };
 Example `tailwind.config.js`
 
 ```js
-const config = require("@algolia/satellite/cjs/styles/tailwind.config.js");
-
-config.variants.backgroundColor = ["responsive", "hover", "focus", "active"];
-
-module.exports = config;
+const { makePurgeCssExtractor } = require('@algolia/satellite');
+const satelliteConfig = require("@algolia/satellite/cjs/styles/tailwind.config.js");
+
+module.exports = {
+  presets: [satellite],
+  content: [
+    files: [
+      `node_modules/@algolia/satellite/**/*.js`,
+      `node_modules/react-day-picker/lib/style.css`,
+      `node_modules/react-day-picker/src/**/*.js`,
+
+      `src/**/*.{ts,tsx,js,jsx}`,
+      // Any other sources files
+    ],
+    extract: makePurgeCssExtractor(prefix),
+  ],
+  theme: {
+    extend: {
+      // any colors, fonts... you want to add
+    }
+  },
+  plugins: [
+    // extra plugins you want to add
+  ]
+};
 ```
 
 Example `index.jsx`
@@ -139,7 +144,7 @@ import ReactDOM from "react-dom";
 
 import "./main.css";
 
-import { Button, stl } from "@algolia/satellite/Button";
+import { Button, stl } from "@algolia/satellite";
 
 const loading = true;
 

package/cjs/AnnouncementBadge/AnnouncementBadge.d.ts

@@ -1,9 +1,14 @@
-import React, { FunctionComponent } from "react";
+import type { FunctionComponent, HTMLAttributes } from "react";
 export declare type AnnouncementBadgeSizes = "default" | "small";
-export interface AnnouncementBadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+export declare type AnnouncementBadgeTexts = "new" | "beta" | "internal" | "pilot";
+export declare type AnnouncementBadgeLocale = {
+    [key in AnnouncementBadgeTexts]?: string;
+};
+export interface AnnouncementBadgeProps extends HTMLAttributes<HTMLSpanElement> {
     size?: AnnouncementBadgeSizes;
-    text?: "new" | "beta" | "internal" | "pilot";
+    text?: AnnouncementBadgeTexts;
     variant?: "accent" | "red";
+    locale?: AnnouncementBadgeLocale;
     children?: never;
 }
 export declare const AnnouncementBadge: FunctionComponent<AnnouncementBadgeProps>;

package/cjs/AnnouncementBadge/AnnouncementBadge.js

@@ -7,22 +7,34 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = exports.AnnouncementBadge = void 0;
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _react = _interopRequireDefault(require("react"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _Satellite = require("../Satellite");
+
 var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
 
-var _excluded = ["size", "text", "variant", "className"];
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _excluded = ["size", "text", "variant", "className", "locale"];
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+var DEFAULT_LOCALE = {
+  beta: "beta",
+  internal: "internal",
+  "new": "new",
+  pilot: "pilot"
+};
 var DEFAULT_CLASSNAME = (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["capitalize inline-block rounded-full text-white select-none"])));
 var SIZE_CLASSNAMES = {
   "default": (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["display-body h-6 leading-md px-2"]))),
@@ -36,11 +48,17 @@ var AnnouncementBadge = function AnnouncementBadge(_ref) {
       text = _ref$text === void 0 ? "new" : _ref$text,
       variantProp = _ref.variant,
       className = _ref.className,
+      propsLocale = _ref.locale,
       props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var contextLocale = (0, _Satellite.useLocale)("announcementBadge");
+
+  var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_LOCALE), contextLocale), propsLocale);
+
   var variant = typeof variantProp === "string" ? variantProp : text === "internal" ? "red" : "accent";
-  return /*#__PURE__*/_react["default"].createElement("span", (0, _extends2["default"])({}, props, {
-    className: (0, _classnames["default"])(DEFAULT_CLASSNAME, variant === "red" ? (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["bg-red-600"]))) : (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["bg-accent-600"]))), SIZE_CLASSNAMES[size], className)
-  }), text);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", _objectSpread(_objectSpread({}, props), {}, {
+    className: (0, _classnames["default"])(DEFAULT_CLASSNAME, variant === "red" ? (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["bg-red-600"]))) : (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["bg-accent-600"]))), SIZE_CLASSNAMES[size], className),
+    children: locale[text]
+  }));
 };
 
 exports.AnnouncementBadge = AnnouncementBadge;

package/cjs/AutoComplete/AutoComplete.d.ts

@@ -1,13 +1,17 @@
-import React, { Component } from "react";
-import { ControllerStateAndHelpers } from "downshift";
+import type { A11yStatusMessageOptions, ControllerStateAndHelpers } from "downshift";
+import { Component } from "react";
+import type { ChangeEvent, FocusEvent, KeyboardEvent, MouseEvent } from "react";
 import { FieldState } from "../Field/FieldStateContext";
-import { Option, AutoCompleteProps } from "./types";
+import type { AutoCompleteLocale, AutoCompleteProps, Option, OptionItemProps } from "./types";
 interface State {
     inputFocused: boolean;
     inputValue: string;
     inputWidth?: number;
     showAllResults: boolean;
 }
+declare type DefaultOptionProps = OptionItemProps & {
+    optionItemPrefix?: AutoCompleteLocale["optionItemPrefix"];
+};
 /**
  * Autocomplete is a search-as-you-type function that matches what a person types, usually the beginning of a word, or a prefix, with a word list. Not to be confused with auto-suggestion that predicts the end of a query.
  *
@@ -24,37 +28,39 @@ interface State {
  * - Provide matching results quickly
  * - Style different data
  */
-export declare class AutoComplete<T extends Option> extends Component<AutoCompleteProps, State> {
+export declare class AutoComplete<T extends Option = Option> extends Component<AutoCompleteProps<T>, State> {
+    static contextType: import("react").Context<import("../Satellite").SatelliteContextType>;
     static defaultProps: {
         clearable: boolean;
         creatable: boolean;
         multiple: boolean;
         maxResults: number;
-        emptyState: JSX.Element;
-        createFromInputValue: import("./types").CreateFromInputValue;
+        createFromInputValue: <T_1 extends Option = Option>(options: T_1[] | undefined, inputValue: string) => Option[];
         options: never[];
         separatorKeyCodes: never[];
         separatorKeys: never[];
-        optionItemComponent: import("./types").OptionItemComponentType;
+        optionItemComponent: ({ optionItemPrefix, ...props }: DefaultOptionProps) => JSX.Element;
         noWrap: boolean;
     };
     state: State;
     inputContainerRef: HTMLDivElement | null;
     inputRef: HTMLInputElement | null;
-    componentDidUpdate(prevProps: AutoCompleteProps): void;
+    componentDidUpdate(prevProps: AutoCompleteProps<T>): void;
     handleClearClick: () => void;
     handleFakeInputClick: () => void | null;
-    handleInputBlur: (state: ControllerStateAndHelpers<Option>) => (evt: React.FocusEvent<HTMLInputElement>) => void;
-    handleInputChange: (evt: React.ChangeEvent<HTMLInputElement>) => void;
+    handleInputBlur: (state: ControllerStateAndHelpers<T | Option>) => (evt: FocusEvent<HTMLInputElement>) => void;
+    handleInputChange: (evt: ChangeEvent<HTMLInputElement>) => void;
     handleInputContainerRefUpdate: (el: HTMLDivElement | null) => void;
     updateInputWidth: () => void;
-    handleKeyDown: (state: ControllerStateAndHelpers<Option>) => (evt: React.KeyboardEvent<any>) => void;
-    handleChange: (option: Option) => void;
-    handleShowAllResults: (evt: React.MouseEvent<HTMLButtonElement>) => void;
-    removeValue: (removedOption: Option) => void;
-    renderInput: (results: Option[], autocompleteHelpers: ControllerStateAndHelpers<Option>, fieldState: FieldState) => JSX.Element;
-    renderMenu: (results: Option[], autocompleteHelpers: ControllerStateAndHelpers<Option>) => JSX.Element;
-    renderSelect: (autocompleteHelpers: ControllerStateAndHelpers<Option>, fieldState: FieldState) => JSX.Element;
+    handleKeyDown: (state: ControllerStateAndHelpers<T | Option>) => (evt: KeyboardEvent<any>) => void;
+    handleChange: (option: T) => void;
+    handleShowAllResults: (evt: MouseEvent<HTMLButtonElement>) => void;
+    removeValue: (removedOption: T) => void;
+    getA11yStatusMessage: (options: A11yStatusMessageOptions<Option>) => any;
+    renderInput: (results: T[], autocompleteHelpers: ControllerStateAndHelpers<T | Option>, fieldState: FieldState) => JSX.Element;
+    renderMenu: (results: T[], autocompleteHelpers: ControllerStateAndHelpers<T | Option>) => JSX.Element;
+    renderSelect: (autocompleteHelpers: ControllerStateAndHelpers<T | Option>, fieldState: FieldState) => JSX.Element;
+    private get locale();
     render(): JSX.Element;
 }
 export default AutoComplete;