@servicetitan/design-system 10.8.0 → 11.2.0

package/dist/components/AnvilSelect/AnvilSelect.js

@@ -1,30 +1,3 @@
-"use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -36,217 +9,196 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AnvilSelect = exports.AnvilSelectWrapped = exports.AnvilSelectSB = void 0;
-var react_1 = __importDefault(require("react"));
-var classnames_1 = __importDefault(require("classnames"));
-var Popover_1 = require("../Popover");
-var OptionList_1 = require("../OptionList");
-var BodyText_1 = require("../BodyText");
-var Spinner_1 = require("../Spinner");
-var Stack_1 = require("../Stack");
-var components_1 = require("./components");
-var utils_1 = require("./utils");
-var keyCodes_1 = require("../../utilities/keyCodes");
+import React from 'react';
+import classnames from 'classnames';
+import { Popover } from '../Popover';
+import { OptionList } from '../OptionList';
+import { BodyText } from '../BodyText';
+import { Spinner } from '../Spinner';
+import { Stack } from '../Stack';
+import { AnvilSelectFooter, AnvilSelectHeader, SelectDrillInHeader, SelectDrillInFooter, SelectDrillInContent, Trigger, FocusProvider, } from './components';
+import { FocusActionType, FocusContext, getInitialState, doesHeaderExist, doesFooterExist, getNextOption, focusFirstOption, getPreviousOption, focusLastOption, } from './utils';
+import { keys } from '../../utilities/keyCodes';
 // This is only used for Storybook to populate proptable
