box-ui-elements 16.1.0-beta.9 → 17.0.0

package/es/components/popper/PopperComponent.js.flow

@@ -7,12 +7,13 @@ import { PLACEMENT_AUTO } from './constants';
 type Props = {
     children: React.Node,
     isOpen?: boolean,
+    isPositionDynamic?: boolean,
     modifiers?: Modifiers,
     placement: Placement,
 };
 
 const PopperComponent = (props: Props) => {
-    const { children, isOpen, modifiers, placement: popperPlacement } = props;
+    const { children, isPositionDynamic = true, isOpen, modifiers, placement: popperPlacement } = props;
     const elements = React.Children.toArray(children);
 
     if (elements.length !== 2) {
@@ -30,7 +31,7 @@ const PopperComponent = (props: Props) => {
                         const { style: contentStyles } = popperContent.props;
                         return React.cloneElement(popperContent, {
                             ref,
-                            style: { ...contentStyles, ...style },
+                            style: { ...contentStyles, ...(isPositionDynamic && style) },
                             placement,
                             scheduleUpdate,
                         });

package/es/components/popper/PopperComponent.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/popper/PopperComponent.js"],"names":["React","Manager","Reference","Popper","PLACEMENT_AUTO","PopperComponent","props","children","isOpen","modifiers","popperPlacement","placement","elements","Children","toArray","length","Error","reference","popperContent","ref","cloneElement","style","scheduleUpdate","contentStyles","defaultProps"],"mappings":";;;;;;;;;;;;;;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,OAAT,EAAkBC,SAAlB,EAA6BC,MAA7B,QAA2C,cAA3C;AAEA,SAASC,cAAT,QAA+B,aAA/B;;AASA,IAAMC,eAAe,GAAG,SAAlBA,eAAkB,CAACC,KAAD,EAAkB;AAAA,MAC9BC,QAD8B,GAC8BD,KAD9B,CAC9BC,QAD8B;AAAA,MACpBC,MADoB,GAC8BF,KAD9B,CACpBE,MADoB;AAAA,MACZC,SADY,GAC8BH,KAD9B,CACZG,SADY;AAAA,MACUC,eADV,GAC8BJ,KAD9B,CACDK,SADC;AAEtC,MAAMC,QAAQ,GAAGZ,KAAK,CAACa,QAAN,CAAeC,OAAf,CAAuBP,QAAvB,CAAjB;;AAEA,MAAIK,QAAQ,CAACG,MAAT,KAAoB,CAAxB,EAA2B;AACvB,UAAM,IAAIC,KAAJ,CAAU,8FAAV,CAAN;AACH;;AANqC,iCAQHJ,QARG;AAAA,MAQ/BK,SAR+B;AAAA,MAQpBC,aARoB;;AAUtC,SACI,oBAAC,OAAD,QACI,oBAAC,SAAD,QAAY;AAAA,QAAGC,GAAH,QAAGA,GAAH;AAAA,WAAanB,KAAK,CAACoB,YAAN,CAAmBH,SAAnB,EAA8B;AAAEE,MAAAA,GAAG,EAAHA;AAAF,KAA9B,CAAb;AAAA,GAAZ,CADJ,EAEKX,MAAM,IACH,oBAAC,MAAD;AAAQ,IAAA,SAAS,EAAEE,eAAnB;AAAoC,IAAA,SAAS,EAAED;AAA/C,KACK,iBAA+C;AAAA,QAA5CU,GAA4C,SAA5CA,GAA4C;AAAA,QAAvCE,KAAuC,SAAvCA,KAAuC;AAAA,QAAhCV,SAAgC,SAAhCA,SAAgC;AAAA,QAArBW,cAAqB,SAArBA,cAAqB;AAAA,QAC7BC,aAD6B,GACXL,aAAa,CAACZ,KADH,CACpCe,KADoC;AAE5C,WAAOrB,KAAK,CAACoB,YAAN,CAAmBF,aAAnB,EAAkC;AACrCC,MAAAA,GAAG,EAAHA,GADqC;AAErCE,MAAAA,KAAK,oBAAOE,aAAP,MAAyBF,KAAzB,CAFgC;AAGrCV,MAAAA,SAAS,EAATA,SAHqC;AAIrCW,MAAAA,cAAc,EAAdA;AAJqC,KAAlC,CAAP;AAMH,GATL,CAHR,CADJ;AAkBH,CA5BD;;AA8BAjB,eAAe,CAACmB,YAAhB,GAA+B;AAC3Bb,EAAAA,SAAS,EAAEP;AADgB,CAA/B;AAIA,eAAeC,eAAf","sourcesContent":["// @flow\nimport * as React from 'react';\nimport { Manager, Reference, Popper } from 'react-popper';\nimport type { Modifiers, Placement } from 'popper.js';\nimport { PLACEMENT_AUTO } from './constants';\n\ntype Props = {\n    children: React.Node,\n    isOpen?: boolean,\n    modifiers?: Modifiers,\n    placement: Placement,\n};\n\nconst PopperComponent = (props: Props) => {\n    const { children, isOpen, modifiers, placement: popperPlacement } = props;\n    const elements = React.Children.toArray(children);\n\n    if (elements.length !== 2) {\n        throw new Error('PopperComponent must have exactly two children: A reference component and the Popper content');\n    }\n\n    const [reference, popperContent] = elements;\n\n    return (\n        <Manager>\n            <Reference>{({ ref }) => React.cloneElement(reference, { ref })}</Reference>\n            {isOpen && (\n                <Popper placement={popperPlacement} modifiers={modifiers}>\n                    {({ ref, style, placement, scheduleUpdate }) => {\n                        const { style: contentStyles } = popperContent.props;\n                        return React.cloneElement(popperContent, {\n                            ref,\n                            style: { ...contentStyles, ...style },\n                            placement,\n                            scheduleUpdate,\n                        });\n                    }}\n                </Popper>\n            )}\n        </Manager>\n    );\n};\n\nPopperComponent.defaultProps = {\n    placement: PLACEMENT_AUTO,\n};\n\nexport default PopperComponent;\n"],"file":"PopperComponent.js"}
+{"version":3,"sources":["../../../src/components/popper/PopperComponent.js"],"names":["React","Manager","Reference","Popper","PLACEMENT_AUTO","PopperComponent","props","children","isPositionDynamic","isOpen","modifiers","popperPlacement","placement","elements","Children","toArray","length","Error","reference","popperContent","ref","cloneElement","style","scheduleUpdate","contentStyles","defaultProps"],"mappings":";;;;;;;;;;;;;;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,OAAT,EAAkBC,SAAlB,EAA6BC,MAA7B,QAA2C,cAA3C;AAEA,SAASC,cAAT,QAA+B,aAA/B;;AAUA,IAAMC,eAAe,GAAG,SAAlBA,eAAkB,CAACC,KAAD,EAAkB;AAAA,MAC9BC,QAD8B,GACwDD,KADxD,CAC9BC,QAD8B;AAAA,8BACwDD,KADxD,CACpBE,iBADoB;AAAA,MACpBA,iBADoB,sCACA,IADA;AAAA,MACMC,MADN,GACwDH,KADxD,CACMG,MADN;AAAA,MACcC,SADd,GACwDJ,KADxD,CACcI,SADd;AAAA,MACoCC,eADpC,GACwDL,KADxD,CACyBM,SADzB;AAEtC,MAAMC,QAAQ,GAAGb,KAAK,CAACc,QAAN,CAAeC,OAAf,CAAuBR,QAAvB,CAAjB;;AAEA,MAAIM,QAAQ,CAACG,MAAT,KAAoB,CAAxB,EAA2B;AACvB,UAAM,IAAIC,KAAJ,CAAU,8FAAV,CAAN;AACH;;AANqC,iCAQHJ,QARG;AAAA,MAQ/BK,SAR+B;AAAA,MAQpBC,aARoB;;AAUtC,SACI,oBAAC,OAAD,QACI,oBAAC,SAAD,QAAY;AAAA,QAAGC,GAAH,QAAGA,GAAH;AAAA,WAAapB,KAAK,CAACqB,YAAN,CAAmBH,SAAnB,EAA8B;AAAEE,MAAAA,GAAG,EAAHA;AAAF,KAA9B,CAAb;AAAA,GAAZ,CADJ,EAEKX,MAAM,IACH,oBAAC,MAAD;AAAQ,IAAA,SAAS,EAAEE,eAAnB;AAAoC,IAAA,SAAS,EAAED;AAA/C,KACK,iBAA+C;AAAA,QAA5CU,GAA4C,SAA5CA,GAA4C;AAAA,QAAvCE,KAAuC,SAAvCA,KAAuC;AAAA,QAAhCV,SAAgC,SAAhCA,SAAgC;AAAA,QAArBW,cAAqB,SAArBA,cAAqB;AAAA,QAC7BC,aAD6B,GACXL,aAAa,CAACb,KADH,CACpCgB,KADoC;AAE5C,WAAOtB,KAAK,CAACqB,YAAN,CAAmBF,aAAnB,EAAkC;AACrCC,MAAAA,GAAG,EAAHA,GADqC;AAErCE,MAAAA,KAAK,oBAAOE,aAAP,MAA0BhB,iBAAiB,IAAIc,KAA/C,CAFgC;AAGrCV,MAAAA,SAAS,EAATA,SAHqC;AAIrCW,MAAAA,cAAc,EAAdA;AAJqC,KAAlC,CAAP;AAMH,GATL,CAHR,CADJ;AAkBH,CA5BD;;AA8BAlB,eAAe,CAACoB,YAAhB,GAA+B;AAC3Bb,EAAAA,SAAS,EAAER;AADgB,CAA/B;AAIA,eAAeC,eAAf","sourcesContent":["// @flow\nimport * as React from 'react';\nimport { Manager, Reference, Popper } from 'react-popper';\nimport type { Modifiers, Placement } from 'popper.js';\nimport { PLACEMENT_AUTO } from './constants';\n\ntype Props = {\n    children: React.Node,\n    isOpen?: boolean,\n    isPositionDynamic?: boolean,\n    modifiers?: Modifiers,\n    placement: Placement,\n};\n\nconst PopperComponent = (props: Props) => {\n    const { children, isPositionDynamic = true, isOpen, modifiers, placement: popperPlacement } = props;\n    const elements = React.Children.toArray(children);\n\n    if (elements.length !== 2) {\n        throw new Error('PopperComponent must have exactly two children: A reference component and the Popper content');\n    }\n\n    const [reference, popperContent] = elements;\n\n    return (\n        <Manager>\n            <Reference>{({ ref }) => React.cloneElement(reference, { ref })}</Reference>\n            {isOpen && (\n                <Popper placement={popperPlacement} modifiers={modifiers}>\n                    {({ ref, style, placement, scheduleUpdate }) => {\n                        const { style: contentStyles } = popperContent.props;\n                        return React.cloneElement(popperContent, {\n                            ref,\n                            style: { ...contentStyles, ...(isPositionDynamic && style) },\n                            placement,\n                            scheduleUpdate,\n                        });\n                    }}\n                </Popper>\n            )}\n        </Manager>\n    );\n};\n\nPopperComponent.defaultProps = {\n    placement: PLACEMENT_AUTO,\n};\n\nexport default PopperComponent;\n"],"file":"PopperComponent.js"}

package/es/components/radio/RadioButton.scss

@@ -63,5 +63,5 @@
 .radio-description {
     margin-top: 2px;
     margin-left: 24px;
-    color: $bdl-gray-62;
+    color: $bdl-gray-65;
 }

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

@@ -47,23 +47,23 @@ var messages = defineMessages({
   }
 });
 
-var SearchForm =
+var SearchFormBase =
 /*#__PURE__*/
 function (_React$Component) {
-  _inherits(SearchForm, _React$Component);
+  _inherits(SearchFormBase, _React$Component);
 
-  function SearchForm() {
+  function SearchFormBase() {
     var _getPrototypeOf2;
 
     var _this;
 
-    _classCallCheck(this, SearchForm);
+    _classCallCheck(this, SearchFormBase);
 
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
 
-    _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(SearchForm)).call.apply(_getPrototypeOf2, [this].concat(args)));
+    _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(SearchFormBase)).call.apply(_getPrototypeOf2, [this].concat(args)));
 
     _defineProperty(_assertThisInitialized(_this), "state", {
       isEmpty: true
@@ -125,7 +125,7 @@ function (_React$Component) {
     return _this;
   }
 
-  _createClass(SearchForm, [{
+  _createClass(SearchFormBase, [{
     key: "render",
     value: function render() {
       var _this2 = this;
@@ -133,6 +133,7 @@ function (_React$Component) {
       var _this$props2 = this.props,
           action = _this$props2.action,
           className = _this$props2.className,
+          innerRef = _this$props2.innerRef,
           intl = _this$props2.intl,
           isLoading = _this$props2.isLoading,
           method = _this$props2.method,
@@ -140,7 +141,7 @@ function (_React$Component) {
           queryParams = _this$props2.queryParams,
           onSubmit = _this$props2.onSubmit,
           useClearButton = _this$props2.useClearButton,
-          rest = _objectWithoutProperties(_this$props2, ["action", "className", "intl", "isLoading", "method", "name", "queryParams", "onSubmit", "useClearButton"]);
+          rest = _objectWithoutProperties(_this$props2, ["action", "className", "innerRef", "intl", "isLoading", "method", "name", "queryParams", "onSubmit", "useClearButton"]);
 
       var isEmpty = this.state.isEmpty;
       var inputProps = omit(rest, ['getSearchInput', 'onChange', 'onSubmit', 'required', 'shouldPreventClearEventPropagation']);
@@ -181,6 +182,7 @@ function (_React$Component) {
       var onChangeStub = function onChangeStub() {};
 
       return React.createElement("div", {
+        ref: innerRef,
         className: classes
       }, React.createElement("form", {
         action: action,
@@ -219,16 +221,24 @@ function (_React$Component) {
     }
   }]);
 
-  return SearchForm;
+  return SearchFormBase;
 }(React.Component);
 
-_defineProperty(SearchForm, "defaultProps", {
-  action: undefined,
+_defineProperty(SearchFormBase, "defaultProps", {
+  action: '',
   method: 'get',
   name: 'search',
   queryParams: {},
   useClearButton: false
 });
 
-export default injectIntl(SearchForm);
+var SearchFormBaseIntl = injectIntl(SearchFormBase);
+export { SearchFormBaseIntl };
+var SearchForm = React.forwardRef(function (props, ref) {
+  return React.createElement(SearchFormBaseIntl, _extends({}, props, {
+    innerRef: ref
+  }));
+});
+SearchForm.displayName = 'SearchForm';
+export default SearchForm;
 //# sourceMappingURL=SearchForm.js.map

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

@@ -34,6 +34,7 @@ type Props = {
     action?: string,
     className?: string,
     getSearchInput?: Function,
+    innerRef?: React.Ref<any>,
     intl: Object,
     isLoading?: boolean,
     /** The way to send the form data, get or post */
@@ -45,7 +46,7 @@ type Props = {
     /** On submit handler for the search input */
     onSubmit?: Function,
     /** Extra query parameters in addition to the form data */
-    queryParams: Object,
+    queryParams: { [arg: string]: string },
     /** Boolean to prevent propogation of search clear action */
     shouldPreventClearEventPropagation?: boolean,
     /** If the clear button is shown when input field is not empty */
@@ -54,13 +55,27 @@ type Props = {
     value?: string,
 };
 
+type DefaultProps = {
+    action: string,
+    method: 'get' | 'post',
+    name: string,
+    queryParams: { [arg: string]: string },
+    useClearButton: boolean,
+};
+
+type IntlProps = {
+    intl: Object,
+};
+
 type State = {
     isEmpty: boolean,
 };
 
-class SearchForm extends React.Component<Props, State> {
-    static defaultProps = {
-        action: undefined,
+type Config = React.Config<Props, DefaultProps & IntlProps>;
+
+class SearchFormBase extends React.Component<Props, State> {
+    static defaultProps: DefaultProps = {
+        action: '',
         method: 'get',
         name: 'search',
         queryParams: {},
@@ -132,6 +147,7 @@ class SearchForm extends React.Component<Props, State> {
         const {
             action,
             className,
+            innerRef,
             intl,
             isLoading,
             method,
@@ -194,7 +210,7 @@ class SearchForm extends React.Component<Props, State> {
         const onChangeStub = () => {};
 
         return (
-            <div className={classes}>
+            <div ref={innerRef} className={classes}>
                 <form
                     action={action}
                     className={formClassNames}
@@ -226,4 +242,12 @@ class SearchForm extends React.Component<Props, State> {
     }
 }
 
-export default injectIntl(SearchForm);
+const SearchFormBaseIntl = injectIntl(SearchFormBase);
+export { SearchFormBaseIntl };
+
+const SearchForm = React.forwardRef<Config, HTMLDivElement>((props: Config, ref: React.Ref<any>) => (
+    <SearchFormBaseIntl {...props} innerRef={ref} />
+));
+SearchForm.displayName = 'SearchForm';
+
+export default SearchForm;

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=\"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"}
+{"version":3,"sources":["../../../src/components/search-form/SearchForm.js"],"names":["React","defineMessages","injectIntl","classNames","omit","ClearBadge16","Search16","makeLoadable","messages","clearButtonTitle","searchButtonTitle","searchLabel","SearchFormBase","isEmpty","event","props","onChange","shouldPreventClearEventPropagation","stopPropagation","searchInput","value","setState","target","trim","length","elements","onSubmit","element","getSearchInput","action","className","innerRef","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","SearchFormBaseIntl","SearchForm","forwardRef","ref","displayName"],"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    innerRef?: React.Ref<any>,\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: { [arg: string]: string },\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 DefaultProps = {\n    action: string,\n    method: 'get' | 'post',\n    name: string,\n    queryParams: { [arg: string]: string },\n    useClearButton: boolean,\n};\n\ntype IntlProps = {\n    intl: Object,\n};\n\ntype State = {\n    isEmpty: boolean,\n};\n\ntype Config = React.Config<Props, DefaultProps & IntlProps>;\n\nclass SearchFormBase extends React.Component<Props, State> {\n    static defaultProps: DefaultProps = {\n        action: '',\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            innerRef,\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 ref={innerRef} 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\nconst SearchFormBaseIntl = injectIntl(SearchFormBase);\nexport { SearchFormBaseIntl };\n\nconst SearchForm = React.forwardRef<Config, HTMLDivElement>((props: Config, ref: React.Ref<any>) => (\n    <SearchFormBaseIntl {...props} innerRef={ref} />\n));\nSearchForm.displayName = 'SearchForm';\n\nexport default SearchForm;\n"],"file":"SearchForm.js"}

package/es/components/select-button/SelectButton.js

@@ -13,13 +13,17 @@ var SelectButton = React.forwardRef(function (_ref, ref) {
       _ref$className = _ref.className,
       className = _ref$className === void 0 ? '' : _ref$className,
       error = _ref.error,
+      _ref$errorTooltipPosi = _ref.errorTooltipPosition,
+      errorTooltipPosition = _ref$errorTooltipPosi === void 0 ? 'middle-right' : _ref$errorTooltipPosi,
       _ref$isDisabled = _ref.isDisabled,
       isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
-      rest = _objectWithoutProperties(_ref, ["children", "className", "error", "isDisabled"]);
+      tooltipTetherClassName = _ref.tooltipTetherClassName,
+      rest = _objectWithoutProperties(_ref, ["children", "className", "error", "errorTooltipPosition", "isDisabled", "tooltipTetherClassName"]);
 
   return React.createElement(Tooltip, {
     isShown: !!error,
-    position: "middle-right",
+    position: errorTooltipPosition,
+    tetherElementClassName: tooltipTetherClassName,
     text: error,
     theme: "error"
   }, React.createElement("button", _extends({

package/es/components/select-button/SelectButton.js.flow

@@ -3,18 +3,39 @@ import * as React from 'react';
 import classNames from 'classnames';
 
 import Tooltip from '../tooltip';
+import type { Position } from '../tooltip';
 import './SelectButton.scss';
 
 type Props = {
     children?: React.Node,
     className: string,
     error?: React.Node,
+    errorTooltipPosition?: Position,
     isDisabled: boolean,
+    /** A CSS class for the tooltip's tether element component */
+    tooltipTetherClassName?: string,
 };
 
 const SelectButton = React.forwardRef<Props, HTMLButtonElement>(
-    ({ children, className = '', error, isDisabled = false, ...rest }: Props, ref) => (
-        <Tooltip isShown={!!error} position="middle-right" text={error} theme="error">
+    (
+        {
+            children,
+            className = '',
+            error,
+            errorTooltipPosition = 'middle-right',
+            isDisabled = false,
+            tooltipTetherClassName,
+            ...rest
+        }: Props,
+        ref,
+    ) => (
+        <Tooltip
+            isShown={!!error}
+            position={errorTooltipPosition}
+            tetherElementClassName={tooltipTetherClassName}
+            text={error}
+            theme="error"
+        >
             <button
                 className={classNames(className, 'select-button', 'bdl-SelectButton', {
                     'is-invalid': !!error,

package/es/components/select-button/SelectButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/select-button/SelectButton.js"],"names":["React","classNames","Tooltip","SelectButton","forwardRef","ref","children","className","error","isDisabled","rest"],"mappings":";;;;;;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AAEA,OAAOC,OAAP,MAAoB,YAApB;AACA,OAAO,qBAAP;AASA,IAAMC,YAAY,GAAGH,KAAK,CAACI,UAAN,CACjB,gBAA0EC,GAA1E;AAAA,MAAGC,QAAH,QAAGA,QAAH;AAAA,4BAAaC,SAAb;AAAA,MAAaA,SAAb,+BAAyB,EAAzB;AAAA,MAA6BC,KAA7B,QAA6BA,KAA7B;AAAA,6BAAoCC,UAApC;AAAA,MAAoCA,UAApC,gCAAiD,KAAjD;AAAA,MAA2DC,IAA3D;;AAAA,SACI,oBAAC,OAAD;AAAS,IAAA,OAAO,EAAE,CAAC,CAACF,KAApB;AAA2B,IAAA,QAAQ,EAAC,cAApC;AAAmD,IAAA,IAAI,EAAEA,KAAzD;AAAgE,IAAA,KAAK,EAAC;AAAtE,KACI;AACI,IAAA,SAAS,EAAEP,UAAU,CAACM,SAAD,EAAY,eAAZ,EAA6B,kBAA7B,EAAiD;AAClE,oBAAc,CAAC,CAACC;AADkD,KAAjD,CADzB;AAII,IAAA,QAAQ,EAAEC,UAJd;AAKI,IAAA,GAAG,EAAEJ,GALT;AAMI,IAAA,IAAI,EAAC;AANT,KAOQK,IAPR,GASKJ,QATL,CADJ,CADJ;AAAA,CADiB,CAArB;AAkBA,eAAeH,YAAf","sourcesContent":["// @flow\nimport * as React from 'react';\nimport classNames from 'classnames';\n\nimport Tooltip from '../tooltip';\nimport './SelectButton.scss';\n\ntype Props = {\n    children?: React.Node,\n    className: string,\n    error?: React.Node,\n    isDisabled: boolean,\n};\n\nconst SelectButton = React.forwardRef<Props, HTMLButtonElement>(\n    ({ children, className = '', error, isDisabled = false, ...rest }: Props, ref) => (\n        <Tooltip isShown={!!error} position=\"middle-right\" text={error} theme=\"error\">\n            <button\n                className={classNames(className, 'select-button', 'bdl-SelectButton', {\n                    'is-invalid': !!error,\n                })}\n                disabled={isDisabled}\n                ref={ref}\n                type=\"button\"\n                {...rest}\n            >\n                {children}\n            </button>\n        </Tooltip>\n    ),\n);\n\nexport default SelectButton;\n"],"file":"SelectButton.js"}
+{"version":3,"sources":["../../../src/components/select-button/SelectButton.js"],"names":["React","classNames","Tooltip","SelectButton","forwardRef","ref","children","className","error","errorTooltipPosition","isDisabled","tooltipTetherClassName","rest"],"mappings":";;;;;;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AAEA,OAAOC,OAAP,MAAoB,YAApB;AAEA,OAAO,qBAAP;AAYA,IAAMC,YAAY,GAAGH,KAAK,CAACI,UAAN,CACjB,gBAUIC,GAVJ;AAAA,MAEQC,QAFR,QAEQA,QAFR;AAAA,4BAGQC,SAHR;AAAA,MAGQA,SAHR,+BAGoB,EAHpB;AAAA,MAIQC,KAJR,QAIQA,KAJR;AAAA,mCAKQC,oBALR;AAAA,MAKQA,oBALR,sCAK+B,cAL/B;AAAA,6BAMQC,UANR;AAAA,MAMQA,UANR,gCAMqB,KANrB;AAAA,MAOQC,sBAPR,QAOQA,sBAPR;AAAA,MAQWC,IARX;;AAAA,SAYI,oBAAC,OAAD;AACI,IAAA,OAAO,EAAE,CAAC,CAACJ,KADf;AAEI,IAAA,QAAQ,EAAEC,oBAFd;AAGI,IAAA,sBAAsB,EAAEE,sBAH5B;AAII,IAAA,IAAI,EAAEH,KAJV;AAKI,IAAA,KAAK,EAAC;AALV,KAOI;AACI,IAAA,SAAS,EAAEP,UAAU,CAACM,SAAD,EAAY,eAAZ,EAA6B,kBAA7B,EAAiD;AAClE,oBAAc,CAAC,CAACC;AADkD,KAAjD,CADzB;AAII,IAAA,QAAQ,EAAEE,UAJd;AAKI,IAAA,GAAG,EAAEL,GALT;AAMI,IAAA,IAAI,EAAC;AANT,KAOQO,IAPR,GASKN,QATL,CAPJ,CAZJ;AAAA,CADiB,CAArB;AAmCA,eAAeH,YAAf","sourcesContent":["// @flow\nimport * as React from 'react';\nimport classNames from 'classnames';\n\nimport Tooltip from '../tooltip';\nimport type { Position } from '../tooltip';\nimport './SelectButton.scss';\n\ntype Props = {\n    children?: React.Node,\n    className: string,\n    error?: React.Node,\n    errorTooltipPosition?: Position,\n    isDisabled: boolean,\n    /** A CSS class for the tooltip's tether element component */\n    tooltipTetherClassName?: string,\n};\n\nconst SelectButton = React.forwardRef<Props, HTMLButtonElement>(\n    (\n        {\n            children,\n            className = '',\n            error,\n            errorTooltipPosition = 'middle-right',\n            isDisabled = false,\n            tooltipTetherClassName,\n            ...rest\n        }: Props,\n        ref,\n    ) => (\n        <Tooltip\n            isShown={!!error}\n            position={errorTooltipPosition}\n            tetherElementClassName={tooltipTetherClassName}\n            text={error}\n            theme=\"error\"\n        >\n            <button\n                className={classNames(className, 'select-button', 'bdl-SelectButton', {\n                    'is-invalid': !!error,\n                })}\n                disabled={isDisabled}\n                ref={ref}\n                type=\"button\"\n                {...rest}\n            >\n                {children}\n            </button>\n        </Tooltip>\n    ),\n);\n\nexport default SelectButton;\n"],"file":"SelectButton.js"}

package/es/components/select-field/BaseSelectField.js

@@ -440,7 +440,9 @@ function (_React$Component) {
           buttonElProps = _this$props4.buttonProps,
           isDisabled = _this$props4.isDisabled,
           className = _this$props4.className,
-          error = _this$props4.error;
+          error = _this$props4.error,
+          errorTooltipPosition = _this$props4.errorTooltipPosition,
+          tooltipTetherClassName = _this$props4.tooltipTetherClassName;
 
       var buttonText = _this.renderButtonText();
 
@@ -461,7 +463,9 @@ function (_React$Component) {
       return (// Need to store the select button reference so we can calculate the button width
         // in order to set it as the min width of the dropdown list
         React.createElement(SelectButton, _extends({}, buttonProps, {
-          error: error
+          error: error,
+          errorTooltipPosition: errorTooltipPosition,
+          tooltipTetherClassName: tooltipTetherClassName
         }), buttonText)
       );
     });

package/es/components/select-field/BaseSelectField.js.flow

@@ -11,6 +11,7 @@ import SelectButton from '../select-button';
 import DatalistItem from '../datalist-item';
 import PopperComponent from '../popper';
 import SelectFieldDropdown from './SelectFieldDropdown';
+import type { Position } from '../tooltip';
 import type { SelectOptionValueProp, SelectOptionProp } from './props';
 import { PLACEMENT_BOTTOM_END, PLACEMENT_BOTTOM_START } from '../popper/constants';
 import SearchForm from '../search-form/SearchForm';
@@ -47,6 +48,8 @@ type Props = {
     defaultValue?: SelectOptionValueProp,
     /** An optional error to show within a tooltip. */
     error?: React.Node,
+    /** Position of error message tooltip */
+    errorTooltipPosition?: Position,
     /* Intl object */
     intl: Object,
     /** The select button is disabled if true */
@@ -78,6 +81,8 @@ type Props = {
     shouldShowSearchInput?: boolean,
     /** The select button text (by default, component will use comma separated list of all selected option displayText) */
     title?: string | React.Element<any>,
+    /** A CSS class for the tooltip's tether element component */
+    tooltipTetherClassName?: string,
 };
 
 type State = {
@@ -453,7 +458,14 @@ class BaseSelectField extends React.Component<Props, State> {
 
     renderSelectButton = () => {
         const { activeItemID, isOpen } = this.state;
-        const { buttonProps: buttonElProps, isDisabled, className, error } = this.props;
+        const {
+            buttonProps: buttonElProps,
+            isDisabled,
+            className,
+            error,
+            errorTooltipPosition,
+            tooltipTetherClassName,
+        } = this.props;
         const buttonText = this.renderButtonText();
         const buttonProps = {
             ...buttonElProps,
@@ -473,7 +485,12 @@ class BaseSelectField extends React.Component<Props, State> {
         return (
             // Need to store the select button reference so we can calculate the button width
             // in order to set it as the min width of the dropdown list
-            <SelectButton {...buttonProps} error={error}>
+            <SelectButton
+                {...buttonProps}
+                error={error}
+                errorTooltipPosition={errorTooltipPosition}
+                tooltipTetherClassName={tooltipTetherClassName}
+            >
                 {buttonText}
             </SelectButton>
         );