baseui 0.0.0-next-39f6d48 → 0.0.0-next-6048bbf

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/data-table/column-datetime.js

@@ -86,6 +86,7 @@ function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 var DATE_FORMAT = 'MM-dd-yyyy';
+var MASK = '99-99-9999 - 99-99-9999';
 var TIME_FORMAT = 'HH:mm ss:SS';
 var FORMAT_STRING = "".concat(DATE_FORMAT, " ").concat(TIME_FORMAT);
 
@@ -461,6 +462,7 @@ function DatetimeFilter(props) {
       }
     },
     formatString: DATE_FORMAT,
+    mask: MASK,
     placeholder: "MM-DD-YYYY - MM-DD-YYYY",
     minDate: datesSorted[0],
     maxDate: datesSorted[datesSorted.length - 1],

package/data-table/column-datetime.js.flow

@@ -68,6 +68,7 @@ type FilterParametersT = {|
 type DatetimeColumnT = ColumnT<Date, FilterParametersT>;
 
 const DATE_FORMAT = 'MM-dd-yyyy';
+const MASK = '99-99-9999 - 99-99-9999';
 const TIME_FORMAT = 'HH:mm ss:SS';
 const FORMAT_STRING = `${DATE_FORMAT} ${TIME_FORMAT}`;
 
@@ -415,6 +416,7 @@ function DatetimeFilter(props) {
                     }
                   }}
                   formatString={DATE_FORMAT}
+                  mask={MASK}
                   placeholder="MM-DD-YYYY - MM-DD-YYYY"
                   minDate={datesSorted[0]}
                   maxDate={datesSorted[datesSorted.length - 1]}

package/datepicker/datepicker.js

@@ -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

@@ -229,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;
     }
 
@@ -237,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';
     }
@@ -270,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, ' ')) ||
@@ -286,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/es/data-table/column-datetime.js

@@ -29,6 +29,7 @@ import { COLUMNS, DATETIME_OPERATIONS } from './constants.js';
 import FilterShell from './filter-shell.js';
 import { LocaleContext } from '../locale/index.js';
 const DATE_FORMAT = 'MM-dd-yyyy';
+const MASK = '99-99-9999 - 99-99-9999';
 const TIME_FORMAT = 'HH:mm ss:SS';
 const FORMAT_STRING = `${DATE_FORMAT} ${TIME_FORMAT}`;
 
@@ -326,6 +327,7 @@ function DatetimeFilter(props) {
       }
     },
     formatString: DATE_FORMAT,
+    mask: MASK,
     placeholder: "MM-DD-YYYY - MM-DD-YYYY",
     minDate: datesSorted[0],
     maxDate: datesSorted[datesSorted.length - 1],

package/es/datepicker/datepicker.js

@@ -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/data-table/column-datetime.js

@@ -55,6 +55,7 @@ import { COLUMNS, DATETIME_OPERATIONS } from './constants.js';
 import FilterShell from './filter-shell.js';
 import { LocaleContext } from '../locale/index.js';
 var DATE_FORMAT = 'MM-dd-yyyy';
+var MASK = '99-99-9999 - 99-99-9999';
 var TIME_FORMAT = 'HH:mm ss:SS';
 var FORMAT_STRING = "".concat(DATE_FORMAT, " ").concat(TIME_FORMAT);
 
@@ -430,6 +431,7 @@ function DatetimeFilter(props) {
       }
     },
     formatString: DATE_FORMAT,
+    mask: MASK,
     placeholder: "MM-DD-YYYY - MM-DD-YYYY",
     minDate: datesSorted[0],
     maxDate: datesSorted[datesSorted.length - 1],

package/esm/datepicker/datepicker.js

@@ -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-39f6d48",
+  "version": "0.0.0-next-6048bbf",
   "description": "A React Component library implementing the Base design language",
   "keywords": [
     "react",
@@ -197,6 +197,7 @@
     "glob": "^7.1.6",
     "just-extend": "^4.0.2",
     "memoize-one": "^5.1.1",
+    "mockdate": "^3.0.5",
     "polished": "^3.2.0",
     "popper.js": "^1.16.0",
     "react-dropzone": "^9.0.0",

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>;