expensify-common 2.0.181 → 2.0.183

package/dist/Templates.js

@@ -45,72 +45,46 @@ const Utils = __importStar(require("./utils"));
  * Templates is a global namespace for each template, HTML ones or inlines ones.
  *
  * @type Module
- * @constructor
+ * @class
  */
-exports.default = (function () {
-    const templateStore = {};
-    /**
-     * Class representing a registered template
-     */
-    class InlineTemplate {
-        /**
-         * Store a compiled template and id
-         *
-         * @param {String} templateValue
-         */
-        constructor(templateValue) {
-            this.templateValue = templateValue;
-            this.compiled = null;
-            this.get = this.get.bind(this);
-        }
-        /**
-         * Gets the compiled template using the provided data
-         *
-         * @param {Object} data
-         *
-         * @returns {String}
-         */
+const templateStore = {};
+/**
+ * @param {String} templateValue
+ * @returns {{get: function(Object=): String}}
+ */
+function createInlineTemplate(templateValue) {
+    let compiled = null;
+    let storedValue = templateValue;
+    return {
         get(data = {}) {
-            if (!this.compiled) {
-                this.compiled = (0, template_1.default)(this.templateValue, {
+            if (!compiled) {
+                compiled = (0, template_1.default)(storedValue, {
                     imports: {
                         // Here we ignore the eslint rule because _ is imported from OD which does not exist in this repo
                         // eslint-disable-next-line no-undef, object-shorthand
                         _: _,
                     },
                 });
-                this.templateValue = '';
+                storedValue = '';
             }
-            return this.compiled(data);
-        }
-    }
-    /**
-     * Class representing a template existing in the DOM
-     */
-    class DOMTemplate {
-        /**
-         * Store a compiled template and id
-         * @param {String} id
-         */
-        constructor(id) {
-            this.id = id;
-            this.compiled = null;
-            this.get = this.get.bind(this);
-        }
-        /**
-         * Gets the compiled template using the provided data
-         *
-         * @param {Object} data
-         *
-         * @returns {String}
-         */
+            return compiled(data);
+        },
+    };
+}
+/**
+ * @param {String} id
+ * @param {function} getNestedTemplate
+ * @returns {{get: function(Object=): String}}
+ */
+function createDOMTemplate(id, getNestedTemplate) {
+    let compiled = null;
+    return {
         get(data = {}) {
             // Add the "template" object to the parameter to allow nested templates
             const dataToCompile = Object.assign({}, data);
-            // eslint-disable-next-line no-undef
-            dataToCompile.nestedTemplate = Templates.get;
-            if (!this.compiled) {
-                this.compiled = (0, template_1.default)((0, jquery_1.default)(`#${this.id}`).html(), {
+            dataToCompile.nestedTemplate = getNestedTemplate;
+            if (!compiled) {
+                compiled = (0, template_1.default)((0, jquery_1.default)(`#${id}`).html(), {
                     imports: {
                         // Here we ignore the eslint rule because _ is imported from OD which does not exist in this repo
                         // eslint-disable-next-line no-undef, object-shorthand
@@ -118,143 +92,143 @@ exports.default = (function () {
                     },
                 });
             }
-            return this.compiled(dataToCompile);
+            return compiled(dataToCompile);
+        },
+    };
+}
+/**
+ * Returns the template
+ *
+ * @param {Array} templatePath
+ * @returns {InlineTemplate|undefined}
+ */
+function getTemplate(templatePath) {
+    let template = templateStore;
+    for (const pathname of templatePath) {
+        template = template[pathname];
+    }
+    return template;
+}
+/**
+ * Based on an array of string, return a reference to the object that should hold the template
+ * used to augment the template object
+ *
+ * @param {Array} wantedNamespace Array of string reprensenting the namespace
+ * @returns {Object} Referene to the object holding the namespace
+ */
+function getTemplateNamespace(wantedNamespace) {
+    let namespace = templateStore;
+    let currentArgument;
+    for (let argumentNumber = 0; argumentNumber < wantedNamespace.length; argumentNumber++) {
+        currentArgument = wantedNamespace[argumentNumber];
+        if (namespace[currentArgument] === undefined) {
+            namespace[currentArgument] = {};
         }
+        namespace = namespace[currentArgument];
     }
+    return namespace;
+}
+const Templates = {
     /**
-     * Returns the template
+     * Given a templatePath, return the value
      *
      * @param {Array} templatePath
-     * @return {InlineTemplate|undefined}
+     * @param {Object} [data] Information that need to be injected into the template
+     * @returns {String}
      */
-    function getTemplate(templatePath) {
-        let template = templateStore;
-        templatePath.forEach((pathname) => {
-            template = template[pathname];
-        });
-        return template;
-    }
+    get(templatePath, data = {}) {
+        const template = getTemplate(templatePath);
+        if (template === undefined) {
+            throw Error(`Template '${templatePath}' is not defined`);
+        }
+        // Check for the absense of get which means someone is likely using
+        // the templating engine wrong and trying to access a template namespace
+        if (!{}.propertyIsEnumerable.call(template, 'get')) {
+            throw Error(`'${templatePath}' is not a valid template path`);
+        }
+        return template.get(data);
+    },
     /**
-     * Based on an array of string, return a reference to the object that should hold the template
-     * used to augment the template object
-     *
-     * @param {Array} wantedNamespace Array of string reprensenting the namespace
-     * @return {Object} Referene to the object holding the namespace
+     * Given a templatePath, does it have a registered template?
+     * @param  {Array} templatePath
+     * @returns {Boolean}
      */
-    function getTemplateNamespace(wantedNamespace) {
-        let namespace = templateStore;
-        let currentArgument;
-        for (let argumentNumber = 0; argumentNumber < wantedNamespace.length; argumentNumber++) {
-            currentArgument = wantedNamespace[argumentNumber];
-            if (namespace[currentArgument] === undefined) {
-                namespace[currentArgument] = {};
-            }
-            namespace = namespace[currentArgument];
+    has(templatePath) {
+        return getTemplate(templatePath) !== undefined;
+    },
+    /**
+     * Inits the templating engine, and slurps all DOM templates in an internal data structure
+     */
+    init() {
+        // Read the DOM to find all the templates, and make them available to the code
+        for (const $el of (0, jquery_1.default)('.js_template').toArray()) {
+            const namespaceElements = $el.id.split('_');
+            const id = namespaceElements.pop();
+            // remove the prefix "template" that MUST be added to have clean HTML ids
+            namespaceElements.shift();
+            const namespace = getTemplateNamespace(namespaceElements);
+            namespace[id] = createDOMTemplate($el.id, Templates.get);
         }
-        return namespace;
-    }
-    return {
-        /**
-         * Given a templatePath, return the value
-         *
-         * @param {Array} templatePath
-         * @param {Object} [data] Information that need to be injected into the template
-         * @return {String}
-         */
-        get(templatePath, data = {}) {
-            const template = getTemplate(templatePath);
-            if (template === undefined) {
-                throw Error(`Template '${templatePath}' is not defined`);
+    },
+    /**
+     * Register a new json object in the template manager
+     *
+     * @param {Array} wantedNamespace Namespace where we want to store the templates
+     * @param {object} templateData The literal object that contain the templates
+     */
+    register(wantedNamespace, templateData) {
+        const namespace = getTemplateNamespace(wantedNamespace);
+        for (const key of Object.keys(templateData)) {
+            const template = templateData[key];
+            if (Utils.isObject(template)) {
+                // If the template is an object, add templates for all keys
+                namespace[key] = {};
+                for (const templateKey of Object.keys(template)) {
+                    namespace[key][templateKey] = createInlineTemplate(template[templateKey]);
+                }
             }
-            // Check for the absense of get which means someone is likely using
-            // the templating engine wrong and trying to access a template namespace
-            if (!{}.propertyIsEnumerable.call(template, 'get')) {
-                throw Error(`'${templatePath}' is not a valid template path`);
+            else {
+                namespace[key] = createInlineTemplate(template);
             }
-            return template.get(data);
-        },
-        /**
-         * Given a templatePath, does it have a registered template?
-         * @param  {Array} templatePath
-         * @return {Boolean}
-         */
-        has(templatePath) {
-            return getTemplate(templatePath) !== undefined;
-        },
-        /**
-         * Inits the templating engine, and slurps all DOM templates in an internal data structure
-         */
-        init() {
-            // Read the DOM to find all the templates, and make them available to the code
-            // eslint-disable-next-line rulesdir/prefer-underscore-method
-            (0, jquery_1.default)('.js_template').each((__, $el) => {
-                const namespaceElements = $el.id.split('_');
-                const id = namespaceElements.pop();
-                // remove the prefix "template" that MUST be added to have clean HTML ids
-                namespaceElements.shift();
-                const namespace = getTemplateNamespace(namespaceElements);
-                namespace[id] = new DOMTemplate($el.id);
-            });
-        },
-        /**
-         * Register a new json object in the template manager
-         *
-         * @param {Array} wantedNamespace Namespace where we want to store the templates
-         * @param {object} templateData The literal object that contain the templates
-         */
-        register(wantedNamespace, templateData) {
-            const namespace = getTemplateNamespace(wantedNamespace);
-            Object.keys(templateData).forEach((key) => {
-                const template = templateData[key];
-                if (Utils.isObject(template)) {
-                    // If the template is an object, add templates for all keys
-                    namespace[key] = {};
-                    Object.keys(template).forEach((templateKey) => {
-                        namespace[key][templateKey] = new InlineTemplate(template[templateKey]);
-                    });
-                }
-                else {
-                    namespace[key] = new InlineTemplate(template);
-                }
-            });
-        },
-        /**
-         * Removes a namespace from the templateStore (only used for testing purposes)
-         *
-         * @param {String} nameSpace
-         */
-        unregister(nameSpace) {
-            delete templateStore[nameSpace];
-        },
-        /**
-         * Replace the DOM HTML with the template value
-         *
-         * @param {jQuery} $target Element(s) that will be updated
-         * @param {Array} templatePath
-         * @param {Object} [data] Information that need to be injected into the template
-         */
-        insert($target, templatePath, data = {}) {
-            $target.html(this.get(templatePath, data));
-        },
-        /**
-         * Append the template value into a DOM elements
-         *
-         * @param {jQuery} $target Element(s) that will be updated
-         * @param {Array} templatePath
-         * @param {Object} data Information that need to be injected into the template
-         */
-        prepend($target, templatePath, data) {
-            $target.prepend(this.get(templatePath, data));
-        },
-        /**
-         * Prepend the template value into a DOM elements
-         *
-         * @param {jQuery} $target Element(s) that will be updated
-         * @param {array} templatePath
-         * @param {object} [data] Information that need to be injected into the template
-         */
-        append($target, templatePath, data) {
-            $target.append(this.get(templatePath, data));
-        },
-    };
-})();
+        }
+    },
+    /**
+     * Removes a namespace from the templateStore (only used for testing purposes)
+     *
+     * @param {String} nameSpace
+     */
+    unregister(nameSpace) {
+        delete templateStore[nameSpace];
+    },
+    /**
+     * Replace the DOM HTML with the template value
+     *
+     * @param {jQuery} $target Element(s) that will be updated
+     * @param {Array} templatePath
+     * @param {Object} [data] Information that need to be injected into the template
+     */
+    insert($target, templatePath, data = {}) {
+        $target.html(this.get(templatePath, data));
+    },
+    /**
+     * Append the template value into a DOM elements
+     *
+     * @param {jQuery} $target Element(s) that will be updated
+     * @param {Array} templatePath
+     * @param {Object} data Information that need to be injected into the template
+     */
+    prepend($target, templatePath, data) {
+        $target.prepend(this.get(templatePath, data));
+    },
+    /**
+     * Prepend the template value into a DOM elements
+     *
+     * @param {jQuery} $target Element(s) that will be updated
+     * @param {array} templatePath
+     * @param {object} [data] Information that need to be injected into the template
+     */
+    append($target, templatePath, data) {
+        $target.append(this.get(templatePath, data));
+    },
+};
+exports.default = Templates;

package/dist/components/StepProgressBar.d.ts

@@ -2,12 +2,16 @@ export default StepProgressBar;
 /**
  * Step progress bar.
  *
- * @param {array} steps of {id, title}
- * @param {string} currentStep id
+ * @param {object} props Component props
+ * @param {array} props.steps Array of {id, title}
+ * @param {string} props.currentStep Current step id
  *
- * @return {React.Component}
+ * @returns {React.Component}
  */
-declare function StepProgressBar({ steps, currentStep }: array): React.Component;
+declare function StepProgressBar({ steps, currentStep }: {
+    steps: array;
+    currentStep: string;
+}): React.Component;
 declare namespace StepProgressBar {
     export { propTypes };
 }

package/dist/components/StepProgressBar.js

@@ -51,10 +51,11 @@ const propTypes = {
 /**
  * Step progress bar.
  *
- * @param {array} steps of {id, title}
- * @param {string} currentStep id
+ * @param {object} props Component props
+ * @param {array} props.steps Array of {id, title}
+ * @param {string} props.currentStep Current step id
  *
- * @return {React.Component}
+ * @returns {React.Component}
  */
 function StepProgressBar({ steps, currentStep }) {
     const isCurrentStep = (step) => step.id === currentStep;

package/dist/components/form/element/combobox.d.ts

@@ -23,7 +23,7 @@ declare class Combobox extends React.Component<any, any, any> {
     /**
      * Returns the selected value(s)
      *
-     * @return {String}
+     * @returns {String}
      */
     getValue(): string;
     /**
@@ -106,13 +106,6 @@ declare class Combobox extends React.Component<any, any, any> {
      * @param {SyntheticEvent} e
      */
     closeDropdownOnTabOut(e: SyntheticEvent): void;
-    /**
-     * Stops events from doing anything outside of the current function (in theory).
-     * This doesn't work between jquery and React events because React's event propagation is a separate system.
-     *
-     * @param {SyntheticEvent} e
-     */
-    stopEvent(e: SyntheticEvent): void;
     /**
      * This is triggered whenever there is a key up event in the text input
      *

package/dist/components/form/element/combobox.js

@@ -41,6 +41,7 @@ const react_dom_1 = __importDefault(require("react-dom"));
 const prop_types_1 = __importDefault(require("prop-types"));
 const classnames_1 = __importDefault(require("classnames"));
 const defer_1 = __importDefault(require("lodash/defer"));
+const get_1 = __importDefault(require("lodash/get"));
 const has_1 = __importDefault(require("lodash/has"));
 const isEqual_1 = __importDefault(require("lodash/isEqual"));
 const template_1 = __importDefault(require("lodash/template"));
@@ -48,6 +49,22 @@ const uniqBy_1 = __importDefault(require("lodash/uniqBy"));
 const str_1 = __importDefault(require("../../../str"));
 const dropdown_1 = __importDefault(require("./dropdown"));
 const Utils = __importStar(require("../../../utils"));
+/**
+ * Stops events from doing anything outside of the current function (in theory).
+ * This doesn't work between jquery and React events because React's event propagation is a separate system.
+ *
+ * @param {SyntheticEvent} e
+ */
+function stopEvent(e) {
+    e.preventDefault();
+    if (e.nativeEvent) {
+        e.nativeEvent.stopImmediatePropagation();
+    }
+    else {
+        e.stopImmediatePropagation();
+    }
+    e.stopPropagation();
+}
 const propTypes = {
     // These are the elements to show in the dropdown
     options: prop_types_1.default.arrayOf(prop_types_1.default.shape({
@@ -152,7 +169,6 @@ const defaultProps = {
 /**
  * A combobox useful for searching for values in a large list
  */
-// eslint-disable-next-line react/no-unsafe
 class Combobox extends react_1.default.Component {
     constructor(props) {
         super(props);
@@ -175,7 +191,6 @@ class Combobox extends react_1.default.Component {
         this.openDropdown = this.openDropdown.bind(this);
         this.closeDropdown = this.closeDropdown.bind(this);
         this.closeDropdownOnTabOut = this.closeDropdownOnTabOut.bind(this);
-        this.stopEvent = this.stopEvent.bind(this);
         this.handleKeyDown = this.handleKeyDown.bind(this);
         this.performSearch = this.performSearch.bind(this);
         this.handleClick = this.handleClick.bind(this);
@@ -352,7 +367,7 @@ class Combobox extends react_1.default.Component {
                 }
                 this.switchFocusedIndex(oldFocusedIndex, newFocusedIndex);
                 this.setState(updateStateDownKey, this.resetClickAwayHandler);
-                this.stopEvent(e);
+                stopEvent(e);
                 break;
             case 38:
                 // Up - move focused selection up
@@ -364,7 +379,7 @@ class Combobox extends react_1.default.Component {
                 }
                 this.switchFocusedIndex(oldFocusedIndex, newFocusedIndex);
                 this.setState(updateStateUpKey, this.resetClickAwayHandler);
-                this.stopEvent(e);
+                stopEvent(e);
                 break;
             case 13: {
                 // Enter - set selection
@@ -384,7 +399,7 @@ class Combobox extends react_1.default.Component {
                     currentText = currentValue;
                 }
                 this.setState(updateStateEnterKey, resetStateEnterKey);
-                this.stopEvent(e);
+                stopEvent(e);
                 break;
             }
             case 9:
@@ -395,7 +410,7 @@ class Combobox extends react_1.default.Component {
                 this.props.onChange(this.initialValue || this.props.value || this.props.defaultValue);
                 // Stop the event from propagating if the escape key is pressed
                 if (e.which === 27) {
-                    this.stopEvent(e);
+                    stopEvent(e);
                 }
                 break;
             default:
@@ -455,16 +470,14 @@ class Combobox extends react_1.default.Component {
             return o.isSelected && this.props.alwaysShowSelectedOnTop ? 0 : 1;
         };
         // Take each array and format it, sort it, and move selected items to top (if applicable)
-        const formatOptions = (array, arrayStartIndex) => {
-            return array
-                .map((option, index) => formatOption(option, arrayStartIndex + index))
-                .sort((a, b) => {
-                const sortDiff = sortByOption(a) - sortByOption(b);
-                // If sort priority is the same, preserve original order using originalIndex
-                return sortDiff !== 0 ? sortDiff : a.originalIndex - b.originalIndex;
-            })
-                .slice(0, this.props.maxItemsToShow);
-        };
+        const formatOptions = (array, arrayStartIndex) => array
+            .map((option, index) => formatOption(option, arrayStartIndex + index))
+            .sort((a, b) => {
+            const sortDiff = sortByOption(a) - sortByOption(b);
+            // If sort priority is the same, preserve original order using originalIndex
+            return sortDiff !== 0 ? sortDiff : a.originalIndex - b.originalIndex;
+        })
+            .slice(0, this.props.maxItemsToShow);
         let cumulativeIndex = 0;
         const truncatedOptions = splitOptions
             .map((array) => {
@@ -496,7 +509,7 @@ class Combobox extends react_1.default.Component {
     /**
      * Returns the selected value(s)
      *
-     * @return {String}
+     * @returns {String}
      */
     getValue() {
         return this.state.currentValue;
@@ -510,7 +523,7 @@ class Combobox extends react_1.default.Component {
         // We need to look in `this.options` for the matching option because `this.state.options` is a truncated list
         // and might not have every option
         const optionMatchingVal = this.options.find((option) => option.value === val);
-        const currentText = (optionMatchingVal === null || optionMatchingVal === void 0 ? void 0 : optionMatchingVal.text) || '';
+        const currentText = (0, get_1.default)(optionMatchingVal, 'text', '');
         const deselectOption = (initialOption) => {
             const option = initialOption;
             const isSelected = (0, isEqual_1.default)(option.value, val);
@@ -711,22 +724,6 @@ class Combobox extends react_1.default.Component {
         }
         this.handleClick(this.state.currentValue);
     }
-    /**
-     * Stops events from doing anything outside of the current function (in theory).
-     * This doesn't work between jquery and React events because React's event propagation is a separate system.
-     *
-     * @param {SyntheticEvent} e
-     */
-    stopEvent(e) {
-        e.preventDefault();
-        if (e.nativeEvent) {
-            e.nativeEvent.stopImmediatePropagation();
-        }
-        else {
-            e.stopImmediatePropagation();
-        }
-        e.stopPropagation();
-    }
     /**
      * This is triggered whenever there is a change event in the text input
      * (from any valid input that's not being handled from the keyUp event)
@@ -763,7 +760,7 @@ class Combobox extends react_1.default.Component {
                 for (let j = 0; j < searchOptions.length; j++) {
                     const option = searchOptions[j];
                     const isDisabled = option.disabled;
-                    const isMatch = matchRegexes[i].test(option.text.toString().replace(/&nbsp;/g, ''));
+                    const isMatch = matchRegexes[i].test(option.text.toString().replaceAll('&nbsp;', ''));
                     // Don't include the disabled options that match the regex unless we specified we want them to show.
                     // If we want them to show then add them whether they match the regex or not.
                     if ((!isDisabled && isMatch) || (isDisabled && this.props.showDisabledOptionsInResults && isMatch)) {
@@ -837,12 +834,15 @@ class Combobox extends react_1.default.Component {
         };
         const toggleBtnClasses = this.props.bs4 ? 'dropdown-toggle dropdown-toggle-split btn btn-outline-primary' : 'dropdown-toggle btn btn-default';
         return (react_1.default.createElement("div", { className: (0, classnames_1.default)(inputGroupClasses, this.props.extraClasses), onKeyDown: this.handleKeyDown, role: "presentation" },
-            react_1.default.createElement("input", { ref: (ref) => (this.value = ref), type: "text", className: (0, classnames_1.default)(['form-control', { error: this.state.hasError }]), disabled: this.state.isDisabled, "aria-label": "...", onChange: this.performSearch, onKeyDown: this.closeDropdownOnTabOut, value: this.props.propertyToDisplay === 'value' ? Utils.unescapeText(this.state.currentValue) : Utils.unescapeText(this.state.currentText.replace(/&nbsp;/g, '')), onFocus: this.openDropdown, autoComplete: "off", placeholder: this.props.placeholder, tabIndex: "0" }),
+            react_1.default.createElement("input", { ref: (ref) => (this.value = ref), type: "text", className: (0, classnames_1.default)(['form-control', { error: this.state.hasError }]), disabled: this.state.isDisabled, "aria-label": "...", onChange: this.performSearch, onKeyDown: this.closeDropdownOnTabOut, value: this.props.propertyToDisplay === 'value' ? Utils.unescapeText(this.state.currentValue) : Utils.unescapeText(this.state.currentText.replaceAll('&nbsp;', '')), onFocus: this.openDropdown, autoComplete: "off", placeholder: this.props.placeholder, tabIndex: "0" }),
             react_1.default.createElement("div", { className: (0, classnames_1.default)(inputGroupBtnClasses) },
                 react_1.default.createElement("button", { type: "button", className: (0, classnames_1.default)(toggleBtnClasses, { error: this.state.hasError }), disabled: this.state.isDisabled, onClick: this.toggleDropdown, onKeyDown: this.closeDropdownOnTabOut, tabIndex: "-1" },
                     !this.props.bs4 && react_1.default.createElement("span", { className: "caret" }),
                     react_1.default.createElement("span", { className: "sr-only" }, "Toggle Dropdown")),
-                this.state.isDropdownOpen && (react_1.default.createElement(dropdown_1.default, { ref: (ref) => (this.dropDown = ref), options: this.state.options, bs4: this.props.bs4, extraClasses: (0, classnames_1.default)({ 'expensify-dropdown': true, show: this.props.bs4 && this.state.isDropdownOpen }, this.props.dropDownClasses), onChange: this.handleClick })))));
+                this.state.isDropdownOpen && (react_1.default.createElement(dropdown_1.default, { ref: (ref) => (this.dropDown = ref), options: this.state.options, bs4: this.props.bs4, extraClasses: (0, classnames_1.default)({
+                        'expensify-dropdown': true,
+                        show: this.props.bs4 && this.state.isDropdownOpen,
+                    }, this.props.dropDownClasses), onChange: this.handleClick })))));
     }
 }
 Combobox.propTypes = propTypes;

package/dist/components/form/element/switch.d.ts

@@ -10,7 +10,7 @@ declare class Switch extends React.Component<any, any, any> {
      * then we need to open a confirm modal with those settings
      *
      * @param {SyntheticEvent} e
-     * @return {Boolean}
+     * @returns {Boolean}
      */
     showConfirm(e: SyntheticEvent): boolean;
     checkbox: HTMLInputElement | null;
@@ -19,7 +19,7 @@ declare class Switch extends React.Component<any, any, any> {
     /**
      * Gets the value of the field
      *
-     * @return {boolean}
+     * @returns {boolean}
      */
     getValue(): boolean;
     render(): React.JSX.Element;