@commonsku/styles 1.16.3 → 1.16.4

package/dist/index.js

@@ -3425,6 +3425,241 @@ var THSorted = function (_a) {
 };
 var templateObject_1$m, templateObject_2$d, templateObject_3$6, templateObject_4$5, templateObject_5$5, templateObject_6$4, templateObject_7$2, templateObject_8$1, templateObject_9;
 
+var useClickOutside = function (props) {
+    var ref = props.ref, _a = props.eventType, eventType = _a === void 0 ? 'mousedown' : _a, onClick = props.onClick, onCleanup = props.onCleanup;
+    React.useEffect(function () {
+        function handleClickOutside(e) {
+            console.log('handleClickOutside');
+            if (ref.current && !ref.current.contains(e.target)) {
+                console.log('click outside');
+                onClick && onClick(e);
+            }
+        }
+        document.addEventListener(eventType, handleClickOutside);
+        return function () {
+            document.removeEventListener(eventType, handleClickOutside);
+            onCleanup && onCleanup();
+        };
+    }, []);
+};
+
+var QUERY = '(prefers-reduced-motion: no-preference)';
+var isRenderingOnServer = typeof window$1 === 'undefined';
+var getInitialState = function () {
+    // For our initial server render, we won't know if the user
+    // prefers reduced motion, but it doesn't matter. This value
+    // will be overwritten on the client, before any animations
+    // occur.
+    return isRenderingOnServer ? true : !window$1.matchMedia(QUERY).matches;
+};
+var usePrefersReducedMotion = function () {
+    var _a = React__default.useState(getInitialState), prefersReducedMotion = _a[0], setPrefersReducedMotion = _a[1];
+    React__default.useEffect(function () {
+        var mediaQueryList = window$1.matchMedia(QUERY);
+        var listener = function (event) {
+            setPrefersReducedMotion(!event.matches);
+        };
+        mediaQueryList.addListener(listener);
+        return function () {
+            mediaQueryList.removeListener(listener);
+        };
+    }, []);
+    return prefersReducedMotion;
+};
+
+var useRandomInterval = function (callback, minDelay, maxDelay) {
+    var timeoutId = React__default.useRef(null);
+    var savedCallback = React__default.useRef(callback);
+    React__default.useEffect(function () {
+        savedCallback.current = callback;
+    });
+    React__default.useEffect(function () {
+        var isEnabled = typeof minDelay === 'number' && typeof maxDelay === 'number';
+        if (isEnabled) {
+            var handleTick_1 = function () {
+                var nextTickAt = random(minDelay, maxDelay);
+                timeoutId.current = setTimeout(function () {
+                    savedCallback.current();
+                    handleTick_1();
+                }, nextTickAt);
+            };
+            handleTick_1();
+        }
+        return function () {
+            if (!!timeoutId.current) {
+                clearTimeout(timeoutId.current);
+            }
+        };
+    }, [minDelay, maxDelay]);
+    var cancel = React__default.useCallback(function () {
+        if (!!timeoutId.current) {
+            clearTimeout(timeoutId.current);
+        }
+    }, []);
+    return cancel;
+};
+
+var today = new Date();
+var getDatesBetween = function (startDt, endDt) {
+    var result = [];
+    var currentDt = startDt;
+    while (currentDt <= endDt) {
+        result.push(currentDt);
+        currentDt = dateFns.addDays(currentDt, 1);
+    }
+    return result;
+};
+var useCalendar = function (_a) {
+    var onChangeWeek = _a.onChangeWeek, onChangeMonth = _a.onChangeMonth;
+    var _b = React.useState(today), currentMonth = _b[0], setCurrentMonth = _b[1];
+    var _c = React.useState(dateFns.getWeek(currentMonth)), currentWeek = _c[0], setCurrentWeek = _c[1];
+    var _d = React.useState(today), selectedDate = _d[0], setSelectedDate = _d[1];
+    var changeMonth = function (action) {
+        var dt = currentMonth;
+        if (action === "prev") {
+            dt = dateFns.subMonths(currentMonth, 1);
+        }
+        else if (action === "next") {
+            dt = dateFns.addMonths(currentMonth, 1);
+        }
+        else if (action === "reset") {
+            dt = today;
+        }
+        setCurrentMonth(dt);
+        onChangeMonth && onChangeMonth({
+            action: action,
+            date: dt,
+            month: dateFns.getMonth(dt),
+            year: dateFns.getYear(dt),
+        });
+    };
+    var changeWeek = function (action, value) {
+        var dt = currentMonth;
+        if (action === "prev") {
+            dt = dateFns.subWeeks(currentMonth, 1);
+        }
+        else if (action === "next") {
+            dt = dateFns.addWeeks(currentMonth, 1);
+        }
+        else if (action === "reset") {
+            dt = today;
+        }
+        else if (action === "custom" && value) {
+            dt = value;
+        }
+        setCurrentMonth(dt);
+        var week = dateFns.getWeek(dt);
+        setCurrentWeek(week);
+        onChangeWeek && onChangeWeek({
+            action: action,
+            date: dt,
+            week: week,
+            month: dateFns.getMonth(dt),
+            year: dateFns.getYear(dt),
+        });
+    };
+    var changeDate = function (value) {
+        setCurrentMonth(value);
+        var week = dateFns.getWeek(value);
+        setCurrentWeek(week);
+        onChangeWeek && onChangeWeek({
+            action: 'change-date',
+            date: value,
+            week: week,
+            month: dateFns.getMonth(value),
+            year: dateFns.getYear(value),
+        });
+    };
+    var onClickDay = function (day) {
+        if (dateFns.isSameDay(day, selectedDate)) {
+            setSelectedDate(today);
+        }
+        else {
+            setSelectedDate(day);
+        }
+    };
+    // reset to today's date
+    var resetToToday = function () {
+        setSelectedDate(today);
+        changeWeek('reset');
+    };
+    var onNextWeek = function () { return changeWeek("next"); };
+    var onPrevWeek = function () { return changeWeek("prev"); };
+    var onNextMonth = function () { return changeMonth("next"); };
+    var onPrevMonth = function () { return changeMonth("prev"); };
+    return {
+        currentMonth: currentMonth,
+        currentWeek: currentWeek,
+        selectedDate: selectedDate,
+        setSelectedDate: setSelectedDate,
+        setCurrentWeek: setCurrentWeek,
+        setCurrentMonth: setCurrentMonth,
+        onClickDay: onClickDay,
+        onNextWeek: onNextWeek,
+        onPrevWeek: onPrevWeek,
+        onNextMonth: onNextMonth,
+        onPrevMonth: onPrevMonth,
+        changeWeek: changeWeek,
+        changeDate: changeDate,
+        getDatesBetween: getDatesBetween,
+        onReset: resetToToday,
+    };
+};
+
+var useWindowSize = function () {
+    var _a = React.useState([0, 0]), size = _a[0], setSize = _a[1]; // [width, height]
+    React.useEffect(function () {
+        function updateSize() {
+            setSize([window.innerWidth, window.innerHeight]);
+        }
+        window.addEventListener('resize', updateSize);
+        updateSize();
+        return function () { return window.removeEventListener('resize', updateSize); };
+    }, []);
+    return size;
+};
+
+function useLongPress(callback, ms) {
+    if (callback === void 0) { callback = function () { }; }
+    if (ms === void 0) { ms = 300; }
+    var _a = React.useState(false), startLongPress = _a[0], setStartLongPress = _a[1];
+    React.useEffect(function () {
+        var timeoutId = null;
+        if (startLongPress) {
+            timeoutId = setTimeout(callback, ms);
+        }
+        else {
+            if (timeoutId !== undefined && timeoutId !== null) {
+                clearTimeout(timeoutId);
+            }
+        }
+        return function () {
+            if (timeoutId !== undefined && timeoutId !== null) {
+                clearTimeout(timeoutId);
+            }
+        };
+    }, [callback, ms, startLongPress]);
+    var start = React.useCallback(function () {
+        setStartLongPress(true);
+    }, []);
+    var stop = React.useCallback(function () {
+        setStartLongPress(false);
+    }, []);
+    return {
+        onMouseDown: start,
+        onMouseUp: stop,
+        onMouseLeave: stop,
+        onTouchStart: start,
+        onTouchEnd: stop,
+    };
+}
+
+var useFallbackRef = function (forwardedRef) {
+    var localRef = React.useRef(null);
+    React.useImperativeHandle(forwardedRef, function () { return localRef.current; });
+    return localRef;
+};
+
 var Overlay = styled__default.div(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n  &&& {\n    position: fixed;\n    top: 0px;\n    bottom: 0px;\n    left: 0px;\n    right: 0px;\n    background: rgba(42, 56, 63, 0.45);\n    display: flex;\n    z-index: ", ";\n    margin-left: auto;\n    margin-right: auto;\n  }\n"], ["\n  &&& {\n    position: fixed;\n    top: 0px;\n    bottom: 0px;\n    left: 0px;\n    right: 0px;\n    background: rgba(42, 56, 63, 0.45);\n    display: flex;\n    z-index: ", ";\n    margin-left: auto;\n    margin-right: auto;\n  }\n"])), function (p) { return p.zIndex || 999; });
 var PopupWindow = styled__default.div(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n  &&& {\n    width: ", ";\n    height: ", "; \n    margin: 0 !important;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    position: fixed;\n    ", "\n    overflow-y: hidden;\n    display: block;\n    z-index: ", ";\n\n    padding: ", ";\n    border: 1px solid #CCD5DA;\n    background-color: #fefefe;\n    border-radius: 3px;\n\n    &:last-child {\n        margin-bottom: 0;\n    }\n    .popup-content {\n        overflow-y: auto;\n        height: 90%;\n    }\n    ", "\n    ", "\n  }\n"], ["\n  &&& {\n    width: ", ";\n    height: ", "; \n    margin: 0 !important;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    position: fixed;\n    ", "\n    overflow-y: hidden;\n    display: block;\n    z-index: ", ";\n\n    padding: ", ";\n    border: 1px solid #CCD5DA;\n    background-color: #fefefe;\n    border-radius: 3px;\n\n    &:last-child {\n        margin-bottom: 0;\n    }\n    .popup-content {\n        overflow-y: auto;\n        height: 90%;\n    }\n    ", "\n    ", "\n  }\n"])), function (props) { var _a; return (_a = props.width) !== null && _a !== void 0 ? _a : '90%'; }, function (props) { var _a; return (_a = props.height) !== null && _a !== void 0 ? _a : '75%'; }, function (props) { return props.height ? '' : 'max-height: 700px;'; }, function (p) { return p.zIndex || 1006; }, function (props) { var _a; return (_a = props.padding) !== null && _a !== void 0 ? _a : '1rem'; }, SharedStyles, SizerCss);
 var PopupHeader = styled__default.div(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n  &&& {\n    position: sticky;\n    top: 0;\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    background: white;\n    padding: 3px;\n    z-index: 99;\n    .title {\n        font-size: 1.8rem;\n        font-weight: 500;\n        text-align: left;\n        align-self: center;\n        padding-top: 3px;\n        padding-left: 3px;\n        border-bottom: none;\n        font-family: \"skufont-demibold\",sans-serif;\n        color: #123952;\n    }\n    ", "\n    ", "\n  }\n"], ["\n  &&& {\n    position: sticky;\n    top: 0;\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    background: white;\n    padding: 3px;\n    z-index: 99;\n    .title {\n        font-size: 1.8rem;\n        font-weight: 500;\n        text-align: left;\n        align-self: center;\n        padding-top: 3px;\n        padding-left: 3px;\n        border-bottom: none;\n        font-family: \"skufont-demibold\",sans-serif;\n        color: #123952;\n    }\n    ", "\n    ", "\n  }\n"])), SharedStyles, SizerCss);
@@ -3440,18 +3675,16 @@ var PopupContainer = function (_a) {
     }, []);
     return ReactDOM.createPortal(children, ref.current);
 };
