@vitality-ds/components 4.11.0 → 4.12.0

package/dist/Input/DatePicker/hooks/useDatePicker.js

@@ -8,7 +8,7 @@ exports["default"] = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 var _logic = require("../logic");
-var useDatePicker = function useDatePicker(onChange, onSelectedDateChange, value) {
+var useDatePicker = function useDatePicker(onChange, onSelectedDateChange, value, openCalendarOnFocus, onKeyDown) {
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     isOpen = _useState2[0],
@@ -32,8 +32,8 @@ var useDatePicker = function useDatePicker(onChange, onSelectedDateChange, value
     onChange((0, _logic.createEventObject)(event.target.value));
     setTextValue(event.target.value);
   };
-  for (var _len = arguments.length, allowedElementIds = new Array(_len > 3 ? _len - 3 : 0), _key = 3; _key < _len; _key++) {
-    allowedElementIds[_key - 3] = arguments[_key];
+  for (var _len = arguments.length, allowedElementIds = new Array(_len > 5 ? _len - 5 : 0), _key = 5; _key < _len; _key++) {
+    allowedElementIds[_key - 5] = arguments[_key];
   }
   var onInteractOutside = _logic.handleOnInteractOutside.apply(void 0, [setIsOpen].concat(allowedElementIds));
   var onIconButtonClick = function onIconButtonClick(e) {
@@ -41,7 +41,17 @@ var useDatePicker = function useDatePicker(onChange, onSelectedDateChange, value
     setIsOpen(!isOpen);
   };
   var onInputFocus = function onInputFocus() {
-    return setIsOpen(true);
+    return setIsOpen(openCalendarOnFocus);
+  };
+  var onEscapeKeyDown = function onEscapeKeyDown() {
+    return setIsOpen(false);
+  };
+  var handleOnKeyDown = function handleOnKeyDown(event) {
+    onKeyDown(event);
+    // Close the calendar on tab press to avoid the focus being "stuck" in the calendar
+    if (event.key === "Tab") {
+      setIsOpen(false);
+    }
   };
   return {
     onCalendarCallbackValueChange: onCalendarCallbackValueChange,
@@ -50,7 +60,9 @@ var useDatePicker = function useDatePicker(onChange, onSelectedDateChange, value
     onIconButtonClick: onIconButtonClick,
     onInputFocus: onInputFocus,
     isOpen: isOpen,
-    textValue: textValue
+    textValue: textValue,
+    onEscapeKeyDown: onEscapeKeyDown,
+    handleOnKeyDown: handleOnKeyDown
   };
 };
 var _default = exports["default"] = useDatePicker;

package/dist/Input/DatePicker/index.js

@@ -16,7 +16,7 @@ var _Calendar = _interopRequireDefault(require("./components/Calendar"));
 var _useDatePicker2 = _interopRequireDefault(require("./hooks/useDatePicker"));
 var _logic = require("./logic");
 var _styled = require("./styled");
-var _excluded = ["name", "value", "onChange", "minYear", "maxYear", "id", "disabled", "css", "style", "className", "as", "asChild", "calendarValue", "onSelectedDateChange", "showFirstDateInRangeOnOpen"];
+var _excluded = ["name", "value", "onChange", "minYear", "maxYear", "id", "disabled", "css", "style", "className", "as", "asChild", "calendarValue", "openCalendarOnFocus", "onSelectedDateChange", "showFirstDateInRangeOnOpen", "onKeyDown"];
 var DatePicker = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardedRef) {
   var name = _ref.name,
     value = _ref.value,
@@ -34,28 +34,37 @@ var DatePicker = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwa
     as = _ref.as,
     asChild = _ref.asChild,
     calendarValue = _ref.calendarValue,
+    _ref$openCalendarOnFo = _ref.openCalendarOnFocus,
+    openCalendarOnFocus = _ref$openCalendarOnFo === void 0 ? true : _ref$openCalendarOnFo,
     _ref$onSelectedDateCh = _ref.onSelectedDateChange,
     onSelectedDateChange = _ref$onSelectedDateCh === void 0 ? function () {
       return null;
     } : _ref$onSelectedDateCh,
     _ref$showFirstDateInR = _ref.showFirstDateInRangeOnOpen,
     showFirstDateInRangeOnOpen = _ref$showFirstDateInR === void 0 ? false : _ref$showFirstDateInR,
+    _ref$onKeyDown = _ref.onKeyDown,
+    onKeyDown = _ref$onKeyDown === void 0 ? function () {
+      return null;
+    } : _ref$onKeyDown,
     restProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   var currentTime = _luxon.DateTime.now();
   var iconButtonId = "".concat(id, "IconButton");
-  var _useDatePicker = (0, _useDatePicker2["default"])(onChange, onSelectedDateChange, value, id, iconButtonId),
+  var _useDatePicker = (0, _useDatePicker2["default"])(onChange, onSelectedDateChange, value, openCalendarOnFocus, onKeyDown, id, iconButtonId),
     onCalendarCallbackValueChange = _useDatePicker.onCalendarCallbackValueChange,
     onTextInputValueChange = _useDatePicker.onTextInputValueChange,
     onInteractOutside = _useDatePicker.onInteractOutside,
     onIconButtonClick = _useDatePicker.onIconButtonClick,
     onInputFocus = _useDatePicker.onInputFocus,
     isOpen = _useDatePicker.isOpen,
-    textValue = _useDatePicker.textValue;
+    textValue = _useDatePicker.textValue,
+    onEscapeKeyDown = _useDatePicker.onEscapeKeyDown,
+    handleOnKeyDown = _useDatePicker.handleOnKeyDown;
   return /*#__PURE__*/_react["default"].createElement(_styled.BaseDatePicker, {
     ref: forwardedRef
   }, /*#__PURE__*/_react["default"].createElement(_Popover["default"], {
     isOpen: isOpen,
     onInteractOutside: onInteractOutside,
+    onEscapeKeyDown: onEscapeKeyDown,
     triggerElement: /*#__PURE__*/_react["default"].createElement(_TextInput["default"], (0, _extends2["default"])({
       autoComplete: "off",
       maskProps: {
@@ -66,6 +75,8 @@ var DatePicker = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwa
         props: {
           icon: /*#__PURE__*/_react["default"].createElement(_icons.Date, null),
           onClick: onIconButtonClick,
+          // Let the user tab to the next field without focusing the icon button
+          tabIndex: -1,
           tooltipContent: "Toggle calendar popover",
           disabled: disabled,
           id: iconButtonId
@@ -76,6 +87,7 @@ var DatePicker = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwa
       onFocus: onInputFocus,
       name: name,
       onChange: onTextInputValueChange,
+      onKeyDown: handleOnKeyDown,
       value: textValue || ""
     }, restProps)),
     content: /*#__PURE__*/_react["default"].createElement(_Calendar["default"], {

package/dist/Popover/index.js

@@ -10,7 +10,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = _interopRequireDefault(require("react"));
 var _constants = require("../DropdownMenu/constants");
 var _styled = require("./styled");
-var _excluded = ["triggerElement", "content", "isOpen", "onInteractOutside", "side", "align"];
+var _excluded = ["triggerElement", "content", "isOpen", "onInteractOutside", "side", "align", "onEscapeKeyDown"];
 function Popover(_ref) {
   var triggerElement = _ref.triggerElement,
     content = _ref.content,
@@ -18,6 +18,7 @@ function Popover(_ref) {
     onInteractOutside = _ref.onInteractOutside,
     side = _ref.side,
     align = _ref.align,
+    onEscapeKeyDown = _ref.onEscapeKeyDown,
     restProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   return /*#__PURE__*/_react["default"].createElement(_styled.PopoverRoot, (0, _extends2["default"])({
     open: isOpen
@@ -30,7 +31,8 @@ function Popover(_ref) {
     onInteractOutside: onInteractOutside,
     onOpenAutoFocus: function onOpenAutoFocus(event) {
       return event.preventDefault();
-    }
+    },
+    onEscapeKeyDown: onEscapeKeyDown
   }, content));
 }
 var _default = exports["default"] = Popover;

package/dist/components/src/Input/DatePicker/hooks/useDatePicker.d.ts

@@ -1,7 +1,7 @@
 import { MouseEvent } from "react";
 import { RadixOnInteractOutsideEvent } from "../../../Popover/types";
 import { OnChangeReturnType } from "../types";
-declare const useDatePicker: (onChange: (value: OnChangeReturnType) => string | void, onSelectedDateChange: () => void, value: string, ...allowedElementIds: any[]) => {
+declare const useDatePicker: (onChange: (value: OnChangeReturnType) => string | void, onSelectedDateChange: () => void, value: string, openCalendarOnFocus: boolean, onKeyDown: (event: React.KeyboardEvent) => void, ...allowedElementIds: any[]) => {
     onCalendarCallbackValueChange: (newValue: unknown) => void;
     onTextInputValueChange: (string: any) => unknown;
     onInteractOutside: (event: RadixOnInteractOutsideEvent) => void;
@@ -9,5 +9,7 @@ declare const useDatePicker: (onChange: (value: OnChangeReturnType) => string |
     onInputFocus: () => void;
     isOpen: boolean;
     textValue: string;
+    onEscapeKeyDown: () => void;
+    handleOnKeyDown: (event: React.KeyboardEvent) => void;
 };
 export default useDatePicker;

package/dist/components/src/Input/DatePicker/types.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ExcludedProps } from "@vitality-ds/system";
 import { TextInputProps } from "../TextInput/types";
 import { CalendarProps } from "./components/Calendar/types";
@@ -22,4 +23,14 @@ export declare type DatePickerProps = ExcludedProps & Omit<TextInputProps, "ador
      * The Function run when the date changes as a result of a calendar selection.
      */
     onSelectedDateChange?: () => void;
+    /**
+     * @default true
+     * If true, the calendar popover will open when the input is focused.
+     * If false, the calendar popover will not open on focus.
+     */
+    openCalendarOnFocus?: boolean;
+    /**
+     * The function run on key down in the input.
+     */
+    onKeyDown?: (event: React.KeyboardEvent) => void;
 };

package/dist/components/src/Popover/index.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { PopoverProps } from "./types";
-declare function Popover({ triggerElement, content, isOpen, onInteractOutside, side, align, ...restProps }: PopoverProps): JSX.Element;
+declare function Popover({ triggerElement, content, isOpen, onInteractOutside, side, align, onEscapeKeyDown, ...restProps }: PopoverProps): JSX.Element;
 export default Popover;

package/dist/components/src/Popover/types.d.ts

@@ -32,5 +32,9 @@ export declare type PopoverProps = ExcludedProps & ComponentProps<typeof Popover
      * @default "center"
      */
     align?: PopoverContentProps["align"];
+    /**
+     * Function to run when the escape key is pressed while the popover is open.
+     */
+    onEscapeKeyDown?: PopoverContentProps["onEscapeKeyDown"];
 };
 export {};

package/dist/esm/Input/DatePicker/hooks/useDatePicker.js

@@ -1,7 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import { useCallback, useMemo, useState } from "react";
 import { convertISOToAusDate, createEventObject, handleOnInteractOutside } from "../logic";
-var useDatePicker = function useDatePicker(onChange, onSelectedDateChange, value) {
+var useDatePicker = function useDatePicker(onChange, onSelectedDateChange, value, openCalendarOnFocus, onKeyDown) {
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isOpen = _useState2[0],
@@ -25,8 +25,8 @@ var useDatePicker = function useDatePicker(onChange, onSelectedDateChange, value
     onChange(createEventObject(event.target.value));
     setTextValue(event.target.value);
   };
-  for (var _len = arguments.length, allowedElementIds = new Array(_len > 3 ? _len - 3 : 0), _key = 3; _key < _len; _key++) {
-    allowedElementIds[_key - 3] = arguments[_key];
+  for (var _len = arguments.length, allowedElementIds = new Array(_len > 5 ? _len - 5 : 0), _key = 5; _key < _len; _key++) {
+    allowedElementIds[_key - 5] = arguments[_key];
   }
   var onInteractOutside = handleOnInteractOutside.apply(void 0, [setIsOpen].concat(allowedElementIds));
   var onIconButtonClick = function onIconButtonClick(e) {
@@ -34,7 +34,17 @@ var useDatePicker = function useDatePicker(onChange, onSelectedDateChange, value
     setIsOpen(!isOpen);
   };
   var onInputFocus = function onInputFocus() {
-    return setIsOpen(true);
+    return setIsOpen(openCalendarOnFocus);
+  };
+  var onEscapeKeyDown = function onEscapeKeyDown() {
+    return setIsOpen(false);
+  };
+  var handleOnKeyDown = function handleOnKeyDown(event) {
+    onKeyDown(event);
+    // Close the calendar on tab press to avoid the focus being "stuck" in the calendar
+    if (event.key === "Tab") {
+      setIsOpen(false);
+    }
   };
   return {
     onCalendarCallbackValueChange: onCalendarCallbackValueChange,
@@ -43,7 +53,9 @@ var useDatePicker = function useDatePicker(onChange, onSelectedDateChange, value
     onIconButtonClick: onIconButtonClick,
     onInputFocus: onInputFocus,
     isOpen: isOpen,
-    textValue: textValue
+    textValue: textValue,
+    onEscapeKeyDown: onEscapeKeyDown,
+    handleOnKeyDown: handleOnKeyDown
   };
 };
 export default useDatePicker;

package/dist/esm/Input/DatePicker/index.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["name", "value", "onChange", "minYear", "maxYear", "id", "disabled", "css", "style", "className", "as", "asChild", "calendarValue", "onSelectedDateChange", "showFirstDateInRangeOnOpen"];
+var _excluded = ["name", "value", "onChange", "minYear", "maxYear", "id", "disabled", "css", "style", "className", "as", "asChild", "calendarValue", "openCalendarOnFocus", "onSelectedDateChange", "showFirstDateInRangeOnOpen", "onKeyDown"];
 import { Date } from "@vitality-ds/icons";
 import { DateTime } from "luxon";
 import React from "react";
@@ -27,28 +27,37 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
     as = _ref.as,
     asChild = _ref.asChild,
     calendarValue = _ref.calendarValue,
+    _ref$openCalendarOnFo = _ref.openCalendarOnFocus,
+    openCalendarOnFocus = _ref$openCalendarOnFo === void 0 ? true : _ref$openCalendarOnFo,
     _ref$onSelectedDateCh = _ref.onSelectedDateChange,
     onSelectedDateChange = _ref$onSelectedDateCh === void 0 ? function () {
       return null;
     } : _ref$onSelectedDateCh,
     _ref$showFirstDateInR = _ref.showFirstDateInRangeOnOpen,
     showFirstDateInRangeOnOpen = _ref$showFirstDateInR === void 0 ? false : _ref$showFirstDateInR,
+    _ref$onKeyDown = _ref.onKeyDown,
+    onKeyDown = _ref$onKeyDown === void 0 ? function () {
+      return null;
+    } : _ref$onKeyDown,
     restProps = _objectWithoutProperties(_ref, _excluded);
   var currentTime = DateTime.now();
   var iconButtonId = "".concat(id, "IconButton");
-  var _useDatePicker = useDatePicker(onChange, onSelectedDateChange, value, id, iconButtonId),
+  var _useDatePicker = useDatePicker(onChange, onSelectedDateChange, value, openCalendarOnFocus, onKeyDown, id, iconButtonId),
     onCalendarCallbackValueChange = _useDatePicker.onCalendarCallbackValueChange,
     onTextInputValueChange = _useDatePicker.onTextInputValueChange,
     onInteractOutside = _useDatePicker.onInteractOutside,
     onIconButtonClick = _useDatePicker.onIconButtonClick,
     onInputFocus = _useDatePicker.onInputFocus,
     isOpen = _useDatePicker.isOpen,
-    textValue = _useDatePicker.textValue;
+    textValue = _useDatePicker.textValue,
+    onEscapeKeyDown = _useDatePicker.onEscapeKeyDown,
+    handleOnKeyDown = _useDatePicker.handleOnKeyDown;
   return /*#__PURE__*/React.createElement(BaseDatePicker, {
     ref: forwardedRef
   }, /*#__PURE__*/React.createElement(Popover, {
     isOpen: isOpen,
     onInteractOutside: onInteractOutside,
+    onEscapeKeyDown: onEscapeKeyDown,
     triggerElement: /*#__PURE__*/React.createElement(TextInput, _extends({
       autoComplete: "off",
       maskProps: {
@@ -59,6 +68,8 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
         props: {
           icon: /*#__PURE__*/React.createElement(Date, null),
           onClick: onIconButtonClick,
+          // Let the user tab to the next field without focusing the icon button
+          tabIndex: -1,
           tooltipContent: "Toggle calendar popover",
           disabled: disabled,
           id: iconButtonId
@@ -69,6 +80,7 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
       onFocus: onInputFocus,
       name: name,
       onChange: onTextInputValueChange,
+      onKeyDown: handleOnKeyDown,
       value: textValue || ""
     }, restProps)),
     content: /*#__PURE__*/React.createElement(Calendar, {

package/dist/esm/Popover/index.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["triggerElement", "content", "isOpen", "onInteractOutside", "side", "align"];
+var _excluded = ["triggerElement", "content", "isOpen", "onInteractOutside", "side", "align", "onEscapeKeyDown"];
 import React from "react";
 import { FLOATING_ELEMENT_SIDE_OFFSET } from "../DropdownMenu/constants";
 import { PopoverContent, PopoverRoot, PopoverTrigger } from "./styled";
@@ -11,6 +11,7 @@ function Popover(_ref) {
     onInteractOutside = _ref.onInteractOutside,
     side = _ref.side,
     align = _ref.align,
+    onEscapeKeyDown = _ref.onEscapeKeyDown,
     restProps = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React.createElement(PopoverRoot, _extends({
     open: isOpen
@@ -23,7 +24,8 @@ function Popover(_ref) {
     onInteractOutside: onInteractOutside,
     onOpenAutoFocus: function onOpenAutoFocus(event) {
       return event.preventDefault();
-    }
+    },
+    onEscapeKeyDown: onEscapeKeyDown
   }, content));
 }
 export default Popover;