@algolia/satellite 1.0.0-beta.128 → 1.0.0-beta.129

package/esm/Banners/Promote/Promote.d.ts

@@ -10,9 +10,9 @@ interface WidePromoteProps {
     illustration?: React.ReactNode;
 }
 export declare type PromoteProps = {
-    /** Product context for the banner (either a string or a React component) */
+    /** Product context for the banner */
     context?: React.ReactNode;
-    /** Descriptive title for banner (either a string or a React component) */
+    /** Descriptive title for banner */
     title: React.ReactNode;
     /** Buttons */
     actions?: React.ReactNode;

package/esm/Banners/Promote/Promote.js

@@ -83,7 +83,7 @@ export var Promote = function Promote(_ref) {
     className: stl(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["absolute top-2 right-2"])))
   }, /*#__PURE__*/React.createElement(IconButton, {
     icon: X,
-    title: "Close banner",
+    title: "Close",
     variant: "subtle",
     size: "small",
     onClick: function onClick(evt) {

package/esm/DatePicker/DatePicker/DatePicker.d.ts

@@ -16,7 +16,7 @@ interface RenderTargetParams {
     toggle: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
     isOpen: boolean;
 }
-export interface DatePickerProps {
+export declare type DatePickerProps = {
     calendarProps?: Pick<CalendarProps, "fromMonth" | "toMonth" | "disabledDays">;
     onOpen?: DisplayProps["onClick"];
     onChange?: (value: Date | null) => void;
@@ -30,6 +30,11 @@ export interface DatePickerProps {
     initialValue?: Date | null;
     buttonSize?: DisplayProps["size"];
     modalPlacement?: ModalProps["placement"];
-}
+} & ({
+    editableYear?: false;
+} | {
+    editableYear: true;
+    years?: number[];
+});
 declare const DatePicker: FunctionComponent<DatePickerProps>;
 export default DatePicker;

package/esm/DatePicker/DatePicker/DatePicker.js

@@ -4,7 +4,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
-import React, { useState } from "react";
+import React, { useMemo, useState } from "react";
 import stl from "../../styles/helpers/satellitePrefixer";
 import Modal from "../components/Modal";
 import Footer from "../components/Footer";
@@ -77,6 +77,17 @@ var DatePicker = function DatePicker(props) {
     }
   };
 
+  var yearProps = useMemo(function () {
+    var _state$selected;
+
+    return props.editableYear ? {
+      editableYear: true,
+      initialDate: (_state$selected = state.selected) !== null && _state$selected !== void 0 ? _state$selected : undefined,
+      years: props.years
+    } : {
+      editableYear: false
+    };
+  }, [props]);
   return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
     ref: setTargetElement,
     className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["inline-block"])))
