@algolia/satellite 1.0.0-beta.150 → 1.0.0-beta.154

package/esm/Banners/Alert/Alert.d.ts

@@ -17,6 +17,10 @@ export interface AlertProps {
      */
     usageContext?: AlertContextType;
     icon?: IconComponentType;
+    /**
+     * Function triggered when the dismiss button is clicked.
+     * Dismiss button won't be rendered if absent.
+     * */
     onDismiss?(): void;
     children: ReactNode;
 }

package/esm/Banners/Alert/Alert.js

@@ -108,7 +108,7 @@ export var Alert = function Alert(_ref) {
       size: "1rem"
     }), /*#__PURE__*/_jsxs("div", {
       className: stl(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["flex flex-1 flex-col ", ""])), onDismiss && "mr-6"),
-      children: [title && /*#__PURE__*/_jsx("h4", {
+      children: [!!title && /*#__PURE__*/_jsx("h4", {
         className: stl(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["font-bold text-grey-900 mb-1"]))),
         children: title
       }), /*#__PURE__*/_jsx("div", {

package/esm/Banners/Promote/Promote.js

@@ -67,12 +67,12 @@ export var Promote = function Promote(_ref) {
     className: stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["relative flex"]))),
     fullBleed: true,
     as: "section",
-    children: [illustration && /*#__PURE__*/_jsx("div", {
+    children: [!!illustration && /*#__PURE__*/_jsx("div", {
       className: stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["w-full min-w-24 max-w-64 flex items-center justify-center bg-grey-100"]))),
       children: illustration
     }), /*#__PURE__*/_jsxs("div", {
       className: stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["", ""])), variant === "large" ? "p-6" : "p-4"),
-      children: [context && /*#__PURE__*/_jsx("span", {
+      children: [!!context && /*#__PURE__*/_jsx("span", {
         className: stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["block mb-1"]))),
         children: context
       }), /*#__PURE__*/_jsx("header", {
@@ -81,7 +81,7 @@ export var Promote = function Promote(_ref) {
       }), /*#__PURE__*/_jsx("div", {
         className: BODY_VARIANT_CLASSNAMES[variant],
         children: children
-      }), actions && /*#__PURE__*/_jsx("div", {
+      }), !!actions && /*#__PURE__*/_jsx("div", {
         className: cx(stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["flex space-x-2"]))), ACTIONS_VARIANT_CLASSNAMES[variant]),
         children: actions
       })]

package/esm/Card/Card.d.ts

@@ -11,7 +11,7 @@ export interface CardProps {
     style?: CSSProperties;
     /**
      * Specify HTML element `Card` should be presented as.
-     * @default "div"
+     * @default "section"
      */
     as?: CardAs;
     /** Should the content take up full full width of the `Card`. */

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

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

package/esm/Card/components/CardHeader.js

@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _templateObject;
-var _excluded = ["className"];
+var _excluded = ["className", "children"];
 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) { _defineProperty(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; }
 import cx from "clsx";
@@ -10,9 +10,11 @@ import stl from "../../styles/helpers/satellitePrefixer";
 import { jsx as _jsx } from "react/jsx-runtime";
 export var CardHeader = function CardHeader(_ref) {
   var className = _ref.className,
+    children = _ref.children,
     props = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({}, props), {}, {
-    className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["flex justify-between"]))), className)
+    className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["flex justify-between"]))), className),
+    children: children
   }));
 };
 export default CardHeader;

package/esm/Checkbox/Checkbox.js

@@ -11,6 +11,7 @@ import { forwardRef, useMemo, useState } from "react";
 import { Check, Minus } from "react-feather";
 import { useFieldState } from "../Field";
 import stl from "../styles/helpers/satellitePrefixer";
+import isRenderedChild from "../utils/isRenderedChild";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var generateFieldId = function generateFieldId() {
@@ -78,7 +79,7 @@ export var Checkbox = /*#__PURE__*/forwardRef(function (_ref, ref) {
         checked: isChecked,
         disabled: disabled
       }))]
