box-ui-elements 16.0.0-beta.8 → 16.0.0

package/es/components/draggable-list/DraggableList.stories.js

@@ -1,10 +1,124 @@
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 import * as React from 'react';
-import DraggableList from '../../../examples/src/DraggableListExamples';
+import uniqueId from 'lodash/uniqueId';
+import Checkbox from '../checkbox/Checkbox';
+import DraggableList from './DraggableList';
+import DraggableListItem from './DraggableListItem';
+import reorder from './draggable-list-utils/reorder';
 import notes from './DraggableList.stories.md';
-export var example = function example() {
-  var isDraggableViaHandle = true;
-  return React.createElement(DraggableList, {
-    isDraggableViaHandle: isDraggableViaHandle
+
+var DraggableListExamples =
+/*#__PURE__*/
+function (_React$Component) {
+  _inherits(DraggableListExamples, _React$Component);
+
+  function DraggableListExamples() {
+    var _getPrototypeOf2;
+
+    var _this;
+
+    _classCallCheck(this, DraggableListExamples);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(DraggableListExamples)).call.apply(_getPrototypeOf2, [this].concat(args)));
+
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      items: [],
+      listId: ''
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "getItems", function (count) {
+      return Array.from({
+        length: count
+      }, function (v, k) {
+        return k;
+      }).map(function (k) {
+        return {
+          id: uniqueId('item_'),
+          label: "item ".concat(k)
+        };
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onDragEnd", function (sourceIndex, destinationIndex) {
+      if (!destinationIndex) {
+        return;
+      }
+
+      var items = reorder(_this.state.items, sourceIndex, destinationIndex);
+
+      _this.setState({
+        items: items
+      });
+    });
+
+    return _this;
+  }
+
+  _createClass(DraggableListExamples, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.setState({
+        items: this.getItems(10),
+        listId: uniqueId()
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var isDraggableViaHandle = this.props.isDraggableViaHandle;
+      var _this$state = this.state,
+          items = _this$state.items,
+          listId = _this$state.listId;
+      return React.createElement(DraggableList, {
+        className: "draggable-list-example-container",
+        listId: listId,
+        onDragEnd: this.onDragEnd
+      }, items.map(function (item, index) {
+        return React.createElement(DraggableListItem, {
+          key: "draggable-".concat(index),
+          id: item.id,
+          index: index,
+          isDraggableViaHandle: isDraggableViaHandle
+        }, React.createElement(Checkbox, {
+          label: item.label,
+          name: item.label
+        }));
+      }));
+    }
+  }]);
+
+  return DraggableListExamples;
+}(React.Component);
+
+export var Example = function Example() {
+  return React.createElement(DraggableListExamples, null);
+};
+export var ExampleIsDraggableViaHandle = function ExampleIsDraggableViaHandle() {
+  return React.createElement(DraggableListExamples, {
+    isDraggableViaHandle: true
   });
 };
 export default {

package/es/components/draggable-list/DraggableList.stories.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/draggable-list/DraggableList.stories.tsx"],"names":["React","DraggableList","notes","example","isDraggableViaHandle","title","component","parameters"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,aAAP,MAA0B,6CAA1B;AACA,OAAOC,KAAP,MAAkB,4BAAlB;AAEA,OAAO,IAAMC,OAAO,GAAG,SAAVA,OAAU,GAAM;AACzB,MAAMC,oBAAoB,GAAG,IAA7B;AACA,SAAO,oBAAC,aAAD;AAAe,IAAA,oBAAoB,EAAEA;AAArC,IAAP;AACH,CAHM;AAKP,eAAe;AACXC,EAAAA,KAAK,EAAE,0BADI;AAEXC,EAAAA,SAAS,EAAEL,aAFA;AAGXM,EAAAA,UAAU,EAAE;AACRL,IAAAA,KAAK,EAALA;AADQ;AAHD,CAAf","sourcesContent":["import * as React from 'react';\nimport DraggableList from '../../../examples/src/DraggableListExamples';\nimport notes from './DraggableList.stories.md';\n\nexport const example = () => {\n    const isDraggableViaHandle = true;\n    return <DraggableList isDraggableViaHandle={isDraggableViaHandle} />;\n};\n\nexport default {\n    title: 'Components|DraggableList',\n    component: DraggableList,\n    parameters: {\n        notes,\n    },\n};\n"],"file":"DraggableList.stories.js"}
+{"version":3,"sources":["../../../src/components/draggable-list/DraggableList.stories.tsx"],"names":["React","uniqueId","Checkbox","DraggableList","DraggableListItem","reorder","notes","DraggableListExamples","items","listId","count","Array","from","length","v","k","map","id","label","sourceIndex","destinationIndex","state","setState","getItems","isDraggableViaHandle","props","onDragEnd","item","index","Component","Example","ExampleIsDraggableViaHandle","title","component","parameters"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,QAAP,MAAqB,iBAArB;AAEA,OAAOC,QAAP,MAAqB,sBAArB;AACA,OAAOC,aAAP,MAA0B,iBAA1B;AACA,OAAOC,iBAAP,MAA8B,qBAA9B;AACA,OAAOC,OAAP,MAAyC,gCAAzC;AAEA,OAAOC,KAAP,MAAkB,4BAAlB;;IAWMC,qB;;;;;;;;;;;;;;;;;;4DACM;AACJC,MAAAA,KAAK,EAAE,EADH;AAEJC,MAAAA,MAAM,EAAE;AAFJ,K;;+DAYG,UAACC,KAAD,EAA2C;AAClD,aAAOC,KAAK,CAACC,IAAN,CAAW;AAAEC,QAAAA,MAAM,EAAEH;AAAV,OAAX,EAA8B,UAACI,CAAD,EAAIC,CAAJ;AAAA,eAAUA,CAAV;AAAA,OAA9B,EAA2CC,GAA3C,CAA+C,UAAAD,CAAC;AAAA,eAAK;AACxDE,UAAAA,EAAE,EAAEhB,QAAQ,CAAC,OAAD,CAD4C;AAExDiB,UAAAA,KAAK,iBAAUH,CAAV;AAFmD,SAAL;AAAA,OAAhD,CAAP;AAIH,K;;gEAEW,UAACI,WAAD,EAAsBC,gBAAtB,EAAmD;AAC3D,UAAI,CAACA,gBAAL,EAAuB;AACnB;AACH;;AAED,UAAMZ,KAAK,GAAGH,OAAO,CAAC,MAAKgB,KAAL,CAAWb,KAAZ,EAAmBW,WAAnB,EAAgCC,gBAAhC,CAArB;;AAEA,YAAKE,QAAL,CAAc;AACVd,QAAAA,KAAK,EAALA;AADU,OAAd;AAGH,K;;;;;;;wCAxBmB;AAChB,WAAKc,QAAL,CAAc;AACVd,QAAAA,KAAK,EAAE,KAAKe,QAAL,CAAc,EAAd,CADG;AAEVd,QAAAA,MAAM,EAAER,QAAQ;AAFN,OAAd;AAIH;;;6BAqBQ;AAAA,UACGuB,oBADH,GAC4B,KAAKC,KADjC,CACGD,oBADH;AAAA,wBAEqB,KAAKH,KAF1B;AAAA,UAEGb,KAFH,eAEGA,KAFH;AAAA,UAEUC,MAFV,eAEUA,MAFV;AAIL,aACI,oBAAC,aAAD;AAAe,QAAA,SAAS,EAAC,kCAAzB;AAA4D,QAAA,MAAM,EAAEA,MAApE;AAA4E,QAAA,SAAS,EAAE,KAAKiB;AAA5F,SACKlB,KAAK,CAACQ,GAAN,CAAU,UAACW,IAAD,EAAwBC,KAAxB;AAAA,eACP,oBAAC,iBAAD;AACI,UAAA,GAAG,sBAAeA,KAAf,CADP;AAEI,UAAA,EAAE,EAAED,IAAI,CAACV,EAFb;AAGI,UAAA,KAAK,EAAEW,KAHX;AAII,UAAA,oBAAoB,EAAEJ;AAJ1B,WAMI,oBAAC,QAAD;AAAU,UAAA,KAAK,EAAEG,IAAI,CAACT,KAAtB;AAA6B,UAAA,IAAI,EAAES,IAAI,CAACT;AAAxC,UANJ,CADO;AAAA,OAAV,CADL,CADJ;AAcH;;;;EAlD+BlB,KAAK,CAAC6B,S;;AAqD1C,OAAO,IAAMC,OAAO,GAAG,SAAVA,OAAU;AAAA,SAAM,oBAAC,qBAAD,OAAN;AAAA,CAAhB;AAEP,OAAO,IAAMC,2BAA2B,GAAG,SAA9BA,2BAA8B;AAAA,SAAM,oBAAC,qBAAD;AAAuB,IAAA,oBAAoB;AAA3C,IAAN;AAAA,CAApC;AAEP,eAAe;AACXC,EAAAA,KAAK,EAAE,0BADI;AAEXC,EAAAA,SAAS,EAAE9B,aAFA;AAGX+B,EAAAA,UAAU,EAAE;AACR5B,IAAAA,KAAK,EAALA;AADQ;AAHD,CAAf","sourcesContent":["import * as React from 'react';\nimport uniqueId from 'lodash/uniqueId';\n\nimport Checkbox from '../checkbox/Checkbox';\nimport DraggableList from './DraggableList';\nimport DraggableListItem from './DraggableListItem';\nimport reorder, { ReorderListItem } from './draggable-list-utils/reorder';\n\nimport notes from './DraggableList.stories.md';\n\ninterface Props {\n    isDraggableViaHandle?: boolean;\n}\n\ninterface State {\n    items: Array<ReorderListItem>;\n    listId: string;\n}\n\nclass DraggableListExamples extends React.Component<Props, State> {\n    state = {\n        items: [],\n        listId: '',\n    };\n\n    componentDidMount() {\n        this.setState({\n            items: this.getItems(10),\n            listId: uniqueId(),\n        });\n    }\n\n    getItems = (count: number): Array<ReorderListItem> => {\n        return Array.from({ length: count }, (v, k) => k).map(k => ({\n            id: uniqueId('item_'),\n            label: `item ${k}`,\n        }));\n    };\n\n    onDragEnd = (sourceIndex: number, destinationIndex: number) => {\n        if (!destinationIndex) {\n            return;\n        }\n\n        const items = reorder(this.state.items, sourceIndex, destinationIndex);\n\n        this.setState({\n            items,\n        });\n    };\n\n    render() {\n        const { isDraggableViaHandle } = this.props;\n        const { items, listId } = this.state;\n\n        return (\n            <DraggableList className=\"draggable-list-example-container\" listId={listId} onDragEnd={this.onDragEnd}>\n                {items.map((item: ReorderListItem, index) => (\n                    <DraggableListItem\n                        key={`draggable-${index}`}\n                        id={item.id}\n                        index={index}\n                        isDraggableViaHandle={isDraggableViaHandle}\n                    >\n                        <Checkbox label={item.label} name={item.label} />\n                    </DraggableListItem>\n                ))}\n            </DraggableList>\n        );\n    }\n}\n\nexport const Example = () => <DraggableListExamples />;\n\nexport const ExampleIsDraggableViaHandle = () => <DraggableListExamples isDraggableViaHandle />;\n\nexport default {\n    title: 'Components|DraggableList',\n    component: DraggableList,\n    parameters: {\n        notes,\n    },\n};\n"],"file":"DraggableList.stories.js"}

package/es/components/dropdown-menu/DropdownMenu.js

@@ -188,6 +188,7 @@ function (_React$Component) {
           className = _this$props.className,
           constrainToScrollParent = _this$props.constrainToScrollParent,
           constrainToWindow = _this$props.constrainToWindow,
+          constrainToWindowWithPin = _this$props.constrainToWindowWithPin,
           isResponsive = _this$props.isResponsive,
           isRightAligned = _this$props.isRightAligned;
       var _this$state = this.state,
@@ -251,6 +252,14 @@ function (_React$Component) {
         });
       }
 
+      if (constrainToWindowWithPin) {
+        constraints.push({
+          to: 'window',
+          attachment: 'together',
+          pin: true
+        });
+      }
+
       var bodyEl = bodyElement instanceof HTMLElement ? bodyElement : document.body;
       return React.createElement(TetherComponent, {
         attachment: attachment,

package/es/components/dropdown-menu/DropdownMenu.js.flow

@@ -17,6 +17,8 @@ type Props = {
     constrainToScrollParent: boolean,
     /** Right aligns menu to button */
     constrainToWindow: boolean,
+    /** Forces menu to render within the visible window and pins the dropdown if scrolled */
+    constrainToWindowWithPin?: boolean,
     /** Enables responsive behaviors for this component */
     isResponsive?: boolean,
     /** Function called when menu is opened */
@@ -182,6 +184,7 @@ class DropdownMenu extends React.Component<Props, State> {
             className,
             constrainToScrollParent,
             constrainToWindow,
+            constrainToWindowWithPin,
             isResponsive,
             isRightAligned,
         } = this.props;
@@ -246,6 +249,14 @@ class DropdownMenu extends React.Component<Props, State> {
             });
         }
 
+        if (constrainToWindowWithPin) {
+            constraints.push({
+                to: 'window',
+                attachment: 'together',
+                pin: true,
+            });
+        }
+
         const bodyEl = bodyElement instanceof HTMLElement ? bodyElement : document.body;
 
         return (

package/es/components/dropdown-menu/DropdownMenu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/dropdown-menu/DropdownMenu.js"],"names":["React","TetherComponent","classNames","noop","uniqueId","KEYS","DropdownMenu","initialFocusIndex","isOpen","setState","event","props","onMenuClose","menuButtonEl","document","getElementById","menuButtonID","focus","state","stopPropagation","preventDefault","closeMenu","openMenuAndSetFocusIndex","key","space","enter","arrowDown","arrowUp","escape","isKeyboardEvent","focusButton","menuEl","menuID","target","Node","contains","prevProps","prevState","useBubble","addEventListener","handleDocumentClick","onMenuOpen","removeEventListener","bodyElement","children","className","constrainToScrollParent","constrainToWindow","isResponsive","isRightAligned","elements","Children","toArray","length","Error","menuButton","menu","menuButtonProps","id","onClick","handleButtonClick","onKeyDown","handleButtonKeyDown","undefined","menuProps","onClose","handleMenuClose","attachment","targetAttachment","constraints","push","to","bodyEl","HTMLElement","body","cloneElement","Component"],"mappings":"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","sourcesContent":["// @flow\nimport * as React from 'react';\nimport TetherComponent from 'react-tether';\nimport classNames from 'classnames';\nimport noop from 'lodash/noop';\nimport uniqueId from 'lodash/uniqueId';\n\nimport { KEYS } from '../../constants';\nimport './DropdownMenu.scss';\n\ntype Props = {\n    bodyElement?: HTMLElement,\n    children: React.Node,\n    /** Forces menu to render within the scroll parent */\n    className?: string,\n    /** Forces menu to render within the visible window */\n    constrainToScrollParent: boolean,\n    /** Right aligns menu to button */\n    constrainToWindow: boolean,\n    /** Enables responsive behaviors for this component */\n    isResponsive?: boolean,\n    /** Function called when menu is opened */\n    isRightAligned: boolean,\n    /** Handler for dropdown menu close events */\n    onMenuClose?: (event: SyntheticEvent<> | MouseEvent) => void,\n    /** Handler for dropdown menu open events */\n    onMenuOpen?: () => void,\n    /** Set true to close dropdown menu on event bubble instead of event capture */\n    useBubble?: boolean,\n};\n\ntype State = {\n    initialFocusIndex: ?number,\n    isOpen: boolean,\n};\n\nclass DropdownMenu extends React.Component<Props, State> {\n    static defaultProps = {\n        constrainToScrollParent: false,\n        constrainToWindow: false,\n        isResponsive: false,\n        isRightAligned: false,\n    };\n\n    menuID = uniqueId('menu');\n\n    menuButtonID = uniqueId('menubutton');\n\n    state = {\n        initialFocusIndex: null,\n        isOpen: false,\n    };\n\n    componentDidUpdate(prevProps: Props, prevState: State) {\n        const { useBubble } = this.props;\n        if (!prevState.isOpen && this.state.isOpen) {\n            // When menu is being opened\n            document.addEventListener('click', this.handleDocumentClick, !useBubble);\n            document.addEventListener('contextmenu', this.handleDocumentClick, !useBubble);\n\n            const { onMenuOpen } = this.props;\n            if (onMenuOpen) {\n                onMenuOpen();\n            }\n        } else if (prevState.isOpen && !this.state.isOpen) {\n            // When menu is being closed\n            document.removeEventListener('contextmenu', this.handleDocumentClick, !useBubble);\n            document.removeEventListener('click', this.handleDocumentClick, !useBubble);\n        }\n    }\n\n    componentWillUnmount() {\n        const { useBubble } = this.props;\n        if (this.state.isOpen) {\n            // Clean-up global click handlers\n            document.removeEventListener('contextmenu', this.handleDocumentClick, !useBubble);\n            document.removeEventListener('click', this.handleDocumentClick, !useBubble);\n        }\n    }\n\n    menuID: string;\n\n    menuButtonID: string;\n\n    openMenuAndSetFocusIndex = (initialFocusIndex: ?number) => {\n        this.setState({\n            initialFocusIndex,\n            isOpen: true,\n        });\n    };\n\n    closeMenu = (event: SyntheticEvent<> | MouseEvent) => {\n        const { onMenuClose = noop } = this.props;\n        this.setState(\n            {\n                isOpen: false,\n            },\n            () => onMenuClose(event),\n        );\n    };\n\n    focusButton = () => {\n        // @NOTE: This breaks encapsulation a bit, but the only other way is passing ref functions to unknown children components\n        const menuButtonEl = document.getElementById(this.menuButtonID);\n        if (menuButtonEl) {\n            menuButtonEl.focus();\n        }\n    };\n\n    handleButtonClick = (event: SyntheticEvent<>) => {\n        const { isOpen } = this.state;\n\n        event.stopPropagation();\n        event.preventDefault();\n\n        if (isOpen) {\n            this.closeMenu(event);\n        } else {\n            this.openMenuAndSetFocusIndex(null);\n        }\n    };\n\n    handleButtonKeyDown = (event: SyntheticKeyboardEvent<>) => {\n        const { isOpen } = this.state;\n\n        switch (event.key) {\n            case KEYS.space:\n            case KEYS.enter:\n            case KEYS.arrowDown:\n                event.stopPropagation();\n                event.preventDefault();\n\n                this.openMenuAndSetFocusIndex(0);\n                break;\n\n            case KEYS.arrowUp:\n                event.stopPropagation();\n                event.preventDefault();\n\n                this.openMenuAndSetFocusIndex(-1);\n                break;\n\n            case KEYS.escape:\n                if (isOpen) {\n                    event.stopPropagation();\n                }\n\n                event.preventDefault();\n                this.closeMenu(event);\n                break;\n\n            default:\n                break;\n        }\n    };\n\n    handleMenuClose = (isKeyboardEvent: boolean, event: SyntheticEvent<> | MouseEvent) => {\n        this.closeMenu(event);\n        this.focusButton();\n    };\n\n    handleDocumentClick = (event: MouseEvent) => {\n        const menuEl = document.getElementById(this.menuID);\n        const menuButtonEl = document.getElementById(this.menuButtonID);\n\n        // Some DOM magic to get global click handlers to close menu when not interacting with menu or associated button\n        if (\n            menuEl &&\n            menuButtonEl &&\n            event.target instanceof Node &&\n            !menuEl.contains(event.target) &&\n            !menuButtonEl.contains(event.target)\n        ) {\n            this.closeMenu(event);\n        }\n    };\n\n    render() {\n        const {\n            bodyElement,\n            children,\n            className,\n            constrainToScrollParent,\n            constrainToWindow,\n            isResponsive,\n            isRightAligned,\n        } = this.props;\n\n        const { isOpen, initialFocusIndex } = this.state;\n\n        const elements = React.Children.toArray(children);\n\n        if (elements.length !== 2) {\n            throw new Error('DropdownMenu must have exactly two children: A button component and a <Menu>');\n        }\n\n        const menuButton = elements[0];\n        const menu = elements[1];\n\n        const menuButtonProps: Object = {\n            id: this.menuButtonID,\n            key: this.menuButtonID,\n            onClick: this.handleButtonClick, // NOTE: Overrides button's handler\n            onKeyDown: this.handleButtonKeyDown, // NOTE: Overrides button's handler\n            'aria-expanded': isOpen ? 'true' : 'false',\n        };\n\n        if (menuButton.props['aria-haspopup'] === undefined) {\n            menuButtonProps['aria-haspopup'] = 'true';\n        }\n\n        // Add this only when its open, otherwise the menuID element isn't rendered\n        if (isOpen) {\n            menuButtonProps['aria-controls'] = this.menuID;\n        }\n\n        const menuProps = {\n            id: this.menuID,\n            key: this.menuID,\n            initialFocusIndex,\n            onClose: this.handleMenuClose,\n            'aria-labelledby': this.menuButtonID,\n        };\n\n        let attachment = 'top left';\n        let targetAttachment = 'bottom left';\n\n        if (isRightAligned) {\n            attachment = 'top right';\n            targetAttachment = 'bottom right';\n        }\n\n        const constraints = [];\n\n        if (constrainToScrollParent) {\n            constraints.push({\n                to: 'scrollParent',\n                attachment: 'together',\n            });\n        }\n\n        if (constrainToWindow) {\n            constraints.push({\n                to: 'window',\n                attachment: 'together',\n            });\n        }\n\n        const bodyEl = bodyElement instanceof HTMLElement ? bodyElement : document.body;\n\n        return (\n            <TetherComponent\n                attachment={attachment}\n                bodyElement={bodyEl}\n                className={classNames({ 'bdl-DropdownMenu--responsive': isResponsive }, className)}\n                classPrefix=\"dropdown-menu\"\n                constraints={constraints}\n                enabled={isOpen}\n                targetAttachment={targetAttachment}\n            >\n                {React.cloneElement(menuButton, menuButtonProps)}\n                {isOpen && React.cloneElement(menu, menuProps)}\n            </TetherComponent>\n        );\n    }\n}\n\nexport default DropdownMenu;\n"],"file":"DropdownMenu.js"}
+{"version":3,"sources":["../../../src/components/dropdown-menu/DropdownMenu.js"],"names":["React","TetherComponent","classNames","noop","uniqueId","KEYS","DropdownMenu","initialFocusIndex","isOpen","setState","event","props","onMenuClose","menuButtonEl","document","getElementById","menuButtonID","focus","state","stopPropagation","preventDefault","closeMenu","openMenuAndSetFocusIndex","key","space","enter","arrowDown","arrowUp","escape","isKeyboardEvent","focusButton","menuEl","menuID","target","Node","contains","prevProps","prevState","useBubble","addEventListener","handleDocumentClick","onMenuOpen","removeEventListener","bodyElement","children","className","constrainToScrollParent","constrainToWindow","constrainToWindowWithPin","isResponsive","isRightAligned","elements","Children","toArray","length","Error","menuButton","menu","menuButtonProps","id","onClick","handleButtonClick","onKeyDown","handleButtonKeyDown","undefined","menuProps","onClose","handleMenuClose","attachment","targetAttachment","constraints","push","to","pin","bodyEl","HTMLElement","body","cloneElement","Component"],"mappings":"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","sourcesContent":["// @flow\nimport * as React from 'react';\nimport TetherComponent from 'react-tether';\nimport classNames from 'classnames';\nimport noop from 'lodash/noop';\nimport uniqueId from 'lodash/uniqueId';\n\nimport { KEYS } from '../../constants';\nimport './DropdownMenu.scss';\n\ntype Props = {\n    bodyElement?: HTMLElement,\n    children: React.Node,\n    /** Forces menu to render within the scroll parent */\n    className?: string,\n    /** Forces menu to render within the visible window */\n    constrainToScrollParent: boolean,\n    /** Right aligns menu to button */\n    constrainToWindow: boolean,\n    /** Forces menu to render within the visible window and pins the dropdown if scrolled */\n    constrainToWindowWithPin?: boolean,\n    /** Enables responsive behaviors for this component */\n    isResponsive?: boolean,\n    /** Function called when menu is opened */\n    isRightAligned: boolean,\n    /** Handler for dropdown menu close events */\n    onMenuClose?: (event: SyntheticEvent<> | MouseEvent) => void,\n    /** Handler for dropdown menu open events */\n    onMenuOpen?: () => void,\n    /** Set true to close dropdown menu on event bubble instead of event capture */\n    useBubble?: boolean,\n};\n\ntype State = {\n    initialFocusIndex: ?number,\n    isOpen: boolean,\n};\n\nclass DropdownMenu extends React.Component<Props, State> {\n    static defaultProps = {\n        constrainToScrollParent: false,\n        constrainToWindow: false,\n        isResponsive: false,\n        isRightAligned: false,\n    };\n\n    menuID = uniqueId('menu');\n\n    menuButtonID = uniqueId('menubutton');\n\n    state = {\n        initialFocusIndex: null,\n        isOpen: false,\n    };\n\n    componentDidUpdate(prevProps: Props, prevState: State) {\n        const { useBubble } = this.props;\n        if (!prevState.isOpen && this.state.isOpen) {\n            // When menu is being opened\n            document.addEventListener('click', this.handleDocumentClick, !useBubble);\n            document.addEventListener('contextmenu', this.handleDocumentClick, !useBubble);\n\n            const { onMenuOpen } = this.props;\n            if (onMenuOpen) {\n                onMenuOpen();\n            }\n        } else if (prevState.isOpen && !this.state.isOpen) {\n            // When menu is being closed\n            document.removeEventListener('contextmenu', this.handleDocumentClick, !useBubble);\n            document.removeEventListener('click', this.handleDocumentClick, !useBubble);\n        }\n    }\n\n    componentWillUnmount() {\n        const { useBubble } = this.props;\n        if (this.state.isOpen) {\n            // Clean-up global click handlers\n            document.removeEventListener('contextmenu', this.handleDocumentClick, !useBubble);\n            document.removeEventListener('click', this.handleDocumentClick, !useBubble);\n        }\n    }\n\n    menuID: string;\n\n    menuButtonID: string;\n\n    openMenuAndSetFocusIndex = (initialFocusIndex: ?number) => {\n        this.setState({\n            initialFocusIndex,\n            isOpen: true,\n        });\n    };\n\n    closeMenu = (event: SyntheticEvent<> | MouseEvent) => {\n        const { onMenuClose = noop } = this.props;\n        this.setState(\n            {\n                isOpen: false,\n            },\n            () => onMenuClose(event),\n        );\n    };\n\n    focusButton = () => {\n        // @NOTE: This breaks encapsulation a bit, but the only other way is passing ref functions to unknown children components\n        const menuButtonEl = document.getElementById(this.menuButtonID);\n        if (menuButtonEl) {\n            menuButtonEl.focus();\n        }\n    };\n\n    handleButtonClick = (event: SyntheticEvent<>) => {\n        const { isOpen } = this.state;\n\n        event.stopPropagation();\n        event.preventDefault();\n\n        if (isOpen) {\n            this.closeMenu(event);\n        } else {\n            this.openMenuAndSetFocusIndex(null);\n        }\n    };\n\n    handleButtonKeyDown = (event: SyntheticKeyboardEvent<>) => {\n        const { isOpen } = this.state;\n\n        switch (event.key) {\n            case KEYS.space:\n            case KEYS.enter:\n            case KEYS.arrowDown:\n                event.stopPropagation();\n                event.preventDefault();\n\n                this.openMenuAndSetFocusIndex(0);\n                break;\n\n            case KEYS.arrowUp:\n                event.stopPropagation();\n                event.preventDefault();\n\n                this.openMenuAndSetFocusIndex(-1);\n                break;\n\n            case KEYS.escape:\n                if (isOpen) {\n                    event.stopPropagation();\n                }\n\n                event.preventDefault();\n                this.closeMenu(event);\n                break;\n\n            default:\n                break;\n        }\n    };\n\n    handleMenuClose = (isKeyboardEvent: boolean, event: SyntheticEvent<> | MouseEvent) => {\n        this.closeMenu(event);\n        this.focusButton();\n    };\n\n    handleDocumentClick = (event: MouseEvent) => {\n        const menuEl = document.getElementById(this.menuID);\n        const menuButtonEl = document.getElementById(this.menuButtonID);\n\n        // Some DOM magic to get global click handlers to close menu when not interacting with menu or associated button\n        if (\n            menuEl &&\n            menuButtonEl &&\n            event.target instanceof Node &&\n            !menuEl.contains(event.target) &&\n            !menuButtonEl.contains(event.target)\n        ) {\n            this.closeMenu(event);\n        }\n    };\n\n    render() {\n        const {\n            bodyElement,\n            children,\n            className,\n            constrainToScrollParent,\n            constrainToWindow,\n            constrainToWindowWithPin,\n            isResponsive,\n            isRightAligned,\n        } = this.props;\n\n        const { isOpen, initialFocusIndex } = this.state;\n\n        const elements = React.Children.toArray(children);\n\n        if (elements.length !== 2) {\n            throw new Error('DropdownMenu must have exactly two children: A button component and a <Menu>');\n        }\n\n        const menuButton = elements[0];\n        const menu = elements[1];\n\n        const menuButtonProps: Object = {\n            id: this.menuButtonID,\n            key: this.menuButtonID,\n            onClick: this.handleButtonClick, // NOTE: Overrides button's handler\n            onKeyDown: this.handleButtonKeyDown, // NOTE: Overrides button's handler\n            'aria-expanded': isOpen ? 'true' : 'false',\n        };\n\n        if (menuButton.props['aria-haspopup'] === undefined) {\n            menuButtonProps['aria-haspopup'] = 'true';\n        }\n\n        // Add this only when its open, otherwise the menuID element isn't rendered\n        if (isOpen) {\n            menuButtonProps['aria-controls'] = this.menuID;\n        }\n\n        const menuProps = {\n            id: this.menuID,\n            key: this.menuID,\n            initialFocusIndex,\n            onClose: this.handleMenuClose,\n            'aria-labelledby': this.menuButtonID,\n        };\n\n        let attachment = 'top left';\n        let targetAttachment = 'bottom left';\n\n        if (isRightAligned) {\n            attachment = 'top right';\n            targetAttachment = 'bottom right';\n        }\n\n        const constraints = [];\n\n        if (constrainToScrollParent) {\n            constraints.push({\n                to: 'scrollParent',\n                attachment: 'together',\n            });\n        }\n\n        if (constrainToWindow) {\n            constraints.push({\n                to: 'window',\n                attachment: 'together',\n            });\n        }\n\n        if (constrainToWindowWithPin) {\n            constraints.push({\n                to: 'window',\n                attachment: 'together',\n                pin: true,\n            });\n        }\n\n        const bodyEl = bodyElement instanceof HTMLElement ? bodyElement : document.body;\n\n        return (\n            <TetherComponent\n                attachment={attachment}\n                bodyElement={bodyEl}\n                className={classNames({ 'bdl-DropdownMenu--responsive': isResponsive }, className)}\n                classPrefix=\"dropdown-menu\"\n                constraints={constraints}\n                enabled={isOpen}\n                targetAttachment={targetAttachment}\n            >\n                {React.cloneElement(menuButton, menuButtonProps)}\n                {isOpen && React.cloneElement(menu, menuProps)}\n            </TetherComponent>\n        );\n    }\n}\n\nexport default DropdownMenu;\n"],"file":"DropdownMenu.js"}

package/es/components/dropdown-menu/DropdownMenu.scss

@@ -28,15 +28,15 @@
             bottom: 0;
             left: 0;
             margin-top: 0;
+            margin-bottom: $bdl-header-height;
             // cancels out the tether inline styling without having to set enabled=false
             transform: none !important;
         }
 
         .aria-menu:not(.submenu) {
-            position: relative;
             height: 100%;
-            margin: 0;
-            padding-top: $bdl-header-height + $bdl-grid-unit * 3;
+            margin-top: $bdl-header-height;
+            overflow: scroll;
             background-color: $bdl-gray-02;
             border: none;
             border-radius: 0;

package/es/components/infinite-scroll/InfiniteScroll.js

@@ -47,7 +47,7 @@ function InfiniteScroll(_ref2) {
       throttle = _ref2$throttle === void 0 ? 64 : _ref2$throttle,
       _ref2$useWindow = _ref2.useWindow,
       useWindow = _ref2$useWindow === void 0 ? false : _ref2$useWindow;
-  var sentinelRef = React.createRef();
+  var sentinelRef = React.useRef(null);
   React.useEffect(function () {
     var params = {
       hasMore: hasMore,
@@ -69,8 +69,10 @@ function InfiniteScroll(_ref2) {
     if (container) {
       container.addEventListener('scroll', scrollHandler);
       container.addEventListener('resize', resizeHandler);
-    }
+    } // loads more content until page becomes scrollable, or until there is no more data to fetch
+
 
+    onContainerScroll(params);
     return function removeEventListeners() {
       if (container) {
         container.removeEventListener('scroll', scrollHandler);

package/es/components/infinite-scroll/InfiniteScroll.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/infinite-scroll/InfiniteScroll.tsx"],"names":["React","throttleFn","onContainerScroll","hasMore","isLoading","onLoadMore","scrollContainerNode","sentinelRef","threshold","useWindow","current","getBoundingClientRect","sentinelTop","top","window","innerHeight","containerBottom","bottom","InfiniteScroll","children","throttle","createRef","useEffect","params","scrollHandler","resizeHandler","container","addEventListener","removeEventListeners","removeEventListener"],"mappings":"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","sourcesContent":["/**\n * From https://github.com/jaredpalmer/react-simple-infinite-scroll\n * Updated to accept a scroll container React ref as the \"window\"\n */\nimport * as React from 'react';\nimport throttleFn from 'lodash/throttle';\n\nexport interface InfiniteScrollProps {\n    /** Components to render, should include entities/loading states/end message */\n    children: React.ReactNode;\n    /** Does the resource have more entities */\n    hasMore: boolean;\n    /** Are more entities being loaded */\n    isLoading: boolean;\n    /** Callback to load more entities */\n    onLoadMore: () => void;\n    /** React ref of the scroll container.\n     * Used to listen to scroll events and calculate onLoadMore calls.\n     * Set useWindow to true to use the window as scroll container.\n     */\n    scrollContainerNode?: HTMLElement;\n    /** Scroll threshold */\n    threshold?: number;\n    /** Throttle rate */\n    throttle?: number;\n    /** Set useWindow to true to use the window as scroll container. If set to true, will ignore scrollContainerRef. */\n    useWindow?: boolean;\n}\n\ntype OnContainerScrollParams = Pick<Required<InfiniteScrollProps>, 'threshold' | 'useWindow'> &\n    Pick<InfiniteScrollProps, 'isLoading' | 'hasMore' | 'scrollContainerNode' | 'onLoadMore'> & {\n        sentinelRef: React.RefObject<HTMLDivElement>;\n    };\n\nfunction onContainerScroll({\n    hasMore,\n    isLoading,\n    onLoadMore,\n    scrollContainerNode,\n    sentinelRef,\n    threshold,\n    useWindow,\n}: OnContainerScrollParams) {\n    if (isLoading || !hasMore) return;\n\n    if (sentinelRef.current === null) return;\n    const { top: sentinelTop } = sentinelRef.current.getBoundingClientRect();\n\n    if (useWindow) {\n        if (sentinelTop - window.innerHeight < threshold) {\n            onLoadMore();\n        }\n    } else {\n        if (!scrollContainerNode) return;\n\n        const { bottom: containerBottom } = scrollContainerNode.getBoundingClientRect();\n        if (sentinelTop - containerBottom < threshold) {\n            onLoadMore();\n        }\n    }\n}\n\nfunction InfiniteScroll({\n    children,\n    hasMore,\n    isLoading,\n    onLoadMore,\n    scrollContainerNode,\n    threshold = 100,\n    throttle = 64,\n    useWindow = false,\n}: InfiniteScrollProps) {\n    const sentinelRef = React.createRef<HTMLDivElement>();\n\n    React.useEffect(() => {\n        const params = {\n            hasMore,\n            isLoading,\n            onLoadMore,\n            scrollContainerNode,\n            sentinelRef,\n            threshold,\n            useWindow,\n        };\n\n        const scrollHandler = throttleFn(() => onContainerScroll(params), throttle);\n        const resizeHandler = throttleFn(() => onContainerScroll(params), throttle);\n\n        const container = useWindow ? window : scrollContainerNode;\n\n        if (container) {\n            container.addEventListener('scroll', scrollHandler);\n            container.addEventListener('resize', resizeHandler);\n        }\n\n        return function removeEventListeners() {\n            if (container) {\n                container.removeEventListener('scroll', scrollHandler);\n                container.removeEventListener('resize', resizeHandler);\n            }\n        };\n    }, [hasMore, isLoading, onLoadMore, scrollContainerNode, sentinelRef, threshold, throttle, useWindow]);\n\n    return (\n        <div>\n            {children}\n            <div ref={sentinelRef} data-testid=\"sentinel\" />\n        </div>\n    );\n}\n\nexport default InfiniteScroll;\n"],"file":"InfiniteScroll.js"}
+{"version":3,"sources":["../../../src/components/infinite-scroll/InfiniteScroll.tsx"],"names":["React","throttleFn","onContainerScroll","hasMore","isLoading","onLoadMore","scrollContainerNode","sentinelRef","threshold","useWindow","current","getBoundingClientRect","sentinelTop","top","window","innerHeight","containerBottom","bottom","InfiniteScroll","children","throttle","useRef","useEffect","params","scrollHandler","resizeHandler","container","addEventListener","removeEventListeners","removeEventListener"],"mappings":"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","sourcesContent":["/**\n * From https://github.com/jaredpalmer/react-simple-infinite-scroll\n * Updated to accept a scroll container React ref as the \"window\"\n */\nimport * as React from 'react';\nimport throttleFn from 'lodash/throttle';\n\nexport interface InfiniteScrollProps {\n    /** Components to render, should include entities/loading states/end message */\n    children: React.ReactNode;\n    /** Does the resource have more entities */\n    hasMore: boolean;\n    /** Are more entities being loaded */\n    isLoading: boolean;\n    /** Callback to load more entities */\n    onLoadMore: () => void;\n    /** React ref of the scroll container.\n     * Used to listen to scroll events and calculate onLoadMore calls.\n     * Set useWindow to true to use the window as scroll container.\n     */\n    scrollContainerNode?: HTMLElement;\n    /** Scroll threshold */\n    threshold?: number;\n    /** Throttle rate */\n    throttle?: number;\n    /** Set useWindow to true to use the window as scroll container. If set to true, will ignore scrollContainerNode. */\n    useWindow?: boolean;\n}\n\ntype OnContainerScrollParams = Pick<Required<InfiniteScrollProps>, 'threshold' | 'useWindow'> &\n    Pick<InfiniteScrollProps, 'isLoading' | 'hasMore' | 'scrollContainerNode' | 'onLoadMore'> & {\n        sentinelRef: React.RefObject<HTMLDivElement>;\n    };\n\nfunction onContainerScroll({\n    hasMore,\n    isLoading,\n    onLoadMore,\n    scrollContainerNode,\n    sentinelRef,\n    threshold,\n    useWindow,\n}: OnContainerScrollParams) {\n    if (isLoading || !hasMore) return;\n\n    if (sentinelRef.current === null) return;\n    const { top: sentinelTop } = sentinelRef.current.getBoundingClientRect();\n\n    if (useWindow) {\n        if (sentinelTop - window.innerHeight < threshold) {\n            onLoadMore();\n        }\n    } else {\n        if (!scrollContainerNode) return;\n\n        const { bottom: containerBottom } = scrollContainerNode.getBoundingClientRect();\n        if (sentinelTop - containerBottom < threshold) {\n            onLoadMore();\n        }\n    }\n}\n\nfunction InfiniteScroll({\n    children,\n    hasMore,\n    isLoading,\n    onLoadMore,\n    scrollContainerNode,\n    threshold = 100,\n    throttle = 64,\n    useWindow = false,\n}: InfiniteScrollProps) {\n    const sentinelRef = React.useRef<HTMLDivElement | null>(null);\n\n    React.useEffect(() => {\n        const params = {\n            hasMore,\n            isLoading,\n            onLoadMore,\n            scrollContainerNode,\n            sentinelRef,\n            threshold,\n            useWindow,\n        };\n\n        const scrollHandler = throttleFn(() => onContainerScroll(params), throttle);\n        const resizeHandler = throttleFn(() => onContainerScroll(params), throttle);\n\n        const container = useWindow ? window : scrollContainerNode;\n\n        if (container) {\n            container.addEventListener('scroll', scrollHandler);\n            container.addEventListener('resize', resizeHandler);\n        }\n\n        // loads more content until page becomes scrollable, or until there is no more data to fetch\n        onContainerScroll(params);\n\n        return function removeEventListeners() {\n            if (container) {\n                container.removeEventListener('scroll', scrollHandler);\n                container.removeEventListener('resize', resizeHandler);\n            }\n        };\n    }, [hasMore, isLoading, onLoadMore, scrollContainerNode, sentinelRef, threshold, throttle, useWindow]);\n\n    return (\n        <div>\n            {children}\n            <div ref={sentinelRef} data-testid=\"sentinel\" />\n        </div>\n    );\n}\n\nexport default InfiniteScroll;\n"],"file":"InfiniteScroll.js"}

package/es/components/modal/Modal.scss

@@ -163,6 +163,7 @@
         }
 
         .modal-content {
+            flex-basis: 100%;
             margin-top: $responsive-modal-header-height;
             margin-bottom: $responsive-modal-actions-height;
             padding: 24px 16px 12px 16px;
@@ -193,11 +194,14 @@
             padding: 10px 16px;
             background-color: $white;
         }
+
+        .modal-dialog-container {
+            overflow: hidden;
+        }
     }
 
     .modal-dialog-container {
         flex-basis: 100%;
         width: 100%;
-        overflow: hidden;
     }
 }

package/es/components/search-form/SearchForm.js

@@ -163,7 +163,7 @@ function (_React$Component) {
         return React.createElement("div", {
           className: "action-buttons"
         }, onSubmit ? React.createElement("button", {
-          type: "button",
+          type: "submit",
           className: "action-button search-button",
           title: formatMessage(messages.searchButtonTitle)
         }, React.createElement(Search16, null)) : React.createElement("div", {

package/es/components/search-form/SearchForm.js.flow

@@ -165,7 +165,7 @@ class SearchForm extends React.Component<Props, State> {
             <div className="action-buttons">
                 {onSubmit ? (
                     <button
-                        type="button"
+                        type="submit"
                         className="action-button search-button"
                         title={formatMessage(messages.searchButtonTitle)}
                     >

package/es/components/search-form/SearchForm.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/search-form/SearchForm.js"],"names":["React","defineMessages","injectIntl","classNames","omit","ClearBadge16","Search16","makeLoadable","messages","clearButtonTitle","searchButtonTitle","searchLabel","SearchForm","isEmpty","event","props","onChange","shouldPreventClearEventPropagation","stopPropagation","searchInput","value","setState","target","trim","length","elements","onSubmit","element","getSearchInput","action","className","intl","isLoading","method","name","queryParams","useClearButton","rest","state","inputProps","formatMessage","classes","formClassNames","hiddenInputs","Object","keys","map","param","index","SearchActions","onClearHandler","LoadableSearchActions","onChangeStub","onChangeHandler","onSubmitHandler","setInputRef","Component","undefined"],"mappings":"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","sourcesContent":["// @flow\nimport * as React from 'react';\nimport { defineMessages, injectIntl } from 'react-intl';\nimport classNames from 'classnames';\nimport omit from 'lodash/omit';\n\nimport ClearBadge16 from '../../icon/fill/ClearBadge16';\nimport Search16 from '../../icon/fill/Search16';\n\nimport makeLoadable from '../loading-indicator/makeLoadable';\n\nimport './SearchForm.scss';\n\nconst messages = defineMessages({\n    clearButtonTitle: {\n        defaultMessage: 'Clear',\n        description: 'Title for a clear button',\n        id: 'boxui.searchForm.clearButtonTitle',\n    },\n    searchButtonTitle: {\n        defaultMessage: 'Search',\n        description: 'Title for a search button',\n        id: 'boxui.searchForm.searchButtonTitle',\n    },\n    searchLabel: {\n        defaultMessage: 'Search query',\n        description: 'Label for a search input',\n        id: 'boxui.searchForm.searchLabel',\n    },\n});\n\ntype Props = {\n    /** Form submit action */\n    action?: string,\n    className?: string,\n    getSearchInput?: Function,\n    intl: Object,\n    isLoading?: boolean,\n    /** The way to send the form data, get or post */\n    method?: 'get' | 'post',\n    /** Name of the text input */\n    name?: string,\n    /** On change handler for the search input, debounced by 250ms */\n    onChange?: Function,\n    /** On submit handler for the search input */\n    onSubmit?: Function,\n    /** Extra query parameters in addition to the form data */\n    queryParams: Object,\n    /** Boolean to prevent propogation of search clear action */\n    shouldPreventClearEventPropagation?: boolean,\n    /** If the clear button is shown when input field is not empty */\n    useClearButton?: boolean,\n    /** The value of the input if controlled */\n    value?: string,\n};\n\ntype State = {\n    isEmpty: boolean,\n};\n\nclass SearchForm extends React.Component<Props, State> {\n    static defaultProps = {\n        action: undefined,\n        method: 'get',\n        name: 'search',\n        queryParams: {},\n        useClearButton: false,\n    };\n\n    state = {\n        isEmpty: true,\n    };\n\n    static getDerivedStateFromProps(props: Props): any {\n        const { value } = props;\n\n        if (value && !!value.trim()) {\n            return {\n                isEmpty: true,\n            };\n        }\n\n        return null;\n    }\n\n    onClearHandler = (event: SyntheticEvent<>) => {\n        const { onChange, shouldPreventClearEventPropagation } = this.props;\n        if (shouldPreventClearEventPropagation) {\n            event.stopPropagation();\n        }\n\n        if (this.searchInput) {\n            this.searchInput.value = '';\n        }\n        this.setState({ isEmpty: true });\n\n        if (onChange) {\n            onChange('');\n        }\n    };\n\n    onChangeHandler = ({ target }) => {\n        const { value } = target;\n        const { onChange } = this.props;\n        this.setState({ isEmpty: !value || !value.trim().length });\n\n        if (onChange) {\n            onChange(value);\n        }\n    };\n\n    onSubmitHandler = event => {\n        const { value } = event.target.elements[0];\n        const { onSubmit } = this.props;\n\n        if (onSubmit) {\n            onSubmit(value, event);\n        }\n    };\n\n    setInputRef = element => {\n        this.searchInput = element;\n\n        if (this.props.getSearchInput) {\n            this.props.getSearchInput(this.searchInput);\n        }\n    };\n\n    searchInput: ?HTMLInputElement;\n\n    render() {\n        const {\n            action,\n            className,\n            intl,\n            isLoading,\n            method,\n            name,\n            queryParams,\n            onSubmit,\n            useClearButton,\n            ...rest\n        } = this.props;\n        const { isEmpty } = this.state;\n\n        const inputProps = omit(rest, [\n            'getSearchInput',\n            'onChange',\n            'onSubmit',\n            'required',\n            'shouldPreventClearEventPropagation',\n        ]);\n\n        const { formatMessage } = intl;\n        const classes = classNames(className, 'search-input-container');\n        const formClassNames = classNames('search-form', {\n            'is-empty': isEmpty,\n            'use-clear-button': useClearButton,\n        });\n        const hiddenInputs = Object.keys(queryParams).map((param, index) => (\n            <input key={index} name={param} type=\"hidden\" value={queryParams[param]} />\n        ));\n\n        const SearchActions = () => (\n            <div className=\"action-buttons\">\n                {onSubmit ? (\n                    <button\n                        type=\"button\"\n                        className=\"action-button search-button\"\n                        title={formatMessage(messages.searchButtonTitle)}\n                    >\n                        <Search16 />\n                    </button>\n                ) : (\n                    <div className=\"action-button search-button\">\n                        <Search16 />\n                    </div>\n                )}\n\n                <button\n                    className=\"action-button clear-button\"\n                    onClick={this.onClearHandler}\n                    title={formatMessage(messages.clearButtonTitle)}\n                    type=\"button\"\n                >\n                    <ClearBadge16 />\n                </button>\n            </div>\n        );\n\n        const LoadableSearchActions = makeLoadable(SearchActions);\n\n        // @NOTE Prevent errors from React about controlled inputs\n        const onChangeStub = () => {};\n\n        return (\n            <div className={classes}>\n                <form\n                    action={action}\n                    className={formClassNames}\n                    method={method}\n                    onChange={this.onChangeHandler}\n                    onSubmit={this.onSubmitHandler}\n                    role=\"search\"\n                >\n                    <input\n                        ref={this.setInputRef}\n                        aria-label={formatMessage(messages.searchLabel)}\n                        autoComplete=\"off\"\n                        className=\"search-input\"\n                        name={name}\n                        onChange={onChangeStub}\n                        type=\"search\"\n                        {...inputProps}\n                    />\n                    <LoadableSearchActions\n                        isLoading={isLoading}\n                        loadingIndicatorProps={{\n                            className: 'search-form-loading-indicator',\n                        }}\n                    />\n                    {hiddenInputs}\n                </form>\n            </div>\n        );\n    }\n}\n\nexport default injectIntl(SearchForm);\n"],"file":"SearchForm.js"}
+{"version":3,"sources":["../../../src/components/search-form/SearchForm.js"],"names":["React","defineMessages","injectIntl","classNames","omit","ClearBadge16","Search16","makeLoadable","messages","clearButtonTitle","searchButtonTitle","searchLabel","SearchForm","isEmpty","event","props","onChange","shouldPreventClearEventPropagation","stopPropagation","searchInput","value","setState","target","trim","length","elements","onSubmit","element","getSearchInput","action","className","intl","isLoading","method","name","queryParams","useClearButton","rest","state","inputProps","formatMessage","classes","formClassNames","hiddenInputs","Object","keys","map","param","index","SearchActions","onClearHandler","LoadableSearchActions","onChangeStub","onChangeHandler","onSubmitHandler","setInputRef","Component","undefined"],"mappings":"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","sourcesContent":["// @flow\nimport * as React from 'react';\nimport { defineMessages, injectIntl } from 'react-intl';\nimport classNames from 'classnames';\nimport omit from 'lodash/omit';\n\nimport ClearBadge16 from '../../icon/fill/ClearBadge16';\nimport Search16 from '../../icon/fill/Search16';\n\nimport makeLoadable from '../loading-indicator/makeLoadable';\n\nimport './SearchForm.scss';\n\nconst messages = defineMessages({\n    clearButtonTitle: {\n        defaultMessage: 'Clear',\n        description: 'Title for a clear button',\n        id: 'boxui.searchForm.clearButtonTitle',\n    },\n    searchButtonTitle: {\n        defaultMessage: 'Search',\n        description: 'Title for a search button',\n        id: 'boxui.searchForm.searchButtonTitle',\n    },\n    searchLabel: {\n        defaultMessage: 'Search query',\n        description: 'Label for a search input',\n        id: 'boxui.searchForm.searchLabel',\n    },\n});\n\ntype Props = {\n    /** Form submit action */\n    action?: string,\n    className?: string,\n    getSearchInput?: Function,\n    intl: Object,\n    isLoading?: boolean,\n    /** The way to send the form data, get or post */\n    method?: 'get' | 'post',\n    /** Name of the text input */\n    name?: string,\n    /** On change handler for the search input, debounced by 250ms */\n    onChange?: Function,\n    /** On submit handler for the search input */\n    onSubmit?: Function,\n    /** Extra query parameters in addition to the form data */\n    queryParams: Object,\n    /** Boolean to prevent propogation of search clear action */\n    shouldPreventClearEventPropagation?: boolean,\n    /** If the clear button is shown when input field is not empty */\n    useClearButton?: boolean,\n    /** The value of the input if controlled */\n    value?: string,\n};\n\ntype State = {\n    isEmpty: boolean,\n};\n\nclass SearchForm extends React.Component<Props, State> {\n    static defaultProps = {\n        action: undefined,\n        method: 'get',\n        name: 'search',\n        queryParams: {},\n        useClearButton: false,\n    };\n\n    state = {\n        isEmpty: true,\n    };\n\n    static getDerivedStateFromProps(props: Props): any {\n        const { value } = props;\n\n        if (value && !!value.trim()) {\n            return {\n                isEmpty: true,\n            };\n        }\n\n        return null;\n    }\n\n    onClearHandler = (event: SyntheticEvent<>) => {\n        const { onChange, shouldPreventClearEventPropagation } = this.props;\n        if (shouldPreventClearEventPropagation) {\n            event.stopPropagation();\n        }\n\n        if (this.searchInput) {\n            this.searchInput.value = '';\n        }\n        this.setState({ isEmpty: true });\n\n        if (onChange) {\n            onChange('');\n        }\n    };\n\n    onChangeHandler = ({ target }) => {\n        const { value } = target;\n        const { onChange } = this.props;\n        this.setState({ isEmpty: !value || !value.trim().length });\n\n        if (onChange) {\n            onChange(value);\n        }\n    };\n\n    onSubmitHandler = event => {\n        const { value } = event.target.elements[0];\n        const { onSubmit } = this.props;\n\n        if (onSubmit) {\n            onSubmit(value, event);\n        }\n    };\n\n    setInputRef = element => {\n        this.searchInput = element;\n\n        if (this.props.getSearchInput) {\n            this.props.getSearchInput(this.searchInput);\n        }\n    };\n\n    searchInput: ?HTMLInputElement;\n\n    render() {\n        const {\n            action,\n            className,\n            intl,\n            isLoading,\n            method,\n            name,\n            queryParams,\n            onSubmit,\n            useClearButton,\n            ...rest\n        } = this.props;\n        const { isEmpty } = this.state;\n\n        const inputProps = omit(rest, [\n            'getSearchInput',\n            'onChange',\n            'onSubmit',\n            'required',\n            'shouldPreventClearEventPropagation',\n        ]);\n\n        const { formatMessage } = intl;\n        const classes = classNames(className, 'search-input-container');\n        const formClassNames = classNames('search-form', {\n            'is-empty': isEmpty,\n            'use-clear-button': useClearButton,\n        });\n        const hiddenInputs = Object.keys(queryParams).map((param, index) => (\n            <input key={index} name={param} type=\"hidden\" value={queryParams[param]} />\n        ));\n\n        const SearchActions = () => (\n            <div className=\"action-buttons\">\n                {onSubmit ? (\n                    <button\n                        type=\"submit\"\n                        className=\"action-button search-button\"\n                        title={formatMessage(messages.searchButtonTitle)}\n                    >\n                        <Search16 />\n                    </button>\n                ) : (\n                    <div className=\"action-button search-button\">\n                        <Search16 />\n                    </div>\n                )}\n\n                <button\n                    className=\"action-button clear-button\"\n                    onClick={this.onClearHandler}\n                    title={formatMessage(messages.clearButtonTitle)}\n                    type=\"button\"\n                >\n                    <ClearBadge16 />\n                </button>\n            </div>\n        );\n\n        const LoadableSearchActions = makeLoadable(SearchActions);\n\n        // @NOTE Prevent errors from React about controlled inputs\n        const onChangeStub = () => {};\n\n        return (\n            <div className={classes}>\n                <form\n                    action={action}\n                    className={formClassNames}\n                    method={method}\n                    onChange={this.onChangeHandler}\n                    onSubmit={this.onSubmitHandler}\n                    role=\"search\"\n                >\n                    <input\n                        ref={this.setInputRef}\n                        aria-label={formatMessage(messages.searchLabel)}\n                        autoComplete=\"off\"\n                        className=\"search-input\"\n                        name={name}\n                        onChange={onChangeStub}\n                        type=\"search\"\n                        {...inputProps}\n                    />\n                    <LoadableSearchActions\n                        isLoading={isLoading}\n                        loadingIndicatorProps={{\n                            className: 'search-form-loading-indicator',\n                        }}\n                    />\n                    {hiddenInputs}\n                </form>\n            </div>\n        );\n    }\n}\n\nexport default injectIntl(SearchForm);\n"],"file":"SearchForm.js"}