@@ -108,7 +119,7 @@ var DatePicker = function DatePicker(props) {
   }, (_props$calendarProps = props === null || props === void 0 ? void 0 : props.calendarProps) !== null && _props$calendarProps !== void 0 ? _props$calendarProps : {}, {
     selectedDays: value !== null && value !== void 0 ? value : undefined,
     onDayClick: handleDayClick
-  })), /*#__PURE__*/React.createElement(Footer, null, props.renderLeftFooter && /*#__PURE__*/React.createElement("div", null, props.renderLeftFooter({
+  }, yearProps)), /*#__PURE__*/React.createElement(Footer, null, props.renderLeftFooter && /*#__PURE__*/React.createElement("div", null, props.renderLeftFooter({
     state: state,
     dispatch: dispatch
   })), !props.renderRightPanel && /*#__PURE__*/React.createElement(FooterActions, {

package/esm/DatePicker/DatePicker.tailwind.js

@@ -24,8 +24,16 @@ var datePickerPlugin = function datePickerPlugin(_ref) {
   };
 
   addComponents((_addComponents = {
-    ".DayPicker-Caption": {
-      textAlign: "center"
+    ".DayPicker-Year": {
+      // ChevronDown svg from react-feather,
+      backgroundImage: 'url(\'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>\')',
+      backgroundRepeat: "no-repeat",
+      backgroundPositionX: "100%",
+      backgroundPositionY: "5px",
+      paddingRight: "1rem"
+    },
+    ".DayPicker-Month": {
+      marginTop: "0rem"
     }
   }, _defineProperty(_addComponents, prefix(".date-picker, .date-range-picker"), {
     "& .DayPicker-Months": {

package/esm/DatePicker/DateRangePicker/DateRangePicker.d.ts

@@ -16,7 +16,7 @@ interface RenderTargetParams {
     toggle: () => void;
     isOpen: boolean;
 }
-export interface DateRangePickerProps {
+export declare type DateRangePickerProps = {
     id?: string;
     range: DateRangePickerTimeRange | null;
     displayOnlyRanges?: DateRangePickerTimeRange[];
@@ -30,6 +30,11 @@ export interface DateRangePickerProps {
     renderRightPanel?: (args: RightSidePanelComponentArgs) => React.ReactNode;
     buttonSize?: DateRangePickerDisplayProps["buttonSize"];
     modalPlacement?: ModalProps["placement"];
-}
+} & ({
+    editableYear?: false;
+} | {
+    editableYear: true;
+    years?: number[];
+});
 declare const DateRangePicker: FunctionComponent<DateRangePickerProps>;
 export default DateRangePicker;

package/esm/DatePicker/DateRangePicker/DateRangePicker.js

@@ -1,10 +1,12 @@
 import _extends from "@babel/runtime/helpers/extends";
 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;
 
-import React, { useState } from "react";
+var _excluded = ["id", "range", "displayOnlyRanges", "calendarProps", "initialState", "stateReducer", "onAction", "validate", "renderTarget", "renderLeftFooter", "renderRightPanel", "buttonSize", "modalPlacement"];
+import React, { useMemo, useState } from "react";
 import stl from "../../styles/helpers/satellitePrefixer";
 import Modal from "../components/Modal";
 import Footer from "../components/Footer";
@@ -39,7 +41,8 @@ var DateRangePicker = function DateRangePicker(_ref2) {
       renderLeftFooter = _ref2.renderLeftFooter,
       renderRightPanel = _ref2.renderRightPanel,
       buttonSize = _ref2.buttonSize,
-      modalPlacement = _ref2.modalPlacement;
+      modalPlacement = _ref2.modalPlacement,
+      props = _objectWithoutProperties(_ref2, _excluded);
 
   var _useState = useState(null),
       _useState2 = _slicedToArray(_useState, 2),
@@ -147,6 +150,17 @@ var DateRangePicker = function DateRangePicker(_ref2) {
     }),
     hoveredTo: (_state$hovered = state.hovered) !== null && _state$hovered !== void 0 ? _state$hovered : undefined
   };
+  var yearProps = useMemo(function () {
+    var _ref3, _displayedRange$start3;
+
+    return props.editableYear ? {
+      editableYear: true,
+      initialDate: (_ref3 = (_displayedRange$start3 = displayedRange.start) !== null && _displayedRange$start3 !== void 0 ? _displayedRange$start3 : displayedRange.end) !== null && _ref3 !== void 0 ? _ref3 : undefined,
+      years: props.years
+    } : {
+      editableYear: false
+    };
+  }, [props, displayedRange]);
   return /*#__PURE__*/React.createElement("div", {
     className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["date-range-picker"])))
   }, /*#__PURE__*/React.createElement("span", {
@@ -186,7 +200,7 @@ var DateRangePicker = function DateRangePicker(_ref2) {
     onDayClick: handleDayClick,
     onDayMouseEnter: handleMouseEnter,
     onDayMouseLeave: handleMouseLeave
-  })), /*#__PURE__*/React.createElement(Footer, null, renderLeftFooter && /*#__PURE__*/React.createElement("div", null, renderLeftFooter({
+  }, yearProps)), /*#__PURE__*/React.createElement(Footer, null, renderLeftFooter && /*#__PURE__*/React.createElement("div", null, renderLeftFooter({
     state: state,
     dispatch: dispatch
   })), !renderRightPanel && /*#__PURE__*/React.createElement(FooterActions, {

package/esm/DatePicker/components/Calendar.d.ts

@@ -1,7 +1,13 @@
 import { FunctionComponent } from "react";
 import { DayPickerProps } from "react-day-picker";
 declare type ExcludedDayPickerProps = "captionElement" | "showOutsideDays" | "enableOutsideDaysClick" | "fixedWeeks" | "labels" | "navbarElement" | "onTodayButtonClick" | "pagedNavigation" | "renderDay" | "renderWeek" | "reverseMonths" | "showWeekNumbers" | "showWeekDays" | "todayButton" | "weekdayElement" | "weekdaysLong" | "weekdaysShort";
-export interface CalendarProps extends Omit<DayPickerProps, ExcludedDayPickerProps> {
-}
+export declare type EditableYearProps = {
+    editableYear?: false;
+} | {
+    editableYear: true;
+    years?: number[];
+    initialDate?: Date;
+};
+export declare type CalendarProps = Omit<DayPickerProps, ExcludedDayPickerProps> & EditableYearProps;
 declare const Calendar: FunctionComponent<CalendarProps>;
 export default Calendar;

package/esm/DatePicker/components/Calendar.js

@@ -1,24 +1,64 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import React from "react";
+import React, { useCallback, useMemo, useState } from "react";
 import DayPicker from "react-day-picker";
+import { add, eachYearOfInterval, getYear, setYear } from "date-fns";
 import NavBar from "./NavBar";
 var excludedDayPickerPropsList = ["captionElement", "showOutsideDays", "enableOutsideDaysClick", "fixedWeeks", "labels", "navbarElement", "onTodayButtonClick", "pagedNavigation", "renderDay", "renderWeek", "reverseMonths", "showWeekNumbers", "showWeekDays", "todayButton", "weekdayElement", "weekdaysLong", "weekdaysShort"];
 
 var Calendar = function Calendar(props) {
+  var initialDate = useMemo(function () {
+    return props.editableYear && props.initialDate ? props.initialDate : new Date();
+  }, [props]);
+
+  var _useState = useState(initialDate),
+      _useState2 = _slicedToArray(_useState, 2),
+      month = _useState2[0],
+      setMonth = _useState2[1];
+
+  var years = useMemo(function () {
+    if (!props.editableYear) return [];
+    if (props.years) return props.years;
+    return eachYearOfInterval({
+      start: add(initialDate, {
+        years: -5
+      }),
+      end: add(initialDate, {
+        years: 10
+      })
+    }).map(getYear);
+  }, [props, initialDate]);
+  var onYearChange = useCallback(function (year) {
+    return setMonth(setYear(month, year));
+  }, [month]);
   var curatedProps = Object.fromEntries(Object.entries(props).filter(function (_ref) {
     var _ref2 = _slicedToArray(_ref, 1),
         key = _ref2[0];
 
-    return (// @ts-ignore
+    return (// @ts-expect-error
       !excludedDayPickerPropsList.includes(key)
     );
   }));
+  var yearsProps = useMemo(function () {
+    return props.editableYear ? {
+      editableYear: true,
+      years: years,
+      onYearChange: onYearChange
+    } : {
+      editableYear: false
+    };
+  }, [onYearChange, props, years]);
   return /*#__PURE__*/React.createElement(DayPicker, _extends({}, curatedProps, {
+    month: props.editableYear ? month : undefined,
     showOutsideDays: false,
     enableOutsideDaysClick: false,
     fixedWeeks: false,
-    navbarElement: NavBar
+    navbarElement: function navbarElement(navBarProps) {
+      return /*#__PURE__*/React.createElement(NavBar, _extends({}, navBarProps, yearsProps));
+    },
+    captionElement: function captionElement() {
+      return null;
+    }
   }));
 };
 

package/esm/DatePicker/components/NavBar.d.ts

@@ -1,5 +1,12 @@
 import { FunctionComponent } from "react";
 import { NavbarElementProps } from "react-day-picker";
-export declare type NavBarProps = NavbarElementProps;
+export declare type NavBarYearProps = {
+    editableYear?: false;
+} | {
+    editableYear: true;
+    years: number[];
+    onYearChange: (year: number) => void;
+};
+export declare type NavBarProps = NavbarElementProps & NavBarYearProps;
 declare const NavBar: FunctionComponent<NavBarProps>;
 export default NavBar;

package/esm/DatePicker/components/NavBar.js

@@ -1,7 +1,10 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 
-var _templateObject;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
+var _excluded = ["onPreviousClick", "onNextClick", "showPreviousButton", "showNextButton", "month", "localeUtils"];
+import cx from "classnames";
 import React from "react";
 import { ChevronLeft, ChevronRight } from "react-feather";
 import stl from "../../styles/helpers/satellitePrefixer";
@@ -11,9 +14,13 @@ var NavBar = function NavBar(_ref) {
   var onPreviousClick = _ref.onPreviousClick,
       onNextClick = _ref.onNextClick,
       showPreviousButton = _ref.showPreviousButton,
-      showNextButton = _ref.showNextButton;
+      showNextButton = _ref.showNextButton,
+      month = _ref.month,
+      localeUtils = _ref.localeUtils,
+      props = _objectWithoutProperties(_ref, _excluded);
+
   return /*#__PURE__*/React.createElement("div", {
-    className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["w-full absolute top-3 left-0 px-5 pb-0 flex justify-between"])))
+    className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["w-full top-3 left-0 pt-5 px-5 pb-2 flex justify-between"])))
   }, /*#__PURE__*/React.createElement(IconButton, {
     icon: ChevronLeft,
     title: "Previous month",
@@ -21,7 +28,22 @@ var NavBar = function NavBar(_ref) {
       return onPreviousClick();
     },
     disabled: !showPreviousButton
-  }), /*#__PURE__*/React.createElement(IconButton, {
+  }), /*#__PURE__*/React.createElement("div", {
+    className: cx(stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["flex items-center text-center"]))))
+  }, /*#__PURE__*/React.createElement("div", {
+    className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["font-medium text-md"])))
+  }, localeUtils.getMonths()[month.getMonth()], " ", props.editableYear ? /*#__PURE__*/React.createElement("select", {
+    className: cx("DayPicker-Year", stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["pl-0.5 font-medium outline-none border-transparent border-2 rounded focus:border-nebula-600 focus:shadow-z100 appearance-none"])))),
+    value: month.getFullYear(),
+    onChange: function onChange(e) {
+      return props.onYearChange(parseInt(e.currentTarget.value));
+    }
+  }, props.years.map(function (year) {
+    return /*#__PURE__*/React.createElement("option", {
+      key: year,
+      value: year
+    }, year);
+  })) : month.getFullYear())), /*#__PURE__*/React.createElement(IconButton, {
     icon: ChevronRight,
     title: "Next month",
     onClick: function onClick() {

package/esm/Dropdown/DropdownButton.d.ts

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

package/esm/EmptyState/types.d.ts

@@ -3,7 +3,7 @@ import { FlexGridDirection } from "../FlexGrid";
 export declare type EmptyStateUsageContexts = "result" | "feature" | "page";
 export declare type EmptyStateWidths = "medium" | "large" | "xlarge";
 export interface EmptyStatePropsAll {
-    /** Descriptive title for the state (either a string or a React component) */
+    /** Descriptive title for the state */
     title: React.ReactNode;
     /** Optional description to explain why the screen is empty or define next steps */
     description?: React.ReactNode;

package/esm/Insert/Insert.d.ts

@@ -5,6 +5,7 @@ declare type InsertContext = {
     variant?: BadgeVariants;
 };
 export interface InsertProps {
+    /** Descriptive title for the `Insert` */
     title: React.ReactNode;
     contexts?: Array<string | InsertContext>;
 }

package/package.json

@@ -1,18 +1,18 @@
 {
   "name": "@algolia/satellite",
-  "version": "1.0.0-beta.128",
+  "version": "1.0.0-beta.129",
   "description": "Algolia design system React components",
   "scripts": {
-    "clean": "del dist",
+    "clean": "rimraf dist",
     "prebuild": "yarn clean",
     "build": "cross-env NODE_ENV=production run-p build:types build:js build:manifests build:css build:css-min build:scss",
     "build:_js": "babel src --extensions \".ts,.tsx,.js\" --ignore \"src/**/*.d.ts,src/**/*.stories.tsx,src/**/*.test.ts,src/**/*.test.tsx\"",
     "build:esm": "cross-env BABEL_MODULE_TYPE=ESM yarn build:_js --out-dir dist/esm",
     "build:cjs": "cross-env BABEL_MODULE_TYPE=CJS yarn build:_js --out-dir dist/cjs",
     "build:js": "run-p build:esm build:cjs",
-    "build:css": "NODE_ENV= postcss -o dist/satellite.css src/styles/satellite.css",
-    "build:css-min": "NODE_ENV=production postcss -o dist/satellite.min.css src/styles/satellite.css",
-    "build:css-storybook": "NODE_ENV=storybook postcss -o dist/satellite.css src/styles/satellite.css",
+    "build:css": "cross-env NODE_ENV= postcss -o dist/satellite.css src/styles/satellite.css",
+    "build:css-min": "cross-env NODE_ENV=production postcss -o dist/satellite.min.css src/styles/satellite.css",
+    "build:css-storybook": "cross-env NODE_ENV=storybook postcss -o dist/satellite.css src/styles/satellite.css",
     "build:scss": "node ./scripts/build-scss-variables.js",
     "build:types": "node ./scripts/build-types.js",
     "build:manifests": "node ./scripts/prepare-manifests.js",
@@ -29,7 +29,7 @@
     "version": "yarn changelog && git add CHANGELOG.md",
     "postversion": "git push && git push --tags",
     "release": "./scripts/release.sh",
-    "chromatic": "NODE_ENV=storybook chromatic --build-script-name build:storybook --exit-zero-on-changes --auto-accept-changes master"
+    "chromatic": "cross-env NODE_ENV=storybook chromatic --build-script-name build:storybook --exit-zero-on-changes --auto-accept-changes master"
   },
   "publishConfig": {
     "access": "public"
@@ -43,7 +43,12 @@
     "react",
     "design"
   ],
-  "author": "Algolia (contact@algolia.com)",
+  "author": "Algolia <contact@algolia.com>",
+  "contributors": [
+    "Vincent Lemeunier <vincent.lemeunier@algolia.com>",
+    "Kevin Østerkilde <kevin.osterkilde@algolia.com>",
+    "Clément Aupiais <clement.aupiais@algolia.com>"
+  ],
   "license": "MIT",
   "bugs": {
     "url": "https://github.com/algolia/satellite/issues"

package/satellite.css

@@ -3100,8 +3100,16 @@ input:disabled ~ .stl-toggle {
   }
 }
 
-.DayPicker-Caption {
-  text-align: center;
+.DayPicker-Year {
+  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>');
+  background-repeat: no-repeat;
+  background-position-x: 100%;
+  background-position-y: 5px;
+  padding-right: 1rem;
+}
+
+.DayPicker-Month {
+  margin-top: 0rem;
 }
 
 .stl-date-picker .DayPicker-Months, .stl-date-range-picker .DayPicker-Months {