-    }), children && /*#__PURE__*/_jsx("label", {
+    }), isRenderedChild(children) && /*#__PURE__*/_jsx("label", {
       className: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n            display-body\n            ", "\n            ", "\n          "])), disabled && "text-grey-300 cursor-not-allowed", textPosition === "left" ? "pr-2" : "pl-2"),
       htmlFor: id,
       children: children

package/esm/EmptyState/EmptyState.js

@@ -63,16 +63,16 @@ var renderEmptyState = function renderEmptyState(_ref) {
     className: containerClassNames,
     children: [/*#__PURE__*/_jsxs("div", {
       className: stl(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["min-w-2/5"]))),
-      children: [centered && medallion && /*#__PURE__*/_jsx("div", {
+      children: [centered && !!medallion && /*#__PURE__*/_jsx("div", {
         className: MEDALLION_CONTEXT_CLASSNAMES[usageContext],
         children: medallion
       }), /*#__PURE__*/_jsx("h2", {
         className: titleClassNames,
         children: title
-      }), description && /*#__PURE__*/_jsx("p", {
+      }), !!description && /*#__PURE__*/_jsx("p", {
         className: descriptionClassNames,
         children: description
-      }), actions && /*#__PURE__*/_jsx(FlexGrid, {
+      }), !!actions && /*#__PURE__*/_jsx(FlexGrid, {
         className: actionsClassNames,
         alignment: centered ? "center" : "leading",
         distribution: centered ? "center" : "leading",
@@ -80,7 +80,7 @@ var renderEmptyState = function renderEmptyState(_ref) {
         spacing: "sm",
         children: actions
       })]
-    }), illustration && !centered && usageContext === "page" && /*#__PURE__*/_jsx("div", {
+    }), !!illustration && !centered && usageContext === "page" && /*#__PURE__*/_jsx("div", {
       className: stl(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["empty-state-illustration ml-16 hidden lg:flex items-center justify-center"]))),
       children: illustration
     })]

package/esm/EmptyState/types.d.ts

@@ -21,7 +21,7 @@ export interface EmptyStatePropsAll {
      */
     usageContext?: EmptyStateUsageContexts;
     /**
-     * Define wether or not content should be centered
+     * Define whether or not content should be centered
      * @default false
      */
     centered?: boolean;

package/esm/Field/Field.js

@@ -57,7 +57,7 @@ export var Field = function Field(_ref) {
       children: [/*#__PURE__*/_jsxs("label", {
         className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["cursor-pointer flex ", ""])), !inline && "flex-col"),
         htmlFor: labelFor,
-        children: [label && /*#__PURE__*/_jsx("div", {
+        children: [!!label && /*#__PURE__*/_jsx("div", {
           className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["truncate ", ""])), inline ? "mr-2" : "mb-1"),
           children: label
         }), /*#__PURE__*/_jsx("div", {

package/esm/Flag/Flag.js

@@ -12,6 +12,7 @@ import { Card } from "../Card";
 import ProgressSpinner from "../ProgressSpinner";
 import { useLocale } from "../Satellite";
 import stl from "../styles/helpers/satellitePrefixer";
+import isRenderedChild from "../utils/isRenderedChild";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var DEFAULT_FLAG_LOCALE = {
@@ -98,7 +99,7 @@ export var Flag = function Flag(_ref) {
             size: "small",
             onClick: onDismiss
           })]
-        }), hasTitle && children && /*#__PURE__*/_jsx("div", {
+        }), hasTitle && isRenderedChild(children) && /*#__PURE__*/_jsx("div", {
           className: stl(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["text-grey-600 mt-2"]))),
           children: children
         })]

package/esm/Flag/types.d.ts

@@ -11,9 +11,14 @@ export interface Notification {
     icon?: IconComponentType;
     /**  @default false */
     loading?: boolean;
-    /**  @default blue */
+    /**  @default "blue" */
     variant?: ColorVariant;
+    /**
+     * Function triggered when the dismiss button is clicked.
+     * Dismiss button won't be rendered if absent.
+     * */
     onDismiss?: () => void;
+    /** Defines if and how long before the notification should be dismissed (in ms) */
     autoDismissAfter?: number;
     locale?: {
         dismissText?: string;

package/esm/FlexGrid/FlexGrid.d.ts

@@ -4,12 +4,46 @@ export declare type FlexGridAlignment = "leading" | "trailing" | "center" | "fil
 export declare type FlexGridDistribution = "equalSpacing" | "leading" | "trailing" | "center" | "fill" | "fillEvenly";
 export declare type FlexGridSpacing = "none" | "sm" | "md" | "lg" | "xl";
 export interface FlexGridProps {
+    /** @ignore */
     className?: string;
+    /**
+     * Define which direction the content should flow
+     * @default "row"
+     */
     direction?: FlexGridDirection;
+    /**
+     * Define whether or not the contents be allowed to wrap
+     * @default false
+     */
     wrap?: boolean;
+    /**
+     * Define whether or not the content be wrapped in an inline-flex container
+     * @default false
+     */
     inline?: boolean;
+    /**
+     * @default "leading"
+     */
     alignment?: FlexGridAlignment;
+    /**
+     * @default "leading"
+     */
     distribution?: FlexGridDistribution;
+    /**
+     * The spacing directly corelates to our Tailwind spacing scale
+     *
+     * none: `spacing.0 → 0px`
+     *
+     * sm: `spacing.2 → 8px`
+     *
+     * md: `spacing.4 → 16px`
+     *
+     * lg: `spacing.6 → 24px`
+     *
+     * xl: `spacing.8 → 32px`
+     *
+     * @default "none"
+     */
     spacing?: FlexGridSpacing;
     children: ReactNode;
 }

package/esm/Input/Input.d.ts

@@ -12,7 +12,7 @@ export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
     variant?: InputVariant;
     startIcon?: IconComponentType;
     endItem?: ReactNode;
-    /** Define wether or not a "clear input" x button should show on hover */
+    /** Define whether or not a "clear input" x button should show on hover */
     clearable?: boolean;
     locale?: InputPropsLocale;
 }

package/esm/Input/Input.js

@@ -134,7 +134,7 @@ export var Input = /*#__PURE__*/forwardRef(function (_ref, externalRef) {
         setFocused(false);
         (_inputProps$onBlur = inputProps.onBlur) === null || _inputProps$onBlur === void 0 ? void 0 : _inputProps$onBlur.call(inputProps, evt);
       }
-    })), clearable && !disabled && !readOnly && !isValueEmpty && /*#__PURE__*/_jsx(IconButton, {
+    })), clearable && !disabled && !readOnly && !isValueEmpty ? /*#__PURE__*/_jsx(IconButton, {
       className: stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["mr-2 ", ""])), focused ? "visible" : "invisible group-hover:visible"),
       title: locale.clearInput,
       icon: X,
