react-ui-basics 0.0.191 → 0.0.193

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-ui-basics",
-  "version": "0.0.191",
+  "version": "0.0.193",
   "description": "",
   "module": "index.js",
   "_main": "index.cjs.js",

package/src/DNDContainer.tsx

@@ -27,8 +27,12 @@ const clearSelection = () => {
         } else if (getSelection().removeAllRanges) {  // Firefox
             getSelection().removeAllRanges();
         }
-    } else if (DOCUMENT.selection) {  // IE?
-        DOCUMENT.selection.empty();
+    } else {
+        // @ts-ignore
+        if (DOCUMENT.selection) {  // IE?
+            // @ts-ignore
+            DOCUMENT.selection.empty();
+        }
     }
 };
 

package/src/DatePicker.tsx

@@ -3,7 +3,7 @@ import ReactDOM from "react-dom";
 import './DatePicker.css'
 import TextField from "./TextField";
 import * as DateTools from "./DateTools";
-import {orNoop, classNames, preventDefault, ref} from "./Tools";
+import {orNoop, classNames, preventDefault, ref, WINDOW} from "./Tools";
 import Button from './Button'
 import CalendarMonthView from "./CalendarMonthView";
 import MaterialIcon from "./MaterialIcon";
@@ -92,10 +92,20 @@ class DatePicker extends React.Component<DatePickerProps, DatePickerState> {
     };
 
     private getPopupStyles = () => {
-        const boundingClientRect = this.el.getBoundingClientRect();
+        const textInputBoundingRect = this.el.getBoundingClientRect();
+        const popupBoundingRect = this.popup.getBoundingClientRect();
+        let left = textInputBoundingRect.left;
+        let top = textInputBoundingRect.bottom;
+        if (left + popupBoundingRect.width > WINDOW.innerWidth) {
+            left = textInputBoundingRect.right - popupBoundingRect.width;
+        }
+        if (top + popupBoundingRect.height > WINDOW.innerHeight) {
+            top = textInputBoundingRect.top - popupBoundingRect.height;
+        }
+
         return {
-            left: boundingClientRect.left + 'px',
-            top: boundingClientRect.bottom + 'px',
+            left: left + 'px',
+            top: top + 'px',
         }
     };
 
@@ -137,6 +147,10 @@ class DatePicker extends React.Component<DatePickerProps, DatePickerState> {
             return true;
         }
 
+        if (this.state.popupStyles !== nextState.popupStyles) {
+            return true;
+        }
+
         if (this.state.selectedMonth !== nextState.selectedMonth) {
             return true;
         }
@@ -150,7 +164,7 @@ class DatePicker extends React.Component<DatePickerProps, DatePickerState> {
 
     render() {
         const {minDate, formatter, parser, dayOfWeekToString, monthToString, renderInput, portal} = this.props;
-        const {value, text, focused, selectedMonth, popupStyles } = this.state;
+        const {value, text, focused, selectedMonth, popupStyles} = this.state;
 
         let popup = <div className={classNames('calendar', focused && 'focused', portal && 'portal')}
                          ref={ref('popup', this)}

package/src/ResizeObserver.ts

@@ -47,4 +47,5 @@ class ResizeObserver {
     }
 }
 
+// @ts-ignore
 WINDOW.ResizeObserver = WINDOW.ResizeObserver || ResizeObserver;

package/src/Tools.ts

@@ -1,5 +1,5 @@
 var global = global || window;
-export const WINDOW = global;
+export const WINDOW: Window = global as Window;
 export const DOCUMENT = WINDOW.document;
 
 export function classNames(...classes: Array<string | number | boolean | null | void>) {