react-widgets - npm Package Compare versions

Comparing version 5.0.0-beta.13 to 5.0.0-beta.14

lib/Accessors.d.ts

@@ -7,4 +7,4 @@ import { DataItem, Value } from './types';
 export declare type TextAccessor = string | TextAccessorFn;
-export declare const dataValue: (dataItem: unknown, field?: string | DataKeyAccessorFn | undefined) => unknown;
-export declare const dataText: (dataItem: unknown, textField?: string | TextAccessorFn | undefined) => string;
+export declare const dataValue: (dataItem: DataItem, field?: string | DataKeyAccessorFn | undefined) => unknown;
+export declare const dataText: (dataItem: DataItem, textField?: string | TextAccessorFn | undefined) => string;
 /**
@@ -18,9 +18,9 @@ * I don't know that the shallow equal makes sense here but am too afraid to
 export declare const useAccessors: (textField?: string | TextAccessorFn | undefined, dataKey?: string | DataKeyAccessorFn | undefined) => {
-    text: (item: unknown) => string;
-    value: (item: unknown) => unknown;
-    indexOf: (data: readonly unknown[], value: unknown) => number;
-    matches: (a: unknown, b: unknown) => boolean;
-    findOrSelf: <TDataItem>(data: readonly TDataItem[], value: unknown) => TDataItem;
-    includes: (data: readonly unknown[], value: unknown) => boolean;
+    text: (item: DataItem) => string;
+    value: (item: DataItem) => unknown;
+    indexOf: (data: readonly DataItem[], value: Value) => number;
+    matches: (a: DataItem, b: DataItem) => boolean;
+    findOrSelf: <TDataItem>(data: readonly TDataItem[], value: Value) => TDataItem;
+    includes: (data: readonly DataItem[], value: Value) => boolean;
 };
 //# sourceMappingURL=Accessors.d.ts.map

lib/AddToListOption.js

@@ -43,3 +43,3 @@ "use strict";
   const [ref, focused, id] = (0, _FocusListContext.useListOption)(CREATE_OPTION);
-  return _react.default.createElement("button", Object.assign({
+  return /*#__PURE__*/_react.default.createElement("button", Object.assign({
     id: id,
@@ -46,0 +46,0 @@ ref: ref,

lib/AutocompleteListItem.d.ts

@@ -0,1 +1,2 @@
+/// <reference types="react" />
 import PropTypes from 'prop-types';
@@ -2,0 +3,0 @@ declare function AutocompleteListItem({ text, searchTerm, }: {

lib/AutocompleteListItem.js

@@ -27,3 +27,3 @@ "use strict";
   if (idx === -1 || searchTerm.length >= text.length) return text;
-  return _react.default.createElement(_react.default.Fragment, null, text.slice(0, idx), _react.default.createElement("strong", null, text.slice(idx, idx + searchTerm.length)), text.slice(idx + searchTerm.length));
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, text.slice(0, idx), /*#__PURE__*/_react.default.createElement("strong", null, text.slice(idx, idx + searchTerm.length)), text.slice(idx + searchTerm.length));
 }
@@ -30,0 +30,0 @@

lib/Button.d.ts

@@ -7,11 +7,7 @@ import * as React from 'react';
     busy?: boolean;
-    active?: boolean;
-    variant?: 'primary' | 'select' | null;
     spinner?: ReactNode;
-    acceptFocus?: boolean;
     children?: ReactNode;
-    component?: React.ElementType;
 }
-declare function Button({ className, disabled, label, icon, busy, active, type, acceptFocus, children, variant, spinner, component: Tag, ...props }: Props): JSX.Element;
+declare function Button({ className, disabled, label, icon, busy, children, spinner, ...props }: Props): JSX.Element;
 export default Button;
 //# sourceMappingURL=Button.d.ts.map

lib/Button.js

@@ -31,21 +31,16 @@ "use strict";
     busy,
-    active,
-    type,
-    acceptFocus,
     children,
-    variant = 'primary',
-    spinner = _Icon.Spinner,
-    component: Tag = 'button'
+    spinner = _Icon.Spinner
   } = _ref,
-      props = _objectWithoutProperties(_ref, ["className", "disabled", "label", "icon", "busy", "active", "type", "acceptFocus", "children", "variant", "spinner", "component"]);
+      props = _objectWithoutProperties(_ref, ["className", "disabled", "label", "icon", "busy", "children", "spinner"]);
 
-  if (Tag === 'button') type = type || 'button';
-  return React.createElement(Tag, Object.assign({}, props, {
+  return /*#__PURE__*/React.createElement("button", Object.assign({
+    tabIndex: -1
+  }, props, {
     title: label,
-    type: type,
-    tabIndex: !acceptFocus ? -1 : undefined,
+    type: "button",
     disabled: disabled,
+    "aria-label": label,
     "aria-disabled": disabled,
-    "aria-label": label,
-    className: (0, _classnames.default)(className, 'rw-btn', !acceptFocus && 'rw-outline-none', active && !disabled && 'rw-state-active', variant && 'rw-btn-' + variant)
+    className: (0, _classnames.default)(className, 'rw-btn')
   }), busy ? spinner : icon, children);
@@ -52,0 +47,0 @@ }

lib/Calendar.d.ts

@@ -0,1 +1,2 @@
+/// <reference types="react" />
 import PropTypes from 'prop-types';
@@ -45,3 +46,3 @@ import { DateFormats } from './Localization';
  */
-declare function Calendar({ id, autoFocus, bordered, views, tabIndex, disabled, readOnly, className, value, defaultValue, onChange, currentDate: pCurrentDate, defaultCurrentDate, onCurrentDateChange, min, max, view, defaultView, onViewChange, onKeyDown, onNavigate, renderDay, isRtl, messages, formats, ...elementProps }: CalendarProps): JSX.Element;
+declare function Calendar({ id, autoFocus, bordered, views, tabIndex, disabled, readOnly, className, value, defaultValue, onChange, currentDate: pCurrentDate, defaultCurrentDate, onCurrentDateChange, min, max, view, defaultView, onViewChange, onKeyDown, onNavigate, renderDay, messages, formats, ...elementProps }: CalendarProps): JSX.Element;
 declare namespace Calendar {
@@ -96,3 +97,3 @@ var displayName: string;
          */
-        view(props: any, ...args: any[]): any;
+        view(props: any, ...args: any[]): Error | null;
         /**
@@ -178,3 +179,2 @@ * Defines a list of views the Calendar can traverse through, starting with the
         }>>;
-        isRtl: PropTypes.Requireable<boolean>;
         messages: PropTypes.Requireable<PropTypes.InferProps<{
@@ -181,0 +181,0 @@ moveBack: PropTypes.Requireable<string>;

lib/Calendar.js

@@ -244,3 +244,2 @@ "use strict";
   }),
-  isRtl: _propTypes.default.bool,
   messages: _propTypes.default.shape({
@@ -314,7 +313,6 @@ moveBack: _propTypes.default.string,
     renderDay,
-    isRtl,
     messages,
     formats
   } = _ref,
-      elementProps = _objectWithoutProperties(_ref, ["id", "autoFocus", "bordered", "views", "tabIndex", "disabled", "readOnly", "className", "value", "defaultValue", "onChange", "currentDate", "defaultCurrentDate", "onCurrentDateChange", "min", "max", "view", "defaultView", "onViewChange", "onKeyDown", "onNavigate", "renderDay", "isRtl", "messages", "formats"]);
+      elementProps = _objectWithoutProperties(_ref, ["id", "autoFocus", "bordered", "views", "tabIndex", "disabled", "readOnly", "className", "value", "defaultValue", "onChange", "currentDate", "defaultCurrentDate", "onCurrentDateChange", "min", "max", "view", "defaultView", "onViewChange", "onKeyDown", "onNavigate", "renderDay", "messages", "formats"]);
 
@@ -401,3 +399,4 @@ const [currentValue, handleChange] = (0, _uncontrollable.useUncontrolledProp)(value, defaultValue, onChange);
       } else {
-        if (isRtl && OPPOSITE_DIRECTION[direction]) direction = OPPOSITE_DIRECTION[direction];
+        const isRTL = getComputedStyle(e.currentTarget).getPropertyValue('direction') === 'rtl';
+        if (isRTL && direction in OPPOSITE_DIRECTION) direction = OPPOSITE_DIRECTION[direction];
         let nextDate = Calendar.move(currentDate, min, max, currentView, direction);
@@ -483,3 +482,3 @@
   const nextDisabled = isDisabled || !_dates.default.inRange(nextDate('RIGHT'), min, max, currentView);
-  return _react.default.createElement(_Widget.default, Object.assign({}, elementProps, {
+  return /*#__PURE__*/_react.default.createElement(_Widget.default, Object.assign({}, elementProps, {
     role: "group",
@@ -491,5 +490,4 @@ ref: ref,
     tabIndex: tabIndex,
-    className: (0, _classnames.default)(className, 'rw-calendar', bordered && 'rw-widget-container')
-  }), _react.default.createElement(_CalendarHeader.default, {
-    isRtl: isRtl,
+    className: (0, _classnames.default)(className, 'rw-calendar', bordered && 'rw-calendar-contained')
+  }), /*#__PURE__*/_react.default.createElement(_CalendarHeader.default, {
     label: getHeaderLabel(),
@@ -500,3 +498,3 @@ labelId: labelId,
     prevDisabled: prevDisabled,
-    todayDisabled: disabled || todayNotInRange,
+    todayDisabled: isDisabled || todayNotInRange,
     nextDisabled: nextDisabled,
@@ -507,6 +505,6 @@ onViewChange: handleViewChangeImpl,
     onMoveToday: handleMoveToday
-  }), _react.default.createElement(Calendar.Transition, {
+  }), /*#__PURE__*/_react.default.createElement(Calendar.Transition, {
     direction: slideDirection,
     onTransitionEnd: moveFocus
-  }, _react.default.createElement(View, {
+  }, /*#__PURE__*/_react.default.createElement(View, {
     key: key,
@@ -518,3 +516,3 @@ min: min,
     localizer: localizer,
-    disabled: disabled,
+    disabled: isDisabled,
     focusedItem: currentDate,
@@ -521,0 +519,0 @@ onChange: handleDateChange,

lib/CalendarHeader.d.ts

@@ -19,4 +19,4 @@ import React from 'react';
 }
-declare function CalendarHeader({ localizer, label, labelId, onMoveRight, onMoveToday, onMoveLeft, onViewChange, prevDisabled, todayDisabled, upDisabled, nextDisabled, navigatePrevIcon, navigateNextIcon, isRtl, }: Props): JSX.Element;
+declare function CalendarHeader({ localizer, label, labelId, onMoveRight, onMoveToday, onMoveLeft, onViewChange, prevDisabled, todayDisabled, upDisabled, nextDisabled, navigatePrevIcon, navigateNextIcon, }: Props): JSX.Element;
 export default CalendarHeader;
 //# sourceMappingURL=CalendarHeader.d.ts.map

lib/CalendarHeader.js

@@ -10,3 +10,3 @@ "use strict";
 
-var _Button = _interopRequireDefault(require("./Button"));
+var _CalendarButton = _interopRequireDefault(require("./CalendarButton"));
 
@@ -30,9 +30,7 @@ var _Icon = require("./Icon");
   navigatePrevIcon = _Icon.chevronLeft,
-  navigateNextIcon = _Icon.chevronRight,
-  isRtl
+  navigateNextIcon = _Icon.chevronRight
 }) {
-  return _react.default.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement("div", {
     className: "rw-calendar-header"
-  }, _react.default.createElement(_Button.default, {
-    acceptFocus: true,
+  }, /*#__PURE__*/_react.default.createElement(_CalendarButton.default, {
     id: labelId,
@@ -44,4 +42,3 @@ onClick: onViewChange,
     "aria-atomic": "true"
-  }, label, " ", _Icon.caretDown), _react.default.createElement(_Button.default, {
-    acceptFocus: true,
+  }, label, " ", _Icon.caretDown), /*#__PURE__*/_react.default.createElement(_CalendarButton.default, {
     className: "rw-calendar-btn-left",
@@ -51,10 +48,8 @@ onClick: onMoveLeft,
     label: localizer.messages.moveBack(),
-    icon: isRtl ? navigateNextIcon : navigatePrevIcon
-  }), _react.default.createElement(_Button.default, {
-    acceptFocus: true,
+    icon: navigatePrevIcon
+  }), /*#__PURE__*/_react.default.createElement(_CalendarButton.default, {
     className: "rw-calendar-btn-today",
     disabled: todayDisabled,
     onClick: onMoveToday
-  }, localizer.messages.moveToday()), _react.default.createElement(_Button.default, {
-    acceptFocus: true,
+  }, localizer.messages.moveToday()), /*#__PURE__*/_react.default.createElement(_CalendarButton.default, {
     className: "rw-calendar-btn-right",
@@ -64,3 +59,3 @@ onClick: onMoveRight,
     label: localizer.messages.moveForward(),
-    icon: isRtl ? navigatePrevIcon : navigateNextIcon
+    icon: navigateNextIcon
   }));
@@ -67,0 +62,0 @@ }

lib/CalendarView.js

@@ -36,7 +36,9 @@ "use strict";
   (0, _react.useEffect)(() => {
+    var _node$querySelector;
+
     const node = ref.current;
     if (!node || !focused) return;
-    node.querySelector('.rw-cell[tabindex]').focus();
+    (_node$querySelector = node.querySelector('.rw-cell[tabindex]')) === null || _node$querySelector === void 0 ? void 0 : _node$querySelector.focus();
   }, [focusedItem, focused, ref]);
-  return _react.default.createElement("table", Object.assign({
+  return /*#__PURE__*/_react.default.createElement("table", Object.assign({
     role: "grid",
@@ -79,3 +81,3 @@ ref: ref,
 
-  return _react.default.createElement("td", {
+  return /*#__PURE__*/_react.default.createElement("td", {
     role: "gridcell",
@@ -90,3 +92,3 @@ title: label,
     isDisabled && 'rw-state-disabled', isEmpty && 'rw-cell-not-allowed', isOffView && 'rw-cell-off-range', isSelected && 'rw-state-selected')
-  }, _react.default.createElement("span", {
+  }, /*#__PURE__*/_react.default.createElement("span", {
     "aria-hidden": true
@@ -96,7 +98,7 @@ }, children));
 
-CalendarView.Body = props => _react.default.createElement("tbody", Object.assign({
+CalendarView.Body = props => /*#__PURE__*/_react.default.createElement("tbody", Object.assign({
   className: "rw-calendar-body"
 }, props));
 
-CalendarView.Row = props => _react.default.createElement("tr", Object.assign({
+CalendarView.Row = props => /*#__PURE__*/_react.default.createElement("tr", Object.assign({
   role: "row",
@@ -103,0 +105,0 @@ className: "rw-calendar-row"

lib/Century.d.ts

@@ -0,1 +1,2 @@
+/// <reference types="react" />
 import { CalendarViewProps } from './CalendarView';
@@ -2,0 +3,0 @@ import { Localizer } from './Localization';

lib/Century.js

@@ -39,9 +39,9 @@ "use strict";
   const chunks = (0, _react.useMemo)(() => (0, _.chunk)(getCenturyDecades(focusedItem), 4), [focusedItem]);
-  return _react.default.createElement(_CalendarView.default, Object.assign({}, props, {
+  return /*#__PURE__*/_react.default.createElement(_CalendarView.default, Object.assign({}, props, {
     focusedItem: focusedItem
-  }), _react.default.createElement(_CalendarView.default.Body, null, chunks.map((row, rowIdx) => _react.default.createElement(_CalendarView.default.Row, {
+  }), /*#__PURE__*/_react.default.createElement(_CalendarView.default.Body, null, chunks.map((row, rowIdx) => /*#__PURE__*/_react.default.createElement(_CalendarView.default.Row, {
     key: rowIdx
   }, row.map((date, colIdx) => {
     let label = localizer.formatDate(_dates.default.startOf(date, 'decade'), 'decade');
-    return _react.default.createElement(_CalendarView.default.Cell, {
+    return /*#__PURE__*/_react.default.createElement(_CalendarView.default.Cell, {
       key: colIdx,
@@ -48,0 +48,0 @@ unit: "decade",

lib/Combobox.d.ts

@@ -36,4 +36,4 @@ import * as React from 'react';
  */
-declare const Combobox: Combobox;
-export default Combobox;
+declare const ComboboxImpl: Combobox;
+export default ComboboxImpl;
 //# sourceMappingURL=Combobox.d.ts.map

lib/Combobox.js

@@ -26,3 +26,3 @@ "use strict";
 
-var _Select = _interopRequireDefault(require("./Select"));
+var _InputAddon = _interopRequireDefault(require("./InputAddon"));
 
@@ -104,3 +104,2 @@ var _Widget = _interopRequireDefault(require("./Widget"));
   listProps: PropTypes.object,
-  isRtl: PropTypes.bool,
   messages: PropTypes.shape({
@@ -130,3 +129,3 @@ openCombobox: CustomPropTypes.message,
  */
-const Combobox = React.forwardRef(function Combobox(_ref, outerRef) {
+const ComboboxImpl = React.forwardRef(function Combobox(_ref, outerRef) {
   let {
@@ -149,3 +148,2 @@ id,
     filter = true,
-    isRtl,
     busy,
@@ -174,3 +172,3 @@ disabled,
   } = _ref,
-      elementProps = _objectWithoutProperties(_ref, ["id", "className", "containerClassName", "placeholder", "autoFocus", "textField", "dataKey", "autoSelectMatches", "focusFirstItem", "value", "defaultValue", "onChange", "open", "defaultOpen", "onToggle", "filter", "isRtl", "busy", "disabled", "readOnly", "selectIcon", "busySpinner", "dropUp", "tabIndex", "popupTransition", "name", "onSelect", "onKeyDown", "onBlur", "onFocus", "inputProps", "listProps", "groupBy", "renderListItem", "renderListGroup", "optionComponent", "listComponent", "data", "messages"]);
+      elementProps = _objectWithoutProperties(_ref, ["id", "className", "containerClassName", "placeholder", "autoFocus", "textField", "dataKey", "autoSelectMatches", "focusFirstItem", "value", "defaultValue", "onChange", "open", "defaultOpen", "onToggle", "filter", "busy", "disabled", "readOnly", "selectIcon", "busySpinner", "dropUp", "tabIndex", "popupTransition", "name", "onSelect", "onKeyDown", "onBlur", "onFocus", "inputProps", "listProps", "groupBy", "renderListItem", "renderListGroup", "optionComponent", "listComponent", "data", "messages"]);
 
@@ -224,2 +222,8 @@ let [currentValue, handleChange] = (0, _uncontrollable.useUncontrolledProp)(value, defaultValue, onChange);
 
+  const handleClick = () => {
+    if (readOnly || disabled) return;
+    focus();
+    toggle();
+  };
+
   const handleSelect = (data, originalEvent) => {
@@ -329,6 +333,5 @@ toggle.close();
   let completeType = filter ? 'list' : 'none';
-  return React.createElement(_Widget.default, Object.assign({}, elementProps, {
+  return /*#__PURE__*/React.createElement(_Widget.default, Object.assign({}, elementProps, {
     ref: ref,
     open: currentOpen,
-    isRtl: isRtl,
     dropUp: dropUp,
@@ -341,5 +344,5 @@ focused: focused,
     className: (0, _classnames.default)(className, 'rw-combobox')
-  }), React.createElement(_WidgetPicker.default, {
+  }), /*#__PURE__*/React.createElement(_WidgetPicker.default, {
     className: containerClassName
-  }, React.createElement(_Input.default, Object.assign({}, inputProps, {
+  }, /*#__PURE__*/React.createElement(_Input.default, Object.assign({}, inputProps, {
     role: "combobox",
@@ -364,14 +367,13 @@ name: name,
     ref: inputRef
-  })), React.createElement(_Select.default, {
-    bordered: true,
+  })), /*#__PURE__*/React.createElement(_InputAddon.default, {
     busy: busy,
     icon: selectIcon,
     spinner: busySpinner,
-    onClick: toggle,
+    onClick: handleClick,
     disabled: !!isDisabled || isReadOnly // FIXME
     ,
     label: messages.openCombobox()
-  })), React.createElement(_FocusListContext.FocusListContext.Provider, {
+  })), /*#__PURE__*/React.createElement(_FocusListContext.FocusListContext.Provider, {
     value: list.context
-  }, shouldRenderPopup && React.createElement(_Popup.default, {
+  }, shouldRenderPopup && /*#__PURE__*/React.createElement(_Popup.default, {
     dropUp: dropUp,
@@ -381,3 +383,3 @@ open: currentOpen,
     onEntering: () => listRef.current.scrollIntoView()
-  }, React.createElement(ListComponent, Object.assign({}, listProps, {
+  }, /*#__PURE__*/React.createElement(ListComponent, Object.assign({}, listProps, {
     id: listId,
@@ -404,5 +406,5 @@ tabIndex: -1,
 });
-Combobox.displayName = 'Combobox';
-Combobox.propTypes = propTypes;
-var _default = Combobox;
+ComboboxImpl.displayName = 'Combobox';
+ComboboxImpl.propTypes = propTypes;
+var _default = ComboboxImpl;
 exports.default = _default;

lib/DatePicker.js

@@ -37,3 +37,3 @@ "use strict";
     open = open === undefined ? this.toggleState : open;
-    return _react.default.createElement(_DateTimePicker.default, Object.assign({}, this.props, {
+    return /*#__PURE__*/_react.default.createElement(_DateTimePicker.default, Object.assign({}, this.props, {
       open: open,
@@ -40,0 +40,0 @@ includeTime: false,

lib/DateTimePartInput.js

@@ -36,3 +36,3 @@ "use strict";
 
-  return _react.default.createElement("input", Object.assign({}, props, {
+  return /*#__PURE__*/_react.default.createElement("input", Object.assign({}, props, {
     ref: ref,
@@ -47,4 +47,5 @@ "data-focusable": true,
     "aria-disabled": props.disabled || props.readOnly,
+    "arai-placeholder": placeholder,
     placeholder: placeholder,
-    className: "rw-input-reset rw-time-part-input",
+    className: "rw-time-part-input",
     value: placeholder && !value ? '' : padStart(value, pad || 0, value == null ? emptyChar : '0')
@@ -51,0 +52,0 @@ }));

lib/DateTimePicker.d.ts

@@ -91,3 +91,2 @@ import React from 'react';
     inputProps?: Partial<DateTimePickerInputProps>;
-    isRtl?: boolean;
     valueDisplayFormat?: InferFormat<TLocalizer>;
@@ -94,0 +93,0 @@ valueEditFormat?: InferFormat<TLocalizer>;

lib/DateTimePicker.js

@@ -16,4 +16,2 @@ "use strict";
 
-var _Button = _interopRequireDefault(require("./Button"));
-
 var _Calendar = _interopRequireDefault(require("./Calendar"));
@@ -29,4 +27,2 @@
 
-var _Select = _interopRequireDefault(require("./Select"));
-
 var _TimeInput = _interopRequireDefault(require("./TimeInput"));
@@ -50,2 +46,4 @@
 
+var _InputAddon = _interopRequireDefault(require("./InputAddon"));
+
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
@@ -188,3 +186,2 @@
   inputProps: _propTypes.default.object,
-  isRtl: _propTypes.default.bool,
   messages: _propTypes.default.shape({
@@ -196,3 +193,3 @@ dateButton: _propTypes.default.string,
 
-const defaultProps = _objectSpread({}, _Calendar.default.defaultProps, {
+const defaultProps = _objectSpread(_objectSpread({}, _Calendar.default.defaultProps), {}, {
   min: new Date(1900, 0, 1),
@@ -255,3 +252,2 @@ max: new Date(2099, 11, 31),
     max,
-    isRtl,
     open,
@@ -268,3 +264,3 @@ dropUp,
   } = _useUncontrolled,
-        elementProps = _objectWithoutProperties(_useUncontrolled, ["id", "value", "onChange", "onSelect", "onToggle", "onKeyDown", "onKeyPress", "onCurrentDateChange", "inputProps", "calendarProps", "timeInputProps", "autoFocus", "tabIndex", "disabled", "readOnly", "className", "valueDisplayFormat", "valueEditFormat", "containerClassName", "name", "selectIcon", "placeholder", "includeTime", "min", "max", "isRtl", "open", "dropUp", "parse", "messages", "formats", "currentDate", "popupTransition", "timePrecision", "aria-labelledby", "aria-describedby"]);
+        elementProps = _objectWithoutProperties(_useUncontrolled, ["id", "value", "onChange", "onSelect", "onToggle", "onKeyDown", "onKeyPress", "onCurrentDateChange", "inputProps", "calendarProps", "timeInputProps", "autoFocus", "tabIndex", "disabled", "readOnly", "className", "valueDisplayFormat", "valueEditFormat", "containerClassName", "name", "selectIcon", "placeholder", "includeTime", "min", "max", "open", "dropUp", "parse", "messages", "formats", "currentDate", "popupTransition", "timePrecision", "aria-labelledby", "aria-describedby"]);
 
@@ -306,2 +302,3 @@ const localizer = (0, _Localization.useLocalizer)(messages, formats);
   const handleChange = (0, _useEventCallback.default)((date, str, constrain) => {
+    if (readOnly || disabled) return;
     if (constrain) date = inRangeValue(date);
@@ -354,3 +351,4 @@
   const handleCalendarClick = (0, _useEventCallback.default)(() => {
-    // this.focus()
+    if (readOnly || disabled) return; // this.focus()
+
     toggle();
@@ -395,3 +393,3 @@ });
   let inputReadOnly = (inputProps === null || inputProps === void 0 ? void 0 : inputProps.readOnly) != null ? inputProps === null || inputProps === void 0 ? void 0 : inputProps.readOnly : readOnly;
-  return _react.default.createElement(_Widget.default, Object.assign({}, elementProps, {
+  return /*#__PURE__*/_react.default.createElement(_Widget.default, Object.assign({}, elementProps, {
     open: !!open,
@@ -406,5 +404,5 @@ dropUp: dropUp,
     className: (0, _classnames.default)(className, 'rw-datetime-picker')
-  }), _react.default.createElement(_WidgetPicker.default, {
+  }), /*#__PURE__*/_react.default.createElement(_WidgetPicker.default, {
     className: containerClassName
-  }, _react.default.createElement(_DateTimePickerInput.default, Object.assign({}, inputProps, {
+  }, /*#__PURE__*/_react.default.createElement(_DateTimePickerInput.default, Object.assign({}, inputProps, {
     id: inputId,
@@ -432,5 +430,3 @@ ref: ref,
     "aria-owns": dateId
-  })), _react.default.createElement(_Select.default, {
-    bordered: true
-  }, _react.default.createElement(_Button.default, {
+  })), /*#__PURE__*/_react.default.createElement(_InputAddon.default, {
     icon: selectIcon,
@@ -440,3 +436,3 @@ label: localizer.messages.dateButton(),
     onClick: handleCalendarClick
-  }))), !!shouldRenderList && _react.default.createElement(_Popup.default, {
+  })), !!shouldRenderList && /*#__PURE__*/_react.default.createElement(_Popup.default, {
     dropUp: dropUp,
@@ -451,3 +447,3 @@ open: open,
     onExited: handleClosing
-  }, _react.default.createElement(_Calendar.default, Object.assign({
+  }, /*#__PURE__*/_react.default.createElement(_Calendar.default, Object.assign({
     min: min,
@@ -457,3 +453,2 @@ max: max,
   }, calendarProps, {
-    isRtl: isRtl,
     tabIndex: -1,
@@ -468,3 +463,3 @@ value: value,
     "aria-labelledby": inputId
-  })), includeTime && _react.default.createElement(_TimeInput.default, Object.assign({}, timeInputProps, {
+  })), includeTime && /*#__PURE__*/_react.default.createElement(_TimeInput.default, Object.assign({}, timeInputProps, {
     value: value,
@@ -471,0 +466,0 @@ precision: timePrecision,

lib/DateTimePickerInput.js

@@ -71,3 +71,3 @@ "use strict";
 
-  return _react.default.createElement(_Input.default, Object.assign({}, props, {
+  return /*#__PURE__*/_react.default.createElement(_Input.default, Object.assign({}, props, {
     type: "text",
@@ -74,0 +74,0 @@ ref: ref,

lib/Decade.d.ts

@@ -0,1 +1,2 @@
+/// <reference types="react" />
 import { CalendarViewProps } from './CalendarView';
@@ -2,0 +3,0 @@ import { Localizer } from './Localization';

lib/Decade.js

@@ -39,9 +39,9 @@ "use strict";
   const chunks = (0, _react.useMemo)(() => (0, _.chunk)(getDecadeYears(focusedItem), 4), [focusedItem]);
-  return _react.default.createElement(_CalendarView.default, Object.assign({}, props, {
+  return /*#__PURE__*/_react.default.createElement(_CalendarView.default, Object.assign({}, props, {
     focusedItem: focusedItem
-  }), _react.default.createElement(_CalendarView.default.Body, null, chunks.map((row, rowIdx) => _react.default.createElement(_CalendarView.default.Row, {
+  }), /*#__PURE__*/_react.default.createElement(_CalendarView.default.Body, null, chunks.map((row, rowIdx) => /*#__PURE__*/_react.default.createElement(_CalendarView.default.Row, {
     key: rowIdx
   }, row.map((date, colIdx) => {
     let label = localizer.formatDate(date, 'year');
-    return _react.default.createElement(_CalendarView.default.Cell, {
+    return /*#__PURE__*/_react.default.createElement(_CalendarView.default.Cell, {
       key: colIdx,
@@ -48,0 +48,0 @@ unit: "year",

lib/DropdownList.d.ts

@@ -22,4 +22,4 @@ import React from 'react';
  */
-declare const DropdownList: DropdownList;
-export default DropdownList;
+declare const DropdownListImpl: DropdownList;
+export default DropdownListImpl;
 //# sourceMappingURL=DropdownList.d.ts.map

lib/DropdownList.js

@@ -30,4 +30,2 @@ "use strict";
 
-var _Select = _interopRequireDefault(require("./Select"));
-
 var _Widget = _interopRequireDefault(require("./Widget"));
@@ -57,2 +55,4 @@
 
+var _PickerCaret = _interopRequireDefault(require("./PickerCaret"));
+
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
@@ -135,3 +135,2 @@
   listProps: _propTypes.default.object,
-  isRtl: _propTypes.default.bool,
   messages: _propTypes.default.shape({
@@ -167,3 +166,3 @@ open: _propTypes.default.string,
  */
-const DropdownList = _react.default.forwardRef(function DropdownList(_ref, outerRef) {
+const DropdownListImpl = _react.default.forwardRef(function DropdownList(_ref, outerRef) {
   let {
@@ -187,3 +186,2 @@ id,
     focusFirstItem,
-    isRtl,
     className,
@@ -220,3 +218,3 @@ containerClassName,
   } = _ref,
-      elementProps = _objectWithoutProperties(_ref, ["id", "autoFocus", "textField", "dataKey", "value", "defaultValue", "onChange", "open", "defaultOpen", "onToggle", "searchTerm", "defaultSearchTerm", "onSearch", "filter", "allowCreate", "delay", "focusFirstItem", "isRtl", "className", "containerClassName", "placeholder", "busy", "disabled", "readOnly", "selectIcon", "busySpinner", "dropUp", "tabIndex", "popupTransition", "name", "autoComplete", "onSelect", "onCreate", "onKeyPress", "onKeyDown", "onClick", "inputProps", "listProps", "renderListItem", "renderListGroup", "optionComponent", "renderValue", "groupBy", "onBlur", "onFocus", "listComponent", "data", "messages"]);
+      elementProps = _objectWithoutProperties(_ref, ["id", "autoFocus", "textField", "dataKey", "value", "defaultValue", "onChange", "open", "defaultOpen", "onToggle", "searchTerm", "defaultSearchTerm", "onSearch", "filter", "allowCreate", "delay", "focusFirstItem", "className", "containerClassName", "placeholder", "busy", "disabled", "readOnly", "selectIcon", "busySpinner", "dropUp", "tabIndex", "popupTransition", "name", "autoComplete", "onSelect", "onCreate", "onKeyPress", "onKeyDown", "onClick", "inputProps", "listProps", "renderListItem", "renderListGroup", "optionComponent", "renderValue", "groupBy", "onBlur", "onFocus", "listComponent", "data", "messages"]);
 
@@ -281,2 +279,3 @@ const [currentValue, handleChange] = (0, _uncontrollable.useUncontrolledProp)(value, defaultValue, onChange);
   const handleSelect = (dataItem, originalEvent) => {
+    if (readOnly || isDisabled) return;
     if (dataItem === undefined) return;
@@ -298,3 +297,3 @@
   const handleClick = e => {
-    if (readOnly) return;
+    if (readOnly || isDisabled) return;
     focus();
@@ -306,3 +305,3 @@ toggle();
   const handleKeyDown = e => {
-    if (readOnly) return;
+    if (readOnly || isDisabled) return;
     let {
@@ -356,3 +355,3 @@ key,
   const handleKeyPress = e => {
-    if (readOnly) return;
+    if (readOnly || isDisabled) return;
     (0, _WidgetHelpers.notify)(onKeyPress, [e]);
@@ -447,3 +446,3 @@ if (e.defaultPrevented || filter) return;
 
-  const widgetProps = _objectSpread({}, elementProps, {
+  const widgetProps = _objectSpread(_objectSpread({}, elementProps), {}, {
     role: 'combobox',
@@ -464,7 +463,6 @@ id: inputId,
 
-  return _react.default.createElement(_FocusListContext.FocusListContext.Provider, {
+  return /*#__PURE__*/_react.default.createElement(_FocusListContext.FocusListContext.Provider, {
     value: list.context
-  }, _react.default.createElement(_Widget.default, Object.assign({}, widgetProps, {
+  }, /*#__PURE__*/_react.default.createElement(_Widget.default, Object.assign({}, widgetProps, {
     open: !!currentOpen,
-    isRtl: !!isRtl,
     dropUp: !!dropUp,
@@ -480,7 +478,7 @@ focused: !!focused,
     ref: ref
-  }), _react.default.createElement(_WidgetPicker.default, {
+  }), /*#__PURE__*/_react.default.createElement(_WidgetPicker.default, {
     onClick: handleClick,
     tabIndex: filter ? -1 : 0,
     className: (0, _classnames.default)(containerClassName, 'rw-widget-input')
-  }, _react.default.createElement(_DropdownListInput.default, Object.assign({}, inputProps, {
+  }, /*#__PURE__*/_react.default.createElement(_DropdownListInput.default, Object.assign({}, inputProps, {
     value: valueItem,
@@ -501,11 +499,8 @@ dataKeyAccessor: accessors.value,
     renderValue: renderValue
-  })), _react.default.createElement(_Select.default, {
+  })), /*#__PURE__*/_react.default.createElement(_PickerCaret.default, {
+    visible: true,
     busy: busy,
     icon: selectIcon,
-    "aria-hidden": "true",
-    spinner: busySpinner,
-    role: "presentational",
-    disabled: isDisabled || isReadOnly,
-    label: messages.openDropdown()
-  })), shouldRenderPopup && _react.default.createElement(_Popup.default, {
+    spinner: busySpinner
+  })), shouldRenderPopup && /*#__PURE__*/_react.default.createElement(_Popup.default, {
     dropUp: dropUp,
@@ -516,3 +511,3 @@ open: currentOpen,
     onEntering: () => listRef.current.scrollIntoView()
-  }, _react.default.createElement(ListComponent, Object.assign({}, listProps, {
+  }, /*#__PURE__*/_react.default.createElement(ListComponent, Object.assign({}, listProps, {
     id: listId,
@@ -537,3 +532,3 @@ data: data,
     }
-  })), showCreateOption && _react.default.createElement(_AddToListOption.default, {
+  })), showCreateOption && /*#__PURE__*/_react.default.createElement(_AddToListOption.default, {
     onSelect: handleCreate
@@ -543,5 +538,5 @@ }, messages.createOption(currentValue, currentSearch || '')))));
 
-DropdownList.displayName = 'DropdownList';
-DropdownList.propTypes = propTypes;
-var _default = DropdownList;
+DropdownListImpl.displayName = 'DropdownList';
+DropdownListImpl.propTypes = propTypes;
+var _default = DropdownListImpl;
 exports.default = _default;

lib/DropdownListInput.js

@@ -53,5 +53,5 @@ "use strict";
   let text = value == null ? '' : textAccessor(value);
-  let strValue = String(dataKey);
+  let strValue = String(dataKey !== null && dataKey !== void 0 ? dataKey : '');
   if (strValue === String({})) strValue = '';
-  const inputValue = !value && placeholder ? _react.default.createElement("span", {
+  const inputValue = !value && placeholder ? /*#__PURE__*/_react.default.createElement("span", {
     className: "rw-placeholder"
@@ -69,5 +69,5 @@ }, placeholder) : renderValue ? renderValue({
   }));
-  return _react.default.createElement("div", {
-    className: "rw-input rw-dropdown-list-input"
-  }, autoComplete !== 'off' && _react.default.createElement("input", {
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "rw-dropdown-list-input"
+  }, autoComplete !== 'off' && /*#__PURE__*/_react.default.createElement("input", {
     name: name,
@@ -81,12 +81,14 @@ tabIndex: -1,
     onAnimationStart: handleAutofillDetect,
-    className: (0, _classnames.default)('rw-dropdown-list-search rw-detect-autofill', !autofilling && 'rw-sr')
-  }), !autofilling && autoComplete !== 'off' && _react.default.createElement(_react.default.Fragment, null, allowSearch && _react.default.createElement("input", {
+    className: (0, _classnames.default)('rw-detect-autofill', !autofilling && 'rw-sr')
+  }), !autofilling && autoComplete !== 'off' && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, allowSearch && /*#__PURE__*/_react.default.createElement("input", {
     ref: searchRef,
     disabled: disabled,
     readOnly: readOnly,
-    className: "rw-dropdown-list-search",
+    className: "rw-dropdownlist-search",
     value: searchTerm || '',
     size: (searchTerm || '').length + 2,
     onChange: onSearch
-  }), !searchTerm && inputValue));
+  }), !searchTerm && /*#__PURE__*/_react.default.createElement("span", {
+    className: "rw-dropdown-list-value"
+  }, inputValue)));
 });
@@ -93,0 +95,0 @@

lib/Icon.d.ts

@@ -0,1 +1,2 @@
+/// <reference types="react" />
 /*!
@@ -2,0 +3,0 @@ Font Awesome Free 5.2.0 by @fontawesome - https://fontawesome.com

lib/Icon.js

@@ -18,3 +18,3 @@ "use strict";
 */
-const caretUp = React.createElement("svg", {
+const caretUp = /*#__PURE__*/React.createElement("svg", {
   height: "1em",
@@ -24,3 +24,3 @@ fill: "currentcolor",
   xmlns: "http://www.w3.org/2000/svg"
-}, React.createElement("path", {
+}, /*#__PURE__*/React.createElement("path", {
   d: "M288.66 352H31.34c-17.82 0-26.74-21.54-14.14-34.14L145.86 189.2a20 20 0 0 1 28.28 0L302.8 317.86c12.6 12.6 3.68 34.14-14.14 34.14z"
@@ -34,3 +34,3 @@ }));
 exports.caretUp = caretUp;
-const caretDown = React.createElement("svg", {
+const caretDown = /*#__PURE__*/React.createElement("svg", {
   height: "1em",
@@ -41,3 +41,3 @@ fill: "currentcolor",
   xmlns: "http://www.w3.org/2000/svg"
-}, React.createElement("path", {
+}, /*#__PURE__*/React.createElement("path", {
   d: "M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
@@ -51,3 +51,3 @@ }));
 exports.caretDown = caretDown;
-const chevronRight = React.createElement("svg", {
+const chevronRight = /*#__PURE__*/React.createElement("svg", {
   height: "1em",
@@ -58,7 +58,7 @@ fill: "currentcolor",
   xmlns: "http://www.w3.org/2000/svg"
-}, React.createElement("path", {
+}, /*#__PURE__*/React.createElement("path", {
   d: "M285.48 272.97L91.13 467.31a24 24 0 0 1-33.94 0l-22.67-22.66a24 24 0 0 1-.04-33.9L188.5 256 34.48 101.25a24 24 0 0 1 .04-33.9L57.2 44.7a24 24 0 0 1 33.94 0l194.35 194.34a24 24 0 0 1 0 33.94z"
 }));
 exports.chevronRight = chevronRight;
-const chevronLeft = React.createElement("svg", {
+const chevronLeft = /*#__PURE__*/React.createElement("svg", {
   height: "1em",
@@ -69,3 +69,3 @@ fill: "currentcolor",
   xmlns: "http://www.w3.org/2000/svg"
-}, React.createElement("path", {
+}, /*#__PURE__*/React.createElement("path", {
   d: "M34.52 239.03L228.87 44.69a24 24 0 0 1 33.94 0l22.67 22.67a24 24 0 0 1 .04 33.9L131.49 256l154.02 154.75a24 24 0 0 1-.04 33.9l-22.67 22.67a24 24 0 0 1-33.94 0L34.52 272.97a24 24 0 0 1 0-33.94z"
@@ -79,3 +79,3 @@ }));
 exports.chevronLeft = chevronLeft;
-const calendar = React.createElement("svg", {
+const calendar = /*#__PURE__*/React.createElement("svg", {
   "aria-hidden": true,
@@ -87,3 +87,3 @@ height: "1em",
   xmlns: "http://www.w3.org/2000/svg"
-}, React.createElement("path", {
+}, /*#__PURE__*/React.createElement("path", {
   d: "M148 288h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm108-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 96v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96-260v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h48V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h128V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h48c26.5 0 48 21.5 48 48zm-48 346V160H48v298c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z"
@@ -97,3 +97,3 @@ }));
 exports.calendar = calendar;
-const clock = React.createElement("svg", {
+const clock = /*#__PURE__*/React.createElement("svg", {
   "aria-hidden": true,
@@ -105,7 +105,7 @@ height: "1em",
   xmlns: "http://www.w3.org/2000/svg"
-}, React.createElement("path", {
+}, /*#__PURE__*/React.createElement("path", {
   d: "M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm61.8-104.4l-84.9-61.7c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v141.7l66.8 48.6a12 12 0 0 1 2.6 16.8L334.6 349c-3.9 5.3-11.4 6.5-16.8 2.6z"
 }));
 exports.clock = clock;
-const times = React.createElement("svg", {
+const times = /*#__PURE__*/React.createElement("svg", {
   height: ".8em",
@@ -116,3 +116,3 @@ fill: "currentcolor",
   xmlns: "http://www.w3.org/2000/svg"
-}, React.createElement("path", {
+}, /*#__PURE__*/React.createElement("path", {
   d: "M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
@@ -126,3 +126,3 @@ }));
 exports.times = times;
-const clear = React.createElement("svg", {
+const clear = /*#__PURE__*/React.createElement("svg", {
   "aria-hidden": true,
@@ -133,3 +133,3 @@ height: "1em",
   viewBox: "0 0 512 512"
-}, React.createElement("path", {
+}, /*#__PURE__*/React.createElement("path", {
   d: "M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm101.8-262.2L295.6 256l62.2 62.2c4.7 4.7 4.7 12.3 0 17l-22.6 22.6c-4.7 4.7-12.3 4.7-17 0L256 295.6l-62.2 62.2c-4.7 4.7-12.3 4.7-17 0l-22.6-22.6c-4.7-4.7-4.7-12.3 0-17l62.2-62.2-62.2-62.2c-4.7-4.7-4.7-12.3 0-17l22.6-22.6c4.7-4.7 12.3-4.7 17 0l62.2 62.2 62.2-62.2c4.7-4.7 12.3-4.7 17 0l22.6 22.6c4.7 4.7 4.7 12.3 0 17z"
@@ -139,3 +139,3 @@ })); // https://codepen.io/aurer/pen/jEGbA
 exports.clear = clear;
-const Spinner = React.createElement("svg", {
+const Spinner = /*#__PURE__*/React.createElement("svg", {
   height: "1.4em",
@@ -146,6 +146,6 @@ viewBox: "0 0 50 50",
   xmlns: "http://www.w3.org/2000/svg"
-}, React.createElement("path", {
+}, /*#__PURE__*/React.createElement("path", {
   fill: "currentcolor",
   d: "M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z"
-}, React.createElement("animateTransform", {
+}, /*#__PURE__*/React.createElement("animateTransform", {
   attributeType: "xml",
@@ -152,0 +152,0 @@ attributeName: "transform",

lib/Input.js

@@ -32,3 +32,3 @@ "use strict";
 
-  return _react.default.createElement(Component, Object.assign({}, props, {
+  return /*#__PURE__*/_react.default.createElement(Component, Object.assign({}, props, {
     ref: ref,
@@ -35,0 +35,0 @@ type: type,

lib/IntlLocalizer.js

@@ -90,3 +90,3 @@ "use strict";
         timeStyle: 'short'
-      } : _objectSpread({}, dateShort, {}, timeShort)).format,
+      } : _objectSpread(_objectSpread({}, dateShort), timeShort)).format,
       header: Intl.DateTimeFormat(culture, {
@@ -144,3 +144,3 @@ month: 'short',
     this.culture = culture;
-    const decimal = Intl.NumberFormat(culture).formatToParts ? Intl.NumberFormat(culture).formatToParts(1.1)[1].value : ((_$toLocaleString$m = 1.1.toLocaleString(culture).match(/[^\d]/)) === null || _$toLocaleString$m === void 0 ? void 0 : _$toLocaleString$m[0]) || '.';
+    const decimal = 'formatToParts' in Intl.NumberFormat(culture) ? Intl.NumberFormat(culture).formatToParts(1.1)[1].value : ((_$toLocaleString$m = 1.1.toLocaleString(culture).match(/[^\d]/)) === null || _$toLocaleString$m === void 0 ? void 0 : _$toLocaleString$m[0]) || '.';
     const formatter = Intl.NumberFormat(culture, {
@@ -147,0 +147,0 @@ maximumFractionDigits: 0

lib/List.d.ts

@@ -52,5 +52,5 @@ import React, { MutableRefObject } from 'react';
 export declare const useScrollFocusedIntoView: (element: HTMLElement | null, observeChanges?: boolean) => () => void;
-export declare function useHandleSelect<TDataItem>(multiple: boolean, dataItems: TDataItem[], onChange: ChangeHandler<TDataItem>): (dataItem: TDataItem, event: React.SyntheticEvent<Element, Event>) => void;
+export declare function useHandleSelect<TDataItem>(multiple: boolean, dataItems: TDataItem[], onChange: ChangeHandler<TDataItem>): (dataItem: TDataItem, event: React.SyntheticEvent) => void;
 declare const List: List;
 export default List;
 //# sourceMappingURL=List.d.ts.map

lib/List.js

@@ -157,3 +157,3 @@ "use strict";
     const itemIsSelected = dataItems.includes(item);
-    return _react.default.createElement(Option, {
+    return /*#__PURE__*/_react.default.createElement(Option, {
       dataItem: item,
@@ -175,5 +175,5 @@ key: `item_${idx}`,
 
-  const children = groupedData ? groupedData.map(([group, items], idx) => _react.default.createElement("div", {
+  const children = groupedData ? groupedData.map(([group, items], idx) => /*#__PURE__*/_react.default.createElement("div", {
     role: "group"
-  }, _react.default.createElement(_ListOptionGroup.default, {
+  }, /*#__PURE__*/_react.default.createElement(_ListOptionGroup.default, {
     key: `group_${idx}`
@@ -183,3 +183,3 @@ }, renderGroup ? renderGroup({
   }) : group), items.map(renderOption))) : data.map(renderOption);
-  return _react.default.createElement("div", Object.assign({
+  return /*#__PURE__*/_react.default.createElement("div", Object.assign({
     id: id,
@@ -192,3 +192,3 @@ tabIndex: 0,
     role: (_elementProps$role = elementProps.role) !== null && _elementProps$role !== void 0 ? _elementProps$role : 'listbox'
-  }), _react.default.Children.count(children) ? children : _react.default.createElement("div", {
+  }), _react.default.Children.count(children) ? children : /*#__PURE__*/_react.default.createElement("div", {
     className: "rw-list-empty"
@@ -195,0 +195,0 @@ }, emptyList()));

lib/Listbox.d.ts

@@ -37,2 +37,3 @@ import React from 'react';
     multiple?: boolean;
+    readOnly?: boolean;
     disabled?: boolean | TDataItem[];
@@ -39,0 +40,0 @@ messages?: UserProvidedMessages;

lib/Listbox.js

@@ -70,2 +70,4 @@ "use strict";
     onKeyDown,
+    disabled,
+    readOnly,
     onBlur,
@@ -75,3 +77,3 @@ onFocus,
   } = _ref,
-      props = _objectWithoutProperties(_ref, ["defaultValue", "value", "onChange", "textField", "dataKey", "data", "onKeyDown", "onBlur", "onFocus", "multiple"]);
+      props = _objectWithoutProperties(_ref, ["defaultValue", "value", "onChange", "textField", "dataKey", "data", "onKeyDown", "disabled", "readOnly", "onBlur", "onFocus", "multiple"]);
 
@@ -87,4 +89,6 @@ const [value, onChange] = (0, _uncontrollable.useUncontrolledProp)(propsValue, defaultValue, propsOnChange);
   });
+  const isDisabled = disabled === true;
 
   const handleChange = (dataItem, meta) => {
+    if (isDisabled || readOnly) return;
     lastItemRef.current = meta.dataItem;
@@ -96,3 +100,3 @@ onChange(dataItem, meta);
   const [focusEvents, focused] = (0, _useFocusManager.default)(ref, {
-    disabled: props.disabled === true,
+    disabled: isDisabled,
     onBlur,
@@ -118,2 +122,3 @@ onFocus
   const handleKeyDown = e => {
+    if (isDisabled || readOnly) return;
     let {
@@ -146,9 +151,11 @@ key,
     focused,
-    disabled: props.disabled === true,
-    className: (0, _classnames.default)(props.className, 'rw-listbox rw-widget rw-widget-container')
+    readOnly,
+    disabled: isDisabled,
+    className: (0, _classnames.default)(props.className, 'rw-listbox rw-widget-input rw-widget')
   });
-  return _react.default.createElement(_FocusListContext.FocusListContext.Provider, {
+  return /*#__PURE__*/_react.default.createElement(_FocusListContext.FocusListContext.Provider, {
     value: list.context
-  }, _react.default.createElement(_List.default, Object.assign({}, props, widgetProps, {
-    tabIndex: 0,
+  }, /*#__PURE__*/_react.default.createElement(_List.default, Object.assign({}, props, widgetProps, {
+    disabled: disabled,
+    tabIndex: isDisabled ? -1 : 0,
     data: data,
@@ -155,0 +162,0 @@ elementRef: ref,

lib/ListOption.d.ts

@@ -12,3 +12,3 @@ import PropTypes from 'prop-types';
 }
-declare function ListOption<TDataItem>({ className, children, dataItem, selected, disabled, onSelect, tabIndex, ...props }: ListOptionProps<TDataItem>): JSX.Element;
+declare function ListOption<TDataItem>({ className, children, dataItem, selected, disabled, onSelect, ...props }: ListOptionProps<TDataItem>): JSX.Element;
 declare namespace ListOption {
@@ -15,0 +15,0 @@ var propTypes: {

lib/ListOption.js

@@ -37,6 +37,5 @@ "use strict";
     disabled,
-    onSelect,
-    tabIndex = -1
+    onSelect
   } = _ref,
-      props = _objectWithoutProperties(_ref, ["className", "children", "dataItem", "selected", "disabled", "onSelect", "tabIndex"]);
+      props = _objectWithoutProperties(_ref, ["className", "children", "dataItem", "selected", "disabled", "onSelect"]);
 
@@ -54,3 +53,3 @@ const [ref, focused, id] = (0, _FocusListContext.useListOption)(dataItem);
   };
-  return _react.default.createElement("div", Object.assign({
+  return /*#__PURE__*/_react.default.createElement("div", Object.assign({
     id: id,
@@ -61,3 +60,4 @@ ref: ref,
     "data-rw-focused": focused ? '' : undefined,
-    tabIndex: disabled ? undefined : tabIndex,
+    "data-rw-focusable": !disabled ? '' : undefined,
+    tabIndex: -1,
     "aria-selected": !!selected,
@@ -64,0 +64,0 @@ className: (0, _classnames.default)('rw-list-option', className, classes),

lib/ListOptionGroup.js

@@ -27,3 +27,3 @@ "use strict";
   let Tag = component;
-  return _react.default.createElement(Tag, {
+  return /*#__PURE__*/_react.default.createElement(Tag, {
     tabIndex: "-1",
@@ -30,0 +30,0 @@ role: "separator",

lib/Localization.js

@@ -56,3 +56,3 @@ "use strict";
   JSON.stringify(messages)]);
-  return _react.default.createElement(LocalizerContext.Provider, {
+  return /*#__PURE__*/_react.default.createElement(LocalizerContext.Provider, {
     value: localizer
@@ -66,5 +66,5 @@ }, children);
     if (!messages && !formats) return localizer;
-    return _objectSpread({}, localizer, {
-      messages: (0, _messages.getMessages)(_objectSpread({}, localizer.messages, {}, messages)),
-      formatOverrides: _objectSpread({}, localizer.formatOverrides, {}, formats)
+    return _objectSpread(_objectSpread({}, localizer), {}, {
+      messages: (0, _messages.getMessages)(_objectSpread(_objectSpread({}, localizer.messages), messages)),
+      formatOverrides: _objectSpread(_objectSpread({}, localizer.formatOverrides), formats)
     });
@@ -71,0 +71,0 @@ }, [messages, formats, localizer]);

lib/messages.js

@@ -27,3 +27,3 @@ "use strict";
   emptyFilter: 'The filter returned no results',
-  createOption: (_value, searchTerm) => [' Create option', searchTerm && ' ', searchTerm && React.createElement("strong", {
+  createOption: (_value, searchTerm) => [' Create option', searchTerm && ' ', searchTerm && /*#__PURE__*/React.createElement("strong", {
     key: "_"
@@ -30,0 +30,0 @@ }, `"${searchTerm}"`)],

lib/Month.d.ts

@@ -0,1 +1,2 @@
+/// <reference types="react" />
 import { CalendarViewProps } from './CalendarView';
@@ -2,0 +3,0 @@ import { Localizer } from './Localization';

lib/Month.js

@@ -56,14 +56,14 @@ "use strict";
 
-  return _react.default.createElement(_CalendarView.default, Object.assign({}, props, {
+  return /*#__PURE__*/_react.default.createElement(_CalendarView.default, Object.assign({}, props, {
     focusedItem: focusedItem,
     className: (0, _classnames.default)(className, 'rw-calendar-month')
-  }), _react.default.createElement("thead", {
+  }), /*#__PURE__*/_react.default.createElement("thead", {
     className: "rw-calendar-head"
-  }, _react.default.createElement("tr", {
+  }, /*#__PURE__*/_react.default.createElement("tr", {
     className: "rw-calendar-row"
-  }, rows[0].map((date, idx) => _react.default.createElement("th", {
+  }, rows[0].map((date, idx) => /*#__PURE__*/_react.default.createElement("th", {
     scope: "col",
     className: "rw-head-cell",
     key: idx
-  }, localizer.formatDate(date, 'weekday'))))), _react.default.createElement(_CalendarView.default.Body, null, rows.map((row, rowIdx) => _react.default.createElement(_CalendarView.default.Row, {
+  }, localizer.formatDate(date, 'weekday'))))), /*#__PURE__*/_react.default.createElement(_CalendarView.default.Body, null, rows.map((row, rowIdx) => /*#__PURE__*/_react.default.createElement(_CalendarView.default.Row, {
     key: rowIdx
@@ -73,3 +73,3 @@ }, row.map((date, colIdx) => {
     let label = localizer.formatDate(date, 'date');
-    return _react.default.createElement(_CalendarView.default.Cell, {
+    return /*#__PURE__*/_react.default.createElement(_CalendarView.default.Cell, {
       key: colIdx,
@@ -76,0 +76,0 @@ label: label,

lib/Multiselect.d.ts

@@ -47,4 +47,4 @@ import React from 'react';
  */
-declare const Multiselect: Multiselect;
-export default Multiselect;
+declare const MultiselectImpl: Multiselect;
+export default MultiselectImpl;
 //# sourceMappingURL=Multiselect.d.ts.map

lib/Multiselect.js

@@ -32,4 +32,2 @@ "use strict";
 
-var _Select = _interopRequireDefault(require("./Select"));
-
 var _Widget = _interopRequireDefault(require("./Widget"));
@@ -47,4 +45,2 @@
 
-var _ = require("./_");
-
 var _canShowCreate = _interopRequireDefault(require("./canShowCreate"));
@@ -60,2 +56,4 @@
 
+var _PickerCaret = _interopRequireDefault(require("./PickerCaret"));
+
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
@@ -150,3 +148,2 @@
   readOnly: CustomPropTypes.disabled,
-  isRtl: _propTypes.default.bool,
   messages: _propTypes.default.shape({
@@ -191,3 +188,3 @@ open: CustomPropTypes.message,
  */
-const Multiselect = _react.default.forwardRef(function Multiselect(_ref, outerRef) {
+const MultiselectImpl = _react.default.forwardRef(function Multiselect(_ref, outerRef) {
   let {
@@ -210,3 +207,2 @@ dataKey,
     allowCreate = false,
-    isRtl,
     className,
@@ -218,3 +214,3 @@ containerClassName,
     readOnly,
-    selectIcon = _Icon.caretDown,
+    selectIcon,
     clearTagIcon = _Icon.times,
@@ -243,3 +239,3 @@ busySpinner,
   } = _ref,
-      elementProps = _objectWithoutProperties(_ref, ["dataKey", "textField", "autoFocus", "id", "value", "defaultValue", "onChange", "open", "defaultOpen", "onToggle", "focusFirstItem", "searchTerm", "defaultSearchTerm", "onSearch", "filter", "allowCreate", "isRtl", "className", "containerClassName", "placeholder", "busy", "disabled", "readOnly", "selectIcon", "clearTagIcon", "busySpinner", "dropUp", "tabIndex", "popupTransition", "showPlaceholderWithValues", "onSelect", "onCreate", "onKeyDown", "onBlur", "onFocus", "inputProps", "listProps", "renderListItem", "renderListGroup", "renderTagValue", "optionComponent", "tagOptionComponent", "groupBy", "listComponent", "data", "messages"]);
+      elementProps = _objectWithoutProperties(_ref, ["dataKey", "textField", "autoFocus", "id", "value", "defaultValue", "onChange", "open", "defaultOpen", "onToggle", "focusFirstItem", "searchTerm", "defaultSearchTerm", "onSearch", "filter", "allowCreate", "className", "containerClassName", "placeholder", "busy", "disabled", "readOnly", "selectIcon", "clearTagIcon", "busySpinner", "dropUp", "tabIndex", "popupTransition", "showPlaceholderWithValues", "onSelect", "onCreate", "onKeyDown", "onBlur", "onFocus", "inputProps", "listProps", "renderListItem", "renderListGroup", "renderTagValue", "optionComponent", "tagOptionComponent", "groupBy", "listComponent", "data", "messages"]);
 
@@ -263,3 +259,2 @@ let [currentValue, handleChange] = (0, _uncontrollable.useUncontrolledProp)(value, defaultValue, onChange);
   const isDisabled = disabled === true;
-  const disabledItems = (0, _.toItemArray)(disabled);
   const isReadOnly = !!readOnly;
@@ -343,2 +338,3 @@ const [focusEvents, focused] = (0, _useFocusManager.default)(ref, {
   }) => {
+    if (isDisabled || readOnly) return;
     focus();
@@ -352,3 +348,3 @@
   const handleDoubleClick = () => {
-    if (!inputRef.current) return;
+    if (isDisabled || !inputRef.current) return;
     focus();
@@ -513,6 +509,5 @@ if (inputRef.current) inputRef.current.select();
   let inputOwns = `${listId} ${notifyId} ` + (shouldRenderTags ? tagsId : '') + (showCreateOption ? createId : '');
-  return _react.default.createElement(_Widget.default, Object.assign({}, elementProps, {
+  return /*#__PURE__*/_react.default.createElement(_Widget.default, Object.assign({}, elementProps, {
     ref: ref,
     open: currentOpen,
-    isRtl: isRtl,
     dropUp: dropUp,
@@ -525,3 +520,3 @@ focused: focused,
     className: (0, _classnames.default)(className, 'rw-multiselect')
-  }), _react.default.createElement("span", {
+  }), /*#__PURE__*/_react.default.createElement("span", {
     id: notifyId,
@@ -533,3 +528,3 @@ role: "status",
     "aria-relevant": "all"
-  }, focused && (dataItems.length ? messages.selectedItems(itemLabels) : messages.noneSelected())), _react.default.createElement(_WidgetPicker.default, {
+  }, focused && (dataItems.length ? messages.selectedItems(itemLabels) : messages.noneSelected())), /*#__PURE__*/_react.default.createElement(_WidgetPicker.default, {
     onClick: handleClick,
@@ -539,5 +534,5 @@ onTouchEnd: handleClick,
     className: (0, _classnames.default)(containerClassName, 'rw-widget-input')
-  }, _react.default.createElement(_FocusListContext.FocusListContext.Provider, {
+  }, /*#__PURE__*/_react.default.createElement(_FocusListContext.FocusListContext.Provider, {
     value: tagList.context
-  }, _react.default.createElement(_MultiselectTagList.default, {
+  }, /*#__PURE__*/_react.default.createElement(_MultiselectTagList.default, {
     id: tagsId,
@@ -548,7 +543,8 @@ textAccessor: accessors.text,
     value: dataItems,
-    disabled: disabledItems,
+    readOnly: isReadOnly,
+    disabled: disabled,
     onDelete: handleDelete,
     tagOptionComponent: tagOptionComponent,
     renderTagValue: renderTagValue
-  }, _react.default.createElement(_MultiselectInput.default, Object.assign({}, inputProps, {
+  }, /*#__PURE__*/_react.default.createElement(_MultiselectInput.default, Object.assign({}, inputProps, {
     "aria-haspopup": true,
@@ -569,12 +565,10 @@ role: "listbox",
     ref: inputRef
-  })))), _react.default.createElement(_Select.default, {
+  })))), /*#__PURE__*/_react.default.createElement(_PickerCaret.default, {
     busy: busy,
-    "aria-hidden": "true",
-    role: "presentational",
     spinner: busySpinner,
-    icon: focused ? selectIcon : null,
-    disabled: isDisabled || isReadOnly
-  })), _react.default.createElement(_FocusListContext.FocusListContext.Provider, {
+    icon: selectIcon,
+    visible: focused
+  })), /*#__PURE__*/_react.default.createElement(_FocusListContext.FocusListContext.Provider, {
     value: list.context
-  }, shouldRenderPopup && _react.default.createElement(_Popup.default, {
+  }, shouldRenderPopup && /*#__PURE__*/_react.default.createElement(_Popup.default, {
     dropUp: dropUp,
@@ -584,3 +578,3 @@ open: currentOpen,
     onEntering: () => listRef.current.scrollIntoView()
-  }, _react.default.createElement(ListComponent, Object.assign({}, listProps, {
+  }, /*#__PURE__*/_react.default.createElement(ListComponent, Object.assign({}, listProps, {
     id: listId,
@@ -604,3 +598,3 @@ data: data,
     }
-  })), showCreateOption && _react.default.createElement(_AddToListOption.default, {
+  })), showCreateOption && /*#__PURE__*/_react.default.createElement(_AddToListOption.default, {
     onSelect: handleCreate
@@ -610,5 +604,5 @@ }, messages.createOption(currentValue, currentSearch)))));
 
-Multiselect.displayName = 'Multiselect';
-Multiselect.propTypes = propTypes;
-var _default = Multiselect;
+MultiselectImpl.displayName = 'MultiselectImpl';
+MultiselectImpl.propTypes = propTypes;
+var _default = MultiselectImpl;
 exports.default = _default;

lib/MultiselectInput.js

@@ -41,7 +41,7 @@ "use strict";
   let size = Math.max(String(props.value || props.placeholder || '').length, 1) + 1;
-  return _react.default.createElement("input", Object.assign({}, props, {
+  return /*#__PURE__*/_react.default.createElement("input", Object.assign({}, props, {
     size: size,
     ref: ref,
-    className: "rw-input-reset",
     autoComplete: "off",
+    className: "rw-multiselect-input",
     "aria-disabled": disabled,
@@ -48,0 +48,0 @@ "aria-readonly": readOnly,

lib/MultiselectTag.js

@@ -12,4 +12,2 @@ "use strict";
 
-var _Button = _interopRequireDefault(require("./Button"));
-
 var _FocusListContext = require("./FocusListContext");
@@ -36,3 +34,3 @@
 
-  return _react.default.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement("div", {
     ref: ref,
@@ -46,10 +44,12 @@ role: "option",
     style: style
-  }, _react.default.createElement("span", {
+  }, /*#__PURE__*/_react.default.createElement("span", {
     className: "rw-multiselect-tag-label"
-  }, children), _react.default.createElement(_Button.default, {
-    variant: null,
+  }, children), /*#__PURE__*/_react.default.createElement("button", {
+    type: "button" // these should not be tabbable
+    ,
+    tabIndex: -1,
     onClick: handleRemove,
+    disabled: disabled || readOnly,
     className: "rw-multiselect-tag-btn",
-    disabled: disabled || readOnly,
-    label: label || 'Remove item'
+    "aria-label": label || 'Remove item'
   }, clearTagIcon));
@@ -56,0 +56,0 @@ }

lib/MultiselectTagList.d.ts

@@ -19,7 +19,8 @@ import React, { ReactNode } from 'react';
     tagOptionComponent?: TagComponentProp;
-    disabled?: readonly TDataItem[];
+    disabled?: readonly TDataItem[] | boolean;
+    readOnly?: boolean;
     children?: ReactNode;
 }
-declare function MultiselectTagList<TDataItem>({ id, value, textAccessor, label, disabled, onDelete, children, clearTagIcon, renderTagValue, tagOptionComponent: TagOption, }: MultiselectTagListProps<TDataItem>): JSX.Element;
+declare function MultiselectTagList<TDataItem>({ id, value, textAccessor, label, disabled, readOnly, onDelete, children, clearTagIcon, renderTagValue, tagOptionComponent: TagOption, }: MultiselectTagListProps<TDataItem>): JSX.Element;
 export default MultiselectTagList;
 //# sourceMappingURL=MultiselectTagList.d.ts.map

lib/MultiselectTagList.js

@@ -20,2 +20,3 @@ "use strict";
   disabled,
+  readOnly,
   onDelete,
@@ -27,3 +28,3 @@ children,
 }) {
-  return _react.default.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement("div", {
     id: id,
@@ -34,3 +35,4 @@ role: "listbox",
   }, value.map((item, i) => {
-    return _react.default.createElement(TagOption, {
+    const itemDisabled = Array.isArray(disabled) ? disabled.includes(item) : !!disabled;
+    return /*#__PURE__*/_react.default.createElement(TagOption, {
       key: i,
@@ -40,3 +42,4 @@ dataItem: item,
       clearTagIcon: clearTagIcon,
-      disabled: disabled === null || disabled === void 0 ? void 0 : disabled.includes(item)
+      disabled: itemDisabled,
+      readOnly: readOnly
     }, renderTagValue ? renderTagValue({
@@ -43,0 +46,0 @@ item

lib/NumberInput.d.ts

 import PropTypes from 'prop-types';
-import React, { SyntheticEvent } from 'react';
+import React, { FocusEvent, SyntheticEvent } from 'react';
 import { Localizer } from './Localization';
@@ -53,3 +53,3 @@ export interface NumberPickerInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value'> {
     setStringValue(stringValue: string): void;
-    handleBlur: (event: React.FocusEvent<HTMLInputElement>) => void;
+    handleBlur: (event: FocusEvent<HTMLInputElement>) => void;
     handleChange: (event: React.FormEvent<HTMLInputElement>) => void;
@@ -56,0 +56,0 @@ isIntermediateValue(num: number | undefined | null, str: string): boolean;

lib/NumberInput.js

@@ -176,3 +176,3 @@ "use strict";
     let value = this.state.stringValue;
-    return _react.default.createElement(_Input.default, Object.assign({}, props, {
+    return /*#__PURE__*/_react.default.createElement(_Input.default, Object.assign({}, props, {
       ref: innerRef,
@@ -179,0 +179,0 @@ className: "rw-widget-input",

lib/NumberPicker.d.ts

@@ -69,3 +69,2 @@ import React from 'react';
     inputProps?: React.HtmlHTMLAttributes<HTMLInputElement>;
-    isRtl?: boolean;
     messages?: {
@@ -72,0 +71,0 @@ increment?: string;

lib/NumberPicker.js

@@ -24,4 +24,2 @@ "use strict";
 
-var _Select = _interopRequireDefault(require("./Select"));
-
 var _Widget = _interopRequireDefault(require("./Widget"));
@@ -142,3 +140,2 @@
   inputProps: _propTypes.default.object,
-  isRtl: _propTypes.default.bool,
   messages: _propTypes.default.shape({
@@ -276,3 +273,3 @@ increment: _propTypes.default.string,
   const clampedValue = clamp(value, min, max);
-  return _react.default.createElement(_Widget.default, Object.assign({}, elementProps, {
+  return /*#__PURE__*/_react.default.createElement(_Widget.default, Object.assign({}, elementProps, {
     focused: focused,
@@ -285,5 +282,5 @@ disabled: disabled,
     className: (0, _classnames.default)(className, 'rw-number-picker')
-  }), _react.default.createElement(_WidgetPicker.default, {
+  }), /*#__PURE__*/_react.default.createElement(_WidgetPicker.default, {
     className: containerClassName
-  }, _react.default.createElement(_NumberInput.default, Object.assign({}, inputProps, {
+  }, /*#__PURE__*/_react.default.createElement(_NumberInput.default, Object.assign({}, inputProps, {
     role: "spinbutton",
@@ -306,6 +303,7 @@ tabIndex: tabIndex,
     innerRef: inputRef
-  })), _react.default.createElement(_Select.default, {
-    bordered: true
-  }, _react.default.createElement(_Button.default, {
+  })), /*#__PURE__*/_react.default.createElement("span", {
+    className: "rw-input-addon rw-number-picker-spinners"
+  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
     icon: incrementIcon,
+    className: "rw-picker-btn",
     disabled: clampedValue === max || disabled || readOnly,
@@ -320,4 +318,5 @@ label: localizer.messages.increment({
     onMouseLeave: () => handleMouseUp()
-  }), _react.default.createElement(_Button.default, {
+  }), /*#__PURE__*/_react.default.createElement(_Button.default, {
     icon: decrementIcon,
+    className: "rw-picker-btn",
     disabled: clampedValue === min || disabled || readOnly,
@@ -324,0 +323,0 @@ label: localizer.messages.decrement({

lib/Popup.js

@@ -57,3 +57,3 @@ "use strict";
   const Transition = transition;
-  return _react.default.createElement(Transition, Object.assign({}, props, {
+  return /*#__PURE__*/_react.default.createElement(Transition, Object.assign({}, props, {
     in: open,
@@ -65,3 +65,3 @@ dropUp: dropUp,
     className: (0, _classnames.default)('rw-popup-container', className)
-  }), _react.default.createElement("div", {
+  }), /*#__PURE__*/_react.default.createElement("div", {
     id: id,
@@ -71,3 +71,3 @@ className: "rw-popup",
     role: role
-  }, _react.default.createElement(StaticContainer, {
+  }, /*#__PURE__*/_react.default.createElement(StaticContainer, {
     shouldUpdate: open
@@ -74,0 +74,0 @@ }, children)));

lib/shared.d.ts

@@ -10,3 +10,2 @@ import React, { AnimationEventHandler, ComponentType, DragEventHandler, FocusEventHandler, KeyboardEventHandler, MouseEventHandler, PointerEventHandler, ReactNode, Ref, SyntheticEvent, TouchEventHandler, TransitionEventHandler, UIEventHandler, WheelEventHandler } from 'react';
 export interface WidgetProps {
-    isRtl?: boolean;
     className?: string;
@@ -142,5 +141,3 @@ tabIndex?: number;
     filter?: Filter<TDataItem>;
-    minLength?: number;
     allowCreate?: AllowCreate;
-    caseSensitive?: boolean;
     delay?: number;
@@ -147,0 +144,0 @@ }

lib/SlideDownTransition.js

@@ -89,3 +89,3 @@ "use strict";
     } = this.props;
-    return _react.default.createElement(_Transition.default, {
+    return /*#__PURE__*/_react.default.createElement(_Transition.default, {
       appear: true,
@@ -102,3 +102,3 @@ in: this.props.in,
 
-    }, (status, innerProps) => _react.default.createElement("div", Object.assign({}, innerProps, {
+    }, (status, innerProps) => /*#__PURE__*/_react.default.createElement("div", Object.assign({}, innerProps, {
       className: (0, _classnames.default)(className, dropUp && 'rw-dropup', transitionClasses[status])
@@ -105,0 +105,0 @@ }), _react.default.cloneElement(children, {

lib/SlideTransitionGroup.js

@@ -118,3 +118,3 @@ "use strict";
     } = this.state;
-    return _react.default.createElement("div", Object.assign({}, props, {
+    return /*#__PURE__*/_react.default.createElement("div", Object.assign({}, props, {
       ref: this.container,
@@ -121,0 +121,0 @@ className: (0, _classnames.default)(`${prefix}-group`, `${prefix}-${direction}`)

lib/TimeInput.js

@@ -90,5 +90,5 @@ "use strict";
 
-const TESTS = {
+const TEST_VALID = {
   hours: /^([1]?[0-9]|2[0-3])$/,
-  hours12: /^^(1[0-2]|0?[1-9])$$/,
+  hours12: /^(1[0-2]|0?[1-9])$/,
   minutes: /^([0-5]?\d)$/,
@@ -98,8 +98,19 @@ seconds: /^([0-5]?\d)$/,
 };
+const TEST_COMPLETE = {
+  hours: /^([3-9]|\d{2})$/,
+  hours12: /^(\d{2}|[2-9])$/,
+  minutes: /^(d{2}|[6-9])$/,
+  seconds: /^(d{2}|[6-9])$/,
+  milliseconds: /^(\d{3})$/
+};
 
-const isValid = (value, part, use12HourClock) => {
+function testPart(value, part, use12HourClock, tests) {
   const key = part === 'hours' && use12HourClock ? 'hours12' : part;
-  return TESTS[key].test(value);
-};
+  return tests[key].test(value);
+}
 
+const isValid = (value, part, use12HourClock) => testPart(value, part, use12HourClock, TEST_VALID);
+
+const isComplete = (value, part, use12HourClock) => testPart(value, part, use12HourClock, TEST_COMPLETE);
+
 const propTypes = {
@@ -174,3 +185,3 @@ value: _propTypes.default.instanceOf(Date),
   }));
-  const setTimeParts = (0, _react.useCallback)(timeParts => setState(s => _objectSpread({}, s, {
+  const setTimeParts = (0, _react.useCallback)(timeParts => setState(s => _objectSpread(_objectSpread({}, s), {}, {
     timeParts
@@ -270,5 +281,4 @@ })), [setState]);
     const rawValue = target.value;
-    const strValue = `${currentValue || ''}${rawValue}`;
+    let strValue = `${currentValue || ''}${rawValue}`;
     let numValue = +strValue;
-    select(target);
 
@@ -279,2 +289,4 @@ if (isNaN(numValue) || strValue && !isValid(strValue, part, use12HourClock !== null && use12HourClock !== void 0 ? use12HourClock : false)) {
       if (isValid(rawValue, part, use12HourClock !== null && use12HourClock !== void 0 ? use12HourClock : false) && !isNaN(+rawValue)) {
+        // change the effective current value
+        strValue = rawValue;
         numValue = +rawValue;
@@ -286,5 +298,12 @@ } else {
 
+    const nextValue = target.value ? numValue : null;
     notifyChange({
-      [part]: target.value ? numValue : null
+      [part]: nextValue
     });
+
+    if (nextValue != null && isComplete(strValue, part, use12HourClock !== null && use12HourClock !== void 0 ? use12HourClock : false)) {
+      focusNext(event.currentTarget, +1);
+    } else {
+      select(target);
+    }
   };
@@ -302,3 +321,3 @@
     } = event;
-    const input = event.target;
+    const input = event.currentTarget;
     const {
@@ -308,3 +327,6 @@ selectionStart: start,
     } = input;
+    const isRTL = getComputedStyle(input).getPropertyValue('direction') === 'rtl';
     const isMeridiem = part === 'meridiem';
+    const isNext = key === (isRTL ? 'ArrowLeft' : 'ArrowRight');
+    const isPrev = key === (isRTL ? 'ArrowRight' : 'ArrowLeft');
 
@@ -321,3 +343,3 @@ if (key === 'ArrowUp') {
 
-    if (key === 'ArrowLeft' && (isMeridiem || start - 1 < 0)) {
+    if (isPrev && (isMeridiem || start - 1 < 0)) {
       event.preventDefault();
@@ -327,3 +349,3 @@ focusNext(input, -1);
 
-    if (key === 'ArrowRight' && (isMeridiem || input.value.length <= end + 1)) {
+    if (isNext && (isMeridiem || input.value.length <= end + 1)) {
       event.preventDefault();
@@ -364,3 +386,3 @@ focusNext(input, +1);
   function notifyChange(updates) {
-    const nextTimeParts = _objectSpread({}, timeParts, {}, updates);
+    const nextTimeParts = _objectSpread(_objectSpread({}, timeParts), updates);
 
@@ -411,3 +433,3 @@ if (value && isEmptyValue(nextTimeParts, precision)) {
   const showClear = !isEmptyValue(timeParts, precision);
-  return _react.default.createElement(_Widget.default, Object.assign({}, props, {
+  return /*#__PURE__*/_react.default.createElement(_Widget.default, Object.assign({}, props, {
     role: "group",
@@ -419,4 +441,4 @@ ref: ref
     readOnly: readOnly,
-    className: (0, _classnames.default)(className, 'rw-input', 'rw-time-input', 'rw-widget-container')
-  }), _react.default.createElement(_DateTimePartInput.default, {
+    className: (0, _classnames.default)(className, 'rw-time-input rw-widget-input')
+  }), /*#__PURE__*/_react.default.createElement(_DateTimePartInput.default, {
     size: 2,
@@ -435,3 +457,3 @@ pad: pad ? 2 : undefined,
     onKeyDown: e => handleKeyDown('hours', e)
-  }), hoursAddon && _react.default.createElement("span", null, hoursAddon), _react.default.createElement(_DateTimePartInput.default, {
+  }), hoursAddon && /*#__PURE__*/_react.default.createElement("span", null, hoursAddon), /*#__PURE__*/_react.default.createElement(_DateTimePartInput.default, {
     size: 2,
@@ -449,3 +471,3 @@ pad: pad ? 2 : undefined,
     onKeyDown: e => handleKeyDown('minutes', e)
-  }), minsAddon && _react.default.createElement("span", null, minsAddon), (precision === 'seconds' || precision === 'milliseconds') && _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_DateTimePartInput.default, {
+  }), minsAddon && /*#__PURE__*/_react.default.createElement("span", null, minsAddon), (precision === 'seconds' || precision === 'milliseconds') && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_DateTimePartInput.default, {
     size: 2,
@@ -463,3 +485,3 @@ pad: pad ? 2 : undefined,
     onKeyDown: e => handleKeyDown('seconds', e)
-  }), secsAddon && _react.default.createElement("span", null, secsAddon)), precision === 'milliseconds' && _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_DateTimePartInput.default, {
+  }), secsAddon && /*#__PURE__*/_react.default.createElement("span", null, secsAddon)), precision === 'milliseconds' && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_DateTimePartInput.default, {
     size: 3,
@@ -477,3 +499,3 @@ pad: pad ? 3 : undefined,
     onKeyDown: e => handleKeyDown('milliseconds', e)
-  }), millisecondsAddon && _react.default.createElement("span", null, millisecondsAddon)), use12HourClock && _react.default.createElement("div", {
+  }), millisecondsAddon && /*#__PURE__*/_react.default.createElement("span", null, millisecondsAddon)), use12HourClock && /*#__PURE__*/_react.default.createElement("div", {
     role: "listbox",
@@ -483,5 +505,4 @@ "aria-label": "AM/PM",
     "aria-readonly": readOnly,
-    onKeyDown: e => handleKeyDown('meridiem', e),
-    className: "rw-input-reset rw-time-part-meridiem"
-  }, _react.default.createElement("div", {
+    className: "rw-time-part-meridiem"
+  }, /*#__PURE__*/_react.default.createElement("div", {
     "data-focusable": true,
@@ -498,5 +519,5 @@ role: "option",
     onFocus: handleSelect,
-    onSelect: handleSelect
-  }, _react.default.createElement("abbr", null, meridiem))), !noClearButton && _react.default.createElement(_Button.default, {
-    variant: null,
+    onSelect: handleSelect,
+    onKeyDown: e => handleKeyDown('meridiem', e)
+  }, /*#__PURE__*/_react.default.createElement("abbr", null, meridiem))), !noClearButton && /*#__PURE__*/_react.default.createElement(_Button.default, {
     label: 'clear input',
@@ -503,0 +524,0 @@ onClick: handleClear,

lib/useFocusManager.d.ts

@@ -8,7 +8,4 @@ /// <reference types="react" />
 }
-export default function useFocusManager(ref: React.RefObject<Element>, props?: Props, opts?: Omit<FocusManagerOptions, 'onChange' | 'isDisabled'>): readonly [{
-    onBlur: (event: any) => void;
-    onFocus: (event: any) => void;
-}, boolean, import("react").Dispatch<import("react").SetStateAction<boolean>>];
+export default function useFocusManager(ref: React.RefObject<Element>, props?: Props, opts?: Omit<FocusManagerOptions, 'onChange' | 'isDisabled'>): readonly [import("@restart/hooks/esm/useFocusManager").FocusController, boolean, import("react").Dispatch<import("react").SetStateAction<boolean>>];
 export {};
 //# sourceMappingURL=useFocusManager.d.ts.map

lib/useFocusManager.js

@@ -12,2 +12,4 @@ "use strict";
 
+var _useEventCallback = _interopRequireDefault(require("@restart/hooks/useEventCallback"));
+
 var _useMounted = _interopRequireDefault(require("@restart/hooks/useMounted"));
@@ -32,7 +34,8 @@
   const [focused, setFocus] = (0, _react.useState)(false);
-  const events = (0, _useFocusManager.default)(_objectSpread({}, opts, {
+  const isDisabled = (0, _useEventCallback.default)(() => props.disabled === true || isInDisabledFieldset(ref.current));
+  const events = (0, _useFocusManager.default)(_objectSpread(_objectSpread({}, opts), {}, {
+    isDisabled,
     onChange: focused => {
       if (isMounted()) setFocus(focused);
     },
-    isDisabled: () => props.disabled === true || isInDisabledFieldset(ref.current),
 
@@ -39,0 +42,0 @@ didHandle(focused, event) {

lib/Widget.d.ts

@@ -7,3 +7,2 @@ import React from 'react';
     autofilling?: boolean;
-    isRtl?: boolean;
     disabled?: boolean;
@@ -10,0 +9,0 @@ readOnly?: boolean;

lib/Widget.js

@@ -47,3 +47,3 @@ "use strict";
     'data-intent': isKeyboardNavigating ? 'keyboard' : 'mouse',
-    className: (0, _classnames.default)(props.className, 'rw-widget', props.isRtl && 'rw-rtl', props.disabled && 'rw-state-disabled', props.readOnly && 'rw-state-readonly', props.focused && 'rw-state-focus', props.autofilling && 'rw-webkit-autofill', props.open && `rw-open${props.dropUp ? '-up' : ''}`)
+    className: (0, _classnames.default)(props.className, 'rw-widget', props.disabled && 'rw-state-disabled', props.readOnly && 'rw-state-readonly', props.focused && 'rw-state-focus', props.autofilling && 'rw-webkit-autofill', props.open && `rw-open${props.dropUp ? '-up' : ''}`)
   };
@@ -61,6 +61,5 @@ }
     readOnly,
-    autofilling,
-    isRtl
+    autofilling
   } = _ref,
-      props = _objectWithoutProperties(_ref, ["className", "tabIndex", "focused", "open", "dropUp", "disabled", "readOnly", "autofilling", "isRtl"]);
+      props = _objectWithoutProperties(_ref, ["className", "tabIndex", "focused", "open", "dropUp", "disabled", "readOnly", "autofilling"]);
 
@@ -75,6 +74,5 @@ const widgetProps = useWidgetProps({
     readOnly,
-    autofilling,
-    isRtl
+    autofilling
   });
-  return _react.default.createElement("div", Object.assign({
+  return /*#__PURE__*/_react.default.createElement("div", Object.assign({
     ref: ref
@@ -81,0 +79,0 @@ }, props, widgetProps));

lib/WidgetPicker.js

@@ -24,3 +24,3 @@ "use strict";
 
-  return _react.default.createElement("div", Object.assign({}, props, {
+  return /*#__PURE__*/_react.default.createElement("div", Object.assign({}, props, {
     className: (0, _classnames.default)(className, 'rw-widget-picker', 'rw-widget-container')
@@ -27,0 +27,0 @@ }));

lib/Year.d.ts

@@ -0,1 +1,2 @@
+/// <reference types="react" />
 import { CalendarViewProps } from './CalendarView';
@@ -2,0 +3,0 @@ import { Localizer } from './Localization';

lib/Year.js

@@ -42,9 +42,9 @@ "use strict";
   let months = monthsInYear(_dates.default.year(focusedItem));
-  return _react.default.createElement(_CalendarView.default, Object.assign({}, props, {
+  return /*#__PURE__*/_react.default.createElement(_CalendarView.default, Object.assign({}, props, {
     focusedItem: focusedItem
-  }), _react.default.createElement(_CalendarView.default.Body, null, (0, _.chunk)(months, 4).map((row, rowIdx) => _react.default.createElement(_CalendarView.default.Row, {
+  }), /*#__PURE__*/_react.default.createElement(_CalendarView.default.Body, null, (0, _.chunk)(months, 4).map((row, rowIdx) => /*#__PURE__*/_react.default.createElement(_CalendarView.default.Row, {
     key: rowIdx
   }, row.map((date, colIdx) => {
     let label = localizer.formatDate(date, 'header');
-    return _react.default.createElement(_CalendarView.default.Cell, {
+    return /*#__PURE__*/_react.default.createElement(_CalendarView.default.Cell, {
       key: colIdx,
@@ -51,0 +51,0 @@ label: label,

package.json

 {
   "name": "react-widgets",
-  "version": "5.0.0-beta.13",
+  "version": "5.0.0-beta.14",
   "description": "An à la carte set of polished, extensible, and accessible inputs built for React",
@@ -58,3 +58,3 @@ "main": "lib/index.js",
   "dependencies": {
-    "@restart/hooks": "^0.3.22",
+    "@restart/hooks": "^0.3.25",
     "classnames": "^2.2.6",
@@ -65,3 +65,3 @@ "date-arithmetic": "^4.0.1",
     "prop-types-extra": "^1.1.1",
-    "react-transition-group": "^4.3.0",
+    "react-transition-group": "^4.4.1",
     "uncontrollable": "^7.1.1",
@@ -78,7 +78,5 @@ "warning": "^4.0.3"
     "@types/react-dom": "^16.9.6",
-    "@typescript-eslint/eslint-plugin": "^2.28.0",
-    "@typescript-eslint/parser": "^2.28.0",
-    "babel-core": "^7.0.0-0",
-    "babel-eslint": "10.1.0",
-    "babel-jest": "^25.3.0",
+    "@typescript-eslint/eslint-plugin": "^2.34.0",
+    "@typescript-eslint/parser": "^2.34.0",
+    "babel-jest": "^26.0.1",
     "babel-preset-jason": "^6.2.0",
@@ -90,3 +88,3 @@ "chai": "^4.2.0",
     "enzyme-adapter-react-16": "^1.15.1",
-    "eslint": "^6.5.1",
+    "eslint": "^7.0.0",
     "eslint-config-4catalyzer-typescript": "^1.1.8",
@@ -96,7 +94,8 @@ "eslint-config-jason": "^7.0.1",
     "eslint-plugin-import": "^2.20.2",
-    "eslint-plugin-mocha": "^6.3.0",
+    "eslint-plugin-mocha": "^7.0.0",
     "eslint-plugin-react": "^7.19.0",
+    "eslint-plugin-react-hooks": "^4.0.2",
     "glob": "^7.1.6",
     "globalize": "^1.5.0",
-    "jest": "^25.3.0",
+    "jest": "^26.0.1",
     "lerna": "^3.18.4",
@@ -112,3 +111,3 @@ "lodash": "^4.17.15",
     "webpack": "^4.42.1",
-    "webpack-atoms": "^12.1.0",
+    "webpack-atoms": "^13.1.0",
     "webpack-cli": "^3.3.11"
@@ -121,3 +120,3 @@ },
   "_id": "react-widgets@5.0.0-beta.8",
-  "gitHead": "25c9b00a5fd19bcdb1144aa921a320b3b040b875"
+  "gitHead": "c9d170e00a298cbbda8b2311374dea54cc16f4a5"
 }

No alert changes

Improved metrics

Total package byte prevSize

1149369

increased by0.92%

Dev dependency count

39

decreased by-2.5%

Number of package files

197

increased by2.07%

Worsened metrics

Lines of code

8994

decreased by-0.77%

Dependency changes

• Updated@restart/hooks@^0.3.25

• Updatedreact-transition-group@^4.4.1