@algolia/satellite 1.0.0-beta.119 → 1.0.0-beta.123

package/cjs/utils/uniqBy.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.uniqBy = uniqBy;
 exports["default"] = void 0;
+exports.uniqBy = uniqBy;
 
 function uniqBy(arr, identity) {
   if (!arr) return arr;

package/cjs/utils/uniqueId.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.uniqueId = uniqueId;
 exports["default"] = void 0;
+exports.uniqueId = uniqueId;
 var counters = {};
 
 function uniqueId() {

package/cjs/utils/useLinkProps.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 export declare type UseLinkProps = Pick<React.AnchorHTMLAttributes<HTMLAnchorElement>, "href" | "onClick" | "target" | "rel">;
-export declare const useLinkProps: (props: Pick<React.AnchorHTMLAttributes<HTMLAnchorElement>, "target" | "href" | "onClick" | "rel">) => Pick<React.AnchorHTMLAttributes<HTMLAnchorElement>, "target" | "href" | "onClick" | "rel">;
+export declare const useLinkProps: (props: UseLinkProps) => UseLinkProps;
 export default useLinkProps;

package/cjs/utils/useLinkProps.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.useLinkProps = void 0;
+exports.useLinkProps = exports["default"] = void 0;
 
 var _react = require("react");
 

package/cjs/utils/useTriggerInputChange.d.ts

@@ -1,7 +1,8 @@
 /// <reference types="react" />
+declare type InputValue = JSX.IntrinsicElements["input"]["value"];
 /**
  * Trigger a native input change event.
  * See https://stackoverflow.com/questions/23892547/what-is-the-best-way-to-trigger-onchange-event-in-react-js
  */
-declare const useTriggerInputChange: (inputRef: import("react").MutableRefObject<HTMLInputElement | null>) => (value: string | number | string[] | undefined) => void;
+declare const useTriggerInputChange: (inputRef: React.MutableRefObject<HTMLInputElement | null>) => (value: InputValue) => void;
 export default useTriggerInputChange;

package/esm/AutoComplete/AutoComplete.d.ts

@@ -13,6 +13,10 @@ interface State {
  *
  * Use this component when the user needs to search through a long list of results.
  *
+ * ## Menu Size Variations
+ * - **Medium (default)**: the standard dropdown menu height for most use cases
+ * - **Large**: when numerous results should be displayed in the dropdown to ease selection
+ *
  * ## Best practices
  *
  * - Provide an empty state if there is no result
@@ -31,7 +35,7 @@ export declare class AutoComplete<T extends Option> extends Component<AutoComple
         options: never[];
         separatorKeyCodes: never[];
         separatorKeys: never[];
-        optionItemComponent: React.ComponentType<import("./types").OptionItemProps>;
+        optionItemComponent: import("./types").OptionItemComponentType;
         noWrap: boolean;
     };
     state: State;
@@ -46,7 +50,7 @@ export declare class AutoComplete<T extends Option> extends Component<AutoComple
     updateInputWidth: () => void;
     handleKeyDown: (state: ControllerStateAndHelpers<Option>) => (evt: React.KeyboardEvent<any>) => void;
     handleChange: (option: Option) => void;
-    handleShowAllResults: (evt: React.MouseEvent<HTMLButtonElement, MouseEvent>) => 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;

package/esm/AutoComplete/AutoComplete.js

@@ -10,7 +10,7 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
@@ -113,6 +113,10 @@ var defaultEmptyState = /*#__PURE__*/React.createElement(AutoCompleteEmptyState,
  *
  * Use this component when the user needs to search through a long list of results.
  *
+ * ## Menu Size Variations
+ * - **Medium (default)**: the standard dropdown menu height for most use cases
+ * - **Large**: when numerous results should be displayed in the dropdown to ease selection
+ *
  * ## Best practices
  *
  * - Provide an empty state if there is no result
@@ -420,6 +424,7 @@ export var AutoComplete = /*#__PURE__*/function (_Component) {
           isOpen = autocompleteHelpers.isOpen;
       var _this$props4 = _this.props,
           menuClassName = _this$props4.menuClassName,
+          menuSize = _this$props4.menuSize,
           _this$props4$emptySta = _this$props4.emptyState,
           emptyState = _this$props4$emptySta === void 0 ? AutoComplete.defaultProps.emptyState : _this$props4$emptySta,
           menuFooter = _this$props4.menuFooter,
@@ -468,26 +473,26 @@ export var AutoComplete = /*#__PURE__*/function (_Component) {
         }, results.length === 0 ? /*#__PURE__*/React.createElement("div", _extends({}, getMenuProps(), {
           className: stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["min-h-10"])))
         }), emptyState) : /*#__PURE__*/React.createElement(ScrollIndicator, {
-          className: stl(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["max-h-64"])))
+          className: menuSize === "large" ? stl(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["max-h-96"]))) : stl(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["max-h-64"])))
         }, /*#__PURE__*/React.createElement("ul", getMenuProps(), results.slice(0, showAllResults ? Number.MAX_SAFE_INTEGER : maxResults).map(function (result, index) {
           return /*#__PURE__*/React.createElement("li", _extends({
             key: result.value
           }, getItemProps({
             item: result,
             disabled: result.disabled,
-            className: stl(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n                            autocomplete-result\n                            flex items-center min-h-10 px-4 cursor-pointer\n                            ", "\n                            ", "\n                          "])), index === highlightedIndex && "bg-grey-100", result.disabled && "cursor-not-allowed")
+            className: stl(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n                            autocomplete-result\n                            flex items-center min-h-10 px-4 cursor-pointer\n                            ", "\n                            ", "\n                          "])), index === highlightedIndex && "bg-grey-100", result.disabled && "cursor-not-allowed")
           })), /*#__PURE__*/React.createElement(OptionItem, _extends({}, optionItemProps, {
             highlighted: index === highlightedIndex,
             option: result
           })));
         }), extraResults > 0 && !showAllResults && /*#__PURE__*/React.createElement("li", {
-          className: stl(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["p-2 text-right"])))
+          className: stl(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["p-2 text-right"])))
         }, /*#__PURE__*/React.createElement(Button, {
           variant: "subtle",
           size: "small",
           onMouseDown: _this.handleShowAllResults
         }, "Show ", pluralize(extraResults, "result"), " more")))), menuFooter && /*#__PURE__*/React.createElement("footer", {
-          className: stl(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["flex items-center justify-center min-h-12 p-4 bg-grey-100 border-t border-grey-200 text-grey-600"])))
+          className: stl(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["flex items-center justify-center min-h-12 p-4 bg-grey-100 border-t border-grey-200 text-grey-600"])))
         }, menuFooter)));
       });
     });