@@ -146,7 +146,7 @@ export var Input = /*#__PURE__*/forwardRef(function (_ref, externalRef) {
         evt.preventDefault();
         triggerInputChange("");
       }
-    }), endItem && /*#__PURE__*/_jsx("div", {
+    }) : null, !!endItem && /*#__PURE__*/_jsx("div", {
       className: stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["mr-4"]))),
       children: endItem
     }), /*#__PURE__*/_jsx(StatusIcon, {}), type === "number" && !disabled && /*#__PURE__*/_jsxs("div", {

package/esm/Modal/Modal.d.ts

@@ -5,13 +5,20 @@ export declare type ModalLocale = {
 };
 export interface ModalProps {
     open?: boolean;
-    title?: string | JSX.Element;
+    /** Descriptive title for `Modal` */
+    title?: ReactNode;
+    /** @ignore */
     className?: string;
+    /** Should the content take up full full width of the `Modal`. */
     fullBleed?: boolean;
+    /** Define whether or not the modal should animate on show and hide */
     animate?: boolean;
     size?: ModalSizeVariant;
+    /** Define whether or not the dismiss button should be hidden */
     hideCloseIcon?: boolean;
+    /** Define whether or not the modal should be vertically aligned */
     centerY?: boolean;
+    /** Function triggered when the dismiss button is clicked */
     onDismiss?: () => void;
     children: ReactNode;
     locale?: ModalLocale;

package/esm/Modal/Modal.js

@@ -127,7 +127,7 @@ export var Modal = function Modal(_ref) {
           "aria-label": title || "Modal",
           children: [/*#__PURE__*/_jsxs("header", {
             className: stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n                px-8 min-h-14\n                flex items-center justify-between  space-x-2\n                ", "\n                ", "\n              "])), title ? "border-b border-grey-100" : "justify-end", !title && hideCloseIcon && "hidden"),
-            children: [title && /*#__PURE__*/_jsx("h2", {
+            children: [!!title && /*#__PURE__*/_jsx("h2", {
               id: modalTitleId,
               className: stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["flex-1 display-heading truncate"]))),
               children: title

package/esm/Pagination/CompactPagination/CompactPagination.js

@@ -53,7 +53,7 @@ export var CompactPagination = function CompactPagination(props) {
         return props.onChange(props.currentPage - 1);
       },
       disabled: isFirstPage
-    }), label && /*#__PURE__*/_jsx("span", {
+    }), !!label && /*#__PURE__*/_jsx("span", {
       className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["inline-block text-center tabular-nums px-2"]))),
       children: label
     }), /*#__PURE__*/_jsx(IconButton, {

package/esm/RangeSlider/RangeSlider.d.ts

@@ -1,18 +1,34 @@
-import type { DetailedHTMLProps, InputHTMLAttributes } from "react";
-export interface RangeSliderProps extends Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "defaultValue" | "checked" | "defaultChecked" | "type" | "children"> {
-    value?: number;
-    defaultValue?: number;
+/// <reference types="react" />
+declare type RangeSliderValue = number | [number, number];
+declare type WidenNumber<T> = T extends number ? number : T;
+export interface RangeSliderProps<Value extends RangeSliderValue = number> {
+    value?: WidenNumber<Value>;
+    defaultValue?: WidenNumber<Value>;
+    /** Event handler called when the value changes. */
+    onChange?: (value: WidenNumber<Value>) => void;
+    /** Event handler called when the value changes at the end of an interaction. */
+    onCommit?: (value: WidenNumber<Value>) => void;
+    id?: string;
+    name?: string;
+    className?: string;
+    "aria-label"?: string;
+    disabled?: boolean;
     min?: number;
     max?: number;
+    step?: number;
+    minStepsBetweenThumbs?: number;
     track1Color?: string;
     track2Color?: string;
 }
 /**
- * A range slider is an input field where users select a numeric value within a given range (minimum and maximum values).
+ * A range slider is an input field where users select one or two numeric values within a given range (minimum and maximum values).
  *
  * - Range sliders should always be used with a label
  * - Provide min and max value whenever possible
  * - Provide text input for better accessibility
  */
-export declare const RangeSlider: import("react").ForwardRefExoticComponent<Pick<RangeSliderProps, "max" | "required" | "key" | "id" | "height" | "width" | "name" | "color" | "translate" | "value" | "hidden" | "dir" | "form" | "slot" | "style" | "title" | "pattern" | "accessKey" | "draggable" | "lang" | "className" | "prefix" | "contentEditable" | "enterKeyHint" | "inputMode" | "tabIndex" | "disabled" | "multiple" | "size" | "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "crossOrigin" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "list" | "maxLength" | "min" | "minLength" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "contextMenu" | "placeholder" | "spellCheck" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "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" | "readOnly" | "src" | "step" | "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" | "track1Color" | "track2Color"> & import("react").RefAttributes<HTMLInputElement>>;
+export declare const RangeSlider: {
+    <Value extends RangeSliderValue = number>({ className, value, defaultValue, onChange, onCommit, disabled, min, max, track1Color, track2Color, ...otherProps }: RangeSliderProps<Value>): JSX.Element;
+    displayName: string;
+};
 export default RangeSlider;

package/esm/RangeSlider/RangeSlider.js

@@ -1,104 +1,95 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-var _excluded = ["className", "value", "defaultValue", "min", "max", "disabled", "track1Color", "track2Color"];
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _excluded = ["className", "value", "defaultValue", "onChange", "onCommit", "disabled", "min", "max", "track1Color", "track2Color"];
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 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) { _defineProperty(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; }
+import { SliderRange, Root as SliderRoot, SliderThumb, SliderTrack } from "@radix-ui/react-slider";
 import cx from "clsx";
-import { forwardRef, useEffect, useState } from "react";
 import colors from "../styles/colors";
 import stl from "../styles/helpers/satellitePrefixer";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var clamp = function clamp(value, lowerBound, higherBound) {
-  if (value < lowerBound) return lowerBound;
-  if (value > higherBound) return higherBound;
-  return value;
+var TRACK_SHADOWS_CLASSNAME = stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["shadow-[inset_0_1px_3px_0_rgb(0_0_0_/_10%),0_0.5px_0_0_rgb(255_255_255_/_5%)]"])));
+var coerceToRadixValue = function coerceToRadixValue(value) {
+  return typeof value === "number" ? [value] : value;
 };
-var getScaleValues = function getScaleValues(value, min, max) {
-  var maxScale = (value - min) / (max - min);
-  var minScale = 1 - maxScale;
-  return [clamp(maxScale, 0, 1), clamp(minScale, 0, 1)];
+var getThumbCount = function getThumbCount(value) {
+  return Array.isArray(value) ? value.length : 1;
+};
+var ThumbGroove = function ThumbGroove(_ref) {
+  var className = _ref.className;
+  return /*#__PURE__*/_jsx("span", {
+    className: cx(stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["h-3 w-px bg-grey-200"]))), className)
+  });
 };
 
 /**
- * A range slider is an input field where users select a numeric value within a given range (minimum and maximum values).
+ * A range slider is an input field where users select one or two numeric values within a given range (minimum and maximum values).
  *
  * - Range sliders should always be used with a label
  * - Provide min and max value whenever possible
  * - Provide text input for better accessibility
  */
-export var RangeSlider = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var className = _ref.className,
-    value = _ref.value,
-    defaultValue = _ref.defaultValue,
-    _ref$min = _ref.min,
-    min = _ref$min === void 0 ? 0 : _ref$min,
-    _ref$max = _ref.max,
-    max = _ref$max === void 0 ? 100 : _ref$max,
-    disabled = _ref.disabled,
-    track1Color = _ref.track1Color,
-    track2Color = _ref.track2Color,
-    otherProps = _objectWithoutProperties(_ref, _excluded);
-  var _useState = useState(function () {
-      return (typeof value !== "undefined" ? value : defaultValue) || 0;
-    }),
-    _useState2 = _slicedToArray(_useState, 2),
-    internalValue = _useState2[0],
-    setInternalValue = _useState2[1];
-  var _getScaleValues = getScaleValues(internalValue, min, max),
-    _getScaleValues2 = _slicedToArray(_getScaleValues, 2),
-    track1 = _getScaleValues2[0],
-    track2 = _getScaleValues2[1];
-  useEffect(function () {
-    if (typeof value !== "undefined" && value !== internalValue) {
-      setInternalValue(value);
-    }
-  }, [internalValue, value]);
-  var handleChange = function handleChange(evt) {
-    if (otherProps.onChange) {
-      otherProps.onChange(evt);
-    }
-    if (!evt.defaultPrevented) {
-      setInternalValue(evt.currentTarget.valueAsNumber);
-    }
-  };
+export var RangeSlider = function RangeSlider(_ref2) {
+  var className = _ref2.className,
+    value = _ref2.value,
+    defaultValue = _ref2.defaultValue,
+    onChange = _ref2.onChange,
+    onCommit = _ref2.onCommit,
+    disabled = _ref2.disabled,
+    _ref2$min = _ref2.min,
+    min = _ref2$min === void 0 ? 0 : _ref2$min,
+    _ref2$max = _ref2.max,
+    max = _ref2$max === void 0 ? 100 : _ref2$max,
+    track1Color = _ref2.track1Color,
+    track2Color = _ref2.track2Color,
+    otherProps = _objectWithoutProperties(_ref2, _excluded);
+  var thumbsCount = getThumbCount(value !== null && value !== void 0 ? value : defaultValue);
   var trackColors = {
     track1: disabled ? colors.grey[200] : track1Color,
     track2: disabled ? colors.grey[100] : track2Color
   };
-  return /*#__PURE__*/_jsxs("div", {
-    className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["range-slider ", ""])), disabled && "opacity-70"), className),
-    children: [/*#__PURE__*/_jsx("div", {
-      className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["range-slider-track-1"]))),
+  return /*#__PURE__*/_jsxs(SliderRoot, _objectSpread(_objectSpread({}, otherProps), {}, {
+    className: cx(stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["relative h-6 min-w-[200px] flex items-center select-none touch-none aria-disabled:opacity-70 cursor-pointer aria-disabled:cursor-not-allowed"]))), className),
+    value: coerceToRadixValue(value),
+    defaultValue: coerceToRadixValue(defaultValue),
+    onValueChange: function onValueChange(value) {
+      return (// @ts-expect-error
+        onChange === null || onChange === void 0 ? void 0 : onChange(value.length === 1 ? value[0] : value)
+      );
+    },
+    onValueCommit: function onValueCommit(value) {
+      return (// @ts-expect-error
+        onCommit === null || onCommit === void 0 ? void 0 : onCommit(value.length === 1 ? value[0] : value)
+      );
+    },
+    disabled: disabled,
+    max: max,
+    min: min,
+    children: [/*#__PURE__*/_jsx(SliderTrack, {
+      className: cx(stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["relative h-1 flex-1 rounded bg-grey-100"]))), TRACK_SHADOWS_CLASSNAME),
       style: {
-        width: "".concat(track1 * 100, "%"),
-        backgroundColor: trackColors.track1
-      }
-    }), /*#__PURE__*/_jsx("div", {
-      className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["range-slider-track-2"]))),
-      style: {
-        width: "".concat(track2 * 100, "%"),
         backgroundColor: trackColors.track2
-      }
-    }), /*#__PURE__*/_jsx("div", {
-      className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["range-slider-thumb"]))),
-      style: {
-        left: "".concat(track1 * 100, "%")
-      }
-    }), /*#__PURE__*/_jsx("input", _objectSpread(_objectSpread({}, otherProps), {}, {
-      ref: ref,
-      className: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["range-slider-input"]))),
-      type: "range",
-      min: min,
-      max: max,
-      value: internalValue,
-      onChange: handleChange,
-      disabled: disabled
-    }))]
-  });
-});
+      },
+      children: /*#__PURE__*/_jsx(SliderRange, {
+        className: cx(stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["absolute rounded-full h-full bg-accent-600"]))), TRACK_SHADOWS_CLASSNAME),
+        style: {
+          backgroundColor: trackColors.track1
+        }
+      })
+    }), Array(thumbsCount).fill(undefined).map(function (_, idx) {
+      return /*#__PURE__*/_jsxs(SliderThumb, {
+        className: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n              absolute -translate-x-1.5 -translate-y-3\n              w-3 h-6 rounded-[2px] border border-grey-200\n              bg-white bg-gradient-to-b from-white to-grey-50 shadow-[0_1px_0_0_rgb(35_38_59_/_5%)]\n            "]))),
+        children: [/*#__PURE__*/_jsx(ThumbGroove, {
+          className: stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["absolute top-1.5 right-1.5"])))
+        }), /*#__PURE__*/_jsx(ThumbGroove, {
+          className: stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["absolute top-1.5 left-1.5"])))
+        })]
+      }, "thumb_".concat(idx));
+    })]
+  }));
+};
 RangeSlider.displayName = "RangeSlider";
 export default RangeSlider;

