baseui 0.0.0-next-e7d1f7c → 0.0.0-next-d6f91d4

package/combobox/index.d.ts

@@ -17,11 +17,14 @@ export interface ComboboxOverrides {
   ListItem?: Override<any>;
 }
 
-export type PropsT<OptionT = unknown> = {
+export type PropsT<OptionT = any> = {
   autocomplete?: boolean;
   disabled?: boolean;
-  mapOptionToNode?: ({isSelected: boolean, option: OptionT}) => React.ReactNode;
-  mapOptionToString: (OptionT) => string;
+  mapOptionToNode?: (option: {
+    isSelected: boolean;
+    option: OptionT;
+  }) => React.ReactNode;
+  mapOptionToString: (option: OptionT) => string;
   id?: string;
   name?: string;
   inputRef?: React.Ref<HTMLInputElement>;

package/datepicker/datepicker.js

@@ -239,7 +239,7 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
         isOpen: true,
         isPseudoFocused: true,
         calendarFocused: false
-      });
+      }, _this.props.onOpen);
     });
 
     _defineProperty(_assertThisInitialized(_this), "close", function () {
@@ -273,7 +273,7 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
           range = _this$props2.range,
           separateRangeInputs = _this$props2.separateRangeInputs;
 
-      if (mask === null) {
+      if (mask === null || mask === undefined && formatString !== DEFAULT_DATE_FORMAT) {
         return null;
       }
 
@@ -281,16 +281,6 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
         return _this.normalizeDashes(mask);
       }
 
-      var normalizedFormatString = _this.normalizeDashes(formatString);
-
-      if (formatString && !separateRangeInputs) {
-        if (range) {
-          return "".concat(normalizedFormatString, " \u2013 ").concat(normalizedFormatString).replace(/[a-z]/gi, '9');
-        } else {
-          return normalizedFormatString.replace(/[a-z]/gi, '9');
-        }
-      }
-
       if (range && !separateRangeInputs) {
         return '9999/99/99 – 9999/99/99';
       }
@@ -303,6 +293,8 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
 
       var mask = _this.getMask();
 
+      var formatString = _this.normalizeDashes(_this.props.formatString);
+
       if (typeof mask === 'string' && inputValue === mask.replace(/9/g, ' ') || inputValue.length === 0) {
         if (_this.props.onChange) {
           if (_this.props.range) {
@@ -321,8 +313,6 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
         inputValue: inputValue
       });
 
-      var formatString = _this.normalizeDashes(_this.props.formatString);
-
       var parseDateString = function parseDateString(dateString) {
         if (formatString === DEFAULT_DATE_FORMAT) {
           return _this.dateHelpers.parse(dateString, 'slashDate', _this.props.locale);

package/datepicker/datepicker.js.flow

@@ -191,11 +191,14 @@ export default class Datepicker<T = Date> extends React.Component<
   };
 
   open = () => {
-    this.setState({
-      isOpen: true,
-      isPseudoFocused: true,
-      calendarFocused: false,
-    });
+    this.setState(
+      {
+        isOpen: true,
+        isPseudoFocused: true,
+        calendarFocused: false,
+      },
+      this.props.onOpen,
+    );
   };
 
   close = () => {
@@ -226,7 +229,10 @@ export default class Datepicker<T = Date> extends React.Component<
   getMask = () => {
     const {formatString, mask, range, separateRangeInputs} = this.props;
 
-    if (mask === null) {
+    if (
+      mask === null ||
+      (mask === undefined && formatString !== DEFAULT_DATE_FORMAT)
+    ) {
       return null;
     }
 
@@ -234,18 +240,6 @@ export default class Datepicker<T = Date> extends React.Component<
       return this.normalizeDashes(mask);
     }
 
-    const normalizedFormatString = this.normalizeDashes(formatString);
-    if (formatString && !separateRangeInputs) {
-      if (range) {
-        return `${normalizedFormatString} – ${normalizedFormatString}`.replace(
-          /[a-z]/gi,
-          '9',
-        );
-      } else {
-        return normalizedFormatString.replace(/[a-z]/gi, '9');
-      }
-    }
-
     if (range && !separateRangeInputs) {
       return '9999/99/99 – 9999/99/99';
     }
@@ -267,6 +261,7 @@ export default class Datepicker<T = Date> extends React.Component<
         : event.currentTarget.value;
 
     const mask = this.getMask();
+    const formatString = this.normalizeDashes(this.props.formatString);
 
     if (
       (typeof mask === 'string' && inputValue === mask.replace(/9/g, ' ')) ||
@@ -283,7 +278,6 @@ export default class Datepicker<T = Date> extends React.Component<
 
     this.setState({inputValue});
 
-    const formatString = this.normalizeDashes(this.props.formatString);
     const parseDateString = dateString => {
       if (formatString === DEFAULT_DATE_FORMAT) {
         return this.dateHelpers.parse(

package/datepicker/index.d.ts

@@ -169,6 +169,7 @@ export type DatepickerProps = CalendarProps & {
   mask?: string | null;
   mountNode?: HTMLElement;
   onClose?: () => any;
+  onOpen?: () => any;
   separateRangeInputs?: boolean;
   startDateLabel?: string;
   endDateLabel?: string;

package/datepicker/types.js.flow

@@ -222,6 +222,8 @@ export type DatepickerPropsT<T = Date> = CalendarPropsT<T> & {
   mountNode?: HTMLElement,
   /** Called when calendar is closed */
   onClose?: () => mixed,
+  /** Called when calendar is opened */
+  onOpen?: () => mixed,
   mask?: string | null,
   /** Determines if startDate and endDate should be separated into two input fields. Ignored if `range` is not true. */
   separateRangeInputs?: boolean,

package/es/datepicker/datepicker.js

@@ -151,7 +151,7 @@ export default class Datepicker extends React.Component {
         isOpen: true,
         isPseudoFocused: true,
         calendarFocused: false
-      });
+      }, this.props.onOpen);
     });
 
     _defineProperty(this, "close", () => {
@@ -185,7 +185,7 @@ export default class Datepicker extends React.Component {
         separateRangeInputs
       } = this.props;
 
-      if (mask === null) {
+      if (mask === null || mask === undefined && formatString !== DEFAULT_DATE_FORMAT) {
         return null;
       }
 
@@ -193,16 +193,6 @@ export default class Datepicker extends React.Component {
         return this.normalizeDashes(mask);
       }
 
-      const normalizedFormatString = this.normalizeDashes(formatString);
-
-      if (formatString && !separateRangeInputs) {
-        if (range) {
-          return `${normalizedFormatString} – ${normalizedFormatString}`.replace(/[a-z]/gi, '9');
-        } else {
-          return normalizedFormatString.replace(/[a-z]/gi, '9');
-        }
-      }
-
       if (range && !separateRangeInputs) {
         return '9999/99/99 – 9999/99/99';
       }
@@ -213,6 +203,7 @@ export default class Datepicker extends React.Component {
     _defineProperty(this, "handleInputChange", (event, separatedInput) => {
       const inputValue = this.props.range && this.props.separateRangeInputs ? combineSeparatedInputs(event.currentTarget.value, this.state.inputValue, separatedInput) : event.currentTarget.value;
       const mask = this.getMask();
+      const formatString = this.normalizeDashes(this.props.formatString);
 
       if (typeof mask === 'string' && inputValue === mask.replace(/9/g, ' ') || inputValue.length === 0) {
         if (this.props.onChange) {
@@ -231,7 +222,6 @@ export default class Datepicker extends React.Component {
       this.setState({
         inputValue
       });
-      const formatString = this.normalizeDashes(this.props.formatString);
 
       const parseDateString = dateString => {
         if (formatString === DEFAULT_DATE_FORMAT) {

package/esm/datepicker/datepicker.js

@@ -221,7 +221,7 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
         isOpen: true,
         isPseudoFocused: true,
         calendarFocused: false
-      });
+      }, _this.props.onOpen);
     });
 
     _defineProperty(_assertThisInitialized(_this), "close", function () {
@@ -255,7 +255,7 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
           range = _this$props2.range,
           separateRangeInputs = _this$props2.separateRangeInputs;
 
-      if (mask === null) {
+      if (mask === null || mask === undefined && formatString !== DEFAULT_DATE_FORMAT) {
         return null;
       }
 
@@ -263,16 +263,6 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
         return _this.normalizeDashes(mask);
       }
 
-      var normalizedFormatString = _this.normalizeDashes(formatString);
-
-      if (formatString && !separateRangeInputs) {
-        if (range) {
-          return "".concat(normalizedFormatString, " \u2013 ").concat(normalizedFormatString).replace(/[a-z]/gi, '9');
-        } else {
-          return normalizedFormatString.replace(/[a-z]/gi, '9');
-        }
-      }
-
       if (range && !separateRangeInputs) {
         return '9999/99/99 – 9999/99/99';
       }
@@ -285,6 +275,8 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
 
       var mask = _this.getMask();
 
+      var formatString = _this.normalizeDashes(_this.props.formatString);
+
       if (typeof mask === 'string' && inputValue === mask.replace(/9/g, ' ') || inputValue.length === 0) {
         if (_this.props.onChange) {
           if (_this.props.range) {
@@ -303,8 +295,6 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
         inputValue: inputValue
       });
 
-      var formatString = _this.normalizeDashes(_this.props.formatString);
-
       var parseDateString = function parseDateString(dateString) {
         if (formatString === DEFAULT_DATE_FORMAT) {
           return _this.dateHelpers.parse(dateString, 'slashDate', _this.props.locale);

package/map-marker/index.d.ts

@@ -40,11 +40,12 @@ export interface FLOATING_MARKER_ANCHOR_TYPES {
   square: 'square';
 }
 
-export type NeedleSizeT = ValueOf<NEEDLE_SIZES>;
-export type PinHeadT = ValueOf<PINHEAD_TYPES>;
-export type PinHeadSizeT = ValueOf<PINHEAD_SIZES_SHAPES>;
-export type AnchorPositionsT = ValueOf<FLOATING_MARKER_ANCHOR_POSITIONS>;
-export type FloatingMarkerSizeT = ValueOf<FLOATING_MARKER_SIZES>;
+export type NeedleSizeT = NEEDLE_SIZES[keyof NEEDLE_SIZES];
+export type PinHeadT = PINHEAD_TYPES[keyof PINHEAD_TYPES];
+export type PinHeadSizeT = PINHEAD_SIZES_SHAPES[keyof PINHEAD_SIZES_SHAPES];
+export type AnchorPositionsT = FLOATING_MARKER_ANCHOR_POSITIONS[keyof FLOATING_MARKER_ANCHOR_POSITIONS];
+export type FloatingMarkerSizeT = FLOATING_MARKER_SIZES[keyof FLOATING_MARKER_SIZES];
+export type FloatingMarkerAnchorTypeT = FLOATING_MARKER_ANCHOR_TYPES[keyof FLOATING_MARKER_ANCHOR_TYPES];
 
 export type FixedMarkerOverridesT = {
   Root?: Override<any>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "baseui",
-  "version": "0.0.0-next-e7d1f7c",
+  "version": "0.0.0-next-d6f91d4",
   "description": "A React Component library implementing the Base design language",
   "keywords": [
     "react",

package/snackbar/index.d.ts

@@ -1,22 +1,27 @@
 import * as React from 'react';
 
 import {Override} from '../overrides';
-import {DURATION, PLACEMENT} from './constants.js';
-export {DURATION, PLACEMENT} from './constants.js';
-
-export type DurationT =
-  | typeof DURATION.infinite
-  | typeof DURATION.short
-  | typeof DURATION.medium
-  | typeof DURATION.long;
-
-export type PlacementT =
-  | typeof PLACEMENT.topLeft
-  | typeof PLACEMENT.top
-  | typeof PLACEMENT.topRight
-  | typeof PLACEMENT.bottomLeft
-  | typeof PLACEMENT.bottom
-  | typeof PLACEMENT.bottomRight;
+
+declare const DURATION: {
+  infinite: number;
+  short: number;
+  medium: number;
+  long: number;
+};
+
+declare const PLACEMENT: {
+  topLeft: 'topLeft';
+  top: 'top';
+  topRight: 'topRight';
+  bottomRight: 'bottomRight';
+  bottom: 'bottom';
+  bottomLeft: 'bottomLeft';
+};
+export {DURATION, PLACEMENT};
+
+export type DurationT = (typeof DURATION)[keyof typeof DURATION];
+
+export type PlacementT = (typeof PLACEMENT)[keyof typeof PLACEMENT];
 
 export type SnackbarElementOverridesT = {
   Root?: Override<any>;