package/esm/AutoComplete/types.d.ts

@@ -31,6 +31,11 @@ export interface AutoCompleteBaseProps {
     /** Keep the input on a single line */
     noWrap?: boolean;
     endItem?: React.ReactNode;
+    /**
+     * `medium` will display about 5 results in the dropdown; use `large` variant to display more
+     * @default "medium"
+     */
+    menuSize?: "medium" | "large";
 }
 export interface AutoCompleteSingleProps extends AutoCompleteBaseProps {
     multiple?: false;

package/esm/Avatars/ApplicationAvatar.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { ApplicationAvatarSize, MinimalApplication } from "./types";
-interface ApplicationAvatarProps {
+export interface ApplicationAvatarProps {
     /** A minimal application object containing `applicationID` and `name`. */
     application: MinimalApplication;
     /** @default "medium" */

package/esm/Button/styles.d.ts

@@ -2,4 +2,4 @@ import { ButtonBaseProps, ButtonSize, ButtonVariant } from "./types";
 export declare const BUTTON_SIZE_CLASSNAMES: Record<ButtonSize, string>;
 export declare const BUTTON_LOADER_ICON_SIZES: Record<ButtonSize, number>;
 export declare const BUTTON_VARIANT_CLASSNAMES: Record<ButtonVariant, string>;
-export declare const getIconColorClassName: ({ disabled, variant }: ButtonBaseProps) => string;
+export declare const getIconColorClassName: ({ disabled, variant }: Pick<ButtonBaseProps, "disabled" | "variant">) => string;

package/esm/Card/components/CardHeader.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+/// <reference types="react" />
 export declare type CardHeaderProps = JSX.IntrinsicElements["div"];
-export declare const CardHeader: ({ className, ...props }: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => JSX.Element;
+export declare const CardHeader: ({ className, ...props }: CardHeaderProps) => JSX.Element;
 export default CardHeader;

package/esm/Checkbox/Checkbox.d.ts

@@ -20,5 +20,5 @@ export declare type CheckboxProps = CheckboxInputProps & CheckboxCustomProps;
  * - A checkbox control has two primary states: selected and unselected. If required, there's an additional visual state for indeterminate (usually for a parent checkbox, when some children checkboxes are selected, but not all of them)
  * - Checkboxes require the use of a button to apply the settings once they are selected
  */
-export declare const Checkbox: React.ForwardRefExoticComponent<Pick<React.HTMLAttributes<HTMLInputElement>, "hidden" | "dir" | "slot" | "style" | "title" | "color" | "children" | "className" | "id" | "lang" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is"> & Pick<React.InputHTMLAttributes<HTMLInputElement>, "required" | "disabled" | "onChange" | "defaultChecked" | "autoFocus" | "checked"> & CheckboxCustomProps & React.RefAttributes<HTMLInputElement>>;
+export declare const Checkbox: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLInputElement>, "onChange"> & Pick<React.InputHTMLAttributes<HTMLInputElement>, "required" | "disabled" | "defaultChecked" | "onChange" | "autoFocus" | "checked"> & CheckboxCustomProps & React.RefAttributes<HTMLInputElement>>;
 export default Checkbox;

package/esm/Checkbox/Checkbox.js

@@ -77,6 +77,7 @@ export var Checkbox = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }, /*#__PURE__*/React.createElement(CheckboxIcon, {
     className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["checkbox-icon"])))
   }), /*#__PURE__*/React.createElement("input", _extends({}, checkboxProps, {
+    "aria-checked": indeterminate ? "mixed" : isChecked,
     id: id,
     className: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n              opacity-0 absolute inset-0 cursor-pointer\n              ", "\n            "])), disabled && "cursor-not-allowed"),
     type: "checkbox",

package/esm/DatePicker/DatePicker.tailwind.js

@@ -28,6 +28,10 @@ var datePickerPlugin = function datePickerPlugin(_ref) {
       textAlign: "center"
     }
   }, _defineProperty(_addComponents, prefix(".date-picker, .date-range-picker"), {
+    "& .DayPicker-Months": {
+      // Hack to align dates on the same grid
+      alignItems: "start"
+    },
     "& .DayPicker-Day": (_DayPickerDay = {
       borderRadius: defaultRadius
     }, _defineProperty(_DayPickerDay, "&--today".concat(not("outside")), {
@@ -42,8 +46,9 @@ var datePickerPlugin = function datePickerPlugin(_ref) {
         borderRadius: 9999,
         width: 32,
         height: 32,
-        left: 2,
-        top: 4,
+        left: "50%",
+        top: "50%",
+        transform: "translate(-50%, -50%)",
         zIndex: -1
       }
     }), _defineProperty(_DayPickerDay, "&--selected".concat(not("outside")), {

package/esm/DatePicker/utils.d.ts

@@ -1 +1 @@
-export declare const formatDate: (date: number | Date) => string;
+export declare const formatDate: (date: Date | number) => string;

package/esm/Dropdown/DropdownButton.d.ts

@@ -1,7 +1,7 @@
 import React, { FunctionComponent } from "react";
 import { ButtonProps } from "../Button";
 import { RenderTargetParams } from "./Dropdown";
-export interface DropdownButtonProps extends Omit<ButtonProps<"button">, "title"> {
+export interface DropdownButtonProps extends Omit<ButtonProps<"button">, "title" | "endIcon"> {
     /** Title displayed in the `Dropdown` */
     title: React.ReactNode;
     renderFooter?: (args: RenderTargetParams) => React.ReactNode;

package/esm/Dropdown/components/DropdownCollapsibleItem/DropdownCollapsibleItem.d.ts

@@ -1,6 +1,4 @@
 import React, { FC } from "react";
-export declare type DropdownCollapsibleValue = undefined | string | string[];
-export declare type DropdownCollapsiblePropsOnChange = (name: string, value: DropdownCollapsibleValue) => void;
 export interface DropdownCollapsibleItemProps {
     title: React.ReactNode;
     name?: string;

package/esm/Dropdown/components/DropdownCollapsibleItem/DropdownCollapsibleItem.js

@@ -7,7 +7,7 @@ import React, { useState } from "react";
 import { ChevronDown, ChevronRight } from "react-feather";
 import { uniqueId } from "../../../utils";
 import stl from "../../../styles/helpers/satellitePrefixer";
-import { useDropdownCollapsibleItemsGroup } from ".";
+import { useDropdownCollapsibleItemsGroup } from "./DropdownCollapsibleItemsGroupContext";
 export var DropdownCollapsibleItem = function DropdownCollapsibleItem(_ref) {
   var title = _ref.title,
       name = _ref.name,

package/esm/Link/Link.d.ts

@@ -5,7 +5,7 @@ export declare type LinkProps = {
     endIcon?: IconComponentType;
 } & React.AnchorHTMLAttributes<HTMLAnchorElement>;
 export declare const Link: React.ForwardRefExoticComponent<{
-    startIcon?: React.ComponentClass<import("react-feather").IconProps, any> | React.FunctionComponent<import("react-feather").IconProps> | undefined;
-    endIcon?: React.ComponentClass<import("react-feather").IconProps, any> | React.FunctionComponent<import("react-feather").IconProps> | undefined;
+    startIcon?: IconComponentType | undefined;
+    endIcon?: IconComponentType | undefined;
 } & React.AnchorHTMLAttributes<HTMLAnchorElement> & React.RefAttributes<HTMLAnchorElement>>;
 export default Link;

package/esm/Pagination/DotPagination/DotPagination.d.ts

@@ -4,6 +4,7 @@ export declare type DotPaginationProps = {
     currentPage: number;
     onChange: (page: number) => void;
     nbPages: number;
+    size?: "small" | "medium";
 };
-export declare const DotPagination: ({ currentPage, onChange, nbPages }: DotPaginationProps) => JSX.Element;
+export declare const DotPagination: ({ currentPage, onChange, nbPages, size }: DotPaginationProps) => JSX.Element;
 export default DotPagination;

package/esm/Pagination/DotPagination/DotPagination.js

@@ -7,7 +7,9 @@ import stl from "../../styles/helpers/satellitePrefixer";
 export var DotPagination = function DotPagination(_ref) {
   var currentPage = _ref.currentPage,
       onChange = _ref.onChange,
-      nbPages = _ref.nbPages;
+      nbPages = _ref.nbPages,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? "medium" : _ref$size;
   return /*#__PURE__*/React.createElement("ul", {
     className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["flex"])))
   }, new Array(nbPages).fill(undefined).map(function (_, idx) {
@@ -16,7 +18,7 @@ export var DotPagination = function DotPagination(_ref) {
       key: idx
     }, /*#__PURE__*/React.createElement("button", {
       "aria-label": "Go to page ".concat(pageIdx),
-      className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n              h-3 w-3 rounded-full mx-1\n              ", "\n            "])), currentPage === pageIdx ? "bg-accent-600" : "bg-grey-200"),
+      className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n              rounded-full mx-1\n              ", "\n              ", "\n            "])), currentPage === pageIdx ? "bg-accent-600" : "bg-grey-200", size === "medium" ? "h-3 w-3" : "h-2 w-2"),
       onClick: function onClick() {
         return onChange(pageIdx);
       }

package/esm/Pagination/Pagination/Pagination.js

@@ -23,6 +23,7 @@ var Group = function Group(_ref) {
       onChange = _ref.onChange;
   return /*#__PURE__*/React.createElement(React.Fragment, null, group.map(function (index) {
     return /*#__PURE__*/React.createElement(Button, {
+      "aria-label": "Go to page ".concat(index),
       key: index,
       variant: index === currentPage ? "primary" : "neutral",
       onClick: function onClick() {
@@ -63,6 +64,7 @@ export var Pagination = function Pagination(_ref2) {
   return /*#__PURE__*/React.createElement(ButtonGroup, {
     as: "nav"
   }, /*#__PURE__*/React.createElement(Button, {
+    "aria-label": "Go to previous page",
     disabled: currentPage === 1,
     onClick: function onClick() {
       return onChange(currentPage - 1);
@@ -82,6 +84,7 @@ export var Pagination = function Pagination(_ref2) {
     onChange: onChange,
     group: groups[2]
   }), /*#__PURE__*/React.createElement(Button, {
+    "aria-label": "Go to next page",
     disabled: currentPage === nbPages,
     onClick: function onClick() {
       return onChange(currentPage + 1);

package/esm/ProgressSpinner/ProgressSpinner.js

@@ -28,7 +28,7 @@ export var ProgressSpinner = function ProgressSpinner(_ref) {
     viewBox: "".concat(size / 2, " ").concat(size / 2, " ").concat(size, " ").concat(size),
     width: size,
     height: size
-  }), /*#__PURE__*/React.createElement("circle", {
+  }), /*#__PURE__*/React.createElement("title", null, "Loading spinner"), /*#__PURE__*/React.createElement("circle", {
     cx: size,
     cy: size,
     r: (size - thickness) / 2,

package/esm/RadioGroup/RadioButton.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 export declare type RadioButtonProps = React.HTMLAttributes<HTMLInputElement> & Pick<React.InputHTMLAttributes<HTMLInputElement>, "value" | "name" | "checked" | "defaultChecked" | "onChange" | "required" | "autoFocus" | "disabled">;
-export declare const RadioButton: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLInputElement> & Pick<React.InputHTMLAttributes<HTMLInputElement>, "required" | "disabled" | "name" | "onChange" | "defaultChecked" | "value" | "autoFocus" | "checked"> & React.RefAttributes<HTMLInputElement>>;
+export declare const RadioButton: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLInputElement> & Pick<React.InputHTMLAttributes<HTMLInputElement>, "required" | "disabled" | "defaultChecked" | "onChange" | "name" | "autoFocus" | "value" | "checked"> & React.RefAttributes<HTMLInputElement>>;
 export default RadioButton;

package/esm/RangeSlider/RangeSlider.d.ts

@@ -14,5 +14,5 @@ export interface RangeSliderProps extends Omit<React.DetailedHTMLProps<React.Inp
  * - Provide min and max value whenever possible
  * - Provide text input for better accessibility
  */
-export declare const RangeSlider: React.ForwardRefExoticComponent<Pick<RangeSliderProps, "max" | "required" | "disabled" | "hidden" | "dir" | "form" | "slot" | "style" | "title" | "pattern" | "color" | "size" | "multiple" | "className" | "height" | "id" | "lang" | "min" | "name" | "width" | "role" | "tabIndex" | "crossOrigin" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "src" | "value" | "alt" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "autoComplete" | "accept" | "capture" | "list" | "maxLength" | "minLength" | "readOnly" | "step" | "track1Color" | "track2Color"> & React.RefAttributes<HTMLInputElement>>;
+export declare const RangeSlider: React.ForwardRefExoticComponent<Pick<RangeSliderProps, "max" | "required" | "disabled" | "hidden" | "dir" | "form" | "slot" | "style" | "title" | "pattern" | "color" | "size" | "multiple" | "key" | "list" | "step" | "className" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "name" | "height" | "min" | "width" | "crossOrigin" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "value" | "accept" | "alt" | "autoComplete" | "capture" | "maxLength" | "minLength" | "readOnly" | "src" | "track1Color" | "track2Color"> & React.RefAttributes<HTMLInputElement>>;
 export default RangeSlider;

package/esm/Tables/DataTable/DataTable.d.ts

@@ -0,0 +1,41 @@
+import React from "react";
+import type { ColumnDefinition, Row, Status, SelectMode, PaginationConfiguration, Sorting, DataConfiguration, GetItemId } from "./types";
+declare type CanSelectItem<Item> = (item: Item, idx: number) => boolean;
+export interface DataTableProps<Item> {
+    data: Item[];
+    itemId?: GetItemId<Item>;
+    pagination?: PaginationConfiguration;
+    sorting?: Sorting[];
+    onChange?(dataConfiguration: DataConfiguration): void;
+    status?: Status;
+    noDataContent?: React.ReactNode;
+    errorContent?: React.ReactNode;
+    columns: ColumnDefinition<Item>[];
+    selectMode?: SelectMode;
+    selection?: string[];
+    onSelectionChange?(rowId: string[]): void;
+    canSelectItem?: CanSelectItem<Item>;
+    canHoverRow?(row: Row<Item>): boolean;
+    onRowHoveredChanged?(row: Row<Item> | null): void;
+}
+/**
+ * Tables are used to structure content in a grid to make it easier to see relationships and to facilitate understanding.
+ *
+ * #### Do
+ *
+ * - Organize columns and rows based on the needs of your users. To help people read the table, order the columns by importance from left to right, with the key pieces of content opening the row
+ * - Include units of measurement symbols in the header so you don't need to repeat them throughout the columns
+ * - Indicate sorting capabilities of a column with a chevron in the cell header
+ * - Start by columns with highest value to the user, and continue with less important ones
+ *
+ * #### Do not
+ *
+ * - Center align text in cells
+ *
+ * ## Best practices
+ *
+ * - If a cell is empty or unavailable, keep the cell empty to reduce noise and help with legibility.
+ * - Truncate long text to make it fit into a cell. However, choose column width wisely based on expected values, and adjust the table accordingly
+ */
+export declare const DataTable: <Item extends {}>({ data, itemId, columns, onChange, status, noDataContent, errorContent, sorting, pagination, selectMode, selection, onSelectionChange, canSelectItem, canHoverRow, onRowHoveredChanged, }: DataTableProps<Item>) => JSX.Element;
+export default DataTable;