package/esm/Sidebar/SidebarButtonLink.js

@@ -1,10 +1,11 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+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) { _defineProperty(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; }
 import { useState } from "react";
+import { ExternalLink } from "react-feather";
 import stl from "../styles/helpers/satellitePrefixer";
 import { TooltipWrapper } from "../Tooltip";
 import useLinkProps from "../utils/useLinkProps";
@@ -44,7 +45,8 @@ export var SidebarButtonLink = function SidebarButtonLink(props) {
     _useState2 = _slicedToArray(_useState, 2),
     isInteractedWith = _useState2[0],
     setIsInteractedWith = _useState2[1];
-  var isActive = !disabled && isLinkActive(href);
+  var isExternalLink = linkProps.target === "_blank";
+  var isActive = !disabled && !isExternalLink && isLinkActive(href);
   var showColors = !disabled && (isActive || isInteractedWith);
   var Icon = "active" in icon ? showColors ? icon.active : icon.inactive : icon;
   var tooltipContent = "tooltipContent" in props ? props.tooltipContent : children;
@@ -71,8 +73,11 @@ export var SidebarButtonLink = function SidebarButtonLink(props) {
         height: 20,
         width: 20
       }), /*#__PURE__*/_jsx("span", {
-        className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n              ", "\n              ", "\n              ", "\n            "])), collapsed && "sr-only", showColors ? "text-accent-600" : "typo-subdued", isActive && "font-bold"),
+        className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n            ", "\n            ", "\n            ", "\n          "])), collapsed && "sr-only", showColors ? "text-accent-600" : "typo-subdued", isActive && "font-bold"),
         children: children
+      }), isExternalLink && !collapsed && /*#__PURE__*/_jsx(ExternalLink, {
+        className: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["", " !ml-1 shrink-0"])), showColors ? "text-accent-600" : "typo-subdued"),
+        size: "1em"
       })]
     }))
   });

package/esm/Sidebar/SidebarHeading.js

@@ -12,7 +12,7 @@ export var SidebarHeading = function SidebarHeading(_ref) {
     collapsed = _useSidebarContext.collapsed;
   return /*#__PURE__*/_jsx("span", {
     id: id,
-    className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n          h-8 block leading-[2rem]\n          display-subheading typo-subdued uppercase select-none\n          ", "\n        "])), collapsed && "invisible"), className),
+    className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n          h-8 block leading-[2rem]\n          display-subheading typo-subdued uppercase select-none\n          ", "\n        "])), collapsed && "sr-only"), className),
     children: children
   });
 };