@mackin.com/styleguide 9.0.0-beta.1 → 9.2.0

package/index.js

@@ -6,10 +6,10 @@ var proRegularSvgIcons = require('@fortawesome/pro-regular-svg-icons');
 var proSolidSvgIcons = require('@fortawesome/pro-solid-svg-icons');
 var proLightSvgIcons = require('@fortawesome/pro-light-svg-icons');
 var reactFontawesome = require('@fortawesome/react-fontawesome');
-var lodash = require('lodash');
-var dateFns = require('date-fns');
 var nanoid = require('nanoid');
+var dateFns = require('date-fns');
 var reactDom = require('react-dom');
+var lodash = require('lodash');
 var reactTinyPopover = require('react-tiny-popover');
 var reactRouterDom = require('react-router-dom');
 var ReactSlider = require('react-slider');
@@ -602,51 +602,22 @@ const useAccordianState = (count, openIndex) => {
     ];
 };
 
-const DEFAULT_DEBOUNCE_MS = 250;
-const NUMBER_REGEX = /^-?\d+\.?\d*$/;
-const DATE_REGEX = /(\d{1,2})(?:\/|-)(\d{1,2})(?:\/|-)(\d{4})/;
-const DEFAULT_MAX_LENGTH = 100;
-const formatLocalValue = (value, type) => {
-    let newValue = '';
-    if (value !== undefined && value !== null) {
-        if (type === 'date' && typeof value === 'number') {
-            newValue = dateFns.format(value, 'MM/dd/yyyy');
-        }
-        else {
-            newValue = value;
-        }
-    }
-    return newValue;
-};
-/** @deprecated Use DateInput, NumberInput, or TextInput instead. */
-const Input = React__namespace.forwardRef((props, ref) => {
-    var _a, _b, _c;
-    const [localValue, setLocalValue] = React__namespace.useState(formatLocalValue(props.value, props.type));
-    const debounceMs = (_a = props.debounceMs) !== null && _a !== void 0 ? _a : DEFAULT_DEBOUNCE_MS;
-    const autoComplete = (_b = props.autoComplete) !== null && _b !== void 0 ? _b : 'off';
-    const vars = React__namespace.useRef({
-        wrappedOnChange: (props.onChange && debounceMs) ? lodash.debounce((value, name) => {
-            var _a;
-            (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, value, name);
-        }, debounceMs) : undefined,
-        focused: false
-    });
-    const outerOnChange = (_c = vars.current.wrappedOnChange) !== null && _c !== void 0 ? _c : props.onChange;
-    const trySyncLocalValue = () => {
-        if (vars.current.focused) {
-            return;
-        }
-        if (props.value === localValue) {
-            return;
-        }
-        const newValue = formatLocalValue(props.value, props.type);
-        setLocalValue(newValue);
-    };
-    React__namespace.useEffect(() => {
-        trySyncLocalValue();
-    }, [props.value]);
+const InputErrorDisplay = (props) => {
+    const theme = useThemeSafely();
+    return (React__namespace.createElement(Text, { className: css.css({
+            minHeight: theme.controls.inputErrorMinHeight,
+            lineHeight: theme.controls.inputErrorMinHeight,
+            color: theme.colors.negative
+        }), smaller: true, noPad: true }, props.error));
+};
+
+const defaultMaxLength$1 = 100;
+const BaseInput = React__namespace.forwardRef((props, ref) => {
+    var _a, _b;
     const theme = useThemeSafely();
+    const { rightControl, round, wrapperClassName, showErrorDisplay } = props, nativeProps = __rest(props, ["rightControl", "round", "wrapperClassName", "showErrorDisplay"]);
     const inputStyles = css.css({
+        backgroundColor: theme.colors.bg,
         fontFamily: theme.fonts.family,
         fontSize: theme.fonts.size,
         width: '100%',
@@ -671,7 +642,7 @@ const Input = React__namespace.forwardRef((props, ref) => {
                 boxShadow: theme.controls.focusOutlineRequiredShadow
             }
         },
-    }, props.round && props.type !== 'textarea' && {
+    }, props.round && {
         borderRadius: theme.controls.roundRadius,
         paddingLeft: `calc(${theme.controls.padding} * 2)`,
         paddingRight: `calc(${theme.controls.padding} * 2)`
@@ -682,100 +653,19 @@ const Input = React__namespace.forwardRef((props, ref) => {
         ':focus': {
             outline: 'none',
             boxShadow: 'none'
+        },
+        // FF fix to hide spinner on number elements
+        appearance: props.type === 'number' ? 'none' : undefined,
+        '::-webkit-outer-spin-button': {
+            appearance: 'none'
+        },
+        '::-webkit-inner-spin-button': {
+            appearance: 'none'
         }
-    }, props.rightControl && props.type !== 'textarea' && {
+    }, props.rightControl && {
         paddingRight: theme.controls.height
     });
-    let inputElement;
-    const onFocus = (e) => {
-        var _a;
-        vars.current.focused = true;
-        (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, e);
-    };
-    const onBlur = (e) => {
-        var _a;
-        vars.current.focused = false;
-        trySyncLocalValue();
-        (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
-    };
-    let localOnChange;
-    if (props.type === 'number') {
-        localOnChange = e => {
-            const value = e.target.value;
-            if (NUMBER_REGEX.test(value)) {
-                let numValue = parseFloat(value);
-                if (props.min && numValue < props.min) {
-                    numValue = props.min;
-                }
-                if (props.max && numValue > props.max) {
-                    numValue = props.max;
-                }
-                setLocalValue(numValue);
-                outerOnChange === null || outerOnChange === void 0 ? void 0 : outerOnChange(numValue, props.name, e);
-            }
-            else if (!value) {
-                setLocalValue(value);
-                outerOnChange === null || outerOnChange === void 0 ? void 0 : outerOnChange(undefined, props.name, e);
-            }
-        };
-    }
-    else if (props.type === 'date') {
-        localOnChange = e => {
-            const value = e.target.value;
-            setLocalValue(value);
-            if (outerOnChange) {
-                const dateParts = DATE_REGEX.exec(value);
-                if (!dateParts) {
-                    outerOnChange(undefined, props.name, e);
-                }
-                else {
-                    const year = parseInt(dateParts[3], 10);
-                    const month = parseInt(dateParts[1], 10);
-                    const day = parseInt(dateParts[2], 10);
-                    if (dateFns.isExists(year, month, day)) {
-                        let ms = new Date(year, month - 1, day).valueOf();
-                        if (props.min && ms < props.min) {
-                            ms = props.min;
-                        }
-                        if (props.max && ms > props.max) {
-                            ms = props.max;
-                        }
-                        outerOnChange(ms, props.name, e);
-                    }
-                    else {
-                        outerOnChange(undefined, props.name, e);
-                    }
-                }
-            }
-        };
-    }
-    else {
-        localOnChange = e => {
-            const value = e.target.value;
-            setLocalValue(value);
-            outerOnChange === null || outerOnChange === void 0 ? void 0 : outerOnChange(value, props.name, e);
-        };
-    }
-    if (props.type === 'number') {
-        inputElement = React__namespace.createElement("input", Object.assign({}, props.inputAriaAttributes, { autoFocus: props.autoFocus, ref: ref, name: props.name, pattern: props.pattern, style: props.style, autoComplete: autoComplete, tabIndex: props.readOnly ? -1 : undefined, readOnly: props.readOnly, 
-            // set fixed default to defeat pasting stupid numbers
-            maxLength: 50, min: props.min, max: props.max, required: props.required, disabled: props.disabled, id: props.id, className: css.cx(inputStyles, props.inputClassName), placeholder: props.placeholder, type: "number", value: localValue, onFocus: onFocus, onBlur: onBlur, onChange: localOnChange, onKeyDown: props.onKeyDown, onKeyUp: props.onKeyUp, onKeyPress: props.onKeyPress }));
-    }
-    else if (props.type === 'date') {
-        inputElement = React__namespace.createElement("input", Object.assign({}, props.inputAriaAttributes, { autoFocus: props.autoFocus, ref: ref, name: props.name, pattern: props.pattern, style: props.style, autoComplete: autoComplete, tabIndex: props.readOnly ? -1 : undefined, readOnly: props.readOnly, maxLength: 10, required: props.required, disabled: props.disabled, id: props.id, className: css.cx(inputStyles, props.inputClassName), placeholder: props.placeholder, type: "text", value: localValue, onFocus: onFocus, onBlur: onBlur, onChange: localOnChange, onKeyDown: props.onKeyDown, onKeyUp: props.onKeyUp, onKeyPress: props.onKeyPress }));
-    }
-    else if (props.type === 'textarea') {
-        inputElement = React__namespace.createElement("textarea", Object.assign({}, props.inputAriaAttributes, { autoFocus: props.autoFocus, ref: ref, name: props.name, style: props.style, rows: props.rows || 10, autoComplete: autoComplete, tabIndex: props.readOnly ? -1 : undefined, readOnly: props.readOnly, maxLength: props.maxLength || DEFAULT_MAX_LENGTH, required: props.required, disabled: props.disabled, id: props.id, className: css.cx(css.css `
-			${inputStyles}
-			max-width: 100%;
-			min-height: ${theme.controls.height};
-			padding-top: 0.75rem;
-			height:auto;`, props.inputClassName), placeholder: props.placeholder, value: localValue, onFocus: onFocus, onBlur: onBlur, onChange: localOnChange, onKeyDown: props.onKeyDown, onKeyUp: props.onKeyUp, onKeyPress: props.onKeyPress }));
-    }
-    else {
-        // text, password, email, and url
-        inputElement = React__namespace.createElement("input", Object.assign({}, props.inputAriaAttributes, { autoFocus: props.autoFocus, ref: ref, name: props.name, pattern: props.pattern, style: props.style, autoComplete: autoComplete, tabIndex: props.readOnly ? -1 : undefined, readOnly: props.readOnly, maxLength: props.maxLength || DEFAULT_MAX_LENGTH, required: props.required, disabled: props.disabled, id: props.id, className: css.cx(inputStyles, props.inputClassName), placeholder: props.placeholder, type: props.type, value: localValue, onFocus: onFocus, onBlur: onBlur, onChange: localOnChange, onKeyDown: props.onKeyDown, onKeyUp: props.onKeyUp, onKeyPress: props.onKeyPress }));
-    }
+    const inputElement = React__namespace.createElement("input", Object.assign({}, nativeProps, { ref: ref, autoComplete: (_a = nativeProps.autoComplete) !== null && _a !== void 0 ? _a : 'off', tabIndex: nativeProps.readOnly ? -1 : nativeProps.tabIndex, maxLength: nativeProps.maxLength || defaultMaxLength$1, className: css.cx(inputStyles, props.className) }));
     const inputWrapperStyles = css.css `
 		width:100%;
 		${props.rightControl && `
@@ -793,187 +683,362 @@ const Input = React__namespace.forwardRef((props, ref) => {
 			right: calc(${theme.controls.padding} * 2);
 		`}
 	`;
-    return (React__namespace.createElement("div", { className: css.cx('input', inputWrapperStyles, props.className) },
-        inputElement,
-        props.rightControl && props.type !== 'textarea' && React__namespace.createElement("div", { className: rightControlStyles }, props.rightControl)));
+    return (React__namespace.createElement("div", { className: css.css({
+            width: '100%',
+            label: 'BaseInput'
+        }) },
+        React__namespace.createElement("div", { className: css.cx('input', inputWrapperStyles, wrapperClassName) },
+            inputElement,
+            props.rightControl && (React__namespace.createElement("div", { className: rightControlStyles }, props.rightControl))),
+        ((_b = props.showErrorDisplay) !== null && _b !== void 0 ? _b : true) && React__namespace.createElement(InputErrorDisplay, { error: props.readOnly ? undefined : props.error })));
 });
 
-const List = React__namespace.forwardRef((props, ref) => {
-    const children = props.items ? props.items.map((item, i) => React__namespace.createElement(ListItem, { key: i }, item)) : props.children;
-    const theme = useThemeSafely();
-    const listProps = __rest(props, ["altRowColor", "noLines", "items"]);
-    const listStyles = css.css `
-		margin: 0;
-		padding: 0;
-		list-style-type: none;
-		${props.altRowColor && `
-			> .listItem:nth-of-type(even) {
-				background-color: ${theme.colors.lightBg};
-			}
-		`}
-		${props.noLines && `
-			> .listItem {
-				border-bottom: none;
-			}
-		`}
-	`;
-    return (React__namespace.createElement("ul", Object.assign({}, listProps, { ref: ref, className: css.cx('list', listStyles, props.className) }), children));
-});
-const ListItem = (props) => {
-    const liProps = __rest(props, ["variant", "noContentStyling"]);
-    const theme = useThemeSafely();
-    const itemStyles = css.css `
-		border-bottom: ${theme.controls.border};
-		&:last-child {
-            border-bottom: none;
+/** useEffect but ignores the first call on component mount. */
+const useIgnoreMount = (effect, deps) => {
+    const mounted = React__default['default'].useRef(false);
+    React__default['default'].useEffect(() => {
+        if (!mounted.current) {
+            mounted.current = true;
         }
-	`;
-    const contentStyle = css.css({
-        padding: `calc(${theme.controls.padding} * 1.5)`
-    }, props.variant === 'full' && {
-        padding: 0
-    }, !props.noContentStyling && {
-        '>.button': {
-            padding: `calc(${theme.controls.padding} * 1.5)`,
-            width: '100%',
-            border: 'none'
-        },
-        '>.omniLink': {
-            paddingLeft: `calc(${theme.controls.padding} * 1.5)`,
-            paddingRight: `calc(${theme.controls.padding} * 1.5)`,
-            width: '100%',
-            border: 'none',
-            lineHeight: theme.controls.height
-        },
-        '>.button:not(:focus), >.omniLink:not(:focus)': {
-            boxShadow: 'none',
-        },
-        '>.omniLink:not(.omniLink--iconBlock)': {
-            display: 'block'
+        else {
+            effect();
         }
-    });
-    return (React__namespace.createElement("li", Object.assign({}, liProps, { className: css.cx('listItem', itemStyles, props.className) }),
-        React__namespace.createElement("div", { className: css.css(contentStyle) }, props.children)));
-};
-
-const TabLocker = (props) => {
-    const tabLocker = React__namespace.useRef(null);
-    return (React__namespace.createElement("div", { className: "tabLocker", style: props.style, ref: tabLocker, onKeyDown: e => {
-            var _a, _b;
-            if (props.disabled) {
-                return;
-            }
-            if (e.key === 'Tab') {
-                e.preventDefault();
-                e.stopPropagation();
-                const tabElements = Array.from((_b = (_a = tabLocker.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll('a, button, input, textarea, select, details,[tabindex]:not([tabindex="-1"])')) !== null && _b !== void 0 ? _b : []).filter(el => !el.hasAttribute('disabled'));
-                if (tabElements.length) {
-                    const direction = e.shiftKey ? -1 : 1;
-                    const index = tabElements.findIndex(x => x === document.activeElement);
-                    if (index === undefined) {
-                        tabElements[0].focus();
-                    }
-                    else if (index === tabElements.length - 1 && direction === 1) {
-                        tabElements[0].focus();
-                    }
-                    else if (index === 0 && direction === -1) {
-                        tabElements[tabElements.length - 1].focus();
-                    }
-                    else {
-                        tabElements[index + direction].focus();
-                    }
-                }
-            }
-        } }, props.children));
+    }, deps);
 };
 
-//TB: FUTURE will need to use the new input
-const defaultMaxShownValues = 7;
-const buttonMarkerClass = 'ListItem__button';
-const Autocomplete = (p) => {
+const tryClampRange = (value, min, max) => {
+    if (value === undefined) {
+        return value;
+    }
+    if (isNaN(value)) {
+        return undefined;
+    }
+    if (min !== undefined && value < min) {
+        return min;
+    }
+    if (max !== undefined && value > max) {
+        return max;
+    }
+    return value;
+};
+const isOutOfRange = (value, min, max) => {
+    if (min !== undefined && value < min) {
+        return true;
+    }
+    if (max !== undefined && value > max) {
+        return true;
+    }
+    return false;
+};
+const getStepDecimalPlaces = (step) => {
     var _a, _b;
-    const theme = useThemeSafely();
-    const element = React__namespace.useRef(null);
-    const input = React__namespace.useRef(null);
-    const list = React__namespace.useRef(null);
-    const [values, setValues] = React__namespace.useState([]);
-    const showValues = React__namespace.useMemo(() => values.length > 0, [values]);
-    const maxShowValues = (_a = p.maxShownValues) !== null && _a !== void 0 ? _a : defaultMaxShownValues;
-    const shownValues = React__namespace.useMemo(() => {
-        if (!p.allowScroll) {
-            return values.slice(0, maxShowValues);
-        }
-        return values.slice();
-    }, [values]);
-    const onChangeForOptions = React__namespace.useRef(lodash.debounce((value) => {
-        if (!p.minChars || value.length >= p.minChars) {
-            p.getOptions(value)
-                .then(vals => {
-                setValues(vals);
-            }).catch(err => {
-                // ignore it
-            });
-        }
-        else {
-            setValues([]);
-        }
-    }, (_b = p.getOptionsDebounceMs) !== null && _b !== void 0 ? _b : 0, { leading: false, trailing: true }));
-    const getNextTabElement = (fromIndex, direction) => {
-        var _a, _b, _c;
-        if (fromIndex === -1) {
-            let buttonIndex = 0;
-            if (direction === -1) {
-                buttonIndex = shownValues.length - 1;
-            }
-            return (_a = list.current) === null || _a === void 0 ? void 0 : _a.querySelector(`.${buttonMarkerClass}${buttonIndex}`);
-        }
-        else {
-            const nextIndex = fromIndex + direction;
-            if (nextIndex >= shownValues.length || nextIndex < 0) {
-                return (_b = input.current) !== null && _b !== void 0 ? _b : undefined;
-            }
-            else {
-                return (_c = list.current) === null || _c === void 0 ? void 0 : _c.querySelector(`.${buttonMarkerClass}${nextIndex}`);
-            }
-        }
-    };
-    React__namespace.useEffect(() => {
-        const clearItems = () => {
-            if (values.length > 0) {
-                setValues([]);
-            }
-        };
-        document.addEventListener('click', clearItems);
-        return () => {
-            document.removeEventListener('click', clearItems);
-        };
-    }, [values]);
-    let listBorderRadius = '';
-    if (p.round || theme.controls.borderRadius) {
-        listBorderRadius = theme.controls.borderRadius || '0.5rem';
+    if (!step) {
+        return 0;
     }
-    return (React__namespace.createElement("div", { onClick: e => {
-            e.stopPropagation();
-        }, onKeyDown: e => {
-            var _a;
-            if (e.key === 'Escape') {
-                setValues([]);
-                (_a = input.current) === null || _a === void 0 ? void 0 : _a.focus();
-            }
-        }, ref: element, className: css.cx(css.css({
-            position: 'relative',
-            width: '100%',
-            label: 'Autocomplete'
-        }), 'autocomplete') },
-        React__namespace.createElement(TabLocker, { disabled: !showValues, style: { position: 'relative' } },
-            React__namespace.createElement(Input, { autoFocus: p.autoFocus, inputAriaAttributes: p.inputAriaAttributes, ref: input, debounceMs: 0, type: "text", value: getAutocompleteValueText(p.value), round: p.round, rightControl: p.rightControl, placeholder: p.placeholder, id: p.id, disabled: p.disabled, className: p.className, inputClassName: p.inputClassName, maxLength: p.maxLength, required: p.required, onChange: v => {
-                    const value = v;
-                    p.onChange(value);
-                    onChangeForOptions.current(value);
-                }, onKeyDown: e => {
-                    var _a, _b, _c;
-                    if (showValues) {
-                        if (e.key === 'ArrowDown') {
+    const strStep = typeof step === 'number' ? step.toString() : step;
+    return (_b = (_a = strStep.split('.')[1]) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
+};
+const tryClampDecimals = (value, step = 0) => {
+    if (value === undefined) {
+        return value;
+    }
+    if (isNaN(value)) {
+        return undefined;
+    }
+    const decimals = getStepDecimalPlaces(step);
+    if (decimals === 0) {
+        return Math.floor(value);
+    }
+    return parseFloat(value.toFixed(decimals));
+};
+
+/** Common state handling for displaying validation messages with inputs. */
+const useInputValidationMessage = (ref, props) => {
+    const [validationError, setValidationError] = React__default['default'].useState('');
+    const updateErrorMessage = (customErrorOverride) => {
+        var _a;
+        const customError = customErrorOverride || props.customError || '';
+        // set it OR clear it.  either way, update it.
+        (_a = ref.current) === null || _a === void 0 ? void 0 : _a.setCustomValidity(customError);
+        setValidationError(customError || getValidationMessage(ref.current, props.patternErrorMessage));
+    };
+    React.useEffect(() => {
+        updateErrorMessage();
+    }, [props.customError]);
+    React__default['default'].useEffect(() => {
+        updateErrorMessage();
+    }, []);
+    return [validationError, updateErrorMessage];
+};
+const getValidationMessage = (element, patternErrorMessage) => {
+    var _a;
+    if (!element) {
+        return '';
+    }
+    const validity = element.validity;
+    if (validity.valid) {
+        return '';
+    }
+    if (validity.customError) {
+        return element.validationMessage;
+    }
+    if (validity.typeMismatch) {
+        switch (element.type) {
+            case 'url':
+                return `Invalid URL.`;
+            case 'email':
+                return `Invalid email.`;
+            default:
+                return element.validationMessage;
+        }
+    }
+    if (element instanceof HTMLInputElement) {
+        if (validity.rangeOverflow) {
+            return `Must be less than or equal to ${element.max}.`;
+        }
+        if (validity.rangeUnderflow) {
+            return `Must be greater than or equal to ${element.min}.`;
+        }
+        if (validity.stepMismatch) {
+            const decimalPlaces = getStepDecimalPlaces(element.step);
+            if (decimalPlaces > 0) {
+                const place = decimalPlaces === 1 ? 'place' : 'places';
+                return `Limited to ${getStepDecimalPlaces(element.step)} decimal ${place}.`;
+            }
+            else {
+                /*
+                    step is buggy!
+                    
+                    at least in Chrome, setting step=5 will cause the browser to mark the field as invalid if the number is not divisible
+                    by 5.  55 is ok.  50 is ok.  59 is not ok.
+                    
+                    to make things worse, if you enter an invalid number like 59 with step=5 and then clear the input, Chrome will tell
+                    you the number 5 is now invalid and should be 4 or 9.
+                */
+                return `Must be an integer.`;
+            }
+        }
+    }
+    if (validity.tooShort) {
+        return `Must be at least ${((_a = element.minLength) !== null && _a !== void 0 ? _a : 0).toLocaleString()} characters in length.`;
+    }
+    if (validity.valueMissing) {
+        return 'Required.';
+    }
+    if (validity.patternMismatch && patternErrorMessage) {
+        return patternErrorMessage;
+    }
+    // unhandled.  let the browser decide.
+    return element.validationMessage;
+};
+
+const TextInput = React__namespace.forwardRef((props, ref) => {
+    var _a;
+    const [localValue, setLocalValue] = React__namespace.useState(props.value);
+    const inputRef = (ref !== null && ref !== void 0 ? ref : React__namespace.useRef(null));
+    const [validationError, updateErrorMessage] = useInputValidationMessage(inputRef, props);
+    const nativeProps = __rest(props, ["emptyString", "onValueChange", "customError", "patternErrorMessage"]);
+    useIgnoreMount(() => {
+        var _a;
+        if ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.checkValidity()) {
+            props.onValueChange(localValue);
+        }
+        else {
+            props.onValueChange(undefined);
+        }
+        updateErrorMessage();
+    }, [localValue]);
+    useIgnoreMount(() => {
+        if (document.activeElement !== inputRef.current) {
+            setLocalValue(props.value);
+        }
+        updateErrorMessage();
+    }, [props.value]);
+    return (React__namespace.createElement(BaseInput, Object.assign({}, nativeProps, { error: validationError, type: (_a = props.type) !== null && _a !== void 0 ? _a : 'text', ref: inputRef, value: localValue !== null && localValue !== void 0 ? localValue : '', onChange: e => {
+            var _a;
+            setLocalValue(props.emptyString ? e.target.value : e.target.value || undefined);
+            (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, e);
+        }, onBlur: e => {
+            var _a, _b;
+            if (!e.target.checkValidity()) {
+                setLocalValue(undefined);
+            }
+            else if ((_a = props.trim) !== null && _a !== void 0 ? _a : true) {
+                setLocalValue(currentValue => {
+                    return currentValue === null || currentValue === void 0 ? void 0 : currentValue.trim();
+                });
+            }
+            (_b = props.onBlur) === null || _b === void 0 ? void 0 : _b.call(props, e);
+        } })));
+});
+
+const List = React__namespace.forwardRef((props, ref) => {
+    const children = props.items ? props.items.map((item, i) => React__namespace.createElement(ListItem, { key: i }, item)) : props.children;
+    const theme = useThemeSafely();
+    const listProps = __rest(props, ["altRowColor", "noLines", "items"]);
+    const listStyles = css.css `
+		margin: 0;
+		padding: 0;
+		list-style-type: none;
+		${props.altRowColor && `
+			> .listItem:nth-of-type(even) {
+				background-color: ${theme.colors.lightBg};
+			}
+		`}
+		${props.noLines && `
+			> .listItem {
+				border-bottom: none;
+			}
+		`}
+	`;
+    return (React__namespace.createElement("ul", Object.assign({}, listProps, { ref: ref, className: css.cx('list', listStyles, props.className) }), children));
+});
+const ListItem = (props) => {
+    const liProps = __rest(props, ["variant", "noContentStyling"]);
+    const theme = useThemeSafely();
+    const itemStyles = css.css `
+		border-bottom: ${theme.controls.border};
+		&:last-child {
+            border-bottom: none;
+        }
+	`;
+    const contentStyle = css.css({
+        padding: `calc(${theme.controls.padding} * 1.5)`
+    }, props.variant === 'full' && {
+        padding: 0
+    }, !props.noContentStyling && {
+        '>.button': {
+            padding: `calc(${theme.controls.padding} * 1.5)`,
+            width: '100%',
+            border: 'none'
+        },
+        '>.omniLink': {
+            paddingLeft: `calc(${theme.controls.padding} * 1.5)`,
+            paddingRight: `calc(${theme.controls.padding} * 1.5)`,
+            width: '100%',
+            border: 'none',
+            lineHeight: theme.controls.height
+        },
+        '>.button:not(:focus), >.omniLink:not(:focus)': {
+            boxShadow: 'none',
+        },
+        '>.omniLink:not(.omniLink--iconBlock)': {
+            display: 'block'
+        }
+    });
+    return (React__namespace.createElement("li", Object.assign({}, liProps, { className: css.cx('listItem', itemStyles, props.className) }),
+        React__namespace.createElement("div", { className: css.css(contentStyle) }, props.children)));
+};
+
+const TabLocker = (props) => {
+    const tabLocker = React__namespace.useRef(null);
+    return (React__namespace.createElement("div", { className: "tabLocker", style: props.style, ref: tabLocker, onKeyDown: e => {
+            var _a, _b;
+            if (props.disabled) {
+                return;
+            }
+            if (e.key === 'Tab') {
+                e.preventDefault();
+                e.stopPropagation();
+                const tabElements = Array.from((_b = (_a = tabLocker.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll('a, button, input, textarea, select, details,[tabindex]:not([tabindex="-1"])')) !== null && _b !== void 0 ? _b : []).filter(el => !el.hasAttribute('disabled'));
+                if (tabElements.length) {
+                    const direction = e.shiftKey ? -1 : 1;
+                    const index = tabElements.findIndex(x => x === document.activeElement);
+                    if (index === undefined) {
+                        tabElements[0].focus();
+                    }
+                    else if (index === tabElements.length - 1 && direction === 1) {
+                        tabElements[0].focus();
+                    }
+                    else if (index === 0 && direction === -1) {
+                        tabElements[tabElements.length - 1].focus();
+                    }
+                    else {
+                        tabElements[index + direction].focus();
+                    }
+                }
+            }
+        } }, props.children));
+};
+
+const defaultMaxShownValues = 7;
+const buttonMarkerClass = 'ListItem__button';
+const Autocomplete = (p) => {
+    var _a;
+    const inputProps = __rest(p, ["value", "className", "inputWrapperClassName", "inputClassName", "maxShownValues", "allowScroll", "options", "onPick"]);
+    const theme = useThemeSafely();
+    const element = React__namespace.useRef(null);
+    const input = React__namespace.useRef(null);
+    const list = React__namespace.useRef(null);
+    const maxShowValues = (_a = p.maxShownValues) !== null && _a !== void 0 ? _a : defaultMaxShownValues;
+    const displayOptions = React__namespace.useMemo(() => {
+        if (!p.allowScroll) {
+            return p.options.slice(0, maxShowValues);
+        }
+        return p.options.slice();
+    }, [p.options]);
+    const getNextTabElement = (fromIndex, direction) => {
+        var _a, _b, _c;
+        if (fromIndex === -1) {
+            let buttonIndex = 0;
+            if (direction === -1) {
+                buttonIndex = displayOptions.length - 1;
+            }
+            return (_a = list.current) === null || _a === void 0 ? void 0 : _a.querySelector(`.${buttonMarkerClass}${buttonIndex}`);
+        }
+        else {
+            const nextIndex = fromIndex + direction;
+            if (nextIndex >= displayOptions.length || nextIndex < 0) {
+                return (_b = input.current) !== null && _b !== void 0 ? _b : undefined;
+            }
+            else {
+                return (_c = list.current) === null || _c === void 0 ? void 0 : _c.querySelector(`.${buttonMarkerClass}${nextIndex}`);
+            }
+        }
+    };
+    React__namespace.useEffect(() => {
+        const clearItems = () => {
+            if (p.options.length) {
+                p.onPick(undefined);
+            }
+        };
+        document.addEventListener('click', clearItems);
+        return () => {
+            document.removeEventListener('click', clearItems);
+        };
+    }, [p.options]);
+    let listBorderRadius = '';
+    if (p.round || theme.controls.borderRadius) {
+        listBorderRadius = theme.controls.borderRadius || '0.5rem';
+    }
+    const onPickValue = (v) => {
+        p.onPick(v);
+        // wait for the re-render.  the value will not update if the control has focus
+        setTimeout(() => {
+            var _a;
+            (_a = input.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }, 0);
+    };
+    return (React__namespace.createElement("div", { onClick: e => {
+            e.stopPropagation();
+        }, onKeyDown: e => {
+            var _a;
+            if (e.key === 'Escape') {
+                // the TextInput will not respond to outer value changes if it has focus.
+                // here we clear first and then onPickValue will re-focus after all updates.
+                (_a = input.current) === null || _a === void 0 ? void 0 : _a.blur();
+                onPickValue(undefined);
+            }
+        }, ref: element, className: css.cx(css.css({
+            position: 'relative',
+            width: '100%',
+            label: 'Autocomplete'
+        }), p.className, 'autocomplete') },
+        React__namespace.createElement(TabLocker, { disabled: !displayOptions.length, style: { position: 'relative' } },
+            React__namespace.createElement(TextInput, Object.assign({}, inputProps, { showErrorDisplay: false, ref: input, value: p.value, className: p.inputClassName, wrapperClassName: p.inputWrapperClassName, onKeyDown: e => {
+                    var _a, _b, _c;
+                    if (displayOptions.length) {
+                        if (e.key === 'ArrowDown') {
                             e.preventDefault();
                             e.stopPropagation();
                             (_a = getNextTabElement(-1, 1)) === null || _a === void 0 ? void 0 : _a.focus();
@@ -985,8 +1050,8 @@ const Autocomplete = (p) => {
                         }
                     }
                     (_c = p.onKeyDown) === null || _c === void 0 ? void 0 : _c.call(p, e);
-                }, onKeyPress: e => { var _a; return (_a = p.onKeyPress) === null || _a === void 0 ? void 0 : _a.call(p, e); } }),
-            showValues && (React__namespace.createElement(List, { ref: list, className: css.cx(css.css({
+                } })),
+            !!displayOptions.length && (React__namespace.createElement(List, { ref: list, className: css.cx(css.css({
                     position: 'absolute',
                     width: '100%',
                     border: theme.controls.border,
@@ -1003,12 +1068,12 @@ const Autocomplete = (p) => {
                         borderBottomRightRadius: listBorderRadius,
                         borderBottomLeftRadius: listBorderRadius,
                     }
-                }), p.allowScroll && shownValues.length > maxShowValues && css.css({
+                }), p.allowScroll && displayOptions.length > maxShowValues && css.css({
                     overflowY: 'scroll',
                     maxHeight: `calc(${theme.controls.height} * ${maxShowValues})`
-                })) },
-                shownValues.map((value, listItemIndex) => {
-                    return (React__namespace.createElement(ListItem, { key: getAutocompleteValueId(value), variant: "full" },
+                }), p.listClassName) },
+                displayOptions.map((v, listItemIndex) => {
+                    return (React__namespace.createElement(ListItem, { key: v, variant: "full", className: p.listItemClassName },
                         React__namespace.createElement(Button, { onKeyDown: e => {
                                 var _a, _b;
                                 if (e.key === 'ArrowDown') {
@@ -1021,42 +1086,23 @@ const Autocomplete = (p) => {
                                     e.preventDefault();
                                     (_b = getNextTabElement(listItemIndex, -1)) === null || _b === void 0 ? void 0 : _b.focus();
                                 }
+                                else if (e.key === 'Enter') {
+                                    onPickValue(v);
+                                }
                             }, className: css.cx(buttonMarkerClass + listItemIndex, css.css({
                                 borderRadius: 0,
-                            })), onClick: () => {
-                                p.onPick(value);
-                                setValues([]);
-                                setTimeout(() => {
-                                    var _a;
-                                    // we need to wait until the component is re-rendered.
-                                    // outside changes to Inputs will be ignored if the component has focus.
-                                    (_a = input.current) === null || _a === void 0 ? void 0 : _a.focus();
-                                }, 0);
+                            }), p.listItemButtonClassName), onClick: () => {
+                                onPickValue(v);
                             } },
-                            React__namespace.createElement(Text, { tag: "div", ellipsis: true, align: "left" }, getAutocompleteValueText(value)))));
+                            React__namespace.createElement(Text, { tag: "div", ellipsis: true, align: "left" }, v))));
                 }),
-                !p.allowScroll && shownValues.length < values.length && (React__namespace.createElement(ListItem, null,
+                !p.allowScroll && displayOptions.length < p.options.length && (React__namespace.createElement(ListItem, { className: p.listItemClassName },
                     React__namespace.createElement(Text, { tag: "div", italics: true, align: "center" },
                         "Showing ",
-                        shownValues.length.toLocaleString(),
+                        displayOptions.length.toLocaleString(),
                         " of ",
-                        values.length.toLocaleString(),
+                        p.options.length.toLocaleString(),
                         " results."))))))));
-};
-const getAutocompleteValueText = (v) => {
-    if (!v) {
-        return '';
-    }
-    if (typeof v === 'string') {
-        return v;
-    }
-    return v.name;
-};
-const getAutocompleteValueId = (v) => {
-    if (typeof v === 'string') {
-        return v;
-    }
-    return v.id;
 };
 
 /** @deprecated Use Backdrop2 going forward. */
@@ -1160,266 +1206,31 @@ const Backdrop$1 = (props) => {
         }
         return () => {
             if (backdrop && backdrop.current && !props.allowScroll) {
-                document.body.classList.remove(bodyStyles);
-            }
-        };
-    }, [props.show]);
-    return (React__namespace.createElement("div", { onMouseDown: e => {
-            var _a;
-            e.stopPropagation();
-            e.preventDefault();
-            (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props);
-        }, onClick: e => {
-            e.stopPropagation();
-            e.preventDefault();
-        }, ref: backdrop, className: css.cx('backdrop', styles, props.className) }, props.children));
-};
-
-/** useEffect but it will only fire when the actual truthiness of the value changes.
- * Use for comparing previous states to next states without all the bullshit around useEffect and component mounting.
-*/
-const useBooleanChanged = (effect, dep) => {
-    /*
-        Why?
-        useEffect with a dependency array will fire once on mount even though the dependency list doesn't change.
-        Components like Modal need to communicate when their show status changes.
-        useIgnoreMount is not enough because it only ignores the first render and is therefore a kludge.
-        This is what we want regardless of mount status:
-        true > false = Change
-        false > true = Change
-        true > true = No Change
-        false > false = No Change
-        undefined > false = No Change
-        undefined > true = Change
-    */
-    const lastValue = React.useRef(undefined);
-    React.useEffect(() => {
-        //console.log('[useBooleanChanged] useEffect called with', dep, 'was', lastValue.current ?? 'undefined')
-        if (!!lastValue.current !== !!dep) {
-            const previous = lastValue.current;
-            lastValue.current = dep;
-            effect(!!lastValue.current, !!previous);
-            //console.log('[useBooleanChanged] change called')
-        }
-    }, [dep]);
-};
-
-const useLogger = (componentName, enabled) => {
-    return (...messages) => {
-        if (enabled) {
-            // tslint:disable-next-line
-            console.log(`[${componentName}]`, ...messages);
-        }
-    };
-};
-
-// Taken from: https://github.com/react-bootstrap/dom-helpers/blob/master/src/scrollbarSize.ts
-const canUseDom = !!(typeof window !== 'undefined' &&
-    window.document &&
-    window.document.createElement);
-let size;
-/** Tells you actual width of the scroll bar.  This can vary by browser. */
-const useScrollbarSize = (recalc) => {
-    if ((!size && size !== 0) || recalc) {
-        if (canUseDom) {
-            const scrollDiv = document.createElement('div');
-            scrollDiv.style.position = 'absolute';
-            scrollDiv.style.top = '-9999px';
-            scrollDiv.style.width = '50px';
-            scrollDiv.style.height = '50px';
-            scrollDiv.style.overflow = 'scroll';
-            document.body.appendChild(scrollDiv);
-            size = scrollDiv.offsetWidth - scrollDiv.clientWidth;
-            document.body.removeChild(scrollDiv);
-        }
-    }
-    return size;
-};
-
-/** Add to fixed positioned elements so their contents do not jump around when scrolling is disabled. */
-const modalScrollFixClassName = 'modal-scroll-fix';
-const Modal = (p) => {
-    var _a, _b, _c, _d;
-    const backdrop = React.useContext(BackdropContext);
-    const mouseDownElement = React.useRef(undefined);
-    const theme = useThemeSafely();
-    const hasHeader = p.closeButton || p.heading;
-    const contentRef = React__default['default'].useRef(null);
-    const log = useLogger((_a = p.id) !== null && _a !== void 0 ? _a : 'Modal', (_b = p.__debug) !== null && _b !== void 0 ? _b : false);
-    const showing = React.useRef(p.show);
-    const bodyStyles = React.useRef('');
-    const fixedElementStyles = React.useRef('');
-    const addScrollStyles = () => {
-        var _a, _b, _c, _d;
-        if (!bodyStyles.current) {
-            bodyStyles.current = css.css({
-                label: 'ModalBodyOverrides_' + ((_b = (_a = p.id) === null || _a === void 0 ? void 0 : _a.replace(/\s+/, '')) !== null && _b !== void 0 ? _b : nanoid.nanoid()),
-                overflow: 'hidden',
-                paddingRight: `${useScrollbarSize()}px`
-            });
-            log('creating singleton bodyStyles', bodyStyles.current);
-        }
-        if (!fixedElementStyles.current) {
-            fixedElementStyles.current = css.css({
-                label: 'ModalElementOverrides_' + ((_d = (_c = p.id) === null || _c === void 0 ? void 0 : _c.replace(/\s+/, '')) !== null && _d !== void 0 ? _d : nanoid.nanoid()),
-                paddingRight: `${useScrollbarSize()}px`
-            });
-        }
-        document.body.classList.add(bodyStyles.current);
-        Array.from(document.querySelectorAll(`.${modalScrollFixClassName}`)).forEach(e => {
-            e.classList.add(fixedElementStyles.current);
-        });
-    };
-    const tryRemoveScrollStyles = () => {
-        if (bodyStyles.current) {
-            log('removing singleton', bodyStyles.current);
-            document.body.classList.remove(bodyStyles.current);
-        }
-        if (fixedElementStyles.current) {
-            Array.from(document.querySelectorAll(`.${modalScrollFixClassName}`)).forEach(e => {
-                e.classList.remove(fixedElementStyles.current);
-            });
-        }
-    };
-    React.useEffect(() => {
-        log('mounted');
-        return () => {
-            var _a;
-            if (showing.current) {
-                log(`un-mount in progress and this modal is showing.  decrement the backdrop and try to remove singleton body styles.`);
-                backdrop.setShow(false, (_a = p.id) !== null && _a !== void 0 ? _a : 'Modal');
-                log('backdrop.setShow', false);
-                tryRemoveScrollStyles();
-            }
-            else {
-                log(`un-mount in progress but this modal is not showing.  do nothing with the backdrop.`);
-            }
-            log('un-mounted');
-        };
-    }, []);
-    useBooleanChanged((show, previousShow) => {
-        var _a;
-        log('show changed', `${previousShow !== null && previousShow !== void 0 ? previousShow : 'undefined'} > ${show}`);
-        backdrop.setShow(show, (_a = p.id) !== null && _a !== void 0 ? _a : 'Modal');
-        showing.current = show;
-        log('backdrop.setShow', show);
-        if (show) {
-            log('this modal is showing. adding singleton bodyStyles', bodyStyles.current);
-            addScrollStyles();
-        }
-        else {
-            log('this modal is hiding. try removing singleton bodyStyles');
-            tryRemoveScrollStyles();
-        }
-    }, p.show);
-    React__default['default'].useLayoutEffect(() => {
-        var _a;
-        if (p.show === true) {
-            const focusSelector = (_a = p.focusSelector) !== null && _a !== void 0 ? _a : '.modalCloseButton';
-            // still need to wait for the next tick so the children are all rendered.
-            setTimeout(() => {
-                var _a;
-                const element = (_a = contentRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(focusSelector);
-                element === null || element === void 0 ? void 0 : element.focus();
-                log('set focus', focusSelector);
-            });
-        }
-    }, [p.show]);
-    const modalBodyStyles = css.css({
-        maxHeight: p.scrollable ? undefined : '99vh',
-        overflow: 'hidden',
-        zIndex: theme.zIndexes.modal,
-        cursor: 'default',
-        margin: '1rem',
-        backgroundColor: p.noBackground ? undefined : theme.colors.modalBg,
-        border: p.noBackground ? undefined : theme.controls.border,
-        boxShadow: p.noBackground ? undefined : theme.controls.boxShadow,
-        maxWidth: (_c = p.maxWidth) !== null && _c !== void 0 ? _c : theme.breakpoints.tablet,
-        minWidth: (_d = p.minWidth) !== null && _d !== void 0 ? _d : (hasHeader ? '250px' : undefined),
-        opacity: p.show ? 1 : 0,
-        fontSize: theme.fonts.size,
-        fontFamily: theme.fonts.family,
-        fontWeight: 'normal',
-        '&:focus': {
-            outline: 'none'
-        }
-    });
-    const modalHeaderStyles = css.cx(css.css({
-        display: 'flex',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        backgroundColor: theme.colors.header,
-        padding: '1rem',
-        color: theme.colors.headerFont
-    }), p.headerClassName);
-    const modalContainerStyles = css.css([{
-            position: 'fixed',
-            height: '100%',
-            width: '100%',
-            backgroundColor: "transparent",
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            cursor: p.onClick ? 'pointer' : 'default'
-        }, p.scrollable && {
-            overflowY: 'auto',
-            overflowX: 'hidden',
-            alignItems: 'flex-start'
-        }]);
-    if (p.show) {
-        const backdropContainer = document.getElementById(backdrop.portalId);
-        if (backdropContainer) {
-            return reactDom.createPortal((React__default['default'].createElement("div", { onClick: e => {
-                    e.stopPropagation();
-                    if (!mouseDownElement.current) {
-                        if (p.onClick) {
-                            log('backdropContainer onClick');
-                            p.onClick();
-                        }
-                    }
-                    mouseDownElement.current = undefined;
-                }, className: css.cx('modalContainer', modalContainerStyles) },
-                React__default['default'].createElement("div", { id: p.id, ref: contentRef, onClick: e => e.stopPropagation(), onMouseDown: e => {
-                        mouseDownElement.current = e.target;
-                        e.stopPropagation();
-                    }, onMouseUp: e => {
-                        mouseDownElement.current = undefined;
-                        /*
-                            MouseDown and MouseUp stopPropagation was added to fix bugs while clicking within the modal.
-                            At least in the case of MouseUp, this breaks sliders and the handle grab logic appears to live on window.
-                            Turning this off now.  Should not cause any issues for MouseUp unlike MouseDown.
-                        */
-                        // e.stopPropagation()
-                    }, className: css.cx('modalBody', modalBodyStyles, p.className) },
-                    React__default['default'].createElement(TabLocker, null,
-                        hasHeader && (React__default['default'].createElement("header", { className: css.cx('modalHeader', modalHeaderStyles) },
-                            p.heading ? React__default['default'].createElement(Text, { className: css.css({
-                                    margin: 0,
-                                    flexGrow: 1
-                                }), tag: "h1", bold: true }, p.heading) : React__default['default'].createElement("span", null),
-                            p.closeButton && p.onClick ? React__default['default'].createElement(Button, { className: css.cx('modalCloseButton', css.css({
-                                    color: theme.colors.headerFont,
-                                    marginLeft: '1rem',
-                                    backgroundColor: 'transparent'
-                                })), variant: "icon", onClick: p.onClick },
-                                React__default['default'].createElement(Icon, { id: "close" })) : React__default['default'].createElement("span", null))),
-                        p.children)))), backdropContainer);
-        }
-    }
-    return null;
+                document.body.classList.remove(bodyStyles);
+            }
+        };
+    }, [props.show]);
+    return (React__namespace.createElement("div", { onMouseDown: e => {
+            var _a;
+            e.stopPropagation();
+            e.preventDefault();
+            (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props);
+        }, onClick: e => {
+            e.stopPropagation();
+            e.preventDefault();
+        }, ref: backdrop, className: css.cx('backdrop', styles, props.className) }, props.children));
 };
 
-/** useEffect but ignores the first call on component mount. */
-const useIgnoreMount = (effect, deps) => {
-    const mounted = React__default['default'].useRef(false);
-    React__default['default'].useEffect(() => {
-        if (!mounted.current) {
-            mounted.current = true;
-        }
-        else {
-            effect();
+/** Add to fixed positioned elements so their contents do not jump around when scrolling is disabled. */
+const modalScrollFixClassName = 'modal-scroll-fix';
+
+const useLogger = (componentName, enabled) => {
+    return (...messages) => {
+        if (enabled) {
+            // tslint:disable-next-line
+            console.log(`[${componentName}]`, ...messages);
         }
-    }, deps);
+    };
 };
 
 const portalId = 'backdrop';
@@ -1691,6 +1502,227 @@ const Checkbox = (props) => {
             props.children)));
 };
 
+/** useEffect but it will only fire when the actual truthiness of the value changes.
+ * Use for comparing previous states to next states without all the bullshit around useEffect and component mounting.
+*/
+const useBooleanChanged = (effect, dep) => {
+    /*
+        Why?
+        useEffect with a dependency array will fire once on mount even though the dependency list doesn't change.
+        Components like Modal need to communicate when their show status changes.
+        useIgnoreMount is not enough because it only ignores the first render and is therefore a kludge.
+        This is what we want regardless of mount status:
+        true > false = Change
+        false > true = Change
+        true > true = No Change
+        false > false = No Change
+        undefined > false = No Change
+        undefined > true = Change
+    */
+    const lastValue = React.useRef(undefined);
+    React.useEffect(() => {
+        if (!!lastValue.current !== !!dep) {
+            const previous = lastValue.current;
+            lastValue.current = dep;
+            effect(!!lastValue.current, !!previous);
+        }
+    }, [dep]);
+};
+
+// Taken from: https://github.com/react-bootstrap/dom-helpers/blob/master/src/scrollbarSize.ts
+const canUseDom = !!(typeof window !== 'undefined' &&
+    window.document &&
+    window.document.createElement);
+let size;
+/** Tells you actual width of the scroll bar.  This can vary by browser. */
+const useScrollbarSize = (recalc) => {
+    if ((!size && size !== 0) || recalc) {
+        if (canUseDom) {
+            const scrollDiv = document.createElement('div');
+            scrollDiv.style.position = 'absolute';
+            scrollDiv.style.top = '-9999px';
+            scrollDiv.style.width = '50px';
+            scrollDiv.style.height = '50px';
+            scrollDiv.style.overflow = 'scroll';
+            document.body.appendChild(scrollDiv);
+            size = scrollDiv.offsetWidth - scrollDiv.clientWidth;
+            document.body.removeChild(scrollDiv);
+        }
+    }
+    return size;
+};
+
+const Modal = (p) => {
+    var _a, _b, _c, _d;
+    const backdrop = React.useContext(BackdropContext);
+    const mouseDownElement = React.useRef(undefined);
+    const theme = useThemeSafely();
+    const hasHeader = p.closeButton || p.heading;
+    const contentRef = React__default['default'].useRef(null);
+    const log = useLogger((_a = p.id) !== null && _a !== void 0 ? _a : 'Modal', (_b = p.__debug) !== null && _b !== void 0 ? _b : false);
+    const showing = React.useRef(p.show);
+    const bodyStyles = React.useRef('');
+    const fixedElementStyles = React.useRef('');
+    const addScrollStyles = () => {
+        var _a, _b, _c, _d;
+        if (!bodyStyles.current) {
+            bodyStyles.current = css.css({
+                label: 'ModalBodyOverrides_' + ((_b = (_a = p.id) === null || _a === void 0 ? void 0 : _a.replace(/\s+/, '')) !== null && _b !== void 0 ? _b : nanoid.nanoid()),
+                overflow: 'hidden',
+                paddingRight: `${useScrollbarSize()}px`
+            });
+            log('creating singleton bodyStyles', bodyStyles.current);
+        }
+        if (!fixedElementStyles.current) {
+            fixedElementStyles.current = css.css({
+                label: 'ModalElementOverrides_' + ((_d = (_c = p.id) === null || _c === void 0 ? void 0 : _c.replace(/\s+/, '')) !== null && _d !== void 0 ? _d : nanoid.nanoid()),
+                paddingRight: `${useScrollbarSize()}px`
+            });
+        }
+        document.body.classList.add(bodyStyles.current);
+        Array.from(document.querySelectorAll(`.${modalScrollFixClassName}`)).forEach(e => {
+            e.classList.add(fixedElementStyles.current);
+        });
+    };
+    const tryRemoveScrollStyles = () => {
+        if (bodyStyles.current) {
+            log('removing singleton', bodyStyles.current);
+            document.body.classList.remove(bodyStyles.current);
+        }
+        if (fixedElementStyles.current) {
+            Array.from(document.querySelectorAll(`.${modalScrollFixClassName}`)).forEach(e => {
+                e.classList.remove(fixedElementStyles.current);
+            });
+        }
+    };
+    React.useEffect(() => {
+        log('mounted');
+        return () => {
+            var _a;
+            if (showing.current) {
+                log(`un-mount in progress and this modal is showing.  decrement the backdrop and try to remove singleton body styles.`);
+                backdrop.setShow(false, (_a = p.id) !== null && _a !== void 0 ? _a : 'Modal');
+                log('backdrop.setShow', false);
+                tryRemoveScrollStyles();
+            }
+            else {
+                log(`un-mount in progress but this modal is not showing.  do nothing with the backdrop.`);
+            }
+            log('un-mounted');
+        };
+    }, []);
+    useBooleanChanged((show, previousShow) => {
+        var _a;
+        log('show changed', `${previousShow !== null && previousShow !== void 0 ? previousShow : 'undefined'} > ${show}`);
+        backdrop.setShow(show, (_a = p.id) !== null && _a !== void 0 ? _a : 'Modal');
+        showing.current = show;
+        log('backdrop.setShow', show);
+        if (show) {
+            log('this modal is showing. adding singleton bodyStyles', bodyStyles.current);
+            addScrollStyles();
+        }
+        else {
+            log('this modal is hiding. try removing singleton bodyStyles');
+            tryRemoveScrollStyles();
+        }
+    }, p.show);
+    React__default['default'].useLayoutEffect(() => {
+        var _a;
+        if (p.show === true) {
+            const focusSelector = (_a = p.focusSelector) !== null && _a !== void 0 ? _a : '.modalCloseButton';
+            // still need to wait for the next tick so the children are all rendered.
+            setTimeout(() => {
+                var _a;
+                const element = (_a = contentRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(focusSelector);
+                element === null || element === void 0 ? void 0 : element.focus();
+                log('set focus', focusSelector);
+            });
+        }
+    }, [p.show]);
+    const modalBodyStyles = css.css({
+        maxHeight: p.scrollable ? undefined : '99vh',
+        overflow: 'hidden',
+        zIndex: theme.zIndexes.modal,
+        cursor: 'default',
+        margin: '1rem',
+        backgroundColor: p.noBackground ? undefined : theme.colors.modalBg,
+        border: p.noBackground ? undefined : theme.controls.border,
+        boxShadow: p.noBackground ? undefined : theme.controls.boxShadow,
+        maxWidth: (_c = p.maxWidth) !== null && _c !== void 0 ? _c : theme.breakpoints.tablet,
+        minWidth: (_d = p.minWidth) !== null && _d !== void 0 ? _d : (hasHeader ? '250px' : undefined),
+        opacity: p.show ? 1 : 0,
+        fontSize: theme.fonts.size,
+        fontFamily: theme.fonts.family,
+        fontWeight: 'normal',
+        '&:focus': {
+            outline: 'none'
+        }
+    });
+    const modalHeaderStyles = css.cx(css.css({
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        backgroundColor: theme.colors.header,
+        padding: '1rem',
+        color: theme.colors.headerFont
+    }), p.headerClassName);
+    const modalContainerStyles = css.css([{
+            position: 'fixed',
+            height: '100%',
+            width: '100%',
+            backgroundColor: "transparent",
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            cursor: p.onClick ? 'pointer' : 'default'
+        }, p.scrollable && {
+            overflowY: 'auto',
+            overflowX: 'hidden',
+            alignItems: 'flex-start'
+        }]);
+    if (p.show) {
+        const backdropContainer = document.getElementById(backdrop.portalId);
+        if (backdropContainer) {
+            return reactDom.createPortal((React__default['default'].createElement("div", { onClick: e => {
+                    e.stopPropagation();
+                    if (!mouseDownElement.current) {
+                        if (p.onClick) {
+                            log('backdropContainer onClick');
+                            p.onClick();
+                        }
+                    }
+                    mouseDownElement.current = undefined;
+                }, className: css.cx('modalContainer', modalContainerStyles) },
+                React__default['default'].createElement("div", { id: p.id, ref: contentRef, onClick: e => e.stopPropagation(), onMouseDown: e => {
+                        mouseDownElement.current = e.target;
+                        e.stopPropagation();
+                    }, onMouseUp: e => {
+                        mouseDownElement.current = undefined;
+                        /*
+                            MouseDown and MouseUp stopPropagation was added to fix bugs while clicking within the modal.
+                            At least in the case of MouseUp, this breaks sliders and the handle grab logic appears to live on window.
+                            Turning this off now.  Should not cause any issues for MouseUp unlike MouseDown.
+                        */
+                        // e.stopPropagation()
+                    }, className: css.cx('modalBody', modalBodyStyles, p.className) },
+                    React__default['default'].createElement(TabLocker, null,
+                        hasHeader && (React__default['default'].createElement("header", { className: css.cx('modalHeader', modalHeaderStyles) },
+                            p.heading ? React__default['default'].createElement(Text, { className: css.css({
+                                    margin: 0,
+                                    flexGrow: 1
+                                }), tag: "h1", bold: true }, p.heading) : React__default['default'].createElement("span", null),
+                            p.closeButton && p.onClick ? React__default['default'].createElement(Button, { className: css.cx('modalCloseButton', css.css({
+                                    color: theme.colors.headerFont,
+                                    marginLeft: '1rem',
+                                    backgroundColor: 'transparent'
+                                })), variant: "icon", onClick: p.onClick },
+                                React__default['default'].createElement(Icon, { id: "close" })) : React__default['default'].createElement("span", null))),
+                        p.children)))), backdropContainer);
+        }
+    }
+    return null;
+};
+
 const ConfirmModal = (props) => {
     const theme = useThemeSafely();
     const modalStyle = css.css `
@@ -1709,11 +1741,15 @@ const ConfirmModal = (props) => {
                 React__namespace.createElement(Button, { className: css.css({ margin: '0 0.5rem' }), enforceMinWidth: true, onClick: props.onCancel }, props.cancelText || 'Cancel')))));
 };
 
-const CopyButton = (props) => {
+const CopyButton = React__namespace.forwardRef((props, ref) => {
+    const buttonProps = __rest(props, ["selector"]);
     const [copied, setCopied] = React__namespace.useState(false);
-    return (React__namespace.createElement(Button, { title: copied ? 'Copied!' : (props.title || 'Copy to clipboard'), variant: "icon", onBlur: () => {
+    return (React__namespace.createElement(Button, Object.assign({}, buttonProps, { ref: ref, title: copied ? 'Copied!' : (props.title || 'Copy to clipboard'), variant: "icon", onBlur: e => {
+            var _a;
             setCopied(false);
+            (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
         }, onClick: e => {
+            var _a;
             const button = e.currentTarget;
             let copySuccess = false;
             try {
@@ -1727,9 +1763,10 @@ const CopyButton = (props) => {
                 // You done wrong. 
             }
             setCopied(copySuccess);
-        } },
+            (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
+        } }),
         React__namespace.createElement(Icon, { id: copied ? 'paste' : 'copy' })));
-};
+});
 
 const Divider = (p) => {
     const theme = useThemeSafely();
@@ -2172,343 +2209,126 @@ const Header = (props) => {
             React__namespace.createElement("div", null, props.centerOffsetElements)))));
 };
 
-const Highlight = (props) => {
-    const theme = useThemeSafely();
-    const highlightStyles = css.css `
-		> mark {
-			background-color: ${theme.colors.textHighlight};
-		}
-	`;
-    let text = props.text;
-    if (props.text && props.highlightText) {
-        const replaceText = props.highlightText.trim();
-        if (replaceText) {
-            text = props.text.replace(new RegExp(`(${replaceText})`, 'gi'), `<mark>$1</mark>`);
-        }
-    }
-    return (React__namespace.createElement("span", { className: css.cx('highlight', highlightStyles), dangerouslySetInnerHTML: { __html: text } }));
-};
-
-const Image = React__namespace.forwardRef((p, ref) => {
-    return (React__namespace.createElement("img", Object.assign({}, p, { ref: ref, className: css.cx('image', css.css({
-            label: 'Image',
-            maxWidth: '100%',
-            maxHeight: '100%',
-        }), p.className) })));
-});
-
-const Popover = (p) => {
-    var _a, _b;
-    const theme = useThemeSafely();
-    const resposition = (_a = p.reposition) !== null && _a !== void 0 ? _a : true;
-    return (React__namespace.createElement(reactTinyPopover.Popover, { containerClassName: css.css({
-            zIndex: theme.zIndexes.tooltip
-        }), reposition: resposition, isOpen: p.isOpen, positions: (_b = p.positions) !== null && _b !== void 0 ? _b : ['right', 'top', 'left', 'bottom'], onClickOutside: p.onClickOutside, content: ({ position, childRect, popoverRect }) => {
-            var _a, _b, _c, _d;
-            return (React__namespace.createElement(reactTinyPopover.ArrowContainer, { position: position, childRect: childRect, popoverRect: popoverRect, arrowColor: (_a = p.arrorColor) !== null && _a !== void 0 ? _a : theme.colors.border, arrowSize: 10 },
-                React__namespace.createElement(TabLocker, null,
-                    React__namespace.createElement("div", { className: css.css({
-                            border: (_b = p.border) !== null && _b !== void 0 ? _b : theme.controls.border,
-                            borderRadius: (_c = p.border) !== null && _c !== void 0 ? _c : theme.controls.borderRadius,
-                            boxShadow: theme.controls.boxShadow,
-                            backgroundColor: (_d = p.backgroundColor) !== null && _d !== void 0 ? _d : theme.colors.bg,
-                        }) }, p.content))));
-        } },
-        React__namespace.createElement("span", null, p.parent)));
-};
-
-const InfoTip = (props) => {
-    var _a, _b, _c;
-    const [showTip, setShowTip] = React__namespace.useState(false);
-    const theme = useThemeSafely();
-    const bgColor = (_a = props.bgColor) !== null && _a !== void 0 ? _a : theme.colors.nav;
-    const fontColor = (_b = props.fontColor) !== null && _b !== void 0 ? _b : theme.colors.navFont;
-    const onClick = () => {
-        if (props.onClick) {
-            props.onClick();
-        }
-        else if (props.content) {
-            openTip();
-        }
-    };
-    const onMouseOver = () => {
-        if (props.variant === 'modal') {
-            return;
-        }
-        if (props.loadOnHover) {
-            props.loadOnHover().then(() => {
-                openTip();
-            }).catch(err => {
-                /* Not my responsiblity. */
-            });
-        }
-        else {
-            openTip();
-        }
-    };
-    const onMouseOut = () => {
-        if (props.variant === 'modal') {
-            return;
-        }
-        closeTip();
-    };
-    const openTip = () => {
-        if (!props.content) {
-            return;
-        }
-        setShowTip(props.disabled ? false : true);
-    };
-    const closeTip = () => {
-        if (!props.content) {
-            return;
-        }
-        setShowTip(false);
-        if (props.onClose) {
-            props.onClose();
-        }
-    };
-    const buttonStyles = css.css `
-		font-weight: bold;
-		width: 1.5rem;
-		min-width:1.5rem;
-		height: 1.5rem;
-		padding: 0 !important;
-		font-family: serif;
-		display:inline-block;
-	`;
-    const button = React__namespace.createElement(Button, { className: buttonStyles, disabled: props.disabled, variant: 'circle', tabIndex: props.tabIndex, onClick: onClick, onMouseEnter: onMouseOver, onMouseLeave: onMouseOut }, "i");
-    if (props.variant === 'modal') {
-        return (React__namespace.createElement(React__namespace.Fragment, null,
-            button,
-            React__namespace.createElement(Modal, { id: props.modalId, __debug: props.__modalDebug, show: showTip, heading: props.modalHeader, onClick: closeTip, className: css.css({
-                    whiteSpace: 'normal'
-                }), closeButton: true },
-                React__namespace.createElement("div", { className: css.css({ padding: '1rem' }) }, props.content))));
-    }
-    else {
-        return (React__namespace.createElement(Popover, { positions: props.positions, reposition: (_c = props.reposition) !== null && _c !== void 0 ? _c : false, isOpen: showTip, onClickOutside: closeTip, arrorColor: bgColor, border: '', backgroundColor: bgColor, parent: button, content: (React__namespace.createElement("div", { className: css.css({
-                    padding: '0.5rem',
-                    fontSize: '0.75rem',
-                    maxWidth: '22rem'
-                }), style: { backgroundColor: bgColor, color: fontColor }, onMouseOut: closeTip }, props.content)) }));
-    }
-};
-
-const InputErrorDisplay = (props) => {
-    const theme = useThemeSafely();
-    return (React__namespace.createElement(Text, { className: css.css({
-            minHeight: theme.controls.inputErrorMinHeight,
-            lineHeight: theme.controls.inputErrorMinHeight,
-            color: theme.colors.negative
-        }), smaller: true, noPad: true }, props.error));
-};
-
-const defaultMaxLength$1 = 100;
-const BaseInput = React__namespace.forwardRef((props, ref) => {
-    var _a, _b;
-    const theme = useThemeSafely();
-    const { rightControl, round, wrapperClassName, showErrorDisplay } = props, nativeProps = __rest(props, ["rightControl", "round", "wrapperClassName", "showErrorDisplay"]);
-    const inputStyles = css.css({
-        backgroundColor: theme.colors.bg,
-        fontFamily: theme.fonts.family,
-        fontSize: theme.fonts.size,
-        width: '100%',
-        border: theme.controls.border,
-        borderRadius: theme.controls.borderRadius,
-        color: theme.colors.font,
-        paddingLeft: theme.controls.padding,
-        paddingRight: theme.controls.padding,
-        height: theme.controls.height,
-        transition: theme.controls.transition,
-        ':focus': {
-            outline: 'none',
-            boxShadow: theme.controls.focusOutlineShadow
-        },
-        ':disabled': {
-            backgroundColor: theme.colors.disabled,
-            cursor: 'not-allowed'
-        },
-        ':invalid': {
-            borderColor: theme.colors.required,
-            ':focus': {
-                boxShadow: theme.controls.focusOutlineRequiredShadow
-            }
-        },
-    }, props.round && {
-        borderRadius: theme.controls.roundRadius,
-        paddingLeft: `calc(${theme.controls.padding} * 2)`,
-        paddingRight: `calc(${theme.controls.padding} * 2)`
-    }, props.readOnly && {
-        backgroundColor: 'transparent',
-        cursor: 'default',
-        border: 'none',
-        ':focus': {
-            outline: 'none',
-            boxShadow: 'none'
-        },
-        // FF fix to hide spinner on number elements
-        appearance: props.type === 'number' ? 'none' : undefined,
-        '::-webkit-outer-spin-button': {
-            appearance: 'none'
-        },
-        '::-webkit-inner-spin-button': {
-            appearance: 'none'
-        }
-    }, props.rightControl && {
-        paddingRight: theme.controls.height
-    });
-    const inputElement = React__namespace.createElement("input", Object.assign({}, nativeProps, { ref: ref, autoComplete: (_a = nativeProps.autoComplete) !== null && _a !== void 0 ? _a : 'off', tabIndex: nativeProps.readOnly ? -1 : nativeProps.tabIndex, maxLength: nativeProps.maxLength || defaultMaxLength$1, className: css.cx(inputStyles, props.className) }));
-    const inputWrapperStyles = css.css `
-		width:100%;
-		${props.rightControl && `
-			position: relative;
-		`}
-	`;
-    const rightControlStyles = props.rightControl && css.css `
-		position: absolute;
-		right: ${theme.controls.padding};
-		top: 0;
-		bottom: 0;
-		display: flex;
-		align-items: center;
-		${props.round && `
-			right: calc(${theme.controls.padding} * 2);
-		`}
-	`;
-    return (React__namespace.createElement("div", { className: css.css({
-            width: '100%',
-            label: 'BaseInput'
-        }) },
-        React__namespace.createElement("div", { className: css.cx('input', inputWrapperStyles, wrapperClassName) },
-            inputElement,
-            props.rightControl && (React__namespace.createElement("div", { className: rightControlStyles }, props.rightControl))),
-        ((_b = props.showErrorDisplay) !== null && _b !== void 0 ? _b : true) && React__namespace.createElement(InputErrorDisplay, { error: props.readOnly ? undefined : props.error })));
-});
-
-const tryClampRange = (value, min, max) => {
-    if (value === undefined) {
-        return value;
-    }
-    if (isNaN(value)) {
-        return undefined;
-    }
-    if (min !== undefined && value < min) {
-        return min;
-    }
-    if (max !== undefined && value > max) {
-        return max;
-    }
-    return value;
-};
-const isOutOfRange = (value, min, max) => {
-    if (min !== undefined && value < min) {
-        return true;
-    }
-    if (max !== undefined && value > max) {
-        return true;
-    }
-    return false;
-};
-const getStepDecimalPlaces = (step) => {
-    var _a, _b;
-    if (!step) {
-        return 0;
-    }
-    const strStep = typeof step === 'number' ? step.toString() : step;
-    return (_b = (_a = strStep.split('.')[1]) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
-};
-const tryClampDecimals = (value, step = 0) => {
-    if (value === undefined) {
-        return value;
-    }
-    if (isNaN(value)) {
-        return undefined;
-    }
-    const decimals = getStepDecimalPlaces(step);
-    if (decimals === 0) {
-        return Math.floor(value);
+const Highlight = (props) => {
+    const theme = useThemeSafely();
+    const highlightStyles = css.css `
+		> mark {
+			background-color: ${theme.colors.textHighlight};
+		}
+	`;
+    let text = props.text;
+    if (props.text && props.highlightText) {
+        const replaceText = props.highlightText.trim();
+        if (replaceText) {
+            text = props.text.replace(new RegExp(`(${replaceText})`, 'gi'), `<mark>$1</mark>`);
+        }
     }
-    return parseFloat(value.toFixed(decimals));
+    return (React__namespace.createElement("span", { className: css.cx('highlight', highlightStyles), dangerouslySetInnerHTML: { __html: text } }));
 };
 
-/** Common state handling for displaying validation messages with inputs. */
-const useInputValidationMessage = (ref, props) => {
-    const [validationError, setValidationError] = React__default['default'].useState('');
-    const updateErrorMessage = (customErrorOverride) => {
-        var _a;
-        const customError = customErrorOverride || props.customError || '';
-        // set it OR clear it.  either way, update it.
-        (_a = ref.current) === null || _a === void 0 ? void 0 : _a.setCustomValidity(customError);
-        setValidationError(customError || getValidationMessage(ref.current, props.patternErrorMessage));
+const Image = React__namespace.forwardRef((p, ref) => {
+    return (React__namespace.createElement("img", Object.assign({}, p, { ref: ref, className: css.cx('image', css.css({
+            label: 'Image',
+            maxWidth: '100%',
+            maxHeight: '100%',
+        }), p.className) })));
+});
+
+const Popover = (p) => {
+    var _a, _b;
+    const theme = useThemeSafely();
+    const resposition = (_a = p.reposition) !== null && _a !== void 0 ? _a : true;
+    return (React__namespace.createElement(reactTinyPopover.Popover, { containerClassName: css.css({
+            zIndex: theme.zIndexes.tooltip
+        }), reposition: resposition, isOpen: p.isOpen, positions: (_b = p.positions) !== null && _b !== void 0 ? _b : ['right', 'top', 'left', 'bottom'], onClickOutside: p.onClickOutside, content: ({ position, childRect, popoverRect }) => {
+            var _a, _b, _c, _d;
+            return (React__namespace.createElement(reactTinyPopover.ArrowContainer, { position: position, childRect: childRect, popoverRect: popoverRect, arrowColor: (_a = p.arrorColor) !== null && _a !== void 0 ? _a : theme.colors.border, arrowSize: 10 },
+                React__namespace.createElement(TabLocker, null,
+                    React__namespace.createElement("div", { className: css.css({
+                            border: (_b = p.border) !== null && _b !== void 0 ? _b : theme.controls.border,
+                            borderRadius: (_c = p.border) !== null && _c !== void 0 ? _c : theme.controls.borderRadius,
+                            boxShadow: theme.controls.boxShadow,
+                            backgroundColor: (_d = p.backgroundColor) !== null && _d !== void 0 ? _d : theme.colors.bg,
+                        }) }, p.content))));
+        } },
+        React__namespace.createElement("span", null, p.parent)));
+};
+
+const InfoTip = (props) => {
+    var _a, _b, _c;
+    const [showTip, setShowTip] = React__namespace.useState(false);
+    const theme = useThemeSafely();
+    const bgColor = (_a = props.bgColor) !== null && _a !== void 0 ? _a : theme.colors.nav;
+    const fontColor = (_b = props.fontColor) !== null && _b !== void 0 ? _b : theme.colors.navFont;
+    const onClick = () => {
+        if (props.onClick) {
+            props.onClick();
+        }
+        else if (props.content) {
+            openTip();
+        }
     };
-    React.useEffect(() => {
-        updateErrorMessage();
-    }, [props.customError]);
-    React__default['default'].useEffect(() => {
-        updateErrorMessage();
-    }, []);
-    return [validationError, updateErrorMessage];
-};
-const getValidationMessage = (element, patternErrorMessage) => {
-    var _a;
-    if (!element) {
-        return '';
-    }
-    const validity = element.validity;
-    if (validity.valid) {
-        return '';
-    }
-    if (validity.customError) {
-        return element.validationMessage;
-    }
-    if (validity.typeMismatch) {
-        switch (element.type) {
-            case 'url':
-                return `Invalid URL.`;
-            case 'email':
-                return `Invalid email.`;
-            default:
-                return element.validationMessage;
+    const onMouseOver = () => {
+        if (props.variant === 'modal') {
+            return;
         }
-    }
-    if (element instanceof HTMLInputElement) {
-        if (validity.rangeOverflow) {
-            return `Must be less than or equal to ${element.max}.`;
+        if (props.loadOnHover) {
+            props.loadOnHover().then(() => {
+                openTip();
+            }).catch(err => {
+                /* Not my responsiblity. */
+            });
         }
-        if (validity.rangeUnderflow) {
-            return `Must be greater than or equal to ${element.min}.`;
+        else {
+            openTip();
         }
-        if (validity.stepMismatch) {
-            const decimalPlaces = getStepDecimalPlaces(element.step);
-            if (decimalPlaces > 0) {
-                const place = decimalPlaces === 1 ? 'place' : 'places';
-                return `Limited to ${getStepDecimalPlaces(element.step)} decimal ${place}.`;
-            }
-            else {
-                /*
-                    step is buggy!
-                    
-                    at least in Chrome, setting step=5 will cause the browser to mark the field as invalid if the number is not divisible
-                    by 5.  55 is ok.  50 is ok.  59 is not ok.
-                    
-                    to make things worse, if you enter an invalid number like 59 with step=5 and then clear the input, Chrome will tell
-                    you the number 5 is now invalid and should be 4 or 9.
-                */
-                return `Must be an integer.`;
-            }
+    };
+    const onMouseOut = () => {
+        if (props.variant === 'modal') {
+            return;
         }
+        closeTip();
+    };
+    const openTip = () => {
+        if (!props.content) {
+            return;
+        }
+        setShowTip(props.disabled ? false : true);
+    };
+    const closeTip = () => {
+        if (!props.content) {
+            return;
+        }
+        setShowTip(false);
+        if (props.onClose) {
+            props.onClose();
+        }
+    };
+    const buttonStyles = css.css `
+		font-weight: bold;
+		width: 1.5rem;
+		min-width:1.5rem;
+		height: 1.5rem;
+		padding: 0 !important;
+		font-family: serif;
+		display:inline-block;
+	`;
+    const button = React__namespace.createElement(Button, { className: buttonStyles, disabled: props.disabled, variant: 'circle', tabIndex: props.tabIndex, onClick: onClick, onMouseEnter: onMouseOver, onMouseLeave: onMouseOut }, "i");
+    if (props.variant === 'modal') {
+        return (React__namespace.createElement(React__namespace.Fragment, null,
+            button,
+            React__namespace.createElement(Modal, { id: props.modalId, __debug: props.__modalDebug, show: showTip, heading: props.modalHeader, onClick: closeTip, className: css.css({
+                    whiteSpace: 'normal'
+                }), closeButton: true },
+                React__namespace.createElement("div", { className: css.css({ padding: '1rem' }) }, props.content))));
     }
-    if (validity.tooShort) {
-        return `Must be at least ${((_a = element.minLength) !== null && _a !== void 0 ? _a : 0).toLocaleString()} characters in length.`;
-    }
-    if (validity.valueMissing) {
-        return 'Required.';
-    }
-    if (validity.patternMismatch && patternErrorMessage) {
-        return patternErrorMessage;
+    else {
+        return (React__namespace.createElement(Popover, { positions: props.positions, reposition: (_c = props.reposition) !== null && _c !== void 0 ? _c : false, isOpen: showTip, onClickOutside: closeTip, arrorColor: bgColor, border: '', backgroundColor: bgColor, parent: button, content: (React__namespace.createElement("div", { className: css.css({
+                    padding: '0.5rem',
+                    fontSize: '0.75rem',
+                    maxWidth: '22rem'
+                }), style: { backgroundColor: bgColor, color: fontColor }, onMouseOut: closeTip }, props.content)) }));
     }
-    // unhandled.  let the browser decide.
-    return element.validationMessage;
 };
 
 const dateRegex = /(\d{1,2})(?:\/|-)(\d{1,2})(?:\/|-)(\d{4})/;
@@ -2751,46 +2571,6 @@ const parseNumber = (rawValue) => {
     return value;
 };
 
-const TextInput = React__namespace.forwardRef((props, ref) => {
-    var _a;
-    const [localValue, setLocalValue] = React__namespace.useState(props.value);
-    const inputRef = (ref !== null && ref !== void 0 ? ref : React__namespace.useRef(null));
-    const [validationError, updateErrorMessage] = useInputValidationMessage(inputRef, props);
-    const nativeProps = __rest(props, ["emptyString", "onValueChange", "customError", "patternErrorMessage"]);
-    useIgnoreMount(() => {
-        var _a;
-        if ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.checkValidity()) {
-            props.onValueChange(localValue);
-        }
-        else {
-            props.onValueChange(undefined);
-        }
-        updateErrorMessage();
-    }, [localValue]);
-    useIgnoreMount(() => {
-        if (document.activeElement !== inputRef.current) {
-            setLocalValue(props.value);
-        }
-        updateErrorMessage();
-    }, [props.value]);
-    return (React__namespace.createElement(BaseInput, Object.assign({}, nativeProps, { error: validationError, type: (_a = props.type) !== null && _a !== void 0 ? _a : 'text', ref: inputRef, value: localValue !== null && localValue !== void 0 ? localValue : '', onChange: e => {
-            var _a;
-            setLocalValue(props.emptyString ? e.target.value : e.target.value || undefined);
-            (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, e);
-        }, onBlur: e => {
-            var _a, _b;
-            if (!e.target.checkValidity()) {
-                setLocalValue(undefined);
-            }
-            else if ((_a = props.trim) !== null && _a !== void 0 ? _a : true) {
-                setLocalValue(currentValue => {
-                    return currentValue === null || currentValue === void 0 ? void 0 : currentValue.trim();
-                });
-            }
-            (_b = props.onBlur) === null || _b === void 0 ? void 0 : _b.call(props, e);
-        } })));
-});
-
 const Label = (props) => {
     var _a, _b, _c;
     const labelProps = __rest(props, ["text", "static", "orientation", "align", "noWrap", "subText", "optional", "controlAlign"]);
@@ -4392,8 +4172,12 @@ const ToggleButtonGroup = (props) => {
 };
 
 const TogglePasswordInput = React__namespace.forwardRef((props, ref) => {
+    const { onVisibilityChanged } = props, inputProps = __rest(props, ["onVisibilityChanged"]);
     const [show, setShow] = React__namespace.useState(false);
-    return (React__namespace.createElement(TextInput, Object.assign({}, props, { ref: ref, type: show ? 'text' : 'password', rightControl: (React__namespace.createElement(Button, { small: true, style: {
+    useIgnoreMount(() => {
+        onVisibilityChanged === null || onVisibilityChanged === void 0 ? void 0 : onVisibilityChanged(show);
+    }, [show]);
+    return (React__namespace.createElement(TextInput, Object.assign({}, inputProps, { ref: ref, type: show ? 'text' : 'password', rightControl: (React__namespace.createElement(Button, { small: true, style: {
                 // small button is required here due to the icon pushing outside the boundries of the
                 // parent textbox.  increasing the font size here to fill the small button.
                 fontSize: '1rem'
@@ -4871,8 +4655,106 @@ const TabContainer = (p) => {
             }), p.contentClassName) }, p.tabs[tabIndex].getContent())));
 };
 
+const defaultMinChars = 3;
+/** Extracted logic around autocomplete functionality for Autocomplete.tsx. */
+class AutocompleteController {
+    constructor(getOptions, config) {
+        var _a;
+        this._value = undefined;
+        this._options = [];
+        this._minChars = (_a = config === null || config === void 0 ? void 0 : config.minChars) !== null && _a !== void 0 ? _a : defaultMinChars;
+        if (config === null || config === void 0 ? void 0 : config.debounceMs) {
+            this.getOptions = lodash.debounce(getOptions, config.debounceMs, {
+                leading: false,
+                trailing: true
+            });
+        }
+        else {
+            this.getOptions = getOptions;
+        }
+    }
+    get value() {
+        return this._value;
+    }
+    get options() {
+        return this._options;
+    }
+    async onChange(newValue) {
+        var _a;
+        // don't make getOptions calls if the value hasn't changed.
+        if (newValue === this.value) {
+            return;
+        }
+        // nullish should not make the getOptions call and instead clear everything.
+        if (!newValue) {
+            this._value = newValue;
+            this._options = [];
+            return;
+        }
+        // sub min chars should clear everything and not attempt the getOptions call.
+        if (newValue.length < this._minChars) {
+            this._value = newValue;
+            this._options = [];
+            return;
+        }
+        try {
+            this._value = newValue;
+            // debounce (if used) will return undefined until the actual function is executed.
+            // after that it will return the result of the last execution.
+            this._options = (_a = (await this.getOptions(newValue))) !== null && _a !== void 0 ? _a : [];
+        }
+        catch (err) {
+            // the getOptions method needs to handle it's own errors
+        }
+    }
+    onPick(newValue) {
+        this._value = newValue;
+        this._options = [];
+    }
+}
+
+/** Extracted logic around autocomplete functionality for Autocomplete.tsx that supports Entity (id/name) mapping. */
+class AutocompleteEntityController {
+    constructor(getOptions, config) {
+        this._options = [];
+        const getStringOptions = async (value) => {
+            this._options = await getOptions(value);
+            return this._options.map(o => o.name);
+        };
+        this._ctrl = new AutocompleteController(getStringOptions, config);
+    }
+    get entity() {
+        return this._pickedEntity;
+    }
+    get entities() {
+        return this._options;
+    }
+    get value() {
+        return this._ctrl.value;
+    }
+    get options() {
+        return this._options.map(o => o.name);
+    }
+    async onChange(newValue) {
+        await this._ctrl.onChange(newValue);
+        this.trySyncCtrlOptions();
+    }
+    onPick(newValue) {
+        this._ctrl.onPick(newValue);
+        this._pickedEntity = this._options.find(o => o.name === this._ctrl.value);
+        this.trySyncCtrlOptions();
+    }
+    trySyncCtrlOptions() {
+        if (!this._ctrl.options.length) {
+            this._options = [];
+        }
+    }
+}
+
 exports.Accordian = Accordian;
 exports.Autocomplete = Autocomplete;
+exports.AutocompleteController = AutocompleteController;
+exports.AutocompleteEntityController = AutocompleteEntityController;
 exports.Backdrop = Backdrop$1;
 exports.Backdrop2 = Backdrop;
 exports.BoundMemoryPager = BoundMemoryPager;
@@ -4897,7 +4779,6 @@ exports.Icon = Icon;
 exports.Image = Image;
 exports.InfoPanel = InfoPanel;
 exports.InfoTip = InfoTip;
-exports.Input = Input;
 exports.ItemPager = ItemPager;
 exports.Label = Label;
 exports.Link = Link;