-var Popup = function (_a) {
+var Popup = React__default.forwardRef(function (_a, forwardedRef) {
     var header = _a.header, _b = _a.noHeader, noHeader = _b === void 0 ? false : _b, title = _a.title, controls = _a.controls, children = _a.children, onClose = _a.onClose, _c = _a.noCloseButton, noCloseButton = _c === void 0 ? false : _c, _d = _a.closeOnEsc, closeOnEsc = _d === void 0 ? true : _d, _e = _a.closeOnClickOutside, closeOnClickOutside = _e === void 0 ? false : _e, overlayZIndex = _a.overlayZIndex, props = __rest(_a, ["header", "noHeader", "title", "controls", "children", "onClose", "noCloseButton", "closeOnEsc", "closeOnClickOutside", "overlayZIndex"]);
-    var ref = React__default.useRef(null);
-    /* there is a bug where this closes popup involuntarily
-    const handleClick = (e: Event) => {
-      // @ts-ignore
-      if (ref.current?.contains(e.target)) {
-        return;
-      }
-      onClose && onClose();
-    };
-    */
+    var ref = useFallbackRef(forwardedRef);
+    useClickOutside({
+        ref: ref,
+        onClick: function (e) {
+            closeOnClickOutside && onClose && onClose(e);
+        },
+        onCleanup: onClose,
+    });
     React.useEffect(function () {
         var handleKeyDown = function (e) {
             // @ts-ignore
@@ -3479,7 +3712,7 @@ var Popup = function (_a) {
                         React__default.createElement(Col, { style: { textAlign: 'right', alignSelf: 'center' } }, noCloseButton ? null :
                             controls || React__default.createElement(Button, { onClick: onClose }, "Close")))),
                 React__default.createElement("div", { className: "popup-content" }, children))));
-};
+});
 var ShowPopup = function (_a) {
     var _b = _a.autoOpen, autoOpen = _b === void 0 ? false : _b, PopupComponent = _a.popup, render = _a.render, _c = _a.closeOnEsc, closeOnEsc = _c === void 0 ? true : _c, _d = _a.closeOnClickOutside, closeOnClickOutside = _d === void 0 ? false : _d, props = __rest(_a, ["autoOpen", "popup", "render", "closeOnEsc", "closeOnClickOutside"]);
     var _e = React.useState(autoOpen), showPopup = _e[0], setShowPopup = _e[1];
@@ -3756,10 +3989,10 @@ var Tabs = /** @class */ (function (_super) {
     };
     Tabs.prototype.render = function () {
         var _this = this;
-        var _a = this.props, tabs = _a.tabs, size = _a.size, props = __rest(_a, ["tabs", "size"]);
+        var _a = this.props, tabs = _a.tabs, size = _a.size, padded = _a.padded, props = __rest(_a, ["tabs", "size", "padded"]);
         var selectedTab = this.getTab(tabs, this.state.selectedTabIndex);
         return React__default.createElement("div", __assign({}, props),
-            React__default.createElement(TabBar, { padded: this.props.padded === true }, tabs.map(function (tab, index) { return React__default.createElement(Tab, { key: index, size: size, className: index === _this.state.selectedTabIndex ? 'selected' : '', selected: index === _this.state.selectedTabIndex, onClick: function (e) {
+            React__default.createElement(TabBar, { padded: padded === true }, tabs.map(function (tab, index) { return React__default.createElement(Tab, { key: index, size: size, className: index === _this.state.selectedTabIndex ? 'selected' : '', selected: index === _this.state.selectedTabIndex, onClick: function (e) {
                     _this.setState({ selectedTabIndex: index });
                     var callback = tabs[index].onClick;
                     if (callback) {
@@ -4797,217 +5030,6 @@ function HeadlessTable(_a) {
 }
 var templateObject_1$B, templateObject_2$p, templateObject_3$h;
 
-var QUERY = '(prefers-reduced-motion: no-preference)';
-var isRenderingOnServer = typeof window$1 === 'undefined';
-var getInitialState = function () {
-    // For our initial server render, we won't know if the user
-    // prefers reduced motion, but it doesn't matter. This value
-    // will be overwritten on the client, before any animations
-    // occur.
-    return isRenderingOnServer ? true : !window$1.matchMedia(QUERY).matches;
-};
-var usePrefersReducedMotion = function () {
-    var _a = React__default.useState(getInitialState), prefersReducedMotion = _a[0], setPrefersReducedMotion = _a[1];
-    React__default.useEffect(function () {
-        var mediaQueryList = window$1.matchMedia(QUERY);
-        var listener = function (event) {
-            setPrefersReducedMotion(!event.matches);
-        };
-        mediaQueryList.addListener(listener);
-        return function () {
-            mediaQueryList.removeListener(listener);
-        };
-    }, []);
-    return prefersReducedMotion;
-};
-
-var useRandomInterval = function (callback, minDelay, maxDelay) {
-    var timeoutId = React__default.useRef(null);
-    var savedCallback = React__default.useRef(callback);
-    React__default.useEffect(function () {
-        savedCallback.current = callback;
-    });
-    React__default.useEffect(function () {
-        var isEnabled = typeof minDelay === 'number' && typeof maxDelay === 'number';
-        if (isEnabled) {
-            var handleTick_1 = function () {
-                var nextTickAt = random(minDelay, maxDelay);
-                timeoutId.current = setTimeout(function () {
-                    savedCallback.current();
-                    handleTick_1();
-                }, nextTickAt);
-            };
-            handleTick_1();
-        }
-        return function () {
-            if (!!timeoutId.current) {
-                clearTimeout(timeoutId.current);
-            }
-        };
-    }, [minDelay, maxDelay]);
-    var cancel = React__default.useCallback(function () {
-        if (!!timeoutId.current) {
-            clearTimeout(timeoutId.current);
-        }
-    }, []);
-    return cancel;
-};
-
-var today = new Date();
-var getDatesBetween = function (startDt, endDt) {
-    var result = [];
-    var currentDt = startDt;
-    while (currentDt <= endDt) {
-        result.push(currentDt);
-        currentDt = dateFns.addDays(currentDt, 1);
-    }
-    return result;
-};
-var useCalendar = function (_a) {
-    var onChangeWeek = _a.onChangeWeek, onChangeMonth = _a.onChangeMonth;
-    var _b = React.useState(today), currentMonth = _b[0], setCurrentMonth = _b[1];
-    var _c = React.useState(dateFns.getWeek(currentMonth)), currentWeek = _c[0], setCurrentWeek = _c[1];
-    var _d = React.useState(today), selectedDate = _d[0], setSelectedDate = _d[1];
-    var changeMonth = function (action) {
-        var dt = currentMonth;
-        if (action === "prev") {
-            dt = dateFns.subMonths(currentMonth, 1);
-        }
-        else if (action === "next") {
-            dt = dateFns.addMonths(currentMonth, 1);
-        }
-        else if (action === "reset") {
-            dt = today;
-        }
-        setCurrentMonth(dt);
-        onChangeMonth && onChangeMonth({
-            action: action,
-            date: dt,
-            month: dateFns.getMonth(dt),
-            year: dateFns.getYear(dt),
-        });
-    };
-    var changeWeek = function (action, value) {
-        var dt = currentMonth;
-        if (action === "prev") {
-            dt = dateFns.subWeeks(currentMonth, 1);
-        }
-        else if (action === "next") {
-            dt = dateFns.addWeeks(currentMonth, 1);
-        }
-        else if (action === "reset") {
-            dt = today;
-        }
-        else if (action === "custom" && value) {
-            dt = value;
-        }
-        setCurrentMonth(dt);
-        var week = dateFns.getWeek(dt);
-        setCurrentWeek(week);
-        onChangeWeek && onChangeWeek({
-            action: action,
-            date: dt,
-            week: week,
-            month: dateFns.getMonth(dt),
-            year: dateFns.getYear(dt),
-        });
-    };
-    var changeDate = function (value) {
-        setCurrentMonth(value);
-        var week = dateFns.getWeek(value);
-        setCurrentWeek(week);
-        onChangeWeek && onChangeWeek({
-            action: 'change-date',
-            date: value,
-            week: week,
-            month: dateFns.getMonth(value),
-            year: dateFns.getYear(value),
-        });
-    };
-    var onClickDay = function (day) {
-        if (dateFns.isSameDay(day, selectedDate)) {
-            setSelectedDate(today);
-        }
-        else {
-            setSelectedDate(day);
-        }
-    };
-    // reset to today's date
-    var resetToToday = function () {
-        setSelectedDate(today);
-        changeWeek('reset');
-    };
-    var onNextWeek = function () { return changeWeek("next"); };
-    var onPrevWeek = function () { return changeWeek("prev"); };
-    var onNextMonth = function () { return changeMonth("next"); };
-    var onPrevMonth = function () { return changeMonth("prev"); };
-    return {
-        currentMonth: currentMonth,
-        currentWeek: currentWeek,
-        selectedDate: selectedDate,
-        setSelectedDate: setSelectedDate,
-        setCurrentWeek: setCurrentWeek,
-        setCurrentMonth: setCurrentMonth,
-        onClickDay: onClickDay,
-        onNextWeek: onNextWeek,
-        onPrevWeek: onPrevWeek,
-        onNextMonth: onNextMonth,
-        onPrevMonth: onPrevMonth,
-        changeWeek: changeWeek,
-        changeDate: changeDate,
-        getDatesBetween: getDatesBetween,
-        onReset: resetToToday,
-    };
-};
-
-var useWindowSize = function () {
-    var _a = React.useState([0, 0]), size = _a[0], setSize = _a[1]; // [width, height]
-    React.useEffect(function () {
-        function updateSize() {
-            setSize([window.innerWidth, window.innerHeight]);
-        }
-        window.addEventListener('resize', updateSize);
-        updateSize();
-        return function () { return window.removeEventListener('resize', updateSize); };
-    }, []);
-    return size;
-};
-
-function useLongPress(callback, ms) {
-    if (callback === void 0) { callback = function () { }; }
-    if (ms === void 0) { ms = 300; }
-    var _a = React.useState(false), startLongPress = _a[0], setStartLongPress = _a[1];
-    React.useEffect(function () {
-        var timeoutId = null;
-        if (startLongPress) {
-            timeoutId = setTimeout(callback, ms);
-        }
-        else {
-            if (timeoutId !== undefined && timeoutId !== null) {
-                clearTimeout(timeoutId);
-            }
-        }
-        return function () {
-            if (timeoutId !== undefined && timeoutId !== null) {
-                clearTimeout(timeoutId);
-            }
-        };
-    }, [callback, ms, startLongPress]);
-    var start = React.useCallback(function () {
-        setStartLongPress(true);
-    }, []);
-    var stop = React.useCallback(function () {
-        setStartLongPress(false);
-    }, []);
-    return {
-        onMouseDown: start,
-        onMouseUp: stop,
-        onMouseLeave: stop,
-        onTouchStart: start,
-        onTouchEnd: stop,
-    };
-}
-
 /*
   Code from https://www.joshwcomeau.com/react/animated-sparkles-in-react/
   Check out his site.  It's awesome