-var AnvilSelectSB = function (props) {
-    return react_1.default.createElement(exports.AnvilSelect, __assign({}, props));
+export const AnvilSelectSB = (props) => {
+    return React.createElement(AnvilSelect, Object.assign({}, props));
 };
-exports.AnvilSelectSB = AnvilSelectSB;
-var AnvilSelectWrapped = /** @class */ (function (_super) {
-    __extends(AnvilSelectWrapped, _super);
-    function AnvilSelectWrapped(props) {
-        var _this = _super.call(this, props) || this;
-        _this.handleKeyDown = function (e, option) {
+export class AnvilSelectWrapped extends React.Component {
+    constructor(props) {
+        super(props);
+        this.handleKeyDown = (e, option) => {
             var _a;
-            var handledKeys = new Set([
-                keyCodes_1.keys.esc,
-                keyCodes_1.keys.down,
-                keyCodes_1.keys.up,
-                keyCodes_1.keys.enter,
-                keyCodes_1.keys.space,
+            const handledKeys = new Set([
+                keys.esc,
+                keys.down,
+                keys.up,
+                keys.enter,
+                keys.space,
             ]);
             if (handledKeys.has(e.key)) {
                 e.preventDefault();
             }
-            if (e.key === keyCodes_1.keys.esc) {
-                _this.toggleOpenState();
+            if (e.key === keys.esc) {
+                this.toggleOpenState();
                 return;
             }
-            if (e.key === keyCodes_1.keys.tab && !e.shiftKey) {
-                var footer = (0, utils_1.doesFooterExist)(e.target);
+            if (e.key === keys.tab && !e.shiftKey) {
+                const footer = doesFooterExist(e.target);
                 if (!footer) {
                     e.preventDefault();
-                    _this.toggleOpenState();
+                    this.toggleOpenState();
                     return;
                 }
             }
-            if (e.key === keyCodes_1.keys.tab && e.shiftKey) {
-                var header = (0, utils_1.doesHeaderExist)(e.target);
+            if (e.key === keys.tab && e.shiftKey) {
+                const header = doesHeaderExist(e.target);
                 if (!header) {
                     e.preventDefault();
-                    _this.toggleOpenState();
+                    this.toggleOpenState();
                     return;
                 }
             }
-            if (e.key === keyCodes_1.keys.down) {
-                var nextOption = (0, utils_1.getNextOption)(e.currentTarget);
+            if (e.key === keys.down) {
+                const nextOption = getNextOption(e.currentTarget);
                 if (!nextOption) {
-                    (0, utils_1.focusFirstOption)(e.currentTarget);
+                    focusFirstOption(e.currentTarget);
                 }
                 else {
                     nextOption.focus();
                 }
                 return;
             }
-            if (e.key === keyCodes_1.keys.up) {
-                var previousOption = (0, utils_1.getPreviousOption)(e.currentTarget);
+            if (e.key === keys.up) {
+                const previousOption = getPreviousOption(e.currentTarget);
                 if (!previousOption) {
-                    (0, utils_1.focusLastOption)(e.currentTarget);
+                    focusLastOption(e.currentTarget);
                 }
                 else {
                     previousOption.focus();
                 }
                 return;
             }
-            if (e.key === keyCodes_1.keys.enter || e.key === keyCodes_1.keys.space) {
-                if (_this.props.multiple) {
-                    var shouldCheck = !_this.state.checkboxState.some(function (checkbox) { return checkbox.value === option.value; });
-                    var childObject = (_a = option === null || option === void 0 ? void 0 : option.options) !== null && _a !== void 0 ? _a : [];
-                    _this.onCheckboxChange(option, shouldCheck, childObject, option);
-                    _this.context.focusDispatch({
-                        type: utils_1.FocusActionType.SetFocus,
+            if (e.key === keys.enter || e.key === keys.space) {
+                if (this.props.multiple) {
+                    const shouldCheck = !this.state.checkboxState.some((checkbox) => checkbox.value === option.value);
+                    const childObject = (_a = option === null || option === void 0 ? void 0 : option.options) !== null && _a !== void 0 ? _a : [];
+                    this.onCheckboxChange(option, shouldCheck, childObject, option);
+                    this.context.focusDispatch({
+                        type: FocusActionType.SetFocus,
                         payload: { optionFocus: option },
                     });
                 }
                 else {
-                    _this.changeRadioState(option);
-                    _this.toggleOpenState();
+                    this.changeRadioState(option);
+                    this.toggleOpenState();
                 }
             }
         };
-        _this.focus = function () {
-            var initialState = (0, utils_1.getInitialState)(_this.props.search, _this.props.header, _this.props.options, false, !!_this.props.tree);
-            if (!_this.state.openState) {
+        this.focus = () => {
+            const initialState = getInitialState(this.props.search, this.props.header, this.props.options, false, !!this.props.tree);
+            if (!this.state.openState) {
                 initialState.triggerFocus = true;
             }
-            _this.context.focusDispatch({
-                type: utils_1.FocusActionType.SetFocus,
+            this.context.focusDispatch({
+                type: FocusActionType.SetFocus,
                 payload: initialState,
             });
         };
-        _this.blur = function () {
-            var initialState = (0, utils_1.getInitialState)(_this.props.search, _this.props.header, _this.props.options, false, !!_this.props.tree);
+        this.blur = () => {
+            const initialState = getInitialState(this.props.search, this.props.header, this.props.options, false, !!this.props.tree);
             initialState.triggerFocus = false;
-            _this.context.focusDispatch({
-                type: utils_1.FocusActionType.SetFocus,
+            this.context.focusDispatch({
+                type: FocusActionType.SetFocus,
                 payload: initialState,
             });
         };
         /*
          * Internal state management of Select
          */
-        _this.toggleOpenState = function (clickOutside) {
+        this.toggleOpenState = (clickOutside = false) => {
             var _a, _b;
-            if (clickOutside === void 0) { clickOutside = false; }
-            var initialState = (0, utils_1.getInitialState)(_this.props.search, _this.props.header, _this.props.options, clickOutside, !!_this.props.tree);
-            if (_this.state.openState && !clickOutside) {
+            const initialState = getInitialState(this.props.search, this.props.header, this.props.options, clickOutside, !!this.props.tree);
+            if (this.state.openState && !clickOutside) {
                 initialState.triggerFocus = true;
             }
-            _this.context.focusDispatch({
-                type: utils_1.FocusActionType.SetFocus,
+            this.context.focusDispatch({
+                type: FocusActionType.SetFocus,
                 payload: initialState,
             });
-            var newOpenState = !_this.state.openState;
-            _this.setState({
+            const newOpenState = !this.state.openState;
+            this.setState({
                 openState: newOpenState,
             });
-            (_b = (_a = _this.props).onOpenChange) === null || _b === void 0 ? void 0 : _b.call(_a, newOpenState);
+            (_b = (_a = this.props).onOpenChange) === null || _b === void 0 ? void 0 : _b.call(_a, newOpenState);
         };
-        _this.changeCheckboxState = function (value, checked, childObject, selfObject) {
-            _this.setState({
+        this.changeCheckboxState = (value, checked, childObject, selfObject) => {
+            this.setState({
                 checkboxState: value,
             });
-            _this.handleOnChange(value, checked, childObject, selfObject);
+            this.handleOnChange(value, checked, childObject, selfObject);
         };
-        _this.onCheckboxChange = function (value, checked, childObject, selfObject) {
-            var newValue;
-            var incomingValue = selfObject.value !== undefined ? selfObject.value : selfObject;
+        this.onCheckboxChange = (value, checked, childObject, selfObject) => {
+            let newValue;
+            const incomingValue = selfObject.value !== undefined ? selfObject.value : selfObject;
             if (checked) {
-                newValue = __spreadArray(__spreadArray([], _this.state.checkboxState, true), [selfObject], false);
+                newValue = [...this.state.checkboxState, selfObject];
             }
             else {
-                newValue = _this.state.checkboxState.filter(function (item) {
+                newValue = this.state.checkboxState.filter((item) => {
                     return item.value !== incomingValue;
                 });
             }
-            _this.changeCheckboxState(newValue, checked, childObject, selfObject);
-            _this.context.focusDispatch({
-                type: utils_1.FocusActionType.SetFocus,
+            this.changeCheckboxState(newValue, checked, childObject, selfObject);
+            this.context.focusDispatch({
+                type: FocusActionType.SetFocus,
                 payload: { optionFocus: selfObject },
             });
         };
-        _this.changeRadioState = function (value) {
-            _this.setState({
+        this.changeRadioState = (value) => {
+            this.setState({
                 radioState: value,
             });
-            _this.handleOnChange(value, null, null, null);
+            this.handleOnChange(value, null, null, null);
         };
-        _this.getMultipleValues = function () {
-            var defaults = {
+        this.getMultipleValues = () => {
+            const defaults = {
                 groupSelectAll: false,
                 onTagClose: false,
                 selectAll: false,
             };
-            if (typeof _this.props.multiple !== 'boolean')
-                return __assign(__assign({}, defaults), _this.props.multiple);
+            if (typeof this.props.multiple !== 'boolean')
+                return Object.assign(Object.assign({}, defaults), this.props.multiple);
             return defaults;
         };
-        _this.getEmptyResult = function () {
-            var message = _this.props.emptyResult !== undefined
-                ? _this.props.emptyResult
+        this.getEmptyResult = () => {
+            const message = this.props.emptyResult !== undefined
+                ? this.props.emptyResult
                 : 'No results found.';
-            return (react_1.default.createElement(BodyText_1.BodyText, { className: "ta-center", subdued: true, size: "small" }, message));
+            return (React.createElement(BodyText, { className: "ta-center", subdued: true, size: "small" }, message));
         };
-        _this.checkDrillIn = function () {
-            if (!_this.props.drillIn || !_this.props.drillIn.open)
+        this.checkDrillIn = () => {
+            if (!this.props.drillIn || !this.props.drillIn.open)
                 return false;
             return true;
         };
-        _this.getCheckboxStateFilteredByGroupValues = function (flattenGroupValues) {
-            return _this.state.checkboxState.filter(function (item) {
-                return !flattenGroupValues.find(function (groupValueItem) {
-                    return item.value === groupValueItem.value;
-                });
-            });
+        this.getCheckboxStateFilteredByGroupValues = (flattenGroupValues) => {
+            return this.state.checkboxState.filter((item) => !flattenGroupValues.find((groupValueItem) => item.value === groupValueItem.value));
         };
-        _this.checkIfDisabledItemIsSelected = function (option) {
-            return (_this.state.checkboxState.filter(function (item) { return item.value === option.value; }).length > 0);
+        this.checkIfDisabledItemIsSelected = (option) => {
+            return (this.state.checkboxState.filter((item) => item.value === option.value).length > 0);
         };
-        _this.getFlattenValuesFromOptions = function (options, skipDisabled) {
-            var result = [];
+        this.getFlattenValuesFromOptions = (options, skipDisabled) => {
+            const result = [];
             if (options) {
-                options.forEach(function (option) {
+                options.forEach((option) => {
                     if (option.options) {
-                        result.push.apply(result, _this.getFlattenValuesFromOptions(option.options));
+                        result.push(...this.getFlattenValuesFromOptions(option.options));
                     }
                     else if (!option.disabled) {
                         result.push(option);
                     }
                     else if (!skipDisabled &&
-                        _this.checkIfDisabledItemIsSelected(option)) {
+                        this.checkIfDisabledItemIsSelected(option)) {
                         result.push(option);
                     }
                 });
@@ -256,230 +208,227 @@ var AnvilSelectWrapped = /** @class */ (function (_super) {
         /*
          * Handle functions
          */
-        _this.handleOnSelectAll = function () {
-            if (_this.props.multiple) {
-                _this.changeCheckboxState(_this.getFlattenValuesFromOptions(_this.props.options), null, null, null);
+        this.handleOnSelectAll = () => {
+            if (this.props.multiple) {
+                this.changeCheckboxState(this.getFlattenValuesFromOptions(this.props.options), null, null, null);
             }
         };
-        _this.handleOnSelectGroup = function (groupOptions) {
-            var groupValues = _this.getFlattenValuesFromOptions(groupOptions);
-            var checkboxStateFiltered = _this.getCheckboxStateFilteredByGroupValues(groupValues);
-            _this.changeCheckboxState(__spreadArray(__spreadArray([], checkboxStateFiltered, true), groupValues, true), null, null, null);
+        this.handleOnSelectGroup = (groupOptions) => {
+            const groupValues = this.getFlattenValuesFromOptions(groupOptions);
+            const checkboxStateFiltered = this.getCheckboxStateFilteredByGroupValues(groupValues);
+            this.changeCheckboxState([...checkboxStateFiltered, ...groupValues], null, null, null);
         };
-        _this.handleOnClear = function () {
-            if (_this.props.multiple) {
-                var clearAllButDisabled = _this.state.checkboxState.filter(function (item) { return item.disabled; });
-                var self_1 = _this.state.checkboxState.filter(function (item) { return !item.disabled; });
-                _this.changeCheckboxState(clearAllButDisabled, false, [], self_1);
+        this.handleOnClear = () => {
+            if (this.props.multiple) {
+                const clearAllButDisabled = this.state.checkboxState.filter((item) => item.disabled);
+                const self = this.state.checkboxState.filter((item) => !item.disabled);
+                this.changeCheckboxState(clearAllButDisabled, false, [], self);
             }
             else {
-                _this.changeRadioState();
+                this.changeRadioState();
             }
         };
-        _this.handleOnClearGroup = function (groupOptions) {
-            var groupValues = _this.getFlattenValuesFromOptions(groupOptions, true);
-            var newGroupValues = _this.getCheckboxStateFilteredByGroupValues(groupValues);
-            _this.changeCheckboxState(newGroupValues, null, null, null);
+        this.handleOnClearGroup = (groupOptions) => {
+            const groupValues = this.getFlattenValuesFromOptions(groupOptions, true);
+            const newGroupValues = this.getCheckboxStateFilteredByGroupValues(groupValues);
+            this.changeCheckboxState(newGroupValues, null, null, null);
         };
-        _this.handleOnChange = function (value, checked, childObject, selfObject) {
-            if (_this.props.onChange) {
-                _this.props.onChange(value, checked, childObject, selfObject);
+        this.handleOnChange = (value, checked, childObject, selfObject) => {
+            if (this.props.onChange) {
+                this.props.onChange(value, checked, childObject, selfObject);
             }
         };
-        _this.handleOnTagClose = function (value) {
-            _this.onCheckboxChange(value, false, value, value);
+        this.handleOnTagClose = (value) => {
+            this.onCheckboxChange(value, false, value, value);
         };
-        _this.handleClickOutside = function () {
-            if (_this.props.onClickOutside)
-                _this.props.onClickOutside();
-            if (!_this.state.openState || !_this.props.closeOnClickOutside)
+        this.handleClickOutside = () => {
+            if (this.props.onClickOutside)
+                this.props.onClickOutside();
+            if (!this.state.openState || !this.props.closeOnClickOutside)
                 return;
-            _this.toggleOpenState(true);
+            this.toggleOpenState(true);
         };
-        _this.handleOnClick = function (e) {
+        this.handleOnClick = (e) => {
             var _a, _b;
-            (_b = (_a = _this.props.trigger) === null || _a === void 0 ? void 0 : _a.onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
-            _this.toggleOpenState();
+            (_b = (_a = this.props.trigger) === null || _a === void 0 ? void 0 : _a.onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+            this.toggleOpenState();
         };
-        _this.getOnChange = function (value, checked, childObject, selfObject) {
-            if (_this.props.multiple)
-                return _this.onCheckboxChange(value, checked, childObject, selfObject);
-            _this.toggleOpenState();
-            return _this.changeRadioState(selfObject);
+        this.getOnChange = (value, checked, childObject, selfObject) => {
+            if (this.props.multiple)
+                return this.onCheckboxChange(value, checked, childObject, selfObject);
+            this.toggleOpenState();
+            return this.changeRadioState(selfObject);
         };
-        _this.getFlatGroup = function () {
-            if (_this.props.tree)
+        this.getFlatGroup = () => {
+            if (this.props.tree)
                 return false;
-            if (_this.getMultipleValues().groupSelectAll) {
+            if (this.getMultipleValues().groupSelectAll) {
                 return {
-                    onGroupSelectAll: _this.handleOnSelectGroup,
-                    onGroupSelectNone: _this.handleOnClearGroup,
+                    onGroupSelectAll: this.handleOnSelectGroup,
+                    onGroupSelectNone: this.handleOnClearGroup,
                 };
             }
             return true;
         };
-        _this.getOnExpand = function () {
+        this.getOnExpand = () => {
             var _a;
-            return ((_a = _this.props.tree) === null || _a === void 0 ? void 0 : _a.onExpand) ? _this.props.tree.onExpand : null;
+            return ((_a = this.props.tree) === null || _a === void 0 ? void 0 : _a.onExpand) ? this.props.tree.onExpand : null;
         };
-        _this.getCollapseValue = function () {
+        this.getCollapseValue = () => {
             var _a;
-            return ((_a = _this.props.tree) === null || _a === void 0 ? void 0 : _a.collapseValue)
-                ? _this.props.tree.collapseValue
+            return ((_a = this.props.tree) === null || _a === void 0 ? void 0 : _a.collapseValue)
+                ? this.props.tree.collapseValue
                 : null;
         };
-        _this.getOptionList = function () {
-            if (_this.checkDrillIn())
-                return react_1.default.createElement(components_1.SelectDrillInContent, __assign({}, _this.props.drillIn));
-            if (_this.props.loading)
-                return _this.getLoading();
-            if (!_this.props.options || _this.props.options.length === 0)
-                return _this.getEmptyResult();
-            return (react_1.default.createElement(OptionList_1.OptionList, { options: _this.props.options, multiple: !!_this.props.multiple, flatGroup: _this.getFlatGroup(), value: _this.props.multiple
-                    ? _this.state.checkboxState
-                    : _this.state.radioState, onChange: _this.getOnChange, optionOnKeyDown: _this.handleKeyDown, focusValue: _this.context.focusState.optionFocus, className: "Select__OptionList", onExpand: _this.getOnExpand(), collapseValue: _this.getCollapseValue() }));
+        this.getOptionList = () => {
+            if (this.checkDrillIn())
+                return React.createElement(SelectDrillInContent, Object.assign({}, this.props.drillIn));
+            if (this.props.loading)
+                return this.getLoading();
+            if (!this.props.options || this.props.options.length === 0)
+                return this.getEmptyResult();
+            return (React.createElement(OptionList, { options: this.props.options, multiple: !!this.props.multiple, flatGroup: this.getFlatGroup(), value: this.props.multiple
+                    ? this.state.checkboxState
+                    : this.state.radioState, onChange: this.getOnChange, optionOnKeyDown: this.handleKeyDown, focusValue: this.context.focusState.optionFocus, className: "Select__OptionList", onExpand: this.getOnExpand(), collapseValue: this.getCollapseValue() }));
         };
         /*
          * UI get functions
          * Options, Header, Footer, Trigger
          */
-        _this.getHeader = function () {
-            if (_this.checkDrillIn()) {
-                return (react_1.default.createElement(components_1.SelectDrillInHeader, __assign({ closeSelectHandler: _this.toggleOpenState, preventFocus: !!_this.props.open }, _this.props.drillIn)));
+        this.getHeader = () => {
+            if (this.checkDrillIn()) {
+                return (React.createElement(SelectDrillInHeader, Object.assign({ closeSelectHandler: this.toggleOpenState, preventFocus: !!this.props.open }, this.props.drillIn)));
             }
-            if (_this.props.header || _this.props.search) {
-                return (react_1.default.createElement(components_1.AnvilSelectHeader, __assign({ search: !!_this.props.search, closeSelectHandler: _this.toggleOpenState }, _this.props.search, _this.props.header)));
+            if (this.props.header || this.props.search) {
+                return (React.createElement(AnvilSelectHeader, Object.assign({ search: !!this.props.search, closeSelectHandler: this.toggleOpenState }, this.props.search, this.props.header)));
             }
             return null;
         };
-        _this.getFooter = function () {
-            if (_this.checkDrillIn()) {
-                if (_this.props.drillIn.footerActionName &&
-                    _this.props.drillIn.footerOnActionClick) {
-                    return (react_1.default.createElement(components_1.SelectDrillInFooter, __assign({ closeSelectHandler: _this.toggleOpenState }, _this.props.drillIn)));
+        this.getFooter = () => {
+            if (this.checkDrillIn()) {
+                if (this.props.drillIn.footerActionName &&
+                    this.props.drillIn.footerOnActionClick) {
+                    return (React.createElement(SelectDrillInFooter, Object.assign({ closeSelectHandler: this.toggleOpenState }, this.props.drillIn)));
                 }
                 return null;
             }
-            if (react_1.default.isValidElement(_this.props.footer)) {
-                return react_1.default.cloneElement(_this.props.footer);
+            if (React.isValidElement(this.props.footer)) {
+                return React.cloneElement(this.props.footer);
             }
-            if (_this.props.footer ||
-                (_this.props.multiple && _this.getMultipleValues().selectAll)) {
-                return (react_1.default.createElement(components_1.AnvilSelectFooter, __assign({ selectAll: _this.props.multiple &&
-                        _this.getMultipleValues().selectAll, onSelectAllClick: _this.handleOnSelectAll, onSelectNoneClick: _this.handleOnClear, closeSelectHandler: _this.toggleOpenState }, _this.props.footer)));
+            if (this.props.footer ||
+                (this.props.multiple && this.getMultipleValues().selectAll)) {
+                return (React.createElement(AnvilSelectFooter, Object.assign({ selectAll: this.props.multiple &&
+                        this.getMultipleValues().selectAll, onSelectAllClick: this.handleOnSelectAll, onSelectNoneClick: this.handleOnClear, closeSelectHandler: this.toggleOpenState }, this.props.footer)));
             }
             return null;
         };
-        _this.getTrigger = function () {
-            if (react_1.default.isValidElement(_this.props.trigger)) {
-                return react_1.default.cloneElement(_this.props.trigger, {
-                    onClick: _this.toggleOpenState,
+        this.getTrigger = () => {
+            if (React.isValidElement(this.props.trigger)) {
+                return React.cloneElement(this.props.trigger, {
+                    onClick: this.toggleOpenState,
                 });
             }
-            var triggerValue = _this.props.multiple
-                ? _this.state.checkboxState
-                : _this.state.radioState;
-            return (react_1.default.createElement(components_1.Trigger, __assign({ open: _this.state.openState, disabled: _this.props.disabled, error: _this.props.error, value: triggerValue, onClearClick: _this.handleOnClear, onClose: !_this.props.tree && _this.handleOnTagClose, onBlur: _this.blur, onKeyDown: _this.props.onKeyDown }, _this.props.trigger, { onClick: _this.handleOnClick })));
+            const triggerValue = this.props.multiple
+                ? this.state.checkboxState
+                : this.state.radioState;
+            return (React.createElement(Trigger, Object.assign({ open: this.state.openState, disabled: this.props.disabled, error: this.props.error, value: triggerValue, onClearClick: this.handleOnClear, onClose: !this.props.tree && this.handleOnTagClose, onBlur: this.blur, onKeyDown: this.props.onKeyDown }, this.props.trigger, { onClick: this.handleOnClick })));
         };
-        _this.getLoading = function () {
-            return (react_1.default.createElement(Stack_1.Stack, { justifyContent: "center" },
-                react_1.default.createElement(Spinner_1.Spinner, { size: "tiny" })));
+        this.getLoading = () => {
+            return (React.createElement(Stack, { justifyContent: "center" },
+                React.createElement(Spinner, { size: "tiny" })));
         };
         /* Popover props */
-        _this.getRestOfProps = function () {
-            var _a = _this.props, autoFlipHorizontally = _a.autoFlipHorizontally, autoFlipVertically = _a.autoFlipVertically, className = _a.className, closeOnClickOutside = _a.closeOnClickOutside, disabled = _a.disabled, drillIn = _a.drillIn, emptyResult = _a.emptyResult, error = _a.error, footer = _a.footer, header = _a.header, loading = _a.loading, multiple = _a.multiple, onChange = _a.onChange, onClickOutside = _a.onClickOutside, open = _a.open, options = _a.options, popoverWidth = _a.popoverWidth, search = _a.search, trigger = _a.trigger, value = _a.value, autoFocus = _a.autoFocus, onOpenChange = _a.onOpenChange, tree = _a.tree, rest = __rest(_a, ["autoFlipHorizontally", "autoFlipVertically", "className", "closeOnClickOutside", "disabled", "drillIn", "emptyResult", "error", "footer", "header", "loading", "multiple", "onChange", "onClickOutside", "open", "options", "popoverWidth", "search", "trigger", "value", "autoFocus", "onOpenChange", "tree"]);
+        this.getRestOfProps = () => {
+            const _a = this.props, { autoFlipHorizontally, autoFlipVertically, className, closeOnClickOutside, disabled, drillIn, emptyResult, error, footer, header, loading, multiple, onChange, onClickOutside, open, options, popoverWidth, search, trigger, value, autoFocus, onOpenChange, tree } = _a, rest = __rest(_a, ["autoFlipHorizontally", "autoFlipVertically", "className", "closeOnClickOutside", "disabled", "drillIn", "emptyResult", "error", "footer", "header", "loading", "multiple", "onChange", "onClickOutside", "open", "options", "popoverWidth", "search", "trigger", "value", "autoFocus", "onOpenChange", "tree"]);
             return rest;
         };
-        _this.state = {
+        this.state = {
             checkboxState: props.value || [],
             radioState: props.value,
             openState: !!props.open,
             controlledMode: false,
         };
-        return _this;
     }
-    AnvilSelectWrapped.prototype.componentDidMount = function () {
+    componentDidMount() {
         if (this.props.autoFocus) {
-            var initialState = (0, utils_1.getInitialState)(this.props.search, this.props.header, this.props.options, false, !!this.props.tree);
+            const initialState = getInitialState(this.props.search, this.props.header, this.props.options, false, !!this.props.tree);
             if (!this.state.openState) {
                 initialState.triggerFocus = true;
             }
             this.context.focusDispatch({
-                type: utils_1.FocusActionType.SetFocus,
+                type: FocusActionType.SetFocus,
                 payload: initialState,
             });
         }
-    };
-    AnvilSelectWrapped.prototype.componentDidUpdate = function (prevProps) {
-        var newValue = this.props.value;
+    }
+    componentDidUpdate(prevProps) {
+        const newValue = this.props.value;
         // If component updated but value didn't change, don't change state at all
         if (prevProps.value === newValue)
             return;
         // If component updated and value changed, update state to be new value
-        this.setState(__assign(__assign({}, this.state), AnvilSelectWrapped.getNewCheckboxAndRadioStateByValue(newValue, this.props.options)));
-    };
-    AnvilSelectWrapped.getDerivedStateFromProps = function (props, state) {
-        var newValue = props.value;
+        this.setState(Object.assign(Object.assign({}, this.state), AnvilSelectWrapped.getNewCheckboxAndRadioStateByValue(newValue, this.props.options)));
+    }
+    static getDerivedStateFromProps(props, state) {
+        const newValue = props.value;
         if (!state.controlledMode && newValue !== undefined && props.onChange) {
-            return __assign({ controlledMode: true }, AnvilSelectWrapped.getNewCheckboxAndRadioStateByValue(newValue, props.options));
+            return Object.assign({ controlledMode: true }, AnvilSelectWrapped.getNewCheckboxAndRadioStateByValue(newValue, props.options));
         }
         if (state.controlledMode &&
             (newValue !== state.checkboxState || newValue !== state.radioState)) {
             return AnvilSelectWrapped.getNewCheckboxAndRadioStateByValue(newValue, props.options);
         }
         return null;
-    };
-    AnvilSelectWrapped.prototype.render = function () {
+    }
+    render() {
         var _a;
         if (!this.state.openState)
             return this.getTrigger();
-        var AnvilSelectClasses = (0, classnames_1.default)('a-Select', this.props.className, {
+        const AnvilSelectClasses = classnames('a-Select', this.props.className, {
             'Select--DrillIn': (_a = this.props.drillIn) === null || _a === void 0 ? void 0 : _a.open,
             'Select--disabled': this.props.disabled,
             'Select--tree': this.props.tree,
             'Select--flat': !this.props.tree,
         });
-        return (react_1.default.createElement(Popover_1.Popover, __assign({ autoFlipVertically: this.props.autoFlipVertically, autoFlipHorizontally: this.props.autoFlipHorizontally, className: AnvilSelectClasses, direction: "br", footer: this.state.openState && this.getFooter(), header: this.state.openState && this.getHeader(), open: this.state.openState, sharp: true, trigger: this.getTrigger(), width: this.props.popoverWidth, onClickOutside: this.handleClickOutside, portal: true }, this.getRestOfProps()), this.state.openState && this.getOptionList()));
-    };
-    AnvilSelectWrapped.defaultProps = {
-        autoFlipVertically: true,
-        closeOnClickOutside: true,
-        popoverWidth: '100',
-    };
-    AnvilSelectWrapped.contextType = utils_1.FocusContext;
-    AnvilSelectWrapped.getCheckboxOptionByValue = function (value, options) {
-        if (!Array.isArray(value) ||
-            !value.length ||
-            value === undefined ||
-            value === null)
-            return [];
-        var isPrimitiveValueType = typeof value[0] !== 'object';
-        if (isPrimitiveValueType) {
-            return options.filter(function (option) { return value.includes(option.value); });
-        }
-        return value;
-    };
-    AnvilSelectWrapped.getRadioOptionByValue = function (value, options) {
-        if (Array.isArray(value) || value === undefined || value === null)
-            return undefined;
-        var isPrimitiveValueType = typeof value !== 'object';
-        if (isPrimitiveValueType) {
-            return options.find(function (option) { return option.value === value; });
-        }
-        return value;
-    };
-    AnvilSelectWrapped.getNewCheckboxAndRadioStateByValue = function (newValue, options) {
-        return {
-            checkboxState: AnvilSelectWrapped.getCheckboxOptionByValue(newValue, options),
-            radioState: AnvilSelectWrapped.getRadioOptionByValue(newValue, options),
-        };
+        return (React.createElement(Popover, Object.assign({ autoFlipVertically: this.props.autoFlipVertically, autoFlipHorizontally: this.props.autoFlipHorizontally, className: AnvilSelectClasses, direction: "br", footer: this.state.openState && this.getFooter(), header: this.state.openState && this.getHeader(), open: this.state.openState, sharp: true, trigger: this.getTrigger(), width: this.props.popoverWidth, onClickOutside: this.handleClickOutside, portal: true }, this.getRestOfProps()), this.state.openState && this.getOptionList()));
+    }
+}
+AnvilSelectWrapped.defaultProps = {
+    autoFlipVertically: true,
+    closeOnClickOutside: true,
+    popoverWidth: '100',
+};
+AnvilSelectWrapped.contextType = FocusContext;
+AnvilSelectWrapped.getCheckboxOptionByValue = (value, options) => {
+    if (!Array.isArray(value) ||
+        !value.length ||
+        value === undefined ||
+        value === null)
+        return [];
+    const isPrimitiveValueType = typeof value[0] !== 'object';
+    if (isPrimitiveValueType) {
+        return options.filter((option) => value.includes(option.value));
+    }
+    return value;
+};
+AnvilSelectWrapped.getRadioOptionByValue = (value, options) => {
+    if (Array.isArray(value) || value === undefined || value === null)
+        return undefined;
+    const isPrimitiveValueType = typeof value !== 'object';
+    if (isPrimitiveValueType) {
+        return options.find((option) => option.value === value);
+    }
+    return value;
+};
+AnvilSelectWrapped.getNewCheckboxAndRadioStateByValue = (newValue, options) => {
+    return {
+        checkboxState: AnvilSelectWrapped.getCheckboxOptionByValue(newValue, options),
+        radioState: AnvilSelectWrapped.getRadioOptionByValue(newValue, options),
     };
-    return AnvilSelectWrapped;
-}(react_1.default.Component));
-exports.AnvilSelectWrapped = AnvilSelectWrapped;
+};
 /* Wrap Select around focus management */
-exports.AnvilSelect = react_1.default.forwardRef(function (props, ref) {
-    return (react_1.default.createElement(components_1.FocusProvider, { header: props.header, search: props.search, options: props.options, preventFocus: true },
-        react_1.default.createElement(AnvilSelectWrapped, __assign({}, props, { ref: ref }))));
+export const AnvilSelect = React.forwardRef((props, ref) => {
+    return (React.createElement(FocusProvider, { header: props.header, search: props.search, options: props.options, preventFocus: true },
+        React.createElement(AnvilSelectWrapped, Object.assign({}, props, { ref: ref }))));
 });
 //# sourceMappingURL=AnvilSelect.js.map